{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-otp-styled",
  "title": "Otp-styled input",
  "description": "Styled input: the Otp-styled set. 5 decorative input variations (BoxOtp, UnderlineOtp, RoundedOtp, SeparatedOtp, FilledOtp) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/input-otp-styled.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* One-time-code (OTP) family: 5 shaped variants that do real code entry.\n   Every cell is a real <input maxLength=1 inputMode=numeric>; typing a digit moves\n   focus to the next cell, Backspace clears and moves back, and pasting a full code\n   fills every cell. The value array is held in state: controlled with\n   value/onValueChange, uncontrolled with defaultValue. Color comes ONLY from\n   tokens (a filled cell is border-primary, an empty one border-field-border). Only\n   FilledOtp uses animation, and it is disabled under reduced-motion. */\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\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\nconst rootBase = \"inline-flex items-center gap-2\"\n\n/* Box: kenarlikli kare hucreler. */\nexport function BoxOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n  const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n  return (\n    <div data-slot=\"styled-otp\" role=\"group\" aria-label=\"One-time code\" className={cn(rootBase, className)}>\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 focus-visible:border-ring\",\n            ch ? \"border-primary\" : \"border-field-border\"\n          )}\n        />\n      ))}\n    </div>\n  )\n}\n\n/* Underline: borderless cells with a token underline that thickens when filled or focused. */\nexport function UnderlineOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n  const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n  return (\n    <div data-slot=\"styled-otp\" role=\"group\" aria-label=\"One-time code\" className={cn(rootBase, className)}>\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-none border-0 border-b-2 focus-visible:border-b-[3px] focus-visible:border-primary focus-visible:ring-0\",\n            ch ? \"border-b-[3px] border-primary\" : \"border-field-border\"\n          )}\n        />\n      ))}\n    </div>\n  )\n}\n\n/* Rounded: tam yuvarlak hap seklinde hucreler. */\nexport function RoundedOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n  const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n  return (\n    <div data-slot=\"styled-otp\" role=\"group\" aria-label=\"One-time code\" className={cn(rootBase, className)}>\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-full border focus-visible:border-ring\",\n            ch ? \"border-primary\" : \"border-field-border\"\n          )}\n        />\n      ))}\n    </div>\n  )\n}\n\n/* Separated: the cells split into two groups in the middle with a token line between them. */\nexport function SeparatedOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n  const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n  const mid = Math.ceil(length / 2)\n  return (\n    <div data-slot=\"styled-otp\" role=\"group\" aria-label=\"One-time code\" className={cn(rootBase, className)}>\n      {ctl.chars.map((ch, i) => (\n        <React.Fragment key={i}>\n          {i === mid ? (\n            <span aria-hidden=\"true\" className=\"mx-0.5 h-0.5 w-3 rounded-full bg-input\" />\n          ) : null}\n          <input\n            {...cellHandlers(ctl, i)}\n            className={cn(\n              cellBase,\n              cellSize[size],\n              \"rounded-md border focus-visible:border-ring\",\n              ch ? \"border-primary\" : \"border-field-border\"\n            )}\n          />\n        </React.Fragment>\n      ))}\n    </div>\n  )\n}\n\n/* Filled: cells with a soft token fill; a primary ring on focus and a slight scale pop on entry. */\nexport function FilledOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n  const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"styled-otp\" role=\"group\" aria-label=\"One-time code\" className={cn(rootBase, className)}>\n      {ctl.chars.map((ch, i) => (\n        <motion.input\n          key={i}\n          {...cellHandlers(ctl, i)}\n          animate={reduce ? undefined : { scale: ch ? [1, 1.08, 1] : 1 }}\n          transition={{ duration: 0.28, ease: \"easeOut\" }}\n          className={cn(\n            cellBase,\n            cellSize[size],\n            \"rounded-md border bg-muted focus-visible:border-primary focus-visible:ring-primary/50\",\n            ch ? \"border-primary\" : \"border-field-border\"\n          )}\n        />\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/input-otp-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "input"
  ],
  "type": "registry:component"
}