@neasg/design-system 0.4.10 → 0.4.12

package/dist/page-layout.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+const pageLayoutGapClassNames = {
+    page: "space-y-[var(--layout-page-gap)]",
+    header: "space-y-[var(--layout-page-header-gap)]",
+    section: "space-y-[var(--layout-page-section-gap)]",
+    control: "space-y-[var(--layout-page-control-gap)]",
+    context: "space-y-[var(--layout-page-context-gap)]",
+};
+const pageLayoutStackGapClassNames = {
+    header: pageLayoutGapClassNames.header,
+    section: pageLayoutGapClassNames.section,
+    control: pageLayoutGapClassNames.control,
+    context: pageLayoutGapClassNames.context,
+    title: "space-y-[var(--space-1)]",
+};
+function PageLayout({ gap = "page", className, ...props }) {
+    return (_jsx("div", { "data-slot": "page-layout", className: cn(pageLayoutGapClassNames[gap], className), ...props }));
+}
+function PageLayoutStack({ gap = "section", titleOffset = false, className, ...props }) {
+    return (_jsx("div", { "data-slot": "page-layout-stack", className: cn(pageLayoutStackGapClassNames[gap], titleOffset && "pt-[var(--layout-page-title-offset)]", className), ...props }));
+}
+function PageLayoutTitle(props) {
+    return (_jsx(PageLayoutStack, { gap: "title", "data-slot": "page-layout-title", ...props }));
+}
+function PageLayoutHeader(props) {
+    return (_jsx(PageLayoutStack, { gap: "header", "data-slot": "page-layout-header", ...props }));
+}
+function PageLayoutSection(props) {
+    return (_jsx(PageLayoutStack, { gap: "section", "data-slot": "page-layout-section", ...props }));
+}
+function PageLayoutControls(props) {
+    return (_jsx(PageLayoutStack, { gap: "control", "data-slot": "page-layout-controls", ...props }));
+}
+function PageLayoutContext(props) {
+    return (_jsx(PageLayoutStack, { gap: "context", "data-slot": "page-layout-context", ...props }));
+}
+export { PageLayout, PageLayoutStack, PageLayoutTitle, PageLayoutHeader, PageLayoutSection, PageLayoutControls, PageLayoutContext, pageLayoutGapClassNames, pageLayoutStackGapClassNames, };

package/dist/page-section.js

@@ -9,6 +9,6 @@ function PageSectionGroup({ variant = "divided", className, ...props }) {
 function PageSection({ title, description, headerAction, titleAdornment, className, headerClassName, contentClassName, children, ...props }) {
     const renderedTitle = React.isValidElement(title) ? (title) : (_jsx(Typography, { as: "h3", variant: "subheading", children: title }));
     const renderedDescription = description == null ? null : React.isValidElement(description) ? (description) : (_jsx(Typography, { as: "p", variant: "caption", children: description }));
-    return (_jsxs("section", { "data-slot": "page-section", className: cn("py-6", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", headerClassName), children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [renderedTitle, titleAdornment] }), renderedDescription] }), headerAction ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 sm:shrink-0", children: headerAction })) : null] }), children ? (_jsx("div", { className: cn("pt-4", contentClassName), children: children })) : null] }));
+    return (_jsxs("section", { "data-slot": "page-section", className: cn("py-6", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", headerClassName), children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [renderedTitle, titleAdornment] }), renderedDescription] }), headerAction ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-3 sm:shrink-0", children: headerAction })) : null] }), children ? (_jsx("div", { className: cn("pt-4", contentClassName), children: children })) : null] }));
 }
 export { PageSection, PageSectionGroup };

package/dist/popover-menu.js

