@actioneer/ads 0.5.7 → 0.5.9

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;
+    elevated?: boolean;
 }
 export declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/segmented.js

@@ -1,40 +1,40 @@
 "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 h, motion as v } from "motion/react";
-import { cva as d } from "class-variance-authority";
-import { cn as c } from "../lib/cn.js";
-import { EASE_OUT as w } from "../lib/motion.js";
-const y = d(
+import { MotionConfig as v, motion as w } 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 pill provides the definition; a stroke around the
+  // 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 rounded-full bg-surface p-1",
+  "inline-flex items-center gap-1 bg-surface p-1",
   {
     variants: {
       size: {
-        sm: "text-xs",
-        md: "text-xs",
-        lg: "text-base"
+        sm: "rounded-sm text-xs",
+        md: "rounded-md text-xs",
+        lg: "rounded-md text-base"
       }
     },
     defaultVariants: { size: "md" }
   }
-), D = d(
-  c(
-    // The active pill is a shared motion thumb that SLIDES between options
+), k = c(
+  o(
+    // 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 rounded-full font-normal select-none",
-    "transition-colors duration-(--duration-fast) cursor-pointer",
+    "relative inline-flex items-center justify-center whitespace-nowrap font-normal 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"
   ),
   {
     variants: {
       size: {
-        sm: "h-6 px-2.5",
-        md: "h-8 px-3",
-        lg: "h-9 px-4"
+        sm: "h-6 rounded-sm px-2.5",
+        md: "h-8 rounded-md px-3",
+        lg: "h-9 rounded-md px-4"
       },
       selected: {
         true: "text-foreground",
@@ -43,33 +43,33 @@ const y = d(
     },
     defaultVariants: { size: "md", selected: !1 }
   }
-), k = l.forwardRef(({ options: r, value: a, onChange: s, size: o, className: u, ...m }, f) => {
-  const p = l.useId(), i = (e) => {
-    const t = r.findIndex((g) => g.value === a), b = ((t < 0 ? 0 : t) + e + r.length) % r.length;
+), I = l.forwardRef(({ options: r, value: a, onChange: s, size: i, className: u, elevated: m = !0, ...f }, p) => {
+  const g = l.useId(), d = (e) => {
+    const t = r.findIndex((x) => x.value === a), b = ((t < 0 ? 0 : t) + e + r.length) % r.length;
     s(r[b].value);
   };
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: f,
+      ref: p,
       role: "radiogroup",
       onKeyDown: (e) => {
         switch (e.key) {
           case "ArrowRight":
           case "ArrowDown":
-            e.preventDefault(), i(1);
+            e.preventDefault(), d(1);
             break;
           case "ArrowLeft":
           case "ArrowUp":
-            e.preventDefault(), i(-1);
+            e.preventDefault(), d(-1);
             break;
         }
       },
-      className: c(y({ size: o }), u),
-      ...m,
-      children: /* @__PURE__ */ n(h, { reducedMotion: "user", children: r.map((e) => {
+      className: o(D({ size: i }), u),
+      ...f,
+      children: /* @__PURE__ */ n(v, { reducedMotion: "user", children: r.map((e) => {
         const t = e.value === a;
-        return /* @__PURE__ */ x(
+        return /* @__PURE__ */ h(
           "button",
           {
             type: "button",
@@ -78,16 +78,19 @@ const y = d(
             "aria-label": e.ariaLabel,
             tabIndex: t ? 0 : -1,
             onClick: () => s(e.value),
-            className: D({ size: o, selected: t }),
+            className: k({ size: i, selected: t }),
             children: [
               t && /* @__PURE__ */ n(
-                v.span,
+                w.span,
                 {
-                  layoutId: p,
+                  layoutId: g,
                   "aria-hidden": !0,
                   layoutDependency: a,
-                  transition: { duration: 0.2, ease: w },
-                  className: "absolute inset-0 rounded-full bg-elevated shadow-elevation"
+                  transition: y,
+                  className: o(
+                    "absolute inset-0 rounded-[inherit] bg-elevated",
+                    m && "shadow-elevation"
+                  )
                 }
               ),
               /* @__PURE__ */ n("span", { className: "relative", children: e.label })
@@ -99,7 +102,7 @@ const y = d(
     }
   );
 });
-k.displayName = "SegmentedControl";
+I.displayName = "SegmentedControl";
 export {
-  k as SegmentedControl
+  I as SegmentedControl
 };

package/components/select.d.ts

@@ -12,17 +12,24 @@ export interface SelectProps extends VariantProps<typeof selectTriggerVariants>
     items: SelectItem[];
     value?: string;
     onChange?: (value: string) => void;
+    multiple?: boolean;
+    values?: string[];
+    onValuesChange?: (values: string[]) => void;
     placeholder?: string;
     disabled?: boolean;
     isInvalid?: boolean;
     className?: string;
     id?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
     /**
      * Which side the listbox opens toward. Use `"top"` when the trigger sits
      * at the bottom of a clipped container (e.g. a table footer inside an
      * `overflow-clip` shell) so the menu isn't cut off. Defaults to `"bottom"`.
      */
     placement?: "top" | "bottom";
+    /** Render the listbox at the document root so overflow containers cannot clip it. */
+    portal?: boolean;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/components/select.js

@@ -1,124 +1,221 @@
 "use client";
-import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { jsx as u, jsxs as k } from "react/jsx-runtime";
 import * as s from "react";
-import { cva as j } from "class-variance-authority";
-import { MotionConfig as M, AnimatePresence as V, motion as $ } from "motion/react";
-import { ChevronDown as C, Check as K } from "../lib/icons.js";
-import { cn as d } from "../lib/cn.js";
-import { inputBaseClass as L } from "./field.js";
-import { floatVariants as O } from "../lib/motion.js";
-import { Ripple as P } from "./ripple.js";
-const T = j(
-  d(
-    L,
+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",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
   ),
   {
     variants: {
       size: {
-        sm: "h-8 text-xs",
-        md: "h-10 text-xs",
-        lg: "h-11 text-base"
+        sm: "h-8 rounded-sm text-xs",
+        md: "h-10 rounded-md text-xs",
+        lg: "h-11 rounded-md text-base"
       }
     },
     defaultVariants: { size: "md" }
   }
-), _ = s.forwardRef(
+), ee = s.forwardRef(
   ({
-    items: r,
-    value: c,
-    onChange: b,
-    placeholder: I = "Select…",
-    size: N,
-    disabled: w,
-    isInvalid: E,
-    className: R,
-    id: A,
-    placement: v = "bottom"
-  }, S) => {
-    const [o, l] = s.useState(!1), [a, x] = s.useState(-1), g = s.useRef(null), k = s.useRef(null), u = s.useId(), h = r.find((e) => e.value === c), z = s.useCallback(() => {
-      const e = r.findIndex((t) => t.value === c);
-      return e >= 0 && !r[e].disabled ? e : r.findIndex((t) => !t.disabled);
-    }, [r, c]);
+    items: o,
+    value: h,
+    onChange: E,
+    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);
+      return e >= 0 && !o[e].disabled ? e : o.findIndex((t) => !t.disabled);
+    }, [o, d, h, l]);
     s.useEffect(() => {
-      if (!o) return;
+      if (!r) return;
       const e = (t) => {
-        var n;
-        (n = g.current) != null && n.contains(t.target) || l(!1);
+        var a, x;
+        const n = t.target;
+        (a = z.current) != null && a.contains(n) || (x = w.current) != null && x.contains(n) || b(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, [o]), s.useEffect(() => {
+    }, [r]), s.useLayoutEffect(() => {
+      if (!r || !p) {
+        S(null);
+        return;
+      }
+      const e = () => {
+        var a, x;
+        const t = (a = z.current) == null ? void 0 : a.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,
+          left: t.left,
+          width: t.width
+        });
+      };
+      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(() => {
       var t;
-      if (!o || a < 0) return;
-      const e = (t = k.current) == null ? void 0 : t.children[a];
+      if (!r || c < 0) return;
+      const e = (t = w.current) == null ? void 0 : t.children[c];
       e == null || e.scrollIntoView({ block: "nearest" });
-    }, [o, a]);
-    const f = () => {
-      w || (x(z()), l(!0));
-    }, y = (e) => {
-      x((t) => {
+    }, [r, c]);
+    const y = () => {
+      L || (N(K()), b(!0));
+    }, A = (e) => {
+      N((t) => {
         let n = t;
-        for (let p = 0; p < r.length; p++)
-          if (n = (n + e + r.length) % r.length, !r[n].disabled) return n;
+        for (let a = 0; a < o.length; a++)
+          if (n = (n + e + o.length) % o.length, !o[n].disabled) return n;
         return t;
       });
-    }, D = (e) => {
-      const t = r[e];
-      !t || t.disabled || (b == null || b(t.value), l(!1));
-    };
-    return /* @__PURE__ */ m("div", { ref: g, className: "relative", children: [
-      /* @__PURE__ */ m(
+    }, $ = (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]
+          );
+          return;
+        }
+        E == null || E(t.value), b(!1);
+      }
+    }, U = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), r ? A(1) : y();
+          break;
+        case "ArrowUp":
+          e.preventDefault(), r ? A(-1) : y();
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), r ? $(c) : y();
+          break;
+        case "Escape":
+          r && (e.preventDefault(), e.stopPropagation(), b(!1));
+          break;
+        case "Tab":
+          b(!1);
+          break;
+      }
+    }, j = /* @__PURE__ */ u(F, { reducedMotion: "user", children: /* @__PURE__ */ u(G, { children: r && /* @__PURE__ */ k(
+      J.ul,
+      {
+        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",
+        style: {
+          transformOrigin: m === "top" ? "bottom" : "top",
+          ...p ? {
+            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",
+            zIndex: 60
+          } : {}
+        },
+        className: f(
+          "max-h-60 overflow-auto p-1",
+          "rounded-md border border-border bg-elevated shadow-elevation",
+          p ? "fixed" : f(
+            "absolute z-50 w-full",
+            m === "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(
         "button",
         {
-          ref: S,
-          id: A,
+          ref: _,
+          id: O,
           type: "button",
           role: "combobox",
           "aria-haspopup": "listbox",
-          "aria-expanded": o,
-          "aria-controls": u,
-          "aria-invalid": E || void 0,
-          disabled: w,
-          onClick: () => o ? l(!1) : f(),
-          onKeyDown: (e) => {
-            switch (e.key) {
-              case "ArrowDown":
-                e.preventDefault(), o ? y(1) : f();
-                break;
-              case "ArrowUp":
-                e.preventDefault(), o ? y(-1) : f();
-                break;
-              case "Enter":
-              case " ":
-                e.preventDefault(), o ? D(a) : f();
-                break;
-              case "Escape":
-                o && (e.preventDefault(), l(!1));
-                break;
-              case "Tab":
-                l(!1);
-                break;
-            }
-          },
-          className: d(T({ size: N }), R),
+          "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),
           children: [
-            /* @__PURE__ */ i(
+            /* @__PURE__ */ u(
               "span",
               {
-                className: d(
+                className: f(
                   "truncate",
-                  !h && "text-muted-foreground"
+                  d ? v.length === 0 && "text-muted-foreground" : !D && "text-muted-foreground"
                 ),
-                children: h ? h.label : I
+                children: d ? v.length === 0 ? R : v.length === 1 ? v[0].label : `${v.length} selected` : D ? D.label : R
               }
             ),
-            /* @__PURE__ */ i(
-              C,
+            /* @__PURE__ */ u(
+              V,
               {
-                className: d(
-                  "size-4 text-muted-foreground transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
-                  o && "rotate-180"
+                className: f(
+                  "size-4 text-muted-foreground transition-transform duration-150 ease-out motion-reduce:transition-none",
+                  r && "rotate-180"
                 ),
                 "aria-hidden": !0
               }
@@ -126,59 +223,11 @@ const T = j(
           ]
         }
       ),
-      /* @__PURE__ */ i(M, { reducedMotion: "user", children: /* @__PURE__ */ i(V, { children: o && /* @__PURE__ */ m(
-        $.ul,
-        {
-          ref: k,
-          id: u,
-          role: "listbox",
-          "aria-activedescendant": a >= 0 ? `${u}-opt-${a}` : void 0,
-          variants: O,
-          initial: "hidden",
-          animate: "visible",
-          exit: "hidden",
-          style: {
-            transformOrigin: v === "top" ? "bottom" : "top"
-          },
-          className: d(
-            "absolute z-50 max-h-60 w-full overflow-auto p-1",
-            "rounded-md border border-border bg-elevated shadow-elevation",
-            v === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5"
-          ),
-          children: [
-            /* @__PURE__ */ i(P, { origin: v === "top" ? "bottom" : "top" }),
-            r.map((e, t) => {
-              const n = e.value === c, p = t === a;
-              return /* @__PURE__ */ m(
-                "li",
-                {
-                  id: `${u}-opt-${t}`,
-                  role: "option",
-                  "aria-selected": n,
-                  "aria-disabled": e.disabled || void 0,
-                  onMouseEnter: () => !e.disabled && x(t),
-                  onClick: () => D(t),
-                  className: d(
-                    "flex cursor-pointer items-center justify-between gap-2",
-                    "rounded-sm px-2 py-1.5 text-xs text-foreground select-none",
-                    p && !e.disabled && "bg-muted",
-                    e.disabled && "pointer-events-none opacity-50"
-                  ),
-                  children: [
-                    /* @__PURE__ */ i("span", { className: "truncate", children: e.label }),
-                    n && /* @__PURE__ */ i(K, { className: "size-4 shrink-0", "aria-hidden": !0 })
-                  ]
-                },
-                e.value
-              );
-            })
-          ]
-        }
-      ) }) })
+      p && typeof document < "u" ? q(j, document.body) : j
     ] });
   }
 );
-_.displayName = "Select";
+ee.displayName = "Select";
 export {
-  _ as Select
+  ee as Select
 };