@mendylanda/ui 0.1.9 → 0.3.0-alpha.0

package/dist/styles.tailwind3.css

@@ -2,6 +2,8 @@
 @layer properties;
 @layer theme {
   :where([data-mendy-ui]),:where([data-mendy-ui]) {
+    --color-green-100: oklch(96.2% 0.044 156.743);
+    --color-green-950: oklch(26.6% 0.065 152.934);
     --spacing: 0.25rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -48,12 +50,18 @@
 .mui-d2d9e1f13413:where([data-mendy-ui], [data-mendy-ui] *) {
     position: relative;
   }
+.mui-964a9431ff49:where([data-mendy-ui], [data-mendy-ui] *) {
+    position: sticky;
+  }
 .mui-ce13093ad8c9:where([data-mendy-ui], [data-mendy-ui] *) {
     inset: calc(var(--spacing) * 0);
   }
 .mui-3ba24c062d55:where([data-mendy-ui], [data-mendy-ui] *) {
     inset-inline: calc(var(--spacing) * 0);
   }
+.mui-eb9e48c5dda9:where([data-mendy-ui], [data-mendy-ui] *) {
+    inset-block: calc(var(--spacing) * 0);
+  }
 .mui-cced28c6dc3f:where([data-mendy-ui], [data-mendy-ui] *) {
     inset-inline-start: var(--spacing);
   }
@@ -78,6 +86,30 @@
 .mui-4e45f4841abb:where([data-mendy-ui], [data-mendy-ui] *) {
     top: calc(1 / 2 * 100%);
   }
+.mui-a74c4477017c:where([data-mendy-ui], [data-mendy-ui] *) {
+    right: calc(var(--spacing) * 0);
+  }
+.mui-30150dd033ab:where([data-mendy-ui], [data-mendy-ui] *) {
+    bottom: calc(var(--spacing) * 0);
+  }
+.mui-a5c36273c0f0:where([data-mendy-ui], [data-mendy-ui] *) {
+    bottom: calc(var(--spacing) * 2);
+  }
+.mui-635702706586:where([data-mendy-ui], [data-mendy-ui] *) {
+    left: calc(var(--spacing) * 0);
+  }
+.mui-014aadadffad:where([data-mendy-ui], [data-mendy-ui] *) {
+    isolation: isolate;
+  }
+.mui-418e44ad4f9e:where([data-mendy-ui], [data-mendy-ui] *) {
+    z-index: 10;
+  }
+.mui-4e8f0a87a0dc:where([data-mendy-ui], [data-mendy-ui] *) {
+    z-index: 20;
+  }
+.mui-fbb62f5cb6fe:where([data-mendy-ui], [data-mendy-ui] *) {
+    z-index: 30;
+  }
 .mui-3eef1ce97dba:where([data-mendy-ui], [data-mendy-ui] *) {
     z-index: 50;
   }
@@ -147,6 +179,9 @@
 .mui-123306850fe1:where([data-mendy-ui], [data-mendy-ui] *) {
     display: inline-flex;
   }
+.mui-0d4fc4a78d37:where([data-mendy-ui], [data-mendy-ui] *) {
+    display: table;
+  }
 .mui-3da89b3ed14b:where([data-mendy-ui], [data-mendy-ui] *) {
     field-sizing: content;
   }
@@ -161,6 +196,10 @@
     width: calc(var(--spacing) * 1.5);
     height: calc(var(--spacing) * 1.5);
   }
+.mui-5e34f5313859:where([data-mendy-ui], [data-mendy-ui] *) {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
 .mui-61c000c8a98a:where([data-mendy-ui], [data-mendy-ui] *) {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -229,6 +268,9 @@
 .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-80baa5d03af7:where([data-mendy-ui], [data-mendy-ui] *) {
     max-height: calc(var(--filter-menu-height) - 2px);
   }
@@ -256,9 +298,15 @@
 .mui-d48fe95d4da8:where([data-mendy-ui], [data-mendy-ui] *) {
     width: var(--cell-size);
   }
+.mui-d4ea834145ae:where([data-mendy-ui], [data-mendy-ui] *) {
+    width: calc(var(--spacing) * 2);
+  }
 .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);
   }
@@ -298,6 +346,9 @@
 .mui-e9ab1547c94d:where([data-mendy-ui], [data-mendy-ui] *) {
     min-width: 8rem;
   }
+.mui-2bf6510f1330:where([data-mendy-ui], [data-mendy-ui] *) {
+    min-width: 100%;
+  }
 .mui-7bd5bab6d7f4:where([data-mendy-ui], [data-mendy-ui] *) {
     flex: 1;
   }
@@ -326,9 +377,15 @@
 .mui-7b3cd77eb999:where([data-mendy-ui], [data-mendy-ui] *) {
     animation: var(--animate-pulse);
   }
+.mui-2194d094b585:where([data-mendy-ui], [data-mendy-ui] *) {
+    cursor: col-resize;
+  }
 .mui-d343f41ba73e:where([data-mendy-ui], [data-mendy-ui] *) {
     cursor: default;
   }
+.mui-739a9a000791:where([data-mendy-ui], [data-mendy-ui] *) {
+    touch-action: none;
+  }
 .mui-acd532d8913e:where([data-mendy-ui], [data-mendy-ui] *) {
     resize: both;
   }
@@ -362,6 +419,9 @@
 .mui-a503dd374cca:where([data-mendy-ui], [data-mendy-ui] *) {
     justify-content: center;
   }
+.mui-307644c34db6:where([data-mendy-ui], [data-mendy-ui] *) {
+    justify-content: flex-end;
+  }
 .mui-c62ec162662e:where([data-mendy-ui], [data-mendy-ui] *) {
     justify-content: flex-start;
   }
@@ -394,11 +454,21 @@
       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;
     white-space: nowrap;
   }
