@pibit.ai/cure-design-system 0.3.45 → 0.3.50

package/dist/patterns/table-component/TableComponent.js

@@ -1,412 +1,412 @@
-import { jsx as i, jsxs as p, Fragment as rn } from "react/jsx-runtime";
-import { forwardRef as on, useMemo as y, useState as ne, useEffect as sn, useCallback as F, useRef as re, useLayoutEffect as ln, Fragment as an } from "react";
-import { functionalUpdate as Je, useTable as dn } from "@tanstack/react-table";
-import { ArrowDown as cn, ChevronSelectorVertical as un, ChevronRight as Ue } from "@untitledui/icons";
-import { Checkbox as $e } from "../../primitives/checkbox/checkbox.js";
-import { ShimmerLine as mn } from "../../primitives/shimmer/shimmer.js";
+import { jsx as i, jsxs as m, Fragment as sn } from "react/jsx-runtime";
+import { forwardRef as ln, useCallback as A, useMemo as v, useRef as oe, useState as Ne, useLayoutEffect as an, Fragment as dn } from "react";
+import { functionalUpdate as Ye, useTable as cn } from "@tanstack/react-table";
+import { ArrowDown as un, ChevronSelectorVertical as mn, ChevronRight as $e } from "@untitledui/icons";
+import { Checkbox as Ue } from "../../primitives/checkbox/checkbox.js";
+import { ShimmerLine as fn } from "../../primitives/shimmer/shimmer.js";
 import { cn as d } from "../../utils/cn.js";
-import { selectionFromSingleCell as fn, getCellRangeVisualState as pn, cellRangeEdgeBoxShadow as hn } from "../table/cellRangeSelection.js";
-import { useCellRangeSelection as bn } from "./useCellRangeSelection.js";
-import { useRowReorderDrag as gn } from "./useRowReorderDrag.js";
-import { GridNavProvider as xn } from "../table/useGridKeyboardNavigation.js";
-import { ROW_DRAG_SOURCE_STYLE as yn, ROW_SOURCE_INDEX_ATTR as wn, ROW_REORDER_ATTR as Cn, FloatingRowPreview as vn, DropIndicatorLine as Sn } from "../table/rowReorderDrag.js";
-import { buildTableComponentColumns as In } from "./buildTableColumns.js";
-import { HEADER_PADDING_CLASS as Nn, ROW_HEIGHT_CLASS as He, CELL_PADDING_CLASS as qe } from "./rowMetrics.js";
-import { tableComponentFeatures as En } from "./tableFeatures.js";
+import { selectionFromSingleCell as pn, getCellRangeVisualState as bn, cellRangeEdgeBoxShadow as hn } from "../table/cellRangeSelection.js";
+import { useCellRangeSelection as gn } from "./useCellRangeSelection.js";
+import { useRowReorderDrag as xn } from "./useRowReorderDrag.js";
+import { GridNavProvider as yn } from "../table/useGridKeyboardNavigation.js";
+import { ROW_DRAG_SOURCE_STYLE as wn, ROW_SOURCE_INDEX_ATTR as vn, ROW_REORDER_ATTR as Cn, FloatingRowPreview as Sn, DropIndicatorLine as In } from "../table/rowReorderDrag.js";
+import { buildTableComponentColumns as Nn } from "./buildTableColumns.js";
+import { HEADER_PADDING_CLASS as En, ROW_HEIGHT_CLASS as Ze, CELL_PADDING_CLASS as He } from "./rowMetrics.js";
+import { tableComponentFeatures as Tn } from "./tableFeatures.js";
 import { TableZoomControl as _n } from "../table/TableZoomControl.js";
