@shipfox/react-ui 0.13.0 → 0.15.0

package/dist/components/skeleton/skeleton.stories.js

@@ -0,0 +1,345 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code, Header } from '../../components/typography/index.js';
+import { Skeleton } from './skeleton.js';
+const meta = {
+    title: 'Components/Skeleton',
+    component: Skeleton,
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsx(Skeleton, {
+            className: "w-200 h-20"
+        })
+};
+export const Card = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-12 p-16 rounded-10 border border-border-neutral-base bg-background-field-base max-w-400",
+            children: [
+                /*#__PURE__*/ _jsx(Skeleton, {
+                    className: "h-200 w-full rounded-6"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "space-y-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-20 w-3/4"
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-16 w-full"
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-16 w-5/6"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-8 pt-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-32 w-100 rounded-6"
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-32 w-100 rounded-6"
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const List = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-8 max-w-500",
+            children: Array.from({
+                length: 5
+            }, (_, i)=>i).map((id)=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-12 p-12 rounded-6 border border-border-neutral-base bg-background-field-base",
+                    children: [
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-48 w-48 rounded-full shrink-0"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex-1 space-y-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-16 w-3/4"
+                                }),
+                                /*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-14 w-1/2"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-32 w-80 rounded-6"
+                        })
+                    ]
+                }, `list-${id}`))
+        })
+};
+export const Showcase = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Basic Shapes"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-12",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle",
+                                            children: "Rectangle"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-20 w-200"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle",
+                                            children: "Circle"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-48 w-48 rounded-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle",
+                                            children: "Square"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-100 w-100"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Card Loading"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-12 p-16 rounded-10 border border-border-neutral-base bg-background-field-base max-w-400",
+                            children: [
+                                /*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-200 w-full rounded-6"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "space-y-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-20 w-3/4"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-full"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-2/3"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-8 pt-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-100 rounded-6"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-100 rounded-6"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "List Loading"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex flex-col gap-8 max-w-500",
+                            children: Array.from({
+                                length: 4
+                            }, (_, i)=>i).map((id)=>/*#__PURE__*/ _jsxs("div", {
+                                    className: "flex items-center gap-12 p-12 rounded-6 border border-border-neutral-base bg-background-field-base",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-48 w-48 rounded-full shrink-0"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex-1 space-y-8",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Skeleton, {
+                                                    className: "h-16 w-3/4"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Skeleton, {
+                                                    className: "h-14 w-1/2"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-80 rounded-6"
+                                        })
+                                    ]
+                                }, `list-loading-${id}`))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Table Loading"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "rounded-10 border border-border-neutral-base bg-background-field-base overflow-hidden max-w-700",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-16 p-12 border-b border-border-neutral-base bg-background-neutral-base",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-140"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-220"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-120"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-100 ml-auto"
+                                        })
+                                    ]
+                                }),
+                                Array.from({
+                                    length: 5
+                                }, (_, i)=>i).map((id)=>/*#__PURE__*/ _jsxs("div", {
+                                        className: "flex gap-16 p-12 border-b border-border-neutral-base last:border-0",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Skeleton, {
+                                                className: "h-14 w-140"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Skeleton, {
+                                                className: "h-14 w-220"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Skeleton, {
+                                                className: "h-14 w-120"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Skeleton, {
+                                                className: "h-14 w-100 ml-auto"
+                                            })
+                                        ]
+                                    }, `table-row-${id}`))
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Form Loading"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "max-w-400 space-y-16 p-16 rounded-10 border border-border-neutral-base bg-background-field-base",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "space-y-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-100"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-full rounded-6"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "space-y-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-120"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-full rounded-6"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "space-y-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-80"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-96 w-full rounded-6"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-8 pt-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-100 rounded-6"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-100 rounded-6"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Avatar Group Loading"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex -space-x-8",
+                            children: Array.from({
+                                length: 5
+                            }, (_, i)=>i).map((id)=>/*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-40 w-40 rounded-full border-2 border-background-field-base"
+                                }, `avatar-${id}`))
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=skeleton.stories.js.map

package/dist/components/skeleton/skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/skeleton/skeleton.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {Skeleton} from './skeleton';\n\nconst meta = {\n  title: 'Components/Skeleton',\n  component: Skeleton,\n  tags: ['autodocs'],\n} satisfies Meta<typeof Skeleton>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: () => <Skeleton className=\"w-200 h-20\" />,\n};\n\nexport const Card: Story = {\n  render: () => (\n    <div className=\"flex flex-col gap-12 p-16 rounded-10 border border-border-neutral-base bg-background-field-base max-w-400\">\n      <Skeleton className=\"h-200 w-full rounded-6\" />\n      <div className=\"space-y-8\">\n        <Skeleton className=\"h-20 w-3/4\" />\n        <Skeleton className=\"h-16 w-full\" />\n        <Skeleton className=\"h-16 w-5/6\" />\n      </div>\n      <div className=\"flex gap-8 pt-8\">\n        <Skeleton className=\"h-32 w-100 rounded-6\" />\n        <Skeleton className=\"h-32 w-100 rounded-6\" />\n      </div>\n    </div>\n  ),\n};\n\nexport const List: Story = {\n  render: () => (\n    <div className=\"flex flex-col gap-8 max-w-500\">\n      {Array.from({length: 5}, (_, i) => i).map((id) => (\n        <div\n          key={`list-${id}`}\n          className=\"flex items-center gap-12 p-12 rounded-6 border border-border-neutral-base bg-background-field-base\"\n        >\n          <Skeleton className=\"h-48 w-48 rounded-full shrink-0\" />\n          <div className=\"flex-1 space-y-8\">\n            <Skeleton className=\"h-16 w-3/4\" />\n            <Skeleton className=\"h-14 w-1/2\" />\n          </div>\n          <Skeleton className=\"h-32 w-80 rounded-6\" />\n        </div>\n      ))}\n    </div>\n  ),\n};\n\nexport const Showcase: Story = {\n  render: () => (\n    <div className=\"flex flex-col gap-32\">\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h3\">Basic Shapes</Header>\n        <div className=\"flex flex-col gap-12\">\n          <div className=\"flex flex-col gap-8\">\n            <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n              Rectangle\n            </Code>\n            <Skeleton className=\"h-20 w-200\" />\n          </div>\n\n          <div className=\"flex flex-col gap-8\">\n            <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n              Circle\n            </Code>\n            <Skeleton className=\"h-48 w-48 rounded-full\" />\n          </div>\n\n          <div className=\"flex flex-col gap-8\">\n            <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n              Square\n            </Code>\n            <Skeleton className=\"h-100 w-100\" />\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h3\">Card Loading</Header>\n        <div className=\"flex flex-col gap-12 p-16 rounded-10 border border-border-neutral-base bg-background-field-base max-w-400\">\n          <Skeleton className=\"h-200 w-full rounded-6\" />\n          <div className=\"space-y-8\">\n            <Skeleton className=\"h-20 w-3/4\" />\n            <Skeleton className=\"h-16 w-full\" />\n            <Skeleton className=\"h-16 w-2/3\" />\n          </div>\n          <div className=\"flex gap-8 pt-8\">\n            <Skeleton className=\"h-32 w-100 rounded-6\" />\n            <Skeleton className=\"h-32 w-100 rounded-6\" />\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h3\">List Loading</Header>\n        <div className=\"flex flex-col gap-8 max-w-500\">\n          {Array.from({length: 4}, (_, i) => i).map((id) => (\n            <div\n              key={`list-loading-${id}`}\n              className=\"flex items-center gap-12 p-12 rounded-6 border border-border-neutral-base bg-background-field-base\"\n            >\n              <Skeleton className=\"h-48 w-48 rounded-full shrink-0\" />\n              <div className=\"flex-1 space-y-8\">\n                <Skeleton className=\"h-16 w-3/4\" />\n                <Skeleton className=\"h-14 w-1/2\" />\n              </div>\n              <Skeleton className=\"h-32 w-80 rounded-6\" />\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h3\">Table Loading</Header>\n        <div className=\"rounded-10 border border-border-neutral-base bg-background-field-base overflow-hidden max-w-700\">\n          <div className=\"flex gap-16 p-12 border-b border-border-neutral-base bg-background-neutral-base\">\n            <Skeleton className=\"h-16 w-140\" />\n            <Skeleton className=\"h-16 w-220\" />\n            <Skeleton className=\"h-16 w-120\" />\n            <Skeleton className=\"h-16 w-100 ml-auto\" />\n          </div>\n          {Array.from({length: 5}, (_, i) => i).map((id) => (\n            <div\n              key={`table-row-${id}`}\n              className=\"flex gap-16 p-12 border-b border-border-neutral-base last:border-0\"\n            >\n              <Skeleton className=\"h-14 w-140\" />\n              <Skeleton className=\"h-14 w-220\" />\n              <Skeleton className=\"h-14 w-120\" />\n              <Skeleton className=\"h-14 w-100 ml-auto\" />\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h3\">Form Loading</Header>\n        <div className=\"max-w-400 space-y-16 p-16 rounded-10 border border-border-neutral-base bg-background-field-base\">\n          <div className=\"space-y-8\">\n            <Skeleton className=\"h-16 w-100\" />\n            <Skeleton className=\"h-32 w-full rounded-6\" />\n          </div>\n          <div className=\"space-y-8\">\n            <Skeleton className=\"h-16 w-120\" />\n            <Skeleton className=\"h-32 w-full rounded-6\" />\n          </div>\n          <div className=\"space-y-8\">\n            <Skeleton className=\"h-16 w-80\" />\n            <Skeleton className=\"h-96 w-full rounded-6\" />\n          </div>\n          <div className=\"flex gap-8 pt-8\">\n            <Skeleton className=\"h-32 w-100 rounded-6\" />\n            <Skeleton className=\"h-32 w-100 rounded-6\" />\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-16\">\n        <Header variant=\"h3\">Avatar Group Loading</Header>\n        <div className=\"flex -space-x-8\">\n          {Array.from({length: 5}, (_, i) => i).map((id) => (\n            <Skeleton\n              key={`avatar-${id}`}\n              className=\"h-40 w-40 rounded-full border-2 border-background-field-base\"\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Header","Skeleton","meta","title","component","tags","Default","render","className","Card","div","List","Array","from","length","_","i","map","id","Showcase","variant"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import { type ComponentProps } from 'react';
+/**
+ * Props for the {@link DataTable} component.
+ *
+ * @typeParam TData - The shape of the row data.
+ * @typeParam TValue - The value type used by column definitions.
+ */
+interface DataTableProps<TData, TValue> extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * Column definitions for the table, as expected by `@tanstack/react-table`.
+     *
+     * These control how each field in {@link data} is rendered and interacted with.
+     */
+    columns: ColumnDef<TData, TValue>[];
+    /**
+     * Array of data items to render as table rows.
+     */
+    data: TData[];
+    /**
+     * Enables client-side pagination when `true`.
+     *
+     * Defaults to `true`. When set to `false`, all rows are rendered in a single
+     * page and the pagination controls are disabled. In that case, the
+     * {@link pageSize} value is effectively ignored.
+     */
+    pagination?: boolean;
+    /**
+     * Number of rows to display per page when pagination is enabled.
+     *
+     * Defaults to `10`. This value is used to initialize the internal pagination
+     * state and only has an effect when {@link pagination} is `true`.
+     */
+    pageSize?: number;
+    /**
+     * Array of page size options to display in the page size selector.
+     * When provided, a dropdown will be rendered in the pagination footer allowing
+     * users to change the number of rows per page.
+     *
+     * @default [10, 20, 50, 100]
+     * @example
+     * ```tsx
+     * <DataTable columns={columns} data={data} pageSizeOptions={[5, 10, 25]} />
+     * ```
+     */
+    pageSizeOptions?: number[];
+    /**
+     * When `true`, displays the count of selected rows.
+     *
+     * This is useful when row selection is enabled to give users feedback on how
+     * many rows are currently selected.
+     */
+    showSelectedCount?: boolean;
+    /**
+     * Optional callback invoked when a table row is clicked.
+     *
+     * The callback receives the corresponding data item for the clicked row.
+     */
+    onRowClick?: (row: TData) => void;
+    /**
+     * React node to render when there are no rows to display.
+     *
+     * If not provided, the table will render without rows and without a custom
+     * empty state message or placeholder.
+     */
+    emptyState?: React.ReactNode;
+}
+export declare function DataTable<TData, TValue>({ columns, data, pagination, pageSize, pageSizeOptions, showSelectedCount, onRowClick, emptyState, className, ...props }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=data-table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAKV,MAAM,uBAAuB,CAAC;AAY/B,OAAO,EAAC,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AAKxE;;;;;GAKG;AACH,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACrF;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACpC;;OAEG;IACH,IAAI,EAAE,KAAK,EAAE,CAAC;IACd;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,EACvC,OAAO,EACP,IAAI,EACJ,UAAiB,EACjB,QAAa,EACb,eAAe,EACf,iBAAyB,EACzB,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,2CAyJ/B"}

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

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { Checkbox } from '../../components/checkbox/index.js';
+import { Icon } from '../../components/icon/index.js';
+import { Text } from '../../components/typography/index.js';
+import { useEffect, useMemo, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table.js';
+import { TablePagination } from './table-pagination.js';
+export function DataTable({ columns, data, pagination = true, pageSize = 10, pageSizeOptions, showSelectedCount = false, onRowClick, emptyState, className, ...props }) {
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnVisibility, setColumnVisibility] = useState({});
+    const [rowSelection, setRowSelection] = useState({});
+    const [paginationState, setPaginationState] = useState({
+        pageIndex: 0,
+        pageSize
+    });
+    useEffect(()=>{
+        setPaginationState((prev)=>({
+                ...prev,
+                pageSize,
+                pageIndex: 0
+            }));
+    }, [
+        pageSize
+    ]);
+    // Add selection column if showSelectedCount is enabled
+    const columnsWithSelection = useMemo(()=>{
+        if (!showSelectedCount) {
+            return columns;
+        }
+        const selectionColumn = {
+            id: 'select',
+            header: ({ table })=>{
+                const isAllSelected = table.getIsAllPageRowsSelected();
+                const isSomeSelected = table.getIsSomePageRowsSelected();
+                return /*#__PURE__*/ _jsx(Checkbox, {
+                    checked: isAllSelected ? true : isSomeSelected ? 'indeterminate' : false,
+                    onCheckedChange: (checked)=>table.toggleAllPageRowsSelected(!!checked),
+                    onClick: (e)=>e.stopPropagation(),
+                    "aria-label": "Select all"
+                });
+            },
+            cell: ({ row })=>/*#__PURE__*/ _jsx(Checkbox, {
+                    checked: row.getIsSelected(),
+                    onCheckedChange: (checked)=>row.toggleSelected(!!checked),
+                    onClick: (e)=>e.stopPropagation(),
+                    "aria-label": "Select row"
+                }),
+            enableSorting: false,
+            enableHiding: false
+        };
+        return [
+            selectionColumn,
+            ...columns
+        ];
+    }, [
+        columns,
+        showSelectedCount
+    ]);
+    const table = useReactTable({
+        data,
+        columns: columnsWithSelection,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
+        enableRowSelection: showSelectedCount,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        onPaginationChange: setPaginationState,
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+            rowSelection,
+            pagination: pagination ? paginationState : undefined
+        }
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('rounded-8 border border-border-neutral-base overflow-hidden', className),
+        ...props,
+        children: /*#__PURE__*/ _jsxs(Table, {
+            children: [
+                table.getRowModel().rows.length > 0 ? /*#__PURE__*/ _jsx(TableHeader, {
+                    children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ _jsx(TableRow, {
+                            className: "hover:bg-transparent border-b",
+                            children: headerGroup.headers.map((header)=>/*#__PURE__*/ _jsx(TableHead, {
+                                    children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                                }, header.id))
+                        }, headerGroup.id))
+                }) : null,
+                /*#__PURE__*/ _jsx(TableBody, {
+                    children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row)=>/*#__PURE__*/ _jsx(TableRow, {
+                            onClick: ()=>onRowClick?.(row.original),
+                            "data-selected": row.getIsSelected(),
+                            className: onRowClick ? 'cursor-pointer' : '',
+                            tabIndex: onRowClick ? 0 : undefined,
+                            role: onRowClick ? 'button' : undefined,
+                            onKeyDown: (event)=>{
+                                if (!onRowClick) return;
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    event.preventDefault();
+                                    onRowClick(row.original);
+                                }
+                            },
+                            children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ _jsx(TableCell, {
+                                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                }, cell.id))
+                        }, row.id)) : /*#__PURE__*/ _jsx(TableRow, {
+                        className: "hover:bg-transparent",
+                        children: /*#__PURE__*/ _jsx(TableCell, {
+                            colSpan: table.getAllColumns().length,
+                            className: "h-240 text-center",
+                            children: emptyState || /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col items-center justify-center gap-12 py-48",
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center",
+                                        children: /*#__PURE__*/ _jsx(Icon, {
+                                            name: "fileDamageLine",
+                                            className: "size-16 text-foreground-neutral-subtle",
+                                            color: "var(--foreground-neutral-subtle, #a1a1aa)"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "text-center space-y-4",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                size: "sm",
+                                                className: "text-foreground-neutral-base",
+                                                children: "No results"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                size: "xs",
+                                                className: "text-foreground-neutral-muted",
+                                                children: "Looks like there are no results."
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                }),
+                pagination && table.getRowModel().rows?.length > 0 && /*#__PURE__*/ _jsx(TablePagination, {
+                    table: table,
+                    pageSizeOptions: pageSizeOptions,
+                    showSelectedCount: showSelectedCount
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/data-table.tsx"],"sourcesContent":["import type {\n  ColumnDef,\n  ColumnFiltersState,\n  PaginationState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport {Checkbox} from 'components/checkbox';\nimport {Icon} from 'components/icon';\nimport {Text} from 'components/typography';\nimport {type ComponentProps, useEffect, useMemo, useState} from 'react';\nimport {cn} from 'utils/cn';\nimport {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from './table';\nimport {TablePagination} from './table-pagination';\n\n/**\n * Props for the {@link DataTable} component.\n *\n * @typeParam TData - The shape of the row data.\n * @typeParam TValue - The value type used by column definitions.\n */\ninterface DataTableProps<TData, TValue> extends Omit<ComponentProps<'div'>, 'children'> {\n  /**\n   * Column definitions for the table, as expected by `@tanstack/react-table`.\n   *\n   * These control how each field in {@link data} is rendered and interacted with.\n   */\n  columns: ColumnDef<TData, TValue>[];\n  /**\n   * Array of data items to render as table rows.\n   */\n  data: TData[];\n  /**\n   * Enables client-side pagination when `true`.\n   *\n   * Defaults to `true`. When set to `false`, all rows are rendered in a single\n   * page and the pagination controls are disabled. In that case, the\n   * {@link pageSize} value is effectively ignored.\n   */\n  pagination?: boolean;\n  /**\n   * Number of rows to display per page when pagination is enabled.\n   *\n   * Defaults to `10`. This value is used to initialize the internal pagination\n   * state and only has an effect when {@link pagination} is `true`.\n   */\n  pageSize?: number;\n  /**\n   * Array of page size options to display in the page size selector.\n   * When provided, a dropdown will be rendered in the pagination footer allowing\n   * users to change the number of rows per page.\n   *\n   * @default [10, 20, 50, 100]\n   * @example\n   * ```tsx\n   * <DataTable columns={columns} data={data} pageSizeOptions={[5, 10, 25]} />\n   * ```\n   */\n  pageSizeOptions?: number[];\n  /**\n   * When `true`, displays the count of selected rows.\n   *\n   * This is useful when row selection is enabled to give users feedback on how\n   * many rows are currently selected.\n   */\n  showSelectedCount?: boolean;\n  /**\n   * Optional callback invoked when a table row is clicked.\n   *\n   * The callback receives the corresponding data item for the clicked row.\n   */\n  onRowClick?: (row: TData) => void;\n  /**\n   * React node to render when there are no rows to display.\n   *\n   * If not provided, the table will render without rows and without a custom\n   * empty state message or placeholder.\n   */\n  emptyState?: React.ReactNode;\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  pagination = true,\n  pageSize = 10,\n  pageSizeOptions,\n  showSelectedCount = false,\n  onRowClick,\n  emptyState,\n  className,\n  ...props\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n  const [rowSelection, setRowSelection] = useState({});\n  const [paginationState, setPaginationState] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize,\n  });\n\n  useEffect(() => {\n    setPaginationState((prev) => ({...prev, pageSize, pageIndex: 0}));\n  }, [pageSize]);\n\n  // Add selection column if showSelectedCount is enabled\n  const columnsWithSelection = useMemo(() => {\n    if (!showSelectedCount) {\n      return columns;\n    }\n\n    const selectionColumn: ColumnDef<TData, TValue> = {\n      id: 'select',\n      header: ({table}) => {\n        const isAllSelected = table.getIsAllPageRowsSelected();\n        const isSomeSelected = table.getIsSomePageRowsSelected();\n        return (\n          <Checkbox\n            checked={isAllSelected ? true : isSomeSelected ? 'indeterminate' : false}\n            onCheckedChange={(checked) => table.toggleAllPageRowsSelected(!!checked)}\n            onClick={(e) => e.stopPropagation()}\n            aria-label=\"Select all\"\n          />\n        );\n      },\n      cell: ({row}) => (\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(checked) => row.toggleSelected(!!checked)}\n          onClick={(e) => e.stopPropagation()}\n          aria-label=\"Select row\"\n        />\n      ),\n      enableSorting: false,\n      enableHiding: false,\n    };\n\n    return [selectionColumn, ...columns];\n  }, [columns, showSelectedCount]);\n\n  const table = useReactTable({\n    data,\n    columns: columnsWithSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,\n    enableRowSelection: showSelectedCount,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    onPaginationChange: setPaginationState,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n      pagination: pagination ? paginationState : undefined,\n    },\n  });\n\n  return (\n    <div\n      className={cn('rounded-8 border border-border-neutral-base overflow-hidden', className)}\n      {...props}\n    >\n      <Table>\n        {table.getRowModel().rows.length > 0 ? (\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id} className=\"hover:bg-transparent border-b\">\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n        ) : null}\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                key={row.id}\n                onClick={() => onRowClick?.(row.original)}\n                data-selected={row.getIsSelected()}\n                className={onRowClick ? 'cursor-pointer' : ''}\n                tabIndex={onRowClick ? 0 : undefined}\n                role={onRowClick ? 'button' : undefined}\n                onKeyDown={(event) => {\n                  if (!onRowClick) return;\n                  if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    onRowClick(row.original);\n                  }\n                }}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow className=\"hover:bg-transparent\">\n              <TableCell colSpan={table.getAllColumns().length} className=\"h-240 text-center\">\n                {emptyState || (\n                  <div className=\"flex flex-col items-center justify-center gap-12 py-48\">\n                    <div className=\"size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center\">\n                      <Icon\n                        name=\"fileDamageLine\"\n                        className=\"size-16 text-foreground-neutral-subtle\"\n                        color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n                      />\n                    </div>\n                    <div className=\"text-center space-y-4\">\n                      <Text size=\"sm\" className=\"text-foreground-neutral-base\">\n                        No results\n                      </Text>\n                      <Text size=\"xs\" className=\"text-foreground-neutral-muted\">\n                        Looks like there are no results.\n                      </Text>\n                    </div>\n                  </div>\n                )}\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        {pagination && table.getRowModel().rows?.length > 0 && (\n          <TablePagination\n            table={table}\n            pageSizeOptions={pageSizeOptions}\n            showSelectedCount={showSelectedCount}\n          />\n        )}\n      </Table>\n    </div>\n  );\n}\n"],"names":["flexRender","getCoreRowModel","getFilteredRowModel","getPaginationRowModel","getSortedRowModel","useReactTable","Checkbox","Icon","Text","useEffect","useMemo","useState","cn","Table","TableBody","TableCell","TableHead","TableHeader","TableRow","TablePagination","DataTable","columns","data","pagination","pageSize","pageSizeOptions","showSelectedCount","onRowClick","emptyState","className","props","sorting","setSorting","columnFilters","setColumnFilters","columnVisibility","setColumnVisibility","rowSelection","setRowSelection","paginationState","setPaginationState","pageIndex","prev","columnsWithSelection","selectionColumn","id","header","table","isAllSelected","getIsAllPageRowsSelected","isSomeSelected","getIsSomePageRowsSelected","checked","onCheckedChange","toggleAllPageRowsSelected","onClick","e","stopPropagation","aria-label","cell","row","getIsSelected","toggleSelected","enableSorting","enableHiding","undefined","enableRowSelection","onSortingChange","onColumnFiltersChange","onColumnVisibilityChange","onRowSelectionChange","onPaginationChange","state","div","getRowModel","rows","length","getHeaderGroups","map","headerGroup","headers","isPlaceholder","column","columnDef","getContext","original","data-selected","tabIndex","role","onKeyDown","event","key","preventDefault","getVisibleCells","colSpan","getAllColumns","name","color","size"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+export type { ColumnDef } from '@tanstack/react-table';
+export * from './data-table';
+export * from './table';
+export * from './table-column-header';
+export * from './table-pagination';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AACrD,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}