@mendylanda/ui 0.3.0-alpha.1 → 0.3.0-alpha.10

package/dist/styles.tailwind3.css

@@ -16,6 +16,7 @@
     --font-weight-semibold: 600;
     --tracking-widest: 0.1em;
     --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --animate-spin: mendy-spin 1s linear infinite;
     --animate-pulse: mendy-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -101,6 +102,9 @@
 .mui-014aadadffad:where([data-mendy-ui], [data-mendy-ui] *) {
     isolation: isolate;
   }
+.mui-d7efd1b0b0f9:where([data-mendy-ui], [data-mendy-ui] *) {
+    z-index: 1;
+  }
 .mui-418e44ad4f9e:where([data-mendy-ui], [data-mendy-ui] *) {
     z-index: 10;
   }
@@ -152,6 +156,12 @@
 .mui-8cc46fa87f41:where([data-mendy-ui], [data-mendy-ui] *) {
     margin-inline-end: calc(var(--spacing) * -1.5);
   }
+.mui-477d8f4dfce9:where([data-mendy-ui], [data-mendy-ui] *) {
+    margin-inline-end: calc(var(--spacing) * 1);
+  }
+.mui-68d781378b03:where([data-mendy-ui], [data-mendy-ui] *) {
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
 .mui-f28fea81a5cd:where([data-mendy-ui], [data-mendy-ui] *) {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -208,6 +218,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+.mui-2bd43fb57913:where([data-mendy-ui], [data-mendy-ui] *) {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
 .mui-0712570dcc9f:where([data-mendy-ui], [data-mendy-ui] *) {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
@@ -247,6 +261,9 @@
 .mui-ce1945804664:where([data-mendy-ui], [data-mendy-ui] *) {
     height: calc(var(--spacing) * 6);
   }
+.mui-c8e50836f8a1:where([data-mendy-ui], [data-mendy-ui] *) {
+    height: calc(var(--spacing) * 7);
+  }
 .mui-1fb07b38c63b:where([data-mendy-ui], [data-mendy-ui] *) {
     height: calc(var(--spacing) * 8);
   }
@@ -271,8 +288,11 @@
 .mui-1f061e70178e:where([data-mendy-ui], [data-mendy-ui] *) {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
-.mui-b057efba3283:where([data-mendy-ui], [data-mendy-ui] *) {
-    max-height: calc(var(--spacing) * 96);
+.mui-4d3f1304ebb2:where([data-mendy-ui], [data-mendy-ui] *) {
+    max-height: var(--radix-popover-content-available-height);
+  }
+.mui-da0beef015c9:where([data-mendy-ui], [data-mendy-ui] *) {
+    max-height: 400px;
   }
 .mui-80baa5d03af7:where([data-mendy-ui], [data-mendy-ui] *) {
     max-height: calc(var(--filter-menu-height) - 2px);
@@ -286,6 +306,9 @@
 .mui-dcd942c18ddc:where([data-mendy-ui], [data-mendy-ui] *) {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
+.mui-7bd696ca6be3:where([data-mendy-ui], [data-mendy-ui] *) {
+    max-height: 100%;
+  }
 .mui-410da8dfa8ac:where([data-mendy-ui], [data-mendy-ui] *) {
     min-height: calc(var(--spacing) * 0);
   }
@@ -313,12 +336,12 @@
 .mui-4ac4ec8dfbce:where([data-mendy-ui], [data-mendy-ui] *) {
     width: calc(var(--spacing) * 40);
   }
-.mui-72b37c1a040d:where([data-mendy-ui], [data-mendy-ui] *) {
-    width: calc(var(--spacing) * 64);
-  }
 .mui-37535002f0f7:where([data-mendy-ui], [data-mendy-ui] *) {
     width: calc(var(--spacing) * 72);
   }
+.mui-a4cce7869436:where([data-mendy-ui], [data-mendy-ui] *) {
+    width: 300px;
+  }
 .mui-fc6a57ff7553:where([data-mendy-ui], [data-mendy-ui] *) {
     width: var(--mendy-filter-editor-width,19rem);
   }
@@ -364,6 +387,9 @@
 .mui-27ead27a81df:where([data-mendy-ui], [data-mendy-ui] *) {
     flex-shrink: 0;
   }
+.mui-adca5146416e:where([data-mendy-ui], [data-mendy-ui] *) {
+    flex-grow: 1;
+  }
 .mui-215061302c50:where([data-mendy-ui], [data-mendy-ui] *) {
     border-collapse: collapse;
   }
@@ -374,6 +400,12 @@
     --mendy-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--mendy-tw-translate-x) var(--mendy-tw-translate-y);
   }
+.mui-4e3f08588318:where([data-mendy-ui], [data-mendy-ui] *) {
+    rotate: calc(45deg * -1);
+  }
+.mui-c80411b7591f:where([data-mendy-ui], [data-mendy-ui] *) {
+    rotate: 45deg;
+  }
 .mui-aa214ea38326:where([data-mendy-ui], [data-mendy-ui] *) {
     transform: var(--mendy-tw-rotate-x,) var(--mendy-tw-rotate-y,) var(--mendy-tw-rotate-z,) var(--mendy-tw-skew-x,) var(--mendy-tw-skew-y,);
   }
@@ -383,12 +415,21 @@
 .mui-7b3cd77eb999:where([data-mendy-ui], [data-mendy-ui] *) {
     animation: var(--animate-pulse);
   }
+.mui-2c14b55d77e6:where([data-mendy-ui], [data-mendy-ui] *) {
+    animation: var(--animate-spin);
+  }
 .mui-2194d094b585:where([data-mendy-ui], [data-mendy-ui] *) {
     cursor: col-resize;
   }
 .mui-d343f41ba73e:where([data-mendy-ui], [data-mendy-ui] *) {
     cursor: default;
   }
+.mui-f2e47d9c52ad:where([data-mendy-ui], [data-mendy-ui] *) {
+    cursor: grab;
+  }
+.mui-d2fa8848968d:where([data-mendy-ui], [data-mendy-ui] *) {
+    cursor: pointer;
+  }
 .mui-739a9a000791:where([data-mendy-ui], [data-mendy-ui] *) {
     touch-action: none;
   }
@@ -550,6 +591,9 @@
       border-color: color-mix(in oklab, var(--muted-foreground, #737373) 50%, transparent);
     }
   }
+.mui-515f9fdc6db7:where([data-mendy-ui], [data-mendy-ui] *) {
+    border-color: var(--primary, #171717);
+  }
 .mui-292affc1f780:where([data-mendy-ui], [data-mendy-ui] *) {
     background-color: var(--accent, #f5f5f5);
   }
@@ -568,6 +612,9 @@
 .mui-047624ec0c39:where([data-mendy-ui], [data-mendy-ui] *) {
     background-color: var(--color-green-100);
   }
+.mui-6ba846e1630e:where([data-mendy-ui], [data-mendy-ui] *) {
+    background-color: inherit;
+  }
 .mui-87ecb59f2d2d:where([data-mendy-ui], [data-mendy-ui] *) {
     background-color: var(--muted, #f5f5f5);
   }
@@ -637,6 +684,12 @@
 .mui-b5edc3ea7c91:where([data-mendy-ui], [data-mendy-ui] *) {
     padding-block: calc(var(--spacing) * 2);
   }
+.mui-d3cea061f2f3:where([data-mendy-ui], [data-mendy-ui] *) {
+    padding-block: calc(var(--spacing) * 3);
+  }
+.mui-96b92a971c95:where([data-mendy-ui], [data-mendy-ui] *) {
+    padding-block: calc(var(--spacing) * 5);
+  }
 .mui-078d945937da:where([data-mendy-ui], [data-mendy-ui] *) {
     padding-inline-start: calc(var(--spacing) * 8);
   }
@@ -777,6 +830,13 @@
     --mendy-tw-shadow: 0 1px 2px 0 var(--mendy-tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--mendy-tw-inset-shadow), var(--mendy-tw-inset-ring-shadow), var(--mendy-tw-ring-offset-shadow), var(--mendy-tw-ring-shadow), var(--mendy-tw-shadow);
   }
+.mui-853be6c11609:where([data-mendy-ui], [data-mendy-ui] *) {
+    --mendy-tw-ring-shadow: var(--mendy-tw-ring-inset,) 0 0 0 calc(2px + var(--mendy-tw-ring-offset-width)) var(--mendy-tw-ring-color, currentcolor);
+    box-shadow: var(--mendy-tw-inset-shadow), var(--mendy-tw-inset-ring-shadow), var(--mendy-tw-ring-offset-shadow), var(--mendy-tw-ring-shadow), var(--mendy-tw-shadow);
+  }
+.mui-fd9d0b696aac:where([data-mendy-ui], [data-mendy-ui] *) {
+    --mendy-tw-ring-color: var(--primary, #171717);
+  }
 .mui-59edd3d33673:where([data-mendy-ui], [data-mendy-ui] *) {
     --mendy-tw-outline-style: none;
     outline-style: none;
@@ -789,6 +849,10 @@
     outline-style: var(--mendy-tw-outline-style);
     outline-width: 1px;
   }
+.mui-e42932b7a79c:where([data-mendy-ui], [data-mendy-ui] *) {
+    --mendy-tw-blur: blur(8px);
+    filter: var(--mendy-tw-blur,) var(--mendy-tw-brightness,) var(--mendy-tw-contrast,) var(--mendy-tw-grayscale,) var(--mendy-tw-hue-rotate,) var(--mendy-tw-invert,) var(--mendy-tw-saturate,) var(--mendy-tw-sepia,) var(--mendy-tw-drop-shadow,);
+  }
 .mui-e0122edc668b:where([data-mendy-ui], [data-mendy-ui] *) {
     --mendy-tw-drop-shadow-size: drop-shadow(0 3px 3px var(--mendy-tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
     --mendy-tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
@@ -853,6 +917,13 @@
       }
     }
   }
+.mui-34a57d4b4103:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:is(:where(.mui-ad936fcbed63):hover *) {
+      @media (hover: hover) {
+        opacity: 50%;
+      }
+    }
+  }
 .mui-9af9a4182597:where([data-mendy-ui], [data-mendy-ui] *) {
     &:is(:where(.mui-ad936fcbed63)[data-disabled="true"] *) {
       pointer-events: none;
@@ -938,12 +1009,6 @@
       border-inline-start-width: 0px;
     }
   }
-.mui-beeef6663906:where([data-mendy-ui], [data-mendy-ui] *) {
-    &:last-child {
-      border-inline-end-style: var(--mendy-tw-border-style);
-      border-inline-end-width: 0px;
-    }
-  }
 .mui-37ad15a95595:where([data-mendy-ui], [data-mendy-ui] *) {
     &:hover {
       @media (hover: hover) {
@@ -951,22 +1016,22 @@
       }
     }
   }
-.mui-63b29dace366:where([data-mendy-ui], [data-mendy-ui] *) {
+.mui-bb6a4b3e902d:where([data-mendy-ui], [data-mendy-ui] *) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent, #f5f5f5);
+        background-color: var(--destructive, #dc2626);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent, #f5f5f5) 50%, transparent);
+          background-color: color-mix(in oklab, var(--destructive, #dc2626) 90%, transparent);
         }
       }
     }
   }
-.mui-bb6a4b3e902d:where([data-mendy-ui], [data-mendy-ui] *) {
+.mui-5cbdd1b32f1a:where([data-mendy-ui], [data-mendy-ui] *) {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--destructive, #dc2626);
+        background-color: var(--muted, #f5f5f5);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive, #dc2626) 90%, transparent);
+          background-color: color-mix(in oklab, var(--muted, #f5f5f5) 50%, transparent);
         }
       }
     }
@@ -1059,6 +1124,11 @@
       }
     }
   }
+.mui-b8b1747fa763:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:focus-visible {
+      opacity: 100%;
+    }
+  }
 .mui-39be5a15b766:where([data-mendy-ui], [data-mendy-ui] *) {
     &:focus-visible {
       --mendy-tw-ring-shadow: var(--mendy-tw-ring-inset,) 0 0 0 calc(1px + var(--mendy-tw-ring-offset-width)) var(--mendy-tw-ring-color, currentcolor);
@@ -1128,6 +1198,11 @@
       --mendy-tw-ring-inset: inset;
     }
   }
+.mui-71998ea7a2d0:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:active {
+      cursor: grabbing;
+    }
+  }
 .mui-8d3c1014b967:where([data-mendy-ui], [data-mendy-ui] *) {
     &:disabled {
       pointer-events: none;
@@ -1138,11 +1213,25 @@
       cursor: not-allowed;
     }
   }
+.mui-d2e4a66bb430:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:disabled {
+      opacity: 0% !important;
+    }
+  }
 .mui-4600b77303d6:where([data-mendy-ui], [data-mendy-ui] *) {
     &:disabled {
       opacity: 50%;
     }
   }
+.mui-978f422895e5:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:is(:where(.mui-ad936fcbed63):hover *) {
+      @media (hover: hover) {
+        &:disabled {
+          opacity: 50% !important;
+        }
+      }
+    }
+  }
 .mui-7eb7501a2ef0:where([data-mendy-ui], [data-mendy-ui] *) {
     &:has(*:focus) {
       border-color: var(--ring, #737373);
@@ -1355,6 +1444,18 @@
       color: var(--primary-foreground, #fafafa);
     }
   }
+.mui-d0c2ae8419e1:where([data-mendy-ui], [data-mendy-ui] *) {
+    &[data-state="checked"] {
+      opacity: 100%;
+    }
+  }
+.mui-9c02852bfc55:where([data-mendy-ui], [data-mendy-ui] *) {
+    &[data-state="checked"] {
+      &:disabled {
+        opacity: 100% !important;
+      }
+    }
+  }
 .mui-37d8a3f448ff:where([data-mendy-ui], [data-mendy-ui] *) {
     &[data-state="closed"] {
       animation: none !important;
@@ -1377,6 +1478,18 @@
       --mendy-tw-exit-scale: .95;
     }
   }
+.mui-e2ed522ed9b7:where([data-mendy-ui], [data-mendy-ui] *) {
+    &[data-state="indeterminate"] {
+      opacity: 100%;
+    }
+  }
+.mui-cbd3aed703f7:where([data-mendy-ui], [data-mendy-ui] *) {
+    &[data-state="indeterminate"] {
+      &:disabled {
+        opacity: 100% !important;
+      }
+    }
+  }
 .mui-bae1e782f277:where([data-mendy-ui], [data-mendy-ui] *) {
     &[data-state="open"] {
       animation: mendy-enter var(--mendy-tw-animation-duration,var(--mendy-tw-duration,.15s))var(--mendy-tw-ease,ease)var(--mendy-tw-animation-delay,0s)var(--mendy-tw-animation-iteration-count,1)var(--mendy-tw-animation-direction,normal)var(--mendy-tw-animation-fill-mode,none);
@@ -1703,6 +1816,18 @@
       color: var(--muted-foreground, #737373);
     }
   }
+.mui-fa8e1efead3c:where([data-mendy-ui], [data-mendy-ui] *) {
+    @media (hover:none) {
+      opacity: 100%;
+    }
+  }
+.mui-eaedb91f8774:where([data-mendy-ui], [data-mendy-ui] *) {
+    @media (hover:none) {
+      &:disabled {
+        opacity: 100% !important;
+      }
+    }
+  }
 .mui-b8293c91796c:where([data-mendy-ui], [data-mendy-ui] *) {
     [data-slot=card-content] & {
       background-color: transparent;
@@ -2029,6 +2154,11 @@
   syntax: "*";
   inherits: false;
 }
+@keyframes mendy-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes mendy-pulse {
   50% {
     opacity: 0.5;

package/dist/table/clipboard.d.ts

@@ -1,5 +1,5 @@
 import type { DataTableInstance } from "./use-data-table.js";
-export declare const interactiveSelector = "button, a, input, textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role=\"checkbox\"], [role=\"button\"], [role=\"textbox\"]";
+export declare const interactiveSelector = "button, a, summary, input, textarea, select, [contenteditable]:not([contenteditable=\"false\"]), [role=\"checkbox\"], [role=\"button\"], [role=\"textbox\"]";
 export declare function selectedCellsText<T extends object>(table: DataTableInstance<T>): string;
 export declare function tableCsv<T extends object>(table: DataTableInstance<T>, options?: {
     selectedOnly?: boolean;

package/dist/table/clipboard.js

@@ -1,27 +1,40 @@
+import { constructCell } from "@tanstack/react-table";
 import { csvValue, tsvValue } from "./state.js";
-export const interactiveSelector = 'button, a, input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="checkbox"], [role="button"], [role="textbox"]';
+export const interactiveSelector = 'button, a, summary, input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="checkbox"], [role="button"], [role="textbox"]';
 export function selectedCellsText(table) {
-    const selected = new Set(table.getSelectedCellIds());
-    const rows = table
-        .getRowsInDisplayOrder()
-        .filter((row) => row.getVisibleCells().some((cell) => selected.has(cell.id)));
-    const columns = new Set(rows.flatMap((row) => row
-        .getVisibleCells()
-        .filter((cell) => selected.has(cell.id))
-        .map((cell) => cell.column.id)));
-    return rows
-        .map((row) => row
-        .getVisibleCells()
-        .filter((cell) => columns.has(cell.column.id))
-        .map((cell) => {
-        if (!selected.has(cell.id))
-            return "";
-        const definition = cell.column.columnDef;
-        return tsvValue(definition.copyValue?.(row.original) ??
-            definition.getCellValue?.(row.original) ??
-            String(cell.getValue() ?? ""));
-    })
-        .join("\t"))
+    const rows = table.getRowsInDisplayOrder();
+    const columns = [
+        ...table.getStartVisibleLeafColumns(),
+        ...table.getCenterVisibleLeafColumns(),
+        ...table.getEndVisibleLeafColumns(),
+    ];
+    // Bounds already resolve include/exclude operations in display order. Visiting
+    // only these cells avoids materializing every column of every selected row.
+    const values = new Map();
+    const includedColumns = new Set();
+    for (const bounds of table.getCellSelectionBounds()) {
+        for (let r = bounds.minRowIndex; r <= bounds.maxRowIndex; r++) {
+            const row = rows[r];
+            for (let c = bounds.minColumnIndex; c <= bounds.maxColumnIndex; c++) {
+                const column = columns[c];
+                const cell = constructCell(column, row, row.table);
+                if (!cell.getCanSelect())
+                    continue;
+                const definition = column.columnDef;
+                let rowValues = values.get(r);
+                if (!rowValues)
+                    values.set(r, (rowValues = new Map()));
+                rowValues.set(c, tsvValue(definition.copyValue?.(row.original) ??
+                    definition.getCellValue?.(row.original) ??
+                    String(cell.getValue() ?? "")));
+                includedColumns.add(c);
+            }
+        }
+    }
+    const columnIndexes = [...includedColumns].sort((a, b) => a - b);
+    return [...values]
+        .sort(([a], [b]) => a - b)
+        .map(([, row]) => columnIndexes.map((c) => row.get(c) ?? "").join("\t"))
         .join("\n");
 }
 export function tableCsv(table, options = {}) {

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

@@ -0,0 +1,9 @@
+interface WidthColumn {
+    id: string;
+    size: number;
+    maxSize: number;
+    grow: number | false;
+}
+/** Allocate spare space without changing stored or user-resized column widths. */
+export declare function distributeColumnWidths(columns: WidthColumn[], viewport: number | null): Map<string, number>;
+export {};

package/dist/table/column-widths.js

@@ -0,0 +1,23 @@
+/** Allocate spare space without changing stored or user-resized column widths. */
+export function distributeColumnWidths(columns, viewport) {
+    const widths = new Map(columns.map((column) => [column.id, column.size]));
+    let spare = (viewport ?? 0) - columns.reduce((sum, column) => sum + column.size, 0);
+    let flexible = columns.filter((column) => typeof column.grow === "number" &&
+        Number.isFinite(column.grow) &&
+        column.grow > 0 &&
+        column.maxSize > column.size);
+    while (spare > 0.01 && flexible.length) {
+        const unit = flexible.reduce((max, column) => Math.max(max, Number(column.grow)), 0);
+        const weight = flexible.reduce((sum, column) => sum + Number(column.grow) / unit, 0);
+        let used = 0;
+        for (const column of flexible) {
+            const size = widths.get(column.id);
+            const extra = Math.min(column.maxSize - size, spare * (Number(column.grow) / unit / weight));
+            widths.set(column.id, size + extra);
+            used += extra;
+        }
+        spare -= used;
+        flexible = flexible.filter((column) => column.maxSize - widths.get(column.id) > 0.01);
+    }
+    return widths;
+}

package/dist/table/columns.d.ts

@@ -4,6 +4,8 @@ import type { DataTableFeatures } from "./features.js";
 export type TableColumn<T extends object> = ColumnDef<DataTableFeatures, T> & {
     label?: string;
     align?: "start" | "center" | "end";
+    /** Share of spare viewport width. Defaults to 1 for data columns, false for display columns. */
+    grow?: number | false;
     defaultHidden?: boolean;
     pin?: "start" | "end";
     copyValue?: (row: T) => string;
@@ -28,6 +30,7 @@ export interface ValueFormat<V> {
 interface ValueOptions<T extends object, V> {
     label: string;
     size?: number;
+    grow?: number | false;
     minSize?: number;
     maxSize?: number;
     hidden?: boolean;
@@ -48,6 +51,9 @@ interface ColumnBuilder<T extends object> {
         label: string;
         render: (row: T) => ReactNode;
         size?: number;
+        minSize?: number;
+        maxSize?: number;
+        grow?: number | false;
         pin?: "start" | "end";
     }): TableColumn<T>;
 }

package/dist/table/columns.js

@@ -9,6 +9,7 @@ function valueColumn(id, value, options) {
         header: options.label,
         label: options.label,
         size: options.size,
+        grow: options.grow,
         minSize: options.minSize,
         maxSize: options.maxSize,
         defaultHidden: options.hidden,
@@ -45,6 +46,9 @@ export function defineColumns(define) {
             label: options.label,
             header: options.label,
             size: options.size,
+            minSize: options.minSize,
+            maxSize: options.maxSize,
+            grow: options.grow ?? false,
             pin: options.pin,
             enableSorting: false,
             enableCellSelection: false,

package/dist/table/data-table.d.ts

@@ -1,11 +1,14 @@
 import type { ReactNode } from "react";
 import type { UseDataTableOptions, DataTableInstance } from "./use-data-table.js";
 import type { TableViewProps } from "./table-view.js";
+import { type TableFiltersProps } from "./table-filters.js";
 type Appearance<T extends object> = Omit<TableViewProps<T>, "table"> & {
     toolbar?: ReactNode;
     footer?: ReactNode;
     showColumnSettings?: boolean;
     showPagination?: boolean;
+    /** Customize the built-in filter bar, or render it yourself with false. */
+    filterBar?: Omit<TableFiltersProps, "filters"> | false;
 };
 export type DataTableProps<T extends object> = Appearance<T> & (UseDataTableOptions<T> | {
     table: DataTableInstance<T>;

package/dist/table/data-table.js

@@ -1,10 +1,13 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useDataTable } from "./use-data-table.js";
 import { TableView } from "./table-view.js";
 import { TableColumnSettings, TablePagination } from "./table-controls.js";
-function ControlledTable({ table, toolbar, footer, showColumnSettings = true, showPagination = false, ...view }) {
-    return (_jsxs("div", { "data-mendy-ui": "", className: "mui-184ddc11e5f9 mui-267171770524", children: [(toolbar || showColumnSettings) && (_jsxs("div", { className: "mui-222f930b8752 mui-faa8a23c68f6 mui-b9677bd1cb66 mui-32c92bb1fde4 mui-074569488cca", children: [_jsx("div", { className: "mui-184ddc11e5f9 mui-7bd5bab6d7f4", children: toolbar }), showColumnSettings && _jsx(TableColumnSettings, { table: table })] })), _jsx(TableView, { table: table, ...view }), showPagination && (_jsx(TablePagination, { table: table, loading: view.status === "loading" || view.refreshing })), footer] }));
+import { TableFilters } from "./table-filters.js";
+import { TableFrame } from "./table-frame.js";
+function ControlledTable({ table, toolbar, footer, showColumnSettings = true, showPagination = false, filters, filterBar, layout = "content", ...view }) {
+    const fill = layout === "fill";
+    return (_jsx(TableFrame, { layout: layout, slot: "data-table", header: (toolbar || showColumnSettings || (filters && filterBar !== false)) && (_jsxs("div", { className: "mui-222f930b8752 mui-27ead27a81df mui-faa8a23c68f6 mui-b9677bd1cb66 mui-32c92bb1fde4 mui-074569488cca", children: [_jsxs("div", { className: "mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-267171770524", children: [filters && filterBar !== false && _jsx(TableFilters, { ...filterBar, filters: filters }), !filters && toolbar] }), filters && toolbar, showColumnSettings && _jsx(TableColumnSettings, { table: table })] })), footer: showPagination || footer ? (_jsxs(_Fragment, { children: [showPagination && (_jsx("div", { className: "mui-27ead27a81df", children: _jsx(TablePagination, { table: table, loading: view.status === "loading" || view.refreshing }) })), footer] })) : undefined, children: _jsx(TableView, { table: table, filters: filters, ...view, height: fill ? "100%" : view.height }) }));
 }
 function ConfiguredTable(props) {
     const table = useDataTable(props);

package/dist/table/index.d.ts

@@ -6,4 +6,5 @@ export * from "./use-result-selection.js";
 export * from "./table-view.js";
 export * from "./table-controls.js";
 export * from "./data-table.js";
+export * from "./table-filters.js";
 export * from "./clipboard.js";

package/dist/table/index.js

@@ -6,4 +6,5 @@ export * from "./use-result-selection.js";
 export * from "./table-view.js";
 export * from "./table-controls.js";
 export * from "./data-table.js";
+export * from "./table-filters.js";
 export * from "./clipboard.js";

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import type { DataTableInstance } from "./use-data-table.js";
+export declare function TableColumnSettings<T extends object>({ table, children, }: {
+    table: DataTableInstance<T>;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-column-settings.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+import { GripVertical, Pin, RotateCcw, SlidersHorizontal } from "lucide-react";
+import { useMendyUI } from "../customization.js";
+import { Button } from "../primitives/button.js";
+import { Checkbox } from "../primitives/checkbox.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/popover.js";
+import { cn } from "../utils.js";
+import { applyTablePreferences } from "./use-data-table.js";
+export function TableColumnSettings({ table, children, }) {
+    const id = useId();
+    const { portalContainer } = useMendyUI();
+    const columns = table.getAllLeafColumns();
+    const byId = new Map(columns.map((column) => [column.id, column]));
+    const order = [
+        ...new Set([...table.state.columnOrder, ...columns.map((column) => column.id)]),
+    ].filter((key) => byId.has(key));
+    const ordered = order.map((key) => byId.get(key));
+    const hidden = columns.filter((column) => !column.getIsVisible()).length;
+    const start = columns.filter((column) => column.getIsPinned() === "start").length;
+    const end = columns.filter((column) => column.getIsPinned() === "end").length;
+    const summary = [
+        hidden && `${hidden} hidden`,
+        start && `${start} pinned left`,
+        end && `${end} pinned right`,
+    ]
+        .filter(Boolean)
+        .join(", ");
+    function reorder(result) {
+        if (!result.destination || result.destination.index === result.source.index)
+            return;
+        const next = [...order];
+        const [moved] = next.splice(result.source.index, 1);
+        next.splice(result.destination.index, 0, moved);
+        table.setColumnOrder(next);
+    }
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Column settings", title: "Column settings", children: _jsx(SlidersHorizontal, { className: "mui-100c22d5776b" }) }) }), _jsxs(PopoverContent, { align: "end", "aria-label": "Column settings", className: "mui-222f930b8752 mui-a4cce7869436 mui-302c0d124a94 mui-04760bcd507f", onCloseAutoFocus: (event) => {
+                    if (document.activeElement?.closest('[role="grid"]'))
+                        event.preventDefault();
+                }, children: [_jsxs("div", { className: "mui-27ead27a81df mui-bbe39cfb5cc6 mui-9513b3968002 mui-d3cea061f2f3", children: [_jsx("h4", { className: "mui-c74ab393b96d mui-daaac3fbf55e", children: "Column settings" }), _jsx("p", { className: "mui-3992de70b033 mui-35f35c41d134", children: "Drag to reorder, toggle visibility, and pin columns." })] }), children, _jsx(DragDropContext, { onDragEnd: reorder, children: _jsx(Droppable, { droppableId: id, getContainerForClone: () => portalContainer ?? document.body, renderClone: (provided, snapshot, rubric) => (_jsx(ColumnSettingsRow, { column: ordered[rubric.source.index], provided: provided, dragging: snapshot.isDragging })), children: (provided) => (_jsxs("div", { ref: provided.innerRef, ...provided.droppableProps, className: "mui-410da8dfa8ac mui-da0beef015c9 mui-2368e909f3a5 mui-b97db4a9f432", children: [ordered.map((column, index) => (_jsx(Draggable, { draggableId: `${id}-${column.id}`, disableInteractiveElementBlocking: true, index: index, children: (provided, snapshot) => (_jsx(ColumnSettingsRow, { column: column, provided: provided, dragging: snapshot.isDragging })) }, column.id))), provided.placeholder] })) }) }), _jsxs("div", { className: "mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-32c92bb1fde4 mui-074569488cca mui-894c3815a57f mui-9513b3968002 mui-b5edc3ea7c91", children: [_jsx("p", { className: "mui-3992de70b033 mui-35f35c41d134", "aria-live": "polite", children: summary || "No changes" }), _jsxs(Button, { variant: "ghost", size: "sm", className: "mui-c8e50836f8a1 mui-e7e01cc7f4df mui-3992de70b033", "aria-label": "Reset columns", onClick: () => applyTablePreferences(table, { version: 1, ...table.initialState }), children: [_jsx(RotateCcw, { className: "mui-5e34f5313859" }), "Reset"] })] })] })] }));
+}
+function ColumnSettingsRow({ column, provided, dragging, }) {
+    const definition = column.columnDef;
+    const label = definition.label ?? (typeof definition.header === "string" ? definition.header : column.id);
+    const pin = column.getIsPinned();
+    const next = pin === "start" ? "end" : pin === "end" ? false : "start";
+    const pinLabel = next === "start"
+        ? `Pin ${label} to left`
+        : next === "end"
+            ? `Pin ${label} to right`
+            : `Unpin ${label}`;
+    return (_jsxs("div", { ref: provided.innerRef, ...provided.draggableProps, "data-mendy-ui": "", "data-column-setting": column.id, "data-dragging": dragging, style: provided.draggableProps.style, className: cn("mui-222f930b8752 mui-71556df3b421 mui-074569488cca mui-3fa8c572949b mui-5b272f3c5076 mui-e7e01cc7f4df mui-a8c1dfb1d4ef mui-c74ab393b96d mui-957a109f887f", dragging ? "mui-3eef1ce97dba mui-0d4ca75de41c mui-853be6c11609 mui-fd9d0b696aac" : "mui-5cbdd1b32f1a"), children: [_jsx("button", { type: "button", ...provided.dragHandleProps, "aria-label": `Reorder ${label}`, title: "Drag to reorder. Press Space to move with arrow keys.", className: "mui-222f930b8752 mui-2bd43fb57913 mui-27ead27a81df mui-f2e47d9c52ad mui-71556df3b421 mui-a503dd374cca mui-02e603944040 mui-35f35c41d134 mui-b30fc56058b6 mui-355efe22aedb mui-db549d38ff19 mui-71998ea7a2d0", children: _jsx(GripVertical, { className: "mui-61c000c8a98a" }) }), _jsxs("label", { className: "mui-222f930b8752 mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-d2fa8848968d mui-71556df3b421 mui-074569488cca", children: [_jsx(Checkbox, { checked: column.getIsVisible(), disabled: !column.getCanHide(), onCheckedChange: (value) => column.toggleVisibility(value === true), "aria-label": `Show ${label}` }), _jsx("span", { className: "mui-5a3a4ee420c2", title: label, children: label })] }), _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: !column.getCanPin(), "aria-label": pinLabel, title: pinLabel, className: cn("mui-0712570dcc9f mui-27ead27a81df", pin && "mui-87ecb59f2d2d"), onClick: () => column.pin(next), children: _jsx(Pin, { className: cn("mui-61c000c8a98a", pin === "start" && "mui-4e3f08588318", pin === "end" && "mui-c80411b7591f", !pin && "mui-35f35c41d134") }) })] }));
+}

package/dist/table/table-controls.d.ts

@@ -2,9 +2,7 @@ import type { ReactNode } from "react";
 import type { DataTableInstance } from "./use-data-table.js";
 import type { TableColumn } from "./columns.js";
 import type { SavedTableView } from "./state.js";
-export declare function TableColumnSettings<T extends object>({ table }: {
-    table: DataTableInstance<T>;
-}): import("react/jsx-runtime").JSX.Element;
+export { TableColumnSettings } from "./table-column-settings.js";
 export declare function TablePagination<T extends object>({ table, loading, }: {
     table: DataTableInstance<T>;
     loading?: boolean;