@dryui/ui 3.0.0 → 4.0.1

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,174 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getDatePickerCtx } from './context.svelte.js';
+	import { formatDate, variantAttrs } 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();
+
+	let triggerEl = $state<HTMLButtonElement>();
+
+	$effect(() => {
+		if (!triggerEl) return;
+		ctx.triggerEl = triggerEl;
+		return () => {
+			if (ctx.triggerEl === triggerEl) ctx.triggerEl = null;
+		};
+	});
+
+	const displayText = $derived(
+		ctx.value
+			? formatDate(ctx.value, ctx.locale, { year: 'numeric', month: 'long', day: 'numeric' })
+			: ''
+	);
+</script>
+
+<span class="wrapper">
+	<button
+		bind:this={triggerEl}
+		type="button"
+		id={ctx.triggerId}
+		aria-haspopup="dialog"
+		aria-expanded={ctx.open}
+		aria-controls={ctx.contentId}
+		data-state={ctx.open ? 'open' : 'closed'}
+		data-date-picker-trigger
+		data-disabled={ctx.disabled || undefined}
+		disabled={ctx.disabled}
+		popovertarget={ctx.contentId}
+		{...variantAttrs({ size })}
+		{...rest}
+	>
+		<span data-content>
+			{#if children}
+				{@render children()}
+			{:else}
+				<span data-placeholder={!ctx.value ? '' : undefined}>
+					{displayText || placeholder}
+				</span>
+			{/if}
+		</span>
+		<svg
+			data-indicator
+			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" /><path
+				d="M16 2v4M8 2v4M3 10h18"
+			/></svg
+		>
+	</button>
+</span>
+
+<style>
+	.wrapper {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	[data-date-picker-trigger] {
+		--_dpt-bg: var(--dry-date-picker-trigger-bg, var(--dry-form-control-bg));
+		--_dpt-border: var(--dry-date-picker-trigger-border, var(--dry-form-control-border));
+		--_dpt-color: var(--dry-date-picker-trigger-color, var(--dry-form-control-color));
+		--_dpt-radius: var(--dry-date-picker-trigger-radius, var(--dry-form-control-radius));
+		--_dpt-padding-x: var(
+			--dry-date-picker-trigger-padding-x,
+			var(--dry-form-control-padding-inline)
+		);
+		--_dpt-padding-y: var(
+			--dry-date-picker-trigger-padding-y,
+			var(--dry-form-control-padding-block)
+		);
+		--_dpt-font-size: var(--dry-date-picker-trigger-font-size, var(--dry-form-control-font-size));
+
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding-block: var(--_dpt-padding-y);
+		padding-inline: var(--_dpt-padding-x);
+		font-size: var(--_dpt-font-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--_dpt-color);
+		background: var(--_dpt-bg);
+		border: 1px solid var(--_dpt-border);
+		border-radius: var(--_dpt-radius);
+		box-sizing: border-box;
+		appearance: none;
+		text-align: start;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-date-picker-trigger] [data-content] {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	[data-date-picker-trigger] [data-placeholder] {
+		color: var(--dry-form-control-color-placeholder);
+	}
+
+	[data-date-picker-trigger]:hover:not([data-disabled]) {
+		border-color: var(--dry-form-control-border-hover);
+	}
+
+	[data-date-picker-trigger]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: -1px;
+		border-color: var(--dry-color-stroke-focus);
+		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+	}
+
+	[data-date-picker-trigger][data-disabled] {
+		--dry-date-picker-trigger-bg: var(--dry-color-bg-sunken);
+		--dry-date-picker-trigger-border: var(--dry-color-stroke-disabled);
+		--dry-date-picker-trigger-color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+	}
+
+	[data-date-picker-trigger][data-size='sm'] {
+		--dry-date-picker-trigger-padding-x: var(--dry-space-2);
+		--dry-date-picker-trigger-padding-y: var(--dry-space-1);
+		--dry-date-picker-trigger-font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	[data-date-picker-trigger][data-size='md'] {
+		--dry-date-picker-trigger-padding-x: var(--dry-space-3);
+		--dry-date-picker-trigger-padding-y: var(--dry-space-2);
+		--dry-date-picker-trigger-font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+	}
+
+	[data-date-picker-trigger][data-size='lg'] {
+		--dry-date-picker-trigger-padding-x: var(--dry-space-4);
+		--dry-date-picker-trigger-padding-y: var(--dry-space-2_5);
+		--dry-date-picker-trigger-font-size: var(--dry-type-heading-4-size);
+		line-height: var(--dry-type-heading-4-leading);
+	}
+
+	svg[data-indicator] {
+		height: 1em;
+		aspect-ratio: 1;
+		place-self: center;
+		opacity: 0.7;
+	}
+</style>

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
+};