compote-ui 0.49.3 → 0.50.0

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { DatePicker, useDatePicker } from '@ark-ui/svelte/date-picker';
+	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 { PhCalendarBlank } from '../../icons';
+	import type { DateFieldProps } from './types';
+	import DatePickerCalendar from '../date-picker/date-picker-calendar.svelte';
+
+	let {
+		value = $bindable(),
+		defaultValue,
+		label,
+		name,
+		min,
+		max,
+		disabled,
+		readOnly,
+		required,
+		invalid,
+		timeZone,
+		granularity,
+		onValueChange
+	}: DateFieldProps = $props();
+
+	const locale = useLocaleContext();
+	const id = $props.id();
+	const showTimeInput = $derived(!!granularity && granularity !== 'day');
+
+	const datePicker = useDatePicker(() => ({
+		id,
+		locale: locale().locale,
+		closeOnSelect: !showTimeInput,
+		value: value ? [value] : [],
+		defaultValue: defaultValue ? [defaultValue] : undefined,
+		min,
+		max,
+		disabled,
+		readOnly,
+		required,
+		invalid,
+		timeZone,
+		onValueChange(details) {
+			const picked = details.value[0] ?? null;
+			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;
+			}
+			onValueChange?.(details);
+		}
+	}));
+
+	const dateInput = useDateInput(() => ({
+		id,
+		locale: locale().locale,
+		granularity: granularity ?? 'day',
+		value: datePicker().value,
+		min,
+		max,
+		disabled,
+		readOnly,
+		required,
+		invalid,
+		timeZone,
+		onValueChange(details) {
+			datePicker().setValue(details.value);
+		}
+	}));
+</script>
+
+<DateInput.RootProvider value={dateInput}>
+	{#if label}
+		<DateInput.Label class="text-sm font-medium leading-none">
+			{label}
+			<Field.RequiredIndicator />
+		</DateInput.Label>
+	{/if}
+	<DateInput.Control>
+		<DatePicker.RootProvider value={datePicker}>
+			<DatePicker.Control class="flex flex-row gap-1.5">
+				<DateInput.SegmentGroup
+					class="inline-flex h-9 items-center rounded-md border border-border bg-surface-1 px-3 text-sm shadow-sm focus-within:ring-1 focus-within:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger"
+				>
+					<DateInput.SegmentContext>
+						{#snippet render(segment)}
+							<DateInput.Segment
+								{segment}
+								class="rounded px-0.5 text-ink outline-none focus:bg-primary focus:text-ink-inverse data-placeholder-shown:text-ink-dim"
+							/>
+						{/snippet}
+					</DateInput.SegmentContext>
+				</DateInput.SegmentGroup>
+				<DatePicker.Trigger
+					class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 shadow-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50"
+				>
+					<PhCalendarBlank class="size-4" />
+				</DatePicker.Trigger>
+			</DatePicker.Control>
+			<DatePickerCalendar {showTimeInput} />
+		</DatePicker.RootProvider>
+	</DateInput.Control>
+	<DateInput.HiddenInput {name} />
+</DateInput.RootProvider>

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

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

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

@@ -0,0 +1,9 @@
+import type { DatePickerRootBaseProps } from '@ark-ui/svelte/date-picker';
+import type { DateValue } from '@ark-ui/svelte/date-picker';
+export interface DateFieldProps extends Omit<DatePickerRootBaseProps, 'value' | 'defaultValue'> {
+    value?: DateValue | null;
+    defaultValue?: DateValue;
+    label?: string;
+    name?: string;
+    granularity?: 'day' | 'hour' | 'minute' | 'second';
+}

package/dist/components/date-field/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,50 @@
+<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';
+
+	let {
+		value = $bindable(),
+		defaultValue,
+		label,
+		name,
+		onValueChange,
+		...restProps
+	}: DateInputProps = $props();
+
+	const locale = useLocaleContext();
+</script>
+
+<DateInput.Root
+	{...restProps}
+	locale={locale().locale}
+	value={value ? [value] : []}
+	defaultValue={defaultValue ? [defaultValue] : undefined}
+	onValueChange={(details) => {
+		value = details.value[0] ?? null;
+		onValueChange?.(details);
+	}}
+>
+	{#if label}
+		<DateInput.Label class="text-sm font-medium leading-none">
+			{label}
+			<Field.RequiredIndicator />
+		</DateInput.Label>
+	{/if}
+	<DateInput.Control>
+		<DateInput.SegmentGroup
+			class="inline-flex h-9 items-center rounded-md border border-border bg-surface-1 px-3 text-sm shadow-sm focus-within:ring-1 focus-within:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger"
+		>
+			<DateInput.SegmentContext>
+				{#snippet render(segment)}
+					<DateInput.Segment
+						{segment}
+						class="rounded px-0.5 text-ink outline-none focus:bg-primary focus:text-ink-inverse data-placeholder-shown:text-ink-dim"
+					/>
+				{/snippet}
+			</DateInput.SegmentContext>
+		</DateInput.SegmentGroup>
+	</DateInput.Control>
+	<DateInput.HiddenInput {name} />
+</DateInput.Root>

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

@@ -0,0 +1,5 @@
+import { DateInput } from '@ark-ui/svelte/date-input';
+import type { DateInputProps } from './types';
+declare const DateInput: import("svelte").Component<DateInputProps, {}, "value">;
+type DateInput = ReturnType<typeof DateInput>;
+export default DateInput;

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

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

package/dist/components/date-input/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { DatePicker } from '@ark-ui/svelte/date-picker';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { CalendarDateTime } from '@internationalized/date';
+	import { PhArrowLeft, PhArrowRight } from '../../icons';
+	import type { DateValue } from '@ark-ui/svelte/date-picker';
+
+	let { showTimeInput = false }: { showTimeInput?: boolean } = $props();
+
+	function getTimeValue(v: DateValue | undefined): string {
+		if (!v || !('hour' in v)) return '';
+		const dt = v as CalendarDateTime;
+		return `${String(dt.hour).padStart(2, '0')}:${String(dt.minute).padStart(2, '0')}`;
+	}
+
+	function setTime(v: DateValue | undefined, hours: number, minutes: number): CalendarDateTime {
+		if (v && 'hour' in v) return (v as CalendarDateTime).set({ hour: hours, minute: minutes });
+		const d = v ?? new CalendarDateTime(new Date().getFullYear(), 1, 1, 0, 0);
+		return new CalendarDateTime(d.year, d.month, d.day, hours, minutes);
+	}
+</script>
+
+<Portal>
+	<DatePicker.Positioner>
+		<DatePicker.Content
+			class="z-50 min-w-70 rounded-lg border border-border bg-surface-document p-4 shadow-lg outline-none data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+		>
+			<DatePicker.View view="day">
+				<DatePicker.Context>
+					{#snippet render(datePicker)}
+						<DatePicker.ViewControl class="mb-3 flex items-center justify-between">
+							<DatePicker.PrevTrigger
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+							>
+								<PhArrowLeft class="size-4" />
+							</DatePicker.PrevTrigger>
+							<DatePicker.ViewTrigger
+								class="flex-1 rounded-md py-1 text-center text-sm font-semibold text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+							>
+								<DatePicker.RangeText />
+							</DatePicker.ViewTrigger>
+							<DatePicker.NextTrigger
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+							>
+								<PhArrowRight class="size-4" />
+							</DatePicker.NextTrigger>
+						</DatePicker.ViewControl>
+						<DatePicker.Table class="w-full border-collapse">
+							<DatePicker.TableHead>
+								<DatePicker.TableRow>
+									{#each datePicker().weekDays as weekDay (weekDay.short)}
+										<DatePicker.TableHeader
+											class="pb-2 text-center text-xs font-medium uppercase text-ink-dim"
+										>
+											{weekDay.short}
+										</DatePicker.TableHeader>
+									{/each}
+								</DatePicker.TableRow>
+							</DatePicker.TableHead>
+							<DatePicker.TableBody>
+								{#each datePicker().weeks as week, weekIdx (weekIdx)}
+									<DatePicker.TableRow>
+										{#each week as day (day.toString())}
+											<DatePicker.TableCell value={day}>
+												<DatePicker.TableCellTrigger
+													class="inline-flex h-9 w-9 items-center justify-center rounded-md text-sm text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40 data-in-range:rounded-none data-in-range:bg-primary/15 data-outside-range:opacity-40 data-outside-range:text-ink-dim data-range-end:rounded-r-md data-range-end:bg-primary data-range-end:text-ink-inverse data-range-start:rounded-l-md data-range-start:bg-primary data-range-start:text-ink-inverse data-selected:bg-primary data-selected:text-ink-inverse data-today:font-semibold data-today:text-primary data-unavailable:line-through data-unavailable:opacity-40 data-selected:data-today:text-ink-inverse"
+												>
+													{day.day}
+												</DatePicker.TableCellTrigger>
+											</DatePicker.TableCell>
+										{/each}
+									</DatePicker.TableRow>
+								{/each}
+							</DatePicker.TableBody>
+						</DatePicker.Table>
+						{#if showTimeInput}
+							<input
+								type="time"
+								value={getTimeValue(datePicker().value[0])}
+								oninput={(e) => {
+									const [h, m] = e.currentTarget.value.split(':').map(Number);
+									datePicker().setValue([setTime(datePicker().value[0], h, m)]);
+								}}
+								class="mt-3 h-9 w-full rounded-md border border-border bg-surface-1 px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+							/>
+						{/if}
+					{/snippet}
+				</DatePicker.Context>
+			</DatePicker.View>
+
+			<DatePicker.View view="month">
+				<DatePicker.Context>
+					{#snippet render(datePicker)}
+						<DatePicker.ViewControl class="mb-3 flex items-center justify-between">
+							<DatePicker.PrevTrigger
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+							>
+								<PhArrowLeft class="size-4" />
+							</DatePicker.PrevTrigger>
+							<DatePicker.ViewTrigger
+								class="flex-1 rounded-md py-1 text-center text-sm font-semibold text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+							>
+								<DatePicker.RangeText />
+							</DatePicker.ViewTrigger>
+							<DatePicker.NextTrigger
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+							>
+								<PhArrowRight class="size-4" />
+							</DatePicker.NextTrigger>
+						</DatePicker.ViewControl>
+						<DatePicker.Table class="w-full border-collapse">
+							<DatePicker.TableBody>
+								{#each datePicker().getMonthsGrid( { columns: 4, format: 'short' } ) as monthRow, rowIdx (rowIdx)}
+									<DatePicker.TableRow>
+										{#each monthRow as month (month.value)}
+											<DatePicker.TableCell value={month.value}>
+												<DatePicker.TableCellTrigger
+													class="inline-flex h-10 w-full items-center justify-center rounded-md px-2 text-sm text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-outside-range:invisible data-selected:bg-primary data-selected:text-ink-inverse"
+												>
+													{month.label}
+												</DatePicker.TableCellTrigger>
+											</DatePicker.TableCell>
+										{/each}
+									</DatePicker.TableRow>
+								{/each}
+							</DatePicker.TableBody>
+						</DatePicker.Table>
+					{/snippet}
+				</DatePicker.Context>
+			</DatePicker.View>
+
+			<DatePicker.View view="year">
+				<DatePicker.Context>
+					{#snippet render(datePicker)}
+						<DatePicker.ViewControl class="mb-3 flex items-center justify-between">
+							<DatePicker.PrevTrigger
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+							>
+								<PhArrowLeft class="size-4" />
+							</DatePicker.PrevTrigger>
+							<DatePicker.ViewTrigger
+								class="flex-1 rounded-md py-1 text-center text-sm font-semibold text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+							>
+								<DatePicker.RangeText />
+							</DatePicker.ViewTrigger>
+							<DatePicker.NextTrigger
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+							>
+								<PhArrowRight class="size-4" />
+							</DatePicker.NextTrigger>
+						</DatePicker.ViewControl>
+						<DatePicker.Table class="w-full border-collapse">
+							<DatePicker.TableBody>
+								{#each datePicker().getYearsGrid({ columns: 4 }) as yearRow, rowIdx (rowIdx)}
+									<DatePicker.TableRow>
+										{#each yearRow as year (year.value)}
+											<DatePicker.TableCell value={year.value}>
+												<DatePicker.TableCellTrigger
+													class="inline-flex h-10 w-full items-center justify-center rounded-md px-2 text-sm text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-outside-range:invisible data-selected:bg-primary data-selected:text-ink-inverse"
+												>
+													{year.label}
+												</DatePicker.TableCellTrigger>
+											</DatePicker.TableCell>
+										{/each}
+									</DatePicker.TableRow>
+								{/each}
+							</DatePicker.TableBody>
+						</DatePicker.Table>
+					{/snippet}
+				</DatePicker.Context>
+			</DatePicker.View>
+		</DatePicker.Content>
+	</DatePicker.Positioner>
+</Portal>

package/dist/components/date-picker/date-picker-calendar.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    showTimeInput?: boolean;
+};
+declare const DatePickerCalendar: import("svelte").Component<$$ComponentProps, {}, "">;
+type DatePickerCalendar = ReturnType<typeof DatePickerCalendar>;
+export default DatePickerCalendar;

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+	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 { PhCalendarBlank, PhX } from '../../icons';
+	import type { DatePickerProps } from './types';
+	import DatePickerCalendar from './date-picker-calendar.svelte';
+
+	let {
+		value = $bindable(),
+		defaultValue,
+		label,
+		placeholder,
+		name,
+		granularity,
+		onValueChange,
+		...restProps
+	}: DatePickerProps = $props();
+
+	const locale = useLocaleContext();
+	const showTimeInput = $derived(!!granularity && granularity !== 'day');
+</script>
+
+<DatePicker.Root
+	{...restProps}
+	locale={locale().locale}
+	closeOnSelect={!showTimeInput}
+	value={value ? [value] : []}
+	defaultValue={defaultValue ? [defaultValue] : undefined}
+	onValueChange={(details) => {
+		const picked = details.value[0] ?? null;
+		if (picked && showTimeInput) {
+			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;
+		}
+		onValueChange?.(details);
+	}}
+>
+	{#if label}
+		<DatePicker.Label class="text-sm font-medium leading-none">
+			{label}
+			<Field.RequiredIndicator />
+		</DatePicker.Label>
+	{/if}
+	<DatePicker.Control class="flex flex-row gap-1.5">
+		<DatePicker.Input
+			{placeholder}
+			class="h-9 min-w-0 flex-1 rounded-md border border-border bg-surface-1 px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger"
+		/>
+		<DatePicker.Trigger
+			class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 shadow-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50"
+		>
+			<PhCalendarBlank class="size-4" />
+		</DatePicker.Trigger>
+		<DatePicker.ClearTrigger
+			class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 text-ink-dim shadow-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+		>
+			<PhX class="size-3.5" />
+		</DatePicker.ClearTrigger>
+	</DatePicker.Control>
+	<DatePickerCalendar {showTimeInput} />
+	{#if name}
+		<input type="hidden" {name} value={value ?? ''} />
+	{/if}
+</DatePicker.Root>

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

@@ -0,0 +1,5 @@
+import { DatePicker } from '@ark-ui/svelte/date-picker';
+import type { DatePickerProps } from './types';
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

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

@@ -0,0 +1,10 @@
+import type { DatePickerRootBaseProps } from '@ark-ui/svelte/date-picker';
+import type { DateValue } from '@ark-ui/svelte/date-picker';
+export interface DatePickerProps extends Omit<DatePickerRootBaseProps, 'value' | 'defaultValue'> {
+    value?: DateValue | null;
+    defaultValue?: DateValue;
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    granularity?: 'day' | 'hour' | 'minute' | 'second';
+}

package/dist/components/date-picker/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { DatePicker, useDatePicker } from '@ark-ui/svelte/date-picker';
+	import { DateInput, useDateInput } from '@ark-ui/svelte/date-input';
+	import { Field } from '@ark-ui/svelte/field';
+	import { useLocaleContext } from '@ark-ui/svelte/locale';
+	import { PhCalendarBlank } from '../../icons';
+	import type { DateRangeFieldProps } from './types';
+	import DatePickerCalendar from '../date-picker/date-picker-calendar.svelte';
+
+	let {
+		value = $bindable([]),
+		defaultValue,
+		label,
+		name,
+		min,
+		max,
+		disabled,
+		readOnly,
+		required,
+		invalid,
+		timeZone,
+		onValueChange
+	}: DateRangeFieldProps = $props();
+
+	const locale = useLocaleContext();
+	const id = $props.id();
+
+	const datePicker = useDatePicker(() => ({
+		id,
+		locale: locale().locale,
+		selectionMode: 'range',
+		value,
+		defaultValue,
+		min,
+		max,
+		disabled,
+		readOnly,
+		required,
+		invalid,
+		timeZone,
+		onValueChange(details) {
+			value = details.value;
+			onValueChange?.(details);
+		}
+	}));
+
+	const dateInput = useDateInput(() => ({
+		id,
+		locale: locale().locale,
+		selectionMode: 'range',
+		value: datePicker().value,
+		min,
+		max,
+		disabled,
+		readOnly,
+		required,
+		invalid,
+		timeZone,
+		onValueChange(details) {
+			datePicker().setValue(details.value);
+		}
+	}));
+
+	const segmentGroupClass =
+		'inline-flex h-9 items-center rounded-md border border-border bg-surface-1 px-3 text-sm shadow-sm focus-within:ring-1 focus-within:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger';
+
+	const segmentClass =
+		'rounded px-0.5 text-ink outline-none focus:bg-primary focus:text-ink-inverse data-placeholder-shown:text-ink-dim';
+</script>
+
+<DateInput.RootProvider value={dateInput}>
+	{#if label}
+		<DateInput.Label class="text-sm font-medium leading-none">
+			{label}
+			<Field.RequiredIndicator />
+		</DateInput.Label>
+	{/if}
+	<DateInput.Control>
+		<DatePicker.RootProvider value={datePicker}>
+			<DatePicker.Control class="flex flex-row items-center gap-1.5">
+				<DateInput.SegmentGroup index={0} class={segmentGroupClass}>
+					<DateInput.SegmentContext>
+						{#snippet render(segment)}
+							<DateInput.Segment {segment} class={segmentClass} />
+						{/snippet}
+					</DateInput.SegmentContext>
+				</DateInput.SegmentGroup>
+				<span class="text-ink-dim">–</span>
+				<DateInput.SegmentGroup index={1} class={segmentGroupClass}>
+					<DateInput.SegmentContext>
+						{#snippet render(segment)}
+							<DateInput.Segment {segment} class={segmentClass} />
+						{/snippet}
+					</DateInput.SegmentContext>
+				</DateInput.SegmentGroup>
+				<DatePicker.Trigger
+					class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 shadow-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50"
+				>
+					<PhCalendarBlank class="size-4" />
+				</DatePicker.Trigger>
+			</DatePicker.Control>
+			<DatePickerCalendar />
+		</DatePicker.RootProvider>
+	</DateInput.Control>
+	<DateInput.HiddenInput {name} />
+</DateInput.RootProvider>

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

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

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

@@ -0,0 +1,8 @@
+import type { DatePickerRootBaseProps } from '@ark-ui/svelte/date-picker';
+import type { DateValue } from '@ark-ui/svelte/date-picker';
+export interface DateRangeFieldProps extends Omit<DatePickerRootBaseProps, 'value' | 'defaultValue' | 'selectionMode'> {
+    value?: DateValue[];
+    defaultValue?: DateValue[];
+    label?: string;
+    name?: string;
+}

package/dist/components/date-range-field/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tabs/tabs.svelte

@@ -18,7 +18,7 @@
 		bind:value
 		{defaultValue}
 		{orientation}
-		class="flex data-[orientation='horizontal']:flex-col data-[orientation='vertical']:flex-row"
+		class="flex h-full data-[orientation='horizontal']:flex-col data-[orientation='vertical']:flex-row"
 	>
 		{@render children?.()}
 	</Tabs.Root>

package/dist/components/tree-view/tree-view.svelte

@@ -12,7 +12,7 @@
 		PhMinus,
 		PhX
 	} from '../../icons';
-	import { Button, Field } from '../..';
+	import { Button, Field, ScrollArea } from '../..';
 	import { SvelteSet } from 'svelte/reactivity';
 
 	import Icon from '@iconify/svelte';
@@ -137,13 +137,24 @@
 		</div>
 	</div>
 
-	<div class="flex-1 overflow-x-hidden overflow-y-auto">
-		<TreeView.Tree class="flex flex-col text-sm">
-			{#each collection.rootNode.children ?? [] as node, index (node.value)}
-				{@render renderNode(node as T, [index])}
-			{/each}
-		</TreeView.Tree>
-	</div>
+	<ScrollArea.Root class="flex-1">
+		<ScrollArea.Viewport>
+			<ScrollArea.Content class="p-0">
+				<TreeView.Tree class="flex flex-col text-sm">
+					{#each collection.rootNode.children ?? [] as node, index (node.value)}
+						{@render renderNode(node as T, [index])}
+					{/each}
+				</TreeView.Tree>
+			</ScrollArea.Content>
+		</ScrollArea.Viewport>
+		<ScrollArea.Scrollbar orientation="vertical">
+			<ScrollArea.Thumb />
+		</ScrollArea.Scrollbar>
+		<ScrollArea.Scrollbar orientation="horizontal">
+			<ScrollArea.Thumb />
+		</ScrollArea.Scrollbar>
+		<ScrollArea.Corner />
+	</ScrollArea.Root>
 </TreeView.Root>
 
 {#snippet nodeCheckbox()}

package/dist/icons/PhCalendarBlank.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16M72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160z"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhCalendarBlank.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhCalendarBlank: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhCalendarBlank = ReturnType<typeof PhCalendarBlank>;
+export default PhCalendarBlank;

package/dist/icons/index.d.ts

@@ -1,5 +1,6 @@
 export { default as PhArrowClockwise } from './PhArrowClockwise.svelte';
 export { default as PhArrowCounterClockwise } from './PhArrowCounterClockwise.svelte';
+export { default as PhCalendarBlank } from './PhCalendarBlank.svelte';
 export { default as PhArrowLeft } from './PhArrowLeft.svelte';
 export { default as PhArrowRight } from './PhArrowRight.svelte';
 export { default as PhArrowSquareOut } from './PhArrowSquareOut.svelte';

package/dist/icons/index.js

@@ -1,5 +1,6 @@
 export { default as PhArrowClockwise } from './PhArrowClockwise.svelte';
 export { default as PhArrowCounterClockwise } from './PhArrowCounterClockwise.svelte';
+export { default as PhCalendarBlank } from './PhCalendarBlank.svelte';
 export { default as PhArrowLeft } from './PhArrowLeft.svelte';
 export { default as PhArrowRight } from './PhArrowRight.svelte';
 export { default as PhArrowSquareOut } from './PhArrowSquareOut.svelte';

package/dist/index.d.ts

@@ -12,6 +12,14 @@ export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';
+export { default as DateField } from './components/date-field/date-field.svelte';
+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 { default as DatePicker } from './components/date-picker/date-picker.svelte';
+export type { DatePickerProps } from './components/date-picker/types';
 export * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
 export type { AlertDialogProps } from './components/dialog/dialog.types';

package/dist/index.js

@@ -11,6 +11,10 @@ export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';
+export { default as DateField } from './components/date-field/date-field.svelte';
+export { default as DateRangeField } from './components/date-range-field/date-range-field.svelte';
+export { default as DateInput } from './components/date-input/date-input.svelte';
+export { default as DatePicker } from './components/date-picker/date-picker.svelte';
 export * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
 export * as Drawer from './components/drawer';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.49.3",
+	"version": "0.50.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -88,7 +88,7 @@
 		"svelte"
 	],
 	"dependencies": {
-		"@ark-ui/svelte": "^5.21.2",
+		"@ark-ui/svelte": "^5.22.0",
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@iconify/svelte": "^5.2.1",
 		"runed": "^0.37.1",