@pibit.ai/cure-design-system 0.4.0 → 0.5.0

package/dist/patterns/table/table.js

@@ -1,133 +1,133 @@
-import { jsxs as u, jsx as e, Fragment as V } from "react/jsx-runtime";
-import { forwardRef as F, useContext as b, createContext as G, useState as R, isValidElement as B, useRef as L, useEffect as J, Children as Q, cloneElement as X } from "react";
-import { Edit01 as Y, Copy01 as Z, Trash01 as ee, HelpCircle as te, ArrowDown as re, ChevronSelectorVertical as oe, ChevronRight as ne } from "@untitledui/icons";
-import { Table as se, useTableOptions as C, Cell as T, TableBody as ie, Column as S, Group as le, TableHeader as ae, Collection as A, Row as D } from "react-aria-components";
-import { cn as p } from "../../utils/cn.js";
+import { jsxs as h, jsx as e, Fragment as V } from "react/jsx-runtime";
+import { forwardRef as F, useContext as N, createContext as G, useState as R, isValidElement as k, useRef as J, useEffect as Q, cloneElement as _, Children as X } from "react";
+import { Edit01 as Y, Copy01 as Z, Trash01 as ee, HelpCircle as te, ArrowDown as re, ChevronSelectorVertical as oe, ChevronRight as se } from "@untitledui/icons";
+import { Table as ne, useTableOptions as T, Cell as z, TableBody as ie, Column as H, Group as le, TableHeader as ae, Collection as A, Row as B } from "react-aria-components";
+import { cn as d } from "../../utils/cn.js";
 import { isWithinCellEditor as ce } from "./useGridKeyboardNavigation.js";
 import { Badge as de } from "../../primitives/badge/badge.js";
