@nqmcreative/ui 0.3.0 → 0.4.1

package/dist/styles/paper/Toaster.svelte

@@ -6,7 +6,6 @@
 	import { toneText } from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 	import Spinner from './Spinner.svelte';
-	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type ToasterPosition =
 		'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
@@ -18,8 +17,6 @@
 
 	let { position = 'bottom-right', class: className = '' }: Props = $props();
 
-	const t = useLocale();
-
 	const positions: Record<ToasterPosition, string> = {
 		'top-left': 'top-4 left-4 items-start',
 		'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
@@ -41,8 +38,8 @@
 <div
 	use:portal
 	aria-live="polite"
-	aria-label={t.current.notifications}
-	class="pointer-events-none fixed z-[100] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
+	aria-label="Notifications"
+	class="pointer-events-none fixed z-100 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
 		position
 	]} {fromTop ? '' : 'flex-col-reverse'} {className}"
 >
@@ -118,7 +115,7 @@
 			<button
 				type="button"
 				onclick={() => toast.dismiss(item.id)}
-				aria-label={t.current.dismiss}
+				aria-label="Dismiss"
 				class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 			>
 				<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">

package/dist/styles/paper/index.d.ts

@@ -5,9 +5,8 @@
  * `@nqmcreative/ui/core`, re-exported below so this one import covers
  * the whole style.
  */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
-export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Locale, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
-export { default as LocaleProvider } from './LocaleProvider.svelte';
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
 export { default as Button } from './Button.svelte';
 export type { ButtonVariant, ButtonSize } from './Button.svelte';
 export { default as Link } from './Link.svelte';
@@ -30,6 +29,14 @@ export type { CheckboxOption } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export type { ComboboxOption } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';

package/dist/styles/paper/index.js

@@ -6,9 +6,7 @@
  * the whole style.
  */
 /* --- shared behaviour --- */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
-/* --- locale --- */
-export { default as LocaleProvider } from './LocaleProvider.svelte';
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
 /* --- actions --- */
 export { default as Button } from './Button.svelte';
 export { default as Link } from './Link.svelte';
@@ -26,6 +24,14 @@ export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as CheckboxGroup } from './CheckboxGroup.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
 export { default as InputGroup } from './InputGroup.svelte';
+export { default as InputAddon } from './InputAddon.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as PinInput } from './PinInput.svelte';
+export { default as TagsInput } from './TagsInput.svelte';
+export { default as CurrencyInput } from './CurrencyInput.svelte';
+export { default as TimeInput } from './TimeInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
 export { default as Combobox } from './Combobox.svelte';
 export { default as MultiSelect } from './MultiSelect.svelte';
 export { default as DatePicker } from './DatePicker.svelte';

package/dist/styles/sprout/Alert.svelte

@@ -8,7 +8,6 @@
 		toneText,
 		type Tone
 	} from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { edge } from './lift.js';
 
 	export type AlertVariant = 'soft' | 'outline' | 'accent';
@@ -37,7 +36,6 @@
 		...rest
 	}: Props = $props();
 
-	const t = useLocale();
 	let open = $state(true);
 
 	const variants = $derived({
@@ -83,7 +81,7 @@
 			<button
 				type="button"
 				onclick={dismiss}
-				aria-label={t.current.dismiss}
+				aria-label="Dismiss"
 				class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg/60 hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 			>
 				<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">

package/dist/styles/sprout/Breadcrumb.svelte

@@ -2,7 +2,6 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { toneHoverText, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { iconMd } from './icon.js';
 
 	export interface BreadcrumbItem {
@@ -19,11 +18,9 @@
 	}
 
 	let { items, separator = '/', tone = 'brand', class: className = '', ...rest }: Props = $props();
-
-	const t = useLocale();
 </script>
 
-<nav aria-label={t.current.breadcrumb} class="font-sans text-sm {className}" {...rest}>
+<nav aria-label="Breadcrumb" class="font-sans text-sm {className}" {...rest}>
 	<ol class="flex flex-wrap items-center gap-1.5">
 		{#each items as item, i (item.label)}
 			<li class="flex items-center gap-1.5">

package/dist/styles/sprout/Calendar.svelte

@@ -11,7 +11,6 @@
 		weekdayNames
 	} from '../../core/date.js';
 	import { calendarKeyMove } from '../../core/calendar.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import {
 		focusRing,
 		toneFill,
@@ -53,8 +52,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	const selected = $derived(fromISO(value));
 	const now = today();
 
@@ -71,7 +68,7 @@
 	});
 
 	const days = $derived(monthGrid(view, weekStart));
-	const weekdays = $derived(weekdayNames(t.current.dateLocale, weekStart));
+	const weekdays = $derived(weekdayNames(undefined, weekStart));
 
 	function blocked(date: Date) {
 		return isOutOfRange(date, min, max) || (isDisabled?.(date) ?? false);
@@ -119,7 +116,7 @@
 		<button
 			type="button"
 			onclick={() => show(addMonths(view, -1))}
-			aria-label={t.current.previousMonth}
+			aria-label="Previous month"
 			class="{arrow} {focusRing} {toneRing[tone]}"
 		>
 			<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
@@ -128,13 +125,13 @@
 		</button>
 
 		<span aria-live="polite" class="text-sm font-semibold text-text">
-			{monthLabel(view, t.current.dateLocale)}
+			{monthLabel(view)}
 		</span>
 
 		<button
 			type="button"
 			onclick={() => show(addMonths(view, 1))}
-			aria-label={t.current.nextMonth}
+			aria-label="Next month"
 			class="{arrow} {focusRing} {toneRing[tone]}"
 		>
 			<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
@@ -154,7 +151,7 @@
 		bind:this={grid}
 		role="grid"
 		tabindex="-1"
-		aria-label={t.current.selectDate}
+		aria-label="Select a date"
 		onkeydown={onKeydown}
 		class="grid grid-cols-7 gap-0.5 focus:outline-none"
 	>
@@ -196,7 +193,7 @@
 				tone
 			]} hover:underline hover:underline-offset-2 {focusRing} {toneRing[tone]}"
 		>
