@shipfox/react-ui 0.14.0 → 0.15.0

package/dist/components/table/index.js

@@ -0,0 +1,6 @@
+export * from './data-table.js';
+export * from './table.js';
+export * from './table-column-header.js';
+export * from './table-pagination.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/index.ts"],"sourcesContent":["export type {ColumnDef} from '@tanstack/react-table';\nexport * from './data-table';\nexport * from './table';\nexport * from './table-column-header';\nexport * from './table-pagination';\n"],"names":[],"mappings":"AACA,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,wBAAwB;AACtC,cAAc,qBAAqB"}

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

@@ -0,0 +1,79 @@
+import type { Column } from '@tanstack/react-table';
+import type { HTMLAttributes } from 'react';
+/**
+ * Props for the {@link TableColumnHeader} component.
+ *
+ * Defines the properties needed to render a sortable table column header
+ * with interactive sorting controls.
+ *
+ * @typeParam TData - The shape of the row data in the table.
+ * @typeParam TValue - The type of the value in this specific column.
+ */
+export interface TableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The TanStack Table column instance for this header.
+     *
+     * This instance provides access to column state and sorting methods.
+     * It's typically obtained from the `header.column` property when mapping
+     * over header groups in TanStack Table.
+     *
+     * The column determines:
+     * - Whether sorting is enabled (`getCanSort()`)
+     * - Current sort direction (`getIsSorted()`)
+     * - Methods to toggle sorting (`toggleSorting()`)
+     *
+     * @see {@link https://tanstack.com/table/latest/docs/api/core/column TanStack Column API}
+     */
+    column: Column<TData, TValue>;
+    /**
+     * The display text for the column header.
+     *
+     * This is the human-readable label that appears in the table header.
+     * For sortable columns, this text appears in a button with sort indicators.
+     * For non-sortable columns, it renders as plain text.
+     *
+     * @example
+     * ```tsx
+     * <TableColumnHeader column={column} title="Customer Name" />
+     * <TableColumnHeader column={column} title="Order Date" />
+     * ```
+     */
+    title: string;
+}
+/**
+ * Renders a table column header with optional sorting functionality.
+ *
+ * This component automatically adapts based on whether the column supports sorting:
+ * - **Sortable columns**: Renders an interactive button with a dropdown menu for
+ *   ascending/descending sort options and visual indicators for the current sort state
+ * - **Non-sortable columns**: Renders plain text without interactive controls
+ *
+ * The component integrates seamlessly with TanStack Table's sorting system and
+ * manages sort state through the provided column instance.
+ *
+ * @typeParam TData - The shape of the row data in the table.
+ * @typeParam TValue - The type of the value in this specific column.
+ *
+ * @example
+ * ```tsx
+ * // In your column definitions:
+ * const columns: ColumnDef<User>[] = [
+ *   {
+ *     accessorKey: 'name',
+ *     header: ({ column }) => (
+ *       <TableColumnHeader column={column} title="Name" />
+ *     ),
+ *     enableSorting: true,
+ *   },
+ *   {
+ *     accessorKey: 'email',
+ *     header: ({ column }) => (
+ *       <TableColumnHeader column={column} title="Email" />
+ *     ),
+ *     enableSorting: false,
+ *   },
+ * ];
+ * ```
+ */
+export declare function TableColumnHeader<TData, TValue>({ column, title, className, }: TableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table-column-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-column-header.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-column-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAU1C;;;;;;;;GAQG;AACH,MAAM,WAAW,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3F;;;;;;;;;;;;;OAaG;IACH,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9B;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,EAC/C,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAC,2CAgDvC"}

package/dist/components/table/table-column-header.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
+import { Button } from '../button/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../dropdown-menu/index.js';
+/**
+ * Renders a table column header with optional sorting functionality.
+ *
+ * This component automatically adapts based on whether the column supports sorting:
+ * - **Sortable columns**: Renders an interactive button with a dropdown menu for
+ *   ascending/descending sort options and visual indicators for the current sort state
+ * - **Non-sortable columns**: Renders plain text without interactive controls
+ *
+ * The component integrates seamlessly with TanStack Table's sorting system and
+ * manages sort state through the provided column instance.
+ *
+ * @typeParam TData - The shape of the row data in the table.
+ * @typeParam TValue - The type of the value in this specific column.
+ *
+ * @example
+ * ```tsx
+ * // In your column definitions:
+ * const columns: ColumnDef<User>[] = [
+ *   {
+ *     accessorKey: 'name',
+ *     header: ({ column }) => (
+ *       <TableColumnHeader column={column} title="Name" />
+ *     ),
+ *     enableSorting: true,
+ *   },
+ *   {
+ *     accessorKey: 'email',
+ *     header: ({ column }) => (
+ *       <TableColumnHeader column={column} title="Email" />
+ *     ),
+ *     enableSorting: false,
+ *   },
+ * ];
+ * ```
+ */ export function TableColumnHeader({ column, title, className }) {
+    if (!column.getCanSort()) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: cn('text-xs font-medium', className),
+            children: title
+        });
+    }
+    const isSorted = column.getIsSorted();
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('flex items-center space-x-2', className),
+        children: /*#__PURE__*/ _jsxs(DropdownMenu, {
+            children: [
+                /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ _jsxs(Button, {
+                        variant: "transparent",
+                        size: "xs",
+                        className: "-ml-12 h-32 px-8 data-[state=open]:bg-background-components-hover gap-0",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-xs font-medium text-foreground-neutral-subtle",
+                                children: title
+                            }),
+                            isSorted === 'desc' ? /*#__PURE__*/ _jsx(Icon, {
+                                name: "arrowDownLongLine",
+                                className: "ml-2 size-14 text-foreground-neutral-muted"
+                            }) : isSorted === 'asc' ? /*#__PURE__*/ _jsx(Icon, {
+                                name: "arrowUpLongLine",
+                                className: "ml-2 size-14 text-foreground-neutral-muted"
+                            }) : /*#__PURE__*/ _jsx(Icon, {
+                                name: "arrowUpDownLine",
+                                className: "ml-4 size-16 text-foreground-neutral-muted"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                    align: "start",
+                    size: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                            icon: "arrowUpLongLine",
+                            onClick: ()=>column.toggleSorting(false),
+                            closeOnSelect: true,
+                            children: "Asc"
+                        }),
+                        /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                            icon: "arrowDownLongLine",
+                            onClick: ()=>column.toggleSorting(true),
+                            closeOnSelect: true,
+                            children: "Desc"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=table-column-header.js.map

package/dist/components/table/table-column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/table-column-header.tsx"],"sourcesContent":["import type {Column} from '@tanstack/react-table';\nimport {Icon} from 'components/icon';\nimport type {HTMLAttributes} from 'react';\nimport {cn} from 'utils/cn';\nimport {Button} from '../button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\n/**\n * Props for the {@link TableColumnHeader} component.\n *\n * Defines the properties needed to render a sortable table column header\n * with interactive sorting controls.\n *\n * @typeParam TData - The shape of the row data in the table.\n * @typeParam TValue - The type of the value in this specific column.\n */\nexport interface TableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The TanStack Table column instance for this header.\n   *\n   * This instance provides access to column state and sorting methods.\n   * It's typically obtained from the `header.column` property when mapping\n   * over header groups in TanStack Table.\n   *\n   * The column determines:\n   * - Whether sorting is enabled (`getCanSort()`)\n   * - Current sort direction (`getIsSorted()`)\n   * - Methods to toggle sorting (`toggleSorting()`)\n   *\n   * @see {@link https://tanstack.com/table/latest/docs/api/core/column TanStack Column API}\n   */\n  column: Column<TData, TValue>;\n  /**\n   * The display text for the column header.\n   *\n   * This is the human-readable label that appears in the table header.\n   * For sortable columns, this text appears in a button with sort indicators.\n   * For non-sortable columns, it renders as plain text.\n   *\n   * @example\n   * ```tsx\n   * <TableColumnHeader column={column} title=\"Customer Name\" />\n   * <TableColumnHeader column={column} title=\"Order Date\" />\n   * ```\n   */\n  title: string;\n}\n\n/**\n * Renders a table column header with optional sorting functionality.\n *\n * This component automatically adapts based on whether the column supports sorting:\n * - **Sortable columns**: Renders an interactive button with a dropdown menu for\n *   ascending/descending sort options and visual indicators for the current sort state\n * - **Non-sortable columns**: Renders plain text without interactive controls\n *\n * The component integrates seamlessly with TanStack Table's sorting system and\n * manages sort state through the provided column instance.\n *\n * @typeParam TData - The shape of the row data in the table.\n * @typeParam TValue - The type of the value in this specific column.\n *\n * @example\n * ```tsx\n * // In your column definitions:\n * const columns: ColumnDef<User>[] = [\n *   {\n *     accessorKey: 'name',\n *     header: ({ column }) => (\n *       <TableColumnHeader column={column} title=\"Name\" />\n *     ),\n *     enableSorting: true,\n *   },\n *   {\n *     accessorKey: 'email',\n *     header: ({ column }) => (\n *       <TableColumnHeader column={column} title=\"Email\" />\n *     ),\n *     enableSorting: false,\n *   },\n * ];\n * ```\n */\nexport function TableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: TableColumnHeaderProps<TData, TValue>) {\n  if (!column.getCanSort()) {\n    return <div className={cn('text-xs font-medium', className)}>{title}</div>;\n  }\n\n  const isSorted = column.getIsSorted();\n\n  return (\n    <div className={cn('flex items-center space-x-2', className)}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"transparent\"\n            size=\"xs\"\n            className=\"-ml-12 h-32 px-8 data-[state=open]:bg-background-components-hover gap-0\"\n          >\n            <span className=\"text-xs font-medium text-foreground-neutral-subtle\">{title}</span>\n            {isSorted === 'desc' ? (\n              <Icon\n                name=\"arrowDownLongLine\"\n                className=\"ml-2 size-14 text-foreground-neutral-muted\"\n              />\n            ) : isSorted === 'asc' ? (\n              <Icon name=\"arrowUpLongLine\" className=\"ml-2 size-14 text-foreground-neutral-muted\" />\n            ) : (\n              <Icon name=\"arrowUpDownLine\" className=\"ml-4 size-16 text-foreground-neutral-muted\" />\n            )}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" size=\"sm\">\n          <DropdownMenuItem\n            icon=\"arrowUpLongLine\"\n            onClick={() => column.toggleSorting(false)}\n            closeOnSelect\n          >\n            Asc\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            icon=\"arrowDownLongLine\"\n            onClick={() => column.toggleSorting(true)}\n            closeOnSelect\n          >\n            Desc\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n"],"names":["Icon","cn","Button","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuTrigger","TableColumnHeader","column","title","className","getCanSort","div","isSorted","getIsSorted","asChild","variant","size","span","name","align","icon","onClick","toggleSorting","closeOnSelect"],"mappings":";AACA,SAAQA,IAAI,QAAO,kBAAkB;AAErC,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,MAAM,QAAO,YAAY;AACjC,SACEC,YAAY,EACZC,mBAAmB,EACnBC,gBAAgB,EAChBC,mBAAmB,QACd,mBAAmB;AA2C1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,kBAAiC,EAC/CC,MAAM,EACNC,KAAK,EACLC,SAAS,EAC6B;IACtC,IAAI,CAACF,OAAOG,UAAU,IAAI;QACxB,qBAAO,KAACC;YAAIF,WAAWT,GAAG,uBAAuBS;sBAAaD;;IAChE;IAEA,MAAMI,WAAWL,OAAOM,WAAW;IAEnC,qBACE,KAACF;QAAIF,WAAWT,GAAG,+BAA+BS;kBAChD,cAAA,MAACP;;8BACC,KAACG;oBAAoBS,OAAO;8BAC1B,cAAA,MAACb;wBACCc,SAAQ;wBACRC,MAAK;wBACLP,WAAU;;0CAEV,KAACQ;gCAAKR,WAAU;0CAAsDD;;4BACrEI,aAAa,uBACZ,KAACb;gCACCmB,MAAK;gCACLT,WAAU;iCAEVG,aAAa,sBACf,KAACb;gCAAKmB,MAAK;gCAAkBT,WAAU;+CAEvC,KAACV;gCAAKmB,MAAK;gCAAkBT,WAAU;;;;;8BAI7C,MAACN;oBAAoBgB,OAAM;oBAAQH,MAAK;;sCACtC,KAACZ;4BACCgB,MAAK;4BACLC,SAAS,IAAMd,OAAOe,aAAa,CAAC;4BACpCC,aAAa;sCACd;;sCAGD,KAACnB;4BACCgB,MAAK;4BACLC,SAAS,IAAMd,OAAOe,aAAa,CAAC;4BACpCC,aAAa;sCACd;;;;;;;AAOX"}

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

@@ -0,0 +1,53 @@
+import type { Table } from '@tanstack/react-table';
+import type { ComponentProps } from 'react';
+/**
+ * Props for the {@link TablePagination} component.
+ *
+ * Provides pagination controls for data tables, including page navigation,
+ * page size selection, and row count displays.
+ *
+ * @typeParam TData - The shape of the row data in the table.
+ */
+interface TablePaginationProps<TData> extends ComponentProps<'tfoot'> {
+    /**
+     * The TanStack Table instance that manages the table state and behavior.
+     *
+     * This is typically created using `useReactTable` from `@tanstack/react-table`.
+     * The table instance provides access to pagination state, row data, and methods
+     * for controlling pagination (e.g., `setPageSize`, `nextPage`, `previousPage`).
+     *
+     * @see {@link https://tanstack.com/table/latest/docs/api/core/table TanStack Table API}
+     */
+    table: Table<TData>;
+    /**
+     * Array of page size options to display in the page size selector.
+     * When provided, a dropdown will be rendered allowing users to change the number of rows per page.
+     *
+     * @default [10, 20, 50, 100]
+     * @example
+     * ```tsx
+     * <TablePagination table={table} pageSizeOptions={[10, 25, 50]} />
+     * ```
+     */
+    pageSizeOptions?: number[];
+    /**
+     * When `true`, displays the count of selected rows instead of pagination range.
+     *
+     * - If `true`: Shows "X of Y row(s) selected" where X is the number of selected rows
+     * - If `false`: Shows "A — B of C results" where A-B is the current page range
+     *
+     * This is useful when row selection is enabled and you want to give users feedback
+     * on how many rows they have selected.
+     *
+     * @default false
+     * @example
+     * ```tsx
+     * <TablePagination table={table} showSelectedCount={true} />
+     * // Displays: "5 of 100 row(s) selected"
+     * ```
+     */
+    showSelectedCount?: boolean;
+}
+export declare function TablePagination<TData>({ table, className, pageSizeOptions, showSelectedCount, ...props }: TablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=table-pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-pagination.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAEjD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAM1C;;;;;;;GAOG;AACH,UAAU,oBAAoB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,OAAO,CAAC;IACnE;;;;;;;;OAQG;IACH,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;;;;;;;;;;;;;;OAeG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,EACrC,KAAK,EACL,SAAS,EACT,eAAmC,EACnC,iBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,2CAiG7B"}

package/dist/components/table/table-pagination.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../components/typography/index.js';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select/select.js';
+import { TableCell, TableFooter, TableRow } from './table.js';
+export function TablePagination({ table, className, pageSizeOptions = [
+    10,
+    20,
+    50,
+    100
+], showSelectedCount = false, ...props }) {
+    const currentPage = table.getState().pagination.pageIndex + 1;
+    const pageSize = table.getState().pagination.pageSize;
+    const totalRows = table.getFilteredRowModel().rows.length;
+    const startRow = totalRows === 0 ? 0 : currentPage === 1 ? 1 : (currentPage - 1) * pageSize + 1;
+    const endRow = Math.min(currentPage * pageSize, totalRows);
+    return /*#__PURE__*/ _jsx(TableFooter, {
+        className: className,
+        ...props,
+        children: /*#__PURE__*/ _jsx(TableRow, {
+            className: "hover:bg-transparent",
+            children: /*#__PURE__*/ _jsx(TableCell, {
+                colSpan: table.getAllColumns().length,
+                className: "group-hover/row:bg-transparent",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center justify-between gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-16",
+                            children: [
+                                showSelectedCount && /*#__PURE__*/ _jsxs(Text, {
+                                    size: "sm",
+                                    className: "text-foreground-neutral-muted",
+                                    children: [
+                                        table.getFilteredSelectedRowModel().rows.length,
+                                        " of ",
+                                        totalRows,
+                                        " row(s) selected"
+                                    ]
+                                }),
+                                !showSelectedCount && /*#__PURE__*/ _jsxs(Text, {
+                                    size: "sm",
+                                    className: "text-foreground-neutral-muted",
+                                    children: [
+                                        startRow,
+                                        " — ",
+                                        endRow,
+                                        " of ",
+                                        totalRows,
+                                        " results"
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex items-center gap-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            size: "sm",
+                                            className: "text-foreground-neutral-muted",
+                                            children: "Rows per page"
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Select, {
+                                            value: String(pageSize),
+                                            onValueChange: (value)=>{
+                                                table.setPageSize(Number(value));
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(SelectTrigger, {
+                                                    className: "h-28 w-80",
+                                                    size: "small",
+                                                    children: /*#__PURE__*/ _jsx(SelectValue, {})
+                                                }),
+                                                /*#__PURE__*/ _jsx(SelectContent, {
+                                                    children: pageSizeOptions.map((size)=>/*#__PURE__*/ _jsx(SelectItem, {
+                                                            value: String(size),
+                                                            children: size
+                                                        }, size))
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "transparent",
+                                    size: "xs",
+                                    onClick: ()=>table.setPageIndex(0),
+                                    disabled: !table.getCanPreviousPage(),
+                                    className: "h-32 w-32 p-0",
+                                    "aria-label": "Go to first page",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "arrowLeftDoubleLine",
+                                        className: "size-16"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "transparent",
+                                    size: "xs",
+                                    onClick: ()=>table.previousPage(),
+                                    disabled: !table.getCanPreviousPage(),
+                                    className: "h-32 px-12",
+                                    "aria-label": "Go to previous page",
+                                    children: "Prev"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "transparent",
+                                    size: "xs",
+                                    onClick: ()=>table.nextPage(),
+                                    disabled: !table.getCanNextPage(),
+                                    className: "h-32 px-12",
+                                    "aria-label": "Go to next page",
+                                    children: "Next"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "transparent",
+                                    size: "xs",
+                                    onClick: ()=>table.setPageIndex(table.getPageCount() - 1),
+                                    disabled: !table.getCanNextPage(),
+                                    className: "h-32 w-32 p-0",
+                                    "aria-label": "Go to last page",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "arrowRightDoubleLine",
+                                        className: "size-16"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=table-pagination.js.map

package/dist/components/table/table-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/table-pagination.tsx"],"sourcesContent":["import type {Table} from '@tanstack/react-table';\nimport {Text} from 'components/typography';\nimport type {ComponentProps} from 'react';\nimport {Button} from '../button';\nimport {Icon} from '../icon';\nimport {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '../select/select';\nimport {TableCell, TableFooter, TableRow} from './table';\n\n/**\n * Props for the {@link TablePagination} component.\n *\n * Provides pagination controls for data tables, including page navigation,\n * page size selection, and row count displays.\n *\n * @typeParam TData - The shape of the row data in the table.\n */\ninterface TablePaginationProps<TData> extends ComponentProps<'tfoot'> {\n  /**\n   * The TanStack Table instance that manages the table state and behavior.\n   *\n   * This is typically created using `useReactTable` from `@tanstack/react-table`.\n   * The table instance provides access to pagination state, row data, and methods\n   * for controlling pagination (e.g., `setPageSize`, `nextPage`, `previousPage`).\n   *\n   * @see {@link https://tanstack.com/table/latest/docs/api/core/table TanStack Table API}\n   */\n  table: Table<TData>;\n  /**\n   * Array of page size options to display in the page size selector.\n   * When provided, a dropdown will be rendered allowing users to change the number of rows per page.\n   *\n   * @default [10, 20, 50, 100]\n   * @example\n   * ```tsx\n   * <TablePagination table={table} pageSizeOptions={[10, 25, 50]} />\n   * ```\n   */\n  pageSizeOptions?: number[];\n  /**\n   * When `true`, displays the count of selected rows instead of pagination range.\n   *\n   * - If `true`: Shows \"X of Y row(s) selected\" where X is the number of selected rows\n   * - If `false`: Shows \"A — B of C results\" where A-B is the current page range\n   *\n   * This is useful when row selection is enabled and you want to give users feedback\n   * on how many rows they have selected.\n   *\n   * @default false\n   * @example\n   * ```tsx\n   * <TablePagination table={table} showSelectedCount={true} />\n   * // Displays: \"5 of 100 row(s) selected\"\n   * ```\n   */\n  showSelectedCount?: boolean;\n}\n\nexport function TablePagination<TData>({\n  table,\n  className,\n  pageSizeOptions = [10, 20, 50, 100],\n  showSelectedCount = false,\n  ...props\n}: TablePaginationProps<TData>) {\n  const currentPage = table.getState().pagination.pageIndex + 1;\n  const pageSize = table.getState().pagination.pageSize;\n  const totalRows = table.getFilteredRowModel().rows.length;\n  const startRow = totalRows === 0 ? 0 : currentPage === 1 ? 1 : (currentPage - 1) * pageSize + 1;\n  const endRow = Math.min(currentPage * pageSize, totalRows);\n\n  return (\n    <TableFooter className={className} {...props}>\n      <TableRow className=\"hover:bg-transparent\">\n        <TableCell\n          colSpan={table.getAllColumns().length}\n          className=\"group-hover/row:bg-transparent\"\n        >\n          <div className=\"flex items-center justify-between gap-16\">\n            <div className=\"flex items-center gap-16\">\n              {showSelectedCount && (\n                <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n                  {table.getFilteredSelectedRowModel().rows.length} of {totalRows} row(s) selected\n                </Text>\n              )}\n              {!showSelectedCount && (\n                <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n                  {startRow} — {endRow} of {totalRows} results\n                </Text>\n              )}\n              <div className=\"flex items-center gap-8\">\n                <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n                  Rows per page\n                </Text>\n                <Select\n                  value={String(pageSize)}\n                  onValueChange={(value) => {\n                    table.setPageSize(Number(value));\n                  }}\n                >\n                  <SelectTrigger className=\"h-28 w-80\" size=\"small\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {pageSizeOptions.map((size) => (\n                      <SelectItem key={size} value={String(size)}>\n                        {size}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n\n            <div className=\"flex items-center\">\n              <Button\n                variant=\"transparent\"\n                size=\"xs\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n                className=\"h-32 w-32 p-0\"\n                aria-label=\"Go to first page\"\n              >\n                <Icon name=\"arrowLeftDoubleLine\" className=\"size-16\" />\n              </Button>\n              <Button\n                variant=\"transparent\"\n                size=\"xs\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n                className=\"h-32 px-12\"\n                aria-label=\"Go to previous page\"\n              >\n                Prev\n              </Button>\n              <Button\n                variant=\"transparent\"\n                size=\"xs\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n                className=\"h-32 px-12\"\n                aria-label=\"Go to next page\"\n              >\n                Next\n              </Button>\n              <Button\n                variant=\"transparent\"\n                size=\"xs\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n                className=\"h-32 w-32 p-0\"\n                aria-label=\"Go to last page\"\n              >\n                <Icon name=\"arrowRightDoubleLine\" className=\"size-16\" />\n              </Button>\n            </div>\n          </div>\n        </TableCell>\n      </TableRow>\n    </TableFooter>\n  );\n}\n"],"names":["Text","Button","Icon","Select","SelectContent","SelectItem","SelectTrigger","SelectValue","TableCell","TableFooter","TableRow","TablePagination","table","className","pageSizeOptions","showSelectedCount","props","currentPage","getState","pagination","pageIndex","pageSize","totalRows","getFilteredRowModel","rows","length","startRow","endRow","Math","min","colSpan","getAllColumns","div","size","getFilteredSelectedRowModel","value","String","onValueChange","setPageSize","Number","map","variant","onClick","setPageIndex","disabled","getCanPreviousPage","aria-label","name","previousPage","nextPage","getCanNextPage","getPageCount"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+declare function Table({ className, ...props }: ComponentProps<'table'>): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: ComponentProps<'thead'>): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: ComponentProps<'tbody'>): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: ComponentProps<'tfoot'>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: ComponentProps<'tr'>): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: ComponentProps<'th'>): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: ComponentProps<'td'>): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: ComponentProps<'caption'>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,iBAAS,KAAK,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,CAAC,2CAU5D;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,CAAC,2CAElE;AAED,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,CAAC,2CAEhE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,CAAC,2CAWlE;AAED,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,IAAI,CAAC,2CAc5D;AAED,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,IAAI,CAAC,2CAa7D;AAED,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,IAAI,CAAC,2CAe7D;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,SAAS,CAAC,2CAQrE;AAED,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC"}

package/dist/components/table/table.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+function Table({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "relative w-full overflow-auto scrollbar",
+        children: /*#__PURE__*/ _jsx("table", {
+            "data-slot": "table",
+            className: cn('w-full caption-bottom text-sm', className),
+            ...props
+        })
+    });
+}
+function TableHeader({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("thead", {
+        "data-slot": "table-header",
+        className: cn(className),
+        ...props
+    });
+}
+function TableBody({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("tbody", {
+        "data-slot": "table-body",
+        className: cn(className),
+        ...props
+    });
+}
+function TableFooter({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("tfoot", {
+        "data-slot": "table-footer",
+        className: cn('border-t border-border-neutral-base bg-background-neutral-base font-medium', className),
+        ...props
+    });
+}
+function TableRow({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("tr", {
+        "data-slot": "table-row",
+        className: cn('group/row border-b border-border-neutral-base transition-colors', 'last:border-b-0', 'hover:bg-background-neutral-hover', 'data-[selected=true]:bg-background-neutral-pressed data-[selected=true]:hover:bg-background-neutral-pressed', className),
+        ...props
+    });
+}
+function TableHead({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("th", {
+        "data-slot": "table-head",
+        className: cn('h-40 px-16 text-left align-middle text-xs font-medium leading-20 text-foreground-neutral-subtle', 'bg-background-subtle-base', '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:px-12 [&:has([role=checkbox])]:w-0 [&:has([role=checkbox])]:pt-6', className),
+        ...props
+    });
+}
+function TableCell({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("td", {
+        "data-slot": "table-cell",
+        className: cn('px-12 py-10 align-middle text-sm leading-20 text-foreground-neutral-base', 'bg-background-neutral-base', 'group-hover/row:bg-background-neutral-hover', 'group-data-[selected=true]/row:bg-background-neutral-pressed!', '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:pt-14', className),
+        ...props
+    });
+}
+function TableCaption({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("caption", {
+        "data-slot": "table-caption",
+        className: cn('mt-16 text-sm text-foreground-neutral-muted', className),
+        ...props
+    });
+}
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };
+
+//# sourceMappingURL=table.js.map

package/dist/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nfunction Table({className, ...props}: ComponentProps<'table'>) {\n  return (\n    <div className=\"relative w-full overflow-auto scrollbar\">\n      <table\n        data-slot=\"table\"\n        className={cn('w-full caption-bottom text-sm', className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader({className, ...props}: ComponentProps<'thead'>) {\n  return <thead data-slot=\"table-header\" className={cn(className)} {...props} />;\n}\n\nfunction TableBody({className, ...props}: ComponentProps<'tbody'>) {\n  return <tbody data-slot=\"table-body\" className={cn(className)} {...props} />;\n}\n\nfunction TableFooter({className, ...props}: ComponentProps<'tfoot'>) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        'border-t border-border-neutral-base bg-background-neutral-base font-medium',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableRow({className, ...props}: ComponentProps<'tr'>) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        'group/row border-b border-border-neutral-base transition-colors',\n        'last:border-b-0',\n        'hover:bg-background-neutral-hover',\n        'data-[selected=true]:bg-background-neutral-pressed data-[selected=true]:hover:bg-background-neutral-pressed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableHead({className, ...props}: ComponentProps<'th'>) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        'h-40 px-16 text-left align-middle text-xs font-medium leading-20 text-foreground-neutral-subtle',\n        'bg-background-subtle-base',\n        '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:px-12 [&:has([role=checkbox])]:w-0 [&:has([role=checkbox])]:pt-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCell({className, ...props}: ComponentProps<'td'>) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        'px-12 py-10 align-middle text-sm leading-20 text-foreground-neutral-base',\n        'bg-background-neutral-base',\n        'group-hover/row:bg-background-neutral-hover',\n        'group-data-[selected=true]/row:bg-background-neutral-pressed!',\n        '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:pt-14',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCaption({className, ...props}: ComponentProps<'caption'>) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn('mt-16 text-sm text-foreground-neutral-muted', className)}\n      {...props}\n    />\n  );\n}\n\nexport {Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption};\n"],"names":["cn","Table","className","props","div","table","data-slot","TableHeader","thead","TableBody","tbody","TableFooter","tfoot","TableRow","tr","TableHead","th","TableCell","td","TableCaption","caption"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAE5B,SAASC,MAAM,EAACC,SAAS,EAAE,GAAGC,OAA+B;IAC3D,qBACE,KAACC;QAAIF,WAAU;kBACb,cAAA,KAACG;YACCC,aAAU;YACVJ,WAAWF,GAAG,iCAAiCE;YAC9C,GAAGC,KAAK;;;AAIjB;AAEA,SAASI,YAAY,EAACL,SAAS,EAAE,GAAGC,OAA+B;IACjE,qBAAO,KAACK;QAAMF,aAAU;QAAeJ,WAAWF,GAAGE;QAAa,GAAGC,KAAK;;AAC5E;AAEA,SAASM,UAAU,EAACP,SAAS,EAAE,GAAGC,OAA+B;IAC/D,qBAAO,KAACO;QAAMJ,aAAU;QAAaJ,WAAWF,GAAGE;QAAa,GAAGC,KAAK;;AAC1E;AAEA,SAASQ,YAAY,EAACT,SAAS,EAAE,GAAGC,OAA+B;IACjE,qBACE,KAACS;QACCN,aAAU;QACVJ,WAAWF,GACT,8EACAE;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASU,SAAS,EAACX,SAAS,EAAE,GAAGC,OAA4B;IAC3D,qBACE,KAACW;QACCR,aAAU;QACVJ,WAAWF,GACT,mEACA,mBACA,qCACA,+GACAE;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASY,UAAU,EAACb,SAAS,EAAE,GAAGC,OAA4B;IAC5D,qBACE,KAACa;QACCV,aAAU;QACVJ,WAAWF,GACT,mGACA,6BACA,2HACAE;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASc,UAAU,EAACf,SAAS,EAAE,GAAGC,OAA4B;IAC5D,qBACE,KAACe;QACCZ,aAAU;QACVJ,WAAWF,GACT,4EACA,8BACA,+CACA,iEACA,gEACAE;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASgB,aAAa,EAACjB,SAAS,EAAE,GAAGC,OAAiC;IACpE,qBACE,KAACiB;QACCd,aAAU;QACVJ,WAAWF,GAAG,+CAA+CE;QAC5D,GAAGC,KAAK;;AAGf;AAEA,SAAQF,KAAK,EAAEM,WAAW,EAAEE,SAAS,EAAEE,WAAW,EAAEE,QAAQ,EAAEE,SAAS,EAAEE,SAAS,EAAEE,YAAY,GAAE"}

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

@@ -0,0 +1,24 @@
+/**
+ * Column definitions for Table stories
+ */
+import type { ColumnDef } from '@tanstack/react-table';
+import type { JobData, SearchJobData, User } from './table.stories.data';
+/**
+ * Create column definitions for JobData
+ */
+export declare const createJobColumns: () => ColumnDef<JobData>[];
+/**
+ * Create column definitions for User data
+ */
+export declare const createUserColumns: () => ColumnDef<User>[];
+/**
+ * Create column definitions for SearchJobData
+ */
+export declare const createSearchJobColumns: () => ColumnDef<SearchJobData>[];
+/**
+ * Column instances for reuse in stories
+ */
+export declare const jobColumns: ColumnDef<JobData>[];
+export declare const userColumns: ColumnDef<User>[];
+export declare const searchJobColumns: ColumnDef<SearchJobData>[];
+//# sourceMappingURL=table.stories.columns.d.ts.map

package/dist/components/table/table.stories.columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.stories.columns.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.stories.columns.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,EAAC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAC,MAAM,sBAAsB,CAAC;AAGvE;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAO,SAAS,CAAC,OAAO,CAAC,EAoErD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,QAAO,SAAS,CAAC,IAAI,CAAC,EA8BnD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,QAAO,SAAS,CAAC,aAAa,CAAC,EAqEjE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,sBAAqB,CAAC;AAC7C,eAAO,MAAM,WAAW,mBAAsB,CAAC;AAC/C,eAAO,MAAM,gBAAgB,4BAA2B,CAAC"}