@actioneer/ads 0.5.8 → 0.5.9

package/components/segmented.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import * as d from "react";
-import { MotionConfig as h, motion as v } from "motion/react";
-import { cva as l } from "class-variance-authority";
-import { cn as c } from "../lib/cn.js";
-import { springControl as w } from "../lib/motion.js";
-const y = l(
+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 { 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).
@@ -20,8 +20,8 @@ const y = l(
     },
     defaultVariants: { size: "md" }
   }
-), D = l(
-  c(
+), 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 font-normal select-none",
@@ -43,33 +43,33 @@ const y = l(
     },
     defaultVariants: { size: "md", selected: !1 }
   }
-), k = d.forwardRef(({ options: r, value: a, onChange: o, size: s, className: m, ...u }, f) => {
-  const p = d.useId(), i = (e) => {
-    const t = r.findIndex((b) => b.value === a), g = ((t < 0 ? 0 : t) + e + r.length) % r.length;
-    o(r[g].value);
+), 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: s }), m),
-      ...u,
-      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",
@@ -77,17 +77,20 @@ const y = l(
             "aria-checked": t,
             "aria-label": e.ariaLabel,
             tabIndex: t ? 0 : -1,
-            onClick: () => o(e.value),
-            className: D({ size: s, selected: t }),
+            onClick: () => s(e.value),
+            className: k({ size: i, selected: t }),
             children: [
               t && /* @__PURE__ */ n(
-                v.span,
+                w.span,
                 {
-                  layoutId: p,
+                  layoutId: g,
                   "aria-hidden": !0,
                   layoutDependency: a,
-                  transition: w,
-                  className: "absolute inset-0 rounded-[inherit] 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 = l(
     }
   );
 });
-k.displayName = "SegmentedControl";
+I.displayName = "SegmentedControl";
 export {
-  k as SegmentedControl
+  I as SegmentedControl
 };

package/components/select.d.ts

@@ -12,6 +12,9 @@ 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;
@@ -25,6 +28,8 @@ export interface SelectProps extends VariantProps<typeof selectTriggerVariants>
      * `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,16 +1,17 @@
 "use client";
-import { jsxs as b, jsx as i } from "react/jsx-runtime";
-import * as a from "react";
-import { cva as V } from "class-variance-authority";
-import { MotionConfig as $, AnimatePresence as C, motion as K } from "motion/react";
-import { ChevronDown as L, Check as O } from "../lib/icons.js";
-import { cn as d } from "../lib/cn.js";
-import { inputBaseClass as P } from "./field.js";
-import { floatVariants as T } from "../lib/motion.js";
-import { Ripple as _ } from "./ripple.js";
-const B = V(
-  d(
-    P,
+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",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
   ),
@@ -24,103 +25,195 @@ const B = V(
     },
     defaultVariants: { size: "md" }
   }
-), U = a.forwardRef(
+), ee = s.forwardRef(
   ({
     items: o,
-    value: c,
-    onChange: m,
-    placeholder: I = "Select…",
-    size: N,
-    disabled: w,
-    isInvalid: E,
-    className: R,
-    id: A,
-    placement: v = "bottom",
-    "aria-label": S,
-    "aria-describedby": z
-  }, j) => {
-    const [r, l] = a.useState(!1), [s, x] = a.useState(-1), g = a.useRef(null), k = a.useRef(null), u = a.useId(), h = o.find((e) => e.value === c), M = a.useCallback(() => {
-      const e = o.findIndex((t) => t.value === c);
+    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, c]);
-    a.useEffect(() => {
+    }, [o, d, h, l]);
+    s.useEffect(() => {
       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);
-    }, [r]), a.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 (!r || s < 0) return;
-      const e = (t = k.current) == null ? void 0 : t.children[s];
+      if (!r || c < 0) return;
+      const e = (t = w.current) == null ? void 0 : t.children[c];
       e == null || e.scrollIntoView({ block: "nearest" });
-    }, [r, s]);
-    const f = () => {
-      w || (x(M()), 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 < o.length; p++)
+        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) => {
+    }, $ = (e) => {
       const t = o[e];
-      !t || t.disabled || (m == null || m(t.value), l(!1));
-    };
-    return /* @__PURE__ */ b("div", { ref: g, className: "relative", children: [
-      /* @__PURE__ */ b(
+      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: j,
-          id: A,
+          ref: _,
+          id: O,
           type: "button",
           role: "combobox",
           "aria-haspopup": "listbox",
           "aria-expanded": r,
-          "aria-controls": u,
-          "aria-invalid": E || void 0,
-          "aria-label": S,
-          "aria-describedby": z,
-          disabled: w,
-          onClick: () => r ? l(!1) : f(),
-          onKeyDown: (e) => {
-            switch (e.key) {
-              case "ArrowDown":
-                e.preventDefault(), r ? y(1) : f();
-                break;
-              case "ArrowUp":
-                e.preventDefault(), r ? y(-1) : f();
-                break;
-              case "Enter":
-              case " ":
-                e.preventDefault(), r ? D(s) : f();
-                break;
-              case "Escape":
-                r && (e.preventDefault(), l(!1));
-                break;
-              case "Tab":
-                l(!1);
-                break;
-            }
-          },
-          className: d(B({ size: N }), 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(
-              L,
+            /* @__PURE__ */ u(
+              V,
               {
-                className: d(
+                className: f(
                   "size-4 text-muted-foreground transition-transform duration-150 ease-out motion-reduce:transition-none",
                   r && "rotate-180"
                 ),
@@ -130,59 +223,11 @@ const B = V(
           ]
         }
       ),
-      /* @__PURE__ */ i($, { reducedMotion: "user", children: /* @__PURE__ */ i(C, { children: r && /* @__PURE__ */ b(
-        K.ul,
-        {
-          ref: k,
-          id: u,
-          role: "listbox",
-          "aria-activedescendant": s >= 0 ? `${u}-opt-${s}` : void 0,
-          variants: T,
-          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(_, { origin: v === "top" ? "bottom" : "top" }),
-            o.map((e, t) => {
-              const n = e.value === c, p = t === s;
-              return /* @__PURE__ */ b(
-                "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(O, { className: "size-4 shrink-0", "aria-hidden": !0 })
-                  ]
-                },
-                e.value
-              );
-            })
-          ]
-        }
-      ) }) })
+      p && typeof document < "u" ? q(j, document.body) : j
     ] });
   }
 );
-U.displayName = "Select";
+ee.displayName = "Select";
 export {
-  U as Select
+  ee as Select
 };

package/components/table.d.ts

@@ -54,6 +54,13 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
      * layout must stay fixed (e.g. a compact summary card).
      */
     resizableColumns?: boolean;
+    /**
+     * Caps the table's height: the viewport scrolls vertically inside the
+     * shell and the header row pins to its top (painted on the shell gray so
+     * body rows pass underneath). For long results read in place — an
+     * expanded board table, a log — instead of pagination.
+     */
+    maxBodyHeight?: React.CSSProperties["maxHeight"];
 }
 /**
  * Styled wrapper around a semantic `<table>` with horizontal overflow.