@dryui/ui 3.0.0 → 4.0.1

package/src/data-grid/data-grid-root.svelte

@@ -0,0 +1,229 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setDataGridCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		items: T[];
+		pageSize?: number;
+		striped?: boolean;
+		selectable?: boolean;
+		onSelectionChange?: (selected: string[]) => void;
+		actionBar?: Snippet<[{ selectedCount: number; clearSelection: () => void }]>;
+		children: Snippet;
+	}
+
+	let {
+		items,
+		pageSize = 10,
+		striped = false,
+		selectable = false,
+		onSelectionChange,
+		actionBar,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let sortColumn: string | null = $state(null);
+	let sortDirection: 'asc' | 'desc' = $state('asc');
+	let page: number = $state(1);
+	let filters: Record<string, string> = $state({});
+	let selectedItems: string[] = $state([]);
+	let expandedRows: string[] = $state([]);
+	let columnWidths: Record<string, number> = $state({});
+
+	let filteredItems = $derived.by(() => {
+		let result = items;
+		for (const [column, value] of Object.entries(filters)) {
+			if (value) {
+				const lowerValue = value.toLowerCase();
+				result = result.filter((item) => {
+					const cellValue = item[column];
+					if (cellValue == null) return false;
+					return String(cellValue).toLowerCase().includes(lowerValue);
+				});
+			}
+		}
+		return result;
+	});
+
+	let sortedItems = $derived.by(() => {
+		if (!sortColumn) return filteredItems;
+		const col = sortColumn;
+		const dir = sortDirection === 'asc' ? 1 : -1;
+		return [...filteredItems].sort((a, b) => {
+			const aVal = a[col];
+			const bVal = b[col];
+			if (aVal == null && bVal == null) return 0;
+			if (aVal == null) return 1;
+			if (bVal == null) return -1;
+			if (typeof aVal === 'number' && typeof bVal === 'number') {
+				return (aVal - bVal) * dir;
+			}
+			return String(aVal).localeCompare(String(bVal)) * dir;
+		});
+	});
+
+	let totalItems = $derived(sortedItems.length);
+	let totalPages = $derived(pageSize > 0 ? Math.max(1, Math.ceil(totalItems / pageSize)) : 1);
+
+	let pagedItems = $derived.by(() => {
+		if (pageSize <= 0) return sortedItems;
+		const start = (page - 1) * pageSize;
+		return sortedItems.slice(start, start + pageSize);
+	});
+
+	$effect(() => {
+		if (page > totalPages) {
+			page = totalPages;
+		}
+	});
+
+	function toggleSelect(id: string) {
+		if (selectedItems.includes(id)) {
+			selectedItems = selectedItems.filter((i) => i !== id);
+		} else {
+			selectedItems = [...selectedItems, id];
+		}
+		onSelectionChange?.(selectedItems);
+	}
+
+	function toggleSelectAll() {
+		const pageIds = pagedItems.map((item) =>
+			String((item as Record<string, unknown>).id ?? pagedItems.indexOf(item))
+		);
+		const allSelected = pageIds.every((id) => selectedItems.includes(id));
+		if (allSelected) {
+			selectedItems = selectedItems.filter((id) => !pageIds.includes(id));
+		} else {
+			const newIds = pageIds.filter((id) => !selectedItems.includes(id));
+			selectedItems = [...selectedItems, ...newIds];
+		}
+		onSelectionChange?.(selectedItems);
+	}
+
+	function isSelected(id: string) {
+		return selectedItems.includes(id);
+	}
+
+	function clearSelection() {
+		selectedItems = [];
+		onSelectionChange?.(selectedItems);
+	}
+
+	function toggleExpand(id: string) {
+		if (expandedRows.includes(id)) {
+			expandedRows = expandedRows.filter((i) => i !== id);
+		} else {
+			expandedRows = [...expandedRows, id];
+		}
+	}
+
+	function isExpanded(id: string) {
+		return expandedRows.includes(id);
+	}
+
+	function setColumnWidth(key: string, width: number) {
+		columnWidths = { ...columnWidths, [key]: width };
+	}
+
+	setDataGridCtx({
+		get sortColumn() {
+			return sortColumn;
+		},
+		get sortDirection() {
+			return sortDirection;
+		},
+		get page() {
+			return page;
+		},
+		get pageSize() {
+			return pageSize;
+		},
+		get totalItems() {
+			return totalItems;
+		},
+		get totalPages() {
+			return totalPages;
+		},
+		get filteredItems() {
+			return sortedItems;
+		},
+		get pagedItems() {
+			return pagedItems;
+		},
+		sort(column: string) {
+			if (sortColumn === column) {
+				sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+			} else {
+				sortColumn = column;
+				sortDirection = 'asc';
+			}
+		},
+		setPage(p: number) {
+			page = Math.max(1, Math.min(totalPages, p));
+		},
+		setFilter(column: string, value: string) {
+			filters = { ...filters, [column]: value };
+			page = 1;
+		},
+		getFilter(column: string) {
+			return filters[column] ?? '';
+		},
+		get selectable() {
+			return selectable;
+		},
+		get selectedItems() {
+			return selectedItems;
+		},
+		toggleSelect,
+		toggleSelectAll,
+		isSelected,
+		clearSelection,
+		get expandedRows() {
+			return expandedRows;
+		},
+		toggleExpand,
+		isExpanded,
+		get columnWidths() {
+			return columnWidths;
+		},
+		setColumnWidth
+	});
+</script>
+
+<div data-data-grid data-striped={striped ? '' : undefined} class={className} {...rest}>
+	{@render children()}
+	{#if actionBar && selectedItems.length > 0}
+		<div data-part="action-bar" role="toolbar" aria-label="Selection actions">
+			{@render actionBar({ selectedCount: selectedItems.length, clearSelection })}
+		</div>
+	{/if}
+</div>
+
+<style>
+	[data-data-grid] {
+		--dry-data-grid-border: var(--dry-color-stroke-weak);
+		--dry-data-grid-header-bg: var(--dry-color-bg-raised);
+		--dry-data-grid-row-hover: color-mix(in srgb, var(--dry-color-text-strong) 4%, transparent);
+		--dry-data-grid-row-stripe: color-mix(in srgb, var(--dry-color-text-strong) 2%, transparent);
+		--dry-data-grid-padding-x: var(--dry-space-3);
+		--dry-data-grid-padding-y: var(--dry-space-3);
+		--dry-data-grid-head-padding-y: var(--dry-space-2_5);
+		--dry-data-grid-sort-color: var(--dry-color-fill-brand);
+		--dry-data-grid-pagination-gap: var(--dry-space-2);
+
+		display: grid;
+		container-type: inline-size;
+		overflow-x: auto;
+	}
+
+	@container (max-width: 400px) {
+		[data-data-grid] {
+			--dry-data-grid-padding-x: var(--dry-space-2);
+			--dry-data-grid-padding-y: var(--dry-space-2);
+			--dry-data-grid-head-padding-y: var(--dry-space-1_5);
+		}
+	}
+</style>

package/src/data-grid/data-grid-row.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLTableRowElement> {
+		rowId?: string;
+		children: Snippet;
+	}
+
+	let { rowId, class: className, children, ...rest }: Props = $props();
+</script>
+
+<tr data-dg-row data-row-id={rowId ?? undefined} class={className} {...rest}>
+	{@render children()}
+</tr>
+
+<style>
+	[data-dg-row] {
+		border-bottom: 1px solid var(--dry-data-grid-border);
+		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-dg-row]:hover {
+		background: var(--dry-data-grid-row-hover);
+	}
+
+	[data-dg-row][data-expanded] {
+		border-bottom: none;
+	}
+
+	[data-dg-row][data-selected] {
+		background: var(--dry-color-fill-brand-weak, rgba(59, 130, 246, 0.05));
+	}
+
+	[data-dg-row][data-selected]:hover {
+		background: var(--dry-color-fill-brand-weak, rgba(59, 130, 246, 0.08));
+	}
+</style>

package/src/data-grid/data-grid-table.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLTableElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<table data-dg-table class={className} {...rest}>
+	{@render children()}
+</table>
+
+<style>
+	[data-dg-table] {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+</style>

package/src/data-grid/data-grid.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'DataGrid',
+	description: 'Enhanced table with sorting, filtering, and pagination',
+	category: 'display',
+	tags: ['data', 'grid', 'table', 'sort', 'filter', 'paginate']
+};

package/src/data-grid/index.ts

@@ -0,0 +1,75 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { DataGridRootProps as PrimitiveDataGridRootProps } from '@dryui/primitives';
+
+export type {
+	DataGridTableProps,
+	DataGridHeaderProps,
+	DataGridColumnProps,
+	DataGridBodyProps,
+	DataGridRowProps,
+	DataGridCellProps,
+	DataGridPaginationProps
+} from '@dryui/primitives';
+
+export interface DataGridRootProps<T = unknown> extends PrimitiveDataGridRootProps<T> {
+	striped?: boolean;
+}
+
+export interface DataGridSelectAllProps extends HTMLAttributes<HTMLTableCellElement> {}
+
+export interface DataGridSelectCellProps extends HTMLAttributes<HTMLTableCellElement> {
+	rowId: string;
+}
+
+export interface DataGridExpandableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+	rowId: string;
+	expandable: Snippet;
+	children: Snippet;
+}
+
+export interface DataGridExpandTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+	rowId: string;
+	children?: Snippet;
+}
+
+import DataGridRoot from './data-grid-root.svelte';
+import DataGridTable from './data-grid-table.svelte';
+import DataGridHeader from './data-grid-header.svelte';
+import DataGridColumn from './data-grid-button-input-column.svelte';
+import DataGridBody from './data-grid-body.svelte';
+import DataGridRow from './data-grid-row.svelte';
+import DataGridCell from './data-grid-cell.svelte';
+import DataGridPagination from './data-grid-button-pagination.svelte';
+import DataGridSelectAll from './data-grid-input-select-all.svelte';
+import DataGridSelectCell from './data-grid-input-select-cell.svelte';
+import DataGridExpandableRow from './data-grid-expandable-row.svelte';
+import DataGridExpandTrigger from './data-grid-button-expand-trigger.svelte';
+
+export const DataGrid: {
+	Root: typeof DataGridRoot;
+	Table: typeof DataGridTable;
+	Header: typeof DataGridHeader;
+	Column: typeof DataGridColumn;
+	Body: typeof DataGridBody;
+	Row: typeof DataGridRow;
+	Cell: typeof DataGridCell;
+	Pagination: typeof DataGridPagination;
+	SelectAll: typeof DataGridSelectAll;
+	SelectCell: typeof DataGridSelectCell;
+	ExpandableRow: typeof DataGridExpandableRow;
+	ExpandTrigger: typeof DataGridExpandTrigger;
+} = {
+	Root: DataGridRoot,
+	Table: DataGridTable,
+	Header: DataGridHeader,
+	Column: DataGridColumn,
+	Body: DataGridBody,
+	Row: DataGridRow,
+	Cell: DataGridCell,
+	Pagination: DataGridPagination,
+	SelectAll: DataGridSelectAll,
+	SelectCell: DataGridSelectCell,
+	ExpandableRow: DataGridExpandableRow,
+	ExpandTrigger: DataGridExpandTrigger
+};

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

