@neasg/design-system 0.4.10 → 0.4.12

package/dist/table.js

@@ -11,8 +11,11 @@ const TableRoot = React.forwardRef(({ className, wrapperClassName: _wrapperClass
 TableRoot.displayName = "TableRoot";
 const TableContainer = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("min-h-0 overflow-auto rounded-lg border border-[hsl(var(--table-border))] bg-card text-card-foreground", className), ...props })));
 TableContainer.displayName = "TableContainer";
-function getTableColumnSizingStyle({ style, width, minWidth, maxWidth, }) {
-    const resolvedMinWidth = minWidth !== null && minWidth !== void 0 ? minWidth : width;
+const DEFAULT_COLUMN_RESIZE_MIN_WIDTH = 64;
+const DEFAULT_COLUMN_RESIZE_START_WIDTH = 160;
+const COLUMN_RESIZE_KEYBOARD_STEP = 16;
+function getTableColumnSizingStyle({ style, width, minWidth, maxWidth, treatWidthAsMinWidth = true, }) {
+    const resolvedMinWidth = minWidth !== null && minWidth !== void 0 ? minWidth : (treatWidthAsMinWidth ? width : undefined);
     return {
         ...style,
         ...(width ? { width } : {}),
@@ -20,6 +23,94 @@ function getTableColumnSizingStyle({ style, width, minWidth, maxWidth, }) {
         ...(maxWidth ? { maxWidth } : {}),
     };
 }
+function overflowContainmentClassName({ containOverflow, wrap, }) {
+    if (!containOverflow) {
+        return undefined;
+    }
+    return wrap
+        ? "break-words [overflow-wrap:anywhere]"
+        : "overflow-hidden text-ellipsis";
+}
+function parsePixelSize(value) {
+    if (typeof value === "number") {
+        return Number.isFinite(value) ? value : undefined;
+    }
+    if (!value) {
+        return undefined;
+    }
+    const match = /^(\d+(?:\.\d+)?)px$/.exec(value.trim());
+    return match ? Number(match[1]) : undefined;
+}
+function clampColumnWidth(column, width) {
+    var _a;
+    const minWidth = (_a = parsePixelSize(column.minWidth)) !== null && _a !== void 0 ? _a : DEFAULT_COLUMN_RESIZE_MIN_WIDTH;
+    const maxWidth = parsePixelSize(column.maxWidth);
+    const roundedWidth = Math.round(width);
+    const clampedWidth = Math.max(minWidth, roundedWidth);
+    return maxWidth !== undefined
+        ? Math.min(clampedWidth, maxWidth)
+        : clampedWidth;
+}
+function getColumnResizeMinWidth(column) {
+    var _a, _b;
+    return ((_b = (_a = parsePixelSize(column.resizeMinWidth)) !== null && _a !== void 0 ? _a : parsePixelSize(column.minWidth)) !== null && _b !== void 0 ? _b : DEFAULT_COLUMN_RESIZE_MIN_WIDTH);
+}
+function getColumnResizeMaxWidth(column) {
+    var _a;
+    return (_a = parsePixelSize(column.resizeMaxWidth)) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY;
+}
+function getColumnResizeMaxWidthStyle(column) {
+    const maxWidth = getColumnResizeMaxWidth(column);
+    return Number.isFinite(maxWidth) ? `${maxWidth}px` : undefined;
+}
+function clampColumnResizeWidth(column, width) {
+    const minWidth = getColumnResizeMinWidth(column);
+    const maxWidth = getColumnResizeMaxWidth(column);
+    const roundedWidth = Math.round(width);
+    const clampedWidth = Math.max(minWidth, roundedWidth);
+    return Number.isFinite(maxWidth)
+        ? Math.min(clampedWidth, maxWidth)
+        : clampedWidth;
+}
+function clampNumber(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function getResolvedColumnWidth(column, columnWidths) {
+    const resizedWidth = columnWidths[column.key];
+    if (resizedWidth === undefined) {
+        return column.width;
+    }
+    return `${clampColumnWidth(column, resizedWidth)}px`;
+}
+function getResolvedResizableColumnWidth(column, columnWidths) {
+    return clampColumnResizeWidth(column, getColumnResizeBaseWidth(column, columnWidths));
+}
+function getRenderedColumnWidth({ column, columnWidths, resizing, }) {
+    if (resizing) {
+        return `${getResolvedResizableColumnWidth(column, columnWidths)}px`;
+    }
+    return getResolvedColumnWidth(column, columnWidths);
+}
+function getRenderedColumnMinWidth(column, resizing) {
+    return resizing ? `${getColumnResizeMinWidth(column)}px` : column.minWidth;
+}
+function getRenderedColumnMaxWidth(column, resizing) {
+    return resizing ? getColumnResizeMaxWidthStyle(column) : column.maxWidth;
+}
+function getColumnResizeBaseWidth(column, columnWidths, elementWidth) {
+    var _a, _b, _c, _d;
+    return ((_d = (_c = (_b = (_a = columnWidths[column.key]) !== null && _a !== void 0 ? _a : parsePixelSize(column.width)) !== null && _b !== void 0 ? _b : (elementWidth && elementWidth > 0 ? elementWidth : undefined)) !== null && _c !== void 0 ? _c : parsePixelSize(column.minWidth)) !== null && _d !== void 0 ? _d : DEFAULT_COLUMN_RESIZE_START_WIDTH);
+}
+function getColumnResizeLabel(column) {
+    if (column.visibilityLabel) {
+        return column.visibilityLabel;
+    }
+    if (typeof column.header === "string" ||
+        typeof column.header === "number") {
+        return String(column.header);
+    }
+    return column.key;
+}
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 bg-[hsl(var(--table-header-background))] [&_tr]:border-b [&_tr]:border-[hsl(var(--table-border))] [&>tr]:bg-inherit", className), ...props })));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
@@ -28,7 +119,7 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tf
 TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b border-[hsl(var(--table-border))] bg-card text-card-foreground transition-colors data-[state=selected]:bg-muted", className), ...props })));
 TableRow.displayName = "TableRow";
-const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-11 px-4 py-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: getTableColumnSizingStyle({
+const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-11 px-4 py-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
         style: {
             ...style,
             fontWeight: 500,
@@ -36,24 +127,43 @@ const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidt
         width,
         minWidth,
         maxWidth,
+        treatWidthAsMinWidth,
     }), ...props })));
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("h-12 px-4 py-2 align-middle text-card-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: getTableColumnSizingStyle({ style, width, minWidth, maxWidth }), ...props })));
+const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("h-12 px-4 py-2 align-middle text-card-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
+        style,
+        width,
+        minWidth,
+        maxWidth,
+        treatWidthAsMinWidth,
+    }), ...props })));
 TableCell.displayName = "TableCell";
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })));
 TableCaption.displayName = "TableCaption";
