compote-ui 0.63.1 → 0.63.2

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

@@ -3,7 +3,9 @@
 	import { DateInput, useDateInput } from '@ark-ui/svelte/date-input';
 	import { Field } from '@ark-ui/svelte/field';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
-	import { CalendarDateTime } from '@internationalized/date';
+	import { CalendarDateTime, getLocalTimeZone } from '@internationalized/date';
+	import { toDateValue, fromDateValue, dateValueShape } from '../../utils/date';
+	import type { DateValueShape } from '../../utils/date';
 	import { PhCalendarBlank } from '../../icons';
 	import type { DateFieldProps } from './types';
 	import DatePickerCalendar from '../date-picker/date-picker-calendar.svelte';
@@ -20,54 +22,71 @@
 		required,
 		invalid,
 		timeZone,
+		locale: localeProp,
 		granularity,
 		hourCycle,
 		onValueChange
 	}: DateFieldProps = $props();
 
-	const locale = useLocaleContext();
+	const localeContext = useLocaleContext();
+	const resolvedLocale = $derived(localeProp ?? localeContext().locale);
 	const id = $props.id();
 	const showTimeInput = $derived(!!granularity && granularity !== 'day');
 	const resolvedHourCycle = $derived(
 		hourCycle ??
-			(new Intl.DateTimeFormat(locale().locale, { hour: 'numeric' })
+			(new Intl.DateTimeFormat(resolvedLocale, { hour: 'numeric' })
 				.formatToParts(new Date(2024, 0, 1, 14))
 				.some((p) => p.type === 'dayPeriod')
 				? 12
 				: 24)
 	);
 
+	// 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 the consumer bound the value as, so changes are emitted
+	// back in the same shape (string in → string out, Date in → Date out).
+	// When the bound value starts null, default to string output.
+	let shape: DateValueShape = 'string';
+
+	const arkValue = $derived.by(() => {
+		const s = dateValueShape(value) ?? dateValueShape(defaultValue);
+		if (s) shape = s;
+		return toDateValue(value, tz);
+	});
+	const arkDefault = $derived(toDateValue(defaultValue, tz));
+
 	const datePicker = useDatePicker(() => ({
 		id,
-		locale: locale().locale,
+		locale: resolvedLocale,
 		closeOnSelect: !showTimeInput,
-		value: value ? [value] : [],
-		defaultValue: defaultValue ? [defaultValue] : undefined,
+		value: arkValue ? [arkValue] : [],
+		defaultValue: arkDefault ? [arkDefault] : undefined,
 		min,
 		max,
 		disabled,
 		readOnly,
 		required,
 		invalid,
-		timeZone,
+		timeZone: tz,
 		onValueChange(details) {
 			const picked = details.value[0] ?? null;
+			let next = picked;
 			if (picked && showTimeInput && !('hour' in picked)) {
-				const h = value && 'hour' in value ? (value as CalendarDateTime).hour : 0;
-				const m = value && 'hour' in value ? (value as CalendarDateTime).minute : 0;
-				const merged = new CalendarDateTime(picked.year, picked.month, picked.day, h, m);
-				value = merged;
-				datePicker().setValue([merged]);
-			} else {
-				value = picked;
+				const h = arkValue && 'hour' in arkValue ? (arkValue as CalendarDateTime).hour : 0;
+				const m = arkValue && 'hour' in arkValue ? (arkValue as CalendarDateTime).minute : 0;
+				next = new CalendarDateTime(picked.year, picked.month, picked.day, h, m);
+				datePicker().setValue(next ? [next] : []);
 			}
+			value = fromDateValue(next, shape, tz);
 			onValueChange?.(details);
 		}
 	}));
 
 	const dateInput = useDateInput(() => ({
 		id,
-		locale: locale().locale,
+		locale: resolvedLocale,
 		granularity: granularity ?? 'day',
 		hourCycle,
 		value: datePicker().value,
@@ -77,7 +96,7 @@
 		readOnly,
 		required,
 		invalid,
-		timeZone,
+		timeZone: tz,
 		onValueChange(details) {
 			datePicker().setValue(details.value);
 		}

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

@@ -1,8 +1,19 @@
 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 };
 export interface DateFieldProps extends Omit<DatePickerRootBaseProps, 'value' | 'defaultValue'> {
-    value?: DateValue | null;
-    defaultValue?: DateValue;
+    /**
+     * Bound value. Accepts a `DateValue`, an ISO/DB string, or a native `Date` —
+     * no manual conversion needed. The value is emitted back in the same shape it
+     * was provided (string in → string out, `Date` in → `Date` out). When the
+     * value starts `null`, changes are emitted as a string by default.
+     *
+     * For UTC values from a database, bind the ISO string with its `Z`/offset and
+     * leave `timeZone` unset: the field displays the user's local zone and the
+     * emitted string is UTC.
+     */
+    value?: DateInputValue;
+    defaultValue?: DateInputValue;
     label?: string;
     name?: string;
     granularity?: 'day' | 'hour' | 'minute' | 'second';

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

@@ -2,7 +2,9 @@
 	import { DatePicker } from '@ark-ui/svelte/date-picker';
 	import { Field } from '@ark-ui/svelte/field';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
-	import { CalendarDateTime } from '@internationalized/date';
+	import { CalendarDateTime, getLocalTimeZone } from '@internationalized/date';
+	import { toDateValue, fromDateValue, dateValueShape } from '../../utils/date';
+	import type { DateValueShape } from '../../utils/date';
 	import { PhCalendarBlank, PhX } from '../../icons';
 	import type { DatePickerProps } from './types';
 	import DatePickerCalendar from './date-picker-calendar.svelte';
@@ -15,37 +17,57 @@
 		name,
 		granularity,
 		hourCycle,
+		locale: localeProp,
+		timeZone,
 		onValueChange,
 		...restProps
 	}: DatePickerProps = $props();
 
-	const locale = useLocaleContext();
+	const localeContext = useLocaleContext();
+	const resolvedLocale = $derived(localeProp ?? localeContext().locale);
 	const showTimeInput = $derived(!!granularity && granularity !== 'day');
 	const resolvedHourCycle = $derived(
 		hourCycle ??
-			(new Intl.DateTimeFormat(locale().locale, { hour: 'numeric' })
+			(new Intl.DateTimeFormat(resolvedLocale, { hour: 'numeric' })
 				.formatToParts(new Date(2024, 0, 1, 14))
 				.some((p) => p.type === 'dayPeriod')
 				? 12
 				: 24)
 	);
+
+	// 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 the consumer bound the value as, so changes are emitted
+	// back in the same shape (string in → string out, Date in → Date out).
+	// When the bound value starts null, default to string output.
+	let shape: DateValueShape = 'string';
+
+	const arkValue = $derived.by(() => {
+		const s = dateValueShape(value) ?? dateValueShape(defaultValue);
+		if (s) shape = s;
+		return toDateValue(value, tz);
+	});
+	const arkDefault = $derived(toDateValue(defaultValue, tz));
 </script>
 
 <DatePicker.Root
 	{...restProps}
-	locale={locale().locale}
+	locale={resolvedLocale}
+	timeZone={tz}
 	closeOnSelect={!showTimeInput}
-	value={value ? [value] : []}
-	defaultValue={defaultValue ? [defaultValue] : undefined}
+	value={arkValue ? [arkValue] : []}
+	defaultValue={arkDefault ? [arkDefault] : undefined}
 	onValueChange={(details) => {
 		const picked = details.value[0] ?? null;
+		let next = picked;
 		if (picked && showTimeInput && !('hour' in picked)) {
-			const h = value && 'hour' in value ? (value as CalendarDateTime).hour : 0;
-			const m = value && 'hour' in value ? (value as CalendarDateTime).minute : 0;
-			value = new CalendarDateTime(picked.year, picked.month, picked.day, h, m);
-		} else {
-			value = picked;
+			const h = arkValue && 'hour' in arkValue ? (arkValue as CalendarDateTime).hour : 0;
+			const m = arkValue && 'hour' in arkValue ? (arkValue as CalendarDateTime).minute : 0;
+			next = new CalendarDateTime(picked.year, picked.month, picked.day, h, m);
 		}
+		value = fromDateValue(next, shape, tz);
 		onValueChange?.(details);
 	}}
 >

package/dist/components/date-picker/types.d.ts

@@ -1,8 +1,19 @@
 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 };
 export interface DatePickerProps extends Omit<DatePickerRootBaseProps, 'value' | 'defaultValue'> {
-    value?: DateValue | null;
-    defaultValue?: DateValue;
+    /**
+     * Bound value. Accepts a `DateValue`, an ISO/DB string, or a native `Date` —
+     * no manual conversion needed. The value is emitted back in the same shape it
+     * was provided (string in → string out, `Date` in → `Date` out). When the
+     * value starts `null`, changes are emitted as a string by default.
+     *
+     * For UTC values from a database, bind the ISO string with its `Z`/offset and
+     * leave `timeZone` unset: the picker displays the user's local zone and the
+     * emitted string is UTC.
+     */
+    value?: DateInputValue;
+    defaultValue?: DateInputValue;
     label?: string;
     placeholder?: string;
     name?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.63.1",
+	"version": "0.63.2",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",