@roy-ui/ui 0.0.7 → 0.0.8

package/dist/chunk-HUCK7AM7.js

@@ -0,0 +1,840 @@
+"use client";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-XERZVDIT.js';
+import { TableSearch } from './chunk-KSHKVSNK.js';
+import { TimePicker } from './chunk-75IGGPXL.js';
+import { DateRangePicker, startOfDay, isBetween } from './chunk-SFENGB5N.js';
+import { Pagination } from './chunk-5CIBIH7R.js';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import './DataTable-TQ5OBNZF.css';
+
+function ColumnMenu({
+  columns,
+  layout,
+  onToggle,
+  onReset
+}) {
+  const [open, setOpen] = useState(false);
+  const wrap = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      if (wrap.current && !wrap.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const hiddenCount = layout.hidden.length;
+  return /* @__PURE__ */ jsxs("div", { className: "royui-dt-colmenu", ref: wrap, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "royui-dt-colmenu__trigger",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        children: "Columns"
+      }
+    ),
+    hiddenCount > 0 && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "royui-dt-colmenu__chip",
+        onClick: () => setOpen(true),
+        children: [
+          hiddenCount,
+          " hidden"
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "royui-dt-colmenu__panel", role: "menu", children: [
+      /* @__PURE__ */ jsxs("div", { className: "royui-dt-colmenu__head", children: [
+        /* @__PURE__ */ jsx("span", { className: "royui-dt-colmenu__title", children: "Columns" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "royui-dt-colmenu__reset",
+            onClick: () => {
+              onReset();
+            },
+            children: "Reset"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "royui-dt-colmenu__list", children: columns.map((c) => {
+        const isHidden = layout.hidden.includes(c.key);
+        const disabled = c.hideable === false;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitemcheckbox",
+            "aria-checked": !isHidden,
+            className: [
+              "royui-dt-colmenu__row",
+              isHidden && "royui-dt-colmenu__row--off",
+              disabled && "royui-dt-colmenu__row--locked"
+            ].filter(Boolean).join(" "),
+            onClick: () => !disabled && onToggle(c.key),
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: [
+                    "royui-dt-colmenu__dot",
+                    !isHidden && "royui-dt-colmenu__dot--on"
+                  ].filter(Boolean).join(" "),
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "royui-dt-colmenu__label", children: c.header })
+            ]
+          }
+        ) }, c.key);
+      }) })
+    ] })
+  ] });
+}
+function defaultLayout(columns) {
+  return {
+    order: columns.map((c) => c.key),
+    sizes: columns.reduce((acc, c) => {
+      if (c.defaultWidth != null) acc[c.key] = c.defaultWidth;
+      return acc;
+    }, {}),
+    hidden: columns.filter((c) => c.defaultHidden).map((c) => c.key)
+  };
+}
+function loadLayout(key) {
+  if (!key || typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function saveLayout(key, layout) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(layout));
+  } catch {
+  }
+}
+function useTableLayout(columns, storageKey) {
+  const initial = useMemo(() => {
+    return loadLayout(storageKey) ?? defaultLayout(columns);
+  }, []);
+  const [layout, setLayout] = useState(initial);
+  useEffect(() => {
+    setLayout((prev) => {
+      const known = new Set(columns.map((c) => c.key));
+      const order = prev.order.filter((k) => known.has(k));
+      columns.forEach((c) => {
+        if (!order.includes(c.key)) order.push(c.key);
+      });
+      const sizes = {};
+      Object.entries(prev.sizes).forEach(([k, v]) => {
+        if (known.has(k)) sizes[k] = v;
+      });
+      const hidden = prev.hidden.filter((k) => known.has(k));
+      return { order, sizes, hidden };
+    });
+  }, [columns]);
+  useEffect(() => {
+    saveLayout(storageKey, layout);
+  }, [layout, storageKey]);
+  const orderedColumns = useMemo(() => {
+    const pinnedLeft = columns.filter((c) => c.pinned === "left");
+    const pinnedRight = columns.filter((c) => c.pinned === "right");
+    const pinnedKeys = new Set(
+      [...pinnedLeft, ...pinnedRight].map((c) => c.key)
+    );
+    const rest = layout.order.filter((k) => !pinnedKeys.has(k)).map((k) => columns.find((c) => c.key === k)).filter(Boolean);
+    return [...pinnedLeft, ...rest, ...pinnedRight];
+  }, [columns, layout.order]);
+  const visibleColumns = useMemo(
+    () => orderedColumns.filter((c) => !layout.hidden.includes(c.key)),
+    [orderedColumns, layout.hidden]
+  );
+  const reorder = useCallback((key, toIndex) => {
+    setLayout((prev) => {
+      const order = [...prev.order];
+      const from = order.indexOf(key);
+      if (from === -1 || from === toIndex) return prev;
+      const item = order.splice(from, 1)[0];
+      if (item === void 0) return prev;
+      const insertAt = toIndex > from ? toIndex - 1 : toIndex;
+      order.splice(Math.max(0, Math.min(insertAt, order.length)), 0, item);
+      return { ...prev, order };
+    });
+  }, []);
+  const resize = useCallback((key, px) => {
+    setLayout((prev) => {
+      const sizes = { ...prev.sizes };
+      if (px == null) delete sizes[key];
+      else sizes[key] = Math.max(40, Math.round(px));
+      return { ...prev, sizes };
+    });
+  }, []);
+  const toggleHidden = useCallback((key) => {
+    setLayout((prev) => {
+      const hidden = prev.hidden.includes(key) ? prev.hidden.filter((k) => k !== key) : [...prev.hidden, key];
+      return { ...prev, hidden };
+    });
+  }, []);
+  const reset = useCallback(() => {
+    setLayout(defaultLayout(columns));
+  }, [columns]);
+  return {
+    layout,
+    orderedColumns,
+    visibleColumns,
+    reorder,
+    resize,
+    toggleHidden,
+    reset
+  };
+}
+
+// src/components/data-table/filters.ts
+function defaultSearchPredicate(row, query, columns) {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  return columns.some((c) => {
+    const v = c.accessor(row);
+    if (v == null) return false;
+    const s = v instanceof Date ? v.toLocaleString() : String(v);
+    return s.toLowerCase().includes(q);
+  });
+}
+function applyFilters(rows, columns, filters, cfg) {
+  const searchFn = cfg.searchPredicate ?? defaultSearchPredicate;
+  return rows.filter((row) => {
+    if (filters.search && !searchFn(row, filters.search, columns)) return false;
+    if (cfg.dateColumn && (filters.dateRange.from || filters.dateRange.to)) {
+      const col = columns.find((c) => c.key === cfg.dateColumn);
+      if (col) {
+        const raw = col.accessor(row);
+        const d = raw instanceof Date ? raw : raw ? new Date(raw) : null;
+        if (!d || isNaN(d.getTime())) return false;
+        const day = startOfDay(d);
+        const from = filters.dateRange.from ?? day;
+        const to = filters.dateRange.to ?? filters.dateRange.from ?? day;
+        if (!isBetween(day, startOfDay(from), startOfDay(to))) return false;
+      }
+    }
+    if (cfg.timeColumn && filters.time) {
+      const col = columns.find((c) => c.key === cfg.timeColumn);
+      if (col) {
+        const raw = col.accessor(row);
+        const d = raw instanceof Date ? raw : raw ? new Date(raw) : null;
+        if (!d || isNaN(d.getTime())) return false;
+        const rowMin = d.getHours() * 60 + d.getMinutes();
+        const filterMin = filters.time.hours * 60 + filters.time.minutes;
+        const tol = cfg.timeTolerance ?? 0;
+        if (Math.abs(rowMin - filterMin) > tol) return false;
+      }
+    }
+    return true;
+  });
+}
+function applySort(rows, columns, sort) {
+  if (!sort || !sort.dir) return rows;
+  const col = columns.find((c) => c.key === sort.key);
+  if (!col) return rows;
+  const dirMul = sort.dir === "asc" ? 1 : -1;
+  const getter = col.sortBy ?? col.accessor;
+  return [...rows].sort((a, b) => {
+    const av = getter(a);
+    const bv = getter(b);
+    if (av == null && bv == null) return 0;
+    if (av == null) return 1;
+    if (bv == null) return -1;
+    if (av instanceof Date && bv instanceof Date) {
+      return (av.getTime() - bv.getTime()) * dirMul;
+    }
+    if (typeof av === "number" && typeof bv === "number") {
+      return (av - bv) * dirMul;
+    }
+    return String(av).localeCompare(String(bv)) * dirMul;
+  });
+}
+function paginate(rows, page, pageSize) {
+  const start = (page - 1) * pageSize;
+  return rows.slice(start, start + pageSize);
+}
+
+// src/components/data-table/io.ts
+function csvEscape(v) {
+  if (v == null) return "";
+  const s = typeof v === "string" ? v : v instanceof Date ? v.toISOString() : String(v);
+  if (/[",\n\r]/.test(s)) {
+    return `"${s.replace(/"/g, '""')}"`;
+  }
+  return s;
+}
+function toCsv(rows, cols) {
+  const visible = cols.filter((c) => !c.defaultHidden);
+  const header = visible.map((c) => csvEscape(c.header)).join(",");
+  const body = rows.map(
+    (row) => visible.map((c) => csvEscape(c.accessor(row))).join(",")
+  ).join("\n");
+  return body ? `${header}
+${body}` : header;
+}
+function fromCsv(text) {
+  const rows = [];
+  let cur = [];
+  let field = "";
+  let i = 0;
+  let inQuotes = false;
+  const len = text.length;
+  while (i < len) {
+    const ch = text[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i += 2;
+          continue;
+        }
+        inQuotes = false;
+        i++;
+        continue;
+      }
+      field += ch;
+      i++;
+      continue;
+    }
+    if (ch === '"') {
+      inQuotes = true;
+      i++;
+      continue;
+    }
+    if (ch === ",") {
+      cur.push(field);
+      field = "";
+      i++;
+      continue;
+    }
+    if (ch === "\r") {
+      i++;
+      continue;
+    }
+    if (ch === "\n") {
+      cur.push(field);
+      rows.push(cur);
+      cur = [];
+      field = "";
+      i++;
+      continue;
+    }
+    field += ch;
+    i++;
+  }
+  if (field.length > 0 || cur.length > 0) {
+    cur.push(field);
+    rows.push(cur);
+  }
+  if (rows.length === 0) return [];
+  const head = rows[0] ?? [];
+  const body = rows.slice(1);
+  return body.map((r) => {
+    const obj = {};
+    head.forEach((h, idx) => {
+      obj[h] = r[idx] ?? "";
+    });
+    return obj;
+  });
+}
+function toJson(rows, cols) {
+  const visible = cols.filter((c) => !c.defaultHidden);
+  const out = rows.map((row) => {
+    const obj = {};
+    visible.forEach((c) => {
+      obj[c.key] = c.accessor(row);
+    });
+    return obj;
+  });
+  return JSON.stringify(out, null, 2);
+}
+function fromJson(text) {
+  const parsed = JSON.parse(text);
+  if (!Array.isArray(parsed)) {
+    throw new Error("Expected a JSON array of rows");
+  }
+  return parsed;
+}
+function downloadString(text, filename, mime) {
+  if (typeof window === "undefined") return;
+  const blob = new Blob([text], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function fontStyleFor(spec) {
+  if (!spec) return void 0;
+  if (typeof spec === "string") return { fontFamily: spec };
+  const s = {};
+  if (spec.family) s.fontFamily = spec.family;
+  if (spec.size != null)
+    s.fontSize = typeof spec.size === "number" ? `${spec.size}px` : spec.size;
+  if (spec.weight != null) s.fontWeight = spec.weight;
+  if (spec.letterSpacing) s.letterSpacing = spec.letterSpacing;
+  if (spec.featureSettings) s.fontFeatureSettings = spec.featureSettings;
+  return s;
+}
+function renderCellValue(value, type) {
+  if (value == null) return "";
+  if (value instanceof Date) {
+    if (type === "time") {
+      return value.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+    }
+    if (type === "date") {
+      return value.toLocaleDateString();
+    }
+    return value.toLocaleString();
+  }
+  return String(value);
+}
+function DataTable({
+  data,
+  columns,
+  getRowId,
+  visibleRows = 7,
+  rowHeight = 44,
+  stickyHeader = true,
+  density = "cozy",
+  loading,
+  empty,
+  fitColumns = false,
+  search,
+  dateFilter,
+  timeFilter,
+  pagination,
+  reorderable = true,
+  resizable = true,
+  columnMenu = true,
+  dataIO,
+  headerFont,
+  rowHeaderFont,
+  cellFont,
+  storageKey,
+  className = "",
+  toolbarExtras
+}) {
+  const {
+    layout,
+    orderedColumns,
+    visibleColumns,
+    reorder,
+    resize,
+    toggleHidden,
+    reset
+  } = useTableLayout(columns, storageKey);
+  const [filters, setFilters] = useState({
+    search: "",
+    dateRange: { from: null, to: null },
+    time: null
+  });
+  const [sort, setSort] = useState(null);
+  const pageSize = pagination === false ? Infinity : pagination?.pageSize ?? 25;
+  const [page, setPage] = useState(1);
+  const filtered = useMemo(
+    () => applyFilters(data, columns, filters, {
+      dateColumn: dateFilter?.column,
+      timeColumn: timeFilter?.column,
+      timeTolerance: timeFilter?.toleranceMinutes,
+      searchPredicate: search?.predicate
+    }),
+    [data, columns, filters, dateFilter?.column, timeFilter?.column, timeFilter?.toleranceMinutes, search?.predicate]
+  );
+  const sorted = useMemo(() => applySort(filtered, columns, sort), [filtered, columns, sort]);
+  const pageCount = pagination === false ? 1 : Math.max(1, Math.ceil(sorted.length / pageSize));
+  const currentPage = Math.min(page, pageCount);
+  const pageRows = useMemo(
+    () => pagination === false ? sorted : paginate(sorted, currentPage, pageSize),
+    [pagination, sorted, currentPage, pageSize]
+  );
+  const [dragKey, setDragKey] = useState(null);
+  const [dropIndex, setDropIndex] = useState(null);
+  const onDragStart = (e, key) => {
+    if (!reorderable) return;
+    setDragKey(key);
+    e.dataTransfer.effectAllowed = "move";
+    try {
+      e.dataTransfer.setData("text/plain", key);
+    } catch {
+    }
+  };
+  const onDragOver = (e, idx) => {
+    if (!reorderable || !dragKey) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    const rect = e.currentTarget.getBoundingClientRect();
+    const isRight = e.clientX - rect.left > rect.width / 2;
+    setDropIndex(idx + (isRight ? 1 : 0));
+  };
+  const onDrop = (e) => {
+    if (!reorderable || !dragKey || dropIndex == null) return;
+    e.preventDefault();
+    reorder(dragKey, dropIndex);
+    setDragKey(null);
+    setDropIndex(null);
+  };
+  const onDragEnd = () => {
+    setDragKey(null);
+    setDropIndex(null);
+  };
+  const resizingKey = useRef(null);
+  const resizeStartX = useRef(0);
+  const resizeStartW = useRef(0);
+  const beginResize = (e, key) => {
+    if (!resizable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const th = e.currentTarget.parentElement ?? null;
+    const startW = th ? th.getBoundingClientRect().width : 120;
+    resizingKey.current = key;
+    resizeStartX.current = e.clientX;
+    resizeStartW.current = startW;
+    window.addEventListener("pointermove", onResizeMove);
+    window.addEventListener("pointerup", endResize);
+  };
+  const onResizeMove = (e) => {
+    if (!resizingKey.current) return;
+    const dx = e.clientX - resizeStartX.current;
+    const col = columns.find((c) => c.key === resizingKey.current);
+    const min = col?.minWidth ?? 80;
+    const max = col?.maxWidth ?? 2e3;
+    const next = Math.max(min, Math.min(max, resizeStartW.current + dx));
+    resize(resizingKey.current, next);
+  };
+  const endResize = () => {
+    resizingKey.current = null;
+    window.removeEventListener("pointermove", onResizeMove);
+    window.removeEventListener("pointerup", endResize);
+  };
+  const doubleClickReset = (key) => resize(key, null);
+  const cycleSort = useCallback((key) => {
+    setSort((prev) => {
+      if (!prev || prev.key !== key) return { key, dir: "asc" };
+      if (prev.dir === "asc") return { key, dir: "desc" };
+      return null;
+    });
+  }, []);
+  const fileInput = useRef(null);
+  const [ioFlash, setIoFlash] = useState(null);
+  const flashTimer = useRef(null);
+  const flash = (text, ms = 1400) => {
+    if (flashTimer.current) clearTimeout(flashTimer.current);
+    setIoFlash(text);
+    flashTimer.current = setTimeout(() => setIoFlash(null), ms);
+  };
+  const exportRows = (format) => {
+    if (!dataIO?.export) return;
+    const scope = dataIO.export.scope ?? "filtered";
+    let rows;
+    if (scope === "all") rows = data;
+    else if (scope === "page") rows = pageRows;
+    else rows = sorted;
+    const cols = visibleColumns;
+    const text = dataIO.export.serialize ? dataIO.export.serialize(rows, cols, format) : format === "csv" ? toCsv(rows, cols) : toJson(rows, cols);
+    const baseName = typeof dataIO.export.filename === "function" ? dataIO.export.filename() : dataIO.export.filename ?? "table-export";
+    const filename = `${baseName}.${format}`;
+    const mime = format === "csv" ? "text/csv;charset=utf-8" : "application/json";
+    downloadString(text, filename, mime);
+    flash("Exported");
+  };
+  const onPickFile = async (file) => {
+    if (!dataIO?.import) return;
+    const text = await file.text();
+    try {
+      const parsed = dataIO.import.parse ? await dataIO.import.parse(text, file) : file.name.endsWith(".json") ? fromJson(text) : fromCsv(text);
+      dataIO.import.onImport(parsed, {
+        mode: dataIO.import.mode ?? "replace",
+        file
+      });
+      flash(`Imported ${parsed.length} ${parsed.length === 1 ? "row" : "rows"}`);
+    } catch (err) {
+      dataIO.import.onError?.(err, file);
+      flash("Couldn't read file", 2e3);
+    }
+  };
+  const showToolbar = search?.enabled || !!dateFilter || !!timeFilter || columnMenu || !!dataIO?.export?.enabled || !!dataIO?.import?.enabled || !!toolbarExtras;
+  const exportFormats = dataIO?.export?.formats ?? ["csv", "json"];
+  const [exportMenuOpen, setExportMenuOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: ["royui-dt", className].filter(Boolean).join(" "), children: [
+    showToolbar && /* @__PURE__ */ jsxs("div", { className: "royui-dt__toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "royui-dt__toolbar-left", children: [
+        search?.enabled && /* @__PURE__ */ jsx(
+          TableSearch,
+          {
+            value: filters.search,
+            onChange: (v) => {
+              setFilters((f) => ({ ...f, search: v }));
+              setPage(1);
+            },
+            placeholder: search.placeholder,
+            debounceMs: search.debounceMs
+          }
+        ),
+        dateFilter && /* @__PURE__ */ jsx(
+          DateRangePicker,
+          {
+            value: filters.dateRange,
+            onChange: (r) => {
+              setFilters((f) => ({ ...f, dateRange: r }));
+              setPage(1);
+            },
+            monthsVisible: dateFilter.monthsVisible ?? 2,
+            placeholder: dateFilter.placeholder ?? "Date range"
+          }
+        ),
+        timeFilter && /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            value: filters.time,
+            onChange: (t) => {
+              setFilters((f) => ({ ...f, time: t }));
+              setPage(1);
+            },
+            variant: timeFilter.variant ?? "analog",
+            hourCycle: timeFilter.hourCycle ?? 24,
+            placeholder: timeFilter.placeholder ?? "Time"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "royui-dt__toolbar-right", children: [
+        toolbarExtras,
+        columnMenu && /* @__PURE__ */ jsx(
+          ColumnMenu,
+          {
+            columns: orderedColumns,
+            layout,
+            onToggle: toggleHidden,
+            onReset: reset
+          }
+        ),
+        (dataIO?.export?.enabled || dataIO?.import?.enabled) && /* @__PURE__ */ jsx("span", { className: "royui-dt__sep", "aria-hidden": true, children: "\xB7" }),
+        dataIO?.export?.enabled && /* @__PURE__ */ jsxs("div", { className: "royui-dt-io", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "royui-dt-io__btn",
+              onClick: () => {
+                const only = exportFormats[0];
+                if (exportFormats.length === 1 && only) {
+                  exportRows(only);
+                } else {
+                  setExportMenuOpen((o) => !o);
+                }
+              },
+              children: ioFlash && ioFlash.startsWith("Export") ? ioFlash : "Export"
+            }
+          ),
+          exportMenuOpen && exportFormats.length > 1 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "royui-dt-io__menu",
+              onMouseLeave: () => setExportMenuOpen(false),
+              children: exportFormats.map((f) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "royui-dt-io__menu-item",
+                  onClick: () => {
+                    exportRows(f);
+                    setExportMenuOpen(false);
+                  },
+                  children: f.toUpperCase()
+                },
+                f
+              ))
+            }
+          )
+        ] }),
+        dataIO?.import?.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "royui-dt-io__btn",
+              onClick: () => fileInput.current?.click(),
+              children: ioFlash && (ioFlash.startsWith("Import") || ioFlash.startsWith("Couldn't")) ? ioFlash : "Import"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInput,
+              type: "file",
+              accept: dataIO.import.accept ?? ".csv,.json",
+              style: { display: "none" },
+              onChange: (e) => {
+                const f = e.target.files?.[0];
+                if (f) onPickFile(f);
+                e.target.value = "";
+              }
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Table,
+      {
+        visibleRows,
+        rowHeight,
+        stickyHeader,
+        density,
+        loading,
+        empty,
+        isEmpty: pageRows.length === 0,
+        fitColumns,
+        headerFont,
+        rowHeaderFont,
+        cellFont,
+        children: [
+          /* @__PURE__ */ jsx("colgroup", { children: visibleColumns.map((c) => {
+            const w = fitColumns ? void 0 : layout.sizes[c.key];
+            return /* @__PURE__ */ jsx(
+              "col",
+              {
+                style: w ? { width: w } : void 0,
+                className: dragKey === c.key ? "royui-dt__col--dragging" : void 0
+              },
+              c.key
+            );
+          }) }),
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            visibleColumns.map((c, idx) => {
+              const isDragging = dragKey === c.key;
+              const showDropBefore = dropIndex === idx;
+              const sortDir = sort && sort.key === c.key && sort.dir ? sort.dir : null;
+              const canReorder = reorderable && c.reorderable !== false && !c.pinned;
+              const canResize = resizable && c.resizable !== false;
+              return /* @__PURE__ */ jsxs(
+                TableHead,
+                {
+                  align: c.align ?? (c.type === "number" ? "right" : "left"),
+                  className: [
+                    "royui-dt__th",
+                    canReorder && "royui-dt__th--reorderable",
+                    canResize && "royui-dt__th--resizable",
+                    isDragging && "royui-dt__th--dragging",
+                    showDropBefore && "royui-dt__th--drop-before"
+                  ].filter(Boolean).join(" "),
+                  draggable: canReorder,
+                  onDragStart: (e) => onDragStart(e, c.key),
+                  onDragOver: (e) => onDragOver(e, idx),
+                  onDrop,
+                  onDragEnd,
+                  title: canReorder && canResize ? "Drag to reorder \xB7 drag the right edge to resize" : canReorder ? "Drag to reorder" : canResize ? "Drag the right edge to resize" : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "royui-dt__th-inner",
+                        onClick: () => cycleSort(c.key),
+                        role: "button",
+                        tabIndex: 0,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            cycleSort(c.key);
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "royui-dt__th-label", children: c.header }),
+                          sortDir && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: `royui-dt__sort-indicator royui-dt__sort-indicator--${sortDir}`,
+                              "aria-hidden": true
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    canResize && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "royui-dt__resize",
+                        onPointerDown: (e) => beginResize(e, c.key),
+                        onDoubleClick: () => doubleClickReset(c.key),
+                        "aria-hidden": true,
+                        children: /* @__PURE__ */ jsx("span", { className: "royui-dt__resize-bar", "aria-hidden": true })
+                      }
+                    )
+                  ]
+                },
+                c.key
+              );
+            }),
+            dropIndex === visibleColumns.length && /* @__PURE__ */ jsx(TableHead, { className: "royui-dt__th--drop-end", "aria-hidden": true })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: pageRows.map((row, i) => {
+            const id = getRowId ? getRowId(row, i) : row?.["id"] != null ? String(row["id"]) : i;
+            return /* @__PURE__ */ jsx(TableRow, { children: visibleColumns.map((c) => {
+              const value = c.accessor(row);
+              const display = c.cell ? c.cell(value, row) : renderCellValue(value, c.type);
+              const cellStyle = fontStyleFor(c.font);
+              const isNum = c.type === "number";
+              return /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  isRowHeader: c.isRowHeader,
+                  align: c.align ?? (isNum ? "right" : "left"),
+                  className: isNum ? "royui-table__td--num" : void 0,
+                  style: cellStyle,
+                  children: display
+                },
+                c.key
+              );
+            }) }, id);
+          }) })
+        ]
+      }
+    ),
+    pagination !== false && pageCount > 1 && /* @__PURE__ */ jsx("div", { className: "royui-dt__pagination", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        page: currentPage,
+        pageCount,
+        onPageChange: setPage,
+        siblingCount: pagination?.siblingCount ?? 1,
+        showSummary: pagination?.showSummary ?? true,
+        summaryRender: (p, pc) => `${(p - 1) * pageSize + 1}\u2013${Math.min(p * pageSize, sorted.length)} of ${sorted.length}`
+      }
+    ) })
+  ] });
+}
+
+export { ColumnMenu, DataTable, downloadString, fromCsv, fromJson, toCsv, toJson };
+//# sourceMappingURL=chunk-HUCK7AM7.js.map
+//# sourceMappingURL=chunk-HUCK7AM7.js.map