{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "input-otp-motion",
"title": "Otp-motion input",
"description": "Styled input: the Otp-motion set. 5 decorative input variations (PopOtp, FadeOtp, SlideOtp, SpringOtp, ShakeOtp) 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-motion.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Motion OTP family: 5 shaped one-time-code inputs. The difference is ONLY in the\n cell entrance animation: pop, fade, slide, spring and a shake on invalid input.\n Every cell is a real ; typing a digit moves\n focus forward, Backspace clears and moves back, and pasting fills every cell.\n Color comes ONLY from tokens. All animations are disabled through\n useReducedMotion. 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 = {\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\n) {\n const isControlled = value !== undefined\n const [internal, setInternal] = React.useState(() => (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>([])\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) => {\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) => {\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\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) => ctl.setAt(i, e.target.value),\n onKeyDown: (e: React.KeyboardEvent) => ctl.onKey(i, e),\n onPaste: (e: React.ClipboardEvent) => 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 boxLook = \"rounded-md border focus-visible:border-ring\"\n\n/* Pop: the filling cell does a short scale jump. */\nexport function PopOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n const reduce = useReducedMotion()\n return (\n \n {ctl.chars.map((ch, i) => (\n \n ))}\n \n )\n}\n\n/* Fade: the filling cell goes from a muted opacity to full opacity. */\nexport function FadeOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n const reduce = useReducedMotion()\n return (\n \n {ctl.chars.map((ch, i) => (\n \n ))}\n \n )\n}\n\n/* Slide: the filling cell does a short slide downwards from the top. */\nexport function SlideOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n const reduce = useReducedMotion()\n return (\n \n {ctl.chars.map((ch, i) => (\n \n ))}\n \n )\n}\n\n/* Spring: the filling cell grows springily and settles into place. */\nexport function SpringOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n const reduce = useReducedMotion()\n return (\n \n {ctl.chars.map((ch, i) => (\n \n ))}\n \n )\n}\n\n/* Shake: if a non-digit character is typed the cell trembles in the danger tone. The invalid marker is cleared by a fixed-duration timeout (cancelled on cleanup). */\nexport function ShakeOtp({ className, size = \"md\", length = 6, value, defaultValue, onValueChange }: OtpProps) {\n const ctl = useOtpCode(length, { value, defaultValue, onValueChange })\n const reduce = useReducedMotion()\n const [invalidAt, setInvalidAt] = React.useState(null)\n\n React.useEffect(() => {\n if (invalidAt === null) return\n const id = window.setTimeout(() => setInvalidAt(null), 420)\n return () => window.clearTimeout(id)\n }, [invalidAt])\n\n const handleChange = (i: number, raw: string) => {\n const ch = raw.slice(-1)\n if (ch && !/[0-9]/.test(ch)) {\n setInvalidAt(i)\n return\n }\n setInvalidAt(null)\n ctl.setAt(i, raw)\n }\n\n return (\n \n {ctl.chars.map((ch, i) => {\n const bad = invalidAt === i\n return (\n handleChange(i, e.target.value)}\n aria-invalid={bad || undefined}\n animate={reduce || !bad ? undefined : { x: [0, -5, 5, -3, 3, 0] }}\n transition={{ duration: 0.38, ease: \"easeInOut\" }}\n className={cn(\n cellBase,\n cellSize[size],\n boxLook,\n ch ? \"border-primary\" : \"border-field-border\",\n \"aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40\"\n )}\n />\n )\n })}\n \n )\n}\n",
"type": "registry:component",
"target": "components/ui/input-otp-motion.tsx"
}
],
"categories": [
"styled",
"input"
],
"type": "registry:component"
}