@rovula/ui 0.1.27 → 0.1.29

package/dist/components/Dropdown/Dropdown.js

@@ -26,7 +26,7 @@ export const menuItemBaseStyles = cn("relative flex gap-1 cursor-pointer select-
 // Dropdown
 // ---------------------------------------------------------------------------
 const Dropdown = forwardRef((_a, ref) => {
-    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal: _modal, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName, segmentedInput = true } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "modal", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName", "segmentedInput"]);
+    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal: _modal, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName, segmentedInput = true, keepOpenAfterSelect = false, portal = false } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "modal", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName", "segmentedInput", "keepOpenAfterSelect", "portal"]);
     const _id = id || `${label}-select`;
     const [selectedOption, setSelectedOption] = useState(null);
     const [query, setQuery] = useState("");
@@ -47,11 +47,11 @@ const Dropdown = forwardRef((_a, ref) => {
         setQuery("");
         if (option) {
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
-            // After selection Headless UI keeps focus on the input (via rAF refocus).
-            // Blur after that rAF so the next click triggers onFocus → immediate open.
-            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); }, 0);
+            if (!keepOpenAfterSelect) {
+                setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); }, 0);
+            }
         }
-    }, [onSelect]);
+    }, [onSelect, keepOpenAfterSelect]);
     const handleInputChange = useCallback((e) => {
         if (filterMode)
             setQuery(e.target.value);
@@ -83,7 +83,9 @@ const Dropdown = forwardRef((_a, ref) => {
                     "bg-[var(--dropdown-menu-hover-bg)] text-[var(--dropdown-menu-hover-text)]", optionItemClassName), children: ({ selected }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 size-4 flex items-center justify-center", children: (selected || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value) && (_jsx(Icon, { type: "heroicons", name: "check", className: "size-4 text-[var(--dropdown-menu-selected-text)]" })) }), option.label] })) }, option.value));
         });
     };
-    return (_jsx(Combobox, { value: selectedOption, onChange: handleSelect, immediate: true, by: "value", disabled: disabled, children: ({ open }) => (_jsxs("div", { className: cn("relative", fullwidth && "w-full"), children: [_jsx(ComboboxInput, Object.assign({ as: TextInput, ref: inputRef, hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: open }) }), label: label, placeholder: " ", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: segmentedInput ? customInputVariant({ size }) : undefined, displayValue: (opt) => { var _a; return (_a = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _a !== void 0 ? _a : ""; }, readOnly: !filterMode, onChange: handleInputChange }, props)), _jsx(ComboboxOptions, { className: cn("absolute top-full left-0 w-full -mt-3 z-[51]", "min-w-[154px] max-h-60 overflow-y-auto", "rounded-md bg-modal-dropdown-surface border border-bg-stroke3 text-text-g-contrast-high", optionContainerClassName), style: { boxShadow: "var(--dropdown-menu-shadow)" }, children: renderOptionList() })] })) }));
+    return (_jsx(Combobox, { value: selectedOption, onChange: handleSelect, immediate: true, by: "value", disabled: disabled, children: ({ open }) => (_jsxs("div", { className: cn("relative", fullwidth && "w-full"), children: [_jsx(ComboboxInput, Object.assign({ as: TextInput, ref: inputRef, hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: open }) }), label: label, autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: segmentedInput ? customInputVariant({ size }) : undefined, displayValue: (opt) => { var _a; return (_a = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _a !== void 0 ? _a : ""; }, readOnly: !filterMode, onChange: handleInputChange }, props)), _jsx(ComboboxOptions, Object.assign({}, (portal
+                    ? { portal: true, anchor: { to: "bottom start", gap: 4 } }
+                    : {}), { className: cn(!portal && "absolute top-full left-0 w-full -mt-3 z-[51]", portal && "z-[51] !max-h-60 w-[var(--input-width)]", "min-w-[154px] max-h-60 overflow-y-auto", "rounded-md bg-modal-dropdown-surface border border-bg-stroke3 text-text-g-contrast-high", optionContainerClassName), style: { boxShadow: "var(--dropdown-menu-shadow)" }, children: renderOptionList() }))] })) }));
 });
 Dropdown.displayName = "Dropdown";
 export default Dropdown;

package/dist/components/ScrollArea/ScrollArea.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "@/utils/cn";
 const sizeClass = {
-    m: "ui-scrollbar ui-scrollbar-m",
+    m: "ui-scrollbar", // default = M, no extra class needed
     s: "ui-scrollbar ui-scrollbar-s",
     xs: "ui-scrollbar ui-scrollbar-xs",
 };
