@neasg/design-system 0.4.11 → 0.4.12

package/dist/table-column-visibility.d.ts

@@ -13,10 +13,11 @@ export interface TableColumnVisibilityMenuProps<Row> extends PopoverPlacementPro
     triggerClassName?: string;
     contentClassName?: string;
     className?: string;
+    title?: React.ReactNode;
     searchPlaceholder?: string;
     restoreDefaultsLabel?: string;
     emptyMessage?: React.ReactNode;
     minVisibleColumns?: number;
 }
-declare function TableColumnVisibilityMenu<Row>({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel, triggerClassName, contentClassName, className, searchPlaceholder, restoreDefaultsLabel, emptyMessage, minVisibleColumns, align, sideOffset, side, }: TableColumnVisibilityMenuProps<Row>): import("react/jsx-runtime").JSX.Element;
+declare function TableColumnVisibilityMenu<Row>({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel, triggerClassName, contentClassName, className, title, searchPlaceholder, restoreDefaultsLabel, emptyMessage, minVisibleColumns, align, sideOffset, side, }: TableColumnVisibilityMenuProps<Row>): import("react/jsx-runtime").JSX.Element;
 export { TableColumnVisibilityMenu };

package/dist/table-column-visibility.js

@@ -10,7 +10,7 @@ import { Checkbox } from "./checkbox";
 import { InputControl } from "./input-control";
 import { cn } from "./lib/utils";
 import { Popover } from "./popover";
-import { PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, } from "./popover-menu";
+import { PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroupLabel, } from "./popover-menu";
 import { SearchInputShell } from "./search-input-shell";
 function getColumnVisibilityLabel(column) {
     if (column.visibilityLabel) {
@@ -52,7 +52,7 @@ function SortableColumnOption({ columnKey, label, checked, disabled, onToggle, }
                     ? "cursor-grab active:cursor-grabbing"
                     : "cursor-not-allowed opacity-40"), ...(checked ? { ...attributes, ...listeners } : {}), children: _jsx(GripVertical, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(Checkbox, { id: checkboxId, checked: checked, disabled: disabled, onChange: onToggle, "aria-label": label }), _jsx("label", { htmlFor: checkboxId, className: cn("min-w-0 flex-1 cursor-pointer truncate", disabled && "cursor-not-allowed text-muted-foreground"), children: label })] }));
 }
