50: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"] 51: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"] 52:T6ee,"use client"; import { useLayoutEffect, useState } from "react"; import "./glide-highlight.css"; export type GlideBox = { active: boolean; left: number; top: number; width: number; height: number; }; export function glideBox(target: HTMLElement): GlideBox { return { active: true, left: target.offsetLeft, top: target.offsetTop, width: target.offsetWidth, height: target.offsetHeight, }; } export function useHighlightedGlide( root: HTMLElement | null, selector = "[data-highlighted]", /** Attributes whose change can move the target, e.g. data-state for an open trigger. */ attributes: readonly string[] = ["data-highlighted"], ) { const [box, setBox] = useState(null); useLayoutEffect(() => { const element = root; if (!element) return; const update = () => { const target = element.querySelector(selector); setBox((current) => target ? glideBox(target) : current ? { ...current, active: false } : null, ); }; update(); const observer = new MutationObserver(update); observer.observe(element, { subtree: true, attributes: true, attributeFilter: [...attributes], }); return () => observer.disconnect(); // The attribute list is fixed per call site. // eslint-disable-next-line react-hooks/exhaustive-deps }, [root, selector]); return box; } export function GlideHighlight({ box }: { box: GlideBox | null }) { if (!box) return null; return ( ); } 53:T1499,"use client"; import { useLayoutEffect, useRef, useState } from "react"; import { GlideHighlight, type GlideBox } from "./glide-highlight"; import { Label } from "./label"; import { cn } from "./lib/cn"; import "./otp-input.css"; export function OtpInput({ label = "One-time code", length = 6, value, defaultValue = "", onValueChange, status = "idle", message, disabled, name, className, }: { label?: string; length?: number; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; status?: "idle" | "error" | "success"; /** Replaces the status line, e.g. why a code was refused or “Checking the code…”. */ message?: string; disabled?: boolean; name?: string; className?: string; }) { const [local, setLocal] = useState(defaultValue); const [active, setActive] = useState(0); const [box, setBox] = useState(null); const inputs = useRef>([]); const shell = useRef(null); const current = (value ?? local).slice(0, length); const live = useRef(current); const digits = Array.from({ length }, (_, index) => current[index] ?? ""); function commit(next: string) { const clipped = next.replace(/\D/g, "").slice(0, length); live.current = clipped; if (value == null) setLocal(clipped); onValueChange?.(clipped); } useLayoutEffect(() => { live.current = current; const root = shell.current; const field = inputs.current[active]; if (!root || !field) return; const rootRect = root.getBoundingClientRect(); const rect = field.getBoundingClientRect(); setBox({ active: true, left: rect.left - rootRect.left, top: rect.top - rootRect.top, width: rect.width, height: rect.height, }); }, [active, current]); return (

{label}

{digits.map((digit, index) => ( { inputs.current[index] = node; }} inputMode="numeric" autoComplete={index === 0 ? "one-time-code" : "off"} aria-label={`${label} digit ${index + 1}`} disabled={disabled} value={digit} maxLength={1} className="z-10 col-start-1 row-start-1 h-11 w-full min-w-0 rounded-overlay border border-muted-foreground/75 bg-background text-center text-sm font-medium text-transparent tabular-nums caret-transparent outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring" onFocus={() => setActive(index)} onChange={(event) => { const text = event.currentTarget.value.replace(/\D/g, ""); const valueNow = live.current; if (text.length > 1) { commit(`${valueNow.slice(0, index)}${text}`); const next = Math.min(length - 1, index + text.length); inputs.current[next]?.focus(); return; } const nextValue = `${valueNow.slice(0, index)}${text}${valueNow.slice(index + 1)}`; commit(nextValue); if (text) inputs.current[Math.min(length - 1, index + 1)]?.focus(); }} onKeyDown={(event) => { if (event.key === "Backspace" && !live.current[index]) { event.preventDefault(); const previous = Math.max(0, index - 1); commit(`${live.current.slice(0, previous)}${live.current.slice(previous + 1)}`); inputs.current[previous]?.focus(); } else if (event.key === "ArrowLeft") { inputs.current[Math.max(0, index - 1)]?.focus(); } else if (event.key === "ArrowRight") { inputs.current[Math.min(length - 1, index + 1)]?.focus(); } }} onPaste={(event) => { event.preventDefault(); const text = event.clipboardData.getData("text").replace(/\D/g, ""); commit(`${live.current.slice(0, index)}${text}`); inputs.current[Math.min(length - 1, index + text.length)]?.focus(); }} /> ))}

{name ? : null}

{message ?? (status === "error" ? "That code was not accepted." : status === "success" ? "Code accepted." : `${current.length} of ${length} digits.`)}

); } 4f:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/glide-highlight.tsx","content":"$52","type":"registry:ui","target":"components/ui/glide-highlight.tsx"},{"path":"ui/label.tsx","content":"import type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\n\nexport function Label({ className, ...props }: ComponentProps<\"label\">) {\n return (\n \n );\n}\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/otp-input.tsx","content":"$53","type":"registry:ui","target":"components/ui/otp-input.tsx"},{"path":"ui/glide-highlight.css","content":"/* glide-highlight.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"glide-highlight\"] {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n pointer-events: none;\n border-radius: var(--radius-surface);\n background: var(--muted);\n opacity: 0;\n transition:\n transform var(--duration-travel) var(--ease-showcase),\n width var(--duration-travel) var(--ease-showcase),\n height var(--duration-travel) var(--ease-showcase),\n opacity var(--duration-deliberate) var(--ease-out);\n }\n [data-slot=\"glide-highlight\"][data-active=\"true\"] {\n opacity: 1;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"glide-highlight\"] {\n transition: none;\n }\n [data-slot=\"glide-highlight\"] {\n transition:\n transform 400ms var(--ease-showcase),\n width 400ms var(--ease-showcase),\n height 400ms var(--ease-showcase),\n opacity 280ms var(--ease-out);\n }\n }\n}\n","type":"registry:file","target":"components/ui/glide-highlight.css"},{"path":"ui/otp-input.css","content":"/* otp-input.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"otp\"][data-invalid=\"true\"] {\n animation: caliper-reject var(--duration-travel) var(--ease-out);\n }\n [data-slot=\"otp\"] [data-slot=\"glide-highlight\"] {\n border-radius: var(--radius-overlay);\n background: transparent;\n box-shadow: 0 0 0 2px var(--foreground);\n }\n [data-slot=\"otp-digit\"]:not(:empty) {\n animation: caliper-digit-in var(--duration-travel) var(--ease-showcase);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"otp-digit\"]:not(:empty) {\n animation: caliper-digit-in 400ms var(--ease-showcase);\n }\n [data-slot=\"otp\"][data-invalid=\"true\"] {\n animation: caliper-reject 400ms var(--ease-out);\n }\n }\n}\n","type":"registry:file","target":"components/ui/otp-input.css"}],"className":"h-[70svh] min-h-80"}]]}]