@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/data-table.js

@@ -0,0 +1,676 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Checkbox } from "./checkbox.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty-state.js";
+import { Filter, FilterApplyButton, FilterContent, FilterResetButton, FilterTrigger } from "./filter.js";
+import { Pagination, PaginationButton, PaginationContent, PaginationEllipsis, PaginationItem } from "./pagination.js";
+import { Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger } from "./popover.js";
+import { Skeleton } from "./skeleton.js";
+import { Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import { TableCard, TableCardAction } from "./table-card.js";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, PinIcon, SearchX, SlidersHorizontal } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/data-table.tsx
+const DataTableContext = React.createContext(null);
+const ROW_SELECT_COLUMN_ID = "row-select";
+const ACTIONS_COLUMN_ID = "actions";
+const DEFAULT_SKELETON_ROW_COUNT = 5;
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	25,
+	50,
+	100,
+	200,
+	500
+];
+function useOptionalDataTableContext() {
+	return React.useContext(DataTableContext);
+}
+function useDataTableContext() {
+	const context = useOptionalDataTableContext();
+	if (!context) throw new Error("DataTable components must be rendered inside <DataTableRoot>.");
+	return context;
+}
+function getCommonPinningStyles(column) {
+	const isPinned = column.getIsPinned();
+	return {
+		left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+		right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+		position: isPinned ? "sticky" : "relative",
+		width: column.getSize(),
+		zIndex: isPinned ? 1 : 0
+	};
+}
+function getPinnedSide(column) {
+	const isPinned = column.getIsPinned();
+	if (isPinned === "left" && column.getIsLastColumn("left")) return "left";
+	if (isPinned === "right" && column.getIsFirstColumn("right")) return "right";
+}
+function getDefaultColumnPinning(columns) {
+	const left = [];
+	const right = [];
+	for (const column of columns) {
+		if (!column.id || !column.meta?.isPinned) continue;
+		if (column.meta.pinPosition === "right") right.push(column.id);
+		else left.push(column.id);
+	}
+	return {
+		left,
+		right
+	};
+}
+function renderTableCellSkeleton(skeletonType = "default") {
+	if (skeletonType === "image-description") return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-10 shrink-0 rounded-full" }), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1 space-y-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-32 max-w-full rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-48 max-w-full rounded" })]
+		})]
+	});
+	return /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full rounded" });
+}
+function useDataTable({ columns, data, enableRowSelection = false, initialState, getSortedRowModel: getSortedRowModelOption, ...options }) {
+	const resolvedColumns = React.useMemo(() => {
+		if (!enableRowSelection) return columns;
+		return [{
+			id: ROW_SELECT_COLUMN_ID,
+			meta: {
+				isPinned: true,
+				pinPosition: "left"
+			},
+			header: ({ table }) => /* @__PURE__ */ jsx(Checkbox, {
+				"aria-label": "Select all rows",
+				checked: table.getIsAllPageRowsSelected(),
+				onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+				size: "sm"
+			}),
+			cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
+				"aria-label": "Select row",
+				checked: row.getIsSelected(),
+				onCheckedChange: (value) => row.toggleSelected(!!value),
+				size: "sm"
+			}),
+			enableHiding: false,
+			enablePinning: false,
+			enableSorting: false,
+			size: 56
+		}, ...columns];
+	}, [columns, enableRowSelection]);
+	const defaultColumnPinning = React.useMemo(() => getDefaultColumnPinning(resolvedColumns), [resolvedColumns]);
+	return useReactTable({
+		...options,
+		columns: resolvedColumns,
+		data,
+		enableRowSelection,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModelOption ?? getSortedRowModel(),
+		initialState: {
+			...initialState,
+			columnPinning: {
+				...defaultColumnPinning,
+				...initialState?.columnPinning
+			}
+		}
+	});
+}
+function DataTableRoot({ children, className, isLoading, onRowClick, table, ...props }) {
+	const contextValue = {
+		isLoading,
+		onRowClick,
+		table
+	};
+	return /* @__PURE__ */ jsx(DataTableContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "data-table-root",
+			className: cn("flex w-full min-w-0 flex-col gap-4", className),
+			...props,
+			children
+		})
+	});
+}
+function DataTableToolbar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-toolbar",
+		className: cn("flex flex-col justify-between gap-4 md:flex-row md:items-center", className),
+		...props
+	});
+}
+function DataTableFilter({ applyButtonProps, children, closeOnApply = true, closeOnReset = true, contentProps, defaultJoin, defaultOpen = false, defaultValue, fields, footer, onApply, onOpenChange, open, popoverBodyProps, popoverContentProps, popoverFooterProps, popoverHeaderProps, resetButtonProps, size = "md", title = "Filter", trigger, triggerButtonProps, triggerCountClassName, triggerHideCountWhenZero, triggerLabel = "Filters" }) {
+	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+	const isOpenControlled = open !== void 0;
+	const resolvedOpen = open ?? internalOpen;
+	const { onApplySuccess, ...resolvedApplyButtonProps } = applyButtonProps ?? {};
+	const { onReset, ...resolvedResetButtonProps } = resetButtonProps ?? {};
+	const { className: triggerButtonClassName, ...resolvedTriggerButtonProps } = triggerButtonProps ?? {};
+	const { className: popoverContentClassName, ...resolvedPopoverContentProps } = popoverContentProps ?? {};
+	const { className: popoverHeaderClassName, ...resolvedPopoverHeaderProps } = popoverHeaderProps ?? {};
+	const { className: popoverBodyClassName, ...resolvedPopoverBodyProps } = popoverBodyProps ?? {};
+	const { className: popoverFooterClassName, ...resolvedPopoverFooterProps } = popoverFooterProps ?? {};
+	const handleOpenChange = (nextOpen) => {
+		if (!isOpenControlled) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	};
+	return /* @__PURE__ */ jsx(Filter, {
+		defaultJoin,
+		defaultValue,
+		fields,
+		onApply,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open: resolvedOpen,
+			onOpenChange: handleOpenChange,
+			children: [/* @__PURE__ */ jsx(FilterTrigger, {
+				countClassName: triggerCountClassName,
+				hideCountWhenZero: triggerHideCountWhenZero,
+				children: /* @__PURE__ */ jsx(PopoverTrigger, { render: trigger ?? /* @__PURE__ */ jsxs(Button, {
+					className: cn("group", triggerButtonClassName),
+					size,
+					variant: "tertiary-outline",
+					...resolvedTriggerButtonProps,
+					children: [
+						/* @__PURE__ */ jsx(SlidersHorizontal, { className: "shrink-0" }),
+						triggerLabel,
+						/* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform group-data-popup-open:rotate-180" })
+					]
+				}) })
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				align: "end",
+				sideOffset: 12,
+				size: "sm",
+				...resolvedPopoverContentProps,
+				className: cn("w-140 max-w-[calc(100vw-2rem)]", popoverContentClassName),
+				children: [
+					title ? /* @__PURE__ */ jsx(PopoverHeader, {
+						border: true,
+						...resolvedPopoverHeaderProps,
+						className: cn("items-center", popoverHeaderClassName),
+						children: /* @__PURE__ */ jsx(PopoverTitle, { children: title })
+					}) : null,
+					/* @__PURE__ */ jsx(PopoverBody, {
+						...resolvedPopoverBodyProps,
+						className: popoverBodyClassName,
+						children: children ?? /* @__PURE__ */ jsx(FilterContent, { ...contentProps })
+					}),
+					footer !== null ? /* @__PURE__ */ jsx(PopoverFooter, {
+						...resolvedPopoverFooterProps,
+						className: popoverFooterClassName,
+						children: footer !== void 0 ? footer : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FilterResetButton, {
+							...resolvedResetButtonProps,
+							onReset: () => {
+								if (closeOnReset) handleOpenChange(false);
+								onReset?.();
+							}
+						}), /* @__PURE__ */ jsx(FilterApplyButton, {
+							...resolvedApplyButtonProps,
+							onApplySuccess: () => {
+								if (closeOnApply) handleOpenChange(false);
+								onApplySuccess?.();
+							}
+						})] })
+					}) : null
+				]
+			})]
+		})
+	});
+}
+function DataTable({ className, containerClassName, emptyState, interactiveColumnIds = [ACTIONS_COLUMN_ID, ROW_SELECT_COLUMN_ID], isLoading: isLoadingProp, loadingRowCount = DEFAULT_SKELETON_ROW_COUNT, onRowClick: onRowClickProp, table: tableProp, ...props }) {
+	const context = useOptionalDataTableContext();
+	const table = tableProp ?? context?.table;
+	const isLoading = isLoadingProp ?? context?.isLoading;
+	const onRowClick = onRowClickProp ?? context?.onRowClick;
+	if (!table) throw new Error("DataTable requires a table prop or DataTableRoot context.");
+	const rows = table.getRowModel().rows;
+	const isEmpty = !isLoading && rows.length === 0;
+	const skeletonRows = Array.from({ length: loadingRowCount }, (_, index) => index);
+	if (isEmpty && emptyState) return emptyState;
+	return /* @__PURE__ */ jsxs(Table$1, {
+		className: cn("table-fixed", className),
+		containerClassName: cn("max-h-[68vh] overflow-y-auto", containerClassName),
+		style: { width: table.getTotalSize() },
+		...props,
+		children: [/* @__PURE__ */ jsx(TableHeader, {
+			sticky: true,
+			children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+				const isPinned = header.column.getIsPinned();
+				const pinnedSide = getPinnedSide(header.column);
+				return /* @__PURE__ */ jsx(TableHead, {
+					colSpan: header.colSpan,
+					pinnedSide,
+					style: getCommonPinningStyles(header.column),
+					children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							flexRender(header.column.columnDef.header, header.getContext()),
+							header.column.getCanSort() ? /* @__PURE__ */ jsx("button", {
+								"aria-label": `Toggle sorting for ${header.column.id}`,
+								type: "button",
+								className: "shrink-0 cursor-pointer border-none bg-transparent p-0 outline-none",
+								onClick: header.column.getToggleSortingHandler(),
+								children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "size-3.5 text-fg-primary" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-fg-primary" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5" })
+							}) : null,
+							header.column.getCanPin() ? /* @__PURE__ */ jsx("button", {
+								"aria-label": isPinned ? `Unpin ${header.column.id}` : `Pin ${header.column.id} to the left`,
+								type: "button",
+								className: "shrink-0 cursor-pointer border-none bg-transparent p-0 outline-none",
+								onClick: () => isPinned ? header.column.pin(false) : header.column.pin("left"),
+								children: /* @__PURE__ */ jsx(PinIcon, { className: cn("size-3.5", isPinned && "text-fg-brand") })
+							}) : null,
+							header.column.getCanResize() ? /* @__PURE__ */ jsx("button", {
+								"aria-label": "Resize column",
+								type: "button",
+								onDoubleClick: () => header.column.resetSize(),
+								onMouseDown: header.getResizeHandler(),
+								onTouchStart: header.getResizeHandler(),
+								className: cn("ml-auto h-6 w-0.5 cursor-col-resize rounded-[1px] border-0 bg-line p-0 outline-none", header.column.getIsResizing() && "w-1 bg-line-focus")
+							}) : null
+						]
+					})
+				}, header.id);
+			}) }, headerGroup.id))
+		}), /* @__PURE__ */ jsx(TableBody, { children: isLoading ? skeletonRows.map((rowKey) => /* @__PURE__ */ jsx(TableRow, { children: table.getVisibleLeafColumns().map((column) => {
+			return /* @__PURE__ */ jsx(TableCell, {
+				pinned: !!column.getIsPinned(),
+				pinnedSide: getPinnedSide(column),
+				style: getCommonPinningStyles(column),
+				children: column.id === ROW_SELECT_COLUMN_ID ? /* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded-sm" }) : renderTableCellSkeleton(column.columnDef.meta?.skeletonType)
+			}, `${rowKey}-${column.id}`);
+		}) }, rowKey)) : rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+			"data-state": row.getIsSelected() ? "selected" : void 0,
+			onClick: () => onRowClick?.(row),
+			children: row.getVisibleCells().map((cell) => {
+				const isInteractiveColumn = interactiveColumnIds.includes(cell.column.id);
+				return /* @__PURE__ */ jsx(TableCell, {
+					pinned: !!cell.column.getIsPinned(),
+					pinnedSide: getPinnedSide(cell.column),
+					style: getCommonPinningStyles(cell.column),
+					className: cn(onRowClick && "cursor-pointer", cell.column.id === ACTIONS_COLUMN_ID && "text-center"),
+					onClick: isInteractiveColumn ? (event) => event.stopPropagation() : void 0,
+					children: flexRender(cell.column.columnDef.cell, cell.getContext())
+				}, cell.id);
+			})
+		}, row.id)) })]
+	});
+}
+function DataTableCardGrid({ actionsColumnId = ACTIONS_COLUMN_ID, badgeColumnId, className, detailColumnIds, emptyState, isLoading: isLoadingProp, loadingCardCount = DEFAULT_SKELETON_ROW_COUNT, onCardClick, renderActions, renderCard, subtitleColumnId, table: tableProp, titleColumnId, ...props }) {
+	const context = useOptionalDataTableContext();
+	const table = tableProp ?? context?.table;
+	const isLoading = isLoadingProp ?? context?.isLoading;
+	const handleCardClick = onCardClick ?? context?.onRowClick;
+	if (!table) throw new Error("DataTableCardGrid requires a table prop or DataTableRoot context.");
+	const rows = table.getRowModel().rows;
+	const isEmpty = !isLoading && rows.length === 0;
+	const resolvedTitleColumnId = titleColumnId ?? getColumnIdByCardMeta(table, "useAsCardTitle");
+	const resolvedSubtitleColumnId = subtitleColumnId ?? getColumnIdByCardMeta(table, "useAsCardSubtitle");
+	const resolvedBadgeColumnId = badgeColumnId ?? getColumnIdByCardMeta(table, "useAsCardBadge");
+	const resolvedDetailColumnIds = getDataTableCardDetailColumnIds({
+		actionsColumnId,
+		badgeColumnId: resolvedBadgeColumnId,
+		detailColumnIds,
+		subtitleColumnId: resolvedSubtitleColumnId,
+		table,
+		titleColumnId: resolvedTitleColumnId
+	});
+	const skeletonCards = Array.from({ length: loadingCardCount }, (_, index) => index);
+	if (isEmpty && emptyState) return emptyState;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-card-grid",
+		className: cn("grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3", className),
+		...props,
+		children: isLoading ? skeletonCards.map((cardKey) => /* @__PURE__ */ jsxs(TableCard, {
+			"aria-hidden": true,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-start justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1 space-y-2",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-4/5 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/5 rounded" })]
+					}), /* @__PURE__ */ jsx(Skeleton, { className: "size-8 rounded-full" })]
+				}),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24 rounded-full" }),
+				/* @__PURE__ */ jsx("div", {
+					className: "space-y-3",
+					children: range(1, 4).map((detailKey) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-4 border-line-subtle border-t pt-3 first:border-t-0 first:pt-0",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28 rounded" })]
+					}, detailKey))
+				})
+			]
+		}, cardKey)) : rows.map((row) => {
+			const actions = renderActions?.(row) ?? renderRowCellByColumnId(row, actionsColumnId);
+			const action = renderDataTableCardAction(row, handleCardClick);
+			const selection = renderDataTableCardSelection(row);
+			if (renderCard) return /* @__PURE__ */ jsx(React.Fragment, { children: renderCard(row, {
+				action,
+				actions,
+				row,
+				selection,
+				table
+			}) }, row.id);
+			const details = resolvedDetailColumnIds.map((columnId) => ({
+				label: getDataTableCardColumnLabel(table, columnId),
+				value: renderRowCellByColumnId(row, columnId)
+			}));
+			return /* @__PURE__ */ jsx(TableCard, {
+				action,
+				actions,
+				badge: resolvedBadgeColumnId ? renderRowCellByColumnId(row, resolvedBadgeColumnId) : null,
+				details,
+				selection,
+				selected: row.getIsSelected(),
+				subtitle: resolvedSubtitleColumnId ? renderRowCellByColumnId(row, resolvedSubtitleColumnId) : null,
+				title: resolvedTitleColumnId ? renderRowCellByColumnId(row, resolvedTitleColumnId) : row.id
+			}, row.id);
+		})
+	});
+}
+function renderDataTableCardAction(row, onCardClick) {
+	if (!onCardClick) return null;
+	return /* @__PURE__ */ jsx(TableCardAction, {
+		"aria-label": `Open row ${row.id}`,
+		onClick: () => onCardClick(row)
+	});
+}
+function renderDataTableCardSelection(row) {
+	if (!row.getCanSelect()) return null;
+	return /* @__PURE__ */ jsx(Checkbox, {
+		"aria-label": "Select row",
+		checked: row.getIsSelected(),
+		onCheckedChange: (value) => row.toggleSelected(!!value),
+		size: "sm"
+	});
+}
+function getColumnIdByCardMeta(table, metaKey) {
+	return table.getAllLeafColumns().find((column) => column.columnDef.meta?.[metaKey])?.id;
+}
+function getDataTableCardDetailColumnIds({ actionsColumnId, badgeColumnId, detailColumnIds, subtitleColumnId, table, titleColumnId }) {
+	if (detailColumnIds) return detailColumnIds;
+	const reservedColumnIds = /* @__PURE__ */ new Set([
+		ACTIONS_COLUMN_ID,
+		ROW_SELECT_COLUMN_ID,
+		actionsColumnId,
+		badgeColumnId,
+		subtitleColumnId,
+		titleColumnId
+	]);
+	return table.getVisibleLeafColumns().filter((column) => !reservedColumnIds.has(column.id) && !column.columnDef.meta?.hideInCard).map((column) => column.id);
+}
+function getDataTableCardColumnLabel(table, columnId) {
+	const column = table.getAllLeafColumns().find((item) => item.id === columnId);
+	const header = column?.columnDef.header;
+	if (column?.columnDef.meta?.cardLabel) return column.columnDef.meta.cardLabel;
+	if (typeof header === "string") return header;
+	return column?.id ?? columnId;
+}
+function renderRowCellByColumnId(row, columnId) {
+	if (!columnId) return null;
+	const cell = row.getAllCells().find((item) => item.column.id === columnId);
+	if (!cell) return null;
+	return flexRender(cell.column.columnDef.cell, cell.getContext());
+}
+function DataTableBulkActions({ children, className, style, table: tableProp, ...props }) {
+	const context = useOptionalDataTableContext();
+	const table = tableProp ?? context?.table;
+	const barRef = React.useRef(null);
+	const [fixedStyle, setFixedStyle] = React.useState(null);
+	const [spacerHeight, setSpacerHeight] = React.useState(0);
+	if (!table) throw new Error("DataTableBulkActions requires a table prop or DataTable context.");
+	const selectedRows = table.getSelectedRowModel().rows;
+	React.useLayoutEffect(() => {
+		if (selectedRows.length === 0) {
+			setFixedStyle(null);
+			setSpacerHeight(0);
+			return;
+		}
+		const bar = barRef.current;
+		const container = bar?.parentElement;
+		if (!bar || !container) return;
+		const updatePosition = () => {
+			const containerRect = container.getBoundingClientRect();
+			const left = Math.max(containerRect.left, 16);
+			const right = Math.max(window.innerWidth - containerRect.right, 16);
+			const height = bar.offsetHeight;
+			setFixedStyle((currentStyle) => currentStyle?.left === left && currentStyle.right === right ? currentStyle : {
+				left,
+				right
+			});
+			setSpacerHeight((currentHeight) => currentHeight === height ? currentHeight : height);
+		};
+		updatePosition();
+		const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updatePosition);
+		resizeObserver?.observe(container);
+		resizeObserver?.observe(bar);
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+		return () => {
+			resizeObserver?.disconnect();
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+		};
+	}, [selectedRows.length]);
+	if (selectedRows.length === 0) return null;
+	const content = typeof children === "function" ? children({
+		data: selectedRows.map((row) => row.original),
+		rows: selectedRows,
+		table
+	}) : children;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		ref: barRef,
+		"data-slot": "data-table-bulk-actions",
+		className: cn("fixed bottom-4 z-50 flex items-center gap-4 rounded-xl border border-line bg-surface-overlay px-4 py-3 shadow-(--shadow-3)", !fixedStyle && "invisible", className),
+		style: {
+			...fixedStyle,
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "text-gdt-sm font-medium text-fg-secondary",
+			children: [selectedRows.length, " selected"]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: content
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		style: { height: spacerHeight }
+	})] });
+}
+function DataTablePagination({ className, controlAppearance = "icon", getSummaryLabel = ({ end, start, totalEntries }) => `Showing ${start} to ${end} of ${totalEntries} entries`, jumpToPageLabel = "Jump to page", nextLabel = "Next", onPageChange, page, pageCount: pageCountProp, pageSize: pageSizeProp, previousLabel = "Previous", showControls = true, showJumpToPage = true, showPreviousNext = true, showSummary = true, siblingCount = 1, table: tableProp, totalEntries: totalEntriesProp, ...props }) {
+	const context = useOptionalDataTableContext();
+	const table = tableProp ?? context?.table;
+	const tablePageSize = table?.getState().pagination.pageSize;
+	const pageSize = pageSizeProp ?? tablePageSize;
+	const totalEntries = totalEntriesProp ?? table?.getRowCount();
+	const derivedPageCount = totalEntries !== void 0 && pageSize ? Math.ceil(totalEntries / pageSize) : void 0;
+	if (!(page !== void 0 && (pageCountProp !== void 0 || derivedPageCount !== void 0)) && !table) throw new Error("DataTablePagination requires either a table (prop or DataTable context) or controlled `page` with `pageCount` or `totalEntries` + `pageSize`.");
+	const pageCount = pageCountProp ?? derivedPageCount ?? table?.getPageCount() ?? 0;
+	const currentPage = page ?? (table ? table.getState().pagination.pageIndex + 1 : 1);
+	if (!Number.isFinite(pageCount) || pageCount <= 1) return null;
+	const goToPage = (nextPage) => {
+		const clampedPage = Math.min(Math.max(nextPage, 1), pageCount);
+		if (clampedPage === currentPage) return;
+		if (onPageChange) onPageChange(clampedPage);
+		else table?.setPageIndex(clampedPage - 1);
+	};
+	const canPreviousPage = currentPage > 1;
+	const canNextPage = currentPage < pageCount;
+	const pages = getPaginationItems(currentPage, pageCount, siblingCount);
+	const startEntry = totalEntries !== void 0 && pageSize ? totalEntries === 0 ? 0 : (currentPage - 1) * pageSize + 1 : void 0;
+	const endEntry = totalEntries !== void 0 && pageSize ? Math.min(currentPage * pageSize, totalEntries) : void 0;
+	const summary = showSummary && totalEntries !== void 0 && pageSize !== void 0 && startEntry !== void 0 && endEntry !== void 0 ? getSummaryLabel({
+		end: endEntry,
+		page: currentPage,
+		pageSize,
+		start: startEntry,
+		totalEntries
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table-pagination",
+		className: cn("flex w-full flex-col gap-4 text-gdt-sm text-fg-primary md:flex-row md:items-center md:justify-between", className),
+		children: [summary ? /* @__PURE__ */ jsx("p", {
+			"data-slot": "data-table-pagination-summary",
+			className: "text-fg-primary",
+			children: summary
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "hidden md:block"
+		}), /* @__PURE__ */ jsx(Pagination, {
+			className: "mx-0 w-auto justify-start md:justify-end",
+			...props,
+			children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+				showControls && showPreviousNext ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(PaginationButton, {
+					"aria-label": "Go to previous page",
+					appearance: controlAppearance,
+					disabled: !canPreviousPage,
+					onClick: () => goToPage(currentPage - 1),
+					page: Math.max(1, currentPage - 1),
+					children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "cn-rtl-flip" }), controlAppearance === "control" ? previousLabel : null]
+				}) }) : null,
+				showControls ? pages.map((paginationPage, index) => paginationPage === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${index.toString()}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationButton, {
+					isActive: paginationPage === currentPage,
+					onClick: () => goToPage(paginationPage),
+					page: paginationPage,
+					children: paginationPage
+				}) }, paginationPage)) : null,
+				showControls && showPreviousNext ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(PaginationButton, {
+					"aria-label": "Go to next page",
+					appearance: controlAppearance,
+					disabled: !canNextPage,
+					onClick: () => goToPage(currentPage + 1),
+					page: Math.min(pageCount, currentPage + 1),
+					children: [controlAppearance === "control" ? nextLabel : null, /* @__PURE__ */ jsx(ChevronRight, { className: "cn-rtl-flip" })]
+				}) }) : null,
+				showJumpToPage ? /* @__PURE__ */ jsx(DataTablePaginationJumpToPage, {
+					currentPage,
+					label: jumpToPageLabel,
+					onSubmit: goToPage,
+					totalPages: pageCount
+				}) : null
+			] })
+		})]
+	});
+}
+function DataTablePaginationJumpToPage({ currentPage, label, onSubmit, totalPages }) {
+	const inputId = React.useId();
+	const [value, setValue] = React.useState(currentPage.toString());
+	React.useEffect(() => {
+		setValue(currentPage.toString());
+	}, [currentPage]);
+	const commitValue = (nextValue) => {
+		if (nextValue.trim() === "") {
+			setValue(currentPage.toString());
+			return;
+		}
+		const parsedPage = Number.parseInt(nextValue, 10);
+		if (!Number.isFinite(parsedPage)) {
+			setValue(currentPage.toString());
+			return;
+		}
+		const clampedPage = clampPage(parsedPage, totalPages);
+		setValue(clampedPage.toString());
+		onSubmit(clampedPage);
+	};
+	return /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs("label", {
+		htmlFor: inputId,
+		className: "ml-2 flex items-center gap-3 text-gdt-sm font-normal text-fg-secondary",
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(Input, {
+			id: inputId,
+			type: "number",
+			inputMode: "numeric",
+			min: 1,
+			max: totalPages,
+			size: "sm",
+			value,
+			className: "w-16 rounded-md text-center text-fg-primary [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+			"aria-label": typeof label === "string" ? label : "Jump to page",
+			onChange: (event) => {
+				setValue(event.target.value);
+			},
+			onBlur: (event) => {
+				commitValue(event.target.value);
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Enter") {
+					event.preventDefault();
+					commitValue(event.currentTarget.value);
+				}
+			}
+		})]
+	}) });
+}
+function clampPage(page, totalPages) {
+	return Math.min(Math.max(page, 1), totalPages);
+}
+function getPaginationItems(currentPage, pageCount, siblingCount) {
+	const boundaryCount = 1;
+	const startPages = range(1, Math.min(boundaryCount, pageCount));
+	const endPages = range(Math.max(pageCount - boundaryCount + 1, 2), pageCount);
+	const siblingsStart = Math.max(Math.min(currentPage - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1), 3);
+	const siblingsEnd = Math.min(Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : pageCount - 1);
+	const items = [...startPages];
+	if (siblingsStart > 3) items.push("ellipsis");
+	else if (2 < pageCount - boundaryCount) items.push(2);
+	items.push(...range(siblingsStart, siblingsEnd));
+	if (siblingsEnd < pageCount - boundaryCount - 1) items.push("ellipsis");
+	else if (pageCount - boundaryCount > boundaryCount) items.push(pageCount - boundaryCount);
+	items.push(...endPages);
+	return items;
+}
+function range(start, end) {
+	const length = end - start + 1;
+	if (length <= 0) return [];
+	return Array.from({ length }, (_, index) => start + index);
+}
+function DataTablePageSizeSelect({ className, label = (pageSize) => `Showing ${pageSize} entries`, onPageSizeChange, pageSize: pageSizeProp, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, size = "md", table: tableProp }) {
+	const context = useOptionalDataTableContext();
+	const table = tableProp ?? context?.table;
+	if (!(pageSizeProp !== void 0) && !table) throw new Error("DataTablePageSizeSelect requires either a table (prop or DataTable context) or the controlled `pageSize` prop.");
+	const pageSize = pageSizeProp ?? table?.getState().pagination.pageSize ?? DEFAULT_PAGE_SIZE_OPTIONS[0];
+	const handleValueChange = (value) => {
+		if (value === null) return;
+		const nextPageSize = Number(value);
+		if (onPageSizeChange) onPageSizeChange(nextPageSize);
+		else table?.setPageSize(nextPageSize);
+	};
+	const selectSize = size === "sm" || size === "md" || size === "lg" ? size : void 0;
+	return /* @__PURE__ */ jsxs(Select, {
+		value: pageSize.toString(),
+		onValueChange: handleValueChange,
+		size: selectSize,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			unstyled: true,
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "tertiary-outline",
+				size,
+				className
+			}),
+			children: /* @__PURE__ */ jsx(SelectValue, { children: () => label(pageSize) })
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			side: "top",
+			children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.toString(),
+				children: option
+			}, option))
+		})]
+	});
+}
+function DataTableEmptyState({ action, className, description = "Try adjusting your search or filters to find what you need.", title = "No results found", ...props }) {
+	return /* @__PURE__ */ jsxs(Empty, {
+		className: cn("min-h-60 rounded-[20px] border border-line bg-canvas", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, {
+				variant: "icon",
+				children: /* @__PURE__ */ jsx(SearchX, {})
+			}),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+			description ? /* @__PURE__ */ jsx(EmptyDescription, { children: description }) : null
+		] }), action ? /* @__PURE__ */ jsx(EmptyContent, { children: action }) : null]
+	});
+}
+//#endregion
+export { DataTable, DataTableBulkActions, DataTableCardGrid, DataTableEmptyState, DataTableFilter, DataTablePageSizeSelect, DataTablePagination, DataTableRoot, DataTableToolbar, useDataTable, useDataTableContext };