@actioneer/ads 1.0.5 → 1.0.7

package/components/sidebar.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import * as s from "react";
-import { MotionConfig as z, motion as j } from "motion/react";
-import { User as _, PanelLeft as E } from "../lib/icons.js";
+import * as o from "react";
+import { MotionConfig as _, motion as z } from "motion/react";
+import { User as j, PanelLeft as E } from "../lib/icons.js";
 import { cn as n } from "../lib/cn.js";
 import { springSidebar as H } from "../lib/motion.js";
 import { Tooltip as I } from "./tooltip.js";
 import { Avatar as L } from "./avatar.js";
-const R = s.createContext({
+const R = o.createContext({
   collapsed: !1,
   toggle: () => {
   },
@@ -15,44 +15,44 @@ const R = s.createContext({
   }
 });
 function M() {
-  return s.useContext(R);
+  return o.useContext(R);
 }
-const K = s.forwardRef(
+const K = o.forwardRef(
   ({
     className: t,
     collapsed: e,
     defaultCollapsed: a = !1,
     onCollapsedChange: i,
-    animateOnMount: o = !1,
+    animateOnMount: s = !1,
     keyboardToggle: d = !0,
     ...l
   }, m) => {
-    const [v, y] = s.useState(a), b = e !== void 0, u = b ? e : v, g = s.useCallback(
+    const [v, y] = o.useState(a), g = e !== void 0, u = g ? e : v, b = o.useCallback(
       (p) => {
-        b || y(p), i == null || i(p);
+        g || y(p), i == null || i(p);
       },
-      [b, i]
-    ), h = s.useCallback(
-      () => g(!u),
-      [u, g]
+      [g, i]
+    ), h = o.useCallback(
+      () => b(!u),
+      [u, b]
     );
-    s.useEffect(() => {
+    o.useEffect(() => {
       if (!d) return;
       const p = (f) => {
         (f.metaKey || f.ctrlKey) && f.key.toLowerCase() === "b" && (f.preventDefault(), h());
       };
       return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
     }, [d, h]);
-    const x = s.useMemo(
-      () => ({ collapsed: u, toggle: h, setCollapsed: g }),
-      [u, h, g]
+    const x = o.useMemo(
+      () => ({ collapsed: u, toggle: h, setCollapsed: b }),
+      [u, h, b]
     );
-    return /* @__PURE__ */ r(R.Provider, { value: x, children: /* @__PURE__ */ r(z, { reducedMotion: "user", children: /* @__PURE__ */ r(
-      j.aside,
+    return /* @__PURE__ */ r(R.Provider, { value: x, children: /* @__PURE__ */ r(_, { reducedMotion: "user", children: /* @__PURE__ */ r(
+      z.aside,
       {
         ref: m,
         "data-collapsed": u ? "true" : "false",
-        initial: o ? {
+        initial: s ? {
           width: u ? 56 : 240,
           transform: "translate3d(-100%, 0, 0)",
           opacity: 0
@@ -82,13 +82,13 @@ function k({
   tooltipSide: a = "right",
   ...i
 }) {
-  const { collapsed: o, toggle: d } = M();
+  const { collapsed: s, toggle: d } = M();
   return /* @__PURE__ */ r(
     I,
     {
       side: a,
       content: /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
-        o ? "Expand" : "Collapse",
+        s ? "Expand" : "Collapse",
         /* @__PURE__ */ c("span", { className: "flex items-center gap-0.5", children: [
           /* @__PURE__ */ r(S, { children: "⌘" }),
           /* @__PURE__ */ r(S, { children: "B" })
@@ -98,8 +98,8 @@ function k({
         "button",
         {
           type: "button",
-          "aria-label": o ? "Expand sidebar" : "Collapse sidebar",
-          "aria-pressed": o,
+          "aria-label": s ? "Expand sidebar" : "Collapse sidebar",
+          "aria-pressed": s,
           onClick: (l) => {
             e == null || e(l), d();
           },
@@ -122,7 +122,7 @@ function Y({
   href: e,
   label: a = "Home",
   showTrigger: i = !0,
-  children: o,
+  children: s,
   className: d,
   ...l
 }) {
@@ -150,13 +150,13 @@ function Y({
         i && /* @__PURE__ */ r("div", { className: "hidden group-data-[collapsed=true]/sidebar:group-hover/sidebar:flex group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:flex", children: /* @__PURE__ */ r(k, { tooltipSide: "right" }) }),
         /* @__PURE__ */ c("div", { className: "flex items-center gap-1 group-data-[collapsed=true]/sidebar:hidden", children: [
           i && /* @__PURE__ */ r(k, { tooltipSide: "bottom" }),
-          o
+          s
         ] })
       ]
     }
   );
 }
-const q = s.forwardRef(
+const q = o.forwardRef(
   ({ className: t, ...e }, a) => /* @__PURE__ */ r(
     "div",
     {
@@ -171,26 +171,26 @@ const q = s.forwardRef(
   )
 );
 q.displayName = "SidebarHeader";
-const A = s.forwardRef(
+const B = o.forwardRef(
   ({ className: t, ...e }, a) => /* @__PURE__ */ r("nav", { ref: a, className: n("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", t), ...e })
 );
-A.displayName = "SidebarNav";
-const B = s.forwardRef(
-  ({ className: t, label: e, children: a, ...i }, o) => /* @__PURE__ */ c("div", { ref: o, className: t, ...i, children: [
+B.displayName = "SidebarNav";
+const D = o.forwardRef(
+  ({ className: t, label: e, children: a, ...i }, s) => /* @__PURE__ */ c("div", { ref: s, className: t, ...i, children: [
     e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s font-normal uppercase leading-4 tracking-wider text-tertiary group-data-[collapsed=true]/sidebar:hidden", children: e }),
     /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5 group-data-[collapsed=true]/sidebar:gap-2", children: a })
   ] })
 );
-B.displayName = "SidebarSection";
-const D = s.forwardRef(
-  ({ className: t, icon: e, isActive: a, endContent: i, children: o, title: d, ...l }, m) => /* @__PURE__ */ c(
+D.displayName = "SidebarSection";
+const F = o.forwardRef(
+  ({ className: t, icon: e, isActive: a, endContent: i, children: s, title: d, ...l }, m) => /* @__PURE__ */ c(
     "a",
     {
       ref: m,
       "aria-current": a ? "page" : void 0,
-      title: d ?? (typeof o == "string" ? o : void 0),
+      title: d ?? (typeof s == "string" ? s : void 0),
       className: n(
-        "group/sidebar-item flex h-9 items-center gap-2.5 rounded-md border border-transparent px-3 text-m leading-[var(--text-m--line-height)] font-normal text-wg12",
+        "group/sidebar-item flex h-9 items-center gap-2.5 rounded-md border border-transparent px-3 text-m leading-[var(--text-m--line-height)] font-normal text-sidebar-foreground",
         "transition-[background-color,border-color,color] duration-150 ease-out motion-reduce:transition-none",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         // Collapsed: a centered square (--sidebar-item) so every rail item lines up.
@@ -205,17 +205,17 @@ const D = s.forwardRef(
           {
             "aria-hidden": !0,
             className: "flex shrink-0 items-center justify-center transition-transform duration-150 ease-out group-hover/sidebar-item:scale-110 motion-reduce:transition-none motion-reduce:group-hover/sidebar-item:scale-100 [&_svg]:size-4 [&_svg]:shrink-0",
-            children: a && s.isValidElement(e) ? s.cloneElement(e, { weight: "fill" }) : e
+            children: a && o.isValidElement(e) ? o.cloneElement(e, { weight: "fill" }) : e
           }
         ),
-        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: o }),
+        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: s }),
         i && /* @__PURE__ */ r("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: i })
       ]
     }
   )
 );
-D.displayName = "SidebarItem";
-const F = s.forwardRef(
+F.displayName = "SidebarItem";
+const W = o.forwardRef(
   ({ className: t, ...e }, a) => /* @__PURE__ */ r(
     "div",
     {
@@ -225,17 +225,17 @@ const F = s.forwardRef(
     }
   )
 );
-F.displayName = "SidebarFooter";
-const W = s.forwardRef(
-  ({ className: t, icon: e, children: a, ...i }, o) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
+W.displayName = "SidebarFooter";
+const $ = o.forwardRef(
+  ({ className: t, icon: e, children: a, ...i }, s) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
     "button",
     {
-      ref: o,
+      ref: s,
       type: "button",
       className: n(
         "flex h-9 w-full items-center justify-start gap-2 rounded-md px-3",
-        "text-m leading-[var(--text-m--line-height)] font-normal text-wg12",
-        // Reads as a normal nav item: transparent at rest, the shared teal
+        "text-m leading-[var(--text-m--line-height)] font-normal text-sidebar-foreground",
+        // Reads as a normal nav item: transparent at rest, the shared White
         // hover wash on hover (no fill-at-rest, no elevation).
         "transition-colors duration-150 ease-out motion-reduce:transition-none",
         "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
@@ -252,12 +252,12 @@ const W = s.forwardRef(
     }
   ) })
 );
-W.displayName = "SidebarAction";
-const $ = s.forwardRef(
-  ({ className: t, label: e, children: a, ...i }, o) => /* @__PURE__ */ c(
+$.displayName = "SidebarAction";
+const A = o.forwardRef(
+  ({ className: t, label: e, children: a, ...i }, s) => /* @__PURE__ */ c(
     "div",
     {
-      ref: o,
+      ref: s,
       className: n("group-data-[collapsed=true]/sidebar:hidden", t),
       ...i,
       children: [
@@ -267,10 +267,10 @@ const $ = s.forwardRef(
     }
   )
 );
-$.displayName = "SidebarHistory";
-const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActive: o, icon: d, ...l }, m) => {
-  const v = s.useRef(null), y = s.useRef(null), [b, u] = s.useState(0);
-  s.useLayoutEffect(() => {
+A.displayName = "SidebarHistory";
+const O = o.forwardRef(({ className: t, children: e, title: a, action: i, isActive: s, icon: d, ...l }, m) => {
+  const v = o.useRef(null), y = o.useRef(null), [g, u] = o.useState(0);
+  o.useLayoutEffect(() => {
     const x = v.current, p = y.current;
     if (!x || !p) return;
     const f = () => {
@@ -281,14 +281,14 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
     const N = new ResizeObserver(f);
     return N.observe(x), N.observe(p), () => N.disconnect();
   }, [e, i]);
-  const g = b > 0, h = Math.max(500, Math.round(b * 18));
+  const b = g > 0, h = Math.max(500, Math.round(g * 18));
   return /* @__PURE__ */ c(
     "div",
     {
       className: n(
         "group/hist relative flex items-center rounded-md transition-colors",
-        "text-wg12",
-        o ? "bg-sidebar-accent text-sidebar-accent-foreground" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
+        "text-sidebar-foreground",
+        s ? "bg-sidebar-accent text-sidebar-accent-foreground" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
       ),
       children: [
         d && /* @__PURE__ */ r(
@@ -321,8 +321,8 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
                   // Rest: fade the right edge (no ellipsis). Hover: the title scrolls,
                   // so fade the LEFT edge where it exits; the action backdrop (or the
                   // string's own end) handles the right.
-                  g && "[mask-image:linear-gradient(to_right,var(--color-wg12)_calc(100%-1.5rem),transparent)]",
-                  g && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,var(--color-wg12)_1.25rem,var(--color-wg12)_100%)]"
+                  b && "[mask-image:linear-gradient(to_right,var(--color-wg12)_calc(100%-1.5rem),transparent)]",
+                  b && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,var(--color-wg12)_1.25rem,var(--color-wg12)_100%)]"
                 ),
                 children: /* @__PURE__ */ r(
                   "span",
@@ -330,11 +330,11 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
                     ref: y,
                     className: n(
                       "block w-max whitespace-nowrap transition-transform ease-linear",
-                      g && "group-hover/hist:[transform:translateX(var(--mq-x))]",
+                      b && "group-hover/hist:[transform:translateX(var(--mq-x))]",
                       "motion-reduce:transition-none motion-reduce:group-hover/hist:[transform:none]"
                     ),
                     style: {
-                      "--mq-x": `-${b}px`,
+                      "--mq-x": `-${g}px`,
                       transitionDuration: `${h}ms`
                     },
                     children: e
@@ -351,7 +351,8 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
               // Rounded end matches the row's radius so the backdrop doesn't
               // square off the highlight's right corners.
               "absolute inset-y-0 right-0 flex items-center rounded-e-md pl-8 pr-1",
-              "bg-gradient-to-l from-fill from-45% to-transparent",
+              "bg-gradient-to-l from-45% to-transparent",
+              s ? "from-sidebar-accent" : "from-[color-mix(in_srgb,var(--sidebar-accent)_60%,var(--background))]",
               "opacity-0 transition-opacity duration-150 group-hover/hist:opacity-100",
               "pointer-events-none group-hover/hist:pointer-events-auto",
               "focus-within:pointer-events-auto focus-within:opacity-100"
@@ -364,8 +365,8 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
   );
 });
 O.displayName = "SidebarHistoryItem";
-const P = s.forwardRef(
-  ({ className: t, name: e, role: a, src: i, hideAvatar: o, ...d }, l) => /* @__PURE__ */ c(
+const P = o.forwardRef(
+  ({ className: t, name: e, role: a, src: i, hideAvatar: s, ...d }, l) => /* @__PURE__ */ c(
     "a",
     {
       ref: l,
@@ -377,9 +378,9 @@ const P = s.forwardRef(
       ),
       ...d,
       children: [
-        !o && /* @__PURE__ */ r(L, { size: "sm", name: e, src: i }),
-        o && /* @__PURE__ */ r(
-          _,
+        !s && /* @__PURE__ */ r(L, { size: "sm", name: e, src: i }),
+        s && /* @__PURE__ */ r(
+          j,
           {
             "aria-hidden": !0,
             className: "hidden size-4 shrink-0 text-muted-foreground group-data-[collapsed=true]/sidebar:block"
@@ -397,15 +398,15 @@ P.displayName = "SidebarAccount";
 export {
   K as Sidebar,
   P as SidebarAccount,
-  W as SidebarAction,
+  $ as SidebarAction,
   Y as SidebarBrand,
-  F as SidebarFooter,
+  W as SidebarFooter,
   q as SidebarHeader,
-  $ as SidebarHistory,
+  A as SidebarHistory,
   O as SidebarHistoryItem,
-  D as SidebarItem,
-  A as SidebarNav,
-  B as SidebarSection,
+  F as SidebarItem,
+  B as SidebarNav,
+  D as SidebarSection,
   k as SidebarTrigger,
   M as useSidebar
 };

package/components/table.d.ts

@@ -25,14 +25,16 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
      */
     footer?: React.ReactNode;
     selectionMode?: SelectionMode;
+    /** In multiple mode, selected parent keys also select their descendants. */
     selectedKeys?: Selection;
+    /** Multiple selection reports every selected parent and descendant key. */
     onSelectionChange?: (keys: Set<string>) => void;
-    /** All row keys on the current page — powers the header "select all". */
+    /** Current-page row keys for header selection; parent keys include their descendants. */
     rowKeys?: string[];
     /**
      * Turns the final `sticky="right"` column into a persistent action surface.
      * Its cells stay on `bg-elevated` while one flat Table-level
-     * `shadow-elevation` compatibility hook spans the body below the WG1 header.
+     * `shadow-elevation` compatibility hook spans the body below the White header.
      * The matching header cell stays transparent and scrolls normally, so it
      * never becomes a blank sticky surface over the header labels.
      */
@@ -67,12 +69,15 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
     maxBodyHeight?: React.CSSProperties["maxHeight"];
 }
 /**
- * Styled wrapper around a semantic `<table>` with horizontal overflow.
+ * Full-width semantic table with columns that share the available space.
+ * Content that cannot fit scrolls inside the table surface.
  *
  * A plain `<Table>` automatically makes its labeled data columns sortable.
  * Consumers can opt out with `allowsSorting={false}`, or control sorting with
  * `sortDescriptor` + `onSortChange` and explicit column `sortKey` values.
- * Row selection and sticky columns remain opt-in. Compose with `<Pagination>`
+ * Row selection is opt-in: single uses grouped radios, multiple uses checkboxes.
+ * Selected fills fade across the visible row from full tint on the left to none on the right.
+ * Sticky columns remain opt-in. Compose with `<Pagination>`
  * below for paging.
  */
 export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
@@ -81,6 +86,13 @@ 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;
+    /** Nested TableRow elements, shown beneath this row when expanded. */
+    childRows?: React.ReactNode;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Accessible disclosure label; defaults to the first cell's text. */
+    disclosureLabel?: string;
     /** @deprecated Existing visual-only marker. New rows should pass an action via onClick. */
     isInteractive?: boolean;
 }