{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "input-otp",
  "title": "Input OTP",
  "author": "Matthew Blode",
  "description": "A one-time password input with individual character fields.",
  "dependencies": ["input-otp"],
  "files": [
    {
      "path": "ui/input-otp.tsx",
      "content": "\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport type * as React from \"react\";\nimport { useContext } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst InputOTP = ({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string;\n}) => (\n  <OTPInput\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    containerClassName={cn(\"flex items-center gap-2 has-disabled:opacity-50\", containerClassName)}\n    data-slot=\"input-otp\"\n    {...props}\n  />\n);\n\nconst InputOTPGroup = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div className={cn(\"flex items-center\", className)} data-slot=\"input-otp-group\" {...props} />\n);\n\nconst InputOTPSlot = ({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number;\n}) => {\n  const inputOTPContext = useContext(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      className={cn(\n        \"group/slot relative flex h-[var(--field-height)] w-10 items-center justify-center border-input border-y border-r text-2xl shadow-input transition-[color,background-color,border-color,box-shadow] first:rounded-l-lg first:border-l last:rounded-r-lg hover:bg-background\",\n        className,\n      )}\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-[24px] w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n      {isActive && (\n        <div className=\"absolute inset-0 ring ring-ring group-first/slot:rounded-l-lg group-last/slot:rounded-r-lg\" />\n      )}\n    </div>\n  );\n};\n\nconst InputOTPSeparator = ({ className, ...props }: React.ComponentProps<\"hr\">) => (\n  <hr\n    className={cn(\"mx-1 h-1 w-2 rounded-full border-0 bg-border\", className)}\n    data-slot=\"input-otp-separator\"\n    {...props}\n  />\n);\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}