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

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;

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

@@ -0,0 +1,128 @@
+<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 { InputEmailControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		placeholder = 'you@example.com',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.email',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputEmailControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	let inputEl = $state<HTMLInputElement>();
+	let scrollLeft = $state(0);
+
+	// ── Parse email into segments ─────────────────────────────────────────
+	type Segment = { text: string; kind: 'local' | 'at' | 'domain' | 'tld' | 'plain' };
+
+	function parseSegments(raw: string): Segment[] {
+		if (!raw) return [];
+
+		const atIdx = raw.indexOf('@');
+		if (atIdx === -1) return [{ text: raw, kind: 'plain' }];
+
+		const local  = raw.slice(0, atIdx);
+		const domain = raw.slice(atIdx + 1);
+		const segs: Segment[] = [];
+
+		if (local)  segs.push({ text: local,  kind: 'local' });
+		segs.push({ text: '@', kind: 'at' });
+
+		if (domain) {
+			// Split domain into base + TLD on last dot
+			const lastDot = domain.lastIndexOf('.');
+			if (lastDot !== -1 && lastDot < domain.length - 1) {
+				segs.push({ text: domain.slice(0, lastDot), kind: 'domain' });
+				segs.push({ text: domain.slice(lastDot),    kind: 'tld' });
+			} else {
+				segs.push({ text: domain, kind: 'domain' });
+			}
+		}
+
+		return segs;
+	}
+
+	const segments = $derived(parseSegments(value));
+
+	const kindStyle: Record<Segment['kind'], string> = {
+		local:  'color: var(--input-hl-primary, var(--foreground)); font-weight: 500',
+		at:     'color: var(--input-hl-muted, var(--foreground))',
+		domain: 'color: var(--input-hl-secondary, var(--foreground))',
+		tld:    'color: var(--input-hl-accent, var(--foreground))',
+		plain:  'color: var(--foreground)',
+	};
+
+	function syncScroll() {
+		scrollLeft = inputEl?.scrollLeft ?? 0;
+	}
+
+	function handleInput(ev: Event) {
+		const input = ev.currentTarget as HTMLInputElement;
+		value = input.value;
+		if (bond) bond.state.props.value = value;
+		syncScroll();
+		oninput?.(ev, { value });
+	}
+
+	function handleChange(ev: Event) {
+		onchange?.(ev, { value });
+	}
+</script>
+
+<span class="relative flex h-full w-full flex-1 items-center overflow-hidden">
+
+	<!-- Coloured overlay -->
+	<span
+		aria-hidden="true"
+		class={cn(
+			'pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-pre px-2 font-mono text-sm',
+			preset?.class,
+			toClassValue(klass, bond)
+		)}
+	>
+		<span style="transform: translateX(-{scrollLeft}px)">
+			{#if segments.length}
+				{#each segments as seg (seg.kind + seg.text)}
+					<span style={kindStyle[seg.kind]}>{seg.text}</span>
+				{/each}
+			{:else}
+				<span class="text-muted-foreground">{placeholder}</span>
+			{/if}
+		</span>
+	</span>
+
+	<!-- Real input — transparent text, visible caret -->
+	<input
+		bind:this={inputEl}
+		type="email"
+		bind:value
+		{placeholder}
+		{disabled}
+		{readonly}
+		class={cn(
+			'relative h-full w-full flex-1 bg-transparent px-2 font-mono text-sm text-transparent caret-foreground outline-none',
+			'placeholder:text-transparent',
+			disabled && 'cursor-not-allowed',
+			preset?.class,
+			toClassValue(klass, bond)
+		)}
+		oninput={handleInput}
+		onchange={handleChange}
+		onscroll={syncScroll}
+		{...restProps}
+	/>
+</span>

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

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

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { InputBond } from './bond.svelte';
+	import type { InputFileControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		files = $bindable<File[]>(),
+		accept = undefined,
+		multiple = false,
+		disabled = false,
+		placeholder = 'Choose file…',
+		triggerContent = undefined,
+		preset = 'input.file',
+		onchange = undefined,
+		...restProps
+	}: InputFileControlProps = $props();
+
+	let inputEl = $state<HTMLInputElement>();
+
+	const hasFiles = $derived(files.length > 0);
+
+	function formatSize(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+		return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+	}
+
+	function handleChange(ev: Event) {
+		const input = ev.currentTarget as HTMLInputElement;
+		files = Array.from(input.files ?? []);
+		if (bond) bond.state.props.files = files;
+		onchange?.(ev, { files });
+	}
+
+	function openPicker() {
+		if (!disabled) inputEl?.click();
+	}
+
+	function clearFiles(ev: MouseEvent) {
+		ev.stopPropagation();
+		files = [];
+		if (inputEl) inputEl.value = '';
+		if (bond) bond.state.props.files = [];
+		onchange?.(ev, { files: [] });
+	}
+</script>
+
+<!-- hidden native file input -->
+<input
+	bind:this={inputEl}
+	type="file"
+	{accept}
+	{multiple}
+	{disabled}
+	class="sr-only"
+	onchange={handleChange}
+	{...restProps}
+/>
+
+<!-- visible control -->
+<HtmlAtom
+	as="button"
+	type="button"
+	{preset}
+	{disabled}
+	onclick={openPicker}
+	class={[
+		'text-foreground flex h-full w-full flex-1 cursor-pointer items-center gap-2 bg-transparent px-2 text-left outline-none disabled:cursor-not-allowed',
+		'$preset',
+		klass
+	]}
+>
+	{#if triggerContent}
+		{@render triggerContent({ files, hasFiles, open: openPicker })}
+	{:else if hasFiles}
+		<!-- file info -->
+		{#if files.length === 1}
+			{@const f = files[0]}
+			{@const ext = f.name.split('.').pop()?.toUpperCase() ?? ''}
+			{@const size = formatSize(f.size)}
+			<span class="bg-primary/10 text-primary rounded px-1.5 py-0.5 font-mono text-xs font-medium">
+				{ext}
+			</span>
+			<span class="min-w-0 flex-1 truncate text-sm">{f.name}</span>
+			<span class="text-muted-foreground shrink-0 text-xs">{size}</span>
+		{:else}
+			<span class="min-w-0 flex-1 truncate text-sm">{files.length} files selected</span>
+			<span class="text-muted-foreground shrink-0 text-xs">
+				{formatSize(files.reduce((a, f) => a + f.size, 0))}
+			</span>
+		{/if}
+		<!-- clear button -->
+		<button
+			type="button"
+			onclick={clearFiles}
+			aria-label="Clear file selection"
+			class="text-muted-foreground hover:text-foreground shrink-0 transition-colors"
+		>
+			<svg viewBox="0 0 16 16" fill="none" class="h-3.5 w-3.5" aria-hidden="true">
+				<path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+			</svg>
+		</button>
+	{:else}
+		<!-- placeholder -->
+		<svg viewBox="0 0 16 16" fill="none" class="text-muted-foreground h-4 w-4 shrink-0" aria-hidden="true">
+			<path d="M2 12V9l4-4 3 3 2-2 3 3v3H2z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+			<circle cx="11" cy="4" r="1.5" stroke="currentColor" stroke-width="1.2"/>
+		</svg>
+		<span class="text-muted-foreground flex-1 text-sm">{placeholder}</span>
+	{/if}
+</HtmlAtom>

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

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

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

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { Icon, type IconProps } from '../icon';
 
-	let { class: klass = '', children = undefined, ...restProps }: IconProps = $props();
+	let { class: klass = '', preset = "input.icon", children = undefined, ...restProps }: IconProps = $props();
 </script>
 
 <Icon
-	preset="input.icon"
+	{preset}
 	class={[
 		'border-border flex aspect-square h-full items-center justify-center bg-transparent text-sm leading-0',
 		'$preset',
@@ -13,5 +13,5 @@
 	]}
 	{...restProps}
 >
-	{@render children?.()}
+	{@render children?.({})}
 </Icon>

package/dist/components/input/input-icon.svelte.d.ts

@@ -1,4 +1,4 @@
 import { type IconProps } from '../icon';
-declare const InputIcon: import("svelte").Component<IconProps<import("svelte").Component<{}, {}, string>, "div", import("..").ComponentBase | import("..").SnippetBase>, {}, "">;
+declare const InputIcon: import("svelte").Component<IconProps<import("svelte").Component<{}, {}, string>, "div", import("..").SnippetBase>, {}, "">;
 type InputIcon = ReturnType<typeof InputIcon>;
 export default InputIcon;