@pibit.ai/cure-design-system 0.3.16 → 1.0.0

package/dist/patterns/table/table.js

@@ -1,132 +1,137 @@
-import { jsx as o, jsxs as h, Fragment as V } from "react/jsx-runtime";
-import { forwardRef as W, useContext as g, createContext as F, useState as T, isValidElement as A, useRef as G, useEffect as L, Children as M, cloneElement as I } from "react";
-import { Table as B, useTableOptions as C, Cell as z, TableBody as J, Column as S, Group as Q, TableHeader as X, Collection as P, Row as O } from "react-aria-components";
-import { cn as c } from "../../utils/cn.js";
-import { Badge as Y } from "../../primitives/badge/badge.js";
-import { Icon as w } from "../../primitives/icon/icon.js";
-import { Checkbox as _ } from "../../primitives/checkbox/checkbox.js";
-const b = F({
-  size: "md",
+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 q, 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 B, Row as k } from "react-aria-components";
+import { cn as p } 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 D, TooltipTrigger as E } from "../../primitives/tooltip/tooltip.js";
+import { Checkbox as A } 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" }) })
+  ] }) })
+] }), g = G({
+  size: "sm",
   expandedRows: /* @__PURE__ */ new Set(),
   toggleRow: () => {
-  }
-}), D = W(({ children: r, className: n, size: i = "md", ...d }, e) => {
-  const s = G(null), [a, f] = T(!1), [p, l] = T(/* @__PURE__ */ new Set());
-  L(() => {
-    const t = s.current;
-    if (!t) return;
-    const x = () => {
-      const { scrollWidth: R, clientWidth: N } = t;
-      f(R > N);
+  },
+  inlineSelection: !1
+}), O = 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(() => {
+    const r = t.current;
+    if (!r) return;
+    const l = () => {
+      const { scrollWidth: v, clientWidth: z } = r;
+      f(v > z);
     };
-    x();
-    const m = new ResizeObserver(x);
-    return m.observe(t), () => {
-      m.disconnect();
+    l();
+    const d = new ResizeObserver(l);
+    return d.observe(r), () => {
+      d.disconnect();
     };
   }, []);
-  const u = (t) => {
-    l((x) => {
-      const m = new Set(x);
-      return m.has(t) ? m.delete(t) : m.add(t), m;
+  const h = (r) => {
+    x((l) => {
+      const d = new Set(l);
+      return d.has(r) ? d.delete(r) : d.add(r), d;
     });
   };
-  return /* @__PURE__ */ o(
-    b.Provider,
+  return /* @__PURE__ */ e(g.Provider, { value: { size: s, hasOverflow: m, expandedRows: a, toggleRow: h }, children: /* @__PURE__ */ e(
+    "div",
     {
-      value: { size: i, hasOverflow: a, expandedRows: p, toggleRow: u },
-      children: /* @__PURE__ */ o(
-        "div",
-        {
-          ref: (t) => {
-            s.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
-          },
-          ...d,
-          className: c(
-            "rounded-lg bg-primary overflow-x-auto overflow-y-clip",
-            n
-          ),
-          children: r
-        }
-      )
+      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
     }
-  );
+  ) });
 });
-D.displayName = "TableCardRoot";
-const E = ({
-  title: r,
-  badge: n,
-  description: i,
-  contentTrailing: d,
-  className: e
+O.displayName = "TableCardRoot";
+const P = ({
+  title: n,
+  badge: i,
+  description: s,
+  contentTrailing: c,
+  className: o
 }) => {
-  const { size: s } = g(b);
-  return /* @__PURE__ */ h(
+  const { size: t } = b(g);
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: c(
+      className: p(
         "relative flex flex-col items-start gap-4 border-b border-tertiary bg-primary px-4 md:flex-row",
-        s === "sm" ? "py-2 md:px-4" : s === "xs" ? "py-0 md:px-3" : "py-3 md:px-6",
-        e
+        t === "sm" ? "py-2 md:px-4" : t === "xs" ? "py-0 md:px-3" : "py-3 md:px-6",
+        o
       ),
       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__ */ o(
+        /* @__PURE__ */ u("div", { className: "flex flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(
               "h2",
               {
-                className: c(
+                className: p(
                   "font-semibold text-primary",
-                  s === "sm" ? "text-md" : s === "xs" ? "text-sm" : "text-lg"
+                  t === "sm" ? "text-md" : t === "xs" ? "text-sm" : "text-lg"
                 ),
-                children: r
+                children: n
               }
             ),
-            n ? A(n) ? n : /* @__PURE__ */ o(Y, { color: "brand", size: "sm", children: n }) : null
+            i ? q(i) ? i : /* @__PURE__ */ e(de, { color: "brand", size: "sm", children: i }) : null
           ] }),
-          i && /* @__PURE__ */ o(
-            "p",
-            {
-              className: c(
-                "text-tertiary",
-                s === "xs" ? "text-xs" : "text-sm"
-              ),
-              children: i
-            }
-          )
+          s && /* @__PURE__ */ e("p", { className: p("text-tertiary", t === "xs" ? "text-xs" : "text-sm"), children: s })
         ] }),
-        d
+        c
       ]
     }
   );
 };
-E.displayName = "TableCardHeader";
-const j = ({
-  className: r,
-  size: n = "md",
-  isEditable: i = !1,
-  ...d
+P.displayName = "TableCardHeader";
+const _ = ({
+  className: n,
+  size: i = "sm",
+  isEditable: s = !1,
+  inlineSelection: c = !1,
+  ...o
 }) => {
-  const e = g(b), [s, a] = T(/* @__PURE__ */ new Set()), f = (e == null ? void 0 : e.expandedRows) ?? s, p = (e == null ? void 0 : e.toggleRow) ?? ((l) => {
-    a((u) => {
-      const t = new Set(u);
-      return t.has(l) ? t.delete(l) : t.add(l), t;
+  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;
     });
-  });
-  return /* @__PURE__ */ o(
-    b.Provider,
+  }), h = /* @__PURE__ */ e(
+    se,
+    {
+      className: (r) => p(
+        "w-full overflow-x-hidden",
+        i === "xs" && "px-3 py-0",
+        typeof n == "function" ? n(r) : n
+      ),
+      ...o
+    }
+  );
+  return /* @__PURE__ */ e(
+    g.Provider,
     {
       value: {
-        size: (e == null ? void 0 : e.size) ?? n,
-        hasOverflow: e == null ? void 0 : e.hasOverflow,
-        expandedRows: f,
-        toggleRow: p
+        size: (t == null ? void 0 : t.size) ?? i,
+        hasOverflow: t == null ? void 0 : t.hasOverflow,
+        expandedRows: a,
+        toggleRow: x,
+        inlineSelection: c
       },
-      children: i ? /* @__PURE__ */ o(
+      children: s ? /* @__PURE__ */ e(
         "div",
         {
-          onKeyDownCapture: (l) => {
-            if ((/* @__PURE__ */ new Set([
+          onKeyDownCapture: (r) => {
+            (/* @__PURE__ */ new Set([
               "ArrowLeft",
               "ArrowRight",
               "ArrowUp",
@@ -136,285 +141,203 @@ const j = ({
               "PageUp",
               "PageDown",
               " "
-              // space
-            ])).has(l.key)) {
-              const t = l.target;
-              t && (t.closest(
-                '[contenteditable]:not([contenteditable="false"])'
-              ) || t.closest("input, textarea") || t.closest('[role="textbox"]')) && l.stopPropagation();
-            }
+            ])).has(r.key) && ce(r.target) && r.stopPropagation();
           },
-          children: /* @__PURE__ */ o(
-            B,
-            {
-              className: (l) => c(
-                "w-full",
-                n === "xs" && "px-3 py-0",
-                typeof r == "function" ? r(l) : r
-              ),
-              ...d
-            }
-          )
-        }
-      ) : /* @__PURE__ */ o(
-        B,
-        {
-          className: (l) => c(
-            "w-full",
-            n === "xs" && "px-3 py-0",
-            typeof r == "function" ? r(l) : r
-          ),
-          ...d
+          children: h
         }
-      )
+      ) : h
     }
   );
 };
-j.displayName = "Table";
-const q = ({
-  columns: r,
-  children: n,
-  bordered: i = !1,
-  hasExpandableRows: d = !1,
-  className: e,
-  ...s
+_.displayName = "Table";
+const W = ({
+  columns: n,
+  children: i,
+  bordered: s = !1,
+  hasExpandableRows: c = !1,
+  className: o,
+  ...t
 }) => {
-  const { size: a } = g(b), { selectionBehavior: f, selectionMode: p } = C();
-  return /* @__PURE__ */ h(
-    X,
+  const { size: m, inlineSelection: f } = b(g), { selectionBehavior: a, selectionMode: x } = C();
+  return /* @__PURE__ */ u(
+    ae,
     {
-      ...s,
-      className: (l) => c(
-        "sticky top-[-1px] z-30 bg-secondary_subtle rounded-lg h-9",
-        // Row border—using an "after" pseudo-element to avoid the border taking up space.
-        i && "[&>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 e == "function" ? e(l) : e
+      ...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
       ),
       children: [
-        d && /* @__PURE__ */ o(
-          S,
-          {
-            className: c(
-              "sticky top-[-1px] z-30 bg-secondary_subtle p-0",
-              a === "sm" || a === "xs" ? "w-9" : "w-11"
-            )
-          }
-        ),
-        f === "toggle" && /* @__PURE__ */ o(
-          S,
-          {
-            className: c(
-              "sticky top-[-1px] z-30 bg-secondary_subtle p-0",
-              a === "sm" || a === "xs" ? "w-9" : "w-11"
-            ),
-            children: p === "multiple" && /* @__PURE__ */ o("div", { className: "flex items-start", children: /* @__PURE__ */ o(_, { slot: "selection" }) })
-          }
-        ),
-        /* @__PURE__ */ o(P, { items: r, children: n })
+        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(A, { slot: "selection" }) }) }),
+        /* @__PURE__ */ e(B, { items: n, children: i })
       ]
     }
   );
 };
-q.displayName = "TableHeader";
-const K = ({
-  className: r,
-  tooltip: n,
-  label: i,
-  children: d,
-  sticky: e,
-  stickyOffset: s = 0,
-  headerCellClass: a,
+W.displayName = "TableHeader";
+const j = ({
+  className: n,
+  tooltip: i,
+  label: s,
+  children: c,
+  sticky: o,
+  stickyOffset: t = 0,
+  headerCellClass: m,
   tooltipHeader: f = !1,
-  ...p
+  ...a
 }) => {
-  const { selectionBehavior: l } = C(), { size: u } = g(b);
-  return /* @__PURE__ */ o(
+  const { selectionBehavior: x } = C(), { size: h, inlineSelection: r } = b(g);
+  return /* @__PURE__ */ e(
     S,
     {
-      ...p,
-      style: (t) => {
-        const x = {
+      ...a,
+      style: (l) => {
+        const d = o ? {
           position: "sticky",
-          top: -1,
-          zIndex: e ? 40 : 30,
-          ...e ? {
-            [e]: s,
-            boxShadow: e === "right" ? "inset 2px 0 0px 0px var(--color-border-tertiary)" : "inset -2px 0 0px 0px var(--color-border-tertiary)"
-          } : {}
-        };
-        return { ...typeof p.style == "function" ? p.style(t) : p.style || {}, ...x };
+          [o]: t,
+          zIndex: 30
+        } : {};
+        return { ...typeof a.style == "function" ? a.style(l) : a.style || {}, ...d };
       },
-      className: (t) => c(
-        "sticky top-[-1px] bg-secondary_subtle p-0 outline-hidden focus-visible:z-[41] focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-bg-primary focus-visible:ring-inset",
-        u === "xs" && "px-3 py-0",
-        u === "sm" && "px-4 py-2",
-        u === "md" && "px-6 py-2",
-        l === "toggle" && "nth-2:pl-3",
-        e ? "z-40" : "z-30",
-        t.allowsSorting && "cursor-pointer",
-        typeof r == "function" ? r(t) : r
+      className: (l) => p(
+        "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",
+        o && "bg-secondary",
+        l.allowsSorting && "cursor-pointer",
+        typeof n == "function" ? n(l) : n
       ),
-      children: (t) => /* @__PURE__ */ h(Q, { className: c("flex items-center gap-1", a), children: [
-        /* @__PURE__ */ h("div", { className: "flex items-center gap-1 overflow-hidden", children: [
-          i && /* @__PURE__ */ o("span", { className: "text-xs font-medium whitespace-nowrap overflow-hidden text-ellipsis text-secondary", children: i }),
-          typeof d == "function" ? d(t) : d
+      children: (l) => /* @__PURE__ */ u(le, { className: p("flex items-center gap-1", m), children: [
+        f ? /* @__PURE__ */ e(D, { title: s, placement: "top", children: /* @__PURE__ */ e(E, { 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
         ] }),
-        n && /* @__PURE__ */ o(w, { name: "HelpCircle", size: 16, className: "text-fg-quaternary" }),
-        t.allowsSorting && (t.sortDirection ? /* @__PURE__ */ o(
-          w,
+        i && /* @__PURE__ */ e(D, { title: i, placement: "top", children: /* @__PURE__ */ e(E, { className: "cursor-pointer 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,
           {
-            name: "ArrowDown",
-            size: 12,
-            className: c(
-              "stroke-[3px] text-fg-quaternary",
-              t.sortDirection === "ascending" && "rotate-180"
+            className: p(
+              "size-3 stroke-[3px] text-fg-quaternary",
+              l.sortDirection === "ascending" && "rotate-180"
             )
           }
-        ) : /* @__PURE__ */ o(
-          w,
-          {
-            name: "ChevronSelectorVertical",
-            size: 12,
-            className: "text-fg-quaternary"
-          }
-        ))
+        ) : /* @__PURE__ */ e(oe, { size: 12, strokeWidth: 3, className: "text-fg-quaternary" }))
       ] })
     }
   );
 };
-K.displayName = "TableHead";
-const $ = ({
-  columns: r,
-  children: n,
-  className: i,
-  highlightSelectedRow: d = !0,
-  isExpandable: e = !1,
-  renderExpandedContent: s,
-  ...a
+j.displayName = "TableHead";
+const K = ({
+  columns: n,
+  children: i,
+  className: s,
+  highlightSelectedRow: c = !0,
+  isExpandable: o = !1,
+  renderExpandedContent: t,
+  expandedColSpan: m,
+  ...f
 }) => {
-  const { size: f, expandedRows: p, toggleRow: l } = g(b), { selectionBehavior: u } = C(), t = typeof a.id == "string" ? a.id : String(a.id), x = p.has(t), R = e ? /* @__PURE__ */ o(
+  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), I = o ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       onClick: (y) => {
-        y.stopPropagation(), l(t);
+        y.stopPropagation(), h(d);
       },
-      className: c(
-        "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",
-        x && "rotate-90"
+      className: p(
+        "mr-2 -ml-1 flex flex-shrink-0 cursor-pointer items-center justify-center rounded p-1 transition-transform duration-200 ease-in-out hover:bg-secondary_subtle",
+        v && "rotate-90"
       ),
-      "aria-label": x ? "Collapse row" : "Expand row",
-      children: /* @__PURE__ */ o(w, { name: "ChevronRight", size: 16, className: "text-secondary" })
+      "aria-label": v ? "Collapse row" : "Expand row",
+      children: /* @__PURE__ */ e(ne, { className: "size-4 text-fg-quaternary" })
     }
-  ) : null, N = e ? (() => {
-    const y = M.toArray(n);
-    if (y.length > 0 && A(y[0])) {
-      const H = y[0], k = H.props;
+  ) : null, M = o ? (() => {
+    const y = Q.toArray(i);
+    if (y.length > 0 && q(y[0])) {
+      const H = y[0], U = H.props;
       return [
-        I(H, {
-          ...k,
-          children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
-            R,
-            k.children
+        X(H, {
+          children: /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+            I,
+            U.children
           ] })
         }),
         ...y.slice(1)
       ];
     }
-    return n;
-  })() : n;
-  return /* @__PURE__ */ h(V, { children: [
-    /* @__PURE__ */ h(
-      O,
+    return i;
+  })() : i;
+  return /* @__PURE__ */ u(V, { children: [
+    /* @__PURE__ */ u(
+      k,
       {
-        ...a,
-        className: (y) => c(
+        ...f,
+        className: (y) => p(
           "relative outline-focus-ring transition-colors after:pointer-events-none hover:bg-secondary_subtle focus-visible:outline-2 focus-visible:-outline-offset-2",
-          f === "xs" ? "h-10" : f === "sm" ? "h-12" : f === "md" ? "h-18" : "h-10",
-          d && "selected:bg-secondary",
-          // Row border—using an "after" pseudo-element to avoid the border taking up space.
-          !x && "[&>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 i == "function" ? i(y) : i
+          a === "xs" ? "h-10" : a === "sm" ? "h-12" : a === "md" ? "h-18" : "h-10",
+          c && !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
         ),
         children: [
-          u === "toggle" && /* @__PURE__ */ o(
-            z,
-            {
-              className: c(
-                "relative p-0",
-                f === "sm" || f === "xs" ? "w-9" : "w-11"
-              ),
-              children: /* @__PURE__ */ o("div", { className: "flex items-end", children: /* @__PURE__ */ o(_, { className: "hidden", slot: "selection" }) })
-            }
-          ),
-          /* @__PURE__ */ o(P, { items: r, children: N })
+          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(A, { className: "hidden", slot: "selection" }) }) }),
+          /* @__PURE__ */ e(B, { items: n, children: M })
         ]
       }
     ),
-    e && x && s && /* @__PURE__ */ o(
-      O,
-      {
-        id: `${t}-expanded`,
-        className: "relative bg-secondary_subtle",
-        children: /* @__PURE__ */ o(
-          z,
-          {
-            className: "p-0",
-            colSpan: (r == null ? void 0 : r.length) || 0,
-            children: /* @__PURE__ */ o("div", { className: c("w-full"), children: s(a.value) })
-          }
-        )
-      }
-    )
+    o && v && t && f.value != null && /* @__PURE__ */ e(k, { 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) }) }) })
   ] });
 };
-$.displayName = "TableRow";
-const U = ({
-  className: r,
-  children: n,
-  sticky: i,
-  stickyOffset: d = 0,
-  ...e
-}) => {
-  const { size: s } = g(b), { selectionBehavior: a } = C();
-  return /* @__PURE__ */ o(
-    z,
+K.displayName = "TableRow";
+const $ = ({ className: n, children: i, sticky: s, stickyOffset: c = 0, ...o }) => {
+  const { size: t, inlineSelection: m } = b(g), { selectionBehavior: f } = C();
+  return /* @__PURE__ */ e(
+    T,
     {
-      ...e,
-      style: (f) => {
-        const p = i ? {
+      ...o,
+      style: (a) => {
+        const x = s ? {
           position: "sticky",
-          [i]: d,
+          [s]: c,
           zIndex: 20,
           backgroundColor: "white",
-          boxShadow: i === "right" ? "inset 2px 0 0px 0px var(--color-border-tertiary)" : "inset -2px 0 0px 0px var(--color-border-tertiary)"
+          boxShadow: s === "right" ? "inset 2px 0 0px 0px var(--color-border-tertiary)" : "inset -2px 0 0px 0px var(--color-border-tertiary)"
         } : {};
-        return { ...typeof e.style == "function" ? e.style(f) : e.style || {}, ...p };
+        return { ...typeof o.style == "function" ? o.style(a) : o.style || {}, ...x };
       },
-      className: (f) => c(
+      className: (a) => p(
         "relative text-secondary outline-focus-ring focus-visible:z-1 focus-visible:outline-2 focus-visible:-outline-offset-2",
-        s === "xs" && "p-0 px-3 py-0 text-xs",
-        s === "sm" && "p-0 px-4 py-2 text-sm",
-        s === "md" && "p-0 px-6 py-2 text-base",
-        a === "toggle" && "nth-2:pl-3",
-        typeof r == "function" ? r(f) : r
+        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
       ),
-      children: n
+      children: i
     }
   );
 };
-U.displayName = "TableCell";
-const le = {
-  Root: D,
-  Header: E
-}, v = j;
-v.Body = J;
-v.Cell = U;
-v.Head = K;
-v.Header = q;
-v.Row = $;
+$.displayName = "TableCell";
+const Ne = {
+  Root: O,
+  Header: P
+}, N = _;
+N.Body = ie;
+N.Cell = $;
+N.Head = j;
+N.Header = W;
+N.Row = K;
 export {
-  v as Table,
-  le as TableCard,
-  U as TableCell
+  N as Table,
+  Ne as TableCard,
+  $ as TableCell,
+  be as TableRowActionsDropdown
 };