@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/input/color/shared.js

@@ -0,0 +1,349 @@
+// ── Color space names used inside color() ──────────────────────────────────
+export const COLOR_FN_SPACES = [
+    'display-p3',
+    'srgb',
+    'srgb-linear',
+    'a98-rgb',
+    'prophoto-rgb',
+    'rec2020',
+    'xyz-d50',
+    'xyz-d65'
+];
+export const FORMAT_DEFS = {
+    named: {
+        format: 'named',
+        fn: '',
+        sep: ' ',
+        channels: [{ id: 'name', label: 'Color name', kind: 'text', min: 0, max: 0 }],
+        alpha: false
+    },
+    hex: {
+        format: 'hex',
+        fn: '#',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'hex', min: 0, max: 255 },
+            { id: 'g', label: 'Green', kind: 'hex', min: 0, max: 255 },
+            { id: 'b', label: 'Blue', kind: 'hex', min: 0, max: 255 }
+        ],
+        alpha: true
+    },
+    rgb: {
+        format: 'rgb',
+        fn: 'rgb',
+        sep: ', ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'integer', min: 0, max: 255 },
+            { id: 'g', label: 'Green', kind: 'integer', min: 0, max: 255 },
+            { id: 'b', label: 'Blue', kind: 'integer', min: 0, max: 255 }
+        ],
+        alpha: true
+    },
+    hsl: {
+        format: 'hsl',
+        fn: 'hsl',
+        sep: ' ',
+        channels: [
+            { id: 'h', label: 'Hue', kind: 'angle', min: 0, max: 360, precision: 1, suffix: 'deg' },
+            {
+                id: 's',
+                label: 'Saturation',
+                kind: 'percent',
+                min: 0,
+                max: 100,
+                precision: 1,
+                suffix: '%'
+            },
+            { id: 'l', label: 'Lightness', kind: 'percent', min: 0, max: 100, precision: 1, suffix: '%' }
+        ],
+        alpha: true
+    },
+    hwb: {
+        format: 'hwb',
+        fn: 'hwb',
+        sep: ' ',
+        channels: [
+            { id: 'h', label: 'Hue', kind: 'angle', min: 0, max: 360, precision: 1, suffix: 'deg' },
+            { id: 'w', label: 'White', kind: 'percent', min: 0, max: 100, precision: 1, suffix: '%' },
+            { id: 'b', label: 'Blackness', kind: 'percent', min: 0, max: 100, precision: 1, suffix: '%' }
+        ],
+        alpha: true
+    },
+    lab: {
+        format: 'lab',
+        fn: 'lab',
+        sep: ' ',
+        channels: [
+            { id: 'l', label: 'Lightness', kind: 'float', min: 0, max: 100, precision: 2 },
+            { id: 'a', label: 'a', kind: 'float', min: -125, max: 125, precision: 2 },
+            { id: 'b', label: 'b', kind: 'float', min: -125, max: 125, precision: 2 }
+        ],
+        alpha: true
+    },
+    lch: {
+        format: 'lch',
+        fn: 'lch',
+        sep: ' ',
+        channels: [
+            { id: 'l', label: 'Lightness', kind: 'float', min: 0, max: 100, precision: 2 },
+            { id: 'c', label: 'Chroma', kind: 'float', min: 0, max: 150, precision: 2 },
+            { id: 'h', label: 'Hue', kind: 'angle', min: 0, max: 360, precision: 1, suffix: 'deg' }
+        ],
+        alpha: true
+    },
+    oklab: {
+        format: 'oklab',
+        fn: 'oklab',
+        sep: ' ',
+        channels: [
+            { id: 'l', label: 'Lightness', kind: 'float', min: 0, max: 1, precision: 3 },
+            { id: 'a', label: 'a', kind: 'float', min: -0.4, max: 0.4, precision: 3 },
+            { id: 'b', label: 'b', kind: 'float', min: -0.4, max: 0.4, precision: 3 }
+        ],
+        alpha: true
+    },
+    oklch: {
+        format: 'oklch',
+        fn: 'oklch',
+        sep: ' ',
+        channels: [
+            { id: 'l', label: 'Lightness', kind: 'float', min: 0, max: 1, precision: 3 },
+            { id: 'c', label: 'Chroma', kind: 'float', min: 0, max: 0.4, precision: 3 },
+            { id: 'h', label: 'Hue', kind: 'angle', min: 0, max: 360, precision: 1, suffix: 'deg' }
+        ],
+        alpha: true
+    },
+    'display-p3': {
+        format: 'display-p3',
+        fn: 'color',
+        colorspace: 'display-p3',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    srgb: {
+        format: 'srgb',
+        fn: 'color',
+        colorspace: 'srgb',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    'srgb-linear': {
+        format: 'srgb-linear',
+        fn: 'color',
+        colorspace: 'srgb-linear',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    'a98-rgb': {
+        format: 'a98-rgb',
+        fn: 'color',
+        colorspace: 'a98-rgb',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    'prophoto-rgb': {
+        format: 'prophoto-rgb',
+        fn: 'color',
+        colorspace: 'prophoto-rgb',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    rec2020: {
+        format: 'rec2020',
+        fn: 'color',
+        colorspace: 'rec2020',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    'xyz-d50': {
+        format: 'xyz-d50',
+        fn: 'color',
+        colorspace: 'xyz-d50',
+        sep: ' ',
+        channels: [
+            { id: 'x', label: 'X', kind: 'float', min: -0.5, max: 1.5, precision: 4 },
+            { id: 'y', label: 'Y', kind: 'float', min: -0.5, max: 1.5, precision: 4 },
+            { id: 'z', label: 'Z', kind: 'float', min: -0.5, max: 1.5, precision: 4 }
+        ],
+        alpha: true
+    },
+    'xyz-d65': {
+        format: 'xyz-d65',
+        fn: 'color',
+        colorspace: 'xyz-d65',
+        sep: ' ',
+        channels: [
+            { id: 'x', label: 'X', kind: 'float', min: -0.5, max: 1.5, precision: 4 },
+            { id: 'y', label: 'Y', kind: 'float', min: -0.5, max: 1.5, precision: 4 },
+            { id: 'z', label: 'Z', kind: 'float', min: -0.5, max: 1.5, precision: 4 }
+        ],
+        alpha: true
+    }
+};
+// ── Parse a CSS color string → { format, channels, alpha } ────────────────
+export function parseColor(raw) {
+    const s = raw.trim();
+    if (!s)
+        return undefined;
+    // Named color — single word, only letters (e.g. red, cornflowerblue, transparent)
+    if (/^[a-zA-Z]+$/.test(s)) {
+        return { format: 'named', channels: { name: s }, alpha: undefined };
+    }
+    // Hex 6 or 8
+    const hex8 = s.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})?$/);
+    if (hex8) {
+        return {
+            format: 'hex',
+            channels: { r: hex8[1].toUpperCase(), g: hex8[2].toUpperCase(), b: hex8[3].toUpperCase() },
+            alpha: hex8[4] ? parseInt(hex8[4], 16) / 255 : undefined
+        };
+    }
+    // Short hex 3 or 4
+    const hex3 = s.match(/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])?$/);
+    if (hex3) {
+        return {
+            format: 'hex',
+            channels: {
+                r: (hex3[1] + hex3[1]).toUpperCase(),
+                g: (hex3[2] + hex3[2]).toUpperCase(),
+                b: (hex3[3] + hex3[3]).toUpperCase()
+            },
+            alpha: hex3[4] ? parseInt(hex3[4] + hex3[4], 16) / 255 : undefined
+        };
+    }
+    // Functional
+    const fnM = s.match(/^([a-z-]+)\((.+)\)$/i);
+    if (!fnM)
+        return undefined;
+    const fn = fnM[1].toLowerCase();
+    const body = fnM[2];
+    // color(colorspace …)
+    if (fn === 'color') {
+        const spaceIdx = body.search(/\s/);
+        const cs = (spaceIdx > 0 ? body.slice(0, spaceIdx) : body).toLowerCase();
+        if (!(cs in FORMAT_DEFS))
+            return undefined;
+        const rest = spaceIdx > 0 ? body.slice(spaceIdx + 1) : '';
+        const vals = parseChannelArgs(rest, true);
+        const def = FORMAT_DEFS[cs];
+        const channels = {};
+        def.channels.forEach((ch, i) => {
+            channels[ch.id] = vals[i];
+        });
+        return { format: cs, channels, alpha: vals[def.channels.length] };
+    }
+    // Named fn
+    const fmtEntry = Object.values(FORMAT_DEFS).find((f) => f.fn === fn && !f.colorspace);
+    if (!fmtEntry)
+        return undefined;
+    const vals = parseChannelArgs(body, false);
+    const channels = {};
+    fmtEntry.channels.forEach((ch, i) => {
+        channels[ch.id] = vals[i];
+    });
+    return {
+        format: fmtEntry.format,
+        channels,
+        alpha: vals[fmtEntry.channels.length]
+    };
+}
+function parseChannelArgs(body, spaceSep) {
+    const slashIdx = body.lastIndexOf('/');
+    let main = body;
+    let alphaStr;
+    if (slashIdx !== -1) {
+        main = body.slice(0, slashIdx).trim();
+        alphaStr = body.slice(slashIdx + 1).trim();
+    }
+    const tokens = main
+        .split(spaceSep ? /\s+/ : /[\s,]+/)
+        .map((t) => t.trim())
+        .filter(Boolean)
+        .map(parseChannelValue);
+    if (alphaStr !== undefined)
+        tokens.push(parseChannelValue(alphaStr));
+    return tokens;
+}
+function parseChannelValue(t) {
+    if (t.toLowerCase() === 'none')
+        return undefined;
+    if (t.endsWith('%'))
+        return parseFloat(t);
+    const n = parseFloat(t.replace(/deg|grad|rad|turn$/i, ''));
+    return isNaN(n) ? undefined : n;
+}
+// ── Build a CSS color string from format + channels ────────────────────────
+export function buildColor(format, channels, alpha) {
+    const def = FORMAT_DEFS[format];
+    if (!def)
+        return '';
+    if (format === 'named') {
+        return String(channels['name'] ?? '');
+    }
+    if (format === 'hex') {
+        const r = channels['r'] ?? '00';
+        const g = channels['g'] ?? '00';
+        const b = channels['b'] ?? '00';
+        const a = alpha !== undefined
+            ? Math.round(alpha * 255)
+                .toString(16)
+                .padStart(2, '0')
+            : '';
+        return `#${r}${g}${b}${a}`;
+    }
+    const vals = def.channels.map((ch) => {
+        const v = channels[ch.id];
+        if (v === undefined)
+            return 'none';
+        const precision = ch.precision ?? 0;
+        const num = precision > 0
+            ? (typeof v === 'number' ? v : parseFloat(String(v))).toFixed(precision)
+            : String(Math.round(typeof v === 'number' ? v : parseFloat(String(v))));
+        return ch.suffix ? num + ch.suffix : num;
+    });
+    const alphaStr = alpha !== undefined ? ` / ${alpha.toFixed(2)}` : '';
+    if (def.colorspace) {
+        return `color(${def.colorspace} ${vals.join(' ')}${alphaStr})`;
+    }
+    const sep = def.sep;
+    // Legacy rgb/hsl with commas — put alpha inside as rgba/hsla
+    if (sep === ', ' && alpha !== undefined) {
+        vals.push(alpha.toFixed(2));
+        return `${def.fn}(${vals.join(sep)})`;
+    }
+    return `${def.fn}(${vals.join(sep)}${alphaStr})`;
+}
+// ── Detect format from a raw string ───────────────────────────────────────
+export function detectFormat(raw) {
+    return parseColor(raw)?.format;
+}