-function TableColumnVisibilityMenu({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel = "Customize columns", triggerClassName, contentClassName, className, searchPlaceholder = "Search columns", restoreDefaultsLabel = "Restore defaults", emptyMessage = "No columns found", minVisibleColumns = 1, align = "end", sideOffset = 4, side, }) {
+function TableColumnVisibilityMenu({ columns, visibleColumnKeys, onVisibleColumnKeysChange, defaultVisibleColumnKeys, trigger, triggerLabel = "Customize columns", triggerClassName, contentClassName, className, title = "Customize columns", searchPlaceholder = "Search columns", restoreDefaultsLabel = "Restore defaults", emptyMessage = "No columns found", minVisibleColumns = 1, align = "end", sideOffset = 4, side, }) {
     const [query, setQuery] = React.useState("");
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
@@ -62,6 +62,7 @@ function TableColumnVisibilityMenu({ columns, visibleColumnKeys, onVisibleColumn
         coordinateGetter: sortableKeyboardCoordinates,
     }));
     const searchInputId = React.useId();
+    const titleId = React.useId();
     const requiredVisibleColumns = Math.max(0, minVisibleColumns);
     const selectableColumns = React.useMemo(() => columns.filter((column) => column.hideable !== false), [columns]);
     const defaultKeys = React.useMemo(() => orderColumnKeys(columns, defaultVisibleColumnKeys !== null && defaultVisibleColumnKeys !== void 0 ? defaultVisibleColumnKeys : columns
@@ -110,11 +111,11 @@ function TableColumnVisibilityMenu({ columns, visibleColumnKeys, onVisibleColumn
         commitVisibleColumnKeys(arrayMove(currentKeys, oldIndex, newIndex));
     }, [commitVisibleColumnKeys, currentKeys]);
     const defaultTrigger = (_jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": triggerLabel, className: triggerClassName, children: _jsx(Columns3, { "aria-hidden": "true" }) }));
-    return (_jsx(Popover, { trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, align: align, side: side, sideOffset: sideOffset, contentClassName: cn("w-80 p-0", contentClassName), children: _jsxs("div", { className: cn("flex max-h-96 flex-col", className), children: [_jsxs("div", { className: "border-b p-2", children: [_jsx("label", { htmlFor: searchInputId, className: "sr-only", children: searchPlaceholder }), _jsx(SearchInputShell, { children: _jsx(InputControl, { id: searchInputId, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: "h-8 bg-background pl-8 pr-2" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: filteredColumns.length ? (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: filteredColumns.map((column) => column.key), strategy: verticalListSortingStrategy, children: filteredColumns.map((column) => {
-                                const label = getColumnVisibilityLabel(column);
-                                const checked = visibleColumnKeySet.has(column.key);
-                                const disabled = checked && visibleColumnCount <= requiredVisibleColumns;
-                                return (_jsx(SortableColumnOption, { columnKey: column.key, label: label, checked: checked, disabled: disabled, onToggle: () => toggleColumn(column.key) }, column.key));
-                            }) }) })) : (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage })) }), _jsxs(PopoverMenuFooter, { inset: "flush", className: "justify-between", children: [_jsx(PopoverMenuFooterAction, { onClick: () => commitVisibleColumnKeys(defaultKeys), disabled: !canRestoreDefaults, className: "w-auto min-w-0 flex-1", children: restoreDefaultsLabel }), _jsxs(PopoverMenuFooterMeta, { children: [visibleColumnCount, " of ", columns.length] })] })] }) }));
+    return (_jsx(Popover, { trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, align: align, side: side, sideOffset: sideOffset, contentClassName: cn("w-80 p-0", contentClassName), "aria-labelledby": title ? titleId : undefined, children: _jsxs("div", { className: cn("flex max-h-96 flex-col", className), children: [_jsxs("div", { className: "border-b p-2", children: [_jsx("label", { htmlFor: searchInputId, className: "sr-only", children: searchPlaceholder }), _jsx(SearchInputShell, { children: _jsx(InputControl, { id: searchInputId, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: "h-8 bg-background pl-8 pr-2" }) })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: [title ? (_jsx(PopoverMenuGroupLabel, { id: titleId, children: title })) : null, filteredColumns.length ? (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: filteredColumns.map((column) => column.key), strategy: verticalListSortingStrategy, children: filteredColumns.map((column) => {
+                                    const label = getColumnVisibilityLabel(column);
+                                    const checked = visibleColumnKeySet.has(column.key);
+                                    const disabled = checked && visibleColumnCount <= requiredVisibleColumns;
+                                    return (_jsx(SortableColumnOption, { columnKey: column.key, label: label, checked: checked, disabled: disabled, onToggle: () => toggleColumn(column.key) }, column.key));
+                                }) }) })) : (_jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage }))] }), _jsxs(PopoverMenuFooter, { inset: "flush", className: "justify-between", children: [_jsx(PopoverMenuFooterAction, { onClick: () => commitVisibleColumnKeys(defaultKeys), disabled: !canRestoreDefaults, className: "w-auto min-w-0 flex-1", children: restoreDefaultsLabel }), _jsxs(PopoverMenuFooterMeta, { children: [visibleColumnCount, " of ", columns.length] })] })] }) }));
 }
 export { TableColumnVisibilityMenu };

package/dist/table-toolbar.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { type SearchInputProps } from "./search-input";
 export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     search?: SearchInputProps;
+    actionsClassName?: string;
 }
-declare function TableToolbar({ search, className, children, ...props }: TableToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare function TableToolbar({ search, className, actionsClassName, children, ...props }: TableToolbarProps): import("react/jsx-runtime").JSX.Element;
 export { TableToolbar };

package/dist/table-toolbar.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SearchInput } from "./search-input";
 import { cn } from "./lib/utils";
