@actioneer/ads 0.5.4 → 0.5.5

package/components/dropdown.js

@@ -1,78 +1,79 @@
 "use client";
-import { jsxs as N, jsx as w } from "react/jsx-runtime";
+import { jsxs as C, jsx as w } from "react/jsx-runtime";
 import * as c from "react";
-import { createPortal as A } from "react-dom";
-import { MotionConfig as I, AnimatePresence as P, motion as z } from "motion/react";
+import { createPortal as I } from "react-dom";
+import { MotionConfig as P, AnimatePresence as z, motion as O } from "motion/react";
 import { cn as D } from "../lib/cn.js";
-import { floatVariants as O } from "../lib/motion.js";
-const q = (r, t) => `${r === "top" ? "bottom" : "top"} ${t === "start" ? "left" : "right"}`, k = c.createContext(null);
+import { floatVariants as q } from "../lib/motion.js";
+import { Ripple as $ } from "./ripple.js";
+const k = (r, t) => `${r === "top" ? "bottom" : "top"} ${t === "start" ? "left" : "right"}`, L = c.createContext(null);
 function R(r) {
-  const t = c.useContext(k);
+  const t = c.useContext(L);
   if (!t)
     throw new Error(`${r} must be used within a <Dropdown>.`);
   return t;
 }
-function B({ children: r, defaultOpen: t = !1 }) {
-  const [o, d] = c.useState(t), f = c.useRef(null), p = c.useRef(null);
-  return /* @__PURE__ */ w(k.Provider, { value: { open: o, setOpen: d, triggerRef: f, contentRef: p }, children: r });
+function U({ children: r, defaultOpen: t = !1 }) {
+  const [n, d] = c.useState(t), f = c.useRef(null), p = c.useRef(null);
+  return /* @__PURE__ */ w(L.Provider, { value: { open: n, setOpen: d, triggerRef: f, contentRef: p }, children: r });
 }
-function F({ children: r }) {
-  const { open: t, setOpen: o, triggerRef: d } = R("DropdownTrigger"), f = r;
+function V({ children: r }) {
+  const { open: t, setOpen: n, triggerRef: d } = R("DropdownTrigger"), f = r;
   return c.cloneElement(f, {
     ref: d,
     "aria-expanded": t,
     "aria-haspopup": "menu",
     onClick: (p) => {
-      var b, u;
-      (u = (b = f.props).onClick) == null || u.call(b, p), o(!t);
+      var v, u;
+      (u = (v = f.props).onClick) == null || u.call(v, p), n(!t);
     }
   });
 }
-function U({
+function W({
   className: r,
   align: t = "start",
-  side: o = "bottom",
+  side: n = "bottom",
   sideOffset: d = 6,
   autoFocusFirstItem: f = !0,
   children: p,
-  ...b
+  ...v
 }) {
-  const { open: u, setOpen: v, triggerRef: m, contentRef: a } = R("DropdownContent"), [i, C] = c.useState(null);
+  const { open: u, setOpen: b, triggerRef: m, contentRef: a } = R("DropdownContent"), [i, N] = c.useState(null);
   c.useLayoutEffect(() => {
     if (!u) return;
     const s = m.current;
     if (!s) return;
     const e = () => {
       var h, x;
-      const n = s.getBoundingClientRect(), l = ((h = a.current) == null ? void 0 : h.offsetWidth) ?? 0, g = ((x = a.current) == null ? void 0 : x.offsetHeight) ?? 0, y = t === "end" ? n.right - l : n.left, E = o === "top" ? n.top - g - d : n.bottom + d;
-      C({ top: E, left: y });
+      const o = s.getBoundingClientRect(), l = ((h = a.current) == null ? void 0 : h.offsetWidth) ?? 0, g = ((x = a.current) == null ? void 0 : x.offsetHeight) ?? 0, y = t === "end" ? o.right - l : o.left, E = n === "top" ? o.top - g - d : o.bottom + d;
+      N({ top: E, left: y });
     };
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
-  }, [u, t, o, d, m, a]), c.useEffect(() => {
+  }, [u, t, n, d, m, a]), c.useEffect(() => {
     if (!u) return;
     const s = requestAnimationFrame(() => {
-      var e, n;
+      var e, o;
       if (f) {
         const l = (e = a.current) == null ? void 0 : e.querySelector(
           '[role="menuitem"]:not([aria-disabled="true"])'
         );
         l == null || l.focus();
       } else
-        (n = a.current) == null || n.focus();
+        (o = a.current) == null || o.focus();
     });
     return () => cancelAnimationFrame(s);
   }, [u, f, a]), c.useEffect(() => {
     if (!u) return;
     const s = (e) => {
       var l, g;
-      const n = e.target;
-      (l = a.current) != null && l.contains(n) || (g = m.current) != null && g.contains(n) || v(!1);
+      const o = e.target;
+      (l = a.current) != null && l.contains(o) || (g = m.current) != null && g.contains(o) || b(!1);
     };
     return document.addEventListener("pointerdown", s), () => document.removeEventListener("pointerdown", s);
-  }, [u, v, m, a]);
-  const L = (s) => {
+  }, [u, b, m, a]);
+  const A = (s) => {
     var l, g, y, E, h, x;
     const e = Array.from(
       ((l = a.current) == null ? void 0 : l.querySelectorAll(
@@ -80,16 +81,16 @@ function U({
       )) ?? []
     );
     if (e.length === 0) return;
-    const n = e.indexOf(document.activeElement);
+    const o = e.indexOf(document.activeElement);
     switch (s.key) {
       case "Escape":
-        s.preventDefault(), v(!1), (g = m.current) == null || g.focus();
+        s.preventDefault(), b(!1), (g = m.current) == null || g.focus();
         break;
       case "ArrowDown":
-        s.preventDefault(), (y = e[n < 0 ? 0 : (n + 1) % e.length]) == null || y.focus();
+        s.preventDefault(), (y = e[o < 0 ? 0 : (o + 1) % e.length]) == null || y.focus();
         break;
       case "ArrowUp":
-        s.preventDefault(), (E = e[n < 0 ? e.length - 1 : (n - 1 + e.length) % e.length]) == null || E.focus();
+        s.preventDefault(), (E = e[o < 0 ? e.length - 1 : (o - 1 + e.length) % e.length]) == null || E.focus();
         break;
       case "Home":
         s.preventDefault(), (h = e[0]) == null || h.focus();
@@ -99,15 +100,15 @@ function U({
         break;
     }
   };
-  return A(
-    /* @__PURE__ */ w(I, { reducedMotion: "user", children: /* @__PURE__ */ w(P, { children: u && /* @__PURE__ */ w(
-      z.div,
+  return I(
+    /* @__PURE__ */ w(P, { reducedMotion: "user", children: /* @__PURE__ */ w(z, { children: u && /* @__PURE__ */ C(
+      O.div,
       {
         ref: a,
         role: "menu",
         tabIndex: -1,
-        onKeyDown: L,
-        variants: O,
+        onKeyDown: A,
+        variants: q,
         initial: "hidden",
         animate: "visible",
         exit: "hidden",
@@ -116,27 +117,30 @@ function U({
           top: (i == null ? void 0 : i.top) ?? 0,
           left: (i == null ? void 0 : i.left) ?? 0,
           visibility: i ? "visible" : "hidden",
-          transformOrigin: q(o, t)
+          transformOrigin: k(n, t)
         },
         className: D(
-          "z-50 min-w-44 rounded-lg border border-border bg-elevated p-1",
+          "relative z-50 min-w-44 rounded-lg border border-border bg-elevated p-1",
           "text-foreground shadow-elevation outline-none",
           r
         ),
-        ...b,
-        children: p
+        ...v,
+        children: [
+          /* @__PURE__ */ w($, { origin: k(n, t) }),
+          p
+        ]
       }
     ) }) }),
     document.body
   );
 }
-const $ = c.forwardRef(
-  ({ className: r, startContent: t, danger: o, disabled: d, onSelect: f, children: p, ...b }, u) => {
-    const { setOpen: v, triggerRef: m } = R("DropdownItem"), a = () => {
+const j = c.forwardRef(
+  ({ className: r, startContent: t, danger: n, disabled: d, onSelect: f, children: p, ...v }, u) => {
+    const { setOpen: b, triggerRef: m } = R("DropdownItem"), a = () => {
       var i;
-      d || (f == null || f(), v(!1), (i = m.current) == null || i.focus());
+      d || (f == null || f(), b(!1), (i = m.current) == null || i.focus());
     };
-    return /* @__PURE__ */ N(
+    return /* @__PURE__ */ C(
       "div",
       {
         ref: u,
@@ -151,12 +155,12 @@ const $ = c.forwardRef(
           "flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-xs",
           "outline-none transition-colors duration-(--duration-fast)",
           "focus-visible:ring-3 focus-visible:ring-ring",
-          o ? "text-danger" : "text-foreground",
-          d ? "pointer-events-none opacity-50" : D("hover:bg-muted focus:bg-muted", o && "hover:bg-danger/10 focus:bg-danger/10"),
+          n ? "text-danger" : "text-foreground",
+          d ? "pointer-events-none opacity-50" : D("hover:bg-muted focus:bg-muted", n && "hover:bg-danger/10 focus:bg-danger/10"),
           "[&_svg]:size-4 [&_svg]:shrink-0",
           r
         ),
-        ...b,
+        ...v,
         children: [
           t,
           /* @__PURE__ */ w("span", { className: "flex-1", children: p })
@@ -165,34 +169,34 @@ const $ = c.forwardRef(
     );
   }
 );
-$.displayName = "DropdownItem";
-const j = c.forwardRef(({ className: r, ...t }, o) => /* @__PURE__ */ w(
+j.displayName = "DropdownItem";
+const H = c.forwardRef(({ className: r, ...t }, n) => /* @__PURE__ */ w(
   "div",
   {
-    ref: o,
+    ref: n,
     role: "separator",
     className: D("my-1 h-px bg-border", r),
     ...t
   }
 ));
-j.displayName = "DropdownSeparator";
-const H = c.forwardRef(({ className: r, ...t }, o) => /* @__PURE__ */ w(
+H.displayName = "DropdownSeparator";
+const K = c.forwardRef(({ className: r, ...t }, n) => /* @__PURE__ */ w(
   "div",
   {
-    ref: o,
+    ref: n,
     className: D(
-      "px-2 py-1.5 text-xs font-medium text-muted-foreground select-none",
+      "px-2 py-1.5 text-xs font-normal text-muted-foreground select-none",
       r
     ),
     ...t
   }
 ));
-H.displayName = "DropdownLabel";
+K.displayName = "DropdownLabel";
 export {
-  B as Dropdown,
-  U as DropdownContent,
-  $ as DropdownItem,
-  H as DropdownLabel,
-  j as DropdownSeparator,
-  F as DropdownTrigger
+  U as Dropdown,
+  W as DropdownContent,
+  j as DropdownItem,
+  K as DropdownLabel,
+  H as DropdownSeparator,
+  V as DropdownTrigger
 };

package/components/empty-state.js

@@ -4,8 +4,8 @@ import * as x from "react";
 import { Inbox as f } from "../lib/icons.js";
 import { cn as s } from "../lib/cn.js";
 const g = x.forwardRef(
-  ({ className: r, icon: d, illustration: a, title: n, description: c, action: o, ...m }, h) => {
-    const l = a != null;
+  ({ className: r, icon: d, illustration: i, title: n, description: c, action: o, ...m }, h) => {
+    const l = i != null;
     return /* @__PURE__ */ t(
       "div",
       {
@@ -17,13 +17,13 @@ const g = x.forwardRef(
         ),
         ...m,
         children: [
-          l ? a : /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center rounded-full bg-muted p-3 text-muted-foreground [&_svg]:size-6", children: d ?? /* @__PURE__ */ e(f, { "aria-hidden": !0 }) }),
+          l ? i : /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center rounded-full bg-muted p-3 text-muted-foreground [&_svg]:size-6", children: d ?? /* @__PURE__ */ e(f, { "aria-hidden": !0 }) }),
           /* @__PURE__ */ t("div", { className: "flex flex-col gap-1.5", children: [
             /* @__PURE__ */ e(
               "p",
               {
                 className: s(
-                  l ? "text-lg font-bold text-foreground" : "font-medium"
+                  l ? "text-lg font-semibold text-foreground" : "font-normal"
                 ),
                 children: n
               }
@@ -46,9 +46,9 @@ const g = x.forwardRef(
   }
 );
 g.displayName = "EmptyState";
-const i = "h-28 w-auto";
+const a = "h-28 w-auto";
 function y({ className: r }) {
-  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
     /* @__PURE__ */ e(
       "rect",
       {
@@ -83,7 +83,7 @@ function y({ className: r }) {
 }
 y.displayName = "EmptyDocuments";
 function N({ className: r }) {
-  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
     /* @__PURE__ */ e(
       "rect",
       {
@@ -126,8 +126,8 @@ function N({ className: r }) {
   ] });
 }
 N.displayName = "EmptySearch";
-function u({ className: r }) {
-  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
+function p({ className: r }) {
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
     /* @__PURE__ */ e(
       "path",
       {
@@ -153,20 +153,20 @@ function u({ className: r }) {
     )
   ] });
 }
-u.displayName = "EmptyConnections";
-function p({ className: r }) {
-  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
+p.displayName = "EmptyConnections";
+function u({ className: r }) {
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
     /* @__PURE__ */ e("rect", { x: "34", y: "88", width: "72", height: "3", rx: "1.5", className: "fill-border-strong" }),
     /* @__PURE__ */ e("rect", { x: "40", y: "64", width: "15", height: "24", rx: "3", className: "fill-muted" }),
     /* @__PURE__ */ e("rect", { x: "62", y: "50", width: "15", height: "38", rx: "3", className: "fill-border-strong" }),
     /* @__PURE__ */ e("rect", { x: "84", y: "34", width: "15", height: "54", rx: "3", className: "fill-brand" })
   ] });
 }
-p.displayName = "EmptyInsights";
+u.displayName = "EmptyInsights";
 export {
-  u as EmptyConnections,
+  p as EmptyConnections,
   y as EmptyDocuments,
-  p as EmptyInsights,
+  u as EmptyInsights,
   N as EmptySearch,
   g as EmptyState
 };

package/components/field.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
 import * as d from "react";
 import { cn as a } from "../lib/cn.js";
 import { interactive as g } from "../lib/interactive.js";
@@ -7,7 +7,7 @@ const h = a(
   // Border WIDTH only — no border-color utility. ads-interactive owns the
   // color (rest = --glow-border-rest below); a `border-input` utility here
   // would out-cascade the hover/focus brand-black rules.
-  "flex w-full rounded-md border bg-elevated text-foreground",
+  "flex w-full rounded-full border bg-elevated text-foreground",
   "px-3 text-xs",
   "placeholder:text-muted-foreground",
   "outline-none",
@@ -19,56 +19,56 @@ const h = a(
   g({ on: "all", color: "brand", intensity: "medium", animate: !0 }),
   "[--glow-border-rest:var(--input)]",
   "[--glow-inset:var(--inner-glow-field)]"
-), s = d.forwardRef(({ className: t, children: e, required: r, ...l }, i) => /* @__PURE__ */ n(
+), i = d.forwardRef(({ className: r, children: e, required: l, ...t }, n) => /* @__PURE__ */ s(
   "label",
   {
-    ref: i,
+    ref: n,
     className: a(
-      "flex items-center gap-1 text-xs font-medium text-foreground select-none",
+      "flex items-center gap-1 text-xs font-normal text-foreground select-none",
       "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
-      t
+      r
     ),
-    ...l,
+    ...t,
     children: [
       e,
-      r && /* @__PURE__ */ o("span", { className: "text-danger", children: "*" })
+      l && /* @__PURE__ */ o("span", { className: "text-danger", children: "*" })
     ]
   }
 ));
-s.displayName = "Label";
-const c = d.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+i.displayName = "Label";
+const c = d.forwardRef(({ className: r, ...e }, l) => /* @__PURE__ */ o(
   "p",
   {
-    ref: r,
-    className: a("text-xs text-muted-foreground", t),
+    ref: l,
+    className: a("text-xs text-muted-foreground", r),
     ...e
   }
 ));
 c.displayName = "FieldDescription";
-const m = d.forwardRef(
-  ({ className: t, children: e, ...r }, l) => e ? /* @__PURE__ */ o(
+const f = d.forwardRef(
+  ({ className: r, children: e, ...l }, t) => e ? /* @__PURE__ */ o(
     "p",
     {
-      ref: l,
-      className: a("text-xs font-medium text-danger", t),
-      ...r,
+      ref: t,
+      className: a("text-xs font-normal text-danger", r),
+      ...l,
       children: e
     }
   ) : null
 );
-m.displayName = "FieldError";
+f.displayName = "FieldError";
 const b = d.forwardRef(
-  ({ className: t, label: e, description: r, error: l, required: i, htmlFor: f, children: p, ...x }, u) => /* @__PURE__ */ n("div", { ref: u, className: a("flex flex-col gap-1.5", t), ...x, children: [
-    e && /* @__PURE__ */ o(s, { htmlFor: f, required: i, children: e }),
+  ({ className: r, label: e, description: l, error: t, required: n, htmlFor: m, children: p, ...x }, u) => /* @__PURE__ */ s("div", { ref: u, className: a("flex flex-col gap-1.5", r), ...x, children: [
+    e && /* @__PURE__ */ o(i, { htmlFor: m, required: n, children: e }),
     p,
-    l ? /* @__PURE__ */ o(m, { children: l }) : r ? /* @__PURE__ */ o(c, { children: r }) : null
+    t ? /* @__PURE__ */ o(f, { children: t }) : l ? /* @__PURE__ */ o(c, { children: l }) : null
   ] })
 );
 b.displayName = "Field";
 export {
   b as Field,
   c as FieldDescription,
-  m as FieldError,
-  s as Label,
+  f as FieldError,
+  i as Label,
   h as inputBaseClass
 };

package/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './scroll-area';
 export * from './stepper';
 export * from './resizable-panel';
 export * from './audio-waveform';
+export * from './tooltip';
 export * from './input';
 export * from './input-field';
 export * from './textarea';
@@ -52,6 +53,9 @@ export * from './timeline';
 export * from './alert';
 export * from './brand-loader';
 export * from './pixel-blast-svg';
+export * from './pixel-icon';
+export * from './agent-icon';
+export * from './ripple';
 export * from './brand-texture';
 export * from './progress';
 export * from './progress-circle';