compote-ui 0.52.2 → 0.52.4

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

@@ -1,8 +1,15 @@
 <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 type { DateInputProps } from './types';
+	import {
+		fromDateToLocal,
+		getLocalTimeZone,
+		parseAbsolute,
+		parseDate,
+		parseDateTime,
+		parseZonedDateTime
+	} from '@internationalized/date';
+	import type { DateValue, DateInputProps, NativeDateInput } from './types';
 
 	let {
 		value = $bindable(),
@@ -13,16 +20,47 @@
 		...restProps
 	}: DateInputProps = $props();
 
-	const locale = useLocaleContext();
+	const absoluteDateTimeRe = /(?:Z|[+-]\d{2}:\d{2})$/;
+
+	function toDateValue(v: NativeDateInput): DateValue | null {
+		if (v == null) return null;
+		if (typeof v === 'string') {
+			if (!v) return null;
+			if (v.includes('T')) {
+				// 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, 'UTC');
+				return parseDateTime(v);
+			}
+			return parseDate(v);
+		}
+		if (v instanceof Date) return fromDateToLocal(v);
+		return v;
+	}
+
+	function fromDateValue(dv: DateValue | null, source: NativeDateInput): NativeDateInput {
+		if (dv == null) return null;
+		if (typeof source === 'string') {
+			if (absoluteDateTimeRe.test(source)) return dv.toDate('UTC').toISOString();
+			return dv.toString();
+		}
+		if (source instanceof Date) return dv.toDate(getLocalTimeZone());
+		return dv;
+	}
+
+	const arkValue = $derived(toDateValue(value));
+	const arkDefault = $derived(toDateValue(defaultValue));
 </script>
 
 <DateInput.Root
 	{...restProps}
-	locale={locale().locale}
-	value={value ? [value] : []}
-	defaultValue={defaultValue ? [defaultValue] : undefined}
+	value={arkValue ? [arkValue] : []}
+	defaultValue={arkDefault ? [arkDefault] : undefined}
 	onValueChange={(details) => {
-		value = details.value[0] ?? null;
+		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/dist/components/date-input/types.d.ts

@@ -1,8 +1,10 @@
 import type { DateInputRootBaseProps } from '@ark-ui/svelte/date-input';
 import type { DateInputDateValue as DateValue } from '@ark-ui/svelte/date-input';
+export type { DateValue };
+export type NativeDateInput = DateValue | string | Date | null | undefined;
 export interface DateInputProps extends Omit<DateInputRootBaseProps, 'value' | 'defaultValue'> {
-    value?: DateValue | null;
-    defaultValue?: DateValue;
+    value?: NativeDateInput;
+    defaultValue?: NativeDateInput;
     label?: string;
     name?: string;
 }

package/package.json

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