@actioneer/ads 1.0.7 → 1.0.8

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/slider.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs as b, jsx as l } from "react/jsx-runtime";
-import * as v from "react";
+import * as m from "react";
 import { cn as s } from "../lib/cn.js";
-const m = v.forwardRef(
+const v = m.forwardRef(
   ({ value: d, onChange: t, min: e = 0, max: r = 100, step: u = 1, disabled: a, className: n, ...c }, f) => {
     const i = Math.min(Math.max(d, e), r), o = r === e ? 0 : (i - e) / (r - e) * 100;
     return /* @__PURE__ */ b(
@@ -44,7 +44,7 @@ const m = v.forwardRef(
             {
               className: s(
                 "pointer-events-none absolute size-4 -translate-x-1/2 rounded-full",
-                "border border-background bg-brand shadow-elevation transition-shadow",
+                "border border-background bg-brand transition-shadow",
                 "peer-focus-visible:ring-3 peer-focus-visible:ring-ring"
               ),
               style: { left: `${o}%` },
@@ -56,7 +56,7 @@ const m = v.forwardRef(
     );
   }
 );
-m.displayName = "Slider";
+v.displayName = "Slider";
 export {
-  m as Slider
+  v as Slider
 };

package/components/stepper.d.ts

@@ -35,7 +35,7 @@ export interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement
     activeIndex: number;
     /** Makes completed steps navigable. */
     onSelect?: (index: number) => void;
-    /** Places each label below its marker or directly beside it. */
+    /** Places each label directly beside its marker (default) or below it. */
     labelPosition?: "below" | "inline";
 }
 export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;

package/components/stepper.js

@@ -31,7 +31,7 @@ const b = y(
     activeIndex: n,
     size: i = "md",
     onSelect: o,
-    labelPosition: h = "below",
+    labelPosition: h = "inline",
     ...u
   }, N) => /* @__PURE__ */ e(
     "ol",

package/components/switch.js

@@ -4,7 +4,7 @@ import * as c from "react";
 import { MotionConfig as w, motion as x } from "motion/react";
 import { cn as n } from "../lib/cn.js";
 import { springSwitch as g } from "../lib/motion.js";
-const v = {
+const y = {
   sm: {
     track: "h-5 w-9",
     knob: "size-4",
@@ -15,17 +15,17 @@ const v = {
     knob: "size-5",
     offset: 20
   }
-}, y = c.forwardRef(
+}, v = c.forwardRef(
   ({
     className: m,
     checked: t = !1,
     onCheckedChange: e,
-    size: d = "md",
+    size: f = "md",
     disabled: s,
     children: o,
     ...r
-  }, f) => {
-    const l = v[d], a = c.useId(), u = r["aria-label"] != null || r["aria-labelledby"] != null, b = o && !u ? a : void 0;
+  }, u) => {
+    const l = y[f], a = c.useId(), b = r["aria-label"] != null || r["aria-labelledby"] != null, d = o && !b ? a : void 0;
     return /* @__PURE__ */ p(
       "label",
       {
@@ -37,11 +37,11 @@ const v = {
           /* @__PURE__ */ i(
             "button",
             {
-              ref: f,
+              ref: u,
               type: "button",
               role: "switch",
               "aria-checked": t,
-              "aria-labelledby": b,
+              "aria-labelledby": d,
               disabled: s,
               onClick: () => e == null ? void 0 : e(!t),
               className: n(
@@ -62,7 +62,7 @@ const v = {
                   animate: { x: t ? l.offset : 0 },
                   transition: g,
                   className: n(
-                    "ml-0.5 inline-block rounded-full bg-elevated shadow-elevation",
+                    "ml-0.5 inline-block rounded-full bg-elevated",
                     l.knob
                   )
                 }
@@ -75,7 +75,7 @@ const v = {
     );
   }
 );
-y.displayName = "Switch";
+v.displayName = "Switch";
 export {
-  y as Switch
+  v as Switch
 };

package/components/table.d.ts

@@ -33,8 +33,8 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
     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 White header.
+     * Its cells stay on `bg-elevated` and flat beside 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.
      */