@@ -19,7 +19,7 @@ function PopoverMenuSection({ className, children, ...props }) {
     return (_jsx("div", { className: cn("space-y-0", className), ...props, children: children }));
 }
 function PopoverMenuItem({ className, children, active, type = "button", ...props }) {
-    return (_jsxs(Button, { type: type, variant: "ghost", className: cn("h-auto min-h-8 w-full justify-start gap-2 rounded-sm px-2 py-2 text-left font-normal whitespace-normal", active &&
+    return (_jsxs(Button, { type: type, variant: "ghost", className: cn("h-auto min-h-8 w-full justify-start gap-2 rounded-sm px-2 py-2 text-left font-normal whitespace-normal focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-offset-0", active &&
             "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground", className), ...props, children: [children, active ? _jsx(Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0" }) : null] }));
 }
 function PopoverMenuCheckboxItem({ className, children, checked = false, description, disabled, onChange, readOnly, ...props }) {
@@ -33,7 +33,7 @@ function PopoverMenuFooter({ className, children, inset = "menu", ...props }) {
     return (_jsx("div", { className: cn("flex items-center gap-2 border-t p-1.5", inset === "menu" && "-mx-1 -mb-1", inset === "flush" && "m-0", className), ...props, children: children }));
 }
 function PopoverMenuFooterAction({ className, type = "button", ...props }) {
-    return (_jsx(Button, { type: type, variant: "ghost", size: "sm", className: cn("h-auto min-h-8 w-full justify-start px-2 py-1.5 text-left whitespace-normal", className), ...props }));
+    return (_jsx(Button, { type: type, variant: "ghost", size: "sm", className: cn("h-auto min-h-8 w-full justify-start px-2 py-1.5 text-left whitespace-normal focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-offset-0", className), ...props }));
 }
 function PopoverMenuFooterMeta({ className, children, ...props }) {
     return (_jsx(Typography, { as: "span", variant: "bodySm", color: "muted", className: cn("shrink-0 px-2 font-medium", className), ...props, children: children }));

package/dist/routing-timeline.js

@@ -52,7 +52,7 @@ function RoutingTimeline({ items, emptyMessage = "No routing activity yet.", cla
                 const hasCompleteRoute = Boolean(item.from && item.to);
                 const title = (_b = item.title) !== null && _b !== void 0 ? _b : config.title;
                 const remark = (_c = item.remark) !== null && _c !== void 0 ? _c : item.description;
-                return (_jsxs("li", { className: "relative grid grid-cols-[var(--space-3)_minmax(0,1fr)] gap-[var(--space-3)] pb-[var(--space-5)] last:pb-0", children: [_jsx("div", { className: "relative flex justify-center", children: _jsx("span", { "aria-hidden": "true", "data-slot": "routing-timeline-marker", className: cn("relative z-10 mt-[var(--space-1)] size-[var(--space-2)] rounded-full border", config.markerClassName) }) }), _jsxs("div", { "data-slot": "routing-timeline-event-card", className: "min-w-0 rounded-surface border border-border/70 bg-card p-[var(--space-3)] text-card-foreground", children: [_jsxs("div", { className: "min-w-0 space-y-[var(--space-1)]", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-[var(--space-2)]", children: [_jsx(Typography, { as: "p", variant: "label", className: "min-w-0 flex-1 font-semibold", children: title }), _jsx(Badge, { variant: config.badgeVariant, bordered: true, className: "max-w-full shrink-0 self-start", children: (_d = item.badgeLabel) !== null && _d !== void 0 ? _d : config.label })] }), item.timestamp || item.actor ? (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-[var(--space-1)] gap-y-[var(--space-1)]", children: [item.timestamp ? (_jsx(Typography, { as: "time", variant: "caption", className: "shrink-0", children: item.timestamp })) : null, item.actor ? (_jsxs(Typography, { as: "p", variant: "caption", className: "inline-flex min-w-0 items-center gap-x-[var(--space-1)]", children: [item.timestamp ? (_jsx("span", { "aria-hidden": "true", children: "\u00B7" })) : null, "By ", item.actor] })) : null] })) : null] }), remark ? (_jsx(Typography, { as: "div", variant: "bodySm", "data-slot": "routing-timeline-remark", className: "mt-[var(--space-4)] font-normal", children: remark })) : null, hasRouteEndpoints ? (_jsxs("footer", { "data-slot": "routing-timeline-handoff", "data-complete-route": hasCompleteRoute ? "true" : undefined, className: "mt-[var(--space-4)] flex flex-col space-y-[var(--space-2)] text-xs text-muted-foreground", children: [item.from ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.from })) : null, item.from && item.to ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "to" }), _jsx(ArrowDown, { "aria-hidden": "true", "data-slot": "routing-timeline-handoff-arrow", className: "ml-1 size-4 shrink-0 text-muted-foreground" })] })) : null, item.to ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.to })) : null] })) : null] })] }, item.id));
+                return (_jsxs("li", { className: "relative grid grid-cols-[var(--space-3)_minmax(0,1fr)] gap-[var(--space-3)] pb-[var(--space-5)] last:pb-0", children: [_jsx("div", { className: "relative flex justify-center", children: _jsx("span", { "aria-hidden": "true", "data-slot": "routing-timeline-marker", className: cn("relative z-10 mt-[var(--space-1)] size-[var(--space-2)] rounded-full border", config.markerClassName) }) }), _jsxs("div", { "data-slot": "routing-timeline-event-card", className: "min-w-0 rounded-surface border border-border/70 bg-card p-[var(--space-3)] text-card-foreground", children: [_jsxs("div", { className: "min-w-0 space-y-[var(--space-1)]", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-[var(--space-2)]", children: [_jsx(Typography, { as: "p", variant: "label", className: "min-w-0 flex-1 font-semibold", children: title }), _jsx(Badge, { variant: config.badgeVariant, bordered: true, className: "max-w-full shrink-0 self-start", children: (_d = item.badgeLabel) !== null && _d !== void 0 ? _d : config.label })] }), item.timestamp || item.actor ? (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-[var(--space-1)] gap-y-[var(--space-1)]", children: [item.timestamp ? (_jsx(Typography, { as: "time", variant: "caption", className: "shrink-0 text-muted-foreground/60", children: item.timestamp })) : null, item.actor ? (_jsxs(Typography, { as: "p", variant: "caption", className: "inline-flex min-w-0 items-center gap-x-[var(--space-1)]", children: [item.timestamp ? (_jsx("span", { "aria-hidden": "true", children: "\u00B7" })) : null, "By ", item.actor] })) : null] })) : null] }), remark ? (_jsx(Typography, { as: "div", variant: "bodySm", "data-slot": "routing-timeline-remark", className: "mt-[var(--space-4)] font-normal", children: remark })) : null, hasRouteEndpoints ? (_jsxs("footer", { "data-slot": "routing-timeline-handoff", "data-complete-route": hasCompleteRoute ? "true" : undefined, className: "mt-[var(--space-4)] flex flex-col space-y-[var(--space-2)] text-xs text-muted-foreground", children: [item.from ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.from })) : null, item.from && item.to ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "to" }), _jsx(ArrowDown, { "aria-hidden": "true", "data-slot": "routing-timeline-handoff-arrow", className: "ml-1 size-4 shrink-0 text-muted-foreground" })] })) : null, item.to ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.to })) : null] })) : null] })] }, item.id));
             }) }) }));
 }
 export { RoutingTimeline };

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

