@actioneer/ads 0.6.0 → 0.7.0

package/components/pagination.js

@@ -1,48 +1,48 @@
 "use client";
 import { jsxs as u, jsx as l } from "react/jsx-runtime";
 import * as j from "react";
-import { ChevronLeft as k, MoreHorizontal as L, ChevronRight as G } from "../lib/icons.js";
+import { ChevronLeft as L, MoreHorizontal as k, ChevronRight as G } from "../lib/icons.js";
 import { cn as o } from "../lib/cn.js";
 import { Select as M } from "./select.js";
-function p(e, r) {
-  const t = [];
-  for (let i = e; i <= r; i += 1) t.push(i);
-  return t;
+function p(t, s) {
+  const e = [];
+  for (let r = t; r <= s; r += 1) e.push(r);
+  return e;
 }
-function E(e, r, t) {
-  if (t * 2 + 5 >= e)
-    return p(1, e);
-  const m = Math.max(r - t, 1), s = Math.min(r + t, e), d = m > 2, a = s < e - 1;
+function E(t, s, e) {
+  if (e * 2 + 5 >= t)
+    return p(1, t);
+  const m = Math.max(s - e, 1), i = Math.min(s + e, t), d = m > 2, a = i < t - 1;
   if (!d && a) {
-    const c = t * 2 + 3;
-    return [...p(1, c), "end-ellipsis", e];
+    const c = e * 2 + 3;
+    return [...p(1, c), "end-ellipsis", t];
   }
   if (d && !a) {
-    const c = t * 2 + 3;
-    return [1, "start-ellipsis", ...p(e - c + 1, e)];
+    const c = e * 2 + 3;
+    return [1, "start-ellipsis", ...p(t - c + 1, t)];
   }
   return [
     1,
     "start-ellipsis",
-    ...p(m, s),
+    ...p(m, i),
     "end-ellipsis",
-    e
+    t
   ];
 }
-const A = (e) => o(
+const A = () => o(
   "inline-flex items-center justify-center rounded-md font-normal",
   "outline-none focus-visible:ring-3 focus-visible:ring-ring",
   "transition active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100",
   "disabled:pointer-events-none disabled:opacity-40",
-  e === "sm" ? "size-7 text-xs" : "size-9 text-xs"
-), N = (e) => e === "sm" ? "w-auto gap-1.5 px-2" : "w-auto gap-1.5 px-2.5", F = j.forwardRef(
+  "size-6 text-xs"
+), N = (t) => t === "sm" ? "w-auto gap-1.5 px-2" : "w-auto gap-1.5 px-2.5", F = j.forwardRef(
   ({
-    className: e,
-    total: r,
-    page: t,
-    onChange: i,
+    className: t,
+    total: s,
+    page: e,
+    onChange: r,
     siblings: m = 1,
-    size: s = "md",
+    size: i = "md",
     summary: d,
     labels: a = !1,
     pageSize: c,
@@ -50,8 +50,8 @@ const A = (e) => o(
     onPageSizeChange: g,
     ...C
   }, y) => {
-    if (r <= 0) return null;
-    const P = E(r, t, m), R = t <= 1, S = t >= r, f = A(s), x = s === "sm" ? "size-3.5" : "size-4", h = c != null && !!g, b = d != null || h;
+    if (s <= 0) return null;
+    const P = E(s, e, m), R = e <= 1, S = e >= s, f = A(), x = i === "sm" ? "size-3.5" : "size-4", h = c != null && !!g, b = d != null || h;
     return /* @__PURE__ */ u(
       "nav",
       {
@@ -60,7 +60,7 @@ const A = (e) => o(
         className: o(
           "flex items-center",
           b ? "w-full justify-between gap-4" : "gap-1",
-          e
+          t
         ),
         ...C,
         children: [
@@ -88,7 +88,7 @@ const A = (e) => o(
                     M,
                     {
                       size: "sm",
-                      className: "w-18",
+                      className: "w-18 text-s font-normal",
                       placement: "top",
                       items: (w ?? [8, 16, 32]).map((n) => ({
                         label: String(n),
@@ -108,14 +108,14 @@ const A = (e) => o(
                   type: "button",
                   "aria-label": "Go to previous page",
                   disabled: R,
-                  onClick: () => i(t - 1),
+                  onClick: () => r(e - 1),
                   className: o(
                     f,
                     "text-foreground hover:bg-muted",
-                    a && N(s)
+                    a && N(i)
                   ),
                   children: [
-                    /* @__PURE__ */ l(k, { className: x, "aria-hidden": !0 }),
+                    /* @__PURE__ */ l(L, { className: x, "aria-hidden": !0 }),
                     a && "Prev"
                   ]
                 }
@@ -127,21 +127,21 @@ const A = (e) => o(
                     {
                       "aria-hidden": !0,
                       className: o(f, "text-muted-foreground"),
-                      children: /* @__PURE__ */ l(L, { className: x })
+                      children: /* @__PURE__ */ l(k, { className: x })
                     },
                     n
                   );
-                const v = n === t;
+                const v = n === e;
                 return /* @__PURE__ */ l(
                   "button",
                   {
                     type: "button",
                     "aria-label": `Go to page ${n}`,
                     "aria-current": v ? "page" : void 0,
-                    onClick: () => i(n),
+                    onClick: () => r(n),
                     className: o(
                       f,
-                      v ? "bg-foreground text-background" : "text-foreground hover:bg-muted"
+                      v ? "bg-ng10 text-white" : "text-foreground hover:bg-muted"
                     ),
                     children: n
                   },
@@ -154,11 +154,11 @@ const A = (e) => o(
                   type: "button",
                   "aria-label": "Go to next page",
                   disabled: S,
-                  onClick: () => i(t + 1),
+                  onClick: () => r(e + 1),
                   className: o(
                     f,
                     "text-foreground hover:bg-muted",
-                    a && N(s)
+                    a && N(i)
                   ),
                   children: [
                     a && "Next",

package/components/select.d.ts

@@ -8,6 +8,26 @@ export interface SelectItem {
     value: string;
     disabled?: boolean;
 }
+export interface DropdownOptionsProps {
+    items: SelectItem[];
+    value?: string;
+    values?: string[];
+    multiple?: boolean;
+    activeIndex?: number;
+    onActiveIndexChange?: (index: number) => void;
+    onItemSelect?: (index: number) => void;
+    placement?: "top" | "bottom";
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    "aria-label"?: string;
+}
+/**
+ * DropdownOptions — the reusable options surface composed by Select.
+ * It owns listbox semantics and the brand-green option interaction treatment;
+ * positioning and open/closed state stay with the parent Select.
+ */
+export declare const DropdownOptions: React.ForwardRefExoticComponent<DropdownOptionsProps & React.RefAttributes<HTMLUListElement>>;
 export interface SelectProps extends VariantProps<typeof selectTriggerVariants> {
     items: SelectItem[];
     value?: string;
@@ -15,6 +35,7 @@ export interface SelectProps extends VariantProps<typeof selectTriggerVariants>
     multiple?: boolean;
     values?: string[];
     onValuesChange?: (values: string[]) => void;
+    /** Empty-state trigger copy. Defaults to "Select" and inherits tertiary text. */
     placeholder?: string;
     disabled?: boolean;
     isInvalid?: boolean;

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 };