@rovula/ui 0.1.28 → 0.1.30

package/dist/cjs/types/components/DataTable/DataTable.stories.d.ts

@@ -1,5 +1,8 @@
+import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { ColumnDef, Row } from "@tanstack/react-table";
 import { DataTable } from "./DataTable";
-import { ColumnDef } from "@tanstack/react-table";
+import type { EditableColumnDef } from "./DataTable.editing.types";
 declare const meta: {
     title: string;
     component: typeof DataTable;
@@ -7,16 +10,301 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    argTypes: {
+        bordered: {
+            control: "boolean";
+        };
+        surface: {
+            control: "radio";
+            options: string[];
+        };
+        divided: {
+            control: "boolean";
+        };
+        striped: {
+            control: "boolean";
+        };
+        fetchingMore: {
+            control: "boolean";
+        };
+        loading: {
+            control: "boolean";
+        };
+    };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        columns: ColumnDef<unknown, unknown>[];
+        columns: (ColumnDef<unknown, unknown> | EditableColumnDef<unknown, unknown>)[];
         data: unknown[];
         manualSorting?: boolean | undefined;
         onSorting?: ((sorting: import("@tanstack/react-table").SortingState) => void) | undefined;
+        paginationMode?: import("./DataTable").DataTablePaginationMode | undefined;
+        totalCount?: number | undefined;
+        pageIndex?: number | undefined;
+        pageSize?: number | undefined;
+        onPaginationChange?: ((state: import("@tanstack/react-table").PaginationState) => void) | undefined;
+        pageSizeOptions?: number[] | undefined;
         fetchMoreData?: (() => void) | undefined;
+        fetchMoreOffset?: number | undefined;
+        fetchingMore?: boolean | undefined;
+        fetchingMoreLabel?: string | undefined;
+        loading?: boolean | undefined;
+        loadingLabel?: string | undefined;
+        virtualized?: boolean | undefined;
+        virtualRowEstimate?: number | undefined;
+        highlightRowId?: string | string[] | undefined;
+        scrollToHighlightOnMouseLeave?: boolean | undefined;
+        selectable?: boolean | undefined;
+        onRowSelectionChange?: ((rows: import("@tanstack/react-table").RowSelectionState) => void) | undefined;
+        rowActions?: ((row: Row<unknown>) => React.ReactNode) | undefined;
+        reorderable?: boolean | undefined;
+        getRowId?: ((row: unknown) => string) | undefined;
+        onRowReorder?: ((data: unknown[]) => void) | undefined;
+        isRowReorderLocked?: ((row: Row<unknown>) => boolean) | undefined;
+        onRowClick?: ((row: Row<unknown>, event: React.MouseEvent) => void) | undefined;
+        onCellClick?: ((cell: import("@tanstack/react-table").Cell<unknown, unknown>, row: Row<unknown>, event: React.MouseEvent) => void) | undefined;
+        getSubRows?: ((row: unknown) => unknown[] | undefined) | undefined;
+        defaultExpanded?: (import("@tanstack/react-table").ExpandedState | boolean) | undefined;
+        expanded?: import("@tanstack/react-table").ExpandedState | undefined;
+        onExpandedChange?: ((expanded: import("@tanstack/react-table").ExpandedState) => void) | undefined;
+        bordered?: boolean | undefined;
+        surface?: "default" | "panel" | undefined;
+        striped?: boolean | undefined;
+        divided?: boolean | undefined;
+        rowClassName?: string | ((row: Row<unknown>, index: number) => string | undefined) | undefined;
+        cellClassName?: string | ((cell: import("@tanstack/react-table").Cell<unknown, unknown>, row: Row<unknown>) => string | undefined) | undefined;
+        headerCellClassName?: string | ((header: import("@tanstack/react-table").Header<unknown, unknown>) => string | undefined) | undefined;
+        headerClassName?: string | undefined;
+        headerRowClassName?: string | undefined;
+        sortIndicatorVisibility?: "always" | "hover" | undefined;
+        tableLayout?: "auto" | "fixed" | "equal" | undefined;
+        columnManagement?: (boolean | import("./DataTable").ColumnManagementOptions) | undefined;
+        resizable?: boolean | undefined;
+        columnMinSize?: number | undefined;
+        columnMaxSize?: number | undefined;
+        className?: string | undefined;
+        testId?: string | undefined;
+        enableEditing?: boolean | undefined;
+        editDisplayMode?: import("./DataTable.editing.types").EditDisplayMode | undefined;
+        editTrigger?: import("./DataTable.editing.types").EditTrigger | undefined;
+        onCellCommit?: ((rowId: string, columnId: string, patch: Partial<unknown>) => void) | undefined;
+        alwaysEditing?: ((row: Row<unknown>) => boolean) | undefined;
+        enableCellTabTraversal?: boolean | undefined;
+        editableColumnIds?: string[] | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
-export declare const Default: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
-};
+/** Default — striped rows + column dividers, all columns sortable. */
+export declare const Default: StoryObj;
+/**
+ * Matches the Figma "Projects" page design — striped alternating rows,
+ * column dividers, row actions (more + navigate), client pagination,
+ * and a rounded bordered frame.
+ *
+ * Design ref: Xspector-New / node 11786-14865
+ */
+export declare const FigmaProjectsPage: StoryObj;
+/** Empty state — displayed when `data` is an empty array. */
+export declare const Empty: StoryObj;
+/** Non-striped with column dividers only. */
+export declare const Divided: StoryObj;
+/**
+ * DataTable inside a panel — matches modal spec: horizontal row separators only
+ * (no vertical column rules), compact height without a stretched empty body.
+ */
+export declare const OnPanelSurface: StoryObj;
+/** Panel + client pagination — footer sits in the same surface scope as the table body. */
+export declare const OnPanelSurfaceWithPagination: StoryObj;
+/** Client-side pagination — DataTable manages page index & size internally. */
+export declare const WithClientPagination: StoryObj;
+/**
+ * Server-side pagination — the caller controls `pageIndex` / `pageSize` and
+ * slices data accordingly. `totalCount` drives the page-count calculation.
+ */
+export declare const WithServerPagination: StoryObj;
+/**
+ * Infinite mode (default) — no pagination bar; the table body scrolls inside a
+ * fixed height. Use when the caller already passes the full (or windowed) dataset.
+ */
+export declare const WithInfiniteScrollStatic: StoryObj;
+/**
+ * Infinite scroll + load more — DataTable calls{" "}
+ * <code className="typography-mono">fetchMoreData</code> when the scroll position
+ * is within 10px of the bottom (see <code className="typography-mono">DataTable</code>{" "}
+ * <code className="typography-mono">useEffect</code> on <code className="typography-mono">scrollRef</code>).
+ * This story simulates an async page append.
+ */
+export declare const WithInfiniteScrollLoadMore: StoryObj;
+/**
+ * Initial load — pass `loading={true}` with `data={[]}` until the first page
+ * arrives; then set `loading={false}` and pass rows. Infinite `fetchMoreData`
+ * does not run while `loading` is true.
+ */
+export declare const WithInfiniteScrollInitialLoading: StoryObj;
+/**
+ * **What this library does *not* do:** `DataTable` has **no built-in row
+ * virtualization** — every row in `data` is rendered in the DOM (TanStack
+ * `getRowModel`). Very large `data.length` will cost more paint/layout work.
+ *
+ * **What to use instead:**
+ * - `paginationMode="client"` or `"server"` to cap rows per page
+ * - `paginationMode="infinite"` + `fetchMoreData` and **slice/window data in the parent**
+ * - Or wrap your own virtualizer (e.g. `@tanstack/react-virtual`) if you need
+ *   millions of rows in one scroll view
+ *
+ * This story mounts **800** synthetic rows so you can feel scroll/render cost
+ * in Storybook (dev builds are slower than production).
+ */
+export declare const PerformanceLargeDataset: StoryObj;
+/**
+ * Built-in **`virtualized`** — only a vertical window of rows is mounted; the
+ * rest are represented by spacer rows. Tune **`virtualRowEstimate`** (px) to
+ * match your row height so scroll position stays aligned.
+ *
+ * Limitations: fixed-height assumption; incompatible with **`reorderable`** in
+ * the virtualized path (use non-virtualized mode for drag-reorder).
+ */
+export declare const WithVirtualizedRows: StoryObj;
+/** Checkbox selection — header checkbox selects all; row checkboxes select individually. */
+export declare const WithSelection: StoryObj;
+/**
+ * Row highlight + scroll — use `highlightRowId` to visually mark important rows
+ * (uses the same token as selected rows) and automatically scroll them into view.
+ */
+export declare const WithRowHighlightAndScroll: StoryObj;
+/**
+ * Censor-style list — large, virtualized table where `highlightRowId` moves
+ * automatically over time (e.g. matching the latest event / time).
+ */
+export declare const WithVirtualizedCensorTimeline: StoryObj;
+/** Fixed actions column at the far right — rendered via `rowActions` prop. */
+export declare const WithRowActions: StoryObj;
+/**
+ * Uncontrolled tree rows — `defaultExpanded={true}` opens all nodes on mount.
+ * The user can collapse/expand rows freely; state is managed internally.
+ */
+export declare const WithExpandableRows: StoryObj;
+/**
+ * Controlled expand — the caller owns `expanded` state via `expanded` +
+ * `onExpandedChange`. Collapsing a row in the table calls `onExpandedChange`;
+ * if the parent doesn't update the state, the row "springs back" open.
+ */
+export declare const WithControlledExpand: StoryObj;
+/**
+ * Column management panel — click ⋮ on any column header.
+ *  - Toggle per-column visibility with the Switch
+ *  - "Hide all" hides everything except one column
+ *  - "Show all" restores all columns
+ *  - Drag the ⠿ grip to reorder columns
+ */
+export declare const WithColumnManagement: StoryObj;
+/**
+ * Column management with restricted options:
+ *  - `reorder: false` — drag handle hidden, column order is fixed
+ *  - `hideAll: false` — "Hide all" button removed
+ *
+ * Pass any subset of `ColumnManagementOptions` to tailor the panel.
+ */
+export declare const WithColumnManagementOptions: StoryObj;
+/**
+ * Resizable columns — drag the right edge of any column header.
+ *
+ * Global bounds via `columnMinSize` / `columnMaxSize`.
+ * Per-column overrides in the column def (`minSize`, `maxSize`):
+ *  - "Asset name": `minSize: 120`
+ *  - "KPI (%)": `maxSize: 160`
+ */
+export declare const WithColumnResize: StoryObj;
+/**
+ * All features combined:
+ *  - Checkbox selection
+ *  - Sortable columns
+ *  - Client-side pagination
+ *  - Column management (visibility + reorder)
+ *  - Column resize
+ *  - Row actions
+ */
+export declare const KitchenSink: StoryObj;
+/**
+ * Drag-to-reorder rows — a grip handle is prepended automatically.
+ * `onRowReorder` fires with the new data array after a drop.
+ */
+export declare const WithRowReorder: StoryObj;
+/** Row click — clicking any row fires `onRowClick`. Rows show `cursor-pointer`. */
+export declare const WithRowClick: StoryObj;
+/**
+ * Cell click — `onCellClick` fires for individual cells.
+ * Use `event.stopPropagation()` to prevent `onRowClick` from also firing.
+ */
+export declare const WithCellClick: StoryObj;
+/**
+ * Sort indicator always visible — `sortIndicatorVisibility="always"` shows the
+ * sort icon on every sortable column, not just on hover.
+ */
+export declare const SortIndicatorAlwaysVisible: StoryObj;
+/**
+ * Side-by-side comparison of `tableLayout="auto"` vs `"fixed"` vs `"equal"`.
+ *
+ * - **auto** — browser distributes width based on cell content; `size` is ignored.
+ * - **fixed** — `size` is used as px per column; the last non-exact column grows
+ *   so the table stays full-width (here: Status absorbs the remainder).
+ * - **equal** — all columns without `meta.exactWidth` share the remaining width equally.
+ *   With `resizable`, drag handles are off for this row so equal widths are preserved.
+ */
+export declare const TableLayoutComparison: StoryObj;
+/**
+ * `rowClassName` and `cellClassName` let you style individual rows and cells
+ * based on their data.
+ *
+ * - Rows with status **"Completed"** get a green-tinted background.
+ * - Rows with status **"To do"** get a subtle white/opacity background.
+ * - The **"Status"** column cells are bold.
+ * - The **"Type"** cells for ROV are highlighted with an info tint.
+ */
+export declare const WithCustomRowAndCellClassName: StoryObj;
+/**
+ * Showcase overriding header and body row heights via className props.
+ *
+ * The base `TableHead` uses `h-[44px] typography-body2` and `TableCell`
+ * uses `h-[42px] typography-body3`.
+ *
+ * `cn()` is configured with a custom `typography` class-group so
+ * `tailwind-merge` correctly deduplicates conflicting `typography-*`
+ * utilities (e.g. `typography-small2` replaces `typography-body2`).
+ *
+ * **Note:** `<th>` / `<td>` elements treat `height` as a minimum —
+ * to go smaller than the default, internal content (sort icon, badges)
+ * must also fit. Compact swaps to `typography-small2` (12px) text and
+ * reduces padding to reclaim space.
+ *
+ * Three sizes: **Compact**, **Default**, **Comfortable**.
+ */
+export declare const CustomRowAndHeaderSize: StoryObj;
+/**
+ * Data management table — Figma **Xspector-New**:
+ * [full frame](https://www.figma.com/design/99rq6FbfPx6hgPS0VCvHJh/Xspector-New?node-id=11965-17125),
+ * [row / field spec](https://www.figma.com/design/99rq6FbfPx6hgPS0VCvHJh/Xspector-New?node-id=11965-17883).
+ *
+ * Uses the **DataTable editing API** (`enableEditing` + `editDisplayMode` +
+ * `editVariant` per column). Edit scope and trigger are toggleable via the
+ * toolbar at the top of the story.
+ */
+export declare const DataManagement: StoryObj;
+/** Data Management — empty state when no columns have been configured yet. */
+export declare const DataManagementEmpty: StoryObj;
+/**
+ * **Editing Field Showcase** — demonstrates every editing feature:
+ *
+ * | Feature | Where |
+ * |---|---|
+ * | `editVariant: "text"` | Product name, Notes |
+ * | `editVariant: "select"` | Category |
+ * | `editVariant: "number"` | Quantity, Price |
+ * | `editVariant: "checkbox"` | Active |
+ * | `editVariant: "custom"` + `editCustomCell` | Priority (inline button picker → Badge display) |
+ * | `editError` | Name (required + min length), Category (required), Price (> 0) |
+ * | `displayCell` | Price (formatted), Active (badge), Notes (italic placeholder) |
+ * | `testId` | Root container has `data-testid="edit-showcase"` |
+ * | Row / Cell mode toggle | Toolbar radio buttons |
+ * | Click / Double-click trigger | Toolbar radio buttons |
+ * | Tab traversal | Tab/Shift+Tab moves between editable fields |
+ */
+export declare const EditingFieldShowcase: StoryObj;

