{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-field",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "@coss/separator"
  ],
  "files": [
    {
      "path": "registry/default/ui/otp-field.tsx",
      "content": "\"use client\";\n\nimport { OTPField as OTPFieldPrimitive } from \"@base-ui/react/otp-field\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Separator } from \"@/registry/default/ui/separator\";\n\nexport function OTPField({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof OTPFieldPrimitive.Root> & {\n  size?: \"default\" | \"lg\";\n}): React.ReactElement {\n  return (\n    <OTPFieldPrimitive.Root\n      className={cn(\n        \"flex items-center gap-2 has-disabled:opacity-64 has-disabled:**:data-[slot=otp-field-input]:shadow-none has-disabled:**:data-[slot=otp-field-input]:before:shadow-none!\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"otp-field\"\n      {...props}\n    />\n  );\n}\n\nexport function OTPFieldInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof OTPFieldPrimitive.Input>): React.ReactElement {\n  return (\n    <OTPFieldPrimitive.Input\n      className={cn(\n        \"relative in-[[data-slot=otp-field][data-size=lg]]:size-10 size-9 min-w-0 rounded-lg border border-input bg-background not-dark:bg-clip-padding text-center in-[[data-slot=otp-field][data-size=lg]]:text-lg text-base text-foreground in-[[data-slot=otp-field][data-size=lg]]:leading-10 leading-9 shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-focus-visible:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:z-10 focus-visible:border-ring focus-visible:shadow-none focus-visible:ring-[3px] focus-visible:ring-ring/24 aria-invalid:border-destructive/36 aria-invalid:shadow-none aria-invalid:focus-visible:border-destructive/64 aria-invalid:focus-visible:ring-destructive/16 sm:in-[[data-slot=otp-field][data-size=lg]]:size-9 sm:size-8 sm:in-[[data-slot=otp-field][data-size=lg]]:text-base sm:text-sm sm:in-[[data-slot=otp-field][data-size=lg]]:leading-9 sm:leading-8 dark:bg-input/32 dark:aria-invalid:focus-visible:ring-destructive/24 dark:not-focus-visible:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"otp-field-input\"\n      spellCheck={false}\n      {...props}\n    />\n  );\n}\n\nexport function OTPFieldSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <OTPFieldPrimitive.Separator\n      render={\n        <Separator\n          className={cn(\n            \"rounded-full bg-input data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-3\",\n            className,\n          )}\n          orientation=\"horizontal\"\n          {...props}\n        />\n      }\n    />\n  );\n}\n\nexport { OTPFieldPrimitive };\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "--animate-caret-blink": "1s ease-out infinite caret-blink"
    }
  },
  "css": {
    "@keyframes caret-blink": {
      "0%, 70%, to": {
        "opacity": "1"
      },
      "20%, 50%": {
        "opacity": "0"
      }
    }
  },
  "type": "registry:ui"
}