@dryui/ui 3.0.0 → 4.0.0

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

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { isSameDay } from '@dryui/primitives';
+	import { getDateRangePickerCtx } 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 = getDateRangePickerCtx();
+
+	function isInPreviewRange(day: Date): boolean {
+		if (ctx.selecting !== 'end' || !ctx.startDate || !ctx.hoverDate) return false;
+		const time = day.getTime();
+		const startTime = ctx.startDate.getTime();
+		const hoverTime = ctx.hoverDate.getTime();
+		const lo = Math.min(startTime, hoverTime);
+		const hi = Math.max(startTime, hoverTime);
+		return time >= lo && time <= hi;
+	}
+
+	function isInSelectedRange(day: Date): boolean {
+		if (!ctx.startDate || !ctx.endDate) return false;
+		const time = day.getTime();
+		return time > ctx.startDate.getTime() && time < ctx.endDate.getTime();
+	}
+
+	function isRangeStart(day: Date): boolean {
+		if (!ctx.startDate) return false;
+		if (ctx.endDate) return isSameDay(day, ctx.startDate);
+		if (
+			ctx.selecting === 'end' &&
+			ctx.hoverDate &&
+			ctx.hoverDate.getTime() < ctx.startDate.getTime()
+		) {
+			return isSameDay(day, ctx.hoverDate);
+		}
+		return isSameDay(day, ctx.startDate);
+	}
+
+	function isRangeEnd(day: Date): boolean {
+		if (ctx.endDate) return isSameDay(day, ctx.endDate);
+		if (ctx.selecting === 'end' && ctx.startDate && ctx.hoverDate) {
+			if (ctx.hoverDate.getTime() < ctx.startDate.getTime()) return isSameDay(day, ctx.startDate);
+			return isSameDay(day, ctx.hoverDate);
+		}
+		return false;
+	}
+
+	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) => isRangeStart(day) || isRangeEnd(day),
+		isInRange: (day) => isInSelectedRange(day) || isInPreviewRange(day),
+		isRangeStart,
+		isRangeEnd,
+		selectDate: (day) => ctx.selectDate(day),
+		setFocusedDate: (day) => ctx.setFocusedDate(day),
+		prevMonth: () => ctx.prevMonth(),
+		nextMonth: () => ctx.nextMonth(),
+		onEscape: () => {
+			ctx.close();
+			ctx.triggerEl?.focus();
+		},
+		onHover: (day) => {
+			if (ctx.selecting === 'end') ctx.setHoverDate(day);
+		}
+	};
+</script>
+
+<CalendarGridButton {adapter} {...props} />

