{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-otp-field-7",
  "description": "OTP field with auto validation",
  "registryDependencies": [
    "@coss/otp-field",
    "@coss/field"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-otp-field-7.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { OTPField, OTPFieldInput } from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 6;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  const [value, setValue] = useState(\"\");\n  const [invalid, setInvalid] = useState(false);\n  const valid = value.length === OTP_LENGTH && value === \"123456\";\n\n  return (\n    <Field className=\"items-center\">\n      <FieldLabel>Verification code</FieldLabel>\n      <OTPField\n        length={OTP_LENGTH}\n        onValueChange={(nextValue) => {\n          setValue(nextValue);\n          setInvalid(\n            nextValue.length === OTP_LENGTH ? nextValue !== \"123456\" : false,\n          );\n        }}\n        value={value}\n      >\n        {OTP_SLOT_KEYS.map((slotKey, index) => (\n          <OTPFieldInput\n            key={slotKey}\n            aria-invalid={invalid || undefined}\n            aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}\n          />\n        ))}\n      </OTPField>\n      {!valid && !invalid && (\n        <FieldDescription>Enter `123456` to pass validation.</FieldDescription>\n      )}\n      {invalid && <FieldError>Code must be 123456.</FieldError>}\n      {valid && <FieldDescription>Code verified.</FieldDescription>}\n    </Field>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "otp field",
    "input",
    "validation"
  ],
  "type": "registry:block"
}