@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/dist/src/shadcn/components/ui/table.js

@@ -1,62 +1,107 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import * as React from "react";
 import { cn } from "../../lib/utils.js";
-function Table({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "table-container",
-        className: "relative w-full overflow-x-auto",
-        children: /*#__PURE__*/ _jsx("table", {
-            "data-slot": "table",
-            className: cn("w-full caption-bottom text-sm", className),
-            ...props
+// Table container
+const tableContainerStyles = cn("relative", "h-full", "w-full", "overflow-auto");
+// Table base
+const tableStyles = cn("w-full", "caption-bottom", "text-sm", "border-collapse", "border-spacing-0");
+// Table header
+const tableHeaderStyles = cn("bg-bg-secondary", "[&_tr]:border-b", "[&_tr]:border-border-secondary", "[&_tr]:h-8");
+// Table header sticky variant
+const tableHeaderStickyStyles = cn("sticky", "top-0", "z-10");
+// Table body
+const tableBodyStyles = cn("[&_tr:last-child]:border-0", "[&_tr]:hover:bg-bg-hover");
+// Table footer
+const tableFooterStyles = cn("bg-bg-secondary", "border-t", "border-border-secondary", "font-medium", "[&>tr]:last:border-b-0");
+// Table row
+const tableRowStyles = cn("h-7", "transition-colors", "duration-150");
+// Table head cell
+const tableHeadStyles = cn("group/head", "text-text-secondary", "h-8", "px-4", "py-2", "text-left", "align-middle", "typo-body-xs", "whitespace-nowrap", "transition-colors", "duration-150", "hover:bg-bg-tertiary", "[&:has([role=checkbox])]:pr-0");
+// Table head sort icon
+const tableSortIconStyles = cn("size-3.5", "shrink-0", "transition-opacity", "duration-150");
+// Table cell
+const tableCellStyles = cn("px-4", "py-1", "align-middle", "whitespace-nowrap", "text-sm", "text-grey-700", "[&:has([role=checkbox])]:pr-0");
+// Table cell link variant
+const tableCellLinkStyles = cn("text-text-link", "cursor-pointer", "hover:underline");
+// Table caption
+const tableCaptionStyles = cn("text-text-secondary", "mt-4", "text-xs", "text-left");
+// Context for sticky header
+const TableStickyContext = /*#__PURE__*/ React.createContext(false);
+function Table({ className, zebra = false, stickyHeader = false, ...props }) {
+    return /*#__PURE__*/ _jsx(TableStickyContext.Provider, {
+        value: stickyHeader,
+        children: /*#__PURE__*/ _jsx("div", {
+            "data-slot": "table-container",
+            className: tableContainerStyles,
+            children: /*#__PURE__*/ _jsx("table", {
+                "data-slot": "table",
+                "data-zebra": zebra,
+                className: cn(tableStyles, className),
+                ...props
+            })
         })
     });
 }
 function TableHeader({ className, ...props }) {
+    const stickyHeader = React.useContext(TableStickyContext);
     return /*#__PURE__*/ _jsx("thead", {
         "data-slot": "table-header",
-        className: cn("[&_tr]:border-b", className),
+        className: cn(tableHeaderStyles, stickyHeader && tableHeaderStickyStyles, className),
         ...props
     });
 }
 function TableBody({ className, ...props }) {
     return /*#__PURE__*/ _jsx("tbody", {
         "data-slot": "table-body",
-        className: cn("[&_tr:last-child]:border-0", className),
+        className: cn(tableBodyStyles, className),
         ...props
     });
 }
 function TableFooter({ className, ...props }) {
     return /*#__PURE__*/ _jsx("tfoot", {
         "data-slot": "table-footer",
-        className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
+        className: cn(tableFooterStyles, className),
         ...props
     });
 }
-function TableRow({ className, ...props }) {
+function TableRow({ className, zebra = false, index = 0, selected = false, ...props }) {
+    const isOdd = index % 2 === 1;
     return /*#__PURE__*/ _jsx("tr", {
         "data-slot": "table-row",
-        className: cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className),
+        className: cn(tableRowStyles, !zebra && "border-b", !zebra && "border-border-secondary", zebra && isOdd && "bg-bg-secondary", selected && "bg-bg-hover", className),
         ...props
     });
 }
-function TableHead({ className, ...props }) {
+function TableHead({ className, sortable = false, sorted = false, children, ...props }) {
+    const SortIcon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon;
     return /*#__PURE__*/ _jsx("th", {
         "data-slot": "table-head",
-        className: cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
-        ...props
+        className: cn(tableHeadStyles, sortable && "cursor-pointer select-none", className),
+        ...props,
+        children: sortable ? /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center gap-1",
+            children: [
+                children,
+                /*#__PURE__*/ _jsx(SortIcon, {
+                    className: cn(tableSortIconStyles, sorted ? "opacity-100" : "opacity-0 group-hover/head:opacity-30")
+                })
+            ]
+        }) : children
     });
 }
-function TableCell({ className, ...props }) {
+function TableCell({ className, type = "text", ...props }) {
     return /*#__PURE__*/ _jsx("td", {
         "data-slot": "table-cell",
-        className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+        "data-type": type,
+        className: cn(tableCellStyles, type === "link" && tableCellLinkStyles, className),
         ...props
     });
 }
 function TableCaption({ className, ...props }) {
     return /*#__PURE__*/ _jsx("caption", {
         "data-slot": "table-caption",
-        className: cn("text-muted-foreground mt-4 text-sm", className),
+        className: cn(tableCaptionStyles, className),
         ...props
     });
 }

package/dist/src/shadcn/components/ui/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/table.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"table-container\"\n\t\t\tclassName=\"relative w-full overflow-x-auto\"\n\t\t>\n\t\t\t<table\n\t\t\t\tdata-slot=\"table\"\n\t\t\t\tclassName={cn(\"w-full caption-bottom text-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n\treturn (\n\t\t<thead\n\t\t\tdata-slot=\"table-header\"\n\t\t\tclassName={cn(\"[&_tr]:border-b\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n\treturn (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cn(\"[&_tr:last-child]:border-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n\treturn (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n\treturn (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tclassName={cn(\n\t\t\t\t\"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n\treturn (\n\t\t<th\n\t\t\tdata-slot=\"table-head\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n\treturn (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tclassName={cn(\n\t\t\t\t\"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"caption\">) {\n\treturn (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tclassName={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCaption,\n};\n"],"names":["cn","Table","className","props","div","data-slot","table","TableHeader","thead","TableBody","tbody","TableFooter","tfoot","TableRow","tr","TableHead","th","TableCell","td","TableCaption","caption"],"mappings":";AAEA,SAASA,EAAE,QAAQ,qBAAoB;AAEvC,SAASC,MAAM,EAAEC,SAAS,EAAE,GAAGC,OAAsC;IACpE,qBACC,KAACC;QACAC,aAAU;QACVH,WAAU;kBAEV,cAAA,KAACI;YACAD,aAAU;YACVH,WAAWF,GAAG,iCAAiCE;YAC9C,GAAGC,KAAK;;;AAIb;AAEA,SAASI,YAAY,EAAEL,SAAS,EAAE,GAAGC,OAAsC;IAC1E,qBACC,KAACK;QACAH,aAAU;QACVH,WAAWF,GAAG,mBAAmBE;QAChC,GAAGC,KAAK;;AAGZ;AAEA,SAASM,UAAU,EAAEP,SAAS,EAAE,GAAGC,OAAsC;IACxE,qBACC,KAACO;QACAL,aAAU;QACVH,WAAWF,GAAG,8BAA8BE;QAC3C,GAAGC,KAAK;;AAGZ;AAEA,SAASQ,YAAY,EAAET,SAAS,EAAE,GAAGC,OAAsC;IAC1E,qBACC,KAACS;QACAP,aAAU;QACVH,WAAWF,GACV,2DACAE;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASU,SAAS,EAAEX,SAAS,EAAE,GAAGC,OAAmC;IACpE,qBACC,KAACW;QACAT,aAAU;QACVH,WAAWF,GACV,+EACAE;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASY,UAAU,EAAEb,SAAS,EAAE,GAAGC,OAAmC;IACrE,qBACC,KAACa;QACAX,aAAU;QACVH,WAAWF,GACV,sJACAE;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASc,UAAU,EAAEf,SAAS,EAAE,GAAGC,OAAmC;IACrE,qBACC,KAACe;QACAb,aAAU;QACVH,WAAWF,GACV,0GACAE;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASgB,aAAa,EACrBjB,SAAS,EACT,GAAGC,OAC8B;IACjC,qBACC,KAACiB;QACAf,aAAU;QACVH,WAAWF,GAAG,sCAAsCE;QACnD,GAAGC,KAAK;;AAGZ;AAEA,SACCF,KAAK,EACLM,WAAW,EACXE,SAAS,EACTE,WAAW,EACXI,SAAS,EACTF,QAAQ,EACRI,SAAS,EACTE,YAAY,GACX"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Table container\nconst tableContainerStyles = cn(\n\t\"relative\",\n\t\"h-full\",\n\t\"w-full\",\n\t\"overflow-auto\",\n);\n\n// Table base\nconst tableStyles = cn(\n\t\"w-full\",\n\t\"caption-bottom\",\n\t\"text-sm\",\n\t\"border-collapse\",\n\t\"border-spacing-0\",\n);\n\n// Table header\nconst tableHeaderStyles = cn(\n\t\"bg-bg-secondary\",\n\t\"[&_tr]:border-b\",\n\t\"[&_tr]:border-border-secondary\",\n\t\"[&_tr]:h-8\",\n);\n\n// Table header sticky variant\nconst tableHeaderStickyStyles = cn(\"sticky\", \"top-0\", \"z-10\");\n\n// Table body\nconst tableBodyStyles = cn(\n\t\"[&_tr:last-child]:border-0\",\n\t\"[&_tr]:hover:bg-bg-hover\",\n);\n\n// Table footer\nconst tableFooterStyles = cn(\n\t\"bg-bg-secondary\",\n\t\"border-t\",\n\t\"border-border-secondary\",\n\t\"font-medium\",\n\t\"[&>tr]:last:border-b-0\",\n);\n\n// Table row\nconst tableRowStyles = cn(\"h-7\", \"transition-colors\", \"duration-150\");\n\n// Table head cell\nconst tableHeadStyles = cn(\n\t\"group/head\",\n\t\"text-text-secondary\",\n\t\"h-8\",\n\t\"px-4\",\n\t\"py-2\",\n\t\"text-left\",\n\t\"align-middle\",\n\t\"typo-body-xs\",\n\t\"whitespace-nowrap\",\n\t\"transition-colors\",\n\t\"duration-150\",\n\t\"hover:bg-bg-tertiary\",\n\t\"[&:has([role=checkbox])]:pr-0\",\n);\n\n// Table head sort icon\nconst tableSortIconStyles = cn(\n\t\"size-3.5\",\n\t\"shrink-0\",\n\t\"transition-opacity\",\n\t\"duration-150\",\n);\n\n// Table cell\nconst tableCellStyles = cn(\n\t\"px-4\",\n\t\"py-1\",\n\t\"align-middle\",\n\t\"whitespace-nowrap\",\n\t\"text-sm\",\n\t\"text-grey-700\",\n\t\"[&:has([role=checkbox])]:pr-0\",\n);\n\n// Table cell link variant\nconst tableCellLinkStyles = cn(\n\t\"text-text-link\",\n\t\"cursor-pointer\",\n\t\"hover:underline\",\n);\n\n// Table caption\nconst tableCaptionStyles = cn(\n\t\"text-text-secondary\",\n\t\"mt-4\",\n\t\"text-xs\",\n\t\"text-left\",\n);\n\n// Context for sticky header\nconst TableStickyContext = React.createContext(false);\n\ntype TableProps = React.ComponentProps<\"table\"> & {\n\tzebra?: boolean | undefined;\n\tstickyHeader?: boolean | undefined;\n};\n\nfunction Table({\n\tclassName,\n\tzebra = false,\n\tstickyHeader = false,\n\t...props\n}: TableProps) {\n\treturn (\n\t\t<TableStickyContext.Provider value={stickyHeader}>\n\t\t\t<div data-slot=\"table-container\" className={tableContainerStyles}>\n\t\t\t\t<table\n\t\t\t\t\tdata-slot=\"table\"\n\t\t\t\t\tdata-zebra={zebra}\n\t\t\t\t\tclassName={cn(tableStyles, className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</TableStickyContext.Provider>\n\t);\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n\tconst stickyHeader = React.useContext(TableStickyContext);\n\n\treturn (\n\t\t<thead\n\t\t\tdata-slot=\"table-header\"\n\t\t\tclassName={cn(\n\t\t\t\ttableHeaderStyles,\n\t\t\t\tstickyHeader && tableHeaderStickyStyles,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n\treturn (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cn(tableBodyStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n\treturn (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-footer\"\n\t\t\tclassName={cn(tableFooterStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\ntype TableRowProps = React.ComponentProps<\"tr\"> & {\n\tzebra?: boolean | undefined;\n\tindex?: number | undefined;\n\tselected?: boolean | undefined;\n};\n\nfunction TableRow({\n\tclassName,\n\tzebra = false,\n\tindex = 0,\n\tselected = false,\n\t...props\n}: TableRowProps) {\n\tconst isOdd = index % 2 === 1;\n\n\treturn (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tclassName={cn(\n\t\t\t\ttableRowStyles,\n\t\t\t\t!zebra && \"border-b\",\n\t\t\t\t!zebra && \"border-border-secondary\",\n\t\t\t\tzebra && isOdd && \"bg-bg-secondary\",\n\t\t\t\tselected && \"bg-bg-hover\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\ntype TableHeadProps = React.ComponentProps<\"th\"> & {\n\tsortable?: boolean | undefined;\n\tsorted?: \"asc\" | \"desc\" | false | undefined;\n};\n\nfunction TableHead({\n\tclassName,\n\tsortable = false,\n\tsorted = false,\n\tchildren,\n\t...props\n}: TableHeadProps) {\n\tconst SortIcon =\n\t\tsorted === \"asc\"\n\t\t\t? ArrowUpIcon\n\t\t\t: sorted === \"desc\"\n\t\t\t\t? ArrowDownIcon\n\t\t\t\t: ArrowUpDownIcon;\n\n\treturn (\n\t\t<th\n\t\t\tdata-slot=\"table-head\"\n\t\t\tclassName={cn(\n\t\t\t\ttableHeadStyles,\n\t\t\t\tsortable && \"cursor-pointer select-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{sortable ? (\n\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t{children}\n\t\t\t\t\t<SortIcon\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\ttableSortIconStyles,\n\t\t\t\t\t\t\tsorted ? \"opacity-100\" : \"opacity-0 group-hover/head:opacity-30\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</th>\n\t);\n}\n\ntype CellType = \"text\" | \"link\";\n\ntype TableCellProps = React.ComponentProps<\"td\"> & {\n\ttype?: CellType | undefined;\n};\n\nfunction TableCell({ className, type = \"text\", ...props }: TableCellProps) {\n\treturn (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tdata-type={type}\n\t\t\tclassName={cn(\n\t\t\t\ttableCellStyles,\n\t\t\t\ttype === \"link\" && tableCellLinkStyles,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"caption\">) {\n\treturn (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tclassName={cn(tableCaptionStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCaption,\n\ttype TableProps,\n\ttype TableRowProps,\n\ttype TableHeadProps,\n\ttype TableCellProps,\n\ttype CellType,\n};\n"],"names":["ArrowDownIcon","ArrowUpDownIcon","ArrowUpIcon","React","cn","tableContainerStyles","tableStyles","tableHeaderStyles","tableHeaderStickyStyles","tableBodyStyles","tableFooterStyles","tableRowStyles","tableHeadStyles","tableSortIconStyles","tableCellStyles","tableCellLinkStyles","tableCaptionStyles","TableStickyContext","createContext","Table","className","zebra","stickyHeader","props","Provider","value","div","data-slot","table","data-zebra","TableHeader","useContext","thead","TableBody","tbody","TableFooter","tfoot","TableRow","index","selected","isOdd","tr","TableHead","sortable","sorted","children","SortIcon","th","TableCell","type","td","data-type","TableCaption","caption"],"mappings":"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"}

package/dist/src/shadcn/components/ui/table.stories.js

@@ -1,112 +1,232 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
-const invoices = [
-    {
-        invoice: "INV001",
-        paymentStatus: "Paid",
-        totalAmount: "$250.00",
-        paymentMethod: "Credit Card"
-    },
-    {
-        invoice: "INV002",
-        paymentStatus: "Pending",
-        totalAmount: "$150.00",
-        paymentMethod: "PayPal"
-    },
-    {
-        invoice: "INV003",
-        paymentStatus: "Unpaid",
-        totalAmount: "$350.00",
-        paymentMethod: "Bank Transfer"
-    },
-    {
-        invoice: "INV004",
-        paymentStatus: "Paid",
-        totalAmount: "$450.00",
-        paymentMethod: "Credit Card"
-    },
-    {
-        invoice: "INV005",
-        paymentStatus: "Paid",
-        totalAmount: "$550.00",
-        paymentMethod: "PayPal"
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import { createColumnHelper, flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { useState } from "react";
+import { Checkbox } from "./checkbox.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+const statuses = [
+    "Paid",
+    "Pending",
+    "Unpaid"
+];
+const methods = [
+    "Credit Card",
+    "PayPal",
+    "Bank Transfer"
+];
+const invoiceData = Array.from({
+    length: 50
+}, (_, i)=>({
+        invoice: `INV${String(i + 1).padStart(3, "0")}`,
+        paymentStatus: statuses[i % statuses.length],
+        totalAmount: 100 + i * 73 % 900,
+        paymentMethod: methods[i % methods.length]
+    }));
+const columnHelper = createColumnHelper();
+const columns = [
+    columnHelper.accessor("invoice", {
+        header: "Invoice",
+        cell: (info)=>String(info.getValue()),
+        enableSorting: true
+    }),
+    columnHelper.accessor("paymentStatus", {
+        header: "Status",
+        cell: (info)=>String(info.getValue()),
+        enableSorting: true
+    }),
+    columnHelper.accessor("paymentMethod", {
+        header: "Method",
+        cell: (info)=>String(info.getValue()),
+        enableSorting: true
+    }),
+    columnHelper.accessor("totalAmount", {
+        header: "Amount",
+        cell: (info)=>{
+            const value = info.getValue();
+            return `$${value.toFixed(2)}`;
+        },
+        enableSorting: true
+    })
+];
+const selectColumn = {
+    id: "select",
+    header: ({ table })=>/*#__PURE__*/ _jsx(Checkbox, {
+            size: "small",
+            checked: table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false,
+            onCheckedChange: (value)=>table.toggleAllPageRowsSelected(!!value),
+            "aria-label": "Select all"
+        }),
+    cell: ({ row })=>/*#__PURE__*/ _jsx(Checkbox, {
+            size: "small",
+            checked: row.getIsSelected(),
+            onCheckedChange: (value)=>row.toggleSelected(!!value),
+            "aria-label": "Select row"
+        }),
+    enableSorting: false
+};
+function TableWithSorting({ zebra = false, selectable = false, stickyHeader = false } = {}) {
+    const [sorting, setSorting] = useState([]);
+    const [rowSelection, setRowSelection] = useState({});
+    const tableColumns = selectable ? [
+        selectColumn,
+        ...columns
+    ] : columns;
+    const table = useReactTable({
+        data: invoiceData,
+        columns: tableColumns,
+        state: {
+            sorting,
+            rowSelection
+        },
+        onSortingChange: setSorting,
+        onRowSelectionChange: setRowSelection,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel()
+    });
+    return /*#__PURE__*/ _jsxs(Table, {
+        zebra: zebra,
+        stickyHeader: stickyHeader,
+        children: [
+            /*#__PURE__*/ _jsx(TableHeader, {
+                children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ _jsx(TableRow, {
+                        children: headerGroup.headers.map((header)=>/*#__PURE__*/ _jsx(TableHead, {
+                                onClick: header.column.getToggleSortingHandler(),
+                                sortable: header.column.getCanSort(),
+                                sorted: header.column.getIsSorted() || false,
+                                children: flexRender(header.column.columnDef.header, header.getContext())
+                            }, header.id))
+                    }, headerGroup.id))
+            }),
+            /*#__PURE__*/ _jsx(TableBody, {
+                children: table.getRowModel().rows.map((row, index)=>/*#__PURE__*/ _jsx(TableRow, {
+                        zebra: zebra,
+                        index: index,
+                        selected: row.getIsSelected(),
+                        children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ _jsx(TableCell, {
+                                type: cell.column.id === "invoice" ? "link" : "text",
+                                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                            }, cell.id))
+                    }, row.id))
+            })
+        ]
+    });
+}
+const meta = {
+    title: "Component/Table",
+    component: TableWithSorting,
+    parameters: {
+        docs: {
+            page: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Title, {}),
+                        /*#__PURE__*/ _jsx(Primary, {}),
+                        /*#__PURE__*/ _jsx(Controls, {})
+                    ]
+                })
+        }
     },