-function stickyClassName(sticky, kind) {
+const STICKY_SCROLL_EDGE_THRESHOLD = 1;
+function stickyClassName(sticky, kind, showShadow = false) {
     if (!sticky)
         return undefined;
     const side = sticky === "left" ? "left-0" : "right-0";
-    const shadow = sticky === "left"
-        ? "shadow-[inset_-1px_0_0_0_var(--color-border)]"
-        : "shadow-[inset_1px_0_0_0_var(--color-border)]";
+    const shadow = showShadow
+        ? sticky === "left"
+            ? "shadow-[inset_-1px_0_0_0_hsl(var(--table-border)),_8px_0_12px_-10px_hsl(var(--foreground)_/_0.35)]"
+            : "shadow-[inset_1px_0_0_0_hsl(var(--table-border)),_-8px_0_12px_-10px_hsl(var(--foreground)_/_0.35)]"
+        : undefined;
     const background = kind === "head" ? "bg-[hsl(var(--table-header-background))]" : "bg-card";
     // z-20 on header cells so they layer above sticky body cells on the other axis.
     const z = kind === "head" ? "z-20" : "z-10";
     return cn("sticky", background, side, z, shadow);
 }
+function getStickyShadowVisibility(sticky, scrollState) {
+    if (sticky === "left") {
+        return scrollState.left;
+    }
+    if (sticky === "right") {
+        return scrollState.right;
+    }
+    return false;
+}
 function alignClassName(align) {
     switch (align) {
         case "center":
@@ -107,12 +217,32 @@ export const TABLE_SKELETON_PRESETS = {
         })),
     }),
 };
