@mendylanda/ui 0.3.0-alpha.0 → 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);
@@ -238,12 +252,18 @@
 .mui-c7d5500b77ab:where([data-mendy-ui], [data-mendy-ui] *) {
     height: calc(var(--spacing) * 0);
   }
+.mui-2edce89ef182:where([data-mendy-ui], [data-mendy-ui] *) {
+    height: calc(var(--spacing) * 3);
+  }
 .mui-099be97e1fa4:where([data-mendy-ui], [data-mendy-ui] *) {
     height: calc(var(--spacing) * 4);
   }
 .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);
   }
@@ -268,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);
@@ -283,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);
   }
@@ -301,18 +327,21 @@
 .mui-d4ea834145ae:where([data-mendy-ui], [data-mendy-ui] *) {
     width: calc(var(--spacing) * 2);
   }
+.mui-56bb14cbd1fe:where([data-mendy-ui], [data-mendy-ui] *) {
+    width: calc(2 / 3 * 100%);
+  }
 .mui-8867d85ed290:where([data-mendy-ui], [data-mendy-ui] *) {
     width: calc(var(--spacing) * 8);
   }
 .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);
   }
@@ -358,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;
   }
@@ -368,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,);
   }
@@ -377,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;
   }
@@ -454,13 +501,6 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--mendy-tw-space-y-reverse)));
     }
   }
-.mui-b8ceaab118a4:where([data-mendy-ui], [data-mendy-ui] *) {
-    :where(& > :not(:last-child)) {
-      --mendy-tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 3) * var(--mendy-tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--mendy-tw-space-y-reverse)));
-    }
-  }
 .mui-5a3a4ee420c2:where([data-mendy-ui], [data-mendy-ui] *) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -484,9 +524,6 @@
 .mui-998780cdef87:where([data-mendy-ui], [data-mendy-ui] *) {
     overscroll-behavior: contain;
   }
-.mui-01024deec75e:where([data-mendy-ui], [data-mendy-ui] *) {
-    border-radius: 0.25rem;
-  }
 .mui-b005d61d0953:where([data-mendy-ui], [data-mendy-ui] *) {
     border-radius: calc(infinity * 1px);
   }
@@ -554,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);
   }
@@ -572,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);
   }
@@ -641,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);
   }
@@ -781,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;
@@ -793,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));
@@ -857,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;
@@ -942,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) {
@@ -955,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);
         }
       }
     }
@@ -1063,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);
@@ -1132,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;
@@ -1142,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);
@@ -1359,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;
@@ -1381,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);
@@ -1707,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;
@@ -2033,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;