@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/Modal/Overlay.js

@@ -0,0 +1,68 @@
+'use client';
+import { useModalContext } from "./context.js";
+import Modal_module_default from "./Modal.module.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+// src/components/Modal/Overlay.tsx
+var PORTAL_EXEMPT_SELECTOR = "[data-modal-portal-root], [data-drawer-portal-root], [data-tour-portal-root]";
+/**
+* Portaled dimming/blurred backdrop rendered behind the dialog. Owns the
+* inert-background attribute on body children + the overlay-click
+* dismissal (only fires when the click target is the overlay itself,
+* not bubbled from content).
+*
+* Carries three data-attributes consumed by SCSS:
+* - `data-variant`        : 'solid' | 'blur' — visual variant
+* - `data-stack-position` : 'top' | 'underneath' | 'hidden'
+*     - 'top'       — this is the topmost open modal
+*     - 'underneath' — lower modal in overlay-stack mode (stays visible)
+*     - 'hidden'    — lower modal in replace-stack mode (display: none)
+* - `data-overlay-paint`  : 'yes' | 'no'
+*     - 'yes' — this overlay paints its dim/blur background
+*     - 'no'  — transparent (upper modal in overlay-stack mode)
+*/
+function Overlay({ children }) {
+	const ctx = useModalContext("Overlay");
+	useEffect(() => {
+		if (!ctx.isTop) return;
+		const bodyChildren = Array.from(document.body.children);
+		const toRestore = [];
+		for (const el of bodyChildren) {
+			if (el.matches(PORTAL_EXEMPT_SELECTOR)) continue;
+			const had = el.hasAttribute("inert");
+			if (!had) el.setAttribute("inert", "");
+			toRestore.push({
+				el,
+				had
+			});
+		}
+		return () => {
+			for (const { el, had } of toRestore) if (!had) el.removeAttribute("inert");
+		};
+	}, [ctx.isTop]);
+	const onClick = (e) => {
+		if (e.target !== e.currentTarget) return;
+		if (!ctx.dismissOnOverlayClick) return;
+		if (!ctx.isTop) return;
+		ctx.setOpen(false);
+	};
+	let stackPosition;
+	if (ctx.isTop) stackPosition = "top";
+	else if (ctx.topMode === "replace") stackPosition = "hidden";
+	else stackPosition = "underneath";
+	const paint = ctx.topMode === "replace" && ctx.isTop || ctx.topMode === "overlay" && ctx.depth === 0;
+	const style = { ["--modal-depth"]: String(ctx.depth) };
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		"data-modal-portal-root": "",
+		"data-state": ctx.open ? "open" : "closed",
+		"data-variant": ctx.overlay,
+		"data-stack-position": stackPosition,
+		"data-overlay-paint": paint ? "yes" : "no",
+		className: Modal_module_default.overlay,
+		style,
+		onClick,
+		children
+	}), document.body);
+}
+export { Overlay };

package/dist/components/Modal/context.d.ts

@@ -0,0 +1,49 @@
+import { type RefObject } from 'react';
+import type { OverlayStackMode } from '../_internal/overlay/index.js';
+/** @deprecated alias of {@link OverlayStackMode}. Kept for backward compatibility. */
+export type ModalStackMode = OverlayStackMode;
+/**
+ * Size preset. `'sm'` / `'md'` / `'lg'` are fixed widths (400 / 560 / 800px)
+ * whose height grows with content. `'full'` is near-full-screen — 95vw × 90dvh
+ * unless `--modal-content-width-full` / `--modal-content-height-full` are
+ * overridden — a FIXED height whatever the content, with Body scrolling between a pinned
+ * Header and Footer — for reading long documents (an HTML email, a report).
+ * Every size goes full-screen below a 640px viewport.
+ */
+export type ModalSize = 'sm' | 'md' | 'lg' | 'full';
+export type ModalOverlayVariant = 'solid' | 'blur';
+export interface ModalContextValue {
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    /** Stable modal id, used by the stack registry + aria-controls bindings. */
+    modalId: string;
+    /** Ref to the dialog container, populated by <Content>. Used for focus trap + outside-click. */
+    contentRef: RefObject<HTMLDivElement | null>;
+    /** Stable id for the heading registered by <Header>, used for aria-labelledby. */
+    headingId: string | null;
+    /** Called by <Header> to register its heading id. */
+    setHeadingId: (id: string | null) => void;
+    /** Size preset; drives the content's --modal-size CSS class. */
+    size: ModalSize;
+    /** Overlay variant; drives data-variant on the portal root. */
+    overlay: ModalOverlayVariant;
+    /** Forwarded from props for the Esc handler in Content. */
+    disableEscapeClose: boolean;
+    /** Forwarded for the overlay click handler. */
+    dismissOnOverlayClick: boolean;
+    /** Forwarded so Content can override initial focus. */
+    initialFocusRef: RefObject<HTMLElement | null> | undefined;
+    /** From Modal props; used by Content for aria-label when no heading is registered. */
+    ariaLabel: string | undefined;
+    ariaDescribedBy: string | undefined;
+    /** Current stack depth (for the --modal-depth custom prop on the overlay). */
+    depth: number;
+    /** Whether this modal is currently the topmost open modal. Drives Escape/focus-trap activity. */
+    isTop: boolean;
+    /** This modal's own stackMode prop. */
+    stackMode: ModalStackMode;
+    /** Mode of the current top modal (null if stack is empty). */
+    topMode: ModalStackMode | null;
+}
+export declare const ModalContext: import("react").Context<ModalContextValue | null>;
+export declare function useModalContext(componentName: string): ModalContextValue;

