@dryui/ui 0.0.1

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

@@ -0,0 +1,228 @@
+<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);
+
+		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/dist/data-grid/data-grid-root.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<T extends Record<string, unknown>>(): {
+	props: HTMLAttributes<HTMLDivElement> & {
+		items: T[];
+		pageSize?: number;
+		striped?: boolean;
+		selectable?: boolean;
+		onSelectionChange?: (selected: string[]) => void;
+		actionBar?: Snippet<[{ selectedCount: number; clearSelection: () => void }]>;
+		children: Snippet;
+	};
+	exports: {};
+	bindings: '';
+	slots: {};
+	events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+	props(): ReturnType<typeof $$render<T>>['props'];
+	events(): ReturnType<typeof $$render<T>>['events'];
+	slots(): ReturnType<typeof $$render<T>>['slots'];
+	bindings(): '';
+	exports(): {};
+}
+interface $$IsomorphicComponent {
+	new <T extends Record<string, unknown>>(
+		options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>
+	): import('svelte').SvelteComponent<
+		ReturnType<__sveltets_Render<T>['props']>,
+		ReturnType<__sveltets_Render<T>['events']>,
+		ReturnType<__sveltets_Render<T>['slots']>
+	> & {
+		$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+	} & ReturnType<__sveltets_Render<T>['exports']>;
+	<T extends Record<string, unknown>>(
+		internal: unknown,
+		props: ReturnType<__sveltets_Render<T>['props']> & {}
+	): ReturnType<__sveltets_Render<T>['exports']>;
+	z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataGridRoot: $$IsomorphicComponent;
+type DataGridRoot<T extends Record<string, unknown>> = InstanceType<typeof DataGridRoot<T>>;
+export default DataGridRoot;

package/dist/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/dist/data-grid/data-grid-row.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLTableRowElement> {
+	rowId?: string;
+	children: Snippet;
+}
+declare const DataGridRow: import('svelte').Component<Props, {}, ''>;
+type DataGridRow = ReturnType<typeof DataGridRow>;
+export default DataGridRow;

package/dist/data-grid/data-grid-select-all.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDataGridCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLTableCellElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+
+	const ctx = getDataGridCtx();
+
+	let allPageSelected = $derived.by(() => {
+		if (ctx.pagedItems.length === 0) return false;
+		const pageIds = (ctx.pagedItems as Record<string, unknown>[]).map((item, i) =>
+			String(item.id ?? i)
+		);
+		return pageIds.every((id) => ctx.isSelected(id));
+	});
+
+	let somePageSelected = $derived.by(() => {
+		if (ctx.pagedItems.length === 0) return false;
+		const pageIds = (ctx.pagedItems as Record<string, unknown>[]).map((item, i) =>
+			String(item.id ?? i)
+		);
+		const selectedCount = pageIds.filter((id) => ctx.isSelected(id)).length;
+		return selectedCount > 0 && selectedCount < pageIds.length;
+	});
+</script>
+
+<th scope="col" data-dg-select-cell data-part="select-cell" class={className} {...rest}>
+	<input
+		type="checkbox"
+		checked={allPageSelected}
+		indeterminate={somePageSelected}
+		onchange={() => ctx.toggleSelectAll()}
+		aria-label="Select all rows"
+	/>
+</th>
+
+<style>
+	[data-dg-select-cell] {
+		padding: var(--dry-space-2);
+		display: grid;
+		place-items: center;
+	}
+
+	[data-dg-select-cell] input[type='checkbox'] {
+		aspect-ratio: 1;
+		height: 1rem;
+		cursor: pointer;
+		accent-color: var(--dry-color-fill-brand, #3b82f6);
+	}
+</style>

package/dist/data-grid/data-grid-select-all.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLTableCellElement> {}
+declare const DataGridSelectAll: import('svelte').Component<Props, {}, ''>;
+type DataGridSelectAll = ReturnType<typeof DataGridSelectAll>;
+export default DataGridSelectAll;

package/dist/data-grid/data-grid-select-cell.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDataGridCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLTableCellElement> {
+		rowId: string;
+		rowLabel?: string;
+	}
+
+	let { rowId, rowLabel, class: className, ...rest }: Props = $props();
+
+	const ctx = getDataGridCtx();
+
+	let selected = $derived(ctx.isSelected(rowId));
+	const selectionLabel = $derived(`Select row ${rowLabel ?? rowId}`);
+</script>
+
+<td role="gridcell" data-dg-select-cell data-part="select-cell" class={className} {...rest}>
+	<input
+		type="checkbox"
+		checked={selected}
+		onchange={() => ctx.toggleSelect(rowId)}
+		aria-label={selectionLabel}
+	/>
+</td>
+
+<style>
+	[data-dg-select-cell] {
+		padding: var(--dry-space-2);
+		display: grid;
+		place-items: center;
+	}
+
+	[data-dg-select-cell] input[type='checkbox'] {
+		aspect-ratio: 1;
+		height: 1rem;
+		cursor: pointer;
+		accent-color: var(--dry-color-fill-brand, #3b82f6);
+	}
+</style>

package/dist/data-grid/data-grid-select-cell.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLTableCellElement> {
+	rowId: string;
+}
+declare const DataGridSelectCell: import('svelte').Component<Props, {}, ''>;
+type DataGridSelectCell = ReturnType<typeof DataGridSelectCell>;
+export default DataGridSelectCell;

package/dist/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/dist/data-grid/data-grid-table.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLTableElement> {
+	children: Snippet;
+}
+declare const DataGridTable: import('svelte').Component<Props, {}, ''>;
+type DataGridTable = ReturnType<typeof DataGridTable>;
+export default DataGridTable;

package/dist/data-grid/index.d.ts

@@ -0,0 +1,54 @@
+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-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-pagination.svelte';
+import DataGridSelectAll from './data-grid-select-all.svelte';
+import DataGridSelectCell from './data-grid-select-cell.svelte';
+import DataGridExpandableRow from './data-grid-expandable-row.svelte';
+import DataGridExpandTrigger from './data-grid-expand-trigger.svelte';
+export declare 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;
+};

package/dist/data-grid/index.js

@@ -0,0 +1,26 @@
+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-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-pagination.svelte';
+import DataGridSelectAll from './data-grid-select-all.svelte';
+import DataGridSelectCell from './data-grid-select-cell.svelte';
+import DataGridExpandableRow from './data-grid-expandable-row.svelte';
+import DataGridExpandTrigger from './data-grid-expand-trigger.svelte';
+export const DataGrid = {
+    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/dist/date-field/context.svelte.d.ts

@@ -0,0 +1,26 @@
+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 declare const setDateFieldCtx: (ctx: DateFieldContext) => DateFieldContext, getDateFieldCtx: () => DateFieldContext;
+/**
+ * Detect segment order and separator from locale using Intl.DateTimeFormat.
+ */
+export declare function getLocaleFormat(locale: string): {
+    order: DateSegmentType[];
+    separator: string;
+};

package/dist/date-field/context.svelte.js

@@ -0,0 +1,31 @@
+import { createContext } from '@dryui/primitives';
+export const [setDateFieldCtx, getDateFieldCtx] = createContext('date-field');
+/**
+ * Detect segment order and separator from locale using Intl.DateTimeFormat.
+ */
+export function getLocaleFormat(locale) {
+    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 = [];
+    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 };
+}