-			{t.current.today}
+			Today
 		</button>
 	{/if}
 </div>

package/dist/styles/sprout/ColorInput.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { normaliseHex } from '../../core/color.js';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' | 'type'> {
+		/** Bindable `#rrggbb`. Shorthand and alpha are normalised away on blur. */
+		value?: string;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Fixed choices under the field. Empty hides the row. */
+		swatches?: string[];
+		class?: string;
+	}
+
+	let {
+		value = $bindable('#000000'),
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		swatches = [],
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	// The text can be mid-typing (`#a2`) while the swatch needs a real colour,
+	// so the swatch follows the last value that parsed rather than the field.
+	let text = $state('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (!editing) text = value;
+	});
+
+	const resolved = $derived(normaliseHex(text) ?? normaliseHex(value) ?? '#000000');
+
+	// Same reason as CurrencyInput: at input time the bound `text` is one
+	// keystroke behind, so the element is the only current source.
+	function onText(event: Event & { currentTarget: HTMLInputElement }) {
+		const hex = normaliseHex(event.currentTarget.value);
+		if (hex) value = hex;
+	}
+
+	function settle() {
+		editing = false;
+		value = normaliseHex(text) ?? value;
+		text = value;
+	}
+
+	function choose(hex: string) {
+		value = normaliseHex(hex) ?? value;
+		text = value;
+	}
+</script>
+
+<div class="flex w-full flex-col gap-2 {className}">
+	<Input
+		bind:value={text}
+		{size}
+		{tone}
+		{invalid}
+		{disabled}
+		spellcheck="false"
+		autocapitalize="none"
+		placeholder="#000000"
+		oninput={onText}
+		onfocus={() => (editing = true)}
+		onblur={settle}
+		class="[&_input]:uppercase [&_input]:tabular-nums"
+		{...rest}
+	>
+		{#snippet prefix()}
+			<span
+				class="relative grid size-5 place-items-center overflow-hidden rounded border border-hairline-strong"
+			>
+				<span class="absolute inset-0" style="background-color: {resolved}"></span>
+				<input
+					type="color"
+					value={resolved}
+					{disabled}
+					aria-label="Pick a colour"
+					oninput={(event) => choose(event.currentTarget.value)}
+					class="absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+				/>
+			</span>
+		{/snippet}
+	</Input>
+
+	{#if swatches.length}
+		<div class="flex flex-wrap gap-1.5">
+			{#each swatches as swatch (swatch)}
+				<button
+					type="button"
+					{disabled}
+					onclick={() => choose(swatch)}
+					title={swatch}
+					aria-label={swatch}
+					aria-pressed={resolved === normaliseHex(swatch)}
+					class="size-6 rounded-lg border transition-transform duration-150 hover:-translate-y-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:pointer-events-none disabled:opacity-50
+						{resolved === normaliseHex(swatch) ? 'border-text' : 'border-hairline-strong'}"
+					style="background-color: {swatch}"
+				></button>
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/styles/sprout/ColorInput.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Tone } from '../../core/tones.js';
+import { type InputSize } from './Input.svelte';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' | 'type'> {
+    /** Bindable `#rrggbb`. Shorthand and alpha are normalised away on blur. */
+    value?: string;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Fixed choices under the field. Empty hides the row. */
+    swatches?: string[];
+    class?: string;
+}
+declare const ColorInput: import("svelte").Component<Props, {}, "value">;
+type ColorInput = ReturnType<typeof ColorInput>;
+export default ColorInput;

package/dist/styles/sprout/Combobox.svelte

@@ -4,7 +4,6 @@
 	import { clickOutside, portal } from '../../core/actions/dismissable.js';
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
 	import { toneFocusWithinBorder, toneSoft, toneText, type Tone } from '../../core/tones.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { iconMd } from './icon.js';
 	import { edge, soft } from './lift.js';
 
@@ -52,8 +51,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let open = $state(false);
 	let query = $state('');
 	let wrapper: HTMLElement | null = $state(null);
@@ -162,7 +159,7 @@
 		aria-controls="{id ?? 'combobox'}-listbox"
 		aria-activedescendant={open && flat[active] ? `${id ?? 'combobox'}-opt-${active}` : undefined}
 		aria-invalid={invalid ? 'true' : undefined}
-		placeholder={selected ? selected.label : (placeholder ?? t.current.comboboxPlaceholder)}
+		placeholder={selected ? selected.label : (placeholder ?? 'Search…')}
 		value={open ? query : (selected?.label ?? '')}
 		oninput={(event) => {
 			query = event.currentTarget.value;
@@ -180,7 +177,7 @@
 		<button
 			type="button"
 			onclick={clear}
-			aria-label={t.current.clear}
+			aria-label="Clear selection"
 			class="shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 		>
 			<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
@@ -218,7 +215,7 @@
 	>
 		{#if flat.length === 0}
 			<p class="px-3 py-6 text-center text-sm text-text-muted">
-				{emptyText ?? t.current.noMatches}
+				{emptyText ?? 'No matches'}
 			</p>
 		{:else}
 			{#each groups as [group, items] (group)}

package/dist/styles/sprout/CommandPalette.svelte

@@ -23,7 +23,6 @@
 	import { focusTrap } from '../../core/actions/dismissable.js';
 	import { syncDialog } from '../../core/dialog.svelte.js';
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { toneSoft, type Tone } from '../../core/tones.js';
 	import { isTypingTarget } from '../../core/trigger.js';
 	import { iconMd } from './icon.js';
@@ -62,8 +61,6 @@
 		class: className = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let dialog: HTMLDialogElement | null = $state(null);
 	let inputEl: HTMLInputElement | null = $state(null);
 	let listEl: HTMLElement | null = $state(null);
@@ -183,8 +180,8 @@
 				oninput={() => cursor.reset()}
 				type="text"
 				autocomplete="off"
-				aria-label={placeholder ?? t.current.commandPlaceholder}
-				placeholder={placeholder ?? t.current.commandPlaceholder}
+				aria-label={placeholder ?? 'Type a command or search…'}
+				placeholder={placeholder ?? 'Type a command or search…'}
 				class="h-12 w-full min-w-0 bg-transparent font-sans text-sm text-text placeholder:text-text-muted focus:outline-none"
 			/>
 			<Kbd>esc</Kbd>
@@ -198,7 +195,7 @@
 		>
 			{#if flat.length === 0}
 				<p class="px-4 py-10 text-center font-sans text-sm text-text-muted">
-					{emptyText ?? t.current.noResults}
+					{emptyText ?? 'No results'}
 				</p>
 			{:else}
 				{#each groups as [group, groupItems] (group)}

package/dist/styles/sprout/ConfirmDialog.svelte

@@ -2,7 +2,6 @@
 	import type { Snippet } from 'svelte';
 	import Button from './Button.svelte';
 	import Modal from './Modal.svelte';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props {
@@ -37,8 +36,6 @@
 		children
 	}: Props = $props();
 
-	const t = useLocale();
-
 	async function confirm() {
 		try {
 			loading = true;
@@ -88,10 +85,10 @@
 
 	{#snippet footer()}
 		<Button variant="outline" tone="neutral" onclick={cancel} disabled={loading}>
-			{cancelLabel ?? t.current.cancel}
+			{cancelLabel ?? 'Cancel'}
 		</Button>
 		<Button {tone} onclick={confirm} {loading}>
-			{confirmLabel ?? t.current.confirm}
+			{confirmLabel ?? 'Confirm'}
 		</Button>
 	{/snippet}
 </Modal>

package/dist/styles/sprout/ContextMenu.svelte

@@ -3,7 +3,6 @@
 	import { anchored } from '../../core/actions/anchor.js';
 	import { clickOutside, focusTrap, navigateList, portal } from '../../core/actions/dismissable.js';
 	import { menuItems } from '../../core/trigger.js';
-	import { useLocale } from '../../core/locale.svelte.js';
 	import { soft } from './lift.js';
 
 	interface Props {
@@ -28,8 +27,6 @@
 		menuClass = ''
 	}: Props = $props();
 
-	const t = useLocale();
-
 	let menuEl: HTMLElement | null = $state(null);
 	/**
 	 * A 0×0 element parked at the pointer, so the same `anchored` action that
@@ -80,7 +77,7 @@
 			if ((event.target as HTMLElement).closest('[role="menuitem"]:not([disabled])')) open = false;
 		}}
 		role="menu"
-		aria-label={label ?? t.current.menu}
+		aria-label={label ?? 'Menu'}
 		tabindex="-1"
 		class="z-50 flex max-h-[min(24rem,80vh)] min-w-48 flex-col overflow-y-auto rounded-2xl border border-hairline bg-bg py-1 font-sans {soft} {menuClass}"
 	>

package/dist/styles/sprout/CurrencyInput.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { formatGrouped, parseGrouped } from '../../core/number.js';
+	import type { Tone } from '../../core/tones.js';
+	import Input, { type InputSize } from './Input.svelte';
+
+	interface Props extends Omit<
+		HTMLInputAttributes,
+		'size' | 'prefix' | 'suffix' | 'value' | 'min' | 'max'
+	> {
+		/** Bindable amount. `null` is an empty field, which is not the same as 0. */
+		value?: number | null;
+		min?: number;
+		max?: number;
+		/** Thousands separator. */
+		group?: string;
+		/** Decimal separator. */
+		decimal?: string;
+		/** Decimal places the amount settles to when the field loses focus. */
+		precision?: number;
+		/** Leading mark — `Rp`, `$`, `€`. */
+		currency?: string;
+		/** Trailing mark instead, for the regions that write it that way. */
+		unit?: string;
+		size?: InputSize;
+		tone?: Tone;
+		invalid?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(null),
+		min,
+		max,
+		group = ',',
+		decimal = '.',
+		precision = 2,
+		currency,
+		unit,
+		size = 'md',
+		tone = 'brand',
+		invalid = false,
+		disabled = false,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const options = $derived({ group, decimal, precision });
+
+	/**
+	 * What the field shows. Two states on purpose: grouped and padded while the
+	 * caret is elsewhere, and exactly what was typed while it is not — grouping
+	 * a number as it is typed moves the caret out from under the fingers.
+	 */
+	let text = $state('');
+	let editing = $state(false);
+
+	$effect(() => {
+		if (editing) return;
+		text = value === null || value === undefined ? '' : formatGrouped(value, options);
+	});
+
+	// Read off the element, not off `text`: the binding that feeds `text` has
+	// not flushed yet when this fires, so it still holds the previous keystroke.
+	function onInput(event: Event & { currentTarget: HTMLInputElement }) {
+		const parsed = parseGrouped(event.currentTarget.value, options);
+		value = parsed === null ? null : clamp(parsed);
+	}
+
+	function clamp(amount: number) {
+		if (min !== undefined && amount < min) return min;
+		if (max !== undefined && amount > max) return max;
+		return amount;
+	}
+
+	function settle() {
+		editing = false;
+		const parsed = parseGrouped(text, options);
+		value = parsed === null ? null : clamp(parsed);
+		text = value === null ? '' : formatGrouped(value, options);
+	}
+</script>
+
+<Input
+	bind:value={text}
+	{size}
+	{tone}
+	{invalid}
+	{disabled}
+	inputmode="decimal"
+	oninput={onInput}
+	onfocus={() => (editing = true)}
+	onblur={settle}
+	class={className}
+	{...rest}
+>
+	{#snippet prefix()}
+		{#if currency}
+			<span class="text-xs font-medium text-text-muted">{currency}</span>
+		{/if}
+	{/snippet}
+
+	{#snippet suffix()}
+		{#if unit}
+			<span class="text-xs font-medium text-text-muted">{unit}</span>
+		{/if}
+	{/snippet}
+</Input>

package/dist/styles/sprout/CurrencyInput.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Tone } from '../../core/tones.js';
+import { type InputSize } from './Input.svelte';
+interface Props extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix' | 'value' | 'min' | 'max'> {
+    /** Bindable amount. `null` is an empty field, which is not the same as 0. */
+    value?: number | null;
+    min?: number;
+    max?: number;
+    /** Thousands separator. */
+    group?: string;
+    /** Decimal separator. */
+    decimal?: string;
+    /** Decimal places the amount settles to when the field loses focus. */
+    precision?: number;
+    /** Leading mark — `Rp`, `$`, `€`. */
+    currency?: string;
+    /** Trailing mark instead, for the regions that write it that way. */
+    unit?: string;
+    size?: InputSize;
+    tone?: Tone;
+    invalid?: boolean;
+    class?: string;
+}
+declare const CurrencyInput: import("svelte").Component<Props, {}, "value">;
+type CurrencyInput = ReturnType<typeof CurrencyInput>;
+export default CurrencyInput;