-    {
-        invoice: "INV006",
-        paymentStatus: "Pending",
-        totalAmount: "$200.00",
-        paymentMethod: "Bank Transfer"
+    argTypes: {
+        zebra: {
+            control: "boolean",
+            description: "Enable alternating row background colors"
+        },
+        selectable: {
+            control: "boolean",
+            description: "Enable row selection with checkboxes"
+        },
+        stickyHeader: {
+            control: "boolean",
+            description: "Keep header fixed while scrolling"
+        }
     },
-    {
-        invoice: "INV007",
-        paymentStatus: "Unpaid",
-        totalAmount: "$300.00",
-        paymentMethod: "Credit Card"
+    args: {
+        zebra: false,
+        selectable: false,
+        stickyHeader: false
     }
-];
-const meta = {
-    title: "Component/Table"
 };
 export default meta;
+export const Default = {
+    tags: [
+        "!dev"
+    ],
+    render: ({ zebra = false, selectable = false, stickyHeader = false } = {})=>/*#__PURE__*/ _jsx("div", {
+            className: "h-80",
+            children: /*#__PURE__*/ _jsx(TableWithSorting, {
+                zebra: zebra,
+                selectable: selectable,
+                stickyHeader: stickyHeader
+            })
+        })
+};
 export const Demo = {
-    render: ()=>/*#__PURE__*/ _jsxs(Table, {
+    tags: [
+        "!autodocs"
+    ],
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "space-y-8 p-6",
             children: [
-                /*#__PURE__*/ _jsx(TableCaption, {
-                    children: "A list of your recent invoices."
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "text-lg font-semibold mb-4 text-text-primary",
+                            children: "Without Zebra Striping"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "h-80",
+                            children: /*#__PURE__*/ _jsx(TableWithSorting, {
+                                zebra: false,
+                                stickyHeader: true
+                            })
+                        })
+                    ]
                 }),
-                /*#__PURE__*/ _jsx(TableHeader, {
-                    children: /*#__PURE__*/ _jsxs(TableRow, {
-                        children: [
-                            /*#__PURE__*/ _jsx(TableHead, {
-                                className: "w-[100px]",
-                                children: "Invoice"
-                            }),
-                            /*#__PURE__*/ _jsx(TableHead, {
-                                children: "Status"
-                            }),
-                            /*#__PURE__*/ _jsx(TableHead, {
-                                children: "Method"
-                            }),
-                            /*#__PURE__*/ _jsx(TableHead, {
-                                className: "text-right",
-                                children: "Amount"
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "text-lg font-semibold mb-4 text-text-primary",
+                            children: "With Zebra Striping"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "h-80",
+                            children: /*#__PURE__*/ _jsx(TableWithSorting, {
+                                zebra: true,
+                                stickyHeader: true
                             })
-                        ]
-                    })
+                        })
+                    ]
                 }),
-                /*#__PURE__*/ _jsx(TableBody, {
-                    children: invoices.map((invoice)=>/*#__PURE__*/ _jsxs(TableRow, {
-                            children: [
-                                /*#__PURE__*/ _jsx(TableCell, {
-                                    className: "font-medium",
-                                    children: invoice.invoice
-                                }),
-                                /*#__PURE__*/ _jsx(TableCell, {
-                                    children: invoice.paymentStatus
-                                }),
-                                /*#__PURE__*/ _jsx(TableCell, {
-                                    children: invoice.paymentMethod
-                                }),
-                                /*#__PURE__*/ _jsx(TableCell, {
-                                    className: "text-right",
-                                    children: invoice.totalAmount
-                                })
-                            ]
-                        }, invoice.invoice))
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "text-lg font-semibold mb-4 text-text-primary",
+                            children: "Selectable"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "h-80",
+                            children: /*#__PURE__*/ _jsx(TableWithSorting, {
+                                selectable: true,
+                                stickyHeader: true
+                            })
+                        })
+                    ]
                 }),
