@soroush.tech/design-system 0.1.0

package/dist/Table/TableCell.mjs

@@ -0,0 +1,91 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "../src-DcNT2aIK.mjs";
+import { t as themeDefault } from "../themeDefault-CjXaY3ok.mjs";
+import { t as TableContext } from "../TableContext-BRWPghAI.mjs";
+import { t as TableSectionContext } from "../TableSectionContext-meIG4lFZ.mjs";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/TableCell/TableCell.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"cellAlign",
+	"cellPadding",
+	"hasEllipsis",
+	"isSticky",
+	"variant"
+]);
+const colorSystem = (0, src_exports.system)({
+	color: {
+		property: "color",
+		scale: "text"
+	},
+	bg: {
+		property: "backgroundColor",
+		scale: "background"
+	},
+	borderColor: {
+		property: "borderColor",
+		scale: "border"
+	}
+});
+const sizeStyle = ({ theme, size, cellPadding = "normal" }) => {
+	const s = theme.sizes[size ?? themeDefault(theme, "size", "md")];
+	const fontSize = theme.fontSizes[s.fontSize];
+	if (cellPadding === "none") return {
+		padding: 0,
+		fontSize
+	};
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize
+	};
+};
+const alignStyle = ({ cellAlign = "inherit" }) => ({ textAlign: cellAlign });
+const ellipsisStyle = ({ hasEllipsis }) => hasEllipsis ? {
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+} : {};
+const dividerStyle = ({ theme }) => ({
+	borderBottomWidth: (0, src_exports.get)(theme, "borderWidths.thin"),
+	borderBottomStyle: "solid"
+});
+const stickyStyle = ({ isSticky, theme }) => isSticky ? {
+	position: "sticky",
+	top: 0,
+	backgroundColor: (0, src_exports.get)(theme, "background.paper")
+} : {};
+const TableCellBase = styled("td", {
+	name: "TableCell",
+	label: "TableCell",
+	shouldForwardProp,
+	systemProps: [
+		src_exports.space,
+		colorSystem,
+		src_exports.typography,
+		src_exports.border
+	]
+})(sizeStyle, dividerStyle, stickyStyle, ellipsisStyle, alignStyle);
+function TableCell({ variant, align = "inherit", size, cellPadding, sortDirection, hasEllipsis, scope, as, children, ...rest }) {
+	const section = useContext(TableSectionContext);
+	const table = useContext(TableContext);
+	const resolvedVariant = variant ?? section ?? "body";
+	const isHead = resolvedVariant === "head";
+	return /* @__PURE__ */ jsx(TableCellBase, {
+		as: as ?? (isHead ? "th" : "td"),
+		variant: resolvedVariant,
+		cellAlign: align,
+		size: size ?? table.size,
+		cellPadding: cellPadding ?? table.cellPadding,
+		hasEllipsis: hasEllipsis ?? table.hasEllipsis,
+		isSticky: isHead && Boolean(table.hasStickyHeader),
+		scope: scope ?? (isHead ? "col" : void 0),
+		"aria-sort": sortDirection && (sortDirection === "asc" ? "ascending" : "descending"),
+		...rest,
+		children
+	});
+}
+//#endregion
+export { TableCell };

package/dist/Table/TableContainer.cjs

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_View = require("../View.cjs");
+//#region src/Table/TableContainer/TableContainer.tsx
+/**
+* Scroll wrapper for `Table` — wide tables scroll horizontally inside it
+* instead of breaking the page layout. Give it a bounded height to make
+* `Table`'s `hasStickyHeader` stick.
+*/
+const TableContainer = require_src.styled(require_View.View, {
+	name: "TableContainer",
+	label: "TableContainer"
+})({ overflowX: "auto" });
+//#endregion
+exports.TableContainer = TableContainer;

package/dist/Table/TableContainer.d.cts

@@ -0,0 +1,2 @@
+import { n as TableContainerProps, t as TableContainer } from "../index-DeJWkpf9.cjs";
+export { TableContainer, TableContainerProps };

package/dist/Table/TableContainer.d.mts

