pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/Table/TableProps.d.ts

@@ -1,98 +1,241 @@
-import { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from "react";
 import { FilterSidebarProps } from "../FilterSidebar/FilterSidebar";
+import type { FilterValues } from "./filterTypes";
+import type { TableVariant } from "./variants/tokens";
+export type { FilterValues } from "./filterTypes";
+export type { TableVariant, TableVariantTokens } from "./variants/tokens";
+/** Dynamic row shape (cells, styles, callbacks). */
+export type DataObject = Record<string, unknown>;
+/** Row-height preset controlling row height and cell vertical padding. */
+export type TableDensity = "compact" | "normal" | "comfortable";
+/** Empty-state content shown when there are no rows; alternative to a raw ReactNode. */
+export type TableEmptyState = {
+    /** Rendered as the illustration above the title; omit for the default empty-state icon. */
+    icon?: ReactNode;
+    /** Headline of the empty state. */
+    title?: string;
+    /** Supporting line under the title. */
+    description?: string;
+};
+/** Props for the main Table component: data, columns, pagination, selection, filters, and more. */
 export type TableProps = {
+    /** Every row needs a unique `id` — selection, select-all and row keys all read `row.id`. */
     data: DataObject[];
+    /** Memoize this array: an inline one re-installs column state on every render. */
     columns: TableHeaderProps[];
+    /** Hex override per group value; wins over the auto-assigned palette color. Only visible while grouped (Settings > Group). */
+    groupColors?: Record<string | number, string>;
+    /** Renders a "+ add item" control in each group's footer row; no-op in flat (ungrouped) mode. */
+    onAddItem?: (groupValue: string | number) => void;
+    /** Seeds the initial row height only — Table Settings > Density (or saved preferences.density) takes over after the first change. */
+    density?: TableDensity;
+    /** Visual preset. Defaults to `studio`; pass `"classic"` for the banded header and per-column rules. */
+    variant?: TableVariant;
+    /** Content shown under a row when expanded; return null for rows with no detail and they get no chevron. Memoize it: an inline function re-renders every row. */
+    renderRowDetail?: (row: DataObject) => ReactNode | null;
+    /** Controlled expanded row ids; omit for uncontrolled. */
+    expandedRows?: (string | number)[];
+    /** Fires with the full expanded id list on every chevron toggle, controlled or not. */
+    onExpandedRowsChange?: (ids: (string | number)[]) => void;
+    /** Zebra rows: every second row gets the variant's `row.stripeBg` fill. Frozen and selected cells keep their own fill. */
+    stripe?: boolean;
+    /** Shown when there are no rows. An object feeds the library `EmptyState`; any other node renders as-is. */
+    emptyState?: TableEmptyState | ReactNode;
+    /** Shows the toolbar's global search control. Defaults true; the search only calls `onGlobalSearch`. */
+    isGlobalSearch?: boolean;
+    /** @deprecated Dead — Table renders no export UI and never reads this; no known consumer usage. */
     handleExportChange?: (value: string) => void | undefined;
+    /** @deprecated Dead — same unwired export feature as handleExportChange/exportLabel. */
     exportOptions?: ExportOption[];
+    /** @deprecated Dead — same unwired export feature as handleExportChange/exportOptions. */
     exportLabel?: string;
+    /** Skeleton rows when data is empty, otherwise dims existing rows; also true while onRefresh runs. */
     isLoading?: boolean;
+    /** @deprecated Dead — Table never destructures it; the live prop is `isTableSettings`. */
     isVisiblity?: boolean;
+    /** Adds a row-selection checkbox column plus a select-all header. Defaults false. */
     isCheckbox?: boolean;
+    /** @deprecated Dead — the header paints the variant's `header.bg`; this value is never read. */
     headerBgColor?: string;
+    /** Fill for frozen (isFreeze) and sticky action cells. Defaults to `backgroundColor.secondary`; pass a token. */
     freezedBgColor?: string;
-    headerTextColor?: string;
+    /** Ink for frozen/sticky chrome cells (checkbox, action). Defaults to `text[500]`; a hardcoded hex breaks dark mode. */
     freezedTextColor?: string;
+    /** @deprecated Dead — referenced nowhere in the Table tree; no visual effect. */
     tableBorderColor?: string;
+    /** Removes the row rules and header column dividers. */
     noBorders?: boolean;
+    /** Fires with the full selected-id list on every toggle, including select-all. */
     onSelection?: (selected: (string | number)[]) => void;
+    /** Client-side paging. Defaults true; false renders every row with no pager. */
     isPagination?: boolean;
+    /** Controlled selected row ids; a new array replaces the internal selection. */
     selections?: (string | number)[];
+    /** Fires per cell, gated on the column: a column with `node` swallows its clicks. Also makes rows tab stops; Enter or Space fires it for the first column without `node`. A node `label` arrives as its plain text. */
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
+    /** Sticky-positions the trailing action/link column during horizontal scroll. Defaults true. */
     isActionFreeze?: boolean;
+    /** "server" skips client-side slicing entirely — the parent must supply totalRecords and drive paging via onPagination. */
     paginationMode?: "client" | "server";
+    /** Replaces the pager with scroll-to-load: calls `onPagination(..., "next")` within 160px of the bottom; ignored while grouped. */
+    infiniteScroll?: boolean;
+    /** Gates further loads; when omitted, derived from data.length < totalRecords. */
+    hasMore?: boolean;
+    /** Parent-owned: set true while the next page is fetching — blocks repeat loads and shows the spinner. */
+    isLoadingMore?: boolean;
+    /** Shows a Load more button over grouped rows instead of a pager; no effect unless the user has grouped the table. */
+    groupLoadMore?: boolean;
+    /** Label and loading text of the grouped Load more button. Defaults "Load more". */
+    loadMoreText?: string;
+    /** Where the grouped Load more button sits. Defaults "top". */
+    loadMorePosition?: "top" | "bottom";
+    /** Last-resort grouped-load-more chunk size, read only when `noOfRowsPerPage` is 0 or unset. */
+    loadMoreChunkSize?: number;
+    /** Page size. Defaults 50; changing it later re-syncs the internal page size. */
     noOfRowsPerPage?: number;
+    /** Ignored by client paging; server/infinite/load-more use it for counts and the default hasMore. */
     totalRecords?: number;
+    /** record is the page's last row on "next"/"last", its first row on "prev"/"first" — a cursor for server paging. */
     onPagination?: (page: number, noOfRecords: number, record: DataObject | undefined, direction: "next" | "prev" | "first" | "last") => void;
+    /** Fires when the user picks a page size; the table also resets to page 1. */
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
+    /** Page-size choices; defaults are computed from data length. Server mode hides the picker unless set. */
     paginationSelectOptions?: (number | string)[];
+    /** Explicit pixel height; overrides autoFitViewport and minVisibleRows/maxVisibleRows outright when set. */
     tableMaxHeight?: number;
+    /** Floors the auto-computed row count used for sizing only — doesn't add rows or affect pagination. */
     minVisibleRows?: number;
+    /** Row count above which height is capped and scrolls; at or under it the table grows to fit every row, even wrapped ones. Ignored once tableMaxHeight is set. */
     maxVisibleRows?: number;
+    /** Further clamps computed height to remaining viewport space below the table, recalculated on resize; ignored once tableMaxHeight is set. */
     autoFitViewport?: boolean;
+    /** Hides columns past this index on first render only — a saved preferences.columns list (or a Settings save) wins on every later render. */
     defaultVisibleColumns?: number;
+    /** Skeleton rows shown while loading with no data. Defaults 4, minimum 1. */
     loadingSkeletonRows?: number;
+    /** Toolbar bulk actions; only `isStatic` items show before any row is selected. */
     headerActions?: HeaderActionsProps;
+    /** Debounced 700ms; called with "" when the search box is closed. Filtering is the parent's job. */
     onGlobalSearch?: (searchVal: string) => void;
-    onColumnFilter?: (filters: Record<string, any>) => void;
+    /** @deprecated Dead — Table.tsx never references it; never called, no known consumer usage. */
+    onColumnFilter?: (filters: FilterValues) => void;
+    /** Gates the Settings gear (Density / Manage Columns / Group) — the real switch for column-visibility UI, unlike tableSettings or isVisiblity. */
     isTableSettings?: boolean;
+    /** @deprecated Dead — TableSettings receives it but never destructures it; no known consumer usage. */
     tableSettings?: {
         filters?: string[];
         filterSelected?: string[];
         onFilterSelection?: (filters: string[]) => void;
     };
+    /** filterMode defaults to "sidebar"; Clear All in "modal" mode doesn't re-apply filters (see COMPONENT-GOTCHAS.md). */
     filterSidebar?: Partial<FilterSidebarProps> & {
         isFilterSidebar?: boolean;
-        handleSidebarFilterClick?: (filters: Record<string, any>) => void;
+        handleSidebarFilterClick?: (filters: FilterValues) => void;
         filterSidebarToggle?: () => void;
         isApplyLoading?: boolean;
         filterMode?: "sidebar" | "modal";
     };
+    /** Server-persists columns/density/grouping as one JSON blob (GET on mount, POST on every Settings save). Omitting url (the default) makes it a silent no-op, not an error — the table just doesn't persist. */
     preferences?: {
+        /** Base REST endpoint for both GET and POST; empty string (the default) disables persistence entirely. */
         url: string;
+        /** Sent as a raw Authorization header value — not "Bearer "-prefixed. */
         token: string;
+        /** Distinguishes multiple saved blobs at the same url/page/name (e.g. per-view settings). */
         key?: string;
+        /** Sent alongside key/page as a query param — a server-side identifier, not rendered anywhere. */
         name?: string;
+        /** Identifies which page/screen owns this table's preferences; sent as a query param. */
         page?: string;
+        /** Scopes the preference blob per organization; sent on both GET and POST. */
         orgId?: string;
     };
+    /** Shows a Refresh button when set; may return a Promise — the table shows loading until it settles. */
+    onRefresh?: () => void;
 };
+/** Config for the bulk-actions toolbar (delete/update/custom items) shown for the current selection. */
 export type HeaderActionsProps = {
+    /** Built-in "Delete" action, shown only while rows are selected and `enabled` is true. */
     isDelete?: {
         enabled?: boolean;
         onClick?: (selection: (string | number)[]) => void;
     };
+    /** Built-in "Mass Update" action, shown only while rows are selected and `enabled` is true. */
     isUpdate?: {
         enabled?: boolean;
         onClick?: (selection: (string | number)[]) => void;
     };
-    items?: {
-        icon: React.ReactElement;
+    /** Custom actions; hidden until a row is selected unless `isStatic`. `customComponent` disables button semantics. */
+    items?: ({
+        icon?: React.ReactElement;
         name: string;
         onClick?: (selection: (string | number)[]) => void;
-    }[];
-};
-export type DataObject = {
-    [key: string]: string | number | any;
+        isHoverEnabled?: boolean;
+        hoverColor?: string;
+        customComponent?: React.ReactNode;
+        isStatic?: boolean;
+    } | {
+        type: "divider";
+    })[];
 };
+/** Column definition: label, sort/search/freeze flags, and optional status or custom cell renderer. */
 export type TableHeaderProps = {
-    label: string | number;
+    /** Header content. A node (icon, tooltip trigger) renders as-is but is clipped, not ellipsized, when too wide. */
+    label: string | number | ReactNode;
+    /** Plain-text name for a node `label` — used by the sort/filter button names, Manage Columns, Group, filter chips and saved preferences. Ignored for a string/number label. Omitted: the node's text children, else `id`. */
+    labelText?: string;
+    /** Row field this column reads (`row[id]`) and its identity in sort, filter, freeze and saved preferences. */
     id: string | number;
+    /** Enables the multi-column sort control; sorts client-side only — server mode never reorders rows. */
     isSort?: boolean;
+    /** @deprecated Never read — every column gets the filter popover regardless. */
     isSearch?: boolean;
+    /** Sticky-pins the column to the left during horizontal scroll. */
     isFreeze?: boolean;
+    /** Initial visibility only; defaultVisibleColumns and saved preferences override it. */
     isHidden?: boolean;
+    /** "status" renders the cell value as a coloured pill unless the column has a `node` renderer. */
+    type?: "status";
+    /** Pre-resolved tone per value — preferred over `statusColors` hex overrides. */
+    statusPalette?: Record<string, import("../../Utils/table").TablePaletteColor>;
+    /** Legacy hex fill seed per value; used only when `statusPalette` lacks that value. */
+    statusColors?: Record<string, string>;
+    /** Field data-type; only columns that declare one appear in the Group-by picker. */
+    columnType?: TableColumnType;
+    /** Horizontal alignment for both the header label and the body cells. Defaults "start", except a full-bleed status cell, which centres until this is set. */
+    align?: TableColumnAlign;
+    /** Custom cell renderer; a column with `node` never fires onRowClick. */
     node?: (data: DataObject) => JSX.Element | string | number | undefined;
 };
+/** Horizontal alignment shared by a column's header label and its cells. */
+export type TableColumnAlign = "start" | "center" | "end";
+/** Known field data-types (open-ended via the trailing string for forward-compat). */
+export type TableColumnType = "text" | "singleline" | "multiLine" | "description" | "email" | "phone" | "website" | "number" | "integer" | "decimal" | "dropdown" | "multiSelectDropdown" | "user" | "date" | "date_time" | "time" | "not_assigned" | (string & {});
+/** One entry in the export-format dropdown, paired with `handleExportChange`. */
 export type ExportOption = {
+    /** Text shown for the format in the dropdown. */
     label: string;
+    /** Format value passed to `handleExportChange`. */
     id: string;
 };
+/** Current sort direction applied to one column. */
 export type ColumnSortingProps = {
+    /** `id` of the sorted column. */
     column: string | number;
+    /** "none" means the column is not sorted. */
     direction: "asc" | "desc" | "none";
 };
-export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
+/** Internal wiring for the row-detail expander, built once by `Table`. */
+export type TableRowDetail = {
+    /** The `renderRowDetail` callback; a null result renders no detail content. */
+    render: (row: DataObject) => ReactNode | null;
+    /** Expands or collapses the detail of the row with this `id`. */
+    toggle: (id: string | number) => void;
+    /** Unique prefix for the DOM ids that link each toggle to its detail row. */
+    idPrefix: string;
+};
+/** Props for the TableHeader row subcomponent: all columns, sorting, search, freeze, selection. */
+export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
     isPopoverOpen?: boolean;
@@ -101,38 +244,79 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     handleHeaderClick?: (header: string, search: boolean) => void;
     headerRefs: React.MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnWidths: number[];
+    /** Measures the select-all cell so frozen columns can butt against its real width. */
+    slotRef: React.Ref<HTMLTableCellElement>;
+    slotWidth: number;
     columnsSort: ColumnSortingProps[];
     handleCheckbox: (selection: string | number) => void;
     checked: boolean | "indeterminate";
     isContent: boolean;
     isLink: boolean;
+    /** Adds the empty chevron column header after the checkbox. */
+    hasDetail?: boolean;
     setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
     columnsSearch: Record<string, string>;
     isSelecting?: boolean;
 };
-export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "loadingSkeletonRows" | "onRowClick" | "isActionFreeze"> & {
+/** Props for the TableBody subcomponent; renders flat rows or grouped Monday-style board rows. */
+export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "loadingSkeletonRows" | "onRowClick" | "isActionFreeze" | "density" | "stripe" | "emptyState"> & {
     startRow: number;
-    endRow: number;
+    /** Page size; a change swaps the rendered rows without moving startRow, so scroll resets. */
+    rowsPerPage: number;
     columnWidths: number[];
+    /** Rendered width of the select-all cell; frozen columns start after it. */
+    slotWidth: number;
     handleCheckbox: (selection: string | number) => void;
     selections: (string | number)[];
     isContent: boolean;
     isLink: boolean;
+    /** Row-detail expander wiring; omitted when `renderRowDetail` is not used. */
+    rowDetail?: TableRowDetail;
+    /** Ids of the rows whose detail is open. */
+    expandedIds?: Set<string | number>;
+    scrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
+    /** Optional per-row id → accent color (Monday group stripe). */
+    accentColors?: Record<string | number, string>;
+    /** When provided, the body renders as a grouped (Monday) board instead of a flat list. */
+    groups?: TableRenderGroup[];
+    onAddItem?: (groupValue: string | number) => void;
 };
+/** One resolved group of rows with its label/accent colors, for grouped board rendering. */
+export type TableRenderGroup = {
+    /** Group key; compared with each row's value in the group column. */
+    value: string | number;
+    /** Group header text. */
+    label: string;
+    /** `solid` is the left accent stripe on the header and its rows, `soft` the header fill, `text` the header ink; `onSolid` is unused. */
+    color: {
+        solid: string;
+        soft: string;
+        text: string;
+        onSolid?: string;
+    };
+    /** Rows belonging to this group, in display order. */
+    rows: DataObject[];
+};
+/** Props for one column's search/filter popover. */
 export type TableFiltersProps = {
-    header: DataObject;
+    header: TableHeaderProps;
     setColumnsSearch: (searchVal: string) => void;
     columnsSearch: string;
     onClose: () => void;
 };
-export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
+/** Props for a single column's header cell: sorting, filtering, freeze state, width. */
+export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
     header: TableHeaderProps;
     index: number;
     columnWidths: number[];
+    slotWidth: number;
+    /** Width of the detail chevron column to the left of frozen columns; 0 when absent. */
+    detailWidth?: number;
     headerRefs: MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnsSearch: Record<string, string>;
     setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;
 };
