{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp-9",
  "type": "registry:component",
  "title": "Input OTP 9",
  "description": "Input OTP 9. A set of input fields designed to capture one-time passwords (OTP) or verification codes, typically split into individual boxes for better UX and security.",
  "dependencies": [],
  "registryDependencies": [
    "input-otp",
    "label"
  ],
  "files": [
    {
      "path": "components/watermelon/input-otp-9.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useId } from 'react';\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from '@/components/base-ui/input-otp';\nimport { Label } from '@/components/base-ui/label';\n\nconst InputOtp9 = () => {\n  const id = useId();\n\n  return (\n    <div className=\"max-w-md space-y-1\">\n      <div className=\"text-center\">\n        <Label htmlFor={id} className=\"text-sm font-semibold\">\n          Enter 6 digit OTP\n        </Label>\n      </div>\n\n      <InputOTP id={id} maxLength={6}>\n        <div className=\"flex items-center justify-center gap-2\">\n          <InputOTPGroup className=\"flex gap-1.5\">\n            {[0, 1, 2].map((i) => (\n              <InputOTPSlot\n                key={i}\n                index={i}\n                className=\"bg-muted/70 data-[active=true]:ring-primary/20 data-[active=true]:border-primary/50 h-8 w-8 rounded-lg border text-sm font-medium shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),inset_0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_2px_4px_0px_rgba(0,0,0,0.05)] transition-all data-[active=true]:ring-2 dark:shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.25),inset_0px_-1px_0px_0px_rgba(0,0,0,0.7),0px_2px_4px_0px_rgba(0,0,0,0.3)]\"\n              />\n            ))}\n          </InputOTPGroup>\n\n          <InputOTPSeparator className=\"text-muted-foreground text-lg\">\n            —\n          </InputOTPSeparator>\n\n          <InputOTPGroup className=\"flex gap-1.5\">\n            {[3, 4, 5].map((i) => (\n              <InputOTPSlot\n                key={i}\n                index={i}\n                className=\"bg-muted/70 data-[active=true]:ring-primary/20 data-[active=true]:border-primary/50 h-8 w-8 rounded-lg border text-sm font-medium shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,1),inset_0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_2px_4px_0px_rgba(0,0,0,0.05)] transition-all data-[active=true]:ring-2 dark:shadow-[inset_0px_1px_0px_0px_rgba(255,255,255,0.25),inset_0px_-1px_0px_0px_rgba(0,0,0,0.7),0px_2px_4px_0px_rgba(0,0,0,0.3)]\"\n              />\n            ))}\n          </InputOTPGroup>\n        </div>\n      </InputOTP>\n    </div>\n  );\n};\n\nexport default InputOtp9;\n"
    }
  ]
}