@@ -0,0 +1,50 @@
+import { createContext } from '@dryui/primitives';
+
+export type DateSegmentType = 'month' | 'day' | 'year';
+
+export interface DateFieldContext {
+	readonly value: Date | null;
+	readonly locale: string;
+	readonly min: Date | null;
+	readonly max: Date | null;
+	readonly disabled: boolean;
+	readonly segmentOrder: DateSegmentType[];
+	readonly separator: string;
+	readonly segments: { type: DateSegmentType; value: number | null }[];
+	updateSegment: (type: DateSegmentType, val: number) => void;
+	registerSegment: (type: DateSegmentType, el: HTMLElement) => void;
+	unregisterSegment: (type: DateSegmentType) => void;
+	focusSegment: (type: DateSegmentType, direction: 'next' | 'prev') => void;
+}
+export const [setDateFieldCtx, getDateFieldCtx] = createContext<DateFieldContext>('date-field');
+
+/**
+ * Detect segment order and separator from locale using Intl.DateTimeFormat.
+ */
+export function getLocaleFormat(locale: string): { order: DateSegmentType[]; separator: string } {
+	const formatter = new Intl.DateTimeFormat(locale, {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit'
+	});
+	const parts = formatter.formatToParts(new Date(2000, 0, 1));
+
+	const order: DateSegmentType[] = [];
+	let separator = '/';
+
+	for (const part of parts) {
+		if (part.type === 'month') order.push('month');
+		else if (part.type === 'day') order.push('day');
+		else if (part.type === 'year') order.push('year');
+		else if (part.type === 'literal' && order.length > 0 && order.length < 3) {
+			separator = part.value;
+		}
+	}
+
+	// Fallback if detection fails
+	if (order.length !== 3) {
+		return { order: ['month', 'day', 'year'], separator: '/' };
+	}
+
+	return { order, separator };
+}

