@actioneer/ads 1.0.6 → 1.0.8

package/components/breadcrumbs.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsxs as v, jsx as t, Fragment as k } from "react/jsx-runtime";
+import { jsxs as x, jsx as t, Fragment as k } from "react/jsx-runtime";
 import * as r from "react";
 import { cn as d } from "../lib/cn.js";
 const N = r.createContext({
   count: 0
 }), w = r.createContext(0);
-function B(o) {
-  let n = (o == null ? void 0 : o.parentElement) ?? null;
+function B(a) {
+  let n = (a == null ? void 0 : a.parentElement) ?? null;
   for (; n; ) {
     const e = getComputedStyle(n).overflowY;
     if (e === "auto" || e === "scroll") return n;
@@ -15,29 +15,21 @@ function B(o) {
   return null;
 }
 const C = r.forwardRef(
-  ({
-    className: o,
-    children: n,
-    sticky: e,
-    actions: c,
-    center: i,
-    meta: f,
-    ...x
-  }, a) => {
-    const p = r.Children.toArray(n), b = r.useRef(null), u = r.useCallback(
+  ({ className: a, children: n, sticky: e, actions: i, center: c, meta: f, ...p }, o) => {
+    const h = r.Children.toArray(n), b = r.useRef(null), m = r.useCallback(
       (s) => {
-        b.current = s, typeof a == "function" ? a(s) : a && (a.current = s);
+        b.current = s, typeof o == "function" ? o(s) : o && (o.current = s);
       },
-      [a]
-    ), [l, h] = r.useState(!1);
+      [o]
+    ), [l, g] = r.useState(!1);
     return r.useEffect(() => {
       if (!e) return;
-      const s = B(b.current), m = s ?? window, g = () => h((s ? s.scrollTop : window.scrollY) > 2);
-      return g(), m.addEventListener("scroll", g, { passive: !0 }), () => m.removeEventListener("scroll", g);
-    }, [e]), /* @__PURE__ */ v(
+      const s = B(b.current), u = s ?? window, v = () => g((s ? s.scrollTop : window.scrollY) > 2);
+      return v(), u.addEventListener("scroll", v, { passive: !0 }), () => u.removeEventListener("scroll", v);
+    }, [e]), /* @__PURE__ */ x(
       "nav",
       {
-        ref: u,
+        ref: m,
         "aria-label": "Breadcrumb",
         "data-stuck": e ? l ? "true" : "false" : void 0,
         className: d(
@@ -50,29 +42,31 @@ const C = r.forwardRef(
           // panel's empty padding).
           e && "before:absolute before:inset-x-0 before:-top-8 before:h-8 before:bg-inherit before:content-['']",
           e && (l ? "border-b border-border" : "border-b border-transparent"),
-          o
+          a
         ),
-        ...x,
+        ...p,
         children: [
-          /* @__PURE__ */ t("ol", { className: "flex min-w-0 shrink items-center gap-1.5 text-base", children: /* @__PURE__ */ t(N.Provider, { value: { count: p.length }, children: p.map((s, m) => /* @__PURE__ */ t(w.Provider, { value: m, children: s }, m)) }) }),
-          f && /* @__PURE__ */ t("div", { className: "ml-4 flex shrink-0 items-center gap-3 text-xs text-muted-foreground", children: f }),
-          i && /* @__PURE__ */ t("div", { className: "absolute left-1/2 top-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 items-center", children: i }),
-          c && /* @__PURE__ */ t("div", { className: "ml-auto flex shrink-0 items-center gap-2 pl-4", children: c })
+          /* @__PURE__ */ x("div", { className: "flex min-w-0 shrink items-baseline", children: [
+            /* @__PURE__ */ t("ol", { className: "flex min-w-0 shrink items-center gap-1.5 text-base", children: /* @__PURE__ */ t(N.Provider, { value: { count: h.length }, children: h.map((s, u) => /* @__PURE__ */ t(w.Provider, { value: u, children: s }, u)) }) }),
+            f && /* @__PURE__ */ t("div", { className: "ml-3 flex shrink-0 items-baseline gap-3 text-s text-tertiary", children: f })
+          ] }),
+          c && /* @__PURE__ */ t("div", { className: "absolute left-1/2 top-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 items-center", children: c }),
+          i && /* @__PURE__ */ t("div", { className: "ml-auto flex shrink-0 items-center gap-2 pl-4", children: i })
         ]
       }
     );
   }
 );
 C.displayName = "Breadcrumbs";
-const R = r.forwardRef(({ className: o, href: n, isCurrent: e, icon: c, children: i, ...f }, x) => {
-  const { count: a } = r.useContext(N), b = r.useContext(w) === a - 1, u = "inline-flex items-center gap-1.5", l = /* @__PURE__ */ v(k, { children: [
-    c && /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "flex shrink-0 items-center [&_svg]:size-4", children: c }),
-    e ? /* @__PURE__ */ t("span", { className: "min-w-0 truncate", children: i }) : i
-  ] }), h = e ? /* @__PURE__ */ t(
+const R = r.forwardRef(({ className: a, href: n, isCurrent: e, icon: i, children: c, ...f }, p) => {
+  const { count: o } = r.useContext(N), b = r.useContext(w) === o - 1, m = "inline-flex items-center gap-1.5", l = /* @__PURE__ */ x(k, { children: [
+    i && /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "flex shrink-0 items-center [&_svg]:size-4", children: i }),
+    e ? /* @__PURE__ */ t("span", { className: "min-w-0 truncate", children: c }) : c
+  ] }), g = e ? /* @__PURE__ */ t(
     "span",
     {
       "aria-current": "page",
-      className: d(u, "min-w-0 text-base font-medium text-primary"),
+      className: d(m, "min-w-0 text-base font-medium text-primary"),
       children: l
     }
   ) : n ? /* @__PURE__ */ t(
@@ -80,25 +74,25 @@ const R = r.forwardRef(({ className: o, href: n, isCurrent: e, icon: c, children
     {
       href: n,
       className: d(
-        u,
+        m,
         "font-normal text-muted-foreground transition-colors hover:text-foreground",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm"
       ),
       children: l
     }
-  ) : /* @__PURE__ */ t("span", { className: d(u, "text-muted-foreground"), children: l });
-  return /* @__PURE__ */ v(
+  ) : /* @__PURE__ */ t("span", { className: d(m, "text-muted-foreground"), children: l });
+  return /* @__PURE__ */ x(
     "li",
     {
-      ref: x,
+      ref: p,
       className: d(
         "flex items-center gap-1.5",
         e ? "min-w-0 shrink" : "shrink-0",
-        o
+        a
       ),
       ...f,
       children: [
-        h,
+        g,
         !b && /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "shrink-0 select-none text-border-strong", children: "/" })
       ]
     }

package/components/button.js

@@ -1,12 +1,13 @@
 "use client";
-import { jsxs as t, jsx as m } from "react/jsx-runtime";
-import * as p from "react";
-import { cva as u } from "class-variance-authority";
-import { cn as n } from "../lib/cn.js";
-import { Spinner as v } from "./spinner.js";
-const f = u(
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import * as u from "react";
+import { cva as v } from "class-variance-authority";
+import { cn as i } from "../lib/cn.js";
+import { IconHoverFillContext as f } from "../lib/icons.js";
+import { Spinner as h } from "./spinner.js";
+const x = v(
   [
-    "relative inline-flex h-8 items-center justify-center gap-2 whitespace-nowrap",
+    "relative inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "cursor-pointer text-m font-medium select-none",
     "rounded-md border border-transparent",
     "transition-[background,border,color,box-shadow,transform] duration-150 ease-out motion-reduce:transition-none",
@@ -21,88 +22,97 @@ const f = u(
   {
     variants: {
       variant: {
-        solid: "bg-action-primary text-action-primary-foreground shadow-[var(--inner-glow-cta)] enabled:hover:bg-action-primary-hover enabled:active:bg-action-primary-hover",
+        solid: "bg-action-primary text-action-primary-foreground enabled:hover:bg-action-primary-hover enabled:active:bg-action-primary-hover",
         secondary: "border-action-primary bg-transparent text-action-primary-text shadow-none enabled:hover:bg-action-primary-soft enabled:active:bg-action-primary-soft",
         outline: "border-border bg-transparent text-foreground enabled:hover:border-action-primary enabled:hover:bg-action-primary-soft enabled:hover:text-action-primary-text enabled:active:border-action-primary enabled:active:bg-action-primary-soft enabled:active:text-action-primary-text",
-        ghost: "bg-transparent text-foreground enabled:hover:bg-action-primary-soft enabled:hover:text-action-primary-text enabled:active:bg-action-primary-soft enabled:active:text-action-primary-text",
-        link: "bg-transparent text-foreground underline-offset-4 enabled:hover:bg-action-primary-soft enabled:hover:text-action-primary-text enabled:hover:underline enabled:active:bg-action-primary-soft enabled:active:text-action-primary-text active:scale-none",
-        danger: "bg-danger text-danger-foreground shadow-[var(--inner-glow-cta)] enabled:hover:bg-danger/90 enabled:active:bg-danger/90 focus-visible:ring-danger/40"
+        // Ghost answers hover with a WG12 outline and no fill; the label stays neutral.
+        ghost: "bg-transparent text-foreground enabled:hover:border-foreground enabled:active:border-foreground",
+        // Link only recolours its label on hover — no fill, no underline.
+        link: "bg-transparent text-foreground enabled:hover:text-action-primary-text enabled:active:text-action-primary-text active:scale-none",
+        danger: "bg-danger text-danger-foreground enabled:hover:bg-danger/90 enabled:active:bg-danger/90 focus-visible:ring-danger/40"
       },
       size: {
-        xs: "rounded-sm px-2.5 [&_svg]:size-3.5",
-        sm: "rounded-sm px-3 [&_svg]:size-4",
-        md: "rounded-md px-3.5 [&_svg]:size-4",
-        lg: "rounded-md px-4 [&_svg]:size-5",
-        icon: "w-9 rounded-md [&_svg]:size-4",
-        "icon-sm": "w-8 rounded-sm [&_svg]:size-4",
-        "icon-xs": "w-7 rounded-sm [&_svg]:size-4"
+        // Each size has its own height; the 14px Medium label never changes.
+        xs: "h-6 rounded-sm px-2 [&_svg]:size-3.5",
+        sm: "h-7 rounded-sm px-3 [&_svg]:size-4",
+        md: "h-8 rounded-md px-3.5 [&_svg]:size-4",
+        lg: "h-10 rounded-md px-5 [&_svg]:size-5",
+        icon: "h-8 w-9 rounded-md [&_svg]:size-4",
+        "icon-sm": "h-8 w-8 rounded-sm [&_svg]:size-4",
+        "icon-xs": "h-8 w-7 rounded-sm [&_svg]:size-4"
       }
     },
     defaultVariants: { variant: "solid", size: "md" }
   }
-), x = {
+), y = {
   solid: "disabled:border-transparent disabled:bg-action-primary disabled:text-action-primary-foreground disabled:shadow-none",
   secondary: "disabled:border-action-primary disabled:bg-transparent disabled:text-action-primary-text disabled:shadow-none",
   outline: "disabled:border-border disabled:bg-transparent disabled:text-foreground disabled:shadow-none",
   ghost: "disabled:border-transparent disabled:bg-transparent disabled:text-foreground disabled:shadow-none",
   link: "disabled:border-transparent disabled:bg-transparent disabled:text-foreground disabled:shadow-none",
   danger: "disabled:border-transparent disabled:bg-danger disabled:text-danger-foreground disabled:shadow-none"
-}, y = p.forwardRef(
+}, w = u.forwardRef(
   ({
-    className: o,
-    variant: r,
-    size: i,
-    isLoading: e = !1,
-    startContent: d,
-    endContent: s,
-    fullWidth: b,
-    disabled: a,
-    children: l,
-    ...c
-  }, g) => /* @__PURE__ */ t(
-    "button",
-    {
-      ref: g,
-      disabled: a || e,
-      "aria-busy": e || void 0,
-      "data-loading": e || void 0,
-      className: n(
-        f({ variant: r, size: i }),
-        b && "w-full",
-        e ? x[r ?? "solid"] : a && "opacity-30",
-        o
-      ),
-      ...c,
-      children: [
-        e && /* @__PURE__ */ m(
-          v,
-          {
-            variant: "action",
-            size: "sm",
-            className: "absolute",
-            "aria-hidden": !0
-          }
+    className: s,
+    variant: e,
+    size: t,
+    isLoading: r = !1,
+    startContent: b,
+    endContent: l,
+    fullWidth: c,
+    disabled: n,
+    children: g,
+    ...p
+  }, m) => {
+    const a = typeof t == "string" && t.startsWith("icon") && (e === "ghost" || e === "outline" || e === "link");
+    return /* @__PURE__ */ o(f.Provider, { value: a, children: /* @__PURE__ */ d(
+      "button",
+      {
+        ref: m,
+        disabled: n || r,
+        "aria-busy": r || void 0,
+        "data-loading": r || void 0,
+        "data-icon-hover-fill": a || void 0,
+        className: i(
+          x({ variant: e, size: t }),
+          a && "enabled:hover:bg-transparent enabled:active:bg-transparent enabled:hover:text-action-primary enabled:active:text-action-primary",
+          a && e === "ghost" && "enabled:hover:border-transparent enabled:active:border-transparent",
+          c && "w-full",
+          r ? y[e ?? "solid"] : n && "opacity-30",
+          s
         ),
-        /* @__PURE__ */ t(
-          "span",
-          {
-            className: n(
-              "inline-flex items-center gap-1.5",
-              e && "opacity-0"
-            ),
-            children: [
-              d,
-              l,
-              s
-            ]
-          }
-        )
-      ]
-    }
-  )
+        ...p,
+        children: [
+          r && /* @__PURE__ */ o(
+            h,
+            {
+              variant: "action",
+              size: "sm",
+              className: "absolute",
+              "aria-hidden": !0
+            }
+          ),
+          /* @__PURE__ */ d(
+            "span",
+            {
+              className: i(
+                "inline-flex items-center gap-1.5",
+                r && "opacity-0"
+              ),
+              children: [
+                b,
+                g,
+                l
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
 );
-y.displayName = "Button";
+w.displayName = "Button";
 export {
-  y as Button,
-  f as buttonVariants
+  w as Button,
+  x as buttonVariants
 };

package/components/card.js

@@ -6,7 +6,7 @@ const l = d.forwardRef(
   ({ className: r, isHoverable: a, isPressable: e, children: s, ...n }, i) => {
     const c = o(
       "bg-card text-card-foreground rounded-xl",
-      (e || a) && "shadow-elevation transition-[box-shadow,transform] duration-150 ease-out motion-reduce:transition-none",
+      (e || a) && "transition-[box-shadow,transform] duration-150 ease-out motion-reduce:transition-none",
       a && "hover:-translate-y-0.5",
       r
     );