@actioneer/ads 0.5.4 → 0.5.5

package/components/table.js

@@ -1,129 +1,191 @@
 "use client";
-import { jsx as o, jsxs as y } from "react/jsx-runtime";
-import * as n from "react";
+import { jsx as s, jsxs as z } from "react/jsx-runtime";
+import * as a from "react";
 import { cn as t } from "../lib/cn.js";
-import { Checkbox as A } from "./checkbox.js";
-import { ChevronUp as I, ChevronDown as M, SortIcon as U } from "../lib/icons.js";
-const P = (l) => l === "center" ? "text-center" : l === "right" ? "text-right" : "text-left", q = (l, r = !1) => l === "left" ? "sticky left-0 z-10 shadow-[8px_0_20px_-8px_rgba(0,0,0,0.08)]" : l === "right" ? t(
+import { Checkbox as j } from "./checkbox.js";
+import { ChevronUp as Q, ChevronDown as V, SortIcon as X } from "../lib/icons.js";
+const L = (o) => o === "center" ? "text-center" : o === "right" ? "text-right" : "text-left", O = (o, n = !1) => o === "left" ? t(
+  "sticky left-0 z-10",
+  // Scroll-aware: the smudge only appears once content is actually
+  // hidden behind the pinned column (nothing to scroll back to at the
+  // far left → no shadow).
+  "group-data-[scroll-left=true]/table-shell:shadow-table-smudge-left"
+) : o === "right" ? t(
   "sticky right-0 z-10",
   // Backward-compatible fallback. Action columns should opt into the
   // Table-level elevation so one shadow spans the complete column.
-  !r && "shadow-[-8px_0_20px_-8px_rgba(0,0,0,0.08)]"
-) : void 0, B = t(
+  !n && "group-data-[scroll-right=true]/table-shell:shadow-table-smudge-right"
+) : void 0, W = (o) => o === "right" ? t(
+  "group-first/row:before:pointer-events-none group-first/row:before:absolute group-first/row:before:right-0 group-first/row:before:top-0 group-first/row:before:size-5 group-first/row:before:content-[''] group-first/row:before:[background:radial-gradient(circle_at_0%_100%,transparent_19.5px,var(--table-shell)_20px)]",
+  "group-last/row:after:pointer-events-none group-last/row:after:absolute group-last/row:after:right-0 group-last/row:after:bottom-0 group-last/row:after:size-5 group-last/row:after:content-[''] group-last/row:after:[background:radial-gradient(circle_at_0%_0%,transparent_19.5px,var(--table-shell)_20px)]"
+) : t(
+  "group-first/row:before:pointer-events-none group-first/row:before:absolute group-first/row:before:left-0 group-first/row:before:top-0 group-first/row:before:size-5 group-first/row:before:content-[''] group-first/row:before:[background:radial-gradient(circle_at_100%_100%,transparent_19.5px,var(--table-shell)_20px)]",
+  "group-last/row:after:pointer-events-none group-last/row:after:absolute group-last/row:after:left-0 group-last/row:after:bottom-0 group-last/row:after:size-5 group-last/row:after:content-[''] group-last/row:after:[background:radial-gradient(circle_at_100%_0%,transparent_19.5px,var(--table-shell)_20px)]"
+), F = (o) => t(
   "bg-card align-middle transition-colors",
   // Row separators — functional hairline, none under the last row.
   "border-b border-border group-last/row:border-b-0",
-  // Restore the original quiet neutral hover: the row softly sinks toward the
-  // shell instead of picking up a brand tint or a new rounded silhouette. The
-  // wash is pre-composited so scrolled text cannot show through sticky cells.
-  "group-hover/row:bg-(--table-row-hover) group-focus-within/row:bg-(--table-row-hover)",
-  "group-data-[selected]/row:bg-(--table-row-selected)"
-), $ = t(
+  !o && t(
+    // Restore the original quiet neutral hover: the row softly sinks
+    // toward the shell instead of picking up a brand tint or a new
+    // rounded silhouette. The wash is pre-composited so scrolled text
+    // cannot show through sticky cells.
+    "group-hover/row:bg-(--table-row-hover) group-focus-within/row:bg-(--table-row-hover)",
+    "group-data-[selected]/row:bg-(--table-row-selected)"
+  )
+), Y = t(
   "group-first/row:rounded-tl-[calc(var(--radius-2xl)-var(--spacing))]",
   "group-last/row:rounded-bl-[calc(var(--radius-2xl)-var(--spacing))]"
-), G = t(
+), Z = t(
   "group-first/row:first:rounded-tl-[calc(var(--radius-2xl)-var(--spacing))]",
   "group-first/row:last:rounded-tr-[calc(var(--radius-2xl)-var(--spacing))]",
   "group-last/row:first:rounded-bl-[calc(var(--radius-2xl)-var(--spacing))]",
   "group-last/row:last:rounded-br-[calc(var(--radius-2xl)-var(--spacing))]"
-), j = t(
+), I = t(
   "after:pointer-events-none after:absolute after:right-0 after:top-1/2",
   "after:h-4 after:w-px after:-translate-y-1/2 after:rounded-sm",
   "after:bg-border-strong last:after:hidden"
-), H = n.createContext(null), T = () => n.useContext(H), z = n.createContext("body"), J = n.forwardRef(
+), M = a.createContext(null), T = () => a.useContext(M), q = a.createContext("body"), D = a.forwardRef(
   ({
-    className: l,
-    wrapperClassName: r,
-    footer: s,
+    className: o,
+    wrapperClassName: n,
+    footer: i,
     children: d,
-    selectionMode: m = "none",
+    selectionMode: g = "none",
     selectedKeys: e,
-    onSelectionChange: i,
-    rowKeys: a,
-    elevatedActionColumn: p = !1,
-    actionColumnWidth: g = "4rem",
-    sortDescriptor: v,
-    onSortChange: b,
-    ...N
-  }, E) => {
-    const w = n.useMemo(() => a ?? [], [a]), f = e === "all", u = f ? null : e ?? /* @__PURE__ */ new Set(), C = n.useCallback(
-      (c) => f || !!(u != null && u.has(c)),
-      [f, u]
-    ), x = w.length > 0 && (f || w.every((c) => u == null ? void 0 : u.has(c))), R = !x && (f || w.some((c) => u == null ? void 0 : u.has(c))), _ = n.useCallback(
-      (c) => {
-        if (!i) return;
-        if (m === "single") {
-          i(C(c) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([c]));
+    onSelectionChange: c,
+    rowKeys: l,
+    elevatedActionColumn: u = !1,
+    actionColumnWidth: h = "4rem",
+    sortDescriptor: b,
+    onSortChange: w,
+    isStatic: x = !1,
+    ...U
+  }, $) => {
+    const v = a.useMemo(() => l ?? [], [l]), m = e === "all", f = m ? null : e ?? /* @__PURE__ */ new Set(), C = a.useCallback(
+      (r) => m || !!(f != null && f.has(r)),
+      [m, f]
+    ), N = v.length > 0 && (m || v.every((r) => f == null ? void 0 : f.has(r))), H = !N && (m || v.some((r) => f == null ? void 0 : f.has(r))), P = a.useCallback(
+      (r) => {
+        if (!c) return;
+        if (g === "single") {
+          c(C(r) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([r]));
           return;
         }
-        const h = new Set(f ? w : u ?? /* @__PURE__ */ new Set());
-        h.has(c) ? h.delete(c) : h.add(c), i(h);
+        const p = new Set(m ? v : f ?? /* @__PURE__ */ new Set());
+        p.has(r) ? p.delete(r) : p.add(r), c(p);
       },
-      [i, m, C, f, w, u]
-    ), k = n.useCallback(() => {
-      i && i(x ? /* @__PURE__ */ new Set() : new Set(w));
-    }, [i, x, w]), S = n.useCallback(
-      (c) => {
-        if (!b) return;
-        const h = (v == null ? void 0 : v.column) === c && v.direction === "ascending" ? "descending" : "ascending";
-        b({ column: c, direction: h });
+      [c, g, C, m, v, f]
+    ), A = a.useCallback(() => {
+      c && c(N ? /* @__PURE__ */ new Set() : new Set(v));
+    }, [c, N, v]), B = a.useCallback(
+      (r) => {
+        if (!w) return;
+        const p = (b == null ? void 0 : b.column) === r && b.direction === "ascending" ? "descending" : "ascending";
+        w({ column: r, direction: p });
       },
-      [b, v]
-    ), F = n.useMemo(
+      [w, b]
+    ), R = a.useRef(null), [S, G] = a.useState({
+      left: !1,
+      right: !1
+    }), _ = a.useCallback(() => {
+      const r = R.current;
+      if (!r) return;
+      const p = r.scrollWidth - r.clientWidth, y = r.scrollLeft > 1, E = r.scrollLeft < p - 1;
+      G(
+        (k) => k.left === y && k.right === E ? k : { left: y, right: E }
+      );
+    }, []);
+    a.useEffect(() => {
+      _();
+      const r = R.current;
+      if (!r || typeof ResizeObserver > "u") return;
+      const p = new ResizeObserver(_);
+      p.observe(r);
+      const y = r.querySelector("table");
+      return y && p.observe(y), () => p.disconnect();
+    }, [_]);
+    const J = a.useMemo(
       () => ({
-        selectionMode: m,
+        selectionMode: g,
         isSelected: C,
-        toggleKey: _,
-        toggleAll: k,
-        allSelected: x,
-        someSelected: R,
-        sortDescriptor: v,
-        requestSort: b ? S : void 0,
-        elevatedActionColumn: p
+        toggleKey: P,
+        toggleAll: A,
+        allSelected: N,
+        someSelected: H,
+        isStatic: x,
+        sortDescriptor: b,
+        requestSort: w ? B : void 0,
+        elevatedActionColumn: u
       }),
       [
-        m,
+        g,
         C,
-        _,
-        k,
+        P,
+        A,
+        N,
+        H,
         x,
-        R,
-        v,
         b,
-        S,
-        p
+        w,
+        B,
+        u
       ]
     );
-    return /* @__PURE__ */ o(H.Provider, { value: F, children: /* @__PURE__ */ y(
+    return /* @__PURE__ */ s(M.Provider, { value: J, children: /* @__PURE__ */ z(
       "div",
       {
+        "data-scroll-left": S.left ? "true" : "false",
+        "data-scroll-right": S.right ? "true" : "false",
         className: t(
-          "overflow-clip rounded-2xl bg-muted px-1 pb-1",
-          r
+          "group/table-shell overflow-clip rounded-2xl bg-table-shell px-1 pb-1",
+          n
         ),
         children: [
-          /* @__PURE__ */ y(
+          /* @__PURE__ */ z(
             "div",
             {
               className: "relative",
-              style: p ? {
-                "--table-action-column-width": g
+              style: u ? {
+                "--table-action-column-width": h
               } : void 0,
               children: [
-                /* @__PURE__ */ o("div", { className: "overflow-x-auto rounded-[calc(var(--radius-2xl)-var(--spacing))]", children: /* @__PURE__ */ o(
-                  "table",
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    ref: R,
+                    onScroll: _,
+                    className: "overflow-x-auto rounded-[calc(var(--radius-2xl)-var(--spacing))]",
+                    children: /* @__PURE__ */ s(
+                      "table",
+                      {
+                        ref: $,
+                        "data-slot": "table",
+                        className: t(
+                          "w-full border-separate border-spacing-0 text-base",
+                          o
+                        ),
+                        ...U,
+                        children: d
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "div",
                   {
-                    ref: E,
-                    "data-slot": "table",
+                    "aria-hidden": "true",
+                    "data-slot": "table-scroll-hint",
                     className: t(
-                      "w-full border-separate border-spacing-0 text-xs",
-                      l
-                    ),
-                    ...N,
-                    children: d
+                      "pointer-events-none absolute inset-y-0 z-20 w-10",
+                      "bg-gradient-to-l from-(--table-scroll-hint) to-transparent",
+                      "opacity-0 transition-opacity duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                      S.right && "opacity-100",
+                      u ? "right-[var(--table-action-column-width)]" : "right-0"
+                    )
                   }
-                ) }),
-                p && /* @__PURE__ */ o(
+                ),
+                u && /* @__PURE__ */ s(
                   "div",
                   {
                     "aria-hidden": "true",
@@ -131,65 +193,68 @@ const P = (l) => l === "center" ? "text-center" : l === "right" ? "text-right" :
                     className: t(
                       "pointer-events-none absolute inset-y-0 right-0 z-20",
                       "w-[var(--table-action-column-width)]",
-                      "rounded-br-[calc(var(--radius-2xl)-var(--spacing))]",
-                      "shadow-elevation"
+                      "rounded-br-[calc(var(--radius-2xl)-var(--spacing))]"
+                      // No shadow of its own: while columns hide behind the pinned
+                      // surface the scroll-hint gradient is already washing the
+                      // seam — stacking a cast on top of it read harsh. The hint
+                      // IS the separation cue.
                     )
                   }
                 )
               ]
             }
           ),
-          s && /* @__PURE__ */ o("div", { className: "flex items-center px-4 py-2.5", children: s })
+          i && /* @__PURE__ */ s("div", { className: "flex items-center px-4 py-2.5", children: i })
         ]
       }
     ) });
   }
 );
-J.displayName = "Table";
-const L = n.forwardRef(({ className: l, ...r }, s) => {
+D.displayName = "Table";
+const K = a.forwardRef(({ className: o, ...n }, i) => {
   const d = T();
-  return /* @__PURE__ */ o(z.Provider, { value: "header", children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ s(q.Provider, { value: "header", children: /* @__PURE__ */ s(
     "thead",
     {
-      ref: s,
+      ref: i,
       className: t(
         "text-xs text-muted-foreground",
-        (d == null ? void 0 : d.elevatedActionColumn) && "relative z-30 bg-muted",
-        l
+        (d == null ? void 0 : d.elevatedActionColumn) && "relative z-30 bg-table-shell",
+        o
       ),
-      ...r
+      ...n
     }
   ) });
 });
-L.displayName = "TableHeader";
-const O = n.forwardRef(({ className: l, ...r }, s) => /* @__PURE__ */ o(z.Provider, { value: "body", children: /* @__PURE__ */ o("tbody", { ref: s, className: t(l), ...r }) }));
-O.displayName = "TableBody";
-const Q = n.forwardRef(
-  ({ className: l, rowKey: r, children: s, ...d }, m) => {
-    const e = T(), i = n.useContext(z), a = !!e && e.selectionMode !== "none", p = a && i === "body" && r !== void 0 ? e.isSelected(r) : !1;
-    return /* @__PURE__ */ y(
+K.displayName = "TableHeader";
+const ee = a.forwardRef(({ className: o, ...n }, i) => /* @__PURE__ */ s(q.Provider, { value: "body", children: /* @__PURE__ */ s("tbody", { ref: i, className: t(o), ...n }) }));
+ee.displayName = "TableBody";
+const re = a.forwardRef(
+  ({ className: o, rowKey: n, children: i, ...d }, g) => {
+    const e = T(), c = a.useContext(q), l = !!e && e.selectionMode !== "none", u = l && c === "body" && n !== void 0 ? e.isSelected(n) : !1;
+    return /* @__PURE__ */ z(
       "tr",
       {
-        ref: m,
-        "data-selected": p || void 0,
-        className: t("group/row", l),
+        ref: g,
+        "data-selected": u || void 0,
+        className: t("group/row", o),
         ...d,
         children: [
-          a && (i === "header" ? /* @__PURE__ */ o(
+          l && (c === "header" ? /* @__PURE__ */ s(
             "th",
             {
               scope: "col",
               className: t(
                 "w-10 px-4 py-2.5",
-                j,
+                I,
                 // Sticky without the baked shadow — an always-on smudge
                 // muddies the shell's corners (elevation = actionability).
                 // (sticky is positioned, so the ::after tick anchors to it —
                 // no `relative` needed, and it would conflict with sticky.)
-                "sticky left-0 z-10 bg-muted"
+                "sticky left-0 z-10 bg-table-shell"
               ),
-              children: e.selectionMode === "multiple" && /* @__PURE__ */ o(
-                A,
+              children: e.selectionMode === "multiple" && /* @__PURE__ */ s(
+                j,
                 {
                   size: "sm",
                   "aria-label": "Select all rows",
@@ -199,51 +264,53 @@ const Q = n.forwardRef(
                 }
               )
             }
-          ) : /* @__PURE__ */ o(
+          ) : /* @__PURE__ */ s(
             "td",
             {
               className: t(
                 "w-10 px-4 py-3",
-                B,
-                $,
-                "sticky left-0 z-10"
+                F(e.isStatic),
+                Y,
+                "sticky left-0 z-10",
+                // Same white-behind-white corner problem as pinned data cells.
+                W("left")
               ),
-              onClick: (g) => g.stopPropagation(),
-              children: r !== void 0 && /* @__PURE__ */ o(
-                A,
+              onClick: (h) => h.stopPropagation(),
+              children: n !== void 0 && /* @__PURE__ */ s(
+                j,
                 {
                   size: "sm",
-                  "aria-label": `Select ${r}`,
-                  checked: p,
-                  onChange: () => e.toggleKey(r)
+                  "aria-label": `Select ${n}`,
+                  checked: u,
+                  onChange: () => e.toggleKey(n)
                 }
               )
             }
           )),
-          s
+          i
         ]
       }
     );
   }
 );
-Q.displayName = "TableRow";
-const V = n.forwardRef(({ className: l, align: r, sticky: s, sortKey: d, children: m, ...e }, i) => {
-  var b, N;
-  const a = T(), p = !!d && !!(a != null && a.requestSort), g = p && ((b = a == null ? void 0 : a.sortDescriptor) == null ? void 0 : b.column) === d, v = (N = a == null ? void 0 : a.sortDescriptor) == null ? void 0 : N.direction;
-  return /* @__PURE__ */ o(
+re.displayName = "TableRow";
+const te = a.forwardRef(({ className: o, align: n, sticky: i, sortKey: d, children: g, ...e }, c) => {
+  var w, x;
+  const l = T(), u = !!d && !!(l != null && l.requestSort), h = u && ((w = l == null ? void 0 : l.sortDescriptor) == null ? void 0 : w.column) === d, b = (x = l == null ? void 0 : l.sortDescriptor) == null ? void 0 : x.direction;
+  return /* @__PURE__ */ s(
     "th",
     {
-      ref: i,
+      ref: c,
       scope: "col",
-      "aria-sort": g ? v === "ascending" ? "ascending" : "descending" : p ? "none" : void 0,
+      "aria-sort": h ? b === "ascending" ? "ascending" : "descending" : u ? "none" : void 0,
       className: t(
         // whitespace-nowrap: header labels hug their content — the table
         // scrolls horizontally, so wrapping "Null %" to two lines only
         // wastes header height without saving any width.
-        "relative whitespace-nowrap px-4 py-2.5 font-medium",
-        j,
-        P(r),
-        s && (s === "right" && (a != null && a.elevatedActionColumn) ? t(
+        "relative whitespace-nowrap px-4 py-2.5 font-normal",
+        I,
+        L(n),
+        i && (i === "right" && (l != null && l.elevatedActionColumn) ? t(
           // Preserve the semantic column width, but do not pin or paint
           // a blank header cell over the labels behind it. Only body
           // action cells participate in the sticky elevated surface.
@@ -251,68 +318,69 @@ const V = n.forwardRef(({ className: l, align: r, sticky: s, sortKey: d, childre
           "min-w-[var(--table-action-column-width)]",
           "max-w-[var(--table-action-column-width)]",
           "bg-transparent"
-        ) : t(q(s), "bg-muted")),
-        l
+        ) : t(O(i), "bg-table-shell")),
+        o
       ),
       ...e,
-      children: p ? /* @__PURE__ */ y(
+      children: u ? /* @__PURE__ */ z(
         "button",
         {
           type: "button",
-          onClick: () => a.requestSort(d),
+          onClick: () => l.requestSort(d),
           className: t(
             "group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors",
             "hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
-            r === "right" && "flex-row-reverse",
-            g && "text-foreground"
+            n === "right" && "flex-row-reverse",
+            h && "text-foreground"
           ),
           children: [
-            m,
-            g ? v === "ascending" ? /* @__PURE__ */ o(I, { className: "size-3.5" }) : /* @__PURE__ */ o(M, { className: "size-3.5" }) : /* @__PURE__ */ o(U, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
+            g,
+            h ? b === "ascending" ? /* @__PURE__ */ s(Q, { className: "size-3.5" }) : /* @__PURE__ */ s(V, { className: "size-3.5" }) : /* @__PURE__ */ s(X, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
           ]
         }
-      ) : m
+      ) : g
     }
   );
 });
-V.displayName = "TableColumn";
-const W = n.forwardRef(
-  ({ className: l, align: r, sticky: s, ...d }, m) => {
-    const e = T(), i = s === "right" && (e == null ? void 0 : e.elevatedActionColumn);
-    return /* @__PURE__ */ o(
+te.displayName = "TableColumn";
+const oe = a.forwardRef(
+  ({ className: o, align: n, sticky: i, ...d }, g) => {
+    const e = T(), c = i === "right" && (e == null ? void 0 : e.elevatedActionColumn);
+    return /* @__PURE__ */ s(
       "td",
       {
-        ref: m,
+        ref: g,
         className: t(
           // whitespace-nowrap: cell content never wraps — the table's
           // overflow-x-auto viewport scrolls horizontally instead, matching the
           // header cells. Opt back into wrapping with `whitespace-normal` for
           // deliberate multi-line content (e.g. an EmptyState in a colSpan cell).
           "whitespace-nowrap px-4 py-3",
-          B,
-          G,
-          P(r),
-          s && q(s, e == null ? void 0 : e.elevatedActionColumn),
-          i && t(
+          F((e == null ? void 0 : e.isStatic) ?? !1),
+          Z,
+          L(n),
+          i && O(i, e == null ? void 0 : e.elevatedActionColumn),
+          i && W(i),
+          c && t(
             "w-[var(--table-action-column-width)]",
             "min-w-[var(--table-action-column-width)]",
             "max-w-[var(--table-action-column-width)]",
             "bg-elevated",
             "group-hover/row:bg-elevated group-focus-within/row:bg-elevated"
           ),
-          l
+          o
         ),
         ...d
       }
     );
   }
 );
-W.displayName = "TableCell";
+oe.displayName = "TableCell";
 export {
-  J as Table,
-  O as TableBody,
-  W as TableCell,
-  V as TableColumn,
-  L as TableHeader,
-  Q as TableRow
+  D as Table,
+  ee as TableBody,
+  oe as TableCell,
+  te as TableColumn,
+  K as TableHeader,
+  re as TableRow
 };

package/components/tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-type Variant = "primary" | "secondary";
+type Variant = "primary" | "secondary" | "pill";
 type Orientation = "horizontal" | "vertical";
 type Size = "sm" | "md" | "lg";
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -17,6 +17,8 @@ export declare const TabList: React.ForwardRefExoticComponent<TabListProps & Rea
 export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     value: string;
     isDisabled?: boolean;
+    /** Optional trailing count, rendered as `· N` (e.g. a filter's match count). */
+    count?: number;
 }
 export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
 export interface TabSeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {