@dryui/ui 3.0.0 → 4.0.0

package/src/date-field/date-field-segment.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDateFieldCtx, type DateSegmentType } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		type: DateSegmentType;
+	}
+
+	let { type, class: className, ...rest }: Props = $props();
+
+	const ctx = getDateFieldCtx();
+
+	const segmentData = $derived(ctx.segments.find((s) => s.type === type));
+
+	const minValue = $derived(type === 'month' ? 1 : type === 'day' ? 1 : 1000);
+	const maxValue = $derived(type === 'month' ? 12 : type === 'day' ? 31 : 9999);
+	const placeholder = $derived(type === 'month' ? 'MM' : type === 'day' ? 'DD' : 'YYYY');
+
+	const displayValue = $derived(
+		segmentData?.value !== null && segmentData?.value !== undefined
+			? type === 'year'
+				? String(segmentData.value)
+				: String(segmentData.value).padStart(2, '0')
+			: placeholder
+	);
+
+	let inputBuffer = '';
+	let segmentEl = $state<HTMLSpanElement>();
+	let bufferTimeout: ReturnType<typeof setTimeout> | undefined;
+
+	function clearBufferTimeout() {
+		if (bufferTimeout === undefined) return;
+		clearTimeout(bufferTimeout);
+		bufferTimeout = undefined;
+	}
+
+	function resetInputBuffer() {
+		clearBufferTimeout();
+		inputBuffer = '';
+	}
+
+	onDestroy(resetInputBuffer);
+
+	$effect(() => {
+		const node = segmentEl;
+		if (!node) return;
+		ctx.registerSegment(type, node);
+		node.addEventListener('blur', resetInputBuffer);
+		return () => {
+			node.removeEventListener('blur', resetInputBuffer);
+			resetInputBuffer();
+			ctx.unregisterSegment(type);
+		};
+	});
+
+	function increment() {
+		const current = segmentData?.value ?? minValue - 1;
+		const next = current >= maxValue ? minValue : current + 1;
+		ctx.updateSegment(type, next);
+	}
+
+	function decrement() {
+		const current = segmentData?.value ?? maxValue + 1;
+		const next = current <= minValue ? maxValue : current - 1;
+		ctx.updateSegment(type, next);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (ctx.disabled) return;
+
+		switch (e.key) {
+			case 'ArrowUp': {
+				e.preventDefault();
+				increment();
+				break;
+			}
+			case 'ArrowDown': {
+				e.preventDefault();
+				decrement();
+				break;
+			}
+			case 'ArrowRight': {
+				e.preventDefault();
+				ctx.focusSegment(type, 'next');
+				break;
+			}
+			case 'ArrowLeft': {
+				e.preventDefault();
+				ctx.focusSegment(type, 'prev');
+				break;
+			}
+			case 'Tab':
+				// Let default behavior handle tab
+				break;
+			case 'Backspace': {
+				e.preventDefault();
+				resetInputBuffer();
+				ctx.updateSegment(type, minValue);
+				break;
+			}
+			default: {
+				if (/^\d$/.test(e.key)) {
+					e.preventDefault();
+					clearBufferTimeout();
+					inputBuffer += e.key;
+					const num = parseInt(inputBuffer, 10);
+					const maxDigits = type === 'year' ? 4 : 2;
+
+					if (inputBuffer.length >= maxDigits || num > maxValue) {
+						ctx.updateSegment(type, Math.min(Math.max(num, minValue), maxValue));
+						resetInputBuffer();
+						// Auto-advance to next segment
+						if (type !== 'year') {
+							ctx.focusSegment(type, 'next');
+						}
+					} else {
+						ctx.updateSegment(type, num);
+						bufferTimeout = setTimeout(() => {
+							inputBuffer = '';
+							bufferTimeout = undefined;
+							if (document.activeElement !== segmentEl) return;
+							if (type !== 'year') {
+								ctx.focusSegment(type, 'next');
+							}
+						}, 750);
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<span
+	bind:this={segmentEl}
+	role="spinbutton"
+	tabindex={ctx.disabled ? undefined : 0}
+	aria-label={type}
+	aria-valuemin={minValue}
+	aria-valuemax={maxValue}
+	aria-valuenow={segmentData?.value ?? undefined}
+	aria-valuetext={displayValue}
+	data-df-segment
+	data-segment={type}
+	data-placeholder={segmentData?.value === null ? '' : undefined}
+	data-disabled={ctx.disabled || undefined}
+	onkeydown={handleKeydown}
+	{...rest}
+	class={className}
+>
+	{displayValue}
+</span>
+
+<style>
+	[data-df-segment] {
+		padding: var(--dry-space-0_5) var(--dry-space-1);
+		border-radius: var(--dry-radius-sm);
+		font-variant-numeric: tabular-nums;
+		cursor: default;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-df-segment]:focus {
+		outline: 2px solid var(--dry-color-stroke-focus);
+		outline-offset: -1px;
+		background: var(--dry-color-fill-brand-weak);
+		color: var(--dry-color-text-brand);
+	}
+
+	[data-df-segment][data-placeholder] {
+		color: var(--dry-color-text-weak);
+	}
+
+	[data-df-segment][data-disabled] {
+		color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+	}
+</style>

package/src/date-field/date-field-separator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDateFieldCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		separator?: string;
+	}
+
+	let { separator, class: className, ...rest }: Props = $props();
+
+	const ctx = getDateFieldCtx();
+
+	const display = $derived(separator ?? ctx.separator);
+</script>
+
+<span aria-hidden="true" data-df-separator data-separator="" {...rest} class={className}>
+	{display}
+</span>
+
+<style>
+	[data-df-separator] {
+		color: var(--dry-color-text-weak);
+		padding: 0 var(--dry-space-0_5);
+	}
+</style>

package/src/date-field/date-field.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'DateField',
+	description: 'Form-first locale-aware segmented date input',
+	category: 'form',
+	tags: ['date', 'input', 'field', 'segment', 'locale', 'form', 'date-input']
+};

package/src/date-field/index.ts

@@ -0,0 +1,23 @@
+import type { DateFieldRootProps as PrimitiveDateFieldRootProps } from '@dryui/primitives';
+
+export type { DateSegmentType } from '@dryui/primitives';
+
+export type { DateFieldSegmentProps, DateFieldSeparatorProps } from '@dryui/primitives';
+
+export interface DateFieldRootProps extends PrimitiveDateFieldRootProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+
+import DateFieldRoot from './date-field-input-root.svelte';
+import DateFieldSegment from './date-field-segment.svelte';
+import DateFieldSeparator from './date-field-separator.svelte';
+
+export const DateField: {
+	Root: typeof DateFieldRoot;
+	Segment: typeof DateFieldSegment;
+	Separator: typeof DateFieldSeparator;
+} = {
+	Root: DateFieldRoot,
+	Segment: DateFieldSegment,
+	Separator: DateFieldSeparator
+};

package/src/date-picker/context.svelte.ts

@@ -0,0 +1,27 @@
+import { createContext } from '@dryui/primitives';
+
+export interface DatePickerContext {
+	readonly open: boolean;
+	readonly value: Date | null;
+	readonly focusedDate: Date;
+	readonly viewMonth: number; // 0-11
+	readonly viewYear: number;
+	readonly locale: string;
+	readonly min: Date | null;
+	readonly max: Date | null;
+	readonly disabled: boolean;
+	readonly weekStartDay: number;
+	readonly triggerId: string;
+	readonly contentId: string;
+	triggerEl: HTMLElement | null;
+	show: () => void;
+	close: () => void;
+	toggle: () => void;
+	select: (date: Date) => void;
+	goToMonth: (month: number) => void;
+	goToYear: (year: number) => void;
+	nextMonth: () => void;
+	prevMonth: () => void;
+	setFocusedDate: (date: Date) => void;
+}
+export const [setDatePickerCtx, getDatePickerCtx] = createContext<DatePickerContext>('date-picker');

package/src/date-picker/date-picker.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'DatePicker',
+	description: 'Calendar popup date picker with locale support',
+	category: 'form',
+	tags: ['form', 'date', 'calendar', 'picker', 'locale', 'popover']
+};

package/src/date-picker/datepicker-button-calendar.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { isSameDay } from '@dryui/primitives';
+	import { getDatePickerCtx } from './context.svelte.js';
+	import CalendarGridButton, {
+		type CalendarGridAdapter
+	} from '../internal/calendar-grid-button.svelte';
+	import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+
+	interface Props extends CalendarEventGridProps {}
+
+	let props: Props = $props();
+
+	const ctx = getDatePickerCtx();
+
+	const adapter: CalendarGridAdapter = {
+		get viewYear() {
+			return ctx.viewYear;
+		},
+		get viewMonth() {
+			return ctx.viewMonth;
+		},
+		get locale() {
+			return ctx.locale;
+		},
+		get weekStartDay() {
+			return ctx.weekStartDay;
+		},
+		get focusedDate() {
+			return ctx.focusedDate;
+		},
+		get min() {
+			return ctx.min;
+		},
+		get max() {
+			return ctx.max;
+		},
+		get disabled() {
+			return ctx.disabled;
+		},
+		isSelected: (day) => (ctx.value ? isSameDay(day, ctx.value) : false),
+		isInRange: () => false,
+		isRangeStart: () => false,
+		isRangeEnd: () => false,
+		selectDate: (day) => {
+			ctx.select(day);
+			ctx.triggerEl?.focus();
+		},
+		setFocusedDate: (day) => ctx.setFocusedDate(day),
+		prevMonth: () => ctx.prevMonth(),
+		nextMonth: () => ctx.nextMonth(),
+		onEscape: () => {
+			ctx.close();
+			ctx.triggerEl?.focus();
+		}
+	};
+</script>
+
+<CalendarGridButton {adapter} {...props} />

package/src/date-picker/datepicker-button-trigger.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getDatePickerCtx } from './context.svelte.js';
+	import { formatDate } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		placeholder?: string;
+		size?: 'sm' | 'md' | 'lg';
+		children?: Snippet | undefined;
+	}
+
+	let { placeholder = 'Select date', children, size = 'md', ...rest }: Props = $props();
+
+	const ctx = getDatePickerCtx();
+
+	$effect(() => {
+		const node = document.getElementById(ctx.triggerId);
+		if (node) {
+			ctx.triggerEl = node as HTMLButtonElement;
+		}
+		return () => {
+			if (ctx.triggerEl && ctx.triggerEl.id === ctx.triggerId) {
+				ctx.triggerEl = null;
+			}
+		};
+	});
+
+	const displayText = $derived(
+		ctx.value
+			? formatDate(ctx.value, ctx.locale, { year: 'numeric', month: 'long', day: 'numeric' })
+			: ''
+	);
+</script>
+
+<Button
+	variant="outline"
+	type="button"
+	{size}
+	id={ctx.triggerId}
+	aria-haspopup="dialog"
+	aria-expanded={ctx.open}
+	aria-controls={ctx.contentId}
+	data-state={ctx.open ? 'open' : 'closed'}
+	data-disabled={ctx.disabled ? '' : undefined}
+	disabled={ctx.disabled}
+	popovertarget={ctx.contentId}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<span data-placeholder={!ctx.value ? '' : undefined}>
+			{displayText || placeholder}
+		</span>
+	{/if}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		aria-hidden="true"
+		><rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line
+			x1="16"
+			y1="2"
+			x2="16"
+			y2="6"
+		/><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></svg
+	>
+</Button>

