51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2090,'use client'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { focusRing, invalidRing, transitionBase } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { useLabels, usePreset } from '@/components/ui/labels-context'; // Box sizes follow the Figma InputDigit frames and are not bound to the control scale on purpose (owner decision): // sm 64px and md 80px carry the 48px digit role, lg 96px carries the 60px digit role. const digitVariants = cva( [ 'rounded-control border border-solid border-input bg-background p-0 text-center font-medium tabular-nums text-foreground caret-transparent', 'placeholder:text-text-subtle shadow-elevation-control', transitionBase, 'hover:border-border-bold', focusRing, invalidRing, 'disabled:cursor-not-allowed disabled:opacity-disabled', 'data-[success=true]:border-border-success', ], { variants: { size: { sm: 'h-16 w-16 typography-digit-md', md: 'h-20 w-20 typography-digit-md', lg: 'h-24 w-24 typography-digit-lg', // Verification code box (Figma _Code digit): 40 x 48, 16/600. Default size in the zero preset. code: 'h-12 w-10 typography-kpi-value', }, }, defaultVariants: { size: 'lg' }, }, ); export interface InputDigitProps extends Omit, 'onChange' | 'defaultValue'>, VariantProps { // Number of boxes. Figma ships 6 (default) and 4. length?: number; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; // Fires once when every box is filled. onComplete?: (value: string) => void; // `numeric` accepts 0-9 and opens the numeric keypad; `alphanumeric` also accepts letters. type?: 'numeric' | 'alphanumeric'; // Draws a hyphen after this many boxes. Defaults to 3 for six boxes, none otherwise. separatorAfter?: number; disabled?: boolean; invalid?: boolean; success?: boolean; label?: React.ReactNode; hint?: React.ReactNode; // Group name and per-box names ("" is submitted as one hidden value). name?: string; autoFocus?: boolean; placeholder?: string; } const patterns = { numeric: /^[0-9]$/, alphanumeric: /^[0-9a-zA-Z]$/ } as const; const InputDigit = React.forwardRef( ( { className, length = 6, value, defaultValue = '', onValueChange, onComplete, type = 'numeric', separatorAfter, size, disabled = false, invalid = false, success = false, label, hint, name, autoFocus = false, placeholder = '0', id, ...props }, ref, ) => { const zero = usePreset() === 'zero'; size = size ?? (zero ? 'code' : undefined); const l = useLabels(); const autoId = React.useId(); const baseId = id ?? autoId; const labelId = `${baseId}-label`; const hintId = `${baseId}-hint`; const accepts = patterns[type]; const splitAt = separatorAfter ?? (length === 6 ? 3 : undefined); const [inner, setInner] = React.useState(() => defaultValue.slice(0, length)); const current = (value ?? inner).slice(0, length); const refs = React.useRef>([]); const chars = Array.from({ length }, (_, index) => current[index] ?? ''); const commit = (next: string[]) => { const joined = next.join(''); setInner(joined); onValueChange?.(joined); if (joined.length === length && next.every(Boolean)) onComplete?.(joined); }; const focusAt = (index: number) => { const target = refs.current[Math.min(Math.max(index, 0), length - 1)]; target?.focus(); target?.select(); }; const insert = (start: number, text: string) => { const incoming = Array.from(text).filter((char) => accepts.test(char)); if (incoming.length === 0) return; const next = [...chars]; let index = start; for (const char of incoming) { if (index >= length) break; next[index] = char; index += 1; } commit(next); focusAt(index >= length ? length - 1 : index); }; const handleKeyDown = (index: number) => (event: React.KeyboardEvent) => { switch (event.key) { case 'Backspace': { event.preventDefault(); const next = [...chars]; if (next[index]) { next[index] = ''; commit(next); } else if (index > 0) { next[index - 1] = ''; commit(next); focusAt(index - 1); } break; } case 'Delete': { event.preventDefault(); const next = [...chars]; next[index] = ''; commit(next); break; } case 'ArrowLeft': event.preventDefault(); focusAt(index - 1); break; case 'ArrowRight': event.preventDefault(); focusAt(index + 1); break; case 'Home': event.preventDefault(); focusAt(0); break; case 'End': event.preventDefault(); focusAt(length - 1); break; default: if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) { event.preventDefault(); if (accepts.test(event.key)) insert(index, event.key); } } }; const describedBy = hint ? hintId : undefined; return (

{label ? ( {label} ) : null}

{chars.map((char, index) => ( {splitAt && index === splitAt ? ( ) : null} { refs.current[index] = node; }} type="text" inputMode={type === 'numeric' ? 'numeric' : 'text'} pattern={type === 'numeric' ? '[0-9]*' : undefined} autoComplete={index === 0 ? 'one-time-code' : 'off'} autoCapitalize="off" autoCorrect="off" spellCheck={false} maxLength={1} value={char} placeholder={placeholder} disabled={disabled} autoFocus={autoFocus && index === 0} aria-label={l.digit(index + 1, length)} aria-invalid={invalid || undefined} aria-describedby={describedBy} data-success={success && !invalid ? 'true' : undefined} className={digitVariants({ size })} onFocus={(event) => event.currentTarget.select()} onKeyDown={handleKeyDown(index)} onChange={(event) => { const text = event.target.value; if (text) insert(index, text); }} onPaste={(event) => { event.preventDefault(); insert(index, event.clipboardData.getData('text')); }} /> ))}

{name ? : null} {hint ? (

{hint}

) : null}

); }, ); InputDigit.displayName = 'InputDigit'; export { InputDigit, digitVariants }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority@^0.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/input-digit.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]