@zenpatient-org/healthspan-marketing-ui 0.2.72 → 0.2.73

package/dist/components/Button/Button.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("react"),B=require("../../utils/cn/cn.cjs.js"),n=require("../../src/components/Button/button.module.css"),r=require("../Icon/Icon.cjs.js"),d=N.forwardRef(({variant:u="primary",size:m="md",as:j="button",disabled:s=!1,children:v,prefixIcon:c,suffixIcon:a,analyticsProps:i,...t},b)=>{const x=n[u]||"",y=n[m]||"",C=s?n.disabled:"",h=q=>{var o,l;i&&((o=window.eventBus)==null||o.emit("analytics",i)),(l=t.onClick)==null||l.call(t,q)};return e.jsx(j,{ref:b,...t,className:B.cn(n.button,x,y,C),disabled:s,onClick:h,"data-type":"button",children:e.jsxs("div",{className:n.content,children:[c&&e.jsx("div",{className:n.iconWrap,children:e.jsx(r.Icon,{name:c})}),e.jsx("div",{children:v}),a&&e.jsx("div",{className:n.iconWrap,children:e.jsx(r.Icon,{name:a})})]})})});d.displayName="Button";exports.Button=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),B=require("react"),_=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/Button/button.module.css"),d=require("../Icon/Icon.cjs.js"),r=B.forwardRef(({variant:u="primary",size:m="md",as:j="button",disabled:s=!1,children:v,prefixIcon:c,suffixIcon:a,analyticsProps:i,loading:b,...t},x)=>{const y=e[u]||"",C=e[m]||"",h=s?e.disabled:"",q=N=>{var o,l;i&&((o=window.eventBus)==null||o.emit("analytics",i)),(l=t.onClick)==null||l.call(t,N)};return n.jsx(j,{ref:x,...t,className:_.cn(e.button,y,C,h),disabled:s,onClick:q,"data-type":"button","data-loading":b,children:n.jsxs("div",{className:e.content,children:[c&&n.jsx("div",{className:e.iconWrap,children:n.jsx(d.Icon,{name:c})}),n.jsx("div",{children:v}),a&&n.jsx("div",{className:e.iconWrap,children:n.jsx(d.Icon,{name:a})})]})})});r.displayName="Button";exports.Button=r;

package/dist/components/Button/Button.d.ts

@@ -11,6 +11,7 @@ interface BaseButtonProps {
     prefixIcon?: EIconName;
     suffixIcon?: EIconName;
     analyticsProps?: TAnalyticsEvent;
+    loading?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
 }
 export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;

package/dist/components/Button/Button.es.js

@@ -1,44 +1,46 @@
 "use client";
-import { jsx as n, jsxs as k } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { cn as B } from "../../utils/cn/cn.es.js";
+import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import { forwardRef as B } from "react";
+import { cn as j } from "../../utils/cn/cn.es.js";
 import t from "../../components/Button/button.module.css";
 import { Icon as m } from "../Icon/Icon.es.js";
-const j = w(
+const W = B(
   ({
-    variant: r = "primary",
-    size: d = "md",
+    variant: d = "primary",
+    size: r = "md",
     as: u = "button",
-    disabled: e = !1,
+    disabled: i = !1,
     children: f,
-    prefixIcon: i,
+    prefixIcon: e,
     suffixIcon: s,
     analyticsProps: o,
-    ...a
-  }, v) => {
-    const C = t[r] || "", h = t[d] || "", N = e ? t.disabled : "", b = (y) => {
-      var c, l;
-      o && ((c = window.eventBus) == null || c.emit("analytics", o)), (l = a.onClick) == null || l.call(a, y);
+    loading: v,
+    ...n
+  }, C) => {
+    const h = t[d] || "", N = t[r] || "", b = i ? t.disabled : "", y = (k) => {
+      var l, c;
+      o && ((l = window.eventBus) == null || l.emit("analytics", o)), (c = n.onClick) == null || c.call(n, k);
     };
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ a(
       u,
       {
-        ref: v,
-        ...a,
-        className: B(t.button, C, h, N),
-        disabled: e,
-        onClick: b,
+        ref: C,
+        ...n,
+        className: j(t.button, h, N, b),
+        disabled: i,
+        onClick: y,
         "data-type": "button",
-        children: /* @__PURE__ */ k("div", { className: t.content, children: [
-          i && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: i }) }),
-          /* @__PURE__ */ n("div", { children: f }),
-          s && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: s }) })
+        "data-loading": v,
+        children: /* @__PURE__ */ w("div", { className: t.content, children: [
+          e && /* @__PURE__ */ a("div", { className: t.iconWrap, children: /* @__PURE__ */ a(m, { name: e }) }),
+          /* @__PURE__ */ a("div", { children: f }),
+          s && /* @__PURE__ */ a("div", { className: t.iconWrap, children: /* @__PURE__ */ a(m, { name: s }) })
         ] })
       }
     );
   }
 );
-j.displayName = "Button";
+W.displayName = "Button";
 export {
-  j as Button
+  W as Button
 };

package/dist/components/Button/button.module.css

@@ -1,4 +1,5 @@
 .button {
+    position: relative;
     text-align: center;
     display: inline-flex;
     align-items: center;
@@ -18,6 +19,7 @@
     text-transform: uppercase;
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-xs);
+    --spinner-color: var(--color-text-primary);
 }
 
 .button:hover {
@@ -27,50 +29,59 @@
 .primary {
     background-color: var(--color-bg-fill-primary);
     color: var(--color-text-primary-inverted);
+    --spinner-color: var(--color-text-primary-inverted);
 }
 
 .primary-invert {
     background-color: var(--color-bg-fill-brand-inverse);
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .secondary {
     background-color: var(--color-bg-fill-brand-solar);
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .tertiary {
     background-color: var(--color-bg-fill-brand-indigo);
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .muted {
     background-color: transparent;
     color: var(--color-text-primary);
     border-color: var(--border-color-alpha-black-20);
+    --spinner-color: var(--color-text-primary);
 }
 
 .muted:hover {
     background-color: var(--color-bg-fill-primary);
     border-color: var(--color-bg-fill-primary);
     color: var(--color-text-primary-inverted);
+    --spinner-color: var(--color-text-primary-inverted);
 }
 
 .muted-invert {
     background-color: transparent;
     color: var(--color-text-primary-inverted);
     border-color: var(--border-color-invert);
+    --spinner-color: var(--color-text-primary-inverted);
 }
 
 .muted-invert:hover {
     background-color: var(--color-bg-fill-brand-inverse);
     border-color: var(--border-color-invert);
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .ghost {
     background-color: transparent;
     color: var(--color-text-primary);
+    --spinner-color: var(--color-text-primary);
 }
 
 .xs {
@@ -167,3 +178,39 @@
     height: 16px;
     max-height: 16px;
 }
+
+.button[data-loading='true'] {
+    &, &:disabled, &:focus {
+        color: transparent;
+        pointer-events: none;
+        cursor: default;
+    }
+
+    &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: block;
+        width: 1.5em;
+        height: 1.5em;
+        border-radius: 50%;
+        border: var(--border-width-md) solid var(--spinner-color);
+        border-bottom-color: transparent;
+        opacity: 0.6;
+        animation: button-loading-spinner 1s ease infinite;
+        margin: auto;
+    }
+}
+
+@keyframes button-loading-spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.2.72",
+    "version": "0.2.73",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",