@epilot/volt-ui 1.1.18 → 1.1.20

package/dist/components/data-table/data-table-body.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+export type DataTableBodyProps = {
+    /** Additional class name */
+    className?: string;
+    /** Custom empty state content */
+    emptyState?: ReactNode;
+    /** Loading state content (shown when isLoading is true) */
+    loadingState?: ReactNode;
+    /** Whether the table is in loading state */
+    isLoading?: boolean;
+    /** Error state content (shown when isError is true) */
+    errorState?: ReactNode;
+    /** Whether the table is in error state */
+    isError?: boolean;
+};
+/**
+ * Renders the table body with rows.
+ * Automatically handles virtualization when used within a DataTableContent with virtualization enabled.
+ * Must be used within a DataTable component.
+ */
+declare function DataTableBody({ className, emptyState, loadingState, isLoading, errorState, isError, }: DataTableBodyProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableBody {
+    var displayName: string;
+}
+export { DataTableBody };

package/dist/components/data-table/data-table-column-header.d.ts

@@ -0,0 +1,18 @@
+import type { Column } from "@tanstack/react-table";
+export type DataTableColumnHeaderProps<TData, TValue> = {
+    /** The column instance from Tanstack Table */
+    column: Column<TData, TValue>;
+    /** The header title to display */
+    title: string;
+    /** Additional class name */
+    className?: string;
+};
+/**
+ * A sortable column header component for DataTable.
+ * Shows sort indicators and handles sort toggle on click.
+ */
+declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableColumnHeader {
+    var displayName: string;
+}
+export { DataTableColumnHeader };

package/dist/components/data-table/data-table-column-visibility.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps, ReactNode } from "react";
+import { DropdownMenu } from "../../components/dropdown-menu/dropdown-menu";
+export type DataTableColumnVisibilityProps = {
+    /** Custom trigger element. Defaults to a sliders icon button. */
+    trigger?: ReactNode;
+    /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */
+    label: string;
+    /** Additional class name for the dropdown content */
+    contentClassName?: string;
+    /** Alignment of dropdown relative to trigger. Default: "end" */
+    align?: "start" | "center" | "end";
+} & Omit<ComponentProps<typeof DropdownMenu>, "children">;
+/**
+ * A dropdown menu for toggling column visibility in DataTable.
+ * Shows checkboxes for each column that can be hidden.
+ * Place in DataTableToolbar for consistent layout.
+ */
+declare function DataTableColumnVisibility({ trigger, label, contentClassName, align, ...props }: DataTableColumnVisibilityProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DataTableColumnVisibility {
+    var displayName: string;
+}
+export { DataTableColumnVisibility };

package/dist/components/data-table/data-table-content.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export type DataTableContentProps = {
+    /** Children to render inside the table (DataTableHeader, DataTableBody) */
+    children?: ReactNode;
+    /** Additional class name */
+    className?: string;
+};
+/**
+ * Container component for DataTable that handles the table structure and virtualization.
+ * When virtualization is enabled, this component manages the scroll container.
+ *
+ * If no children are provided, renders DataTableHeader and DataTableBody by default.
+ */
+declare function DataTableContent({ children, className }: DataTableContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableContent {
+    var displayName: string;
+}
+export { DataTableContent };

package/dist/components/data-table/data-table-context.d.ts

@@ -0,0 +1,64 @@
+import type { RefObject, MouseEvent } from "react";
+import type { Table as TanstackTable, PaginationState, Row } from "@tanstack/react-table";
+import type { Virtualizer } from "@tanstack/react-virtual";
+export declare const DEFAULT_ROW_HEIGHT = 48;
+export declare const DEFAULT_OVERSCAN = 10;
+export declare const DEFAULT_CONTAINER_HEIGHT = 600;
+/** Controls how cell content handles overflow */
+export type DataTableCellOverflow = "grow" | "wrap" | "truncate";
+export type DataTablePaginationConfig = {
+    /** Controlled page index (0-indexed) */
+    pageIndex?: number;
+    /** Page size (items per page). Default: 10 */
+    pageSize?: number;
+    /** Available page size options. Default: [10, 25, 50, 100] */
+    pageSizeOptions?: number[];
+    /** Total items count for server-side pagination */
+    totalItems?: number;
+    /** Total page count for server-side pagination (optional if totalItems provided) */
+    pageCount?: number;
+    /** Callback for pagination state changes */
+    onPaginationChange?: (state: PaginationState) => void;
+};
+export type DataTableVirtualizationConfig = {
+    /** Enable virtualization */
+    enabled: boolean;
+    /** Estimated row height in pixels. Default: 48 */
+    estimateRowHeight?: number;
+    /** Number of items to render outside visible area. Default: 10 */
+    overscan?: number;
+    /** Scroll container height. Default: 600 */
+    containerHeight?: number | string;
+};
+export type DataTableContextValue<TData> = {
+    table: TanstackTable<TData>;
+    pagination?: DataTablePaginationConfig;
+    config: {
+        enableVirtualization: boolean;
+        estimateRowHeight: number;
+        overscan: number;
+        containerHeight: number | string;
+    };
+    /** Handler called when a row is clicked. Enables clickable row mode. */
+    onRowClick?: (row: Row<TData>, event: MouseEvent<HTMLTableRowElement>) => void;
+    /** Custom hover class for clickable rows. Default: 'hover:bg-accent-a3' */
+    clickableRowClassName?: string;
+    /** Custom class for selected rows. Default: 'data-[state=selected]:bg-accent-a3' */
+    selectedRowClassName?: string;
+    /** Column sizing mode. 'fixed' maintains column widths with scroll, 'fluid' squeezes to fit. Default: 'fixed' */
+    sizing?: "fixed" | "fluid";
+    /** Controls how cell content handles overflow. 'grow' expands cells (default), 'wrap' wraps text, 'truncate' shows ellipsis. */
+    cellOverflow?: DataTableCellOverflow;
+    /** Whether column resizing is disabled (enabled by default) */
+    disableColumnResizing?: boolean;
+    /** Show bottom border on header row. Default: true */
+    showHeaderBorder?: boolean;
+    /** Show bottom borders on data rows. Default: true */
+    showRowBorders?: boolean;
+};
+export type DataTableVirtualizerContextValue = {
+    virtualizer: Virtualizer<HTMLDivElement, Element>;
+    scrollContainerRef: RefObject<HTMLDivElement>;
+} | null;
+export declare const DataTableContext: import("react").Context<DataTableContextValue<any> | null>;
+export declare const DataTableVirtualizerContext: import("react").Context<DataTableVirtualizerContextValue>;

package/dist/components/data-table/data-table-error.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export type DataTableErrorProps = {
+    /** Error title text */
+    title?: string;
+    /** Error description/message */
+    description?: ReactNode;
+    /** Retry button text */
+    retryLabel?: string;
+    /** Callback when retry is clicked */
+    onRetry?: () => void;
+    /** Additional class name */
+    className?: string;
+    /** Custom error content (overrides default error display) */
+    children?: ReactNode;
+};
+/**
+ * Error state display for DataTable.
+ * Shows an error icon, message, and optional retry button.
+ */
+declare function DataTableError({ title, description, retryLabel, onRetry, className, children, }: DataTableErrorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableError {
+    var displayName: string;
+}
+export { DataTableError };

package/dist/components/data-table/data-table-footer.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+export type DataTableFooterProps = ComponentProps<"div">;
+/**
+ * A footer wrapper for DataTable that sits between the table content and pagination.
+ * Use for custom actions like "Show more" links or summary information.
+ */
+declare function DataTableFooter({ className, children, ...props }: DataTableFooterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableFooter {
+    var displayName: string;
+}
+export { DataTableFooter };

package/dist/components/data-table/data-table-header.d.ts

@@ -0,0 +1,19 @@
+export type DataTableHeaderProps = {
+    /** Additional class name */
+    className?: string;
+    /** Whether to make header sticky (useful with virtualization) */
+    sticky?: boolean;
+    /** Background color for sticky header. Default: "var(--volt-gray-2)" */
+    stickyBackground?: string;
+    /** Accessible label for resize handles. Required for i18n when column resizing is enabled. */
+    resizeHandleAriaLabel?: string | ((columnId: string) => string);
+};
+/**
+ * Renders the table header with column headers.
+ * Must be used within a DataTable component.
+ */
+declare function DataTableHeader({ className, sticky, stickyBackground, resizeHandleAriaLabel, }: DataTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableHeader {
+    var displayName: string;
+}
+export { DataTableHeader };

package/dist/components/data-table/data-table-loading.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export type DataTableLoadingProps = {
+    /** Additional class name */
+    className?: string;
+    /** Custom loading content (overrides default spinner) */
+    children?: ReactNode;
+};
+/**
+ * Loading state display for DataTable.
+ * Renders a centered spinner by default, or custom content when children are provided.
+ */
+declare function DataTableLoading({ className, children }: DataTableLoadingProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableLoading {
+    var displayName: string;
+}
+export { DataTableLoading };

package/dist/components/data-table/data-table-pagination.d.ts

@@ -0,0 +1,20 @@
+import { type TablePaginationLabels } from "../../components/table/table-pagination";
+export type DataTablePaginationProps = {
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Number of sibling pages to show on each side of current page */
+    siblingCount?: number;
+    /** Labels for i18n. See TablePaginationLabels for available options. */
+    labels?: TablePaginationLabels;
+    /** Additional class name */
+    className?: string;
+};
+/**
+ * Pagination component that integrates with DataTable's Tanstack Table instance.
+ * Must be used within a DataTable component.
+ */
+declare function DataTablePagination({ pageSizeOptions, siblingCount, labels, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTablePagination {
+    var displayName: string;
+}
+export { DataTablePagination };

package/dist/components/data-table/data-table-pinning-utils.d.ts

@@ -0,0 +1,17 @@
+import type { Column, Table } from "@tanstack/react-table";
+export type PinningPosition = "left" | "right" | false;
+/**
+ * Calculate the sticky offset for a pinned column based on the widths
+ * of columns pinned before it.
+ */
+export declare function getPinnedColumnOffset<TData>(column: Column<TData, unknown>, table: Table<TData>): number;
+/**
+ * Check if this column is the last pinned column on the left side.
+ * Used for applying shadow separator on the right edge.
+ */
+export declare function isLastLeftPinnedColumn<TData>(column: Column<TData, unknown>, table: Table<TData>): boolean;
+/**
+ * Check if this column is the first pinned column on the right side.
+ * Used for applying shadow separator on the left edge.
+ */
+export declare function isFirstRightPinnedColumn<TData>(column: Column<TData, unknown>, table: Table<TData>): boolean;

package/dist/components/data-table/data-table-resize-handle.d.ts

@@ -0,0 +1,16 @@
+import type { Header } from "@tanstack/react-table";
+export type DataTableResizeHandleProps<TData, TValue> = {
+    header: Header<TData, TValue>;
+    /** Accessible label for the resize handle. Recommended for i18n and accessibility. Receives column.id as parameter. */
+    ariaLabel?: string | ((columnId: string) => string);
+    className?: string;
+};
+/**
+ * Resize handle for column headers.
+ * Invisible by default, shows a vertical line on hover and during drag.
+ */
+declare function DataTableResizeHandle<TData, TValue>({ header, ariaLabel, className, }: DataTableResizeHandleProps<TData, TValue>): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DataTableResizeHandle {
+    var displayName: string;
+}
+export { DataTableResizeHandle };

package/dist/components/data-table/data-table-row.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+import type { Row } from "@tanstack/react-table";
+export type DataTableRowProps<TData> = {
+    /** The row instance from TanStack Table */
+    row: Row<TData>;
+    /** Optional style (used for virtualized row heights) */
+    style?: CSSProperties;
+    /** Additional class name */
+    className?: string;
+};
+/**
+ * Renders a single table row with its cells.
+ * Supports clickable rows when onRowClick is provided via DataTable context.
+ */
+declare function DataTableRow<TData>({ row, style, className, }: DataTableRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableRow {
+    var displayName: string;
+}
+export { DataTableRow };

package/dist/components/data-table/data-table-toolbar.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+export type DataTableToolbarProps = ComponentProps<"div">;
+/**
+ * A toolbar wrapper for DataTable that contains filters, search, and actions.
+ * Place above the table for consistent layout.
+ */
+declare function DataTableToolbar({ className, children, ...props }: DataTableToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableToolbar {
+    var displayName: string;
+}
+export { DataTableToolbar };

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

@@ -0,0 +1,93 @@
+import type { ReactNode } from "react";
+import type { MouseEvent } from "react";
+import { type SortingState, type RowSelectionState, type ColumnFiltersState, type VisibilityState, type ColumnDef, type Row, type ColumnSizingState, type ColumnPinningState } from "@tanstack/react-table";
+import { type DataTablePaginationConfig, type DataTableVirtualizationConfig, type DataTableCellOverflow } from "./data-table-context";
+export type DataTableProps<TData> = {
+    /** Column definitions */
+    columns: ColumnDef<TData, unknown>[];
+    /** Data array */
+    data: TData[];
+    /** Children rendered inside the context (DataTableContent, DataTablePagination, etc.) */
+    children?: ReactNode;
+    /** Unique key accessor for each row */
+    getRowId?: (row: TData) => string;
+    /** Enable row selection with checkboxes */
+    enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+    /** Enable column sorting */
+    enableSorting?: boolean;
+    /** Skip client-side sorting (for server-side sorting). When true, sorting state is tracked but rows are not sorted client-side. */
+    manualSorting?: boolean;
+    /** Enable column filtering */
+    enableFiltering?: boolean;
+    /** Skip client-side filtering (for server-side filtering). When true, filter state is tracked but rows are not filtered client-side. */
+    manualFiltering?: boolean;
+    /** Enable global search/filter */
+    enableGlobalFilter?: boolean;
+    /** Pagination configuration */
+    pagination?: DataTablePaginationConfig;
+    /** Virtualization configuration (mutually exclusive with pagination) */
+    virtualization?: DataTableVirtualizationConfig;
+    /** Controlled sorting state */
+    sorting?: SortingState;
+    /** Callback when sorting changes */
+    onSortingChange?: (sorting: SortingState) => void;
+    /** Default sorting state */
+    defaultSorting?: SortingState;
+    /** Controlled row selection state */
+    rowSelection?: RowSelectionState;
+    /** Callback when row selection changes */
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    /** Default row selection state */
+    defaultRowSelection?: RowSelectionState;
+    /** Controlled column filters state */
+    columnFilters?: ColumnFiltersState;
+    /** Callback when column filters change */
+    onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
+    /** Controlled column visibility state */
+    columnVisibility?: VisibilityState;
+    /** Callback when column visibility changes */
+    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+    /** Controlled global filter value */
+    globalFilter?: string;
+    /** Callback when global filter changes */
+    onGlobalFilterChange?: (value: string) => void;
+    /** Handler called when a row is clicked. Enables clickable row mode. */
+    onRowClick?: (row: Row<TData>, event: MouseEvent<HTMLTableRowElement>) => void;
+    /** Custom hover class for clickable rows. Default: 'hover:bg-accent-a3' */
+    clickableRowClassName?: string;
+    /** Custom class for selected rows. Default: 'data-[state=selected]:bg-accent-a3' */
+    selectedRowClassName?: string;
+    /** Column sizing mode. 'fixed' maintains column widths with scroll, 'fluid' squeezes to fit. Default: 'fixed' */
+    sizing?: "fixed" | "fluid";
+    /** Controls how cell content handles overflow. 'grow' expands cells (default), 'wrap' wraps text, 'truncate' shows ellipsis. Can be overridden per-column via column meta. */
+    cellOverflow?: DataTableCellOverflow;
+    /** Disable column width resizing (enabled by default) */
+    disableColumnResizing?: boolean;
+    /** Resize mode: 'onChange' updates during drag, 'onEnd' updates when drag finishes. Default: 'onEnd' */
+    columnResizeMode?: "onChange" | "onEnd";
+    /** Controlled column sizing state */
+    columnSizing?: ColumnSizingState;
+    /** Callback when column sizing changes */
+    onColumnSizingChange?: (sizing: ColumnSizingState) => void;
+    /** Default column sizing for uncontrolled mode */
+    defaultColumnSizing?: ColumnSizingState;
+    /** Controlled column pinning state */
+    columnPinning?: ColumnPinningState;
+    /** Callback when column pinning changes */
+    onColumnPinningChange?: (pinning: ColumnPinningState) => void;
+    /** Default column pinning for uncontrolled mode */
+    defaultColumnPinning?: ColumnPinningState;
+    /** Auto-pin selection column to left when rows are selected. Default: false */
+    autoPinSelection?: boolean;
+    /** Show bottom border on header row. Default: true */
+    showHeaderBorder?: boolean;
+    /** Show bottom borders on data rows. Default: true */
+    showRowBorders?: boolean;
+    /** Additional class name */
+    className?: string;
+};
+declare function DataTable<TData>({ columns, data, children, getRowId, enableRowSelection, enableSorting, manualSorting, enableFiltering, manualFiltering, enableGlobalFilter, pagination, virtualization, sorting: controlledSorting, onSortingChange, defaultSorting, rowSelection: controlledRowSelection, onRowSelectionChange, defaultRowSelection, columnFilters: controlledColumnFilters, onColumnFiltersChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, onRowClick, clickableRowClassName, selectedRowClassName, sizing, cellOverflow, disableColumnResizing, columnResizeMode, columnSizing: controlledColumnSizing, onColumnSizingChange, defaultColumnSizing, columnPinning: controlledColumnPinning, onColumnPinningChange, defaultColumnPinning, autoPinSelection, showHeaderBorder, showRowBorders, className, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+export { DataTable };

package/dist/components/data-table/get-selected-row-data.d.ts

@@ -0,0 +1,18 @@
+import type { RowSelectionState } from "@tanstack/react-table";
+/**
+ * Extracts selected row data from a row selection state.
+ *
+ * @param rowSelection - The selection state from DataTable (controlled via rowSelection prop)
+ * @param data - Your data array
+ * @param getRowId - Optional ID accessor function (defaults to `row.id`)
+ * @returns Array of selected data items
+ *
+ * @example
+ * ```tsx
+ * const selectedData = useMemo(
+ *   () => getSelectedRowData(rowSelection, data),
+ *   [rowSelection, data]
+ * )
+ * ```
+ */
+export declare function getSelectedRowData<TData>(rowSelection: RowSelectionState, data: TData[], getRowId?: (row: TData) => string): TData[];

package/dist/components/data-table/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useDataTable } from "./use-data-table";
+export { useDataTableVirtualizer } from "./use-data-table-virtualizer";

package/dist/components/data-table/hooks/use-data-table-virtualizer.d.ts

@@ -0,0 +1 @@
+export declare function useDataTableVirtualizer(): import("../data-table-context").DataTableVirtualizerContextValue;

package/dist/components/data-table/hooks/use-data-table.d.ts

@@ -0,0 +1,2 @@
+import { type DataTableContextValue } from "../data-table-context";
+export declare function useDataTable<TData>(): DataTableContextValue<TData>;

package/dist/components/table/table-pagination.d.ts

@@ -0,0 +1,48 @@
+import type { ComponentProps } from "react";
+export type TablePaginationLabels = {
+    /** Label for the pagination navigation region. */
+    navigation?: string;
+    /** Label for first page button. */
+    firstPage?: string;
+    /** Label for previous page button. */
+    previousPage?: string;
+    /** Label for next page button. */
+    nextPage?: string;
+    /** Label for last page button. */
+    lastPage?: string;
+    /** Label generator for page number buttons. Receives 1-indexed page number. */
+    goToPage?: (page: number) => string;
+    /** Label generator for ellipsis jump buttons. Receives target page number. */
+    jumpToPage?: (page: number) => string;
+    /** Label generator for page size selector. Receives current page size. */
+    pageSizeSelector?: (pageSize: number) => string;
+    /** Label for page size dropdown header. */
+    resultsPerPage?: string;
+    /** Label generator for the range display. Receives start, end, and total. */
+    rangeDisplay?: (start: number, end: number, total: number) => string;
+};
+export type TablePaginationProps = Omit<ComponentProps<"div">, "onChange"> & {
+    /** Current page number (1-indexed) */
+    page: number;
+    /** Total number of items across all pages */
+    totalItems: number;
+    /** Current page size (items per page) */
+    pageSize: number;
+    /** Callback fired when the page changes */
+    onPageChange: (page: number) => void;
+    /** Callback fired when the page size changes */
+    onPageSizeChange: (pageSize: number) => void;
+    /** Available page size options for the dropdown */
+    pageSizeOptions?: number[];
+    /** Number of sibling pages to show on each side of current page */
+    siblingCount?: number;
+    /** Whether the pagination controls are disabled */
+    disabled?: boolean;
+    /** Labels for i18n. All labels are optional for backwards compatibility but recommended. */
+    labels?: TablePaginationLabels;
+};
+declare const TablePagination: {
+    ({ page, totalItems, pageSize, onPageChange, onPageSizeChange, pageSizeOptions, siblingCount, disabled, labels, className, ...props }: TablePaginationProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { TablePagination };

package/dist/components/table/table.d.ts

@@ -3,7 +3,11 @@ declare const Table: ({ className, ...props }: React.ComponentProps<"table">) =>
 declare const TableHeader: ({ className, ...props }: React.ComponentProps<"thead">) => import("react/jsx-runtime").JSX.Element;
 declare const TableBody: ({ className, ...props }: React.ComponentProps<"tbody">) => import("react/jsx-runtime").JSX.Element;
 declare const TableFooter: ({ className, ...props }: React.ComponentProps<"tfoot">) => import("react/jsx-runtime").JSX.Element;
-declare const TableRow: ({ className, ...props }: React.ComponentProps<"tr">) => import("react/jsx-runtime").JSX.Element;
+type TableRowProps = React.ComponentProps<"tr"> & {
+    /** Disable hover background effect */
+    noHover?: boolean;
+};
+declare const TableRow: ({ className, noHover, ...props }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
 type TableHeadProps = React.ComponentProps<"th"> & {
     align?: "left" | "center" | "right";
 };

package/dist/hooks/use-client-pagination.d.ts

@@ -0,0 +1,55 @@
+import { type PaginationMeta } from "../lib/pagination";
+export type UseClientPaginationOptions<T> = {
+    /** The full data array to paginate */
+    data: T[];
+    /** Initial page number (1-indexed). Default: 1 */
+    initialPage?: number;
+    /** Initial page size. Default: 10 */
+    initialPageSize?: number;
+    /** Available page size options. Default: [10, 20, 50] */
+    pageSizeOptions?: number[];
+};
+export type UseClientPaginationReturn<T> = {
+    /** Sliced data for the current page */
+    pageData: T[];
+    /** Current page number (1-indexed) */
+    page: number;
+    /** Current page size */
+    pageSize: number;
+    /** Set the current page */
+    setPage: (page: number) => void;
+    /** Set the page size (resets to page 1) */
+    setPageSize: (size: number) => void;
+    /** Pagination metadata */
+    meta: PaginationMeta;
+    /** Props to spread directly onto TablePagination */
+    paginationProps: {
+        page: number;
+        totalItems: number;
+        pageSize: number;
+        onPageChange: (page: number) => void;
+        onPageSizeChange: (pageSize: number) => void;
+        pageSizeOptions: number[];
+    };
+};
+/**
+ * Hook for client-side pagination of local data arrays.
+ *
+ * @example
+ * ```tsx
+ * const { pageData, paginationProps } = useClientPagination({
+ *   data: allItems,
+ *   initialPageSize: 10,
+ * })
+ *
+ * return (
+ *   <div>
+ *     <Table>
+ *       {pageData.map(item => <TableRow key={item.id}>...</TableRow>)}
+ *     </Table>
+ *     <TablePagination {...paginationProps} />
+ *   </div>
+ * )
+ * ```
+ */
+export declare function useClientPagination<T>({ data, initialPage, initialPageSize, pageSizeOptions, }: UseClientPaginationOptions<T>): UseClientPaginationReturn<T>;