@adapttable/mantine 0.1.0

package/dist/index.js

@@ -0,0 +1,1951 @@
+import { usePrefersReducedMotion, pageSizeOptions, useTableChrome, ACTIONS_COLUMN_KEY, useChromeBodyData, useFilterTriggerToggle, useChromeScrollReset, filterLabel, useTableData, resolveLabels, isDeclarativeFilters, resolveDisabledReason, rowClickProps, tableRenderModel, headerGroupRow, useHorizontalOverflow, PIN_Z, edgePinStyle, tableMinWidth, useSavedViews, useBulkActionRunner, RANGE_SUFFIXES, readRangeWidget, RANGE_OP_LABEL_KEYS, RANGE_OPS, useFilterOptions, runRowAction, pinnedCellStyle, columnResizeHandleProps, pinnedColumnWidth, useColumnDragState, columnMenuRows, GripIcon, columnReorderKeyProps, nextPinSide, pinActionLabel, EyeIcon, PinIcon, writeRangeWidget } from '@adapttable/core';
+export { createHistoryAdapter, createMemoryAdapter, defaultConfirm, defaultLabels, deriveSortByOptions, getHistoryAdapter, useBackendData, useDataTable, useFrontendData, useSavedViews, useTableUrlState } from '@adapttable/core';
+import { Group, Pill, Anchor, Stack, Text, Alert, Button, Select, Pagination, Menu, Box, ActionIcon, TextInput, Table, Skeleton, VisuallyHidden, Paper, Progress, Card, Checkbox, Tooltip, Badge, Drawer, Input, Loader, NativeSelect, Popover, NumberInput } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
+import { useEffect, useState, useRef, useMemo, useCallback, memo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/DataTable.tsx
+function useMountStagger(ref, deps, options) {
+  const reduced = usePrefersReducedMotion();
+  const { enabled, step = 40, duration = 320 } = options;
+  const depsKey = deps.map(String).join("|");
+  useEffect(() => {
+    if (!enabled || reduced) return;
+    const root = ref.current;
+    if (!root) return;
+    const items = root.querySelectorAll("[data-stagger]");
+    items.forEach((el, index) => {
+      if (typeof el.animate !== "function") return;
+      el.animate(
+        [
+          { opacity: 0, transform: "translateY(8px)" },
+          { opacity: 1, transform: "translateY(0)" }
+        ],
+        {
+          duration,
+          delay: index * step,
+          easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+          fill: "both"
+        }
+      );
+    });
+  }, [enabled, reduced, step, duration, ref, depsKey]);
+}
+function ActiveFilterChips({
+  chips,
+  onClearAll,
+  label,
+  clearAllLabel
+}) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      gap: 6,
+      "aria-label": label,
+      component: "ul",
+      style: { listStyle: "none", padding: 0, margin: 0 },
+      children: [
+        chips.map((chip) => /* @__PURE__ */ jsx(
+          Pill,
+          {
+            component: "li",
+            withRemoveButton: true,
+            onRemove: chip.onRemove,
+            removeButtonProps: {
+              "aria-label": `${clearAllLabel}: ${chip.label}`
+            },
+            children: chip.label
+          },
+          chip.key
+        )),
+        onClearAll && /* @__PURE__ */ jsx(
+          Anchor,
+          {
+            component: "button",
+            type: "button",
+            fz: "xs",
+            fw: 600,
+            onClick: onClearAll,
+            children: clearAllLabel
+          }
+        )
+      ]
+    }
+  );
+}
+var asText = (value) => value == null ? "" : String(value);
+var asList = (value) => {
+  if (value == null || value === "") return [];
+  return Array.isArray(value) ? value : [String(value)];
+};
+var asOp = (value) => RANGE_OPS.find((op) => op === value);
+var RANGE_FLAVOUR = { numberRange: "number", dateRange: "date" };
+function RangeField({
+  def,
+  source,
+  kind,
+  labels
+}) {
+  const label = filterLabel(def);
+  const lowKey = def.key + RANGE_SUFFIXES[kind].start;
+  const highKey = def.key + RANGE_SUFFIXES[kind].end;
+  const derived = readRangeWidget(source.extra, lowKey, highKey);
+  const [chosen, setChosen] = useState(null);
+  const op = chosen ?? derived.op ?? null;
+  const low = asText(source.extra[lowKey]);
+  const high = asText(source.extra[highKey]);
+  const single = op === "lte" ? high : low;
+  const write = (nextOp, a, b) => source.setExtras(writeRangeWidget(nextOp, a, b, lowKey, highKey));
+  const handleOp = (value) => {
+    const next = asOp(value);
+    setChosen(next ?? null);
+    write(next, single, "");
+  };
+  const flavour = RANGE_FLAVOUR[kind];
+  const opLabelKeys = RANGE_OP_LABEL_KEYS[flavour];
+  const data = RANGE_OPS.map((value) => ({
+    value,
+    label: labels[opLabelKeys[value]]
+  }));
+  const valueInput = (text, value, commit) => flavour === "number" ? /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      size: "sm",
+      hideControls: true,
+      style: { flex: "1 1 6rem", minWidth: "6rem" },
+      "aria-label": `${label} ${text}`,
+      placeholder: text,
+      value,
+      onChange: (next) => commit(String(next))
+    }
+  ) : /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      type: "date",
+      size: "sm",
+      style: { flex: "1 1 8.5rem", minWidth: "8.5rem" },
+      "aria-label": `${label} ${text}`,
+      placeholder: text,
+      value,
+      onChange: (e) => commit(e.currentTarget.value)
+    }
+  );
+  let values = null;
+  if (op === "between") {
+    values = /* @__PURE__ */ jsxs(Fragment, { children: [
+      valueInput(labels.from, low, (next) => write("between", next, high)),
+      valueInput(labels.to, high, (next) => write("between", low, next))
+    ] });
+  } else if (op) {
+    values = valueInput(labels.value, single, (next) => write(op, next, ""));
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Input.Label, { size: "sm", children: label }),
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "flex-start", children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "sm",
+          clearable: true,
+          style: { flex: "0 0 8.5rem", width: "8.5rem" },
+          "aria-label": `${label} ${labels.operator}`,
+          placeholder: labels.operator,
+          data,
+          value: op,
+          onChange: handleOp,
+          comboboxProps: { withinPortal: false }
+        }
+      ),
+      values
+    ] })
+  ] });
+}
+function SelectControl({
+  def,
+  source
+}) {
+  const label = filterLabel(def);
+  const { options, loading } = useFilterOptions(def);
+  const data = loading ? [{ value: "", label: "\u2026", disabled: true }] : [{ value: "", label: "All" }, ...options];
+  return /* @__PURE__ */ jsx(
+    NativeSelect,
+    {
+      size: "sm",
+      label,
+      data,
+      value: asText(source.extra[def.key]),
+      onChange: (e) => source.setExtra(def.key, e.currentTarget.value)
+    }
+  );
+}
+function MultiSelectControl({
+  def,
+  source
+}) {
+  const label = filterLabel(def);
+  const { options, loading } = useFilterOptions(def);
+  return /* @__PURE__ */ jsx(
+    Checkbox.Group,
+    {
+      label,
+      value: asList(source.extra[def.key]),
+      onChange: (values) => source.setExtra(def.key, values),
+      children: /* @__PURE__ */ jsx(Group, { gap: "sm", mt: 4, children: loading ? /* @__PURE__ */ jsx(Loader, { size: "xs" }) : options.map((option) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "sm",
+          value: option.value,
+          label: option.label
+        },
+        option.value
+      )) })
+    }
+  );
+}
+function FilterControl({
+  def,
+  source,
+  labels
+}) {
+  switch (def.type) {
+    case "text":
+      return /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          size: "sm",
+          label: filterLabel(def),
+          placeholder: def.placeholder,
+          value: asText(source.extra[def.key]),
+          onChange: (e) => source.setExtra(def.key, e.currentTarget.value)
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsx(SelectControl, { def, source });
+    case "multiSelect":
+      return /* @__PURE__ */ jsx(MultiSelectControl, { def, source });
+    case "dateRange":
+    case "numberRange":
+      return /* @__PURE__ */ jsx(RangeField, { def, source, kind: def.type, labels });
+  }
+}
+function AutoFilterForm({
+  defs,
+  source,
+  labels
+}) {
+  return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: defs.map((def) => /* @__PURE__ */ jsx(
+    FilterControl,
+    {
+      def,
+      source,
+      labels
+    },
+    def.key
+  )) });
+}
+function BulkActionBar({
+  selection,
+  total,
+  bulkActions,
+  confirm,
+  labels
+}) {
+  const { selectedIds, selectedCount, clear, allMatching } = selection;
+  const { pending, run } = useBulkActionRunner({
+    confirm,
+    cancelLabel: labels.cancel,
+    onComplete: clear
+  });
+  if (selectedCount === 0) return null;
+  const ids = [...selectedIds];
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "wrap", gap: "sm", children: [
+      /* @__PURE__ */ jsx(Text, { fz: "sm", children: labels.selectedCount(selectedCount) }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "subtle",
+            onClick: clear,
+            disabled: pending !== null,
+            children: labels.clearAll
+          }
+        ),
+        bulkActions.map((action) => /* @__PURE__ */ jsx(
+          BulkButton,
+          {
+            action,
+            ids,
+            pending,
+            onRun: (a) => {
+              if (allMatching) run(a, ids, { allMatching: true, total });
+              else run(a, ids);
+            }
+          },
+          action.key
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScopeBanner, { selection, total, labels })
+  ] });
+}
+function ScopeBanner({
+  selection,
+  total,
+  labels
+}) {
+  if (selection.headerState !== "all" || total <= selection.visibleIds.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Group, { role: "status", gap: "xs", wrap: "wrap", children: selection.allMatching ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { fz: "sm", children: labels.allMatchingSelected(total) }),
+    /* @__PURE__ */ jsx(Button, { size: "xs", variant: "subtle", onClick: selection.clear, children: labels.clearAll })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { fz: "sm", children: labels.pageSelected(selection.selectedCount) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "xs",
+        variant: "light",
+        onClick: selection.selectAllMatching,
+        children: labels.selectAllMatching(total)
+      }
+    )
+  ] }) });
+}
+function BulkButton({
+  action,
+  ids,
+  pending,
+  onRun
+}) {
+  const reason = resolveDisabledReason(action.disabledReason?.(ids));
+  const ineligible = reason !== void 0;
+  const button = /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "xs",
+      color: action.color,
+      leftSection: action.icon,
+      onClick: () => onRun(action),
+      loading: pending === action.key,
+      disabled: ineligible || pending !== null && pending !== action.key,
+      children: action.label
+    }
+  );
+  if (reason !== void 0) {
+    return /* @__PURE__ */ jsx(Tooltip, { label: reason, withArrow: true, openDelay: 150, children: /* @__PURE__ */ jsx("div", { children: button }) });
+  }
+  return button;
+}
+function RowVisibility({
+  hidden,
+  name,
+  labels,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        variant: hidden ? "subtle" : "light",
+        color: hidden ? "gray" : "blue",
+        size: "sm",
+        "aria-label": `${hidden ? labels.showColumn : labels.hideColumn}: ${name}`,
+        "aria-pressed": !hidden,
+        onClick: onToggle,
+        children: /* @__PURE__ */ jsx(EyeIcon, { off: hidden })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: "sm",
+        style: { flex: 1 },
+        c: hidden ? "dimmed" : void 0,
+        td: hidden ? "line-through" : void 0,
+        children: name
+      }
+    )
+  ] });
+}
+function PinToggle({
+  pinned,
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      variant: pinned ? "filled" : "subtle",
+      color: pinned ? "blue" : "gray",
+      size: "sm",
+      "aria-label": label,
+      onClick,
+      children: /* @__PURE__ */ jsx(PinIcon, {})
+    }
+  );
+}
+function ActionsRow({
+  layout,
+  labels
+}) {
+  const hidden = layout.isHidden(ACTIONS_COLUMN_KEY);
+  const pinned = layout.state.pinned[ACTIONS_COLUMN_KEY] === "right";
+  return /* @__PURE__ */ jsxs(Group, { justify: "flex-start", wrap: "nowrap", gap: 6, px: 4, py: 2, children: [
+    /* @__PURE__ */ jsx(Box, { w: 22 }),
+    /* @__PURE__ */ jsx(
+      RowVisibility,
+      {
+        hidden,
+        name: labels.actions,
+        labels,
+        onToggle: () => layout.toggleVisible(ACTIONS_COLUMN_KEY)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PinToggle,
+      {
+        pinned,
+        label: `${pinned ? labels.unpin : labels.pinRight}: ${labels.actions}`,
+        onClick: () => layout.setPinned(ACTIONS_COLUMN_KEY, pinned ? void 0 : "right")
+      }
+    )
+  ] });
+}
+function ColumnMenu({
+  allColumns,
+  layout,
+  labels,
+  hasRowActions = false
+}) {
+  const drag = useColumnDragState();
+  return /* @__PURE__ */ jsxs(Menu, { closeOnItemClick: false, position: "bottom-end", withinPortal: true, children: [
+    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", children: labels.columns }) }),
+    /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsxs(Box, { p: 4, miw: 250, children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", px: 4, pb: 6, children: labels.columns }),
+      columnMenuRows(allColumns, layout).map((r) => {
+        const indicator = drag.rowAttrs(r.key, r.index);
+        const edge = indicator["data-drop"];
+        const edgeOffset = edge === "before" ? "2px" : "-2px";
+        return /* @__PURE__ */ jsxs(
+          Group,
+          {
+            justify: "flex-start",
+            wrap: "nowrap",
+            gap: 6,
+            px: 4,
+            py: 2,
+            style: {
+              cursor: "grab",
+              opacity: "data-dragging" in indicator ? 0.4 : void 0,
+              boxShadow: edge ? `inset 0 ${edgeOffset} 0 0 var(--mantine-primary-color-filled)` : void 0
+            },
+            ...drag.rowDragProps(r.key, r.index),
+            ...drag.dropProps(r.index, layout.move),
+            ...indicator,
+            children: [
+              /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  variant: "subtle",
+                  color: "gray",
+                  size: "sm",
+                  style: { cursor: "grab" },
+                  ...columnReorderKeyProps(
+                    r.key,
+                    r.index,
+                    layout.move,
+                    `${labels.moveLeft} / ${labels.moveRight}: ${r.name}`
+                  ),
+                  children: /* @__PURE__ */ jsx(GripIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RowVisibility,
+                {
+                  hidden: r.hidden,
+                  name: r.name,
+                  labels,
+                  onToggle: () => layout.toggleVisible(r.key)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PinToggle,
+                {
+                  pinned: r.pinned !== void 0,
+                  label: `${pinActionLabel(r.pinned, labels)}: ${r.name}`,
+                  onClick: () => layout.setPinned(r.key, nextPinSide(r.pinned))
+                }
+              )
+            ]
+          },
+          r.key
+        );
+      }),
+      hasRowActions && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Menu.Divider, {}),
+        /* @__PURE__ */ jsx(ActionsRow, { layout, labels })
+      ] }),
+      /* @__PURE__ */ jsx(Menu.Divider, {}),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "subtle",
+          size: "xs",
+          fullWidth: true,
+          justify: "flex-start",
+          onClick: () => layout.reset(),
+          children: labels.resetColumns
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/density.ts
+var DENSITY_SPACING = {
+  comfortable: { verticalSpacing: "sm", horizontalSpacing: "md" },
+  compact: { verticalSpacing: 4, horizontalSpacing: "sm" }
+};
+function Svg({
+  size = 16,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      style,
+      "aria-hidden": "true",
+      focusable: "false",
+      children
+    }
+  );
+}
+var SearchIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+] });
+var ChevronUpIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m6 15 6-6 6 6" }) });
+var ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+var ChevronRightIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" }) });
+var SelectorIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m8 9 4-4 4 4M8 15l4 4 4-4" }) });
+var CloseIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+var FiltersIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M7 12h10M10 18h4" }) });
+var AlertIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })
+] });
+var RefreshIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-3-6.7L21 8" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
+] });
+var InboxIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1Z" })
+] });
+function ExpandToggle({
+  expanded,
+  expandLabel,
+  collapseLabel,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      variant: "subtle",
+      color: "gray",
+      size: "sm",
+      "aria-expanded": expanded,
+      "aria-label": expanded ? collapseLabel : expandLabel,
+      onClick: onToggle,
+      children: /* @__PURE__ */ jsx(
+        ChevronRightIcon,
+        {
+          size: 14,
+          style: {
+            transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+            transition: "transform 150ms ease"
+          }
+        }
+      )
+    }
+  );
+}
+var RESIZE_HANDLE_STYLE = {
+  position: "absolute",
+  insetInlineEnd: 0,
+  top: 0,
+  height: "100%",
+  width: 8,
+  cursor: "col-resize",
+  touchAction: "none",
+  userSelect: "none"
+};
+function SortIcon({
+  active,
+  dir
+}) {
+  if (!active) return /* @__PURE__ */ jsx(SelectorIcon, { size: 12 });
+  return dir === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { size: 12 }) : /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12 });
+}
+function HeaderCell({
+  table,
+  column,
+  stickyStyle,
+  resizeHandle
+}) {
+  const cellProps = table.getHeaderCellProps(column);
+  const headerStyle = {
+    ...cellProps.style,
+    ...stickyStyle
+  };
+  if (!column.sortable) {
+    return /* @__PURE__ */ jsxs(Table.Th, { ...cellProps, style: headerStyle, children: [
+      column.header,
+      resizeHandle
+    ] });
+  }
+  const buttonProps = table.getSortButtonProps(column);
+  const sortIndex = buttonProps["data-sort-index"];
+  const level = table.source.sortLevels.find((l) => l.key === column.key);
+  const active = level !== void 0 || table.sortBy === column.key;
+  return /* @__PURE__ */ jsxs(Table.Th, { ...cellProps, style: headerStyle, children: [
+    /* @__PURE__ */ jsxs(
+      Group,
+      {
+        component: "button",
+        gap: 6,
+        wrap: "nowrap",
+        display: "inline-flex",
+        style: {
+          background: "none",
+          border: 0,
+          cursor: "pointer",
+          font: "inherit",
+          padding: 0,
+          color: active ? "var(--mantine-primary-color-filled)" : "inherit"
+        },
+        ...buttonProps,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: column.header }),
+          /* @__PURE__ */ jsx(SortIcon, { active, dir: level?.dir ?? table.sortDir }),
+          typeof sortIndex === "number" && /* @__PURE__ */ jsx(Badge, { component: "span", size: "xs", variant: "light", children: sortIndex })
+        ]
+      }
+    ),
+    resizeHandle
+  ] });
+}
+function RowActions({
+  row,
+  actions,
+  confirm,
+  cancelLabel
+}) {
+  return /* @__PURE__ */ jsx(Group, { gap: 4, justify: "flex-end", wrap: "nowrap", children: actions.map((action) => {
+    if (action.isHidden?.(row)) return null;
+    const reason = resolveDisabledReason(action.disabledReason?.(row));
+    const disabled = reason !== void 0 || (action.isDisabled?.(row) ?? false);
+    const handleClick = disabled ? void 0 : (e) => {
+      e.stopPropagation();
+      runRowAction(action, row, confirm, cancelLabel);
+    };
+    return action.icon ? /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        label: reason ?? action.label,
+        withArrow: true,
+        openDelay: 200,
+        children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "subtle",
+            color: action.color,
+            size: "sm",
+            disabled,
+            "aria-label": action.label,
+            onClick: handleClick,
+            children: action.icon
+          }
+        )
+      },
+      action.key
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "subtle",
+        color: action.color,
+        size: "compact-sm",
+        disabled,
+        onClick: handleClick,
+        children: action.label
+      },
+      action.key
+    );
+  }) });
+}
+var COMPARED_ROW_PROPS = [
+  "row",
+  "index",
+  "id",
+  "columns",
+  "getCellProps",
+  "selected",
+  "selectLabel",
+  "onToggleSelect",
+  "expanded",
+  "expandLabel",
+  "collapseLabel",
+  "onToggleExpand",
+  "renderRowDetail",
+  "columnSpan",
+  "rowActions",
+  "confirm",
+  "cancelLabel",
+  "onRowClick",
+  "prefetch",
+  "className",
+  "measureElement",
+  "pinSignature"
+];
+function desktopRowPropsEqual(prev, next) {
+  return COMPARED_ROW_PROPS.every((key) => Object.is(prev[key], next[key]));
+}
+function leadingPinStyle(active, inset, zIndex, background) {
+  if (!active) return void 0;
+  const style = pinnedCellStyle({ side: "left", inset }, zIndex);
+  return background ? { ...style, background } : style;
+}
+function pinLayoutSignature(columns, pinOffset, hasLeftPin, actionsEdgePinned) {
+  const perColumn = columns.map((column) => {
+    const pin = pinOffset?.(column.key);
+    return pin ? `${column.key}:${pin.side}${pin.inset}` : column.key;
+  });
+  return `${perColumn.join("|")}|${String(hasLeftPin)}|${String(actionsEdgePinned)}`;
+}
+function DesktopRowBase({
+  row,
+  index,
+  id,
+  columns,
+  getCellProps,
+  selected,
+  selectLabel,
+  onToggleSelect,
+  expanded,
+  expandLabel,
+  collapseLabel,
+  onToggleExpand,
+  renderRowDetail,
+  columnSpan,
+  rowActions,
+  confirm,
+  cancelLabel,
+  onRowClick,
+  prefetch,
+  className,
+  measureElement,
+  pinStyleFor,
+  selectionCellStyle,
+  expansionCellStyle,
+  actionsCellStyle
+}) {
+  const showActions = (rowActions?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Table.Tr,
+      {
+        role: "row",
+        "data-index": index,
+        "aria-selected": selected,
+        ...rowClickProps(row, onRowClick),
+        className,
+        ref: measureElement,
+        "data-stagger": "",
+        onMouseEnter: prefetch ? () => prefetch(row) : void 0,
+        children: [
+          expanded !== void 0 && /* @__PURE__ */ jsx(Table.Td, { ta: "center", style: expansionCellStyle, children: /* @__PURE__ */ jsx(
+            ExpandToggle,
+            {
+              expanded,
+              expandLabel,
+              collapseLabel,
+              onToggle: () => onToggleExpand(id)
+            }
+          ) }),
+          selected !== void 0 && /* @__PURE__ */ jsx(Table.Td, { ta: "center", style: selectionCellStyle, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              "aria-label": selectLabel,
+              checked: selected,
+              onChange: () => onToggleSelect(id)
+            }
+          ) }),
+          columns.map((column) => /* @__PURE__ */ jsx(
+            Table.Td,
+            {
+              ...getCellProps(column),
+              style: pinStyleFor(column.key),
+              children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, { row, rowIndex: index }) : column.accessor?.(row)
+            },
+            column.key
+          )),
+          showActions && /* @__PURE__ */ jsx(Table.Td, { ta: "end", style: actionsCellStyle, children: /* @__PURE__ */ jsx(
+            RowActions,
+            {
+              row,
+              actions: rowActions,
+              confirm,
+              cancelLabel
+            }
+          ) })
+        ]
+      }
+    ),
+    expanded === true && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnSpan, children: renderRowDetail(row) }) })
+  ] });
+}
+function DesktopTable({
+  table,
+  rows,
+  rowActions,
+  confirm,
+  prefetch,
+  onRowClick,
+  rowClassName,
+  renderRowDetail,
+  summaryRow,
+  expansion,
+  getRowId,
+  bodyRef,
+  className,
+  rowEntries,
+  paddingTop = 0,
+  paddingBottom = 0,
+  measureElement,
+  stickyHeaderOffset = 0,
+  stickyHeader = false,
+  pinOffset,
+  maxHeight,
+  virtualScrollRef,
+  setWidth,
+  columnWidths,
+  resizeLabel = "Resize column",
+  actionsPinned = false,
+  density = "comfortable"
+}) {
+  const { columns, selection, labels, showActions, entries, columnSpan } = tableRenderModel({
+    table,
+    rows,
+    rowActions,
+    getRowId,
+    rowEntries,
+    renderRowDetail,
+    expansion
+  });
+  const expandable = expansion !== void 0;
+  const groupCells = headerGroupRow(columns);
+  const summaryCells = summaryRow?.(rows);
+  const hasRightPin = table.columns.some(
+    (c) => pinOffset?.(c.key)?.side === "right"
+  );
+  const actionsEdgePinned = showActions && (hasRightPin || actionsPinned);
+  const hasPinned = table.columns.some((c) => pinOffset?.(c.key) != null) || actionsEdgePinned;
+  const { ref: wrapperRef, overflowing } = useHorizontalOverflow();
+  const inScrollBox = maxHeight != null || hasPinned || overflowing;
+  const headerCellStyle = stickyHeader ? {
+    position: "sticky",
+    top: inScrollBox ? 0 : stickyHeaderOffset,
+    zIndex: PIN_Z.header,
+    background: "var(--mantine-color-body)",
+    boxShadow: "0 1px 0 var(--mantine-color-default-border)"
+  } : { background: "var(--mantine-color-body)" };
+  const expansionWidth = 36;
+  const selectionWidth = 40;
+  const actionsWidth = 120;
+  const expansionLead = expandable ? expansionWidth : 0;
+  const leads = {
+    left: expansionLead + (selection ? selectionWidth : 0),
+    right: showActions ? actionsWidth : 0
+  };
+  const hasLeftPin = table.columns.some(
+    (c) => pinOffset?.(c.key)?.side === "left"
+  );
+  const pinBg = "var(--mantine-color-body)";
+  const headerStyleFor = (column) => {
+    const key = column.key;
+    const pin = pinnedCellStyle(pinOffset?.(key), PIN_Z.headerPinned, leads);
+    const merged = {
+      ...headerCellStyle,
+      ...pin,
+      // A pinned column renders at the same width its sticky inset assumed,
+      // so stacked pins stay flush even with no declared width.
+      width: pin ? pinnedColumnWidth(column, columnWidths) : columnWidths?.[key]
+    };
+    if (setWidth && !merged.position) merged.position = "relative";
+    return merged;
+  };
+  const expansionHeaderStyle = {
+    ...headerCellStyle,
+    ...leadingPinStyle(hasLeftPin, 0, PIN_Z.headerPinned)
+  };
+  const selectionHeaderStyle = {
+    ...headerCellStyle,
+    ...leadingPinStyle(hasLeftPin, expansionLead, PIN_Z.headerPinned)
+  };
+  const actionsHeaderStyle = {
+    ...headerCellStyle,
+    ...edgePinStyle("right", actionsEdgePinned, PIN_Z.headerPinned)
+  };
+  const edgeBodyStyle = (side, active) => {
+    const pin = edgePinStyle(side, active, PIN_Z.body);
+    return pin ? { ...pin, background: pinBg } : void 0;
+  };
+  const expansionCellStyle = leadingPinStyle(hasLeftPin, 0, PIN_Z.body, pinBg);
+  const selectionCellStyle = leadingPinStyle(
+    hasLeftPin,
+    expansionLead,
+    PIN_Z.body,
+    pinBg
+  );
+  const actionsCellStyle = edgeBodyStyle("right", actionsEdgePinned);
+  const columnName = (column) => typeof column.header === "string" ? column.header : column.key;
+  const resizeHandleFor = (column) => setWidth ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...columnResizeHandleProps(
+        column.key,
+        setWidth,
+        `${resizeLabel}: ${columnName(column)}`
+      ),
+      style: RESIZE_HANDLE_STYLE
+    }
+  ) : void 0;
+  const bodyPinStyle = (key) => {
+    const pin = pinnedCellStyle(pinOffset?.(key), PIN_Z.body, leads);
+    return pin ? { ...pin, background: pinBg } : void 0;
+  };
+  const { verticalSpacing, horizontalSpacing } = DENSITY_SPACING[density];
+  const minWidth = tableMinWidth(columns, {
+    widths: columnWidths,
+    extra: expansionLead + (selection ? 40 : 0) + (showActions ? 120 : 0)
+  });
+  const selectionRef = useRef(selection);
+  selectionRef.current = selection;
+  const toggleSelect = useCallback(
+    (id) => selectionRef.current.toggle(id),
+    []
+  );
+  const Row = useMemo(
+    () => memo(DesktopRowBase, desktopRowPropsEqual),
+    []
+  );
+  const pinSignature = pinLayoutSignature(
+    columns,
+    pinOffset,
+    hasLeftPin,
+    actionsEdgePinned
+  );
+  const wrapperStyle = maxHeight == null ? {
+    width: "100%",
+    ...hasPinned || overflowing ? { overflowX: "auto" } : {}
+  } : { width: "100%", maxHeight, overflow: "auto" };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        wrapperRef(node);
+        virtualScrollRef?.(node);
+      },
+      style: wrapperStyle,
+      children: /* @__PURE__ */ jsxs(
+        Table,
+        {
+          ...table.getTableProps(),
+          className,
+          highlightOnHover: true,
+          verticalSpacing,
+          horizontalSpacing,
+          miw: Math.max(480, minWidth),
+          children: [
+            /* @__PURE__ */ jsxs(Table.Thead, { style: { background: "var(--mantine-color-body)" }, children: [
+              groupCells && /* @__PURE__ */ jsxs(Table.Tr, { children: [
+                expandable && /* @__PURE__ */ jsx(Table.Th, {}),
+                selection && /* @__PURE__ */ jsx(Table.Th, {}),
+                groupCells.map((cell) => /* @__PURE__ */ jsx(
+                  Table.Th,
+                  {
+                    colSpan: cell.span,
+                    ta: "center",
+                    fw: 600,
+                    style: {
+                      borderBottom: "1px solid var(--mantine-color-default-border)"
+                    },
+                    children: cell.label
+                  },
+                  cell.key
+                )),
+                showActions && /* @__PURE__ */ jsx(Table.Th, {})
+              ] }),
+              /* @__PURE__ */ jsxs(Table.Tr, { ...table.getHeaderRowProps(), children: [
+                expandable && /* @__PURE__ */ jsx(
+                  Table.Th,
+                  {
+                    w: expansionWidth,
+                    ta: "center",
+                    style: expansionHeaderStyle,
+                    children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.expandRow })
+                  }
+                ),
+                selection && /* @__PURE__ */ jsx(
+                  Table.Th,
+                  {
+                    w: selectionWidth,
+                    ta: "center",
+                    style: selectionHeaderStyle,
+                    children: /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        "aria-label": labels.selectAll,
+                        checked: selection.headerState === "all",
+                        indeterminate: selection.headerState === "some",
+                        onChange: selection.toggleAll
+                      }
+                    )
+                  }
+                ),
+                columns.map((column) => /* @__PURE__ */ jsx(
+                  HeaderCell,
+                  {
+                    table,
+                    column,
+                    stickyStyle: headerStyleFor(column),
+                    resizeHandle: resizeHandleFor(column)
+                  },
+                  column.key
+                )),
+                showActions && /* @__PURE__ */ jsx(Table.Th, { ta: "end", w: actionsWidth, style: actionsHeaderStyle, children: labels.actions })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Table.Tbody, { ref: bodyRef, children: [
+              paddingTop > 0 && /* @__PURE__ */ jsx(Table.Tr, { "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                Table.Td,
+                {
+                  colSpan: columnSpan,
+                  style: { height: paddingTop, padding: 0 }
+                }
+              ) }),
+              entries.map(({ row, index, key }) => {
+                const id = getRowId(row);
+                return /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    row,
+                    index,
+                    id,
+                    columns,
+                    getCellProps: table.getCellProps,
+                    selected: selection?.isSelected(id),
+                    selectLabel: labels.selectRow,
+                    onToggleSelect: toggleSelect,
+                    expanded: expansion?.isExpanded(id),
+                    expandLabel: labels.expandRow,
+                    collapseLabel: labels.collapseRow,
+                    onToggleExpand: expansion?.toggle,
+                    renderRowDetail,
+                    columnSpan,
+                    rowActions,
+                    confirm,
+                    cancelLabel: labels.cancel,
+                    onRowClick,
+                    prefetch,
+                    className: rowClassName?.(row, index),
+                    measureElement,
+                    pinStyleFor: bodyPinStyle,
+                    selectionCellStyle,
+                    expansionCellStyle,
+                    actionsCellStyle,
+                    pinSignature
+                  },
+                  key
+                );
+              }),
+              paddingBottom > 0 && /* @__PURE__ */ jsx(Table.Tr, { "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                Table.Td,
+                {
+                  colSpan: columnSpan,
+                  style: { height: paddingBottom, padding: 0 }
+                }
+              ) })
+            ] }),
+            summaryCells && /* @__PURE__ */ jsx(Table.Tfoot, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+              expandable && /* @__PURE__ */ jsx(Table.Td, {}),
+              selection && /* @__PURE__ */ jsx(Table.Td, {}),
+              columns.map((column) => /* @__PURE__ */ jsx(
+                Table.Td,
+                {
+                  ...table.getCellProps(column),
+                  fw: 600,
+                  c: "dimmed",
+                  children: summaryCells[column.key]
+                },
+                column.key
+              )),
+              showActions && /* @__PURE__ */ jsx(Table.Td, {})
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+function EmptyState({
+  title,
+  description,
+  icon,
+  action
+}) {
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      role: "status",
+      align: "center",
+      justify: "center",
+      gap: 6,
+      py: 48,
+      px: 16,
+      children: [
+        /* @__PURE__ */ jsx(Text, { c: "dimmed", "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx(InboxIcon, { size: 40 }) }),
+        /* @__PURE__ */ jsx(Text, { fw: 600, fz: "md", children: title }),
+        description && /* @__PURE__ */ jsx(Text, { c: "dimmed", fz: "sm", ta: "center", maw: 360, children: description }),
+        action
+      ]
+    }
+  );
+}
+function ErrorState({
+  error,
+  title,
+  message,
+  retryLabel,
+  onRetry,
+  isRetrying
+}) {
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      icon: /* @__PURE__ */ jsx(AlertIcon, { size: 16 }),
+      color: "red",
+      variant: "light",
+      title,
+      children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "nowrap", gap: "md", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Text, { fz: "sm", children: message }),
+          /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", mt: 2, children: error.message })
+        ] }),
+        onRetry && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "light",
+            color: "red",
+            leftSection: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 }),
+            onClick: onRetry,
+            loading: isRetrying,
+            children: retryLabel
+          }
+        )
+      ] })
+    }
+  );
+}
+function FilterDrawer({
+  opened,
+  onClose,
+  filters,
+  activeFilterCount,
+  onClearFilters,
+  labels,
+  dir = "ltr"
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      opened,
+      onClose,
+      position: dir === "rtl" ? "left" : "right",
+      size: 380,
+      title: labels.filters,
+      overlayProps: { opacity: 0.4, blur: 2 },
+      closeButtonProps: { "aria-label": labels.cancel },
+      children: /* @__PURE__ */ jsxs(Stack, { gap: "md", mih: "60vh", justify: "space-between", children: [
+        /* @__PURE__ */ jsx(Stack, { gap: "md", children: filters }),
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", pt: "md", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "subtle",
+              onClick: onClearFilters,
+              disabled: activeFilterCount === 0,
+              children: labels.clearAll
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { onClick: onClose, children: labels.applyFilters })
+        ] })
+      ] })
+    }
+  );
+}
+function mobileLabel(column) {
+  return column.mobileLabel ?? (typeof column.header === "string" ? column.header : column.key);
+}
+function MobileCards({
+  table,
+  rows,
+  rowActions,
+  confirm,
+  getRowId,
+  bodyRef,
+  className,
+  rowEntries,
+  paddingTop = 0,
+  paddingBottom = 0,
+  measureElement,
+  density = "comfortable",
+  onRowClick,
+  rowClassName,
+  renderRowDetail,
+  summaryRow,
+  expansion
+}) {
+  const { columns, selection, labels } = table;
+  const compact = density === "compact";
+  const cardPadding = compact ? "sm" : "md";
+  const cardGap = compact ? 4 : "xs";
+  const entries = rowEntries ?? rows.map((row, index) => ({
+    row,
+    index,
+    key: getRowId(row)
+  }));
+  const summaryCells = summaryRow?.(rows);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      gap: compact ? "xs" : "sm",
+      ref: bodyRef,
+      className,
+      ...table.getTableProps({ role: "list" }),
+      children: [
+        paddingTop > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { height: paddingTop } }),
+        entries.map(({ row, index, key }) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(
+            Card,
+            {
+              ...rowClickProps(row, onRowClick),
+              className: rowClassName?.(row, index),
+              ref: measureElement,
+              "data-index": index,
+              withBorder: true,
+              radius: "md",
+              padding: cardPadding,
+              role: "listitem",
+              "data-stagger": "",
+              children: /* @__PURE__ */ jsxs(Stack, { gap: cardGap, children: [
+                selection && /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    "aria-label": labels.selectRow,
+                    checked: selection.isSelected(id),
+                    onChange: () => selection.toggle(id)
+                  }
+                ),
+                expansion && /* @__PURE__ */ jsx(Group, { justify: "flex-end", children: /* @__PURE__ */ jsx(
+                  ExpandToggle,
+                  {
+                    expanded: expansion.isExpanded(id),
+                    expandLabel: labels.expandRow,
+                    collapseLabel: labels.collapseRow,
+                    onToggle: () => expansion.toggle(id)
+                  }
+                ) }),
+                columns.map((column) => /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", tt: "uppercase", fw: 500, children: mobileLabel(column) }),
+                  /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, { row, rowIndex: index }) : column.accessor?.(row) })
+                ] }, column.key)),
+                expansion?.isExpanded(id) === true && /* @__PURE__ */ jsx("div", { children: renderRowDetail(row) }),
+                rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx(Group, { gap: 4, justify: "flex-end", pt: 4, children: rowActions.map((action) => {
+                  if (action.isHidden?.(row)) return null;
+                  const reason = resolveDisabledReason(
+                    action.disabledReason?.(row)
+                  );
+                  const disabled = reason !== void 0 || (action.isDisabled?.(row) ?? false);
+                  const run = disabled ? void 0 : () => runRowAction(action, row, confirm, labels.cancel);
+                  return action.icon ? /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      label: reason ?? action.label,
+                      withArrow: true,
+                      openDelay: 200,
+                      children: /* @__PURE__ */ jsx(
+                        ActionIcon,
+                        {
+                          variant: "subtle",
+                          color: action.color,
+                          size: "sm",
+                          disabled,
+                          "aria-label": action.label,
+                          onClick: run,
+                          children: action.icon
+                        }
+                      )
+                    },
+                    action.key
+                  ) : /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "subtle",
+                      color: action.color,
+                      size: "compact-sm",
+                      disabled,
+                      onClick: run,
+                      children: action.label
+                    },
+                    action.key
+                  );
+                }) })
+              ] })
+            },
+            key
+          );
+        }),
+        paddingBottom > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { height: paddingBottom } }),
+        summaryCells && /* @__PURE__ */ jsx(Card, { withBorder: true, radius: "md", padding: cardPadding, role: "listitem", children: /* @__PURE__ */ jsx(Stack, { gap: cardGap, children: columns.filter((column) => summaryCells[column.key] !== void 0).map((column) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", tt: "uppercase", fw: 500, children: mobileLabel(column) }),
+          /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: 600, children: summaryCells[column.key] })
+        ] }, column.key)) }) })
+      ]
+    }
+  );
+}
+function PaginationFooter({
+  page,
+  totalPages,
+  limit,
+  total,
+  fromIndex,
+  toIndex,
+  onPageChange,
+  onLimitChange,
+  labels
+}) {
+  const safeTotalPages = Math.max(totalPages, 1);
+  const safePage = Math.min(Math.max(page, 1), safeTotalPages);
+  const options = pageSizeOptions(limit).map((n) => ({
+    value: String(n),
+    label: String(n)
+  }));
+  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "wrap", gap: "md", pt: "xs", children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", children: labels.rowsPerPage }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          "aria-label": labels.rowsPerPage,
+          data: options,
+          value: String(limit),
+          onChange: (v) => onLimitChange(Number(v)),
+          size: "xs",
+          w: 76,
+          allowDeselect: false,
+          comboboxProps: { withinPortal: false }
+        }
+      ),
+      total > 0 && /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", children: labels.showing({ from: fromIndex, to: toIndex, total }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", children: labels.pageOf({ page: safePage, total: safeTotalPages }) }),
+      /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          total: safeTotalPages,
+          value: safePage,
+          onChange: onPageChange,
+          size: "sm",
+          siblings: 1,
+          boundaries: 1,
+          getControlProps: (control) => ({
+            "aria-label": control === "previous" ? labels.previousPage : labels.nextPage
+          })
+        }
+      )
+    ] })
+  ] });
+}
+function SavedViewsMenu({
+  views,
+  labels
+}) {
+  const [name, setName] = useState("");
+  const trimmed = name.trim();
+  const handleSave = () => {
+    views.save(trimmed);
+    setName("");
+  };
+  return /* @__PURE__ */ jsxs(Menu, { closeOnItemClick: false, position: "bottom-end", withinPortal: true, children: [
+    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", children: labels.savedViews }) }),
+    /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsxs(Box, { p: 4, miw: 220, children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", px: 4, pb: 6, children: labels.savedViews }),
+      views.views.map((view) => /* @__PURE__ */ jsxs(Group, { gap: 6, px: 4, py: 2, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "subtle",
+            size: "compact-sm",
+            justify: "flex-start",
+            style: { flex: 1 },
+            onClick: () => views.apply(view.name),
+            children: view.name
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "subtle",
+            color: "gray",
+            size: "sm",
+            "aria-label": `${labels.deleteView}: ${view.name}`,
+            onClick: () => views.remove(view.name),
+            children: /* @__PURE__ */ jsx(CloseIcon, { size: 12 })
+          }
+        )
+      ] }, view.name)),
+      /* @__PURE__ */ jsx(Menu.Divider, {}),
+      /* @__PURE__ */ jsxs(Group, { gap: 6, p: 4, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            size: "xs",
+            style: { flex: 1 },
+            placeholder: labels.viewName,
+            value: name,
+            onChange: (e) => setName(e.currentTarget.value)
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { size: "xs", disabled: trimmed === "", onClick: handleSave, children: labels.saveView })
+      ] })
+    ] }) })
+  ] });
+}
+function TableSkeleton({
+  columns,
+  rows = 5,
+  loadingLabel
+}) {
+  const colKeys = Array.from({ length: Math.max(columns, 1) }, (_, i) => i);
+  const rowKeys = Array.from({ length: rows }, (_, i) => i);
+  return /* @__PURE__ */ jsxs("div", { role: "status", "aria-busy": "true", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: colKeys.map((c) => /* @__PURE__ */ jsx(Table.Th, { children: /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          height: 12,
+          radius: "sm",
+          width: c === 0 ? "55%" : "40%"
+        }
+      ) }, c)) }) }),
+      /* @__PURE__ */ jsx(Table.Tbody, { children: rowKeys.map((r) => /* @__PURE__ */ jsx(Table.Tr, { children: colKeys.map((c) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          height: 14,
+          radius: "sm",
+          width: c === 0 ? "70%" : "55%"
+        }
+      ) }, c)) }, r)) })
+    ] }),
+    loadingLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel }) : null
+  ] });
+}
+function FilterPopover({
+  open,
+  onClose,
+  filters,
+  activeFilterCount,
+  onClearFilters,
+  labels,
+  dir = "ltr",
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      opened: open,
+      onDismiss: onClose,
+      position: dir === "rtl" ? "bottom-start" : "bottom-end",
+      withinPortal: true,
+      shadow: "md",
+      radius: "md",
+      width: 340,
+      children: [
+        /* @__PURE__ */ jsx(Popover.Target, { children }),
+        /* @__PURE__ */ jsxs(Popover.Dropdown, { children: [
+          /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", mb: "sm", children: [
+            /* @__PURE__ */ jsx(Text, { fw: 600, fz: "sm", children: labels.filters }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "subtle",
+                size: "compact-xs",
+                onClick: onClearFilters,
+                disabled: activeFilterCount === 0,
+                children: labels.clearAll
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Stack, { gap: "md", children: filters })
+        ] })
+      ]
+    }
+  );
+}
+function Toolbar({
+  table,
+  hideSearch,
+  searchPlaceholder,
+  sortByOptions,
+  customToolbar,
+  hasFilters,
+  activeFilterCount,
+  onToggleFilters,
+  onFiltersTriggerPointerDown,
+  onCloseFilters,
+  filtersOpen,
+  filtersMode,
+  filters,
+  onClearFilters,
+  dir,
+  columnMenu,
+  showRowsPerPage,
+  className
+}) {
+  const { labels, source } = table;
+  const searchProps = table.getSearchInputProps(
+    searchPlaceholder ? { placeholder: searchPlaceholder } : void 0
+  );
+  const sortOptions = sortByOptions ?? (table.isMobile ? table.sortByOptions : void 0);
+  const filtersButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "default",
+      size: "sm",
+      "aria-expanded": filtersMode === "popover" ? filtersOpen : void 0,
+      "data-active": filtersOpen || void 0,
+      leftSection: /* @__PURE__ */ jsx(FiltersIcon, { size: 16 }),
+      rightSection: activeFilterCount > 0 ? /* @__PURE__ */ jsx(Badge, { size: "sm", circle: true, children: activeFilterCount }) : void 0,
+      onPointerDown: onFiltersTriggerPointerDown,
+      onClick: onToggleFilters,
+      children: labels.filters
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      gap: "sm",
+      justify: "space-between",
+      align: "center",
+      className,
+      children: [
+        !hideSearch && /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ...searchProps,
+            leftSection: /* @__PURE__ */ jsx(SearchIcon, { size: 14 }),
+            size: "sm",
+            style: { flex: 1, minWidth: 160, maxWidth: 360 }
+          }
+        ),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
+          sortOptions && sortOptions.length > 0 && /* @__PURE__ */ jsx(
+            Select,
+            {
+              "aria-label": labels.sortBy,
+              placeholder: labels.sortBy,
+              data: sortOptions,
+              value: source.sortBy ?? null,
+              onChange: (v) => source.setSort(v ?? void 0, source.sortDir ?? "asc"),
+              clearable: true,
+              size: "sm",
+              w: 160,
+              comboboxProps: { withinPortal: false }
+            }
+          ),
+          customToolbar,
+          hasFilters && (filtersMode === "popover" ? /* @__PURE__ */ jsx(
+            FilterPopover,
+            {
+              open: filtersOpen,
+              onClose: onCloseFilters,
+              filters,
+              activeFilterCount,
+              onClearFilters,
+              labels,
+              dir,
+              children: filtersButton
+            }
+          ) : filtersButton),
+          columnMenu,
+          showRowsPerPage && /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
+            /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", children: labels.rowsPerPage }),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                "aria-label": labels.rowsPerPage,
+                data: pageSizeOptions(source.limit).map((n) => ({
+                  value: String(n),
+                  label: String(n)
+                })),
+                value: String(source.limit),
+                onChange: (v) => source.setLimit(Number(v)),
+                size: "sm",
+                w: 80,
+                allowDeselect: false,
+                comboboxProps: { withinPortal: false }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var stickyToolbarStyle = (top) => ({
+  position: "sticky",
+  top,
+  zIndex: 3,
+  background: "var(--mantine-color-body)",
+  paddingBottom: "var(--mantine-spacing-xs)"
+});
+function ColumnMenuSlot({
+  enabled,
+  ...props
+}) {
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsx(ColumnMenu, { ...props });
+}
+function SavedViewsSlot({
+  options,
+  labels
+}) {
+  const views = useSavedViews(options);
+  return /* @__PURE__ */ jsx(SavedViewsMenu, { views, labels });
+}
+function useResolvedTableProps(props) {
+  const { source, runtime } = useTableData({
+    locale: props.locale,
+    source: props.source,
+    data: props.data,
+    total: props.total,
+    loading: props.loading,
+    onQueryChange: props.onQueryChange,
+    columns: props.columns,
+    filters: props.filters,
+    urlKey: props.urlKey,
+    adapter: props.urlSync === false ? void 0 : props.urlAdapter,
+    enabled: props.urlSync
+  });
+  const labels = useMemo(() => resolveLabels(props.labels), [props.labels]);
+  let filters;
+  if (isDeclarativeFilters(props.filters) || props.filters === void 0) {
+    filters = runtime.defs.length > 0 ? /* @__PURE__ */ jsx(AutoFilterForm, { defs: runtime.defs, source, labels }) : void 0;
+  } else {
+    filters = props.filters;
+  }
+  const filterLabels = useMemo(
+    () => ({ ...runtime.filterLabels, ...props.filterLabels }),
+    [runtime.filterLabels, props.filterLabels]
+  );
+  return { ...props, source, filters, filterLabels };
+}
+function DataTable(props) {
+  const chromeProps = useResolvedTableProps(props);
+  const {
+    source,
+    rowActions,
+    searchPlaceholder,
+    sortByOptions,
+    dir,
+    prefetch,
+    hideSearch,
+    filters,
+    filtersMode = "popover",
+    bulkActions,
+    slots,
+    classNames,
+    toolbar: customToolbar,
+    skeletonRows,
+    stickyTop = 0,
+    animate = false,
+    stickyHeader = false,
+    enableColumnMenu = false,
+    savedViews
+  } = chromeProps;
+  const density = chromeProps.density ?? "comfortable";
+  const chrome = useTableChrome(chromeProps);
+  const { table, isMobile, confirm, getRowId } = chrome;
+  const hasRowActions = (rowActions?.length ?? 0) > 0;
+  const visibleRowActions = chrome.columnLayout.isHidden(ACTIONS_COLUMN_KEY) ? void 0 : rowActions;
+  const actionsPinned = chrome.columnLayout.state.pinned[ACTIONS_COLUMN_KEY] === "right";
+  const { virtualization, loadMoreRef, canLoadMore, virtualScrollRef } = useChromeBodyData(chrome, chromeProps);
+  const [drawerOpened, setDrawerOpened] = useState(false);
+  const filtersTrigger = useFilterTriggerToggle(drawerOpened, setDrawerOpened);
+  const rootRef = useRef(null);
+  const { ref: toolbarRef, height: toolbarHeight } = useElementSize();
+  const desktopBodyRef = useRef(null);
+  const mobileBodyRef = useRef(null);
+  useChromeScrollReset(rootRef, chrome, chromeProps);
+  useMountStagger(
+    isMobile ? mobileBodyRef : desktopBodyRef,
+    [virtualization.rows.length, isMobile],
+    { enabled: animate }
+  );
+  let body;
+  if (chrome.body === "skeleton") {
+    body = slots?.skeleton ?? /* @__PURE__ */ jsx(
+      TableSkeleton,
+      {
+        columns: table.columns.length || 1,
+        rows: skeletonRows ?? source.limit,
+        loadingLabel: table.labels.loading
+      }
+    );
+  } else if (chrome.body === "empty") {
+    body = slots?.empty ?? (chrome.emptyVariant === "noResults" ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: table.labels.noResults,
+        action: /* @__PURE__ */ jsx(Button, { variant: "light", size: "sm", onClick: chrome.clearFilters, children: table.labels.clearAll })
+      }
+    ) : /* @__PURE__ */ jsx(EmptyState, { title: table.labels.noData }));
+  } else if (chrome.body === "mobile") {
+    body = /* @__PURE__ */ jsx(
+      MobileCards,
+      {
+        table,
+        rows: source.rows,
+        rowActions: visibleRowActions,
+        confirm,
+        getRowId,
+        onRowClick: props.onRowClick,
+        rowClassName: props.rowClassName,
+        renderRowDetail: props.renderRowDetail,
+        summaryRow: props.summaryRow,
+        expansion: chrome.detail?.expansion,
+        bodyRef: mobileBodyRef,
+        className: classNames?.card,
+        rowEntries: virtualization.enabled ? virtualization.rows : void 0,
+        paddingTop: virtualization.paddingTop,
+        paddingBottom: virtualization.paddingBottom,
+        measureElement: virtualization.measureElement,
+        density
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsx(
+      DesktopTable,
+      {
+        table,
+        rows: source.rows,
+        rowActions: visibleRowActions,
+        confirm,
+        prefetch,
+        onRowClick: props.onRowClick,
+        rowClassName: props.rowClassName,
+        renderRowDetail: props.renderRowDetail,
+        summaryRow: props.summaryRow,
+        expansion: chrome.detail?.expansion,
+        getRowId,
+        bodyRef: desktopBodyRef,
+        className: classNames?.table,
+        rowEntries: virtualization.enabled ? virtualization.rows : void 0,
+        paddingTop: virtualization.paddingTop,
+        paddingBottom: virtualization.paddingBottom,
+        measureElement: virtualization.measureElement,
+        stickyHeaderOffset: stickyTop + toolbarHeight,
+        stickyHeader,
+        pinOffset: chrome.columnLayout.pinOffset,
+        actionsPinned,
+        maxHeight: props.maxHeight,
+        virtualScrollRef,
+        setWidth: props.resizableColumns ? chrome.columnLayout.setWidth : void 0,
+        columnWidths: chrome.columnLayout.state.widths,
+        resizeLabel: table.labels.resizeColumn,
+        density
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      ref: rootRef,
+      p: "xs",
+      radius: "md",
+      withBorder: true,
+      dir,
+      "aria-busy": chrome.isRefreshing || void 0,
+      className: classNames?.root,
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: toolbarRef,
+              style: stickyToolbarStyle(stickyTop),
+              className: classNames?.toolbar,
+              children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+                /* @__PURE__ */ jsx(
+                  Toolbar,
+                  {
+                    table,
+                    hideSearch,
+                    searchPlaceholder,
+                    sortByOptions,
+                    customToolbar,
+                    hasFilters: Boolean(filters),
+                    activeFilterCount: chrome.activeFilterCount,
+                    filtersMode,
+                    filters,
+                    filtersOpen: drawerOpened,
+                    onToggleFilters: filtersTrigger.onClick,
+                    onFiltersTriggerPointerDown: filtersTrigger.onPointerDown,
+                    onCloseFilters: () => setDrawerOpened(false),
+                    onClearFilters: chrome.clearFilters,
+                    dir,
+                    columnMenu: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      savedViews && /* @__PURE__ */ jsx(
+                        SavedViewsSlot,
+                        {
+                          options: {
+                            adapter: chromeProps.urlAdapter,
+                            urlKey: chromeProps.urlKey,
+                            ...savedViews
+                          },
+                          labels: table.labels
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        ColumnMenuSlot,
+                        {
+                          enabled: enableColumnMenu && !isMobile,
+                          allColumns: chrome.allColumns,
+                          layout: chrome.columnLayout,
+                          labels: table.labels,
+                          hasRowActions
+                        }
+                      )
+                    ] }),
+                    showRowsPerPage: canLoadMore
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ActiveFilterChips,
+                  {
+                    chips: chrome.mergedChips,
+                    onClearAll: chrome.clearFilters,
+                    label: table.labels.filters,
+                    clearAllLabel: table.labels.clearAll
+                  }
+                ),
+                table.selection && bulkActions && /* @__PURE__ */ jsx(
+                  BulkActionBar,
+                  {
+                    selection: table.selection,
+                    total: source.total,
+                    bulkActions,
+                    confirm,
+                    labels: table.labels
+                  }
+                )
+              ] })
+            }
+          ),
+          chrome.isRefreshing && /* @__PURE__ */ jsx(
+            Progress,
+            {
+              size: "xs",
+              animated: true,
+              value: 100,
+              "aria-label": table.labels.loading
+            }
+          ),
+          source.error && /* @__PURE__ */ jsx(
+            ErrorState,
+            {
+              error: source.error,
+              title: table.labels.errorTitle,
+              message: table.labels.errorMessage,
+              retryLabel: table.labels.retry,
+              onRetry: source.refetch ? () => void source.refetch?.() : void 0,
+              isRetrying: source.isFetching
+            }
+          ),
+          !source.error && body,
+          canLoadMore && source.hasNextPage && /* @__PURE__ */ jsx(Group, { ref: loadMoreRef, justify: "center", py: "xs", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "default",
+              size: "sm",
+              loading: source.isFetchingNextPage,
+              onClick: () => source.fetchNextPage(),
+              children: table.labels.loadMore
+            }
+          ) }),
+          chrome.showFooter && /* @__PURE__ */ jsx(Box, { className: classNames?.footer, children: /* @__PURE__ */ jsx(
+            PaginationFooter,
+            {
+              page: table.pagination.safePage,
+              totalPages: table.pagination.totalPages,
+              limit: source.limit,
+              total: source.total,
+              fromIndex: table.pagination.fromIndex,
+              toIndex: table.pagination.toIndex,
+              onPageChange: source.setPage,
+              onLimitChange: source.setLimit,
+              labels: table.labels
+            }
+          ) })
+        ] }),
+        filters && filtersMode === "drawer" && /* @__PURE__ */ jsx(
+          FilterDrawer,
+          {
+            opened: drawerOpened,
+            onClose: () => setDrawerOpened(false),
+            filters,
+            activeFilterCount: chrome.activeFilterCount,
+            onClearFilters: chrome.clearFilters,
+            labels: table.labels,
+            dir
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ActiveFilterChips, AutoFilterForm, DataTable, EmptyState, ErrorState, PaginationFooter, SavedViewsMenu, TableSkeleton, useMountStagger };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map