compote-ui 0.53.0 → 0.55.0

package/dist/components/combobox/combobox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends ListItem">
 	import { Combobox } from '@ark-ui/svelte/combobox';
-	import { Field } from '@ark-ui/svelte/field';
+	import { Field, useFieldContext } from '@ark-ui/svelte/field';
 	import { useFilter } from '@ark-ui/svelte/locale';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { createVirtualizer } from '@tanstack/svelte-virtual';
@@ -17,7 +17,9 @@
 		placeholder,
 		layout = 'vertical',
 		name,
+		invalid,
 		readOnly,
+		disabled,
 		multiple,
 		loading = false,
 		virtualized = false,
@@ -26,6 +28,11 @@
 		...restProps
 	}: ComboboxProps<T> = $props();
 
+	const field = useFieldContext();
+	const isInvalid = $derived(invalid ?? field?.()?.invalid ?? false);
+	const isReadOnly = $derived(readOnly ?? field?.()?.readOnly ?? false);
+	const isDisabled = $derived(disabled ?? field?.()?.disabled ?? false);
+
 	let filterText = $state('');
 
 	const filters = useFilter({ sensitivity: 'base' });
@@ -112,7 +119,9 @@
 		: undefined}
 	openOnClick
 	{multiple}
-	{readOnly}
+	invalid={isInvalid}
+	readOnly={isReadOnly}
+	disabled={isDisabled}
 	{...restProps}
 	class={cn(
 		layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5',
@@ -151,7 +160,7 @@
 			placeholder={placeholder ?? 'Search...'}
 			class="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed disabled:opacity-50"
 		/>
-		{#if !readOnly}
+		{#if !isReadOnly}
 			<Combobox.ClearTrigger class="text-ink-dim transition-colors hover:text-ink">
 				<PhX class="size-4" />
 			</Combobox.ClearTrigger>

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

@@ -1,75 +1,41 @@
 <script lang="ts">
 	import { DateInput } from '@ark-ui/svelte/date-input';
-	import { Field } from '@ark-ui/svelte/field';
-	import {
-		fromDateToLocal,
-		getLocalTimeZone,
-		parseAbsolute,
-		parseDate,
-		parseDateTime,
-		parseZonedDateTime
-	} from '@internationalized/date';
-	import type { DateValue, DateInputProps, NativeDateInput } from './types';
+	import { Field, useFieldContext } from '@ark-ui/svelte/field';
+	import type { DateInputProps } from './types';
 
 	let {
 		value = $bindable(),
 		defaultValue,
 		label,
 		name,
-		timeZone = getLocalTimeZone(),
-		hideTimeZone,
 		onValueChange,
+		invalid,
+		readOnly,
+		disabled,
 		...restProps
 	}: DateInputProps = $props();
 
-	const absoluteDateTimeRe = /(?:Z|[+-]\d{2}:\d{2})$/;
+	const field = useFieldContext();
+	const isInvalid = $derived(invalid ?? field?.()?.invalid ?? false);
+	const isReadOnly = $derived(readOnly ?? field?.()?.readOnly ?? false);
+	const isDisabled = $derived(disabled ?? field?.()?.disabled ?? false);
 
-	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')) {
-				// 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);
-		}
-		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(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));
+	const arkValue = $derived(value ?? null);
+	const arkDefault = $derived(defaultValue ?? null);
 </script>
 
 <DateInput.Root
 	{...restProps}
-	{timeZone}
-	hideTimeZone={shouldHideTimeZone}
+	invalid={isInvalid}
+	readOnly={isReadOnly}
+	disabled={isDisabled}
 	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);
+		value = dv;
 		onValueChange?.(details);
 	}}
 >

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

@@ -1,10 +1,9 @@
 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?: NativeDateInput;
-    defaultValue?: NativeDateInput;
+    value?: DateValue | null;
+    defaultValue?: DateValue | null;
     label?: string;
     name?: string;
 }

