@teamofsilicons/silicon-ui 0.0.0-stage → 0.1.0

package/components/money-input/money-input.d.ts

@@ -0,0 +1,48 @@
+import type { FocusEvent as ReactFocusEvent } from "react";
+export interface MoneyInputDetails {
+    currency: string;
+    /** The amount in major units, such as 12.5 for $12.50. */
+    major: number | null;
+    /** The amount as a full currency string, such as "$12.50". */
+    formatted: string;
+}
+export interface MoneyInputProps {
+    label: string;
+    hideLabel?: boolean;
+    /** Amount in minor units (cents for USD, yen for JPY). `null` is empty. */
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null, details: MoneyInputDetails) => void;
+    /** ISO 4217 code, such as "USD". */
+    currency?: string;
+    defaultCurrency?: string;
+    onCurrencyChange?: (currency: string) => void;
+    /** Codes offered by the currency menu. Pass one code to hide the menu. */
+    currencies?: string[];
+    /** Lowest amount in minor units. Checked when the field loses focus. */
+    min?: number;
+    /** Highest amount in minor units. Typing past it is refused with a nudge. */
+    max?: number;
+    /** Quick add chips in major units. Pass an empty array to hide them. */
+    quickAdd?: number[];
+    /** Arrow keys move by this many minor units. Defaults to one major unit; Shift moves ten times as far. */
+    step?: number;
+    /** Formatting locale. Fixed by default so server and client render the same digits. */
+    locale?: string;
+    description?: string;
+    /** Replaces the built-in range message. */
+    error?: string;
+    disabled?: boolean;
+    /** Adds a hidden input carrying the amount in minor units. */
+    name?: string;
+    id?: string;
+    className?: string;
+    onBlur?: (event: ReactFocusEvent<HTMLInputElement>) => void;
+}
+/**
+ * A currency amount field. Digits group as they are typed without moving the caret, the missing cents wait as faint ghosts
+ * so the amount never changes width when it settles, long amounts scale down to fit instead of scrolling, and quick add chips
+ * and arrow keys roll the digits. The value comes out in minor units, so $12.50 is 1250.
+ */
+export declare const MoneyInput: import("react").ForwardRefExoticComponent<MoneyInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default MoneyInput;

package/components/money-input/money-input.js

