@actioneer/ads 0.6.0 → 0.8.0

package/components/select.js

@@ -1,73 +1,147 @@
 "use client";
-import { jsx as u, jsxs as k } from "react/jsx-runtime";
-import * as s from "react";
-import { createPortal as q } from "react-dom";
-import { cva as C } from "class-variance-authority";
-import { MotionConfig as F, AnimatePresence as G, motion as J } from "motion/react";
-import { Check as Q, ChevronDown as V } from "../lib/icons.js";
-import { cn as f } from "../lib/cn.js";
-import { inputBaseClass as W } from "./field.js";
-import { floatVariants as X } from "../lib/motion.js";
-import { Ripple as Y } from "./ripple.js";
-const Z = C(
-  f(
-    W,
-    "items-center justify-between gap-2 text-left cursor-pointer",
+import { jsxs as S, jsx as f } from "react/jsx-runtime";
+import * as n from "react";
+import { createPortal as F } from "react-dom";
+import { cva as G } from "class-variance-authority";
+import { motion as J, MotionConfig as Q, AnimatePresence as W } from "motion/react";
+import { Check as X, ChevronDown as Y } from "../lib/icons.js";
+import { cn as b } from "../lib/cn.js";
+import { inputBaseClass as Z } from "./field.js";
+import { floatVariants as C } from "../lib/motion.js";
+import { Ripple as ee } from "./ripple.js";
+const te = G(
+  b(
+    Z,
+    "group/select items-center justify-between gap-2 text-left leading-none cursor-pointer",
+    "data-[value-set]:text-on-white-primary!",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
   ),
   {
     variants: {
       size: {
-        sm: "h-8 rounded-sm text-xs",
-        md: "h-10 rounded-md text-xs",
-        lg: "h-11 rounded-md text-base"
+        sm: "h-8 rounded-sm",
+        md: "h-8 rounded-md",
+        lg: "h-11 rounded-md"
       }
     },
     defaultVariants: { size: "md" }
   }
-), ee = s.forwardRef(
+), K = n.forwardRef(
   ({
     items: o,
-    value: h,
-    onChange: E,
+    value: w,
+    values: y = [],
     multiple: d = !1,
-    values: l = [],
-    onValuesChange: I,
-    placeholder: R = "Select…",
-    size: M,
-    disabled: L,
-    isInvalid: B,
-    className: H,
-    id: O,
-    placement: m = "bottom",
-    portal: p = !1,
-    "aria-label": P,
-    "aria-describedby": T
-  }, _) => {
-    const [r, b] = s.useState(!1), [c, N] = s.useState(-1), z = s.useRef(null), w = s.useRef(null), g = s.useId(), [i, S] = s.useState(null), D = o.find((e) => e.value === h), v = d ? o.filter((e) => l.includes(e.value)) : [], K = s.useCallback(() => {
-      const e = d ? o.findIndex((t) => l.includes(t.value)) : o.findIndex((t) => t.value === h);
+    activeIndex: i = -1,
+    onActiveIndexChange: p,
+    onItemSelect: h,
+    placement: D = "bottom",
+    id: z,
+    className: $,
+    style: L,
+    "aria-label": j
+  }, x) => {
+    const m = n.useId(), v = z ?? m;
+    return /* @__PURE__ */ S(
+      J.ul,
+      {
+        ref: x,
+        id: v,
+        role: "listbox",
+        "aria-label": j,
+        "aria-multiselectable": d || void 0,
+        "aria-activedescendant": i >= 0 ? `${v}-opt-${i}` : void 0,
+        variants: C,
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        style: {
+          transformOrigin: D === "top" ? "bottom" : "top",
+          ...L
+        },
+        className: b(
+          "pointer-events-auto min-w-[280px] max-h-60 overflow-auto p-1",
+          "rounded-md border border-input bg-elevated shadow-elevation",
+          $
+        ),
+        children: [
+          /* @__PURE__ */ f(ee, { origin: D === "top" ? "bottom" : "top" }),
+          o.map((s, g) => {
+            const r = d ? y.includes(s.value) : s.value === w, c = g === i;
+            return /* @__PURE__ */ S(
+              "li",
+              {
+                id: `${v}-opt-${g}`,
+                role: "option",
+                "aria-selected": r,
+                "aria-disabled": s.disabled || void 0,
+                onMouseEnter: () => !s.disabled && (p == null ? void 0 : p(g)),
+                onClick: () => !s.disabled && (h == null ? void 0 : h(g)),
+                className: b(
+                  "flex cursor-pointer items-center justify-between gap-2",
+                  "rounded-sm px-2 py-1.5 text-m font-medium text-foreground select-none",
+                  !s.disabled && "hover:bg-action-primary-soft hover:text-action-primary-text",
+                  c && !s.disabled && "bg-action-primary-soft text-action-primary-text",
+                  r && "text-action-primary-text",
+                  s.disabled && "pointer-events-none opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ f("span", { className: "truncate", children: s.label }),
+                  r && /* @__PURE__ */ f(X, { className: "size-4 shrink-0", "aria-hidden": !0 })
+                ]
+              },
+              s.value
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+K.displayName = "DropdownOptions";
+const re = n.forwardRef(
+  ({
+    items: o,
+    value: w,
+    onChange: y,
+    multiple: d = !1,
+    values: i = [],
+    onValuesChange: p,
+    placeholder: h = "Select",
+    size: D,
+    disabled: z,
+    isInvalid: $,
+    className: L,
+    id: j,
+    placement: x = "bottom",
+    portal: m = !1,
+    "aria-label": v,
+    "aria-describedby": s
+  }, g) => {
+    const [r, c] = n.useState(!1), [k, M] = n.useState(-1), O = n.useRef(null), R = n.useRef(null), B = n.useId(), [l, H] = n.useState(null), A = o.find((e) => e.value === w), E = d ? o.filter((e) => i.includes(e.value)) : [], U = d ? E.length > 0 : !!A, V = n.useCallback(() => {
+      const e = d ? o.findIndex((t) => i.includes(t.value)) : o.findIndex((t) => t.value === w);
       return e >= 0 && !o[e].disabled ? e : o.findIndex((t) => !t.disabled);
-    }, [o, d, h, l]);
-    s.useEffect(() => {
+    }, [o, d, w, i]);
+    n.useEffect(() => {
       if (!r) return;
       const e = (t) => {
-        var a, x;
-        const n = t.target;
-        (a = z.current) != null && a.contains(n) || (x = w.current) != null && x.contains(n) || b(!1);
+        var u, N;
+        const a = t.target;
+        (u = O.current) != null && u.contains(a) || (N = R.current) != null && N.contains(a) || c(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, [r]), s.useLayoutEffect(() => {
-      if (!r || !p) {
-        S(null);
+    }, [r]), n.useLayoutEffect(() => {
+      if (!r || !m) {
+        H(null);
         return;
       }
       const e = () => {
-        var a, x;
-        const t = (a = z.current) == null ? void 0 : a.getBoundingClientRect();
+        var u, N;
+        const t = (u = O.current) == null ? void 0 : u.getBoundingClientRect();
         if (!t) return;
-        const n = ((x = w.current) == null ? void 0 : x.offsetHeight) ?? 0;
-        S({
-          top: m === "top" ? t.top - n - 6 : t.bottom + 6,
+        const a = ((N = R.current) == null ? void 0 : N.offsetHeight) ?? 0;
+        H({
+          top: x === "top" ? t.top - a - 6 : t.bottom + 6,
           left: t.left,
           width: t.width
         });
@@ -75,146 +149,112 @@ const Z = C(
       return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
         window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
       };
-    }, [r, m, p]), s.useEffect(() => {
+    }, [r, x, m]), n.useEffect(() => {
       var t;
-      if (!r || c < 0) return;
-      const e = (t = w.current) == null ? void 0 : t.children[c];
+      if (!r || k < 0) return;
+      const e = (t = R.current) == null ? void 0 : t.children[k];
       e == null || e.scrollIntoView({ block: "nearest" });
-    }, [r, c]);
-    const y = () => {
-      L || (N(K()), b(!0));
-    }, A = (e) => {
-      N((t) => {
-        let n = t;
-        for (let a = 0; a < o.length; a++)
-          if (n = (n + e + o.length) % o.length, !o[n].disabled) return n;
+    }, [r, k]);
+    const I = () => {
+      z || (M(V()), c(!0));
+    }, P = (e) => {
+      M((t) => {
+        let a = t;
+        for (let u = 0; u < o.length; u++)
+          if (a = (a + e + o.length) % o.length, !o[a].disabled) return a;
         return t;
       });
-    }, $ = (e) => {
+    }, T = (e) => {
       const t = o[e];
       if (!(!t || t.disabled)) {
         if (d) {
-          I == null || I(
-            l.includes(t.value) ? l.filter((n) => n !== t.value) : [...l, t.value]
+          p == null || p(
+            i.includes(t.value) ? i.filter((a) => a !== t.value) : [...i, t.value]
           );
           return;
         }
-        E == null || E(t.value), b(!1);
+        y == null || y(t.value), c(!1);
       }
-    }, U = (e) => {
+    }, q = (e) => {
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), r ? A(1) : y();
+          e.preventDefault(), r ? P(1) : I();
           break;
         case "ArrowUp":
-          e.preventDefault(), r ? A(-1) : y();
+          e.preventDefault(), r ? P(-1) : I();
           break;
         case "Enter":
         case " ":
-          e.preventDefault(), r ? $(c) : y();
+          e.preventDefault(), r ? T(k) : I();
           break;
         case "Escape":
-          r && (e.preventDefault(), e.stopPropagation(), b(!1));
+          r && (e.preventDefault(), e.stopPropagation(), c(!1));
           break;
         case "Tab":
-          b(!1);
+          c(!1);
           break;
       }
-    }, j = /* @__PURE__ */ u(F, { reducedMotion: "user", children: /* @__PURE__ */ u(G, { children: r && /* @__PURE__ */ k(
-      J.ul,
+    }, _ = /* @__PURE__ */ f(Q, { reducedMotion: "user", children: /* @__PURE__ */ f(W, { children: r && /* @__PURE__ */ f(
+      K,
       {
-        ref: w,
-        id: g,
-        role: "listbox",
-        "aria-multiselectable": d || void 0,
-        "aria-activedescendant": c >= 0 ? `${g}-opt-${c}` : void 0,
-        variants: X,
-        initial: "hidden",
-        animate: "visible",
-        exit: "hidden",
+        ref: R,
+        id: B,
+        "aria-label": v ? `${v} options` : "Select options",
+        items: o,
+        value: w,
+        values: i,
+        multiple: d,
+        activeIndex: k,
+        onActiveIndexChange: M,
+        onItemSelect: T,
+        placement: x,
         style: {
-          transformOrigin: m === "top" ? "bottom" : "top",
-          ...p ? {
+          ...m ? {
             position: "fixed",
-            top: (i == null ? void 0 : i.top) ?? 0,
-            left: (i == null ? void 0 : i.left) ?? 0,
-            width: (i == null ? void 0 : i.width) ?? 0,
-            visibility: i ? "visible" : "hidden",
+            top: (l == null ? void 0 : l.top) ?? 0,
+            left: (l == null ? void 0 : l.left) ?? 0,
+            width: (l == null ? void 0 : l.width) ?? 0,
+            visibility: l ? "visible" : "hidden",
             zIndex: 60
           } : {}
         },
-        className: f(
-          "max-h-60 overflow-auto p-1",
+        className: b(
+          "pointer-events-auto max-h-60 overflow-auto p-1",
           "rounded-md border border-border bg-elevated shadow-elevation",
-          p ? "fixed" : f(
+          m ? "fixed" : b(
             "absolute z-50 w-full",
-            m === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5"
+            x === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5"
           )
-        ),
-        children: [
-          /* @__PURE__ */ u(Y, { origin: m === "top" ? "bottom" : "top" }),
-          o.map((e, t) => {
-            const n = d ? l.includes(e.value) : e.value === h, a = t === c;
-            return /* @__PURE__ */ k(
-              "li",
-              {
-                id: `${g}-opt-${t}`,
-                role: "option",
-                "aria-selected": n,
-                "aria-disabled": e.disabled || void 0,
-                onMouseEnter: () => !e.disabled && N(t),
-                onClick: () => $(t),
-                className: f(
-                  "flex cursor-pointer items-center justify-between gap-2",
-                  "rounded-sm px-2 py-1.5 text-xs text-foreground select-none",
-                  a && !e.disabled && "bg-muted",
-                  e.disabled && "pointer-events-none opacity-50"
-                ),
-                children: [
-                  /* @__PURE__ */ u("span", { className: "truncate", children: e.label }),
-                  n && /* @__PURE__ */ u(Q, { className: "size-4 shrink-0", "aria-hidden": !0 })
-                ]
-              },
-              e.value
-            );
-          })
-        ]
+        )
       }
     ) }) });
-    return /* @__PURE__ */ k("div", { ref: z, className: "relative", children: [
-      /* @__PURE__ */ k(
+    return /* @__PURE__ */ S("div", { ref: O, className: b("relative", r && "z-[70]"), children: [
+      /* @__PURE__ */ S(
         "button",
         {
-          ref: _,
-          id: O,
+          ref: g,
+          id: j,
           type: "button",
           role: "combobox",
           "aria-haspopup": "listbox",
           "aria-expanded": r,
-          "aria-controls": g,
-          "aria-invalid": B || void 0,
-          "aria-label": P,
-          "aria-describedby": T,
-          disabled: L,
-          onClick: () => r ? b(!1) : y(),
-          onKeyDown: U,
-          className: f(Z({ size: M }), H),
+          "aria-controls": B,
+          "aria-invalid": $ || void 0,
+          "aria-label": v,
+          "aria-describedby": s,
+          "data-value-set": U || void 0,
+          disabled: z,
+          onClick: () => r ? c(!1) : I(),
+          onKeyDown: q,
+          className: b(te({ size: D }), L),
           children: [
-            /* @__PURE__ */ u(
-              "span",
-              {
-                className: f(
-                  "truncate",
-                  d ? v.length === 0 && "text-muted-foreground" : !D && "text-muted-foreground"
-                ),
-                children: d ? v.length === 0 ? R : v.length === 1 ? v[0].label : `${v.length} selected` : D ? D.label : R
-              }
-            ),
-            /* @__PURE__ */ u(
-              V,
+            /* @__PURE__ */ f("span", { className: "truncate", children: d ? E.length === 0 ? h : E.length === 1 ? E[0].label : `${E.length} selected` : A ? A.label : h }),
+            /* @__PURE__ */ f(
+              Y,
               {
-                className: f(
-                  "size-4 text-muted-foreground transition-transform duration-150 ease-out motion-reduce:transition-none",
+                className: b(
+                  "size-4 text-muted-foreground transition-[color,transform] duration-150 ease-out motion-reduce:transition-none",
+                  "group-hover/select:text-foreground group-focus/select:text-g12!",
                   r && "rotate-180"
                 ),
                 "aria-hidden": !0
@@ -223,11 +263,12 @@ const Z = C(
           ]
         }
       ),
-      p && typeof document < "u" ? q(j, document.body) : j
+      m && typeof document < "u" ? F(_, document.body) : _
     ] });
   }
 );
-ee.displayName = "Select";
+re.displayName = "Select";
 export {
-  ee as Select
+  K as DropdownOptions,
+  re as Select
 };

package/components/setting-row.d.ts

@@ -4,10 +4,11 @@ import * as React from "react";
  * SettingList / SettingRow — the grouped settings stack: one row per setting,
  * each reading leading glyph → what it is → the control that changes it.
  *
- * The rows are separate `bg-card` blocks on a recessed `bg-surface` track, so
- * the group reads by fill and spacing rather than by hairlines (principle 1).
- * A row is a static surface — it stays flat unless `onSelect` makes the whole
- * row actionable, at which point it earns hover and press feedback.
+ * Rows sit directly on their parent surface and separate with inset hairlines.
+ * This keeps a white Card/Panel from alternating white → grey → white again.
+ * A row receives a neutral wash only as interaction feedback when `onSelect`
+ * makes the whole row actionable (principle 1: panels establish hierarchy;
+ * items express state).
  *
  * The trailing slot takes whatever changes the setting: a `Button`, a
  * `Switch`, a `Badge`, or nothing. The leading slot takes the label — pass a
@@ -30,6 +31,6 @@ export interface SettingRowProps extends Omit<React.HTMLAttributes<HTMLDivElemen
 }
 export declare const SettingRow: React.ForwardRefExoticComponent<SettingRowProps & React.RefAttributes<HTMLDivElement>>;
 export type SettingListProps = React.HTMLAttributes<HTMLDivElement>;
-/** The recessed track the rows sit on; the gap between them is the divider. */
+/** A surface-neutral row group; each row owns its inset divider. */
 export declare const SettingList: React.ForwardRefExoticComponent<SettingListProps & React.RefAttributes<HTMLDivElement>>;
 export { settingRowVariants };

package/components/setting-row.js

@@ -1,29 +1,33 @@
 "use client";
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import * as d from "react";
-import { cva as g } from "class-variance-authority";
-import { cn as a } from "../lib/cn.js";
-const p = g(
-  "flex w-full items-center gap-3 rounded-lg bg-card px-4 py-3 text-left",
+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 { cn as s } from "../lib/cn.js";
+const g = p(
+  [
+    "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",
+    "after:border-b after:border-border after:content-[''] last:after:hidden"
+  ].join(" "),
   {
     variants: {
       isPressable: {
-        true: "relative",
+        true: "",
         false: ""
       }
     },
     defaultVariants: { isPressable: !1 }
   }
-), x = d.forwardRef(
-  ({ className: i, icon: s, label: t, description: n, action: r, onSelect: o, ...f }, m) => {
+), v = f.forwardRef(
+  ({ className: a, icon: r, label: t, description: n, action: i, onSelect: o, ...c }, m) => {
     const l = !!o;
-    return /* @__PURE__ */ c(
+    return /* @__PURE__ */ d(
       "div",
       {
         ref: m,
         "data-slot": "setting-row",
-        className: a(p({ isPressable: l }), i),
-        ...f,
+        className: s(g({ isPressable: l }), a),
+        ...c,
         children: [
           l && /* @__PURE__ */ e(
             "button",
@@ -31,34 +35,34 @@ const p = g(
               type: "button",
               "aria-label": typeof t == "string" ? t : "Open setting",
               onClick: o,
-              className: a(
-                "absolute inset-0 rounded-lg outline-none",
+              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",
                 "active:scale-[0.97] motion-reduce:transition-none"
               )
             }
           ),
-          s && /* @__PURE__ */ e(
+          r && /* @__PURE__ */ e(
             "span",
             {
               "aria-hidden": !0,
               className: "relative z-10 flex size-5 shrink-0 items-center justify-center text-tertiary pointer-events-none [&>svg]:size-4.5",
-              children: s
+              children: r
             }
           ),
-          /* @__PURE__ */ c("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 truncate text-base text-foreground", children: t }),
+          /* @__PURE__ */ d("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 })
           ] }),
-          r && // The trailing control owns its own click — a pressable row must not
+          i && // The trailing control owns its own click — a pressable row must not
           // also fire when the reader aims at the button inside it.
           /* @__PURE__ */ e(
             "span",
             {
               className: "relative z-20 shrink-0",
               onClick: (u) => u.stopPropagation(),
-              children: r
+              children: i
             }
           )
         ]
@@ -66,24 +70,21 @@ const p = g(
     );
   }
 );
-x.displayName = "SettingRow";
-const v = d.forwardRef(
-  ({ className: i, ...s }, t) => /* @__PURE__ */ e(
+v.displayName = "SettingRow";
+const x = f.forwardRef(
+  ({ className: a, ...r }, t) => /* @__PURE__ */ e(
     "div",
     {
       ref: t,
       "data-slot": "setting-list",
-      className: a(
-        "flex w-full flex-col gap-0.5 rounded-xl bg-surface p-1",
-        i
-      ),
-      ...s
+      className: s("flex w-full flex-col", a),
+      ...r
     }
   )
 );
-v.displayName = "SettingList";
+x.displayName = "SettingList";
 export {
-  v as SettingList,
-  x as SettingRow,
-  p as settingRowVariants
+  x as SettingList,
+  v as SettingRow,
+  g as settingRowVariants
 };

package/components/sidebar.d.ts

@@ -28,6 +28,8 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
     /** Uncontrolled initial collapsed state. */
     defaultCollapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
+    /** Slide the complete rail in from the left on its first mount. */
+    animateOnMount?: boolean;
     /** Bind ⌘B / Ctrl-B to toggle collapse. Default true. */
     keyboardToggle?: boolean;
 }