@neasg/design-system 0.4.8 → 0.4.9

package/dist/styles.css

@@ -121,6 +121,16 @@
     --nea-neutral-800: 222 36% 11%;
     --nea-neutral-900: 222 84% 5%;
 
+    --nea-dark-neutral-50: 214 18% 92%;
+    --nea-dark-neutral-100: 214 18% 90%;
+    --nea-dark-neutral-200: 215 14% 68%;
+    --nea-dark-neutral-300: 220 10% 16%;
+    --nea-dark-neutral-400: 220 12% 13.5%;
+    --nea-dark-neutral-500: 220 14% 11.5%;
+    --nea-dark-neutral-600: 220 16% 9.5%;
+    --nea-dark-neutral-700: 220 18% 8%;
+    --nea-dark-neutral-800: 220 22% 6.5%;
+
     --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
       "Segoe UI", sans-serif;
     --font-mono: "SFMono-Regular", "SF Mono", ui-monospace, Menlo, Monaco, Consolas,
@@ -136,24 +146,27 @@
 
     --card: var(--nea-neutral-0);
     --card-foreground: var(--nea-neutral-900);
+    --card-border: var(--nea-neutral-200);
 
     --popover: var(--nea-neutral-0);
     --popover-foreground: var(--nea-neutral-900);
+    --tooltip-background: var(--nea-neutral-800);
+    --tooltip-foreground: var(--nea-neutral-0);
 
     --primary: var(--nea-green-700);
     --primary-foreground: var(--nea-neutral-0);
 
     --secondary: var(--nea-neutral-100);
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary-foreground: var(--nea-neutral-900);
 
     --muted: var(--nea-neutral-100);
     --muted-foreground: var(--nea-neutral-500);
 
     --accent: var(--nea-neutral-100);
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent-foreground: var(--nea-neutral-900);
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: var(--nea-red-500);
+    --destructive-foreground: var(--nea-neutral-0);
 
     --status-success: var(--nea-green-100);
     --status-success-foreground: var(--nea-green-800);
@@ -169,69 +182,173 @@
     --border: var(--nea-neutral-200);
     --input: var(--nea-neutral-200);
     --ring: var(--nea-green-700);
+    --component-border: var(--card-border);
+    --button-outline-background: var(--nea-neutral-100);
+    --button-outline-hover-background: var(--nea-neutral-200);
+    --button-outline-border: var(--component-border);
 
     --radius: 0.5rem;
     --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
-
-    --layout-shell-background: 223 30% 95.5%;
-    --layout-sidebar-width: 18rem;
+    --radius-control: var(--radius-md);
+    --radius-surface: var(--radius-lg);
+    --radius-overlay: var(--radius-lg);
+
+    --layout-chrome-background: var(--nea-neutral-100);
+    --layout-shell-background: var(--layout-chrome-background);
+    --layout-sidebar-background: var(--layout-chrome-background);
+    --layout-sidebar-logo-background: transparent;
+    --layout-sidebar-border: var(--nea-neutral-200);
+    --layout-surface-background: var(--nea-neutral-50);
+    --layout-workspace-header-background: var(--nea-neutral-0);
+    --layout-surface-border: var(--nea-neutral-200);
+    --layout-surface-shadow:
+      0 22px 48px -32px rgb(15 23 42 / 0.46),
+      0 2px 8px rgb(15 23 42 / 0.08);
+    --overlay-shadow:
+      0 18px 36px -22px rgb(15 23 42 / 0.26),
+      0 8px 18px -14px rgb(15 23 42 / 0.16);
+    --overlay-shadow-strong:
+      0 8px 34px -20px rgb(15 23 42 / 0.26),
+      0 3px 14px -10px rgb(15 23 42 / 0.14);
+    --tab-list-background: var(--layout-chrome-background);
+    --tab-list-border: var(--component-border);
+    --tab-trigger-foreground: var(--nea-neutral-500);
+    --tab-trigger-hover-background: var(--nea-neutral-200);
+    --tab-trigger-active-background: var(--nea-neutral-0);
+    --tab-trigger-active-foreground: var(--nea-neutral-900);
+    --tab-indicator: var(--primary);
+    --card-gradient-from: var(--nea-green-700);
+    --card-gradient-to: var(--nea-green-500);
+    --card-gradient-border: var(--nea-green-500);
+    --card-gradient-foreground: var(--nea-neutral-0);
+    --layout-sidebar-width: 19.25rem;
     --layout-sidebar-collapsed-width: 4rem;
