@actioneer/ads 0.6.0 → 0.8.0

package/components/drawer.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as i, jsxs as b } from "react/jsx-runtime";
+import { jsx as i, jsxs as y } from "react/jsx-runtime";
 import * as a from "react";
 import { createPortal as E } from "react-dom";
-import { MotionConfig as y, AnimatePresence as z, motion as w } from "motion/react";
+import { MotionConfig as z, AnimatePresence as N, motion as w } from "motion/react";
 import { Close as R } from "../lib/icons.js";
 import { cva as j } from "class-variance-authority";
 import { cn as n } from "../lib/cn.js";
 import { springSheet as l, drawerOffset as h, drawerBackdropVariants as F } from "../lib/motion.js";
-const N = j(
+const k = j(
   [
     "relative flex flex-col",
     "bg-elevated text-foreground",
@@ -53,7 +53,7 @@ const N = j(
   lg: "50%",
   xl: "66.666667%"
 };
-function k({
+function D({
   onClick: t,
   className: e
 }) {
@@ -79,32 +79,32 @@ function k({
 function G({
   open: t,
   onOpenChange: e,
-  side: s,
-  size: d,
-  className: v,
+  side: r,
+  size: v,
+  className: c,
   children: x,
   "aria-label": g
 }) {
-  const r = s ?? "right", c = a.useRef(null), m = a.useRef(null);
+  const d = r ?? "right", m = a.useRef(null), s = a.useRef(null);
   return a.useEffect(() => {
     if (!t) return;
-    m.current = document.activeElement;
-    const f = document.body.style.overflow;
+    s.current = document.activeElement;
+    const p = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const u = (o) => {
+    const f = (o) => {
       o.key === "Escape" && (o.stopPropagation(), e(!1));
     };
-    document.addEventListener("keydown", u);
-    const D = requestAnimationFrame(() => {
+    document.addEventListener("keydown", f);
+    const u = requestAnimationFrame(() => {
       var o;
-      (o = c.current) == null || o.focus();
+      (o = m.current) == null || o.focus();
     });
     return () => {
-      var o, p;
-      document.removeEventListener("keydown", u), document.body.style.overflow = f, cancelAnimationFrame(D), (p = (o = m.current) == null ? void 0 : o.focus) == null || p.call(o);
+      var o, b;
+      document.removeEventListener("keydown", f), document.body.style.overflow = p, cancelAnimationFrame(u), (b = (o = s.current) == null ? void 0 : o.focus) == null || b.call(o);
     };
   }, [t, e]), E(
-    /* @__PURE__ */ i(y, { reducedMotion: "user", children: /* @__PURE__ */ i(z, { children: t && /* @__PURE__ */ b("div", { className: n("fixed inset-0 z-50 flex", A[r]), children: [
+    /* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(N, { children: t && /* @__PURE__ */ y("div", { className: n("fixed inset-0 z-50 flex", A[d]), children: [
       /* @__PURE__ */ i(
         w.div,
         {
@@ -118,21 +118,21 @@ function G({
         },
         "backdrop"
       ),
-      /* @__PURE__ */ b(
+      /* @__PURE__ */ y(
         w.div,
         {
-          ref: c,
-          initial: h[r],
+          ref: m,
+          initial: h[d],
           animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
-          exit: { ...h[r], pointerEvents: "none", transition: l },
+          exit: { ...h[d], pointerEvents: "none", transition: l },
           role: "dialog",
           "aria-modal": "true",
           "aria-label": g,
           tabIndex: -1,
-          className: n(N({ side: r, size: d }), "relative outline-none", v),
+          className: n(k({ side: d, size: v }), "relative outline-none", c),
           children: [
             /* @__PURE__ */ i(
-              k,
+              D,
               {
                 onClick: () => e(!1),
                 className: "right-4 top-4"
@@ -150,53 +150,56 @@ function G({
 function L({
   open: t,
   onOpenChange: e,
-  side: s,
-  size: d,
-  className: v,
-  children: x,
-  "aria-label": g
+  dismissible: r = !0,
+  side: v,
+  size: c,
+  containerClassName: x,
+  className: g,
+  children: d,
+  "aria-label": m
 }) {
-  const r = s ?? "right", c = d ?? "md", m = a.useRef(null);
+  const s = v ?? "right", p = c ?? "md", f = a.useRef(null);
   return a.useEffect(() => {
-    if (!t) return;
-    const f = (u) => {
-      u.key === "Escape" && e(!1);
+    if (!t || !r) return;
+    const u = (o) => {
+      o.key === "Escape" && e(!1);
     };
-    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
-  }, [t, e]), /* @__PURE__ */ i(y, { reducedMotion: "user", children: /* @__PURE__ */ i(z, { initial: !1, children: t && /* @__PURE__ */ i(
+    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+  }, [t, e, r]), /* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(N, { initial: !1, children: t && /* @__PURE__ */ i(
     w.div,
     {
-      initial: r === "bottom" ? { height: "0%" } : { width: 0 },
-      animate: r === "bottom" ? { height: B[c], transition: l } : { width: "auto", transition: l },
-      exit: r === "bottom" ? { height: "0%", pointerEvents: "none", transition: l } : { width: 0, pointerEvents: "none", transition: l },
+      initial: s === "bottom" ? { height: "0%" } : { width: 0 },
+      animate: s === "bottom" ? { height: B[p], transition: l } : { width: "auto", transition: l },
+      exit: s === "bottom" ? { height: "0%", pointerEvents: "none", transition: l } : { width: 0, pointerEvents: "none", transition: l },
       className: n(
         "shrink-0 overflow-hidden",
-        r === "bottom" ? "w-full" : "h-full"
+        s === "bottom" ? "w-full" : "h-full",
+        x
       ),
-      children: /* @__PURE__ */ b(
+      children: /* @__PURE__ */ y(
         w.aside,
         {
-          ref: m,
-          initial: h[r],
+          ref: f,
+          initial: h[s],
           animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
-          exit: { ...h[r], pointerEvents: "none", transition: l },
+          exit: { ...h[s], pointerEvents: "none", transition: l },
           role: "complementary",
-          "aria-label": g,
+          "aria-label": m,
           className: n(
-            N({ side: r, size: d }),
-            "relative shrink-0 overflow-hidden rounded-lg bg-card shadow-none outline-none",
-            r === "bottom" && "h-full",
-            v
+            k({ side: s, size: c }),
+            "relative shrink-0 overflow-hidden rounded-lg border-0 bg-card shadow-none outline-none",
+            s === "bottom" && "h-full",
+            g
           ),
           children: [
-            /* @__PURE__ */ i(
-              k,
+            r && /* @__PURE__ */ i(
+              D,
               {
                 onClick: () => e(!1),
                 className: "right-2 top-1"
               }
             ),
-            x
+            d
           ]
         }
       )
@@ -204,38 +207,38 @@ function L({
     "inline-drawer-slot"
   ) }) });
 }
-const J = L, M = a.forwardRef(({ className: t, ...e }, s) => /* @__PURE__ */ i(
+const J = L, M = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
-    ref: s,
+    ref: r,
     className: n("flex flex-col gap-1 px-6 py-4 pr-14", t),
     ...e
   }
 ));
 M.displayName = "DrawerHeader";
-const V = a.forwardRef(({ className: t, ...e }, s) => /* @__PURE__ */ i(
+const V = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "h2",
   {
-    ref: s,
+    ref: r,
     className: n("text-lg font-medium text-foreground", t),
     ...e
   }
 ));
 V.displayName = "DrawerTitle";
-const I = a.forwardRef(({ className: t, ...e }, s) => /* @__PURE__ */ i(
+const I = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
-    ref: s,
+    ref: r,
     tabIndex: 0,
     className: n("flex-1 overflow-y-auto px-6 py-4 text-xs text-foreground", t),
     ...e
   }
 ));
 I.displayName = "DrawerBody";
-const P = a.forwardRef(({ className: t, ...e }, s) => /* @__PURE__ */ i(
+const P = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
-    ref: s,
+    ref: r,
     className: n(
       "flex items-center justify-end gap-2 px-6 py-4",
       t

package/components/dropdown.d.ts

@@ -17,11 +17,10 @@ export interface DropdownContentProps extends React.HTMLAttributes<HTMLDivElemen
     align?: "start" | "end";
     /** Which side of the trigger the menu opens on. Default below. */
     side?: "top" | "bottom";
-    sideOffset?: number;
     /** Opt in to focusing the first item when the menu opens. */
     autoFocusFirstItem?: boolean;
 }
-export declare function DropdownContent({ className, align, side, sideOffset, autoFocusFirstItem, children, ...props }: DropdownContentProps): React.ReactPortal;
+export declare function DropdownContent({ className, align, side, autoFocusFirstItem, children, ...props }: DropdownContentProps): React.ReactPortal;
 export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
     startContent?: React.ReactNode;
     danger?: boolean;

package/components/dropdown.js

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