compote-ui 0.52.3 → 0.52.5

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

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { DateInput } from '@ark-ui/svelte/date-input';
 	import { Field } from '@ark-ui/svelte/field';
-	import { useLocaleContext } from '@ark-ui/svelte/locale';
 	import {
 		fromDateToLocal,
 		getLocalTimeZone,
-		parseAbsoluteToLocal,
+		parseAbsolute,
 		parseDate,
-		parseDateTime
+		parseDateTime,
+		parseZonedDateTime
 	} from '@internationalized/date';
 	import type { DateValue, DateInputProps, NativeDateInput } from './types';
 
@@ -16,18 +16,26 @@
 		defaultValue,
 		label,
 		name,
+		timeZone = getLocalTimeZone(),
+		hideTimeZone,
 		onValueChange,
 		...restProps
 	}: DateInputProps = $props();
 
-	const locale = useLocaleContext();
+	const absoluteDateTimeRe = /(?:Z|[+-]\d{2}:\d{2})$/;
+
+	function isAbsoluteDateTime(v: NativeDateInput): boolean {
+		return typeof v === 'string' && v.includes('T') && absoluteDateTimeRe.test(v);
+	}
 
 	function toDateValue(v: NativeDateInput): DateValue | null {
 		if (v == null) return null;
 		if (typeof v === 'string') {
 			if (!v) return null;
 			if (v.includes('T')) {
-				if (v.endsWith('Z') || /[+-]\d{2}:\d{2}$/.test(v)) return parseAbsoluteToLocal(v);
+				// ZonedDateTime.toString() format: "2024-01-15T10:30:00+02:00[Europe/Belgrade]"
+				if (v.includes('[')) return parseZonedDateTime(v);
+				if (absoluteDateTimeRe.test(v)) return parseAbsolute(v, timeZone);
 				return parseDateTime(v);
 			}
 			return parseDate(v);
@@ -38,22 +46,29 @@
 
 	function fromDateValue(dv: DateValue | null, source: NativeDateInput): NativeDateInput {
 		if (dv == null) return null;
-		if (typeof source === 'string') return dv.toString();
+		if (typeof source === 'string') {
+			if (absoluteDateTimeRe.test(source)) return dv.toDate(timeZone).toISOString();
+			return dv.toString();
+		}
 		if (source instanceof Date) return dv.toDate(getLocalTimeZone());
 		return dv;
 	}
 
 	const arkValue = $derived(toDateValue(value));
 	const arkDefault = $derived(toDateValue(defaultValue));
+	const shouldHideTimeZone = $derived(hideTimeZone ?? isAbsoluteDateTime(value));
 </script>
 
 <DateInput.Root
 	{...restProps}
-	locale={locale().locale}
+	{timeZone}
+	hideTimeZone={shouldHideTimeZone}
 	value={arkValue ? [arkValue] : []}
 	defaultValue={arkDefault ? [arkDefault] : undefined}
 	onValueChange={(details) => {
 		const dv = details.value[0] ?? null;
+		// Guard: skip if Ark UI echoes back the same date (prevents reactive loop)
+		if (dv?.toString() === arkValue?.toString()) return;
 		value = fromDateValue(dv, value);
 		onValueChange?.(details);
 	}}

package/package.json

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