+/** Pairs a column header with its current sort state, e.g. for a sort-icon renderer. */
 export type SortingProps = {
     isSorting: ColumnSortingProps | undefined;
     header: TableHeaderProps;

package/dist/Components/Table/columnLabel.d.ts

@@ -0,0 +1,6 @@
+import type { TableHeaderProps } from "./TableProps";
+export declare const isPrimitiveLabel: (label: unknown) => label is string | number;
+/** Plain-text name of a column, for every place a node cannot go: aria-labels, settings, chips, saved preferences. */
+export declare const columnLabelText: (column: Pick<TableHeaderProps, "id" | "label" | "labelText">) => string;
+/** Columns as they may be POSTed: a node label is swapped for its text, since elements are not JSON. */
+export declare const toSavedColumns: (columns: TableHeaderProps[]) => TableHeaderProps[];

package/dist/Components/Table/columnLabel.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toSavedColumns = exports.columnLabelText = exports.isPrimitiveLabel = void 0;
+const react_1 = require("react");
+const isPrimitiveLabel = (label) => typeof label === "string" || typeof label === "number";
+exports.isPrimitiveLabel = isPrimitiveLabel;
+const textOf = (node) => {
+    if ((0, exports.isPrimitiveLabel)(node))
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(textOf).join("");
+    if ((0, react_1.isValidElement)(node))
+        return textOf(node.props.children);
+    return "";
+};
+/** Plain-text name of a column, for every place a node cannot go: aria-labels, settings, chips, saved preferences. */
+const columnLabelText = (column) => {
+    if ((0, exports.isPrimitiveLabel)(column.label))
+        return String(column.label);
+    if (column.labelText)
+        return column.labelText;
+    return textOf(column.label).replace(/\s+/g, " ").trim() || String(column.id);
+};
+exports.columnLabelText = columnLabelText;
+/** Columns as they may be POSTed: a node label is swapped for its text, since elements are not JSON. */
+const toSavedColumns = (columns) => columns.map((column) => (0, exports.isPrimitiveLabel)(column.label) ? column : { ...column, label: (0, exports.columnLabelText)(column) });
+exports.toSavedColumns = toSavedColumns;

package/dist/Components/Table/components/HeaderActions.d.ts

@@ -0,0 +1,6 @@
+import { HeaderActionsProps } from "../TableProps";
+declare const HeaderActions: ({ actions, selections, }: {
+    actions?: HeaderActionsProps;
+    selections: (string | number)[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default HeaderActions;

package/dist/Components/Table/components/HeaderActions.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = __importDefault(require("react"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const Divider_1 = __importDefault(require("../../Divider/Divider"));
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const hoverFill = (colors) => (0, planeStep_1.bandOn)(colors.background[100], colors.background[50]);
+const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const styledIcon = icon ? react_2.default.cloneElement(icon, {
+        color: "currentColor",
+        size: "1.25rem",
+    }) : null;
+    // A `customComponent` may itself be focusable, and a button must never wrap one.
+    const isButton = !!onClick && !customComponent;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: colors.text[500], px: 2, py: 1, borderRadius: "lg", _hover: isHoverEnabled
+            ? {
+                color: hoverColor ? hoverColor : (0, accentText_1.accentTextOnCanvas)(colors.primary, hoverFill(colors)),
+                bg: hoverFill(colors),
+            }
+            : {}, transition: (0, motion_1.transitionFor)(["color", "background-color"], "base"), children: [customComponent, styledIcon, " ", name] }));
+};
+const HeaderActions = ({ actions, selections, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hasSelections = selections.length > 0;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 2, fontSize: "0.875rem", fontWeight: 400, color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.main), alignItems: "center", children: [(_a = actions === null || actions === void 0 ? void 0 : actions.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+                if ("type" in item)
+                    return null;
+                const actionItem = item;
+                if (actionItem.isStatic) {
+                    return ((0, jsx_runtime_1.jsx)(ListItem, { ...actionItem, selections: selections }, `static-${index}`));
+                }
+                return null;
+            }), hasSelections && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: (0, accentText_1.accentTextOnCanvas)(colors.primary, hoverFill(colors)) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
+                        if ("type" in item && item.type === "divider") {
+                            return (0, jsx_runtime_1.jsx)(Divider_1.default, {}, index);
+                        }
+                        const actionItem = item;
+                        if (!actionItem.isStatic) {
+                            return ((0, jsx_runtime_1.jsx)(ListItem, { ...actionItem, selections: selections }, `dynamic-${index}`));
+                        }
+                        return null;
+                    })] }))] }));
+};
+exports.default = HeaderActions;

