@actioneer/ads 1.0.6 → 1.0.8

package/components/radio.js

@@ -1,111 +1,111 @@
 "use client";
-import { jsx as r, jsxs as R } from "react/jsx-runtime";
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
 import * as i from "react";
-import { MotionConfig as v, motion as y } from "motion/react";
-import { cn as b } from "../lib/cn.js";
-import { Field as N } from "./field.js";
-import { springRadio as w } from "../lib/motion.js";
-const x = i.createContext(null), k = i.forwardRef(
+import { MotionConfig as N, motion as w } from "motion/react";
+import { cn as g } from "../lib/cn.js";
+import { Field as k } from "./field.js";
+import { springRadio as C } from "../lib/motion.js";
+const R = i.createContext(null), j = i.forwardRef(
   ({
-    className: d,
-    name: n,
+    className: u,
+    name: t,
     value: o,
-    onChange: t,
-    label: a,
-    description: c,
-    error: u,
-    orientation: p = "vertical",
-    disabled: e,
-    children: s,
-    ...l
-  }, f) => {
+    onChange: a,
+    label: s,
+    description: p,
+    error: n,
+    orientation: f = "vertical",
+    disabled: l,
+    children: e,
+    ...d
+  }, c) => {
     const m = i.useMemo(
-      () => ({ name: n, value: o, onValueChange: t, disabled: e }),
-      [n, o, t, e]
+      () => ({ name: t, value: o, onValueChange: a, disabled: l }),
+      [t, o, a, l]
     );
     return /* @__PURE__ */ r(
-      N,
+      k,
       {
-        ref: f,
-        label: a,
-        description: c,
-        error: u,
+        ref: c,
+        label: s,
+        description: p,
+        error: n,
         role: "radiogroup",
-        className: d,
-        ...l,
-        children: /* @__PURE__ */ r(x.Provider, { value: m, children: /* @__PURE__ */ r(
+        className: u,
+        ...d,
+        children: /* @__PURE__ */ r(R.Provider, { value: m, children: /* @__PURE__ */ r(
           "div",
           {
-            className: b(
+            className: g(
               "flex gap-3",
-              p === "vertical" ? "flex-col" : "flex-row flex-wrap"
+              f === "vertical" ? "flex-col" : "flex-row flex-wrap"
             ),
-            children: s
+            children: e
           }
         ) })
       }
     );
   }
 );
-k.displayName = "RadioGroup";
-const j = i.forwardRef(
-  ({ className: d, children: n, value: o, disabled: t, checked: a, defaultChecked: c, ...u }, p) => {
-    const e = i.useContext(x), s = t || (e == null ? void 0 : e.disabled), l = a !== void 0, [f, m] = i.useState(!!c), g = e ? e.value === o : l ? a : f;
-    return /* @__PURE__ */ R(
+j.displayName = "RadioGroup";
+const G = i.forwardRef(
+  ({ className: u, children: t, value: o, disabled: a, checked: s, defaultChecked: p, onChange: n, ...f }, l) => {
+    const e = i.useContext(R), d = a || (e == null ? void 0 : e.disabled), c = s !== void 0, [m, v] = i.useState(!!p), b = e ? e.value === o : c ? s : m;
+    return /* @__PURE__ */ y(
       "label",
       {
-        className: b(
+        className: g(
           "group inline-flex items-center gap-2 text-m text-foreground select-none",
-          s ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-          d
+          d ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          u
         ),
         children: [
           /* @__PURE__ */ r(
             "input",
             {
-              ref: p,
+              ref: l,
               type: "radio",
               name: e == null ? void 0 : e.name,
               value: o,
-              checked: g,
-              disabled: s,
-              onChange: (C) => {
+              checked: b,
+              disabled: d,
+              onChange: (x) => {
                 var h;
-                C.target.checked && (e ? (h = e.onValueChange) == null || h.call(e, o) : l || m(!0));
+                x.target.checked && (e ? (h = e.onValueChange) == null || h.call(e, o) : c || v(!0), n == null || n(x));
               },
               className: "peer sr-only",
-              ...u
+              ...f
             }
           ),
           /* @__PURE__ */ r(
             "span",
             {
               "aria-hidden": !0,
-              className: b(
+              className: g(
                 "flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-elevated",
                 "transition-[border-color,box-shadow] duration-150 ease-out",
                 "peer-checked:border-brand",
                 "peer-focus-visible:ring-3 peer-focus-visible:ring-ring"
               ),
-              children: /* @__PURE__ */ r(v, { reducedMotion: "user", children: /* @__PURE__ */ r(
-                y.span,
+              children: /* @__PURE__ */ r(N, { reducedMotion: "user", children: /* @__PURE__ */ r(
+                w.span,
                 {
                   className: "size-2 rounded-full bg-brand",
                   initial: !1,
-                  animate: { opacity: g ? 1 : 0, scale: g ? 1 : 0.9 },
-                  transition: w
+                  animate: { opacity: b ? 1 : 0, scale: b ? 1 : 0.9 },
+                  transition: C
                 }
               ) })
             }
           ),
-          n && /* @__PURE__ */ r("span", { children: n })
+          t && /* @__PURE__ */ r("span", { children: t })
         ]
       }
     );
   }
 );
-j.displayName = "Radio";
+G.displayName = "Radio";
 export {
-  j as Radio,
-  k as RadioGroup
+  G as Radio,
+  j as RadioGroup
 };

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",
     {