@dashforge/tw 0.4.0-beta → 0.6.0-beta

package/dist/index.esm.js

@@ -7282,6 +7282,2117 @@ const accordionVariants = tv({
     });
 }
 
+/**
+ * `<Skeleton>` variant recipe.
+ *
+ * Slots:
+ *  - `root` — single element (atomic component)
+ *
+ * Variant axes:
+ *  - `variant` (`text` | `rectangle` | `circle`) — shape / radius
+ *  - `animation` (`pulse` | `wave` | `none`) — how the placeholder
+ *    "breathes" while data loads. Always gated on
+ *    `prefers-reduced-motion` (no exception — animations are
+ *    purely cosmetic).
+ *
+ * Implementation notes:
+ *
+ *  - `pulse` uses Tailwind's built-in `animate-pulse` (opacity
+ *    1.0 ↔ 0.5 over 2s, ease-in-out infinite).
+ *  - `wave` overlays a moving gradient. Implemented with a
+ *    `relative` container + an `::after` pseudo-element via a
+ *    Tailwind arbitrary-value class. The gradient slides
+ *    horizontally over the surface, mimicking the MUI Skeleton
+ *    "wave" look.
+ *  - Color uses neutral-200 (light) and neutral-800 (dark) for
+ *    the base, picked up automatically by the dashforge preset's
+ *    CSS-variable layer.
+ *
+ * Accessibility: the root has `aria-hidden="true"` (set on the JSX
+ * side, not here). Screen readers skip the skeleton entirely;
+ * the surrounding component is responsible for announcing
+ * loading state via `aria-busy` or `aria-live` if needed.
+ */ const skeletonVariants = tv({
+    slots: {
+        root: [
+            'block',
+            'bg-neutral-200 dark:bg-neutral-800',
+            'motion-reduce:animate-none'
+        ]
+    },
+    variants: {
+        variant: {
+            text: {
+                root: 'rounded h-[1em] w-full'
+            },
+            rectangle: {
+                root: 'rounded-md w-full h-[100px]'
+            },
+            circle: {
+                root: 'rounded-full w-10 h-10'
+            }
+        },
+        animation: {
+            pulse: {
+                root: 'animate-pulse'
+            },
+            wave: {
+                root: [
+                    'relative overflow-hidden',
+                    // The wave is rendered via an arbitrary-value ::after
+                    // pseudo-element with a moving linear gradient. Tailwind
+                    // doesn't ship a `wave` keyframe; we use the built-in
+                    // `animate-pulse` as a fallback if a consumer needs to
+                    // override. The gradient stop direction works in both
+                    // light and dark mode (white shimmer in light, lighter
+                    // overlay in dark).
+                    'after:absolute after:inset-0',
+                    'after:bg-gradient-to-r after:from-transparent after:via-white/40 after:to-transparent',
+                    'dark:after:via-white/10',
+                    'after:animate-pulse',
+                    'after:motion-reduce:animate-none'
+                ]
+            },
+            none: {
+                root: ''
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'text',
+        animation: 'pulse'
+    }
+});
+
+/**
+ * Dashforge TW `<Skeleton>` — loading placeholder primitive.
+ *
+ * Renders as a non-interactive `<span aria-hidden="true">` so screen
+ * readers skip it. The surrounding component is responsible for
+ * announcing loading state via `aria-busy` or `aria-live` if needed.
+ *
+ * Variants:
+ *   - `variant` — `text` (default, line shape) / `rectangle` / `circle`
+ *   - `animation` — `pulse` (default) / `wave` / `none`
+ *
+ * Both animations are gated by `prefers-reduced-motion` (WCAG 2.3.3).
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="text" width="200px" />
+ * <Skeleton variant="rectangle" width="100%" height="120px" />
+ * <Skeleton variant="circle" width="40px" />
+ * ```
+ */ function Skeleton(props) {
+    var _slotProps_root;
+    const { variant = 'text', animation = 'pulse', width, height, sx, slotProps } = props;
+    const v = skeletonVariants({
+        variant,
+        animation
+    });
+    // Width / height come through as inline style — Tailwind doesn't
+    // know about arbitrary user-supplied lengths. We default `circle`'s
+    // height to `width` so consumers don't have to repeat themselves.
+    const style = {};
+    if (width != null) style.width = width;
+    if (height != null) {
+        style.height = height;
+    } else if (variant === 'circle' && width != null) {
+        style.height = width;
+    }
+    return jsx("span", {
+        "aria-hidden": "true",
+        role: "presentation",
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        style: style
+    });
+}
+
+/**
+ * `<Pagination>` variant recipe.
+ *
+ * Slots:
+ *  - `root`             — outer `<nav>` container
+ *  - `summary`          — "Showing X-Y of Z" text
+ *  - `list`             — `<ul>` of page buttons
+ *  - `pageButton`       — individual page number button
+ *  - `activeButton`     — modifier applied to the current page
+ *  - `navButton`        — first/prev/next/last buttons
+ *  - `ellipsis`         — `…` rendered when range gap
+ *  - `pageSizeSelector` — native `<select>` for page size
+ *  - `jumpInput`        — direct page jump `<input>`
+ *
+ * Variant axes:
+ *  - `variant` — `default` (full kit) | `compact` (number buttons +
+ *    prev/next only) | `minimal` ("X / Y pages" + prev/next only).
+ *  - `size` — `sm` | `md` (default) | `lg`. Drives padding + text
+ *    size on the buttons.
+ */ const paginationVariants = tv({
+    slots: {
+        root: 'flex flex-wrap items-center gap-3',
+        summary: 'text-neutral-600 dark:text-neutral-400',
+        list: 'inline-flex items-center gap-1',
+        pageButton: [
+            'inline-flex items-center justify-center rounded-md',
+            'border border-neutral-300 dark:border-neutral-700',
+            'bg-white dark:bg-neutral-900',
+            'text-neutral-700 dark:text-neutral-300',
+            'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            'transition-colors motion-reduce:transition-none',
+            'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
+        ],
+        activeButton: [
+            'bg-primary-500 text-white border-primary-500',
+            'hover:bg-primary-600 dark:hover:bg-primary-400'
+        ],
+        navButton: [
+            'inline-flex items-center justify-center rounded-md',
+            'border border-neutral-300 dark:border-neutral-700',
+            'bg-white dark:bg-neutral-900',
+            'text-neutral-700 dark:text-neutral-300',
+            'hover:bg-neutral-50 dark:hover:bg-neutral-800',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            'transition-colors motion-reduce:transition-none',
+            'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
+        ],
+        ellipsis: 'inline-flex items-center justify-center text-neutral-500 px-1',
+        pageSizeSelector: [
+            'inline-flex items-center gap-2',
+            'text-neutral-700 dark:text-neutral-300'
+        ],
+        jumpInput: [
+            'rounded-md border border-neutral-300 dark:border-neutral-700',
+            'bg-white dark:bg-neutral-900',
+            'text-neutral-900 dark:text-neutral-50',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            'transition-colors motion-reduce:transition-none'
+        ]
+    },
+    variants: {
+        // Note: variant-driven visibility is enforced via conditional JSX
+        // rendering (in `Pagination.tsx`), NOT via `hidden` Tailwind class.
+        // Reason: `display: none` keeps the elements in the DOM (and in the
+        // a11y tree depending on how it's applied), which leaks into
+        // testing-library `queryByText` and feels semantically wrong for
+        // "this UI piece doesn't exist in this variant". So compact and
+        // minimal slots stay empty here.
+        variant: {
+            default: {},
+            compact: {},
+            minimal: {}
+        },
+        size: {
+            sm: {
+                summary: 'text-xs',
+                pageButton: 'h-7 min-w-7 px-2 text-xs',
+                navButton: 'h-7 min-w-7 px-2 text-xs',
+                ellipsis: 'h-7 min-w-5 text-xs',
+                pageSizeSelector: 'text-xs',
+                jumpInput: 'h-7 px-2 text-xs w-14'
+            },
+            md: {
+                summary: 'text-sm',
+                pageButton: 'h-9 min-w-9 px-3 text-sm',
+                navButton: 'h-9 min-w-9 px-3 text-sm',
+                ellipsis: 'h-9 min-w-6 text-sm',
+                pageSizeSelector: 'text-sm',
+                jumpInput: 'h-9 px-2 text-sm w-16'
+            },
+            lg: {
+                summary: 'text-base',
+                pageButton: 'h-10 min-w-10 px-4 text-base',
+                navButton: 'h-10 min-w-10 px-4 text-base',
+                ellipsis: 'h-10 min-w-7 text-base',
+                pageSizeSelector: 'text-base',
+                jumpInput: 'h-10 px-3 text-base w-20'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});
+
+/**
+ * Compute the array of page indices (or `'ellipsis'` sentinels) to
+ * render for a `<Pagination>`.
+ *
+ * Algorithm (standard "siblings + boundaries + ellipsis fill"):
+ *  1. Always show `boundaryCount` pages at the start and `boundaryCount`
+ *     at the end.
+ *  2. Show `siblingCount` pages on each side of the current page.
+ *  3. Fill gaps wider than 1 with `'ellipsis'`.
+ *  4. If a gap is exactly 1 page wide, include that page directly
+ *     (no ellipsis for a single hidden number).
+ *
+ * Output is 1-indexed page numbers OR the literal string `'ellipsis'`.
+ *
+ * @example
+ * ```ts
+ * range(1, 10, 1, 1)  // [1, 'ellipsis', 5, 'ellipsis', 10] when current=5
+ * range(1, 5, 1, 1)   // [1, 2, 3, 4, 5]
+ * range(1, 100, 1, 1) // edges varying with current
+ * ```
+ */ function computePageRange(currentPage, totalPages, siblingCount, boundaryCount) {
+    if (totalPages <= 0) return [];
+    if (totalPages === 1) return [
+        1
+    ];
+    // Budget: if `totalPages` fits within boundaries + siblings + current
+    // (plus the 2 hypothetical ellipsis slots), don't bother with ellipses
+    // at all — list every page. Avoids the "[1, 2, …, 5]" footgun where
+    // the user expected to see 3 and 4 explicitly.
+    const minPagesForEllipsis = 2 * boundaryCount + 2 * siblingCount + 3;
+    if (totalPages <= minPagesForEllipsis) {
+        return range(1, totalPages);
+    }
+    const startBoundary = range(1, Math.min(boundaryCount, totalPages));
+    const endBoundary = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+    const siblingsStart = Math.max(currentPage - siblingCount, boundaryCount + 2);
+    const siblingsEnd = Math.min(currentPage + siblingCount, totalPages - boundaryCount - 1);
+    const siblings = range(siblingsStart, siblingsEnd);
+    const showStartEllipsis = siblingsStart > boundaryCount + 2;
+    const showEndEllipsis = siblingsEnd < totalPages - boundaryCount - 1;
+    const out = [
+        ...startBoundary
+    ];
+    if (showStartEllipsis) {
+        out.push('ellipsis');
+    } else if (siblingsStart === boundaryCount + 2) {
+        // Single hidden page → fill it directly instead of an ellipsis.
+        out.push(boundaryCount + 1);
+    }
+    out.push(...siblings);
+    if (showEndEllipsis) {
+        out.push('ellipsis');
+    } else if (siblingsEnd === totalPages - boundaryCount - 1) {
+        out.push(totalPages - boundaryCount);
+    }
+    out.push(...endBoundary);
+    // Dedupe while preserving order (overlapping ranges produce duplicates
+    // when totalPages is small). Two distinct rules:
+    //   1. Number entries: keep only the first occurrence.
+    //   2. Ellipsis entries: collapse adjacent ellipses to one.
+    const seen = new Set();
+    const deduped = [];
+    let prevWasEllipsis = false;
+    for (const entry of out){
+        if (entry === 'ellipsis') {
+            if (!prevWasEllipsis) {
+                deduped.push('ellipsis');
+                prevWasEllipsis = true;
+            }
+            continue;
+        }
+        if (!seen.has(entry)) {
+            seen.add(entry);
+            deduped.push(entry);
+            prevWasEllipsis = false;
+        }
+    }
+    return deduped;
+}
+function range(start, end) {
+    if (end < start) return [];
+    return Array.from({
+        length: end - start + 1
+    }, (_, i)=>start + i);
+}
+
+const DEFAULT_LABELS$1 = {
+    first: 'First',
+    prev: 'Previous',
+    next: 'Next',
+    last: 'Last',
+    page: 'Page',
+    of: 'of',
+    showing: 'Showing',
+    perPage: 'per page',
+    goToPage: 'Go to page'
+};
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+    10,
+    20,
+    50,
+    100
+];
+/**
+ * Dashforge TW `<Pagination>` — controlled pagination primitive.
+ *
+ * Three variants:
+ *  - `default`  — page-size selector + summary + page numbers + nav buttons + jump input
+ *  - `compact`  — page numbers + nav buttons only (no summary, no selector, no jump)
+ *  - `minimal`  — "Page X of Y" + prev/next only
+ *
+ * Always controlled (no internal state besides the jump-input draft).
+ *
+ * A11Y:
+ *  - `<nav aria-label="Pagination">` root
+ *  - `aria-current="page"` on the active page button
+ *  - `aria-label` on every interactive element
+ *
+ * @example
+ * ```tsx
+ * const [page, setPage] = useState(1);
+ * const [pageSize, setPageSize] = useState(20);
+ *
+ * <Pagination
+ *   page={page}
+ *   pageSize={pageSize}
+ *   totalCount={1437}
+ *   onPageChange={setPage}
+ *   onPageSizeChange={setPageSize}
+ * />
+ * ```
+ */ function Pagination(props) {
+    var _slotProps_root, _slotProps_summary, _slotProps_summary1, _slotProps_list, _slotProps_navButton, _slotProps_navButton1, _slotProps_navButton2, _slotProps_navButton3, _slotProps_pageSizeSelector, _slotProps_jumpInput;
+    const { page, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, siblingCount = 1, boundaryCount = 1, showFirstLast = true, showJumpInput = true, disabled = false, labels: labelsProp, variant = 'default', size = 'md', sx, slotProps } = props;
+    const labels = _extends({}, DEFAULT_LABELS$1, labelsProp);
+    const v = paginationVariants({
+        variant,
+        size
+    });
+    const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    const safePage = Math.min(Math.max(1, page), totalPages);
+    const pages = computePageRange(safePage, totalPages, siblingCount, boundaryCount);
+    // Summary range
+    const firstItem = totalCount === 0 ? 0 : (safePage - 1) * pageSize + 1;
+    const lastItem = Math.min(safePage * pageSize, totalCount);
+    // Jump input local state (commit on Enter or blur)
+    const [jumpDraft, setJumpDraft] = useState('');
+    const goTo = useCallback((nextPage)=>{
+        if (disabled) return;
+        const clamped = Math.min(Math.max(1, nextPage), totalPages);
+        if (clamped !== safePage) onPageChange(clamped);
+    }, [
+        disabled,
+        totalPages,
+        safePage,
+        onPageChange
+    ]);
+    const commitJump = useCallback(()=>{
+        const parsed = Number(jumpDraft);
+        if (!Number.isFinite(parsed) || parsed < 1) {
+            setJumpDraft('');
+            return;
+        }
+        goTo(Math.floor(parsed));
+        setJumpDraft('');
+    }, [
+        jumpDraft,
+        goTo
+    ]);
+    const onJumpKeyDown = useCallback((e)=>{
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            commitJump();
+        }
+    }, [
+        commitJump
+    ]);
+    const handlePageSize = useCallback((e)=>{
+        if (!onPageSizeChange) return;
+        const next = Number(e.target.value);
+        if (Number.isFinite(next) && next > 0) onPageSizeChange(next);
+    }, [
+        onPageSizeChange
+    ]);
+    const isMinimal = variant === 'minimal';
+    return jsxs("nav", {
+        "aria-label": "Pagination",
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            variant === 'default' && jsxs("span", {
+                className: cn(v.summary(), slotProps == null ? void 0 : (_slotProps_summary = slotProps.summary) == null ? void 0 : _slotProps_summary.className),
+                children: [
+                    labels.showing,
+                    " ",
+                    firstItem,
+                    "-",
+                    lastItem,
+                    " ",
+                    labels.of,
+                    " ",
+                    totalCount
+                ]
+            }),
+            isMinimal && jsxs("span", {
+                className: cn(v.summary(), 'text-sm', slotProps == null ? void 0 : (_slotProps_summary1 = slotProps.summary) == null ? void 0 : _slotProps_summary1.className),
+                children: [
+                    labels.page,
+                    " ",
+                    safePage,
+                    " ",
+                    labels.of,
+                    " ",
+                    totalPages
+                ]
+            }),
+            jsxs("ul", {
+                className: cn(v.list(), slotProps == null ? void 0 : (_slotProps_list = slotProps.list) == null ? void 0 : _slotProps_list.className),
+                children: [
+                    showFirstLast && !isMinimal && jsx("li", {
+                        children: jsx("button", {
+                            type: "button",
+                            "aria-label": labels.first,
+                            disabled: disabled || safePage === 1,
+                            onClick: ()=>goTo(1),
+                            className: cn(v.navButton(), slotProps == null ? void 0 : (_slotProps_navButton = slotProps.navButton) == null ? void 0 : _slotProps_navButton.className),
+                            children: "\u00AB"
+                        })
+                    }),
+                    jsx("li", {
+                        children: jsx("button", {
+                            type: "button",
+                            "aria-label": labels.prev,
+                            disabled: disabled || safePage === 1,
+                            onClick: ()=>goTo(safePage - 1),
+                            className: cn(v.navButton(), slotProps == null ? void 0 : (_slotProps_navButton1 = slotProps.navButton) == null ? void 0 : _slotProps_navButton1.className),
+                            children: "\u2039"
+                        })
+                    }),
+                    !isMinimal && pages.map((entry, idx)=>{
+                        var _slotProps_ellipsis, _slotProps_pageButton, _slotProps_activeButton;
+                        return entry === 'ellipsis' ? jsx("li", {
+                            children: jsx("span", {
+                                "aria-hidden": "true",
+                                className: cn(v.ellipsis(), slotProps == null ? void 0 : (_slotProps_ellipsis = slotProps.ellipsis) == null ? void 0 : _slotProps_ellipsis.className),
+                                children: "\u2026"
+                            })
+                        }, `e-${idx}`) : jsx("li", {
+                            children: jsx("button", {
+                                type: "button",
+                                "aria-label": `${labels.page} ${entry}`,
+                                "aria-current": entry === safePage ? 'page' : undefined,
+                                disabled: disabled,
+                                onClick: ()=>goTo(entry),
+                                className: cn(v.pageButton(), entry === safePage && v.activeButton(), slotProps == null ? void 0 : (_slotProps_pageButton = slotProps.pageButton) == null ? void 0 : _slotProps_pageButton.className, entry === safePage && (slotProps == null ? void 0 : (_slotProps_activeButton = slotProps.activeButton) == null ? void 0 : _slotProps_activeButton.className)),
+                                children: entry
+                            })
+                        }, entry);
+                    }),
+                    jsx("li", {
+                        children: jsx("button", {
+                            type: "button",
+                            "aria-label": labels.next,
+                            disabled: disabled || safePage === totalPages,
+                            onClick: ()=>goTo(safePage + 1),
+                            className: cn(v.navButton(), slotProps == null ? void 0 : (_slotProps_navButton2 = slotProps.navButton) == null ? void 0 : _slotProps_navButton2.className),
+                            children: "\u203A"
+                        })
+                    }),
+                    showFirstLast && !isMinimal && jsx("li", {
+                        children: jsx("button", {
+                            type: "button",
+                            "aria-label": labels.last,
+                            disabled: disabled || safePage === totalPages,
+                            onClick: ()=>goTo(totalPages),
+                            className: cn(v.navButton(), slotProps == null ? void 0 : (_slotProps_navButton3 = slotProps.navButton) == null ? void 0 : _slotProps_navButton3.className),
+                            children: "\u00BB"
+                        })
+                    })
+                ]
+            }),
+            variant === 'default' && onPageSizeChange && jsxs("label", {
+                className: cn(v.pageSizeSelector(), slotProps == null ? void 0 : (_slotProps_pageSizeSelector = slotProps.pageSizeSelector) == null ? void 0 : _slotProps_pageSizeSelector.className),
+                children: [
+                    jsx("span", {
+                        className: "sr-only",
+                        children: labels.perPage
+                    }),
+                    jsx("select", {
+                        value: pageSize,
+                        onChange: handlePageSize,
+                        disabled: disabled,
+                        "aria-label": labels.perPage,
+                        className: cn('rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-2 py-1', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500'),
+                        children: pageSizeOptions.map((opt)=>jsx("option", {
+                                value: opt,
+                                children: opt
+                            }, opt))
+                    }),
+                    jsx("span", {
+                        children: labels.perPage
+                    })
+                ]
+            }),
+            variant === 'default' && showJumpInput && jsxs("label", {
+                className: "inline-flex items-center gap-2",
+                children: [
+                    jsx("span", {
+                        className: "sr-only",
+                        children: labels.goToPage
+                    }),
+                    jsx("input", {
+                        type: "number",
+                        min: 1,
+                        max: totalPages,
+                        value: jumpDraft,
+                        placeholder: labels.goToPage,
+                        disabled: disabled,
+                        onChange: (e)=>setJumpDraft(e.target.value),
+                        onKeyDown: onJumpKeyDown,
+                        onBlur: commitJump,
+                        "aria-label": labels.goToPage,
+                        className: cn(v.jumpInput(), slotProps == null ? void 0 : (_slotProps_jumpInput = slotProps.jumpInput) == null ? void 0 : _slotProps_jumpInput.className)
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+/**
+ * `<Table>` variant recipe.
+ *
+ * Slots:
+ *  - `root`              — outer wrapper
+ *  - `toolbar`           — search + filter chips row above table
+ *  - `search`            — search input
+ *  - `scroll`            — `<div class="overflow-auto">` wrapping the table
+ *  - `table`             — `<table>` element
+ *  - `thead`             — `<thead>` (sticky positioning here)
+ *  - `tbody`             — `<tbody>`
+ *  - `headerRow`         — `<tr>` inside `<thead>`
+ *  - `headerCell`        — `<th>` cell
+ *  - `headerCellButton`  — `<button>` inside sortable `<th>`
+ *  - `row`               — `<tr>` inside `<tbody>` (data row)
+ *  - `cell`              — `<td>` data cell
+ *  - `selectionCell`     — first `<td>` when selection mode active
+ *  - `expandToggleCell`  — second `<td>` when expandable active
+ *  - `expandedRow`       — full-width `<tr>` rendered after an expanded row
+ *  - `rowActionsCell`    — last `<td>` when `rowActions` provided
+ *  - `emptyState`        — placeholder when rows is empty
+ *  - `loadingOverlay`    — skeleton overlay when loading
+ *  - `bulkActionFooter`  — sticky footer with bulk actions
+ *
+ * Variant axes:
+ *  - `variant` — visual row-division style:
+ *      - `plain`    — minimal separators
+ *      - `lines`    — Stripe-style thin horizontal dividers (default)
+ *      - `striped`  — alternating row backgrounds (zebra)
+ *      - `bordered` — full cell borders
+ *      - `card`     — each row rendered as a separate surface card
+ *  - `size`    — `sm` / `md` (default) / `lg`
+ *  - `density` — `compact` (40px row) / `comfortable` (default 48px) / `spacious` (56px)
+ *
+ * Smart-default alignment (per column) is applied by the Table
+ * component code, NOT here — it depends on the runtime-detected
+ * value type, which the recipe doesn't see.
+ *
+ * **Dashforge identity rule** (memory: `feedback_dashforge_preset_is_identity`):
+ * This recipe uses NO `dark:` variants on the neutral palette. The
+ * `dashforgePreset()` CSS-variable swap auto-inverts neutral tokens
+ * (`bg-neutral-50` is light surface in light mode, dark surface in
+ * dark mode — same class, different physical color). Adding a
+ * `dark:` variant on neutral palette = DOUBLE inversion = breaks
+ * dark mode. The selected-row state uses the canonical LeftNav
+ * `itemActive` pattern (`bg-primary-100 text-primary-900 font-medium`),
+ * which works in both modes because the primary palette has no
+ * inversion (both `bg` and `text` resolve to the same physical
+ * colors regardless of mode → guaranteed contrast).
+ */ const tableVariants = tv({
+    slots: {
+        root: 'w-full',
+        toolbar: 'flex flex-wrap items-center gap-3 mb-3',
+        search: [
+            'inline-flex items-center gap-2',
+            'w-full max-w-sm rounded-md',
+            'border border-neutral-300',
+            // bg-neutral-50 auto-inverts via CSS var swap (light in light mode,
+            // dark in dark mode). Same semantic as TextField wrapper.
+            'bg-neutral-50',
+            'focus-within:ring-2 focus-within:ring-primary-500',
+            'transition-colors motion-reduce:transition-none'
+        ],
+        scroll: 'relative w-full overflow-auto rounded-md',
+        table: 'w-full caption-bottom text-left',
+        // thead matches the page surface (auto-inverts). When sticky the
+        // header sits opaque against the scroll content beneath it.
+        thead: 'bg-neutral-50',
+        tbody: '',
+        headerRow: '',
+        headerCell: [
+            // Less prominent than the body — secondary-text intent
+            // (auto-inverts: dark grey in light mode, light grey in dark).
+            'text-neutral-700',
+            'font-semibold whitespace-nowrap select-none',
+            'border-b border-neutral-200'
+        ],
+        headerCellButton: [
+            'group inline-flex items-center gap-1 select-none',
+            // hover increases prominence (auto-inverts).
+            'hover:text-neutral-900',
+            'focus:outline-none focus-visible:underline',
+            'transition-colors motion-reduce:transition-none'
+        ],
+        row: [
+            'group/row transition-colors motion-reduce:transition-none',
+            // bg-neutral-100 = "elevated above surface" in both modes via
+            // auto-inversion. Slightly visible against the table bg.
+            'hover:bg-neutral-100',
+            // Canonical LeftNav `itemActive` pattern — primary palette
+            // doesn't invert, so dark-navy text on light-blue bg in BOTH
+            // modes. Guaranteed contrast.
+            'data-[selected=true]:bg-primary-100',
+            'data-[selected=true]:text-primary-900',
+            'data-[selected=true]:font-medium'
+        ],
+        cell: [
+            // Auto-inverts — dark text in light mode, light text in dark mode.
+            'text-neutral-900',
+            'border-b border-neutral-200',
+            'align-middle'
+        ],
+        selectionCell: 'w-10 text-center',
+        expandToggleCell: 'w-10 text-center',
+        // Expanded panel uses one tier of elevation above the page surface.
+        expandedRow: 'bg-neutral-100',
+        rowActionsCell: [
+            'w-12 text-right',
+            // Row actions hidden until row is hovered or focus-within
+            // (Pencil & Paper UX pattern: reveal-on-hover reduces visual density).
+            'opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100',
+            'transition-opacity motion-reduce:transition-none'
+        ],
+        emptyState: [
+            'py-12 text-center text-neutral-500'
+        ],
+        loadingOverlay: [
+            'pointer-events-none'
+        ],
+        bulkActionFooter: [
+            'sticky bottom-0 z-20',
+            'flex flex-wrap items-center justify-between gap-3',
+            'px-3 py-2 mt-0',
+            'border-t border-neutral-200',
+            // Surface-elevated bg + shadow ladder.
+            'bg-neutral-50 shadow-md'
+        ]
+    },
+    variants: {
+        variant: {
+            plain: {},
+            lines: {
+            },
+            striped: {
+                // bg-neutral-100/60 = subtle elevation tier (auto-inverts).
+                row: 'odd:bg-neutral-100/60'
+            },
+            bordered: {
+                table: 'border border-neutral-200',
+                cell: 'border-r last:border-r-0 border-neutral-200',
+                headerCell: 'border-r last:border-r-0 border-neutral-200'
+            },
+            card: {
+                scroll: 'overflow-visible',
+                table: 'border-separate border-spacing-y-2',
+                row: [
+                    'rounded-lg shadow-sm',
+                    // Each row becomes an elevated card above the surface.
+                    'bg-neutral-50'
+                ],
+                cell: 'border-b-0 first:rounded-l-lg last:rounded-r-lg',
+                headerCell: 'border-b-0'
+            }
+        },
+        size: {
+            sm: {
+                headerCell: 'text-xs',
+                cell: 'text-xs',
+                search: 'text-xs'
+            },
+            md: {
+                headerCell: 'text-sm',
+                cell: 'text-sm',
+                search: 'text-sm'
+            },
+            lg: {
+                headerCell: 'text-base',
+                cell: 'text-base',
+                search: 'text-base'
+            }
+        },
+        density: {
+            // Pencil & Paper UX research: 40px / 48px / 56px row height.
+            compact: {
+                headerCell: 'px-2 py-1',
+                cell: 'px-2 py-1'
+            },
+            comfortable: {
+                headerCell: 'px-3 py-2',
+                cell: 'px-3 py-2'
+            },
+            spacious: {
+                headerCell: 'px-4 py-3',
+                cell: 'px-4 py-3'
+            }
+        },
+        stickyHeader: {
+            true: {
+                thead: 'sticky top-0 z-10'
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        variant: 'lines',
+        size: 'md',
+        density: 'comfortable',
+        stickyHeader: true
+    }
+});
+
+/**
+ * Generic "controllable" state hook — switches between controlled
+ * (via parent-supplied value + setter) and uncontrolled (internal
+ * `useState`).
+ *
+ * - If `controlledValue !== undefined`, the hook is in **controlled**
+ *   mode: the internal state is ignored; the returned setter calls
+ *   `onControlledChange` only.
+ * - Otherwise it's in **uncontrolled** mode: internal `useState`,
+ *   defaulting to `defaultValue`. The optional `onControlledChange`
+ *   is still fired on every change so the parent can react.
+ *
+ * The control mode is determined per-render. Mixing modes (passing
+ * `controlledValue` undefined sometimes) is a consumer bug — we don't
+ * try to "remember" the last mode (React's rules-of-hooks make that
+ * unsafe).
+ */ function useControllableState(args) {
+    const { controlledValue, defaultValue, onChange } = args;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    // Stable ref to `onChange` so the setter doesn't change identity
+    // every render (consumer can pass an inline lambda safely).
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const setValue = useCallback((next)=>{
+        const resolved = typeof next === 'function' ? next(value) : next;
+        if (!isControlled) {
+            setUncontrolledValue(resolved);
+        }
+        onChangeRef.current == null ? void 0 : onChangeRef.current.call(onChangeRef, resolved);
+    }, [
+        isControlled,
+        value
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+
+/**
+ * Returns a debounced version of `value` — only updates after `delayMs`
+ * of no further changes. Used by the search input so we don't re-filter
+ * the entire row set on every keystroke.
+ *
+ * `delayMs <= 0` short-circuits to the input value (no debounce —
+ * useful for tests).
+ */ function useDebouncedValue(value, delayMs) {
+    const [debounced, setDebounced] = useState(value);
+    useEffect(()=>{
+        if (delayMs <= 0) {
+            setDebounced(value);
+            return;
+        }
+        const timer = setTimeout(()=>setDebounced(value), delayMs);
+        return ()=>clearTimeout(timer);
+    }, [
+        value,
+        delayMs
+    ]);
+    return debounced;
+}
+
+/**
+ * Walk a dotted path through an object and return the value, or
+ * `undefined` if any segment is missing / nullish.
+ *
+ * Bug fix from the MUI-side Table (Sprint 4.1 motivation): the
+ * existing wrapper typed `field: NestedKeyOf<T>` but performed a
+ * flat `row[col.field]` lookup at runtime — nested keys silently
+ * returned `undefined`. This helper makes the runtime match the
+ * type contract.
+ *
+ * @example
+ * ```ts
+ * getNestedValue({ user: { name: 'Jane' } }, 'user.name')  // 'Jane'
+ * getNestedValue({ user: null }, 'user.name')              // undefined
+ * getNestedValue({}, 'a.b.c')                              // undefined
+ * getNestedValue({ a: { b: 0 } }, 'a.b')                   // 0 (NOT undefined)
+ * ```
+ */ function getNestedValue(row, path) {
+    if (!path) return undefined;
+    const segments = path.split('.');
+    let current = row;
+    for (const segment of segments){
+        if (current == null) return undefined;
+        if (typeof current !== 'object') return undefined;
+        current = current[segment];
+    }
+    return current;
+}
+
+/**
+ * Stringify any value into a search-comparable form. Handles all
+ * the edge cases that bit the MUI-side Table:
+ *
+ *   - `null` / `undefined`      → `''`
+ *   - `string`                  → as-is
+ *   - `number` / `bigint`       → `String(value)`
+ *   - `boolean`                 → `'true'` / `'false'`
+ *   - `Date`                    → ISO 8601
+ *   - `Array` / object          → `JSON.stringify` (best effort)
+ */ function stringifyForSearch(value) {
+    if (value == null) return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number' || typeof value === 'bigint') return String(value);
+    if (typeof value === 'boolean') return value ? 'true' : 'false';
+    if (value instanceof Date) return value.toISOString();
+    if (Array.isArray(value)) {
+        try {
+            return value.map(stringifyForSearch).join(' ');
+        } catch (unused) {
+            return '';
+        }
+    }
+    if (typeof value === 'object') {
+        try {
+            return JSON.stringify(value);
+        } catch (unused) {
+            return '';
+        }
+    }
+    return String(value);
+}
+/**
+ * Filters `rows` by `query` against the columns flagged
+ * `searchable: true`. Empty / whitespace-only query is a no-op
+ * (returns the original rows).
+ *
+ * Case-insensitive substring match. The caller is responsible for
+ * debouncing the input (use `useDebouncedValue`).
+ */ function useTableSearch(rows, cols, query) {
+    return useMemo(()=>{
+        const trimmed = query.trim();
+        if (!trimmed) return rows;
+        const needle = trimmed.toLowerCase();
+        const searchableCols = cols.filter((c)=>c.searchable);
+        if (searchableCols.length === 0) return rows;
+        return rows.filter((row)=>searchableCols.some((col)=>stringifyForSearch(getNestedValue(row, col.field)).toLowerCase().includes(needle)));
+    }, [
+        rows,
+        cols,
+        query
+    ]);
+}
+
+/**
+ * Filters `rows` by the per-column filter model. v1 only supports
+ * the `contains` operator (text substring) — additional ops
+ * (`equals`, `in`, `gte`, `lte`, `between`, `before`, `after`)
+ * land in v1-bis once the filter UI surface for each shape is
+ * fleshed out.
+ *
+ * AND semantics across columns: a row must match EVERY active
+ * filter. Within a single filter, the op decides the predicate.
+ */ function useTableFilter(rows, filterModel) {
+    return useMemo(()=>{
+        if (!filterModel || filterModel.length === 0) return rows;
+        return rows.filter((row)=>filterModel.every((filter)=>{
+                const value = getNestedValue(row, filter.field);
+                const stringValue = stringifyForSearch(value).toLowerCase();
+                const needle = filter.value.trim().toLowerCase();
+                if (!needle) return true; // empty filter == no-op
+                switch(filter.op){
+                    case 'contains':
+                        return stringValue.includes(needle);
+                    default:
+                        return true;
+                }
+            }));
+    }, [
+        rows,
+        filterModel
+    ]);
+}
+
+/**
+ * Default comparator. Handles the common primitive types in a
+ * sensible way:
+ *
+ *  - `null` / `undefined` always sort LAST (stable across asc/desc)
+ *  - `number` / `bigint`         → numeric comparison
+ *  - `string`                    → locale-aware compare via `Intl.Collator`
+ *  - `Date` / ISO-string-date    → numeric compare on epoch ms
+ *  - `boolean`                   → `false < true`
+ *  - mixed types fall back to string compare
+ *
+ * The locale collator is created once per call (cheap; cached
+ * upstream via memoization).
+ */ function defaultCompare(a, b) {
+    // Numbers
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+    if (typeof a === 'bigint' && typeof b === 'bigint') {
+        return a < b ? -1 : a > b ? 1 : 0;
+    }
+    // Dates
+    if (a instanceof Date && b instanceof Date) {
+        return a.getTime() - b.getTime();
+    }
+    // Booleans
+    if (typeof a === 'boolean' && typeof b === 'boolean') {
+        return a === b ? 0 : a ? 1 : -1;
+    }
+    // Strings (incl. ISO date strings — natural lexical ordering matches chronology)
+    if (typeof a === 'string' && typeof b === 'string') {
+        return a.localeCompare(b, undefined, {
+            numeric: true,
+            sensitivity: 'base'
+        });
+    }
+    // Fallback: stringify and compare
+    return String(a).localeCompare(String(b), undefined, {
+        numeric: true,
+        sensitivity: 'base'
+    });
+}
+/**
+ * Applies the `sortModel` to `rows`. Returns a NEW sorted array
+ * (does not mutate input). Stable sort guaranteed by the underlying
+ * `Array.prototype.sort` in modern engines.
+ *
+ * Multi-column sort: items earlier in `sortModel` have higher
+ * precedence. Equal values fall through to the next sort item; if
+ * all sort items tie, the original order is preserved (stable).
+ */ function useTableSort(rows, cols, sortModel) {
+    return useMemo(()=>{
+        if (!sortModel || sortModel.length === 0) return rows;
+        const sortConfigs = sortModel.map((item)=>{
+            const col = cols.find((c)=>c.field === item.field);
+            if (!col || !col.sortable) return null;
+            const customCompare = typeof col.sortable === 'function' ? col.sortable : undefined;
+            return {
+                item,
+                col,
+                customCompare
+            };
+        }).filter((x)=>x != null);
+        if (sortConfigs.length === 0) return rows;
+        // Decorate-sort-undecorate for stability across engines.
+        //
+        // Per sort item: null/undefined values always sort LAST, regardless
+        // of direction. This invariant lives outside the comparator so it's
+        // not inverted by `-cmp` when direction is `desc`. (Without this
+        // separation, `desc` flipped null-handling and placed nulls FIRST,
+        // which broke user expectations — fixed in the v1 implementation.)
+        return [
+            ...rows
+        ].sort((a, b)=>{
+            for (const { item, customCompare } of sortConfigs){
+                const aVal = customCompare ? a : getNestedValue(a, item.field);
+                const bVal = customCompare ? b : getNestedValue(b, item.field);
+                // Null-last (direction-independent)
+                const aNull = aVal == null;
+                const bNull = bVal == null;
+                if (aNull && bNull) continue;
+                if (aNull) return 1;
+                if (bNull) return -1;
+                const cmp = customCompare ? customCompare(a, b) : defaultCompare(aVal, bVal);
+                if (cmp !== 0) {
+                    return item.direction === 'desc' ? -cmp : cmp;
+                }
+            }
+            return 0;
+        });
+    }, [
+        rows,
+        cols,
+        sortModel
+    ]);
+}
+/**
+ * Three-state sort cycler: `none` → `asc` → `desc` → `none`.
+ *
+ * Used by the header click handler. Returns the next sort model
+ * to apply, given the current model + the clicked field + whether
+ * the user is multi-sorting (shift key).
+ */ function cycleSortFor(current, field, multi) {
+    const existing = current.find((s)=>s.field === field);
+    const nextDirection = !existing ? 'asc' : existing.direction === 'asc' ? 'desc' : null;
+    if (multi) {
+        // Multi-sort: keep other entries, update / add / remove this one.
+        const rest = current.filter((s)=>s.field !== field);
+        if (nextDirection == null) return rest;
+        return [
+            ...rest,
+            {
+                field,
+                direction: nextDirection
+            }
+        ];
+    }
+    // Single-sort: replace the whole model.
+    if (nextDirection == null) return [];
+    return [
+        {
+            field,
+            direction: nextDirection
+        }
+    ];
+}
+
+/**
+ * Selection logic helper. Given the controllable selection state +
+ * the setter (from `useControllableState`), exposes ergonomic
+ * helpers the Table calls from its render path.
+ *
+ *  - `single` mode: at most one row selected. Toggling another
+ *    replaces the previous.
+ *  - `multiple` mode: any subset selectable; toggling adds/removes.
+ *  - `none` mode: every toggle is a no-op (the Table shouldn't
+ *    render the checkbox cells anyway, but this is defensive).
+ */ function useTableSelection(mode, selectedRowIds, setSelectedRowIds) {
+    const selectedSet = useMemo(()=>new Set(selectedRowIds), [
+        selectedRowIds
+    ]);
+    const isSelected = useCallback((rowId)=>selectedSet.has(rowId), [
+        selectedSet
+    ]);
+    const toggleRow = useCallback((rowId)=>{
+        if (mode === 'none') return;
+        if (mode === 'single') {
+            setSelectedRowIds(selectedSet.has(rowId) ? [] : [
+                rowId
+            ]);
+            return;
+        }
+        // multiple
+        setSelectedRowIds((prev)=>{
+            const next = new Set(prev);
+            if (next.has(rowId)) next.delete(rowId);
+            else next.add(rowId);
+            return [
+                ...next
+            ];
+        });
+    }, [
+        mode,
+        selectedSet,
+        setSelectedRowIds
+    ]);
+    const toggleAll = useCallback((allRowIds)=>{
+        if (mode !== 'multiple') return;
+        const allSelected = allRowIds.every((id)=>selectedSet.has(id));
+        setSelectedRowIds(allSelected ? [] : [
+            ...allRowIds
+        ]);
+    }, [
+        mode,
+        selectedSet,
+        setSelectedRowIds
+    ]);
+    const clearSelection = useCallback(()=>{
+        setSelectedRowIds([]);
+    }, [
+        setSelectedRowIds
+    ]);
+    const isAllSelected = useCallback((allRowIds)=>{
+        if (allRowIds.length === 0) return false;
+        return allRowIds.every((id)=>selectedSet.has(id));
+    }, [
+        selectedSet
+    ]);
+    const isIndeterminate = useCallback((allRowIds)=>{
+        if (allRowIds.length === 0) return false;
+        const some = allRowIds.some((id)=>selectedSet.has(id));
+        const all = allRowIds.every((id)=>selectedSet.has(id));
+        return some && !all;
+    }, [
+        selectedSet
+    ]);
+    return {
+        selectedRowIds,
+        isSelected,
+        toggleRow,
+        toggleAll,
+        clearSelection,
+        isAllSelected,
+        isIndeterminate
+    };
+}
+
+/**
+ * Auto-detects the primitive type of each column by scanning the
+ * first non-null value across the supplied rows. Drives smart
+ * defaults for `align` and `monospace` on the cell render path.
+ *
+ * Scans only the first N rows (default 50) for performance — if the
+ * dataset's first 50 rows are unrepresentative, the consumer can
+ * override per-column via explicit `align` / `monospace` props.
+ *
+ * Returns `Map<columnField, inferredType>`.
+ */ function useColumnAutoDetect(rows, cols, sampleSize = 50) {
+    return useMemo(()=>{
+        const result = new Map();
+        const sample = rows.slice(0, sampleSize);
+        for (const col of cols){
+            const field = col.field;
+            let inferred = 'unknown';
+            for (const row of sample){
+                const value = getNestedValue(row, field);
+                if (value == null) continue;
+                inferred = inferType(value);
+                break; // first non-null wins
+            }
+            result.set(field, inferred);
+        }
+        return result;
+    }, [
+        rows,
+        cols,
+        sampleSize
+    ]);
+}
+function inferType(value) {
+    if (typeof value === 'number') return 'number';
+    if (typeof value === 'boolean') return 'boolean';
+    if (value instanceof Date) return 'date';
+    if (typeof value === 'string') {
+        // Heuristic: ISO date string (YYYY-MM-DD[T...]) → 'date'
+        if (/^\d{4}-\d{2}-\d{2}/.test(value)) return 'date';
+        return 'string';
+    }
+    return 'unknown';
+}
+/**
+ * Resolves the effective `align` for a column, honoring explicit
+ * `col.align` first and falling back to the inferred type.
+ */ function resolveAlign(col, inferred) {
+    if (col.align) return col.align;
+    switch(inferred){
+        case 'number':
+            return 'right';
+        case 'boolean':
+            return 'center';
+        default:
+            return 'left';
+    }
+}
+/**
+ * Resolves the effective `tabularNums` flag for a column.
+ *
+ * `tabular-nums` is a `font-variant-numeric` rule that makes every
+ * digit occupy the same width — it does NOT change the font family.
+ * Auto-applied for `number` and `date` columns so currency values
+ * and ISO dates align cleanly. Explicit `col.tabularNums` wins.
+ */ function resolveTabularNums(col, inferred) {
+    if (col.tabularNums !== undefined) return col.tabularNums;
+    return inferred === 'number' || inferred === 'date';
+}
+/**
+ * Resolves the effective `monospace` flag for a column.
+ *
+ * `font-mono` changes the font FAMILY to a monospace stack, which
+ * would override the consumer's theme `font-sans`. The library
+ * never auto-applies it — only an explicit `col.monospace: true`
+ * opts in. Consumers wanting a custom mono stack configure it
+ * through Tailwind's `theme.extend.fontFamily.mono` in their own
+ * preset (the dashforgePreset does not own the `fontFamily` axis).
+ */ function resolveMonospace(col) {
+    return col.monospace === true;
+}
+
+const DEFAULT_LABELS = {
+    searchPlaceholder: 'Search...',
+    noData: 'No data',
+    loading: 'Loading…',
+    ariaSortNone: 'Not sorted. Click to sort ascending.',
+    ariaSortAscending: 'Sorted ascending. Click to sort descending.',
+    ariaSortDescending: 'Sorted descending. Click to clear sort.',
+    ariaSelectRow: 'Select row',
+    ariaSelectAllRows: 'Select all rows',
+    ariaExpandRow: 'Expand row',
+    ariaCollapseRow: 'Collapse row',
+    selectedCount: '{count} selected',
+    clearSelection: 'Clear selection',
+    filterColumn: 'Filter',
+    filterApply: 'Apply',
+    filterClear: 'Clear',
+    density: 'Density',
+    densityCompact: 'Compact',
+    densityComfortable: 'Comfortable',
+    densitySpacious: 'Spacious'
+};
+const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
+/**
+ * Dashforge TW `<Table>` — declarative-first, market-grounded table.
+ *
+ * Design references:
+ *  - Visual: Stripe (clean line dividers, hover row actions, sticky header)
+ *  - Density: Pencil & Paper UX research (compact / comfortable / spacious)
+ *  - A11Y: W3C WAI Table tutorial (semantic `<table>`, scope, aria-sort)
+ *  - Column model: extended from Dashforge MUI Table existing API
+ *
+ * Smart defaults: column types auto-detected → numbers right-aligned
+ * + tabular-nums, dates monospace, booleans center-aligned. Override
+ * via explicit `align` / `monospace` per column.
+ *
+ * State (sort / search / filter / selection / expansion) is internal
+ * by default; pass the controlled prop + matching change handler to
+ * lift state up — same pattern as `<TextField>` value.
+ *
+ * i18n: pass `header: t('users.name')` for column headers; pass
+ * `labels={{ searchPlaceholder: t('...'), ... }}` for internal default
+ * strings.
+ */ function Table(props) {
+    var _slotProps_root, _slotProps_toolbar, _slotProps_search, _slotProps_scroll, _slotProps_table, _slotProps_thead, _slotProps_headerRow, _slotProps_headerCell, _slotProps_selectionCell, _slotProps_headerCell1, _slotProps_expandToggleCell, _slotProps_headerCell2, _slotProps_tbody, _slotProps_row, _slotProps_cell, _slotProps_emptyState, _slotProps_bulkActionFooter;
+    const { rows, cols, getRowId = DEFAULT_GET_ROW_ID, // State props (controllable)
+    sortModel: sortModelProp, onSortChange, defaultSortModel, enableSearch = false, searchQuery: searchQueryProp, onSearchQueryChange, searchPlaceholder, searchDebounceMs = 200, filterModel: filterModelProp, onFilterChange, rowSelection = 'none', selectedRowIds: selectedRowIdsProp, onSelectionChange, bulkActions, expandable, rowActions, loading = false, loadingRowCount = 5, emptyState, stickyHeader = true, caption, showCaption = false, access: tableAccess, labels: labelsProp, variant, size, density, sx, slotProps } = props;
+    const labels = _extends({}, DEFAULT_LABELS, labelsProp);
+    const tableAccessState = useAccessState(tableAccess);
+    // ───── Controllable state machinery ─────
+    const [sortModel, setSortModel] = useControllableState({
+        controlledValue: sortModelProp,
+        defaultValue: defaultSortModel != null ? defaultSortModel : [],
+        onChange: onSortChange
+    });
+    const [searchQuery, setSearchQuery] = useControllableState({
+        controlledValue: searchQueryProp,
+        defaultValue: '',
+        onChange: onSearchQueryChange
+    });
+    const filterModel = filterModelProp != null ? filterModelProp : [];
+    const [selectedRowIds, setSelectedRowIds] = useControllableState({
+        controlledValue: selectedRowIdsProp,
+        defaultValue: [],
+        onChange: onSelectionChange
+    });
+    const [expandedRowIds, setExpandedRowIds] = useControllableState({
+        controlledValue: expandable == null ? void 0 : expandable.expandedRowIds,
+        defaultValue: [],
+        onChange: expandable == null ? void 0 : expandable.onExpandChange
+    });
+    // ───── RBAC: filter out hidden columns ─────
+    const visibleCols = useMemo(()=>cols.filter((col)=>!col.access || col.access.onUnauthorized !== 'hide'), [
+        cols
+    ]);
+    // ───── Smart-default column types ─────
+    const columnTypes = useColumnAutoDetect(rows, visibleCols);
+    // ───── Pipeline: search → filter → sort ─────
+    const debouncedSearchQuery = useDebouncedValue(searchQuery, searchDebounceMs);
+    const searchedRows = useTableSearch(rows, visibleCols, debouncedSearchQuery);
+    const filteredRows = useTableFilter(searchedRows, filterModel);
+    const sortedRows = useTableSort(filteredRows, visibleCols, sortModel);
+    // ───── Selection helpers ─────
+    const visibleRowIds = useMemo(()=>sortedRows.map((row, idx)=>getRowId(row, idx)), [
+        sortedRows,
+        getRowId
+    ]);
+    const selection = useTableSelection(rowSelection, selectedRowIds, setSelectedRowIds);
+    const selectedRows = useMemo(()=>sortedRows.filter((row, idx)=>selection.isSelected(getRowId(row, idx))), [
+        sortedRows,
+        selection,
+        getRowId
+    ]);
+    // ───── Variant recipe ─────
+    const v = tableVariants({
+        variant,
+        size,
+        density,
+        stickyHeader
+    });
+    // ───── Render ─────
+    if (!tableAccessState.visible) return null;
+    const isTableInteractive = !tableAccessState.disabled;
+    const showSelectionColumn = rowSelection !== 'none';
+    const showExpandColumn = expandable != null;
+    const showRowActionsColumn = rowActions != null;
+    const totalColumnCount = visibleCols.length + (showSelectionColumn ? 1 : 0) + (showExpandColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
+    return jsxs("div", {
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        "data-disabled": !isTableInteractive ? 'true' : undefined,
+        children: [
+            enableSearch && jsx("div", {
+                className: cn(v.toolbar(), slotProps == null ? void 0 : (_slotProps_toolbar = slotProps.toolbar) == null ? void 0 : _slotProps_toolbar.className),
+                children: jsxs("label", {
+                    className: cn(v.search(), slotProps == null ? void 0 : (_slotProps_search = slotProps.search) == null ? void 0 : _slotProps_search.className),
+                    children: [
+                        jsx("span", {
+                            className: "sr-only",
+                            children: labels.searchPlaceholder
+                        }),
+                        jsx(SearchIcon, {
+                            className: "ml-2 shrink-0 text-neutral-500"
+                        }),
+                        jsx("input", {
+                            type: "text",
+                            value: searchQuery,
+                            onChange: (e)=>setSearchQuery(e.target.value),
+                            placeholder: searchPlaceholder != null ? searchPlaceholder : labels.searchPlaceholder,
+                            disabled: !isTableInteractive,
+                            className: cn('flex-1 bg-transparent border-0 outline-none', 'px-2 py-1.5', // placeholder color auto-inverts via the CSS-var preset;
+                            // no `dark:` variant needed on neutral palette.
+                            'placeholder:text-neutral-400', 'disabled:opacity-50 disabled:cursor-not-allowed')
+                        })
+                    ]
+                })
+            }),
+            jsx("div", {
+                className: cn(v.scroll(), slotProps == null ? void 0 : (_slotProps_scroll = slotProps.scroll) == null ? void 0 : _slotProps_scroll.className),
+                children: jsxs("table", {
+                    className: cn(v.table(), slotProps == null ? void 0 : (_slotProps_table = slotProps.table) == null ? void 0 : _slotProps_table.className),
+                    children: [
+                        caption != null && jsx("caption", {
+                            className: cn(!showCaption && 'sr-only', 'py-2 text-sm text-neutral-500'),
+                            children: caption
+                        }),
+                        jsx("thead", {
+                            className: cn(v.thead(), slotProps == null ? void 0 : (_slotProps_thead = slotProps.thead) == null ? void 0 : _slotProps_thead.className),
+                            children: jsxs("tr", {
+                                className: cn(v.headerRow(), slotProps == null ? void 0 : (_slotProps_headerRow = slotProps.headerRow) == null ? void 0 : _slotProps_headerRow.className),
+                                children: [
+                                    showSelectionColumn && jsx("th", {
+                                        scope: "col",
+                                        className: cn(v.headerCell(), v.selectionCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className, slotProps == null ? void 0 : (_slotProps_selectionCell = slotProps.selectionCell) == null ? void 0 : _slotProps_selectionCell.className),
+                                        children: rowSelection === 'multiple' && jsx("input", {
+                                            type: "checkbox",
+                                            "aria-label": labels.ariaSelectAllRows,
+                                            checked: selection.isAllSelected(visibleRowIds),
+                                            ref: (el)=>{
+                                                if (el) el.indeterminate = selection.isIndeterminate(visibleRowIds);
+                                            },
+                                            onChange: ()=>selection.toggleAll(visibleRowIds),
+                                            disabled: !isTableInteractive,
+                                            className: "cursor-pointer"
+                                        })
+                                    }),
+                                    showExpandColumn && jsx("th", {
+                                        scope: "col",
+                                        "aria-hidden": "true",
+                                        className: cn(v.headerCell(), v.expandToggleCell(), slotProps == null ? void 0 : (_slotProps_headerCell1 = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell1.className, slotProps == null ? void 0 : (_slotProps_expandToggleCell = slotProps.expandToggleCell) == null ? void 0 : _slotProps_expandToggleCell.className)
+                                    }),
+                                    visibleCols.map((col)=>{
+                                        var _slotProps_headerCell;
+                                        return jsx(HeaderCell, {
+                                            col: col,
+                                            sortModel: sortModel,
+                                            onSortClick: (e)=>handleSortClick(col, e, sortModel, setSortModel),
+                                            inferredType: columnTypes.get(col.field),
+                                            labels: labels,
+                                            className: cn(v.headerCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className),
+                                            buttonClassName: v.headerCellButton(),
+                                            disabled: !isTableInteractive
+                                        }, col.field);
+                                    }),
+                                    showRowActionsColumn && jsx("th", {
+                                        scope: "col",
+                                        "aria-hidden": "true",
+                                        className: cn(v.headerCell(), 'w-12', slotProps == null ? void 0 : (_slotProps_headerCell2 = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell2.className)
+                                    })
+                                ]
+                            })
+                        }),
+                        jsx("tbody", {
+                            className: cn(v.tbody(), slotProps == null ? void 0 : (_slotProps_tbody = slotProps.tbody) == null ? void 0 : _slotProps_tbody.className),
+                            children: loading ? renderLoadingRows({
+                                count: loadingRowCount,
+                                visibleCols,
+                                showSelectionColumn,
+                                showExpandColumn,
+                                showRowActionsColumn,
+                                rowClass: cn(v.row(), slotProps == null ? void 0 : (_slotProps_row = slotProps.row) == null ? void 0 : _slotProps_row.className),
+                                cellClass: cn(v.cell(), slotProps == null ? void 0 : (_slotProps_cell = slotProps.cell) == null ? void 0 : _slotProps_cell.className)
+                            }) : sortedRows.length === 0 ? renderEmptyState({
+                                totalColumnCount,
+                                emptyState,
+                                fallback: labels.noData,
+                                cellClass: cn(v.cell(), v.emptyState(), slotProps == null ? void 0 : (_slotProps_emptyState = slotProps.emptyState) == null ? void 0 : _slotProps_emptyState.className)
+                            }) : sortedRows.map((row, idx)=>{
+                                var _slotProps_row, _slotProps_cell, _slotProps_cell1, _slotProps_selectionCell, _slotProps_cell2, _slotProps_expandToggleCell, _slotProps_cell3, _slotProps_rowActionsCell, _slotProps_expandedRow;
+                                const rowId = getRowId(row, idx);
+                                const isSelected = selection.isSelected(rowId);
+                                const isExpanded = expandedRowIds.includes(rowId);
+                                return jsx(Row, {
+                                    row: row,
+                                    rowId: rowId,
+                                    rowIndex: idx,
+                                    isSelected: isSelected,
+                                    isExpanded: isExpanded,
+                                    visibleCols: visibleCols,
+                                    columnTypes: columnTypes,
+                                    rowSelection: rowSelection,
+                                    showSelectionColumn: showSelectionColumn,
+                                    showExpandColumn: showExpandColumn,
+                                    showRowActionsColumn: showRowActionsColumn,
+                                    expandable: expandable,
+                                    rowActions: rowActions,
+                                    labels: labels,
+                                    toggleRow: selection.toggleRow,
+                                    toggleExpand: (id)=>setExpandedRowIds((prev)=>prev.includes(id) ? prev.filter((p)=>p !== id) : [
+                                                ...prev,
+                                                id
+                                            ]),
+                                    isInteractive: isTableInteractive,
+                                    rowClass: cn(v.row(), slotProps == null ? void 0 : (_slotProps_row = slotProps.row) == null ? void 0 : _slotProps_row.className),
+                                    cellClass: cn(v.cell(), slotProps == null ? void 0 : (_slotProps_cell = slotProps.cell) == null ? void 0 : _slotProps_cell.className),
+                                    selectionCellClass: cn(v.cell(), v.selectionCell(), slotProps == null ? void 0 : (_slotProps_cell1 = slotProps.cell) == null ? void 0 : _slotProps_cell1.className, slotProps == null ? void 0 : (_slotProps_selectionCell = slotProps.selectionCell) == null ? void 0 : _slotProps_selectionCell.className),
+                                    expandToggleCellClass: cn(v.cell(), v.expandToggleCell(), slotProps == null ? void 0 : (_slotProps_cell2 = slotProps.cell) == null ? void 0 : _slotProps_cell2.className, slotProps == null ? void 0 : (_slotProps_expandToggleCell = slotProps.expandToggleCell) == null ? void 0 : _slotProps_expandToggleCell.className),
+                                    rowActionsCellClass: cn(v.cell(), v.rowActionsCell(), slotProps == null ? void 0 : (_slotProps_cell3 = slotProps.cell) == null ? void 0 : _slotProps_cell3.className, slotProps == null ? void 0 : (_slotProps_rowActionsCell = slotProps.rowActionsCell) == null ? void 0 : _slotProps_rowActionsCell.className),
+                                    expandedRowClass: cn(v.expandedRow(), slotProps == null ? void 0 : (_slotProps_expandedRow = slotProps.expandedRow) == null ? void 0 : _slotProps_expandedRow.className),
+                                    totalColumnCount: totalColumnCount
+                                }, rowId);
+                            })
+                        })
+                    ]
+                })
+            }),
+            bulkActions && selectedRows.length > 0 && jsxs("div", {
+                className: cn(v.bulkActionFooter(), slotProps == null ? void 0 : (_slotProps_bulkActionFooter = slotProps.bulkActionFooter) == null ? void 0 : _slotProps_bulkActionFooter.className),
+                role: "region",
+                "aria-label": labels.selectedCount.replace('{count}', String(selectedRows.length)),
+                children: [
+                    jsx("span", {
+                        className: "text-sm text-neutral-700",
+                        children: labels.selectedCount.replace('{count}', String(selectedRows.length))
+                    }),
+                    jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            bulkActions(selectedRows),
+                            jsx("button", {
+                                type: "button",
+                                onClick: selection.clearSelection,
+                                className: cn(// text-neutral-500 → text-neutral-900 on hover; both auto-invert.
+                                'text-sm text-neutral-500 hover:text-neutral-900', 'underline-offset-2 hover:underline', 'focus:outline-none focus-visible:underline'),
+                                children: labels.clearSelection
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+// ───── Header cell (with sort button) ─────
+function HeaderCell(props) {
+    const { col, sortModel, onSortClick, inferredType, labels, className, buttonClassName, disabled } = props;
+    const align = resolveAlign(col, inferredType);
+    const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+    const sortEntry = sortModel.find((s)=>s.field === col.field);
+    const ariaSort = (sortEntry == null ? void 0 : sortEntry.direction) === 'asc' ? 'ascending' : (sortEntry == null ? void 0 : sortEntry.direction) === 'desc' ? 'descending' : 'none';
+    const headerContent = typeof col.header === 'function' ? col.header() : col.header;
+    const cellStyle = {
+        width: col.width != null ? `${col.width}px` : undefined,
+        minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined,
+        flex: col.flex
+    };
+    if (col.sortable) {
+        return jsx("th", {
+            scope: "col",
+            "aria-sort": ariaSort,
+            className: cn(className, alignClass),
+            style: cellStyle,
+            children: jsxs("button", {
+                type: "button",
+                onClick: onSortClick,
+                disabled: disabled,
+                "aria-label": ariaSort === 'ascending' ? labels.ariaSortAscending : ariaSort === 'descending' ? labels.ariaSortDescending : labels.ariaSortNone,
+                className: cn(buttonClassName, align === 'right' && 'flex-row-reverse', 'disabled:cursor-not-allowed disabled:opacity-50'),
+                children: [
+                    jsx("span", {
+                        children: headerContent
+                    }),
+                    jsx(SortIcon, {
+                        direction: sortEntry == null ? void 0 : sortEntry.direction
+                    })
+                ]
+            })
+        });
+    }
+    return jsx("th", {
+        scope: "col",
+        className: cn(className, alignClass),
+        style: cellStyle,
+        children: headerContent
+    });
+}
+// ───── Data row ─────
+function Row(props) {
+    const { row, rowId, rowIndex, isSelected, isExpanded, visibleCols, columnTypes, rowSelection, showSelectionColumn, showExpandColumn, showRowActionsColumn, expandable, rowActions, labels, toggleRow, toggleExpand, isInteractive, rowClass, cellClass, selectionCellClass, expandToggleCellClass, rowActionsCellClass, expandedRowClass, totalColumnCount } = props;
+    return jsxs(Fragment$1, {
+        children: [
+            jsxs("tr", {
+                "data-selected": isSelected ? 'true' : 'false',
+                "aria-selected": rowSelection !== 'none' ? isSelected : undefined,
+                className: rowClass,
+                children: [
+                    showSelectionColumn && jsx("td", {
+                        className: selectionCellClass,
+                        children: jsx("input", {
+                            type: "checkbox",
+                            "aria-label": labels.ariaSelectRow,
+                            checked: isSelected,
+                            onChange: ()=>toggleRow(rowId),
+                            disabled: !isInteractive,
+                            className: "cursor-pointer"
+                        })
+                    }),
+                    showExpandColumn && jsx("td", {
+                        className: expandToggleCellClass,
+                        children: jsx("button", {
+                            type: "button",
+                            onClick: ()=>toggleExpand(rowId),
+                            "aria-label": isExpanded ? labels.ariaCollapseRow : labels.ariaExpandRow,
+                            "aria-expanded": isExpanded,
+                            disabled: !isInteractive,
+                            className: cn('inline-flex items-center justify-center h-6 w-6 rounded', // text-neutral-500 + hover bump; both auto-invert via CSS-var preset.
+                            'text-neutral-500 hover:text-neutral-900', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', 'transition-transform motion-reduce:transition-none', isExpanded && 'rotate-90'),
+                            children: jsx(ChevronRightIcon, {})
+                        })
+                    }),
+                    visibleCols.map((col)=>jsx(DataCell, {
+                            col: col,
+                            row: row,
+                            rowIndex: rowIndex,
+                            isSelected: isSelected,
+                            isExpanded: isExpanded,
+                            inferredType: columnTypes.get(col.field),
+                            cellClass: cellClass
+                        }, col.field)),
+                    showRowActionsColumn && rowActions && jsx("td", {
+                        className: rowActionsCellClass,
+                        children: rowActions(row)
+                    })
+                ]
+            }),
+            isExpanded && expandable && jsx("tr", {
+                className: expandedRowClass,
+                children: jsx("td", {
+                    colSpan: totalColumnCount,
+                    className: "p-3",
+                    children: expandable.render(row)
+                })
+            })
+        ]
+    });
+}
+// ───── Data cell ─────
+function DataCell(props) {
+    const { col, row, rowIndex, isSelected, isExpanded, inferredType, cellClass } = props;
+    const value = getNestedValue(row, col.field);
+    const align = resolveAlign(col, inferredType);
+    // tabularNums = digit alignment via font-variant-numeric — does NOT
+    // change the font family. Auto-true for number / date columns.
+    const tabularNums = resolveTabularNums(col, inferredType);
+    // monospace = font-family override (font-mono). Library never
+    // auto-picks a font family — only explicit consumer opt-in. The
+    // consumer's theme font-sans is preserved by default.
+    const monospace = resolveMonospace(col);
+    const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
+    // Per-column RBAC state for the cellRenderer context
+    const columnAccessState = col.access ? {
+        hidden: col.access.onUnauthorized === 'hide',
+        disabled: col.access.onUnauthorized === 'disable',
+        readonly: col.access.onUnauthorized === 'readonly'
+    } : null;
+    const content = col.cellRenderer ? col.cellRenderer({
+        row,
+        value,
+        rowIndex,
+        isSelected,
+        isExpanded,
+        access: columnAccessState
+    }) : renderDefaultCell(value);
+    return jsx("td", {
+        className: cn(cellClass, alignClass, tabularNums && 'tabular-nums', monospace && 'font-mono'),
+        style: {
+            width: col.width != null ? `${col.width}px` : undefined,
+            minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined
+        },
+        children: content
+    });
+}
+// ───── Helpers ─────
+function renderDefaultCell(value) {
+    if (value == null) return null;
+    if (typeof value === 'boolean') return value ? '✓' : '✗';
+    if (value instanceof Date) return value.toISOString().slice(0, 10);
+    if (typeof value === 'object') return JSON.stringify(value);
+    return value;
+}
+function handleSortClick(col, event, current, setSortModel) {
+    if (!col.sortable) return;
+    const multi = event.shiftKey;
+    setSortModel((prev)=>cycleSortFor(prev, col.field, multi));
+}
+function renderLoadingRows(args) {
+    const { count, visibleCols, showSelectionColumn, showExpandColumn, showRowActionsColumn, rowClass, cellClass } = args;
+    return Array.from({
+        length: count
+    }).map((_, i)=>jsxs("tr", {
+            className: rowClass,
+            "aria-busy": "true",
+            children: [
+                showSelectionColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "16px",
+                        height: "16px"
+                    })
+                }),
+                showExpandColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "16px",
+                        height: "16px"
+                    })
+                }),
+                visibleCols.map((col)=>jsx("td", {
+                        className: cellClass,
+                        children: jsx(Skeleton, {
+                            variant: "text",
+                            width: "80%"
+                        })
+                    }, col.field)),
+                showRowActionsColumn && jsx("td", {
+                    className: cellClass,
+                    children: jsx(Skeleton, {
+                        variant: "rectangle",
+                        width: "24px",
+                        height: "24px"
+                    })
+                })
+            ]
+        }, `loading-${i}`));
+}
+function renderEmptyState(args) {
+    var _args_emptyState;
+    return jsx("tr", {
+        children: jsx("td", {
+            colSpan: args.totalColumnCount,
+            className: args.cellClass,
+            children: (_args_emptyState = args.emptyState) != null ? _args_emptyState : args.fallback
+        })
+    });
+}
+// ───── Icons ─────
+function SortIcon(props) {
+    return jsx("svg", {
+        width: "0.75em",
+        height: "0.75em",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        className: "shrink-0 opacity-60 group-hover:opacity-100",
+        children: props.direction === 'asc' ? jsx("path", {
+            d: "M8 4l4 6H4z"
+        }) : props.direction === 'desc' ? jsx("path", {
+            d: "M8 12L4 6h8z"
+        }) : jsxs(Fragment$1, {
+            children: [
+                jsx("path", {
+                    d: "M8 3l3 4H5z",
+                    opacity: "0.5"
+                }),
+                jsx("path", {
+                    d: "M8 13l-3-4h6z",
+                    opacity: "0.5"
+                })
+            ]
+        })
+    });
+}
+function ChevronRightIcon() {
+    return jsx("svg", {
+        width: "0.875em",
+        height: "0.875em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "M6 4l4 4-4 4"
+        })
+    });
+}
+function SearchIcon(props) {
+    return jsxs("svg", {
+        width: "0.875em",
+        height: "0.875em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        className: props.className,
+        children: [
+            jsx("circle", {
+                cx: "7",
+                cy: "7",
+                r: "4.5"
+            }),
+            jsx("path", {
+                d: "M11 11l3 3"
+            })
+        ]
+    });
+}
+
+/**
+ * Plain text cell renderer. Wraps the value in a `<span>` and
+ * optionally truncates on overflow. Use this for the most common
+ * case: render a single string value.
+ *
+ * The Table component does NOT use this by default for plain
+ * string columns — it just renders `{value}` directly. Use
+ * `RenderText` when you need the truncate / muted styling.
+ */ function RenderText(props) {
+    const { value, truncate, muted, className } = props;
+    return jsx("span", {
+        className: cn(truncate && 'block max-w-full truncate', // Neutral palette auto-inverts via dashforgePreset() CSS-var swap.
+        muted && 'text-neutral-500', className),
+        children: value
+    });
+}
+
+/**
+ * Two-line cell renderer: a bold primary line stacked above a muted
+ * secondary line. Useful for `Name + email`, `Title + ID`, etc.
+ *
+ * Replaces the MUI-side `RenderTwoLineCell` without the magic-number
+ * vertical-align fudges (`mt: 0.8 / 0.2`) — flexbox handles the
+ * vertical layout cleanly.
+ *
+ * Dashforge identity rule: text colors auto-invert via the
+ * `dashforgePreset()` CSS-variable swap. No `dark:` variants needed
+ * on neutral palette.
+ */ function RenderTwoLine(props) {
+    const { primary, secondary, className } = props;
+    return jsxs("div", {
+        className: cn('flex flex-col leading-tight', className),
+        children: [
+            jsx("span", {
+                className: "font-medium text-neutral-900",
+                children: primary
+            }),
+            jsx("span", {
+                className: "text-xs text-neutral-500 mt-0.5",
+                children: secondary
+            })
+        ]
+    });
+}
+
+/**
+ * Internal mini-chip used by the cell renderer library. Not exported
+ * from `@dashforge/tw` as a standalone component (per Sprint 4.1
+ * scope decision — a standalone `<Chip>` may ship in Sprint 5 if
+ * demand emerges).
+ *
+ * Variants:
+ *  - `color`: 7 intents (neutral / primary / success / warning /
+ *    danger / info / secondary)
+ *  - `variant`: `soft` (default) / `solid` / `outline`
+ *  - `size`: `sm` / `md`
+ */ const chipVariants = tv({
+    base: [
+        'inline-flex items-center gap-1 rounded-full font-medium',
+        'whitespace-nowrap'
+    ],
+    variants: {
+        color: {
+            neutral: '',
+            primary: '',
+            success: '',
+            warning: '',
+            danger: '',
+            info: '',
+            secondary: ''
+        },
+        variant: {
+            soft: '',
+            solid: '',
+            outline: ''
+        },
+        size: {
+            sm: 'h-5 px-2 text-xs',
+            md: 'h-6 px-2.5 text-xs'
+        }
+    },
+    compoundVariants: [
+        // soft = subtle bg + dark text.
+        // Neutral row uses NO `dark:` variants — the dashforgePreset()
+        // CSS-var swap auto-inverts the neutral palette already.
+        // Color rows below KEEP `dark:` variants because color palettes
+        // don't auto-invert: the `dark:` shift is an intentional design
+        // choice (darker bg + lighter text in dark mode for visual cohesion).
+        {
+            variant: 'soft',
+            color: 'neutral',
+            class: 'bg-neutral-100 text-neutral-700'
+        },
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: 'bg-primary-100 dark:bg-primary-950 text-primary-700 dark:text-primary-300'
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: 'bg-success-100 dark:bg-success-950 text-success-700 dark:text-success-300'
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: 'bg-warning-100 dark:bg-warning-950 text-warning-700 dark:text-warning-300'
+        },
+        {
+            variant: 'soft',
+            color: 'danger',
+            class: 'bg-danger-100 dark:bg-danger-950 text-danger-700 dark:text-danger-300'
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: 'bg-info-100 dark:bg-info-950 text-info-700 dark:text-info-300'
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300'
+        },
+        // solid = full bg + light text
+        // solid neutral: bg + text both anchored to neutral palette
+        // (auto-inverts). `text-white` would not invert and would break
+        // contrast in light mode against a `bg-neutral-700` dark bg, so
+        // we stick to `text-neutral-50` (light text in light mode, dark
+        // in dark — wait, that's wrong too). Actually `text-neutral-50`
+        // auto-inverts: light text in light mode (against dark bg) is
+        // what we want; in dark mode `bg-neutral-700` becomes light AND
+        // `text-neutral-50` becomes dark — contrast preserved.
+        {
+            variant: 'solid',
+            color: 'neutral',
+            class: 'bg-neutral-700 text-neutral-50'
+        },
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: 'bg-primary-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'success',
+            class: 'bg-success-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: 'bg-warning-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'danger',
+            class: 'bg-danger-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'info',
+            class: 'bg-info-500 text-white'
+        },
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: 'bg-secondary-500 text-white'
+        },
+        // outline = border + colored text
+        // outline neutral: both border + text auto-invert via CSS-var swap.
+        {
+            variant: 'outline',
+            color: 'neutral',
+            class: 'border border-neutral-300 text-neutral-700'
+        },
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: 'border border-primary-500 text-primary-700 dark:text-primary-300'
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: 'border border-success-500 text-success-700 dark:text-success-300'
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: 'border border-warning-500 text-warning-700 dark:text-warning-300'
+        },
+        {
+            variant: 'outline',
+            color: 'danger',
+            class: 'border border-danger-500 text-danger-700 dark:text-danger-300'
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: 'border border-info-500 text-info-700 dark:text-info-300'
+        },
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: 'border border-secondary-500 text-secondary-700 dark:text-secondary-300'
+        }
+    ],
+    defaultVariants: {
+        color: 'neutral',
+        variant: 'soft',
+        size: 'sm'
+    }
+});
+function RenderChip(props) {
+    const { children, color, variant, size, className } = props;
+    return jsx("span", {
+        className: cn(chipVariants({
+            color,
+            variant,
+            size
+        }), className),
+        children: children
+    });
+}
+
+/**
+ * Inline button cell renderer. Thin wrapper over `<Button>` with
+ * the size narrowed to `sm` by default (table density expects compact
+ * controls).
+ */ function RenderButton(props) {
+    const { label, onClick, variant = 'ghost', size = 'sm' } = props, rest = _object_without_properties_loose(props, [
+        "label",
+        "onClick",
+        "variant",
+        "size"
+    ]);
+    return jsx(Button, _extends({
+        variant: variant,
+        size: size,
+        onClick: onClick
+    }, rest, {
+        children: label
+    }));
+}
+
+/**
+ * 3-dot row actions menu. Renders a trigger button that opens a
+ * Popover (Sprint 3 component) with a list of action menu items.
+ *
+ * Replaces the MUI-side `RowActions.tsx` (IconButton + Menu) with
+ * the TW equivalents. Per-action RBAC honored: hidden actions are
+ * filtered out, disabled actions render disabled.
+ */ function RowActionsMenu(props) {
+    const { row, actions, trigger, ariaLabel = 'Row actions' } = props;
+    const [open, setOpen] = useState(false);
+    // Filter actions by RBAC (hidden actions removed entirely)
+    const visibleActions = actions.filter((action)=>{
+        if (!action.access) return true;
+        return action.access.onUnauthorized !== 'hide';
+    });
+    if (visibleActions.length === 0) return null;
+    return jsx(Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        side: "bottom",
+        align: "end",
+        content: jsx("ul", {
+            className: "flex flex-col gap-0.5 min-w-[140px]",
+            role: "menu",
+            children: visibleActions.map((action, idx)=>jsx(RowActionMenuItem, {
+                    action: action,
+                    row: row,
+                    onClose: ()=>setOpen(false)
+                }, idx))
+        }),
+        children: trigger != null ? trigger : jsx("button", {
+            type: "button",
+            "aria-label": ariaLabel,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            className: cn('inline-flex items-center justify-center h-8 w-8 rounded-md', // Neutral palette auto-inverts via the dashforgePreset()
+            // CSS-var swap — no `dark:` variant needed.
+            'text-neutral-500 hover:text-neutral-900', 'hover:bg-neutral-100', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', 'transition-colors motion-reduce:transition-none'),
+            children: jsxs("svg", {
+                width: "1em",
+                height: "1em",
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                "aria-hidden": "true",
+                children: [
+                    jsx("circle", {
+                        cx: "8",
+                        cy: "3",
+                        r: "1.4"
+                    }),
+                    jsx("circle", {
+                        cx: "8",
+                        cy: "8",
+                        r: "1.4"
+                    }),
+                    jsx("circle", {
+                        cx: "8",
+                        cy: "13",
+                        r: "1.4"
+                    })
+                ]
+            })
+        })
+    });
+}
+function RowActionMenuItem(props) {
+    const { action, row, onClose } = props;
+    const accessState = useAccessState(action.access);
+    const isDisabled = action.disabled || accessState.disabled || accessState.readonly;
+    return jsx("li", {
+        role: "none",
+        children: jsxs("button", {
+            type: "button",
+            role: "menuitem",
+            disabled: isDisabled,
+            onClick: ()=>{
+                onClose();
+                action.onClick(row);
+            },
+            className: cn('flex items-center gap-2 w-full text-left', 'px-3 py-1.5 rounded-md text-sm', // Neutral palette auto-inverts; danger/warning are color
+            // palettes (no auto-invert) so they keep their `dark:` shift
+            // intentionally — design choice, not a bug.
+            'hover:bg-neutral-100', 'focus:outline-none focus-visible:bg-neutral-100', 'transition-colors motion-reduce:transition-none', 'disabled:opacity-50 disabled:pointer-events-none', action.color === 'danger' && 'text-danger-700 dark:text-danger-300', action.color === 'warning' && 'text-warning-700 dark:text-warning-300'),
+            children: [
+                action.icon && jsx("span", {
+                    className: "inline-flex shrink-0",
+                    "aria-hidden": "true",
+                    children: action.icon
+                }),
+                jsx("span", {
+                    children: action.label
+                })
+            ]
+        })
+    });
+}
+
 /**
  * @dashforge/tw
  *
@@ -7309,6 +9420,6 @@ const accordionVariants = tv({
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '0.4.0-beta';
+ */ const VERSION = '0.6.0-beta';
 
-export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Checkbox, ConfirmDialogProvider, Container, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Popover, RadioGroup, SnackbarProvider, Stack, Switch, Tabs, TextField, Textarea, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, popoverVariants, radioGroupVariants, snackbarVariants, stackVariants, switchVariants, tabsVariants, textFieldVariants, textareaVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };
+export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Checkbox, ConfirmDialogProvider, Container, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Pagination, Popover, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, Skeleton, SnackbarProvider, Stack, Switch, Table, Tabs, TextField, Textarea, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, getNestedValue, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, stackVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };