@nxgt/material 3.88.1 → 3.91.0

package/docs/guides/app-shell.md

@@ -105,12 +105,13 @@ type MenuItem = {
 - **`footer: true` pins an entry to the footer.** Being last in the list does
   not: appending an entry never moves another one out of the footer.
 - **`display: 'icon'` draws the entry as a round, icon-only button.** Meant
-  for the footer's "Settings": in the collapsed rail, the expanded sidebar and
-  the phone's menu sheet alike, it is an `IconButton` (the Button family's
-  look, ghost, tonal when it is the active entry) with the label as its
-  tooltip and, visually hidden, its accessible name, `aria-current="page"`
-  when active, and a 44px target on a coarse pointer. The entries without it
-  keep their icon and label. An icon entry draws no `badge`.
+  for the footer's "Settings": in the collapsed rail and the expanded sidebar
+  it is an `IconButton` (the Button family's look, ghost, tonal when it is the
+  active entry) with the label as its tooltip and, visually hidden, its
+  accessible name, `aria-current="page"` when active, and a 44px target on a
+  coarse pointer. The phone's menu sheet always shows the icon and the label,
+  since a lone icon reads poorly there. The entries without it keep their icon
+  and label. An icon button draws no `badge`.
 
   ```tsx
   { label: t('menu.settings'), url: '/settings', icon: 'gear', footer: true, display: 'icon' }
@@ -400,14 +401,27 @@ value (what the props resolve to), and `navigationClasses()` the classes that
 show each preset only at the sizes it is configured for. `DEFAULT_NAVIGATION` is
 the default value (`modal-drawer`, `rail`, `rail`).
 
+`childrenIn: 'sidebar'` keeps an entry's `children` in the expanded sidebar and
+the top dropdown only: the phone's menu sheet lists the entry as a plain link to
+its `url`, with its badge, for a parent page that already lists them. Unset
+(the default), the sheet nests them like the expanded sidebar.
+
+```tsx
+{
+  label: 'Services', url: '/services', icon: 'grid-2',
+  children: [{ label: 'Lab', url: '/lab', icon: 'flask' }],
+  childrenIn: 'sidebar', // the phone's sheet shows "Services" alone, as a link
+}
+```
+
 `MenuItem` also accepts `children`, `group`, `bar` and `priority`. Each is read
 by the presets that use it, and ignored by the others: `bar` and `priority`
 choose the entries of the bottom bar **and** of the floating toolbar (the rest go
 under « More »), `group` is read by the drawer, and `children` by the top
-navigation, the two-level panel, the sidebar and the phone's menu sheet.
+navigation, the two-level panel, the sidebar and the phone's menu sheet (which drops them for a `childrenIn: 'sidebar'` entry).
 `footer` is read by the rail, the sidebar and the drawer (its footer), `display`
 by the rail, the sidebar and the phone's menu sheet, and `badge` and `badgeLabel`
-by every preset that draws entries, except on a `display: 'icon'` entry.
+by every preset that draws entries, except on the icon button a `display: 'icon'` entry draws in the rail and the expanded sidebar (the phone's menu sheet draws its badge).
 
 ### The bottom bar (`navigation="bar"`)
 
@@ -577,7 +591,7 @@ menu button narrows it to 5rem, labels under the icons.
   link's name.
 - On a phone the bar is not drawn, whatever the object says
   (`{ phone: 'top' }` keeps the menu sheet): the sheet lists the entries and
-  nests each entry's `children` under it, indented. The expanded sidebar nests
+  nests each entry's `children` under it, indented (unless `childrenIn: 'sidebar'`). The expanded sidebar nests
   them the same way.
 - An entry with `children` is only a trigger: its `url` is never a link, so put an "all" link as the first child. (The phone's menu sheet and the expanded sidebar do list the
   parent's own `url` as a link, with its children nested under it.)
@@ -635,7 +649,7 @@ menu button narrows it to 5rem, labels under the icons.
   level of `children` is listed.
 - **On a phone** neither is drawn, whatever the object says
   (`{ phone: 'two-level' }` keeps the menu sheet, as `'top'` does): the sheet lists
-  the entries and nests each one's `children`. A name alone leaves the phone its
+  the entries and nests each one's `children` (unless `childrenIn: 'sidebar'`). A name alone leaves the phone its
   default.
 - At 768px the rail and the open panel take 19rem beside the content; fold the
   panel or use `{ tablet: 'rail', desktop: 'two-level' }` when that is too much.
@@ -1051,7 +1065,8 @@ export const invoiceRoute: RouteObject = {
 - **A record page uses `EntityHeader` without `title`.** Its band (icon or
   avatar, status, metadata, actions) stays, and no second heading duplicates
   the bar's `h1`: `<EntityHeader icon={<User />} metadata={[…]} actions={[…]} />`.
-  The root is a plain `div`, not a landmark, so nothing is left unnamed.
+  The root is a plain `div`, not a landmark, so nothing is left unnamed. On a page band
+  (no card of its own) pass `surface="none"`.
 - **It labels `<main>`.** While the bar has a title, the content region gets
   `aria-labelledby` pointing at the `h1`'s `id` (from `useId`, so it is the same
   on the server and the client); without one, there is no `aria-labelledby`.
@@ -1609,6 +1624,8 @@ export function BoardShell({ items }: { items: MenuItem[] }) {
 | `asideFrom` | `'lg'` \| `'xl'` \| `'2xl'` | `'xl'` | The viewport width (1024, 1280 or 1536px) from which the panel is beside the content |
 | `asideSticky` | `boolean` | `true` | Keeps the panel under the app bar while the page scrolls; it scrolls inside itself when taller than the window |
 | `asideStack` | `'before'` \| `'after'` | `'after'` | Where the panel goes below `asideFrom`, in the DOM and on screen |
+| `asidePhone` | `'stack'` \| `'toggle'` | `'stack'` | Below `asideFrom`: `'stack'` puts the panel after (or before) the content; `'toggle'` puts it behind a two-button switch above the content (content and panel are swapped, the form stays mounted so nothing typed is lost). For a form with a live preview. A `'sheet'` mode is discussed on [#2604](https://github.com/softistx/nxgt-material/issues/2604). |
+| `asidePreviewLabel` / `asideMainLabel` | `string` | "Preview" / "Content" (`material.app-shell.aside-preview` / `aside-main`) | The switch's button texts; the group's label is `material.app-shell.aside-toggle` ("View") |
 | `asideClassName` | `string` | — | Classes for the panel |
 
 ```tsx