package/dist/cjs/types/components/Dropdown/Dropdown.d.ts

@@ -41,6 +41,17 @@ export type DropdownProps = {
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
     }) => ReactNode;
+    /**
+     * When `true`, keep focus on the input after selecting an option so the
+     * menu stays open (useful for inline row-editing where the user may Tab
+     * to the next field instead of closing the dropdown).
+     */
+    keepOpenAfterSelect?: boolean;
+    /**
+     * Render the options list via a React portal so it escapes containers
+     * with `overflow: hidden/auto` (e.g. DataTable scroll wrappers).
+     */
+    portal?: boolean;
 } & Omit<InputProps, "value" | "onSelect">;
 declare const Dropdown: React.ForwardRefExoticComponent<{
     id?: string;
@@ -71,5 +82,16 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
     }) => ReactNode;
+    /**
+     * When `true`, keep focus on the input after selecting an option so the
+     * menu stays open (useful for inline row-editing where the user may Tab
+     * to the next field instead of closing the dropdown).
+     */
+    keepOpenAfterSelect?: boolean;
+    /**
+     * Render the options list via a React portal so it escapes containers
+     * with `overflow: hidden/auto` (e.g. DataTable scroll wrappers).
+     */
+    portal?: boolean;
 } & Omit<InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
 export default Dropdown;

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -31,6 +31,8 @@ declare const meta: {
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
         }) => React.ReactNode;
