{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp-2",
  "type": "registry:component",
  "title": "Input OTP 2",
  "description": "Input OTP 2. 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": [
    "button",
    "input-otp",
    "label"
  ],
  "files": [
    {
      "path": "components/watermelon/input-otp-2.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useEffect, useId, useState } from 'react';\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from '@/components/base-ui/input-otp';\nimport { Label } from '@/components/base-ui/label';\nimport { Button } from '@/components/base-ui/button';\n\nconst InputOtp2 = () => {\n  const id = useId();\n  const [seconds, setSeconds] = useState(30);\n\n  useEffect(() => {\n    if (seconds === 0) return;\n\n    const timer = setInterval(() => {\n      setSeconds((prev) => prev - 1);\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [seconds]);\n\n  const handleResend = () => {\n    setSeconds(30);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"text-center\">\n        <Label htmlFor={id} className=\"text-base font-semibold\">\n          Verify Code\n        </Label>\n        <p className=\"text-muted-foreground text-start text-sm\">\n          Enter the 4-digit code sent to you\n        </p>\n      </div>\n\n      <InputOTP id={id} maxLength={4} className=\"w-full\">\n        <InputOTPGroup className=\"flex justify-between gap-3\">\n          {[0, 1, 2, 3].map((i) => (\n            <InputOTPSlot\n              key={i}\n              index={i}\n              className=\"data-[active=true]:ring-primary/30! data-[active=true]:border-primary/50 h-14 w-14 rounded-sm! border text-lg data-[active=true]:ring-2!\"\n            />\n          ))}\n        </InputOTPGroup>\n      </InputOTP>\n\n      <div className=\"flex items-center justify-start text-sm\">\n        <span className=\"text-muted-foreground\">\n          {seconds > 0\n            ? `Resend in 00:${seconds.toString().padStart(2, '0')}`\n            : \"Didn't receive code?\"}\n        </span>\n\n        <Button\n          variant={'link'}\n          onClick={handleResend}\n          disabled={seconds > 0}\n          className=\"p-0 pl-1\"\n        >\n          Resend\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default InputOtp2;\n"
    }
  ]
}