-function TableToolbar({ search, className, children, ...props }) {
-    return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-1.5", className), ...props, children: [search ? (_jsx(SearchInput, { ...search, containerClassName: cn("min-w-[200px] flex-1 max-w-md", search.containerClassName) })) : null, children] }));
+function TableToolbar({ search, className, actionsClassName, children, ...props }) {
+    const hasSearch = Boolean(search);
+    return (_jsxs("div", { className: cn(hasSearch
+            ? "grid w-full grid-cols-1 items-center gap-[calc(var(--space-1)+0.125rem)] sm:grid-cols-[minmax(calc(var(--space-10)*5),28rem)_minmax(0,1fr)]"
+            : "flex w-full flex-wrap items-center justify-end gap-[calc(var(--space-1)+0.125rem)]", className), ...props, children: [search ? (_jsx(SearchInput, { ...search, containerClassName: cn("w-full min-w-[calc(var(--space-10)*5)] max-w-md", search.containerClassName) })) : null, children ? (_jsx("div", { className: cn("flex flex-wrap items-center gap-[calc(var(--space-1)+0.125rem)]", hasSearch
+                    ? "justify-start sm:justify-end sm:justify-self-end"
+                    : "justify-end", actionsClassName), children: children })) : null] }));
 }
 export { TableToolbar };

package/dist/table.d.ts

@@ -7,6 +7,7 @@ declare const TableRoot: React.ForwardRefExoticComponent<TableRootProps & React.
 interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
+export type TableColumnWidths = Record<string, number>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
@@ -16,12 +17,16 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
     minWidth?: string;
     maxWidth?: string;
     wrap?: boolean;
+    treatWidthAsMinWidth?: boolean;
+    containOverflow?: boolean;
 } & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & {
     width?: string;
     minWidth?: string;
     maxWidth?: string;
     wrap?: boolean;
+    treatWidthAsMinWidth?: boolean;
+    containOverflow?: boolean;
 } & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 type TableAlign = "left" | "center" | "right";
@@ -76,6 +81,12 @@ export interface TableColumn<Row> {
     cellClassName?: string;
     /** Pins the column to the left or right edge while the table scrolls horizontally. */
     sticky?: "left" | "right";
+    /** Enables a resize handle for this column. Use `resizableColumns` on Table to opt every column in by default. */
+    resizable?: boolean;
+    /** Minimum pixel width while resizing. Defaults to `minWidth`, then 64. */
+    resizeMinWidth?: number;
+    /** Maximum pixel width while resizing. Omit to allow the column to grow. */
+    resizeMaxWidth?: number;
 }
 export interface TableSortingProps {
     field: string | null;
@@ -95,8 +106,16 @@ interface SortableTableHeadProps<T extends string> {
     maxWidth?: string;
     align?: TableAlign;
     sortLabel?: string;
+    resizeHandle?: React.ReactNode;
+    treatWidthAsMinWidth?: boolean;
+    containOverflow?: boolean;
+}
+declare function SortableTableHead<T extends string>({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, }: SortableTableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface TableColumnResizeHandleRenderProps<Row> {
+    column: TableColumn<Row>;
+    nextColumn: TableColumn<Row>;
+    handle: React.ReactElement;
 }
-declare function SortableTableHead<T extends string>({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap, width, minWidth, maxWidth, align, sortLabel, }: SortableTableHeadProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     columns: TableColumn<Row>[];
     rows: Row[];
@@ -117,10 +136,20 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     loadingRows?: number;
     /** Optional controlled ordered list of visible column keys. Omit to render every column in config order. */
     visibleColumnKeys?: readonly string[];
+    /** When true, every column is resizable unless its column config sets `resizable: false`. */
+    resizableColumns?: boolean;
+    /** Controlled pixel widths keyed by column key. */
+    columnWidths?: TableColumnWidths;
+    /** Initial pixel widths keyed by column key for uncontrolled resizing. */
+    defaultColumnWidths?: TableColumnWidths;
+    /** Emits whenever a resize handle changes column widths. */
+    onColumnWidthsChange?: (columnWidths: TableColumnWidths) => void;
+    /** Optional hook for decorating resize handles without replacing table sizing behavior. */
+    renderColumnResizeHandle?: (props: TableColumnResizeHandleRenderProps<Row>) => React.ReactNode;
     /** When true, applies alternating row backgrounds for easier scanning. */
     striped?: boolean;
     /** When set, rows become interactive: cursor-pointer, hover highlight, and click handling. */
     onRowClick?: (row: Row, index: number) => void;
 }
-declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, sorting, pagination, loading, loadingRows, visibleColumnKeys, striped, onRowClick, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, sorting, pagination, loading, loadingRows, visibleColumnKeys, resizableColumns, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, striped, onRowClick, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };

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 {
@@ -149,23 +279,163 @@ function getVisibleColumns(columns, visibleColumnKeys) {
     });
     return visibleColumns;
 }
-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;
+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 container = (_jsx(TableContainer, { className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
+    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)
@@ -178,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;