{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-with-seperator",
  "type": "registry:component",
  "title": "OTP with Seperator",
  "description": "A component for inputting OTP codes with a custom separator",
  "registryDependencies": [
    "input-otp",
    "label"
  ],
  "files": [
    {
      "path": "registry/default/components/input/otp-with-seperator.tsx",
      "content": "import {\r\n    InputOTP,\r\n    InputOTPGroup,\r\n    InputOTPSeparator,\r\n    InputOTPSlot,\r\n} from '@/registry/default/ui/input-otp'\r\nimport { Label } from '@/registry/default/ui/label'\r\n\r\n// Change the inputLength to the desired number of slots\r\nconst inputLength = [3, 3]\r\nconst sum = () => inputLength.reduce((a, b) => a + b, 0)\r\n\r\nexport default function OtpWithSeperator() {\r\n    return (\r\n        <div className=\"flex w-full max-w-4/5 flex-col gap-2\">\r\n            <Label>OTP with seperator</Label>\r\n\r\n            <InputOTP maxLength={sum()}>\r\n                <InputOTPGroup>\r\n                    {Array.from({ length: inputLength[0] }, (_, index) => (\r\n                        <InputOTPSlot key={index} index={index} />\r\n                    ))}\r\n                </InputOTPGroup>\r\n                <InputOTPSeparator className=\"text-muted\" />\r\n                <InputOTPGroup>\r\n                    {Array.from({ length: inputLength[1] }, (_, index) => (\r\n                        <InputOTPSlot\r\n                            key={index}\r\n                            index={index + inputLength[0]}\r\n                        />\r\n                    ))}\r\n                </InputOTPGroup>\r\n            </InputOTP>\r\n\r\n            <p className=\"text-muted-foreground text-sm\">\r\n                Built with{' '}\r\n                <a\r\n                    target=\"_blank\"\r\n                    href=\"https://input-otp.rodz.dev/\"\r\n                    className=\"underline underline-offset-3\"\r\n                >\r\n                    input-otp\r\n                </a>{' '}\r\n            </p>\r\n        </div>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/otp-with-seperator.tsx"
    }
  ]
}