package/dist/components/input/color/swatch.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '../../../utils';
+	import { InputBond } from '../bond.svelte';
+	import { Swatch } from '../../swatch';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		...restProps
+	}: {
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const colorValue = $derived(String(bond?.state?.props?.value ?? ''));
+</script>
+
+<Swatch
+	color={colorValue}
+	class={cn('my-1 h-[calc(100%-8px)] max-h-6 aspect-square rounded-sm', klass)}
+	{...restProps}
+/>

package/dist/components/input/color/swatch.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Swatch } from '../../swatch';
+type $$ComponentProps = {
+    class?: string;
+    [key: string]: unknown;
+};
+declare const Swatch: import("svelte").Component<$$ComponentProps, {}, "">;
+type Swatch = ReturnType<typeof Swatch>;
+export default Swatch;

package/dist/components/input/color/types.d.ts

@@ -0,0 +1,56 @@
+export type ColorFormat = 'named' | 'hex' | 'rgb' | 'hsl' | 'hwb' | 'lab' | 'lch' | 'oklab' | 'oklch' | 'display-p3' | 'srgb' | 'srgb-linear' | 'a98-rgb' | 'prophoto-rgb' | 'rec2020' | 'xyz-d50' | 'xyz-d65';
+export type ChannelKind = 'integer' | 'float' | 'percent' | 'angle' | 'hex' | 'alpha' | 'text';
+export interface ChannelDef {
+    id: string;
+    label: string;
+    kind: ChannelKind;
+    min: number;
+    max: number;
+    /** Decimal precision for display/editing */
+    precision?: number;
+    /** Suffix shown after the value (e.g. '%', 'deg') */
+    suffix?: string;
+}
+export interface ColorSegmentProps {
+    value: number | string | undefined;
+    channel: ChannelDef;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string;
+    /** Fired on every live change (Arrow up/down, typing) */
+    onchange?: (value: number | string | undefined) => void;
+    /** Fired on blur / Enter — use for onchange semantics */
+    oncommit?: (ev: Event, value: number | string | undefined) => void;
+    onfocusmove?: (dir: 1 | -1) => void;
+}
+export interface InputColorControlProps {
+    /**
+     * Raw CSS color string (bindable). Format is auto-detected from value.
+     * Supports: hex, rgb/rgba, hsl/hsla, hwb, lab, lch, oklab, oklch,
+     * color(display-p3 …), color(srgb …), color(rec2020 …), etc.
+     */
+    value?: string;
+    /**
+     * Override the active format namespace. When set, segments always render
+     * for this format regardless of what the value string looks like.
+     */
+    format?: ColorFormat;
+    /**
+     * When true, always show the alpha channel segment even if the current
+     * value has no alpha component.
+     */
+    alpha?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string;
+    preset?: string;
+    /** Fired on every channel edit (live). */
+    oninput?: (ev: Event, options: {
+        value: string;
+    }) => void;
+    /** Fired on blur / Enter (commit). */
+    onchange?: (ev: Event, options: {
+        value: string;
+    }) => void;
+}