@@ -1639,6 +1656,23 @@ content (`asideStack="before"` puts it first). The switch is CSS only: the
 server's HTML and a phone's first paint are already right, and no JavaScript
 decides the layout.
 
+`asidePhone="toggle"` is for a form with a live preview: below `asideFrom` a
+two-button switch ("Content" / "Preview"; French: "Contenu" / "Aperçu") sits above the content and shows one of
+the two (the other stays mounted, hidden). The save bar, when placed in the content, is out of view while the preview shows, back on the switch (a footer slot outside both panes is tracked in #2609). The first paint is
+still the content.
+
+```tsx
+<ActivityContent
+  title="Edit question"
+  width="form"
+  aside={<QuestionPreview />}
+  asideLabel="Preview"
+  asidePhone="toggle"
+>
+  <QuestionForm />
+</ActivityContent>
+```
+
 ```tsx
 <ActivityContent
   title="New visit"
@@ -1750,6 +1784,7 @@ in the plugin) assembles them for any record: a patient, a student, a project.
 ```tsx
 <ActivityContent hideHeader>
   <EntityHeader title={record.name} stats={stats} metadata={facts} />
+  {/* on a page band, no card of its own: surface="none" */}
   <DescriptionList meta="Added on … · Modified on …">
     {fields.map((f) => <Description key={f.label} label={f.label} value={f.value} />)}
   </DescriptionList>

package/docs/guides/data-grid.md

@@ -59,6 +59,18 @@ Columns are DataTable's TanStack v9 column definitions. A column with no
 | `headerWrap` | `true` lets the header's title wrap onto up to two lines, the rest cut; the header row keeps one height. Without it a title that does not fit is cut to one line. Either way, a title that is cut shows in full in a tooltip on hover and when the header has the focus (the header's accessible name is always the whole title) |
 | `headerMenu` | Items for the header's menu (a `size-6` button, Alt+ArrowDown or Shift+F10), made of `DataGridMenuItem`s. The built-in column items come first, then a separator, then yours |
 | `className` | Classes for the column's cells. In a [virtual grid](#long-grids-virtual) give the width as `w-*`, the fallback for a column with no width of its own |
