@glyphui/ui 0.3.0 → 0.5.0

package/dist/components/tree-view/tree-view.js

@@ -0,0 +1,192 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { treeViewStyles } from "./tree-view.styles.js";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tree-view/tree-view.tsx
+function flattenVisible(nodes, expanded) {
+	const out = [];
+	const walk = (list, level, parentId) => {
+		for (const node of list) {
+			out.push({
+				node,
+				level,
+				parentId
+			});
+			if (node.children?.length && expanded.has(node.id)) walk(node.children, level + 1, node.id);
+		}
+	};
+	walk(nodes, 1, null);
+	return out;
+}
+function textOf(node) {
+	return (node.textValue ?? (typeof node.label === "string" ? node.label : "")).toLowerCase();
+}
+const NO_IDS = [];
+/**
+* An accessible tree for file browsers and nested navigation. Arrow keys move and
+* expand/collapse, Home/End jump, typing a letter finds the next match, Enter or Space selects.
+*/
+function TreeView(inProps) {
+	const [props, slots] = useComponentConfig("TreeView", inProps);
+	const { nodes, expanded: expandedProp, defaultExpanded = NO_IDS, onExpandedChange, selected: selectedProp, defaultSelected = null, onSelect, size, className, ...rest } = props;
+	const [expandedList, setExpandedList] = useControllableState({
+		value: expandedProp,
+		defaultValue: defaultExpanded,
+		onChange: onExpandedChange
+	});
+	const [selected, setSelected] = useControllableState({
+		value: selectedProp,
+		defaultValue: defaultSelected
+	});
+	const expanded = useMemo(() => new Set(expandedList), [expandedList]);
+	const visible = useMemo(() => flattenVisible(nodes, expanded), [nodes, expanded]);
+	const [focusedId, setFocusedId] = useState(null);
+	const refs = useRef(/* @__PURE__ */ new Map());
+	const baseId = useId();
+	const tabbableId = focusedId && visible.some((v) => v.node.id === focusedId) && focusedId || selected && visible.some((v) => v.node.id === selected) && selected || visible[0]?.node.id;
+	const focus = useCallback((id) => {
+		if (!id) return;
+		setFocusedId(id);
+		refs.current.get(id)?.focus();
+	}, []);
+	const toggle = useCallback((id, open) => {
+		const isOpen = expanded.has(id);
+		const next = open ?? !isOpen;
+		if (next === isOpen) return;
+		setExpandedList(next ? [...expandedList, id] : expandedList.filter((x) => x !== id));
+	}, [
+		expanded,
+		expandedList,
+		setExpandedList
+	]);
+	const select = useCallback((node) => {
+		if (node.disabled) return;
+		setSelected(node.id);
+		onSelect?.(node.id, node);
+	}, [onSelect, setSelected]);
+	const onKeyDown = (event) => {
+		const index = visible.findIndex((v) => v.node.id === tabbableId);
+		const current = visible[index];
+		if (!current) return;
+		const { node } = current;
+		const hasChildren = Boolean(node.children?.length);
+		const isOpen = expanded.has(node.id);
+		let handled = true;
+		switch (event.key) {
+			case "ArrowDown":
+				focus(visible[index + 1]?.node.id);
+				break;
+			case "ArrowUp":
+				focus(visible[index - 1]?.node.id);
+				break;
+			case "ArrowRight":
+				if (hasChildren && !isOpen) toggle(node.id, true);
+				else if (hasChildren) focus(node.children?.[0]?.id);
+				break;
+			case "ArrowLeft":
+				if (hasChildren && isOpen) toggle(node.id, false);
+				else if (current.parentId) focus(current.parentId);
+				break;
+			case "Home":
+				focus(visible[0]?.node.id);
+				break;
+			case "End":
+				focus(visible.at(-1)?.node.id);
+				break;
+			case "Enter":
+			case " ":
+				select(node);
+				break;
+			default:
+				handled = false;
+				if (event.key.length === 1 && /\S/.test(event.key) && !event.metaKey && !event.ctrlKey) {
+					const char = event.key.toLowerCase();
+					const match = [...visible.slice(index + 1), ...visible.slice(0, index + 1)].find((v) => textOf(v.node).startsWith(char));
+					if (match) {
+						focus(match.node.id);
+						handled = true;
+					}
+				}
+		}
+		if (handled) event.preventDefault();
+	};
+	const s = treeViewStyles({ size });
+	/** Clicks bubble from nested items; only handle the item whose own row was clicked. */
+	const onItemClick = (event, node, hasChildren) => {
+		if (event.target.closest("[data-slot=tree-row]")?.parentElement !== event.currentTarget) return;
+		focus(node.id);
+		if (hasChildren) toggle(node.id);
+		select(node);
+	};
+	const renderNodes = (list, level) => list.map((node, i) => {
+		const hasChildren = Boolean(node.children?.length);
+		const isOpen = hasChildren && expanded.has(node.id);
+		return /* @__PURE__ */ jsxs("div", {
+			ref: (el) => {
+				if (el) refs.current.set(node.id, el);
+				else refs.current.delete(node.id);
+			},
+			role: "treeitem",
+			"data-slot": "tree-item",
+			"aria-labelledby": `${baseId}-${node.id}`,
+			"aria-level": level,
+			"aria-setsize": list.length,
+			"aria-posinset": i + 1,
+			"aria-expanded": hasChildren ? isOpen : void 0,
+			"aria-selected": selected === node.id,
+			"aria-disabled": node.disabled || void 0,
+			tabIndex: node.id === tabbableId ? 0 : -1,
+			onFocus: (event) => {
+				if (event.target === event.currentTarget) setFocusedId(node.id);
+			},
+			onClick: (event) => onItemClick(event, node, hasChildren),
+			className: s.item({ class: slots.item }),
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-slot": "tree-row",
+				"data-state": isOpen ? "open" : "closed",
+				className: s.row({ class: slots.row }),
+				style: { paddingInlineStart: `calc(${level - 1} * 1rem + 0.25rem)` },
+				children: [
+					hasChildren ? /* @__PURE__ */ jsx("svg", {
+						"data-slot": "tree-chevron",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						"aria-hidden": "true",
+						className: s.chevron({ class: slots.chevron }),
+						children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+					}) : /* @__PURE__ */ jsx("span", { className: s.spacer({ class: slots.spacer }) }),
+					node.icon && /* @__PURE__ */ jsx("span", {
+						className: s.icon({ class: slots.icon }),
+						"aria-hidden": "true",
+						children: node.icon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: `${baseId}-${node.id}`,
+						className: s.label({ class: slots.label }),
+						children: node.label
+					})
+				]
+			}), isOpen && /* @__PURE__ */ jsx("div", {
+				role: "group",
+				className: s.group({ class: slots.group }),
+				children: renderNodes(node.children ?? [], level + 1)
+			})]
+		}, node.id);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "tree",
+		"data-slot": "tree-view",
+		onKeyDown,
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: renderNodes(nodes, 1)
+	});
+}
+//#endregion
+export { TreeView };

