{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-otp-field-4",
  "description": "OTP field with label",
  "registryDependencies": [
    "@coss/otp-field",
    "@coss/field"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-otp-field-4.tsx",
      "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { OTPField, OTPFieldInput } from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 4;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  return (\n    <Field className=\"items-center\">\n      <FieldLabel>Verification code</FieldLabel>\n      <OTPField length={OTP_LENGTH}>\n        {OTP_SLOT_KEYS.map((slotKey, index) => (\n          <OTPFieldInput\n            key={slotKey}\n            aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}\n          />\n        ))}\n      </OTPField>\n      <FieldDescription>\n        Enter the {OTP_LENGTH}-digit code sent to your email.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "otp field",
    "input",
    "field"
  ],
  "type": "registry:block"
}