@hexclave/dashboard-ui-components 1.0.29 → 1.0.32

package/dist/dashboard-ui-components.global.js

@@ -163,7 +163,7 @@ var DashboardUI = (() => {
       var snakeCase2 = (str) => join2(str, "_");
       var kebabCase = (str) => join2(str, "-");
       var sentenceCase = (str) => upperFirst(join2(str, " "));
-      var titleCase = (str) => words(str).map(upperFirst).join(" ");
+      var titleCase2 = (str) => words(str).map(upperFirst).join(" ");
       module.exports = {
         words,
         upperFirst,
@@ -172,7 +172,7 @@ var DashboardUI = (() => {
         snakeCase: snakeCase2,
         kebabCase,
         sentenceCase,
-        titleCase
+        titleCase: titleCase2
       };
     }
   });
@@ -22120,7 +22120,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   }
 
   // src/components/data-grid/data-grid.tsx
-  var import_react33 = __toESM(require_react());
+  var import_react35 = __toESM(require_react());
 
   // src/components/data-grid/data-grid-sizing.ts
   var MIN_COL_WIDTH = 20;
@@ -22162,12 +22162,520 @@ ${colorConfig.map(([key, itemConfig]) => {
     return Math.max(getEffectiveMinWidth(col), Math.min(getEffectiveMaxWidth(col), width));
   }
 
-  // src/components/data-grid/data-grid-toolbar.tsx
+  // src/components/data-grid/data-grid-export-dialog.tsx
   var import_react31 = __toESM(require_react());
+
+  // src/components/data-grid/state.ts
+  function createDefaultDataGridState(columns) {
+    const columnWidths = {};
+    const columnOrder = [];
+    for (const col of columns) {
+      columnWidths[col.id] = clampColumnWidth(col, col.width ?? DEFAULT_COL_WIDTH);
+      columnOrder.push(col.id);
+    }
+    return {
+      sorting: [],
+      columnVisibility: {},
+      columnWidths,
+      columnPinning: { left: [], right: [] },
+      columnOrder,
+      pagination: { pageIndex: 0, pageSize: 50 },
+      selection: { selectedIds: /* @__PURE__ */ new Set(), anchorId: null },
+      dateDisplay: "relative",
+      quickSearch: ""
+    };
+  }
+  function resolveColumnValue(col, row) {
+    if (typeof col.accessor === "function") return col.accessor(row);
+    const key = col.accessor ?? col.id;
+    return row[key];
+  }
+  function defaultComparator(a26, b) {
+    if (a26 == null && b == null) return 0;
+    if (a26 == null) return -1;
+    if (b == null) return 1;
+    if (typeof a26 === "number" && typeof b === "number") return a26 - b;
+    if (a26 instanceof Date && b instanceof Date) return a26.getTime() - b.getTime();
+    return stringCompare(String(a26), String(b));
+  }
+  function buildRowComparator(sortModel, columns) {
+    if (sortModel.length === 0) return null;
+    const colMap = new Map(columns.map((c4) => [c4.id, c4]));
+    return (a26, b) => {
+      for (const { columnId, direction } of sortModel) {
+        const col = colMap.get(columnId);
+        if (!col) continue;
+        const va = resolveColumnValue(col, a26);
+        const vb = resolveColumnValue(col, b);
+        const cmp = col.sortComparator ? col.sortComparator(va, vb) : defaultComparator(va, vb);
+        if (cmp !== 0) return direction === "asc" ? cmp : -cmp;
+      }
+      return 0;
+    };
+  }
+  function paginateRows(rows, pagination) {
+    const start = pagination.pageIndex * pagination.pageSize;
+    return rows.slice(start, start + pagination.pageSize);
+  }
+  function defaultMatchRow(row, query, columns) {
+    for (const col of columns) {
+      const v = resolveColumnValue(col, row);
+      if (v == null) continue;
+      if (String(v).toLowerCase().includes(query)) return true;
+    }
+    return false;
+  }
+  function applyQuickSearch(rows, query, columns, matchRow = defaultMatchRow) {
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed) return rows;
+    return rows.filter((r7) => matchRow(r7, trimmed, columns));
+  }
+  function defaultParseDate(value) {
+    if (value == null) return null;
+    if (value instanceof Date) return isNaN(value.getTime()) ? null : value;
+    if (typeof value === "number" || typeof value === "string") {
+      const d = new Date(value);
+      return isNaN(d.getTime()) ? null : d;
+    }
+    return null;
+  }
+  var DIVISIONS = [
+    { amount: 60, unit: "second" },
+    { amount: 60, unit: "minute" },
+    { amount: 24, unit: "hour" },
+    { amount: 7, unit: "day" },
+    { amount: 4.34524, unit: "week" },
+    { amount: 12, unit: "month" },
+    { amount: Number.POSITIVE_INFINITY, unit: "year" }
+  ];
+  var relativeTimeFormatterCache = /* @__PURE__ */ new Map();
+  function getRelativeTimeFormatter(locale2) {
+    const key = locale2 ?? "__default__";
+    let cached = relativeTimeFormatterCache.get(key);
+    if (cached == null) {
+      cached = new Intl.RelativeTimeFormat(locale2, { numeric: "auto" });
+      relativeTimeFormatterCache.set(key, cached);
+    }
+    return cached;
+  }
+  function defaultFormatRelative(date2) {
+    const rtf = getRelativeTimeFormatter();
+    let duration = (date2.getTime() - Date.now()) / 1e3;
+    for (const div of DIVISIONS) {
+      if (Math.abs(duration) < div.amount) return rtf.format(Math.round(duration), div.unit);
+      duration /= div.amount;
+    }
+    return rtf.format(Math.round(duration), "year");
+  }
+  function defaultFormatAbsolute(date2) {
+    return date2.toLocaleString();
+  }
+  function formatGridDate(value, mode, opts) {
+    const parse2 = opts?.parseValue ?? defaultParseDate;
+    const date2 = parse2(value);
+    if (!date2) return { display: null, tooltip: null };
+    const relative = opts?.dateFormat?.relative ?? defaultFormatRelative;
+    const absolute = opts?.dateFormat?.absolute ?? defaultFormatAbsolute;
+    const tooltip = absolute(date2);
+    const display = mode === "relative" ? relative(date2) : tooltip;
+    return { display, tooltip };
+  }
+  function exportToCsv(rows, columns, filename) {
+    const header = columns.map(
+      (col) => typeof col.header === "string" ? col.header : col.id
+    );
+    const csvRows = rows.map(
+      (row) => columns.map((col) => {
+        const val = resolveColumnValue(col, row);
+        const formatted = col.formatValue ? String(col.formatValue(val, row) ?? "") : String(val ?? "");
+        if (formatted.includes(",") || formatted.includes('"') || formatted.includes("\n")) {
+          return `"${formatted.replace(/"/g, '""')}"`;
+        }
+        return formatted;
+      })
+    );
+    const csvContent = "\uFEFF" + [
+      header.join(","),
+      ...csvRows.map((row) => row.join(","))
+    ].join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${filename}.csv`;
+    document.body.appendChild(link);
+    try {
+      link.click();
+    } finally {
+      link.remove();
+      URL.revokeObjectURL(url);
+    }
+  }
+
+  // src/components/data-grid/data-grid-export-dialog.tsx
+  var idleExportProgress = {
+    phase: "idle",
+    fetched: 0
+  };
+  var exportCompletionDisplayMs = 800;
+  function DataGridExportDialog({
+    open,
+    onOpenChange,
+    rows,
+    columns,
+    exportFilename,
+    exportOptions
+  }) {
+    const hasServerExport = exportOptions?.fetchRows != null;
+    const resolvedFields = (0, import_react31.useMemo)(
+      () => exportOptions?.fields ?? buildColumnExportFields(columns),
+      [exportOptions?.fields, columns]
+    );
+    const [format, setFormat] = (0, import_react31.useState)("csv");
+    const [scope, setScope] = (0, import_react31.useState)("all");
+    const [fields, setFields] = (0, import_react31.useState)(resolvedFields);
+    const [isExporting, setIsExporting] = (0, import_react31.useState)(false);
+    const [progress, setProgress] = (0, import_react31.useState)(idleExportProgress);
+    const [errorMessage, setErrorMessage] = (0, import_react31.useState)(null);
+    (0, import_react31.useEffect)(() => {
+      if (!isExporting) {
+        setFields(resolvedFields);
+      }
+    }, [isExporting, resolvedFields]);
+    const entityName = exportOptions?.entityName ?? "row";
+    const entityNamePlural = exportOptions?.entityNamePlural ?? "rows";
+    const filenamePrefix = exportOptions?.filenamePrefix ?? exportFilename;
+    const title = exportOptions?.title ?? "Export data";
+    const description = exportOptions?.description ?? (hasServerExport ? "Configure and download data from this table" : "Configure and download the rows currently loaded in this table");
+    const allScopeLabel = exportOptions?.allScopeLabel ?? `Export all ${entityNamePlural} in the project`;
+    const filteredScopeLabel = exportOptions?.filteredScopeLabel ?? `Export only filtered/searched ${entityNamePlural}`;
+    const progressSubjectLabel = exportOptions?.progressSubjectLabel ?? entityNamePlural;
+    const progressTitle = progress.phase === "complete" ? "Export complete" : `Exporting ${progressSubjectLabel}`;
+    const fetchExportRows = exportOptions?.fetchRows;
+    const closeDialog = (0, import_react31.useCallback)(() => {
+      onOpenChange(false);
+      setErrorMessage(null);
+    }, [onOpenChange]);
+    const handleOpenChange = (0, import_react31.useCallback)((nextOpen) => {
+      if (isExporting && !nextOpen) {
+        return;
+      }
+      if (nextOpen) {
+        onOpenChange(true);
+      } else {
+        closeDialog();
+      }
+    }, [closeDialog, isExporting, onOpenChange]);
+    const toggleField = (0, import_react31.useCallback)((key) => {
+      setFields(
+        (prev) => prev.map(
+          (field) => field.key === key ? { ...field, enabled: !field.enabled } : field
+        )
+      );
+    }, []);
+    const selectAllFields = (0, import_react31.useCallback)(() => {
+      setFields((prev) => prev.map((field) => ({ ...field, enabled: true })));
+    }, []);
+    const deselectAllFields = (0, import_react31.useCallback)(() => {
+      setFields((prev) => prev.map((field) => ({ ...field, enabled: false })));
+    }, []);
+    const fetchRows = (0, import_react31.useCallback)(async () => {
+      if (fetchExportRows != null) {
+        return await fetchExportRows({
+          scope,
+          onProgress: (fetched) => setProgress({ phase: "fetching", fetched })
+        });
+      }
+      setProgress({ phase: "fetching", fetched: rows.length });
+      return rows;
+    }, [fetchExportRows, rows, scope]);
+    const handleExport = async () => {
+      const enabledFields = fields.filter((field) => field.enabled);
+      if (enabledFields.length === 0) {
+        setErrorMessage("Select at least one field to export.");
+        return;
+      }
+      setErrorMessage(null);
+      setIsExporting(true);
+      setProgress({ phase: "fetching", fetched: 0 });
+      try {
+        const exportRows = await fetchRows();
+        if (exportRows.length === 0) {
+          setErrorMessage(
+            exportOptions?.emptyExportDescription ?? `There are no ${entityNamePlural} to export.`
+          );
+          setIsExporting(false);
+          setProgress(idleExportProgress);
+          return;
+        }
+        setProgress({ phase: "generating", fetched: exportRows.length });
+        const transformedData = buildExportTable(exportRows, enabledFields);
+        if (format === "csv") {
+          exportToCsv2(transformedData, filenamePrefix);
+        } else {
+          exportToJson(transformedData, filenamePrefix);
+        }
+        setProgress({ phase: "complete", fetched: exportRows.length });
+        await new Promise((resolve) => setTimeout(resolve, exportCompletionDisplayMs));
+        closeDialog();
+      } catch {
+        setErrorMessage("Something went wrong while exporting. Please try again.");
+      } finally {
+        setIsExporting(false);
+        setProgress(idleExportProgress);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      DesignDialog,
+      {
+        open,
+        onOpenChange: handleOpenChange,
+        title: isExporting ? progressTitle : title,
+        description: isExporting ? `Preparing export for ${progressSubjectLabel}.` : description,
+        size: "2xl",
+        variant: "plain",
+        headerClassName: isExporting ? "sr-only" : void 0,
+        hideTopCloseButton: isExporting,
+        children: isExporting ? /* @__PURE__ */ jsx(
+          ExportProgressContent,
+          {
+            progress,
+            format,
+            subjectLabel: progressSubjectLabel
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: `${filenamePrefix}-export-format`, children: "Export Format" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                id: `${filenamePrefix}-export-format`,
+                value: format,
+                onChange: (event) => setFormat(event.currentTarget.value === "json" ? "json" : "csv"),
+                className: "h-9 w-full rounded-md border border-input bg-white px-3 text-sm dark:bg-background",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "csv", children: "CSV (Comma-separated values)" }),
+                  /* @__PURE__ */ jsx("option", { value: "json", children: "JSON (JavaScript Object Notation)" })
+                ]
+              }
+            )
+          ] }),
+          hasServerExport ? /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium", children: "Export Scope" }),
+            /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: `${filenamePrefix}-export-scope`,
+                  value: "all",
+                  checked: scope === "all",
+                  onChange: () => setScope("all")
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: allScopeLabel })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: `${filenamePrefix}-export-scope`,
+                  value: "filtered",
+                  checked: scope === "filtered",
+                  onChange: () => setScope("filtered")
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: filteredScopeLabel })
+            ] })
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Fields to Export" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx(DesignButton, { type: "button", variant: "ghost", size: "sm", onClick: selectAllFields, className: "h-7 text-xs", children: "Select All" }),
+                /* @__PURE__ */ jsx(DesignButton, { type: "button", variant: "ghost", size: "sm", onClick: deselectAllFields, className: "h-7 text-xs", children: "Deselect All" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid max-h-[300px] grid-cols-1 gap-3 overflow-y-auto rounded-lg border border-border p-4 sm:grid-cols-2", children: fields.map((field) => /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm font-normal", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: field.enabled,
+                  onChange: () => toggleField(field.key)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: field.label })
+            ] }, field.key)) })
+          ] }),
+          errorMessage != null ? /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium", children: exportOptions?.emptyExportTitle ?? "Export unavailable" }),
+            /* @__PURE__ */ jsx("div", { children: errorMessage })
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 pt-2", children: [
+            /* @__PURE__ */ jsx(DesignButton, { variant: "outline", onClick: closeDialog, children: "Cancel" }),
+            /* @__PURE__ */ jsxs(DesignButton, { onClick: handleExport, children: [
+              /* @__PURE__ */ jsx(e29, { className: "mr-2 h-4 w-4" }),
+              "Export ",
+              titleCase(entityNamePlural)
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+  function ExportProgressContent(props) {
+    const { progress, format, subjectLabel } = props;
+    const fileLabel = format.toUpperCase();
+    const isComplete = progress.phase === "complete";
+    const title = isComplete ? "Export complete" : `Exporting ${subjectLabel}`;
+    const description = isComplete ? `Your ${fileLabel} is ready and the download should begin automatically.` : `Your ${fileLabel} is being prepared from matching ${subjectLabel}.`;
+    const statusLabel = progress.phase === "complete" ? "Download ready" : progress.phase === "generating" ? `Preparing ${fileLabel}` : `Fetching ${subjectLabel}`;
+    const countLabel = `${progress.fetched.toLocaleString()} ${isComplete ? "exported" : "fetched"}`;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold leading-snug", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-muted/35 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-4 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: statusLabel }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: countLabel })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative h-2 overflow-hidden rounded-full bg-foreground/10", children: isComplete ? /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-full bg-emerald-500/80" }) : /* @__PURE__ */ jsx("div", { className: "data-grid-export-progress-shimmer absolute inset-y-0 left-0 w-2/5 rounded-full bg-gradient-to-r from-transparent via-foreground/65 to-transparent" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200", children: "Do not reload this page until the export finishes. The download will start automatically." }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-3 pt-2", children: /* @__PURE__ */ jsx(DesignButton, { variant: "outline", disabled: true, children: "Cancel" }) })
+    ] });
+  }
+  function buildColumnExportFields(columns) {
+    const fields = [];
+    for (const column of columns) {
+      const label = typeof column.header === "string" ? column.header.trim() : column.id;
+      if (label.length === 0) {
+        continue;
+      }
+      fields.push({
+        key: column.id,
+        label,
+        enabled: true,
+        getValue: (row) => formatColumnExportValue(column, row)
+      });
+    }
+    return fields;
+  }
+  function formatColumnExportValue(column, row) {
+    const value = resolveColumnValue(column, row);
+    if (column.formatValue != null) {
+      return column.formatValue(value, row);
+    }
+    if (column.type === "date" || column.type === "dateTime") {
+      return formatGridDate(value, "absolute", {
+        parseValue: column.parseValue,
+        dateFormat: column.dateFormat
+      }).display ?? "";
+    }
+    return value;
+  }
+  function buildExportTable(rows, enabledFields) {
+    return {
+      csvHeaders: enabledFields.map((field) => field.label),
+      jsonKeys: buildJsonKeys(enabledFields),
+      rows: rows.map((row) => enabledFields.map((field) => toExportCellValue(field.getValue(row))))
+    };
+  }
+  function buildJsonKeys(fields) {
+    const labelCounts = /* @__PURE__ */ new Map();
+    for (const field of fields) {
+      labelCounts.set(field.label, (labelCounts.get(field.label) ?? 0) + 1);
+    }
+    const usedKeys = /* @__PURE__ */ new Map();
+    const keys = [];
+    for (const field of fields) {
+      const baseKey = labelCounts.get(field.label) === 1 ? field.label : `${field.label} (${field.key})`;
+      let key = baseKey;
+      let suffix = 2;
+      while (usedKeys.has(key)) {
+        key = `${baseKey} ${suffix}`;
+        suffix++;
+      }
+      usedKeys.set(key, true);
+      keys.push(key);
+    }
+    return keys;
+  }
+  function toExportCellValue(value) {
+    if (value == null) {
+      return "";
+    }
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      return value;
+    }
+    if (typeof value === "bigint") {
+      return value.toString();
+    }
+    if (value instanceof Date) {
+      return value.toISOString();
+    }
+    if (typeof value === "object") {
+      return JSON.stringify(value);
+    }
+    return String(value);
+  }
+  function exportToCsv2(data, filenamePrefix) {
+    const csvContent = "\uFEFF" + [
+      data.csvHeaders.map(escapeCsvCell).join(","),
+      ...data.rows.map((row) => row.map(escapeCsvCell).join(","))
+    ].join("\n");
+    downloadFile(csvContent, `${buildExportFilename(filenamePrefix)}.csv`, "text/csv;charset=utf-8;");
+  }
+  function escapeCsvCell(value) {
+    const rawText = String(value ?? "");
+    const text2 = typeof value === "string" && /^[=+\-@\t\r]/.test(rawText.trimStart()) ? `'${rawText}` : rawText;
+    if (text2.includes(",") || text2.includes('"') || text2.includes("\n") || text2.includes("\r")) {
+      return `"${text2.replace(/"/g, '""')}"`;
+    }
+    return text2;
+  }
+  function exportToJson(data, filenamePrefix) {
+    const rows = data.rows.map((row) => {
+      const jsonRow = {};
+      for (let i = 0; i < data.jsonKeys.length; i++) {
+        jsonRow[data.jsonKeys[i]] = row[i] ?? "";
+      }
+      return jsonRow;
+    });
+    const jsonString = JSON.stringify(rows, null, 2);
+    downloadFile(jsonString, `${buildExportFilename(filenamePrefix)}.json`, "application/json");
+  }
+  function downloadFile(content, filename, type) {
+    const blob = new Blob([content], { type });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    try {
+      link.click();
+    } finally {
+      link.remove();
+      URL.revokeObjectURL(url);
+    }
+  }
+  function buildExportFilename(prefix) {
+    return `${prefix}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}`;
+  }
+  function titleCase(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+
+  // src/components/data-grid/data-grid-toolbar.tsx
+  var import_react33 = __toESM(require_react());
   function usePopover() {
-    const [open, setOpen] = (0, import_react31.useState)(false);
-    const ref = (0, import_react31.useRef)(null);
-    import_react31.default.useEffect(() => {
+    const [open, setOpen] = (0, import_react33.useState)(false);
+    const ref = (0, import_react33.useRef)(null);
+    import_react33.default.useEffect(() => {
       if (!open) return;
       const handler = (e40) => {
         if (ref.current && !ref.current.contains(e40.target)) {
@@ -22177,7 +22685,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       document.addEventListener("mousedown", handler);
       return () => document.removeEventListener("mousedown", handler);
     }, [open]);
-    import_react31.default.useEffect(() => {
+    import_react33.default.useEffect(() => {
       if (!open) return;
       const handler = (e40) => {
         if (e40.key === "Escape") setOpen(false);
@@ -22274,7 +22782,7 @@ ${colorConfig.map(([key, itemConfig]) => {
     onDateDisplayChange,
     hasDateColumns
   }) {
-    const hideableColumns = (0, import_react31.useMemo)(
+    const hideableColumns = (0, import_react33.useMemo)(
       () => columns.filter((c4) => c4.hideable !== false),
       [columns]
     );
@@ -22322,255 +22830,108 @@ ${colorConfig.map(([key, itemConfig]) => {
         /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: strings.dateFormat }),
         /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-0.5 rounded-lg bg-zinc-100/90 p-0.5 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]", children: [
           /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: cn(
-                "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none",
-                dateDisplay === "relative" ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]" : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]"
-              ),
-              onClick: () => onDateDisplayChange("relative"),
-              children: strings.dateFormatRelative
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: cn(
-                "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none",
-                dateDisplay === "absolute" ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]" : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]"
-              ),
-              onClick: () => onDateDisplayChange("absolute"),
-              children: strings.dateFormatAbsolute
-            }
-          )
-        ] })
-      ] }) })
-    ] });
-  }
-  function DataGridToolbar({
-    ctx,
-    extra,
-    extraLeading,
-    hideQuickSearch
-  }) {
-    const { state, onChange, columns, strings, exportCsv } = ctx;
-    const columnPopover = usePopover();
-    const updateVisibility = (0, import_react31.useCallback)(
-      (visibility) => {
-        onChange((s8) => ({ ...s8, columnVisibility: visibility }));
-      },
-      [onChange]
-    );
-    const updateDateDisplay = (0, import_react31.useCallback)(
-      (mode) => {
-        onChange((s8) => ({ ...s8, dateDisplay: mode }));
-      },
-      [onChange]
-    );
-    const updateQuickSearch = (0, import_react31.useCallback)(
-      (value) => {
-        onChange((s8) => ({
-          ...s8,
-          quickSearch: value,
-          // Reset to first page whenever the search text changes,
-          // otherwise you can end up on a page index that no longer
-          // exists in the filtered / refetched result set.
-          pagination: { ...s8.pagination, pageIndex: 0 }
-        }));
-      },
-      [onChange]
-    );
-    const hasDateColumns = (0, import_react31.useMemo)(
-      () => columns.some((c4) => c4.type === "date" || c4.type === "dateTime"),
-      [columns]
-    );
-    return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: [
-        !hideQuickSearch && /* @__PURE__ */ jsx(
-          QuickSearch,
-          {
-            value: state.quickSearch,
-            onChange: updateQuickSearch,
-            placeholder: strings.searchPlaceholder
-          }
-        ),
-        extraLeading,
-        extra
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", ref: columnPopover.ref, children: [
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              onClick: () => columnPopover.setOpen(!columnPopover.open),
-              active: columnPopover.open,
-              title: strings.columns,
-              children: /* @__PURE__ */ jsx(n3, { className: "h-3.5 w-3.5" })
-            }
-          ),
-          columnPopover.open && /* @__PURE__ */ jsx(PopoverPanel, { popoverRef: columnPopover.ref, className: "right-0 left-auto", children: /* @__PURE__ */ jsx(
-            ColumnManager,
-            {
-              columns,
-              visibility: state.columnVisibility,
-              onChange: updateVisibility,
-              strings,
-              dateDisplay: state.dateDisplay,
-              onDateDisplayChange: updateDateDisplay,
-              hasDateColumns
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: exportCsv, title: strings.export, children: /* @__PURE__ */ jsx(l2, { className: "h-3.5 w-3.5" }) })
-      ] })
-    ] });
-  }
-
-  // src/components/data-grid/state.ts
-  function createDefaultDataGridState(columns) {
-    const columnWidths = {};
-    const columnOrder = [];
-    for (const col of columns) {
-      columnWidths[col.id] = clampColumnWidth(col, col.width ?? DEFAULT_COL_WIDTH);
-      columnOrder.push(col.id);
-    }
-    return {
-      sorting: [],
-      columnVisibility: {},
-      columnWidths,
-      columnPinning: { left: [], right: [] },
-      columnOrder,
-      pagination: { pageIndex: 0, pageSize: 50 },
-      selection: { selectedIds: /* @__PURE__ */ new Set(), anchorId: null },
-      dateDisplay: "relative",
-      quickSearch: ""
-    };
-  }
-  function resolveColumnValue(col, row) {
-    if (typeof col.accessor === "function") return col.accessor(row);
-    const key = col.accessor ?? col.id;
-    return row[key];
-  }
-  function defaultComparator(a26, b) {
-    if (a26 == null && b == null) return 0;
-    if (a26 == null) return -1;
-    if (b == null) return 1;
-    if (typeof a26 === "number" && typeof b === "number") return a26 - b;
-    if (a26 instanceof Date && b instanceof Date) return a26.getTime() - b.getTime();
-    return stringCompare(String(a26), String(b));
-  }
-  function buildRowComparator(sortModel, columns) {
-    if (sortModel.length === 0) return null;
-    const colMap = new Map(columns.map((c4) => [c4.id, c4]));
-    return (a26, b) => {
-      for (const { columnId, direction } of sortModel) {
-        const col = colMap.get(columnId);
-        if (!col) continue;
-        const va = resolveColumnValue(col, a26);
-        const vb = resolveColumnValue(col, b);
-        const cmp = col.sortComparator ? col.sortComparator(va, vb) : defaultComparator(va, vb);
-        if (cmp !== 0) return direction === "asc" ? cmp : -cmp;
-      }
-      return 0;
-    };
-  }
-  function paginateRows(rows, pagination) {
-    const start = pagination.pageIndex * pagination.pageSize;
-    return rows.slice(start, start + pagination.pageSize);
-  }
-  function defaultMatchRow(row, query, columns) {
-    for (const col of columns) {
-      const v = resolveColumnValue(col, row);
-      if (v == null) continue;
-      if (String(v).toLowerCase().includes(query)) return true;
-    }
-    return false;
-  }
-  function applyQuickSearch(rows, query, columns, matchRow = defaultMatchRow) {
-    const trimmed = query.trim().toLowerCase();
-    if (!trimmed) return rows;
-    return rows.filter((r7) => matchRow(r7, trimmed, columns));
-  }
-  function defaultParseDate(value) {
-    if (value == null) return null;
-    if (value instanceof Date) return isNaN(value.getTime()) ? null : value;
-    if (typeof value === "number" || typeof value === "string") {
-      const d = new Date(value);
-      return isNaN(d.getTime()) ? null : d;
-    }
-    return null;
-  }
-  var DIVISIONS = [
-    { amount: 60, unit: "second" },
-    { amount: 60, unit: "minute" },
-    { amount: 24, unit: "hour" },
-    { amount: 7, unit: "day" },
-    { amount: 4.34524, unit: "week" },
-    { amount: 12, unit: "month" },
-    { amount: Number.POSITIVE_INFINITY, unit: "year" }
-  ];
-  var relativeTimeFormatterCache = /* @__PURE__ */ new Map();
-  function getRelativeTimeFormatter(locale2) {
-    const key = locale2 ?? "__default__";
-    let cached = relativeTimeFormatterCache.get(key);
-    if (cached == null) {
-      cached = new Intl.RelativeTimeFormat(locale2, { numeric: "auto" });
-      relativeTimeFormatterCache.set(key, cached);
-    }
-    return cached;
-  }
-  function defaultFormatRelative(date2) {
-    const rtf = getRelativeTimeFormatter();
-    let duration = (date2.getTime() - Date.now()) / 1e3;
-    for (const div of DIVISIONS) {
-      if (Math.abs(duration) < div.amount) return rtf.format(Math.round(duration), div.unit);
-      duration /= div.amount;
-    }
-    return rtf.format(Math.round(duration), "year");
-  }
-  function defaultFormatAbsolute(date2) {
-    return date2.toLocaleString();
-  }
-  function formatGridDate(value, mode, opts) {
-    const parse2 = opts?.parseValue ?? defaultParseDate;
-    const date2 = parse2(value);
-    if (!date2) return { display: null, tooltip: null };
-    const relative = opts?.dateFormat?.relative ?? defaultFormatRelative;
-    const absolute = opts?.dateFormat?.absolute ?? defaultFormatAbsolute;
-    const tooltip = absolute(date2);
-    const display = mode === "relative" ? relative(date2) : tooltip;
-    return { display, tooltip };
+            "button",
+            {
+              className: cn(
+                "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none",
+                dateDisplay === "relative" ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]" : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]"
+              ),
+              onClick: () => onDateDisplayChange("relative"),
+              children: strings.dateFormatRelative
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                "px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none",
+                dateDisplay === "absolute" ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]" : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]"
+              ),
+              onClick: () => onDateDisplayChange("absolute"),
+              children: strings.dateFormatAbsolute
+            }
+          )
+        ] })
+      ] }) })
+    ] });
   }
-  function exportToCsv(rows, columns, filename) {
-    const header = columns.map(
-      (col) => typeof col.header === "string" ? col.header : col.id
+  function DataGridToolbar({
+    ctx,
+    extra,
+    extraLeading,
+    hideQuickSearch
+  }) {
+    const { state, onChange, columns, strings, exportCsv } = ctx;
+    const columnPopover = usePopover();
+    const updateVisibility = (0, import_react33.useCallback)(
+      (visibility) => {
+        onChange((s8) => ({ ...s8, columnVisibility: visibility }));
+      },
+      [onChange]
     );
-    const csvRows = rows.map(
-      (row) => columns.map((col) => {
-        const val = resolveColumnValue(col, row);
-        const formatted = col.formatValue ? String(col.formatValue(val, row) ?? "") : String(val ?? "");
-        if (formatted.includes(",") || formatted.includes('"') || formatted.includes("\n")) {
-          return `"${formatted.replace(/"/g, '""')}"`;
-        }
-        return formatted;
-      })
+    const updateDateDisplay = (0, import_react33.useCallback)(
+      (mode) => {
+        onChange((s8) => ({ ...s8, dateDisplay: mode }));
+      },
+      [onChange]
     );
-    const csvContent = "\uFEFF" + [
-      header.join(","),
-      ...csvRows.map((row) => row.join(","))
-    ].join("\n");
-    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${filename}.csv`;
-    document.body.appendChild(link);
-    try {
-      link.click();
-    } finally {
-      link.remove();
-      URL.revokeObjectURL(url);
-    }
+    const updateQuickSearch = (0, import_react33.useCallback)(
+      (value) => {
+        onChange((s8) => ({
+          ...s8,
+          quickSearch: value,
+          // Reset to first page whenever the search text changes,
+          // otherwise you can end up on a page index that no longer
+          // exists in the filtered / refetched result set.
+          pagination: { ...s8.pagination, pageIndex: 0 }
+        }));
+      },
+      [onChange]
+    );
+    const hasDateColumns = (0, import_react33.useMemo)(
+      () => columns.some((c4) => c4.type === "date" || c4.type === "dateTime"),
+      [columns]
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: [
+        !hideQuickSearch && /* @__PURE__ */ jsx(
+          QuickSearch,
+          {
+            value: state.quickSearch,
+            onChange: updateQuickSearch,
+            placeholder: strings.searchPlaceholder
+          }
+        ),
+        extraLeading,
+        extra
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", ref: columnPopover.ref, children: [
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onClick: () => columnPopover.setOpen(!columnPopover.open),
+              active: columnPopover.open,
+              title: strings.columns,
+              children: /* @__PURE__ */ jsx(n3, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          columnPopover.open && /* @__PURE__ */ jsx(PopoverPanel, { popoverRef: columnPopover.ref, className: "right-0 left-auto", children: /* @__PURE__ */ jsx(
+            ColumnManager,
+            {
+              columns,
+              visibility: state.columnVisibility,
+              onChange: updateVisibility,
+              strings,
+              dateDisplay: state.dateDisplay,
+              onDateDisplayChange: updateDateDisplay,
+              hasDateColumns
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(ToolbarButton, { onClick: exportCsv, title: strings.export, children: /* @__PURE__ */ jsx(l2, { className: "h-3.5 w-3.5" }) })
+      ] })
+    ] });
   }
 
   // src/components/data-grid/strings.ts
@@ -22896,8 +23257,8 @@ ${colorConfig.map(([key, itemConfig]) => {
     rootRef,
     strings
   }) {
-    const ref = (0, import_react33.useRef)(null);
-    (0, import_react33.useEffect)(() => {
+    const ref = (0, import_react35.useRef)(null);
+    (0, import_react35.useEffect)(() => {
       const el = ref.current;
       if (!el) return;
       const observer = new IntersectionObserver(
@@ -23015,6 +23376,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       footer,
       footerExtra,
       exportFilename = "export",
+      exportOptions,
       strings: stringsOverride,
       className,
       onRowClick,
@@ -23027,8 +23389,8 @@ ${colorConfig.map(([key, itemConfig]) => {
     const isDynamicRowHeight = rowHeightProp === "auto";
     const fixedRowHeight = isDynamicRowHeight ? void 0 : rowHeightProp;
     const estimatedRowHeight = estimatedRowHeightProp ?? (fixedRowHeight ?? 44);
-    const strings = (0, import_react33.useMemo)(() => resolveDataGridStrings(stringsOverride), [stringsOverride]);
-    const tableColumns = (0, import_react33.useMemo)(
+    const strings = (0, import_react35.useMemo)(() => resolveDataGridStrings(stringsOverride), [stringsOverride]);
+    const tableColumns = (0, import_react35.useMemo)(
       () => allColumns.map((col) => ({
         id: col.id,
         accessorFn: (row) => resolveColumnValue(col, row),
@@ -23043,22 +23405,22 @@ ${colorConfig.map(([key, itemConfig]) => {
       })),
       [allColumns]
     );
-    const tanstackSorting = (0, import_react33.useMemo)(() => toTanstackSorting(state.sorting), [state.sorting]);
-    const tanstackRowSelection = (0, import_react33.useMemo)(
+    const tanstackSorting = (0, import_react35.useMemo)(() => toTanstackSorting(state.sorting), [state.sorting]);
+    const tanstackRowSelection = (0, import_react35.useMemo)(
       () => toTanstackRowSelection(state.selection.selectedIds),
       [state.selection.selectedIds]
     );
-    const tanstackColumnPinning = (0, import_react33.useMemo)(
+    const tanstackColumnPinning = (0, import_react35.useMemo)(
       () => ({ left: [...state.columnPinning.left], right: [...state.columnPinning.right] }),
       [state.columnPinning]
     );
-    const tanstackColumnOrder = (0, import_react33.useMemo)(
+    const tanstackColumnOrder = (0, import_react35.useMemo)(
       () => [...state.columnOrder],
       [state.columnOrder]
     );
-    const allColumnsRef = (0, import_react33.useRef)(allColumns);
+    const allColumnsRef = (0, import_react35.useRef)(allColumns);
     allColumnsRef.current = allColumns;
-    const handleSortingChange = (0, import_react33.useCallback)(
+    const handleSortingChange = (0, import_react35.useCallback)(
       (updater) => {
         const next = resolveUpdater(updater, toTanstackSorting(state.sorting));
         const ours = fromTanstackSorting(next).map((s8) => ({ ...s8 }));
@@ -23071,7 +23433,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       },
       [onChange, onSortChange, state.sorting]
     );
-    const handleColumnSizingChange = (0, import_react33.useCallback)(
+    const handleColumnSizingChange = (0, import_react35.useCallback)(
       (updater) => {
         const next = resolveUpdater(updater, state.columnWidths);
         const clamped = {};
@@ -23088,7 +23450,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       },
       [onChange, onColumnResize, state.columnWidths]
     );
-    const handleVisibilityChange = (0, import_react33.useCallback)(
+    const handleVisibilityChange = (0, import_react35.useCallback)(
       (updater) => {
         const next = resolveUpdater(updater, state.columnVisibility);
         onChange((s8) => ({ ...s8, columnVisibility: next }));
@@ -23096,14 +23458,14 @@ ${colorConfig.map(([key, itemConfig]) => {
       },
       [onChange, onColumnVisibilityChange, state.columnVisibility]
     );
-    const handleColumnOrderChange = (0, import_react33.useCallback)(
+    const handleColumnOrderChange = (0, import_react35.useCallback)(
       (updater) => {
         const next = resolveUpdater(updater, [...state.columnOrder]);
         onChange((s8) => ({ ...s8, columnOrder: next }));
       },
       [onChange, state.columnOrder]
     );
-    const handleColumnPinningChange = (0, import_react33.useCallback)(
+    const handleColumnPinningChange = (0, import_react35.useCallback)(
       (updater) => {
         const current = {
           left: [...state.columnPinning.left],
@@ -23143,13 +23505,13 @@ ${colorConfig.map(([key, itemConfig]) => {
       manualPagination: true,
       manualFiltering: true
     });
-    const visibleColumns = (0, import_react33.useMemo)(() => {
+    const visibleColumns = (0, import_react35.useMemo)(() => {
       const colMap = new Map(allColumns.map((c4) => [c4.id, c4]));
       return table.getVisibleLeafColumns().map((c4) => colMap.get(c4.id)).filter(Boolean);
     }, [allColumns, table, state.columnOrder, state.columnVisibility]);
-    const rowIds = (0, import_react33.useMemo)(() => rows.map(getRowId), [rows, getRowId]);
-    const [containerWidth, setContainerWidth] = (0, import_react33.useState)(0);
-    (0, import_react33.useLayoutEffect)(() => {
+    const rowIds = (0, import_react35.useMemo)(() => rows.map(getRowId), [rows, getRowId]);
+    const [containerWidth, setContainerWidth] = (0, import_react35.useState)(0);
+    (0, import_react35.useLayoutEffect)(() => {
       const grid = gridRef.current;
       const scroller = scrollContainerRef.current;
       if (!grid) return;
@@ -23174,7 +23536,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       return () => observer.disconnect();
     }, []);
     const columnSizingInfo = table.getState().columnSizingInfo;
-    const columnSizes = (0, import_react33.useMemo)(() => {
+    const columnSizes = (0, import_react35.useMemo)(() => {
       const sizes = {};
       let baseTotal = selectionMode !== "none" ? 44 : 0;
       const resizingId = columnSizingInfo.isResizingColumn || null;
@@ -23189,19 +23551,19 @@ ${colorConfig.map(([key, itemConfig]) => {
       distributeFlexWidths(sizes, visibleColumns, containerWidth - baseTotal);
       return sizes;
     }, [visibleColumns, table, columnSizingInfo, state.columnWidths, containerWidth, selectionMode]);
-    const totalContentWidth = (0, import_react33.useMemo)(() => {
+    const totalContentWidth = (0, import_react35.useMemo)(() => {
       let total = selectionMode !== "none" ? 44 : 0;
       for (const col of visibleColumns) total += columnSizes[col.id] ?? 0;
       return total;
     }, [visibleColumns, columnSizes, selectionMode]);
-    const cssVars = (0, import_react33.useMemo)(() => {
+    const cssVars = (0, import_react35.useMemo)(() => {
       const vars = { "--grid-total-w": `${totalContentWidth}px` };
       for (const col of visibleColumns) {
         vars[`--col-${col.id}-size`] = columnSizes[col.id];
       }
       return vars;
     }, [visibleColumns, columnSizes, totalContentWidth]);
-    const fireSelection = (0, import_react33.useCallback)(
+    const fireSelection = (0, import_react35.useCallback)(
       (next) => {
         onChange((s8) => ({ ...s8, selection: next }));
         if (onSelectionChange) {
@@ -23212,7 +23574,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       },
       [onChange, onSelectionChange, rows, getRowId]
     );
-    const handleRowClick = (0, import_react33.useCallback)(
+    const handleRowClick = (0, import_react35.useCallback)(
       (row, rowId, event) => {
         if (selectionMode !== "none") {
           const next = nextSelection({
@@ -23228,28 +23590,22 @@ ${colorConfig.map(([key, itemConfig]) => {
       },
       [selectionMode, state.selection, rowIds, fireSelection, onRowClick]
     );
-    const handleSelectAll = (0, import_react33.useCallback)(() => {
+    const handleSelectAll = (0, import_react35.useCallback)(() => {
       const allSelectedNow = rowIds.length > 0 && rowIds.every((id) => state.selection.selectedIds.has(id));
       fireSelection(
         allSelectedNow ? { selectedIds: /* @__PURE__ */ new Set(), anchorId: null } : { selectedIds: new Set(rowIds), anchorId: null }
       );
     }, [rowIds, state.selection.selectedIds, fireSelection]);
-    const handleExportCsv = (0, import_react33.useCallback)(() => {
-      if (typeof window !== "undefined" && rows.length > 0) {
-        const totalSuffix = totalRowCount != null && totalRowCount > rows.length ? ` of ${totalRowCount} total \u2014 load more rows first to include them` : "";
-        const confirmed = window.confirm(
-          `Export ${rows.length.toLocaleString()} loaded row${rows.length === 1 ? "" : "s"}${totalSuffix}?`
-        );
-        if (!confirmed) return;
-      }
-      exportToCsv(rows, visibleColumns, exportFilename);
-    }, [rows, visibleColumns, exportFilename, totalRowCount]);
-    const scrollContainerRef = (0, import_react33.useRef)(null);
-    const headerScrollRef = (0, import_react33.useRef)(null);
-    const stickyChromeRef = (0, import_react33.useRef)(null);
-    const rowsClipRef = (0, import_react33.useRef)(null);
-    const gridRef = (0, import_react33.useRef)(null);
-    const measureElementFn = (0, import_react33.useCallback)((el) => el.getBoundingClientRect().height, []);
+    const [exportDialogOpen, setExportDialogOpen] = (0, import_react35.useState)(false);
+    const handleExportCsv = (0, import_react35.useCallback)(() => {
+      setExportDialogOpen(true);
+    }, []);
+    const scrollContainerRef = (0, import_react35.useRef)(null);
+    const headerScrollRef = (0, import_react35.useRef)(null);
+    const stickyChromeRef = (0, import_react35.useRef)(null);
+    const rowsClipRef = (0, import_react35.useRef)(null);
+    const gridRef = (0, import_react35.useRef)(null);
+    const measureElementFn = (0, import_react35.useCallback)((el) => el.getBoundingClientRect().height, []);
     const rowVirtualizer = useVirtualizer({
       count: rows.length,
       getScrollElement: () => scrollContainerRef.current,
@@ -23261,7 +23617,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       },
       ...isDynamicRowHeight ? { measureElement: measureElementFn } : {}
     });
-    (0, import_react33.useLayoutEffect)(() => {
+    (0, import_react35.useLayoutEffect)(() => {
       const gridEl = gridRef.current;
       const stickyEl = stickyChromeRef.current;
       const bodyEl = scrollContainerRef.current;
@@ -23288,12 +23644,12 @@ ${colorConfig.map(([key, itemConfig]) => {
         observer.disconnect();
       };
     }, []);
-    const handleBodyScroll = (0, import_react33.useCallback)(() => {
+    const handleBodyScroll = (0, import_react35.useCallback)(() => {
       const body = scrollContainerRef.current;
       const header = headerScrollRef.current;
       if (body && header) header.scrollLeft = body.scrollLeft;
     }, []);
-    const toolbarCtx = (0, import_react33.useMemo)(
+    const toolbarCtx = (0, import_react35.useMemo)(
       () => ({
         state,
         onChange,
@@ -23306,7 +23662,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       }),
       [state, onChange, allColumns, visibleColumns, totalRowCount, strings, handleExportCsv]
     );
-    const footerCtx = (0, import_react33.useMemo)(
+    const footerCtx = (0, import_react35.useMemo)(
       () => ({
         state,
         totalRowCount,
@@ -23320,238 +23676,251 @@ ${colorConfig.map(([key, itemConfig]) => {
     const allSelected = rowIds.length > 0 && rowIds.every((id) => state.selection.selectedIds.has(id));
     const someSelected = !allSelected && rowIds.some((id) => state.selection.selectedIds.has(id));
     const infiniteScrollRootRef = paginationMode === "infinite" && (fillHeight || maxHeight != null) ? scrollContainerRef : void 0;
-    const headers = (0, import_react33.useMemo)(
+    const headers = (0, import_react35.useMemo)(
       () => table.getHeaderGroups()[0]?.headers.filter((h) => visibleColumns.some((c4) => c4.id === h.column.id)) ?? [],
       [table, visibleColumns]
     );
-    const headerByColId = (0, import_react33.useMemo)(() => {
+    const headerByColId = (0, import_react35.useMemo)(() => {
       const m5 = /* @__PURE__ */ new Map();
       for (const h of headers) m5.set(h.column.id, h);
       return m5;
     }, [headers]);
     const isBounded = fillHeight || maxHeight != null;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: gridRef,
-        className: cn(
-          "isolate flex w-full min-w-0 max-w-full flex-col bg-transparent rounded-[calc(var(--radius)*2)]",
-          fillHeight ? "min-h-0 h-full" : "min-h-0 h-auto",
-          isBounded && "overflow-hidden",
-          className
-        ),
-        style: maxHeight != null ? { ...cssVars, maxHeight } : cssVars,
-        role: "grid",
-        "aria-rowcount": totalRowCount ?? rows.length,
-        "aria-colcount": visibleColumns.length,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: stickyChromeRef,
-              className: "sticky z-30 w-full min-w-0 shrink-0 overflow-visible rounded-t-[calc(var(--radius)*2)] bg-white/90 dark:bg-background/60 backdrop-blur-xl",
-              style: { top: stickyTop ?? (maxHeight != null ? 0 : "var(--data-grid-sticky-top, 0px)") },
-              children: [
-                toolbar !== false && /* @__PURE__ */ jsx("div", { className: "relative bg-transparent", children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(
-                  DataGridToolbar,
-                  {
-                    ctx: toolbarCtx,
-                    extra: typeof toolbarExtra === "function" ? toolbarExtra(toolbarCtx) : toolbarExtra
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                  isRefetching && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-0.5 z-30 bg-foreground/[0.04] overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 bg-blue-500/60 rounded-full animate-pulse" }) }),
-                  /* @__PURE__ */ jsx(
-                    "div",
+    return /* @__PURE__ */ jsxs(Fragment24, { children: [
+      /* @__PURE__ */ jsx(
+        DataGridExportDialog,
+        {
+          open: exportDialogOpen,
+          onOpenChange: setExportDialogOpen,
+          rows,
+          columns: visibleColumns,
+          exportFilename,
+          exportOptions
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: gridRef,
+          className: cn(
+            "isolate flex w-full min-w-0 max-w-full flex-col bg-transparent rounded-[calc(var(--radius)*2)]",
+            fillHeight ? "min-h-0 h-full" : "min-h-0 h-auto",
+            isBounded && "overflow-hidden",
+            className
+          ),
+          style: maxHeight != null ? { ...cssVars, maxHeight } : cssVars,
+          role: "grid",
+          "aria-rowcount": totalRowCount ?? rows.length,
+          "aria-colcount": visibleColumns.length,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: stickyChromeRef,
+                className: "sticky z-30 w-full min-w-0 shrink-0 overflow-visible rounded-t-[calc(var(--radius)*2)] bg-white/90 dark:bg-background/60 backdrop-blur-xl",
+                style: { top: stickyTop ?? (maxHeight != null ? 0 : "var(--data-grid-sticky-top, 0px)") },
+                children: [
+                  toolbar !== false && /* @__PURE__ */ jsx("div", { className: "relative bg-transparent", children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(
+                    DataGridToolbar,
                     {
-                      ref: headerScrollRef,
-                      className: "w-full min-w-0 shrink-0 overflow-hidden border-b border-foreground/[0.06]",
-                      children: /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          className: "flex",
-                          style: { height: headerHeight, minWidth: totalContentWidth },
-                          role: "row",
-                          children: [
-                            selectionMode !== "none" && /* @__PURE__ */ jsx(
-                              "div",
-                              {
-                                className: "flex items-center justify-center border-r border-foreground/[0.04]",
-                                style: { width: 44 },
-                                children: selectionMode === "multiple" && /* @__PURE__ */ jsx(
-                                  SelectionCheckbox,
-                                  {
-                                    checked: allSelected,
-                                    indeterminate: someSelected,
-                                    onChange: handleSelectAll,
-                                    ariaLabel: "Select all rows on this page",
-                                    title: "Select all rows on this page"
-                                  }
-                                )
-                              }
-                            ),
-                            visibleColumns.map((col) => {
-                              const header = headerByColId.get(col.id);
-                              if (!header) return null;
-                              return /* @__PURE__ */ jsx(HeaderCell, { header, col, resizable }, col.id);
-                            })
-                          ]
-                        }
-                      )
+                      ctx: toolbarCtx,
+                      extra: typeof toolbarExtra === "function" ? toolbarExtra(toolbarCtx) : toolbarExtra
                     }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: scrollContainerRef,
-              className: cn(
-                "relative z-0 w-full min-w-0 overflow-auto bg-transparent",
-                isBounded ? "min-h-0 flex-1" : "flex-none",
-                "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5",
-                "[&::-webkit-scrollbar-track]:bg-transparent",
-                "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full",
-                "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]"
-              ),
-              onScroll: handleBodyScroll,
-              children: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  ref: rowsClipRef,
-                  "data-data-grid-rows-clip": "",
-                  className: "relative z-0",
-                  style: {
-                    minWidth: totalContentWidth,
-                    clipPath: "inset(var(--data-grid-sticky-overlap, 0px) 0 0 0)"
-                  },
-                  children: [
-                    isLoading && /* @__PURE__ */ jsx("div", { style: { minWidth: totalContentWidth }, children: loadingState ?? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
-                      SkeletonRow,
-                      {
-                        columns: visibleColumns,
-                        height: estimatedRowHeight,
-                        showCheckbox: selectionMode !== "none"
-                      },
-                      i
-                    )) }),
-                    !isLoading && rows.length === 0 && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "flex items-center justify-center py-16 text-sm text-muted-foreground",
-                        style: { minWidth: totalContentWidth },
-                        children: emptyState ?? strings.noData
-                      }
-                    ),
-                    !isLoading && rows.length > 0 && /* @__PURE__ */ jsx(
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                    isRefetching && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-0.5 z-30 bg-foreground/[0.04] overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 bg-blue-500/60 rounded-full animate-pulse" }) }),
+                    /* @__PURE__ */ jsx(
                       "div",
                       {
-                        style: {
-                          height: rowVirtualizer.getTotalSize(),
-                          width: "100%",
-                          minWidth: totalContentWidth,
-                          position: "relative"
-                        },
-                        children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                          const row = rows[virtualRow.index] ?? throwErr(
-                            `DataGrid: virtualized row index ${virtualRow.index} out of range (rows.length=${rows.length})`
-                          );
-                          const rowId = getRowId(row);
-                          const isSelected = state.selection.selectedIds.has(rowId);
-                          const isOddRow = virtualRow.index % 2 === 1;
-                          return /* @__PURE__ */ jsxs(
-                            "div",
-                            {
-                              ref: isDynamicRowHeight ? rowVirtualizer.measureElement : void 0,
-                              "data-index": virtualRow.index,
-                              className: cn(
-                                "absolute left-0 w-full flex",
-                                "border-b border-black/[0.03] dark:border-white/[0.03]",
-                                "transition-colors duration-75",
-                                isSelected ? "bg-blue-500/[0.06] dark:bg-blue-400/[0.08] hover:bg-blue-500/[0.08] dark:hover:bg-blue-400/[0.1]" : isOddRow ? "bg-foreground/[0.02] dark:bg-foreground/[0.03] hover:bg-foreground/[0.04] dark:hover:bg-foreground/[0.06]" : "hover:bg-foreground/[0.025] dark:hover:bg-foreground/[0.04]",
-                                (selectionMode !== "none" || onRowClick) && "cursor-pointer"
+                        ref: headerScrollRef,
+                        className: "w-full min-w-0 shrink-0 overflow-hidden border-b border-foreground/[0.06]",
+                        children: /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: "flex",
+                            style: { height: headerHeight, minWidth: totalContentWidth },
+                            role: "row",
+                            children: [
+                              selectionMode !== "none" && /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  className: "flex items-center justify-center border-r border-foreground/[0.04]",
+                                  style: { width: 44 },
+                                  children: selectionMode === "multiple" && /* @__PURE__ */ jsx(
+                                    SelectionCheckbox,
+                                    {
+                                      checked: allSelected,
+                                      indeterminate: someSelected,
+                                      onChange: handleSelectAll,
+                                      ariaLabel: "Select all rows on this page",
+                                      title: "Select all rows on this page"
+                                    }
+                                  )
+                                }
                               ),
-                              style: {
-                                ...isDynamicRowHeight ? { minHeight: estimatedRowHeight } : { height: fixedRowHeight },
-                                transform: `translateY(${virtualRow.start}px)`
-                              },
-                              onClick: (e40) => {
-                                if (!shouldIgnoreRowClick(e40)) handleRowClick(row, rowId, e40);
-                              },
-                              onDoubleClick: (e40) => {
-                                if (!shouldIgnoreRowClick(e40)) onRowDoubleClick?.(row, rowId, e40);
-                              },
-                              role: "row",
-                              "aria-rowindex": virtualRow.index + 2,
-                              "aria-selected": isSelected,
-                              "data-row-id": rowId,
-                              "data-state": isSelected ? "selected" : void 0,
-                              children: [
-                                selectionMode !== "none" && /* @__PURE__ */ jsx(
-                                  "div",
-                                  {
-                                    className: "flex items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]",
-                                    style: { width: 44 },
-                                    children: /* @__PURE__ */ jsx(
-                                      SelectionCheckbox,
-                                      {
-                                        checked: isSelected,
-                                        onChange: (event) => handleRowClick(row, rowId, event),
-                                        ariaLabel: `Select row ${rowId}`
-                                      }
-                                    )
-                                  }
-                                ),
-                                visibleColumns.map((col) => /* @__PURE__ */ jsx(
-                                  DataCell,
-                                  {
-                                    col,
-                                    row,
-                                    rowId,
-                                    rowIndex: virtualRow.index,
-                                    isSelected,
-                                    dateDisplay: state.dateDisplay
-                                  },
-                                  col.id
-                                ))
-                              ]
-                            },
-                            rowId
-                          );
-                        })
-                      }
-                    ),
-                    paginationMode === "infinite" && hasMore && !isLoading && /* @__PURE__ */ jsx(
-                      InfiniteScrollSentinel,
-                      {
-                        onIntersect: onLoadMore ?? NOOP,
-                        isLoading: isLoadingMore,
-                        rootRef: infiniteScrollRootRef,
-                        strings
+                              visibleColumns.map((col) => {
+                                const header = headerByColId.get(col.id);
+                                if (!header) return null;
+                                return /* @__PURE__ */ jsx(HeaderCell, { header, col, resizable }, col.id);
+                              })
+                            ]
+                          }
+                        )
                       }
                     )
-                  ]
-                }
-              )
-            }
-          ),
-          footer !== false && /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-30 shrink-0 overflow-hidden rounded-b-[calc(var(--radius)*2)] bg-white/90 dark:bg-background/60 backdrop-blur-xl", children: [
-            footer ? footer(footerCtx) : /* @__PURE__ */ jsx(DefaultFooter, { ctx: footerCtx, pagination: paginationMode, onChange }),
-            footerExtra && (typeof footerExtra === "function" ? footerExtra(footerCtx) : footerExtra)
-          ] })
-        ]
-      }
-    );
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: scrollContainerRef,
+                className: cn(
+                  "relative z-0 w-full min-w-0 overflow-auto bg-transparent",
+                  isBounded ? "min-h-0 flex-1" : "flex-none",
+                  "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5",
+                  "[&::-webkit-scrollbar-track]:bg-transparent",
+                  "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full",
+                  "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]"
+                ),
+                onScroll: handleBodyScroll,
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: rowsClipRef,
+                    "data-data-grid-rows-clip": "",
+                    className: "relative z-0",
+                    style: {
+                      minWidth: totalContentWidth,
+                      clipPath: "inset(var(--data-grid-sticky-overlap, 0px) 0 0 0)"
+                    },
+                    children: [
+                      isLoading && /* @__PURE__ */ jsx("div", { style: { minWidth: totalContentWidth }, children: loadingState ?? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
+                        SkeletonRow,
+                        {
+                          columns: visibleColumns,
+                          height: estimatedRowHeight,
+                          showCheckbox: selectionMode !== "none"
+                        },
+                        i
+                      )) }),
+                      !isLoading && rows.length === 0 && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "flex items-center justify-center py-16 text-sm text-muted-foreground",
+                          style: { minWidth: totalContentWidth },
+                          children: emptyState ?? strings.noData
+                        }
+                      ),
+                      !isLoading && rows.length > 0 && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            height: rowVirtualizer.getTotalSize(),
+                            width: "100%",
+                            minWidth: totalContentWidth,
+                            position: "relative"
+                          },
+                          children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                            const row = rows[virtualRow.index] ?? throwErr(
+                              `DataGrid: virtualized row index ${virtualRow.index} out of range (rows.length=${rows.length})`
+                            );
+                            const rowId = getRowId(row);
+                            const isSelected = state.selection.selectedIds.has(rowId);
+                            const isOddRow = virtualRow.index % 2 === 1;
+                            return /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                ref: isDynamicRowHeight ? rowVirtualizer.measureElement : void 0,
+                                "data-index": virtualRow.index,
+                                className: cn(
+                                  "absolute left-0 w-full flex",
+                                  "border-b border-black/[0.03] dark:border-white/[0.03]",
+                                  "transition-colors duration-75",
+                                  isSelected ? "bg-blue-500/[0.06] dark:bg-blue-400/[0.08] hover:bg-blue-500/[0.08] dark:hover:bg-blue-400/[0.1]" : isOddRow ? "bg-foreground/[0.02] dark:bg-foreground/[0.03] hover:bg-foreground/[0.04] dark:hover:bg-foreground/[0.06]" : "hover:bg-foreground/[0.025] dark:hover:bg-foreground/[0.04]",
+                                  (selectionMode !== "none" || onRowClick) && "cursor-pointer"
+                                ),
+                                style: {
+                                  ...isDynamicRowHeight ? { minHeight: estimatedRowHeight } : { height: fixedRowHeight },
+                                  transform: `translateY(${virtualRow.start}px)`
+                                },
+                                onClick: (e40) => {
+                                  if (!shouldIgnoreRowClick(e40)) handleRowClick(row, rowId, e40);
+                                },
+                                onDoubleClick: (e40) => {
+                                  if (!shouldIgnoreRowClick(e40)) onRowDoubleClick?.(row, rowId, e40);
+                                },
+                                role: "row",
+                                "aria-rowindex": virtualRow.index + 2,
+                                "aria-selected": isSelected,
+                                "data-row-id": rowId,
+                                "data-state": isSelected ? "selected" : void 0,
+                                children: [
+                                  selectionMode !== "none" && /* @__PURE__ */ jsx(
+                                    "div",
+                                    {
+                                      className: "flex items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]",
+                                      style: { width: 44 },
+                                      children: /* @__PURE__ */ jsx(
+                                        SelectionCheckbox,
+                                        {
+                                          checked: isSelected,
+                                          onChange: (event) => handleRowClick(row, rowId, event),
+                                          ariaLabel: `Select row ${rowId}`
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  visibleColumns.map((col) => /* @__PURE__ */ jsx(
+                                    DataCell,
+                                    {
+                                      col,
+                                      row,
+                                      rowId,
+                                      rowIndex: virtualRow.index,
+                                      isSelected,
+                                      dateDisplay: state.dateDisplay
+                                    },
+                                    col.id
+                                  ))
+                                ]
+                              },
+                              rowId
+                            );
+                          })
+                        }
+                      ),
+                      paginationMode === "infinite" && hasMore && !isLoading && /* @__PURE__ */ jsx(
+                        InfiniteScrollSentinel,
+                        {
+                          onIntersect: onLoadMore ?? NOOP,
+                          isLoading: isLoadingMore,
+                          rootRef: infiniteScrollRootRef,
+                          strings
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            footer !== false && /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-30 shrink-0 overflow-hidden rounded-b-[calc(var(--radius)*2)] bg-white/90 dark:bg-background/60 backdrop-blur-xl", children: [
+              footer ? footer(footerCtx) : /* @__PURE__ */ jsx(DefaultFooter, { ctx: footerCtx, pagination: paginationMode, onChange }),
+              footerExtra && (typeof footerExtra === "function" ? footerExtra(footerCtx) : footerExtra)
+            ] })
+          ]
+        }
+      )
+    ] });
   }
 
   // src/components/data-grid/use-data-source.ts
-  var import_react34 = __toESM(require_react());
+  var import_react36 = __toESM(require_react());
   function useClientDataSource(opts) {
     const { data, columns, sorting, quickSearch, matchRow, pagination, paginationMode } = opts;
     const sortingKey = JSON.stringify(sorting);
-    const processed = (0, import_react34.useMemo)(() => {
+    const processed = (0, import_react36.useMemo)(() => {
       const searched = applyQuickSearch(data, quickSearch, columns, matchRow);
       const comparator = buildRowComparator(sorting, columns);
       const sorted = comparator ? [...searched].sort(comparator) : searched;
@@ -23559,7 +23928,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       const paged = paginationMode === "client" ? paginateRows(sorted, pagination) : sorted;
       return { rows: paged, totalRowCount };
     }, [data, sortingKey, quickSearch, matchRow, pagination.pageIndex, pagination.pageSize, paginationMode, columns]);
-    return (0, import_react34.useMemo)(() => ({
+    return (0, import_react36.useMemo)(() => ({
       rows: processed.rows,
       totalRowCount: processed.totalRowCount,
       isLoading: false,
@@ -23582,19 +23951,19 @@ ${colorConfig.map(([key, itemConfig]) => {
       pagination,
       paginationMode
     } = opts;
-    const [rows, setRows] = (0, import_react34.useState)([]);
-    const [totalRowCount, setTotalRowCount] = (0, import_react34.useState)(void 0);
-    const [isLoading, setIsLoading] = (0, import_react34.useState)(true);
-    const [isRefetching, setIsRefetching] = (0, import_react34.useState)(false);
-    const [isLoadingMore, setIsLoadingMore] = (0, import_react34.useState)(false);
-    const [hasMore, setHasMore] = (0, import_react34.useState)(true);
-    const [error, setError] = (0, import_react34.useState)(null);
-    const cursorRef = (0, import_react34.useRef)(void 0);
-    const abortRef = (0, import_react34.useRef)(null);
-    const pageIndexRef = (0, import_react34.useRef)(0);
-    const hasDataRef = (0, import_react34.useRef)(false);
-    const hasMountedServerPaginationRef = (0, import_react34.useRef)(false);
-    const latestArgsRef = (0, import_react34.useRef)({
+    const [rows, setRows] = (0, import_react36.useState)([]);
+    const [totalRowCount, setTotalRowCount] = (0, import_react36.useState)(void 0);
+    const [isLoading, setIsLoading] = (0, import_react36.useState)(true);
+    const [isRefetching, setIsRefetching] = (0, import_react36.useState)(false);
+    const [isLoadingMore, setIsLoadingMore] = (0, import_react36.useState)(false);
+    const [hasMore, setHasMore] = (0, import_react36.useState)(true);
+    const [error, setError] = (0, import_react36.useState)(null);
+    const cursorRef = (0, import_react36.useRef)(void 0);
+    const abortRef = (0, import_react36.useRef)(null);
+    const pageIndexRef = (0, import_react36.useRef)(0);
+    const hasDataRef = (0, import_react36.useRef)(false);
+    const hasMountedServerPaginationRef = (0, import_react36.useRef)(false);
+    const latestArgsRef = (0, import_react36.useRef)({
       dataSource,
       getRowId,
       sorting,
@@ -23604,7 +23973,7 @@ ${colorConfig.map(([key, itemConfig]) => {
     latestArgsRef.current = { dataSource, getRowId, sorting, quickSearch, pagination };
     const sortingKey = JSON.stringify(sorting);
     const quickSearchKey = quickSearch;
-    const fetchPage = (0, import_react34.useCallback)(
+    const fetchPage = (0, import_react36.useCallback)(
       async (append) => {
         const {
           dataSource: currentDataSource,
@@ -23673,12 +24042,12 @@ ${colorConfig.map(([key, itemConfig]) => {
       },
       []
     );
-    (0, import_react34.useEffect)(() => {
+    (0, import_react36.useEffect)(() => {
       fetchPage(false).catch(() => {
       });
       return () => abortRef.current?.abort();
     }, [fetchPage, dataSource, sortingKey, quickSearchKey, pagination.pageSize]);
-    (0, import_react34.useEffect)(() => {
+    (0, import_react36.useEffect)(() => {
       if (paginationMode !== "server") {
         hasMountedServerPaginationRef.current = false;
         return;
@@ -23690,13 +24059,13 @@ ${colorConfig.map(([key, itemConfig]) => {
       fetchPage(false).catch(() => {
       });
     }, [fetchPage, paginationMode, pagination.pageIndex]);
-    const loadMore = (0, import_react34.useCallback)(() => {
+    const loadMore = (0, import_react36.useCallback)(() => {
       if (!isLoadingMore && hasMore && paginationMode === "infinite") {
         fetchPage(true).catch(() => {
         });
       }
     }, [isLoadingMore, hasMore, paginationMode, fetchPage]);
-    const reload = (0, import_react34.useCallback)(() => {
+    const reload = (0, import_react36.useCallback)(() => {
       fetchPage(false).catch(() => {
       });
     }, [fetchPage]);
@@ -23759,7 +24128,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   }
 
   // src/components/data-grid/use-url-state.ts
-  var import_react35 = __toESM(require_react());
+  var import_react37 = __toESM(require_react());
   function serializeWidths(widths, columns) {
     const parts = [];
     for (const col of columns) {
@@ -23855,10 +24224,10 @@ ${colorConfig.map(([key, itemConfig]) => {
     const hiddenKey = `${prefix}_h`;
     const sortKey = `${prefix}_s`;
     const searchKey = `${prefix}_q`;
-    const columnsRef = (0, import_react35.useRef)(columns);
+    const columnsRef = (0, import_react37.useRef)(columns);
     columnsRef.current = columns;
-    const initialRef = (0, import_react35.useRef)(opts?.initial);
-    const [state, setState] = (0, import_react35.useState)(() => {
+    const initialRef = (0, import_react37.useRef)(opts?.initial);
+    const [state, setState] = (0, import_react37.useState)(() => {
       const base = createDefaultDataGridState(columns);
       const initial = initialRef.current ?? {};
       const baseWithInitial = {
@@ -23877,7 +24246,7 @@ ${colorConfig.map(([key, itemConfig]) => {
         quickSearch: parseQuickSearch(params.get(searchKey), baseWithInitial.quickSearch)
       };
     });
-    (0, import_react35.useEffect)(() => {
+    (0, import_react37.useEffect)(() => {
       if (typeof window === "undefined") return;
       const timer = setTimeout(() => {
         const params = new URLSearchParams(window.location.search);
@@ -23914,7 +24283,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       sortKey,
       searchKey
     ]);
-    (0, import_react35.useEffect)(() => {
+    (0, import_react37.useEffect)(() => {
       if (typeof window === "undefined") return;
       const onPop = () => {
         const params = new URLSearchParams(window.location.search);