+| `cellClassName(value, row)` | Classes for a body cell computed from the value it shows now, so they follow an edit, a save and an undo; return `undefined` for none. Merged after `className`, header untouched, none over a value kept as an error ([cell classes](../components/data-table-filter-and-lists.md#cell-classes-from-the-value)) |
+| `tone(value, row)`, `toneLabel(value, row)` | A tone for a body cell (or `undefined`) from the value it shows now, so it follows an edit, a pending save, a refused one put back and an undo. The cell gets `data-tone` and a `ToneValue` (shape, tone text colour, optional hidden words from `toneLabel`); while the cell is edited the editor's ring stays the focus indicator, and a value kept as an error is not toned. On a phone the list summary and the row panel's read-only values show it too ([cells toned by their value](../components/data-table-filter-and-lists.md#cells-toned-by-their-value)) |
+
+```tsx
+helper.accessor('score', {
+	meta: {
+		editor: 'number',
+		tone: (v) => (typeof v === 'number' && v < 8 ? 'error' : undefined),
+		toneLabel: (v) => (typeof v === 'number' && v < 8 ? 'Low' : undefined),
+	},
+});
+```
 
 ```tsx
 import { createColumnHelper } from '@tanstack/react-table';

package/docs/guides/forms.md

@@ -522,6 +522,7 @@ or fails validation.
 | `DateField` · `DateFormField` | `Date \| undefined` (not an ISO string). With `timeZone`, still the true instant (the field shows and edits that zone's wall clock); with `showTimePicker`, `undefined` until the date and the time are both complete | `undefined` |
 | `DateRangeField` · `DateRangeFormField` | `DateRange \| undefined`: `{ from: Date \| undefined; to?: Date }` | `undefined` |
 | `TimeField` · `TimeFormField` | `Date \| undefined` (with `timeZone`, the true instant). With `asString`: `'HH:mm'`. While empty it shows its `placeholder` | `undefined` / `''` |
+| `AgeField` · `AgeFormField` | `{ value: number \| null, unit: 'day' \| 'week' \| 'month' \| 'year' }` | `{ value: null, unit: <first unit> }` |
 | `DurationField` · `DurationFormField` | `number \| null`: total minutes (hours × 60 + minutes) | `null` |
 | `HalfDayRangeField` · `HalfDayRangeFormField` | `HalfDayRange \| undefined`: `{ start: { date, half }, end: { date, half } }`, `half` `'morning' \| 'afternoon'`; `undefined` while a day is missing; an end before the start is the value, refused by the wrapper's rule (`material.half-day-range.order`) | `undefined` |
 

package/docs/guides/i18n.md

@@ -345,7 +345,7 @@ separator's name (`material['list-details'].back` / `inspector-back` /
 `new-tab`; French "Menu", "Pied de page" and "s'ouvre dans un nouvel onglet");
 `JsonViewer`'s "Empty JSON" (`material['json-viewer'].empty`);
 `TimePicker`'s AM / PM (`material['time-picker'].am` / `pm`, "a.m." / "p.m." in
-French); and the names of `DurationField`'s inputs, "Hours" and "Minutes"
+French); `AgeField`'s unit names, plural-aware (`material['age-field']['unit-day']`, `unit-week`, `unit-month`, `unit-year`: "2 months", « 2 mois »), its unit picker's name (`unit`, "Age unit") and the age its polite status reads (`reading`); and the names of `DurationField`'s inputs, "Hours" and "Minutes"
 (`material['duration-field']['hours-label']` / `minutes-label`) and the
 names of its −/+ buttons, "Increase hours" / "Decrease hours" /
 "Increase minutes" / "Decrease minutes"

package/docs/roadmap.md

@@ -6,6 +6,16 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Now
 
+- **Fields Refined** — every text-like field (text, select, combobox, search,
+  phone, date and time boxes) gets a crisper, more legible look by default: a
+  border of at least 3:1 contrast, the card surface, a clear focus ring, and no
+  filled tint. `NumberField` is right-aligned with its steppers inside the box,
+  and gains a compact `score` variant with a caller-set tone and a locked state
+  with its reason. New `--success-text` and `--warning-text` tokens join
+  `--error-text` in every theme preset. One minor release, no API removed;
+  every `--nxgt-field-*` token override still applies
+  ([#2644](https://github.com/softistx/nxgt-material/issues/2644)).
+
 - **Calculator** — `@nxgt/material/calculator` is an exact-decimal calculator
   (Standard, Scientific, point of sale, Financial, Conversion, Programmer;
   every variant but Standard loads on demand)
@@ -379,6 +389,19 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Cells driven by their value** — in `DataTable`, `ServerTable` and
+  `DataGrid`, `meta.cellClassName(value, row)` computes a class per cell from
+  its value; `meta.tone(value, row)` colours a cell as coloured text after a
+  shaped mark (`ToneValue`: ◆ error, ▲ warning, ● success, ■ any other tone),
+  so colour is never the only cue, with an optional screen-reader label
+  (`meta.toneLabel`) and the band helper `toneBands` from
+  `@nxgt/material-core/cell-tone`; in `DataGrid` both follow edits, pending
+  saves and undo, and the phone cards and panels show the tone too; and
+  `PersonCell` shows a decorative initials avatar (photo when given) beside a
+  truncated name
+  ([#1117](https://github.com/softistx/nxgt-material/issues/1117),
+  [#1032](https://github.com/softistx/nxgt-material/issues/1032),
+  [#1112](https://github.com/softistx/nxgt-material/issues/1112)).
 - **Cursor trail cap** — `ServerTable` and `PageFooter` keep cursor URLs short:
   each trail entry is encoded once and the trail is capped by `maxTrail` (20 by
   default, a prop on each) behind a counted cut mark, so the "21–40 of N" range

package/docs/troubleshooting.md

@@ -2115,6 +2115,10 @@ offset's `top` (80 by default, so toasts start below that bar):
 <Toaster position="bottom-center" /> // bottom-center on every screen
 ```
 
+A mounted `StickyActionBar` is cleared automatically (`--nxgt-sticky-bar`). An
+explicit `offset` or `mobileOffset` drops that, so add
+`var(--nxgt-sticky-bar, 0px)` to its `bottom` yourself.
+
 ### A toast never goes away after a tap
 
 **When:** on a phone (or any touch screen), a toast that should time out stays

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.88.1",
+	"version": "3.91.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -390,7 +390,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.52.0",
+		"@nxgt/material-core": "^0.53.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",

package/dist/currency-field-cwC7cqUE.js

@@ -1,286 +0,0 @@
-import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./spinner-DcW21pN1.js";
-import { a as n, i as r, n as i } from "./field-blur-context-BLGgf_3z.js";
-import { i as a } from "./translate-material-BrYBBZ66.js";
-import { t as o } from "./use-material-translation-BdrItuwY.js";
-import { t as s } from "./icon-button-DE1EcO2-.js";
-import { t as c } from "./input-CC2joTjB.js";
-import { t as l } from "./text-field-BAdY-kpO.js";
-import { t as u } from "./number.utils-CSueQZcv.js";
-import { useCallback as d, useEffect as f, useId as p, useMemo as m, useRef as h, useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { Minus as y, Plus as b } from "lucide-react";
-import { clampNumber as x, parseNumberInput as S, stepNumber as C } from "@nxgt/material-core/parse-number";
-import { currencyFractionDigits as w } from "@nxgt/material-core/currency-digits";
-//#region lib/components/ui/fields/number-field/number-stepper.tsx
-function T({ hovered: e, focused: t, focusVisible: n }) {
-	return e || !t || n;
-}
-function E(e) {
-	try {
-		return e.matches(":focus-visible");
-	} catch {
-		return !0;
-	}
-}
-function D({ direction: e, label: n, disabled: r, onStep: i }) {
-	let a = h(null), o = h(!1), [c, l] = g(!1);
-	return /* @__PURE__ */ _(t, {
-		content: n,
-		open: c,
-		onOpenChange: (e) => {
-			let t = a.current;
-			l(e && T({
-				hovered: o.current,
-				focused: t != null && document.activeElement === t,
-				focusVisible: t != null && E(t)
-			}));
-		},
-		children: /* @__PURE__ */ _(s, {
-			ref: a,
-			variant: "outlined",
-			color: "default",
-			className: "size-9 shrink-0 rounded-field",
-			disabled: r,
-			"aria-label": n,
-			onPointerEnter: () => {
-				o.current = !0;
-			},
-			onPointerLeave: () => {
-				o.current = !1;
-			},
-			onClick: () => i(e),
-			children: _(e < 0 ? y : b, {})
-		})
-	});
-}
-function O(e) {
-	let { t } = o();
-	return e ? {
-		decreaseLabel: t("material.number-field.decrease-named", "Decrease {label}", { label: e }),
-		increaseLabel: t("material.number-field.increase-named", "Increase {label}", { label: e })
-	} : {
-		decreaseLabel: t("material.number-field.decrease", "Decrease"),
-		increaseLabel: t("material.number-field.increase", "Increase")
-	};
-}
-//#endregion
-//#region lib/components/ui/fields/number-field/format-number-input.ts
-function k(e, t = "en") {
-	let n = String(e === 0 ? 0 : e);
-	try {
-		let r = u(e === 0 ? 0 : e, {
-			language: t,
-			useGrouping: !1,
-			maximumFractionDigits: 20,
-			numberingSystem: "latn"
-		}), i = S(r);
-		return e !== 0 && i !== e ? n : r;
-	} catch {
-		return n;
-	}
-}
-//#endregion
-//#region lib/components/ui/fields/number-field/use-number-input.ts
-function A({ value: e, defaultValue: t, onChange: n, min: r, max: i, step: a, language: o }) {
-	let s = (e) => k(e, o), c = e !== void 0, [l, u] = g(t), d = c ? e : l, [p, m] = g(() => d == null ? "" : s(d));
-	f(() => {
-		c && m((t) => e == null ? t.trim() === "" ? t : "" : S(t) === e ? t : k(e, o));
-	}, [
-		c,
-		e,
-		o
-	]);
-	let _ = h(o);
-	f(() => {
-		_.current !== o && (_.current = o, m((e) => d != null && S(e) === d ? k(d, o) : e));
-	}, [o, d]);
-	let v = (e) => {
-		c || u(e), n?.(e);
-	};
-	return {
-		draft: p,
-		amount: d,
-		type: (e) => {
-			if (m(e), e.trim() === "") v(null);
-			else {
-				let t = S(e);
-				t != null && v(t);
-			}
-		},
-		commit: (e) => {
-			let t = S(e), n = t == null ? null : x(t, r, i);
-			m(n == null ? "" : s(n)), v(n);
-		},
-		stepBy: (e) => {
-			let t = C(d, e, a, r, i);
-			m(s(t)), v(t);
-		}
-	};
-}
-//#endregion
-//#region lib/components/ui/fields/number-field/number-control.tsx
-function j({ error: e, disabled: t, value: n, defaultValue: r = null, onChange: i, onBlur: a, min: s, max: l, step: u = 1, hideSteppers: d = !1, suffix: f, stepperName: p, ...m }) {
-	let { language: h } = o(), { draft: g, amount: y, type: b, commit: x, stepBy: S } = A({
-		value: n,
-		defaultValue: r,
-		onChange: i,
-		min: s,
-		max: l,
-		step: u,
-		language: h
-	}), { decreaseLabel: C, increaseLabel: w } = O(p), T = s != null && y != null && y <= s, E = l != null && y != null && y >= l;
-	return /* @__PURE__ */ v("div", {
-		className: "flex items-center gap-1",
-		children: [
-			!d && /* @__PURE__ */ _(D, {
-				direction: -1,
-				label: C,
-				disabled: t || T,
-				onStep: S
-			}),
-			/* @__PURE__ */ _(c, {
-				...m,
-				inputMode: "decimal",
-				autoComplete: "off",
-				disabled: t,
-				"aria-invalid": e || void 0,
-				value: g,
-				className: "text-center",
-				onChange: (e) => b(e.target.value),
-				onBlur: (e) => {
-					x(e.target.value), a?.(e);
-				}
-			}),
-			!d && /* @__PURE__ */ _(D, {
-				direction: 1,
-				label: w,
-				disabled: t || E,
-				onStep: S
-			}),
-			f != null && /* @__PURE__ */ _("span", {
-				className: "px-1 font-medium text-muted-foreground text-sm",
-				children: f
-			})
-		]
-	});
-}
-//#endregion
-//#region lib/components/ui/fields/number-field/number-field.tsx
-function M({ label: t, helperText: a, error: o, required: s, className: c, name: l, id: u, "aria-describedby": d, ...f }) {
-	let m = i(), h = p(), g = u ?? h, y = p();
-	return /* @__PURE__ */ v("div", {
-		ref: m,
-		"data-slot": "number-field",
-		"data-pw": l ?? "number-field",
-		className: e("grid w-full content-start gap-1.5", c),
-		children: [
-			t && /* @__PURE__ */ _(r, {
-				htmlFor: g,
-				withAsterisk: s,
-				children: t
-			}),
-			/* @__PURE__ */ _(j, {
-				...f,
-				id: g,
-				name: l,
-				stepperName: typeof t == "string" && t ? t : f["aria-label"] || void 0,
-				error: o,
-				required: s,
-				"aria-describedby": [a ? y : void 0, d].filter(Boolean).join(" ") || void 0
-			}),
-			a && /* @__PURE__ */ _(n, {
-				id: y,
-				error: o,
-				children: a
-			})
-		]
-	});
-}
-//#endregion
-//#region lib/components/ui/fields/currency-field/parse-currency.ts
-function N(e) {
-	let t = e.trim().replace(/[\s\u00a0]/g, "");
-	if (!t) return null;
-	let n = t.lastIndexOf(",") > t.lastIndexOf(".") ? t.replace(/\./g, "").replace(",", ".") : t.replace(/,/g, ""), r = Number(n);
-	return Number.isFinite(r) ? r : null;
-}
-//#endregion
-//#region lib/components/ui/fields/currency-field/use-currency-amount.ts
-function P(e, t, n) {
-	return u(e, {
-		language: n,
-		minimumFractionDigits: t,
-		maximumFractionDigits: t
-	});
-}
-function F({ value: e, defaultValue: t, onChange: n, currency: r, fractionDigits: i }) {
-	let o = m(() => w(r, i), [r, i]), s = a()?.language, c = e !== void 0, [l, u] = g(t), p = c ? e : l, _ = h(null), v = d((e) => {
-		let t = P(e, o, s);
-		return _.current = {
-			text: t,
-			value: e
-		}, t;
-	}, [o, s]), [y, b] = g(() => p == null ? "" : v(p));
-	f(() => {
-		c && b((t) => e == null ? "" : N(t) === e || _.current?.text === t && _.current.value === e ? t : v(e));
-	}, [
-		c,
-		e,
-		v
-	]);
-	let x = h(p);
-	x.current = p, f(() => {
-		let e = x.current;
-		b(e == null ? "" : v(e));
-	}, [v]);
-	let S = (e) => {
-		c || u(e), n?.(e);
-	};
-	return {
-		draft: y,
-		change: (e) => {
-			b(e);
-			let t = N(e);
-			e.trim() === "" ? S(null) : t != null && S(t);
-		},
-		commit: (e) => {
-			let t = e.trim(), n = _.current?.text === t ? _.current.value : N(e);
-			b(n == null ? t : v(n)), S(n);
-		}
-	};
-}
-//#endregion
-//#region lib/components/ui/fields/currency-field/currency-field.tsx
-function I({ value: t, defaultValue: n = null, onChange: r, currency: i = "EUR", fractionDigits: a, trailingAction: o, className: s, ...c }) {
-	let { draft: u, change: d, commit: f } = F({
-		value: t,
-		defaultValue: n,
-		onChange: r,
-		currency: i,
-		fractionDigits: a
-	});
-	return /* @__PURE__ */ _(l, {
-		...c,
-		className: e(o && "[&_input]:pr-28!", s),
-		inputMode: "decimal",
-		autoComplete: "off",
-		spellCheck: !1,
-		value: u,
-		trailing: o ? /* @__PURE__ */ v("span", {
-			"data-slot": "currency-trailing",
-			className: "flex h-8! w-auto! items-center gap-1 bg-transparent! pointer-coarse:h-11! ps-1 pe-1.5 text-xs font-medium text-muted-foreground",
-			children: [i, o]
-		}) : /* @__PURE__ */ _("span", {
-			"data-slot": "currency-code",
-			className: "flex h-8! w-auto! items-center justify-center bg-transparent! px-1 text-xs leading-none font-medium text-muted-foreground pointer-coarse:h-11!",
-			children: i
-		}),
-		onChange: (e) => d(e.target.value),
-		onBlur: (e) => {
-			f(e.target.value), c.onBlur?.(e);
-		}
-	});
-}
-//#endregion
-export { x as a, j as i, N as n, S as o, M as r, C as s, I as t };