@@ -0,0 +1,2 @@
+import { n as TableContainerProps, t as TableContainer } from "../index-DBGE6yKw.mjs";
+export { TableContainer, TableContainerProps };

package/dist/Table/TableContainer.mjs

@@ -0,0 +1,14 @@
+import { d as styled } from "../src-DcNT2aIK.mjs";
+import { View } from "../View.mjs";
+//#region src/Table/TableContainer/TableContainer.tsx
+/**
+* Scroll wrapper for `Table` — wide tables scroll horizontally inside it
+* instead of breaking the page layout. Give it a bounded height to make
+* `Table`'s `hasStickyHeader` stick.
+*/
+const TableContainer = styled(View, {
+	name: "TableContainer",
+	label: "TableContainer"
+})({ overflowX: "auto" });
+//#endregion
+export { TableContainer };

package/dist/Table/TableControl.cjs

@@ -0,0 +1,42 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Table/TableControl/TableControl.tsx
+const defaultSortFunction = (a, b, orderBy) => {
+	const first = a[orderBy];
+	const second = b[orderBy];
+	if (first < second) return -1;
+	if (first > second) return 1;
+	return 0;
+};
+/**
+* Renders the visible rows of a dataset inside `TableBody` — sorted by the
+* active `useTableSort` column and sliced by the `useTablePagination` state.
+* Emits the rows directly (no wrapper element), so its output are valid
+* `<tr>` children of `<tbody>`. Both `sort` and `pagination` are optional.
+*/
+function TableControl({ data, sort, pagination, sortFunction = defaultSortFunction, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react.useMemo)(() => {
+		let visible = [...data];
+		const active = sort && Object.entries(sort).find(([, entry]) => entry.isActive);
+		if (active) {
+			const [orderBy, { direction }] = active;
+			const sign = direction === "asc" ? 1 : -1;
+			visible.sort((a, b) => sign * sortFunction(a, b, orderBy));
+		}
+		if (pagination && pagination.rowsPerPage !== -1) {
+			const { rowsPerPage } = pagination;
+			const lastPage = Math.max(0, Math.ceil(visible.length / rowsPerPage) - 1);
+			const page = Math.min(Math.max(0, pagination.page), lastPage);
+			visible = visible.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
+		}
+		return visible;
+	}, [
+		data,
+		sort,
+		pagination,
+		sortFunction
+	]).map(children) });
+}
+//#endregion
+exports.TableControl = TableControl;

package/dist/Table/TableControl.d.cts

@@ -0,0 +1,2 @@
+import { n as TableControlProps, t as TableControl } from "../index-g-9DZ_KQ.cjs";
+export { TableControl, TableControlProps };

package/dist/Table/TableControl.d.mts

@@ -0,0 +1,2 @@
+import { n as TableControlProps, t as TableControl } from "../index-u57CbuAU2.mjs";
+export { TableControl, TableControlProps };

package/dist/Table/TableControl.mjs

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/Table/TableControl/TableControl.tsx
+const defaultSortFunction = (a, b, orderBy) => {
+	const first = a[orderBy];
+	const second = b[orderBy];
+	if (first < second) return -1;
+	if (first > second) return 1;
+	return 0;
+};
+/**
+* Renders the visible rows of a dataset inside `TableBody` — sorted by the
+* active `useTableSort` column and sliced by the `useTablePagination` state.
+* Emits the rows directly (no wrapper element), so its output are valid
+* `<tr>` children of `<tbody>`. Both `sort` and `pagination` are optional.
+*/
+function TableControl({ data, sort, pagination, sortFunction = defaultSortFunction, children }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: useMemo(() => {
+		let visible = [...data];
+		const active = sort && Object.entries(sort).find(([, entry]) => entry.isActive);
+		if (active) {
+			const [orderBy, { direction }] = active;
+			const sign = direction === "asc" ? 1 : -1;
+			visible.sort((a, b) => sign * sortFunction(a, b, orderBy));
+		}
+		if (pagination && pagination.rowsPerPage !== -1) {
+			const { rowsPerPage } = pagination;
+			const lastPage = Math.max(0, Math.ceil(visible.length / rowsPerPage) - 1);
+			const page = Math.min(Math.max(0, pagination.page), lastPage);
+			visible = visible.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
+		}
+		return visible;
+	}, [
+		data,
+		sort,
+		pagination,
+		sortFunction
+	]).map(children) });
+}
+//#endregion
+export { TableControl };

