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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/Button/Button.cjs.js +1 -1
  2. package/dist/components/Button/Button.d.ts +1 -0
  3. package/dist/components/Button/Button.es.js +27 -25
  4. package/dist/components/Button/button.module.css +47 -0
  5. package/dist/components/Label/Label.cjs.js +1 -1
  6. package/dist/components/Label/Label.es.js +7 -6
  7. package/dist/components/Label/label.module.css +86 -11
  8. package/dist/components/Label/types.d.ts +2 -2
  9. package/package.json +1 -1
package/dist/components/Button/Button.cjs.js CHANGED
@@ -1 +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;
1
+ "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 CHANGED
@@ -11,6 +11,7 @@ interface BaseButtonProps {
11
11
  prefixIcon?: EIconName;
12
12
  suffixIcon?: EIconName;
13
13
  analyticsProps?: TAnalyticsEvent;
14
+ loading?: boolean;
14
15
  onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
15
16
  }
16
17
  export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;
package/dist/components/Button/Button.es.js CHANGED
@@ -1,44 +1,46 @@
1
1
  "use client";
2
- import { jsx as n, jsxs as k } from "react/jsx-runtime";
3
- import { forwardRef as w } from "react";
4
- import { cn as B } from "../../utils/cn/cn.es.js";
2
+ import { jsx as a, jsxs as w } from "react/jsx-runtime";
3
+ import { forwardRef as B } from "react";
4
+ import { cn as j } from "../../utils/cn/cn.es.js";
5
5
  import t from "../../components/Button/button.module.css";
6
6
  import { Icon as m } from "../Icon/Icon.es.js";
