{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp",
  "title": "Input OTP",
  "description": "Accessible one-time password component with copy paste support.",
  "dependencies": [
    "input-otp",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/input-otp.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\n\nimport { cn } from \"@/lib/utils\";\nimport { MinusIcon } from \"lucide-react\";\n\nfunction InputOTP({ className = \"\", containerClassName = \"\", ...props }) {\n\treturn (\n\t\t<OTPInput\n\t\t\tdata-slot=\"input-otp\"\n\t\t\tcontainerClassName={cn(\n\t\t\t\t\"cn-input-otp flex items-center has-disabled:opacity-50\",\n\t\t\t\tcontainerClassName,\n\t\t\t)}\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 }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"input-otp-group\"\n\t\t\tclassName={cn(\n\t\t\t\t\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[2px] flex items-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction InputOTPSlot({ index, className = \"\", ...props }) {\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\"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[2px] relative flex items-center justify-center data-[active=true]:z-10 cursor-default\",\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=\"animate-caret-blink duration-1000 bg-foreground h-4 w-px\" />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction InputOTPSeparator({ ...props } = {}) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"input-otp-separator\"\n\t\t\tclassName=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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\nInputOTP.displayName = \"InputOTP\";\nInputOTPGroup.displayName = \"InputOTPGroup\";\nInputOTPSlot.displayName = \"InputOTPSlot\";\nInputOTPSeparator.displayName = \"InputOTPSeparator\";\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n",
      "type": "registry:component",
      "target": "components/optics/input-otp.jsx"
    }
  ],
  "type": "registry:component"
}