{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp-tone",
  "title": "Otp-tone input",
  "description": "Styled input: the Otp-tone set. 5 decorative input variations (InfoOtp, SuccessOtp, WarningOtp, DangerOtp, MutedOtp) 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-tone.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Tone OTP family: 5 semantically toned one-time-code inputs (info, success,\n   warning, danger, muted). The difference is ONLY the color: the empty cell border,\n   the filled cell border/fill and the focus ring all come from the relevant token.\n   Every cell is a real <input maxLength=1 inputMode=numeric>; typing a digit moves\n   focus forward, Backspace clears and moves back, and pasting fills every cell.\n   Color comes ONLY from tokens, via alpha color-mix. No animation.\n   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 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\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\ntype Tone = \"info\" | \"success\" | \"warning\" | \"danger\" | \"muted\"\n\n/* Per tone: an empty border, a filled border plus a soft fill, and the focus ring. */\nconst toneEmpty: Record<Tone, string> = {\n  info: \"border-[color-mix(in_oklab,var(--color-info)_35%,transparent)]\",\n  success: \"border-[color-mix(in_oklab,var(--color-success)_35%,transparent)]\",\n  warning: \"border-[color-mix(in_oklab,var(--color-warning)_35%,transparent)]\",\n  danger: \"border-[color-mix(in_oklab,var(--color-danger)_35%,transparent)]\",\n  muted: \"border-field-border\",\n}\n\nconst toneFilled: Record<Tone, string> = {\n  info: \"border-info bg-[color-mix(in_oklab,var(--color-info)_12%,transparent)]\",\n  success: \"border-success bg-[color-mix(in_oklab,var(--color-success)_12%,transparent)]\",\n  warning: \"border-warning bg-[color-mix(in_oklab,var(--color-warning)_12%,transparent)]\",\n  danger: \"border-danger bg-[color-mix(in_oklab,var(--color-danger)_12%,transparent)]\",\n  muted: \"border-muted-foreground bg-muted\",\n}\n\nconst toneFocus: Record<Tone, string> = {\n  info: \"focus-visible:border-info focus-visible:ring-info/40\",\n  success: \"focus-visible:border-success focus-visible:ring-success/40\",\n  warning: \"focus-visible:border-warning focus-visible:ring-warning/40\",\n  danger: \"focus-visible:border-danger focus-visible:ring-danger/40\",\n  muted: \"focus-visible:border-ring focus-visible:ring-ring/50\",\n}\n\n/* Shared shell: the only difference is the tone. */\nfunction ToneOtp({ tone, className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps & { tone: Tone }) {\n  const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n  return (\n    <div\n      data-slot=\"styled-input-otp\"\n      data-tone={tone}\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(\n            cellBase,\n            cellSize[size],\n            \"rounded-md border\",\n            toneFocus[tone],\n            ch ? toneFilled[tone] : toneEmpty[tone]\n          )}\n        />\n      ))}\n    </div>\n  )\n}\n\n/* Info: the info tone, for a neutral verification flow. */\nexport function InfoOtp(props: OtpProps) {\n  return <ToneOtp tone=\"info\" {...props} />\n}\n\n/* Success: onaylanmis bir kod girisinin tonu. */\nexport function SuccessOtp(props: OtpProps) {\n  return <ToneOtp tone=\"success\" {...props} />\n}\n\n/* Warning: dikkat isteyen bir kod girisinin tonu. */\nexport function WarningOtp(props: OtpProps) {\n  return <ToneOtp tone=\"warning\" {...props} />\n}\n\n/* Danger: the tone of an incorrect or risky code entry. */\nexport function DangerOtp(props: OtpProps) {\n  return <ToneOtp tone=\"danger\" {...props} />\n}\n\n/* Muted: sessiz, notr token tonu. */\nexport function MutedOtp(props: OtpProps) {\n  return <ToneOtp tone=\"muted\" {...props} />\n}\n",
      "type": "registry:component",
      "target": "components/ui/input-otp-tone.tsx"
    }
  ],
  "categories": [
    "styled",
    "input"
  ],
  "type": "registry:component"
}