7
- const j = w(
7
+ const W = B(
8
8
  ({
9
- variant: r = "primary",
10
- size: d = "md",
9
+ variant: d = "primary",
10
+ size: r = "md",
11
11
  as: u = "button",
12
- disabled: e = !1,
12
+ disabled: i = !1,
13
13
  children: f,
14
- prefixIcon: i,
14
+ prefixIcon: e,
15
15
  suffixIcon: s,
16
16
  analyticsProps: o,
17
- ...a
18
- }, v) => {
19
- const C = t[r] || "", h = t[d] || "", N = e ? t.disabled : "", b = (y) => {
20
- var c, l;
21
- o && ((c = window.eventBus) == null || c.emit("analytics", o)), (l = a.onClick) == null || l.call(a, y);
17
+ loading: v,
18
+ ...n
19
+ }, C) => {
20
+ const h = t[d] || "", N = t[r] || "", b = i ? t.disabled : "", y = (k) => {
21
+ var l, c;
22
+ o && ((l = window.eventBus) == null || l.emit("analytics", o)), (c = n.onClick) == null || c.call(n, k);
22
23
  };
23
- return /* @__PURE__ */ n(
24
+ return /* @__PURE__ */ a(
24
25
  u,
25
26
  {
26
- ref: v,
27
- ...a,
28
- className: B(t.button, C, h, N),
29
- disabled: e,
30
- onClick: b,
27
+ ref: C,
28
+ ...n,
29
+ className: j(t.button, h, N, b),
30
+ disabled: i,
31
+ onClick: y,
31
32
  "data-type": "button",
32
- children: /* @__PURE__ */ k("div", { className: t.content, children: [
33
- i && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: i }) }),
34
- /* @__PURE__ */ n("div", { children: f }),
35
- s && /* @__PURE__ */ n("div", { className: t.iconWrap, children: /* @__PURE__ */ n(m, { name: s }) })
33
+ "data-loading": v,
34
+ children: /* @__PURE__ */ w("div", { className: t.content, children: [
35
+ e && /* @__PURE__ */ a("div", { className: t.iconWrap, children: /* @__PURE__ */ a(m, { name: e }) }),
36
+ /* @__PURE__ */ a("div", { children: f }),
37
+ s && /* @__PURE__ */ a("div", { className: t.iconWrap, children: /* @__PURE__ */ a(m, { name: s }) })
36
38
  ] })
37
39
  }
38
40
  );
39
41
  }
40
42
  );
41
- j.displayName = "Button";
43
+ W.displayName = "Button";
42
44
  export {
43
- j as Button
45
+ W as Button
44
46
  };
package/dist/components/Button/button.module.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .button {
2
+ position: relative;
2
3
  text-align: center;
3
4
  display: inline-flex;
4
5
  align-items: center;
@@ -18,6 +19,7 @@
18
19
  text-transform: uppercase;
19
20
  font-weight: var(--font-weight-regular);
20
21
  line-height: var(--line-height-xs);
22
+ --spinner-color: var(--color-text-primary);
21
23
  }
22
24
 
23
25
  .button:hover {
@@ -27,50 +29,59 @@
27
29
  .primary {
28
30
  background-color: var(--color-bg-fill-primary);
29
31
  color: var(--color-text-primary-inverted);
32
+ --spinner-color: var(--color-text-primary-inverted);
30
33
  }
31
34
 
32
35
  .primary-invert {
33
36
  background-color: var(--color-bg-fill-brand-inverse);
34
37
  color: var(--color-text-primary);
38
+ --spinner-color: var(--color-text-primary);
35
39
  }
36
40
 
37
41
  .secondary {
38
42
  background-color: var(--color-bg-fill-brand-solar);
39
43
  color: var(--color-text-primary);
44
+ --spinner-color: var(--color-text-primary);
40
45
  }
41
46
 
42
47
  .tertiary {
43
48
  background-color: var(--color-bg-fill-brand-indigo);
44
49
  color: var(--color-text-primary);
50
+ --spinner-color: var(--color-text-primary);
45
51
  }
46
52
 
47
53
  .muted {
48
54
  background-color: transparent;
49
55
  color: var(--color-text-primary);
50
56
  border-color: var(--border-color-alpha-black-20);
57
+ --spinner-color: var(--color-text-primary);
51
58
  }
52
59
 
53
60
  .muted:hover {
54
61
  background-color: var(--color-bg-fill-primary);
55
62
  border-color: var(--color-bg-fill-primary);
56
63
  color: var(--color-text-primary-inverted);
64
+ --spinner-color: var(--color-text-primary-inverted);
57
65
  }
58
66
 
59
67
  .muted-invert {
60
68
  background-color: transparent;
61
69
  color: var(--color-text-primary-inverted);
62
70
  border-color: var(--border-color-invert);
71
+ --spinner-color: var(--color-text-primary-inverted);
63
72
  }
64
73
 
65
74
  .muted-invert:hover {
66
75
  background-color: var(--color-bg-fill-brand-inverse);
67
76
  border-color: var(--border-color-invert);
68
77
  color: var(--color-text-primary);
78
+ --spinner-color: var(--color-text-primary);
69
79
  }
70
80
 
71
81
  .ghost {
72
82
  background-color: transparent;
73
83
  color: var(--color-text-primary);
84
+ --spinner-color: var(--color-text-primary);
74
85
  }
75
86
 
76
87
  .xs {
@@ -167,3 +178,39 @@
167
178
  height: 16px;
168
179
  max-height: 16px;
169
180
  }
181
+
182
+ .button[data-loading='true'] {
183
+ &, &:disabled, &:focus {
184
+ color: transparent;
185
+ pointer-events: none;
186
+ cursor: default;
187
+ }
188
+
189
+ &:after {
190
+ content: "";
191
+ position: absolute;
192
+ top: 0;
193
+ left: 0;
194
+ right: 0;
195
+ bottom: 0;
196
+ display: block;
197
+ width: 1.5em;
198
+ height: 1.5em;
199
+ border-radius: 50%;
200
+ border: var(--border-width-md) solid var(--spinner-color);
201
+ border-bottom-color: transparent;
202
+ opacity: 0.6;
203
+ animation: button-loading-spinner 1s ease infinite;
204
+ margin: auto;
205
+ }
206
+ }
207
+
208
+ @keyframes button-loading-spinner {
209
+ 0% {
210
+ transform: rotate(0deg);
211
+ }
212
+
213
+ 100% {
214
+ transform: rotate(360deg);
215
+ }
216
+ }
package/dist/components/Label/Label.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/Label/label.module.css"),c={sm:e.labelXs,lg:e.labelSm},n=({children:t,color:l,size:s="sm",className:a})=>r.jsx("div",{className:o.cn(e.root,e.labelEmphasis,c[s],a),"data-size":s,"data-color":l,children:t});exports.Label=n;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("../../utils/cn/cn.cjs.js"),e=require("../../src/components/Label/label.module.css"),r={nano:e.labelXs,sm:e.labelXs,lg:e.labelSm},c=({children:l,color:t,size:s="sm",className:a})=>n.jsx("div",{className:o.cn(e.root,e.labelEmphasis,r[s],a),"data-size":s,"data-color":t,children:l});exports.Label=c;
package/dist/components/Label/Label.es.js CHANGED
@@ -2,17 +2,18 @@ import { jsx as r } from "react/jsx-runtime";
2
2
  import { cn as t } from "../../utils/cn/cn.es.js";
3
3
  import o from "../../components/Label/label.module.css";
4
4
  const e = {
5
+ nano: o.labelXs,
5
6
  sm: o.labelXs,
6
7
  lg: o.labelSm
7
- }, S = ({ children: a, color: l, size: s = "sm", className: m }) => /* @__PURE__ */ r(
8
+ }, i = ({ children: l, color: s, size: a = "sm", className: m }) => /* @__PURE__ */ r(
8
9
  "div",
9
10
  {
10
- className: t(o.root, o.labelEmphasis, e[s], m),
11
- "data-size": s,
12
- "data-color": l,
13
- children: a
11
+ className: t(o.root, o.labelEmphasis, e[a], m),
12
+ "data-size": a,
13
+ "data-color": s,
14
+ children: l
14
15
  }
15
16
  );
16
17
  export {
17
- S as Label
18
+ i as Label
18
19
  };
package/dist/components/Label/label.module.css CHANGED
@@ -6,13 +6,20 @@
6
6
  color: var(--color-text-primary);
7
7
  box-sizing: border-box;
8
8
  }
9
+
10
+ .root[data-size='lg'] {
11
+ min-height: 28px;
12
+ padding: var(--spacing-8) var(--spacing-12);
13
+ }
14
+
9
15
  .root[data-size='sm'] {
10
16
  min-height: 24px;
11
17
  padding: var(--spacing-4) var(--spacing-8);
12
18
  }
13
- .root[data-size='lg'] {
14
- min-height: 28px;
15
- padding: var(--spacing-8) var(--spacing-12);
19
+
20
+ .root[data-size='nano'] {
21
+ min-height: 22px;
22
+ padding: var(--spacing-4) var(--spacing-8);
16
23
  }
17
24
 
18
25
  .root[data-color='black'] {
@@ -20,16 +27,21 @@
20
27
  color: var(--color-text-primary-inverted);
21
28
  }
22
29
 
30
+ .root[data-color='white'] {
31
+ background-color: var(--color-bg-fill-brand-inverse);
32
+ }
33
+
23
34
  .root[data-color='grey'] {
24
35
  background-color: var(--color-bg-fill-alpha-black-10);
25
36
  }
26
37
 
27
- .root[data-color='white'] {
28
- background-color: var(--color-bg-fill-brand-inverse);
38
+ .root[data-color='alpha-white'] {
39
+ background-color: var(--color-bg-fill-alpha-white-10);
40
+ color: var(--color-text-primary-inverted);
29
41
  }
30
42
 
31
- .root[data-color='solar'] {
32
- background-color: var(--color-bg-fill-brand-solar);
43
+ .root[data-color='sage'] {
44
+ background-color: var(--color-sage-200);
33
45
  }
34
46
 
35
47
  .root[data-color='indigo'] {
@@ -40,17 +52,80 @@
40
52
  background-color: var(--color-bg-fill-brand-orchre);
41
53
  }
42
54
 
43
- .root[data-color='alpha-white'] {
44
- background-color: var(--color-bg-fill-alpha-white-10);
45
- color: var(--color-text-primary-inverted);
55
+ .root[data-color='solar'] {
56
+ background-color: var(--color-bg-fill-brand-solar);
46
57
  }
47
58
 
48
59
  .root[data-color='lilac'] {
49
60
  background-color: var(--color-bg-fill-brand-lilac);
50
61
  }
51
62
 
63
+ .root[data-color='success'] {
64
+ background-color: var(--color-calm-green-400);
65
+ color: var(--color-text-primary-inverted);
66
+ }
67
+
68
+ .root[data-color='warning'] {
69
+ background-color: var(--color-heal-yellow-400);
70
+ }
71
+
72
+ .root[data-color='danger'] {
73
+ background-color: var(--color-urgent-red-400);
74
+ color: var(--color-text-primary-inverted);
75
+ }
76
+
77
+ .root[data-color='info'] {
78
+ background-color: var(--color-powder-blue-400);
79
+ color: var(--color-text-primary-inverted);
80
+ }
81
+
82
+ .root[data-color='supportive'] {
83
+ background-color: var(--color-cell-pink-400);
84
+ color: var(--color-text-primary-inverted);
85
+ }
86
+
87
+ .root[data-color='indigo-gradient'] {
88
+ background: linear-gradient(
89
+ 276deg,
90
+ #D3D4E0 -5.42%,
91
+ #A8A9C1 8.16%,
92
+ #7A87A6 21.75%,
93
+ #496E8D 35.33%,
94
+ #195675 48.92%,
95
+ #13435B 62.5%,
96
+ #0E3041 76.09%,
97
+ #081D27 89.67%,
98
+ #000 103.26%
99
+ );
100
+ color: var(--color-text-primary-inverted);
101
+ }
102
+
103
+ .root[data-color='ochre-gradient'] {
104
+ background: linear-gradient(
105
+ 72deg,
106
+ #492106 0%,
107
+ #894F27 50%,
108
+ #FBA626 100%
109
+ );
110
+ color: var(--color-text-primary-inverted);
111
+ }
112
+
113
+ .root[data-color='solar-gradient'] {
114
+ background: linear-gradient(
115
+ 280deg,
116
+ #FEF38E -0.68%,
117
+ #CAB602 125.29%
118
+ );
119
+ }
120
+
52
121
  .root[data-color='lilac-gradient'] {
53
- background: linear-gradient(90deg, var(--color-lilac-500) -2.53%, var(--color-lilac-300) 54.58%, var(--color-lilac-100) 94.38%, var(--color-lilac-50) 121.21%);
122
+ background: linear-gradient(
123
+ 90deg,
124
+ var(--color-lilac-500) -2.53%,
125
+ var(--color-lilac-300) 54.58%,
126
+ var(--color-lilac-100) 94.38%,
127
+ var(--color-lilac-50) 121.21%
128
+ );
54
129
  color: var(--color-text-primary-inverted);
55
130
  }
56
131
 
package/dist/components/Label/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export type LabelSize = 'sm' | 'lg';
2
- export type LabelColor = 'black' | 'grey' | 'white' | 'solar' | 'indigo' | 'orchre' | 'alpha-white' | 'lilac' | 'lilac-gradient';
1
+ export type LabelSize = 'nano' | 'sm' | 'lg';
2
+ export type LabelColor = 'black' | 'white' | 'grey' | 'alpha-white' | 'sage' | 'indigo' | 'orchre' | 'solar' | 'lilac' | 'success' | 'warning' | 'danger' | 'info' | 'supportive' | 'indigo-gradient' | 'ochre-gradient' | 'solar-gradient' | 'lilac-gradient';
3
3
  export type LabelProps = {
4
4
  children: string;
5
5
  color: LabelColor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zenpatient-org/healthspan-marketing-ui",
3
- "version": "0.2.71",
3
+ "version": "0.2.73",
4
4
  "description": "Design system",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",