@@ -0,0 +1,503 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { Check, ChevronDown } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./money-input.module.css";
+const enterEase = [...motionTokens.ease.enter];
+const standardEase = [...motionTokens.ease.standard];
+const { spring, blur, duration } = motionTokens;
+const physical = (visualDuration, bounce) => {
+    const root = (2 * Math.PI) / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+const GLIDE = physical(.28, .08);
+/** A sideways kick when a limit refuses the change: the amount strains toward the press and springs home. */
+const KICK = physical(.42, .3);
+const MAX_INTEGER_DIGITS = 12;
+const subscribe = () => () => { };
+function useReducedFlag() {
+    const hydrated = useSyncExternalStore(subscribe, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+const infoCache = new Map();
+function currencyInfo(code, locale) {
+    const cacheKey = `${locale}:${code}`;
+    const cached = infoCache.get(cacheKey);
+    if (cached)
+        return cached;
+    const full = new Intl.NumberFormat(locale, { style: "currency", currency: code, currencyDisplay: "narrowSymbol", numberingSystem: "latn" });
+    const parts = full.formatToParts(1);
+    const symbolAt = parts.findIndex(part => part.type === "currency"), numberAt = parts.findIndex(part => part.type === "integer");
+    const digits = full.resolvedOptions().maximumFractionDigits ?? 2;
+    let name = code;
+    try {
+        name = new Intl.DisplayNames([locale], { type: "currency" }).of(code) ?? code;
+    }
+    catch { /* older engines keep the code */ }
+    const info = {
+        code, symbol: parts[symbolAt]?.value ?? code, position: symbolAt < numberAt ? "prefix" : "suffix", digits, name: name.charAt(0).toUpperCase() + name.slice(1), full,
+        whole: new Intl.NumberFormat(locale, { style: "currency", currency: code, currencyDisplay: "narrowSymbol", maximumFractionDigits: 0, numberingSystem: "latn" }),
+    };
+    infoCache.set(cacheKey, info);
+    return info;
+}
+function localeSymbols(locale) {
+    const parts = new Intl.NumberFormat(locale, { numberingSystem: "latn" }).formatToParts(12345.6);
+    return { group: parts.find(part => part.type === "group")?.value ?? ",", decimal: parts.find(part => part.type === "decimal")?.value ?? "." };
+}
+/* A draft is the amount as typed in a canonical form: digits with an optional ".", such as "1234.5". */
+const pow10 = (digits) => 10 ** digits;
+function toMinor(draft, digits) {
+    if (!draft)
+        return null;
+    const [whole, fraction = ""] = draft.split(".");
+    return Number(whole || "0") * pow10(digits) + Number(fraction.padEnd(digits, "0").slice(0, digits) || "0");
+}
+function fromMinor(minor, digits) {
+    if (minor === null || minor === undefined || !Number.isFinite(minor))
+        return "";
+    const text = String(Math.round(Math.abs(minor))).padStart(digits + 1, "0");
+    return digits ? `${text.slice(0, text.length - digits)}.${text.slice(text.length - digits)}` : text;
+}
+/** Settles a draft the way it will be read back: fraction padded to the currency, leading zeros gone. */
+function settle(draft, digits) { return draft ? fromMinor(toMinor(draft, digits), digits) : ""; }
+/** Carries an amount across currencies with different minor units, keeping the major amount. */
+function convertDraft(draft, digits) {
+    if (!draft)
+        return "";
+    const [whole = "", fraction] = draft.split(".");
+    if (!digits)
+        return whole || "0";
+    return fraction === undefined ? whole : `${whole}.${fraction.slice(0, digits)}`;
+}
+function groupInteger(whole, group) { return whole.replace(/\B(?=(\d{3})+(?!\d))/g, group); }
+function displayOf(draft, symbols) {
+    if (!draft)
+        return "";
+    const [whole = "", fraction] = draft.split(".");
+    return groupInteger(whole, symbols.group) + (fraction !== undefined ? symbols.decimal + fraction : "");
+}
+/** Columns keyed by place value, so 9 → 10 keeps the ones column the ones column. Missing fraction digits are ghosts that hold their width. */
+function partsOf(draft, digits, symbols) {
+    const [whole = "", fraction] = draft ? draft.split(".") : [];
+    const parts = [];
+    const intDigits = whole || "0";
+    const ghostInt = !whole;
+    [...intDigits].forEach((char, index) => {
+        const place = intDigits.length - 1 - index;
+        parts.push({ key: `i${place}`, char, ghost: ghostInt });
+        if (place > 0 && place % 3 === 0)
+            parts.push({ key: `g${place}`, char: symbols.group, ghost: ghostInt });
+    });
+    if (digits) {
+        parts.push({ key: "d", char: symbols.decimal, ghost: fraction === undefined });
+        for (let index = 0; index < digits; index++)
+            parts.push({ key: `f${index}`, char: fraction?.[index] ?? "0", ghost: fraction === undefined || index >= fraction.length });
+    }
+    return parts;
+}
+/* Columns open their width while the digit rises in the direction of change. Typing cuts straight to the result so the caret is never behind. */
+const column = {
+    enter: { width: 0, opacity: 0 },
+    center: { width: "auto", opacity: 1, transition: { width: spring.morph, opacity: { duration: duration.fast } } },
+    exit: { width: 0, opacity: 0, transition: { width: spring.smooth, opacity: { duration: duration.instant } } },
+};
+const columnCut = { enter: { width: "auto", opacity: 1 }, center: { width: "auto", opacity: 1, transition: { duration: 0 } }, exit: { width: 0, opacity: 0, transition: { duration: 0 } } };
+const glyph = {
+    enter: (dir) => ({ y: `${dir * .55}em`, opacity: 0, filter: `blur(${blur.soft}px)` }),
+    center: { y: 0, opacity: 1, filter: "blur(0px)", transitionEnd: { filter: "none" }, transition: { y: spring.snappy, opacity: { duration: duration.fast, ease: enterEase }, filter: { duration: duration.exit, ease: enterEase } } },
+    exit: (dir) => ({ y: `${dir * -.55}em`, opacity: 0, filter: `blur(${blur.subtle}px)`, transition: { duration: duration.instant, ease: standardEase } }),
+};
+const glyphCut = { enter: { y: 0, opacity: 1, filter: "none" }, center: { y: 0, opacity: 1, filter: "none", transition: { duration: 0 } }, exit: { opacity: 0, transition: { duration: 0 } } };
+const glyphFade = { enter: { y: 0, opacity: 0, filter: "none" }, center: { y: 0, opacity: 1, filter: "none", transition: { duration: duration.instant } }, exit: { opacity: 0, transition: { duration: 0 } } };
+function Glyphs({ parts, direction, instant, reduced }) {
+    const columnVariants = instant || reduced ? columnCut : column;
+    const glyphVariants = instant ? glyphCut : reduced ? glyphFade : glyph;
+    return _jsx(AnimatePresence, { initial: false, custom: direction, children: parts.map(part => _jsxs(motion.span, { className: styles.column, "data-ghost": part.ghost || undefined, custom: direction, variants: columnVariants, initial: "enter", animate: "center", exit: "exit", children: [_jsx("span", { className: styles.sizer, children: part.char }), _jsx(AnimatePresence, { initial: false, custom: direction, children: _jsx(motion.span, { className: styles.glyph, custom: direction, variants: glyphVariants, initial: "enter", animate: "center", exit: "exit", children: part.char }, part.char) })] }, part.key)) });
+}
+/** The currency symbol swaps with a short roll while its slot springs to the new width. */
+function SymbolSlot({ symbol, reduced }) {
+    const sizerRef = useRef(null);
+    const width = useMotionValue("auto");
+    const measured = useRef(false);
+    useLayoutEffect(() => {
+        const node = sizerRef.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            if (!measured.current || reduced)
+                width.jump(node.offsetWidth);
+            else
+                animate(width, node.offsetWidth, spring.morph);
+            measured.current = true;
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [reduced, width]);
+    return _jsxs(motion.span, { className: styles.symbol, style: { width }, "aria-hidden": "true", children: [_jsx("span", { ref: sizerRef, className: styles.symbolSizer, children: symbol }), _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { className: styles.symbolGlyph, initial: reduced ? { opacity: 0 } : { opacity: 0, y: ".4em", filter: `blur(${blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, y: reduced ? 0 : "-.3em", transition: { duration: duration.instant } }, transition: reduced ? { duration: duration.instant } : { y: spring.snappy, opacity: { duration: duration.fast }, filter: { duration: duration.exit } }, children: symbol }, symbol) })] });
+}
+const isSignificant = (char, decimal) => /\d/.test(char) || char === decimal;
+function positionAfter(text, count, decimal) {
+    if (count <= 0)
+        return 0;
+    let seen = 0;
+    for (let index = 0; index < text.length; index++)
+        if (isSignificant(text[index], decimal) && ++seen === count)
+            return index + 1;
+    return text.length;
+}
+/**
+ * A currency amount field. Digits group as they are typed without moving the caret, the missing cents wait as faint ghosts
+ * so the amount never changes width when it settles, long amounts scale down to fit instead of scrolling, and quick add chips
+ * and arrow keys roll the digits. The value comes out in minor units, so $12.50 is 1250.
+ */
+export const MoneyInput = forwardRef(function MoneyInput({ label, hideLabel = false, value, defaultValue = null, onValueChange, currency: currencyProp, defaultCurrency = "USD", onCurrencyChange, currencies = ["USD", "EUR", "GBP", "JPY", "CAD", "AUD", "CHF", "INR"], min, max, quickAdd = [10, 50, 100], step: stepProp, locale = "en-US", description, error, disabled = false, name, id, className, onBlur, }, forwardedRef) {
+    const reduced = useReducedFlag();
+    const uid = useId();
+    const inputId = id ?? `${uid}-amount`;
+    const hintId = `${inputId}-hint`, errorId = `${inputId}-error`, rangeId = `${inputId}-range`;
+    const [innerCurrency, setInnerCurrency] = useState(defaultCurrency);
+    const code = currencyProp ?? innerCurrency;
+    const info = useMemo(() => currencyInfo(code, locale), [code, locale]);
+    const symbols = useMemo(() => localeSymbols(locale), [locale]);
+    const step = stepProp && stepProp > 0 ? stepProp : pow10(info.digits);
+    const [draft, setDraft] = useState(() => fromMinor(value !== undefined ? value : defaultValue, info.digits));
+    const minor = toMinor(draft, info.digits);
+    const [seenValue, setSeenValue] = useState(value);
+    const [source, setSource] = useState("external");
+    const [direction, setDirection] = useState(1);
+    if (value !== seenValue) {
+        setSeenValue(value);
+        if (value !== undefined && value !== minor) {
+            setDraft(fromMinor(value, info.digits));
+            setSource("external");
+            setDirection((value ?? 0) >= (minor ?? 0) ? 1 : -1);
+        }
+    }
+    const [focused, setFocused] = useState(false);
+    const [touched, setTouched] = useState(false);
+    const [limitFlash, setLimitFlash] = useState(0);
+    const [announcement, setAnnouncement] = useState("");
+    const [, rerender] = useReducer((count) => count + 1, 0);
+    const inputRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const pendingCaret = useRef(null);
+    const latest = useRef({ minor, draft });
+    useLayoutEffect(() => { latest.current = { minor, draft }; });
+    const money = useCallback((amount) => amount === null ? "" : info.full.format(amount / pow10(info.digits)), [info]);
+    const display = displayOf(draft, symbols);
+    const parts = useMemo(() => partsOf(draft, info.digits, symbols), [draft, info.digits, symbols]);
+    /* ---------------------------------------------- Limits and feedback ---------------------------------------------- */
+    const bumpX = useMotionValue(0);
+    const flashTimer = useRef(undefined);
+    useEffect(() => () => window.clearTimeout(flashTimer.current), []);
+    function refuse(toward, limit) {
+        if (!reduced)
+            animate(bumpX, 0, { ...KICK, velocity: toward * 160 });
+        setLimitFlash(count => count + 1);
+        window.clearTimeout(flashTimer.current);
+        flashTimer.current = window.setTimeout(() => setLimitFlash(0), 1400);
+        setAnnouncement(`${toward > 0 ? "Maximum" : "Minimum"} is ${money(limit)}`);
+    }
+    function emit(nextMinor, nextInfo = info) {
+        onValueChange?.(nextMinor, { currency: nextInfo.code, major: nextMinor === null ? null : nextMinor / pow10(nextInfo.digits), formatted: nextMinor === null ? "" : nextInfo.full.format(nextMinor / pow10(nextInfo.digits)) });
+    }
+    function setAmount(nextDraft, nextSource) {
+        const nextMinor = toMinor(nextDraft, info.digits);
+        setDirection((nextMinor ?? 0) >= (latest.current.minor ?? 0) ? 1 : -1);
+        setSource(nextSource);
+        setDraft(nextDraft);
+        latest.current = { minor: nextMinor, draft: nextDraft };
+        if (nextMinor !== minor)
+            emit(nextMinor);
+        if (nextSource !== "type")
+            setAnnouncement(money(nextMinor));
+    }
+    /* ---------------------------------------------- Typing ---------------------------------------------- */
+    /** Reads what the input holds into a draft and counts the digits and decimal before the caret, so the caret can return to the same spot. */
+    function sanitize(raw, caret) {
+        let out = "", before = 0, dot = false;
+        for (let index = 0; index < raw.length; index++) {
+            const char = raw[index];
+            let kept = "";
+            if (/\d/.test(char))
+                kept = char;
+            else if ((char === symbols.decimal || (char === "." && symbols.group !== ".")) && info.digits > 0 && !dot) {
+                kept = ".";
+                dot = true;
+            }
+            if (!kept)
+                continue;
+            out += kept;
+            if (index < caret)
+                before++;
+        }
+        const pieces = out.split(".");
+        let whole = pieces[0];
+        const fraction = pieces[1];
+        const stripped = whole.length - (whole.replace(/^0+/, "").length);
+        whole = whole.replace(/^0+/, "");
+        let shift = -Math.min(stripped, before);
+        if (fraction !== undefined && !whole) {
+            whole = "0";
+            shift += 1;
+        }
+        if (fraction === undefined && !whole && stripped) {
+            whole = "0";
+            shift += 1;
+        }
+        if (fraction !== undefined && fraction.length > info.digits)
+            return null;
+        if (whole.length > MAX_INTEGER_DIGITS)
+            return null;
+        return { draft: fraction !== undefined ? `${whole}.${fraction}` : whole, before: Math.max(0, before + shift) };
+    }
+    function applyRaw(raw, caret) {
+        const result = sanitize(raw, caret);
+        // A refused keystroke keeps the caret where it was: one significant character before where the browser left it.
+        if (!result) {
+            pendingCaret.current = Math.max(0, [...raw.slice(0, caret)].filter(char => isSignificant(char, symbols.decimal) || char === ".").length - 1);
+            rerender();
+            return;
+        }
+        const nextMinor = toMinor(result.draft, info.digits);
+        if (max !== undefined && nextMinor !== null && nextMinor > max) {
+            pendingCaret.current = Math.max(0, result.before - 1);
+            refuse(1, max);
+            rerender();
+            return;
+        }
+        pendingCaret.current = result.before;
+        setAmount(result.draft, "type");
+    }
+    useLayoutEffect(() => {
+        const input = inputRef.current, count = pendingCaret.current;
+        pendingCaret.current = null;
+        if (!input || count === null || document.activeElement !== input)
+            return;
+        const position = positionAfter(input.value, count, symbols.decimal);
+        input.setSelectionRange(position, position);
+    });
+    function onKeyDown(event) {
+        const input = event.currentTarget;
+        const moves = { ArrowUp: 1, ArrowDown: -1, PageUp: 10, PageDown: -10 };
+        if (event.key in moves) {
+            event.preventDefault();
+            const amount = moves[event.key] * step * (event.shiftKey && Math.abs(moves[event.key]) === 1 ? 10 : 1);
+            nudge(amount, "key");
+            return;
+        }
+        if (event.key === "Enter") {
+            setDraft(settle(draft, info.digits));
+            pendingCaret.current = Number.MAX_SAFE_INTEGER;
+            return;
+        }
+        const start = input.selectionStart ?? 0, end = input.selectionEnd ?? 0;
+        if (start !== end || event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        // Deleting a group separator deletes the digit before it instead of doing nothing.
+        if (event.key === "Backspace" && start > 1 && input.value[start - 1] === symbols.group) {
+            event.preventDefault();
+            applyRaw(input.value.slice(0, start - 2) + input.value.slice(start - 1), start - 2);
+        }
+        if (event.key === "Delete" && input.value[start] === symbols.group) {
+            event.preventDefault();
+            applyRaw(input.value.slice(0, start + 1) + input.value.slice(start + 2), start);
+        }
+    }
+    function onPaste(event) {
+        const text = event.clipboardData.getData("text").trim();
+        if (!text)
+            return;
+        event.preventDefault();
+        // "$1,234.56", "1.234,56 €", "1234.5": a final separator followed by one or two digits is the decimal; the rest are groups.
+        const match = /[.,](\d{1,2})\s*\D*$/.exec(text);
+        const whole = (match ? text.slice(0, match.index) : text).replace(/\D/g, "");
+        const pasted = match && info.digits ? `${whole}.${match[1]}` : whole;
+        if (!/\d/.test(pasted))
+            return;
+        const input = event.currentTarget;
+        const start = input.selectionStart ?? 0, end = input.selectionEnd ?? 0;
+        const inserted = pasted.replace(".", symbols.decimal);
+        const replaceAll = start === 0 && end === input.value.length || !input.value;
+        const raw = replaceAll ? inserted : input.value.slice(0, start) + inserted + input.value.slice(end);
+        applyRaw(raw, replaceAll ? raw.length : start + inserted.length);
+    }
+    /* ---------------------------------------------- Steps and chips ---------------------------------------------- */
+    function nudge(amount, nextSource) {
+        const from = latest.current.minor ?? 0;
+        const floor = min ?? 0, ceiling = max ?? Number.MAX_SAFE_INTEGER;
+        let next = from + amount;
+        if (next > ceiling) {
+            if (from >= ceiling) {
+                refuse(1, ceiling);
+                return;
+            }
+            next = ceiling;
+            refuse(1, ceiling);
+        }
+        if (next < floor) {
+            if (from <= floor && latest.current.minor !== null) {
+                refuse(-1, floor);
+                return;
+            }
+            next = floor;
+        }
+        pendingCaret.current = Number.MAX_SAFE_INTEGER;
+        setAmount(fromMinor(next, info.digits), nextSource);
+    }
+    /* ---------------------------------------------- Fit to width ---------------------------------------------- */
+    const wrapRef = useRef(null);
+    const groupRef = useRef(null);
+    const scale = useMotionValue(1);
+    useLayoutEffect(() => {
+        const wrap = wrapRef.current, group = groupRef.current;
+        if (!wrap || !group || typeof ResizeObserver === "undefined")
+            return;
+        let first = true;
+        const fit = () => {
+            const natural = group.offsetWidth, room = wrap.clientWidth;
+            const next = natural > 0 && room > 0 ? Math.min(1, room / natural) : 1;
+            if (first || reduced)
+                scale.jump(next);
+            else
+                animate(scale, next, spring.smooth);
+            first = false;
+        };
+        const observer = new ResizeObserver(fit);
+        observer.observe(wrap);
+        observer.observe(group);
+        return () => observer.disconnect();
+    }, [reduced, scale]);
+    /* ---------------------------------------------- Currency menu ---------------------------------------------- */
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [activeCode, setActiveCode] = useState(code);
+    const menuRef = useRef(null);
+    const listRef = useRef(null);
+    const menuButtonRef = useRef(null);
+    const optionRefs = useRef(new Map());
+    const options = useMemo(() => currencies.map(entry => currencyInfo(entry, locale)), [currencies, locale]);
+    const canSwitch = options.length > 1;
+    const openMenu = () => { if (disabled)
+        return; setActiveCode(code); setMenuOpen(true); };
+    const closeMenu = useCallback((focusButton) => { setMenuOpen(false); if (focusButton)
+        menuButtonRef.current?.focus({ preventScroll: true }); }, []);
+    useLayoutEffect(() => { if (menuOpen)
+        listRef.current?.focus({ preventScroll: true }); }, [menuOpen]);
+    useEffect(() => {
+        if (!menuOpen)
+            return;
+        const down = (event) => { if (!menuRef.current?.contains(event.target))
+            closeMenu(false); };
+        document.addEventListener("pointerdown", down);
+        return () => document.removeEventListener("pointerdown", down);
+    }, [closeMenu, menuOpen]);
+    const hy = useMotionValue(0), hh = useMotionValue(0), ho = useMotionValue(0);
+    useLayoutEffect(() => {
+        const node = menuOpen ? optionRefs.current.get(activeCode) : undefined;
+        if (!node) {
+            ho.jump(0);
+            return;
+        }
+        if (ho.get() < .05 || reduced) {
+            hy.jump(node.offsetTop);
+            hh.jump(node.offsetHeight);
+        }
+        else {
+            animate(hy, node.offsetTop, GLIDE);
+            animate(hh, node.offsetHeight, GLIDE);
+        }
+        ho.jump(1);
+        node.scrollIntoView?.({ block: "nearest" });
+    }, [activeCode, hh, ho, hy, menuOpen, reduced]);
+    function chooseCurrency(next) {
+        closeMenu(true);
+        if (next.code === code)
+            return;
+        const nextDraft = focused ? convertDraft(draft, next.digits) : settle(convertDraft(draft, next.digits), next.digits);
+        const nextMinor = toMinor(nextDraft, next.digits);
+        if (currencyProp === undefined)
+            setInnerCurrency(next.code);
+        onCurrencyChange?.(next.code);
+        setSource("external");
+        setDraft(nextDraft);
+        latest.current = { minor: nextMinor, draft: nextDraft };
+        emit(nextMinor, next);
+        setAnnouncement(`${next.name}${nextMinor === null ? "" : `, ${next.full.format(nextMinor / pow10(next.digits))}`}`);
+    }
+    const typeahead = useRef({ buffer: "", at: 0 });
+    function onMenuKeyDown(event) {
+        const at = options.findIndex(option => option.code === activeCode);
+        const go = (index) => { event.preventDefault(); setActiveCode(options[Math.max(0, Math.min(options.length - 1, index))].code); };
+        switch (event.key) {
+            case "ArrowDown":
+                go(at + 1);
+                return;
+            case "ArrowUp":
+                go(at - 1);
+                return;
+            case "Home":
+                go(0);
+                return;
+            case "End":
+                go(options.length - 1);
+                return;
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                if (options[at])
+                    chooseCurrency(options[at]);
+                return;
+            case "Escape":
+                event.preventDefault();
+                event.stopPropagation();
+                closeMenu(true);
+                return;
+            case "Tab":
+                closeMenu(false);
+                return;
+        }
+        if (event.key.length === 1 && /\w/.test(event.key)) {
+            const now = performance.now(), state = typeahead.current;
+            state.buffer = now - state.at > 600 ? event.key.toLowerCase() : state.buffer + event.key.toLowerCase();
+            state.at = now;
+            const hit = options.find(option => option.code.toLowerCase().startsWith(state.buffer) || option.name.toLowerCase().startsWith(state.buffer));
+            if (hit) {
+                event.preventDefault();
+                setActiveCode(hit.code);
+            }
+        }
+    }
+    /* ---------------------------------------------- Messages ---------------------------------------------- */
+    const range = min !== undefined && max !== undefined ? `${money(min)} to ${money(max)}` : max !== undefined ? `Up to ${money(max)}` : min !== undefined ? `At least ${money(min)}` : "";
+    const outOfRange = minor !== null && ((min !== undefined && minor < min) || (max !== undefined && minor > max));
+    const belowMin = minor !== null && min !== undefined && minor < min;
+    const builtIn = touched && !focused && outOfRange ? belowMin ? `The minimum is ${money(min ?? 0)}` : `The maximum is ${money(max ?? 0)}` : undefined;
+    const message = error ?? builtIn;
+    const invalid = !!message;
+    const describedBy = [range ? rangeId : null, description ? hintId : null, message ? errorId : null].filter(Boolean).join(" ") || undefined;
+    const instant = source === "type";
+    const chips = quickAdd.filter(amount => amount > 0);
+    return _jsxs("div", { className: [styles.field, className].filter(Boolean).join(" "), "data-disabled": disabled || undefined, children: [_jsx("label", { htmlFor: inputId, className: hideLabel ? styles.srOnly : styles.label, children: label }), _jsxs("div", { className: styles.control, "data-invalid": invalid || undefined, "data-focused": focused || undefined, children: [_jsx("div", { ref: wrapRef, className: styles.amountWrap, onMouseDown: event => { if (event.target !== inputRef.current)
+                            event.preventDefault(); }, onClick: event => { if (!disabled && event.target !== inputRef.current) {
+                            const input = inputRef.current;
+                            input?.focus();
+                            input?.setSelectionRange(input.value.length, input.value.length);
+                        } }, children: _jsxs(motion.div, { ref: groupRef, className: styles.group, style: { scale, x: bumpX }, children: [info.position === "prefix" && _jsx(SymbolSlot, { symbol: info.symbol, reduced: reduced }), _jsxs("span", { className: styles.number, children: [_jsx("span", { className: styles.mirror, "aria-hidden": "true", "data-empty": !draft || undefined, children: _jsx(Glyphs, { parts: parts, direction: direction, instant: instant, reduced: reduced }) }), _jsx("input", { ref: inputRef, id: inputId, className: styles.input, type: "text", role: "spinbutton", inputMode: info.digits ? "decimal" : "numeric", autoComplete: "off", spellCheck: false, value: display, disabled: disabled, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, "aria-label": hideLabel ? label : undefined, "aria-valuenow": minor === null ? undefined : minor / pow10(info.digits), "aria-valuetext": minor === null ? "Empty" : money(minor), "aria-valuemin": min === undefined ? undefined : min / pow10(info.digits), "aria-valuemax": max === undefined ? undefined : max / pow10(info.digits), onChange: event => applyRaw(event.currentTarget.value, event.currentTarget.selectionStart ?? event.currentTarget.value.length), onKeyDown: onKeyDown, onPaste: onPaste, onFocus: () => setFocused(true), onBlur: event => { setFocused(false); setTouched(true); if (draft)
+                                                setDraft(settle(draft, info.digits)); onBlur?.(event); } })] }), info.position === "suffix" && _jsx(SymbolSlot, { symbol: info.symbol, reduced: reduced })] }) }), canSwitch ? _jsxs("div", { ref: menuRef, className: styles.menuAnchor, children: [_jsxs("button", { ref: menuButtonRef, type: "button", className: styles.currencyButton, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": menuOpen, "aria-controls": `${uid}-currencies`, "aria-label": `Currency, ${info.name}`, "data-open": menuOpen || undefined, onClick: () => (menuOpen ? closeMenu(true) : openMenu()), onKeyDown: event => { if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                                    event.preventDefault();
+                                    openMenu();
+                                } }, children: [_jsx("span", { className: styles.code, children: code }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: menuOpen ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(AnimatePresence, { children: menuOpen && _jsx(motion.div, { className: styles.menu, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96, y: -4, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: duration.instant } } : { opacity: 0, scale: .97, y: -2, filter: `blur(${blur.subtle}px)`, transition: { duration: duration.instant, ease: standardEase } }, transition: reduced ? { duration: duration.instant } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enterEase }, filter: { duration: duration.fast, ease: enterEase } }, children: _jsxs("div", { ref: listRef, id: `${uid}-currencies`, className: styles.list, role: "listbox", tabIndex: -1, "aria-label": "Currency", "aria-activedescendant": `${uid}-cur-${activeCode}`, onKeyDown: onMenuKeyDown, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), options.map(option => _jsxs("div", { id: `${uid}-cur-${option.code}`, role: "option", "aria-selected": option.code === code, className: styles.option, "data-active": option.code === activeCode || undefined, ref: node => { if (node)
+                                                    optionRefs.current.set(option.code, node);
+                                                else
+                                                    optionRefs.current.delete(option.code); }, onPointerMove: event => { if (event.pointerType === "mouse" && option.code !== activeCode)
+                                                    setActiveCode(option.code); }, onPointerDown: event => event.preventDefault(), onClick: () => chooseCurrency(option), children: [_jsx("span", { className: styles.optionSymbol, "aria-hidden": "true", children: option.symbol }), _jsx("span", { className: styles.optionCode, children: option.code }), _jsx("span", { className: styles.optionName, children: option.name }), _jsx("span", { className: styles.check, "data-on": option.code === code || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.code))] }) }, "menu") })] }) : _jsx("span", { className: styles.codeStatic, children: code })] }), (chips.length > 0 || range) && _jsxs("div", { className: styles.toolbar, children: [chips.length > 0 && _jsx("div", { className: styles.chips, role: "group", "aria-label": "Quick add", children: chips.map(amount => {
+                            const add = amount * pow10(info.digits);
+                            const atMax = max !== undefined && (minor ?? 0) >= max;
+                            return _jsxs("button", { type: "button", className: styles.chip, disabled: disabled, "aria-disabled": atMax || undefined, "aria-controls": inputId, "aria-label": `Add ${info.whole.format(amount)}`, onClick: () => nudge(add, "chip"), children: ["+", info.whole.format(amount)] }, amount);
+                        }) }), range && _jsx("span", { id: rangeId, className: styles.range, "data-flash": limitFlash > 0 || undefined, children: range })] }), _jsx(AnimatePresence, { initial: false, children: (message || description) && _jsx(motion.span, { className: styles.messageSlot, initial: reduced ? false : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: spring.smooth, opacity: { duration: duration.instant } } }, transition: reduced ? { duration: 0 } : { height: spring.smooth, opacity: { duration: duration.fast } }, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { id: message ? errorId : hintId, className: message ? styles.error : styles.hint, role: message ? "alert" : undefined, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: duration.instant } }, transition: { duration: reduced ? duration.instant : duration.standard, ease: enterEase }, children: message ?? description }, message ?? description) }) }, "message") }), name && _jsx("input", { type: "hidden", name: name, value: minor ?? "" }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] });
+});
+MoneyInput.displayName = "MoneyInput";
+export default MoneyInput;

package/components/money-input/money-input.module.css

@@ -0,0 +1,77 @@
+/* No row gap: grid tracks clamp a negative margin at zero, so a closed message row would still pay the gap. Each row carries its own space instead. */
+.field { display: grid; min-width: 0; font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+.label { justify-self: start; margin-bottom: var(--space-related); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+
+/* One tall shell: the amount on the left, the currency on the right. Set --money-input-height to resize it. */
+.control { position: relative; display: flex; min-width: 0; height: var(--money-input-height, 76px); box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 8px 0 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .control:hover:not([data-invalid]) { border-color: var(--foreground); } }
+.control[data-focused] { border-color: var(--foreground); }
+.control[data-invalid] { border-color: var(--danger); }
+.field[data-disabled] .control { opacity: .5; background: var(--surface-muted); }
+
+/* The amount scales down to fit rather than scroll, so a long number is always read whole. */
+.amountWrap { position: relative; display: flex; min-width: 0; height: 100%; flex: 1; align-items: center; overflow: hidden; cursor: text; }
+.field[data-disabled] .amountWrap { cursor: not-allowed; }
+.group { display: inline-flex; flex: none; align-items: baseline; transform-origin: 0 50%; white-space: nowrap; color: var(--foreground); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; line-height: 1.2; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; font-kerning: none; }
+
+.symbol { position: relative; display: inline-block; margin-right: .06em; color: var(--text-secondary); white-space: pre; }
+.group > .symbol:last-child { margin-right: 0; margin-left: .18em; }
+.symbolSizer { position: absolute; top: 0; left: 0; visibility: hidden; white-space: pre; }
+.symbolGlyph { display: inline-block; white-space: pre; }
+
+/* The input only draws the caret and selection. Its text is always painted by the mirror, so settled, rolling, and typed amounts share one position. */
+.number { position: relative; display: inline-flex; }
+.mirror { display: inline-flex; }
+.input { position: absolute; z-index: 1; top: 0; left: 0; width: calc(100% + .5em); height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: var(--foreground); font: inherit; font-variant-numeric: inherit; font-kerning: none; letter-spacing: inherit; line-height: inherit; outline: none; }
+.input::selection { background: color-mix(in oklab, var(--foreground) 16%, transparent); color: transparent; }
+.input:disabled { cursor: not-allowed; }
+
+/* Each character is a column: a hidden sizer holds its width and the glyph rolls inside, feathered at the top and bottom edge. */
+.column { --feather: .18em; position: relative; display: inline-block; overflow-x: visible; overflow-y: clip; margin-block: calc(var(--feather) * -1); padding-block: var(--feather); mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.4), #000 calc(100% - var(--feather) * 1.4), transparent); transition: color var(--duration-standard) var(--ease-standard); }
+/* Missing cents wait as ghosts, so settling the amount only changes their color. */
+.column[data-ghost] { color: color-mix(in oklab, var(--text-muted) 55%, transparent); }
+.sizer { visibility: hidden; white-space: pre; }
+.glyph { position: absolute; inset: var(--feather) 0; text-align: center; white-space: pre; }
+
+/* Currency switch: plain text on the shell, a quiet fill on hover and while open. It answers a press with color, since it anchors a menu. */
+.menuAnchor { position: relative; flex: none; }
+.currencyButton { display: inline-flex; height: 36px; align-items: center; gap: 4px; padding: 0 8px 0 12px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--foreground); cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 500; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .currencyButton:hover:not(:disabled) { background: var(--surface-muted); } }
+.currencyButton:active:not(:disabled), .currencyButton[data-open] { background: var(--surface-muted); }
+.currencyButton:disabled { cursor: not-allowed; }
+.code { font-variant-numeric: tabular-nums; }
+.codeStatic { flex: none; padding: 0 10px; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
+.chevron { display: grid; width: 16px; height: 16px; place-items: center; color: var(--text-muted); }
+
+/* The menu grows out of the currency button's corner and opens 8px below the shell, whatever its height. */
+.menu { --drop: calc((var(--money-input-height, 76px) - 36px) / 2 + var(--space-related)); position: absolute; z-index: 30; top: calc(100% + var(--drop)); right: -8px; width: min(256px, calc(100vw - 2rem)); box-sizing: border-box; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: calc(100% - 44px) calc(var(--drop) * -1 - 18px); }
+.list { position: relative; display: grid; max-height: 288px; gap: 2px; overflow-y: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; }
+.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
+.option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
+.option[data-active], .option[aria-selected="true"] { color: var(--foreground); }
+.optionSymbol { width: 22px; flex: none; color: var(--text-muted); text-align: center; }
+.optionCode { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
+.optionName { min-width: 0; flex: 1; overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
+.check { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--foreground); opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.check[data-on] { opacity: 1; transform: none; }
+
+/* Quick add chips and the allowed range share one row under the shell. */
+.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-related) var(--space-group); padding-top: var(--space-group); }
+.chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.chip { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+@media (hover: hover) and (pointer: fine) { .chip:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); } }
+.chip:active:not(:disabled) { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 100ms; }
+.chip[aria-disabled="true"] { opacity: .45; }
+.chip:disabled { opacity: .45; cursor: not-allowed; }
+.range { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; transition: color var(--duration-standard) var(--ease-standard); }
+.range[data-flash] { color: var(--warning); transition-duration: var(--duration-instant); }
+
+.messageSlot { position: relative; display: block; overflow: hidden; }
+.hint, .error { display: block; padding-top: var(--space-related); font-size: var(--text-xs); line-height: var(--leading-body); }
+.hint { color: var(--text-muted); }
+.error { color: var(--danger); }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+
+@media (max-width: 420px) { .control { padding-left: 14px; } .group { font-size: var(--text-2xl); } }
+@media (prefers-reduced-motion: reduce) { .control, .column, .check, .chip, .range { transition-duration: 0ms; } .chip:active:not(:disabled) { transform: none; } }