{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp-length",
  "title": "Otp-length input",
  "description": "Styled input: the Otp-length set. 5 decorative input variations (FourOtp, SixOtp, EightOtp, GroupedOtp, MaskedOtp) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/input-otp-length.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Length OTP family: 5 code shapes (4 digits, 6 digits, 8 digits, a 3-3 group and a\n   masked one). The difference is ONLY the shape of the code: the number of digits,\n   the grouping, and whether the digit is masked with a dot. Every cell is a real\n   <input maxLength=1 inputMode=numeric>; typing a digit moves focus forward,\n   Backspace clears and moves back, and pasting fills every cell. Color comes ONLY\n   from tokens. No animation. Self-sufficient: NO input-otp package and NO radix. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype OtpProps = {\n  className?: string\n  size?: StyledSize\n  length?: number\n  value?: string\n  defaultValue?: string\n  onValueChange?: (v: string) => void\n}\n\nconst cellSize: Record<StyledSize, string> = {\n  sm: \"size-8 text-sm\",\n  md: \"size-10 text-base\",\n  lg: \"size-12 text-lg\",\n  xl: \"size-14 text-xl\",\n}\n\nconst dotSize: Record<StyledSize, string> = {\n  sm: \"size-1.5\",\n  md: \"size-2\",\n  lg: \"size-2.5\",\n  xl: \"size-3\",\n}\n\nconst cellBase =\n  \"bg-transparent text-center font-medium tabular-nums text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50\"\n\nconst rootBase = \"inline-flex items-center gap-2\"\n\nconst boxLook = \"rounded-md border focus-visible:border-ring\"\n\n/* Kontrollu/kontrolsuz OTP durumu + ileri/geri odak, yapistirma. */\nfunction useOtpCode(\n  length: number,\n  { value, defaultValue, onValueChange }: Pick<OtpProps, \"value\" | \"defaultValue\" | \"onValueChange\">\n) {\n  const isControlled = value !== undefined\n  const [internal, setInternal] = React.useState<string>(() => (defaultValue ?? \"\").slice(0, length))\n  const current = (isControlled ? value : internal) ?? \"\"\n\n  const chars = React.useMemo(() => {\n    const arr: string[] = Array(length).fill(\"\")\n    for (let i = 0; i < length; i++) arr[i] = current[i] ?? \"\"\n    return arr\n  }, [current, length])\n\n  const refs = React.useRef<Array<HTMLInputElement | null>>([])\n\n  const commit = (next: string) => {\n    if (!isControlled) setInternal(next)\n    onValueChange?.(next)\n  }\n\n  const setAt = (i: number, raw: string) => {\n    const ch = raw.slice(-1)\n    const arr = [...chars]\n    arr[i] = ch\n    commit(arr.join(\"\"))\n    if (ch && i < length - 1) refs.current[i + 1]?.focus()\n  }\n\n  const onKey = (i: number, e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Backspace\") {\n      const arr = [...chars]\n      if (chars[i]) {\n        arr[i] = \"\"\n        commit(arr.join(\"\"))\n      } else if (i > 0) {\n        arr[i - 1] = \"\"\n        commit(arr.join(\"\"))\n        refs.current[i - 1]?.focus()\n      }\n      e.preventDefault()\n    } else if (e.key === \"ArrowLeft\" && i > 0) {\n      refs.current[i - 1]?.focus()\n    } else if (e.key === \"ArrowRight\" && i < length - 1) {\n      refs.current[i + 1]?.focus()\n    }\n  }\n\n  const onPaste = (i: number, e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault()\n    const text = e.clipboardData.getData(\"text\").replace(/\\s+/g, \"\")\n    if (!text) return\n    const arr = [...chars]\n    for (let k = 0; k < text.length && i + k < length; k++) arr[i + k] = text[k]\n    commit(arr.join(\"\"))\n    const last = Math.min(i + text.length, length - 1)\n    refs.current[last]?.focus()\n  }\n\n  return { chars, refs, setAt, onKey, onPaste }\n}\n\ntype Controller = ReturnType<typeof useOtpCode>\n\nfunction cellHandlers(ctl: Controller, i: number) {\n  return {\n    ref: (el: HTMLInputElement | null) => {\n      ctl.refs.current[i] = el\n    },\n    value: ctl.chars[i],\n    onChange: (e: React.ChangeEvent<HTMLInputElement>) => ctl.setAt(i, e.target.value),\n    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => ctl.onKey(i, e),\n    onPaste: (e: React.ClipboardEvent<HTMLInputElement>) => ctl.onPaste(i, e),\n    inputMode: \"numeric\" as const,\n    autoComplete: i === 0 ? (\"one-time-code\" as const) : (\"off\" as const),\n    maxLength: 1,\n    \"aria-label\": `Digit ${i + 1}`,\n  }\n}\n\n/* Shared shell: a plain box row, the only difference is the digit count. */\nfunction PlainOtp({ className, size = \"md\", length, value, defaultValue, onValueChange }: OtpProps & { length: number }) {\n  const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n  return (\n    <div\n      data-slot=\"styled-input-otp\"\n      role=\"group\"\n      aria-label=\"Verification code\"\n      className={cn(rootBase, className)}\n    >\n      {ctl.chars.map((ch, i) => (\n        <input\n          key={i}\n          {...cellHandlers(ctl, i)}\n          className={cn(cellBase, cellSize[size], boxLook, ch ? \"border-primary\" : \"border-field-border\")}\n        />\n      ))}\n    </div>\n  )\n}\n\n/* Four: 4 haneli kisa kod. */\nexport function FourOtp({ length = 4, ...props }: OtpProps) {\n  return <PlainOtp length={length} {...props} />\n}\n\n/* Six: 6 haneli standart dogrulama kodu. */\nexport function SixOtp({ length = 6, ...props }: OtpProps) {\n  return <PlainOtp length={length} {...props} />\n}\n\n/* Eight: an 8-digit long code; the sm or md size is recommended for narrow areas. */\nexport function EightOtp({ length = 8, ...props }: OtpProps) {\n  return <PlainOtp length={length} {...props} />\n}\n\n/* Grouped: haneler 3-3 iki gruba ayrilir, aralarinda token tire. */\nexport function GroupedOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n  const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n  const groupAt = 3\n  return (\n    <div\n      data-slot=\"styled-input-otp\"\n      role=\"group\"\n      aria-label=\"Verification code\"\n      className={cn(rootBase, className)}\n    >\n      {ctl.chars.map((ch, i) => (\n        <React.Fragment key={i}>\n          {i > 0 && i % groupAt === 0 ? (\n            <span aria-hidden=\"true\" className=\"mx-1 h-0.5 w-3 shrink-0 rounded-full bg-input\" />\n          ) : null}\n          <input\n            {...cellHandlers(ctl, i)}\n            className={cn(cellBase, cellSize[size], boxLook, ch ? \"border-primary\" : \"border-field-border\")}\n          />\n        </React.Fragment>\n      ))}\n    </div>\n  )\n}\n\n/* Masked: a token dot is shown instead of the digit; the value stays in the real input, the text is made transparent and an aria-hidden dot is drawn over it. */\nexport function MaskedOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n  const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n  return (\n    <div\n      data-slot=\"styled-input-otp\"\n      role=\"group\"\n      aria-label=\"Verification code\"\n      className={cn(rootBase, className)}\n    >\n      {ctl.chars.map((ch, i) => (\n        <span key={i} className=\"relative inline-flex\">\n          <input\n            {...cellHandlers(ctl, i)}\n            className={cn(\n              cellBase,\n              cellSize[size],\n              boxLook,\n              \"caret-primary text-transparent selection:bg-transparent selection:text-transparent\",\n              ch ? \"border-primary\" : \"border-field-border\"\n            )}\n          />\n          {ch ? (\n            <span\n              aria-hidden=\"true\"\n              className={cn(\n                \"pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground\",\n                dotSize[size]\n              )}\n            />\n          ) : null}\n        </span>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/input-otp-length.tsx"
    }
  ],
  "categories": [
    "styled",
    "input"
  ],
  "type": "registry:component"
}