{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp",
  "title": "Input OTP",
  "description": "One-time password input with individual digit slots for verification codes.",
  "dependencies": [
    "input-otp"
  ],
  "files": [
    {
      "path": "packages/ui/src/input-otp.tsx",
      "content": "\"use client\";\n\nimport { OTPFieldPreview as OTPField } from \"@base-ui/react/otp-field\";\nimport {\n  LoaderCircle as LoaderCircleIcon,\n  Minus as MinusIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"./utils\";\n\nexport type InputOTPProps = Omit<OTPField.Root.Props, \"render\"> & {\n  /**\n   * Whether the input is in a loading state\n   */\n  isLoading?: boolean;\n};\n\nconst InputOTP = ({\n  className,\n  isLoading = false,\n  disabled,\n  children,\n  ...props\n}: InputOTPProps) => (\n  <div className=\"inline-flex items-center gap-2\">\n    <OTPField.Root\n      className={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        className\n      )}\n      data-slot=\"input-otp\"\n      disabled={disabled || isLoading}\n      {...props}\n    >\n      {children}\n    </OTPField.Root>\n    {isLoading && (\n      <LoaderCircleIcon\n        aria-hidden=\"true\"\n        className=\"animate-spin text-muted-foreground\"\n        size={16}\n      />\n    )}\n  </div>\n);\n\nInputOTP.displayName = \"InputOTP\";\n\nexport interface InputOTPGroupProps extends React.ComponentProps<\"div\"> {}\n\nexport const InputOTPGroup = ({\n  className,\n  ref,\n  ...props\n}: InputOTPGroupProps & React.RefAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex items-center gap-2\", className)}\n    data-slot=\"input-otp-group\"\n    ref={ref}\n    {...props}\n  />\n);\n\nInputOTPGroup.displayName = \"InputOTPGroup\";\n\nexport type InputOTPSlotProps = OTPField.Input.Props;\n\nexport const InputOTPSlot = ({ className, ...props }: InputOTPSlotProps) => (\n  <OTPField.Input\n    className={cn(\n      // 16px on mobile to prevent iOS zoom when the slot input takes focus\n      \"bg-input-bg text-center text-base tabular-nums md:text-sm\",\n      \"relative h-10 w-10 outline-none transition-[color,box-shadow]\",\n      \"rounded-md border border-input shadow-xs\",\n      // Focus ring matching the Input component\n      \"focus:border-ring focus:ring-1 focus:ring-ring focus:ring-inset\",\n      // Invalid states — `aria-invalid` for keystone Field, `data-[invalid]` from Base UI Field.Root\n      \"aria-invalid:border-destructive aria-invalid:ring-destructive\",\n      \"data-[invalid]:border-destructive data-[invalid]:ring-destructive\",\n      // Disabled\n      \"disabled:cursor-not-allowed\",\n      className\n    )}\n    data-slot=\"input-otp-slot\"\n    {...props}\n  />\n);\n\nInputOTPSlot.displayName = \"InputOTPSlot\";\n\nexport type InputOTPSeparatorProps = OTPField.Separator.Props;\n\nexport const InputOTPSeparator = ({\n  className,\n  children,\n  ...props\n}: InputOTPSeparatorProps) => (\n  <OTPField.Separator\n    className={cn(\n      \"flex items-center [&_svg:not([class*='size-'])]:size-4\",\n      className\n    )}\n    data-slot=\"input-otp-separator\"\n    {...props}\n  >\n    {children ?? <MinusIcon aria-hidden=\"true\" />}\n  </OTPField.Separator>\n);\n\nInputOTPSeparator.displayName = \"InputOTPSeparator\";\n\nexport { InputOTP };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}