@optiaxiom/react 3.4.2 → 3.5.0

package/dist/cjs/data-table-F__FU4y3.js

@@ -0,0 +1,673 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_SuggestionPopover = require("./SuggestionPopover-Bu_sY4dq.js");
+const require_text = require("./text-BWyl3PQL.js");
+const require_group = require("./group.js");
+const require_useEvent = require("./useEvent-BGCT9scH.js");
+const require_pagination = require("./pagination-DwyHpT49.js");
+const require_table = require("./table-D9HONUVJ.js");
+const require_DataTableHeaderCell = require("./DataTableHeaderCell-DQir9j5E.js");
+const require_select = require("./select-4Cy3SWkh.js");
+let _radix_ui_react_id = require("@radix-ui/react-id");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let clsx = require("clsx");
+clsx = require_rolldown_runtime.__toESM(clsx, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
+let _radix_ui_react_visually_hidden = require("@radix-ui/react-visually-hidden");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
+require("./assets/TableRow.css.ts.vanilla-qnTbGpk5.css");
+let _tanstack_react_table = require("@tanstack/react-table");
+require("./assets/DataTableBody.css.ts.vanilla-DRY2_R_M.css");
+require("./assets/DataTableFooter.css.ts.vanilla-Czp5EU7a.css");
+//#region src/data-table/DataTableContext.ts
+const [DataTableProvider, useDataTableContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/DataTable");
+//#endregion
+//#region src/data-table/DataTable.tsx
+/**
+* Easy to use table and datagrids built using [TanStack Table](https://tanstack.com/table/latest).
+*
+* @category data-display
+* @group DataTable
+* @since 1.4.0
+*/
+const DataTable = (0, react.forwardRef)(({ children, table, ...props }, ref) => {
+	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(-1);
+	const focusRequestRef = (0, react.useRef)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		flexDirection: "column",
+		gap: "8",
+		maxH: "full",
+		maxW: "full",
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableProvider, {
+			focusRequestRef,
+			highlightedIndex,
+			setHighlightedIndex,
+			table,
+			children
+		})
+	});
+});
+DataTable.displayName = "@optiaxiom/react/DataTable";
+//#endregion
+//#region src/data-table/DataTableAction.tsx
+/**
+* @group DataTable
+*/
+const DataTableAction = (0, react.forwardRef)(({ onKeyDown, onPointerDown, primary, visible, ...props }, outerRef) => {
+	const { actions, focusManaged, highlightedIndex, onActionMount, setHighlightedIndex } = require_DataTableHeaderCell.useDataTableRowContext("@optiaxiom/react/DataTableAction");
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	(0, react.useEffect)(() => {
+		if (!onActionMount) return;
+		return onActionMount({
+			primary,
+			ref: innerRef
+		});
+	}, [onActionMount, primary]);
+	const index = actions.includes(innerRef) ? actions.indexOf(innerRef) : void 0;
+	(0, react.useEffect)(() => {
+		if (highlightedIndex === index) innerRef.current?.focus();
+	}, [highlightedIndex, index]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableAction, {
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.target instanceof HTMLElement && event.target !== innerRef?.current && (event.target.isContentEditable || [
+				"input",
+				"select",
+				"textarea"
+			].includes(event.target.localName))) return;
+			if (focusManaged && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
+				const nextIndex = event.key === "ArrowRight" ? highlightedIndex + 1 : highlightedIndex - 1;
+				if (nextIndex >= -1 && nextIndex <= actions.length - 1) {
+					event.preventDefault();
+					setHighlightedIndex?.(nextIndex);
+				}
+			}
+		},
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (event.defaultPrevented || !index) return;
+			setHighlightedIndex?.(index);
+		},
+		ref,
+		tabIndex: focusManaged ? highlightedIndex === index ? 0 : -1 : void 0,
+		visible: visible ?? (primary ? "always" : void 0),
+		...props
+	});
+});
+DataTableAction.displayName = "@optiaxiom/react/DataTableAction";
+//#endregion
+//#region src/data-table/DataTableBody.css.ts
+var cell = require_recipeRuntime.recipeRuntime({
+	base: [{
+		alignItems: "start",
+		display: "flex"
+	}, "_28sm9t"],
+	variants: {
+		pinned: {
+			left: "_17wcg90",
+			right: "hx3tzv"
+		},
+		pinnedType: {
+			body: "_1px6ceu",
+			header: {}
+		},
+		resizable: {
+			false: {},
+			true: "kaztkt"
+		}
+	}
+});
+var cellOffsetVar = "var(--_1lel0g5)";
+var cellSizeVar = "var(--_1m46jy9)";
+var leftTotalSizeVar = "var(--lmdal5)";
+var rightTotalSizeVar = "var(--_180k0zn)";
+var root = require_recipeRuntime.recipeRuntime({ base: [{
+	display: "flex",
+	flexDirection: "column",
+	maxW: "full",
+	overflow: "hidden",
+	rounded: "lg"
+}, "_1qat8et"] });
+var totalSizeVar = "var(--_1997uo4)";
+//#endregion
+//#region src/data-table/DataTableRow.tsx
+const DataTableRow = (0, react.forwardRef)(({ children, index, row, ...props }, outerRef) => {
+	const { focusRequestRef, highlightedIndex, setHighlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableRow");
+	const [subHighlightedIndex, setSubHighlightedIndex] = (0, react.useState)(-1);
+	const labelId = (0, _radix_ui_react_id.useId)();
+	const [actions, setActions] = (0, react.useState)([]);
+	const primary = actions.find((action) => action.primary);
+	const [selector, setSelector] = (0, react.useState)();
+	const focusManaged = Boolean(selector || primary);
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	/**
+	* A row mounted by the virtualizer only becomes focusable once its actions
+	* register, so wait for `focusManaged` before moving focus to it.
+	*/
+	(0, react.useEffect)(() => {
+		if (highlightedIndex !== index) return;
+		if (focusManaged && focusRequestRef.current) {
+			focusRequestRef.current = false;
+			innerRef.current?.focus();
+		}
+		return () => setSubHighlightedIndex(-1);
+	}, [
+		focusManaged,
+		focusRequestRef,
+		highlightedIndex,
+		index
+	]);
+	/**
+	* Keep the highlight on the focused row when data changes move it to a new
+	* index, so arrow keys and `tabIndex` follow the row.
+	*/
+	(0, react.useEffect)(() => {
+		if (innerRef.current?.contains(document.activeElement)) setHighlightedIndex(index);
+	}, [index, setHighlightedIndex]);
+	const onActionMount = require_useEvent.useEvent(({ primary, ref }) => {
+		setActions((actions) => [...actions, {
+			primary,
+			ref
+		}]);
+		return () => setActions((actions) => actions.filter((action) => action.ref !== ref));
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableRow, {
+		"aria-labelledby": labelId,
+		"aria-selected": row.getCanSelect() ? row.getIsSelected() : void 0,
+		"data-focus-visible": focusManaged ? "" : void 0,
+		"data-selected": row.getIsSelected() ? "" : void 0,
+		onClick: (event) => {
+			if (!(event.target instanceof Element)) return;
+			if (isPortalClick(event)) return;
+			if (isInteractiveElement(event)) return;
+			if (row.getCanSelect()) {
+				if (selector && getAssociatedControl(event) !== selector.current) table.setRowSelection({ [row.id]: true });
+			} else if (!primary?.ref.current?.contains(event.target)) primary?.ref.current?.click();
+		},
+		onDoubleClick: (event) => {
+			if (!row.getCanSelect() || !primary || !(event.target instanceof Element)) return;
+			if (isPortalClick(event)) return;
+			if (isInteractiveElement(event)) return;
+			if (primary.ref.current?.contains(event.target)) return;
+			event.preventDefault();
+			document.getSelection()?.empty();
+			primary.ref.current?.click();
+		},
+		onFocus: (event) => {
+			if (focusManaged) {
+				setHighlightedIndex(index);
+				if (event.target === event.currentTarget) setSubHighlightedIndex(-1);
+			}
+		},
+		onKeyDown: (event) => {
+			if (event.defaultPrevented) return;
+			if (event.target instanceof HTMLElement && event.target !== selector?.current && (event.target.isContentEditable || [
+				"input",
+				"select",
+				"textarea"
+			].includes(event.target.localName))) return;
+			const { rows } = table.getRowModel();
+			if (focusManaged && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+				const nextIndex = event.key === "ArrowDown" ? highlightedIndex + 1 : highlightedIndex - 1;
+				if (nextIndex >= 0 && nextIndex <= rows.length - 1) {
+					event.preventDefault();
+					focusRequestRef.current = true;
+					setHighlightedIndex(nextIndex);
+					if (selector) {
+						const nextRow = rows[nextIndex];
+						if (event.shiftKey && row.getCanMultiSelect()) table.setRowSelection((selection) => selection[nextRow.id] ? {
+							...selection,
+							[row.id]: false
+						} : {
+							...selection,
+							[nextRow.id]: true
+						});
+						else table.setRowSelection({ [nextRow.id]: true });
+					}
+				}
+			} else if (focusManaged && document.activeElement === event.currentTarget && event.key === "ArrowRight") {
+				const nextIndex = subHighlightedIndex + 1;
+				if (nextIndex <= actions.length - 1) {
+					event.preventDefault();
+					setSubHighlightedIndex(nextIndex);
+				}
+			} else if (event.currentTarget === document.activeElement) {
+				if (event.key === " " && selector) {
+					event.preventDefault();
+					row.toggleSelected();
+				} else if (event.key === "Enter" && primary) {
+					event.preventDefault();
+					primary.ref.current?.click();
+				}
+			}
+		},
+		ref,
+		tabIndex: focusManaged ? (highlightedIndex === -1 || highlightedIndex === index) && subHighlightedIndex === -1 ? 0 : -1 : void 0,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataTableHeaderCell.DataTableRowProvider, {
+			actions: actions.map(({ ref }) => ref),
+			focusManaged,
+			highlightedIndex: subHighlightedIndex,
+			labelId,
+			onActionMount,
+			row,
+			setHighlightedIndex: require_useEvent.useEvent((nextIndex) => {
+				setSubHighlightedIndex(nextIndex);
+				if (nextIndex === -1) innerRef.current?.focus();
+			}),
+			setSelector,
+			children
+		})
+	});
+});
+DataTableRow.displayName = "@optiaxiom/react/DataTableRow";
+const getAssociatedControl = (event) => {
+	if (event.target instanceof Element) {
+		const label = event.target.closest("label");
+		if (label && event.currentTarget.contains(label) && label.control) return label.control;
+	}
+};
+const isInteractiveElement = (event) => {
+	if (!(event.target instanceof Element)) return false;
+	const interactive = event.target.closest("a, button, input, select, textarea, [contenteditable=\"true\"], [role=\"button\"], [role=\"link\"]");
+	return interactive && interactive !== event.currentTarget;
+};
+const isPortalClick = (event) => {
+	return event.target instanceof Element && !event.currentTarget.contains(event.target);
+};
+//#endregion
+//#region src/data-table/DataTableBody.tsx
+const COL_VIRTUALIZATION_THRESHOLD = 20;
+const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const SKELETON_ROW_COUNT = 10;
+/**
+* @group DataTable
+*/
+const DataTableBody = (0, react.forwardRef)(({ className, estimatedRowHeight = 52, loading, style, ...props }, outerRef) => {
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	const { highlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableBody");
+	const { rows: rawRows } = table.getRowModel();
+	const rows = (0, react.useMemo)(() => {
+		let index = 0;
+		return rawRows.reduce((result, row) => {
+			result.push(row);
+			index++;
+			if (loading && typeof loading === "object" && loading[row.id] === "sub-rows") result.push(require_DataTableHeaderCell.fakeRow(table, index++), require_DataTableHeaderCell.fakeRow(table, index++));
+			return result;
+		}, []);
+	}, [
+		loading,
+		rawRows,
+		table
+	]);
+	const previousRowsRef = (0, react.useRef)(rows);
+	(0, react.useEffect)(() => {
+		previousRowsRef.current = rows;
+	});
+	const scrollContainerRef = (0, react.useRef)(null);
+	const calculateScrollTimeline = () => {
+		if (!innerRef.current || !scrollContainerRef.current) return;
+		const { offsetWidth, scrollLeft, scrollWidth } = scrollContainerRef.current;
+		if (scrollWidth > offsetWidth) innerRef.current.dataset.scrollTimeline = scrollLeft === 0 ? "left" : scrollLeft >= scrollWidth - offsetWidth ? "right" : "middle";
+		else delete innerRef.current.dataset.scrollTimeline;
+	};
+	(0, react.useEffect)(() => {
+		calculateScrollTimeline();
+		const node = scrollContainerRef.current;
+		if (!node) return;
+		const observer = new ResizeObserver(calculateScrollTimeline);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const centerColumns = table.getCenterVisibleLeafColumns();
+	const columnVirtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: centerColumns.length,
+		enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
+		estimateSize: (index) => centerColumns[index].getSize(),
+		getItemKey: (index) => centerColumns[index].id,
+		getScrollElement: () => scrollContainerRef.current,
+		horizontal: true
+	});
+	const virtualColumns = columnVirtualizer.getVirtualItems();
+	/**
+	* Keep the highlighted row mounted while it is scrolled out of view so
+	* keyboard focus isn't dropped to the document body.
+	*/
+	const rangeExtractor = (0, react.useCallback)((range) => {
+		const indexes = (0, _tanstack_react_virtual.defaultRangeExtractor)(range);
+		return highlightedIndex >= 0 && highlightedIndex < range.count && !indexes.includes(highlightedIndex) ? [...indexes, highlightedIndex].sort((a, b) => a - b) : indexes;
+	}, [highlightedIndex]);
+	const rowVirtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: rows.length,
+		enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
+		estimateSize: () => estimatedRowHeight,
+		getItemKey: (index) => rows[index].id,
+		getScrollElement: () => scrollContainerRef.current,
+		rangeExtractor
+	});
+	const virtualRows = rowVirtualizer.getVirtualItems();
+	/**
+	* Virtualized rows and columns are missing from the DOM, so assistive
+	* technology relies on these counts and indexes for the real table size.
+	*/
+	const headerGroups = table.getHeaderGroups();
+	const totalResizableSize = headerGroups[0]?.headers.reduce((sum, header) => sum + (header.column.getCanResize() ? header.getSize() : 0), 0) ?? 0;
+	const leadingSpacerStyle = columnVirtualizer.options.enabled ? getSpacerStyle(centerColumns.slice(0, virtualColumns[0]?.index ?? 0), totalResizableSize) : void 0;
+	const trailingSpacerStyle = columnVirtualizer.options.enabled ? getSpacerStyle(centerColumns.slice((virtualColumns.at(-1)?.index ?? centerColumns.length) + 1), totalResizableSize) : void 0;
+	const columnIndexes = new Map([
+		...table.getLeftVisibleLeafColumns(),
+		...centerColumns,
+		...table.getRightVisibleLeafColumns()
+	].map((column, index) => [column.id, index + 1]));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		ref,
+		style: {
+			...(0, _vanilla_extract_dynamic.assignInlineVars)({
+				[leftTotalSizeVar]: `${table.getLeftTotalSize()}px`,
+				[rightTotalSizeVar]: `${table.getRightTotalSize()}px`,
+				[totalSizeVar]: totalResizableSize.toString()
+			}),
+			...style
+		},
+		...root({}, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_table.Table, {
+			"aria-colcount": columnIndexes.size,
+			"aria-rowcount": headerGroups.length + (loading === true ? SKELETON_ROW_COUNT : rows.length),
+			layout: "fixed",
+			onScroll: calculateScrollTimeline,
+			ref: scrollContainerRef,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableHeader, {
+				display: "grid",
+				pinned: true,
+				children: headerGroups.map((headerGroup, headerIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableRow, {
+					"aria-rowindex": headerIndex + 1,
+					display: "flex",
+					children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataTableHeaderCell.DataTableHeaderCell, {
+						"aria-colindex": columnIndexes.get(header.column.id),
+						header,
+						pinned: !!header.column.getIsPinned(),
+						style: { ...(0, _vanilla_extract_dynamic.assignInlineVars)({
+							[cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+							[cellSizeVar]: `${header.getSize()}`
+						}) },
+						...cell({
+							pinned: header.column.getIsPinned() || void 0,
+							pinnedType: header.column.getIsPinned() ? "header" : void 0,
+							resizable: header.column.getCanResize()
+						}),
+						children: header.isPlaceholder ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+					}, header.id))
+				}, headerGroup.id))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableBody, {
+				display: "grid",
+				style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
+				children: (loading === true ? Array.from({ length: SKELETON_ROW_COUNT }, (_, rowIndex) => ({
+					row: require_DataTableHeaderCell.fakeRow(table, rowIndex),
+					virtualRow: void 0
+				})) : rowVirtualizer.options.enabled ? virtualRows.length === 0 && rows.length > 0 ? previousRowsRef.current.map((row) => ({
+					row,
+					virtualRow: void 0
+				})) : virtualRows.map((virtualRow) => ({
+					row: rows[virtualRow.index],
+					virtualRow
+				})) : rows.map((row) => ({
+					row,
+					virtualRow: void 0
+				}))).map(({ row, virtualRow }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DataTableRow, {
+					"aria-rowindex": headerGroups.length + (virtualRow?.index ?? index) + 1,
+					"data-index": virtualRow?.index,
+					display: "flex",
+					index: virtualRow?.index ?? index,
+					ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+					row,
+					style: virtualRow ? {
+						position: "absolute",
+						transform: `translateY(${virtualRow.start}px)`
+					} : void 0,
+					children: [
+						row.getLeftVisibleCells().map((cell$2) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableCell, {
+							"aria-colindex": columnIndexes.get(cell$2.column.id),
+							pinned: true,
+							style: { ...(0, _vanilla_extract_dynamic.assignInlineVars)({
+								[cellOffsetVar]: `${cell$2.column.getStart("left")}px`,
+								[cellSizeVar]: `${cell$2.column.getSize()}`
+							}) },
+							...cell({
+								pinned: "left",
+								pinnedType: "body",
+								resizable: cell$2.column.getCanResize()
+							}),
+							children: (0, _tanstack_react_table.flexRender)(cell$2.column.columnDef.cell, cell$2.getContext())
+						}, cell$2.id)),
+						leadingSpacerStyle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableCell, {
+							"aria-hidden": true,
+							p: "0",
+							style: leadingSpacerStyle
+						}),
+						(columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+							return row.getCenterVisibleCells()[virtualCell.index];
+						}) : row.getCenterVisibleCells()).map((cell$3) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableCell, {
+							"aria-colindex": columnIndexes.get(cell$3.column.id),
+							style: { ...(0, _vanilla_extract_dynamic.assignInlineVars)({ [cellSizeVar]: `${cell$3.column.getSize()}` }) },
+							...cell({ resizable: cell$3.column.getCanResize() }),
+							children: (0, _tanstack_react_table.flexRender)(cell$3.column.columnDef.cell, cell$3.getContext())
+						}, cell$3.id)),
+						trailingSpacerStyle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableCell, {
+							"aria-hidden": true,
+							p: "0",
+							style: trailingSpacerStyle
+						}),
+						row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table.TableCell, {
+							"aria-colindex": columnIndexes.get(cell$1.column.id),
+							pinned: true,
+							style: { ...(0, _vanilla_extract_dynamic.assignInlineVars)({
+								[cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+								[cellSizeVar]: `${cell$1.column.getSize()}`
+							}) },
+							...cell({
+								pinned: "right",
+								pinnedType: "body",
+								resizable: cell$1.column.getCanResize()
+							}),
+							children: (0, _tanstack_react_table.flexRender)(cell$1.column.columnDef.cell, cell$1.getContext())
+						}, cell$1.id))
+					]
+				}, row.id))
+			})]
+		})
+	});
+});
+DataTableBody.displayName = "@optiaxiom/react/DataTableBody";
+/**
+* Sizes a cell standing in for unrendered center columns so body rows match
+* the header's width and split its free space in the same ratio.
+*/
+const getSpacerStyle = (columns, totalResizableSize) => {
+	if (columns.length === 0) return;
+	let size = 0;
+	let resizableSize = 0;
+	for (const column of columns) {
+		size += column.getSize();
+		resizableSize += column.getCanResize() ? column.getSize() : 0;
+	}
+	return {
+		flexGrow: totalResizableSize ? resizableSize / totalResizableSize : 0,
+		width: `${size}px`
+	};
+};
+//#endregion
+//#region src/data-table/DataTableCheckbox.tsx
+/**
+* @group DataTable
+*/
+const DataTableCheckbox = (0, react.forwardRef)(({ children, disabled, visible, ...props }, outerRef) => {
+	const { table } = useDataTableContext("@optiaxiom/react/DataTableCheckbox");
+	const { labelId, row, setSelector } = require_DataTableHeaderCell.useDataTableRowContext("@optiaxiom/react/DataTableCheckbox");
+	const labelPrefixId = (0, _radix_ui_react_id.useId)();
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	(0, react.useEffect)(() => {
+		if (!setSelector) return;
+		if (!disabled) setSelector(innerRef);
+		return () => setSelector(void 0);
+	}, [disabled, setSelector]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [row && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_visually_hidden.VisuallyHidden, {
+		id: labelPrefixId,
+		children: ["Check to ", row.getIsSelected() ? "unselect" : "select"]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableAction, {
+		visible: visible ?? (table.getIsSomeRowsSelected() || !row) ? "always" : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.Checkbox, {
+			"aria-label": !row ? "Select all" : void 0,
+			"aria-labelledby": row && (0, clsx.default)(labelPrefixId, labelId),
+			checked: row ? row.getIsSelected() : table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected(),
+			disabled,
+			indeterminate: !row && table.getIsSomePageRowsSelected(),
+			onChange: row ? row.getToggleSelectedHandler() : table.getToggleAllPageRowsSelectedHandler(),
+			ref,
+			...props,
+			children
+		})
+	})] });
+});
+DataTableCheckbox.displayName = "@optiaxiom/react/DataTableCheckbox";
+//#endregion
+//#region src/data-table/DataTableFooter.css.ts
+var addon = require_recipeRuntime.recipeRuntime({
+	base: "_1ihs9ya",
+	variants: { slot: {
+		after: { textAlign: "end" },
+		before: {}
+	} }
+});
+//#endregion
+//#region src/data-table/DataTableFooter.tsx
+const DEFAULT_PAGE_SIZES = [
+	"10",
+	"20",
+	"30",
+	"50",
+	"100"
+].map((size) => ({
+	label: size,
+	value: size
+}));
+/**
+* @group DataTable
+*/
+const DataTableFooter = (0, react.forwardRef)(({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
+	const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
+	const { pagination } = table.getState();
+	const pageSizeId = (0, _radix_ui_react_id.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+		alignSelf: "stretch",
+		fontSize: "md",
+		gap: "16",
+		justifyContent: "space-between",
+		mt: "auto",
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				...addon({ slot: "before" }),
+				children: showPageSizeOptions && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+					gap: "8",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+						color: "fg.secondary",
+						id: pageSizeId,
+						children: "Page Size"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_select.Select, {
+						onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
+						options: pageSizeOptions,
+						value: pagination.pageSize.toString(),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectTrigger, {
+							appearance: "subtle",
+							"aria-labelledby": pageSizeId
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_select.SelectContent, {})]
+					})]
+				})
+			}),
+			table.getPageCount() > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination.Pagination, {
+				onPageChange: (newPage) => table.setPageIndex(newPage - 1),
+				page: pagination.pageIndex + 1,
+				total: table.getPageCount()
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+				...addon({ slot: "after" }),
+				children: table.getRowCount() > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					pagination.pageIndex * pagination.pageSize + 1,
+					" -",
+					" ",
+					Math.min((pagination.pageIndex + 1) * pagination.pageSize, table.getRowCount()),
+					" ",
+					"of ",
+					table.getRowCount()
+				] })
+			})
+		]
+	});
+});
+DataTableFooter.displayName = "@optiaxiom/react/DataTableFooter";
+//#endregion
+//#region src/data-table/DataTableLabel.tsx
+/**
+* @group DataTable
+*/
+const DataTableLabel = (0, react.forwardRef)((props, ref) => {
+	const { labelId } = require_DataTableHeaderCell.useDataTableRowContext("@optiaxiom/react/DataTableLabel");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		id: labelId,
+		ref,
+		...props
+	});
+});
+DataTableLabel.displayName = "@optiaxiom/react/DataTableLabel";
+//#endregion
+Object.defineProperty(exports, "DataTable", {
+	enumerable: true,
+	get: function() {
+		return DataTable;
+	}
+});
+Object.defineProperty(exports, "DataTableAction", {
+	enumerable: true,
+	get: function() {
+		return DataTableAction;
+	}
+});
+Object.defineProperty(exports, "DataTableBody", {
+	enumerable: true,
+	get: function() {
+		return DataTableBody;
+	}
+});
+Object.defineProperty(exports, "DataTableCheckbox", {
+	enumerable: true,
+	get: function() {
+		return DataTableCheckbox;
+	}
+});
+Object.defineProperty(exports, "DataTableFooter", {
+	enumerable: true,
+	get: function() {
+		return DataTableFooter;
+	}
+});
+Object.defineProperty(exports, "DataTableLabel", {
+	enumerable: true,
+	get: function() {
+		return DataTableLabel;
+	}
+});

package/dist/cjs/data-table.js

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_data_table = require("./data-table-F__FU4y3.js");
+exports.DataTable = require_data_table.DataTable;
+exports.DataTableAction = require_data_table.DataTableAction;
+exports.DataTableBody = require_data_table.DataTableBody;
+exports.DataTableCheckbox = require_data_table.DataTableCheckbox;
+exports.DataTableFooter = require_data_table.DataTableFooter;
+exports.DataTableLabel = require_data_table.DataTableLabel;