package/src/date-field/date-field-input-root.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { setDateFieldCtx, getLocaleFormat, type DateSegmentType } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: Date | null;
+		name?: string;
+		locale?: string;
+		min?: Date | null;
+		max?: Date | null;
+		disabled?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+	}
+
+	interface SegmentValues {
+		month: number | null;
+		day: number | null;
+		year: number | null;
+	}
+
+	let {
+		value = $bindable<Date | null>(null),
+		name,
+		locale = 'en-US',
+		min = null,
+		max = null,
+		disabled = false,
+		children,
+		class: className,
+		size = 'md',
+		...rest
+	}: Props = $props();
+
+	let draftValues = $state<SegmentValues | null>(null);
+
+	function getSegmentValues(date: Date | null): SegmentValues {
+		if (!date) {
+			return { month: null, day: null, year: null };
+		}
+
+		return {
+			month: date.getMonth() + 1,
+			day: date.getDate(),
+			year: date.getFullYear()
+		};
+	}
+
+	function commitSegments(nextValues: SegmentValues) {
+		if (
+			nextValues.month !== null &&
+			nextValues.day !== null &&
+			nextValues.year !== null &&
+			nextValues.year >= 1000
+		) {
+			const d = new Date(nextValues.year, nextValues.month - 1, nextValues.day);
+			if (d.getMonth() === nextValues.month - 1 && d.getDate() === nextValues.day) {
+				value = d;
+				draftValues = null;
+				return;
+			}
+		}
+
+		draftValues = nextValues;
+	}
+
+	const localeFormat = $derived(getLocaleFormat(locale));
+	const committedValues = $derived(getSegmentValues(value));
+	const activeValues = $derived(draftValues ?? committedValues);
+
+	const segments = $derived(
+		localeFormat.order.map((type) => ({
+			type,
+			value:
+				type === 'month'
+					? activeValues.month
+					: type === 'day'
+						? activeValues.day
+						: activeValues.year
+		}))
+	);
+
+	function focusPreferredSegment() {
+		const targetType =
+			segments.find((segment) => segment.value === null)?.type ?? localeFormat.order[0];
+		if (!targetType) return;
+		segmentElements.get(targetType)?.focus();
+	}
+
+	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}`;
+	}
+
+	// Segment element registry for index-based navigation
+	const segmentElements = new SvelteMap<DateSegmentType, HTMLElement>();
+
+	setDateFieldCtx({
+		get value() {
+			return value;
+		},
+		get locale() {
+			return locale;
+		},
+		get min() {
+			return min;
+		},
+		get max() {
+			return max;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get segmentOrder() {
+			return localeFormat.order;
+		},
+		get separator() {
+			return localeFormat.separator;
+		},
+		get segments() {
+			return segments;
+		},
+		updateSegment(type: DateSegmentType, val: number) {
+			commitSegments({
+				month: type === 'month' ? val : activeValues.month,
+				day: type === 'day' ? val : activeValues.day,
+				year: type === 'year' ? val : activeValues.year
+			});
+		},
+		registerSegment(type: DateSegmentType, el: HTMLElement) {
+			segmentElements.set(type, el);
+		},
+		unregisterSegment(type: DateSegmentType) {
+			segmentElements.delete(type);
+		},
+		focusSegment(type: DateSegmentType, direction: 'next' | 'prev') {
+			const order = localeFormat.order;
+			const idx = order.indexOf(type);
+			const targetIdx = direction === 'next' ? idx + 1 : idx - 1;
+			if (targetIdx >= 0 && targetIdx < order.length) {
+				const targetType = order[targetIdx]!;
+				const el = segmentElements.get(targetType);
+				el?.focus();
+			}
+		}
+	});
+
+	function handleMousedown(event: MouseEvent) {
+		if (disabled) return;
+		const target = event.target;
+		if (!(target instanceof HTMLElement)) return;
+		if (target.closest('[data-df-segment]')) return;
+
+		event.preventDefault();
+		focusPreferredSegment();
+	}
+</script>
+
+<div
+	role="group"
+	aria-label="Date"
+	data-df-wrapper
+	data-df-root
+	data-size={size}
+	data-disabled={disabled || undefined}
+	onmousedown={handleMousedown}
+	{...rest}
+	class={className}
+>
+	{@render children()}
+
+	{#if name}
+		<input
+			type="hidden"
+			{name}
+			value={serializeDateValue(value)}
+			disabled={disabled || undefined}
+		/>
+	{/if}
+</div>
+
+<style>
+	[data-df-wrapper] {
+		display: grid;
+	}
+
+	[data-df-root] {
+		--dry-df-bg: var(--dry-color-bg-raised);
+		--dry-df-border: var(--dry-color-stroke-strong);
+		--dry-df-color: var(--dry-color-text-strong);
+		--dry-df-radius: var(--dry-radius-md);
+		--dry-df-padding-x: var(--dry-space-3);
+		--dry-df-padding-y: var(--dry-space-2);
+		--dry-df-font-size: var(--dry-type-small-size);
+
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		padding: var(--dry-df-padding-y) var(--dry-df-padding-x);
+		font-size: var(--dry-df-font-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--dry-df-color);
+		background: var(--dry-df-bg);
+		border: 1px solid var(--dry-df-border);
+		border-radius: var(--dry-df-radius);
+		box-sizing: border-box;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-df-root]:hover:not([data-disabled]) {
+		border-color: var(--dry-color-stroke-strong);
+	}
+
+	[data-df-root]:focus-within:not([data-disabled]) {
+		outline: 2px solid var(--dry-color-stroke-focus);
+		outline-offset: -1px;
+		border-color: var(--dry-color-stroke-focus);
+	}
+
+	[data-df-root][data-disabled] {
+		--dry-df-bg: var(--dry-color-bg-sunken);
+		--dry-df-border: var(--dry-color-stroke-disabled);
+		--dry-df-color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+	}
+
+	[data-df-root][aria-invalid='true'],
+	[data-df-root][data-invalid] {
+		--dry-df-bg: var(--dry-color-fill-error-weak);
+		--dry-df-border: var(--dry-color-stroke-error);
+		--dry-df-color: var(--dry-color-text-error);
+	}
+
+	[data-df-root][aria-invalid='true']:hover:not([data-disabled]),
+	[data-df-root][data-invalid]:hover:not([data-disabled]) {
+		border-color: var(--dry-color-stroke-error);
+	}
+
+	[data-df-root][aria-invalid='true']:focus-within,
+	[data-df-root][data-invalid]:focus-within {
+		outline-color: var(--dry-color-stroke-error);
+		border-color: var(--dry-color-stroke-error);
+	}
+
+	/* ── Size variants ──────────────────────────────────────────────────── */
+
+	[data-df-root][data-size='sm'] {
+		--dry-df-padding-x: var(--dry-space-2);
+		--dry-df-padding-y: var(--dry-space-1);
+		--dry-df-font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	[data-df-root][data-size='md'] {
+		--dry-df-padding-x: var(--dry-space-3);
+		--dry-df-padding-y: var(--dry-space-2);
+		--dry-df-font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+	}
+
+	[data-df-root][data-size='lg'] {
+		--dry-df-padding-x: var(--dry-space-4);
+		--dry-df-padding-y: var(--dry-space-2_5);
+		--dry-df-font-size: var(--dry-type-heading-4-size);
+		line-height: var(--dry-type-heading-4-leading);
+	}
+
+	@container (max-width: 200px) {
+		[data-df-root] {
+			--dry-df-padding-x: var(--dry-space-2);
+		}
+	}
+</style>