package/dist/Table/TableFooter.cjs

@@ -0,0 +1,42 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_TableSectionContext = require("../TableSectionContext-pYlJ-duI.cjs");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Table/TableFooter/TableFooter.tsx
+const TableFooterBase = require_src.styled("tfoot", {
+	name: "TableFooter",
+	label: "TableFooter",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]),
+	systemProps: [
+		require_src.src_exports.space,
+		(0, require_src.src_exports.system)({
+			color: {
+				property: "color",
+				scale: "text"
+			},
+			bg: {
+				property: "backgroundColor",
+				scale: "background"
+			},
+			borderColor: {
+				property: "borderColor",
+				scale: "border"
+			}
+		}),
+		require_src.src_exports.border
+	]
+})();
+function TableFooter({ as, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableSectionContext.TableSectionContext.Provider, {
+		value: "footer",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableFooterBase, {
+			as,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+exports.TableFooter = TableFooter;

package/dist/Table/TableFooter.d.cts

@@ -0,0 +1,2 @@
+import { a as TableFooterProps, i as TableFooterColorToken, n as TableFooterBackgroundToken, r as TableFooterBorderColorToken, t as TableFooter } from "../index-CDcGTGR4.cjs";
+export { TableFooter, TableFooterBackgroundToken, TableFooterBorderColorToken, TableFooterColorToken, TableFooterProps };

package/dist/Table/TableFooter.d.mts

@@ -0,0 +1,2 @@
+import { a as TableFooterProps, i as TableFooterColorToken, n as TableFooterBackgroundToken, r as TableFooterBorderColorToken, t as TableFooter } from "../index-g9EThkSg.mjs";
+export { TableFooter, TableFooterBackgroundToken, TableFooterBorderColorToken, TableFooterColorToken, TableFooterProps };

package/dist/Table/TableFooter.mjs

@@ -0,0 +1,40 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "../src-DcNT2aIK.mjs";
+import { t as TableSectionContext } from "../TableSectionContext-meIG4lFZ.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/TableFooter/TableFooter.tsx
+const TableFooterBase = styled("tfoot", {
+	name: "TableFooter",
+	label: "TableFooter",
+	shouldForwardProp: createShouldForwardProp([...props]),
+	systemProps: [
+		src_exports.space,
+		(0, src_exports.system)({
+			color: {
+				property: "color",
+				scale: "text"
+			},
+			bg: {
+				property: "backgroundColor",
+				scale: "background"
+			},
+			borderColor: {
+				property: "borderColor",
+				scale: "border"
+			}
+		}),
+		src_exports.border
+	]
+})();
+function TableFooter({ as, children, ...rest }) {
+	return /* @__PURE__ */ jsx(TableSectionContext.Provider, {
+		value: "footer",
+		children: /* @__PURE__ */ jsx(TableFooterBase, {
+			as,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+export { TableFooter };

package/dist/Table/TableHead.cjs

@@ -0,0 +1,42 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_TableSectionContext = require("../TableSectionContext-pYlJ-duI.cjs");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Table/TableHead/TableHead.tsx
+const TableHeadBase = require_src.styled("thead", {
+	name: "TableHead",
+	label: "TableHead",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]),
+	systemProps: [
+		require_src.src_exports.space,
+		(0, require_src.src_exports.system)({
+			color: {
+				property: "color",
+				scale: "text"
+			},
+			bg: {
+				property: "backgroundColor",
+				scale: "background"
+			},
+			borderColor: {
+				property: "borderColor",
+				scale: "border"
+			}
+		}),
+		require_src.src_exports.border
+	]
+})();
+function TableHead({ as, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableSectionContext.TableSectionContext.Provider, {
+		value: "head",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHeadBase, {
+			as,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+exports.TableHead = TableHead;

package/dist/Table/TableHead.d.cts

@@ -0,0 +1,2 @@
+import { a as TableHeadProps, i as TableHeadColorToken, n as TableHeadBackgroundToken, r as TableHeadBorderColorToken, t as TableHead } from "../index-CcYSvIJi.cjs";
+export { TableHead, TableHeadBackgroundToken, TableHeadBorderColorToken, TableHeadColorToken, TableHeadProps };

package/dist/Table/TableHead.d.mts

@@ -0,0 +1,2 @@
+import { a as TableHeadProps, i as TableHeadColorToken, n as TableHeadBackgroundToken, r as TableHeadBorderColorToken, t as TableHead } from "../index-DvW2eETV.mjs";
+export { TableHead, TableHeadBackgroundToken, TableHeadBorderColorToken, TableHeadColorToken, TableHeadProps };

package/dist/Table/TableHead.mjs

@@ -0,0 +1,40 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "../src-DcNT2aIK.mjs";
+import { t as TableSectionContext } from "../TableSectionContext-meIG4lFZ.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/TableHead/TableHead.tsx
+const TableHeadBase = styled("thead", {
+	name: "TableHead",
+	label: "TableHead",
+	shouldForwardProp: createShouldForwardProp([...props]),
+	systemProps: [
+		src_exports.space,
+		(0, src_exports.system)({
+			color: {
+				property: "color",
+				scale: "text"
+			},
+			bg: {
+				property: "backgroundColor",
+				scale: "background"
+			},
+			borderColor: {
+				property: "borderColor",
+				scale: "border"
+			}
+		}),
+		src_exports.border
+	]
+})();
+function TableHead({ as, children, ...rest }) {
+	return /* @__PURE__ */ jsx(TableSectionContext.Provider, {
+		value: "head",
+		children: /* @__PURE__ */ jsx(TableHeadBase, {
+			as,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+export { TableHead };

package/dist/Table/TablePagination.cjs

@@ -0,0 +1,89 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_Typography = require("../Typography.cjs");
+const require_NativeSelect = require("../NativeSelect.cjs");
+const require_Table_TableCell = require("./TableCell.cjs");
+const require_Table_TablePaginationActions = require("./TablePaginationActions.cjs");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Table/TablePagination/TablePagination.tsx
+const DEFAULT_ROWS_PER_PAGE_OPTIONS = [
+	10,
+	25,
+	50,
+	100
+];
+const defaultDisplayedRowsLabel = ({ from, to, count }) => {
+	return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+};
+const defaultGetItemAriaLabel = (type) => `Go to ${type} page`;
+const Toolbar = require_src.styled("div", {
+	name: "TablePagination",
+	label: "TablePaginationToolbar"
+})({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "flex-end",
+	flexWrap: "wrap",
+	gap: "1rem"
+});
+/**
+* A `TableCell`-based pagination control for `TableFooter > TableRow`.
+* Controlled only — the consumer owns `page` and `rowsPerPage`.
+*/
+function TablePagination({ count, page, rowsPerPage, onPageChange, onRowsPerPageChange, rowsPerPageOptions = DEFAULT_ROWS_PER_PAGE_OPTIONS, disabled = false, shouldShowFirstButton = false, shouldShowLastButton = false, rowsPerPageLabel = "Rows per page:", displayedRowsLabel = defaultDisplayedRowsLabel, getItemAriaLabel = defaultGetItemAriaLabel, colSpan = 1e3, as, ...rest }) {
+	const selectOptions = rowsPerPageOptions.map((option) => typeof option === "number" ? {
+		label: String(option),
+		value: option
+	} : option);
+	const hasRowsPerPageSelector = selectOptions.length >= 2;
+	const from = count === 0 ? 0 : page * rowsPerPage + 1;
+	const boundedTo = count === -1 ? (page + 1) * rowsPerPage : Math.min(count, (page + 1) * rowsPerPage);
+	const to = rowsPerPage === -1 ? count : boundedTo;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_TableCell.TableCell, {
+		variant: "footer",
+		as,
+		colSpan,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Toolbar, { children: [
+			hasRowsPerPageSelector && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "caption",
+				color: "secondary",
+				as: "span",
+				children: rowsPerPageLabel
+			}),
+			hasRowsPerPageSelector && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NativeSelect.NativeSelect, {
+				variant: "text",
+				size: "sm",
+				options: selectOptions,
+				value: rowsPerPage,
+				disabled,
+				onChange: (value) => onRowsPerPageChange?.(Number(value)),
+				selectProps: { "aria-label": "Rows per page" }
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "caption",
+				color: "secondary",
+				as: "span",
+				children: displayedRowsLabel({
+					from,
+					to,
+					count,
+					page
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_TablePaginationActions.TablePaginationActions, {
+				count,
+				page,
+				rowsPerPage,
+				onPageChange,
+				getItemAriaLabel,
+				disabled,
+				shouldShowFirstButton,
+				shouldShowLastButton
+			})
+		] })
+	});
+}
+//#endregion
+exports.TablePagination = TablePagination;

package/dist/Table/TablePagination.d.cts

@@ -0,0 +1,2 @@
+import { n as TablePaginationDisplayedRowsInfo, r as TablePaginationProps, t as TablePagination } from "../index-BlfIbAMs.cjs";
+export { TablePagination, TablePaginationDisplayedRowsInfo, TablePaginationProps };

package/dist/Table/TablePagination.d.mts

@@ -0,0 +1,2 @@
+import { n as TablePaginationDisplayedRowsInfo, r as TablePaginationProps, t as TablePagination } from "../index-kpk9e3xM2.mjs";
+export { TablePagination, TablePaginationDisplayedRowsInfo, TablePaginationProps };

package/dist/Table/TablePagination.mjs

@@ -0,0 +1,88 @@
+import { d as styled } from "../src-DcNT2aIK.mjs";
+import { Typography } from "../Typography.mjs";
+import { NativeSelect } from "../NativeSelect.mjs";
+import { TableCell } from "./TableCell.mjs";
+import { TablePaginationActions } from "./TablePaginationActions.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Table/TablePagination/TablePagination.tsx
+const DEFAULT_ROWS_PER_PAGE_OPTIONS = [
+	10,
+	25,
+	50,
+	100
+];
+const defaultDisplayedRowsLabel = ({ from, to, count }) => {
+	return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+};
+const defaultGetItemAriaLabel = (type) => `Go to ${type} page`;
+const Toolbar = styled("div", {
+	name: "TablePagination",
+	label: "TablePaginationToolbar"
+})({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "flex-end",
+	flexWrap: "wrap",
+	gap: "1rem"
+});
+/**
+* A `TableCell`-based pagination control for `TableFooter > TableRow`.
+* Controlled only — the consumer owns `page` and `rowsPerPage`.
+*/
+function TablePagination({ count, page, rowsPerPage, onPageChange, onRowsPerPageChange, rowsPerPageOptions = DEFAULT_ROWS_PER_PAGE_OPTIONS, disabled = false, shouldShowFirstButton = false, shouldShowLastButton = false, rowsPerPageLabel = "Rows per page:", displayedRowsLabel = defaultDisplayedRowsLabel, getItemAriaLabel = defaultGetItemAriaLabel, colSpan = 1e3, as, ...rest }) {
+	const selectOptions = rowsPerPageOptions.map((option) => typeof option === "number" ? {
+		label: String(option),
+		value: option
+	} : option);
+	const hasRowsPerPageSelector = selectOptions.length >= 2;
+	const from = count === 0 ? 0 : page * rowsPerPage + 1;
+	const boundedTo = count === -1 ? (page + 1) * rowsPerPage : Math.min(count, (page + 1) * rowsPerPage);
+	const to = rowsPerPage === -1 ? count : boundedTo;
+	return /* @__PURE__ */ jsx(TableCell, {
+		variant: "footer",
+		as,
+		colSpan,
+		...rest,
+		children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+			hasRowsPerPageSelector && /* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				color: "secondary",
+				as: "span",
+				children: rowsPerPageLabel
+			}),
+			hasRowsPerPageSelector && /* @__PURE__ */ jsx(NativeSelect, {
+				variant: "text",
+				size: "sm",
+				options: selectOptions,
+				value: rowsPerPage,
+				disabled,
+				onChange: (value) => onRowsPerPageChange?.(Number(value)),
+				selectProps: { "aria-label": "Rows per page" }
+			}),
+			/* @__PURE__ */ jsx(Typography, {
+				variant: "caption",
+				color: "secondary",
+				as: "span",
+				children: displayedRowsLabel({
+					from,
+					to,
+					count,
+					page
+				})
+			}),
+			/* @__PURE__ */ jsx(TablePaginationActions, {
+				count,
+				page,
+				rowsPerPage,
+				onPageChange,
+				getItemAriaLabel,
+				disabled,
+				shouldShowFirstButton,
+				shouldShowLastButton
+			})
+		] })
+	});
+}
+//#endregion
+export { TablePagination };

package/dist/Table/TablePaginationActions.cjs

@@ -0,0 +1,65 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_themeDefault = require("../themeDefault-B-QjpGEO.cjs");
+const require_Pagination_PaginationItem = require("../Pagination/PaginationItem.cjs");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _emotion_react = require("@emotion/react");
+//#region src/Table/TablePaginationActions/TablePaginationActions.tsx
+const ActionsRoot = require_src.styled("div", {
+	name: "TablePaginationActions",
+	label: "TablePaginationActions"
+})({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "0.25rem",
+	flexShrink: 0
+});
+/**
+* The first / previous / next / last button cluster inside `TablePagination`.
+* Composes `PaginationItem`'s nav types; boundary state is derived from
+* `count` / `page` / `rowsPerPage`.
+*/
+function TablePaginationActions({ count, page, rowsPerPage, onPageChange, getItemAriaLabel, disabled = false, shouldShowFirstButton = false, shouldShowLastButton = false, size: sizeProp, ...rest }) {
+	const theme = (0, _emotion_react.useTheme)();
+	const size = sizeProp ?? require_themeDefault.themeDefault(theme, "compactSize", "sm");
+	const lastPage = rowsPerPage === -1 ? 0 : Math.max(0, Math.ceil(count / rowsPerPage) - 1);
+	const isBackwardDisabled = disabled || page <= 0;
+	const isNextDisabled = disabled || count !== -1 && page >= lastPage;
+	const isLastDisabled = disabled || count === -1 || page >= lastPage;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ActionsRoot, {
+		...rest,
+		children: [
+			shouldShowFirstButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pagination_PaginationItem.PaginationItem, {
+				type: "first",
+				size,
+				disabled: isBackwardDisabled,
+				onClick: () => onPageChange(0),
+				"aria-label": getItemAriaLabel("first")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pagination_PaginationItem.PaginationItem, {
+				type: "previous",
+				size,
+				disabled: isBackwardDisabled,
+				onClick: () => onPageChange(page - 1),
+				"aria-label": getItemAriaLabel("previous")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pagination_PaginationItem.PaginationItem, {
+				type: "next",
+				size,
+				disabled: isNextDisabled,
+				onClick: () => onPageChange(page + 1),
+				"aria-label": getItemAriaLabel("next")
+			}),
+			shouldShowLastButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pagination_PaginationItem.PaginationItem, {
+				type: "last",
+				size,
+				disabled: isLastDisabled,
+				onClick: () => onPageChange(lastPage),
+				"aria-label": getItemAriaLabel("last")
+			})
+		]
+	});
+}
+//#endregion
+exports.TablePaginationActions = TablePaginationActions;

package/dist/Table/TablePaginationActions.d.cts

@@ -0,0 +1,2 @@
+import { n as TablePaginationActions, r as TablePaginationActionsProps, t as TablePaginationActionType } from "../index-DSCMXFTn.cjs";
+export { TablePaginationActionType, TablePaginationActions, TablePaginationActionsProps };

package/dist/Table/TablePaginationActions.d.mts

@@ -0,0 +1,2 @@
+import { n as TablePaginationActions, r as TablePaginationActionsProps, t as TablePaginationActionType } from "../index-BnzUumAC2.mjs";
+export { TablePaginationActionType, TablePaginationActions, TablePaginationActionsProps };