package/src/date-picker/datepicker-content.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Placement } from '@dryui/primitives';
+	import PickerPopoverContent from '../internal/picker-popover-content.svelte';
+	import { getDatePickerCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		placement?: Placement;
+		offset?: number;
+		children: Snippet;
+	}
+
+	let {
+		placement = 'bottom-start',
+		offset = 8,
+		children,
+		style,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const ctx = getDatePickerCtx();
+</script>
+
+<PickerPopoverContent
+	controller={ctx}
+	dataAttribute="data-dp-content"
+	{placement}
+	{offset}
+	contentStyle={style}
+	contentClass={className}
+	{children}
+	{...rest}
+/>

package/src/date-picker/datepicker-input-root.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		createDateViewController,
+		createPickerPopoverController
+	} from '../internal/date-family-controller.svelte.js';
+	import { setDatePickerCtx } from './context.svelte.js';
+
+	interface Props {
+		open?: boolean;
+		value?: Date | null;
+		name?: string;
+		locale?: string;
+		min?: Date | null;
+		max?: Date | null;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		value = $bindable<Date | null>(null),
+		name,
+		locale = 'en-US',
+		min = null,
+		max = null,
+		disabled = false,
+		children
+	}: Props = $props();
+	const uid = $props.id();
+
+	const view = createDateViewController({
+		initialDate: value,
+		locale: () => locale
+	});
+
+	const popover = createPickerPopoverController({
+		triggerIdPrefix: 'datepicker-trigger',
+		contentIdPrefix: 'datepicker-content',
+		uid,
+		open: () => open,
+		setOpen: (nextOpen) => {
+			open = nextOpen;
+		},
+		disabled: () => disabled
+	});
+
+	function serializeDateValue(date: Date | null): string {
+		if (!date) return '';
+
+		const year = String(date.getFullYear());
+		const monthValue = String(date.getMonth() + 1).padStart(2, '0');
+		const dayValue = String(date.getDate()).padStart(2, '0');
+
+		return `${year}-${monthValue}-${dayValue}`;
+	}
+
+	setDatePickerCtx({
+		get open() {
+			return open;
+		},
+		get value() {
+			return value;
+		},
+		get focusedDate() {
+			return view.focusedDate;
+		},
+		get viewMonth() {
+			return view.viewMonth;
+		},
+		get viewYear() {
+			return view.viewYear;
+		},
+		get locale() {
+			return locale;
+		},
+		get min() {
+			return min;
+		},
+		get max() {
+			return max;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get weekStartDay() {
+			return view.weekStartDay;
+		},
+		get triggerId() {
+			return popover.triggerId;
+		},
+		get contentId() {
+			return popover.contentId;
+		},
+		get triggerEl() {
+			return popover.triggerEl;
+		},
+		set triggerEl(element: HTMLElement | null) {
+			popover.setTriggerEl(element);
+		},
+		show() {
+			popover.show();
+		},
+		close() {
+			popover.close();
+		},
+		toggle() {
+			popover.toggle();
+		},
+		select(date: Date) {
+			value = date;
+			view.setFocusedDate(date);
+			popover.close();
+		},
+		goToMonth(month: number) {
+			view.goToMonth(month);
+		},
+		goToYear(year: number) {
+			view.goToYear(year);
+		},
+		nextMonth() {
+			view.nextMonth();
+		},
+		prevMonth() {
+			view.prevMonth();
+		},
+		setFocusedDate(date: Date) {
+			view.setFocusedDate(date);
+		}
+	});
+</script>
+
+{@render children()}
+
+{#if name}
+	<input type="hidden" {name} value={serializeDateValue(value)} disabled={disabled || undefined} />
+{/if}

package/src/date-picker/index.ts

@@ -0,0 +1,27 @@
+import type { DatePickerTriggerProps as PrimitiveDatePickerTriggerProps } from '@dryui/primitives';
+import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+
+export type { DatePickerRootProps, DatePickerContentProps } from '@dryui/primitives';
+
+export interface DatePickerTriggerProps extends PrimitiveDatePickerTriggerProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+
+export interface DatePickerCalendarProps extends CalendarEventGridProps {}
+
+import DatePickerRoot from './datepicker-input-root.svelte';
+import DatePickerTrigger from './datepicker-button-trigger.svelte';
+import DatePickerContent from './datepicker-content.svelte';
+import DatePickerCalendar from './datepicker-button-calendar.svelte';
+
+export const DatePicker: {
+	Root: typeof DatePickerRoot;
+	Trigger: typeof DatePickerTrigger;
+	Content: typeof DatePickerContent;
+	Calendar: typeof DatePickerCalendar;
+} = {
+	Root: DatePickerRoot,
+	Trigger: DatePickerTrigger,
+	Content: DatePickerContent,
+	Calendar: DatePickerCalendar
+};

package/src/date-range-picker/context.svelte.ts

@@ -0,0 +1,30 @@
+import { createContext } from '@dryui/primitives';
+
+export interface DateRangePickerContext {
+	readonly open: boolean;
+	readonly startDate: Date | null;
+	readonly endDate: Date | null;
+	readonly focusedDate: Date;
+	readonly viewMonth: number; // 0-11
+	readonly viewYear: number;
+	readonly locale: string;
+	readonly min: Date | null;
+	readonly max: Date | null;
+	readonly disabled: boolean;
+	readonly weekStartDay: number;
+	readonly hoverDate: Date | null;
+	readonly selecting: 'start' | 'end';
+	readonly triggerId: string;
+	readonly contentId: string;
+	triggerEl: HTMLElement | null;
+	show: () => void;
+	close: () => void;
+	toggle: () => void;
+	selectDate: (date: Date) => void;
+	setHoverDate: (date: Date | null) => void;
+	nextMonth: () => void;
+	prevMonth: () => void;
+	setFocusedDate: (date: Date) => void;
+}
+export const [setDateRangePickerCtx, getDateRangePickerCtx] =
+	createContext<DateRangePickerContext>('date-range-picker');