@actioneer/ads 0.5.4 → 0.5.6

package/components/breadcrumbs.js

@@ -1,70 +1,122 @@
 "use client";
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import * as r from "react";
-import { ChevronRight as g } from "../lib/icons.js";
-import { cn as n } from "../lib/cn.js";
-const l = r.createContext({
+import { jsxs as v, jsx as e, Fragment as k } from "react/jsx-runtime";
+import * as t from "react";
+import { ArrowLeft as B } from "../lib/icons.js";
+import { cn as a } from "../lib/cn.js";
+const N = t.createContext({
   count: 0
-}), u = r.createContext(0), p = r.forwardRef(
-  ({ className: i, children: o, ...c }, t) => {
-    const s = r.Children.toArray(o);
-    return /* @__PURE__ */ e(
+}), w = t.createContext(0);
+function R(s) {
+  let n = (s == null ? void 0 : s.parentElement) ?? null;
+  for (; n; ) {
+    const r = getComputedStyle(n).overflowY;
+    if (r === "auto" || r === "scroll") return n;
+    n = n.parentElement;
+  }
+  return null;
+}
+const y = t.forwardRef(
+  ({
+    className: s,
+    children: n,
+    sticky: r,
+    onBack: c,
+    backLabel: g = "Back",
+    actions: m,
+    meta: f,
+    ...p
+  }, i) => {
+    const b = t.Children.toArray(n), l = t.useRef(null), u = t.useCallback(
+      (o) => {
+        l.current = o, typeof i == "function" ? i(o) : i && (i.current = o);
+      },
+      [i]
+    ), [x, C] = t.useState(!1);
+    return t.useEffect(() => {
+      if (!r) return;
+      const o = R(l.current), d = o ?? window, h = () => C((o ? o.scrollTop : window.scrollY) > 2);
+      return h(), d.addEventListener("scroll", h, { passive: !0 }), () => d.removeEventListener("scroll", h);
+    }, [r]), /* @__PURE__ */ v(
       "nav",
       {
-        ref: t,
+        ref: u,
         "aria-label": "Breadcrumb",
-        className: n(
-          "flex min-h-12 w-full items-center border-b border-border",
-          i
+        "data-stuck": r ? x ? "true" : "false" : void 0,
+        className: a(
+          "flex w-full items-center",
+          r && "sticky top-0 z-40 bg-background transition-[border-color] duration-(--duration-fast) ease-out motion-reduce:transition-none",
+          // Sticky offsets resolve against the scrollport's PADDING box, so in
+          // a padded panel the pinned trail sits below a strip the content
+          // would otherwise scroll through. This cover extends the trail's own
+          // background over that gap (a no-op at rest, where the strip is the
+          // panel's empty padding).
+          r && "before:absolute before:inset-x-0 before:-top-8 before:h-8 before:bg-inherit before:content-['']",
+          r && (x ? "border-b border-border" : "border-b border-transparent"),
+          s
         ),
-        ...c,
-        children: /* @__PURE__ */ e("ol", { className: "flex min-w-0 items-center gap-1.5 text-xs", children: /* @__PURE__ */ e(l.Provider, { value: { count: s.length }, children: s.map((m, a) => /* @__PURE__ */ e(u.Provider, { value: a, children: m }, a)) }) })
+        ...p,
+        children: [
+          c && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: c,
+              "aria-label": g,
+              className: a(
+                "mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground",
+                "transition-colors hover:bg-fill hover:text-foreground",
+                "outline-none focus-visible:ring-3 focus-visible:ring-ring [&_svg]:size-4"
+              ),
+              children: /* @__PURE__ */ e(B, { "aria-hidden": !0 })
+            }
+          ),
+          /* @__PURE__ */ e("ol", { className: "flex min-w-0 items-center gap-1.5 text-base", children: /* @__PURE__ */ e(N.Provider, { value: { count: b.length }, children: b.map((o, d) => /* @__PURE__ */ e(w.Provider, { value: d, children: o }, d)) }) }),
+          f && /* @__PURE__ */ e("div", { className: "ml-4 flex min-w-0 shrink items-center gap-3 text-xs text-muted-foreground", children: f }),
+          m && /* @__PURE__ */ e("div", { className: "ml-auto flex shrink-0 items-center gap-2 pl-4", children: m })
+        ]
       }
     );
   }
 );
-p.displayName = "Breadcrumbs";
-const h = r.forwardRef(({ className: i, href: o, isCurrent: c, children: t, ...s }, m) => {
-  const { count: a } = r.useContext(l), x = r.useContext(u) === a - 1, d = "inline-flex items-center", f = c ? /* @__PURE__ */ e(
+y.displayName = "Breadcrumbs";
+const E = t.forwardRef(({ className: s, href: n, isCurrent: r, icon: c, children: g, ...m }, f) => {
+  const { count: p } = t.useContext(N), b = t.useContext(w) === p - 1, l = "inline-flex items-center gap-1.5", u = /* @__PURE__ */ v(k, { children: [
+    c && /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "flex shrink-0 items-center [&_svg]:size-4", children: c }),
+    g
+  ] }), x = r ? /* @__PURE__ */ e(
     "span",
     {
       "aria-current": "page",
-      className: n(d, "font-medium text-foreground"),
-      children: t
+      className: a(l, "font-normal text-primary"),
+      children: u
     }
-  ) : o ? /* @__PURE__ */ e(
+  ) : n ? /* @__PURE__ */ e(
     "a",
     {
-      href: o,
-      className: n(
-        d,
-        "font-medium text-muted-foreground transition-colors hover:text-foreground hover:underline",
+      href: n,
+      className: a(
+        l,
+        "font-normal text-muted-foreground transition-colors hover:text-foreground",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm"
       ),
-      children: t
+      children: u
     }
-  ) : /* @__PURE__ */ e("span", { className: n(d, "text-muted-foreground"), children: t });
-  return /* @__PURE__ */ b(
+  ) : /* @__PURE__ */ e("span", { className: a(l, "text-muted-foreground"), children: u });
+  return /* @__PURE__ */ v(
     "li",
     {
-      ref: m,
-      className: n("flex items-center gap-1.5", i),
-      ...s,
+      ref: f,
+      className: a("flex items-center gap-1.5", s),
+      ...m,
       children: [
-        f,
-        !x && /* @__PURE__ */ e(
-          g,
-          {
-            "aria-hidden": !0,
-            className: "size-3.5 shrink-0 text-border-strong"
-          }
-        )
+        x,
+        !b && /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "shrink-0 select-none text-border-strong", children: "/" })
       ]
     }
   );
 });
-h.displayName = "BreadcrumbItem";
+E.displayName = "BreadcrumbItem";
 export {
-  h as BreadcrumbItem,
-  p as Breadcrumbs
+  E as BreadcrumbItem,
+  y as Breadcrumbs
 };

package/components/button.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsxs as r, jsx as u } from "react/jsx-runtime";
+import { jsxs as r, jsx as b } from "react/jsx-runtime";
 import * as c from "react";
 import { cva as v } from "class-variance-authority";
-import { cn as t } from "../lib/cn.js";
+import { cn as n } from "../lib/cn.js";
 import { Spinner as m } from "./spinner.js";
 const p = v(
   [
     "relative inline-flex items-center justify-center gap-2 whitespace-nowrap",
-    "font-medium select-none",
+    "font-normal select-none",
     "rounded-md border border-transparent",
     "transition-[background,border,color,box-shadow,transform] duration-(--duration-fast) ease-out",
     "outline-none focus-visible:ring-3 focus-visible:ring-ring",
@@ -33,17 +33,17 @@ const p = v(
         sm: "h-8 px-3 text-xs [&_svg]:size-4",
         md: "h-10 px-4 text-xs [&_svg]:size-4",
         lg: "h-11 px-5 text-base [&_svg]:size-5",
-        icon: "size-10 [&_svg]:size-4",
-        "icon-sm": "size-8 [&_svg]:size-4",
-        "icon-xs": "size-7 [&_svg]:size-4"
+        icon: "size-10 rounded-full [&_svg]:size-4",
+        "icon-sm": "size-8 rounded-full [&_svg]:size-4",
+        "icon-xs": "size-7 rounded-full [&_svg]:size-4"
       }
     },
     defaultVariants: { variant: "solid", size: "md" }
   }
 ), x = c.forwardRef(
   ({
-    className: n,
-    variant: o,
+    className: o,
+    variant: t,
     size: s,
     isLoading: e = !1,
     startContent: i,
@@ -51,23 +51,23 @@ const p = v(
     fullWidth: d,
     disabled: l,
     children: g,
-    ...b
+    ...u
   }, f) => /* @__PURE__ */ r(
     "button",
     {
       ref: f,
       disabled: l || e,
       "aria-busy": e || void 0,
-      className: t(
-        p({ variant: o, size: s }),
+      className: n(
+        p({ variant: t, size: s }),
         d && "w-full",
         // Real disabled fades; loading keeps the brand color
         e ? "opacity-100" : "disabled:opacity-50",
-        n
+        o
       ),
-      ...b,
+      ...u,
       children: [
-        e && /* @__PURE__ */ u(
+        e && /* @__PURE__ */ b(
           m,
           {
             size: "sm",
@@ -78,7 +78,7 @@ const p = v(
         /* @__PURE__ */ r(
           "span",
           {
-            className: t(
+            className: n(
               "inline-flex items-center gap-2",
               e && "opacity-0"
             ),

package/components/carousel.js

@@ -6,7 +6,7 @@ import { Button as D } from "./button.js";
 import { ChevronLeft as H, ChevronRight as X } from "../lib/icons.js";
 import { cn as S } from "../lib/cn.js";
 const q = t.createContext(null);
-function k(l) {
+function T(l) {
   const i = t.useContext(q);
   if (!i)
     throw new Error(`<${l}> must be used within <Carousel>`);
@@ -58,7 +58,7 @@ const B = W(
       const s = requestAnimationFrame(() => R(!0));
       return () => cancelAnimationFrame(s);
     }, [g, P]);
-    const T = t.useMemo(
+    const k = t.useMemo(
       () => ({
         index: g,
         count: h,
@@ -84,7 +84,7 @@ const B = W(
     ), z = (s) => {
       r == null || r(s), !(s.defaultPrevented || s.target !== s.currentTarget) && (s.key === "ArrowLeft" ? (s.preventDefault(), A("instant")) : s.key === "ArrowRight" ? (s.preventDefault(), w("instant")) : s.key === "Home" ? (s.preventDefault(), c(0, "instant")) : s.key === "End" && (s.preventDefault(), c(h - 1, "instant")));
     };
-    return /* @__PURE__ */ C(q.Provider, { value: T, children: /* @__PURE__ */ V(
+    return /* @__PURE__ */ C(q.Provider, { value: k, children: /* @__PURE__ */ V(
       "div",
       {
         ref: u,
@@ -122,7 +122,7 @@ const O = 40, Y = 10, J = 0.11, Q = t.forwardRef(
       setCount: u,
       goPrevious: a,
       goNext: n
-    } = k("CarouselContent"), y = t.Children.toArray(i), h = t.useRef(null), v = t.useRef(!1);
+    } = T("CarouselContent"), y = t.Children.toArray(i), h = t.useRef(null), v = t.useRef(!1);
     t.useEffect(() => {
       u(y.length);
     }, [y.length, u]);
@@ -138,8 +138,8 @@ const O = 40, Y = 10, J = 0.11, Q = t.forwardRef(
       f == null || f(e);
       const c = h.current;
       if (h.current = null, R(e), !c || c.pointerId !== e.pointerId) return;
-      const A = e.clientX - c.x, w = Math.max(1, e.timeStamp - c.time), T = Math.abs(A) / w;
-      (Math.abs(A) >= O || Math.abs(A) >= Y && T > J) && (v.current = !0, A < 0 ? n() : a());
+      const A = e.clientX - c.x, w = Math.max(1, e.timeStamp - c.time), k = Math.abs(A) / w;
+      (Math.abs(A) >= O || Math.abs(A) >= Y && k > J) && (v.current = !0, A < 0 ? n() : a());
     }, j = (e) => {
       o == null || o(e), h.current = null, R(e);
     }, g = (e) => {
@@ -223,7 +223,7 @@ const K = t.forwardRef(
     "aria-label": f,
     ...o
   }, b) => {
-    const { index: p, count: m, contentId: r, goTo: x } = k("CarouselIndicators"), I = t.useRef([]);
+    const { index: p, count: m, contentId: r, goTo: x } = T("CarouselIndicators"), I = t.useRef([]);
     if (m <= 1) return null;
     const N = (u) => {
       var n;
@@ -265,7 +265,7 @@ const K = t.forwardRef(
                   "aria-hidden": !0,
                   className: S(
                     "size-2.5 rounded-dot transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none",
-                    n ? "bg-brand" : "bg-ink-100 group-hover:bg-ink-300"
+                    n ? "bg-brand" : "bg-fill group-hover:bg-muted"
                   )
                 }
               )
@@ -288,7 +288,7 @@ const U = t.forwardRef(
     "aria-label": b,
     ...p
   }, m) => {
-    const { index: r, count: x, loop: I, contentId: N, goPrevious: u } = k("CarouselPrevious"), a = f || x <= 1 || !I && r === 0;
+    const { index: r, count: x, loop: I, contentId: N, goPrevious: u } = T("CarouselPrevious"), a = f || x <= 1 || !I && r === 0;
     return /* @__PURE__ */ C(
       D,
       {
@@ -319,7 +319,7 @@ const ee = t.forwardRef(
     "aria-label": b,
     ...p
   }, m) => {
-    const { index: r, count: x, loop: I, contentId: N, goNext: u } = k("CarouselNext"), a = f || x <= 1 || !I && r === x - 1;
+    const { index: r, count: x, loop: I, contentId: N, goNext: u } = T("CarouselNext"), a = f || x <= 1 || !I && r === x - 1;
     return /* @__PURE__ */ C(
       D,
       {