@glyphui/ui 0.4.0 → 0.5.0

package/dist/patterns/chart/sparkline.d.ts

@@ -0,0 +1,20 @@
+import { ChartColorValue } from "./chart-parts.js";
+//#region src/patterns/chart/sparkline.d.ts
+export interface SparklineProps {
+  values: readonly number[];
+  /** Accessible description, e.g. "Revenue over the last 12 months, rising". */
+  title: string;
+  color?: ChartColorValue;
+  /** Height in pixels. Default 36. */
+  height?: number;
+  /** `area` (default) fills under the line, `line` is just the stroke, `bar` draws columns. */
+  variant?: 'area' | 'line' | 'bar';
+  /** @deprecated Use `variant="line"` for no fill. */
+  area?: boolean;
+  /** Mark the highest and lowest points. */
+  showMinMax?: boolean;
+  className?: string;
+}
+/** A tiny trend without axes, for stat cards and table cells. */
+export declare function Sparkline({ values, title, color, height, variant, area, showMinMax, className }: SparklineProps): import("react").JSX.Element;
+//#endregion

package/dist/patterns/chart/sparkline.js

@@ -0,0 +1,102 @@
+"use client";
+import { resolveColor, useChartAnimation } from "./chart-parts.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as R from "recharts";
+//#region src/patterns/chart/sparkline.tsx
+/** A tiny trend without axes, for stat cards and table cells. */
+function Sparkline({ values, title, color, height = 36, variant, area, showMinMax = false, className }) {
+	const id = useId().replace(/:/g, "");
+	const animation = useChartAnimation();
+	const stroke = resolveColor(color, 0);
+	const kind = variant ?? (area === false ? "line" : "area");
+	const data = values.map((v, i) => ({
+		i,
+		v
+	}));
+	const maxIndex = values.indexOf(Math.max(...values));
+	const minIndex = values.indexOf(Math.min(...values));
+	const margin = {
+		top: showMinMax ? 4 : 2,
+		right: showMinMax ? 4 : 2,
+		bottom: showMinMax ? 4 : 2,
+		left: showMinMax ? 4 : 2
+	};
+	const marker = (props) => {
+		const { cx, cy, index } = props;
+		if (!showMinMax || cx === void 0 || cy === void 0) return /* @__PURE__ */ jsx("g", {}, index);
+		if (index !== maxIndex && index !== minIndex) return /* @__PURE__ */ jsx("g", {}, index);
+		return /* @__PURE__ */ jsx("circle", {
+			"data-extreme": index === maxIndex ? "max" : "min",
+			cx,
+			cy,
+			r: 2.75,
+			fill: index === maxIndex ? stroke : "var(--glyph-surface)",
+			stroke,
+			strokeWidth: 1.5
+		}, index);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "img",
+		"aria-label": title,
+		"data-slot": "sparkline",
+		"data-variant": kind,
+		className,
+		style: { height },
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: kind === "bar" ? /* @__PURE__ */ jsx(R.BarChart, {
+				accessibilityLayer: false,
+				data,
+				margin,
+				barCategoryGap: "18%",
+				children: /* @__PURE__ */ jsx(R.Bar, {
+					dataKey: "v",
+					radius: [
+						2,
+						2,
+						0,
+						0
+					],
+					...animation,
+					children: data.map((point) => /* @__PURE__ */ jsx(R.Cell, {
+						fill: stroke,
+						fillOpacity: showMinMax && (point.i === maxIndex || point.i === minIndex) ? 1 : .55
+					}, point.i))
+				})
+			}) : /* @__PURE__ */ jsxs(R.AreaChart, {
+				accessibilityLayer: false,
+				data,
+				margin,
+				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+					id,
+					x1: "0",
+					x2: "0",
+					y1: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: stroke,
+						stopOpacity: kind === "area" ? .25 : 0
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: stroke,
+						stopOpacity: 0
+					})]
+				}) }), /* @__PURE__ */ jsx(R.Area, {
+					dataKey: "v",
+					type: "monotone",
+					stroke,
+					strokeWidth: 1.75,
+					fill: `url(#${id})`,
+					dot: marker,
+					activeDot: false,
+					...animation
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { Sparkline };

package/dist/patterns/chart/treemap.d.ts

@@ -0,0 +1,25 @@
+import { ChartColorValue, ChartStateProps, Key } from "./chart-parts.js";
+import { ReactNode } from "react";
+//#region src/patterns/chart/treemap.d.ts
+export interface TreemapProps<T extends object> extends ChartStateProps {
+  /** One row per rectangle. Rows sharing a `group` are colored and nested together. */
+  data: readonly T[];
+  /** Field naming each rectangle. */
+  category: Key<T>;
+  /** Field holding each rectangle's size. */
+  value: Key<T>;
+  /** Field grouping rectangles, e.g. a team or product line. Each group gets one color. */
+  group?: Key<T>;
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  colors?: readonly ChartColorValue[];
+  valueFormatter?: (value: number) => string;
+  /** Plot height in pixels. Default 280. */
+  height?: number;
+  showLegend?: boolean;
+  className?: string;
+}
+/** Sizes of many parts of a whole, nested by group, e.g. spend by team and vendor. */
+export declare function Treemap<T extends object>(props: TreemapProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/patterns/chart/treemap.js

@@ -0,0 +1,128 @@
+"use client";
+import { ChartFrame, ChartTooltipCard, categoryColor, defaultFormatter, useChartAnimation } from "./chart-parts.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as R from "recharts";
+//#region src/patterns/chart/treemap.tsx
+function Tile({ x = 0, y = 0, width = 0, height = 0, depth = 0, name, value, fill, children, formatter }) {
+	if (Array.isArray(children) && children.length > 0) return null;
+	if (depth === 0) return null;
+	const roomForName = width > 56 && height > 28;
+	const roomForValue = width > 56 && height > 46;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: x + 1,
+			y: y + 1,
+			width: Math.max(width - 2, 0),
+			height: Math.max(height - 2, 0),
+			rx: 4,
+			fill,
+			stroke: "var(--glyph-surface)",
+			strokeWidth: 2
+		}),
+		roomForName && /* @__PURE__ */ jsx("text", {
+			x: x + 10,
+			y: y + 20,
+			fill: "var(--glyph-surface)",
+			fontSize: 12,
+			fontWeight: 500,
+			style: { pointerEvents: "none" },
+			children: name
+		}),
+		roomForValue && value !== void 0 && /* @__PURE__ */ jsx("text", {
+			x: x + 10,
+			y: y + 37,
+			fill: "var(--glyph-surface)",
+			fillOpacity: .85,
+			fontSize: 11,
+			style: {
+				pointerEvents: "none",
+				fontVariantNumeric: "tabular-nums"
+			},
+			children: formatter(value)
+		})
+	] });
+}
+/** Sizes of many parts of a whole, nested by group, e.g. spend by team and vendor. */
+function Treemap(props) {
+	const { data, category, value, group, valueFormatter = defaultFormatter, height = 280 } = props;
+	const animation = useChartAnimation();
+	const rows = data;
+	const groupNames = [];
+	if (group) for (const row of rows) {
+		const name = String(row[group]);
+		if (!groupNames.includes(name)) groupNames.push(name);
+	}
+	const tree = group ? groupNames.map((name, i) => {
+		const fill = categoryColor(props.colors?.[i], i);
+		return {
+			name,
+			fill,
+			children: rows.filter((row) => String(row[group]) === name).map((row) => ({
+				name: String(row[category]),
+				size: Number(row[value]) || 0,
+				fill
+			}))
+		};
+	}) : rows.map((row, i) => ({
+		name: String(row[category]),
+		size: Number(row[value]) || 0,
+		fill: categoryColor(props.colors?.[i], i)
+	}));
+	const table = {
+		columns: [
+			String(category),
+			...group ? [String(group)] : [],
+			String(value)
+		],
+		rows: rows.map((row) => [
+			String(row[category]),
+			...group ? [String(row[group])] : [],
+			valueFormatter(Number(row[value]))
+		])
+	};
+	const legend = group && (props.showLegend ?? true) ? groupNames.map((name, i) => ({
+		key: name,
+		label: name,
+		color: tree[i].fill
+	})) : void 0;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		legend,
+		table,
+		height,
+		isEmpty: rows.length === 0,
+		loading: props.loading,
+		error: props.error,
+		onRetry: props.onRetry,
+		empty: props.empty,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height,
+			children: /* @__PURE__ */ jsx(R.Treemap, {
+				data: tree,
+				dataKey: "size",
+				nameKey: "name",
+				aspectRatio: 4 / 3,
+				content: /* @__PURE__ */ jsx(Tile, { formatter: valueFormatter }),
+				...animation,
+				children: /* @__PURE__ */ jsx(R.Tooltip, {
+					isAnimationActive: false,
+					content: (p) => /* @__PURE__ */ jsx(ChartTooltipCard, {
+						active: p.active,
+						payload: p.payload?.map((item) => ({
+							name: String(item.payload?.name ?? ""),
+							value: item.value,
+							color: String(item.payload?.fill ?? "")
+						})),
+						formatter: valueFormatter
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { Treemap };

package/dist/patterns/chart/use-element-width.js

@@ -0,0 +1,23 @@
+"use client";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/patterns/chart/use-element-width.ts
+/**
+* Measures an element's content width with a ResizeObserver. Until the first measurement
+* (and in environments without layout, like tests) it reports `fallback`.
+*/
+function useElementWidth(fallback = 480) {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(0);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const measure = () => setWidth(Math.round(element.getBoundingClientRect().width));
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, width > 0 ? width : fallback];
+}
+//#endregion
+export { useElementWidth };

package/dist/patterns/data-table/data-table.d.ts

@@ -0,0 +1,109 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+import { ReactNode } from "react";
+import { ColumnDef, RowData, SortingState } 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>;
+  }
+}
+export interface DataTableProps<T> extends VariantProps<typeof dataTableStyles> {
+  data: T[] | undefined;
+  /** Build with `createColumnHelper<T>()` for typed accessors. */
+  columns: ColumnDef<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;
+  '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

package/dist/patterns/data-table/data-table.js

@@ -0,0 +1,233 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon, SearchIcon } from "../../internal/icons.js";
+import { focusRing, themedBorder } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { Button, IconButton } from "../../components/button/button.js";
+import { Checkbox } from "../../components/checkbox/checkbox.js";
+import { Input } from "../../components/input/input.js";
+import { Skeleton } from "../../components/skeleton/skeleton.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/table/table.js";
+import { EmptyState, ErrorState } from "../async/states.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/patterns/data-table/data-table.tsx
+const dataTableStyles = /* @__PURE__ */ 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
+export { DataTable, dataTableStyles };