@@ -4,6 +4,7 @@ import type { TableColumn } from "./table";
 type PopoverPlacementProps = Pick<PopoverProps, "align" | "side" | "sideOffset">;
 export interface TableColumnVisibilityMenuProps<Row> extends PopoverPlacementProps {
     columns: TableColumn<Row>[];
+    /** Ordered visible column keys. Reordering in the menu emits the next order through `onVisibleColumnKeysChange`. */
     visibleColumnKeys: readonly string[];
     onVisibleColumnKeysChange: (visibleColumnKeys: string[]) => void;
     defaultVisibleColumnKeys?: readonly string[];
@@ -12,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

@@ -1,13 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Columns3 } from "lucide-react";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Columns3, GripVertical } from "lucide-react";
 import { Button } from "./button";
 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) {
@@ -19,11 +22,18 @@ function getColumnVisibilityLabel(column) {
     }
     return column.key;
 }
-function orderVisibleColumnKeys(columns, visibleColumnKeys) {
-    const visibleColumnKeySet = new Set(visibleColumnKeys);
-    return columns
-        .map((column) => column.key)
-        .filter((columnKey) => visibleColumnKeySet.has(columnKey));
+function orderColumnKeys(columns, columnKeys) {
+    const columnKeySet = new Set(columns.map((column) => column.key));
+    const seenColumnKeys = new Set();
+    const orderedColumnKeys = [];
+    Array.from(columnKeys).forEach((columnKey) => {
+        if (!columnKeySet.has(columnKey) || seenColumnKeys.has(columnKey)) {
+            return;
+        }
+        orderedColumnKeys.push(columnKey);
+        seenColumnKeys.add(columnKey);
+    });
+    return orderedColumnKeys;
 }
 function arraysMatch(left, right) {
     if (left.length !== right.length) {
@@ -31,44 +41,81 @@ function arraysMatch(left, right) {
     }
     return left.every((value, index) => value === right[index]);
 }
-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 SortableColumnOption({ columnKey, label, checked, disabled, onToggle, }) {
+    const checkboxId = React.useId();
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: columnKey, disabled: !checked });
+    return (_jsxs("div", { ref: setNodeRef, style: {
+            transform: CSS.Transform.toString(transform),
+            transition,
+            zIndex: isDragging ? 50 : undefined,
+        }, className: cn("flex h-9 items-center gap-2 rounded-sm px-1.5 pr-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground", isDragging && "opacity-50 shadow-sm"), children: [_jsx("button", { type: "button", "aria-label": `Reorder ${label}`, disabled: !checked, className: cn("inline-flex size-6 shrink-0 touch-none items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-background hover:text-foreground", checked
+                    ? "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, 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: {
+            distance: 8,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
     const searchInputId = React.useId();
+    const titleId = React.useId();
     const requiredVisibleColumns = Math.max(0, minVisibleColumns);
-    const visibleColumnKeySet = React.useMemo(() => new Set(visibleColumnKeys), [visibleColumnKeys]);
-    const visibleColumnCount = columns.filter((column) => visibleColumnKeySet.has(column.key)).length;
     const selectableColumns = React.useMemo(() => columns.filter((column) => column.hideable !== false), [columns]);
-    const defaultKeys = React.useMemo(() => orderVisibleColumnKeys(columns, defaultVisibleColumnKeys !== null && defaultVisibleColumnKeys !== void 0 ? defaultVisibleColumnKeys : columns
+    const defaultKeys = React.useMemo(() => orderColumnKeys(columns, defaultVisibleColumnKeys !== null && defaultVisibleColumnKeys !== void 0 ? defaultVisibleColumnKeys : columns
         .filter((column) => column.defaultVisible !== false)
         .map((column) => column.key)), [columns, defaultVisibleColumnKeys]);
-    const currentKeys = React.useMemo(() => orderVisibleColumnKeys(columns, visibleColumnKeys), [columns, visibleColumnKeys]);
+    const currentKeys = React.useMemo(() => orderColumnKeys(columns, visibleColumnKeys), [columns, visibleColumnKeys]);
+    const visibleColumnKeySet = React.useMemo(() => new Set(currentKeys), [currentKeys]);
+    const visibleColumnCount = currentKeys.length;
+    const orderedSelectableColumns = React.useMemo(() => {
+        const selectableColumnsByKey = new Map(selectableColumns.map((column) => [column.key, column]));
+        const orderedVisibleColumns = currentKeys
+            .map((columnKey) => selectableColumnsByKey.get(columnKey))
+            .filter((column) => Boolean(column));
+        const orderedVisibleColumnKeySet = new Set(orderedVisibleColumns.map((column) => column.key));
+        const hiddenColumns = selectableColumns.filter((column) => !orderedVisibleColumnKeySet.has(column.key));
+        return [...orderedVisibleColumns, ...hiddenColumns];
+    }, [currentKeys, selectableColumns]);
     const canRestoreDefaults = defaultKeys.length >= requiredVisibleColumns &&
         !arraysMatch(currentKeys, defaultKeys);
     const normalizedQuery = query.trim().toLowerCase();
-    const filteredColumns = selectableColumns.filter((column) => getColumnVisibilityLabel(column).toLowerCase().includes(normalizedQuery));
+    const filteredColumns = orderedSelectableColumns.filter((column) => getColumnVisibilityLabel(column).toLowerCase().includes(normalizedQuery));
     const commitVisibleColumnKeys = React.useCallback((nextVisibleColumnKeys) => {
-        const orderedKeys = orderVisibleColumnKeys(columns, nextVisibleColumnKeys);
+        const orderedKeys = orderColumnKeys(columns, nextVisibleColumnKeys);
         if (orderedKeys.length < requiredVisibleColumns) {
             return;
         }
         onVisibleColumnKeysChange(orderedKeys);
     }, [columns, onVisibleColumnKeysChange, requiredVisibleColumns]);
     const toggleColumn = React.useCallback((columnKey) => {
-        const nextVisibleColumnKeys = new Set(visibleColumnKeys);
-        if (nextVisibleColumnKeys.has(columnKey)) {
-            nextVisibleColumnKeys.delete(columnKey);
-        }
-        else {
-            nextVisibleColumnKeys.add(columnKey);
+        const nextVisibleColumnKeys = currentKeys.filter((currentColumnKey) => currentColumnKey !== columnKey);
+        if (!visibleColumnKeySet.has(columnKey)) {
+            nextVisibleColumnKeys.push(columnKey);
         }
         commitVisibleColumnKeys(nextVisibleColumnKeys);
-    }, [commitVisibleColumnKeys, visibleColumnKeys]);
+    }, [commitVisibleColumnKeys, currentKeys, visibleColumnKeySet]);
+    const handleDragEnd = React.useCallback((event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id) {
+            return;
+        }
+        const oldIndex = currentKeys.indexOf(String(active.id));
+        const newIndex = currentKeys.indexOf(String(over.id));
+        if (oldIndex < 0 || newIndex < 0) {
+            return;
+        }
+        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 ? (filteredColumns.map((column) => {
-                        const label = getColumnVisibilityLabel(column);
-                        const checked = visibleColumnKeySet.has(column.key);
-                        const disabled = checked && visibleColumnCount <= requiredVisibleColumns;
-                        return (_jsxs("label", { className: cn("flex h-9 cursor-pointer items-center gap-2 rounded-sm px-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground", disabled && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit"), children: [_jsx(Checkbox, { checked: checked, disabled: disabled, onChange: () => toggleColumn(column.key), "aria-label": label }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label })] }, 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[];
@@ -115,12 +134,22 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
     loadingRows?: number;
-    /** Optional controlled set of visible column keys. Omit to render every column. */
+    /** 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, };