package/dist/components/select/select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T extends ListItem">
-	import { Field } from '@ark-ui/svelte/field';
+	import { Field, useFieldContext } from '@ark-ui/svelte/field';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { Select } from '@ark-ui/svelte/select';
 	import type { SelectProps } from './types';
@@ -15,15 +15,26 @@
 		layout = 'vertical',
 		size = 'default',
 		name,
+		invalid,
+		readOnly,
+		disabled,
 		...restProps
 	}: SelectProps<T> = $props();
 
+	const field = useFieldContext();
+	const isInvalid = $derived(invalid ?? field?.()?.invalid ?? false);
+	const isReadOnly = $derived(readOnly ?? field?.()?.readOnly ?? false);
+	const isDisabled = $derived(disabled ?? field?.()?.disabled ?? false);
+
 	const collection = $derived(createListCollection(items));
 </script>
 
 <Select.Root
 	{collection}
 	{...restProps}
+	invalid={isInvalid}
+	readOnly={isReadOnly}
+	disabled={isDisabled}
 	deselectable
 	value={value ? [value.toString()] : []}
 	onValueChange={(valueChangeDetails) => {

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export type { DateFieldProps } from './components/date-field/types';
 export { default as DateRangeField } from './components/date-range-field/date-range-field.svelte';
 export type { DateRangeFieldProps } from './components/date-range-field/types';
 export { default as DateInput } from './components/date-input/date-input.svelte';
-export type { DateInputProps } from './components/date-input/types';
+export type { DateInputProps, DateValue as DateInputDateValue } from './components/date-input/types';
 export { default as DatePicker } from './components/date-picker/date-picker.svelte';
 export type { DatePickerProps } from './components/date-picker/types';
 export * as Dialog from './components/dialog';
@@ -51,6 +51,7 @@ export * as Field from './components/field';
 export * as Fieldset from './components/fieldset';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';
 export { LocaleProvider, useLocaleContext } from '@ark-ui/svelte/locale';
+export { getLocalTimeZone, parseAbsolute, parseDateTime } from '@internationalized/date';
 export { Portal } from '@ark-ui/svelte/portal';
 export type { PortalProps } from '@ark-ui/svelte/portal';
 export { createListCollection, createTreeCollection } from './utils/collections';

package/dist/index.js

@@ -39,6 +39,7 @@ export * as Field from './components/field';
 export * as Fieldset from './components/fieldset';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';
 export { LocaleProvider, useLocaleContext } from '@ark-ui/svelte/locale';
+export { getLocalTimeZone, parseAbsolute, parseDateTime } from '@internationalized/date';
 export { Portal } from '@ark-ui/svelte/portal';
 export { createListCollection, createTreeCollection } from './utils/collections';
 export { PersistedState, Debounced } from 'runed';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.53.0",
+	"version": "0.55.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -56,14 +56,13 @@
 		}
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.5",
 		"@eslint/js": "^10.0.1",
 		"@faker-js/faker": "^10.4.0",
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.8",
-		"@sveltejs/kit": "^2.61.1",
-		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "7.1.2",
 		"@tailwindcss/vite": "^4.2.4",
 		"@tanstack/svelte-virtual": "^3.13.28",
@@ -77,8 +76,8 @@
 		"prettier-plugin-svelte": "^4.1.0",
 		"prettier-plugin-tailwindcss": "^0.8.0",
 		"publint": "^0.3.21",
-		"svelte": "^5.56.1",
-		"svelte-check": "^4.5.0",
+		"svelte": "^5.56.2",
+		"svelte-check": "^4.6.0",
 		"tailwindcss": "^4.2.4",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
@@ -93,6 +92,7 @@
 		"@ark-ui/svelte": "^5.22.0",
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@iconify/svelte": "^5.2.1",
+		"@internationalized/date": "^3.12.2",
 		"runed": "^0.37.1",
 		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2"