-    --layout-sidebar-padding-inline: var(--space-2);
-    --layout-sidebar-padding-top: var(--space-3);
-    --layout-content-gap-start: var(--space-2);
-    --layout-content-gap-start-md: var(--space-3);
-    --layout-content-gap-start-lg: var(--space-4);
-    --layout-content-padding: var(--space-4);
-    --layout-content-padding-md: var(--space-6);
-    --layout-content-padding-lg: var(--space-8);
-    --layout-surface-padding: var(--space-4);
-    --layout-surface-padding-md: var(--space-6);
-    --layout-surface-padding-lg: var(--space-8);
-    --layout-surface-gap: var(--space-6);
+    --layout-right-panel-width: 27rem;
+    --layout-sidebar-padding-inline: var(--space-1);
+    --layout-sidebar-padding-top: var(--space-2);
+    --layout-sidebar-content-padding: var(--space-2);
+    --layout-sidebar-section-gap: var(--space-5);
+    --layout-content-gap-start: var(--space-0);
+    --layout-content-gap-start-md: var(--space-0);
+    --layout-content-gap-start-lg: var(--space-0);
+    --layout-content-padding: var(--space-2);
+    --layout-content-padding-md: var(--space-3);
+    --layout-content-padding-lg: var(--space-3);
+    --layout-surface-padding: var(--space-3);
+    --layout-surface-padding-md: var(--space-4);
+    --layout-surface-padding-lg: var(--space-4);
+    --layout-surface-gap: var(--space-5);
+    --layout-page-gap: var(--space-8);
+    --layout-page-header-gap: var(--space-5);
+    --layout-page-section-gap: var(--space-6);
+    --layout-page-control-gap: var(--space-4);
+    --layout-page-context-gap: var(--space-3);
+    --layout-page-alert-margin: var(--space-1);
+    --layout-page-title-offset: var(--space-1);
+    --layout-right-panel-padding: var(--space-4);
+    --layout-right-panel-gap: var(--space-6);
+    --layout-right-panel-tabs-gap: var(--space-4);
+    --layout-right-panel-footer-gap: var(--space-3);
+    --layout-right-panel-section-gap: var(--space-2);
+    --layout-right-panel-heading-gap: var(--space-1);
+    --layout-right-panel-background: var(--layout-surface-background);
+    --layout-right-panel-border: var(--nea-neutral-300);
+    --layout-right-panel-shadow:
+      -18px 0 34px -30px rgb(15 23 42 / 0.32),
+      -2px 0 10px -8px rgb(15 23 42 / 0.18);
+    --table-border: var(--component-border);
+    --table-header-background: var(--tab-list-background);
+    --table-row-striped-background: var(--nea-neutral-100);
+    --table-row-warning-background: var(--nea-neutral-0);
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --status-success: var(--nea-green-900);
-    --status-success-foreground: var(--nea-green-300);
-    --status-warning: var(--nea-amber-900);
-    --status-warning-foreground: var(--nea-amber-300);
-    --status-info: var(--nea-blue-900);
-    --status-info-foreground: var(--nea-blue-300);
-    --status-accent: var(--nea-violet-900);
-    --status-accent-foreground: var(--nea-violet-300);
-    --status-destructive: var(--nea-red-900);
-    --status-destructive-foreground: var(--nea-red-300);
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --background: var(--nea-dark-neutral-300);
+    --foreground: var(--nea-dark-neutral-50);
+
+    --card: var(--nea-dark-neutral-300);
+    --card-foreground: var(--nea-dark-neutral-50);
+    --card-border: 220 10% 28%;
+
+    --popover: var(--nea-dark-neutral-300);
+    --popover-foreground: var(--nea-dark-neutral-50);
+    --tooltip-background: var(--nea-dark-neutral-800);
+    --tooltip-foreground: var(--nea-dark-neutral-50);
+
+    --primary: 148 30% 38%;
+    --primary-foreground: var(--nea-dark-neutral-50);
+
+    --secondary: var(--nea-dark-neutral-500);
+    --secondary-foreground: var(--nea-dark-neutral-100);
+
+    --muted: var(--nea-dark-neutral-500);
+    --muted-foreground: var(--nea-dark-neutral-200);
+
+    --accent: var(--nea-dark-neutral-500);
+    --accent-foreground: var(--nea-dark-neutral-50);
+
+    --destructive: 0 72% 58%;
+    --destructive-foreground: var(--nea-dark-neutral-50);
+
+    --status-success: 148 20% 18%;
+    --status-success-foreground: 148 28% 62%;
+    --status-warning: 38 22% 18%;
+    --status-warning-foreground: 42 42% 64%;
+    --status-info: 214 22% 19%;
+    --status-info-foreground: 214 36% 66%;
+    --status-accent: 263 18% 20%;
+    --status-accent-foreground: 255 34% 68%;
+    --status-destructive: 0 20% 19%;
+    --status-destructive-foreground: 0 42% 66%;
+
+    --tab-list-background: var(--table-header-background);
+    --tab-trigger-foreground: var(--nea-dark-neutral-200);
+    --tab-trigger-hover-background: var(--nea-dark-neutral-400);
+    --tab-trigger-active-background: var(--nea-dark-neutral-300);
+    --tab-trigger-active-foreground: var(--nea-dark-neutral-50);
+    --tab-indicator: var(--primary);
+    --card-gradient-from: var(--nea-green-700);
+    --card-gradient-to: var(--nea-green-500);
+    --card-gradient-border: var(--nea-green-500);
+    --card-gradient-foreground: var(--nea-neutral-0);
+    --layout-chrome-background: var(--nea-dark-neutral-500);
+    --layout-shell-background: var(--layout-chrome-background);
+    --layout-sidebar-background: var(--layout-chrome-background);
+    --layout-sidebar-logo-background: hsl(var(--nea-neutral-0));
+    --layout-sidebar-border: var(--card-border);
+    --layout-surface-background: var(--nea-dark-neutral-400);
+    --layout-workspace-header-background: var(--nea-dark-neutral-300);
+    --layout-surface-border: var(--card-border);
+    --layout-surface-shadow:
+      0 24px 54px -34px rgb(0 0 0 / 0.64),
+      0 2px 10px rgb(0 0 0 / 0.26);
+    --overlay-shadow:
+      0 18px 36px -22px rgb(0 0 0 / 0.58),
+      0 8px 18px -14px rgb(0 0 0 / 0.34);
+    --overlay-shadow-strong:
+      0 10px 42px -24px rgb(0 0 0 / 0.68),
+      0 4px 16px -12px rgb(0 0 0 / 0.42);
+    --layout-right-panel-background: var(--layout-surface-background);
+    --layout-right-panel-border: 220 10% 32%;
+    --layout-right-panel-shadow:
+      -18px 0 36px -28px rgb(0 0 0 / 0.58),
+      -2px 0 12px -8px rgb(0 0 0 / 0.46);
+    --table-header-background: var(--nea-dark-neutral-500);
+    --table-row-striped-background: var(--nea-dark-neutral-500);
+    --table-row-warning-background: var(--nea-dark-neutral-300);
+
+    --border: var(--card-border);
+    --input: var(--card-border);
+    --ring: 148 30% 38%;
+    --component-border: var(--card-border);
+    --button-outline-background: var(--nea-dark-neutral-500);
+    --button-outline-hover-background: var(--nea-dark-neutral-400);
+    --button-outline-border: var(--component-border);
+    --tab-list-border: var(--component-border);
+    --table-border: var(--component-border);
   }
 
   * {
@@ -252,3 +369,64 @@
     font-smooth: never;
   }
 }