package/dist/components/input/color/types.js

@@ -0,0 +1,2 @@
+// ── Color format namespace ─────────────────────────────────────────────────
+export {};

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

@@ -1,3 +1,4 @@
 export * as Input from './atoms';
+export { default as OtpInput } from './input-otp-control.svelte';
 export * from './bond.svelte';
 export * from './types';

package/dist/components/input/index.js

@@ -1,3 +1,4 @@
 export * as Input from './atoms';
+export { default as OtpInput } from './input-otp-control.svelte';
 export * from './bond.svelte';
 export * from './types';

package/dist/components/input/input-control.svelte

@@ -1,11 +1,13 @@
 <script lang="ts" generics="B extends Base = Base">
 	import { on } from '../../attachments/event.svelte';
 	import { getPreset } from '../../context';
+	import { resolvePreset } from '../atom';
 	import { cn, toClassValue } from '../../utils';
 	import type { PresetModuleName } from '../../context/preset.svelte';
 	import type { Base } from '../atom';
 	import { InputBond } from './bond.svelte';
 	import type { InputControlProps } from './types';
+	import { untrack } from 'svelte';
 
 	const bond = InputBond.get();
 
@@ -23,7 +25,7 @@
 		...restProps
 	}: InputControlProps<B> = $props();
 
