{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-44",
  "title": "Joined code input",
  "description": "Four code slots joined into one control.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/field.json",
    "https://ui.ndekocode.dev/r/otp-field.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/input/input-44.tsx",
      "content": "import { Field, FieldLabel } from '@/registry/ndeko/ui/field';\nimport { OTPField, OTPFieldInput } from '@/registry/ndeko/ui/otp-field';\n\nconst CODE_LENGTH = 4;\n\nconst SLOTS = Array.from({ length: CODE_LENGTH }, (_, index) => index);\n\nconst JOINED_SLOT =\n  'rounded-none first:rounded-s-md last:rounded-e-md focus-visible:z-10';\n\nfunction slotLabelOf(index: number) {\n  if (index === 0) {\n    return undefined;\n  }\n  const position = index + 1;\n  return `Character ${position} of ${CODE_LENGTH}`;\n}\n\nexport default function Input44() {\n  return (\n    <Field className='w-full max-w-xs'>\n      <FieldLabel>Verification code</FieldLabel>\n      <OTPField length={CODE_LENGTH} className='gap-0'>\n        {SLOTS.map((index) => (\n          <OTPFieldInput\n            key={index}\n            className={JOINED_SLOT}\n            aria-label={slotLabelOf(index)}\n          />\n        ))}\n      </OTPField>\n    </Field>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "input"
  ],
  "type": "registry:component"
}