-                /*#__PURE__*/ _jsx(TableFooter, {
-                    children: /*#__PURE__*/ _jsxs(TableRow, {
-                        children: [
-                            /*#__PURE__*/ _jsx(TableCell, {
-                                colSpan: 3,
-                                children: "Total"
-                            }),
-                            /*#__PURE__*/ _jsx(TableCell, {
-                                className: "text-right",
-                                children: "$2,500.00"
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "text-lg font-semibold mb-4 text-text-primary",
+                            children: "Selectable + Zebra"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "h-80",
+                            children: /*#__PURE__*/ _jsx(TableWithSorting, {
+                                selectable: true,
+                                zebra: true,
+                                stickyHeader: true
                             })
-                        ]
-                    })
+                        })
+                    ]
                 })
             ]
         })

package/dist/src/shadcn/components/ui/table.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/table.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFooter,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"#shadcn/components/ui/table\";\n\nconst invoices = [\n\t{\n\t\tinvoice: \"INV001\",\n\t\tpaymentStatus: \"Paid\",\n\t\ttotalAmount: \"$250.00\",\n\t\tpaymentMethod: \"Credit Card\",\n\t},\n\t{\n\t\tinvoice: \"INV002\",\n\t\tpaymentStatus: \"Pending\",\n\t\ttotalAmount: \"$150.00\",\n\t\tpaymentMethod: \"PayPal\",\n\t},\n\t{\n\t\tinvoice: \"INV003\",\n\t\tpaymentStatus: \"Unpaid\",\n\t\ttotalAmount: \"$350.00\",\n\t\tpaymentMethod: \"Bank Transfer\",\n\t},\n\t{\n\t\tinvoice: \"INV004\",\n\t\tpaymentStatus: \"Paid\",\n\t\ttotalAmount: \"$450.00\",\n\t\tpaymentMethod: \"Credit Card\",\n\t},\n\t{\n\t\tinvoice: \"INV005\",\n\t\tpaymentStatus: \"Paid\",\n\t\ttotalAmount: \"$550.00\",\n\t\tpaymentMethod: \"PayPal\",\n\t},\n\t{\n\t\tinvoice: \"INV006\",\n\t\tpaymentStatus: \"Pending\",\n\t\ttotalAmount: \"$200.00\",\n\t\tpaymentMethod: \"Bank Transfer\",\n\t},\n\t{\n\t\tinvoice: \"INV007\",\n\t\tpaymentStatus: \"Unpaid\",\n\t\ttotalAmount: \"$300.00\",\n\t\tpaymentMethod: \"Credit Card\",\n\t},\n];\n\nconst meta = {\n\ttitle: \"Component/Table\",\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: () => (\n\t\t<Table>\n\t\t\t<TableCaption>A list of your recent invoices.</TableCaption>\n\t\t\t<TableHeader>\n\t\t\t\t<TableRow>\n\t\t\t\t\t<TableHead className=\"w-[100px]\">Invoice</TableHead>\n\t\t\t\t\t<TableHead>Status</TableHead>\n\t\t\t\t\t<TableHead>Method</TableHead>\n\t\t\t\t\t<TableHead className=\"text-right\">Amount</TableHead>\n\t\t\t\t</TableRow>\n\t\t\t</TableHeader>\n\t\t\t<TableBody>\n\t\t\t\t{invoices.map((invoice) => (\n\t\t\t\t\t<TableRow key={invoice.invoice}>\n\t\t\t\t\t\t<TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n\t\t\t\t\t\t<TableCell>{invoice.paymentStatus}</TableCell>\n\t\t\t\t\t\t<TableCell>{invoice.paymentMethod}</TableCell>\n\t\t\t\t\t\t<TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t\t<TableFooter>\n\t\t\t\t<TableRow>\n\t\t\t\t\t<TableCell colSpan={3}>Total</TableCell>\n\t\t\t\t\t<TableCell className=\"text-right\">$2,500.00</TableCell>\n\t\t\t\t</TableRow>\n\t\t\t</TableFooter>\n\t\t</Table>\n\t),\n} satisfies Story;\n"],"names":["Table","TableBody","TableCaption","TableCell","TableFooter","TableHead","TableHeader","TableRow","invoices","invoice","paymentStatus","totalAmount","paymentMethod","meta","title","Demo","render","className","map","colSpan"],"mappings":";AACA,SACCA,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,SAAS,EACTC,WAAW,EACXC,SAAS,EACTC,WAAW,EACXC,QAAQ,QACF,aAA8B;AAErC,MAAMC,WAAW;IAChB;QACCC,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;IACA;QACCH,SAAS;QACTC,eAAe;QACfC,aAAa;QACbC,eAAe;IAChB;CACA;AAED,MAAMC,OAAO;IACZC,OAAO;AACR;AACA,eAAeD,KAAK;AAIpB,OAAO,MAAME,OAAO;IACnBC,QAAQ,kBACP,MAAChB;;8BACA,KAACE;8BAAa;;8BACd,KAACI;8BACA,cAAA,MAACC;;0CACA,KAACF;gCAAUY,WAAU;0CAAY;;0CACjC,KAACZ;0CAAU;;0CACX,KAACA;0CAAU;;0CACX,KAACA;gCAAUY,WAAU;0CAAa;;;;;8BAGpC,KAAChB;8BACCO,SAASU,GAAG,CAAC,CAACT,wBACd,MAACF;;8CACA,KAACJ;oCAAUc,WAAU;8CAAeR,QAAQA,OAAO;;8CACnD,KAACN;8CAAWM,QAAQC,aAAa;;8CACjC,KAACP;8CAAWM,QAAQG,aAAa;;8CACjC,KAACT;oCAAUc,WAAU;8CAAcR,QAAQE,WAAW;;;2BAJxCF,QAAQA,OAAO;;8BAQhC,KAACL;8BACA,cAAA,MAACG;;0CACA,KAACJ;gCAAUgB,SAAS;0CAAG;;0CACvB,KAAChB;gCAAUc,WAAU;0CAAa;;;;;;;AAKvC,EAAkB"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/table.stories.tsx"],"sourcesContent":["\"use client\";\n\nimport { Controls, Primary, Title } from \"@storybook/addon-docs/blocks\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport {\n\ttype ColumnDef,\n\tcreateColumnHelper,\n\tflexRender,\n\tgetCoreRowModel,\n\tgetSortedRowModel,\n\ttype RowSelectionState,\n\ttype SortingState,\n\tuseReactTable,\n} from \"@tanstack/react-table\";\nimport { useState } from \"react\";\n\nimport { Checkbox } from \"#shadcn/components/ui/checkbox\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"#shadcn/components/ui/table\";\n\ntype Invoice = {\n\tinvoice: string;\n\tpaymentStatus: \"Paid\" | \"Pending\" | \"Unpaid\";\n\ttotalAmount: number;\n\tpaymentMethod: string;\n};\n\nconst statuses: Invoice[\"paymentStatus\"][] = [\"Paid\", \"Pending\", \"Unpaid\"];\nconst methods: Invoice[\"paymentMethod\"][] = [\n\t\"Credit Card\",\n\t\"PayPal\",\n\t\"Bank Transfer\",\n];\n\nconst invoiceData: Invoice[] = Array.from({ length: 50 }, (_, i) => ({\n\tinvoice: `INV${String(i + 1).padStart(3, \"0\")}`,\n\tpaymentStatus: statuses[i % statuses.length] as string,\n\ttotalAmount: 100 + ((i * 73) % 900),\n\tpaymentMethod: methods[i % methods.length] as string,\n}));\n\nconst columnHelper = createColumnHelper<Invoice>();\n\nconst columns = [\n\tcolumnHelper.accessor(\"invoice\", {\n\t\theader: \"Invoice\",\n\t\tcell: (info) => String(info.getValue()),\n\t\tenableSorting: true,\n\t}),\n\tcolumnHelper.accessor(\"paymentStatus\", {\n\t\theader: \"Status\",\n\t\tcell: (info) => String(info.getValue()),\n\t\tenableSorting: true,\n\t}),\n\tcolumnHelper.accessor(\"paymentMethod\", {\n\t\theader: \"Method\",\n\t\tcell: (info) => String(info.getValue()),\n\t\tenableSorting: true,\n\t}),\n\tcolumnHelper.accessor(\"totalAmount\", {\n\t\theader: \"Amount\",\n\t\tcell: (info) => {\n\t\t\tconst value = info.getValue();\n\t\t\treturn `$${value.toFixed(2)}`;\n\t\t},\n\t\tenableSorting: true,\n\t}),\n];\n\nconst selectColumn: ColumnDef<Invoice, unknown> = {\n\tid: \"select\",\n\theader: ({ table }) => (\n\t\t<Checkbox\n\t\t\tsize=\"small\"\n\t\t\tchecked={\n\t\t\t\ttable.getIsAllPageRowsSelected()\n\t\t\t\t\t? true\n\t\t\t\t\t: table.getIsSomePageRowsSelected()\n\t\t\t\t\t\t? \"indeterminate\"\n\t\t\t\t\t\t: false\n\t\t\t}\n\t\t\tonCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n\t\t\taria-label=\"Select all\"\n\t\t/>\n\t),\n\tcell: ({ row }) => (\n\t\t<Checkbox\n\t\t\tsize=\"small\"\n\t\t\tchecked={row.getIsSelected()}\n\t\t\tonCheckedChange={(value) => row.toggleSelected(!!value)}\n\t\t\taria-label=\"Select row\"\n\t\t/>\n\t),\n\tenableSorting: false,\n};\n\nfunction TableWithSorting({\n\tzebra = false,\n\tselectable = false,\n\tstickyHeader = false,\n}: {\n\tzebra?: boolean;\n\tselectable?: boolean;\n\tstickyHeader?: boolean;\n} = {}) {\n\tconst [sorting, setSorting] = useState<SortingState>([]);\n\tconst [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n\tconst tableColumns = selectable ? [selectColumn, ...columns] : columns;\n\n\tconst table = useReactTable({\n\t\tdata: invoiceData,\n\t\tcolumns: tableColumns,\n\t\tstate: {\n\t\t\tsorting,\n\t\t\trowSelection,\n\t\t},\n\t\tonSortingChange: setSorting,\n\t\tonRowSelectionChange: setRowSelection,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\tgetSortedRowModel: getSortedRowModel(),\n\t});\n\n\treturn (\n\t\t<Table zebra={zebra} stickyHeader={stickyHeader}>\n\t\t\t<TableHeader>\n\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\tsortable={header.column.getCanSort()}\n\t\t\t\t\t\t\t\tsorted={header.column.getIsSorted() || false}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableHeader>\n\t\t\t<TableBody>\n\t\t\t\t{table.getRowModel().rows.map((row, index) => (\n\t\t\t\t\t<TableRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\tzebra={zebra}\n\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\tselected={row.getIsSelected()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\ttype={cell.column.id === \"invoice\" ? \"link\" : \"text\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t</Table>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Component/Table\",\n\tcomponent: TableWithSorting,\n\tparameters: {\n\t\tdocs: {\n\t\t\tpage: () => (\n\t\t\t\t<>\n\t\t\t\t\t<Title />\n\t\t\t\t\t<Primary />\n\t\t\t\t\t<Controls />\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t},\n\targTypes: {\n\t\tzebra: {\n\t\t\tcontrol: \"boolean\",\n\t\t\tdescription: \"Enable alternating row background colors\",\n\t\t},\n\t\tselectable: {\n\t\t\tcontrol: \"boolean\",\n\t\t\tdescription: \"Enable row selection with checkboxes\",\n\t\t},\n\t\tstickyHeader: {\n\t\t\tcontrol: \"boolean\",\n\t\t\tdescription: \"Keep header fixed while scrolling\",\n\t\t},\n\t},\n\targs: {\n\t\tzebra: false,\n\t\tselectable: false,\n\t\tstickyHeader: false,\n\t},\n} satisfies Meta<typeof TableWithSorting>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\ttags: [\"!dev\"],\n\trender: ({\n\t\tzebra = false,\n\t\tselectable = false,\n\t\tstickyHeader = false,\n\t}: {\n\t\tzebra?: boolean;\n\t\tselectable?: boolean;\n\t\tstickyHeader?: boolean;\n\t} = {}) => (\n\t\t<div className=\"h-80\">\n\t\t\t<TableWithSorting\n\t\t\t\tzebra={zebra}\n\t\t\t\tselectable={selectable}\n\t\t\t\tstickyHeader={stickyHeader}\n\t\t\t/>\n\t\t</div>\n\t),\n} satisfies Story;\n\nexport const Demo = {\n\ttags: [\"!autodocs\"],\n\trender: () => (\n\t\t<div className=\"space-y-8 p-6\">\n\t\t\t<div>\n\t\t\t\t<h3 className=\"text-lg font-semibold mb-4 text-text-primary\">\n\t\t\t\t\tWithout Zebra Striping\n\t\t\t\t</h3>\n\t\t\t\t<div className=\"h-80\">\n\t\t\t\t\t<TableWithSorting zebra={false} stickyHeader={true} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<h3 className=\"text-lg font-semibold mb-4 text-text-primary\">\n\t\t\t\t\tWith Zebra Striping\n\t\t\t\t</h3>\n\t\t\t\t<div className=\"h-80\">\n\t\t\t\t\t<TableWithSorting zebra={true} stickyHeader={true} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<h3 className=\"text-lg font-semibold mb-4 text-text-primary\">\n\t\t\t\t\tSelectable\n\t\t\t\t</h3>\n\t\t\t\t<div className=\"h-80\">\n\t\t\t\t\t<TableWithSorting selectable={true} stickyHeader={true} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<h3 className=\"text-lg font-semibold mb-4 text-text-primary\">\n\t\t\t\t\tSelectable + Zebra\n\t\t\t\t</h3>\n\t\t\t\t<div className=\"h-80\">\n\t\t\t\t\t<TableWithSorting\n\t\t\t\t\t\tselectable={true}\n\t\t\t\t\t\tzebra={true}\n\t\t\t\t\t\tstickyHeader={true}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["Controls","Primary","Title","createColumnHelper","flexRender","getCoreRowModel","getSortedRowModel","useReactTable","useState","Checkbox","Table","TableBody","TableCell","TableHead","TableHeader","TableRow","statuses","methods","invoiceData","Array","from","length","_","i","invoice","String","padStart","paymentStatus","totalAmount","paymentMethod","columnHelper","columns","accessor","header","cell","info","getValue","enableSorting","value","toFixed","selectColumn","id","table","size","checked","getIsAllPageRowsSelected","getIsSomePageRowsSelected","onCheckedChange","toggleAllPageRowsSelected","aria-label","row","getIsSelected","toggleSelected","TableWithSorting","zebra","selectable","stickyHeader","sorting","setSorting","rowSelection","setRowSelection","tableColumns","data","state","onSortingChange","onRowSelectionChange","getHeaderGroups","map","headerGroup","headers","onClick","column","getToggleSortingHandler","sortable","getCanSort","sorted","getIsSorted","columnDef","getContext","getRowModel","rows","index","selected","getVisibleCells","type","meta","title","component","parameters","docs","page","argTypes","control","description","args","Default","tags","render","div","className","Demo","h3"],"mappings":"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"}