+
+@layer components {
+  [data-slot="routing-timeline"] {
+    --routing-timeline-background: var(--layout-right-panel-background);
+  }
+
+  [data-slot="routing-timeline-list"]::before {
+    position: absolute;
+    top: var(--space-2);
+    bottom: var(--space-0);
+    left: calc(var(--space-3) / 2);
+    width: 1px;
+    content: "";
+    transform: translateX(-50%);
+    background: hsl(var(--border));
+  }
+
+  [data-slot="routing-timeline-marker"] {
+    box-shadow: 0 0 0 var(--space-1) hsl(var(--routing-timeline-background));
+  }
+
+  [data-slot="routing-timeline-event-card"] {
+    container-type: inline-size;
+  }
+
+  [data-slot="routing-timeline-endpoints"][data-complete-route="true"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  [data-slot="routing-timeline-endpoint-arrow"] {
+    justify-self: start;
+    transform: rotate(90deg);
+  }
+
+  @container (min-width: 22rem) {
+    [data-slot="routing-timeline-endpoints"][data-complete-route="true"] {
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    }
+
+    [data-slot="routing-timeline-endpoint-arrow"] {
+      align-self: center;
+      justify-self: center;
+      transform: none;
+    }
+  }
+}
+
+@layer utilities {
+  .shadow-overlay-strong {
+    box-shadow: var(--overlay-shadow-strong);
+  }
+
+  .scrollbar-none {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+}

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { type PopoverProps } from "./popover";
+import type { TableColumn } from "./table";
+type PopoverPlacementProps = Pick<PopoverProps, "align" | "side" | "sideOffset">;
+export interface TableColumnVisibilityMenuProps<Row> extends PopoverPlacementProps {
+    columns: TableColumn<Row>[];
+    visibleColumnKeys: readonly string[];
+    onVisibleColumnKeysChange: (visibleColumnKeys: string[]) => void;
+    defaultVisibleColumnKeys?: readonly string[];
+    trigger?: React.ReactElement;
+    triggerLabel?: string;
+    triggerClassName?: string;
+    contentClassName?: string;
+    className?: string;
+    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;
+export { TableColumnVisibilityMenu };

package/dist/table-column-visibility.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Columns3 } 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 { SearchInputShell } from "./search-input-shell";
+function getColumnVisibilityLabel(column) {
+    if (column.visibilityLabel) {
+        return column.visibilityLabel;
+    }
+    if (typeof column.header === "string" ||
+        typeof column.header === "number") {
+        return String(column.header);
+    }
+    return column.key;
+}
+function orderVisibleColumnKeys(columns, visibleColumnKeys) {
+    const visibleColumnKeySet = new Set(visibleColumnKeys);
+    return columns
+        .map((column) => column.key)
+        .filter((columnKey) => visibleColumnKeySet.has(columnKey));
+}
+function arraysMatch(left, right) {
+    if (left.length !== right.length) {
+        return false;
+    }
+    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, }) {
+    const [query, setQuery] = React.useState("");
+    const searchInputId = 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
+        .filter((column) => column.defaultVisible !== false)
+        .map((column) => column.key)), [columns, defaultVisibleColumnKeys]);
+    const currentKeys = React.useMemo(() => orderVisibleColumnKeys(columns, visibleColumnKeys), [columns, visibleColumnKeys]);
+    const canRestoreDefaults = defaultKeys.length >= requiredVisibleColumns &&
+        !arraysMatch(currentKeys, defaultKeys);
+    const normalizedQuery = query.trim().toLowerCase();
+    const filteredColumns = selectableColumns.filter((column) => getColumnVisibilityLabel(column).toLowerCase().includes(normalizedQuery));
+    const commitVisibleColumnKeys = React.useCallback((nextVisibleColumnKeys) => {
+        const orderedKeys = orderVisibleColumnKeys(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);
+        }
+        commitVisibleColumnKeys(nextVisibleColumnKeys);
+    }, [commitVisibleColumnKeys, visibleColumnKeys]);
+    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] })] })] }) }));
+}
+export { TableColumnVisibilityMenu };