-import { Dropdown as w } from "../../primitives/dropdown/dropdown.js";
-import { Tooltip as E, TooltipTrigger as q } from "../../primitives/tooltip/tooltip.js";
-import { Checkbox as O } from "../../primitives/checkbox/checkbox.js";
-const be = () => /* @__PURE__ */ u(w.Root, { children: [
-  /* @__PURE__ */ e(w.DotsButton, {}),
-  /* @__PURE__ */ e(w.Popover, { className: "w-min", children: /* @__PURE__ */ u(w.Menu, { children: [
-    /* @__PURE__ */ e(w.Item, { icon: Y, children: /* @__PURE__ */ e("span", { className: "pr-4", children: "Edit" }) }),
-    /* @__PURE__ */ e(w.Item, { icon: Z, children: /* @__PURE__ */ e("span", { className: "pr-4", children: "Copy link" }) }),
-    /* @__PURE__ */ e(w.Item, { icon: ee, children: /* @__PURE__ */ e("span", { className: "pr-4", children: "Delete" }) })
+import { Dropdown as b } from "../../primitives/dropdown/dropdown.js";
+import { Tooltip as O, TooltipTrigger as P } from "../../primitives/tooltip/tooltip.js";
+import { Checkbox as M } from "../../primitives/checkbox/checkbox.js";
+const be = () => /* @__PURE__ */ h(b.Root, { children: [
+  /* @__PURE__ */ e(b.DotsButton, {}),
+  /* @__PURE__ */ e(b.Popover, { className: "w-min", children: /* @__PURE__ */ h(b.Menu, { children: [
+    /* @__PURE__ */ e(b.Item, { icon: Y, children: /* @__PURE__ */ e("span", { className: "pr-4", children: "Edit" }) }),
+    /* @__PURE__ */ e(b.Item, { icon: Z, children: /* @__PURE__ */ e("span", { className: "pr-4", children: "Copy link" }) }),
+    /* @__PURE__ */ e(b.Item, { icon: ee, children: /* @__PURE__ */ e("span", { className: "pr-4", children: "Delete" }) })
   ] }) })
-] }), g = G({
+] }), w = G({
   size: "sm",
   expandedRows: /* @__PURE__ */ new Set(),
   toggleRow: () => {
   },
   inlineSelection: !1
-}), P = F(({ children: n, className: i, size: s = "md", ...c }, o) => {
-  const t = L(null), [m, f] = R(!1), [a, x] = R(/* @__PURE__ */ new Set());
-  J(() => {
+}), W = F(({ children: s, className: i, size: n = "md", ...a }, o) => {
+  const t = J(null), [u, f] = R(!1), [l, p] = R(/* @__PURE__ */ new Set());
+  Q(() => {
     const r = t.current;
     if (!r) return;
-    const l = () => {
-      const { scrollWidth: v, clientWidth: z } = r;
-      f(v > z);
+    const y = () => {
+      const { scrollWidth: v, clientWidth: m } = r;
+      f(v > m);
     };
-    l();
-    const d = new ResizeObserver(l);
-    return d.observe(r), () => {
-      d.disconnect();
+    y();
+    const c = new ResizeObserver(y);
+    return c.observe(r), () => {
+      c.disconnect();
     };
   }, []);
-  const h = (r) => {
-    x((l) => {
-      const d = new Set(l);
-      return d.has(r) ? d.delete(r) : d.add(r), d;
+  const x = (r) => {
+    p((y) => {
+      const c = new Set(y);
+      return c.has(r) ? c.delete(r) : c.add(r), c;
     });
   };
-  return /* @__PURE__ */ e(g.Provider, { value: { size: s, hasOverflow: m, expandedRows: a, toggleRow: h }, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(w.Provider, { value: { size: n, hasOverflow: u, expandedRows: l, toggleRow: x }, children: /* @__PURE__ */ e(
     "div",
     {
       ref: (r) => {
         t.current = r, typeof o == "function" ? o(r) : o && (o.current = r);
       },
-      ...c,
-      className: p("overflow-hidden rounded-lg bg-primary", i),
-      children: n
+      ...a,
+      className: d("overflow-hidden rounded-lg bg-primary", i),
+      children: s
     }
   ) });
 });
-P.displayName = "TableCardRoot";
-const _ = ({
-  title: n,
+W.displayName = "TableCardRoot";
+const j = ({
+  title: s,
   badge: i,
-  description: s,
-  contentTrailing: c,
+  description: n,
+  contentTrailing: a,
   className: o
 }) => {
-  const { size: t } = b(g);
-  return /* @__PURE__ */ u(
+  const { size: t } = N(w);
+  return /* @__PURE__ */ h(
     "div",
     {
-      className: p(
+      className: d(
         "relative flex flex-col items-start gap-4 border-b border-tertiary bg-primary px-4 md:flex-row",
         t === "sm" ? "py-2 md:px-4" : t === "xs" ? "py-0 md:px-3" : "py-3 md:px-6",
         o
       ),
       children: [
-        /* @__PURE__ */ u("div", { className: "flex flex-1 flex-col gap-0.5", children: [
-          /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ h("div", { className: "flex flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e(
               "h2",
               {
-                className: p(
+                className: d(
                   "font-semibold text-primary",
                   t === "sm" ? "text-md" : t === "xs" ? "text-sm" : "text-lg"
                 ),
-                children: n
+                children: s
               }
             ),
-            i ? B(i) ? i : /* @__PURE__ */ e(de, { color: "brand", size: "sm", children: i }) : null
+            i ? k(i) ? i : /* @__PURE__ */ e(de, { color: "brand", size: "sm", children: i }) : null
           ] }),
-          s && /* @__PURE__ */ e("p", { className: p("text-sm text-tertiary", t === "xs" ? "text-xs" : "text-sm"), children: s })
+          n && /* @__PURE__ */ e("p", { className: d("text-sm text-tertiary", t === "xs" ? "text-xs" : "text-sm"), children: n })
         ] }),
-        c
+        a
       ]
     }
   );
 };
-_.displayName = "TableCardHeader";
-const W = ({
-  className: n,
+j.displayName = "TableCardHeader";
+const I = ({
+  className: s,
   size: i = "sm",
-  isEditable: s = !1,
-  inlineSelection: c = !1,
+  isEditable: n = !1,
+  inlineSelection: a = !1,
   ...o
 }) => {
-  const t = b(g), [m, f] = R(/* @__PURE__ */ new Set()), a = (t == null ? void 0 : t.expandedRows) ?? m, x = (t == null ? void 0 : t.toggleRow) ?? ((r) => {
-    f((l) => {
-      const d = new Set(l);
-      return d.has(r) ? d.delete(r) : d.add(r), d;
+  const t = N(w), [u, f] = R(/* @__PURE__ */ new Set()), l = (t == null ? void 0 : t.expandedRows) ?? u, p = (t == null ? void 0 : t.toggleRow) ?? ((r) => {
+    f((y) => {
+      const c = new Set(y);
+      return c.has(r) ? c.delete(r) : c.add(r), c;
     });
-  }), h = /* @__PURE__ */ e(
-    se,
+  }), x = /* @__PURE__ */ e(
+    ne,
     {
-      className: (r) => p(
+      className: (r) => d(
         "w-full overflow-x-hidden",
         i === "xs" && "px-3 py-0",
-        typeof n == "function" ? n(r) : n
+        typeof s == "function" ? s(r) : s
       ),
       ...o
     }
   );
   return /* @__PURE__ */ e(
-    g.Provider,
+    w.Provider,
     {
       value: {
         size: (t == null ? void 0 : t.size) ?? i,
         hasOverflow: t == null ? void 0 : t.hasOverflow,
-        expandedRows: a,
-        toggleRow: x,
-        inlineSelection: c
+        expandedRows: l,
+        toggleRow: p,
+        inlineSelection: a
       },
-      children: s ? /* @__PURE__ */ e(
+      children: n ? /* @__PURE__ */ e(
         "div",
         {
           onKeyDownCapture: (r) => {
@@ -143,202 +143,228 @@ const W = ({
               " "
             ])).has(r.key) && ce(r.target) && r.stopPropagation();
           },
-          children: h
+          children: x
         }
-      ) : h
+      ) : x
     }
   );
 };
-W.displayName = "Table";
-const j = ({
-  columns: n,
+I.displayName = "Table";
+const K = ({
+  columns: s,
   children: i,
-  bordered: s = !1,
-  hasExpandableRows: c = !1,
+  bordered: n = !1,
+  hasExpandableRows: a = !1,
   className: o,
   ...t
 }) => {
-  const { size: m, inlineSelection: f } = b(g), { selectionBehavior: a, selectionMode: x } = C();
-  return /* @__PURE__ */ u(
+  const { size: u, inlineSelection: f } = N(w), { selectionBehavior: l, selectionMode: p } = T();
+  return /* @__PURE__ */ h(
     ae,
     {
       ...t,
-      className: (h) => p(
-        "sticky top-0 z-30 h-9 rounded-t-lg bg-secondary_subtle [&>tr>th:first-child]:rounded-tl-lg [&>tr>th:last-child]:rounded-tr-lg",
-        s && "[&>tr>th]:after:pointer-events-none [&>tr>th]:after:absolute [&>tr>th]:after:inset-x-0 [&>tr>th]:after:bottom-0 [&>tr>th]:after:h-px [&>tr>th]:after:bg-border-tertiary [&>tr>th]:focus-visible:after:bg-transparent",
-        typeof o == "function" ? o(h) : o
+      className: (x) => 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",
+        n && "[&>tr>th]:after:pointer-events-none [&>tr>th]:after:absolute [&>tr>th]:after:inset-x-0 [&>tr>th]:after:bottom-0 [&>tr>th]:after:h-px [&>tr>th]:after:bg-border-tertiary [&>tr>th]:focus-visible:after:bg-transparent",
+        typeof o == "function" ? o(x) : o
       ),
       children: [
-        c && /* @__PURE__ */ e(S, { className: p("relative p-0", m === "sm" ? "w-9" : "w-11") }),
-        a === "toggle" && !f && /* @__PURE__ */ e(S, { className: p("relative p-0", m === "sm" ? "w-9" : "w-11"), children: x === "multiple" && /* @__PURE__ */ e("div", { className: "flex items-start", children: /* @__PURE__ */ e(O, { slot: "selection" }) }) }),
-        /* @__PURE__ */ e(A, { items: n, children: i })
+        a && /* @__PURE__ */ e(H, { className: d("relative p-0", u === "sm" ? "w-9" : "w-11") }),
+        l === "toggle" && !f && /* @__PURE__ */ e(H, { className: d("relative p-0", u === "sm" ? "w-9" : "w-11"), children: p === "multiple" && /* @__PURE__ */ e("div", { className: "flex items-start", children: /* @__PURE__ */ e(M, { className: "hidden", slot: "selection" }) }) }),
+        /* @__PURE__ */ e(A, { items: s, children: i })
       ]
     }
   );
 };
-j.displayName = "TableHeader";
-const K = ({
-  className: n,
+K.displayName = "TableHeader";
+const $ = ({
+  className: s,
   tooltip: i,
-  label: s,
-  children: c,
+  label: n,
+  children: a,
   sticky: o,
   stickyOffset: t = 0,
-  headerCellClass: m,
+  headerCellClass: u,
   tooltipHeader: f = !1,
-  ...a
+  headerAction: l,
+  ...p
 }) => {
-  const { selectionBehavior: x } = C(), { size: h, inlineSelection: r } = b(g);
+  const { selectionBehavior: x } = T(), { size: r, inlineSelection: y } = N(w), [c, v] = R(!1);
   return /* @__PURE__ */ e(
-    S,
+    H,
     {
-      ...a,
-      style: (l) => {
-        const d = o ? {
+      ...p,
+      onMouseEnter: () => v(!0),
+      onMouseLeave: () => v(!1),
+      style: (m) => {
+        const S = o ? {
           position: "sticky",
           [o]: t,
-          zIndex: 30
+          zIndex: 20
         } : {};
-        return { ...typeof a.style == "function" ? a.style(l) : a.style || {}, ...d };
+        return { ...typeof p.style == "function" ? p.style(m) : p.style || {}, ...S };
       },
-      className: (l) => p(
+      className: (m) => d(
         "relative p-0 outline-hidden focus-visible:z-1 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset",
-        h === "xs" && "px-3 py-0",
-        h === "sm" && "px-4 py-2",
-        h === "md" && "px-6 py-2",
-        x === "toggle" && !r && "nth-2:pl-3",
+        r === "xs" && "px-3 py-0",
+        r === "sm" && "px-4 py-2",
+        r === "md" && "px-6 py-2",
+        x === "toggle" && !y && "nth-2:pl-3",
         o && "bg-secondary",
-        l.allowsSorting && "cursor-pointer",
-        typeof n == "function" ? n(l) : n
+        m.allowsSorting && "cursor-pointer",
+        typeof s == "function" ? s(m) : s
       ),
-      children: (l) => /* @__PURE__ */ u(le, { className: p("flex items-center gap-1", m), children: [
-        f ? /* @__PURE__ */ e(E, { title: s, placement: "top", children: /* @__PURE__ */ e(q, { className: "cursor-pointer overflow-hidden text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover", children: /* @__PURE__ */ u("div", { className: "flex items-center gap-1 overflow-hidden", children: [
-          s && /* @__PURE__ */ e("span", { className: "overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-secondary", children: s }),
-          typeof c == "function" ? c(l) : c
-        ] }) }) }) : /* @__PURE__ */ u("div", { className: "flex items-center gap-1 overflow-hidden", children: [
-          s && /* @__PURE__ */ e("span", { className: "overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-secondary", children: s }),
-          typeof c == "function" ? c(l) : c
-        ] }),
-        i && /* @__PURE__ */ e(E, { title: i, placement: "top", children: /* @__PURE__ */ e(q, { className: "cursor-pointer overflow-hidden text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover", children: /* @__PURE__ */ e(te, { className: "size-4" }) }) }),
-        l.allowsSorting && (l.sortDirection ? /* @__PURE__ */ e(
-          re,
-          {
-            className: p(
-              "size-3 stroke-[3px] text-fg-quaternary",
-              l.sortDirection === "ascending" && "rotate-180"
-            )
-          }
-        ) : /* @__PURE__ */ e(oe, { size: 12, strokeWidth: 3, className: "text-fg-quaternary" }))
-      ] })
+      children: (m) => /* @__PURE__ */ h(
+        le,
+        {
+          className: d(
+            "relative flex w-full min-w-0 items-center gap-1",
+            l && "pr-5"
+          ),
+          children: [
+            /* @__PURE__ */ h(
+              "div",
+              {
+                className: d(
+                  "flex min-w-0 flex-1 items-center gap-1 overflow-hidden",
+                  u
+                ),
+                children: [
+                  f ? /* @__PURE__ */ e(O, { title: n, placement: "top", children: /* @__PURE__ */ e(P, { className: "cursor-pointer overflow-hidden text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-1 overflow-hidden", children: [
+                    n && /* @__PURE__ */ e("span", { className: "overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-secondary", children: n }),
+                    typeof a == "function" ? a(m) : a
+                  ] }) }) }) : /* @__PURE__ */ h("div", { className: "flex items-center gap-1 overflow-hidden", children: [
+                    n && /* @__PURE__ */ e("span", { className: "overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-secondary", children: n }),
+                    typeof a == "function" ? a(m) : a
+                  ] }),
+                  i && /* @__PURE__ */ e(O, { title: i, placement: "top", children: /* @__PURE__ */ e(P, { className: "cursor-pointer overflow-hidden text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover", children: /* @__PURE__ */ e(te, { className: "size-4" }) }) }),
+                  m.allowsSorting && (m.sortDirection ? /* @__PURE__ */ e(
+                    re,
+                    {
+                      className: d(
+                        "size-3 stroke-[3px] text-fg-quaternary",
+                        m.sortDirection === "ascending" && "rotate-180"
+                      )
+                    }
+                  ) : /* @__PURE__ */ e(oe, { size: 12, strokeWidth: 3, className: "text-fg-quaternary" }))
+                ]
+              }
+            ),
+            l && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 flex items-center", children: k(l) ? _(l, {
+              isHeaderHovered: c
+            }) : l })
+          ]
+        }
+      )
     }
   );
 };
-K.displayName = "TableHead";
-const $ = ({
-  columns: n,
+$.displayName = "TableHead";
+const L = ({
+  columns: s,
   children: i,
-  className: s,
-  highlightSelectedRow: c = !0,
+  className: n,
+  highlightSelectedRow: a = !0,
   isExpandable: o = !1,
   renderExpandedContent: t,
-  expandedColSpan: m,
+  expandedColSpan: u,
   ...f
 }) => {
-  const { size: a, expandedRows: x, toggleRow: h, inlineSelection: r } = b(g), { selectionBehavior: l } = C(), d = typeof f.id == "string" ? f.id : String(f.id), v = x.has(d), M = o ? /* @__PURE__ */ e(
+  const { size: l, expandedRows: p, toggleRow: x, inlineSelection: r } = N(w), { selectionBehavior: y } = T(), c = typeof f.id == "string" ? f.id : String(f.id), v = p.has(c), S = o ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: (y) => {
-        y.stopPropagation(), h(d);
+      onClick: (g) => {
+        g.stopPropagation(), x(c);
       },
-      className: p(
+      className: d(
         "flex items-center justify-center transition-transform duration-200 ease-in-out cursor-pointer hover:bg-secondary_subtle rounded p-1 flex-shrink-0 -ml-1 mr-2",
         v && "rotate-90"
       ),
       "aria-label": v ? "Collapse row" : "Expand row",
-      children: /* @__PURE__ */ e(ne, { className: "size-4 text-fg-quaternary" })
+      children: /* @__PURE__ */ e(se, { className: "size-4 text-fg-quaternary" })
     }
-  ) : null, U = o ? (() => {
-    const y = Q.toArray(i);
-    if (y.length > 0 && B(y[0])) {
-      const H = y[0], k = H.props;
+  ) : null, E = o ? (() => {
+    const g = X.toArray(i);
+    if (g.length > 0 && k(g[0])) {
+      const D = g[0], q = D.props;
       return [
-        X(H, {
-          ...k,
-          children: /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
-            M,
-            k.children
+        _(D, {
+          ...q,
+          children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
+            S,
+            q.children
           ] })
         }),
-        ...y.slice(1)
+        ...g.slice(1)
       ];
     }
     return i;
   })() : i;
-  return /* @__PURE__ */ u(V, { children: [
-    /* @__PURE__ */ u(
-      D,
+  return /* @__PURE__ */ h(V, { children: [
+    /* @__PURE__ */ h(
+      B,
       {
         ...f,
-        className: (y) => p(
+        className: (g) => d(
           "relative outline-focus-ring transition-colors after:pointer-events-none hover:bg-secondary_subtle focus-visible:outline-2 focus-visible:-outline-offset-2",
-          a === "xs" ? "h-10" : a === "sm" ? "h-12" : a === "md" ? "h-18" : "h-10",
-          c && !r && "selected:bg-secondary",
+          l === "xs" ? "h-10" : l === "sm" ? "h-12" : l === "md" ? "h-18" : "h-10",
+          a && !r && "selected:bg-secondary",
           r && "selected:!bg-transparent",
           !v && "[&>td]:after:absolute [&>td]:after:inset-x-0 [&>td]:after:bottom-0 [&>td]:after:h-px [&>td]:after:w-full [&>td]:after:bg-border-tertiary last:[&>td]:after:hidden [&>td]:focus-visible:after:opacity-0 focus-visible:[&>td]:after:opacity-0",
-          typeof s == "function" ? s(y) : s
+          typeof n == "function" ? n(g) : n
         ),
         children: [
-          l === "toggle" && !r && /* @__PURE__ */ e(T, { className: p("relative p-0", a === "sm" ? "w-9" : "w-11"), children: /* @__PURE__ */ e("div", { className: "flex items-end", children: /* @__PURE__ */ e(O, { className: "hidden", slot: "selection" }) }) }),
-          /* @__PURE__ */ e(A, { items: n, children: U })
+          y === "toggle" && !r && /* @__PURE__ */ e(z, { className: d("relative p-0", l === "sm" ? "w-9" : "w-11"), children: /* @__PURE__ */ e("div", { className: "flex items-end", children: /* @__PURE__ */ e(M, { className: "hidden", slot: "selection" }) }) }),
+          /* @__PURE__ */ e(A, { items: s, children: E })
         ]
       }
     ),
-    o && v && t && /* @__PURE__ */ e(D, { id: `${d}-expanded`, className: "relative bg-secondary_subtle", children: /* @__PURE__ */ e(T, { className: "p-0", colSpan: m ?? (n == null ? void 0 : n.length) ?? 1, children: /* @__PURE__ */ e("div", { className: "w-full", children: t(f.value) }) }) })
+    o && v && t && /* @__PURE__ */ e(B, { id: `${c}-expanded`, className: "relative bg-secondary_subtle", children: /* @__PURE__ */ e(z, { className: "p-0", colSpan: u ?? (s == null ? void 0 : s.length) ?? 1, children: /* @__PURE__ */ e("div", { className: "w-full", children: t(f.value) }) }) })
   ] });
 };
-$.displayName = "TableRow";
-const I = ({ className: n, children: i, sticky: s, stickyOffset: c = 0, ...o }) => {
-  const { size: t, inlineSelection: m } = b(g), { selectionBehavior: f } = C();
+L.displayName = "TableRow";
+const U = ({ className: s, children: i, sticky: n, stickyOffset: a = 0, ...o }) => {
+  const { size: t, inlineSelection: u } = N(w), { selectionBehavior: f } = T();
   return /* @__PURE__ */ e(
-    T,
+    z,
     {
       ...o,
-      style: (a) => {
-        const x = s ? {
+      style: (l) => {
+        const p = n ? {
           position: "sticky",
-          [s]: c,
-          zIndex: 20,
+          [n]: a,
+          zIndex: 10,
           backgroundColor: "white",
-          boxShadow: s === "right" ? "inset 2px 0 0px 0px var(--color-border-tertiary)" : "inset -2px 0 0px 0px var(--color-border-tertiary)"
+          boxShadow: n === "right" ? "inset 2px 0 0px 0px var(--color-border-tertiary)" : "inset -2px 0 0px 0px var(--color-border-tertiary)"
         } : {};
-        return { ...typeof o.style == "function" ? o.style(a) : o.style || {}, ...x };
+        return { ...typeof o.style == "function" ? o.style(l) : o.style || {}, ...p };
       },
-      className: (a) => p(
+      className: (l) => d(
         "relative text-secondary outline-focus-ring focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2",
         t === "xs" && "p-0 px-3 py-0 text-xs",
         t === "sm" && "p-0 px-4 py-2 text-sm",
         t === "md" && "p-0 px-6 py-2 text-base",
-        f === "toggle" && !m && "nth-2:pl-3",
-        typeof n == "function" ? n(a) : n
+        f === "toggle" && !u && "nth-2:pl-3",
+        typeof s == "function" ? s(l) : s
       ),
       children: i
     }
   );
 };
-I.displayName = "TableCell";
+U.displayName = "TableCell";
 const Ne = {
-  Root: P,
-  Header: _
-}, N = W;
-N.Body = ie;
-N.Cell = I;
-N.Head = K;
-N.Header = j;
-N.Row = $;
+  Root: W,
+  Header: j
+}, C = I;
+C.Body = ie;
+C.Cell = U;
+C.Head = $;
+C.Header = K;
+C.Row = L;
 export {
-  N as Table,
+  C as Table,
   Ne as TableCard,
-  I as TableCell,
+  U as TableCell,
   be as TableRowActionsDropdown
 };

package/dist/patterns/table/tableUndoRedo.d.ts

@@ -0,0 +1,38 @@
+import { TableWrapperToolbarConfig, TableWrapperEditChrome } from './types';
+import { SummaryFooterRowProps } from './toolbar/SummaryFooter';
+import { CellAlignment, AggregationType } from './toolbar/tableToolbarHelpers';
+import { RowHeightOption } from './toolbar/RowHeightDropdown';
+import { LegacyFilterCondition, LegacySort } from './toolbar/legacyToolbarTypes';
+import { RowActionsConfig } from './toolbar/RowActionsMenu';
+import { ColumnMenuAction } from './toolbar/ColumnHeaderMenu';
+export type TableUndoSnapshot = {
+    hiddenColumns?: Set<string>;
+    columnOrder?: string[];
+    columnAlignments?: Map<string, CellAlignment>;
+    groupBy?: string | null;
+    showSummary?: boolean;
+    summaryAggregations?: Map<string, AggregationType>;
+    rowHeight?: RowHeightOption;
+    sorts?: LegacySort[];
+    filterConditions?: LegacyFilterCondition[];
+    data?: unknown[];
+};
+export type TableUndoSnapshotSources = {
+    toolbar?: TableWrapperToolbarConfig;
+    columnAlignments?: ReadonlyMap<string, CellAlignment>;
+    summaryFooterProps?: SummaryFooterRowProps;
+    /** When set, used for filter snapshots instead of `toolbar.filter.pendingConditions`. */
+    appliedFilterConditions?: readonly LegacyFilterCondition[];
+    data?: unknown[];
+    getData?: () => unknown[] | undefined;
+};
+export declare function captureTableUndoSnapshot(sources: TableUndoSnapshotSources): TableUndoSnapshot;
+export declare function applyTableUndoSnapshot(snapshot: TableUndoSnapshot, sources: TableUndoSnapshotSources & {
+    onDataRestore?: (data: unknown[]) => void;
+}): void;
+export declare function wrapToolbarWithUndoRedo(toolbar: TableWrapperToolbarConfig, commit: () => void): TableWrapperToolbarConfig;
+export declare function wrapSummaryFooterWithUndoRedo(props: SummaryFooterRowProps, commit: () => void): SummaryFooterRowProps;
+export declare function wrapEditChromeWithUndoRedo(editChrome: TableWrapperEditChrome, commit: () => void): TableWrapperEditChrome;
+export declare function wrapRowActionsWithUndoRedo<T extends Record<string, unknown>>(config: RowActionsConfig<T>, commit: () => void): RowActionsConfig<T>;
+export declare function wrapColumnHeaderActionWithUndoRedo(onColumnHeaderAction: (columnKey: string, action: ColumnMenuAction) => void, commit: () => void): (columnKey: string, action: ColumnMenuAction) => void;
+//# sourceMappingURL=tableUndoRedo.d.ts.map

package/dist/patterns/table/tableUndoRedo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableUndoRedo.d.ts","sourceRoot":"","sources":["../../../src/patterns/table/tableUndoRedo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,gBAAgB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,gBAAgB,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACtD,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;IAC3C,yFAAyF;IACzF,uBAAuB,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC3D,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,OAAO,EAAE,GAAG,SAAS,CAAC;CACvC,CAAC;AA4BF,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,wBAAwB,GAAG,iBAAiB,CAoB7F;AAED,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,wBAAwB,GAAG;IAAE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAA;CAAE,GAChF,IAAI,CAmCN;AAcD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,yBAAyB,EAClC,MAAM,EAAE,MAAM,IAAI,GACjB,yBAAyB,CAiF3B;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,qBAAqB,EAC5B,MAAM,EAAE,MAAM,IAAI,GACjB,qBAAqB,CAQvB;AAED,wBAAgB,0BAA0B,CACxC,UAAU,EAAE,sBAAsB,EAClC,MAAM,EAAE,MAAM,IAAI,GACjB,sBAAsB,CAYxB;AAED,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1E,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,MAAM,IAAI,GACjB,gBAAgB,CAAC,CAAC,CAAC,CAwBrB;AAED,wBAAgB,kCAAkC,CAChD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,EAC3E,MAAM,EAAE,MAAM,IAAI,GACjB,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAOvD"}