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

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

@@ -0,0 +1,29 @@
+/**
+ * Pure helpers for time-related input controls.
+ * No Svelte reactivity here — import freely from .svelte files and plain .ts.
+ */
+export type { SegmentProps, TimeParts, DateTimeParts, LooseParts } from './types';
+import type { TimeParts, DateTimeParts } from './types';
+export declare function mergeParts<T extends object>(base: T, overrides: T): T;
+/** Parse a HH:MM[:SS] string (always 24 h internally) into TimeParts. */
+export declare function parseTimeString(str: string, date?: Date, hourFormat?: 12 | 24): TimeParts;
+/** Build a HH:MM[:SS] string from TimeParts. Returns '' if incomplete. */
+export declare function buildTimeValue(parts: TimeParts, withSeconds: boolean): string;
+/** Convert 1–12 display hours to 0–23 internal, given current period. */
+export declare function displayToInternal(displayH: number, period: 'AM' | 'PM'): number;
+/** Convert 0–23 internal hours to 1–12 display. */
+export declare function internalToDisplay(h: number): number;
+/** Seconds since midnight — used for min/max clamping. */
+export declare function timeToSeconds(h?: number, m?: number, s?: number): number;
+/** Clamp TimeParts to optional min/max strings. Returns clamped parts or original if in range. */
+export declare function clampTimeParts(parts: TimeParts, min?: string, max?: string): TimeParts;
+/** Parse a YYYY-MM-DD string into DateTimeParts (date-only, no time fields). */
+export declare function parseDateString(str: string): DateTimeParts;
+/** Build a YYYY-MM-DD string from DateTimeParts. Returns '' if incomplete. */
+export declare function buildDateValue(parts: DateTimeParts): string;
+/** Parse a YYYY-MM-DDTHH:MM[:SS] string into DateTimeParts. */
+export declare function parseDateTimeString(str: string): DateTimeParts;
+/** Build a YYYY-MM-DDTHH:MM[:SS] string from DateTimeParts. Returns '' if incomplete. */
+export declare function buildDateTimeValue(parts: DateTimeParts, withSeconds: boolean): string;
+/** Max days in a given month/year (falls back to year 2000 if year unknown). */
+export declare function maxDaysInMonth(month?: number, year?: number): number;

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