-	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
 
 	const valueProps = $derived({
 		...(bond?.input?.() ?? {}),

package/dist/components/input/input-currency-control.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { getPreset } from '../../context';
+	import { resolvePreset } from '../atom';
+	import { cn, toClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import { untrack } from 'svelte';
+	import { InputBond } from './bond.svelte';
+	import type { InputCurrencyControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		amount = $bindable<number | undefined>(undefined),
+		currency = 'USD',
+		locale = 'en-US',
+		precision = 2,
+		min = undefined,
+		max = undefined,
+		step = undefined,
+		placeholder = '0.00',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.currency',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputCurrencyControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	let inputEl   = $state<HTMLInputElement>();
+	let isFocused = $state(false);
+
+	// ── Locale separators + pre-compiled regexes ──────────────────────────
+	const separators = $derived.by(() => {
+		const parts   = new Intl.NumberFormat(locale).formatToParts(1234567.89);
+		const decimal = parts.find(p => p.type === 'decimal')?.value ?? '.';
+		const group   = parts.find(p => p.type === 'group')?.value   ?? ',';
+		const esc     = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+		return {
+			decimal,
+			reGroup:   new RegExp(esc(group),   'g'),
+			reDecimal: new RegExp(esc(decimal)),
+		};
+	});
+
+	// ── Helpers ───────────────────────────────────────────────────────────
+	const stepSize = $derived(step ?? Math.pow(10, -precision));
+
+	function clamp(n: number): number {
+		return Math.min(max ?? n, Math.max(min ?? n, n));
+	}
+
+	function parseRaw(raw: string): number | undefined {
+		const cleaned = raw
+			.replace(separators.reGroup, '')
+			.replace(separators.reDecimal, '.')
+			.replace(/[^0-9.\-]/g, '')
+			.trim();
+		if (!cleaned || cleaned === '-') return undefined;
+		const n = parseFloat(cleaned);
+		return isNaN(n) ? undefined : n;
+	}
+
+	function toEditString(n: number): string {
+		return n.toFixed(precision).replace('.', separators.decimal);
+	}
+
+	// ── Commit — sole writer of `amount` + `value` ────────────────────────
+	function commit(n: number | undefined) {
+		amount = n !== undefined ? clamp(n) : undefined;
+		value  = amount !== undefined ? amount.toFixed(precision) : '';
+		if (bond) bond.state.props.value = value;
+	}
+
+	// ── Seed: if parent provides `value` string but not `amount` ─────────
+	$effect(() => {
+		untrack(() => {
+			if (amount === undefined && value) commit(parseRaw(value));
+		});
+	});
+
+	// ── Display overlay parts ─────────────────────────────────────────────
+	const formattedParts = $derived(
+		amount !== undefined
+			? new Intl.NumberFormat(locale, {
+				style: 'currency',
+				currency,
+				minimumFractionDigits: precision,
+				maximumFractionDigits: precision,
+			}).formatToParts(amount)
+			: []
+	);
+
+	// ── Handlers ──────────────────────────────────────────────────────────
+
+	function handleFocus() {
+		if (readonly) return;
+		isFocused = true;
+		if (inputEl) inputEl.value = amount !== undefined ? toEditString(amount) : '';
+	}
+
+	function handleBlur(ev: FocusEvent) {
+		if (readonly) return;
+		isFocused = false;
+		commit(parseRaw(inputEl?.value ?? ''));
+		onchange?.(ev, { value, amount });
+	}
+
+	function handleInput(ev: Event) {
+		// Don't touch state mid-typing — only notify
+		const raw = (ev.currentTarget as HTMLInputElement).value;
+		oninput?.(ev, { value: raw, amount: parseRaw(raw) });
+	}
+
+	function handleKeydown(ev: KeyboardEvent) {
+		if (disabled || readonly) return;
+		if (ev.key !== 'ArrowUp' && ev.key !== 'ArrowDown') return;
+		ev.preventDefault();
+		const dir        = ev.key === 'ArrowUp' ? 1 : -1;
+		const multiplier = ev.shiftKey ? 10 : ev.altKey ? 0.1 : 1;
+		commit((amount ?? 0) + dir * stepSize * multiplier);
+		if (inputEl && amount !== undefined) inputEl.value = toEditString(amount);
+	}
+
+	function handlePaste(ev: ClipboardEvent) {
+		ev.preventDefault();
+		const parsed = parseRaw(ev.clipboardData?.getData('text') ?? '');
+		if (parsed === undefined) return;
+		const str = toEditString(parsed);
+		if (inputEl) inputEl.value = str;
+		oninput?.(ev, { value: str, amount: parsed });
+	}
+</script>
+
+<span class="relative flex h-full w-full flex-1 items-center overflow-hidden">
+
+	<!-- Display overlay — shown when blurred -->
+	{#if !isFocused}
+		<span
+			aria-hidden="true"
+			class="pointer-events-none absolute inset-0 flex items-center overflow-hidden px-2 font-mono text-sm"
+			style="white-space: pre;"
+		>
+		{#if formattedParts.length}
+			{#each formattedParts as part (part)}
+				<span class={cn(
+								part.type === 'currency' && 'text-muted-foreground font-normal',
+								part.type === 'integer'  && 'text-foreground font-medium',
+								part.type === 'decimal'  && 'text-muted-foreground',
+								part.type === 'fraction' && 'text-foreground/70',
+								part.type === 'group'    && 'text-muted-foreground/60',
+								part.type === 'literal'  && 'text-muted-foreground/60',
+							)}>{part.value}</span>
+			{/each}
+		{:else}
+			<span class="text-muted-foreground">{placeholder}</span>
+		{/if}
+	</span>
+	{/if}
+
+	<!-- Native input — transparent when blurred, visible when focused -->
+	<input
+		bind:this={inputEl}
+		type="text"
+		inputmode="decimal"
+		autocomplete="off"
+		spellcheck={false}
+		value={isFocused ? (amount !== undefined ? toEditString(amount) : '') : ''}
+		{placeholder}
+		{disabled}
+		{readonly}
+		class={cn(
+			'relative h-full w-full flex-1 bg-transparent px-2 font-mono text-sm caret-foreground outline-none',
+			isFocused ? 'text-foreground placeholder:text-muted-foreground' : 'text-transparent placeholder:text-transparent',
+			disabled && 'cursor-not-allowed opacity-50',
+			preset?.class,
+			toClassValue(klass, bond),
+		)}
+		oninput={handleInput}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		onkeydown={handleKeydown}
+		onpaste={handlePaste}
+		{...restProps}
+	/>
+</span>

package/dist/components/input/input-currency-control.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputCurrencyControlProps } from './types';
+declare const InputCurrencyControl: import("svelte").Component<InputCurrencyControlProps, {}, "value" | "amount">;
+type InputCurrencyControl = ReturnType<typeof InputCurrencyControl>;
+export default InputCurrencyControl;