+.mui-1a26a0d28420:where([data-mendy-ui], [data-mendy-ui] *) {
+    overflow: auto;
+  }
 .mui-d5111d0e9f48:where([data-mendy-ui], [data-mendy-ui] *) {
     overflow: hidden;
   }
@@ -414,6 +484,9 @@
 .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);
   }
@@ -496,6 +569,12 @@
 .mui-965cf6587342:where([data-mendy-ui], [data-mendy-ui] *) {
     background-color: var(--destructive, #dc2626);
   }
+.mui-047624ec0c39:where([data-mendy-ui], [data-mendy-ui] *) {
+    background-color: var(--color-green-100);
+  }
+.mui-87ecb59f2d2d:where([data-mendy-ui], [data-mendy-ui] *) {
+    background-color: var(--muted, #f5f5f5);
+  }
 .mui-810ae775809b:where([data-mendy-ui], [data-mendy-ui] *) {
     background-color: var(--muted-foreground, #737373);
     @supports (color: color-mix(in lab, red, red)) {
@@ -526,9 +605,18 @@
 .mui-094f5333853b:where([data-mendy-ui], [data-mendy-ui] *) {
     padding: calc(var(--spacing) * 3);
   }
+.mui-c432836760e3:where([data-mendy-ui], [data-mendy-ui] *) {
+    padding: calc(var(--spacing) * 6);
+  }
+.mui-c7902d77ad80:where([data-mendy-ui], [data-mendy-ui] *) {
+    padding: calc(var(--spacing) * 8);
+  }
 .mui-56b8f5e0fb12:where([data-mendy-ui], [data-mendy-ui] *) {
     padding-inline: var(--cell-size);
   }
+.mui-16e909e6f01d:where([data-mendy-ui], [data-mendy-ui] *) {
+    padding-inline: calc(var(--spacing) * 0);
+  }
 .mui-1da2e8f173c5:where([data-mendy-ui], [data-mendy-ui] *) {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -583,6 +671,9 @@
 .mui-05ab12448317:where([data-mendy-ui], [data-mendy-ui] *) {
     text-align: center;
   }
+.mui-10558dbb3a24:where([data-mendy-ui], [data-mendy-ui] *) {
+    text-align: end;
+  }
 .mui-e9347b78185f:where([data-mendy-ui], [data-mendy-ui] *) {
     text-align: start;
   }
@@ -759,6 +850,13 @@
 .mui-14bd99410890:where([data-mendy-ui], [data-mendy-ui] *) {
     unicode-bidi: isolate;
   }
+.mui-97b1c00ff005:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:is(:where(.mui-ad936fcbed63):hover *) {
+      @media (hover: hover) {
+        background-color: var(--accent, #f5f5f5);
+      }
+    }
+  }
 .mui-9af9a4182597:where([data-mendy-ui], [data-mendy-ui] *) {
     &:is(:where(.mui-ad936fcbed63)[data-disabled="true"] *) {
       pointer-events: none;
@@ -795,6 +893,11 @@
       --mendy-tw-ring-color: var(--ring, #737373);
     }
   }
+.mui-e6020023567a:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:is(:where(.mui-ad936fcbed63)[data-highlighted="true"] *) {
+      background-color: var(--accent, #f5f5f5);
+    }
+  }
 .mui-f0ee83167878:where([data-mendy-ui], [data-mendy-ui] *) {
     &:is(:where(.mui-2ffc1d06387e):disabled ~ *) {
       cursor: not-allowed;
@@ -833,6 +936,18 @@
       color: var(--muted-foreground, #737373);
     }
   }
+.mui-3deb00079b4c:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:first-child {
+      border-inline-start-style: var(--mendy-tw-border-style);
+      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) {
@@ -840,6 +955,16 @@
       }
     }
   }
+.mui-63b29dace366:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent, #f5f5f5);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--accent, #f5f5f5) 50%, transparent);
+        }
+      }
+    }
+  }
 .mui-bb6a4b3e902d:where([data-mendy-ui], [data-mendy-ui] *) {
     &:hover {
       @media (hover: hover) {
@@ -850,6 +975,16 @@
       }
     }
   }
+.mui-4273133a876a:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary, #171717);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary, #171717) 20%, transparent);
+        }
+      }
+    }
+  }
 .mui-af9ea085901b:where([data-mendy-ui], [data-mendy-ui] *) {
     &:hover {
       @media (hover: hover) {
@@ -920,6 +1055,14 @@
       border-color: var(--ring, #737373);
     }
   }
+.mui-2f669cfad5aa:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:focus-visible {
+      background-color: var(--primary, #171717);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--primary, #171717) 20%, transparent);
+      }
+    }
+  }
 .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);