package/dist/Components/Table/components/Pagination.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { TableProps } from "../TableProps";
+type PaginationProps = Pick<TableProps, "paginationSelectOptions"> & {
+    paginationText: string;
+    handlePageSizeChange: (size: number) => void;
+    rowsPerPage: number;
+    currentPage: number;
+    pages: number;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+    dataLength: number;
+    isServerPagination: boolean;
+};
+declare const Pagination: React.MemoExoticComponent<({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export default Pagination;

package/dist/Components/Table/components/Pagination.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const table_1 = require("../../../Utils/table");
+const Select_1 = __importDefault(require("../../Select/Select"));
+const useTable_1 = require("../hooks/useTable");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const lucide_react_1 = require("lucide-react");
+const STEP_SIZE = "1.5rem";
+const STEP_ICON = 16;
+const Pagination = react_1.default.memo(({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }) => {
+    const computedOptions = (0, react_1.useMemo)(() => {
+        if (paginationSelectOptions && paginationSelectOptions.length) {
+            return paginationSelectOptions;
+        }
+        const sizes = new Set((0, table_1.pageSizeCalculation)(dataLength));
+        sizes.add(useTable_1.DEFAULT_PAGE_SIZE);
+        sizes.add(rowsPerPage);
+        return [...sizes].sort((a, b) => a - b);
+    }, [paginationSelectOptions, dataLength, rowsPerPage]);
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const lastPage = Math.max(0, pages - 1);
+    // Stepping back is how a user escapes an empty page, so it survives an empty result.
+    const isLeftDisabled = currentPage === 0;
+    const isRightDisabled = dataLength === 0 || currentPage >= lastPage;
+    const step = (label, ariaLabel, icon, isDisabled, onClick) => ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": ariaLabel, icon: icon, variant: "ghost", size: "xs", minW: STEP_SIZE, h: STEP_SIZE, rounded: "full", color: isDisabled ? theme.colors.textMuted : theme.colors.text[500], isDisabled: isDisabled, onClick: onClick, _hover: isDisabled ? {} : { color: theme.colors.accentText } }) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", gap: "0.75rem", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": "Rows per page", onChange: (option) => option && handlePageSizeChange(Number(option.id)), value: rowsPerPage, size: "xs", width: "3.75rem", isDisabled: dataLength === 0, options: computedOptions.map((size) => ({ id: size, label: String(size) })) })), (dataLength > 0 || currentPage > 0) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.125rem", children: [step("First", "first-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage(0)), step("Previous", "previous-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage((page) => Math.max(0, page - 1))), (0, jsx_runtime_1.jsx)(react_2.Text, { px: "0.375rem", fontSize: "0.75rem", lineHeight: STEP_SIZE, whiteSpace: "nowrap", color: theme.colors.text[500], sx: { fontVariantNumeric: "tabular-nums" }, children: paginationText }), step("Next", "next-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage((page) => Math.min(lastPage, page + 1))), step("Last", "last-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage(lastPage))] }))] }));
+});
+exports.default = Pagination;

package/dist/Components/Table/components/TableActions.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import type { DataObject } from "../TableProps";
+type TableRowActions = DataObject & {
+    onLink?: (row: DataObject) => void;
+    onEdit?: (row: DataObject) => void;
+    onDelete?: (row: DataObject) => void;
+    actions?: () => ReactNode;
+};
+declare const TableActions: React.MemoExoticComponent<({ row }: {
+    row?: TableRowActions;
+}) => import("react/jsx-runtime").JSX.Element | null>;
+export default TableActions;