@actioneer/ads 1.0.7 → 1.0.9

package/components/progress-circle.js

@@ -1,69 +1,78 @@
 "use client";
-import { jsx as o, jsxs as v } from "react/jsx-runtime";
-import * as x from "react";
-import { MotionConfig as w, motion as y } from "motion/react";
-import { cn as l } from "../lib/cn.js";
-import { springProgress as M } from "../lib/motion.js";
-const N = x.forwardRef(
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import * as p from "react";
+import { MotionConfig as L, motion as N } from "motion/react";
+import { cn as u } from "../lib/cn.js";
+import { springProgress as b } from "../lib/motion.js";
+const M = 4, g = 96;
+function w(s, e) {
+  const t = [];
+  for (let o = 0; o <= g; o++) {
+    const n = -Math.PI / 2 + o / g * Math.PI * 2, a = Math.cos(n), r = Math.sin(n), c = s + e * Math.sign(a) * Math.abs(a) ** (2 / M), l = s + e * Math.sign(r) * Math.abs(r) ** (2 / M);
+    t.push(`${c.toFixed(2)},${l.toFixed(2)}`);
+  }
+  return `M${t.join(" L")} Z`;
+}
+const j = p.forwardRef(
   ({
-    className: m,
-    value: f = 0,
-    max: e = 100,
-    size: r = 40,
-    strokeWidth: i = 4,
-    isIndeterminate: n = !1,
-    label: d,
-    ...p
-  }, h) => {
-    const c = Math.min(Math.max(f, 0), e), u = e > 0 ? c / e : 0, s = (r - i) / 2, t = 2 * Math.PI * s, g = n ? t * 0.75 : t * (1 - u), a = r / 2;
-    return /* @__PURE__ */ o(
+    className: s,
+    value: e = 0,
+    max: t = 100,
+    size: o = 40,
+    strokeWidth: n = 4,
+    isIndeterminate: a = !1,
+    label: r,
+    ...c
+  }, l) => {
+    const h = Math.min(Math.max(e, 0), t), v = t > 0 ? h / t : 0, m = o / 2, d = (o - n) / 2, f = p.useMemo(() => w(m, d), [m, d]), P = a ? 75 : 100 - v * 100;
+    return /* @__PURE__ */ i(
       "div",
       {
-        ref: h,
+        ref: l,
         role: "progressbar",
-        "aria-label": d,
+        "aria-label": r,
         "aria-valuemin": 0,
-        "aria-valuemax": e,
-        "aria-valuenow": n ? void 0 : c,
-        className: l("inline-flex", m),
-        style: { width: r, height: r },
-        ...p,
-        children: /* @__PURE__ */ v(
+        "aria-valuemax": t,
+        "aria-valuenow": a ? void 0 : h,
+        className: u("inline-flex", s),
+        style: { width: o, height: o },
+        ...c,
+        children: /* @__PURE__ */ x(
           "svg",
           {
-            width: r,
-            height: r,
-            viewBox: `0 0 ${r} ${r}`,
-            className: l(
-              "-rotate-90",
-              n && "animate-[ads-spin_800ms_linear_infinite]"
+            width: o,
+            height: o,
+            viewBox: `0 0 ${o} ${o}`,
+            "aria-hidden": "true",
+            className: u(
+              "overflow-visible",
+              a && "animate-[ads-spin_800ms_linear_infinite] motion-reduce:animate-none"
             ),
             children: [
-              /* @__PURE__ */ o(
-                "circle",
+              /* @__PURE__ */ i(
+                "path",
                 {
                   className: "stroke-muted",
                   fill: "none",
-                  cx: a,
-                  cy: a,
-                  r: s,
-                  strokeWidth: i
+                  d: f,
+                  strokeWidth: n,
+                  strokeLinejoin: "round"
                 }
               ),
-              /* @__PURE__ */ o(w, { reducedMotion: "user", children: /* @__PURE__ */ o(
-                y.circle,
+              /* @__PURE__ */ i(L, { reducedMotion: "user", children: /* @__PURE__ */ i(
+                N.path,
                 {
                   className: "stroke-brand",
                   fill: "none",
-                  cx: a,
-                  cy: a,
-                  r: s,
-                  strokeWidth: i,
+                  d: f,
+                  pathLength: 100,
+                  strokeWidth: n,
                   strokeLinecap: "round",
-                  strokeDasharray: t,
+                  strokeLinejoin: "round",
+                  strokeDasharray: "100 100",
                   initial: !1,
-                  animate: { strokeDashoffset: g },
-                  transition: M
+                  animate: { strokeDashoffset: P },
+                  transition: b
                 }
               ) })
             ]
@@ -73,7 +82,7 @@ const N = x.forwardRef(
     );
   }
 );
-N.displayName = "ProgressCircle";
+j.displayName = "ProgressCircle";
 export {
-  N as ProgressCircle
+  j as ProgressCircle
 };

package/components/segmented.d.ts

@@ -14,6 +14,7 @@ export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDiv
     options: SegmentedOption[];
     value: string;
     onChange: (value: string) => void;
+    /** @deprecated No effect: the active thumb is always flat (ADS 1.0.8). */
     elevated?: boolean;
 }
 export declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;

package/components/segmented.js

@@ -1,15 +1,14 @@
 "use client";
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
 import * as l from "react";
-import { MotionConfig as v, motion as w } from "motion/react";
+import { MotionConfig as v, motion as x } from "motion/react";
 import { cva as c } from "class-variance-authority";
-import { cn as o } from "../lib/cn.js";
-import { springControl as y } from "../lib/motion.js";
-const D = c(
-  // Borderless recessed track on ink-200 (bg-surface) — matches the Tabs
-  // primary track (the selected segment provides the definition; a stroke around the
-  // track read as a second, heavier control).
-  "inline-flex items-center gap-1 bg-surface p-1",
+import { cn as a } from "../lib/cn.js";
+import { springControl as w } from "../lib/motion.js";
+const y = c(
+  // Soft WG2 track with a WG4 edge; the selected option is a White thumb with
+  // its own WG4 edge, so the control reads as one quiet, premium switcher.
+  "inline-flex items-center gap-0.5 border border-border bg-background p-0.5",
   {
     variants: {
       size: {
@@ -21,10 +20,10 @@ const D = c(
     defaultVariants: { size: "md" }
   }
 ), k = c(
-  o(
+  a(
     // The active segment is a shared motion thumb that SLIDES between options
     // (layoutId), so the option itself only carries text color.
-    "relative inline-flex items-center justify-center whitespace-nowrap text-m font-normal select-none",
+    "relative inline-flex items-center justify-center whitespace-nowrap text-m select-none",
     "transition-colors duration-150 cursor-pointer",
     "outline-none focus-visible:ring-3 focus-visible:ring-ring",
     "disabled:pointer-events-none disabled:opacity-50"
@@ -32,44 +31,44 @@ const D = c(
   {
     variants: {
       size: {
-        sm: "h-6 rounded-sm px-2.5",
-        md: "h-8 rounded-md px-3",
-        lg: "h-9 rounded-md px-4"
+        sm: "h-6 rounded-xs px-2.5",
+        md: "h-7.5 rounded-sm px-3",
+        lg: "h-8.5 rounded-sm px-4"
       },
       selected: {
-        true: "text-brand-foreground",
-        false: "text-muted-foreground hover:text-brand-text"
+        true: "font-medium text-foreground",
+        false: "font-normal text-muted-foreground hover:text-foreground"
       }
     },
     defaultVariants: { size: "md", selected: !1 }
   }
-), I = l.forwardRef(({ options: t, value: a, onChange: s, size: i, className: m, elevated: u = !0, ...f }, b) => {
-  const p = l.useId(), d = (e) => {
-    const r = t.findIndex((h) => h.value === a), g = ((r < 0 ? 0 : r) + e + t.length) % t.length;
+), D = l.forwardRef(({ options: t, value: o, onChange: s, size: d, className: m, elevated: I, ...u }, f) => {
+  const b = l.useId(), i = (e) => {
+    const r = t.findIndex((p) => p.value === o), g = ((r < 0 ? 0 : r) + e + t.length) % t.length;
     s(t[g].value);
   };
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: b,
+      ref: f,
       role: "radiogroup",
       onKeyDown: (e) => {
         switch (e.key) {
           case "ArrowRight":
           case "ArrowDown":
-            e.preventDefault(), d(1);
+            e.preventDefault(), i(1);
             break;
           case "ArrowLeft":
           case "ArrowUp":
-            e.preventDefault(), d(-1);
+            e.preventDefault(), i(-1);
             break;
         }
       },
-      className: o(D({ size: i }), m),
-      ...f,
+      className: a(y({ size: d }), m),
+      ...u,
       children: /* @__PURE__ */ n(v, { reducedMotion: "user", children: t.map((e) => {
-        const r = e.value === a;
-        return /* @__PURE__ */ x(
+        const r = e.value === o;
+        return /* @__PURE__ */ h(
           "button",
           {
             type: "button",
@@ -78,18 +77,17 @@ const D = c(
             "aria-label": e.ariaLabel,
             tabIndex: r ? 0 : -1,
             onClick: () => s(e.value),
-            className: k({ size: i, selected: r }),
+            className: k({ size: d, selected: r }),
             children: [
               r && /* @__PURE__ */ n(
-                w.span,
+                x.span,
                 {
-                  layoutId: p,
+                  layoutId: b,
                   "aria-hidden": !0,
-                  layoutDependency: a,
-                  transition: y,
-                  className: o(
-                    "absolute inset-0 rounded-[inherit] bg-brand",
-                    u && "shadow-elevation"
+                  layoutDependency: o,
+                  transition: w,
+                  className: a(
+                    "absolute inset-0 rounded-[inherit] border border-border bg-card"
                   )
                 }
               ),
@@ -102,7 +100,7 @@ const D = c(
     }
   );
 });
-I.displayName = "SegmentedControl";
+D.displayName = "SegmentedControl";
 export {
-  I as SegmentedControl
+  D as SegmentedControl
 };

package/components/select.js

@@ -61,7 +61,7 @@ const te = G(
         },
         className: b(
           "pointer-events-auto min-w-[280px] max-h-60 overflow-auto p-1",
-          "rounded-md border border-input bg-elevated shadow-elevation",
+          "rounded-md border border-input bg-elevated",
           $
         ),
         children: [
@@ -220,7 +220,7 @@ const re = n.forwardRef(
         },
         className: b(
           "pointer-events-auto max-h-60 overflow-auto p-1",
-          "rounded-md border border-border bg-elevated shadow-elevation",
+          "rounded-md border border-border bg-elevated",
           m ? "fixed" : b(
             "absolute z-50 w-full",
             x === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5"

package/components/selection-action-bar.js

@@ -1,36 +1,36 @@
 "use client";
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import * as i from "react";
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import * as c from "react";
 import { cn as s } from "../lib/cn.js";
-import { Button as g } from "./button.js";
-const p = i.forwardRef(
+import { Button as p } from "./button.js";
+const b = c.forwardRef(
   ({
-    className: r,
-    selectedCount: o,
-    selectedLabel: t,
-    actions: n,
+    className: t,
+    selectedCount: a,
+    selectedLabel: i,
+    actions: r,
     onClear: e,
-    clearLabel: l = "Clear",
+    clearLabel: d = "Clear",
     ...m
-  }, f) => /* @__PURE__ */ c(
+  }, h) => /* @__PURE__ */ o(
     "div",
     {
-      ref: f,
+      ref: h,
       className: s(
-        "flex items-center gap-3 rounded-lg bg-brand px-3 py-2 text-s text-brand-foreground",
-        r
+        "flex items-center gap-3 rounded-lg bg-wg12 px-3 py-2 text-s text-white",
+        t
       ),
       ...m,
       children: [
-        /* @__PURE__ */ a("span", { className: "font-normal tabular-nums", children: t ?? `${o} selected` }),
-        /* @__PURE__ */ c("div", { className: "ml-auto flex items-center gap-1", children: [
-          n,
-          e && /* @__PURE__ */ a(
-            d,
+        /* @__PURE__ */ n("span", { className: "font-normal tabular-nums", children: i ?? `${a} selected` }),
+        /* @__PURE__ */ o("div", { className: "ml-auto flex items-center gap-1", children: [
+          r,
+          e && /* @__PURE__ */ n(
+            l,
             {
               onClick: e,
-              className: "text-brand-foreground",
-              children: l
+              className: "text-white",
+              children: d
             }
           )
         ] })
@@ -38,22 +38,23 @@ const p = i.forwardRef(
     }
   )
 );
-p.displayName = "SelectionActionBar";
-const d = i.forwardRef(({ className: r, variant: o = "ghost", size: t = "xs", ...n }, e) => /* @__PURE__ */ a(
-  g,
+b.displayName = "SelectionActionBar";
+const l = c.forwardRef(({ className: t, variant: a = "ghost", size: i = "xs", ...r }, e) => /* @__PURE__ */ n(
+  p,
   {
     ref: e,
-    variant: o,
-    size: t,
+    variant: a,
+    size: i,
     className: s(
-      "text-brand-foreground hover:bg-brand-hover hover:text-brand-foreground focus-visible:ring-brand-foreground",
-      r
+      // Neutral black dock: actions wash 12% White on hover, no outline.
+      "text-white enabled:hover:border-transparent enabled:hover:bg-white/12 enabled:hover:text-white enabled:active:border-transparent enabled:active:bg-white/12 focus-visible:ring-white",
+      t
     ),
-    ...n
+    ...r
   }
 ));
-d.displayName = "SelectionActionBarAction";
+l.displayName = "SelectionActionBarAction";
 export {
-  p as SelectionActionBar,
-  d as SelectionActionBarAction
+  b as SelectionActionBar,
+  l as SelectionActionBarAction
 };

package/components/setting-row.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as f from "react";
-import { cva as p } from "class-variance-authority";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import * as d from "react";
+import { cva as u } from "class-variance-authority";
 import { cn as s } from "../lib/cn.js";
-const g = p(
+const g = u(
   [
     "relative flex w-full items-center gap-3 rounded-md bg-transparent px-4 py-3 text-left",
     "after:pointer-events-none after:absolute after:inset-x-4 after:bottom-0 after:z-20",
@@ -18,10 +18,10 @@ const g = p(
     },
     defaultVariants: { isPressable: !1 }
   }
-), v = f.forwardRef(
+), v = d.forwardRef(
   ({ className: a, icon: r, label: t, description: n, action: i, onSelect: o, ...c }, m) => {
     const l = !!o;
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ f(
       "div",
       {
         ref: m,
@@ -38,7 +38,7 @@ const g = p(
               className: s(
                 "absolute inset-0 rounded-md outline-none",
                 "transition-[background-color,transform] duration-150 ease-out",
-                "hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring",
+                "hover:bg-wg2 focus-visible:ring-3 focus-visible:ring-ring",
                 "active:scale-[0.97] motion-reduce:transition-none"
               )
             }
@@ -51,7 +51,7 @@ const g = p(
               children: r
             }
           ),
-          /* @__PURE__ */ d("div", { className: "relative z-10 flex min-w-0 flex-1 flex-col gap-0.5 pointer-events-none", children: [
+          /* @__PURE__ */ f("div", { className: "relative z-10 flex min-w-0 flex-1 flex-col gap-0.5 pointer-events-none", children: [
             /* @__PURE__ */ e("div", { className: "min-w-0 text-base text-foreground wrap-break-word", children: t }),
             n && /* @__PURE__ */ e("div", { className: "min-w-0 text-xs text-tertiary", children: n })
           ] }),
@@ -61,7 +61,7 @@ const g = p(
             "span",
             {
               className: "relative z-20 shrink-0",
-              onClick: (u) => u.stopPropagation(),
+              onClick: (p) => p.stopPropagation(),
               children: i
             }
           )
@@ -71,7 +71,7 @@ const g = p(
   }
 );
 v.displayName = "SettingRow";
-const x = f.forwardRef(
+const x = d.forwardRef(
   ({ className: a, ...r }, t) => /* @__PURE__ */ e(
     "div",
     {

package/components/sidebar.d.ts

@@ -63,6 +63,21 @@ export interface SidebarBrandProps extends React.HTMLAttributes<HTMLDivElement>
  * `SidebarHeader`.
  */
 export declare function SidebarBrand({ logo, href, label, showTrigger, children, className, ...props }: SidebarBrandProps): React.JSX.Element;
+export interface SidebarWorkspaceProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Customer workspace name. Also the logo's alt text and the tile initial. */
+    name: string;
+    /** Customer logo URL. Without it, a WG12 letter tile shows the initial. */
+    logoSrc?: string;
+    /** Show the name beside the mark. Always hidden in the collapsed rail. Default true. */
+    showName?: boolean;
+}
+/**
+ * Customer workspace branding for the rail's top-left brand slot: a 32px
+ * customer logo (or a WG12 letter tile when no logo is given) and the
+ * workspace name, which truncates and hides in the collapsed rail. Pass it as
+ * `SidebarBrand`'s `logo`.
+ */
+export declare const SidebarWorkspace: React.ForwardRefExoticComponent<SidebarWorkspaceProps & React.RefAttributes<HTMLSpanElement>>;
 export declare const SidebarHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const SidebarNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 export interface SidebarSectionProps extends React.HTMLAttributes<HTMLDivElement> {