@@ -0,0 +1,150 @@
+// ── Merge utility ──────────────────────────────────────────────────────────
+export function mergeParts(base, overrides) {
+    const clean = Object.fromEntries(Object.entries(overrides).filter(([, v]) => v !== undefined));
+    return { ...base, ...clean };
+}
+// ── Time helpers ───────────────────────────────────────────────────────────
+/** Parse a HH:MM[:SS] string (always 24 h internally) into TimeParts. */
+export function parseTimeString(str, date, hourFormat = 24) {
+    if (!str) {
+        if (date) {
+            const h = date.getHours();
+            const result = {
+                hh: h,
+                mm: date.getMinutes(),
+                ss: date.getSeconds()
+            };
+            if (hourFormat === 12)
+                result.period = h >= 12 ? 'PM' : 'AM';
+            return result;
+        }
+        return {};
+    }
+    const parts = str.split(':');
+    const result = {};
+    if (parts[0] !== undefined)
+        result.hh = parseInt(parts[0], 10);
+    if (parts[1] !== undefined)
+        result.mm = parseInt(parts[1], 10);
+    if (parts[2] !== undefined)
+        result.ss = parseInt(parts[2], 10);
+    if (hourFormat === 12 && result.hh !== undefined)
+        result.period = result.hh >= 12 ? 'PM' : 'AM';
+    return result;
+}
+/** Build a HH:MM[:SS] string from TimeParts. Returns '' if incomplete. */
+export function buildTimeValue(parts, withSeconds) {
+    const { hh, mm, ss } = parts;
+    if (hh === undefined || mm === undefined)
+        return '';
+    const h = String(hh).padStart(2, '0');
+    const m = String(mm).padStart(2, '0');
+    if (withSeconds)
+        return `${h}:${m}:${String(ss ?? 0).padStart(2, '0')}`;
+    return `${h}:${m}`;
+}
+/** Convert 1–12 display hours to 0–23 internal, given current period. */
+export function displayToInternal(displayH, period) {
+    if (period === 'AM')
+        return displayH === 12 ? 0 : displayH;
+    return displayH === 12 ? 12 : displayH + 12;
+}
+/** Convert 0–23 internal hours to 1–12 display. */
+export function internalToDisplay(h) {
+    return h % 12 === 0 ? 12 : h % 12;
+}
+/** Seconds since midnight — used for min/max clamping. */
+export function timeToSeconds(h = 0, m = 0, s = 0) {
+    return h * 3600 + m * 60 + s;
+}
+/** Clamp TimeParts to optional min/max strings. Returns clamped parts or original if in range. */
+export function clampTimeParts(parts, min, max) {
+    const { hh, mm, ss } = parts;
+    if (hh === undefined || mm === undefined)
+        return parts;
+    const secs = timeToSeconds(hh, mm, ss);
+    if (min) {
+        const mp = parseTimeString(min);
+        if (mp.hh !== undefined && secs < timeToSeconds(mp.hh, mp.mm, mp.ss)) {
+            const r = { hh: mp.hh };
+            if (mp.mm !== undefined)
+                r.mm = mp.mm;
+            if (mp.ss !== undefined)
+                r.ss = mp.ss;
+            if (parts.period)
+                r.period = parts.period;
+            return r;
+        }
+    }
+    if (max) {
+        const mp = parseTimeString(max);
+        if (mp.hh !== undefined && secs > timeToSeconds(mp.hh, mp.mm, mp.ss)) {
+            const r = { hh: mp.hh };
+            if (mp.mm !== undefined)
+                r.mm = mp.mm;
+            if (mp.ss !== undefined)
+                r.ss = mp.ss;
+            if (parts.period)
+                r.period = parts.period;
+            return r;
+        }
+    }
+    return parts;
+}
+// ── DateTime helpers ───────────────────────────────────────────────────────
+/** Parse a YYYY-MM-DD string into DateTimeParts (date-only, no time fields). */
+export function parseDateString(str) {
+    if (!str)
+        return {};
+    const m = str.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!m)
+        return {};
+    return {
+        year: parseInt(m[1], 10),
+        month: parseInt(m[2], 10),
+        day: parseInt(m[3], 10)
+    };
+}
+/** Build a YYYY-MM-DD string from DateTimeParts. Returns '' if incomplete. */
+export function buildDateValue(parts) {
+    const { year, month, day } = parts;
+    if (year === undefined || month === undefined || day === undefined)
+        return '';
+    const pad = (n, len = 2) => String(n).padStart(len, '0');
+    return `${pad(year, 4)}-${pad(month)}-${pad(day)}`;
+}
+/** Parse a YYYY-MM-DDTHH:MM[:SS] string into DateTimeParts. */
+export function parseDateTimeString(str) {
+    if (!str)
+        return {};
+    const m = str.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?/);
+    if (!m)
+        return {};
+    return {
+        year: parseInt(m[1], 10),
+        month: parseInt(m[2], 10),
+        day: parseInt(m[3], 10),
+        hours: parseInt(m[4], 10),
+        minutes: parseInt(m[5], 10),
+        ...(m[6] ? { seconds: parseInt(m[6], 10) } : {})
+    };
+}
+/** Build a YYYY-MM-DDTHH:MM[:SS] string from DateTimeParts. Returns '' if incomplete. */
+export function buildDateTimeValue(parts, withSeconds) {
+    const { year, month, day, hours, minutes, seconds } = parts;
+    if (year === undefined ||
+        month === undefined ||
+        day === undefined ||
+        hours === undefined ||
+        minutes === undefined)
+        return '';
+    const pad = (n, len = 2) => String(n).padStart(len, '0');
+    const base = `${pad(year, 4)}-${pad(month)}-${pad(day)}T${pad(hours)}:${pad(minutes)}`;
+    return withSeconds ? `${base}:${pad(seconds ?? 0)}` : base;
+}
+/** Max days in a given month/year (falls back to year 2000 if year unknown). */
+export function maxDaysInMonth(month, year) {
+    if (!month)
+        return 31;
+    return new Date(year ?? 2000, month, 0).getDate();
+}

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