+        keepOpenAfterSelect?: boolean;
+        portal?: boolean;
     } & Omit<import("../..").InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
@@ -64,6 +66,8 @@ declare const meta: {
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
         }) => React.ReactNode) | undefined;
+        keepOpenAfterSelect?: boolean | undefined;
+        portal?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
         color?: string | undefined | undefined;
         height?: number | string | undefined | undefined;

package/dist/cjs/types/components/ScrollArea/ScrollArea.d.ts

@@ -3,9 +3,9 @@ export type ScrollbarSize = "m" | "s" | "xs";
 export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Scrollbar thickness.
-     * - `m`  — 12 px  (shows track border)
-     * - `s`  — 6 px   (default, shows no track border)
-     * - `xs` — 2 px   (shows no track border)
+     * - `m`  — 12 px  (default, shows track border + 2px thumb inset)
+     * - `s`  — 6 px   (shows track border + 2px thumb inset)
+     * - `xs` — 2 px   (no track border, no thumb inset)
      */
     scrollbarSize?: ScrollbarSize;
     /**

package/dist/cjs/types/components/ScrollArea/ScrollArea.stories.d.ts

@@ -299,3 +299,7 @@ export declare const WithDropdownMenu: {
     name: string;
     render: () => import("react/jsx-runtime").JSX.Element;
 };
+export declare const BothAxes: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Table/Table.d.ts

@@ -2,12 +2,42 @@ import * as React from "react";
 declare const Table: React.ForwardRefExoticComponent<{
     rootClassName?: string;
     rootRef?: React.LegacyRef<HTMLDivElement>;
+    /**
+     * Wraps the table in a rounded frame (`rounded-md` + `border-table-c-border`).
+     * Uses an outer `overflow-hidden` shell and an inner scroll area so corners clip
+     * cleanly (same pattern as scrollable bordered tables elsewhere in the system).
+     * For pagination in the same frame, wrap `Table` + `TablePagination` in your own
+     * bordered div instead of relying on this prop alone.
+     */
+    bordered?: boolean;
+    /**
+     * When false, render only `<table>` (no inner `overflow-auto` wrapper).
+     * Use when a parent already provides the scrollport — e.g. `DataTable` — so
+     * `sticky` header rows stick to the correct ancestor.
+     * Ignored when `bordered` is true (bordered tables always use the inner scroll shell).
+     */
+    scrollableWrapper?: boolean;
 } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<{
+    striped?: boolean;
+} & React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<{
+    divided?: boolean;
+    colDivided?: boolean;
+} & React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
 declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+export interface TablePaginationProps {
+    pageIndex: number;
+    pageSize: number;
+    totalCount: number;
+    pageSizeOptions?: number[];
+    onPageChange: (pageIndex: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    className?: string;
+}
+declare const TablePagination: React.ForwardRefExoticComponent<TablePaginationProps & React.RefAttributes<HTMLDivElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TablePagination, };

