@actioneer/ads 0.6.0 → 0.8.0

package/components/button.js

@@ -1,75 +1,81 @@
 "use client";
-import { jsxs as r, jsx as m } from "react/jsx-runtime";
-import * as v from "react";
-import { cva as b } 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 = b(
+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-action-primary text-action-primary-foreground shadow-[var(--inner-glow-cta)] hover:bg-action-primary-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 = v.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: c,
-    ...g
-  }, u) => /* @__PURE__ */ r(
+    startContent: d,
+    endContent: s,
+    fullWidth: b,
+    disabled: a,
+    children: l,
+    ...c
+  }, g) => /* @__PURE__ */ t(
     "button",
     {
-      ref: u,
-      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
       ),
-      ...g,
+      ...c,
       children: [
         e && /* @__PURE__ */ m(
-          f,
+          v,
           {
             variant: "action",
             size: "sm",
@@ -77,17 +83,17 @@ const p = b(
             "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,
-              c,
-              a
+              d,
+              l,
+              s
             ]
           }
         )
@@ -95,8 +101,8 @@ const p = b(
     }
   )
 );
-x.displayName = "Button";
+y.displayName = "Button";
 export {
-  x as Button,
-  p as buttonVariants
+  y as Button,
+  f as buttonVariants
 };