{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp",
  "title": "Input OTP",
  "description": "One-time-password input with individual slots, built on input-otp.",
  "dependencies": [
    "input-otp@^1.5.0",
    "lucide-react@^1.48.0"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/input-otp/input-otp.tsx",
      "content": "'use client'\n\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport { MinusIcon } from 'lucide-react'\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nfunction InputOTP({\n\tclassName,\n\tcontainerClassName,\n\t...props\n}: React.ComponentProps<typeof OTPInput> & {\n\tcontainerClassName?: string\n}) {\n\treturn (\n\t\t<OTPInput\n\t\t\tdata-slot=\"input-otp\"\n\t\t\tcontainerClassName={cn('cn-input-otp flex items-center has-disabled:opacity-50', containerClassName)}\n\t\t\tspellCheck={false}\n\t\t\tclassName={cn('disabled:cursor-not-allowed', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"input-otp-group\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction InputOTPSlot({\n\tindex,\n\tclassName,\n\t...props\n}: React.ComponentProps<'div'> & {\n\tindex: number\n}) {\n\tconst inputOTPContext = React.useContext(OTPInputContext)\n\tconst { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"input-otp-slot\"\n\t\t\tdata-active={isActive}\n\t\t\tclassName={cn(\n\t\t\t\t'relative flex size-10 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{char}\n\t\t\t{hasFakeCaret && (\n\t\t\t\t<div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n\t\t\t\t\t<div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"input-otp-separator\"\n\t\t\tclassName=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n\t\t\trole=\"separator\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<MinusIcon />\n\t\t</div>\n\t)\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
      "type": "registry:ui",
      "target": "components/ui/input-otp.tsx"
    }
  ],
  "type": "registry:ui"
}