package/dist/components/Modal/context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext, useContext } from "react";
+// src/components/Modal/context.ts
+var ModalContext = createContext(null);
+function useModalContext(componentName) {
+	const ctx = useContext(ModalContext);
+	if (!ctx) throw new Error(`<Modal.${componentName}> must be used inside <Modal>.`);
+	return ctx;
+}
+export { ModalContext, useModalContext };

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal.js';
+export type { ModalProps, ModalSize, ModalOverlayVariant, ModalStackMode, ModalHeaderProps, ModalBodyProps, ModalFooterProps, ModalCloseProps, } from './Modal.js';

package/dist/components/MoneyInput/MoneyInput.css

@@ -0,0 +1,90 @@
+:root {
+  --input-bg: var(--color-bg);
+  --input-fg: var(--color-fg);
+  --input-border-color: var(--color-border-strong);
+  --input-radius: var(--radius-md);
+  --input-line-height: var(--line-height-normal);
+  --input-placeholder-fg: var(--color-fg-subtle);
+  --input-border-color-focus: var(--color-accent);
+  --input-ring-focus: var(--ring-accent);
+  --input-bg-disabled: var(--color-bg-subtle);
+  --input-border-color-disabled: var(--color-border);
+  --input-fg-disabled: var(--color-fg-subtle);
+  --input-border-color-invalid: var(--color-danger);
+  --input-ring-invalid: var(--ring-danger);
+  --input-height-sm: var(--size-sm);
+  --input-height-md: var(--size-md);
+  --input-height-lg: var(--size-lg);
+  --input-padding-x-sm: var(--space-2);
+  --input-padding-x-md: var(--space-3);
+  --input-padding-x-lg: var(--space-3);
+  --input-font-size-sm: var(--font-size-sm);
+  --input-font-size-md: var(--font-size-md);
+  --input-font-size-lg: var(--font-size-lg);
+  --input-suggestions-bg: var(--color-bg);
+  --input-suggestions-border-color: var(--color-border);
+  --input-suggestions-radius: var(--radius-md);
+  --input-suggestions-shadow: var(--shadow-md);
+  --input-suggestions-padding: var(--space-1);
+  --input-suggestions-max-height: 320px;
+  --input-suggestion-padding-y: var(--space-2);
+  --input-suggestion-padding-x: var(--space-3);
+  --input-suggestion-font-size: var(--font-size-md);
+  --input-suggestion-fg: var(--color-fg);
+  --input-suggestion-radius: var(--radius-sm);
+  --input-suggestion-bg-active: var(--color-bg-muted);
+}
+
+.MoneyInput__root__Stqvc {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--space-1);
+  align-items: center;
+}
+
+.MoneyInput__currency__QCN7o {
+  max-width: var(--size-control-currency);
+}
+
+.MoneyInput__amount__3Lxdc {
+  width: 100%;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.MoneyInput__prefix__9l6Ll {
+  display: inline-flex;
+  align-items: center;
+  border: var(--border-width) solid var(--input-border-color);
+  border-radius: var(--input-radius);
+  background: var(--input-bg-disabled);
+  color: var(--input-fg);
+  line-height: var(--input-line-height);
+}
+
+.MoneyInput__prefix-sm__CDfR4 {
+  height: var(--input-height-sm);
+  padding: 0 var(--input-padding-x-sm);
+  font-size: var(--input-font-size-sm);
+}
+
+.MoneyInput__prefix-md__DUwVK {
+  height: var(--input-height-md);
+  padding: 0 var(--input-padding-x-md);
+  font-size: var(--input-font-size-md);
+}
+
+.MoneyInput__prefix-lg__bi_GY {
+  height: var(--input-height-lg);
+  padding: 0 var(--input-padding-x-lg);
+  font-size: var(--input-font-size-lg);
+}
+
+.MoneyInput__prefix-invalid__LVbHl {
+  border-color: var(--input-border-color-invalid);
+}
+
+.MoneyInput__prefix-disabled__0BOKa {
+  border-color: var(--input-border-color-disabled);
+  color: var(--input-fg-disabled);
+}

package/dist/components/MoneyInput/MoneyInput.d.ts

@@ -0,0 +1,52 @@
+import { type HTMLAttributes } from 'react';
+import { type CurrencyDisplay } from '../_internal/currency.js';
+/** MoneyInput size — passed through to the picker + Input. */
+export type MoneyInputSize = 'sm' | 'md' | 'lg';
+/** `amount` is a canonical decimal string (`"1234.50"`, `"-3"`), never a JS number; `null` = empty. */
+export interface MoneyValue {
+    amount: string | null;
+    currency: string;
+}
+export interface MoneyInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Controlled value. `amount` is a canonical decimal string or `null`; `currency` an ISO 4217 code. */
+    value: MoneyValue;
+    /** Fires on every amount edit and currency switch. Never fires for blur-without-edit or external value changes. */
+    onChange: (value: MoneyValue) => void;
+    /** ISO 4217 codes to offer. Exactly one renders a static prefix instead of a picker. */
+    currencies: string[];
+    /** How the selected currency renders: `"code"` (default), `"symbol"` or `"both"`. */
+    currencyDisplay?: CurrencyDisplay;
+    /** Overrides the currency picker's accessible name (default: "<group label> Currency"). */
+    currencyLabel?: string;
+    /** Allow a leading minus. Default `false`. */
+    allowNegative?: boolean;
+    /** BCP-47 locale for separators and currency names. Defaults to the i18n locale. */
+    locale?: string;
+    /** Control size, forwarded to both controls. Default `"md"`. */
+    size?: MoneyInputSize;
+    /** Error chrome on both controls. */
+    invalid?: boolean;
+    /** Disable both controls. */
+    disabled?: boolean;
+    /** Make both controls read-only. */
+    readOnly?: boolean;
+    /** Mark the amount required. */
+    required?: boolean;
+    /** Placeholder for the amount field. */
+    placeholder?: string;
+    /** Emits hidden `<name>` (canonical amount) and `<name>_currency` inputs for native form posts. */
+    name?: string;
+    /** Stable id; placed on the amount field so an external `<label htmlFor>` focuses it. */
+    id?: string;
+    /** Accessible name when used STANDALONE (outside `<Field>`). */
+    'aria-label'?: string;
+    /** Ids of elements labelling the group (injected by `<Field>`). */
+    'aria-labelledby'?: string;
+    /** Ids of description/error elements; forwarded to the amount field (injected by `<Field>`). */
+    'aria-describedby'?: string;
+}
+/**
+ * Money field: a currency picker plus a formatted decimal-string amount.
+ * @see docs/components/MoneyInput.md
+ */
+export declare const MoneyInput: import("react").ForwardRefExoticComponent<MoneyInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/MoneyInput/MoneyInput.js

