@actioneer/ads 0.5.9 → 0.7.0

package/components/breadcrumbs.js

@@ -1,124 +1,111 @@
 "use client";
-import { jsxs as h, jsx as e, Fragment as B } from "react/jsx-runtime";
-import * as t from "react";
-import { ArrowLeft as y } from "../lib/icons.js";
-import { cn as c } from "../lib/cn.js";
-const w = t.createContext({
+import { jsxs as v, 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
-}), C = t.createContext(0);
-function R(s) {
-  let n = (s == null ? void 0 : s.parentElement) ?? null;
+}), w = r.createContext(0);
+function B(o) {
+  let n = (o == null ? void 0 : o.parentElement) ?? null;
   for (; n; ) {
-    const r = getComputedStyle(n).overflowY;
-    if (r === "auto" || r === "scroll") return n;
+    const e = getComputedStyle(n).overflowY;
+    if (e === "auto" || e === "scroll") return n;
     n = n.parentElement;
   }
   return null;
 }
-const z = t.forwardRef(
+const C = r.forwardRef(
   ({
-    className: s,
+    className: o,
     children: n,
-    sticky: r,
-    onBack: u,
-    backLabel: x = "Back",
-    actions: m,
-    center: f,
-    meta: b,
-    ...v
-  }, l) => {
-    const a = t.Children.toArray(n), i = t.useRef(null), p = t.useCallback(
-      (o) => {
-        i.current = o, typeof l == "function" ? l(o) : l && (l.current = o);
+    sticky: e,
+    actions: c,
+    center: i,
+    meta: f,
+    ...x
+  }, a) => {
+    const p = r.Children.toArray(n), b = r.useRef(null), u = r.useCallback(
+      (s) => {
+        b.current = s, typeof a == "function" ? a(s) : a && (a.current = s);
       },
-      [l]
-    ), [N, k] = t.useState(!1);
-    return t.useEffect(() => {
-      if (!r) return;
-      const o = R(i.current), d = o ?? window, g = () => k((o ? o.scrollTop : window.scrollY) > 2);
-      return g(), d.addEventListener("scroll", g, { passive: !0 }), () => d.removeEventListener("scroll", g);
-    }, [r]), /* @__PURE__ */ h(
+      [a]
+    ), [l, h] = 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(
       "nav",
       {
-        ref: p,
+        ref: u,
         "aria-label": "Breadcrumb",
-        "data-stuck": r ? N ? "true" : "false" : void 0,
-        className: c(
+        "data-stuck": e ? l ? "true" : "false" : void 0,
+        className: d(
           "relative flex w-full items-center",
-          r && "sticky top-0 z-40 bg-background transition-[border-color] duration-150 ease-out motion-reduce:transition-none",
+          e && "sticky top-0 z-40 bg-card transition-[border-color] duration-150 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 && (N ? "border-b border-border" : "border-b border-transparent"),
-          s
+          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
         ),
-        ...v,
+        ...x,
         children: [
-          u && /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              onClick: u,
-              "aria-label": x,
-              className: c(
-                "mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded-sm 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(y, { "aria-hidden": !0 })
-            }
-          ),
-          /* @__PURE__ */ e("ol", { className: "flex min-w-0 items-center gap-1.5 text-base", children: /* @__PURE__ */ e(w.Provider, { value: { count: a.length }, children: a.map((o, d) => /* @__PURE__ */ e(C.Provider, { value: d, children: o }, d)) }) }),
-          b && /* @__PURE__ */ e("div", { className: "ml-4 flex min-w-0 shrink items-center gap-3 text-xs text-muted-foreground", children: b }),
-          f && /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 items-center", children: f }),
-          m && /* @__PURE__ */ e("div", { className: "ml-auto flex shrink-0 items-center gap-2 pl-4", children: m })
+          /* @__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 })
         ]
       }
     );
   }
 );
-z.displayName = "Breadcrumbs";
-const E = t.forwardRef(({ className: s, href: n, isCurrent: r, icon: u, children: x, ...m }, f) => {
-  const { count: b } = t.useContext(w), l = t.useContext(C) === b - 1, a = "inline-flex items-center gap-1.5", i = /* @__PURE__ */ h(B, { children: [
-    u && /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "flex shrink-0 items-center [&_svg]:size-4", children: u }),
-    x
-  ] }), p = r ? /* @__PURE__ */ e(
+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(
     "span",
     {
       "aria-current": "page",
-      className: c(a, "font-normal text-primary"),
-      children: i
+      className: d(u, "min-w-0 text-base font-medium text-primary"),
+      children: l
     }
-  ) : n ? /* @__PURE__ */ e(
+  ) : n ? /* @__PURE__ */ t(
     "a",
     {
       href: n,
-      className: c(
-        a,
+      className: d(
+        u,
         "font-normal text-muted-foreground transition-colors hover:text-foreground",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm"
       ),
-      children: i
+      children: l
     }
-  ) : /* @__PURE__ */ e("span", { className: c(a, "text-muted-foreground"), children: i });
-  return /* @__PURE__ */ h(
+  ) : /* @__PURE__ */ t("span", { className: d(u, "text-muted-foreground"), children: l });
+  return /* @__PURE__ */ v(
     "li",
     {
-      ref: f,
-      className: c("flex items-center gap-1.5", s),
-      ...m,
+      ref: x,
+      className: d(
+        "flex items-center gap-1.5",
+        e ? "min-w-0 shrink" : "shrink-0",
+        o
+      ),
+      ...f,
       children: [
-        p,
-        !l && /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "shrink-0 select-none text-border-strong", children: "/" })
+        h,
+        !b && /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "shrink-0 select-none text-border-strong", children: "/" })
       ]
     }
   );
 });
-E.displayName = "BreadcrumbItem";
+R.displayName = "BreadcrumbItem";
 export {
-  E as BreadcrumbItem,
-  z as Breadcrumbs
+  R as BreadcrumbItem,
+  C as Breadcrumbs
 };

package/components/button.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 export declare const buttonVariants: (props?: ({
-    variant?: "danger" | "soft" | "outline" | "link" | "solid" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "danger" | "outline" | "solid" | "secondary" | "ghost" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/components/button.js

@@ -1,75 +1,81 @@
 "use client";
-import { jsxs as r, jsx as m } from "react/jsx-runtime";
-import * as b from "react";
-import { cva as v } from "class-variance-authority";
+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 f } from "./spinner.js";
-const p = v(
+import { Spinner as v } from "./spinner.js";
+const f = u(
   [
-    "relative inline-flex items-center justify-center gap-2 whitespace-nowrap",
-    "font-normal select-none",
+    "relative inline-flex h-8 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",
-    "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
     // Press feedback: the button visibly answers the press (guide: any
     // pressable element scales down on :active). Movement is dropped under
     // reduced-motion; color/opacity feedback stays.
     "active:scale-[0.97] motion-reduce:active:scale-100",
-    "disabled:pointer-events-none",
+    "disabled:cursor-default",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
   ],
   {
     variants: {
       variant: {
-        solid: "bg-brand text-brand-foreground shadow-[var(--inner-glow-cta)] hover:bg-brand-hover",
-        secondary: "bg-fill text-fill-foreground shadow-[var(--inner-glow-fill)] hover:bg-muted",
-        outline: "border-border bg-transparent text-foreground hover:border-border-strong hover:bg-muted",
-        ghost: "bg-transparent text-foreground hover:bg-muted",
-        soft: "bg-muted text-foreground shadow-[var(--inner-glow-fill)] hover:bg-accent",
-        link: "bg-transparent text-foreground underline-offset-4 hover:underline active:scale-none",
-        danger: "bg-danger text-danger-foreground hover:bg-danger/90 focus-visible:ring-danger/40"
+        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",
+        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"
       },
       size: {
-        xs: "h-7 rounded-sm px-2.5 text-xs [&_svg]:size-3.5",
-        sm: "h-8 rounded-sm px-3 text-xs [&_svg]:size-4",
-        md: "h-10 rounded-md px-4 text-xs [&_svg]:size-4",
-        lg: "h-11 rounded-md px-5 text-base [&_svg]:size-5",
-        icon: "size-10 rounded-md [&_svg]:size-4",
-        "icon-sm": "size-8 rounded-sm [&_svg]:size-4",
-        "icon-xs": "size-7 rounded-sm [&_svg]:size-4"
+        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"
       }
     },
     defaultVariants: { variant: "solid", size: "md" }
   }
-), x = b.forwardRef(
+), x = {
+  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(
   ({
     className: o,
-    variant: t,
-    size: s,
+    variant: r,
+    size: i,
     isLoading: e = !1,
-    startContent: i,
-    endContent: a,
-    fullWidth: d,
-    disabled: l,
-    children: g,
-    ...u
-  }, c) => /* @__PURE__ */ r(
+    startContent: d,
+    endContent: s,
+    fullWidth: b,
+    disabled: a,
+    children: l,
+    ...c
+  }, g) => /* @__PURE__ */ t(
     "button",
     {
-      ref: c,
-      disabled: l || e,
+      ref: g,
+      disabled: a || e,
       "aria-busy": e || void 0,
+      "data-loading": e || void 0,
       className: n(
-        p({ variant: t, size: s }),
-        d && "w-full",
-        // Real disabled fades; loading keeps the brand color
-        e ? "opacity-100" : "disabled:opacity-50",
+        f({ variant: r, size: i }),
+        b && "w-full",
+        e ? x[r ?? "solid"] : a && "opacity-30",
         o
       ),
-      ...u,
+      ...c,
       children: [
         e && /* @__PURE__ */ m(
-          f,
+          v,
           {
             variant: "action",
             size: "sm",
@@ -77,17 +83,17 @@ const p = v(
             "aria-hidden": !0
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t(
           "span",
           {
             className: n(
-              "inline-flex items-center gap-2",
+              "inline-flex items-center gap-1.5",
               e && "opacity-0"
             ),
             children: [
-              i,
-              g,
-              a
+              d,
+              l,
+              s
             ]
           }
         )
@@ -95,8 +101,8 @@ const p = v(
     }
   )
 );
-x.displayName = "Button";
+y.displayName = "Button";
 export {
-  x as Button,
-  p as buttonVariants
+  y as Button,
+  f as buttonVariants
 };

package/components/card.js

@@ -3,18 +3,19 @@ import { jsx as t } from "react/jsx-runtime";
 import * as d from "react";
 import { cn as o } from "../lib/cn.js";
 const l = d.forwardRef(
-  ({ className: r, isHoverable: e, isPressable: a, children: s, ...n }, i) => {
+  ({ className: r, isHoverable: a, isPressable: e, children: s, ...n }, i) => {
     const c = o(
       "bg-card text-card-foreground rounded-xl",
-      (a || e) && "shadow-elevation transition-[box-shadow,transform] duration-150 ease-out motion-reduce:transition-none",
-      e && "hover:-translate-y-0.5",
+      (e || a) && "shadow-elevation transition-[box-shadow,transform] duration-150 ease-out motion-reduce:transition-none",
+      a && "hover:-translate-y-0.5",
       r
     );
-    return a ? /* @__PURE__ */ t(
+    return e ? /* @__PURE__ */ t(
       "button",
       {
         ref: i,
         type: "button",
+        "data-slot": "card",
         className: o(
           c,
           "w-full text-left cursor-pointer",
@@ -24,50 +25,50 @@ const l = d.forwardRef(
         ...n,
         children: s
       }
-    ) : /* @__PURE__ */ t("div", { ref: i, className: c, ...n, children: s });
+    ) : /* @__PURE__ */ t("div", { ref: i, "data-slot": "card", className: c, ...n, children: s });
   }
 );
 l.displayName = "Card";
-const f = d.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t(
+const f = d.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
   "div",
   {
-    ref: a,
+    ref: e,
     className: o("flex flex-col gap-1 px-5 pt-5", r),
-    ...e
+    ...a
   }
 ));
 f.displayName = "CardHeader";
-const m = d.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t(
+const m = d.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
   "h3",
   {
-    ref: a,
+    ref: e,
     className: o("text-base font-medium leading-none", r),
-    ...e
+    ...a
   }
 ));
 m.displayName = "CardTitle";
-const p = d.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t(
+const p = d.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
   "p",
   {
-    ref: a,
+    ref: e,
     className: o("text-xs text-muted-foreground", r),
-    ...e
+    ...a
   }
 ));
 p.displayName = "CardDescription";
-const u = d.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ t("div", { ref: a, className: o("px-5 py-4", r), ...e }));
+const u = d.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t("div", { ref: e, className: o("px-5 py-4", r), ...a }));
 u.displayName = "CardBody";
 const x = d.forwardRef(
-  ({ className: r, withBorder: e, ...a }, s) => /* @__PURE__ */ t(
+  ({ className: r, withBorder: a, ...e }, s) => /* @__PURE__ */ t(
     "div",
     {
       ref: s,
       className: o(
         "flex items-center px-5 pb-5 pt-4",
-        e && "border-t border-border",
+        a && "border-t border-border",
         r
       ),
-      ...a
+      ...e
     }
   )
 );