@@ -951,12 +1094,28 @@
       }
     }
   }
+.mui-a47d391255f3:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:focus-visible {
+      outline-style: var(--mendy-tw-outline-style);
+      outline-width: 1px;
+    }
+  }
 .mui-1df9125eebaf:where([data-mendy-ui], [data-mendy-ui] *) {
     &:focus-visible {
       outline-style: var(--mendy-tw-outline-style);
       outline-width: 1px;
     }
   }
+.mui-a8719ed8b095:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:focus-visible {
+      outline-offset: calc(2px * -1);
+    }
+  }
+.mui-2b1c7d88acff:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:focus-visible {
+      outline-color: var(--primary, #171717);
+    }
+  }
 .mui-223daa83ed2d:where([data-mendy-ui], [data-mendy-ui] *) {
     &:focus-visible {
       outline-color: var(--ring, #737373);
@@ -1045,6 +1204,16 @@
       }
     }
   }
+.mui-2d6703b5473b:where([data-mendy-ui], [data-mendy-ui] *) {
+    &[aria-pressed="true"] {
+      background-color: var(--accent, #f5f5f5);
+    }
+  }
+.mui-ff2dcda51a27:where([data-mendy-ui], [data-mendy-ui] *) {
+    &[aria-pressed="true"] {
+      color: var(--accent-foreground, #171717);
+    }
+  }
 .mui-7d900a71e5ba:where([data-mendy-ui], [data-mendy-ui] *) {
     &[aria-selected="true"] {
       color: var(--muted-foreground, #737373);
@@ -1060,6 +1229,11 @@
       opacity: 50%;
     }
   }
+.mui-9d7d1760cd8e:where([data-mendy-ui], [data-mendy-ui] *) {
+    &[data-highlighted="true"] {
+      background-color: var(--accent, #f5f5f5);
+    }
+  }
 .mui-6fa6a8ade7c4:where([data-mendy-ui], [data-mendy-ui] *) {
     &[data-inset] {
       padding-left: calc(var(--spacing) * 8);
@@ -1292,6 +1466,11 @@
       rotate: 180deg;
     }
   }
+.mui-d254c96aea74:where([data-mendy-ui], [data-mendy-ui] *) {
+    &:is(.dark *) {
+      background-color: var(--color-green-950);
+    }
+  }
 .mui-9daa2369a41b:where([data-mendy-ui], [data-mendy-ui] *) {
     &:is(.dark *) {
       background-color: var(--input, #e5e5e5);

package/dist/table/clipboard.d.ts

@@ -0,0 +1,6 @@
+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 function selectedCellsText<T extends object>(table: DataTableInstance<T>): string;
+export declare function tableCsv<T extends object>(table: DataTableInstance<T>, options?: {
+    selectedOnly?: boolean;
+}): string;

package/dist/table/clipboard.js

@@ -0,0 +1,51 @@
+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 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"))
+        .join("\n");
+}
+export function tableCsv(table, options = {}) {
+    const columns = table.getVisibleLeafColumns().flatMap((column) => {
+        const definition = column.columnDef;
+        if (definition.exportOptions === false)
+            return [];
+        if (definition.exportOptions)
+            return Array.isArray(definition.exportOptions)
+                ? definition.exportOptions
+                : [definition.exportOptions];
+        return [
+            {
+                header: definition.label ??
+                    (typeof definition.header === "string" ? definition.header : column.id),
+                value: (row) => definition.copyValue?.(row) ?? String(column.accessorFn?.(row, 0) ?? ""),
+            },
+        ];
+    });
+    const rows = table
+        .getRowsInDisplayOrder()
+        .filter((row) => !options.selectedOnly || row.getIsSelected());
+    return [
+        columns.map((column) => csvValue(column.header)).join(","),
+        ...rows.map((row) => columns.map((column) => csvValue(column.value(row.original))).join(",")),
+    ].join("\r\n");
+}

package/dist/table/columns.d.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { DataTableFeatures } from "./features.js";
+export type TableColumn<T extends object> = ColumnDef<DataTableFeatures, T> & {
+    label?: string;
+    align?: "start" | "center" | "end";
+    defaultHidden?: boolean;
+    pin?: "start" | "end";
+    copyValue?: (row: T) => string;
+    getCellValue?: (row: T) => string | null;
+    exportOptions?: {
+        header: string;
+        value: (row: T) => string;
+    } | {
+        header: string;
+        value: (row: T) => string;
+    }[] | false;
+};
+type Paths<T extends object, D extends unknown[] = []> = D["length"] extends 5 ? never : {
+    [K in keyof T & string]: NonNullable<T[K]> extends Date | readonly unknown[] ? K : NonNullable<T[K]> extends object ? K | `${K}.${Paths<NonNullable<T[K]>, [...D, 0]>}` : K;
+}[keyof T & string];
+type At<T extends object, P extends string> = P extends `${infer K}.${infer R}` ? K extends keyof T ? At<NonNullable<T[K]>, R> | Extract<T[K], null | undefined> : never : P extends keyof T ? T[P] : never;
+export interface ValueFormat<V> {
+    display: (value: V) => ReactNode;
+    text: (value: V) => string;
+    align?: "start" | "center" | "end";
+}
+interface ValueOptions<T extends object, V> {
+    label: string;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    hidden?: boolean;
+    pin?: "start" | "end";
+    sortable?: boolean;
+    format?: ValueFormat<NonNullable<V>>;
+    render?: (context: {
+        row: T;
+        value: V;
+    }) => ReactNode;
+    copy?: (value: V, row: T) => string;
+    export?: false | ((value: V, row: T) => string);
+}
+interface ColumnBuilder<T extends object> {
+    accessor<P extends Paths<T>>(path: P, options: ValueOptions<T, At<T, P>>): TableColumn<T>;
+    computed<V>(id: string, value: (row: T) => V, options: ValueOptions<T, V>): TableColumn<T>;
+    display(id: string, options: {
+        label: string;
+        render: (row: T) => ReactNode;
+        size?: number;
+        pin?: "start" | "end";
+    }): TableColumn<T>;
+}
+export declare function defineColumns<T extends object>(define: (column: ColumnBuilder<T>) => TableColumn<T>[]): TableColumn<T>[];
+export declare const format: {
+    currency(currency: string, locale?: string): ValueFormat<number>;
+    number(options?: Intl.NumberFormatOptions, locale?: string): ValueFormat<number>;
+    date(options?: Intl.DateTimeFormatOptions, locale?: string): ValueFormat<Date>;
+};
+export {};

package/dist/table/columns.js

@@ -0,0 +1,72 @@
+function valueColumn(id, value, options) {
+    const text = (row) => {
+        const v = value(row);
+        return v == null ? "" : (options.format?.text(v) ?? String(v));
+    };
+    return {
+        id,
+        accessorFn: value,
+        header: options.label,
+        label: options.label,
+        size: options.size,
+        minSize: options.minSize,
+        maxSize: options.maxSize,
+        defaultHidden: options.hidden,
+        pin: options.pin,
+        align: options.format?.align,
+        enableSorting: options.sortable ?? true,
+        cell: ({ row }) => {
+            const v = value(row.original);
+            return options.render
+                ? options.render({ row: row.original, value: v })
+                : v == null
+                    ? "—"
+                    : (options.format?.display(v) ?? String(v));
+        },
+        copyValue: options.copy ? (row) => options.copy(value(row), row) : text,
+        exportOptions: options.export === false
+            ? false
+            : {
+                header: options.label,
+                value: typeof options.export === "function"
+                    ? (row) => options.export(value(row), row)
+                    : text,
+            },
+    };
+}
+export function defineColumns(define) {
+    return define({
+        accessor: (path, options) => valueColumn(path, (row) => path
+            .split(".")
+            .reduce((v, key) => (v == null ? undefined : v[key]), row), options),
+        computed: valueColumn,
+        display: (id, options) => ({
+            id,
+            label: options.label,
+            header: options.label,
+            size: options.size,
+            pin: options.pin,
+            enableSorting: false,
+            enableCellSelection: false,
+            cell: ({ row }) => options.render(row.original),
+            exportOptions: false,
+        }),
+    });
+}
+export const format = {
+    currency(currency, locale) {
+        // react-doctor-disable-next-line react-doctor/js-hoist-intl -- Formatter factories run when defining columns; their closures reuse this instance for every cell.
+        const formatter = new Intl.NumberFormat(locale, { style: "currency", currency });
+        return { display: formatter.format, text: formatter.format, align: "end" };
+    },
+    number(options, locale) {
+        // react-doctor-disable-next-line react-doctor/js-hoist-intl -- Formatter factories run when defining columns; their closures reuse this instance for every cell.
+        const formatter = new Intl.NumberFormat(locale, options);
+        return { display: formatter.format, text: formatter.format, align: "end" };
+    },
+    date(options, locale) {
+        // react-doctor-disable-next-line react-doctor/js-hoist-intl -- Formatter factories run when defining columns; their closures reuse this instance for every cell.
+        const formatter = new Intl.DateTimeFormat(locale, options);
+        return { display: formatter.format, text: formatter.format };
+    },
+};

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { UseDataTableOptions, DataTableInstance } from "./use-data-table.js";
+import type { TableViewProps } from "./table-view.js";
+type Appearance<T extends object> = Omit<TableViewProps<T>, "table"> & {
+    toolbar?: ReactNode;
+    footer?: ReactNode;
+    showColumnSettings?: boolean;
+    showPagination?: boolean;
+};
+export type DataTableProps<T extends object> = Appearance<T> & (UseDataTableOptions<T> | {
+    table: DataTableInstance<T>;
+});
+export declare function DataTable<T extends object>(props: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/table/data-table.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } 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] }));
+}
+function ConfiguredTable(props) {
+    const table = useDataTable(props);
+    return (_jsx(ControlledTable, { ...props, table: table, showPagination: props.showPagination ?? props.processing?.pagination === "client" }));
+}
+export function DataTable(props) {
+    return "table" in props ? _jsx(ControlledTable, { ...props }) : _jsx(ConfiguredTable, { ...props });
+}

package/dist/table/features.d.ts

@@ -0,0 +1,34 @@
+export declare const tableFeaturesDefault: {
+    cellSelectionFeature: import("@tanstack/react-table").TableFeature;
+    columnResizingFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    columnPinningFeature: import("@tanstack/react-table").TableFeature;
+    columnSizingFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+    columnFacetingFeature: import("@tanstack/react-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+    rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
+    facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
+    filterFns: {
+        includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        inNumberRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        inDateRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        arrIncludes: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        weakEquals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    };
+    sortFns: {
+        alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    };
+};
+export type DataTableFeatures = typeof tableFeaturesDefault;

package/dist/table/features.js

@@ -0,0 +1,35 @@
+import { columnFacetingFeature, columnFilteringFeature, cellSelectionFeature, columnResizingFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, } from "@tanstack/react-table";
+export const tableFeaturesDefault = tableFeatures({
+    cellSelectionFeature,
+    columnResizingFeature,
+    columnOrderingFeature,
+    columnPinningFeature,
+    columnSizingFeature,
+    columnVisibilityFeature,
+    columnFilteringFeature,
+    columnFacetingFeature,
+    globalFilteringFeature,
+    rowPaginationFeature,
+    rowSelectionFeature,
+    rowSortingFeature,
+    filteredRowModel: createFilteredRowModel(),
+    sortedRowModel: createSortedRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    facetedRowModel: createFacetedRowModel(),
+    facetedUniqueValues: createFacetedUniqueValues(),
+    // Register the functions used by automatic filter and sort inference.
+    filterFns: {
+        includesString: filterFn_includesString,
+        inNumberRange: filterFn_inNumberRange,
+        inDateRange: filterFn_inDateRange,
+        equals: filterFn_equals,
+        arrIncludes: filterFn_arrIncludes,
+        weakEquals: filterFn_weakEquals,
+    },
+    sortFns: {
+        alphanumeric: sortFn_alphanumeric,
+        basic: sortFn_basic,
+        datetime: sortFn_datetime,
+        text: sortFn_text,
+    },
+});

package/dist/table/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./columns.js";
+export * from "./features.js";
+export * from "./state.js";
+export * from "./use-data-table.js";
+export * from "./use-result-selection.js";
+export * from "./table-view.js";
+export * from "./table-controls.js";
+export * from "./data-table.js";
+export * from "./clipboard.js";