compote-ui 0.71.6 → 0.72.0

package/dist/components/date-field/date-field.svelte

@@ -4,7 +4,7 @@
 	import { Field } from '@ark-ui/svelte/field';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
 	import { CalendarDateTime, getLocalTimeZone } from '@internationalized/date';
-	import { toDateValue, fromDateValue, dateValueShape } from '../../utils/date';
+	import { toDateValue, fromDateValue, dateValueShape, dateValueToString } from '../../utils/date';
 	import type { DateValueShape } from '../../utils/date';
 	import { PhCalendarBlank } from '../../icons';
 	import type { DateFieldProps } from './types';
@@ -97,6 +97,9 @@
 		required,
 		invalid,
 		timeZone: tz,
+		// Submit a canonical ISO string rather than zag's locale-formatted display
+		// string. Only feeds the hidden input's value; segments are formatted separately.
+		format: (date) => dateValueToString(date),
 		onValueChange(details) {
 			datePicker().setValue(details.value);
 		}

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { DateInput } from '@ark-ui/svelte/date-input';
 	import { Field, useFieldContext } from '@ark-ui/svelte/field';
-	import { toDateValue, fromDateValue, dateValueShape } from '../../utils/date';
+	import { toDateValue, fromDateValue, dateValueShape, dateValueToString } from '../../utils/date';
 	import { getLocalTimeZone } from '@internationalized/date';
-	import type { DateValueShape } from '../../utils/date';
+	import type { DateValue, DateValueShape } from '../../utils/date';
 	import type { DateInputProps } from './types';
 
 	let {
@@ -19,6 +19,9 @@
 		readOnly,
 		disabled,
 		hideTimeZone = true,
+		// Submit a canonical ISO string rather than zag's locale-formatted display
+		// string. Only feeds the hidden input's value; segments are formatted separately.
+		format = (date: DateValue) => dateValueToString(date),
 		...restProps
 	}: DateInputProps = $props();
 
@@ -50,6 +53,7 @@
 	{...restProps}
 	{granularity}
 	{hourCycle}
+	{format}
 	timeZone={tz}
 	{hideTimeZone}
 	invalid={isInvalid}

package/dist/components/date-range-field/date-range-field.svelte

@@ -3,15 +3,22 @@
 	import { DateInput, useDateInput } from '@ark-ui/svelte/date-input';
 	import { Field } from '@ark-ui/svelte/field';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
+	import { getLocalTimeZone } from '@internationalized/date';
+	import { toDateValue, fromDateValue, dateValueShape, dateValueToString } from '../../utils/date';
+	import type { DateValueShape } from '../../utils/date';
 	import { PhCalendarBlank } from '../../icons';
 	import type { DateRangeFieldProps } from './types';
 	import DatePickerCalendar from '../date-picker/date-picker-calendar.svelte';
 
 	let {
-		value = $bindable([]),
-		defaultValue,
+		start = $bindable(),
+		end = $bindable(),
+		defaultStart,
+		defaultEnd,
 		label,
 		name,
+		startName,
+		endName,
 		min,
 		max,
 		disabled,
@@ -19,6 +26,7 @@
 		required,
 		invalid,
 		timeZone,
+		granularity,
 		hourCycle,
 		onValueChange
 	}: DateRangeFieldProps = $props();
@@ -26,21 +34,64 @@
 	const locale = useLocaleContext();
 	const id = $props.id();
 
+	// Default the display zone to the user's local zone. Without this Ark/zag
+	// formats segments in UTC, so a UTC value would show shifted hours.
+	const tz = $derived(timeZone ?? getLocalTimeZone());
+
+	// Remember the shape each end was bound as, so changes are emitted back in the
+	// same shape. Tracked per end so a half-filled range still round-trips; when a
+	// side starts null, default to string output since that is the common case
+	// binding to database columns.
+	let startShape: DateValueShape = 'string';
+	let endShape: DateValueShape = 'string';
+
+	const arkStart = $derived.by(() => {
+		const s = dateValueShape(start) ?? dateValueShape(defaultStart);
+		if (s) startShape = s;
+		return toDateValue(start ?? defaultStart, tz);
+	});
+
+	const arkEnd = $derived.by(() => {
+		const s = dateValueShape(end) ?? dateValueShape(defaultEnd);
+		if (s) endShape = s;
+		return toDateValue(end ?? defaultEnd, tz);
+	});
+
+	// zag reads the range positionally, so an end without a start cannot be
+	// represented — it would silently become the start. Drop it instead.
+	const arkValue = $derived(arkStart ? (arkEnd ? [arkStart, arkEnd] : [arkStart]) : []);
+
+	// Submit from `arkValue`, not from arkStart/arkEnd, so the hidden inputs can
+	// never disagree with what the picker actually holds.
+	const submittedStart = $derived(arkValue[0] ? dateValueToString(arkValue[0]) : '');
+	const submittedEnd = $derived(arkValue[1] ? dateValueToString(arkValue[1]) : '');
+
+	const resolvedStartName = $derived(startName ?? (name ? `${name}Start` : undefined));
+	const resolvedEndName = $derived(endName ?? (name ? `${name}End` : undefined));
+
 	const datePicker = useDatePicker(() => ({
 		id,
 		locale: locale().locale,
 		selectionMode: 'range',
-		value,
-		defaultValue,
+		value: arkValue,
 		min,
 		max,
 		disabled,
 		readOnly,
 		required,
 		invalid,
-		timeZone,
+		timeZone: tz,
 		onValueChange(details) {
-			value = details.value;
+			const [nextStart = null, nextEnd = null] = details.value;
+			// Guard: skip if Ark UI echoes back the same range (prevents reactive loop)
+			if (
+				nextStart?.toString() === arkStart?.toString() &&
+				nextEnd?.toString() === arkEnd?.toString()
+			) {
+				return;
+			}
+			start = fromDateValue(nextStart, startShape, tz);
+			end = fromDateValue(nextEnd, endShape, tz);
 			onValueChange?.(details);
 		}
 	}));
@@ -49,6 +100,7 @@
 		id,
 		locale: locale().locale,
 		selectionMode: 'range',
+		granularity: granularity ?? 'day',
 		hourCycle,
 		value: datePicker().value,
 		min,
@@ -57,7 +109,7 @@
 		readOnly,
 		required,
 		invalid,
-		timeZone,
+		timeZone: tz,
 		onValueChange(details) {
 			datePicker().setValue(details.value);
 		}
@@ -104,5 +156,13 @@
 			<DatePickerCalendar />
 		</DatePicker.RootProvider>
 	</DateInput.Control>
-	<DateInput.HiddenInput {name} />
+	<!-- Ark's HiddenInput would submit locale-formatted strings under names that
+	     flip between `name` and `name[0]`/`name[1]` depending on how many dates are
+	     selected. Plain inputs give stable names and canonical ISO values. -->
+	{#if resolvedStartName}
+		<input type="hidden" name={resolvedStartName} {disabled} value={submittedStart} />
+	{/if}
+	{#if resolvedEndName}
+		<input type="hidden" name={resolvedEndName} {disabled} value={submittedEnd} />
+	{/if}
 </DateInput.RootProvider>

package/dist/components/date-range-field/date-range-field.svelte.d.ts

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

package/dist/components/date-range-field/types.d.ts

@@ -1,10 +1,29 @@
 import type { DatePickerRootBaseProps } from '@ark-ui/svelte/date-picker';
-import type { DateValue } from '@ark-ui/svelte/date-picker';
+import type { DateValue, DateInputValue } from '../../utils/date';
+export type { DateValue, DateInputValue };
 export interface DateRangeFieldProps extends Omit<DatePickerRootBaseProps, 'value' | 'defaultValue' | 'selectionMode'> {
-    value?: DateValue[];
-    defaultValue?: DateValue[];
+    /**
+     * Bound start of the range. Accepts a `DateValue`, an ISO/DB string, or a
+     * native `Date` — no manual conversion needed. Emitted back in the same shape
+     * it was provided (string in → string out, `Date` in → `Date` out); when it
+     * starts `null`, changes are emitted as a string.
+     *
+     * Bind strings when feeding SvelteKit remote functions: `query`/`command`
+     * arguments are serialized with devalue, which handles strings and `Date` but
+     * not `@internationalized/date` class instances.
+     */
+    start?: DateInputValue;
+    /** Bound end of the range. Ignored while {@link start} is empty. */
+    end?: DateInputValue;
+    defaultStart?: DateInputValue;
+    defaultEnd?: DateInputValue;
     label?: string;
+    /** Shorthand: names the hidden inputs `${name}Start` and `${name}End`. */
     name?: string;
+    /** Names the start hidden input outright. Overrides {@link name}. */
+    startName?: string;
+    /** Names the end hidden input outright. Overrides {@link name}. */
+    endName?: string;
     granularity?: 'day' | 'hour' | 'minute' | 'second';
     hourCycle?: 12 | 24;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.71.6",
+	"version": "0.72.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -11,6 +11,8 @@
 		"prepack": "svelte-kit sync && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest run",
+		"test:watch": "vitest",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"patch": "npm version patch && npm publish",
@@ -81,7 +83,8 @@
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.68.0",
 		"unplugin-icons": "^23.0.1",
-		"vite": "^8.2.2"
+		"vite": "^8.2.2",
+		"vitest": "^5"
 	},
 	"keywords": [
 		"svelte",