@@ -44,7 +44,7 @@ const directionClass = {
  * ```
  */
 export const ScrollArea = React.forwardRef((_a, ref) => {
-    var { className, scrollbarSize = "s", direction = "vertical", children } = _a, props = __rest(_a, ["className", "scrollbarSize", "direction", "children"]);
+    var { className, scrollbarSize = "m", direction = "vertical", children } = _a, props = __rest(_a, ["className", "scrollbarSize", "direction", "children"]);
     return (_jsx("div", Object.assign({ ref: ref, className: cn(directionClass[direction], sizeClass[scrollbarSize], className) }, props, { children: children })));
 });
 ScrollArea.displayName = "ScrollArea";

package/dist/components/ScrollArea/ScrollArea.stories.js

@@ -7,7 +7,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-10 flex gap-8 flex-wrap bg-workspace-surface min-h-screen", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-10 flex gap-8 flex-wrap bg-page-bg-main min-h-screen", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -17,7 +17,7 @@ const ITEMS = Array.from({ length: 12 }, (_, i) => `Option Description ${i + 1}`
 // ---------------------------------------------------------------------------
 export const Sizes = {
     name: "Size Variants",
-    render: () => (_jsx("div", { className: "flex gap-10 items-start", children: ["m", "s", "xs"].map((size) => (_jsxs("div", { children: [_jsxs("p", { className: "typography-small4 text-text-g-contrast-medium mb-2 uppercase", children: ["Size ", size] }), _jsx(ScrollArea, { scrollbarSize: size, className: "max-h-[270px] w-[200px] rounded-lg bg-modal-surface", children: ITEMS.map((label) => (_jsx("div", { className: "px-4 py-3 typography-subtitle4 text-text-g-contrast-high", children: label }, label))) })] }, size))) })),
+    render: () => (_jsx("div", { className: "flex gap-10 items-start", children: ["m", "s", "xs"].map((size) => (_jsxs("div", { children: [_jsxs("p", { className: "typography-small4 text-text-g-contrast-medium mb-2 uppercase", children: ["Size ", size, size === "m" ? " (default)" : ""] }), _jsx(ScrollArea, { scrollbarSize: size, className: "max-h-[270px] w-[200px] rounded-lg bg-modal-surface", children: ITEMS.map((label) => (_jsx("div", { className: "px-4 py-3 typography-subtitle4 text-text-g-contrast-high", children: label }, label))) })] }, size))) })),
 };
 // ---------------------------------------------------------------------------
 // Vertical scroll  (Figma: Can Scroll)
@@ -54,3 +54,69 @@ export const WithDropdownMenu = {
         return (_jsxs("div", { className: "flex gap-8 items-start flex-wrap", children: [_jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Can Scroll" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsx(DropdownMenuContent, { children: _jsx(ScrollArea, { className: "max-h-[270px]", children: ITEMS.map((label) => (_jsx(DropdownMenuItem, { children: label }, label))) }) })] })] }), _jsxs("div", { children: [_jsx("p", { className: "typography-small4 text-text-g-contrast-medium mb-2", children: "Double Scroll" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Menu" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Section A" }), _jsx(ScrollArea, { className: "max-h-[160px]", children: ITEMS.slice(0, 8).map((label) => (_jsx(DropdownMenuItem, { children: label }, label))) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Section B" }), _jsx(ScrollArea, { className: "max-h-[160px]", children: ITEMS.slice(0, 8).map((label) => (_jsx(DropdownMenuItem, { children: label }, label))) })] })] })] })] }));
     },
 };
+// ---------------------------------------------------------------------------
+// Both axes — vertical + horizontal scroll simultaneously
+// ---------------------------------------------------------------------------
+const WIDE_COLS = [
+    "ID",
+    "Name",
+    "Category",
+    "Type",
+    "Format",
+    "Source",
+    "Default",
+    "Required",
+    "Nullable",
+    "Description",
+];
+const WIDE_ROWS = Array.from({ length: 30 }, (_, i) => ({
+    id: `ROW-${String(i + 1).padStart(3, "0")}`,
+    name: `item_name_${i + 1}`,
+    category: ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"][i % 5],
+    type: ["String", "Number", "Boolean", "Date", "Enum"][i % 5],
+    format: ["Text", "Integer", "true/false", "ISO 8601", "1–5"][i % 5],
+    source: ["System", "Manual", "Device", "Auth", "Import"][i % 5],
+    defaultVal: ["-", "auto", "true", "now()", "0"][i % 5],
+    required: i % 3 === 0 ? "Yes" : "No",
+    nullable: i % 2 === 0 ? "Yes" : "No",
+    description: `Description text for row ${i + 1}`,
+}));
+const WideContent = () => (_jsxs("div", { className: "min-w-[800px]", children: [_jsx("div", { className: "flex sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]", children: WIDE_COLS.map((col) => (_jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-small2 text-text-g-contrast-medium whitespace-nowrap", children: col }, col))) }), WIDE_ROWS.map((row) => (_jsxs("div", { className: "flex border-b border-[var(--dropdown-menu-seperator-bg)] hover:bg-[var(--transparent-grey2-8,rgba(145,158,171,0.08))] transition-colors", children: [_jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap font-medium", children: row.id }), _jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: row.name }), _jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: row.category }), _jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: row.type }), _jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: row.format }), _jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: row.source }), _jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: row.defaultVal }), _jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: row.required }), _jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: row.nullable }), _jsx("div", { className: "shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: row.description })] }, row.id)))] }));
+export const BothAxes = {
+    name: "Both Axes",
+    render: () => {
+        const cases = [
+            {
+                label: "X = M (16px)  +  Y = M (16px)  — same",
+                xSize: "ui-scrollbar-x-m",
+                ySize: "ui-scrollbar-y-m",
+            },
+            {
+                label: "X = S (10px)  +  Y = S (10px)  — same",
+                xSize: "ui-scrollbar-x-s",
+                ySize: "ui-scrollbar-y-s",
+            },
+            {
+                label: "X = XS (4px)  +  Y = XS (4px)  — same",
+                xSize: "ui-scrollbar-x-xs",
+                ySize: "ui-scrollbar-y-xs",
+            },
+            {
+                label: "X = M (16px)  +  Y = S (10px)  — mixed",
+                xSize: "ui-scrollbar-x-m",
+                ySize: "ui-scrollbar-y-s",
+            },
+            {
+                label: "X = S (10px)  +  Y = M (16px)  — mixed",
+                xSize: "ui-scrollbar-x-s",
+                ySize: "ui-scrollbar-y-m",
+            },
+            {
+                label: "X = M (16px)  +  Y = XS (4px)  — mixed",
+                xSize: "ui-scrollbar-x-m",
+                ySize: "ui-scrollbar-y-xs",
+            },
+        ];
+        return (_jsx("div", { className: "flex flex-col gap-8 w-full", children: cases.map(({ label, xSize, ySize }) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: label }), _jsx(ScrollArea, { direction: "both", className: `h-[220px] w-[480px] rounded-lg bg-modal-surface ${xSize} ${ySize}`, children: _jsx(WideContent, {}) })] }, label))) }));
+    },
+};

package/dist/components/Table/Table.js

@@ -9,47 +9,137 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronFirst, ChevronLast, } from "lucide-react";
 import { cn } from "@/utils/cn";
+import ActionButton from "@/components/ActionButton/ActionButton";
+// ---------------------------------------------------------------------------
+// Table  — root scroll container + <table>
+// Uses border-separate / border-spacing-0 so border-r on cells works cleanly.
+//
+// Colours adapt automatically when an ancestor carries data-surface="panel".
+// See src/theme/tokens/components/table.css for the token definitions.
+// ---------------------------------------------------------------------------
 const Table = React.forwardRef((_a, ref) => {
-    var { rootClassName, className, rootRef } = _a, props = __rest(_a, ["rootClassName", "className", "rootRef"]);
-    return (_jsx("div", { className: cn("relative h-full w-full overflow-auto", rootClassName), ref: rootRef, children: _jsx("table", Object.assign({ ref: ref, className: cn("w-full caption-bottom text-sm border-collapse", className) }, props)) }));
+    var { rootClassName, className, rootRef, bordered = false, scrollableWrapper = true } = _a, props = __rest(_a, ["rootClassName", "className", "rootRef", "bordered", "scrollableWrapper"]);
+    const scrollClassName = cn("relative h-full w-full min-h-0 overflow-auto", "ui-scrollbar ui-scrollbar-x-m ui-scrollbar-y-s");
+    const tableClassName = cn("min-w-full caption-bottom border-separate border-spacing-0", className);
+    const tableEl = (_jsx("table", Object.assign({ ref: ref, className: tableClassName }, props)));
+    if (!bordered && scrollableWrapper === false) {
+        return (_jsx("table", Object.assign({ ref: ref, className: cn(tableClassName, rootClassName) }, props)));
+    }
+    if (bordered) {
+        return (_jsx("div", { className: cn("relative flex h-full w-full min-h-0 flex-col overflow-hidden rounded-md border border-table-c-border", rootClassName), ref: rootRef, children: _jsx("div", { className: scrollClassName, children: tableEl }) }));
+    }
+    return (_jsx("div", { className: cn(scrollClassName, rootClassName), ref: rootRef, children: tableEl }));
 });
 Table.displayName = "Table";
+// ---------------------------------------------------------------------------
+// TableHeader
+// The header-to-body separator resolves from --table-c-header-line:
+//   default → transparent  (bg contrast between table-bg-main and row-bg
+//             provides visual separation — no explicit line needed)
+//   panel   → table-panel-main-line  (all bgs are transparent, explicit
+//             line required)
+// ---------------------------------------------------------------------------
 const TableHeader = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("thead", Object.assign({ ref: ref, className: cn("[&_tr]:border-b bg-secondary-80", className) }, props)));
+    return (_jsx("thead", Object.assign({ ref: ref, className: cn("[&_tr>th]:border-b [&_tr>th]:border-b-table-c-header-line", className) }, props)));
 });
 TableHeader.displayName = "TableHeader";
+// ---------------------------------------------------------------------------
+// TableBody
+// striped=true  → alternating bg colours (odd=row-bg, even=row-bg-even),
+//                 NO horizontal row strokes
+// striped=false → single row-bg colour, row strokes via TableRow divided prop
+//
+// Hover, selected, and bg colours all resolve from table-c-* tokens so they
+// automatically switch when inside a [data-surface="panel"] ancestor.
+// ---------------------------------------------------------------------------
 const TableBody = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("tbody", Object.assign({ ref: ref, className: cn("[&_tr:last-child]:border-0", className) }, props)));
+    var { className, striped = false } = _a, props = __rest(_a, ["className", "striped"]);
+    return (_jsx("tbody", Object.assign({ ref: ref, className: cn(
+        // Remove the bottom border on the very last row's cells in every mode.
+        "[&_tr:last-child>td]:border-b-0 [&_tr:last-child>th]:border-b-0", "[&_tr]:bg-table-c-row-bg", 
+        // !important beats nth-child specificity so hover always wins.
+        "[&_tr:hover]:!bg-table-c-hover", "[&_tr[data-state=selected]]:!bg-table-c-selected", "[&_tr[data-highlighted=true]]:!bg-table-c-selected", striped && [
+            "[&_tr:nth-child(odd)]:bg-table-c-row-bg",
+            "[&_tr:nth-child(even)]:bg-table-c-row-bg-even",
+            // Remove row stroke — colour alternation provides separation.
+            "[&_tr>td]:border-b-0",
+        ], className) }, props)));
 });
 TableBody.displayName = "TableBody";
+// ---------------------------------------------------------------------------
+// TableFooter
+// ---------------------------------------------------------------------------
 const TableFooter = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("tfoot", Object.assign({ ref: ref, className: cn("border-t bg-transparent-grey2-8 font-medium [&>tr]:last:border-b-0", className) }, props)));
+    return (_jsx("tfoot", Object.assign({ ref: ref, className: cn("bg-table-c-header-bg border-t border-t-table-c-header-line font-medium [&>tr]:last:border-b-0", className) }, props)));
 });
 TableFooter.displayName = "TableFooter";
+// ---------------------------------------------------------------------------
+// TableRow
+// divided=true    → horizontal separator on child td/th cells (border-b)
+//                   NOTE: with border-separate tables, borders on <tr> are
+//                   invisible — must target cells directly via CSS selectors.
+// divided=false   → no separator (striped rows / empty row)
+// colDivided=true → vertical column dividers on every non-last td / th child
+// ---------------------------------------------------------------------------
 const TableRow = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("tr", Object.assign({ ref: ref, className: cn("border-b transition-colors hover:bg-transparent-grey2-8 data-[state=selected]:bg-grey-20", className) }, props)));
+    var { className, divided = true, colDivided = false } = _a, props = __rest(_a, ["className", "divided", "colDivided"]);
+    return (_jsx("tr", Object.assign({ ref: ref, className: cn("transition-colors", 
+        // Row separator — applied on cells because border-separate ignores tr borders
+        divided && [
+            "[&>td]:border-b [&>td]:border-b-table-c-row-line",
+            "[&>th]:border-b [&>th]:border-b-table-c-row-line",
+        ], 
+        // Column dividers on every non-last cell
+        colDivided && [
+            "[&>td:not(:last-child)]:border-r [&>td:not(:last-child)]:border-r-table-c-col-line",
+            "[&>th:not(:last-child)]:border-r [&>th:not(:last-child)]:border-r-table-c-col-line",
+        ], className) }, props)));
 });
 TableRow.displayName = "TableRow";
+// ---------------------------------------------------------------------------
+// TableHead  (th)
+// ---------------------------------------------------------------------------
 const TableHead = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("th", Object.assign({ ref: ref, className: cn(" h-12 py-3 px-6 text-left align-middle typography-body2 text-text-g-contrast-low [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
+    return (_jsx("th", Object.assign({ ref: ref, className: cn("h-[44px] box-border py-3 px-3 text-left align-middle", "typography-body2 text-text-contrast-max", "bg-table-c-header-bg", 
+        // Prefer min-width only so callers (e.g. DataTable exactWidth) can set
+        // a different width via inline style without fighting a fixed `w-10`.
+        "[&:has([role=checkbox])]:px-3 [&:has([role=checkbox])]:min-w-10", className) }, props)));
 });
 TableHead.displayName = "TableHead";
+// ---------------------------------------------------------------------------
+// TableCell  (td)
+// ---------------------------------------------------------------------------
 const TableCell = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("td", Object.assign({ ref: ref, className: cn(" py-3 px-6 text-left align-middle  typography-body3 text-text-g-contrast-low [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
+    return (_jsx("td", Object.assign({ ref: ref, className: cn("h-[42px] box-border py-3 px-3 text-left align-middle", "typography-body3 text-text-contrast-max", 
+        // Inherit row background from <tr> so every cell paints the same fill
+        // (some table layouts / browsers leave the last column visually “empty”).
+        "bg-inherit", "[&:has([role=checkbox])]:px-3 [&:has([role=checkbox])]:min-w-10", className) }, props)));
 });
 TableCell.displayName = "TableCell";
+// ---------------------------------------------------------------------------
+// TableCaption
+// ---------------------------------------------------------------------------
 const TableCaption = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("caption", Object.assign({ ref: ref, className: cn("mt-4 text-sm text-text-g-contrast-medium", className) }, props)));
+    return (_jsx("caption", Object.assign({ ref: ref, className: cn("mt-4 pb-3 text-sm text-text-g-contrast-medium", className) }, props)));
 });
 TableCaption.displayName = "TableCaption";
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+const TablePagination = React.forwardRef(({ pageIndex, pageSize, totalCount, pageSizeOptions = [10, 20, 50, 100], onPageChange, onPageSizeChange, className, }, ref) => {
+    const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    const from = totalCount === 0 ? 0 : pageIndex * pageSize + 1;
+    const to = Math.min((pageIndex + 1) * pageSize, totalCount);
+    return (_jsxs("div", { ref: ref, className: cn("flex items-center justify-end gap-8 px-6 py-2", "bg-table-c-header-bg", "border-t border-t-table-c-header-line", className), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "typography-subtitle4 text-text-g-contrast-high whitespace-nowrap", children: "items per page" }), _jsxs("div", { className: "relative", children: [_jsx("select", { value: pageSize, onChange: (e) => {
+                                    onPageSizeChange(Number(e.target.value));
+                                    onPageChange(0);
+                                }, className: cn("appearance-none w-[72px] rounded-md border border-input-default-stroke", "bg-table-c-header-bg p-2 pr-7", "typography-small2 text-text-g-contrast-high", "cursor-pointer focus:outline-none focus:ring-1 focus:ring-input-active-stroke"), children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) }), _jsx(ChevronDown, { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 size-[14px] text-text-g-contrast-high", "aria-hidden": true })] })] }), _jsxs("span", { className: "typography-subtitle4 text-text-g-contrast-high whitespace-nowrap tabular-nums", children: [from, "\u2013", to, " of ", totalCount, " items"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ActionButton, { variant: "icon", size: "sm", onClick: () => onPageChange(0), disabled: pageIndex === 0, "aria-label": "First page", children: _jsx(ChevronFirst, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", onClick: () => onPageChange(pageIndex - 1), disabled: pageIndex === 0, "aria-label": "Previous page", children: _jsx(ChevronLeft, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", onClick: () => onPageChange(pageIndex + 1), disabled: pageIndex >= totalPages - 1, "aria-label": "Next page", children: _jsx(ChevronRight, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", onClick: () => onPageChange(totalPages - 1), disabled: pageIndex >= totalPages - 1, "aria-label": "Last page", children: _jsx(ChevronLast, {}) })] })] }));
+});
+TablePagination.displayName = "TablePagination";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TablePagination, };

package/dist/components/Table/Table.stories.js

@@ -1,21 +1,238 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "./Table";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, } from "./Table";
 const meta = {
     title: "Components/Table",
     component: Table,
     tags: ["autodocs"],
-    parameters: {
-        layout: "fullscreen",
+    parameters: { layout: "fullscreen" },
+    argTypes: {
+        bordered: {
+            control: "boolean",
+            description: "Outer `rounded-md` + `border-table-c-border`, inner scroll (`Table.tsx`).",
+        },
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-8 flex flex-col gap-10 bg-page-bg-main min-h-screen w-full", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
+const rows = [
+    { id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
+    { id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
+    { id: "INV003", status: "Paid", method: "Bank Transfer", amount: "$350.00" },
+    {
+        id: "INV004",
+        status: "Cancelled",
+        method: "Credit Card",
+        amount: "$450.00",
+    },
+    { id: "INV005", status: "Pending", method: "PayPal", amount: "$90.00" },
+];
+// ── Shared helpers ────────────────────────────────────────────────────────────
+const Headers = ({ colDivided = false }) => (_jsx(TableHeader, { children: _jsxs(TableRow, { divided: false, colDivided: colDivided, children: [_jsx(TableHead, { className: "w-[120px]", children: "Invoice" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Method" }), _jsx(TableHead, { className: "text-right", children: "Amount" })] }) }));
+const Rows = ({ divided = true, colDivided = false, selectedIndex, }) => (_jsx(_Fragment, { children: rows.map((r, i) => (_jsxs(TableRow, { divided: divided, colDivided: colDivided, "data-state": i === selectedIndex ? "selected" : undefined, children: [_jsx(TableCell, { className: "font-medium", children: r.id }), _jsx(TableCell, { children: r.status }), _jsx(TableCell, { children: r.method }), _jsx(TableCell, { className: "text-right", children: r.amount })] }, r.id))) }));
+// ── Stories ───────────────────────────────────────────────────────────────────
+/** NON-STRIPED — horizontal row strokes, no column dividers */
 export const Default = {
-    args: {},
-    render: (args) => {
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(Table, { children: [_jsx(TableCaption, { children: "A list of your recent invoices." }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[100px]", children: "Invoice" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Method" }), _jsx(TableHead, { className: "text-right", children: "Amount" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "INV001" }), _jsx(TableCell, { children: "Paid" }), _jsx(TableCell, { children: "Credit Card" }), _jsx(TableCell, { className: "text-right", children: "$250.00" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "INV001" }), _jsx(TableCell, { children: "Paid" }), _jsx(TableCell, { children: "Credit Card" }), _jsx(TableCell, { className: "text-right", children: "$250.00" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "INV001" }), _jsx(TableCell, { children: "Paid" }), _jsx(TableCell, { children: "Credit Card" }), _jsx(TableCell, { className: "text-right", children: "$250.00" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "INV001" }), _jsx(TableCell, { children: "Paid" }), _jsx(TableCell, { children: "Credit Card" }), _jsx(TableCell, { className: "text-right", children: "$250.00" })] })] })] }) }));
+    render: () => (_jsxs(Table, { children: [_jsx(Headers, {}), _jsx(TableBody, { children: _jsx(Rows, {}) })] })),
+};
+/** NON-STRIPED + COL DIVIDED — horizontal row strokes + vertical column dividers */
+export const NonStripedDivided = {
+    render: () => (_jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(Rows, { colDivided: true }) })] })),
+};
+/** STRIPED — alternating bg-a / bg-b, NO row strokes, NO column dividers */
+export const Striped = {
+    render: () => (_jsxs(Table, { bordered: true, children: [_jsx(Headers, {}), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false }) })] })),
+};
+/**
+ * STRIPED + COL DIVIDED — alternating bg, NO row strokes, WITH column dividers.
+ * Primary Xspector table style.
+ */
+export const StripedAndDivided = {
+    render: () => (_jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false, colDivided: true }) })] })),
+};
+/** SELECTED ROW — data-[state=selected] applies transparent-primary-12. Row 1 pre-selected. */
+export const WithSelectedRow = {
+    render: () => (_jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false, colDivided: true, selectedIndex: 1 }) })] })),
+};
+/**
+ * WITH FOOTER — tfoot summary row with bg-table-bg-main + top border.
+ * TableFooter is inside Table so bordered works naturally.
+ */
+export const WithFooter = {
+    render: () => (_jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(Rows, { colDivided: true }) }), _jsx(TableFooter, { children: _jsxs(TableRow, { divided: false, colDivided: true, children: [_jsx(TableCell, { className: "font-medium", children: "5 invoices" }), _jsx(TableCell, {}), _jsx(TableCell, {}), _jsx(TableCell, { className: "text-right font-medium", children: "$1,290.00" })] }) })] })),
+};
+/**
+ * WITH PAGINATION — TablePagination is a sibling of Table so needs an explicit
+ * outer wrapper (not covered by Table's bordered prop).
+ */
+export const WithPagination = {
+    render: () => {
+        const [pageIndex, setPageIndex] = React.useState(0);
+        const [pageSize, setPageSize] = React.useState(2);
+        const paged = rows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+        return (
+        // Explicit outer wrapper — required because TablePagination is a sibling of Table
+        _jsxs("div", { className: "rounded-md overflow-hidden border border-table-c-border w-full", children: [_jsxs(Table, { children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: paged.map((r) => (_jsxs(TableRow, { divided: true, colDivided: true, children: [_jsx(TableCell, { className: "font-medium", children: r.id }), _jsx(TableCell, { children: r.status }), _jsx(TableCell, { children: r.method }), _jsx(TableCell, { className: "text-right", children: r.amount })] }, r.id))) })] }), _jsx(TablePagination, { pageIndex: pageIndex, pageSize: pageSize, totalCount: rows.length, pageSizeOptions: [2, 3, 5], onPageChange: setPageIndex, onPageSizeChange: (s) => {
+                        setPageSize(s);
+                        setPageIndex(0);
+                    } })] }));
+    },
+};
+/** EMPTY STATE — single full-width row with centered message */
+export const Empty = {
+    render: () => (_jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(TableRow, { divided: false, className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: 4, className: "h-32 text-center text-text-g-contrast-medium", children: "No data found." }) }) })] })),
+};
+/** ALL STATES SIDE-BY-SIDE — reference sheet for design review */
+export const AllStates = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-6 w-full", children: [_jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Non-striped \u2014 row stroke only" }), _jsxs(Table, { bordered: true, children: [_jsx(Headers, {}), _jsx(TableBody, { children: _jsx(Rows, {}) })] }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Non-striped + col divided \u2014 row stroke + column dividers" }), _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(Rows, { colDivided: true }) })] }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Striped \u2014 alternating bg, no row stroke, no column dividers" }), _jsxs(Table, { bordered: true, children: [_jsx(Headers, {}), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false }) })] }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Striped + col divided \u2014 alternating bg, no row stroke, column dividers (primary style)" }), _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false, colDivided: true }) })] }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Selected row (index 2) \u2014 transparent-primary-12 overlay" }), _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false, colDivided: true, selectedIndex: 2 }) })] }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "With footer \u2014 summary row in tfoot" }), _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(Rows, { colDivided: true }) }), _jsx(TableFooter, { children: _jsxs(TableRow, { divided: false, colDivided: true, children: [_jsx(TableCell, { className: "font-medium", children: "5 invoices" }), _jsx(TableCell, {}), _jsx(TableCell, {}), _jsx(TableCell, { className: "text-right font-medium", children: "$1,290.00" })] }) })] })] })),
+};
+// ── Scroll ────────────────────────────────────────────────────────────────────
+const scrollCols = [
+    "ID",
+    "Column name",
+    "Category",
+    "Data type",
+    "Format",
+    "Source",
+    "Default value",
+    "Required",
+    "Nullable",
+    "Min length",
+    "Max length",
+    "Pattern",
+    "Unit",
+    "Precision",
+    "Encoding",
+    "Description",
+];
+const scrollRows = Array.from({ length: 40 }, (_, i) => [
+    `COL-${String(i + 1).padStart(3, "0")}`,
+    `column_field_${i + 1}`,
+    ["Identifier", "Asset", "Timestamp", "Status", "User", "Metric", "Tag"][i % 7],
+    ["String", "Number", "Date", "Boolean", "Enum", "Array", "Object"][i % 7],
+    ["UUID", "Free text", "ISO 8601", "true/false", "1–5", "JSON", "Base64"][i % 7],
+    ["System", "Manual", "Device", "Auth", "Sensor", "Import", "Computed"][i % 7],
+    ["-", "auto", "now()", "true", "0", "[]", "{}"][i % 7],
+    i % 3 === 0 ? "Yes" : "No",
+    i % 2 === 0 ? "Yes" : "No",
+    ["-", "1", "3", "8", "16", "36", "64"][i % 7],
+    ["255", "128", "1024", "36", "64", "512", "-"][i % 7],
+    ["-", "^[A-Z]+$", "^\\d+$", ".*", "^[a-z_]+$", "-", "-"][i % 7],
+    ["m", "kg", "°C", "-", "%", "px", "ms"][i % 7],
+    ["-", "2", "4", "6", "0", "3", "8"][i % 7],
+    ["UTF-8", "ASCII", "Base64", "UTF-16", "-", "UTF-8", "UTF-8"][i % 7],
+    `Description text for column ${i + 1}`,
+]);
+/**
+ * WITH SCROLL (Figma 9637-10817)
+ *
+ * Demonstrates both axes of overflow:
+ *  - Vertical: fixed-height container → body rows overflow and scroll vertically
+ *  - Horizontal: 10 columns wider than the viewport → native h-scroll bar appears
+ *
+ * Implementation notes:
+ *  - Outer div sets the fixed height and owns the rounded border
+ *    (TablePagination must sit outside the scrollable Table)
+ *  - Table gets rootClassName="flex-1 min-h-0" so it grows to fill flex space
+ *    and allows overflow-auto to kick in
+ *  - TableHeader gets className="sticky top-0 z-10" for a frozen header row
+ */
+export const WithScroll = {
+    render: () => {
+        const [pageIndex, setPageIndex] = React.useState(0);
+        const [pageSize, setPageSize] = React.useState(5);
+        const totalCount = scrollRows.length;
+        const paged = scrollRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+        return (
+        // Outer wrapper: fixed height + border owns the rounded corners.
+        // TablePagination lives here as a sibling (outside the scroll area).
+        _jsxs("div", { className: "flex flex-col h-[320px] w-full", children: [_jsxs(Table, { rootClassName: "flex-1 min-h-0", children: [_jsx(TableHeader, { className: "sticky top-0 z-10", children: _jsx(TableRow, { divided: false, colDivided: true, children: scrollCols.map((col) => (_jsx(TableHead, { className: "whitespace-nowrap", children: col }, col))) }) }), _jsx(TableBody, { striped: true, children: paged.map((cells, i) => (_jsx(TableRow, { divided: false, colDivided: true, children: cells.map((cell, j) => (_jsx(TableCell, { className: "whitespace-nowrap", children: cell }, j))) }, i))) })] }), _jsx(TablePagination, { pageIndex: pageIndex, pageSize: pageSize, totalCount: totalCount, pageSizeOptions: [5, 10, 20], onPageChange: setPageIndex, onPageSizeChange: (s) => {
+                        setPageSize(s);
+                        setPageIndex(0);
+                    } })] }));
+    },
+};
+/**
+ * SCROLLBAR SIZES — per-axis demo
+ *
+ * Combine ui-scrollbar-x-{size} + ui-scrollbar-y-{size} independently.
+ * CSS: height → horizontal bar thickness | width → vertical bar thickness
+ */
+export const ScrollbarSizes = {
+    render: () => {
+        const makeTable = (label, xClass, yClass) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: label }), _jsx("div", { className: "rounded-xl overflow-hidden border border-table-bg-line h-[180px] flex flex-col", children: _jsxs(Table, { rootClassName: `flex-1 min-h-0 ui-scrollbar ${xClass} ${yClass}`, children: [_jsx(TableHeader, { className: "sticky top-0 z-10", children: _jsx(TableRow, { divided: false, colDivided: true, children: scrollCols.map((c) => (_jsx(TableHead, { className: "whitespace-nowrap", children: c }, c))) }) }), _jsx(TableBody, { striped: true, children: scrollRows.slice(0, 12).map((cells, i) => (_jsx(TableRow, { divided: false, colDivided: true, children: cells.map((cell, j) => (_jsx(TableCell, { className: "whitespace-nowrap", children: cell }, j))) }, i))) })] }) })] }, label));
+        return (_jsxs("div", { className: "flex flex-col gap-8 w-full", children: [makeTable("X = M (12px)  +  Y = S (6px)  ← Table default", "ui-scrollbar-x-m", "ui-scrollbar-y-s"), makeTable("X = S (6px)   +  Y = M (12px)", "ui-scrollbar-x-s", "ui-scrollbar-y-m"), makeTable("X = M (12px)  +  Y = M (12px)", "ui-scrollbar-x-m", "ui-scrollbar-y-m"), makeTable("X = S (6px)   +  Y = S (6px)", "ui-scrollbar-x-s", "ui-scrollbar-y-s"), makeTable("X = XS (2px)  +  Y = XS (2px)", "ui-scrollbar-x-xs", "ui-scrollbar-y-xs"), makeTable("X = M (12px)  +  Y = XS (2px)", "ui-scrollbar-x-m", "ui-scrollbar-y-xs")] }));
     },
 };
+// ── Panel (on Modal / Drawer / Panel surface) ─────────────────────────────────
+//
+// The Panel wrapper carries data-surface="panel" which overrides --table-c-*
+// tokens via CSS cascade — no variant prop on Table or TablePagination needed.
+// Every story below mirrors its non-panel counterpart exactly.
+/** Simulates a Modal / Drawer / Panel surface wrapper.
+ *  data-surface="panel" triggers the CSS token overrides in table.css. */
+const PanelDecorator = ({ children }) => (_jsxs("div", { "data-surface": "panel", className: " bg-modal-surface p-6 w-full max-w-3xl mx-auto", children: [_jsx("p", { className: "typography-subtitle4 text-text-g-contrast-medium mb-4", children: "Modal / Panel surface" }), children] }));
+/** PANEL DEFAULT — transparent rows + panel-sub-line row dividers */
+export const PanelDefault = {
+    render: () => (_jsx(PanelDecorator, { children: _jsxs(Table, { children: [_jsx(Headers, {}), _jsx(TableBody, { children: _jsx(Rows, {}) })] }) })),
+};
+/** PANEL NON-STRIPED DIVIDED — row dividers + vertical column dividers */
+export const PanelNonStripedDivided = {
+    render: () => (_jsx(PanelDecorator, { children: _jsxs(Table, { children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(Rows, { colDivided: true }) })] }) })),
+};
+/** PANEL STRIPED — alternating rows (both transparent in panel mode), no row strokes */
+export const PanelStriped = {
+    render: () => (_jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, {}), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false }) })] }) })),
+};
+/** PANEL STRIPED + COL DIVIDED */
+export const PanelStripedAndDivided = {
+    render: () => (_jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false, colDivided: true }) })] }) })),
+};
+/** PANEL SELECTED ROW — table-panel-selected (yellow/olive) */
+export const PanelWithSelectedRow = {
+    render: () => (_jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false, colDivided: true, selectedIndex: 1 }) })] }) })),
+};
+/** PANEL WITH FOOTER */
+export const PanelWithFooter = {
+    render: () => (_jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(Rows, { colDivided: true }) }), _jsx(TableFooter, { children: _jsxs(TableRow, { divided: false, colDivided: true, children: [_jsx(TableCell, { className: "font-medium", children: "5 invoices" }), _jsx(TableCell, {}), _jsx(TableCell, {}), _jsx(TableCell, { className: "text-right font-medium", children: "$1,290.00" })] }) })] }) })),
+};
+/**
+ * PANEL WITH PAGINATION
+ * TablePagination sits inside the same data-surface="panel" scope so it
+ * automatically picks up the panel tokens — no variant prop needed.
+ */
+export const PanelWithPagination = {
+    render: () => {
+        const [pageIndex, setPageIndex] = React.useState(0);
+        const [pageSize, setPageSize] = React.useState(3);
+        const paged = rows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+        return (_jsx(PanelDecorator, { children: _jsxs("div", { className: "rounded-lg overflow-hidden border border-table-c-border w-full", children: [_jsxs(Table, { children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: paged.map((r) => (_jsxs(TableRow, { divided: true, colDivided: true, children: [_jsx(TableCell, { className: "font-medium", children: r.id }), _jsx(TableCell, { children: r.status }), _jsx(TableCell, { children: r.method }), _jsx(TableCell, { className: "text-right", children: r.amount })] }, r.id))) })] }), _jsx(TablePagination, { pageIndex: pageIndex, pageSize: pageSize, totalCount: rows.length, pageSizeOptions: [2, 3, 5], onPageChange: setPageIndex, onPageSizeChange: (s) => {
+                            setPageSize(s);
+                            setPageIndex(0);
+                        } })] }) }));
+    },
+};
+/** PANEL EMPTY STATE */
+export const PanelEmpty = {
+    render: () => (_jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(TableRow, { divided: false, className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: 4, className: "h-32 text-center text-text-g-contrast-medium", children: "No data found." }) }) })] }) })),
+};
+/**
+ * PANEL WITH SCROLL — sticky header + both scroll axes inside a fixed-height panel.
+ */
+export const PanelWithScroll = {
+    render: () => {
+        const [pageIndex, setPageIndex] = React.useState(0);
+        const [pageSize, setPageSize] = React.useState(5);
+        const paged = scrollRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+        return (_jsx(PanelDecorator, { children: _jsxs("div", { className: "flex flex-col h-[280px] w-full rounded-lg overflow-hidden border border-table-c-border", children: [_jsxs(Table, { rootClassName: "flex-1 min-h-0", children: [_jsx(TableHeader, { className: "sticky top-0 z-10", children: _jsx(TableRow, { divided: false, colDivided: true, children: scrollCols.map((col) => (_jsx(TableHead, { className: "whitespace-nowrap", children: col }, col))) }) }), _jsx(TableBody, { children: paged.map((cells, i) => (_jsx(TableRow, { divided: true, colDivided: true, children: cells.map((cell, j) => (_jsx(TableCell, { className: "whitespace-nowrap", children: cell }, j))) }, i))) })] }), _jsx(TablePagination, { pageIndex: pageIndex, pageSize: pageSize, totalCount: scrollRows.length, pageSizeOptions: [5, 10, 20], onPageChange: setPageIndex, onPageSizeChange: (s) => {
+                            setPageSize(s);
+                            setPageIndex(0);
+                        } })] }) }));
+    },
+};
+/** PANEL ALL STATES — all variants side-by-side for design review */
+export const PanelAllStates = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-6 w-full", children: [_jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Non-striped \u2014 row stroke only" }), _jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, {}), _jsx(TableBody, { children: _jsx(Rows, {}) })] }) }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Non-striped + col divided" }), _jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(Rows, { colDivided: true }) })] }) }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Striped \u2014 alternating bg, no row stroke" }), _jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, {}), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false }) })] }) }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Striped + col divided (primary style)" }), _jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false, colDivided: true }) })] }) }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "Selected row (index 2) \u2014 table-panel-selected overlay" }), _jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { striped: true, children: _jsx(Rows, { divided: false, colDivided: true, selectedIndex: 2 }) })] }) }), _jsx("p", { className: "typography-subtitle4 text-text-g-contrast-high", children: "With footer" }), _jsx(PanelDecorator, { children: _jsxs(Table, { bordered: true, children: [_jsx(Headers, { colDivided: true }), _jsx(TableBody, { children: _jsx(Rows, { colDivided: true }) }), _jsx(TableFooter, { children: _jsxs(TableRow, { divided: false, colDivided: true, children: [_jsx(TableCell, { className: "font-medium", children: "5 invoices" }), _jsx(TableCell, {}), _jsx(TableCell, {}), _jsx(TableCell, { className: "text-right font-medium", children: "$1,290.00" })] }) })] }) })] })),
+};