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

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { getPreset } from '../../context';
+	import { resolvePreset } from '../atom';
+	import { cn, toClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import { InputBond } from './bond.svelte';
+	import type { InputTextControlProps } from './types';
+	import { untrack } from 'svelte';
+
+	const bond = InputBond.get();
+
+	let {
+		value = $bindable(),
+		class: klass = '',
+		placeholder = '',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.text',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputTextControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	function handleChange(ev: Event) {
+		onchange?.(ev, { value });
+	}
+
+	function handleInput(ev: Event) {
+		const input = ev.currentTarget as HTMLInputElement;
+		value = input.value;
+
+		oninput?.(ev, { value });
+
+		if(ev.defaultPrevented) {
+			return;
+		}
+
+		if (bond) bond.state.props.value = value;
+	}
+</script>
+
+<input
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+			if (bond) bond.state.props.value = v;
+		}
+	}
+	type='text'
+	{placeholder}
+	{disabled}
+	{readonly}
+	class={cn(
+		'text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	onchange={handleChange}
+	oninput={handleInput}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,218 @@
+<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 { InputUrlControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		placeholder = '',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.url',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputUrlControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	let inputEl = $state<HTMLInputElement>();
+	let scrollLeft = $state(0);
+
+	// ── Parse URL into segments ──────────────────────────────────────────
+	type Segment = { text: string; kind: 'protocol' | 'host' | 'port' | 'pathname' | 'search' | 'hash' | 'plain' };
+
+	function parseSegments(raw: string): Segment[] {
+		if (!raw) return [];
+
+		// Normalise: if no protocol, add a fake one for URL parsing
+		const hasProtocol = /^[a-z][a-z0-9+\-.]*:\/\//i.test(raw);
+		const forParsing = hasProtocol ? raw : 'https://' + raw;
+
+		try {
+			const u = new URL(forParsing);
+			const segs: Segment[] = [];
+
+			if (hasProtocol) {
+				segs.push({ text: u.protocol + '//', kind: 'protocol' });
+			}
+
+			// username:password@
+			if (u.username) {
+				segs.push({ text: u.username + (u.password ? ':' + u.password : '') + '@', kind: 'plain' });
+			}
+
+			segs.push({ text: u.hostname, kind: 'host' });
+
+			if (u.port) {
+				segs.push({ text: ':' + u.port, kind: 'port' });
+			}
+
+			if (u.pathname && u.pathname !== '/') {
+				segs.push({ text: u.pathname, kind: 'pathname' });
+			} else if (u.pathname === '/' && (u.search || u.hash)) {
+				segs.push({ text: '/', kind: 'pathname' });
+			}
+
+			if (u.search) {
+				segs.push({ text: u.search, kind: 'search' });
+			}
+
+			if (u.hash) {
+				segs.push({ text: u.hash, kind: 'hash' });
+			}
+
+			return segs;
+		} catch {
+			// Not a valid URL yet — return as plain text but try partial segment detection
+			return partialSegments(raw);
+		}
+	}
+
+	function partialSegments(raw: string): Segment[] {
+		const segs: Segment[] = [];
+		let rest = raw;
+
+		// Protocol
+		const protoMatch = rest.match(/^([a-z][a-z0-9+\-.]*:\/\/)/i);
+		if (protoMatch) {
+			segs.push({ text: protoMatch[1], kind: 'protocol' });
+			rest = rest.slice(protoMatch[1].length);
+		}
+
+		if (!rest) return segs;
+
+		// Split on first / ? #
+		const sep = rest.search(/[/?#]/);
+		if (sep === -1) {
+			segs.push({ text: rest, kind: 'host' });
+			return segs;
+		}
+
+		const hostPart = rest.slice(0, sep);
+		const afterHost = rest.slice(sep);
+
+		// host:port
+		const portMatch = hostPart.match(/^(.*):(\d+)$/);
+		if (portMatch) {
+			if (portMatch[1]) segs.push({ text: portMatch[1], kind: 'host' });
+			segs.push({ text: ':' + portMatch[2], kind: 'port' });
+		} else {
+			if (hostPart) segs.push({ text: hostPart, kind: 'host' });
+		}
+
+		// pathname / search / hash
+		const hashIdx = afterHost.indexOf('#');
+		const searchIdx = afterHost.indexOf('?');
+
+		if (searchIdx !== -1) {
+			const path = afterHost.slice(0, searchIdx);
+			const queryAndHash = afterHost.slice(searchIdx);
+			const hashInQuery = queryAndHash.indexOf('#');
+			if (path) segs.push({ text: path, kind: 'pathname' });
+			if (hashInQuery !== -1) {
+				segs.push({ text: queryAndHash.slice(0, hashInQuery), kind: 'search' });
+				segs.push({ text: queryAndHash.slice(hashInQuery), kind: 'hash' });
+			} else {
+				segs.push({ text: queryAndHash, kind: 'search' });
+			}
+		} else if (hashIdx !== -1) {
+			const path = afterHost.slice(0, hashIdx);
+			if (path) segs.push({ text: path, kind: 'pathname' });
+			segs.push({ text: afterHost.slice(hashIdx), kind: 'hash' });
+		} else {
+			segs.push({ text: afterHost, kind: 'pathname' });
+		}
+
+		return segs;
+	}
+
+	const segments = $derived(parseSegments(value));
+
+	const kindStyle: Record<Segment['kind'], string> = {
+		protocol:  'color: var(--input-hl-muted, var(--foreground))',
+		host:      'color: var(--input-hl-primary, var(--foreground)); font-weight: 500',
+		port:      'color: var(--input-hl-warning, var(--foreground))',
+		pathname:  'color: var(--input-hl-secondary, var(--foreground))',
+		search:    'color: var(--input-hl-info, var(--foreground))',
+		hash:      'color: var(--input-hl-accent, var(--foreground))',
+		plain:     'color: var(--input-hl-muted, var(--foreground))',
+	};
+
+	// ── Keep overlay scroll in sync with the real input ──────────────────
+	function syncScroll() {
+		scrollLeft = inputEl?.scrollLeft ?? 0;
+	}
+
+	// ── Event handlers ────────────────────────────────────────────────────
+	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>
+
+<!--
+  Layout: relative container with two layers:
+  1. Invisible real <input> on top (handles caret, selection, all native editing)
+  2. Coloured overlay <span> beneath it, same font/padding, pointer-events:none
+  The input has `color: transparent` so only the overlay is visible, but the
+  caret (caret-color) remains in its natural foreground colour.
+-->
+<span class="relative flex h-full w-full flex-1 items-center overflow-hidden">
+
+	<!-- Coloured overlay — scrolls with the input -->
+	<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)
+		)}
+	>
+		<!-- Offset to match input scroll position -->
+		<span style="transform: translateX(-{scrollLeft}px)">
+			{#if segments.length}
+				{#each segments as seg (seg)}
+					<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="text"
+		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-url-control.svelte.d.ts

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

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

@@ -0,0 +1,281 @@
+<script lang="ts">
+	import { getPreset } from '../../../context';
+	import { cn, toClassValue } from '../../../utils';
+	import type { PresetModuleName } from '../../../context/preset.svelte';
+	import { untrack } from 'svelte';
+	import { InputBond } from '../bond.svelte';
+	import type { InputDateTimeControlProps, InputDateControlProps } from '../types';
+	import Segment from './segment.svelte';
+	import {
+		parseDateTimeString, parseDateString, buildDateTimeValue, buildDateValue,
+		maxDaysInMonth, mergeParts,
+		type DateTimeParts,
+	} from './shared';
+	import { resolvePreset } from '../../atom';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		date = $bindable<Date | null>(null),
+		mode = 'datetime',
+		withSeconds = false,
+		disabled = false,
+		readonly = false,
+		preset: presetKey = undefined,
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputDateTimeControlProps | InputDateControlProps = $props();
+
+	const isDateOnly = $derived(mode === 'date');
+	const resolvedPresetKey = $derived(presetKey ?? (isDateOnly ? 'input.date' : 'input.datetime'));
+
+	const preset = resolvePreset(getPreset(untrack(() => resolvedPresetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	// ── Parsed state ($derived from value prop) ───────────────────────────
+	const parsedParts = $derived(
+		isDateOnly ? parseDateString(value) : parseDateTimeString(value)
+	);
+
+	// ── Draft parts: source of truth for segment rendering ────────────────
+	// Segments write here immediately (even when the full value can't be built yet).
+	// Synced from parsedParts when value changes externally.
+	let draftParts = $state<DateTimeParts>({});
+
+	$effect(() => {
+		// Sync draft from external value changes (but don't overwrite mid-edit)
+		const p = parsedParts;
+		untrack(() => { draftParts = { ...p }; });
+	});
+
+	const { year, month, day, hours, minutes, seconds } = $derived(draftParts);
+
+	const maxDay = $derived(maxDaysInMonth(month, year));
+
+	// ── Segment refs ───────────────────────────────────────────────────────
+	let segMonth   = $state<{ focus(): void }>();
+	let segDay     = $state<{ focus(): void }>();
+	let segYear    = $state<{ focus(): void }>();
+	let segHours   = $state<{ focus(): void }>();
+	let segMinutes = $state<{ focus(): void }>();
+	let segSeconds = $state<{ focus(): void }>();
+
+	const segments = $derived(
+		isDateOnly
+			? [segMonth, segDay, segYear]
+			: withSeconds
+				? [segMonth, segDay, segYear, segHours, segMinutes, segSeconds]
+				: [segMonth, segDay, segYear, segHours, segMinutes]
+	);
+
+	// ── Emit ───────────────────────────────────────────────────────────────
+	function emit(ev: Event | undefined, overrides: DateTimeParts = {}) {
+		// Always update draft so segments don't revert
+		const merged = mergeParts(draftParts, overrides);
+		draftParts = merged;
+
+		const v = isDateOnly
+			? buildDateValue(merged)
+			: buildDateTimeValue(merged, withSeconds);
+
+		// Only update value/date when a complete, valid string can be built
+		if (!v || v === value) return;
+
+		value = v;
+		date = new Date(isDateOnly ? v + 'T00:00:00' : v);
+		if (isNaN(date.getTime())) date = null;
+		if (bond) bond.state.props.value = value;
+
+		const detail = { value, date };
+		if (ev) onchange?.(ev, detail);
+		else    oninput?.(undefined as unknown as Event, detail);
+	}
+
+	// ── Focus navigation ──────────────────────────────────────────────────
+	function moveFocus(from: number, dir: -1 | 1) {
+		segments[from + dir]?.focus();
+	}
+
+	// ── Paste ──────────────────────────────────────────────────────────────
+	function handlePaste(ev: ClipboardEvent) {
+		ev.preventDefault();
+		const text = ev.clipboardData?.getData('text') ?? '';
+
+		if (isDateOnly) {
+			// Accept YYYY-MM-DD only
+			const m = text.match(/^(\d{4})-(\d{2})-(\d{2})/);
+			if (!m) return;
+			const yr = parseInt(m[1]!, 10);
+			const mo = Math.min(12, Math.max(1, parseInt(m[2]!, 10)));
+			emit(ev, {
+				year:  yr,
+				month: mo,
+				day:   Math.min(maxDaysInMonth(mo, yr), Math.max(1, parseInt(m[3]!, 10))),
+			});
+			return;
+		}
+
+		const m = text.match(/^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/);
+		if (!m) return;
+		const overrides: DateTimeParts = {
+			year:    parseInt(m[1]!, 10),
+			month:   Math.min(12, Math.max(1, parseInt(m[2]!, 10))),
+		};
+		// Clamp day to actual max for the parsed month/year
+		const parsedYear  = overrides.year;
+		const parsedMonth = overrides.month;
+		overrides.day     = Math.min(maxDaysInMonth(parsedMonth, parsedYear), Math.max(1, parseInt(m[3]!, 10)));
+		overrides.hours   = m[4] ? Math.min(23, parseInt(m[4], 10)) : 0;
+		overrides.minutes = m[5] ? Math.min(59, parseInt(m[5], 10)) : 0;
+		if (withSeconds && m[6]) overrides.seconds = Math.min(59, parseInt(m[6], 10));
+		emit(ev, overrides);
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	class={cn(
+		'flex h-full items-center gap-0 px-2 font-mono',
+		disabled && 'cursor-not-allowed opacity-50',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	onpaste={handlePaste}
+	{...restProps}
+>
+	<!-- Date: MM / DD / YYYY -->
+	<Segment
+		bind:this={segMonth}
+		value={month}
+		min={1} max={12} digits={2} placeholder="MM"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.month = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(0, dir)}
+		onrollover={(dir) => {
+			// month rollover advances/retreats year
+			const nextYear = (year ?? new Date().getFullYear()) + dir;
+			const nextMonth = dir === 1 ? 1 : 12;
+			emit(undefined, { year: nextYear, month: nextMonth });
+		}}
+	/>
+	<span class="text-muted-foreground select-none">/</span>
+	<Segment
+		bind:this={segDay}
+		value={day}
+		min={1} max={maxDay} digits={2} placeholder="DD"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.day = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(1, dir)}
+		onrollover={(dir) => {
+			// day rollover advances/retreats month (and year if needed)
+			const curMonth = month ?? 1;
+			const curYear  = year ?? new Date().getFullYear();
+			let nextMonth = curMonth + dir;
+			let nextYear  = curYear;
+			if (nextMonth > 12) { nextMonth = 1; nextYear++; }
+			if (nextMonth < 1)  { nextMonth = 12; nextYear--; }
+			const nextDay = dir === 1 ? 1 : maxDaysInMonth(nextMonth, nextYear);
+			emit(undefined, { year: nextYear, month: nextMonth, day: nextDay });
+		}}
+	/>
+	<span class="text-muted-foreground select-none">/</span>
+	<Segment
+		bind:this={segYear}
+		value={year}
+		min={1} max={9999} digits={4} placeholder="YYYY"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.year = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(2, dir)}
+	/>
+
+	{#if !isDateOnly}
+		<span class="text-muted-foreground mx-1 select-none">·</span>
+	{/if}
+
+	<!-- Time: HH : MM [: SS] (datetime mode only) -->
+	{#if !isDateOnly}
+	<Segment
+		bind:this={segHours}
+		value={hours}
+		min={0} max={23} digits={2} placeholder="HH"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.hours = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(3, dir)}
+		onrollover={(dir) => {
+			// hours rollover advances/retreats day
+			const curDay   = day ?? 1;
+			const curMonth = month ?? 1;
+			const curYear  = year ?? new Date().getFullYear();
+			const curMax   = maxDaysInMonth(curMonth, curYear);
+			let nextDay   = curDay + dir;
+			let nextMonth = curMonth;
+			let nextYear  = curYear;
+			if (nextDay > curMax) { nextDay = 1; nextMonth++; }
+			if (nextDay < 1)      { nextMonth--; nextDay = maxDaysInMonth(nextMonth < 1 ? 12 : nextMonth, curYear); }
+			if (nextMonth > 12)   { nextMonth = 1; nextYear++; }
+			if (nextMonth < 1)    { nextMonth = 12; nextYear--; }
+			emit(undefined, { year: nextYear, month: nextMonth, day: nextDay, hours: dir === 1 ? 0 : 23 });
+		}}
+	/>
+	<span class="text-muted-foreground select-none">:</span>
+	<Segment
+		bind:this={segMinutes}
+		value={minutes}
+		min={0} max={59} digits={2} placeholder="MM"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.minutes = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(4, dir)}
+		onrollover={(dir) => {
+			// minutes rollover advances/retreats hours
+			const nextHH = dir === 1
+				? (hours !== undefined && hours >= 23 ? 0 : (hours ?? 0) + 1)
+				: (hours !== undefined && hours <= 0  ? 23 : (hours ?? 23) - 1);
+			const override: DateTimeParts = { minutes: dir === 1 ? 0 : 59, hours: nextHH };
+			// if hours also wrap, advance day
+			if ((dir === 1 && nextHH === 0) || (dir === -1 && nextHH === 23)) {
+				const curDay   = day ?? 1;
+				const curMonth = month ?? 1;
+				const curYear  = year ?? new Date().getFullYear();
+				const curMax   = maxDaysInMonth(curMonth, curYear);
+				let nextDay   = curDay + dir;
+				let nextMonth = curMonth;
+				let nextYear  = curYear;
+				if (nextDay > curMax) { nextDay = 1; nextMonth++; }
+				if (nextDay < 1)      { nextMonth--; nextDay = maxDaysInMonth(nextMonth < 1 ? 12 : nextMonth, curYear); }
+				if (nextMonth > 12)   { nextMonth = 1; nextYear++; }
+				if (nextMonth < 1)    { nextMonth = 12; nextYear--; }
+				override.day = nextDay; override.month = nextMonth; override.year = nextYear;
+			}
+			emit(undefined, override);
+		}}
+	/>
+	{#if withSeconds}
+		<span class="text-muted-foreground select-none">:</span>
+		<Segment
+			bind:this={segSeconds}
+			value={seconds}
+			min={0} max={59} digits={2} placeholder="SS"
+			{disabled} {readonly}
+			onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.seconds = v; emit(undefined, o); }}
+			onfocusmove={(dir) => moveFocus(5, dir)}
+			onrollover={(dir) => {
+				// seconds rollover advances/retreats minutes (batched)
+				const nextMM = dir === 1
+					? (minutes !== undefined && minutes >= 59 ? 0 : (minutes ?? 0) + 1)
+					: (minutes !== undefined && minutes <= 0  ? 59 : (minutes ?? 59) - 1);
+				const override: DateTimeParts = { seconds: dir === 1 ? 0 : 59, minutes: nextMM };
+				// if minutes also wrap, advance hours
+				if ((dir === 1 && nextMM === 0) || (dir === -1 && nextMM === 59)) {
+					const nextHH = dir === 1
+						? (hours !== undefined && hours >= 23 ? 0 : (hours ?? 0) + 1)
+						: (hours !== undefined && hours <= 0  ? 23 : (hours ?? 23) - 1);
+					override.hours = nextHH;
+				}
+				emit(undefined, override);
+			}}
+		/>
+	{/if}
+	{/if}
+</span>

package/dist/components/input/time/datetime-control.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { InputDateTimeControlProps, InputDateControlProps } from '../types';
+type $$ComponentProps = InputDateTimeControlProps | InputDateControlProps;
+declare const DatetimeControl: import("svelte").Component<$$ComponentProps, {}, "value" | "date">;
+type DatetimeControl = ReturnType<typeof DatetimeControl>;
+export default DatetimeControl;

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

@@ -0,0 +1,6 @@
+export { default as Segment } from './segment.svelte';
+export { default as TimeControl } from './time-control.svelte';
+export { default as DateTimeControl } from './datetime-control.svelte';
+export { default as DateControl } from './datetime-control.svelte';
+export * from './types';
+export * from './shared';

package/dist/components/input/time/index.js

@@ -0,0 +1,6 @@
+export { default as Segment } from './segment.svelte';
+export { default as TimeControl } from './time-control.svelte';
+export { default as DateTimeControl } from './datetime-control.svelte';
+export { default as DateControl } from './datetime-control.svelte';
+export * from './types';
+export * from './shared';