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

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,127 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	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);
+
+	const fileLabel = $derived(() => {
+		if (!hasFiles) return null;
+		if (files.length === 1) {
+			const f = files[0];
+			const ext = f.name.split('.').pop()?.toUpperCase() ?? '';
+			const size = formatSize(f.size);
+			return { name: f.name, ext, size };
+		}
+		return { name: `${files.length} files selected`, ext: '', size: formatSize(files.reduce((a, f) => a + f.size, 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.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;

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

@@ -0,0 +1,335 @@
+<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 { InputLocationControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		lat = $bindable<number | undefined>(undefined),
+		lng = $bindable<number | undefined>(undefined),
+		format = 'dd',
+		precision = 6,
+		locate = true,
+		placeholder = 'lat, lng',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.location',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputLocationControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	let inputEl = $state<HTMLInputElement>();
+	let scrollLeft = $state(0);
+	let locating = $state(false);
+	let locationError = $state<string | undefined>(undefined);
+	let isFocused = $state(false);
+
+	// ── Coord parsing ──────────────────────────────────────────────────────
+	type ParsedCoords = { lat: number; lng: number } | null;
+
+	/**
+	 * Accepts: "lat, lng" | "lat lng" | "lat;lng"
+	 * Numbers may be signed decimals or have a trailing N/S/E/W suffix.
+	 */
+	function parseCoords(raw: string): ParsedCoords {
+		if (!raw.trim()) return null;
+
+		// Strip degree/minute/second symbols for DMS pasting, then extract numeric parts
+		const clean = raw.replace(/[°'"]/g, ' ').trim();
+		const parts = clean.split(/[\s,;]+/).filter(Boolean);
+		if (parts.length < 2) return null;
+
+		function parsePart(s: string): number | null {
+			const dir = /[NSEWnsew]$/.exec(s)?.[0]?.toUpperCase();
+			const numeric = parseFloat(s.replace(/[NSEWnsew]$/i, ''));
+			if (isNaN(numeric)) return null;
+			if (dir === 'S' || dir === 'W') return -numeric;
+			return numeric;
+		}
+
+		const parsedLat = parsePart(parts[0]!);
+		const parsedLng = parsePart(parts[1]!);
+		if (parsedLat === null || parsedLng === null) return null;
+		return { lat: parsedLat, lng: parsedLng };
+	}
+
+	const isValidLat = (v: number) => v >= -90 && v <= 90;
+	const isValidLng = (v: number) => v >= -180 && v <= 180;
+
+	// ── Overlay segment types ──────────────────────────────────────────────
+	type SegmentKind =
+		| 'lat-val' | 'lat-min' | 'lat-sec' | 'lat-dir'
+		| 'lng-val' | 'lng-min' | 'lng-sec' | 'lng-dir'
+		| 'sep' | 'symbol' | 'error';
+
+	type Segment = { text: string; kind: SegmentKind };
+
+	const kindStyle: Record<SegmentKind, string> = {
+		'lat-val': 'color: var(--input-hl-positive, var(--foreground)); font-weight: 500',
+		'lat-min': 'color: var(--input-hl-positive, var(--foreground))',
+		'lat-sec': 'color: var(--input-hl-dim, var(--foreground))',
+		'lat-dir': 'color: var(--input-hl-positive, var(--foreground)); font-weight: 600',
+		'lng-val': 'color: var(--input-hl-primary, var(--foreground)); font-weight: 500',
+		'lng-min': 'color: var(--input-hl-primary, var(--foreground))',
+		'lng-sec': 'color: var(--input-hl-dim, var(--foreground))',
+		'lng-dir': 'color: var(--input-hl-primary, var(--foreground)); font-weight: 600',
+		'sep':     'color: var(--input-hl-muted, var(--foreground))',
+		'symbol':  'color: var(--input-hl-muted, var(--foreground)); opacity: 0.6',
+		'error':   'color: var(--input-hl-error, var(--destructive))',
+	};
+
+	// ── DMS helpers ────────────────────────────────────────────────────────
+	function toDms(deg: number, hemi: 'lat' | 'lng') {
+		const abs = Math.abs(deg);
+		const d = Math.floor(abs);
+		const mFull = (abs - d) * 60;
+		const m = Math.floor(mFull);
+		const s = (mFull - m) * 60;
+		const pos = hemi === 'lat' ? 'N' : 'E';
+		const neg = hemi === 'lat' ? 'S' : 'W';
+		return { d, m, s, dir: deg >= 0 ? pos : neg };
+	}
+
+	// ── Build overlay segments ─────────────────────────────────────────────
+	function buildSegments(raw: string): Segment[] {
+		if (!raw.trim()) return [];
+
+		const coords = parseCoords(raw);
+		if (!coords) return [{ text: raw, kind: 'error' }];
+
+		const { lat: lt, lng: ln } = coords;
+		const latOk = isValidLat(lt);
+		const lngOk = isValidLng(ln);
+
+		const segs: Segment[] = [];
+
+		if (format === 'dms') {
+			const ld = toDms(lt, 'lat');
+			const nd = toDms(ln, 'lng');
+
+			segs.push({ text: String(ld.d),                   kind: latOk ? 'lat-val' : 'error' });
+			segs.push({ text: '°',                            kind: 'symbol' });
+			segs.push({ text: String(ld.m).padStart(2, '0'), kind: 'lat-min' });
+			segs.push({ text: "'",                            kind: 'symbol' });
+			segs.push({ text: ld.s.toFixed(2).padStart(5, '0'), kind: 'lat-sec' });
+			segs.push({ text: '"',                            kind: 'symbol' });
+			segs.push({ text: ld.dir,                         kind: 'lat-dir' });
+
+			segs.push({ text: ',  ', kind: 'sep' });
+
+			segs.push({ text: String(nd.d),                   kind: lngOk ? 'lng-val' : 'error' });
+			segs.push({ text: '°',                            kind: 'symbol' });
+			segs.push({ text: String(nd.m).padStart(2, '0'), kind: 'lng-min' });
+			segs.push({ text: "'",                            kind: 'symbol' });
+			segs.push({ text: nd.s.toFixed(2).padStart(5, '0'), kind: 'lng-sec' });
+			segs.push({ text: '"',                            kind: 'symbol' });
+			segs.push({ text: nd.dir,                         kind: 'lng-dir' });
+		} else {
+			// Decimal degrees
+			segs.push({ text: lt.toFixed(precision), kind: latOk ? 'lat-val' : 'error' });
+			segs.push({ text: '°',                  kind: 'symbol' });
+			segs.push({ text: ',  ',                kind: 'sep' });
+			segs.push({ text: ln.toFixed(precision), kind: lngOk ? 'lng-val' : 'error' });
+			segs.push({ text: '°',                  kind: 'symbol' });
+		}
+
+		return segs;
+	}
+
+	const segments = $derived(buildSegments(value));
+	const parsedCoords = $derived(parseCoords(value));
+	const coordsValid = $derived(
+		parsedCoords !== null &&
+		isValidLat(parsedCoords.lat) &&
+		isValidLng(parsedCoords.lng)
+	);
+
+	// ── Sync value → lat/lng props ─────────────────────────────────────────
+	$effect(() => {
+		const coords = parseCoords(value);
+		if (coords && isValidLat(coords.lat) && isValidLng(coords.lng)) {
+			lat = coords.lat;
+			lng = coords.lng;
+		} else if (!value.trim()) {
+			lat = undefined;
+			lng = undefined;
+		}
+	});
+
+	// ── Sync lat/lng props → value string (external writes) ───────────────
+	$effect(() => {
+		if (lat !== undefined && lng !== undefined) {
+			const current = parseCoords(value);
+			if (current?.lat !== lat || current?.lng !== lng) {
+				value = `${lat}, ${lng}`;
+				if (bond) bond.state.props.value = value;
+			}
+		}
+	});
+
+	// ── Geolocation ────────────────────────────────────────────────────────
+	function handleLocate() {
+		if (!navigator?.geolocation || locating || disabled || readonly) return;
+		locating = true;
+		locationError = undefined;
+		navigator.geolocation.getCurrentPosition(
+			(pos) => {
+				locating = false;
+				const lt = parseFloat(pos.coords.latitude.toFixed(precision));
+				const ln = parseFloat(pos.coords.longitude.toFixed(precision));
+				lat = lt;
+				lng = ln;
+				value = `${lt}, ${ln}`;
+				if (bond) bond.state.props.value = value;
+				onchange?.(new Event('change'), { lat, lng, value });
+			},
+			(err) => {
+				locating = false;
+				locationError = err.message;
+			},
+			{ enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
+		);
+	}
+
+	// ── Input / change handlers ────────────────────────────────────────────
+	function handleInput(ev: Event) {
+		const input = ev.currentTarget as HTMLInputElement;
+		value = input.value;
+		if (bond) bond.state.props.value = value;
+		syncScroll();
+		oninput?.(ev, { lat, lng, value });
+	}
+
+	function handleChange(ev: Event) {
+		onchange?.(ev, { lat, lng, value });
+	}
+
+	function syncScroll() {
+		scrollLeft = inputEl?.scrollLeft ?? 0;
+	}
+
+	function handleFocus() {
+		isFocused = true;
+	}
+
+	function handleBlur() {
+		isFocused = false;
+	}
+
+	// ── Paste: normalise common coordinate formats ─────────────────────────
+	function handlePaste(ev: ClipboardEvent) {
+		ev.preventDefault();
+		const pasted = ev.clipboardData?.getData('text') ?? '';
+		// Accept "lat, lng", "lat lng", "lat;lng", even with degree symbols
+		const coords = parseCoords(pasted);
+		if (coords) {
+			value = `${coords.lat}, ${coords.lng}`;
+		} else {
+			value = pasted;
+		}
+		if (inputEl) inputEl.value = value;
+		if (bond) bond.state.props.value = value;
+		oninput?.(new Event('input'), { lat, lng, value });
+	}
+</script>
+
+<span class="relative flex h-full w-full flex-1 items-center overflow-hidden">
+
+	<!-- Display mode overlay (hidden while focused) -->
+	{#if !isFocused}
+		<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}
+						<span style={kindStyle[seg.kind]}>{seg.text}</span>
+					{/each}
+				{:else}
+					<span class="text-muted-foreground">{placeholder}</span>
+				{/if}
+			</span>
+		</span>
+	{/if}
+
+	<!-- Real <input> — transparent text in display mode, visible in input mode -->
+	<input
+		bind:this={inputEl}
+		type="text"
+		inputmode="decimal"
+		autocomplete="off"
+		spellcheck={false}
+		bind:value
+		{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}
+		onchange={handleChange}
+		onscroll={syncScroll}
+		onpaste={handlePaste}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		{...restProps}
+	/>
+
+	<!-- Locate-me button (Geolocation API) -->
+	{#if locate && !readonly && !disabled}
+		<button
+			type="button"
+			title={locating ? 'Locating…' : locationError ?? 'Use current location'}
+			aria-label="Use current location"
+			class={cn(
+				'mr-1.5 flex shrink-0 cursor-pointer items-center justify-center rounded p-0.5 transition-colors',
+				'text-muted-foreground hover:text-foreground focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1',
+				locating && 'animate-pulse text-sky-500 dark:text-sky-400',
+				locationError && !locating && 'text-destructive hover:text-destructive',
+				coordsValid && !locating && !locationError && 'text-emerald-600 dark:text-emerald-400'
+			)}
+			onclick={handleLocate}
+			tabindex={-1}
+		>
+			<!-- Crosshair / target icon (lucide-style) -->
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="14"
+				height="14"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<circle cx="12" cy="12" r="10" />
+				<circle cx="12" cy="12" r="3" />
+				<line x1="12" y1="2"  x2="12" y2="5"  />
+				<line x1="12" y1="19" x2="12" y2="22" />
+				<line x1="2"  y1="12" x2="5"  y2="12" />
+				<line x1="19" y1="12" x2="22" y2="12" />
+			</svg>
+		</button>
+	{/if}
+</span>

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

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