63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:Tc66,@layer theme, base, components, utilities; /* Shared text utilities; other components compose these classes. */ /* The fade only shows when text overflows: otherwise the scroll timeline is inactive. */ @property --truncate-fade { syntax: ""; inherits: false; initial-value: 0px; } @layer components { /* Text that's never cut: a long name, email or path breaks onto the next line, inside a word only when there's nowhere else to break. Use this for anything a person needs to read in full. */ .wrap { min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; } /* One line, fading at the end when cut. Only for rows that must keep a fixed height (a virtualized table); give the full text a title too. The padding/negative margin stops overflow: hidden clipping descenders and accents at tight line heights. */ .truncate { min-width: 0; overflow: hidden; white-space: nowrap; padding-block: 0.2em; margin-block: -0.2em; } /* Several lines; set --truncate-lines (default 2). */ .truncateLines { overflow: hidden; max-height: calc(var(--truncate-lines, 2) * 1lh); } @supports (animation-timeline: scroll()) { .truncate, .truncateLines { --truncate-to: right; animation: truncate-overflow linear both; } :is([dir="rtl"]) .truncate, :is([dir="rtl"]) .truncateLines { --truncate-to: left; } .truncate { mask-image: linear-gradient(to var(--truncate-to), #000 calc(100% - var(--truncate-fade)), transparent); animation-timeline: scroll(self inline); } .truncateLines { mask-image: linear-gradient(#000 0 0), linear-gradient(to var(--truncate-to), #000 calc(100% - var(--truncate-fade)), transparent); mask-size: 100% calc(100% - 1lh), 100% 1lh; mask-position: top, bottom; mask-repeat: no-repeat; animation-timeline: scroll(self block); } } /* Without scroll timelines, fall back to an ellipsis. */ @supports not (animation-timeline: scroll()) { .truncate { text-overflow: ellipsis; } .truncateLines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--truncate-lines, 2); } } @keyframes truncate-overflow { from, to { --truncate-fade: 24px; } } /* Visually hidden, still read by screen readers. */ .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Work in progress: a light band sweeps across dimmed text. --sweep-dim sets the dim. */ .sweep { mask-image: linear-gradient( 90deg, rgb(0 0 0 / var(--sweep-dim, 0.55)) 35%, #000 50%, rgb(0 0 0 / var(--sweep-dim, 0.55)) 65% ); mask-size: 300% 100%; mask-repeat: no-repeat; animation: sweep var(--ui-dur-sweep) linear infinite; } @keyframes sweep { from { mask-position: 100% 0; } to { mask-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .sweep { mask-image: none; animation: none; } } } 66:T593,@layer theme, base, components, utilities; /* The real label, for screen readers and find-in-page. */ .label { composes: srOnly from "../text/text.module.css"; } /* Block padding keeps descenders inside the mask. */ @property --morph-fade { syntax: ""; inherits: false; initial-value: 0px; } @layer components { .root { position: relative; display: inline-flex; white-space: pre; } .row { --morph-to: right; position: relative; display: inline-flex; padding-block: 0.3em; margin-block: -0.3em; } :is([dir="rtl"]) .row { --morph-to: left; } .row[data-morphing] { mask-image: linear-gradient(to var(--morph-to), #000 calc(100% - var(--morph-fade)), transparent); } /* A filter (the blur on arriving and leaving letters) paints only inside the element's box, and a glyph's descender hangs below a tight line box. The block padding grows each letter's box to hold its descenders; the negative margin gives the room back, so nothing moves. */ .glyph { display: inline-block; padding-block: 0.3em; margin-block: -0.3em; } .ghosts { position: absolute; inset: 0; pointer-events: none; } /* Sits where the letter sat: the row's block padding, held as the ghost's own padding so its blur has room for descenders too. */ .ghost { position: absolute; top: 0; padding-block: 0.3em; } } 67:T29a6,"use client"; import { useLayoutEffect, useRef, useState } from "react"; import styles from "./text-morph.module.css"; type Glyph = { key: string; char: string }; type Layout = { text: string; glyphs: Glyph[]; lefts: Map; width: number }; const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(undefined, { granularity: "grapheme" }) : null; function split(text: string) { return segmenter ? Array.from(segmenter.segment(text), (s) => s.segment) : Array.from(text); } type Word = { start: number; end: number; text: string }; function words(chars: string[]): Word[] { const out: Word[] = []; let start = -1; chars.forEach((c, i) => { const space = /\s/.test(c); if (!space && start === -1) start = i; if (space && start !== -1) { out.push({ start, end: i, text: chars.slice(start, i).join("").toLowerCase() }); start = -1; } }); if (start !== -1) out.push({ start, end: chars.length, text: chars.slice(start).join("").toLowerCase() }); return out; } /** Shared start and end letters: "Copy" → "Copied" keeps "Cop". */ function edges(a: string[], b: string[]): [number, number][] { const pairs: [number, number][] = []; let start = 0; while (start < a.length && start < b.length && a[start] === b[start]) pairs.push([start, start++]); for (let k = 1; k <= Math.min(a.length, b.length) - start && a[a.length - k] === b[b.length - k]; k++) { pairs.push([a.length - k, b.length - k]); } return pairs; } /** Keys letters, reusing old keys for shared words and gap edges so they slide. */ function toGlyphs(prev: Glyph[] | null, text: string, generation: number): Glyph[] { // Same keys on the server and in the browser. const fresh = (i: number) => `${generation}:${i}`; const chars = split(text); if (!prev) return chars.map((char, i) => ({ key: fresh(i), char })); const keys: (string | null)[] = chars.map(() => null); const old = prev.map((g) => g.char); // Numbers match by place value, from the right. if (numeric(old.join("")) && numeric(text)) { for (let k = 1; k <= Math.min(old.length, chars.length); k++) { if (old[old.length - k] === chars[chars.length - k]) keys[chars.length - k] = prev[old.length - k].key; } return chars.map((char, i) => ({ key: keys[i] ?? fresh(i), char })); } const oldWords = words(old); const used = new Set(); const anchors: { from: Word; to: Word }[] = []; for (const w of words(chars)) { const i = oldWords.findIndex((o, k) => !used.has(k) && o.text === w.text); if (i === -1) continue; used.add(i); anchors.push({ from: oldWords[i], to: w }); for (let k = 0; k < w.end - w.start; k++) { if (old[oldWords[i].start + k] === chars[w.start + k]) keys[w.start + k] = prev[oldWords[i].start + k].key; } } const ordered = anchors.every((a, i) => i === 0 || a.from.start > anchors[i - 1].from.end); if (ordered) { const bounds = [{ from: 0, to: 0 }, ...anchors.map((a) => ({ from: a.from.end, to: a.to.end }))]; const ends = [...anchors.map((a) => ({ from: a.from.start, to: a.to.start })), { from: old.length, to: chars.length }]; bounds.forEach((b, g) => { const pairs = edges(old.slice(b.from, ends[g].from), chars.slice(b.to, ends[g].to)); for (const [i, j] of pairs) keys[b.to + j] = prev[b.from + i].key; }); } return chars.map((char, i) => ({ key: keys[i] ?? fresh(i), char })); } const NUMERIC = /^[^\p{L}]*\d[^\p{L}]*$/u; const numeric = (text: string) => NUMERIC.test(text); const NUMBER = /[-\u2212]?\d[\d,.]*/; function value(text: string) { const match = text.match(NUMBER); return match ? parseFloat(match[0].replace("\u2212", "-").replace(/,/g, "")) : NaN; } function direction(from: string, to: string) { const delta = value(to) - value(from); return Number.isNaN(delta) ? 0 : Math.sign(delta); } function token(el: Element, name: string, fallback: string) { return getComputedStyle(el).getPropertyValue(name).trim() || fallback; } function ms(value: string) { return value.endsWith("ms") ? parseFloat(value) : parseFloat(value) * 1000; } function translateX(el: Element) { const transform = getComputedStyle(el).transform; return transform && transform !== "none" ? new DOMMatrixReadOnly(transform).m41 : 0; } function measureText(row: HTMLElement, text: string, glyphs: Glyph[]): Layout { const node = row.firstChild; const origin = row.getBoundingClientRect().left; const lefts = new Map(); let width = 0; if (node?.nodeType === Node.TEXT_NODE) { const range = document.createRange(); let offset = 0; for (const g of glyphs) { range.setStart(node, offset); range.setEnd(node, (offset += g.char.length)); const box = range.getBoundingClientRect(); lefts.set(g.key, box.left - origin); width = Math.max(width, box.right - origin); } } return { text, glyphs, lefts, width }; } export function TextMorph({ children, className }: { children: string; className?: string }) { const [shown, setShown] = useState(children); const [state, setState] = useState(() => ({ generation: 0, glyphs: toGlyphs(null, children, 0) })); if (shown !== children) { setShown(children); setState((prev) => ({ generation: prev.generation + 1, glyphs: toGlyphs(prev.glyphs, children, prev.generation + 1) })); } const { glyphs } = state; // Plain text until the label first changes. const split = state.generation > 0; const rowRef = useRef(null); const ghostsRef = useRef(null); const layout = useRef(null); useLayoutEffect(() => { const row = rowRef.current; const ghosts = ghostsRef.current; if (!row || !ghosts) return; if (!split) { layout.current = measureText(row, children, glyphs); return; } const nodes = new Map(); for (const el of row.querySelectorAll("[data-glyph]")) nodes.set(el.dataset.glyph!, el); const last = layout.current; const lefts = new Map(glyphs.map((g) => [g.key, nodes.get(g.key)!.offsetLeft])); const tail = nodes.get(glyphs.at(-1)?.key ?? ""); // Fractional, like the row's own width: offsetWidth rounds, and the // animation would end half a pixel short and then snap. const width = tail ? tail.getBoundingClientRect().right - row.getBoundingClientRect().left : 0; layout.current = { text: children, glyphs, lefts, width }; if (!last || last.text === children) return; if (matchMedia("(prefers-reduced-motion: reduce)").matches) { ghosts.replaceChildren(); return; } // The glide, not the move spring: a spring's overshoot narrows a button // past its new width and springs it back, which reads as the control // settling after the click. The glide lands once. const spring = token(row, "--ui-ease-glide", "cubic-bezier(0.22, 1, 0.36, 1)"); const easeExit = token(row, "--ui-ease-exit", "cubic-bezier(0.4, 0, 1, 1)"); const duration = ms(token(row, "--ui-dur-glide", "320ms")); const exit = ms(token(row, "--ui-dur-instant", "150ms")); // Letters arrive on the plain enter curve: a spring would bounce them // up and down, and vertical bounce reads as jitter in a line of text. const enter = token(row, "--ui-ease-enter", "cubic-bezier(0.2, 1, 0.3, 1)"); // If a previous morph is still running, start from where it visibly is. const running = row.getAnimations(); const fromWidth = running.length ? row.getBoundingClientRect().width : last.width; running.forEach((a) => a.cancel()); const fade = Math.min(16, Math.abs(width - fromWidth)); row.dataset.morphing = ""; const grow = row.animate( { width: [`${fromWidth}px`, `${width}px`], ["--morph-fade" as string]: [`${fade}px`, "0px"] }, { duration, easing: spring }, ); grow.finished.then( () => delete row.dataset.morphing, () => {}, // cancelled by a newer morph, which owns the flag now ); const dir = direction(last.text, children) || 1; // A small rise with a soft blur: the change reads, the line holds still. const enterFrom = `translateY(${0.08 * dir}em)`; const leaveTo = `translateY(${-0.08 * dir}em)`; // Arrivals wait for leaving letters to clear. const current = new Set(glyphs.map((g) => g.key)); const leaving = last.glyphs.some((g) => !current.has(g.key)); const lead = exit * (leaving ? 0.85 : 0.4); let entering = 0; for (const g of glyphs) { const el = nodes.get(g.key)!; const before = last.lefts.get(g.key); if (before === undefined) { el.animate( { opacity: [0, 1], transform: [enterFrom, "none"], filter: ["blur(2px)", "none"], }, { duration: duration * 0.75, easing: enter, delay: lead + entering++ * 15, fill: "backwards" }, ); continue; } // FLIP from where the letter is on screen now. const offset = before + translateX(el) - lefts.get(g.key)!; el.getAnimations().forEach((a) => a.cancel()); if (Math.abs(offset) > 0.5) { el.animate({ transform: [`translateX(${offset}px)`, "none"] }, { duration, easing: spring }); } } // Ghosts live in a layer React never renders into. const kept = new Set(glyphs.map((g) => g.key)); for (const g of last.glyphs) { if (kept.has(g.key)) continue; const ghost = document.createElement("span"); ghost.className = styles.ghost; ghost.textContent = g.char; ghost.style.left = `${last.lefts.get(g.key)}px`; ghosts.append(ghost); const fade = ghost.animate( { opacity: [1, 0], transform: ["none", leaveTo], filter: ["none", "blur(2px)"], }, { duration: exit, easing: easeExit, fill: "forwards" }, ); fade.finished.then( () => ghost.remove(), () => ghost.remove(), ); } }, [children, glyphs, split]); return ( // The letter row must run in the label's own direction. {children} ); } 68:T34c2,@layer theme, base, components, utilities; /* Registered so the edge color and its mix toward danger transition separately. */ @property --code-edge { syntax: ""; inherits: false; initial-value: transparent; } /* The drawn caret's ink, registered so it can blink. */ @property --code-caret { syntax: ""; inherits: false; initial-value: transparent; } @property --code-danger { syntax: ""; inherits: false; initial-value: 0%; } .srOnly { composes: srOnly from "../text/text.module.css"; } @layer components { .root { display: grid; /* The parent's width, never the boxes', so the row can shrink into it. */ grid-template-columns: minmax(0, 1fr); justify-items: start; min-width: 0; gap: var(--ui-space-2); font-family: var(--ui-font-sans); } /* Focused only while it's a pill, so focus has somewhere to stay; the pill shows the state. */ .root:focus { outline: none; } .label { color: var(--ui-foreground); font-size: var(--ui-text-md); font-weight: var(--ui-weight-medium); line-height: var(--ui-leading-md); } /* The boxes and the pill share one cell; the boxes stay in flow, so the row keeps its size whatever the pill does. */ .stage { position: relative; display: grid; /* A column the stage's width, not the boxes' widest: the stage is as wide as the boxes when there's room and the boxes narrow when there isn't. */ grid-template-columns: minmax(0, 1fr); max-width: 100%; } .boxes { --code-box-width: 44px; --code-box-min: 24px; --code-gap: var(--ui-space-2); --code-group-gap: var(--ui-space-5); --code-dot: 4px; display: flex; align-items: center; max-width: 100%; gap: var(--code-gap); } /* Between groups: a dot in a wider gap, so 123 · 456 reads the way it's said. */ .separator { flex: none; width: var(--code-dot); height: var(--code-dot); margin-inline: calc((var(--code-group-gap) - 2 * var(--code-gap) - var(--code-dot)) / 2); border-radius: var(--ui-radius-full); background: var(--ui-muted); opacity: 0.6; transition: opacity var(--ui-dur-base) var(--ui-ease-enter) calc(var(--ui-dur-instant) / 2); } .root[data-phase="verifying"] .separator, .root[data-phase="success"] .separator { opacity: 0; transition: opacity var(--ui-dur-fast) var(--ui-ease-exit); } .root[data-disabled] .separator { opacity: 0.3; } .box { --code-edge: var(--ui-border-strong); --code-edge-width: var(--ui-hairline); flex: 0 1 var(--code-box-width); box-sizing: border-box; width: var(--code-box-width); min-width: var(--code-box-min); height: var(--ui-control-lg); padding: 0; border: 0; border-radius: var(--ui-radius-md); background-color: var(--ui-surface); /* The caret is drawn, not the platform's: 2px, centered, the digit's height. */ background-image: linear-gradient(var(--code-caret), var(--code-caret)); background-position: center; background-repeat: no-repeat; background-size: 2px calc(1em - 2px); box-shadow: inset 0 0 0 var(--code-edge-width) color-mix(in oklch, var(--code-edge), var(--ui-danger) var(--code-danger)); color: var(--ui-foreground); caret-color: transparent; /* Must stay over 16px, below which iOS zooms the page into a field. */ font-family: var(--ui-font-sans); font-size: 24px; font-weight: var(--ui-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; text-align: center; outline: none; /* Opacity, drift and blur: the boxes coming back out of the pill. */ transition: --code-edge var(--ui-dur-instant) var(--ui-ease-color), --code-danger var(--ui-dur-fast) var(--ui-ease-color), opacity var(--ui-dur-base) var(--ui-ease-enter) calc(var(--ui-dur-instant) / 2), translate var(--ui-dur-glide) var(--ui-ease-glide), filter var(--ui-dur-base) var(--ui-ease-enter) calc(var(--ui-dur-instant) / 2); } .box::selection { background: var(--ui-selection); } .box[data-filled] { /* Only the text moves, by padding inside the fixed height; the box never resizes. */ animation: code-char var(--ui-dur-fast) var(--ui-ease-enter); } @keyframes code-char { from { padding-top: 4px; color: transparent; } } @media (prefers-reduced-motion: reduce) { .box[data-filled] { animation: none; } } @media (hover: hover) { .box:hover:not(:focus, :disabled) { --code-edge: var(--ui-field-focus); } } /* The active box: its edge darkens at once and, while it's empty, a caret blinks in it. */ .box:focus { --code-edge: var(--ui-field-focus); transition: --code-edge 0s, --code-danger var(--ui-dur-fast) var(--ui-ease-color), opacity var(--ui-dur-base) var(--ui-ease-enter) calc(var(--ui-dur-instant) / 2), translate var(--ui-dur-glide) var(--ui-ease-glide), filter var(--ui-dur-base) var(--ui-ease-enter) calc(var(--ui-dur-instant) / 2); } .box:focus:not([data-filled]) { --code-caret: var(--ui-foreground); animation: code-caret calc(var(--ui-dur-pulse) * 2) steps(1, end) infinite; } @keyframes code-caret { 50% { --code-caret: transparent; } } @media (prefers-reduced-motion: reduce) { .box:focus:not([data-filled]) { animation: none; } } .root[data-invalid] .box { --code-danger: 100%; } .box:disabled { opacity: 0.5; cursor: default; transition: none; } /* Set --code-message-lines when a longer error can arrive, so it never pushes the page. */ .message { display: grid; min-height: calc(var(--code-message-lines, 1) * var(--ui-leading-md)); margin: 0; font-size: var(--ui-text-sm); line-height: var(--ui-leading-md); text-wrap: pretty; } .hint, .error { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity var(--ui-dur-instant) var(--ui-ease-color), visibility 0s linear var(--ui-dur-instant); } .hint[data-shown], .error[data-shown] { opacity: 1; visibility: visible; transition: opacity var(--ui-dur-fast) var(--ui-ease-enter) calc(var(--ui-dur-instant) / 2), visibility 0s; } @starting-style { .error[data-shown] { opacity: 0; } } /* The error comes in from the field above it: a 2px drop with a blur clearing. */ .error[data-shown] { animation: code-error-in var(--ui-dur-base) var(--ui-ease-enter) calc(var(--ui-dur-instant) / 2) backwards; } @keyframes code-error-in { from { translate: 0 -2px; filter: blur(2px); } } @media (prefers-reduced-motion: reduce) { .error[data-shown] { animation: none; } } .hint { color: var(--ui-muted); } .error { display: flex; align-items: flex-start; gap: var(--ui-space-2); color: var(--ui-danger-text); } .error[data-shown] .errorText { animation: code-error-swap var(--ui-dur-fast) var(--ui-ease-enter); } .error svg { width: var(--ui-icon-sm); height: var(--ui-icon-sm); stroke-width: var(--ui-icon-stroke-regular); margin-top: calc((var(--ui-leading-md) - 14px) / 2); flex-shrink: 0; } @keyframes code-error-swap { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .error[data-shown] .errorText { animation: none; } } /* ---------- Status: the boxes fold into a pill ---------- */ /* Merging: each box drifts toward the pill's middle as it fades into it. */ .root[data-phase="verifying"] .box, .root[data-phase="success"] .box { opacity: 0; translate: var(--code-drift, 0) 0; filter: blur(2px); transition: opacity var(--ui-dur-fast) var(--ui-ease-exit), translate var(--ui-dur-glide) var(--ui-ease-glide), filter var(--ui-dur-fast) var(--ui-ease-exit), --code-edge var(--ui-dur-instant) var(--ui-ease-color), --code-danger var(--ui-dur-fast) var(--ui-ease-color); } /* A short nudge on a failed code, once the boxes are back. */ .boxes[data-nudge="0"] { animation: code-nudge-a var(--ui-dur-move) var(--ui-ease-pulse); } .boxes[data-nudge="1"] { animation: code-nudge-b var(--ui-dur-move) var(--ui-ease-pulse); } .boxes[data-nudge-late] { animation-delay: var(--ui-dur-glide); } @keyframes code-nudge-a { 25% { translate: -4px 0; } 55% { translate: 3px 0; } 80% { translate: -1px 0; } } @keyframes code-nudge-b { 25% { translate: -4px 0; } 55% { translate: 3px 0; } 80% { translate: -1px 0; } } /* The pill: a quiet fill with no edge, the row's width at rest, the label's when folded. Pinned to all four edges with auto margins, so it sits on the row's exact center and folds toward it from both sides at once. */ .pill { position: absolute; inset: 0; margin: auto; height: var(--ui-control-md); display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; overflow: hidden; border-radius: var(--ui-radius-full); background: var(--ui-fill); color: var(--ui-foreground); opacity: 0; pointer-events: none; /* Opening back up: it widens and, once its words are gone, dissolves into the returning boxes. */ transition: width var(--ui-dur-glide) var(--ui-ease-glide), opacity var(--ui-dur-base) var(--ui-ease-color) var(--ui-dur-instant); } .root[data-phase="verifying"] .pill, .root[data-phase="success"] .pill { width: var(--code-pill-width, max-content); opacity: 1; transition: width var(--ui-dur-glide) var(--ui-ease-glide), opacity var(--ui-dur-instant) var(--ui-ease-color); } .pillContent { position: relative; display: flex; flex: none; align-items: center; gap: var(--ui-space-2); /* Even on both sides, so the glyph and words sit on the pill's center. */ padding-inline: var(--ui-space-4); font-size: var(--ui-text-md); font-weight: var(--ui-weight-medium); line-height: var(--ui-leading-md); letter-spacing: var(--ui-tracking-control); white-space: nowrap; opacity: 0; filter: blur(2px); transition: opacity var(--ui-dur-instant) var(--ui-ease-exit), filter var(--ui-dur-instant) var(--ui-ease-exit); } .root[data-phase="verifying"] .pillContent, .root[data-phase="success"] .pillContent { opacity: 1; filter: none; transition: opacity var(--ui-dur-base) var(--ui-ease-enter) var(--ui-dur-instant), filter var(--ui-dur-base) var(--ui-ease-enter) var(--ui-dur-instant); } /* Muted while checking; full ink once it's done. No other color. */ .pillText { color: var(--ui-muted); transition: color var(--ui-dur-base) var(--ui-ease-color); } .root[data-phase="success"] .pillText { color: var(--ui-foreground); } /* A ring with a breathing dot while checking; the dot gives way to a drawn check. */ .glyph { width: var(--ui-icon-md); height: var(--ui-icon-md); flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--ui-icon-stroke-medium); stroke-linecap: round; stroke-linejoin: round; } .ring { opacity: 0.4; transition: opacity var(--ui-dur-base) var(--ui-ease-color); } .root[data-phase="success"] .ring { opacity: 1; } .dot { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; scale: 0.6; transition: scale var(--ui-dur-instant) var(--ui-ease-exit), opacity var(--ui-dur-instant) var(--ui-ease-exit); } .root[data-phase="verifying"] .dot { animation: code-breathe var(--ui-dur-pulse) var(--ui-ease-pulse) infinite alternate; } .root[data-phase="success"] .dot { scale: 0; opacity: 0; } @keyframes code-breathe { from { scale: 0.5; } to { scale: 1; } } .check { stroke-dasharray: 1; stroke-dashoffset: 1; } .root[data-phase="success"] .check { stroke-dashoffset: 0; transition: stroke-dashoffset var(--ui-dur-base) var(--ui-ease-draw) calc(var(--ui-dur-instant) / 2); } /* Reduced motion: the same states, by fades alone. */ @media (prefers-reduced-motion: reduce) { .root[data-phase] .box { translate: none; filter: none; } .boxes[data-nudge] { animation: none; } /* The pill takes its width while unseen: at once on the way in, after its fade on the way out. */ .pill { transition: opacity var(--ui-dur-fast) var(--ui-ease-color), width 0s linear var(--ui-dur-fast); } .root[data-phase="verifying"] .pill, .root[data-phase="success"] .pill { transition: opacity var(--ui-dur-instant) var(--ui-ease-color); } .pillContent, .root[data-phase] .pillContent { filter: none; } .root[data-phase] .dot { animation: none; } .root[data-phase] .check { transition-property: opacity; } } /* Selected for retyping after a failed code: every digit, as one selection, while focus is here. */ .boxes:focus-within .box[data-replacing] { background: color-mix(in oklch, var(--ui-selection), var(--ui-surface)); } .box[data-replacing]::selection { background: transparent; } } 69:T4a09,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState, type ChangeEvent, type ClipboardEvent, type KeyboardEvent, type MouseEvent, } from "react"; import { TextMorph } from "../text-morph/text-morph"; import styles from "./code-input.module.css"; type CodeInputProps = { /** Visible label for the whole code, e.g. "Verification code". */ label: string; /** Number of boxes, 6 by default. */ length?: number; /** Groups the boxes as the code is read aloud: `3` for 123 456, `[3, 4]` for 123 4567. */ group?: number | number[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Called when a change leaves every box filled: the last digit typed, a paste, or a digit fixed in a full code. */ onComplete?: (value: string) => void; /** Digits only (the default), or letters and digits. */ characters?: "digits" | "alphanumeric"; /** Guidance under the boxes, until there's an error to show instead. */ hint?: string; /** Says what went wrong and what to do. Turns every box's edge to danger. */ error?: string | null; /** Submitted with the form under this name. */ name?: string; disabled?: boolean; autoFocus?: boolean; className?: string; /** * Where checking the code has got to, set by the app. `verifying` locks the * boxes and, once it has lasted 300ms, folds them into one pill; `success` * draws a check and says "Verified"; `error` opens the boxes back up. */ status?: CodeInputStatus; /** Words for the pill and the default error. */ labels?: { verifying?: string; success?: string; error?: string }; /** After `status="error"`: select the first digit so typing writes over the code (default), or clear it. */ retry?: "select" | "clear"; }; export type CodeInputStatus = "idle" | "verifying" | "success" | "error"; type Phase = "cells" | "verifying" | "success"; const defaultLabels = { verifying: "Verifying", success: "Verified", error: "That code didn’t work. Check it and try again.", }; /** A one-time code as N boxes. The value is always contiguous: no box past the first empty one takes focus. */ export function CodeInput({ label, length = 6, group, value: controlled, defaultValue = "", onValueChange, onComplete, characters = "digits", hint, error, name, disabled, autoFocus, className, status, labels: labelsProp, retry = "select", }: CodeInputProps) { const id = useId(); const labelId = `${id}-label`; const messageId = `${id}-message`; const statusId = `${id}-status`; const labels = { ...defaultLabels, ...labelsProp }; const [uncontrolled, setUncontrolled] = useState(() => clean(defaultValue, characters).slice(0, length), ); const value = controlled !== undefined ? clean(controlled, characters).slice(0, length) : uncontrolled; const boxes = useRef<(HTMLInputElement | null)[]>([]); const rootRef = useRef(null); const rowRef = useRef(null); const stageRef = useRef(null); const pillRef = useRef(null); const phase = usePhase(status); const collapsed = phase !== "cells"; // A fresh label each time the boxes fold, so it morphs only within one fold. const [folds, setFolds] = useState(0); const [wasCollapsed, setWasCollapsed] = useState(collapsed); const [pillText, setPillText] = useState( phase === "success" ? labels.success : labels.verifying, ); if (collapsed !== wasCollapsed) { setWasCollapsed(collapsed); if (collapsed) setFolds((n) => n + 1); } const nextPillText = phase === "success" ? labels.success : phase === "verifying" ? labels.verifying : pillText; if (nextPillText !== pillText) setPillText(nextPillText); // Checking or checked: the code can't change under the check. const locked = status === "verifying" || status === "success"; // Applied after the new value renders, so the target box is judged against it. const pendingFocus = useRef(null); const complete = value.length === length; const errorText = error || (status === "error" ? labels.error : null); const invalid = Boolean(errorText); const message = errorText || hint; // A line is reserved only when something can show there (even a null error prop). const hasMessage = Boolean(hint || error !== undefined || status !== undefined); // The last error stays in its slot, faded out, so the slot keeps its height. const [lastError, setLastError] = useState(errorText); if (errorText && errorText !== lastError) setLastError(errorText); // Each time the boxes stand open on an error: a nudge (two names, so it // replays) and, once, the retry. Late when the boxes are still opening. const failed = status === "error" && !collapsed; const [wasFailed, setWasFailed] = useState(failed); const [lastPhase, setLastPhase] = useState(phase); const [nudge, setNudge] = useState(0); const [nudgeLate, setNudgeLate] = useState(false); // After a failed code with retry="select": every digit stays, selected, and the next one typed starts over. const [replacing, setReplacing] = useState(false); const retried = useRef(0); // Whether the group holds focus for the boxes while it's a pill. const held = useRef(false); if (failed !== wasFailed || phase !== lastPhase) { setWasFailed(failed); setLastPhase(phase); if (failed && !wasFailed) { setNudge((n) => n + 1); setNudgeLate(lastPhase !== "cells"); if (retry === "clear" && controlled === undefined) setUncontrolled(""); if (retry === "select") setReplacing(true); } } function focus(index: number) { const box = boxes.current[Math.max(0, Math.min(index, length - 1))]; box?.focus(); box?.select(); } function commit(next: string, focusIndex?: number) { if (locked) return; next = next.slice(0, length); if (next === value) { if (focusIndex !== undefined) focus(Math.min(focusIndex, value.length)); return; } pendingFocus.current = focusIndex ?? null; if (controlled === undefined) setUncontrolled(next); onValueChange?.(next); setReplacing(false); if (next.length === length) onComplete?.(next); } useLayoutEffect(() => { if (pendingFocus.current === null) return; const index = pendingFocus.current; pendingFocus.current = null; focus(index); }); // The pill's width, and where each box drifts as it merges into it. useLayoutEffect(() => { const stage = stageRef.current; const pill = pillRef.current; const row = rowRef.current; if (!stage || !pill || !row) return; const measure = () => { const width = pill.offsetWidth; stage.style.setProperty("--code-pill-width", `${width}px`); // The pill folds toward the middle of the row. const center = stage.clientWidth / 2; for (const box of boxes.current) { if (!box) continue; const drift = (center - (box.offsetLeft + box.offsetWidth / 2)) * 0.6; box.style.setProperty("--code-drift", `${Math.round(drift)}px`); } }; measure(); const observer = new ResizeObserver(measure); observer.observe(pill); observer.observe(row); return () => observer.disconnect(); }, [length]); /** The box focus may land on: none past the first empty one. */ const reachable = (index: number) => Math.min(index, value.length, length - 1); // Focus follows the shape: the group while it's a pill, the boxes when they return. useLayoutEffect(() => { const root = rootRef.current; const row = rowRef.current; if (!root || !row) return; const active = document.activeElement; if (collapsed) { if (row.contains(active)) root.focus(); held.current = document.activeElement === root; row.inert = true; return; } row.inert = false; // The group stops being focusable as the boxes return, which drops its focus to the body. const hadFocus = row.contains(active) || (held.current && (active === root || active === document.body)); held.current = false; if (retried.current === nudge) { if (hadFocus && !row.contains(active)) focus(reachable(length - 1)); return; } retried.current = nudge; // An uncontrolled value was cleared as the failure rendered. if (retry === "clear" && controlled !== undefined && value) onValueChange?.(""); if (hadFocus) focus(0); // Runs on a change of shape or a new failure, not on every render. // eslint-disable-next-line react-hooks/exhaustive-deps }, [collapsed, nudge]); function handleChange(index: number, event: ChangeEvent) { const input = event.currentTarget; const typed = clean(input.value, characters); const current = value[index] ?? ""; if (replacing) { // Over a selected code: start again from what was typed, or take a whole new code. if (typed.length >= length) fill(0, typed); else commit(typed.slice(-1), typed ? 1 : 0); return; } if (typed === "") { // Cleared by the platform (some keyboards send no Backspace key). commit(value.slice(0, index) + value.slice(index + 1), index); return; } if (typed.length === 2 && current && typed.includes(current)) { // The caret was beside the digit rather than over it: keep the one typed. const caret = input.selectionStart ?? 2; const char = typed[caret - 1] ?? typed.replace(current, ""); commit(value.slice(0, index) + char + value.slice(index + 1), index + 1); return; } if (typed.length > 1) { // A paste, or the one-time code filled in by the platform. fill(index, typed); return; } commit(value.slice(0, index) + typed + value.slice(index + 1), index + 1); } function fill(index: number, chars: string) { const next = chars.length >= length || replacing ? chars : value.slice(0, index) + chars; commit(next, Math.min(next.length, length - 1)); } function handlePaste(index: number, event: ClipboardEvent) { const chars = clean(event.clipboardData.getData("text"), characters); event.preventDefault(); if (chars) fill(index, chars); } function handleKeyDown( index: number, event: KeyboardEvent, ) { if (replacing && (event.key === "Backspace" || event.key === "Delete")) { event.preventDefault(); commit("", 0); return; } if ( replacing && event.key.length === 1 && !event.metaKey && !event.ctrlKey && clean(event.key, characters) ) { event.preventDefault(); commit(clean(event.key, characters), 1); return; } switch (event.key) { case "Backspace": { event.preventDefault(); if (value[index]) commit(value.slice(0, index) + value.slice(index + 1), index); else if (index > 0) commit(value.slice(0, index - 1) + value.slice(index), index - 1); break; } case "Delete": { event.preventDefault(); commit(value.slice(0, index) + value.slice(index + 1), index); break; } case "ArrowLeft": case "ArrowRight": { event.preventDefault(); const rtl = getComputedStyle(event.currentTarget).direction === "rtl"; const back = (event.key === "ArrowLeft") !== rtl; setReplacing(false); focus(back ? Math.max(0, index - 1) : reachable(index + 1)); break; } case "Home": event.preventDefault(); setReplacing(false); focus(0); break; case "End": event.preventDefault(); setReplacing(false); focus(reachable(length - 1)); break; default: // Typing the digit that's already there still moves on. if ( event.key.length === 1 && event.key === value[index] && !event.metaKey && !event.ctrlKey ) { event.preventDefault(); focus(index + 1); } } } function handleFocus(index: number) { const target = reachable(index); if (target !== index) focus(target); else boxes.current[index]?.select(); } // Stops the browser placing a caret in the box that was hit first. function handleMouseDown(index: number, event: MouseEvent) { if (disabled) return; event.preventDefault(); // Clicking a digit means fixing that one, not starting over. setReplacing(false); focus(reachable(index)); } const groupStarts = groupBoundaries(length, group); return (

{label}

{Array.from({ length }, (_, i) => [ groupStarts.has(i) && ( ), { boxes.current[i] = node; }} id={`${id}-${i}`} className={styles.box} data-filled={value[i] ? "" : undefined} data-replacing={(replacing && value[i]) || undefined} value={value[i] ?? ""} aria-label={`${characters === "digits" ? "Digit" : "Character"} ${i + 1} of ${length}`} aria-invalid={invalid || undefined} readOnly={locked} inputMode={characters === "digits" ? "numeric" : "text"} pattern={characters === "digits" ? "[0-9]*" : undefined} autoComplete={i === 0 ? "one-time-code" : "off"} autoCapitalize={characters === "digits" ? undefined : "characters"} autoCorrect="off" spellCheck={false} enterKeyHint={i === length - 1 ? "done" : "next"} disabled={disabled} autoFocus={autoFocus && i === 0} onChange={(e) => handleChange(i, e)} onPaste={(e) => handlePaste(i, e)} onKeyDown={(e) => handleKeyDown(i, e)} onFocus={() => handleFocus(i)} onMouseDown={(e) => handleMouseDown(i, e)} />, ])}

{phase === "verifying" ? labels.verifying : phase === "success" ? labels.success : ""} {name && } {hasMessage && (

{hint && ( {hint} )} {lastError && ( {lastError} )}

)}

); } /** * The shape to show for a status. Fast checks never fold the boxes: the pill * appears once `verifying` has lasted 300ms, and then holds 400ms at least. */ function usePhase(status: CodeInputStatus | undefined): Phase { const target: Phase = status === "verifying" ? "verifying" : status === "success" ? "success" : "cells"; const [phase, setPhase] = useState(target === "verifying" ? "cells" : target); const since = useRef(0); useEffect(() => { if (target === phase) return; let wait = 0; if (target === "verifying" && phase === "cells") wait = 300; else if (phase === "verifying") wait = Math.max(0, 400 - (performance.now() - since.current)); const timer = window.setTimeout(() => { if (target === "verifying") since.current = performance.now(); setPhase(target); }, wait); return () => window.clearTimeout(timer); }, [target, phase]); return phase; } /** Indexes of the boxes that open a new group, after the first. */ function groupBoundaries(length: number, group: number | number[] | undefined) { const starts = new Set(); if (group === undefined) return starts; const sizes = typeof group === "number" ? [group] : group; if (!sizes.length || sizes.some((n) => !Number.isInteger(n) || n < 1)) return starts; // A single size repeats; a list is used in order and its last size repeats. let at = 0; for (let g = 0; ; g++) { at += sizes[Math.min(g, sizes.length - 1)]; if (at >= length) break; starts.add(at); } return starts; } function clean(text: string, characters: "digits" | "alphanumeric") { return characters === "digits" ? text.replace(/\D/g, "") : text.replace(/[^0-9a-z]/gi, "").toUpperCase(); } 62:["$","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":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipolish.com/r/tokens.json"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"components/ui/text/text.module.css","content":"$65","type":"registry:file","target":"components/ui/text/text.module.css"},{"path":"components/ui/text-morph/text-morph.module.css","content":"$66","type":"registry:file","target":"components/ui/text-morph/text-morph.module.css"},{"path":"components/ui/text-morph/text-morph.tsx","content":"$67","type":"registry:file","target":"components/ui/text-morph/text-morph.tsx"},{"path":"components/ui/code-input/code-input.module.css","content":"$68","type":"registry:file","target":"components/ui/code-input/code-input.module.css"},{"path":"components/ui/code-input/code-input.tsx","content":"$69","type":"registry:file","target":"components/ui/code-input/code-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]