@actioneer/ads 0.7.0 → 1.0.0

package/components/sidebar.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import * as s from "react";
-import { MotionConfig as z, motion as _ } from "motion/react";
-import { User as j, PanelLeft as E } from "../lib/icons.js";
-import { cn as o } from "../lib/cn.js";
+import { MotionConfig as z, motion as j } from "motion/react";
+import { User as _, 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";
@@ -23,7 +23,7 @@ const K = s.forwardRef(
     collapsed: e,
     defaultCollapsed: a = !1,
     onCollapsedChange: i,
-    animateOnMount: n = !1,
+    animateOnMount: o = !1,
     keyboardToggle: d = !0,
     ...l
   }, m) => {
@@ -48,11 +48,11 @@ const K = s.forwardRef(
       [u, h, g]
     );
     return /* @__PURE__ */ r(R.Provider, { value: x, children: /* @__PURE__ */ r(z, { reducedMotion: "user", children: /* @__PURE__ */ r(
-      _.aside,
+      j.aside,
       {
         ref: m,
         "data-collapsed": u ? "true" : "false",
-        initial: n ? {
+        initial: o ? {
           width: u ? 56 : 240,
           transform: "translate3d(-100%, 0, 0)",
           opacity: 0
@@ -63,7 +63,7 @@ const K = s.forwardRef(
           opacity: 1
         },
         transition: H,
-        className: o(
+        className: n(
           "group/sidebar flex h-full shrink-0 flex-col bg-background",
           t
         ),
@@ -82,13 +82,13 @@ function k({
   tooltipSide: a = "right",
   ...i
 }) {
-  const { collapsed: n, toggle: d } = M();
+  const { collapsed: o, toggle: d } = M();
   return /* @__PURE__ */ r(
     I,
     {
       side: a,
       content: /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
-        n ? "Expand" : "Collapse",
+        o ? "Expand" : "Collapse",
         /* @__PURE__ */ c("span", { className: "flex items-center gap-0.5", children: [
           /* @__PURE__ */ r(S, { children: "⌘" }),
           /* @__PURE__ */ r(S, { children: "B" })
@@ -98,12 +98,12 @@ function k({
         "button",
         {
           type: "button",
-          "aria-label": n ? "Expand sidebar" : "Collapse sidebar",
-          "aria-pressed": n,
+          "aria-label": o ? "Expand sidebar" : "Collapse sidebar",
+          "aria-pressed": o,
           onClick: (l) => {
             e == null || e(l), d();
           },
-          className: o(
+          className: n(
             "inline-flex size-(--sidebar-item) shrink-0 items-center justify-center rounded-sm border border-transparent text-muted-foreground",
             "transition-colors hover:border-border hover:bg-elevated hover:text-foreground",
             "outline-none focus-visible:ring-3 focus-visible:ring-ring",
@@ -122,11 +122,11 @@ function Y({
   href: e,
   label: a = "Home",
   showTrigger: i = !0,
-  children: n,
+  children: o,
   className: d,
   ...l
 }) {
-  const m = o(
+  const m = n(
     // 20px mark centered in a 32px square — the same box as every other rail icon.
     // group/brand lets a BrandMark logo play its blip loop on hover.
     "group/brand flex size-(--sidebar-item) items-center justify-center",
@@ -139,7 +139,7 @@ function Y({
   return /* @__PURE__ */ c(
     "div",
     {
-      className: o(
+      className: n(
         "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-4",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         d
@@ -150,7 +150,7 @@ 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" }),
-          n
+          o
         ] })
       ]
     }
@@ -161,7 +161,7 @@ const q = s.forwardRef(
     "div",
     {
       ref: a,
-      className: o(
+      className: n(
         "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-3",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         t
@@ -172,36 +172,43 @@ const q = s.forwardRef(
 );
 q.displayName = "SidebarHeader";
 const A = s.forwardRef(
-  ({ className: t, ...e }, a) => /* @__PURE__ */ r("nav", { ref: a, className: o("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", t), ...e })
+  ({ 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 }, n) => /* @__PURE__ */ c("div", { ref: n, className: t, ...i, children: [
-    e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-ng10 group-data-[collapsed=true]/sidebar:hidden", children: e }),
+  ({ className: t, label: e, children: a, ...i }, o) => /* @__PURE__ */ c("div", { ref: o, 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: n, title: d, ...l }, m) => /* @__PURE__ */ c(
+  ({ className: t, icon: e, isActive: a, endContent: i, children: o, title: d, ...l }, m) => /* @__PURE__ */ c(
     "a",
     {
       ref: m,
       "aria-current": a ? "page" : void 0,
-      title: d ?? (typeof n == "string" ? n : void 0),
-      className: o(
-        "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-ng12 transition-colors",
+      title: d ?? (typeof o == "string" ? o : 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",
+        "transition-[background-color,border-color,color] duration-150 ease-out motion-reduce:transition-none",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
-        "[&_svg]:size-4 [&_svg]:shrink-0",
         // Collapsed: a centered square (--sidebar-item) so every rail item lines up.
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
-        a ? "border-ng4 bg-white" : "hover:bg-sidebar-accent/60",
+        a ? "bg-sidebar-accent" : "hover:bg-sidebar-accent/60",
         t
       ),
       ...l,
       children: [
-        a && s.isValidElement(e) ? s.cloneElement(e, { weight: "fill" }) : e,
-        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: n }),
+        e && /* @__PURE__ */ r(
+          "span",
+          {
+            "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
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: o }),
         i && /* @__PURE__ */ r("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: i })
       ]
     }
@@ -213,21 +220,21 @@ const F = s.forwardRef(
     "div",
     {
       ref: a,
-      className: o("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
+      className: n("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
       ...e
     }
   )
 );
 F.displayName = "SidebarFooter";
 const W = s.forwardRef(
-  ({ className: t, icon: e, children: a, ...i }, n) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
+  ({ 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(
     "button",
     {
-      ref: n,
+      ref: o,
       type: "button",
-      className: o(
+      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-ng12",
+        "text-m leading-[var(--text-m--line-height)] font-normal text-wg12",
         // Reads as a normal nav item: transparent at rest, the shared grey
         // hover wash on hover (no fill-at-rest, no elevation).
         "transition-colors duration-150 ease-out motion-reduce:transition-none",
@@ -247,21 +254,21 @@ const W = s.forwardRef(
 );
 W.displayName = "SidebarAction";
 const $ = s.forwardRef(
-  ({ className: t, label: e, children: a, ...i }, n) => /* @__PURE__ */ c(
+  ({ className: t, label: e, children: a, ...i }, o) => /* @__PURE__ */ c(
     "div",
     {
-      ref: n,
-      className: o("group-data-[collapsed=true]/sidebar:hidden", t),
+      ref: o,
+      className: n("group-data-[collapsed=true]/sidebar:hidden", t),
       ...i,
       children: [
-        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-ng10", children: e }),
+        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-on-warm-grey-secondary", children: e }),
         /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: a })
       ]
     }
   )
 );
 $.displayName = "SidebarHistory";
-const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActive: n, icon: d, ...l }, m) => {
+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(() => {
     const x = v.current, p = y.current;
@@ -278,10 +285,10 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
   return /* @__PURE__ */ c(
     "div",
     {
-      className: o(
+      className: n(
         "group/hist relative flex items-center rounded-md transition-colors",
-        "text-ng12",
-        n ? "bg-sidebar-accent/60" : "hover:bg-sidebar-accent/60"
+        "text-wg12",
+        o ? "bg-sidebar-accent/60" : "hover:bg-sidebar-accent/60"
       ),
       children: [
         d && /* @__PURE__ */ r(
@@ -297,7 +304,7 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
           {
             ref: m,
             title: a ?? (typeof e == "string" ? e : void 0),
-            className: o(
+            className: n(
               // Left pad matches a SidebarItem's text column (px-3 + icon size-4 +
               // gap-2.5 = 2.375rem) so history titles line up under the nav labels.
               "block min-w-0 flex-1 rounded-md py-1.5 pr-3 ps-(--sidebar-text-indent) text-m leading-[var(--text-m--line-height)] font-normal",
@@ -309,19 +316,19 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
               "span",
               {
                 ref: v,
-                className: o(
+                className: n(
                   "block overflow-hidden",
                   // 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,#000_calc(100%-1.5rem),transparent)]",
-                  g && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,#000_1.25rem,#000_100%)]"
+                  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%)]"
                 ),
                 children: /* @__PURE__ */ r(
                   "span",
                   {
                     ref: y,
-                    className: o(
+                    className: n(
                       "block w-max whitespace-nowrap transition-transform ease-linear",
                       g && "group-hover/hist:[transform:translateX(var(--mq-x))]",
                       "motion-reduce:transition-none motion-reduce:group-hover/hist:[transform:none]"
@@ -340,7 +347,7 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
         i && /* @__PURE__ */ r(
           "span",
           {
-            className: o(
+            className: n(
               // 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",
@@ -358,21 +365,21 @@ 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: n, ...d }, l) => /* @__PURE__ */ c(
+  ({ className: t, name: e, role: a, src: i, hideAvatar: o, ...d }, l) => /* @__PURE__ */ c(
     "a",
     {
       ref: l,
-      className: o(
-        "flex items-center gap-2.5 rounded-md border border-transparent p-2 transition-colors hover:border-ng10",
+      className: n(
+        "flex items-center gap-2.5 rounded-md border border-transparent p-2 transition-colors hover:border-wg10",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
         t
       ),
       ...d,
       children: [
-        !n && /* @__PURE__ */ r(L, { size: "sm", name: e, src: i }),
-        n && /* @__PURE__ */ r(
-          j,
+        !o && /* @__PURE__ */ r(L, { size: "sm", name: e, src: i }),
+        o && /* @__PURE__ */ r(
+          _,
           {
             "aria-hidden": !0,
             className: "hidden size-4 shrink-0 text-muted-foreground group-data-[collapsed=true]/sidebar:block"

package/components/table.d.ts

@@ -32,7 +32,7 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
     /**
      * 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 NG1 header.
+     * `shadow-elevation` compatibility hook spans the body below the WG1 header.
      * The matching header cell stays transparent and scrolls normally, so it
      * never becomes a blank sticky surface over the header labels.
      */