package/dist/table-toolbar.js

@@ -2,6 +2,6 @@ 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-2", className), ...props, children: [search ? (_jsx(SearchInput, { ...search, containerClassName: cn("min-w-[200px] flex-1 max-w-md", search.containerClassName) })) : null, children] }));
+    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] }));
 }
 export { TableToolbar };

package/dist/table.d.ts

@@ -25,6 +25,7 @@ declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<
 } & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 type TableAlign = "left" | "center" | "right";
+export type TableRowTone = "default" | "muted" | "warning";
 export type TableSortDirection = "asc" | "desc";
 export type SortDirection = TableSortDirection;
 export type TableSkeletonLine = {
@@ -54,6 +55,8 @@ export declare const TABLE_SKELETON_PRESETS: {
 export interface TableColumn<Row> {
     key: string;
     header: React.ReactNode;
+    /** Text label used by column visibility controls when the header is not plain text. */
+    visibilityLabel?: string;
     accessorKey?: keyof Row;
     cell?: (row: Row, rowIndex: number) => React.ReactNode;
     width?: string;
@@ -64,6 +67,10 @@ export interface TableColumn<Row> {
     sortable?: boolean;
     sortKey?: string;
     sortLabel?: string;
+    /** When false, restore-defaults helpers can omit the column from the visible set. */
+    defaultVisible?: boolean;
+    /** When false, the column visibility menu keeps the column out of its checklist. */
+    hideable?: boolean;
     skeleton?: TableSkeletonConfig;
     headerClassName?: string;
     cellClassName?: string;
@@ -100,16 +107,20 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     containerClassName?: string;
     tableClassName?: string;
     rowClassName?: string | ((row: Row, index: number) => string | undefined);
+    /** Semantic row tone. Use this for conditional formatting instead of raw colour classes. */
+    rowTone?: TableRowTone | ((row: Row, index: number) => TableRowTone | undefined);
     /** Constrains the table container height so the table body scrolls instead of the surrounding surface. */
     maxHeight?: React.CSSProperties["maxHeight"];
     sorting?: TableSortingProps;
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
     loadingRows?: number;
+    /** Optional controlled set of visible column keys. Omit to render every column. */
+    visibleColumnKeys?: readonly string[];
     /** 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, maxHeight, sorting, pagination, loading, loadingRows, 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, striped, onRowClick, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };