@actioneer/ads 1.0.0 → 1.0.1

package/components/table.d.ts

@@ -81,7 +81,7 @@ export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttrib
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /** Stable key for selection (required on body rows to be selectable). */
     rowKey?: string;
-    /** Explicitly marks a row as opening or expanding something. */
+    /** @deprecated Existing visual-only marker. New rows should pass an action via onClick. */
     isInteractive?: boolean;
 }
 export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;

package/components/table.js

@@ -1,62 +1,62 @@
 "use client";
-import { jsx as d, jsxs as T } from "react/jsx-runtime";
+import { jsx as u, jsxs as W } from "react/jsx-runtime";
 import * as n from "react";
-import { cn as m } from "../lib/cn.js";
+import { cn as f } from "../lib/cn.js";
 import { Checkbox as ne } from "./checkbox.js";
 import { ChevronUp as ve, ChevronDown as ye, SortIcon as we } from "../lib/icons.js";
-const se = (r) => r === "center" ? "text-center" : r === "right" ? "text-right" : "text-left", ae = (r, t = !1) => r === "left" ? m(
+const se = (r) => r === "center" ? "text-center" : r === "right" ? "text-right" : "text-left", ae = (r, e = !1) => r === "left" ? f(
   "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"
-) : r === "right" ? m(
+) : r === "right" ? f(
   "sticky right-0 z-10",
   // Backward-compatible fallback. Action columns should opt into the
   // Table-level elevation so one shadow spans the complete column.
-  !t && "group-data-[scroll-right=true]/table-shell:shadow-table-smudge-right"
-) : void 0, ie = n.createContext(!1), le = (r) => m(
+  !e && "group-data-[scroll-right=true]/table-shell:shadow-table-smudge-right"
+) : void 0, ie = n.createContext(!1), le = (r) => f(
   "bg-card align-middle transition-colors",
   // Functional row hairline; the table shell carries the outer stroke.
   "border-b border-table-stroke group-last/row:border-b-0",
-  r && m(
+  r && f(
     // Use WG3 without introducing 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)"
   )
-), ce = "bg-wg1", ue = m(
+), ce = "bg-wg1", ue = f(
   "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"
-), G = "__ads_table_column_", Q = 64, xe = new Intl.Collator(void 0, {
+), Q = "__ads_table_column_", Y = 64, xe = new Intl.Collator(void 0, {
   numeric: !0,
   sensitivity: "base"
 });
-function V(r) {
-  const t = [];
+function _(r) {
+  const e = [];
   return n.Children.forEach(r, (a) => {
     if (n.isValidElement(a) && a.type === n.Fragment) {
-      t.push(...V(a.props.children));
+      e.push(..._(a.props.children));
       return;
     }
-    t.push(a);
-  }), t;
+    e.push(a);
+  }), e;
 }
 function X(r) {
   if (r == null || typeof r == "boolean")
     return "";
   if (typeof r == "number" || typeof r == "string") return r;
   if (Array.isArray(r))
-    return r.map((o) => String(X(o))).join(" ").trim();
+    return r.map((s) => String(X(s))).join(" ").trim();
   if (!n.isValidElement(r)) return "";
-  const t = r.props.sortValue;
-  if (typeof t == "string" || typeof t == "number" || t instanceof Date)
-    return t;
+  const e = r.props.sortValue;
+  if (typeof e == "string" || typeof e == "number" || e instanceof Date)
+    return e;
   const a = X(r.props.children);
   if (String(a).trim()) return a;
-  for (const o of [
+  for (const s of [
     "value",
     "label",
     "status",
@@ -64,8 +64,8 @@ function X(r) {
     "title",
     "health"
   ]) {
-    const s = r.props[o];
-    if (typeof s == "string" || typeof s == "number") return s;
+    const o = r.props[s];
+    if (typeof o == "string" || typeof o == "number") return o;
   }
   return "";
 }
@@ -74,211 +74,211 @@ function oe(r) {
     return { kind: "number", value: r.getTime() };
   if (typeof r == "number")
     return { kind: "number", value: r };
-  const t = r.trim();
-  if (!t || t === "—" || t === "-")
+  const e = r.trim();
+  if (!e || e === "—" || e === "-")
     return { kind: "empty", value: "" };
-  const a = t.replace(/[,\s]/g, "").replace(/^[₹$€£]/, "").replace(/%$/, "");
+  const a = e.replace(/[,\s]/g, "").replace(/^[₹$€£]/, "").replace(/%$/, "");
   if (/^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(a))
     return { kind: "number", value: Number(a) };
-  const s = /^\d{4}[-/]\d{1,2}[-/]\d{1,2}/.test(t) || /\b(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\b/i.test(t) ? Date.parse(t) : Number.NaN;
-  return Number.isNaN(s) ? { kind: "text", value: t } : { kind: "number", value: s };
+  const o = /^\d{4}[-/]\d{1,2}[-/]\d{1,2}/.test(e) || /\b(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\b/i.test(e) ? Date.parse(e) : Number.NaN;
+  return Number.isNaN(o) ? { kind: "text", value: e } : { kind: "number", value: o };
 }
-function Ce(r, t, a) {
-  const o = oe(r), s = oe(t);
-  if (o.kind === "empty") return s.kind === "empty" ? 0 : 1;
-  if (s.kind === "empty") return -1;
-  const c = o.kind === "number" && s.kind === "number" ? o.value - s.value : xe.compare(String(o.value), String(s.value));
+function Ce(r, e, a) {
+  const s = oe(r), o = oe(e);
+  if (s.kind === "empty") return o.kind === "empty" ? 0 : 1;
+  if (o.kind === "empty") return -1;
+  const c = s.kind === "number" && o.kind === "number" ? s.value - o.value : xe.compare(String(s.value), String(o.value));
   return a === "ascending" ? c : -c;
 }
-const de = n.createContext(null), B = () => n.useContext(de), Y = n.createContext("body");
+const de = n.createContext(null), B = () => n.useContext(de), Z = n.createContext("body");
 function Ne(r) {
-  const t = [], o = V(r.props.children).map((s, c) => {
-    if (!n.isValidElement(s) || s.type !== Z)
-      return s;
-    let u = 0;
-    const p = V(s.props.children).map((e) => {
-      if (!n.isValidElement(e)) return e;
-      for (; (t[u] ?? 0) > c; )
-        u += 1;
-      const N = Math.max(1, Number(e.props.colSpan ?? 1)), x = Math.max(1, Number(e.props.rowSpan ?? 1)), y = u;
-      for (let g = 0; g < N; g += 1)
-        t[y + g] = Math.max(
-          t[y + g] ?? 0,
+  const e = [], s = _(r.props.children).map((o, c) => {
+    if (!n.isValidElement(o) || o.type !== K)
+      return o;
+    let d = 0;
+    const k = _(o.props.children).map((t) => {
+      if (!n.isValidElement(t)) return t;
+      for (; (e[d] ?? 0) > c; )
+        d += 1;
+      const b = Math.max(1, Number(t.props.colSpan ?? 1)), x = Math.max(1, Number(t.props.rowSpan ?? 1)), y = d;
+      for (let g = 0; g < b; g += 1)
+        e[y + g] = Math.max(
+          e[y + g] ?? 0,
           c + x
         );
-      return u += N, e.type !== be ? e : n.cloneElement(e, { _sortColumnIndex: y });
+      return d += b, t.type !== be ? t : n.cloneElement(t, { _sortColumnIndex: y });
     });
-    return n.cloneElement(s, void 0, p);
+    return n.cloneElement(o, void 0, k);
   });
-  return n.cloneElement(r, void 0, o);
+  return n.cloneElement(r, void 0, s);
 }
-function ke(r, t, a) {
-  const o = V(r.props.children).map((s, c) => {
-    if (!n.isValidElement(s) || s.type !== Z)
-      return { row: s, index: c, value: "" };
-    const u = V(s.props.children);
+function ke(r, e, a) {
+  const s = _(r.props.children).map((o, c) => {
+    if (!n.isValidElement(o) || o.type !== K)
+      return { row: o, index: c, value: "" };
+    const d = _(o.props.children);
     return {
-      row: s,
+      row: o,
       index: c,
-      value: X(u[t])
+      value: X(d[e])
     };
   });
-  return o.sort((s, c) => Ce(s.value, c.value, a) || s.index - c.index), n.cloneElement(
+  return s.sort((o, c) => Ce(o.value, c.value, a) || o.index - c.index), n.cloneElement(
     r,
     void 0,
-    o.map(({ row: s }) => s)
+    s.map(({ row: o }) => o)
   );
 }
-function me(r, t) {
-  const a = t != null && t.column.startsWith(G) ? Number(t.column.slice(G.length)) : Number.NaN;
-  return n.Children.map(r, (o) => n.isValidElement(o) ? o.type === n.Fragment ? n.cloneElement(
-    o,
+function me(r, e) {
+  const a = e != null && e.column.startsWith(Q) ? Number(e.column.slice(Q.length)) : Number.NaN;
+  return n.Children.map(r, (s) => n.isValidElement(s) ? s.type === n.Fragment ? n.cloneElement(
+    s,
     void 0,
-    me(o.props.children, t)
-  ) : o.type === fe ? Ne(o) : o.type === pe && t && Number.isInteger(a) && a >= 0 ? ke(o, a, t.direction) : o : o);
+    me(s.props.children, e)
+  ) : s.type === fe ? Ne(s) : s.type === pe && e && Number.isInteger(a) && a >= 0 ? ke(s, a, e.direction) : s : s);
 }
 const ze = n.forwardRef(
   ({
     className: r,
-    wrapperClassName: t,
+    wrapperClassName: e,
     toolbar: a,
-    footer: o,
-    children: s,
+    footer: s,
+    children: o,
     selectionMode: c = "none",
-    selectedKeys: u,
-    onSelectionChange: h,
-    rowKeys: p,
-    elevatedActionColumn: e = !1,
-    actionColumnWidth: N = "3rem",
+    selectedKeys: d,
+    onSelectionChange: v,
+    rowKeys: k,
+    elevatedActionColumn: t = !1,
+    actionColumnWidth: b = "3rem",
     sortDescriptor: x,
     onSortChange: y,
     allowsSorting: g = !0,
-    isStatic: A = !1,
-    resizableColumns: E = !0,
-    maxBodyHeight: k,
-    ..._
+    isStatic: z = !1,
+    resizableColumns: S = !0,
+    maxBodyHeight: m,
+    ...E
   }, O) => {
-    const C = n.useMemo(() => p ?? [], [p]), z = u === "all", v = z ? null : u ?? /* @__PURE__ */ new Set(), D = n.useCallback(
-      (i) => z || !!(v != null && v.has(i)),
-      [z, v]
-    ), R = C.length > 0 && (z || C.every((i) => v == null ? void 0 : v.has(i))), W = !R && (z || C.some((i) => v == null ? void 0 : v.has(i))), $ = n.useCallback(
+    const N = n.useMemo(() => k ?? [], [k]), R = d === "all", w = R ? null : d ?? /* @__PURE__ */ new Set(), D = n.useCallback(
+      (i) => R || !!(w != null && w.has(i)),
+      [R, w]
+    ), A = N.length > 0 && (R || N.every((i) => w == null ? void 0 : w.has(i))), I = !A && (R || N.some((i) => w == null ? void 0 : w.has(i))), $ = n.useCallback(
       (i) => {
-        if (!h) return;
+        if (!v) return;
         if (c === "single") {
-          h(D(i) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([i]));
+          v(D(i) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([i]));
           return;
         }
-        const b = new Set(z ? C : v ?? /* @__PURE__ */ new Set());
-        b.has(i) ? b.delete(i) : b.add(i), h(b);
+        const h = new Set(R ? N : w ?? /* @__PURE__ */ new Set());
+        h.has(i) ? h.delete(i) : h.add(i), v(h);
       },
-      [h, c, D, z, C, v]
-    ), I = n.useCallback(() => {
-      h && h(R ? /* @__PURE__ */ new Set() : new Set(C));
-    }, [h, R, C]), [H, U] = n.useState(), f = g && !y, l = f ? H ?? x : x, S = n.useCallback(
+      [v, c, D, R, N, w]
+    ), M = n.useCallback(() => {
+      v && v(A ? /* @__PURE__ */ new Set() : new Set(N));
+    }, [v, A, N]), [H, U] = n.useState(), p = g && !y, l = p ? H ?? x : x, T = n.useCallback(
       (i) => {
         if (!g) return;
-        const b = (l == null ? void 0 : l.column) === i && l.direction === "ascending" ? "descending" : "ascending", w = { column: i, direction: b };
-        y ? y(w) : U(w);
+        const h = (l == null ? void 0 : l.column) === i && l.direction === "ascending" ? "descending" : "ascending", C = { column: i, direction: h };
+        y ? y(C) : U(C);
       },
       [l, g, y]
     ), j = n.useMemo(
-      () => f ? me(s, l) : s,
-      [l, f, s]
-    ), M = n.useRef(null), [F, he] = n.useState({
+      () => p ? me(o, l) : o,
+      [l, p, o]
+    ), P = n.useRef(null), [F, ge] = n.useState({
       left: !1,
       right: !1
     }), q = n.useCallback(() => {
-      const i = M.current;
+      const i = P.current;
       if (!i) return;
-      const b = i.scrollWidth - i.clientWidth, w = i.scrollLeft > 1, L = i.scrollLeft < b - 1;
-      he(
-        (K) => K.left === w && K.right === L ? K : { left: w, right: L }
+      const h = i.scrollWidth - i.clientWidth, C = i.scrollLeft > 1, V = i.scrollLeft < h - 1;
+      ge(
+        (G) => G.left === C && G.right === V ? G : { left: C, right: V }
       );
     }, []);
     n.useEffect(() => {
       q();
-      const i = M.current;
+      const i = P.current;
       if (!i || typeof ResizeObserver > "u") return;
-      const b = new ResizeObserver(q);
-      b.observe(i);
-      const w = i.querySelector("table");
-      return w && b.observe(w), () => b.disconnect();
+      const h = new ResizeObserver(q);
+      h.observe(i);
+      const C = i.querySelector("table");
+      return C && h.observe(C), () => h.disconnect();
     }, [q]);
-    const [P, J] = n.useState(
+    const [L, J] = n.useState(
       null
     ), ee = n.useCallback(
       (i) => {
         J(
-          (b) => b ?? Array.from(
+          (h) => h ?? Array.from(
             i.cells,
-            (w) => w.getBoundingClientRect().width
+            (C) => C.getBoundingClientRect().width
           )
         );
       },
       []
-    ), te = n.useCallback((i, b) => {
-      J((w) => {
-        if (!w) return w;
-        const L = [...w];
-        return L[i] = Math.max(Q, b), L;
+    ), te = n.useCallback((i, h) => {
+      J((C) => {
+        if (!C) return C;
+        const V = [...C];
+        return V[i] = Math.max(Y, h), V;
       });
     }, []), re = n.useCallback(
       () => J(null),
       []
-    ), ge = n.useMemo(
+    ), he = n.useMemo(
       () => ({
         selectionMode: c,
         isSelected: D,
         toggleKey: $,
-        toggleAll: I,
-        allSelected: R,
-        someSelected: W,
-        isStatic: A,
+        toggleAll: M,
+        allSelected: A,
+        someSelected: I,
+        isStatic: z,
         sortDescriptor: l,
-        requestSort: g ? S : void 0,
-        automaticSorting: f,
-        elevatedActionColumn: e,
-        resizableColumns: E,
-        columnWidths: P,
+        requestSort: g ? T : void 0,
+        automaticSorting: p,
+        elevatedActionColumn: t,
+        resizableColumns: S,
+        columnWidths: L,
         snapshotColumnWidths: ee,
         setColumnWidth: te,
         resetColumnWidths: re,
-        stickyHeader: k != null
+        stickyHeader: m != null
       }),
       [
         c,
         D,
         $,
-        I,
-        R,
-        W,
+        M,
         A,
+        I,
+        z,
         l,
         g,
-        f,
+        p,
+        T,
+        t,
         S,
-        e,
-        E,
-        P,
+        L,
         ee,
         te,
         re,
-        k
+        m
       ]
     );
-    return /* @__PURE__ */ d(de.Provider, { value: ge, children: /* @__PURE__ */ T(
+    return /* @__PURE__ */ u(de.Provider, { value: he, children: /* @__PURE__ */ W(
       "div",
       {
         "data-slot": "table-container",
         "data-scroll-left": F.left ? "true" : "false",
         "data-scroll-right": F.right ? "true" : "false",
-        className: m(
+        className: f(
           "group/table-shell overflow-clip rounded-m border border-table-stroke bg-table-shell",
           "[--table-card-radius:var(--radius-m)]",
-          t
+          e
         ),
         children: [
-          a && /* @__PURE__ */ d(
+          a && /* @__PURE__ */ u(
             "div",
             {
               "data-slot": "table-toolbar",
@@ -286,65 +286,65 @@ const ze = n.forwardRef(
               children: a
             }
           ),
-          /* @__PURE__ */ T(
+          /* @__PURE__ */ W(
             "div",
             {
               className: "relative",
-              style: e ? {
-                "--table-action-column-width": N
+              style: t ? {
+                "--table-action-column-width": b
               } : void 0,
               children: [
-                /* @__PURE__ */ d(
+                /* @__PURE__ */ u(
                   "div",
                   {
-                    ref: M,
+                    ref: P,
                     onScroll: q,
-                    className: m(
+                    className: f(
                       "overflow-x-auto rounded-(--table-card-radius)",
-                      k != null && "overflow-y-auto"
+                      m != null && "overflow-y-auto"
                     ),
-                    style: k != null ? { maxHeight: k } : void 0,
-                    children: /* @__PURE__ */ T(
+                    style: m != null ? { maxHeight: m } : void 0,
+                    children: /* @__PURE__ */ W(
                       "table",
                       {
                         ref: O,
                         "data-slot": "table",
-                        className: m(
+                        className: f(
                           "w-full border-separate border-spacing-0 text-m font-normal",
                           // Manual widths need fixed layout so the <colgroup> wins;
                           // until the first resize the automatic layout is untouched.
-                          P && "table-fixed",
+                          L && "table-fixed",
                           r
                         ),
-                        ..._,
+                        ...E,
                         children: [
-                          P && /* @__PURE__ */ d("colgroup", { children: P.map((i, b) => /* @__PURE__ */ d("col", { style: { width: i } }, b)) }),
+                          L && /* @__PURE__ */ u("colgroup", { children: L.map((i, h) => /* @__PURE__ */ u("col", { style: { width: i } }, h)) }),
                           j
                         ]
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ d(
+                /* @__PURE__ */ u(
                   "div",
                   {
                     "aria-hidden": "true",
                     "data-slot": "table-scroll-hint",
-                    className: m(
+                    className: f(
                       "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-150 ease-out motion-reduce:transition-none",
                       F.right && "opacity-100",
-                      e ? "right-[var(--table-action-column-width)]" : "right-0"
+                      t ? "right-[var(--table-action-column-width)]" : "right-0"
                     )
                   }
                 ),
-                e && /* @__PURE__ */ d(
+                t && /* @__PURE__ */ u(
                   "div",
                   {
                     "aria-hidden": "true",
                     "data-slot": "table-action-column-elevation",
-                    className: m(
+                    className: f(
                       "pointer-events-none absolute inset-y-0 right-0 z-20",
                       "w-[var(--table-action-column-width)]"
                       // No shadow of its own: while columns hide behind the pinned
@@ -357,58 +357,74 @@ const ze = n.forwardRef(
               ]
             }
           ),
-          o && /* @__PURE__ */ d("div", { className: "flex items-center border-t border-table-stroke px-4 py-2.5", children: o })
+          s && /* @__PURE__ */ u("div", { className: "flex items-center border-t border-table-stroke px-4 py-2.5", children: s })
         ]
       }
     ) });
   }
 );
 ze.displayName = "Table";
-const fe = n.forwardRef(({ className: r, ...t }, a) => {
-  const o = B();
-  return /* @__PURE__ */ d(Y.Provider, { value: "header", children: /* @__PURE__ */ d(
+const fe = n.forwardRef(({ className: r, ...e }, a) => {
+  const s = B();
+  return /* @__PURE__ */ u(Z.Provider, { value: "header", children: /* @__PURE__ */ u(
     "thead",
     {
       ref: a,
-      className: m(
+      className: f(
         "text-s font-medium text-table-header-foreground",
-        (o == null ? void 0 : o.elevatedActionColumn) && "relative z-30 bg-wg1",
+        (s == null ? void 0 : s.elevatedActionColumn) && "relative z-30 bg-wg1",
         r
       ),
-      ...t
+      ...e
     }
   ) });
 });
 fe.displayName = "TableHeader";
-const pe = n.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ d(Y.Provider, { value: "body", children: /* @__PURE__ */ d("tbody", { ref: a, className: m(r), ...t }) }));
+const pe = n.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ u(Z.Provider, { value: "body", children: /* @__PURE__ */ u("tbody", { ref: a, className: f(r), ...e }) }));
 pe.displayName = "TableBody";
-const Z = n.forwardRef(
+const K = n.forwardRef(
   ({
     className: r,
-    rowKey: t,
+    rowKey: e,
     children: a,
-    isInteractive: o = !1,
-    onClick: s,
-    role: c,
-    ...u
-  }, h) => {
-    const p = B(), e = n.useContext(Y), N = !!p && p.selectionMode !== "none", x = e === "body" && !(p != null && p.isStatic) && (o || N || typeof s == "function" || c === "button" || u["aria-expanded"] !== void 0), y = N && e === "body" && t !== void 0 ? p.isSelected(t) : !1;
-    return /* @__PURE__ */ d(ie.Provider, { value: x, children: /* @__PURE__ */ T(
+    isInteractive: s = !1,
+    onClick: o,
+    onKeyDown: c,
+    role: d,
+    tabIndex: v,
+    ...k
+  }, t) => {
+    const b = B(), x = n.useContext(Z), y = !!b && b.selectionMode !== "none", g = x === "body" && (typeof o == "function" || y && e !== void 0), z = x === "body" && !(b != null && b.isStatic) && (g || s), S = y && x === "body" && e !== void 0 ? b.isSelected(e) : !1;
+    return /* @__PURE__ */ u(ie.Provider, { value: z, children: /* @__PURE__ */ W(
       "tr",
       {
-        ref: h,
-        "data-interactive": x || void 0,
-        "data-selected": y || void 0,
-        className: m("group/row", e === "body" && "h-16", r),
-        onClick: s,
-        role: c,
-        ...u,
+        ref: t,
+        "data-interactive": z || void 0,
+        "data-selected": S || void 0,
+        className: f(
+          "group/row",
+          x === "body" && "h-16",
+          g && "cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          r
+        ),
+        onClick: (m) => {
+          const E = m.target;
+          E instanceof Element && E.closest(
+            "a, button, input, select, textarea, [role='button'], [role='link'], [contenteditable='true']"
+          ) || (o ? o(m) : y && e !== void 0 && (b == null || b.toggleKey(e)));
+        },
+        onKeyDown: (m) => {
+          c == null || c(m), !m.defaultPrevented && g && m.target === m.currentTarget && (m.key === "Enter" || m.key === " ") && (m.preventDefault(), m.currentTarget.click());
+        },
+        role: d,
+        tabIndex: v ?? (g ? 0 : void 0),
+        ...k,
         children: [
-          N && (e === "header" ? /* @__PURE__ */ T(
+          y && (x === "header" ? /* @__PURE__ */ W(
             "th",
             {
               scope: "col",
-              className: m(
+              className: f(
                 "w-10 border-b border-table-stroke px-4 py-2.5",
                 ue,
                 // Sticky without the baked shadow — an always-on smudge
@@ -419,35 +435,35 @@ const Z = n.forwardRef(
                 ce
               ),
               children: [
-                /* @__PURE__ */ d("span", { className: "sr-only", children: "Row selection" }),
-                p.selectionMode === "multiple" && /* @__PURE__ */ d(
+                /* @__PURE__ */ u("span", { className: "sr-only", children: "Row selection" }),
+                b.selectionMode === "multiple" && /* @__PURE__ */ u(
                   ne,
                   {
                     size: "sm",
                     "aria-label": "Select all rows",
-                    checked: p.allSelected,
-                    indeterminate: p.someSelected,
-                    onChange: p.toggleAll
+                    checked: b.allSelected,
+                    indeterminate: b.someSelected,
+                    onChange: b.toggleAll
                   }
                 )
               ]
             }
-          ) : /* @__PURE__ */ d(
+          ) : /* @__PURE__ */ u(
             "td",
             {
-              className: m(
+              className: f(
                 "h-16 w-10 px-4 py-2",
-                le(x),
+                le(z),
                 "sticky left-0 z-10"
               ),
-              onClick: (g) => g.stopPropagation(),
-              children: t !== void 0 && /* @__PURE__ */ d(
+              onClick: (m) => m.stopPropagation(),
+              children: e !== void 0 && /* @__PURE__ */ u(
                 ne,
                 {
                   size: "sm",
-                  "aria-label": `Select ${t}`,
-                  checked: y,
-                  onChange: () => p.toggleKey(t)
+                  "aria-label": `Select ${e}`,
+                  checked: S,
+                  onChange: () => b.toggleKey(e)
                 }
               )
             }
@@ -458,61 +474,61 @@ const Z = n.forwardRef(
     ) });
   }
 );
-Z.displayName = "TableRow";
+K.displayName = "TableRow";
 const be = n.forwardRef(
   ({
     className: r,
-    align: t,
+    align: e,
     sticky: a,
-    sortKey: o,
-    allowsSorting: s = !0,
+    sortKey: s,
+    allowsSorting: o = !0,
     _sortColumnIndex: c,
-    children: u,
-    ...h
-  }, p) => {
-    var I, H, U;
-    const e = B(), x = (e != null && e.automaticSorting && c !== void 0 ? `${G}${c}` : void 0) ?? o, y = Number(h.colSpan ?? 1) === 1, g = String(X(u)).trim(), A = g.length > 0, E = s && y && a !== "right" && A && !!x && !!(e != null && e.requestSort), k = E && ((I = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : I.column) === x, _ = (H = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : H.direction, O = !!(e != null && e.resizableColumns) && y && a !== "right", C = n.useRef(null), [z, v] = n.useState(!1), D = (f) => {
-      if (f.button !== 0 || !e) return;
-      const l = f.currentTarget.parentElement, S = l == null ? void 0 : l.parentElement;
-      if (!(!l || !S)) {
-        e.snapshotColumnWidths(S), C.current = {
+    children: d,
+    ...v
+  }, k) => {
+    var M, H, U;
+    const t = B(), x = (t != null && t.automaticSorting && c !== void 0 ? `${Q}${c}` : void 0) ?? s, y = Number(v.colSpan ?? 1) === 1, g = String(X(d)).trim(), z = g.length > 0, S = o && y && a !== "right" && z && !!x && !!(t != null && t.requestSort), m = S && ((M = t == null ? void 0 : t.sortDescriptor) == null ? void 0 : M.column) === x, E = (H = t == null ? void 0 : t.sortDescriptor) == null ? void 0 : H.direction, O = !!(t != null && t.resizableColumns) && y && a !== "right", N = n.useRef(null), [R, w] = n.useState(!1), D = (p) => {
+      if (p.button !== 0 || !t) return;
+      const l = p.currentTarget.parentElement, T = l == null ? void 0 : l.parentElement;
+      if (!(!l || !T)) {
+        t.snapshotColumnWidths(T), N.current = {
           index: l.cellIndex,
-          startX: f.clientX,
+          startX: p.clientX,
           startWidth: l.getBoundingClientRect().width
-        }, v(!0);
+        }, w(!0);
         try {
-          f.currentTarget.setPointerCapture(f.pointerId);
+          p.currentTarget.setPointerCapture(p.pointerId);
         } catch {
         }
-        f.preventDefault();
+        p.preventDefault();
       }
-    }, R = (f) => {
-      const l = C.current;
-      !l || !e || e.setColumnWidth(
+    }, A = (p) => {
+      const l = N.current;
+      !l || !t || t.setColumnWidth(
         l.index,
-        l.startWidth + (f.clientX - l.startX)
+        l.startWidth + (p.clientX - l.startX)
       );
-    }, W = () => {
-      C.current = null, v(!1);
-    }, $ = (f) => {
-      if (f.key !== "ArrowLeft" && f.key !== "ArrowRight" || !e) return;
-      f.preventDefault();
-      const l = f.currentTarget.parentElement, S = l == null ? void 0 : l.parentElement;
-      if (!l || !S) return;
-      e.snapshotColumnWidths(S);
-      const j = f.shiftKey ? 32 : 8, M = f.key === "ArrowRight" ? j : -j;
-      e.setColumnWidth(
+    }, I = () => {
+      N.current = null, w(!1);
+    }, $ = (p) => {
+      if (p.key !== "ArrowLeft" && p.key !== "ArrowRight" || !t) return;
+      p.preventDefault();
+      const l = p.currentTarget.parentElement, T = l == null ? void 0 : l.parentElement;
+      if (!l || !T) return;
+      t.snapshotColumnWidths(T);
+      const j = p.shiftKey ? 32 : 8, P = p.key === "ArrowRight" ? j : -j;
+      t.setColumnWidth(
         l.cellIndex,
-        l.getBoundingClientRect().width + M
+        l.getBoundingClientRect().width + P
       );
     };
-    return /* @__PURE__ */ T(
+    return /* @__PURE__ */ W(
       "th",
       {
-        ref: p,
+        ref: k,
         scope: "col",
-        "aria-sort": k ? _ === "ascending" ? "ascending" : "descending" : E ? "none" : void 0,
-        className: m(
+        "aria-sort": m ? E === "ascending" ? "ascending" : "descending" : S ? "none" : void 0,
+        className: f(
           // 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.
@@ -524,9 +540,9 @@ const be = n.forwardRef(
           O && "after:hidden [&:last-child>[data-slot=resize-handle]]:hidden",
           // Capped-height tables scroll under the header: pin it to the
           // viewport top, painted WG1 so rows pass beneath.
-          (e == null ? void 0 : e.stickyHeader) && "sticky top-0 z-30",
-          se(t),
-          a && (a === "right" && (e != null && e.elevatedActionColumn) ? m(
+          (t == null ? void 0 : t.stickyHeader) && "sticky top-0 z-30",
+          se(e),
+          a && (a === "right" && (t != null && t.elevatedActionColumn) ? f(
             // 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.
@@ -538,54 +554,54 @@ const be = n.forwardRef(
           ) : ae(a)),
           r
         ),
-        ...h,
+        ...v,
         children: [
-          E ? /* @__PURE__ */ T(
+          S ? /* @__PURE__ */ W(
             "button",
             {
               type: "button",
-              onClick: () => e.requestSort(x),
-              className: m(
+              onClick: () => t.requestSort(x),
+              className: f(
                 "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",
-                t === "right" && "flex-row-reverse",
-                k && "font-medium"
+                e === "right" && "flex-row-reverse",
+                m && "font-medium"
               ),
               children: [
-                u,
-                k ? _ === "ascending" ? /* @__PURE__ */ d(ve, { className: "size-3.5" }) : /* @__PURE__ */ d(ye, { className: "size-3.5" }) : /* @__PURE__ */ d(we, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
+                d,
+                m ? E === "ascending" ? /* @__PURE__ */ u(ve, { className: "size-3.5" }) : /* @__PURE__ */ u(ye, { className: "size-3.5" }) : /* @__PURE__ */ u(we, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
               ]
             }
-          ) : A ? u : /* @__PURE__ */ d("span", { className: "sr-only", children: h["aria-label"] ?? "Table column" }),
-          O && /* @__PURE__ */ d(
+          ) : z ? d : /* @__PURE__ */ u("span", { className: "sr-only", children: v["aria-label"] ?? "Table column" }),
+          O && /* @__PURE__ */ u(
             "span",
             {
               "data-slot": "resize-handle",
               role: "separator",
               "aria-orientation": "vertical",
               "aria-label": `Resize ${g || "this"} column`,
-              "aria-valuemin": Q,
+              "aria-valuemin": Y,
               "aria-valuemax": 2e3,
-              "aria-valuenow": ((U = e == null ? void 0 : e.columnWidths) == null ? void 0 : U[c ?? -1]) ?? Q,
+              "aria-valuenow": ((U = t == null ? void 0 : t.columnWidths) == null ? void 0 : U[c ?? -1]) ?? Y,
               tabIndex: 0,
-              "data-resizing": z ? "true" : void 0,
+              "data-resizing": R ? "true" : void 0,
               onPointerDown: D,
-              onPointerMove: R,
-              onPointerUp: W,
-              onPointerCancel: W,
+              onPointerMove: A,
+              onPointerUp: I,
+              onPointerCancel: I,
               onKeyDown: $,
-              onDoubleClick: () => e == null ? void 0 : e.resetColumnWidths(),
-              className: m(
+              onDoubleClick: () => t == null ? void 0 : t.resetColumnWidths(),
+              className: f(
                 // 12px hit area straddling the column edge; the 1px tick inside
                 // is the visible affordance (it replaces the decorative one).
                 "group/resize absolute -right-1.5 top-0 z-10 flex h-full w-3 cursor-col-resize touch-none select-none items-center justify-center rounded-sm outline-none",
                 "focus-visible:ring-2 focus-visible:ring-ring"
               ),
-              children: /* @__PURE__ */ d(
+              children: /* @__PURE__ */ u(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: m(
+                  className: f(
                     "h-4 w-px rounded-sm bg-border-strong",
                     "transition-[transform,background-color] duration-150 ease-out motion-reduce:transition-none",
                     "group-hover/resize:scale-y-125 group-hover/resize:bg-foreground/60",
@@ -603,14 +619,14 @@ const be = n.forwardRef(
 );
 be.displayName = "TableColumn";
 const Se = n.forwardRef(
-  ({ className: r, align: t, sticky: a, sortValue: o, ...s }, c) => {
-    const u = B(), h = n.useContext(ie), p = a === "right" && (u == null ? void 0 : u.elevatedActionColumn);
-    return /* @__PURE__ */ d(
+  ({ className: r, align: e, sticky: a, sortValue: s, ...o }, c) => {
+    const d = B(), v = n.useContext(ie), k = a === "right" && (d == null ? void 0 : d.elevatedActionColumn);
+    return /* @__PURE__ */ u(
       "td",
       {
         ref: c,
-        "data-sort-value": o instanceof Date ? o.toISOString() : o,
-        className: m(
+        "data-sort-value": s instanceof Date ? s.toISOString() : s,
+        className: f(
           // 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
@@ -618,10 +634,10 @@ const Se = n.forwardRef(
           // Cell values own the ADS 14px body-text contract instead of relying
           // on inheritance from <Table>; nested content stays 14px by default.
           "h-16 whitespace-nowrap px-4 py-2 text-m",
-          le(h),
-          se(t),
-          a && ae(a, u == null ? void 0 : u.elevatedActionColumn),
-          p && m(
+          le(v),
+          se(e),
+          a && ae(a, d == null ? void 0 : d.elevatedActionColumn),
+          k && f(
             "w-[var(--table-action-column-width)]",
             "min-w-[var(--table-action-column-width)]",
             "max-w-[var(--table-action-column-width)]",
@@ -632,7 +648,7 @@ const Se = n.forwardRef(
           ),
           r
         ),
-        ...s
+        ...o
       }
     );
   }
@@ -644,5 +660,5 @@ export {
   Se as TableCell,
   be as TableColumn,
   fe as TableHeader,
-  Z as TableRow
+  K as TableRow
 };

package/llms.txt

@@ -456,7 +456,7 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [SeriesChart] — component [docs](https://ads.actioneer.dev/#/viz-charts)
 - [StatusAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
 - [Tab] — component (variants: orientation: horizontal|vertical; selected: true|false) [docs](https://ads.actioneer.dev/#/tabs)
-- [Table] — Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Every primary body-cell value defaults to text-m (14px / 20px); only clearly secondary metadata inside a cell may opt down to text-s. Interactive rows inherit the shared soft neutral hover/focus sink and keep their normal table geometry; do not add a brand tint or hover-only corner rounding. Primary record links stay text-only in every state: never reveal an arrow, chevron, or other directional icon only on hover. Persistent row actions use a final sticky-right column plus elevatedActionColumn so one body-column shadow lifts the action surface instead of repeating on individual cells. The empty matching header cell remains transparent and non-sticky. [docs](https://ads.actioneer.dev/#/table)
+- [Table] — Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Every primary body-cell value defaults to text-m (14px / 20px); only clearly secondary metadata inside a cell may opt down to text-s. Give a whole-row action an onClick and aria-label: TableRow then adds hover/focus feedback, a pointer cursor, and Enter/Space activation. The consumer decides whether that action navigates or opens a panel; TableRow owns neither destination. Display-only rows stay static; selection rows toggle when clicked. Keep normal row geometry without a brand tint or hover-only corner rounding. Nested controls keep their own actions. Primary record links stay text-only in every state: never reveal an arrow, chevron, or other directional icon only on hover. Persistent row actions use a final sticky-right column plus elevatedActionColumn so one body-column shadow lifts the action surface instead of repeating on individual cells. The empty matching header cell remains transparent and non-sticky. [docs](https://ads.actioneer.dev/#/table)
 - [TableAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
 - [TableBody] — component [docs](https://ads.actioneer.dev/#/table)
 - [TableCell] — component [docs](https://ads.actioneer.dev/#/table)

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [
@@ -3613,7 +3613,7 @@
       "kind": "component",
       "importPath": "@actioneer/ads",
       "module": "table",
-      "description": "Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Every primary body-cell value defaults to text-m (14px / 20px); only clearly secondary metadata inside a cell may opt down to text-s. Interactive rows inherit the shared soft neutral hover/focus sink and keep their normal table geometry; do not add a brand tint or hover-only corner rounding. Primary record links stay text-only in every state: never reveal an arrow, chevron, or other directional icon only on hover. Persistent row actions use a final sticky-right column plus elevatedActionColumn so one body-column shadow lifts the action surface instead of repeating on individual cells. The empty matching header cell remains transparent and non-sticky.",
+      "description": "Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Every primary body-cell value defaults to text-m (14px / 20px); only clearly secondary metadata inside a cell may opt down to text-s. Give a whole-row action an onClick and aria-label: TableRow then adds hover/focus feedback, a pointer cursor, and Enter/Space activation. The consumer decides whether that action navigates or opens a panel; TableRow owns neither destination. Display-only rows stay static; selection rows toggle when clicked. Keep normal row geometry without a brand tint or hover-only corner rounding. Nested controls keep their own actions. Primary record links stay text-only in every state: never reveal an arrow, chevron, or other directional icon only on hover. Persistent row actions use a final sticky-right column plus elevatedActionColumn so one body-column shadow lifts the action surface instead of repeating on individual cells. The empty matching header cell remains transparent and non-sticky.",
       "showcaseUrl": "https://ads.actioneer.dev/#/table",
       "props": [
         "wrapperClassName",
@@ -8923,6 +8923,7 @@
         "constraints": [
           "TableHeader contains TableRow; never place TableColumn directly under TableHeader.",
           "Keep header and body column counts aligned.",
+          "Only give rows hover feedback when clicking the whole row selects it or opens a detail page or panel; actionable rows need an accessible destination label.",
           "Use a sticky-right actions column plus elevatedActionColumn when every row has persistent actions."
         ],
         "principles": [
@@ -14036,7 +14037,7 @@
         "family": "Data display",
         "module": "table",
         "showcaseUrl": "https://ads.actioneer.dev/#/table",
-        "description": "Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Every primary body-cell value defaults to text-m (14px / 20px); only clearly secondary metadata inside a cell may opt down to text-s. Interactive rows inherit the shared soft neutral hover/focus sink and keep their normal table geometry; do not add a brand tint or hover-only corner rounding. Primary record links stay text-only in every state: never reveal an arrow, chevron, or other directional icon only on hover. Persistent row actions use a final sticky-right column plus elevatedActionColumn so one body-column shadow lifts the action surface instead of repeating on individual cells. The empty matching header cell remains transparent and non-sticky."
+        "description": "Use Table for structured tabular data that may need row selection, column sorting, sticky columns, or a paginated footer — not for simple key-value lists. Every primary body-cell value defaults to text-m (14px / 20px); only clearly secondary metadata inside a cell may opt down to text-s. Give a whole-row action an onClick and aria-label: TableRow then adds hover/focus feedback, a pointer cursor, and Enter/Space activation. The consumer decides whether that action navigates or opens a panel; TableRow owns neither destination. Display-only rows stay static; selection rows toggle when clicked. Keep normal row geometry without a brand tint or hover-only corner rounding. Nested controls keep their own actions. Primary record links stay text-only in every state: never reveal an arrow, chevron, or other directional icon only on hover. Persistent row actions use a final sticky-right column plus elevatedActionColumn so one body-column shadow lifts the action surface instead of repeating on individual cells. The empty matching header cell remains transparent and non-sticky."
       },
       {
         "id": "component:TableAnswer",
@@ -18127,6 +18128,7 @@
         "constraints": [
           "TableHeader contains TableRow; never place TableColumn directly under TableHeader.",
           "Keep header and body column counts aligned.",
+          "Only give rows hover feedback when clicking the whole row selects it or opens a detail page or panel; actionable rows need an accessible destination label.",
           "Use a sticky-right actions column plus elevatedActionColumn when every row has persistent actions."
         ]
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [

package/styles.css

@@ -513,8 +513,8 @@
   --brand-hover: var(--color-wg11);        /* lighter hover lift */
   --brand-text: var(--color-wg12);         /* action text / links */
 
-  /* Interactive row hover/focus uses the WG3 highlight wash. */
-  --table-row-hover: var(--color-wg3);
+  /* Interactive row hover/focus uses the WG2 highlight wash. */
+  --table-row-hover: var(--color-wg2);
   --table-row-selected: var(--color-wg1);
 
   /* Quiet component fill. WG3 is the first interactive-background

package/theme.css

@@ -482,8 +482,8 @@
   --brand-hover: var(--color-wg11);        /* lighter hover lift */
   --brand-text: var(--color-wg12);         /* action text / links */
 
-  /* Interactive row hover/focus uses the WG3 highlight wash. */
-  --table-row-hover: var(--color-wg3);
+  /* Interactive row hover/focus uses the WG2 highlight wash. */
+  --table-row-hover: var(--color-wg2);
   --table-row-selected: var(--color-wg1);
 
   /* Quiet component fill. WG3 is the first interactive-background