-function SortableTableHead({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, }) {
+function SortableTableHead({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, }) {
     const isSorted = currentSortField === field;
-    return (_jsx(TableHead, { className: cn(alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, children: _jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", allowWrap
-                ? "max-w-full whitespace-normal text-left"
-                : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${sortLabel !== null && sortLabel !== void 0 ? sortLabel : field}`, children: [children, _jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }) }));
+    return (_jsxs(TableHead, { className: cn(resizeHandle && "relative", alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, treatWidthAsMinWidth: treatWidthAsMinWidth, containOverflow: containOverflow, children: [_jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", containOverflow && "max-w-full overflow-hidden", allowWrap
+                    ? "max-w-full whitespace-normal text-left"
+                    : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${sortLabel !== null && sortLabel !== void 0 ? sortLabel : field}`, children: [_jsx("span", { className: cn("min-w-0", containOverflow && !allowWrap && "truncate", containOverflow && allowWrap && "break-words [overflow-wrap:anywhere]"), children: children }), _jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }), resizeHandle] }));
 }
+const TableColumnResizeHandle = React.forwardRef(function TableColumnResizeHandle({ column, nextColumn, currentWidth, minWidth, maxWidth, onResizeStart, onResizeByKeyboard, className, onClick, ...props }, ref) {
+    const label = getColumnResizeLabel(column);
+    return (_jsx("button", { ...props, ref: ref, type: "button", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, onPointerDown: (event) => onResizeStart(column, nextColumn, event), onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            if (event.defaultPrevented) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        }, onKeyDown: (event) => {
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            onResizeByKeyboard(column, nextColumn, event.key === "ArrowLeft"
+                ? -COLUMN_RESIZE_KEYBOARD_STEP
+                : COLUMN_RESIZE_KEYBOARD_STEP);
+        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
+});
 function getDefaultSkeleton(column) {
     var _a, _b;
     return {
@@ -130,28 +260,182 @@ function tableRowToneClassName(tone) {
             return undefined;
     }
 }
-function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, striped = false, onRowClick, style, ...props }) {
-    // Use auto layout so the browser can grow a column to contain its (nowrap)
-    // header. Caller can opt back into fixed layout via `tableClassName="table-fixed"`.
-    const shouldUseFixedLayout = false;
-    const visibleColumnSet = visibleColumnKeys
-        ? new Set(visibleColumnKeys)
-        : undefined;
-    const visibleColumns = visibleColumnSet
-        ? columns.filter((column) => visibleColumnSet.has(column.key))
-        : columns;
-    const container = (_jsx(TableContainer, { className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
+function getVisibleColumns(columns, visibleColumnKeys) {
+    if (!visibleColumnKeys) {
+        return columns;
+    }
+    const columnsByKey = new Map(columns.map((column) => [column.key, column]));
+    const seenColumnKeys = new Set();
+    const visibleColumns = [];
+    visibleColumnKeys.forEach((columnKey) => {
+        if (seenColumnKeys.has(columnKey)) {
+            return;
+        }
+        const column = columnsByKey.get(columnKey);
+        if (column) {
+            visibleColumns.push(column);
+            seenColumnKeys.add(columnKey);
+        }
+    });
+    return visibleColumns;
+}
+function isStickyResizeBoundary(column, nextColumn) {
+    return Boolean(column.sticky === "right" || nextColumn.sticky);
+}
+function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, striped = false, onRowClick, onScroll, style, ...props }) {
+    const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
+    const isColumnResizingEnabled = resizableColumns || visibleColumns.some((column) => column.resizable);
+    // Use auto layout by default so the browser can grow a column to contain its
+    // nowrap header. Resizable columns need fixed layout so neighbour columns do
+    // not redistribute width while a handle is dragged.
+    const shouldUseFixedLayout = isColumnResizingEnabled;
+    const [uncontrolledColumnWidths, setUncontrolledColumnWidths] = React.useState(() => ({ ...(defaultColumnWidths !== null && defaultColumnWidths !== void 0 ? defaultColumnWidths : {}) }));
+    const resolvedColumnWidths = columnWidths !== null && columnWidths !== void 0 ? columnWidths : uncontrolledColumnWidths;
+    const columnWidthsRef = React.useRef(resolvedColumnWidths);
+    const resizeCleanupRef = React.useRef(null);
+    const tableContainerRef = React.useRef(null);
+    const [stickyScrollState, setStickyScrollState] = React.useState({
+        left: false,
+        right: false,
+    });
+    const updateStickyScrollState = React.useCallback((element = tableContainerRef.current) => {
+        if (!element) {
+            return;
+        }
+        const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
+        const scrollLeft = Math.max(0, element.scrollLeft);
+        const nextScrollState = {
+            left: scrollLeft > STICKY_SCROLL_EDGE_THRESHOLD,
+            right: scrollLeft < maxScrollLeft - STICKY_SCROLL_EDGE_THRESHOLD,
+        };
+        setStickyScrollState((currentScrollState) => currentScrollState.left === nextScrollState.left &&
+            currentScrollState.right === nextScrollState.right
+            ? currentScrollState
+            : nextScrollState);
+    }, []);
+    React.useEffect(() => {
+        columnWidthsRef.current = resolvedColumnWidths;
+    }, [resolvedColumnWidths]);
+    React.useEffect(() => {
+        updateStickyScrollState();
+    });
+    React.useEffect(() => {
+        const element = tableContainerRef.current;
+        if (!element || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const observer = new ResizeObserver(() => updateStickyScrollState(element));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [updateStickyScrollState]);
+    React.useEffect(() => () => {
+        var _a;
+        (_a = resizeCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeCleanupRef);
+    }, []);
+    const commitColumnWidths = React.useCallback((updater) => {
+        const nextColumnWidths = updater(columnWidthsRef.current);
+        columnWidthsRef.current = nextColumnWidths;
+        if (!columnWidths) {
+            setUncontrolledColumnWidths(nextColumnWidths);
+        }
+        onColumnWidthsChange === null || onColumnWidthsChange === void 0 ? void 0 : onColumnWidthsChange(nextColumnWidths);
+    }, [columnWidths, onColumnWidthsChange]);
+    const resizeColumnPairByDelta = React.useCallback((column, nextColumn, delta, startColumnWidths = columnWidthsRef.current) => {
+        const currentWidth = getResolvedResizableColumnWidth(column, startColumnWidths);
+        const nextWidth = getResolvedResizableColumnWidth(nextColumn, startColumnWidths);
+        const minDelta = Math.max(getColumnResizeMinWidth(column) - currentWidth, nextWidth - getColumnResizeMaxWidth(nextColumn));
+        const maxDelta = Math.min(getColumnResizeMaxWidth(column) - currentWidth, nextWidth - getColumnResizeMinWidth(nextColumn));
+        const resolvedDelta = clampNumber(delta, minDelta, maxDelta);
+        commitColumnWidths((currentColumnWidths) => ({
+            ...currentColumnWidths,
+            [column.key]: Math.round(currentWidth + resolvedDelta),
+            [nextColumn.key]: Math.round(nextWidth - resolvedDelta),
+        }));
+    }, [commitColumnWidths]);
+    const resizeColumnByKeyboard = React.useCallback((column, nextColumn, delta) => {
+        resizeColumnPairByDelta(column, nextColumn, delta);
+    }, [resizeColumnPairByDelta]);
+    const startColumnResize = React.useCallback((column, nextColumn, event) => {
+        var _a;
+        event.preventDefault();
+        event.stopPropagation();
+        (_a = resizeCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeCleanupRef);
+        const ownerDocument = event.currentTarget.ownerDocument;
+        const startX = event.clientX;
+        const startColumnWidths = columnWidthsRef.current;
+        const previousCursor = ownerDocument.documentElement.style.cursor;
+        ownerDocument.documentElement.style.cursor = "col-resize";
+        const handlePointerMove = (pointerEvent) => {
+            resizeColumnPairByDelta(column, nextColumn, pointerEvent.clientX - startX, startColumnWidths);
+        };
+        const handlePointerUp = () => {
+            var _a;
+            (_a = resizeCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(resizeCleanupRef);
+        };
+        const cleanup = () => {
+            ownerDocument.removeEventListener("pointermove", handlePointerMove);
+            ownerDocument.removeEventListener("pointerup", handlePointerUp);
+            ownerDocument.documentElement.style.cursor = previousCursor;
+            resizeCleanupRef.current = null;
+        };
+        resizeCleanupRef.current = cleanup;
+        ownerDocument.addEventListener("pointermove", handlePointerMove);
+        ownerDocument.addEventListener("pointerup", handlePointerUp);
+    }, [resizeColumnPairByDelta]);
+    const renderResizeHandle = React.useCallback((column, columnIndex) => {
+        var _a, _b;
+        const nextColumn = visibleColumns[columnIndex + 1];
+        const isResizable = (_a = column.resizable) !== null && _a !== void 0 ? _a : resizableColumns;
+        const isNextResizable = nextColumn && ((_b = nextColumn.resizable) !== null && _b !== void 0 ? _b : resizableColumns);
+        if (!isResizable || !nextColumn || !isNextResizable) {
+            return null;
+        }
+        const stickyResizeBoundary = isStickyResizeBoundary(column, nextColumn);
+        if (stickyResizeBoundary) {
+            return null;
+        }
+        const handle = (_jsx(TableColumnResizeHandle, { column: column, nextColumn: nextColumn, currentWidth: getResolvedResizableColumnWidth(column, resolvedColumnWidths), minWidth: getColumnResizeMinWidth(column), maxWidth: Number.isFinite(getColumnResizeMaxWidth(column))
+                ? getColumnResizeMaxWidth(column)
+                : undefined, onResizeStart: startColumnResize, onResizeByKeyboard: resizeColumnByKeyboard }));
+        if (renderColumnResizeHandle) {
+            return renderColumnResizeHandle({ column, nextColumn, handle });
+        }
+        return handle;
+    }, [
+        resizableColumns,
+        renderColumnResizeHandle,
+        resizeColumnByKeyboard,
+        resolvedColumnWidths,
+        startColumnResize,
+        visibleColumns,
+    ]);
+    const handleTableContainerScroll = React.useCallback((event) => {
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
+        updateStickyScrollState(event.currentTarget);
+    }, [onScroll, updateStickyScrollState]);
+    const container = (_jsx(TableContainer, { ref: tableContainerRef, onScroll: handleTableContainerScroll, className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
             ...style,
             ...(maxHeight !== undefined ? { maxHeight } : {}),
         }, ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx("colgroup", { children: visibleColumns.map((column) => (_jsx("col", { style: getTableColumnSizingStyle({
-                            width: column.width,
-                            minWidth: column.minWidth,
-                            maxWidth: column.maxWidth,
-                        }) }, column.key))) }), _jsx(TableHeader, { children: _jsx(TableRow, { children: visibleColumns.map((column) => {
+                            width: getRenderedColumnWidth({
+                                column,
+                                columnWidths: resolvedColumnWidths,
+                                resizing: isColumnResizingEnabled,
+                            }),
+                            minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled),
+                            maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled),
+                            treatWidthAsMinWidth: !isColumnResizingEnabled,
+                        }) }, column.key))) }), _jsx(TableHeader, { children: _jsx(TableRow, { children: visibleColumns.map((column, columnIndex) => {
                             var _a;
                             const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
                             const isSortable = column.sortable && sorting;
-                            return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head"), column.headerClassName), allowWrap: column.wrap, width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, align: column.align, sortLabel: column.sortLabel, children: column.header }, column.key)) : (_jsx(TableHead, { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, wrap: column.wrap, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "head"), column.headerClassName), children: column.header }, column.key)));
+                            const columnWidth = getRenderedColumnWidth({
+                                column,
+                                columnWidths: resolvedColumnWidths,
+                                resizing: isColumnResizingEnabled,
+                            });
+                            const resizeHandle = renderResizeHandle(column, columnIndex);
+                            return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), allowWrap: column.wrap, width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), align: column.align, sortLabel: column.sortLabel, resizeHandle: resizeHandle, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, children: column.header }, column.key)) : (_jsxs(TableHead, { width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(resizeHandle && "relative", alignClassName(column.align), stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), children: [column.header, resizeHandle] }, column.key)));
                         }) }) }), _jsx(TableBody, { children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: visibleColumns.map((column) => { var _a; return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column); }) })) : rows.length ? (rows.map((row, rowIndex) => {
                         const resolvedTone = typeof rowTone === "function"
                             ? rowTone(row, rowIndex)
@@ -164,10 +448,15 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
                                 ? rowClassName(row, rowIndex)
                                 : rowClassName), children: visibleColumns.map((column) => {
                                 var _a, _b;
+                                const columnWidth = getRenderedColumnWidth({
+                                    column,
+                                    columnWidths: resolvedColumnWidths,
+                                    resizing: isColumnResizingEnabled,
+                                });
                                 const value = (_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.call(column, row, rowIndex)) !== null && _b !== void 0 ? _b : (column.accessorKey !== undefined
                                     ? row[column.accessorKey]
                                     : null);
-                                return (_jsx(TableCell, { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, wrap: column.wrap, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "cell"), column.cellClassName), children: value }, column.key));
+                                return (_jsx(TableCell, { width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "cell", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.cellClassName), children: value }, column.key));
                             }) }, getRowKey(row, rowIndex)));
                     })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length, 1), className: "p-6", children: emptyState }) })) })] }) }));
     if (!pagination) {

package/dist/tabs.d.ts

@@ -55,8 +55,9 @@ export interface TabWithDropdownProps {
     onSectionSelect?: (sectionId: string) => void;
     activeSection?: string;
     className?: string;
+    contentClassName?: string;
 }
-declare function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSectionSelect, activeSection, className, }: TabWithDropdownProps): import("react/jsx-runtime").JSX.Element;
+declare function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSectionSelect, activeSection, className, contentClassName, }: TabWithDropdownProps): import("react/jsx-runtime").JSX.Element;
 export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "children" | "value" | "defaultValue" | "onValueChange"> {
     items: TabsItem[];
     defaultValue?: string;

package/dist/tabs.js

@@ -2,11 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { Check } from "lucide-react";
 import { ChevronDownIcon } from "./animated-icons/chevron-down";
 import { XIcon } from "./animated-icons/x";
 import { cn } from "./lib/utils";
 import { Popover } from "./popover";
-import { PopoverMenuItem, PopoverMenuSection } from "./popover-menu";
+import { PopoverMenuSection } from "./popover-menu";
 const TabsContext = React.createContext(null);
 const getTabValueSelector = (value) => {
     const escapedValue = typeof CSS !== "undefined" && typeof CSS.escape === "function"
@@ -40,7 +41,7 @@ TabsContent.displayName = TabsPrimitive.Content.displayName;
 function renderTabsItemLabel(label, active) {
     return typeof label === "function" ? label({ active }) : label;
 }
-function TabTriggerWithDropdown({ item, triggerClassName, }) {
+function TabTriggerWithDropdown({ item, triggerClassName, contentClassName, }) {
     var _a, _b, _c, _d, _e;
     const [open, setOpen] = React.useState(false);
     const sections = (_a = item.sections) !== null && _a !== void 0 ? _a : [];
@@ -81,9 +82,11 @@ function TabTriggerWithDropdown({ item, triggerClassName, }) {
             setInternalActiveSection((_b = (_a = sections[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
         }
     }, [isTabSelected, item.activeSection, sections]);
-    return (_jsx(Popover, { open: open, onOpenChange: setOpen, surface: "menu", align: "start", contentClassName: "min-w-[12rem]", trigger: _jsxs(TabsTrigger, { value: item.value, disabled: item.disabled, "data-state": isTabSelected ? "active" : "inactive", "data-tab-value": item.value, className: cn("flex items-center gap-1", triggerClassName), children: [renderTabsItemLabel(item.label, isTabSelected), _jsx(ChevronDownIcon, { size: 12, className: cn("transition-transform duration-200", open && "rotate-180") })] }), children: _jsx(PopoverMenuSection, { children: sections.map((section) => (_jsx(PopoverMenuItem, { active: isTabSelected && activeSection === section.id, className: "py-2 pl-2 pr-8", onClick: () => handleSectionClick(section.id), children: section.label }, section.id))) }) }));
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, surface: "menu", align: "start", contentClassName: cn("min-w-[12rem]", contentClassName), trigger: _jsxs(TabsTrigger, { value: item.value, disabled: item.disabled, "data-state": isTabSelected ? "active" : "inactive", "data-tab-value": item.value, className: cn("flex items-center gap-1", triggerClassName), children: [renderTabsItemLabel(item.label, isTabSelected), _jsx(ChevronDownIcon, { size: 12, className: cn("transition-transform duration-200", open && "rotate-180") })] }), children: _jsx(PopoverMenuSection, { className: "space-y-1", children: sections.map((section) => (_jsxs("button", { type: "button", className: cn("flex min-h-fit w-full cursor-pointer items-start gap-2 rounded-sm px-3 py-2 text-left text-sm font-normal leading-5 text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", isTabSelected &&
+                    activeSection === section.id &&
+                    "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground"), onClick: () => handleSectionClick(section.id), children: [_jsx("span", { className: "block min-w-0 flex-1 whitespace-normal break-words leading-5", children: section.label }), isTabSelected && activeSection === section.id ? (_jsx(Check, { "aria-hidden": "true", className: "mt-0.5 h-4 w-4 shrink-0" })) : null] }, section.id))) }) }));
 }
-function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSectionSelect, activeSection, className, }) {
+function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSectionSelect, activeSection, className, contentClassName, }) {
     return (_jsx(TabTriggerWithDropdown, { item: {
             value,
             label,
@@ -93,7 +96,7 @@ function TabWithDropdown({ value, label, sections, disabled, scrollOffset, onSec
             scrollOffset,
             onSectionSelect,
             activeSection,
-        }, triggerClassName: className }));
+        }, triggerClassName: className, contentClassName: contentClassName }));
 }
 function TabTriggerItem({ item, triggerClassName }) {
     var _a;

package/dist/theme-switcher.d.ts

@@ -21,7 +21,7 @@ export interface ThemeSwitcherProps extends Omit<SwitchProps, "checked" | "defau
     useLightLabel?: string;
     className?: string;
 }
-declare function ThemeSwitcher({ checked, defaultChecked, onCheckedChange, isCollapsed, label, lightLabel, darkLabel, useDarkLabel, useLightLabel, className, disabled, ...props }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
+declare function ThemeSwitcher({ checked, defaultChecked, onCheckedChange, isCollapsed, label, lightLabel, darkLabel, useDarkLabel, useLightLabel, className, disabled, tabIndex, ...props }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeSwitcher {
     var displayName: string;
 }

package/dist/theme-switcher.js

@@ -5,23 +5,21 @@ import { Moon, Sun } from "lucide-react";
 import { Button } from "./button";
 import { cn } from "./lib/utils";
 import { Switch } from "./switch";
-function ThemeSwitcher({ checked, defaultChecked = false, onCheckedChange, isCollapsed = false, label, lightLabel = "Light theme", darkLabel = "Dark theme", useDarkLabel = "Use dark theme", useLightLabel = "Use light theme", className, disabled, ...props }) {
+function ThemeSwitcher({ checked, defaultChecked = false, onCheckedChange, isCollapsed = false, label, lightLabel = "Light theme", darkLabel = "Dark theme", useDarkLabel = "Use dark theme", useLightLabel = "Use light theme", className, disabled, tabIndex, ...props }) {
     const isControlled = checked !== undefined;
     const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
     const isDark = isControlled ? checked : uncontrolledChecked;
     const activeLabel = label !== null && label !== void 0 ? label : (isDark ? darkLabel : lightLabel);
     const ActiveIcon = isDark ? Moon : Sun;
-    const CollapsedIcon = isDark ? Sun : Moon;
     const handleCheckedChange = React.useCallback((nextChecked) => {
         if (!isControlled) {
             setUncontrolledChecked(nextChecked);
         }
         onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(nextChecked);
     }, [isControlled, onCheckedChange]);
-    if (isCollapsed) {
-        return (_jsx("div", { "data-slot": "theme-switcher", className: cn("flex w-full justify-center py-1", className), children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", disabled: disabled, "aria-label": isDark ? useLightLabel : useDarkLabel, "aria-pressed": isDark, onClick: () => handleCheckedChange(!isDark), children: _jsx(CollapsedIcon, { "aria-hidden": "true", className: "h-4 w-4" }) }) }));
-    }
-    return (_jsx("div", { "data-slot": "theme-switcher", className: "px-1.5 py-1", children: _jsx(Switch, { checked: isDark, onCheckedChange: handleCheckedChange, disabled: disabled, label: _jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: activeLabel })] }), wrapperClassName: cn("w-full flex-row-reverse justify-between rounded-control px-3 py-2 text-muted-foreground transition-colors hover:bg-card hover:text-foreground", className), ...props }) }));
+    return (_jsxs("div", { "data-slot": "theme-switcher", className: cn("relative w-full overflow-hidden py-1 transition-[padding] duration-300 ease-in-out", isCollapsed ? "px-0" : "px-1.5", className), children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", disabled: disabled, "aria-hidden": isCollapsed ? undefined : true, "aria-label": isDark ? useLightLabel : useDarkLabel, "aria-pressed": isDark, tabIndex: isCollapsed ? tabIndex : -1, className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150", isCollapsed ? "opacity-100" : "pointer-events-none opacity-0"), onClick: () => handleCheckedChange(!isDark), children: _jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4" }) }), _jsx("div", { "aria-hidden": isCollapsed ? true : undefined, className: cn("transition-[opacity,transform] duration-150", isCollapsed
+                    ? "pointer-events-none translate-x-1 opacity-0"
+                    : "translate-x-0 opacity-100"), children: _jsx(Switch, { checked: isDark, onCheckedChange: handleCheckedChange, disabled: disabled, tabIndex: isCollapsed ? -1 : tabIndex, label: _jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: activeLabel })] }), wrapperClassName: "w-full flex-row-reverse justify-between rounded-control px-3 py-2 text-muted-foreground transition-colors hover:bg-card hover:text-foreground", ...props }) })] }));
 }
 ThemeSwitcher.displayName = "ThemeSwitcher";
 export { ThemeSwitcher };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",
@@ -23,7 +23,7 @@
     "build-storybook": "storybook build -c .storybook",
     "test": "vitest run",
     "prepublishOnly": "npm test && npm run build",
-    "chromatic": "chromatic --storybook-build-dir storybook-static --exit-once-uploaded"
+    "chromatic": "chromatic --build-script-name build-storybook"
   },
   "publishConfig": {
     "access": "public",