@@ -0,0 +1,237 @@
+<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 { InputTimeControlProps, InputNumber24HourControlProps, InputNumber12HourControlProps } from '../types';
+	import Segment from './segment.svelte';
+	import {
+		parseTimeString, buildTimeValue, clampTimeParts, mergeParts,
+		displayToInternal, internalToDisplay,
+		type TimeParts,
+	} from './shared';
+	import { resolvePreset } from '../../atom';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		date = $bindable<Date | undefined>(undefined),
+		hourFormat = 24,
+		withSeconds = false,
+		min = undefined,
+		max = undefined,
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.time',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputTimeControlProps & (InputNumber24HourControlProps | InputNumber12HourControlProps) = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	// ── Parsed state ($derived — external value always wins) ──────────────
+	const parts = $derived(parseTimeString(value, untrack(() => date ?? undefined), hourFormat));
+	const { hh, mm, ss, period: p } = $derived(parts);
+
+	const displayHours = $derived(
+		hh === undefined || hourFormat === 24 ? hh : internalToDisplay(hh)
+	);
+
+	// ── Segment refs ───────────────────────────────────────────────────────
+	let segHours   = $state<{ focus(): void }>();
+	let segMinutes = $state<{ focus(): void }>();
+	let segSeconds = $state<{ focus(): void }>();
+
+	// ── Emit ───────────────────────────────────────────────────────────────
+
+	function emit(ev: Event | undefined, override: TimeParts = {}) {
+		const merged: TimeParts = mergeParts(parts, override);
+		const clamped = clampTimeParts(merged, min, max);
+		const raw = buildTimeValue(clamped, withSeconds);
+		if (!raw) return;
+
+		// Sync date if bound
+		if (date && clamped.hh !== undefined && clamped.mm !== undefined) {
+			const nd = new Date(date);
+			nd.setHours(clamped.hh, clamped.mm, withSeconds ? (clamped.ss ?? 0) : 0, 0);
+			if (nd.getTime() !== date.getTime()) date = nd;
+		}
+
+		if (raw === value) return;
+
+		value = raw;
+		if (bond) bond.state.props.value = value;
+
+		const detail = { value: raw };
+		if (ev) onchange?.(ev, detail);
+		else    oninput?.(undefined as unknown as Event, detail);
+	}
+
+	// ── Hours: convert display→internal before emitting ───────────────────
+	function handleHoursChange(displayH: number | undefined) {
+		if (displayH === undefined) { emit(undefined); return; }
+		const internal = hourFormat === 12
+			? displayToInternal(displayH, p ?? 'AM')
+			: displayH;
+		emit(undefined, { hh: internal });
+	}
+
+	// ── Period toggle ──────────────────────────────────────────────────────
+	function togglePeriod() {
+		if (disabled || readonly || hh === undefined) return;
+		const newPeriod = p === 'AM' ? 'PM' : 'AM';
+		const newHH = displayToInternal(displayHours ?? 12, newPeriod);
+		emit(undefined, { hh: newHH, period: newPeriod });
+	}
+
+	function handlePeriodKey(ev: KeyboardEvent) {
+		const { key } = ev;
+		if (key.toLowerCase() === 'a') {
+			const newHH = displayToInternal(displayHours ?? 12, 'AM');
+			emit(undefined, { hh: newHH, period: 'AM' });
+		} else if (key.toLowerCase() === 'p') {
+			const newHH = displayToInternal(displayHours ?? 12, 'PM');
+			emit(undefined, { hh: newHH, period: 'PM' });
+		} else if (['ArrowUp', 'ArrowDown', ' ', 'Enter'].includes(key)) {
+			ev.preventDefault();
+			togglePeriod();
+		} else if (key === 'ArrowLeft') {
+			ev.preventDefault();
+			(withSeconds ? segSeconds : segMinutes)?.focus();
+		}
+	}
+
+	// ── Paste ──────────────────────────────────────────────────────────────
+	function handlePaste(ev: ClipboardEvent) {
+		ev.preventDefault();
+		const text = ev.clipboardData?.getData('text') ?? '';
+
+		const m12 = text.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)/i);
+		const m24 = text.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?/);
+
+		const override: TimeParts = {};
+
+		if (m12) {
+			let h = parseInt(m12[1]!, 10);
+			const isPM = m12[4]!.toUpperCase() === 'PM';
+			if (isPM && h !== 12) h += 12;
+			if (!isPM && h === 12) h = 0;
+			override.hh = Math.min(23, h);
+			override.mm = Math.min(59, parseInt(m12[2]!, 10));
+			if (withSeconds && m12[3]) override.ss = Math.min(59, parseInt(m12[3], 10));
+			override.period = isPM ? 'PM' : 'AM';
+		} else if (m24) {
+			const h = Math.min(23, parseInt(m24[1]!, 10));
+			override.hh = h;
+			override.mm = Math.min(59, parseInt(m24[2]!, 10));
+			if (withSeconds && m24[3]) override.ss = Math.min(59, parseInt(m24[3], 10));
+			if (hourFormat === 12) override.period = h >= 12 ? 'PM' : 'AM';
+		}
+
+		emit(ev, override);
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	class={cn(
+		'inline-flex h-full flex-1 items-center gap-0 px-2 font-mono',
+		disabled && 'cursor-not-allowed opacity-50',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	onpaste={handlePaste}
+	{...restProps}
+>
+	<Segment
+		bind:this={segHours}
+		value={displayHours}
+		min={hourFormat === 12 ? 1 : 0}
+		max={hourFormat === 12 ? 12 : 23}
+		digits={2}
+		placeholder="HH"
+		{disabled} {readonly}
+		onchange={handleHoursChange}
+		onfocusmove={(dir) => dir === 1 ? segMinutes?.focus() : undefined}
+	/>
+
+	<span class="text-muted-foreground select-none">:</span>
+
+	<Segment
+		bind:this={segMinutes}
+		value={mm}
+		min={0} max={59} digits={2} placeholder="MM"
+		{disabled} {readonly}
+		onchange={(v) => { const o: TimeParts = {}; if (v !== undefined) o.mm = v; emit(undefined, o); }}
+		onfocusmove={(dir) => {
+			if (dir === 1 && withSeconds) segSeconds?.focus();
+			else if (dir === 1 && hourFormat === 12) { /* AM/PM next — handled by tab */ }
+			else if (dir === -1) segHours?.focus();
+		}}
+		onrollover={(dir) => {
+			if (displayHours === undefined) return;
+			const maxH = hourFormat === 12 ? 12 : 23;
+			const minH = hourFormat === 12 ? 1 : 0;
+			const nextDisplayH = dir === 1
+				? (displayHours >= maxH ? minH : displayHours + 1)
+				: (displayHours <= minH ? maxH : displayHours - 1);
+			handleHoursChange(nextDisplayH);
+		}}
+	/>
+
+	{#if withSeconds}
+		<span class="text-muted-foreground select-none">:</span>
+		<Segment
+			bind:this={segSeconds}
+			value={ss}
+			min={0} max={59} digits={2} placeholder="SS"
+			{disabled} {readonly}
+			onchange={(v) => { const o: TimeParts = {}; if (v !== undefined) o.ss = v; emit(undefined, o); }}
+			onfocusmove={(dir) => dir === -1 ? segMinutes?.focus() : undefined}
+			onrollover={(dir) => {
+				const nextMM = dir === 1
+					? (mm !== undefined && mm >= 59 ? 0 : (mm ?? 0) + 1)
+					: (mm !== undefined && mm <= 0 ? 59 : (mm ?? 59) - 1);
+				const wrapsHour = (dir === 1 && nextMM === 0) || (dir === -1 && nextMM === 59);
+				const override: TimeParts = { mm: nextMM };
+				if (wrapsHour && displayHours !== undefined) {
+					const maxH = hourFormat === 12 ? 12 : 23;
+					const minH = hourFormat === 12 ? 1 : 0;
+					const nextDisplayH = dir === 1
+						? (displayHours >= maxH ? minH : displayHours + 1)
+						: (displayHours <= minH ? maxH : displayHours - 1);
+					override.hh = hourFormat === 12
+						? displayToInternal(nextDisplayH, p ?? 'AM')
+						: nextDisplayH;
+				}
+				emit(undefined, override);
+			}}
+		/>
+	{/if}
+
+	{#if hourFormat === 12}
+		<span class="ml-1 select-none"> </span>
+		<span
+			role="spinbutton"
+			tabindex={disabled ? -1 : 0}
+			aria-label="AM/PM"
+			aria-valuenow={p === 'AM' ? 0 : 1}
+			aria-valuemin={0}
+			aria-valuemax={1}
+			aria-valuetext={p}
+			class={cn(
+				'ml-auto inline-flex min-w-[3ch] cursor-pointer items-center justify-center px-0.5 font-sans text-sm font-medium',
+				'focus:bg-foreground/10 focus:outline-none',
+				disabled && 'cursor-not-allowed opacity-50'
+			)}
+			onclick={togglePeriod}
+			onkeydown={handlePeriodKey}
+		>
+			{p ?? '--'}
+		</span>
+	{/if}
+</span>

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

@@ -0,0 +1,3 @@
+declare const TimeControl: import("svelte").Component<any, {}, "value" | "date">;
+type TimeControl = ReturnType<typeof TimeControl>;
+export default TimeControl;

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

@@ -0,0 +1,34 @@
+/**
+ * Types for the input/time sub-module.
+ */
+export interface SegmentProps {
+    value?: number | undefined;
+    min: number;
+    max: number;
+    digits?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string;
+    onchange?: (value: number | undefined) => void;
+    onfocusmove?: (dir: -1 | 1) => void;
+    /** Fired when ArrowUp/Down wraps past min/max */
+    onrollover?: (dir: 1 | -1) => void;
+}
+export interface TimeParts {
+    hh?: number;
+    mm?: number;
+    ss?: number;
+    period?: 'AM' | 'PM';
+}
+export interface DateTimeParts {
+    year?: number;
+    month?: number;
+    day?: number;
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+}
+export type LooseParts<T> = {
+    [K in keyof T]: number | undefined;
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Types for the input/time sub-module.
+ */
+export {};