{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "input-otp",
    "lucide-react"
  ],
  "files": [
    {
      "content": "export * from \"./input-otp\";\nexport * as InputOTP from \"./namespace\";\nexport * from \"./styles\";\n",
      "path": "src/registry/ui/input-otp/index.ts",
      "type": "registry:ui"
    },
    {
      "content": "\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\n\nimport { use } from \"react\";\nimport { InputOTPStyles } from \"./styles\";\n\nexport type InputOTPRootProps = React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string;\n};\n\nexport function InputOTPRoot({\n  className,\n  containerClassName,\n  ...props\n}: InputOTPRootProps) {\n  return (\n    <OTPInput\n      className={InputOTPStyles.Root({ className })}\n      containerClassName={InputOTPStyles.Container({\n        class: containerClassName,\n      })}\n      data-slot=\"input-otp\"\n      {...props}\n    />\n  );\n}\n\nexport interface InputOTPGroupProps extends React.ComponentProps<\"div\"> {}\n\nexport function InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n  return (\n    <div\n      className={InputOTPStyles.Group({ className })}\n      data-slot=\"input-otp-group\"\n      {...props}\n    />\n  );\n}\n\nexport interface InputOTPSlotProps extends React.ComponentProps<\"div\"> {\n  index: number;\n}\n\nexport function InputOTPSlot({\n  index,\n  className,\n  ...props\n}: InputOTPSlotProps) {\n  const inputOTPContext = use(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      className={InputOTPStyles.Slot({ className })}\n      data-active={isActive}\n      data-slot=\"input-otp-slot\"\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface InputOTPSeparatorProps extends React.ComponentProps<\"div\"> {}\n\nexport function InputOTPSeparator(props: InputOTPSeparatorProps) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      // biome-ignore lint/a11y/useAriaPropsForRole: This is a decorative separator\n      role=\"separator\"\n      tabIndex={-1}\n      {...props}\n    >\n      <MinusIcon />\n    </div>\n  );\n}\n",
      "path": "src/registry/ui/input-otp/input-otp.tsx",
      "type": "registry:ui"
    },
    {
      "content": "import { cva } from \"~/registry/lib/cva\";\n\nexport const InputOTPStyles = {\n  Container: cva({\n    base: [\"flex items-center gap-2 has-disabled:opacity-50\"],\n  }),\n  Group: cva({\n    base: [\"flex items-center\"],\n  }),\n  Root: cva({\n    base: [\"disabled:cursor-not-allowed\"],\n  }),\n  Slot: cva({\n    base: [\n      \"relative flex size-9 items-center justify-center border-input border-y border-r text-sm shadow-xs outline-none transition-all\",\n      \"first:rounded-l-md first:border-l\",\n      \"last:rounded-r-md\",\n      \"aria-invalid:border-destructive\",\n      \"data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50\",\n      \"data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20\",\n      \"dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n    ],\n  }),\n};\n",
      "path": "src/registry/ui/input-otp/styles.ts",
      "type": "registry:ui"
    },
    {
      "content": "export {\n  InputOTPGroup as Group,\n  InputOTPRoot as Root,\n  InputOTPSeparator as Separator,\n  InputOTPSlot as Slot,\n} from \"./input-otp\";\n",
      "path": "src/registry/ui/input-otp/namespace.ts",
      "type": "registry:ui"
    }
  ],
  "name": "input-otp",
  "registryDependencies": [
    "@kanpeki/cva",
    "@kanpeki/custom-plugin"
  ],
  "type": "registry:ui"
}