@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/money-input/money-input.js

@@ -0,0 +1,613 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect, useMorphWidth } from "../lib/motion.js";
+import { Button as Button$1 } from "../button/button.js";
+import { SwapText } from "../lib/swap-text.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldMessage, RollingNumber } from "../lib/field-message.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { SelectItem, selectPopoverVariants } from "../select/select.js";
+import { forwardRef, useCallback, useId, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { Button, Group, Input, ListBox, Popover, Select, SelectValue } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/money-input/money-input.tsx
+const MAX_INTEGER_DIGITS = 12;
+/** How far, in px, the amount is pushed toward a limit it just met. */
+const STRAIN_PX = 6;
+const infoCache = /* @__PURE__ */ 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");
+	const 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 {}
+	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 ?? "."
+	};
+}
+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 === void 0 || !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 === void 0 ? whole : `${whole}.${fraction.slice(0, digits)}`;
+}
+const groupInteger = (whole, group) => 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 !== void 0 ? symbols.decimal + fraction : "");
+}
+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;
+}
+/** The currency symbol swaps with a short rise while its slot springs to the new width. */
+function SymbolSlot({ symbol, side }) {
+	const content = useRef(null);
+	useMorphWidth(content, symbol);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "money-input-symbol",
+		className: cnAll("button-slot text-text-secondary", side === "prefix" ? "me-1" : "ms-1.5"),
+		children: /* @__PURE__ */ jsx("span", {
+			ref: content,
+			className: "inline-flex flex-none items-center whitespace-pre",
+			children: /* @__PURE__ */ jsx(SwapText, {
+				swapKey: symbol,
+				motion: "rise",
+				className: "inline-block",
+				children: symbol
+			})
+		})
+	});
+}
+/** The amount the eye sees: whole part, separator and the cents, with the missing ones as muted ghosts. */
+function Amount({ draft, digits, symbols, direction, still }) {
+	const [whole = "", fraction] = draft ? draft.split(".") : [];
+	const typed = fraction ?? "";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"data-ghost": !whole || void 0,
+		className: "inline-flex data-[ghost]:text-muted-foreground",
+		children: /* @__PURE__ */ jsx(RollingNumber, {
+			word: groupInteger(whole || "0", symbols.group),
+			direction,
+			still
+		})
+	}), digits > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"data-ghost": fraction === void 0 || void 0,
+			className: "data-[ghost]:text-muted-foreground",
+			children: symbols.decimal
+		}),
+		typed ? /* @__PURE__ */ jsx("span", {
+			className: "inline-flex",
+			children: /* @__PURE__ */ jsx(RollingNumber, {
+				word: typed,
+				direction,
+				still
+			})
+		}) : null,
+		typed.length < digits ? /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: "0".repeat(digits - typed.length)
+		}) : null
+	] }) : null] });
+}
+const triggerClass = "inline-flex h-9 flex-none cursor-pointer items-center gap-1 rounded-pill border-0 bg-transparent ps-3 pe-2 font-sans text-sm font-medium tabular-nums text-foreground outline-none motion-safe:transition-[background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle data-[hovered]:bg-muted data-[pressed]:bg-muted data-[disabled]:cursor-not-allowed data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)";
+const shellClass = cnAll(fieldSurfaceVariants(), "flex h-19 items-center gap-2 rounded-panel ps-4.5 pe-2", "has-[input:focus]:not-data-[invalid]:border-foreground", "forced-colors:has-[input:focus]:outline-solid forced-colors:has-[input:focus]:outline-(length:--focus-ring-width) forced-colors:has-[input:focus]:outline-offset-(--focus-ring-offset)");
+const MoneyInput = forwardRef(function MoneyInput({ label, labelHidden = 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, isInvalid = false, errorMessage, disabled = false, name, id, className, onBlur }, forwardedRef) {
+	const generated = useId();
+	const inputId = id ?? `${generated}-amount`;
+	const 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 !== void 0 ? 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 !== void 0 && 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 [flash, setFlash] = useState(false);
+	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
+	});
+	useIsomorphicLayoutEffect(() => {
+		latest.current = {
+			minor,
+			draft
+		};
+	});
+	const money = useCallback((amount) => amount === null ? "" : info.full.format(amount / pow10(info.digits)), [info]);
+	const groupRef = useRef(null);
+	const flashTimer = useRef(void 0);
+	function refuse(toward, limit) {
+		const node = groupRef.current;
+		if (node) {
+			node.style.setProperty("--strain-x", `${toward * STRAIN_PX}px`);
+			node.removeAttribute("data-strain");
+			node.offsetWidth;
+			node.setAttribute("data-strain", "");
+		}
+		setFlash(true);
+		window.clearTimeout(flashTimer.current);
+		flashTimer.current = window.setTimeout(() => setFlash(false), 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));
+	}
+	/** 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 = "";
+		let before = 0;
+		let 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 !== void 0 && !whole) {
+			whole = "0";
+			shift += 1;
+		}
+		if (fraction === void 0 && !whole && stripped) {
+			whole = "0";
+			shift += 1;
+		}
+		if (fraction !== void 0 && fraction.length > info.digits) return null;
+		if (whole.length > MAX_INTEGER_DIGITS) return null;
+		return {
+			draft: fraction !== void 0 ? `${whole}.${fraction}` : whole,
+			before: Math.max(0, before + shift)
+		};
+	}
+	function applyRaw(raw, caret) {
+		const result = sanitize(raw, caret);
+		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 !== void 0 && 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");
+	}
+	useIsomorphicLayoutEffect(() => {
+		const input = inputRef.current;
+		const 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 nudge(amount, nextSource) {
+		const from = latest.current.minor ?? 0;
+		const floor = min ?? 0;
+		const 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);
+	}
+	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 unit = moves[event.key];
+			nudge(unit * step * (event.shiftKey && Math.abs(unit) === 1 ? 10 : 1), "key");
+			return;
+		}
+		if (event.key === "Enter") {
+			setDraft(settle(draft, info.digits));
+			pendingCaret.current = Number.MAX_SAFE_INTEGER;
+			return;
+		}
+		const start = input.selectionStart ?? 0;
+		if (start !== (input.selectionEnd ?? 0) || event.metaKey || event.ctrlKey || event.altKey) return;
+		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();
+		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;
+		const 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);
+	}
+	const wrapRef = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const wrap = wrapRef.current;
+		const group = groupRef.current;
+		if (!wrap || !group || typeof ResizeObserver === "undefined") return;
+		const fit = () => {
+			const natural = group.offsetWidth;
+			const room = wrap.clientWidth;
+			group.style.scale = String(natural > 0 && room > 0 ? Math.min(1, room / natural) : 1);
+			if (!group.hasAttribute("data-ready")) {
+				group.offsetWidth;
+				group.setAttribute("data-ready", "");
+			}
+		};
+		fit();
+		const observer = new ResizeObserver(fit);
+		observer.observe(wrap);
+		observer.observe(group);
+		return () => observer.disconnect();
+	}, []);
+	const options = useMemo(() => currencies.map((entry) => currencyInfo(entry, locale)), [currencies, locale]);
+	function chooseCurrency(next) {
+		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 === void 0) 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 range = min !== void 0 && max !== void 0 ? `${money(min)} to ${money(max)}` : max !== void 0 ? `Up to ${money(max)}` : min !== void 0 ? `At least ${money(min)}` : "";
+	const belowMin = minor !== null && min !== void 0 && minor < min;
+	const builtIn = touched && !focused && (belowMin || minor !== null && max !== void 0 && minor > max) ? belowMin ? `The minimum is ${money(min ?? 0)}` : `The maximum is ${money(max ?? 0)}` : void 0;
+	const invalid = isInvalid || builtIn !== void 0;
+	const message = error ?? (invalid ? errorMessage ?? builtIn : void 0);
+	const chips = quickAdd.filter((amount) => amount > 0);
+	const field = useFieldWiring({
+		enabled: true,
+		id: inputId,
+		describedBy: range ? rangeId : void 0,
+		invalid: invalid || void 0,
+		description,
+		error: message
+	});
+	const typing = source === "type";
+	const display = displayOf(draft, symbols);
+	const canSwitch = options.length > 1;
+	const control = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(Group, {
+			role: "presentation",
+			isDisabled: disabled,
+			isInvalid: invalid || Boolean(message),
+			"data-slot": "money-input-shell",
+			className: shellClass,
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: wrapRef,
+				className: "relative flex h-full min-w-0 flex-1 cursor-text items-center overflow-hidden",
+				onMouseDown: (event) => {
+					if (event.target !== inputRef.current) event.preventDefault();
+				},
+				onClick: (event) => {
+					if (disabled || event.target === inputRef.current) return;
+					const input = inputRef.current;
+					input?.focus();
+					input?.setSelectionRange(input.value.length, input.value.length);
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: groupRef,
+					"data-slot": "money-input-amount",
+					className: "inline-flex flex-none origin-left items-baseline whitespace-nowrap font-display text-h2 font-medium tabular-nums text-foreground data-[ready]:motion-safe:transition-[scale] data-[ready]:motion-safe:duration-(--duration-smooth) data-[ready]:motion-safe:ease-smooth data-[strain]:motion-safe:animate-field-strain",
+					children: [
+						info.position === "prefix" ? /* @__PURE__ */ jsx(SymbolSlot, {
+							symbol: info.symbol,
+							side: "prefix"
+						}) : null,
+						/* @__PURE__ */ jsxs("span", {
+							className: "relative inline-flex",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-slot": "money-input-display",
+								className: "inline-flex",
+								children: /* @__PURE__ */ jsx(Amount, {
+									draft,
+									digits: info.digits,
+									symbols,
+									direction,
+									still: typing
+								})
+							}), /* @__PURE__ */ jsx(Input, {
+								ref: inputRef,
+								...field.controlProps,
+								"data-slot": "money-input-input",
+								type: "text",
+								role: "spinbutton",
+								inputMode: info.digits ? "decimal" : "numeric",
+								autoComplete: "off",
+								spellCheck: false,
+								value: display,
+								disabled,
+								"aria-label": labelHidden ? label : void 0,
+								"aria-valuenow": minor === null ? void 0 : minor / pow10(info.digits),
+								"aria-valuetext": minor === null ? "Empty" : money(minor),
+								"aria-valuemin": min === void 0 ? void 0 : min / pow10(info.digits),
+								"aria-valuemax": max === void 0 ? void 0 : max / pow10(info.digits),
+								onChange: (event) => applyRaw(event.currentTarget.value, event.currentTarget.selectionStart ?? event.currentTarget.value.length),
+								onKeyDown,
+								onPaste,
+								onFocus: () => setFocused(true),
+								onBlur: (event) => {
+									setFocused(false);
+									setTouched(true);
+									if (draft) setDraft(settle(draft, info.digits));
+									onBlur?.(event);
+								},
+								className: "absolute top-0 left-0 z-10 m-0 h-full w-[calc(100%+0.5em)] border-0 bg-transparent p-0 [font:inherit] text-transparent caret-foreground outline-none selection:bg-primary/20 selection:text-transparent data-[disabled]:cursor-not-allowed"
+							})]
+						}),
+						info.position === "suffix" ? /* @__PURE__ */ jsx(SymbolSlot, {
+							symbol: info.symbol,
+							side: "suffix"
+						}) : null
+					]
+				})
+			}), canSwitch ? /* @__PURE__ */ jsxs(Select, {
+				"aria-label": "Currency",
+				selectedKey: code,
+				isDisabled: disabled,
+				onSelectionChange: (key) => {
+					const next = options.find((option) => option.code === key);
+					if (next) chooseCurrency(next);
+				},
+				"data-slot": "money-input-currency",
+				className: "flex-none",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					className: cnAll(triggerClass, "group/trigger"),
+					children: [/* @__PURE__ */ jsx(SelectValue, { children: () => code }), /* @__PURE__ */ jsx("svg", {
+						"aria-hidden": "true",
+						viewBox: "0 0 16 16",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.75",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						className: "size-4 text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180",
+						children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4" })
+					})]
+				}), /* @__PURE__ */ jsx(Popover, {
+					placement: "bottom end",
+					offset: 12,
+					"data-slot": "money-input-currency-popover",
+					className: cnAll(selectPopoverVariants(), "w-64"),
+					children: /* @__PURE__ */ jsx(ListBox, {
+						"aria-label": "Currency",
+						className: "outline-none",
+						children: options.map((option) => /* @__PURE__ */ jsxs(SelectItem, {
+							id: option.code,
+							textValue: option.code,
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "w-6 flex-none text-center text-muted-foreground",
+									children: option.symbol
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "flex-none font-medium tabular-nums",
+									children: option.code
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1 truncate text-xs text-muted-foreground",
+									children: option.name
+								})
+							]
+						}, option.code))
+					})
+				})]
+			}) : /* @__PURE__ */ jsx("span", {
+				"data-slot": "money-input-currency",
+				className: "flex-none px-2.5 text-sm font-medium text-text-secondary",
+				children: code
+			})]
+		}),
+		/* @__PURE__ */ jsx(FieldMessage, {
+			id: field.errorId,
+			text: message,
+			tone: "error"
+		}),
+		chips.length > 0 || range ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-2 pt-3",
+			children: [chips.length > 0 ? /* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-label": "Quick add",
+				className: "flex flex-wrap gap-1.5",
+				children: chips.map((amount) => /* @__PURE__ */ jsxs(Button$1, {
+					variant: "outlineNeutral",
+					size: "sm",
+					isDisabled: disabled || max !== void 0 && (minor ?? 0) >= max,
+					"aria-controls": inputId,
+					"aria-label": `Add ${info.whole.format(amount)}`,
+					onPress: () => nudge(amount * pow10(info.digits), "chip"),
+					children: ["+", info.whole.format(amount)]
+				}, amount))
+			}) : null, range ? /* @__PURE__ */ jsx("span", {
+				id: rangeId,
+				"data-flash": flash || void 0,
+				className: "text-xs tabular-nums text-muted-foreground motion-safe:transition-colors motion-safe:duration-(--duration-standard) data-[flash]:text-destructive-strong motion-safe:data-[flash]:duration-(--duration-instant)",
+				children: range
+			}) : null]
+		}) : null,
+		name ? /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: minor ?? ""
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			role: "status",
+			"aria-live": "polite",
+			children: announcement
+		})
+	] });
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full min-w-0 font-sans", className),
+		"data-slot": "money-input",
+		children: /* @__PURE__ */ jsx(FieldShell, {
+			label: labelHidden ? null : label,
+			controlId: field.controlId,
+			description,
+			hintId: field.hintId,
+			error: void 0,
+			errorId: void 0,
+			children: control
+		})
+	});
+});
+//#endregion
+export { MoneyInput };
+
+//# sourceMappingURL=money-input.js.map