package/dist/cjs/types/components/Table/Table.stories.d.ts

@@ -1,17 +1,28 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<{
         rootClassName?: string;
         rootRef?: React.LegacyRef<HTMLDivElement>;
+        bordered?: boolean;
+        scrollableWrapper?: boolean;
     } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
+    argTypes: {
+        bordered: {
+            control: "boolean";
+            description: string;
+        };
+    };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         rootClassName?: string | undefined;
         rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+        bordered?: boolean | undefined;
+        scrollableWrapper?: boolean | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -283,7 +294,78 @@ declare const meta: {
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
-export declare const Default: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
-};
+/** NON-STRIPED — horizontal row strokes, no column dividers */
+export declare const Default: StoryObj;
+/** NON-STRIPED + COL DIVIDED — horizontal row strokes + vertical column dividers */
+export declare const NonStripedDivided: StoryObj;
+/** STRIPED — alternating bg-a / bg-b, NO row strokes, NO column dividers */
+export declare const Striped: StoryObj;
+/**
+ * STRIPED + COL DIVIDED — alternating bg, NO row strokes, WITH column dividers.
+ * Primary Xspector table style.
+ */
+export declare const StripedAndDivided: StoryObj;
+/** SELECTED ROW — data-[state=selected] applies transparent-primary-12. Row 1 pre-selected. */
+export declare const WithSelectedRow: StoryObj;
+/**
+ * WITH FOOTER — tfoot summary row with bg-table-bg-main + top border.
+ * TableFooter is inside Table so bordered works naturally.
+ */
+export declare const WithFooter: StoryObj;
+/**
+ * WITH PAGINATION — TablePagination is a sibling of Table so needs an explicit
+ * outer wrapper (not covered by Table's bordered prop).
+ */
+export declare const WithPagination: StoryObj;
+/** EMPTY STATE — single full-width row with centered message */
+export declare const Empty: StoryObj;
+/** ALL STATES SIDE-BY-SIDE — reference sheet for design review */
+export declare const AllStates: StoryObj;
+/**
+ * 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 declare const WithScroll: StoryObj;
+/**
+ * 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 declare const ScrollbarSizes: StoryObj;
+/** PANEL DEFAULT — transparent rows + panel-sub-line row dividers */
+export declare const PanelDefault: StoryObj;
+/** PANEL NON-STRIPED DIVIDED — row dividers + vertical column dividers */
+export declare const PanelNonStripedDivided: StoryObj;
+/** PANEL STRIPED — alternating rows (both transparent in panel mode), no row strokes */
+export declare const PanelStriped: StoryObj;
+/** PANEL STRIPED + COL DIVIDED */
+export declare const PanelStripedAndDivided: StoryObj;
+/** PANEL SELECTED ROW — table-panel-selected (yellow/olive) */
+export declare const PanelWithSelectedRow: StoryObj;
+/** PANEL WITH FOOTER */
+export declare const PanelWithFooter: StoryObj;
+/**
+ * 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 declare const PanelWithPagination: StoryObj;
+/** PANEL EMPTY STATE */
+export declare const PanelEmpty: StoryObj;
+/**
+ * PANEL WITH SCROLL — sticky header + both scroll axes inside a fixed-height panel.
+ */
+export declare const PanelWithScroll: StoryObj;
+/** PANEL ALL STATES — all variants side-by-side for design review */
+export declare const PanelAllStates: StoryObj;

package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts

@@ -390,6 +390,14 @@ export declare const Default: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+/**
+ * `isFloatingLabel={false}` — visible **`placeholder`**, no floating animation,
+ * and no inner `<label>` when `label` is empty (e.g. table cells, compact filters).
+ * Pair with `required={false}` + `hasClearIcon={false}` when mimicking inline fields.
+ */
+export declare const NonFloatingLabel: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
 export declare const CustomLabel: {
     args: {
         label: string;

package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const inputVariant: (props?: ({
+    floatingLabelPlaceholder?: boolean | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;
     variant?: "outline" | "flat" | "underline" | null | undefined;