package/dist/components/tree-view/tree-view.styles.d.ts

@@ -0,0 +1,59 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/tree-view/tree-view.styles.d.ts
+export declare const treeViewStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      row: string;
+    };
+    md: {};
+  };
+}, {
+  root: string;
+  item: string[];
+  row: string[];
+  chevron: string;
+  spacer: string;
+  icon: string;
+  label: string;
+  group: string;
+}, undefined, {
+  size: {
+    sm: {
+      row: string;
+    };
+    md: {};
+  };
+}, {
+  root: string;
+  item: string[];
+  row: string[];
+  chevron: string;
+  spacer: string;
+  icon: string;
+  label: string;
+  group: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      row: string;
+    };
+    md: {};
+  };
+}, {
+  root: string;
+  item: string[];
+  row: string[];
+  chevron: string;
+  spacer: string;
+  icon: string;
+  label: string;
+  group: string;
+}>>;
+export type TreeViewVariants = VariantProps<typeof treeViewStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    TreeView: StylesEntry<typeof treeViewStyles>;
+  }
+}
+//#endregion

package/dist/components/tree-view/tree-view.styles.js

@@ -0,0 +1,32 @@
+"use client";
+import { transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/tree-view/tree-view.styles.ts
+const treeViewStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid gap-px text-small",
+		item: [
+			"outline-none",
+			"focus-visible:[&>[data-slot=tree-row]]:ring-2 focus-visible:[&>[data-slot=tree-row]]:ring-ring",
+			"aria-selected:[&>[data-slot=tree-row]]:bg-muted aria-selected:[&>[data-slot=tree-row]]:text-foreground aria-selected:[&>[data-slot=tree-row]]:font-medium",
+			"aria-disabled:[&>[data-slot=tree-row]]:pointer-events-none aria-disabled:[&>[data-slot=tree-row]]:opacity-50"
+		],
+		row: [
+			"group/row flex h-8 cursor-pointer select-none items-center gap-1.5 rounded-sm pr-2 text-muted-foreground",
+			transition,
+			"hover:bg-muted hover:text-foreground"
+		],
+		chevron: "size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-fast) ease-standard group-data-[state=open]/row:rotate-90",
+		spacer: "size-4 shrink-0",
+		icon: "flex size-4 shrink-0 items-center justify-center text-faint-foreground [&>svg]:size-4",
+		label: "min-w-0 flex-1 truncate",
+		group: "grid gap-px"
+	},
+	variants: { size: {
+		sm: { row: "h-7 text-caption" },
+		md: {}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { treeViewStyles };

package/dist/components/visually-hidden/index.d.ts

@@ -0,0 +1,2 @@
+import { VisuallyHidden } from "./visually-hidden.js";
+export { VisuallyHidden };

package/dist/components/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,10 @@
+import { VisuallyHidden } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/visually-hidden/visually-hidden.d.ts
+/**
+ * Hides content visually while keeping it available to screen readers, e.g. a label for an
+ * icon-only control or extra context in a table cell.
+ */
+declare function VisuallyHidden$1(props: ComponentProps<typeof VisuallyHidden.Root>): import("react").JSX.Element;
+//#endregion
+export { VisuallyHidden$1 as VisuallyHidden };

package/dist/components/visually-hidden/visually-hidden.js

@@ -0,0 +1,16 @@
+"use client";
+import { VisuallyHidden } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/visually-hidden/visually-hidden.tsx
+/**
+* Hides content visually while keeping it available to screen readers, e.g. a label for an
+* icon-only control or extra context in a table cell.
+*/
+function VisuallyHidden$1(props) {
+	return /* @__PURE__ */ jsx(VisuallyHidden.Root, {
+		"data-slot": "visually-hidden",
+		...props
+	});
+}
+//#endregion
+export { VisuallyHidden$1 as VisuallyHidden };

package/dist/data-table.d.ts

@@ -1,110 +1,3 @@
-import { t as VariantProps } from "./tv-DuMh7UH2.js";
-import { t as StylesEntry } from "./registry-BGSJoiLq.js";
-import { ReactNode } from "react";
-import { ColumnDef, ColumnDef as ColumnDef$1, RowData, SortingState, SortingState as SortingState$1, createColumnHelper } from "@tanstack/react-table";
-//#region src/patterns/data-table/data-table.d.ts
-declare module '@tanstack/react-table' {
-  interface ColumnMeta<TData extends RowData, TValue> {
-    /** Cell and header alignment. Use `right` for numbers. */
-    align?: 'left' | 'center' | 'right';
-    /** Extra classes for this column's cells. */
-    className?: string;
-  }
-}
-export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
-  variant: {
-    card: {
-      root: string[];
-      toolbar: string;
-      footer: string;
-    };
-    plain: {
-      root: string;
-    };
-  };
-}, {
-  root: string;
-  toolbar: string;
-  search: string;
-  actions: string;
-  sortButton: string[];
-  footer: string;
-  pager: string;
-}, undefined, {
-  variant: {
-    card: {
-      root: string[];
-      toolbar: string;
-      footer: string;
-    };
-    plain: {
-      root: string;
-    };
-  };
-}, {
-  root: string;
-  toolbar: string;
-  search: string;
-  actions: string;
-  sortButton: string[];
-  footer: string;
-  pager: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-  variant: {
-    card: {
-      root: string[];
-      toolbar: string;
-      footer: string;
-    };
-    plain: {
-      root: string;
-    };
-  };
-}, {
-  root: string;
-  toolbar: string;
-  search: string;
-  actions: string;
-  sortButton: string[];
-  footer: string;
-  pager: string;
-}>>;
-declare module '@glyphui/tokens' {
-  interface GlyphComponentRegistry {
-    DataTable: StylesEntry<typeof dataTableStyles>;
-  }
-}
-interface DataTableProps<T> extends VariantProps<typeof dataTableStyles> {
-  data: T[] | undefined;
-  /** Build with `createColumnHelper<T>()` for typed accessors. */
-  columns: ColumnDef$1<T, any>[];
-  /** Shows skeleton rows. */
-  loading?: boolean;
-  /** Shows an error state with a retry button when `onRetry` is set. */
-  error?: unknown;
-  onRetry?: () => unknown;
-  getRowId?: (row: T, index: number) => string;
-  /** Rows per page, or `false` to show every row. Default 10. */
-  pageSize?: number | false;
-  /** Adds a checkbox column. */
-  selectable?: boolean;
-  onSelectionChange?: (rows: T[]) => void;
-  /** Adds a search box that filters across all columns. */
-  search?: boolean | {
-    placeholder?: string;
-  };
-  /** Extra controls at the end of the toolbar (filters, buttons). */
-  toolbar?: ReactNode;
-  /** Shown when there are no rows at all (not when a search matches nothing). */
-  empty?: ReactNode;
-  initialSorting?: SortingState$1;
-  'aria-label'?: string;
-  className?: string;
-}
-/**
- * A table with sorting, search, pagination and row selection, plus built-in loading,
- * empty, no-results and error states. Columns are typed from your row type.
- */
-export declare function DataTable<T>(inProps: DataTableProps<T>): import("react").JSX.Element;
-//#endregion
-export { type ColumnDef, type DataTableProps, type SortingState, createColumnHelper };
+import { DataTable, DataTableProps, dataTableStyles } from "./patterns/data-table/data-table.js";
+import { ColumnDef, SortingState, createColumnHelper } from "@tanstack/react-table";
+export { type ColumnDef, DataTable, type DataTableProps, type SortingState, createColumnHelper, dataTableStyles };

package/dist/data-table.js

@@ -1,226 +1,4 @@
 "use client";
-import { a as themedBorder, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
-import { b as SearchIcon, h as ChevronsUpDownIcon, i as IconButton, l as ArrowDownIcon, m as ChevronRightIcon, p as ChevronLeftIcon, r as Button, u as ArrowUpIcon } from "./field-context-anGPYXbW.js";
-import { a as Table, c as TableCell, d as TableRow, h as Input, l as TableHead, n as ErrorState, o as TableBody, p as Skeleton, t as EmptyState, u as TableHeader, v as Checkbox } from "./states-DR-OoDT-.js";
-import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-//#region src/patterns/data-table/data-table.tsx
-const dataTableStyles = tv({
-	slots: {
-		root: "flex min-w-0 flex-col",
-		toolbar: "flex flex-wrap items-center gap-2",
-		search: "w-full sm:max-w-64",
-		actions: "ml-auto flex items-center gap-2",
-		sortButton: ["-ml-1.5 inline-flex cursor-pointer items-center gap-1 rounded-xs px-1.5 py-1 hover:text-foreground [&>svg]:size-3.5", focusRing],
-		footer: "flex flex-wrap items-center justify-between gap-3 text-small text-muted-foreground tabular-nums",
-		pager: "flex items-center gap-1"
-	},
-	variants: { variant: {
-		card: {
-			root: ["overflow-hidden rounded-lg border-border bg-surface shadow-sm", themedBorder],
-			toolbar: "border-b border-border p-3",
-			footer: "border-t border-border px-4 py-2.5"
-		},
-		plain: { root: "gap-3" }
-	} },
-	defaultVariants: { variant: "card" }
-});
-const alignClass = {
-	left: "text-left",
-	center: "text-center",
-	right: "text-right"
-};
-const NO_ROWS = [];
-function selectColumn() {
-	return {
-		id: "__select",
-		enableSorting: false,
-		enableGlobalFilter: false,
-		header: ({ table }) => /* @__PURE__ */ jsx(Checkbox, {
-			className: "mt-0",
-			"aria-label": "Select all rows on this page",
-			checked: table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false,
-			onCheckedChange: (value) => table.toggleAllPageRowsSelected(value === true)
-		}),
-		cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
-			className: "mt-0",
-			"aria-label": "Select row",
-			checked: row.getIsSelected(),
-			disabled: !row.getCanSelect(),
-			onCheckedChange: (value) => row.toggleSelected(value === true)
-		})
-	};
-}
-/**
-* A table with sorting, search, pagination and row selection, plus built-in loading,
-* empty, no-results and error states. Columns are typed from your row type.
-*/
-function DataTable(inProps) {
-	const [props, slots] = useComponentConfig("DataTable", inProps);
-	const { data, columns, loading = false, error, onRetry, getRowId, pageSize = 10, selectable = false, onSelectionChange, search = false, toolbar, empty, initialSorting = [], variant, className, "aria-label": ariaLabel } = props;
-	const [sorting, setSorting] = useState(initialSorting);
-	const [rowSelection, setRowSelection] = useState({});
-	const [globalFilter, setGlobalFilter] = useState("");
-	const allColumns = useMemo(() => selectable ? [selectColumn(), ...columns] : columns, [selectable, columns]);
-	const table = useReactTable({
-		data: data ?? NO_ROWS,
-		columns: allColumns,
-		state: {
-			sorting,
-			rowSelection,
-			globalFilter
-		},
-		onSortingChange: setSorting,
-		onRowSelectionChange: setRowSelection,
-		onGlobalFilterChange: setGlobalFilter,
-		enableRowSelection: selectable,
-		sortDescFirst: false,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		...getRowId && { getRowId },
-		...pageSize !== false && {
-			getPaginationRowModel: getPaginationRowModel(),
-			initialState: { pagination: {
-				pageIndex: 0,
-				pageSize
-			} }
-		}
-	});
-	useEffect(() => {
-		onSelectionChange?.(table.getSelectedRowModel().rows.map((row) => row.original));
-	}, [rowSelection]);
-	const s = dataTableStyles({ variant });
-	const columnCount = table.getVisibleLeafColumns().length;
-	const rows = table.getRowModel().rows;
-	const filteredTotal = table.getFilteredRowModel().rows.length;
-	const selectedCount = Object.keys(rowSelection).length;
-	const { pageIndex, pageSize: size } = table.getState().pagination;
-	const showFooter = pageSize !== false && !loading && !error && filteredTotal > 0;
-	const searchPlaceholder = typeof search === "object" ? search.placeholder : void 0;
-	const fullWidthRow = (content) => /* @__PURE__ */ jsx(TableRow, {
-		className: "hover:bg-transparent",
-		children: /* @__PURE__ */ jsx(TableCell, {
-			colSpan: columnCount,
-			className: "p-0",
-			children: content
-		})
-	});
-	let body;
-	if (loading) body = Array.from({ length: pageSize === false ? 5 : Math.min(pageSize, 8) }, (_, i) => /* @__PURE__ */ jsx(TableRow, {
-		className: "hover:bg-transparent",
-		children: table.getVisibleLeafColumns().map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: column.id === "__select" ? "size-4" : "h-4 w-[70%]" }) }, column.id))
-	}, i));
-	else if (error) body = fullWidthRow(/* @__PURE__ */ jsx(ErrorState, {
-		error,
-		onRetry
-	}));
-	else if (rows.length === 0) body = fullWidthRow(globalFilter ? /* @__PURE__ */ jsx(EmptyState, {
-		icon: /* @__PURE__ */ jsx(SearchIcon, {}),
-		title: `No results for “${globalFilter}”`,
-		description: "Check the spelling or try a shorter search.",
-		action: /* @__PURE__ */ jsx(Button, {
-			variant: "outline",
-			size: "sm",
-			onClick: () => setGlobalFilter(""),
-			children: "Clear search"
-		})
-	}) : empty ?? /* @__PURE__ */ jsx(EmptyState, { title: "No rows yet" }));
-	else body = rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
-		"data-state": row.getIsSelected() ? "selected" : void 0,
-		children: row.getVisibleCells().map((cell) => {
-			const meta = cell.column.columnDef.meta;
-			return /* @__PURE__ */ jsx(TableCell, {
-				className: [alignClass[meta?.align ?? "left"], meta?.className].join(" "),
-				children: flexRender(cell.column.columnDef.cell, cell.getContext())
-			}, cell.id);
-		})
-	}, row.id));
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "data-table",
-		className: s.root({ class: [slots.root, className] }),
-		children: [
-			(search || toolbar) && /* @__PURE__ */ jsxs("div", {
-				className: s.toolbar({ class: slots.toolbar }),
-				children: [search && /* @__PURE__ */ jsx(Input, {
-					size: "sm",
-					type: "search",
-					"aria-label": "Search rows",
-					placeholder: searchPlaceholder ?? "Search…",
-					prefix: /* @__PURE__ */ jsx(SearchIcon, {}),
-					value: globalFilter,
-					onChange: (event) => {
-						setGlobalFilter(event.target.value);
-						table.setPageIndex(0);
-					},
-					className: s.search({ class: slots.search })
-				}), toolbar && /* @__PURE__ */ jsx("div", {
-					className: s.actions({ class: slots.actions }),
-					children: toolbar
-				})]
-			}),
-			/* @__PURE__ */ jsxs(Table, {
-				"aria-label": ariaLabel,
-				"aria-busy": loading || void 0,
-				children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx(TableRow, {
-					className: "hover:bg-transparent",
-					children: group.headers.map((header) => {
-						const column = header.column;
-						const sorted = column.getIsSorted();
-						const align = column.columnDef.meta?.align ?? "left";
-						const label = header.isPlaceholder ? null : flexRender(column.columnDef.header, header.getContext());
-						return /* @__PURE__ */ jsx(TableHead, {
-							className: alignClass[align],
-							"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
-							children: column.getCanSort() && !header.isPlaceholder ? /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: column.getToggleSortingHandler(),
-								className: s.sortButton({ class: [slots.sortButton, align === "right" && "flex-row-reverse"] }),
-								children: [label, sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "opacity-40" })]
-							}) : label
-						}, header.id);
-					})
-				}, group.id)) }), /* @__PURE__ */ jsx(TableBody, { children: body })]
-			}),
-			showFooter && /* @__PURE__ */ jsxs("div", {
-				className: s.footer({ class: slots.footer }),
-				children: [/* @__PURE__ */ jsxs("p", { children: [
-					pageIndex * size + 1,
-					"–",
-					Math.min((pageIndex + 1) * size, filteredTotal),
-					" of",
-					" ",
-					filteredTotal,
-					selectedCount > 0 && /* @__PURE__ */ jsxs("span", {
-						className: "text-foreground",
-						children: [
-							" · ",
-							selectedCount,
-							" selected"
-						]
-					})
-				] }), /* @__PURE__ */ jsxs("div", {
-					className: s.pager({ class: slots.pager }),
-					children: [/* @__PURE__ */ jsx(IconButton, {
-						variant: "outline",
-						size: "sm",
-						icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
-						"aria-label": "Previous page",
-						disabled: !table.getCanPreviousPage(),
-						onClick: () => table.previousPage()
-					}), /* @__PURE__ */ jsx(IconButton, {
-						variant: "outline",
-						size: "sm",
-						icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
-						"aria-label": "Next page",
-						disabled: !table.getCanNextPage(),
-						onClick: () => table.nextPage()
-					})]
-				})]
-			})
-		]
-	});
-}
-//#endregion
+import { DataTable, dataTableStyles } from "./patterns/data-table/data-table.js";
+import { createColumnHelper } from "@tanstack/react-table";
 export { DataTable, createColumnHelper, dataTableStyles };