package/src/date-range-picker/date-range-picker-button-preset.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getDateRangePickerCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		startDate: Date;
+		endDate: Date;
+		children: Snippet;
+	}
+
+	let { startDate, endDate, children, ...rest }: Props = $props();
+
+	const ctx = getDateRangePickerCtx();
+
+	function handleClick() {
+		ctx.selectDate(startDate);
+		ctx.selectDate(endDate);
+	}
+</script>
+
+<Button variant="pill" size="sm" type="button" {...rest} onclick={handleClick}>
+	{@render children()}
+</Button>

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

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
+	import { getDateRangePickerCtx } from './context.svelte.js';
+	import { formatDate } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		size?: 'sm' | 'md' | 'lg';
+		placeholder?: string;
+		children?: Snippet | undefined;
+	}
+
+	let { size = 'md', placeholder = 'Select date range', children, ...rest }: Props = $props();
+
+	const ctx = getDateRangePickerCtx();
+
+	let triggerEl = $state<HTMLButtonElement>();
+
+	$effect(() => {
+		if (!triggerEl) return;
+		ctx.triggerEl = triggerEl;
+		return () => {
+			if (ctx.triggerEl === triggerEl) ctx.triggerEl = null;
+		};
+	});
+
+	const formatOpts: Intl.DateTimeFormatOptions = {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric'
+	};
+
+	const displayText = $derived.by(() => {
+		if (ctx.startDate && ctx.endDate) {
+			return `${formatDate(ctx.startDate, ctx.locale, formatOpts)} – ${formatDate(ctx.endDate, ctx.locale, formatOpts)}`;
+		}
+		if (ctx.startDate) {
+			return formatDate(ctx.startDate, ctx.locale, formatOpts);
+		}
+		return '';
+	});
+</script>
+
+<span class="wrapper">
+	<button
+		bind:this={triggerEl}
+		type="button"
+		id={ctx.triggerId}
+		popovertarget={ctx.contentId}
+		aria-haspopup="dialog"
+		aria-expanded={ctx.open}
+		aria-controls={ctx.contentId}
+		data-state={ctx.open ? 'open' : 'closed'}
+		data-date-range-trigger
+		disabled={ctx.disabled}
+		data-disabled={ctx.disabled || undefined}
+		{...variantAttrs({ size })}
+		{...rest}
+	>
+		<span data-content>
+			{#if children}
+				{@render children()}
+			{:else}
+				<span data-placeholder={!ctx.startDate ? '' : 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="17" 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-range-trigger] {
+		/* Form-control surface — derives from --dry-form-control-* so it stays
+		   visually consistent with <Input>/<Select.Trigger>, regardless of
+		   ambient --dry-btn-* overrides from a surrounding container's nested radius. */
+		--_drt-bg: var(--dry-date-range-trigger-bg, var(--dry-form-control-bg));
+		--_drt-border: var(--dry-date-range-trigger-border, var(--dry-form-control-border));
+		--_drt-color: var(--dry-date-range-trigger-color, var(--dry-form-control-color));
+		--_drt-radius: var(--dry-date-range-trigger-radius, var(--dry-form-control-radius));
+		--_drt-padding-x: var(
+			--dry-date-range-trigger-padding-x,
+			var(--dry-form-control-padding-inline)
+		);
+		--_drt-padding-y: var(
+			--dry-date-range-trigger-padding-y,
+			var(--dry-form-control-padding-block)
+		);
+		--_drt-font-size: var(--dry-date-range-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(--_drt-padding-y);
+		padding-inline: var(--_drt-padding-x);
+		font-size: var(--_drt-font-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--_drt-color);
+		background: var(--_drt-bg);
+		border: 1px solid var(--_drt-border);
+		border-radius: var(--_drt-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-range-trigger] [data-content] {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	[data-date-range-trigger] [data-placeholder] {
+		color: var(--dry-form-control-color-placeholder);
+	}
+
+	[data-date-range-trigger]:hover:not([data-disabled]) {
+		border-color: var(--dry-form-control-border-hover);
+	}
+
+	[data-date-range-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-range-trigger][data-disabled] {
+		--dry-date-range-trigger-bg: var(--dry-color-bg-sunken);
+		--dry-date-range-trigger-border: var(--dry-color-stroke-disabled);
+		--dry-date-range-trigger-color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+	}
+
+	[data-date-range-trigger][data-size='sm'] {
+		--dry-date-range-trigger-padding-x: var(--dry-space-2);
+		--dry-date-range-trigger-padding-y: var(--dry-space-1);
+		--dry-date-range-trigger-font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	[data-date-range-trigger][data-size='md'] {
+		--dry-date-range-trigger-padding-x: var(--dry-space-3);
+		--dry-date-range-trigger-padding-y: var(--dry-space-2);
+		--dry-date-range-trigger-font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+	}
+
+	[data-date-range-trigger][data-size='lg'] {
+		--dry-date-range-trigger-padding-x: var(--dry-space-4);
+		--dry-date-range-trigger-padding-y: var(--dry-space-2_5);
+		--dry-date-range-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-range-picker/date-range-picker-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 { getDateRangePickerCtx } 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 = getDateRangePickerCtx();
+</script>
+
+<PickerPopoverContent
+	controller={ctx}
+	dataAttribute="data-drp-content"
+	{placement}
+	{offset}
+	contentStyle={style}
+	contentClass={className}
+	{children}
+	{...rest}
+/>

package/src/date-range-picker/date-range-picker-root.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		createDateViewController,
+		createPickerPopoverController
+	} from '../internal/date-family-controller.svelte.js';
+	import { setDateRangePickerCtx } from './context.svelte.js';
+
+	interface Props {
+		open?: boolean;
+		startDate?: Date | null;
+		endDate?: Date | null;
+		locale?: string;
+		min?: Date | null;
+		max?: Date | null;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		startDate = $bindable<Date | null>(null),
+		endDate = $bindable<Date | null>(null),
+		locale = 'en-US',
+		min = null,
+		max = null,
+		disabled = false,
+		children
+	}: Props = $props();
+	const uid = $props.id();
+
+	const view = createDateViewController({
+		initialDate: startDate,
+		locale: () => locale
+	});
+
+	// Hover date for range preview
+	let hoverDate = $state<Date | null>(null);
+
+	// Selection mode: 'start' means next click sets start, 'end' means next click sets end
+	let selecting = $state<'start' | 'end'>('start');
+
+	const popover = createPickerPopoverController({
+		triggerIdPrefix: 'date-range-picker-trigger',
+		contentIdPrefix: 'date-range-picker-content',
+		uid,
+		open: () => open,
+		setOpen: (nextOpen) => {
+			open = nextOpen;
+		},
+		disabled: () => disabled,
+		onShow: () => {
+			selecting = 'start';
+		},
+		onClose: () => {
+			hoverDate = null;
+		}
+	});
+
+	setDateRangePickerCtx({
+		get open() {
+			return open;
+		},
+		get startDate() {
+			return startDate;
+		},
+		get endDate() {
+			return endDate;
+		},
+		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 hoverDate() {
+			return hoverDate;
+		},
+		get selecting() {
+			return selecting;
+		},
+		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();
+		},
+		selectDate(date: Date) {
+			if (selecting === 'start') {
+				startDate = date;
+				endDate = null;
+				selecting = 'end';
+				view.focusDate(date);
+			} else {
+				// 'end' mode
+				if (startDate && date.getTime() < startDate.getTime()) {
+					// Swap: clicked date becomes start, previous start becomes end
+					endDate = startDate;
+					startDate = date;
+				} else {
+					endDate = date;
+				}
+				selecting = 'start';
+				popover.close();
+			}
+		},
+		setHoverDate(date: Date | null) {
+			hoverDate = date;
+		},
+		nextMonth() {
+			view.nextMonth();
+		},
+		prevMonth() {
+			view.prevMonth();
+		},
+		setFocusedDate(date: Date) {
+			view.setFocusedDate(date);
+		}
+	});
+</script>
+
+{@render children()}

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

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'DateRangePicker',
+	description: 'Date range selection with calendar popup',
+	category: 'form',
+	tags: ['date', 'range', 'picker', 'calendar', 'period']
+};

package/src/date-range-picker/index.ts

@@ -0,0 +1,30 @@
+import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+
+export type {
+	DateRangePickerRootProps,
+	DateRangePickerTriggerProps,
+	DateRangePickerContentProps,
+	DateRangePickerPresetProps
+} from '@dryui/primitives';
+
+export interface DateRangePickerCalendarProps extends CalendarEventGridProps {}
+
+import DateRangePickerRoot from './date-range-picker-root.svelte';
+import DateRangePickerTrigger from './date-range-picker-button-trigger.svelte';
+import DateRangePickerContent from './date-range-picker-content.svelte';
+import DateRangePickerCalendar from './date-range-picker-button-calendar.svelte';
+import DateRangePickerPreset from './date-range-picker-button-preset.svelte';
+
+export const DateRangePicker: {
+	Root: typeof DateRangePickerRoot;
+	Trigger: typeof DateRangePickerTrigger;
+	Content: typeof DateRangePickerContent;
+	Calendar: typeof DateRangePickerCalendar;
+	Preset: typeof DateRangePickerPreset;
+} = {
+	Root: DateRangePickerRoot,
+	Trigger: DateRangePickerTrigger,
+	Content: DateRangePickerContent,
+	Calendar: DateRangePickerCalendar,
+	Preset: DateRangePickerPreset
+};

package/src/date-time-input/date-time-input.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'DateTimeInput',
+	description: 'Combined date and time input with locale-aware segments',
+	category: 'input',
+	tags: ['date', 'time', 'datetime', 'input', 'form', 'locale']
+};

package/src/date-time-input/date-time-input.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { DatePicker } from '../date-picker/index.js';
+	import { TimeInput } from '../time-input/index.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: Date;
+		min?: Date;
+		max?: Date;
+		disabled?: boolean;
+		locale?: string;
+		name?: string;
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let {
+		value = $bindable(new Date()),
+		min,
+		max,
+		disabled = false,
+		locale = 'en-US',
+		name,
+		size = 'md',
+		class: className,
+		...rest
+	}: Props = $props();
+
+	function toTimeString(d: Date): string {
+		return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+	}
+
+	let dateValue = $state<Date | null>(value);
+	let timeValue = $state(toTimeString(value));
+
+	let updating = false;
+
+	$effect(() => {
+		if (updating) return;
+		const v = value;
+		if (v) {
+			dateValue = new Date(v.getFullYear(), v.getMonth(), v.getDate());
+			timeValue = toTimeString(v);
+		}
+	});
+
+	$effect(() => {
+		if (!dateValue) return;
+		const [hStr, mStr] = timeValue.split(':');
+		const hours = parseInt(hStr ?? '0', 10);
+		const minutes = parseInt(mStr ?? '0', 10);
+
+		const combined = new Date(
+			dateValue.getFullYear(),
+			dateValue.getMonth(),
+			dateValue.getDate(),
+			hours,
+			minutes,
+			0,
+			0
+		);
+
+		if (min && combined < min) return;
+		if (max && combined > max) return;
+
+		if (combined.getTime() !== value.getTime()) {
+			updating = true;
+			value = combined;
+			updating = false;
+		}
+	});
+
+	const isoString = $derived(value ? value.toISOString() : '');
+</script>
+
+<div data-date-time-input class={className} {...rest}>
+	<div data-part="date-section">
+		<DatePicker.Root bind:value={dateValue} {locale} {disabled} min={min ?? null} max={max ?? null}>
+			<DatePicker.Trigger {size} />
+			<DatePicker.Content>
+				<DatePicker.Calendar />
+			</DatePicker.Content>
+		</DatePicker.Root>
+	</div>
+
+	<div data-part="time-section">
+		<TimeInput bind:value={timeValue} {disabled} {size} />
+	</div>
+
+	{#if name}
+		<input type="hidden" {name} value={isoString} {disabled} />
+	{/if}
+</div>
+
+<style>
+	[data-date-time-input] {
+		--dry-dti-gap: var(--dry-space-2, 0.5rem);
+
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-dti-gap);
+	}
+</style>

package/src/date-time-input/index.ts

@@ -0,0 +1,7 @@
+import type { DateTimeInputProps as PrimitiveDateTimeInputProps } from '@dryui/primitives';
+
+export interface DateTimeInputProps extends PrimitiveDateTimeInputProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+
+export { default as DateTimeInput } from './date-time-input.svelte';

package/src/description-list/description-list-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<dd data-description-list-dd class={className} {...rest}>
+	{@render children()}
+</dd>
+
+<style>
+	[data-description-list-dd] {
+		margin: 0;
+		font-size: var(--dry-description-list-description-size, var(--dry-type-small-size));
+		line-height: 1.6;
+		color: var(--dry-description-list-description-color, var(--dry-color-text-strong));
+	}
+</style>