@@ -0,0 +1,298 @@
+'use client';
+import { CurrencySelect } from "../CurrencySelect/CurrencySelect.js";
+import { Input } from "../Input/Input.js";
+import { useLocale } from "../../i18n/useLocale.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { canonicalToDraft, currencyDisplayText, currencyName, currencyPrecision, draftToCanonical, formatDraft, isValidCurrency, localeSeparators, parseAmount, parseLocalAmount, roundAmount } from "../_internal/currency.js";
+import MoneyInput_module_default from "./MoneyInput.module.js";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/MoneyInput/MoneyInput.tsx
+var FALLBACK_PRECISION = 2;
+var CANONICAL = /^-?\d+(\.\d+)?$/;
+/** Pads a canonical amount's fraction to `prec` digits (`"13"` → `"13.00"`). */
+var padCanonical = (amount, prec) => {
+	const [int, frac = ""] = amount.split(".");
+	return prec ? `${int}.${frac.padEnd(prec, "0")}` : int;
+};
+/**
+* Money field: a currency picker plus a formatted decimal-string amount.
+* @see docs/components/MoneyInput.md
+*/
+var MoneyInput = forwardRef(function MoneyInput({ value, onChange, currencies, currencyDisplay = "code", currencyLabel, allowNegative = false, locale, size = "md", invalid, disabled, readOnly, required, placeholder, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className, ...rest }, ref) {
+	const t = useTranslation();
+	const appLocale = useLocale();
+	const loc = locale ?? appLocale;
+	const uid = useId();
+	const currencyWordId = `${uid}-currency`;
+	const nameId = `${uid}-name`;
+	const valueCurrency = value.currency;
+	const outside = isValidCurrency(valueCurrency) && !currencies.includes(valueCurrency);
+	const offered = useMemo(() => outside ? [...currencies, valueCurrency] : currencies, [
+		outside,
+		currencies,
+		valueCurrency
+	]);
+	const single = offered.length === 1 && isValidCurrency(offered[0]);
+	const currency = single ? offered[0] : valueCurrency;
+	const replaced = currency !== valueCurrency;
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (outside) console.warn(`<MoneyInput>: value.currency "${valueCurrency}" is not in \`currencies\`.`);
+		if (replaced) console.warn(`<MoneyInput>: value.currency "${valueCurrency}" is invalid; using "${currency}".`);
+	}, [
+		outside,
+		replaced,
+		valueCurrency,
+		currency
+	]);
+	const precision = isValidCurrency(currency) ? currencyPrecision(currency) : FALLBACK_PRECISION;
+	const malformed = value.amount !== null && !CANONICAL.test(value.amount);
+	useEffect(() => {
+		if (malformed && process.env.NODE_ENV !== "production") console.warn(`<MoneyInput>: value.amount "${value.amount}" is not a canonical decimal string.`);
+	}, [malformed, value.amount]);
+	const display = (amount, prec, l) => {
+		if (amount === null || !CANONICAL.test(amount)) return "";
+		const d = canonicalToDraft(roundAmount(amount, prec));
+		return d ? formatDraft(d, {
+			locale: l,
+			precision: prec,
+			pad: true
+		}) : "";
+	};
+	const [text, setText] = useState(() => display(value.amount, precision, loc));
+	const synced = useRef({
+		amount: value.amount,
+		currency,
+		locale: loc
+	});
+	const dirty = useRef(false);
+	const amountRef = useRef(null);
+	useEffect(() => {
+		const s = synced.current;
+		if (s.amount === value.amount && s.currency === currency && s.locale === loc) return;
+		synced.current = {
+			amount: value.amount,
+			currency,
+			locale: loc
+		};
+		setText(display(value.amount, precision, loc));
+	}, [
+		value.amount,
+		currency,
+		loc,
+		precision
+	]);
+	const emit = (amount, cur) => {
+		synced.current = {
+			amount,
+			currency: cur,
+			locale: loc
+		};
+		onChange({
+			amount,
+			currency: cur
+		});
+	};
+	const { group, decimal } = localeSeparators(loc);
+	const parseOwn = (s) => parseLocalAmount(s, {
+		locale: loc,
+		precision,
+		allowNegative: allowNegative || text.startsWith("-")
+	});
+	const isSignificant = (c) => c >= "0" && c <= "9" || c === decimal || c === "-";
+	/**
+	* Shared edit path. Writes the DOM value + caret directly so React's controlled-value
+	* reconciliation finds nothing to change and never throws the caret to the end.
+	*/
+	const applyEdit = (input, raw, caret, inserted = false) => {
+		const prev = text;
+		const typed = !inserted && raw.length === prev.length + 1;
+		const count = (str, c) => str.split(c).length - 1;
+		const fracDigitsOf = (str) => str.includes(decimal) ? str.slice(str.indexOf(decimal) + 1).replace(/\D/g, "").length : 0;
+		if (typed && count(raw, decimal) === 1 && fracDigitsOf(raw) > precision && /\d/.test(raw[caret - 1]) && caret - 1 > raw.indexOf(decimal) && /\d/.test(raw[caret] ?? "")) raw = raw.slice(0, caret) + raw.slice(caret + 1);
+		const unsignedOnly = !allowNegative && count(raw, "-") > count(prev, "-");
+		const decimals = count(raw, decimal);
+		const dash = raw.indexOf("-");
+		const fracDigits = fracDigitsOf(raw);
+		if (unsignedOnly || (typed || inserted) && (decimals > 1 || dash !== -1 && (dash !== 0 || raw.lastIndexOf("-") !== 0)) || typed && decimals === 1 && fracDigits > precision) {
+			const back = Math.max(0, caret - Math.max(0, raw.length - prev.length));
+			input.value = prev;
+			input.setSelectionRange(back, back);
+			return;
+		}
+		dirty.current = true;
+		const draft = parseOwn(raw);
+		const next = draft ? formatDraft(draft, {
+			locale: loc,
+			precision,
+			pad: false
+		}) : "";
+		const before = raw.slice(0, caret);
+		let n = [...before].filter(isSignificant).length;
+		if (draft && !draft.int && draft.frac !== null && before.includes(decimal)) n++;
+		let pos = 0;
+		while (n > 0 && pos < next.length) if (isSignificant(next[pos++])) n--;
+		input.value = next;
+		input.setSelectionRange(pos, pos);
+		setText(next);
+		const amount = draft ? draftToCanonical(draft) : null;
+		if (amount !== synced.current.amount) emit(amount, currency);
+	};
+	/**
+	* Paste/drop: parse ONLY the incoming segment leniently (cross-locale separators, sign forms),
+	* rewrite it as own-locale plain text, splice it over the selection and run the own-locale path.
+	* Own formatted text never meets the lenient parser, so a group dot can't become a decimal.
+	*/
+	const insertText = (input, segment) => {
+		if (readOnly) return;
+		const d = parseAmount(segment, {
+			locale: loc,
+			precision,
+			allowNegative: true
+		});
+		if (!d || d === "invalid") return;
+		const start = input.selectionStart ?? text.length;
+		const end = input.selectionEnd ?? text.length;
+		const whole = start === 0 && end === text.length;
+		if (d.negative && (!whole || !allowNegative && !text.startsWith("-"))) return;
+		const own = (d.negative ? "-" : "") + d.int + (d.frac === null ? "" : decimal + d.frac);
+		const raw = text.slice(0, start) + own + text.slice(end);
+		const at = raw.indexOf(decimal);
+		if (!whole && at >= 0 && raw.slice(at + 1).replace(/\D/g, "").length > precision) return;
+		applyEdit(input, raw, start + own.length, true);
+	};
+	const onAmountPaste = (e) => {
+		e.preventDefault();
+		insertText(e.currentTarget, e.clipboardData.getData("text/plain"));
+	};
+	const onAmountDrop = (e) => {
+		e.preventDefault();
+		insertText(e.currentTarget, e.dataTransfer.getData("text/plain"));
+	};
+	const onAmountChange = (e) => {
+		const input = e.target;
+		applyEdit(input, input.value, input.selectionStart ?? input.value.length);
+	};
+	const onAmountKeyDown = (e) => {
+		const input = e.currentTarget;
+		const { selectionStart: start, selectionEnd: end, value: v } = input;
+		if (readOnly || start === null || end === null) return;
+		if (start === end) {
+			const stepOver = (i) => v[i] === group || v[i] === decimal && i + 1 < v.length;
+			if (e.key === "Backspace" && stepOver(start - 1)) input.setSelectionRange(start - 1, start - 1);
+			if (e.key === "Delete" && stepOver(start)) input.setSelectionRange(start + 1, start + 1);
+		}
+		if (e.key === "." && decimal !== "." && !v.includes(decimal)) {
+			e.preventDefault();
+			applyEdit(input, v.slice(0, start) + decimal + v.slice(end), start + 1);
+		}
+	};
+	const onBlur = () => {
+		const draft = parseOwn(text);
+		const canonical = draft ? draftToCanonical(draft) : null;
+		if (!draft || canonical === null) {
+			setText("");
+			return;
+		}
+		const padded = {
+			...draft,
+			frac: precision ? (draft.frac ?? "").padEnd(precision, "0") : null
+		};
+		setText(formatDraft(padded, {
+			locale: loc,
+			precision,
+			pad: true
+		}));
+		const amount = draftToCanonical(padded);
+		if (dirty.current && amount !== synced.current.amount) emit(amount, currency);
+	};
+	const onCurrencyChange = (code) => {
+		if (!code) return;
+		const prec = currencyPrecision(code);
+		let amount = value.amount;
+		if (amount !== null && CANONICAL.test(amount)) {
+			amount = roundAmount(amount, prec);
+			if (document.activeElement !== amountRef.current) amount = padCanonical(amount, prec);
+		}
+		setText(display(amount, prec, loc));
+		emit(amount, code);
+	};
+	const currencyWord = t("moneyInput.currencyLabel");
+	const currencyNaming = currencyLabel ? { "aria-label": currencyLabel } : ariaLabelledby ? { "aria-labelledby": `${ariaLabelledby} ${currencyWordId}` } : { "aria-label": ariaLabel ? `${ariaLabel} ${currencyWord}` : currencyWord };
+	const describedBy = [ariaDescribedby, single ? nameId : void 0].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref,
+		className: clsx(MoneyInput_module_default.root, className),
+		role: "group",
+		"aria-label": ariaLabelledby ? void 0 : ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: currencyWordId,
+				hidden: true,
+				children: currencyWord
+			}),
+			single ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: clsx(MoneyInput_module_default.prefix, MoneyInput_module_default[`prefix-${size}`], invalid && MoneyInput_module_default["prefix-invalid"], disabled && MoneyInput_module_default["prefix-disabled"]),
+				children: currencyDisplayText(offered[0], currencyDisplay, loc)
+			}), /* @__PURE__ */ jsx("span", {
+				id: nameId,
+				hidden: true,
+				children: currencyName(offered[0], loc)
+			})] }) : /* @__PURE__ */ jsx(CurrencySelect, {
+				className: MoneyInput_module_default.currency,
+				currencies: offered,
+				currencyDisplay,
+				locale: loc,
+				value: currency,
+				onChange: onCurrencyChange,
+				clearable: false,
+				selectOnOpen: true,
+				size,
+				invalid,
+				disabled,
+				readOnly,
+				...currencyNaming,
+				placeholder: t("currencySelect.search")
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				ref: amountRef,
+				className: MoneyInput_module_default.amount,
+				id,
+				inputMode: allowNegative ? "text" : "decimal",
+				autoComplete: "off",
+				value: text,
+				onChange: onAmountChange,
+				onKeyDown: onAmountKeyDown,
+				onPaste: onAmountPaste,
+				onDrop: onAmountDrop,
+				onFocus: () => {
+					dirty.current = false;
+				},
+				onBlur,
+				size,
+				invalid,
+				disabled,
+				readOnly,
+				required,
+				"aria-label": t("moneyInput.amountLabel"),
+				"aria-describedby": describedBy || void 0,
+				placeholder
+			}),
+			name && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: value.amount ?? ""
+			}), /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}_currency`,
+				value: currency
+			})] })
+		]
+	});
+});
+export { MoneyInput };

package/dist/components/MoneyInput/MoneyInput.module.js

@@ -0,0 +1,18 @@
+import "./MoneyInput.css";
+// src/components/MoneyInput/MoneyInput.module.scss
+var root = "MoneyInput__root__Stqvc";
+var currency = "MoneyInput__currency__QCN7o";
+var amount = "MoneyInput__amount__3Lxdc";
+var prefix = "MoneyInput__prefix__9l6Ll";
+var MoneyInput_module_default = {
+	root,
+	currency,
+	amount,
+	prefix,
+	"prefix-sm": "MoneyInput__prefix-sm__CDfR4",
+	"prefix-md": "MoneyInput__prefix-md__DUwVK",
+	"prefix-lg": "MoneyInput__prefix-lg__bi_GY",
+	"prefix-invalid": "MoneyInput__prefix-invalid__LVbHl",
+	"prefix-disabled": "MoneyInput__prefix-disabled__0BOKa"
+};
+export { amount, currency, MoneyInput_module_default as default, prefix, root };

package/dist/components/MoneyInput/index.d.ts

@@ -0,0 +1,2 @@
+export { MoneyInput } from './MoneyInput.js';
+export type { MoneyInputProps, MoneyInputSize, MoneyValue } from './MoneyInput.js';