package/dist/src/shadcn/components/ui/tabs.d.ts

@@ -1,16 +1,41 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * as React from "react";
 import { Button } from "./button";
 declare const tabsVariants: (props?: ({
-    variant?: "browser" | null | undefined;
+    variant?: "secondary" | "browser" | "tertiary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Tabs({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.Root> & VariantProps<typeof tabsVariants>): import("react/jsx-runtime").JSX.Element;
+type TabsProps<T extends string> = Omit<React.ComponentProps<typeof TabsPrimitive.Root> & VariantProps<typeof tabsVariants>, "value" | "defaultValue" | "onValueChange"> & {
+    value?: T;
+    defaultValue?: T;
+    onValueChange?: (value: T) => void;
+};
+declare function Tabs<T extends string = string>({ className, variant, ...props }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function TabsAddButton(props: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
-declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+type EdgeScrollPosition = "touch" | "depart";
+type FlowType = "overflow" | "underflow";
+type TabsListProps = {
+    onLeftEdge?: (position: EdgeScrollPosition) => void;
+    onRightEdge?: (position: EdgeScrollPosition) => void;
+    onFlow?: (flow: FlowType) => void;
+    onResize?: (entries: ResizeObserverEntry[]) => void;
+    onTabChange?: (mutationRecords: MutationRecord[]) => void;
+} & React.ComponentProps<typeof TabsPrimitive.List>;
+declare function TabsList({ className, onLeftEdge, onRightEdge, onResize, onFlow, onTabChange, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsBrowserList({ className, children, onReorder, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & {
+    onReorder?: (fromIndex: number, toIndex: number) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TabsListDropdown({ tabs, handleTabSelect, handleCloseTab, }: {
+    tabs: {
+        id: string;
+        content: React.ReactNode;
+    }[];
+    handleTabSelect?: (tabId: string) => void;
+    handleCloseTab?: (tabId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
 declare function TabsTrigger({ className, onClose, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
     onClose?: (value: string) => void;
 }): import("react/jsx-runtime").JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsBrowserList };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/src/shadcn/components/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,YAAY;;8EAsBhB,CAAC;AAEH,iBAAS,IAAI,CAAC,EACb,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GACjD,YAAY,CAAC,OAAO,YAAY,CAAC,2CAQjC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAavE;AAED,iBAAS,QAAQ,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAQjD;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,2CAsCA;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAQpD;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"names":[],"mappings":"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"}