-import { normalizeZoomConfig as Ln, DEFAULT_TABLE_ZOOM as Rn, DEFAULT_TABLE_ZOOM_MIN as Tn, clamp as Wn, parsePxValue as Ee, DEFAULT_ZOOMABLE_COLUMN_MIN_WIDTH as Be, supportsCssZoom as Dn, computeFillBaseWidth as kn, computeEffectiveTableWidth as On, computeFlexColumnWidth as An, computeNeedsHorizontalScroll as Fn, DEFAULT_COLUMN_MAX_WIDTH as Pn } from "../table/tableZoomLayout.js";
-const Zn = 5, Mn = Dn(), Vn = (o) => o === "center" ? "text-center" : o === "right" ? "text-right" : "text-left", Ge = (o) => o === "center" ? "justify-center" : o === "right" ? "justify-end" : "justify-start", te = (o, l) => {
-  const c = o.__sourceIndex;
+import { useFitTableToViewport as Ln } from "../table/useFitTableToViewport.js";
+import { useTableZoomState as Rn } from "../table/useTableZoomState.js";
+import { DEFAULT_TABLE_ZOOM_MIN as Wn, parsePxValue as Ee, DEFAULT_ZOOMABLE_COLUMN_MIN_WIDTH as qe, supportsCssZoom as Dn, computeFillBaseWidth as kn, computeEffectiveTableWidth as On, computeFlexColumnWidth as zn, getTableZoomFontSize as An, computeNeedsHorizontalScroll as Fn, DEFAULT_COLUMN_MAX_WIDTH as Pn } from "../table/tableZoomLayout.js";
+const Vn = 5, jn = Dn(), Mn = (r) => r === "center" ? "text-center" : r === "right" ? "text-right" : "text-left", Ge = (r) => r === "center" ? "justify-center" : r === "right" ? "justify-end" : "justify-start", ne = (r, l) => {
+  const c = r.__sourceIndex;
   return typeof c == "number" ? c : Number.isFinite(l) ? l : null;
-}, Xe = (o) => o instanceof HTMLElement && !!o.closest(
+}, Be = (r) => r instanceof HTMLElement && !!r.closest(
   'button,a,input,textarea,select,[contenteditable]:not([contenteditable="false"]),[role="button"],[role="menuitem"]'
-), A = (o, l, c) => {
-  const [T, W] = ne(l), h = o ?? T, S = re(h), b = re(c);
-  S.current = h, b.current = c;
-  const ie = F(
-    (w) => {
-      var C;
-      const E = Je(w, S.current);
-      S.current = E, o === void 0 && W(E), (C = b.current) == null || C.call(b, E);
+), z = (r, l, c) => {
+  const [L, R] = Ne(l), f = r ?? L, C = oe(f), p = oe(c);
+  C.current = f, p.current = c;
+  const ie = A(
+    (g) => {
+      var x;
+      const I = Ye(g, C.current);
+      C.current = I, r === void 0 && R(I), (x = p.current) == null || x.call(p, I);
     },
-    [o]
+    [r]
   );
-  return [h, ie];
-}, jn = (o, l) => {
-  if (!o) return;
-  const c = o.sticky ? {
+  return [f, ie];
+}, Kn = (r, l) => {
+  if (!r) return;
+  const c = r.sticky ? {
     position: "sticky",
-    [o.sticky]: o.stickyOffset ?? 0,
+    [r.sticky]: r.stickyOffset ?? 0,
     zIndex: l ? 30 : 20,
     backgroundColor: l ? "var(--color-bg-secondary-subtle)" : "var(--color-bg-primary)",
-    boxShadow: l || !o.sticky ? void 0 : o.sticky === "right" ? "inset 2px 0 0 0 var(--color-border-tertiary)" : "inset -2px 0 0 0 var(--color-border-tertiary)"
+    boxShadow: l || !r.sticky ? void 0 : r.sticky === "right" ? "inset 2px 0 0 0 var(--color-border-tertiary)" : "inset -2px 0 0 0 var(--color-border-tertiary)"
   } : {};
   return {
-    width: o.width,
-    minWidth: o.minWidth ?? o.width ?? `${oe}px`,
-    maxWidth: o.maxWidth ?? Pn,
+    width: r.width,
+    minWidth: r.minWidth ?? r.width ?? `${re}px`,
+    maxWidth: r.maxWidth ?? Pn,
     ...c
   };
-}, oe = 120, Ne = (o) => !!(o.maxWidth && o.sticky === "right"), Kn = (o, l = oe) => Ee(o.minWidth) || l, Ye = (o, l, c, T) => {
-  if (l === "multiple") return o;
-  if (o === !0) return T ? { [T]: !0 } : {};
-  const W = c && c !== !0 ? new Set(
-    Object.keys(c).filter((b) => c[b])
-  ) : /* @__PURE__ */ new Set(), h = Object.keys(o).filter((b) => o[b]), S = h.find((b) => !W.has(b)) ?? h[0];
-  return S ? { [S]: !0 } : {};
+}, re = 120, Ie = (r) => !!(r.maxWidth && r.sticky === "right"), $n = (r, l = re) => Ee(r.minWidth) || l, Xe = (r, l, c, L) => {
+  if (l === "multiple") return r;
+  if (r === !0) return L ? { [L]: !0 } : {};
+  const R = c && c !== !0 ? new Set(
+    Object.keys(c).filter((p) => c[p])
+  ) : /* @__PURE__ */ new Set(), f = Object.keys(r).filter((p) => r[p]), C = f.find((p) => !R.has(p)) ?? f[0];
+  return C ? { [C]: !0 } : {};
 };
 function Un({
-  data: o,
+  data: r,
   columns: l,
   getRowId: c,
-  ariaLabel: T,
-  headerGroups: W,
-  size: h = "xs",
-  loading: S = !1,
-  loadingRowCount: b = Zn,
+  ariaLabel: L,
+  headerGroups: R,
+  size: f = "xs",
+  loading: C = !1,
+  loadingRowCount: p = Vn,
   emptyState: ie = "No data found",
-  showBorders: w = !1,
-  removeRowBorders: E = !1,
-  fillWidth: C = !1,
-  zoom: m,
+  showBorders: g = !1,
+  removeRowBorders: I = !1,
+  fillWidth: x = !1,
+  zoom: Je,
   zoomDisabled: Qe = !1,
-  className: _e,
-  rootClassName: ze,
-  tableClassName: et,
-  headerClassName: tt,
+  className: Te,
+  rootClassName: et,
+  tableClassName: tt,
+  headerClassName: nt,
   getRowClassName: se,
   onRowClick: le,
-  onRowHover: U,
-  toolbar: nt,
+  onRowHover: $,
+  toolbar: ot,
   renderToolbar: ae,
-  pagination: Le,
+  pagination: _e,
   summaryRow: rt,
-  rowGroups: P,
+  rowGroups: F,
   renderGroupHeader: de,
-  collapsedGroupIds: ot,
-  defaultCollapsedGroupIds: it = [],
-  onCollapsedGroupIdsChange: st,
-  enableSorting: Re = !1,
-  sorting: lt,
-  defaultSorting: at = [],
-  onSortingChange: dt,
-  columnVisibility: ct,
-  defaultColumnVisibility: ut = {},
-  onColumnVisibilityChange: mt,
-  columnOrder: ft,
-  defaultColumnOrder: pt = [],
+  collapsedGroupIds: it,
+  defaultCollapsedGroupIds: st = [],
+  onCollapsedGroupIdsChange: lt,
+  enableSorting: Le = !1,
+  sorting: at,
+  defaultSorting: dt = [],
+  onSortingChange: ct,
+  columnVisibility: ut,
+  defaultColumnVisibility: mt = {},
+  onColumnVisibilityChange: ft,
+  columnOrder: pt,
+  defaultColumnOrder: bt = [],
   onColumnOrderChange: ht,
-  selectionMode: $ = "none",
-  rowSelection: bt,
-  defaultRowSelection: gt = {},
-  onRowSelectionChange: xt,
-  expanded: yt,
-  defaultExpanded: wt = {},
+  selectionMode: U = "none",
+  rowSelection: gt,
+  defaultRowSelection: xt = {},
+  onRowSelectionChange: yt,
+  expanded: wt,
+  defaultExpanded: vt = {},
   onExpandedChange: Ct,
   expansionMode: ce = "multiple",
   getRowCanExpand: ue,
-  renderExpandedContent: H,
+  renderExpandedContent: Z,
   onCellClick: me,
   onCellDoubleClick: fe,
-  onCellActivate: D,
-  cellSelection: q,
-  onCellSelectionChange: Z,
-  onCopyCells: vt,
-  onPasteCells: St,
-  onClearCells: It,
-  onReorderRows: Te,
-  enableRowReorder: Nt,
-  activateOnSingleClick: Et
-}, B) {
-  var je;
-  const u = y(
-    () => m ? Ln(m) : null,
-    [m == null ? void 0 : m.defaultZoom, m == null ? void 0 : m.minZoom, m == null ? void 0 : m.maxZoom, m == null ? void 0 : m.step]
-  ), [pe, We] = ne(
-    () => (u == null ? void 0 : u.defaultZoom) ?? Rn
-  ), I = u !== null && Mn, M = I ? pe / 100 : 1, _t = (u == null ? void 0 : u.minZoom) ?? Tn;
-  sn(() => {
-    u && We(
-      (e) => Wn(e, u.minZoom, u.maxZoom)
-    );
-  }, [u]);
-  const [Lt, Rt] = A(
-    lt,
+  onCellActivate: W,
+  cellSelection: H,
+  onCellSelectionChange: P,
+  onCopyCells: St,
+  onPasteCells: It,
+  onClearCells: Nt,
+  onReorderRows: Re,
+  enableRowReorder: Et,
+  activateOnSingleClick: Tt
+}, q) {
+  var Me;
+  const { zoomConfig: N, zoomPercent: V, setZoomPercent: We } = Rn(Je), y = N !== null && jn, j = y ? V / 100 : 1, G = y ? An(V) : void 0, _t = (N == null ? void 0 : N.minZoom) ?? Wn, [Lt, Rt] = z(
     at,
-    dt
-  ), [Tt, Wt] = A(
-    ct,
+    dt,
+    ct
+  ), [Wt, Dt] = z(
     ut,
-    mt
-  ), [Dt, kt] = A(
-    ft,
+    mt,
+    ft
+  ), [kt, Ot] = z(
     pt,
-    ht
-  ), [Ot, At] = A(
     bt,
+    ht
+  ), [zt, At] = z(
     gt,
-    xt
-  ), [Ft, De] = A(
-    yt,
+    xt,
+    yt
+  ), [Ft, De] = z(
     wt,
+    vt,
     Ct
-  ), he = o.length > 0 ? c(o[0], 0) : void 0, Pt = Ye(
+  ), pe = r.length > 0 ? c(r[0], 0) : void 0, Pt = Xe(
     Ft,
     ce,
     void 0,
-    he
-  ), Zt = F(
+    pe
+  ), Vt = A(
     (e) => {
       De(
-        (t) => Ye(
-          Je(e, t),
+        (t) => Xe(
+          Ye(e, t),
           ce,
           t,
-          he
+          pe
         )
       );
     },
-    [ce, he, De]
-  ), [ke, Oe] = A(
-    ot,
+    [ce, pe, De]
+  ), [ke, Oe] = z(
     it,
-    st
-  ), be = y(
+    st,
+    lt
+  ), be = v(
     () => new Set(ke),
     [ke]
-  ), Mt = F(
+  ), jt = A(
     (e) => Oe(
-      (t) => t.includes(e) ? t.filter((r) => r !== e) : [...t, e]
+      (t) => t.includes(e) ? t.filter((o) => o !== e) : [...t, e]
     ),
     [Oe]
-  ), V = re(null), [j, Ae] = ne(null);
-  ln(() => {
-    if (!C) {
-      Ae(null);
+  ), D = oe(null), [M, ze] = Ne(null), Mt = Ln({
+    containerRef: D,
+    zoomConfig: N,
+    zoomPercent: V,
+    setZoomPercent: We
+  });
+  an(() => {
+    if (!x) {
+      ze(null);
       return;
     }
-    const e = V.current;
+    const e = D.current;
     if (!e || typeof ResizeObserver > "u") return;
     const t = () => {
       const n = e.clientWidth;
-      n > 0 && Ae(
+      n > 0 && ze(
         (s) => s === n ? s : n
       );
     };
     t();
-    const r = new ResizeObserver(t);
-    return r.observe(e), () => r.disconnect();
-  }, [C, l.length, o.length, S]);
-  const g = y(() => {
-    if (!C) return null;
+    const o = new ResizeObserver(t);
+    return o.observe(e), () => o.disconnect();
+  }, [x, l.length, r.length, C]);
+  const b = v(() => {
+    if (!x) return null;
     const e = l.reduce(
-      (n, s) => Ne(s) ? n + Ee(s.maxWidth) : n,
+      (n, s) => Ie(s) ? n + Ee(s.maxWidth) : n,
       0
-    ), t = l.filter((n) => !Ne(n));
+    ), t = l.filter((n) => !Ie(n));
     return { minTableWidth: t.reduce(
-      (n, s) => n + Kn(
+      (n, s) => n + $n(
         s,
-        I ? Ee(Be) : oe
+        y ? Ee(qe) : re
       ),
       0
     ) + e, fixedTotal: e, flexibleCount: t.length };
-  }, [C, l, I]), ge = y(
-    () => g ? kn(j, g.minTableWidth) : null,
-    [j, g]
-  ), xe = Fn(
-    ge,
-    j,
-    M
-  ), G = y(
-    () => On(ge, j, M),
-    [ge, j, M]
-  ), Fe = y(() => !g || g.flexibleCount === 0 ? null : An(
-    G,
-    g.fixedTotal,
-    g.flexibleCount
-  ), [g, G]), X = (e, t) => {
-    const r = jn(e, t);
-    return !C || !e ? r : Ne(e) ? {
-      ...r,
+  }, [x, l, y]), he = v(
+    () => b ? kn(M, b.minTableWidth) : null,
+    [M, b]
+  ), ge = Fn(
+    he,
+    M,
+    j
+  ), B = v(
+    () => On(he, M, j),
+    [he, M, j]
+  ), Ae = v(() => !b || b.flexibleCount === 0 ? null : zn(
+    B,
+    b.fixedTotal,
+    b.flexibleCount
+  ), [b, B]), X = (e, t) => {
+    const o = Kn(e, t);
+    return !x || !e ? o : Ie(e) ? {
+      ...o,
       width: e.maxWidth,
       minWidth: e.maxWidth,
       maxWidth: e.maxWidth
-    } : Fe == null ? r : {
-      ...r,
-      width: `${Fe}px`,
-      minWidth: e.minWidth ?? (I ? Be : `${oe}px`)
+    } : Ae == null ? o : {
+      ...o,
+      width: `${Ae}px`,
+      minWidth: e.minWidth ?? (y ? qe : `${re}px`)
     };
-  }, ye = y(
+  }, xe = v(
     () => new Map(l.map((e) => [e.id, e])),
     [l]
-  ), Vt = y(
-    () => In(l, W),
-    [l, W]
-  ), N = dn({
-    features: En,
-    data: o,
-    columns: Vt,
+  ), Kt = v(
+    () => Nn(l, R),
+    [l, R]
+  ), S = cn({
+    features: Tn,
+    data: r,
+    columns: Kt,
     getRowId: c,
-    enableSorting: Re,
+    enableSorting: Le,
     enableCellSpanning: !0,
-    enableRowSelection: $ !== "none",
-    enableMultiRowSelection: $ === "multiple",
-    getRowCanExpand: ue && H ? (e) => ue(e.original) : () => !1,
+    enableRowSelection: U !== "none",
+    enableMultiRowSelection: U === "multiple",
+    getRowCanExpand: ue && Z ? (e) => ue(e.original) : () => !1,
     state: {
       sorting: Lt,
-      columnVisibility: Tt,
-      columnOrder: Dt,
-      rowSelection: Ot,
+      columnVisibility: Wt,
+      columnOrder: kt,
+      rowSelection: zt,
       expanded: Pt
     },
     onSortingChange: Rt,
-    onColumnVisibilityChange: Wt,
-    onColumnOrderChange: kt,
+    onColumnVisibilityChange: Dt,
+    onColumnOrderChange: Ot,
     onRowSelectionChange: At,
-    onExpandedChange: Zt
-  }), Y = $ !== "none", jt = !!(ue && H), Kt = Y ? 1 : 0, Ut = N.getVisibleLeafColumns().length, J = Math.max(
-    Ut + Kt,
+    onExpandedChange: Vt
+  }), Y = U !== "none", $t = !!(ue && Z), Ut = Y ? 1 : 0, Zt = S.getVisibleLeafColumns().length, J = Math.max(
+    Zt + Ut,
     1
-  ), $t = Math.max(N.getHeaderGroups().length, 1), L = N.getRowModel().rows, we = I && u ? /* @__PURE__ */ i(
+  ), Ht = Math.max(S.getHeaderGroups().length, 1), T = S.getRowModel().rows, ye = y && N ? /* @__PURE__ */ i(
     _n,
     {
-      value: pe,
-      defaultValue: u.defaultZoom,
+      value: V,
       minValue: _t,
-      maxValue: u.maxZoom,
-      step: u.step,
+      maxValue: N.maxZoom,
+      step: N.step,
       onChange: We,
+      onFitToViewport: Mt,
       isDisabled: Qe
     }
-  ) : null, Pe = ae ? ae({ zoomControl: we, zoomPercent: pe }) : nt, Ze = !ae && we ? /* @__PURE__ */ i("div", { className: "flex justify-end", children: we }) : null, Ht = !!(Pe || Ze || Le), qt = y(() => {
-    const e = I ? { zoom: M } : void 0;
-    return !C || !g ? I ? { ...e, width: "max-content", minWidth: "100%" } : void 0 : I ? {
+  ) : null, Fe = ae ? ae({ zoomControl: ye, zoomPercent: V }) : ot, Pe = !ae && ye ? /* @__PURE__ */ i("div", { className: "flex justify-end", children: ye }) : null, qt = !!(Fe || Pe || _e), Gt = v(() => {
+    const e = y ? {
+      zoom: j,
+      "--table-zoom-font-size": G ? `${G}px` : void 0
+    } : void 0;
+    return !x || !b ? y ? { ...e, width: "max-content", minWidth: "100%" } : void 0 : y ? {
       ...e,
       tableLayout: "fixed",
-      width: `${G ?? g.minTableWidth}px`
+      width: `${B ?? b.minTableWidth}px`
     } : {
       tableLayout: "fixed",
-      width: xe ? `${g.minTableWidth}px` : "100%"
+      width: ge ? `${b.minTableWidth}px` : "100%"
     };
   }, [
-    G,
-    C,
-    g,
-    xe,
-    I,
-    M
-  ]), Bt = re(
+    B,
+    x,
+    b,
+    ge,
+    y,
+    j,
+    G
+  ]), Bt = oe(
     null
-  ), [k, Gt] = ne(null), Xt = !!D, Yt = F(
-    (e, t, r) => {
-      if (Bt.current = { rowId: e, columnKey: t }, !Z) return;
-      const n = q;
-      n != null && n.anchor.rowId === e && n.anchor.columnKey === t && n.focus.rowId === e && n.focus.columnKey === t || Z(
-        fn({
+  ), [k, Xt] = Ne(null), Yt = !!W, Jt = A(
+    (e, t, o) => {
+      if (Bt.current = { rowId: e, columnKey: t }, !P) return;
+      const n = H;
+      n != null && n.anchor.rowId === e && n.anchor.columnKey === t && n.focus.rowId === e && n.focus.columnKey === t || P(
+        pn({
           rowId: e,
           columnKey: t,
-          sourceIndex: r ?? null
+          sourceIndex: o ?? null
         })
       );
     },
-    [Z, q]
-  ), Jt = F(
+    [P, H]
+  ), Qt = A(
     (e) => {
-      Gt((t) => t === e || t && e && t.rowId === e.rowId && t.columnKey === e.columnKey ? t : e);
+      Xt((t) => t === e || t && e && t.rowId === e.rowId && t.columnKey === e.columnKey ? t : e);
     },
     []
-  ), Q = !!Te && Nt !== !1, f = gn({
+  ), Q = !!Re && Et !== !1, u = xn({
     enabled: Q,
-    onReorderRows: Te,
-    containerRef: V
-  }), Qt = F(
-    (e, t, r) => {
+    onReorderRows: Re,
+    containerRef: D
+  }), en = A(
+    (e, t, o) => {
       var n;
       return {
         row: e.original,
         rowId: e.id,
         columnId: t,
-        value: r,
+        value: o,
         rowIndex: e.index,
-        sourceIndex: te(e.original, e.index),
-        isRowDragging: ((n = f.session) == null ? void 0 : n.active) === !0 && f.session.rowId === e.id,
-        startRowDrag: Q ? (s) => f.startDrag(
+        sourceIndex: ne(e.original, e.index),
+        isRowDragging: ((n = u.session) == null ? void 0 : n.active) === !0 && u.session.rowId === e.id,
+        startRowDrag: Q ? (s) => u.startDrag(
           s,
           e.id,
-          te(e.original, e.index) ?? e.index,
+          ne(e.original, e.index) ?? e.index,
           e.original
         ) : void 0
       };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [Q, f.startDrag, f.session]
-  ), Ce = L.map((e) => e.id).join("\0"), ve = y(
+    [Q, u.startDrag, u.session]
+  ), we = T.map((e) => e.id).join("\0"), ve = v(
+    () => we ? we.split("\0") : [],
+    [we]
+  ), Ce = S.getVisibleLeafColumns().map((e) => e.id).join("\0"), Se = v(
     () => Ce ? Ce.split("\0") : [],
     [Ce]
-  ), Se = N.getVisibleLeafColumns().map((e) => e.id).join("\0"), Ie = y(
-    () => Se ? Se.split("\0") : [],
-    [Se]
-  ), O = typeof Z == "function", z = bn({
+  ), O = typeof P == "function", ee = gn({
     enabled: O,
-    selection: q,
-    onSelectionChange: Z,
-    onCopyCells: vt,
-    onPasteCells: St,
-    onClearCells: It,
-    onActivateCell: D ? (e) => {
-      const t = L.find((r) => r.id === e.rowId);
-      t && D({
+    selection: H,
+    onSelectionChange: P,
+    onCopyCells: St,
+    onPasteCells: It,
+    onClearCells: Nt,
+    onActivateCell: W ? (e) => {
+      const t = T.find((o) => o.id === e.rowId);
+      t && W({
         row: t.original,
         rowId: e.rowId,
         columnId: e.columnKey,
         value: void 0,
         rowIndex: t.index,
-        sourceIndex: e.sourceIndex ?? te(t.original, t.index)
+        sourceIndex: e.sourceIndex ?? ne(t.original, t.index)
       });
     } : void 0,
-    activateOnSingleClick: Et,
-    containerRef: V,
+    activateOnSingleClick: Tt,
+    containerRef: D,
     rowIds: ve,
-    columnKeys: Ie
-  }), zt = y(() => {
-    if (!(P != null && P.length)) return L.map((n) => ({ kind: "row", row: n }));
-    const e = new Map(L.map((n) => [n.id, n])), t = /* @__PURE__ */ new Set(), r = [];
-    for (const n of P) {
-      const s = n.rowIds.map((x) => e.get(x)).filter((x) => x !== void 0);
-      s.length !== 0 && (r.push({
+    columnKeys: Se
+  }), tn = v(() => {
+    if (!(F != null && F.length)) return T.map((n) => ({ kind: "row", row: n }));
+    const e = new Map(T.map((n) => [n.id, n])), t = /* @__PURE__ */ new Set(), o = [];
+    for (const n of F) {
+      const s = n.rowIds.map((h) => e.get(h)).filter((h) => h !== void 0);
+      s.length !== 0 && (o.push({
         kind: "group",
         group: { id: n.id, label: n.label, rowCount: s.length }
-      }), s.forEach((x) => t.add(x.id)), !be.has(n.id) && s.forEach((x) => r.push({ kind: "row", row: x })));
+      }), s.forEach((h) => t.add(h.id)), !be.has(n.id) && s.forEach((h) => o.push({ kind: "row", row: h })));
     }
-    for (const n of L)
-      t.has(n.id) || r.push({ kind: "row", row: n });
-    return r;
-  }, [P, L, be]), en = (e) => {
-    const t = be.has(e.id), r = () => Mt(e.id);
+    for (const n of T)
+      t.has(n.id) || o.push({ kind: "row", row: n });
+    return o;
+  }, [F, T, be]), nn = (e) => {
+    const t = be.has(e.id), o = () => jt(e.id);
     return /* @__PURE__ */ i("tr", { className: "bg-secondary_subtle", children: /* @__PURE__ */ i(
       "td",
       {
         colSpan: J,
         className: d(
           !de && "py-1.5",
-          w && "border-r border-secondary last:border-r-0"
+          g && "border-r border-secondary last:border-r-0"
         ),
         children: de ? de({
           id: e.id,
           label: e.label,
           rowCount: e.rowCount,
           isCollapsed: t,
-          toggle: r
-        }) : /* @__PURE__ */ p(
+          toggle: o
+        }) : /* @__PURE__ */ m(
           "button",
           {
             type: "button",
             className: "flex w-full items-center gap-2 px-2 text-left text-xs font-medium text-secondary",
-            onClick: r,
+            onClick: o,
             "aria-expanded": !t,
             children: [
               /* @__PURE__ */ i(
-                Ue,
+                $e,
                 {
                   className: d(
                     "size-4 shrink-0 text-fg-quaternary transition-transform",
@@ -415,7 +415,7 @@ function Un({
                 }
               ),
               /* @__PURE__ */ i("span", { className: "truncate", children: e.label || "(Empty)" }),
-              /* @__PURE__ */ p("span", { className: "text-tertiary", children: [
+              /* @__PURE__ */ m("span", { className: "text-tertiary", children: [
                 "(",
                 e.rowCount,
                 ")"
@@ -425,60 +425,61 @@ function Un({
         )
       }
     ) }, `group-${e.id}`);
-  }, Me = /* @__PURE__ */ p(
+  }, Ve = /* @__PURE__ */ m(
     "div",
     {
       ref: (e) => {
-        V.current = e, typeof B == "function" ? B(e) : B && (B.current = e);
+        D.current = e, typeof q == "function" ? q(e) : q && (q.current = e);
       },
-      onPointerDownCapture: O ? z.onPointerDownCapture : void 0,
-      onKeyDownCapture: O ? z.onKeyDownCapture : void 0,
-      onClickCapture: O ? z.onClickCapture : void 0,
-      onDoubleClickCapture: O ? z.onDoubleClickCapture : void 0,
+      onPointerDownCapture: O ? ee.onPointerDownCapture : void 0,
+      onKeyDownCapture: O ? ee.onKeyDownCapture : void 0,
+      onClickCapture: O ? ee.onClickCapture : void 0,
+      onDoubleClickCapture: O ? ee.onDoubleClickCapture : void 0,
       className: d(
         "w-full rounded-lg bg-primary",
-        I || !C || xe ? "overflow-x-auto" : "overflow-x-hidden",
-        w && "rounded-xl border border-secondary",
-        ze
+        y || !x || ge ? "overflow-x-auto" : "overflow-x-hidden",
+        g && "rounded-xl border border-secondary",
+        et
       ),
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ m(
           "table",
           {
-            "aria-label": T,
+            "aria-label": L,
+            "data-table-zoom-typography": G !== void 0 ? "" : void 0,
             className: d(
               "w-full border-separate border-spacing-0 overflow-x-hidden",
-              et
+              tt
             ),
-            style: qt,
+            style: Gt,
             children: [
               /* @__PURE__ */ i(
                 "thead",
                 {
                   className: d(
                     "sticky top-0 z-30 rounded-t-lg bg-secondary_subtle [&>tr>th]:h-9 [&>tr>th:first-child]:rounded-tl-lg [&>tr>th:last-child]:rounded-tr-lg",
-                    w && "[&>tr>th]:border-b [&>tr>th]:border-secondary [&>tr>th:first-child]:rounded-bl-none [&>tr>th:last-child]:rounded-br-none",
-                    tt
+                    g && "[&>tr>th]:border-b [&>tr>th]:border-secondary [&>tr>th:first-child]:rounded-bl-none [&>tr>th:last-child]:rounded-br-none",
+                    nt
                   ),
-                  children: N.getHeaderGroups().map((e, t) => /* @__PURE__ */ p("tr", { children: [
+                  children: S.getHeaderGroups().map((e, t) => /* @__PURE__ */ m("tr", { children: [
                     Y && t === 0 ? /* @__PURE__ */ i(
                       "th",
                       {
-                        rowSpan: $t,
+                        rowSpan: Ht,
                         className: d(
                           "relative w-10 min-w-10 p-0 align-middle",
-                          w && "border-r border-secondary"
+                          g && "border-r border-secondary"
                         ),
-                        children: $ === "multiple" ? /* @__PURE__ */ i(
+                        children: U === "multiple" ? /* @__PURE__ */ i(
                           "div",
                           {
                             className: "flex items-center justify-center",
-                            onClick: (r) => r.stopPropagation(),
+                            onClick: (o) => o.stopPropagation(),
                             children: /* @__PURE__ */ i(
-                              $e,
+                              Ue,
                               {
-                                checked: N.getIsAllRowsSelected() ? !0 : N.getIsSomeRowsSelected() ? "indeterminate" : !1,
-                                onCheckedChange: (r) => N.toggleAllRowsSelected(r === !0),
+                                checked: S.getIsAllRowsSelected() ? !0 : S.getIsSomeRowsSelected() ? "indeterminate" : !1,
+                                onCheckedChange: (o) => S.toggleAllRowsSelected(o === !0),
                                 "aria-label": "Select all rows",
                                 className: "items-center justify-center"
                               }
@@ -487,27 +488,27 @@ function Un({
                         ) : null
                       }
                     ) : null,
-                    e.headers.map((r) => {
-                      if (r.rowSpan === 0) return null;
-                      const n = ye.get(r.column.id), s = r.column.getIsSorted(), x = Re && !r.isPlaceholder && r.column.getCanSort(), a = n != null && n.renderHeader ? n.renderHeader({
+                    e.headers.map((o) => {
+                      if (o.rowSpan === 0) return null;
+                      const n = xe.get(o.column.id), s = o.column.getIsSorted(), h = Le && !o.isPlaceholder && o.column.getCanSort(), a = n != null && n.renderHeader ? n.renderHeader({
                         columnId: n.id,
                         label: n.header
-                      }) : r.isPlaceholder ? null : N.FlexRender({ header: r });
+                      }) : o.isPlaceholder ? null : S.FlexRender({ header: o });
                       return /* @__PURE__ */ i(
                         "th",
                         {
-                          colSpan: r.colSpan,
-                          rowSpan: r.rowSpan,
-                          scope: r.colSpan > 1 ? "colgroup" : "col",
+                          colSpan: o.colSpan,
+                          rowSpan: o.rowSpan,
+                          scope: o.colSpan > 1 ? "colgroup" : "col",
                           "aria-sort": s === "asc" ? "ascending" : s === "desc" ? "descending" : void 0,
                           style: X(n, !0),
                           className: d(
                             "relative overflow-hidden p-0 outline-hidden focus-within:z-1 focus-within:ring-2 focus-within:ring-focus-ring focus-within:ring-inset",
-                            Nn[h],
-                            w && "border-r border-secondary last:border-r-0",
+                            En[f],
+                            g && "border-r border-secondary last:border-r-0",
                             n == null ? void 0 : n.headerClassName
                           ),
-                          children: x ? /* @__PURE__ */ p(
+                          children: h ? /* @__PURE__ */ m(
                             "button",
                             {
                               type: "button",
@@ -515,12 +516,12 @@ function Un({
                                 "flex w-full items-center gap-1 overflow-hidden rounded outline-none",
                                 Ge(n == null ? void 0 : n.align)
                               ),
-                              onClick: r.column.getToggleSortingHandler(),
-                              "aria-label": `Sort by ${String((n == null ? void 0 : n.header) ?? r.column.id)}`,
+                              onClick: o.column.getToggleSortingHandler(),
+                              "aria-label": `Sort by ${String((n == null ? void 0 : n.header) ?? o.column.id)}`,
                               children: [
                                 /* @__PURE__ */ i("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-secondary", children: a }),
                                 s ? /* @__PURE__ */ i(
-                                  cn,
+                                  un,
                                   {
                                     className: d(
                                       "size-3 shrink-0 stroke-[3px] text-fg-quaternary",
@@ -528,7 +529,7 @@ function Un({
                                     )
                                   }
                                 ) : /* @__PURE__ */ i(
-                                  un,
+                                  mn,
                                   {
                                     size: 12,
                                     strokeWidth: 3,
@@ -548,17 +549,17 @@ function Un({
                             }
                           )
                         },
-                        r.id
+                        o.id
                       );
                     })
                   ] }, e.id))
                 }
               ),
-              /* @__PURE__ */ p("tbody", { children: [
-                S ? Array.from({ length: b }, (e, t) => /* @__PURE__ */ p(
+              /* @__PURE__ */ m("tbody", { children: [
+                C ? Array.from({ length: p }, (e, t) => /* @__PURE__ */ m(
                   "tr",
                   {
-                    className: He[h],
+                    className: Ze[f],
                     "aria-hidden": "true",
                     children: [
                       Y ? /* @__PURE__ */ i(
@@ -566,26 +567,26 @@ function Un({
                         {
                           className: d(
                             "w-10 min-w-10",
-                            w && "border-r border-secondary",
-                            !E && "border-b border-tertiary"
+                            g && "border-r border-secondary",
+                            !I && "border-b border-tertiary"
                           )
                         }
                       ) : null,
-                      N.getVisibleLeafColumns().map((r) => {
-                        const n = ye.get(r.id);
+                      S.getVisibleLeafColumns().map((o) => {
+                        const n = xe.get(o.id);
                         return /* @__PURE__ */ i(
                           "td",
                           {
                             style: X(n, !1),
                             className: d(
                               "relative overflow-hidden text-secondary",
-                              qe[h],
-                              w && "border-r border-secondary last:border-r-0",
-                              !E && "border-b border-tertiary",
+                              He[f],
+                              g && "border-r border-secondary last:border-r-0",
+                              !I && "border-b border-tertiary",
                               n == null ? void 0 : n.cellClassName
                             ),
                             children: /* @__PURE__ */ i(
-                              mn,
+                              fn,
                               {
                                 height: "14px",
                                 width: "75%",
@@ -593,60 +594,60 @@ function Un({
                               }
                             )
                           },
-                          r.id
+                          o.id
                         );
                       })
                     ]
                   },
                   `loading-${t}`
-                )) : L.length === 0 ? /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i(
+                )) : T.length === 0 ? /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i(
                   "td",
                   {
                     colSpan: J,
                     className: "border-b border-secondary px-3 py-3 text-left text-xs text-placeholder_subtle",
                     children: ie
                   }
-                ) }) : zt.map((e) => {
-                  var x;
+                ) }) : tn.map((e) => {
+                  var h;
                   if (e.kind === "group")
-                    return en(e.group);
-                  const t = e.row, r = jt && t.getCanExpand(), n = r && t.getIsExpanded(), s = t.getVisibleCells();
-                  return /* @__PURE__ */ p(an, { children: [
-                    /* @__PURE__ */ p(
+                    return nn(e.group);
+                  const t = e.row, o = $t && t.getCanExpand(), n = o && t.getIsExpanded(), s = t.getVisibleCells();
+                  return /* @__PURE__ */ m(dn, { children: [
+                    /* @__PURE__ */ m(
                       "tr",
                       {
                         ...Q ? {
                           [Cn]: t.id,
-                          [wn]: String(
-                            te(t.original, t.index) ?? t.index
+                          [vn]: String(
+                            ne(t.original, t.index) ?? t.index
                           )
                         } : {},
-                        style: (x = f.session) != null && x.active && f.session.rowId === t.id ? yn : void 0,
+                        style: (h = u.session) != null && h.active && u.session.rowId === t.id ? wn : void 0,
                         className: d(
                           // `focus-visible`, not `focus-within`: the ring marks the row itself being keyboard-focused.
                           // `focus-within` also fires for anything inside it, so an open cell
                           // editor outlined the entire row.
                           "relative outline-focus-ring transition-colors hover:bg-secondary_subtle focus-visible:outline-2 focus-visible:-outline-offset-2",
-                          He[h],
+                          Ze[f],
                           t.getIsSelected() && "bg-secondary",
                           le && "cursor-pointer",
                           se == null ? void 0 : se(t.original)
                         ),
                         onClick: (a) => {
-                          !le || Xe(a.target) || le(t.original);
+                          !le || Be(a.target) || le(t.original);
                         },
-                        onMouseEnter: U ? () => U(t.original, !0) : void 0,
-                        onMouseLeave: U ? () => U(t.original, !1) : void 0,
+                        onMouseEnter: $ ? () => $(t.original, !0) : void 0,
+                        onMouseLeave: $ ? () => $(t.original, !1) : void 0,
                         children: [
                           Y ? /* @__PURE__ */ i(
                             "td",
                             {
                               className: d(
                                 "relative w-10 min-w-10 p-0 text-center",
-                                w && "border-r border-secondary",
+                                g && "border-r border-secondary",
                                 // Matches the data cells, so the row separator
                                 // runs the full width of the table.
-                                !E && !n && "border-b border-tertiary"
+                                !I && !n && "border-b border-tertiary"
                               ),
                               children: /* @__PURE__ */ i(
                                 "div",
@@ -655,7 +656,7 @@ function Un({
                                   onClick: (a) => a.stopPropagation(),
                                   onKeyDown: (a) => a.stopPropagation(),
                                   children: /* @__PURE__ */ i(
-                                    $e,
+                                    Ue,
                                     {
                                       checked: t.getIsSelected(),
                                       onCheckedChange: (a) => t.toggleSelected(a === !0),
@@ -669,36 +670,36 @@ function Un({
                           ) : null,
                           s.map((a, Ke) => {
                             if (a.getIsCovered()) return null;
-                            const v = ye.get(a.column.id);
-                            if (!v) return null;
-                            const K = Qt(
+                            const w = xe.get(a.column.id);
+                            if (!w) return null;
+                            const K = en(
                               t,
-                              v.id,
+                              w.id,
                               a.getValue()
-                            ), tn = v.renderCell ? v.renderCell(K) : String(a.getValue() ?? ""), _ = O ? pn(
-                              q,
+                            ), on = w.renderCell ? w.renderCell(K) : String(a.getValue() ?? ""), E = O ? bn(
+                              H,
                               t.id,
-                              v.id,
+                              w.id,
                               ve,
-                              Ie
-                            ) : null, ee = !!(_ != null && _.inRange), nn = (k == null ? void 0 : k.rowId) === t.id && (k == null ? void 0 : k.columnKey) === v.id;
+                              Se
+                            ) : null, te = !!(E != null && E.inRange), rn = (k == null ? void 0 : k.rowId) === t.id && (k == null ? void 0 : k.columnKey) === w.id;
                             return /* @__PURE__ */ i(
                               "td",
                               {
                                 colSpan: a.getColSpan(),
                                 rowSpan: a.getRowSpan(),
-                                style: ee && _ ? {
-                                  ...X(v, !1),
+                                style: te && E ? {
+                                  ...X(w, !1),
                                   boxShadow: hn(
-                                    _.edges
+                                    E.edges
                                   )
-                                } : X(v, !1),
+                                } : X(w, !1),
                                 "data-table-component-cell": "",
                                 "data-grid-cell": "",
                                 "data-grid-row-id": t.id,
-                                "data-grid-col-key": v.id,
+                                "data-grid-col-key": w.id,
                                 "data-grid-source-index": K.sourceIndex ?? void 0,
-                                tabIndex: D ? 0 : void 0,
+                                tabIndex: W ? 0 : void 0,
                                 className: d(
                                   // `overflow-hidden`, never `overflow-x-hidden`: when `overflow-x` is not
                                   // `visible` the browser computes `overflow-y` to `auto`, turning
@@ -708,24 +709,24 @@ function Un({
                                   // The cell holding an open editor must not clip it: a wrapped
                                   // multi-line value has to be visible, and the row only grows
                                   // around content the cell is allowed to show.
-                                  nn ? "z-1 overflow-visible" : "overflow-hidden",
-                                  qe[h],
-                                  Vn(v.align),
-                                  w && "border-r border-secondary last:border-r-0",
-                                  !E && !n && !ee && "border-b border-tertiary",
-                                  ee && "z-1 outline-hidden",
-                                  ee && !(_ != null && _.isAnchor) && "bg-utility-brand-25",
-                                  v.cellClassName
+                                  rn ? "z-1 overflow-visible" : "overflow-hidden",
+                                  He[f],
+                                  Mn(w.align),
+                                  g && "border-r border-secondary last:border-r-0",
+                                  !I && !n && !te && "border-b border-tertiary",
+                                  te && "z-1 outline-hidden",
+                                  te && !(E != null && E.isAnchor) && "bg-utility-brand-25",
+                                  w.cellClassName
                                 ),
-                                onClick: (R) => {
-                                  me == null || me(K), Ke === 0 && r && Xe(R.target) && R.stopPropagation();
+                                onClick: (_) => {
+                                  me == null || me(K), Ke === 0 && o && Be(_.target) && _.stopPropagation();
                                 },
                                 onDoubleClick: () => fe == null ? void 0 : fe(K),
-                                onKeyDown: (R) => {
-                                  R.key !== "Enter" || !D || (R.preventDefault(), D(K));
+                                onKeyDown: (_) => {
+                                  _.key !== "Enter" || !W || (_.preventDefault(), W(K));
                                 },
-                                children: /* @__PURE__ */ p("div", { className: "flex min-w-0 items-center gap-2", children: [
-                                  Ke === 0 && r ? /* @__PURE__ */ i(
+                                children: /* @__PURE__ */ m("div", { className: "flex min-w-0 items-center gap-2", children: [
+                                  Ke === 0 && o ? /* @__PURE__ */ i(
                                     "button",
                                     {
                                       type: "button",
@@ -736,13 +737,13 @@ function Un({
                                       "aria-label": n ? "Collapse row" : "Expand row",
                                       "aria-expanded": n,
                                       "aria-controls": `${t.id}-detail`,
-                                      onClick: (R) => {
-                                        R.stopPropagation(), t.toggleExpanded();
+                                      onClick: (_) => {
+                                        _.stopPropagation(), t.toggleExpanded();
                                       },
-                                      children: /* @__PURE__ */ i(Ue, { className: "size-4 text-fg-quaternary" })
+                                      children: /* @__PURE__ */ i($e, { className: "size-4 text-fg-quaternary" })
                                     }
                                   ) : null,
-                                  /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: tn })
+                                  /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: on })
                                 ] })
                               },
                               a.id
@@ -751,12 +752,12 @@ function Un({
                         ]
                       }
                     ),
-                    n && H ? /* @__PURE__ */ i(
+                    n && Z ? /* @__PURE__ */ i(
                       "tr",
                       {
                         id: `${t.id}-detail`,
                         className: "relative bg-secondary_subtle",
-                        children: /* @__PURE__ */ i("td", { colSpan: J, className: "p-0", children: H({
+                        children: /* @__PURE__ */ i("td", { colSpan: J, className: "p-0", children: Z({
                           row: t.original,
                           rowId: t.id,
                           colSpan: J,
@@ -766,44 +767,44 @@ function Un({
                     ) : null
                   ] }, t.id);
                 }),
-                !S && rt
+                !C && rt
               ] })
             ]
           }
         ),
-        ((je = f.session) == null ? void 0 : je.active) && /* @__PURE__ */ p(rn, { children: [
-          /* @__PURE__ */ i(vn, { session: f.session }),
-          f.session.dropLineY !== null && /* @__PURE__ */ i(
-            Sn,
+        ((Me = u.session) == null ? void 0 : Me.active) && /* @__PURE__ */ m(sn, { children: [
+          /* @__PURE__ */ i(Sn, { session: u.session }),
+          u.session.dropLineY !== null && /* @__PURE__ */ i(
+            In,
             {
-              y: f.session.dropLineY,
-              left: f.session.dropLineLeft,
-              width: f.session.dropLineWidth
+              y: u.session.dropLineY,
+              left: u.session.dropLineLeft,
+              width: u.session.dropLineWidth
             }
           )
         ] })
       ]
     }
-  ), Ve = Ht ? /* @__PURE__ */ p("div", { className: d("flex flex-col gap-3", _e), children: [
+  ), je = qt ? /* @__PURE__ */ m("div", { className: d("flex flex-col gap-3", Te), children: [
+    Fe,
     Pe,
-    Ze,
-    Me,
-    Le
-  ] }) : /* @__PURE__ */ i("div", { className: _e, children: Me });
-  return Xt ? /* @__PURE__ */ i(
-    xn,
+    Ve,
+    _e
+  ] }) : /* @__PURE__ */ i("div", { className: Te, children: Ve });
+  return Yt ? /* @__PURE__ */ i(
+    yn,
     {
       rowIds: ve,
-      columnKeys: Ie,
-      containerRef: V,
-      onSelectCell: Yt,
-      onEditingCellChange: Jt,
-      children: Ve
+      columnKeys: Se,
+      containerRef: D,
+      onSelectCell: Jt,
+      onEditingCellChange: Qt,
+      children: je
     }
-  ) : Ve;
+  ) : je;
 }
-const lr = on(Un);
+const uo = ln(Un);
 export {
-  lr as TableComponent,
-  lr as default
+  uo as TableComponent,
+  uo as default
 };