@zenpatient-org/healthspan-marketing-ui 0.1.42 → 0.1.43

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

@@ -11,5 +11,5 @@ interface BaseButtonProps {
     suffixIcon?: EIconName;
 }
 export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const Button: React.ForwardRefExoticComponent<BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "className"> & React.RefAttributes<HTMLElement>>;
 export {};

package/dist/components/IconButton/IconButton.d.ts

@@ -10,5 +10,5 @@ interface BaseButtonProps {
     as?: ElementType;
 }
 export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const IconButton: ({ iconName, variant, size, as: Component, disabled, ...props }: Omit<ButtonProps, "children">) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: ({ iconName, variant, size, as: Component, disabled, ...props }: Omit<ButtonProps, "children" | "className">) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Label/index.d.ts

@@ -1,2 +1,2 @@
 export { Label } from './Label';
-export type { LabelColor, LabelProps } from './types';
+export type { LabelColor, LabelProps, LabelSize } from './types';

package/dist/components/Label/types.d.ts

@@ -1,9 +1,7 @@
-import { ReactNode } from 'react';
-
 export type LabelSize = 'sm' | 'lg';
 export type LabelColor = 'black' | 'grey' | 'white' | 'solar' | 'indigo' | 'orchre' | 'alpha-white';
 export type LabelProps = {
-    children: ReactNode;
+    children: string;
     color: LabelColor;
     size?: LabelSize;
     className?: string;

package/dist/components/StepsCarousel/StepsCarousel.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),h=require("../../utils/cn/cn.cjs.js"),g=require("../Label/Label.cjs.js"),C=require("../ProgressButton/ProgressButton.cjs.js"),m=require("../Typography/Typography.cjs.js"),a=require("./stepsCarousel.module.css.cjs.js"),T=({steps:o,colorScheme:n})=>{const[c,b]=r.useState(0),f=r.useRef([]),i=r.useRef(null),u=r.useRef(null),j=r.useCallback(t=>{i.current=t.touches[0].clientX},[]),y=r.useCallback(t=>{u.current=t.touches[0].clientX},[]),d=r.useCallback(t=>{var s;b(t),(s=f.current[t])==null||s.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[]),k=r.useCallback(()=>{if(i.current!==null&&u.current!==null){const t=u.current-i.current,s=50;b(l=>t>s&&l>0?l-1:t<-s&&l<o.length-1?l+1:l)}i.current=null,u.current=null},[o.length]);return e.jsxs("div",{className:a.default.root,"data-scheme":n,children:[e.jsx("div",{className:a.default.stepsContainer,"data-scheme":n,onTouchStart:j,onTouchMove:y,onTouchEnd:k,children:o.map((t,s)=>{const l=c===s;return e.jsxs("button",{ref:p=>{p&&(f.current[s]=p)},className:h.cn(a.default.card,l&&a.default.cardActive),onClick:()=>d(s),type:"button",children:[e.jsx("div",{className:h.cn(a.default.imageWrapper,l&&a.default.imageWrapperActive),children:e.jsx("img",{src:t.image,alt:t.title,className:a.default.image})}),e.jsx("div",{className:a.default.stepLabel,children:l?e.jsxs(e.Fragment,{children:[e.jsxs(g.Label,{size:"lg",className:a.default.desktop,color:n==="dark"?"white":"black",children:["Step ",s+1]}),e.jsxs(g.Label,{size:"sm",className:a.default.mobile,color:n==="dark"?"white":"black",children:["Step ",s+1]})]}):e.jsxs(m.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,className:a.default.labelText,children:["Step ",s+1]})}),e.jsxs("div",{className:a.default.textContainer,children:[e.jsx(m.Typography,{as:"h3",defaultVariant:"headingXs",mobileVariant:"headingXxs",children:t.title}),t.description&&e.jsx(m.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:a.default.cardDescription,children:t.description})]})]},`step-${s}`)})}),e.jsx("div",{className:h.cn(a.default.mobile,a.default.progressButtonContainer),children:e.jsx(C.ProgressButton,{invert:n==="dark",left:{disabled:c<=0,onClick:()=>d(c-1)},right:{disabled:c>=o.length-1,onClick:()=>d(c+1)}})})]})};exports.StepsCarousel=T;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),h=require("../../utils/cn/cn.cjs.js"),g=require("../Label/Label.cjs.js"),C=require("../ProgressButton/ProgressButton.cjs.js"),m=require("../Typography/Typography.cjs.js"),a=require("./stepsCarousel.module.css.cjs.js"),T=({steps:o,colorScheme:n})=>{const[c,b]=r.useState(0),f=r.useRef([]),i=r.useRef(null),u=r.useRef(null),j=r.useCallback(t=>{i.current=t.touches[0].clientX},[]),y=r.useCallback(t=>{u.current=t.touches[0].clientX},[]),d=r.useCallback(t=>{var s;b(t),(s=f.current[t])==null||s.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[]),k=r.useCallback(()=>{if(i.current!==null&&u.current!==null){const t=u.current-i.current,s=50;b(l=>t>s&&l>0?l-1:t<-s&&l<o.length-1?l+1:l)}i.current=null,u.current=null},[o.length]);return e.jsxs("div",{className:a.default.root,"data-scheme":n,children:[e.jsx("div",{className:a.default.stepsContainer,"data-scheme":n,onTouchStart:j,onTouchMove:y,onTouchEnd:k,children:o.map((t,s)=>{const l=c===s;return e.jsxs("button",{ref:p=>{p&&(f.current[s]=p)},className:h.cn(a.default.card,l&&a.default.cardActive),onClick:()=>d(s),type:"button",children:[e.jsx("div",{className:h.cn(a.default.imageWrapper,l&&a.default.imageWrapperActive),children:e.jsx("img",{src:t.image,alt:t.title,className:a.default.image})}),e.jsx("div",{className:a.default.stepLabel,children:l?e.jsxs(e.Fragment,{children:[e.jsx(g.Label,{size:"lg",className:a.default.desktop,color:n==="dark"?"white":"black",children:`Step ${s+1}`}),e.jsx(g.Label,{size:"sm",className:a.default.mobile,color:n==="dark"?"white":"black",children:`Step ${s+1}`})]}):e.jsxs(m.Typography,{defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,className:a.default.labelText,children:["Step ",s+1]})}),e.jsxs("div",{className:a.default.textContainer,children:[e.jsx(m.Typography,{as:"h3",defaultVariant:"headingXs",mobileVariant:"headingXxs",children:t.title}),t.description&&e.jsx(m.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:a.default.cardDescription,children:t.description})]})]},`step-${s}`)})}),e.jsx("div",{className:h.cn(a.default.mobile,a.default.progressButtonContainer),children:e.jsx(C.ProgressButton,{invert:n==="dark",left:{disabled:c<=0,onClick:()=>d(c-1)},right:{disabled:c>=o.length-1,onClick:()=>d(c+1)}})})]})};exports.StepsCarousel=T;

package/dist/components/StepsCarousel/StepsCarousel.es.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsxs as l, jsx as n, Fragment as X } from "react/jsx-runtime";
+import { jsxs as i, jsx as a, Fragment as X } from "react/jsx-runtime";
 import { useState as V, useRef as m, useCallback as u } from "react";
 import { cn as b } from "../../utils/cn/cn.es.js";
 import { Label as k } from "../Label/Label.es.js";
 import { ProgressButton as y } from "../ProgressButton/ProgressButton.es.js";
 import { Typography as p } from "../Typography/Typography.es.js";
 import t from "./stepsCarousel.module.css.es.js";
-const B = ({ steps: s, colorScheme: c }) => {
-  const [i, f] = V(0), g = m([]), o = m(null), d = m(null), v = u((e) => {
+const z = ({ steps: s, colorScheme: l }) => {
+  const [c, f] = V(0), g = m([]), o = m(null), d = m(null), v = u((e) => {
     o.current = e.touches[0].clientX;
   }, []), C = u((e) => {
     d.current = e.touches[0].clientX;
@@ -17,58 +17,52 @@ const B = ({ steps: s, colorScheme: c }) => {
   }, []), T = u(() => {
     if (o.current !== null && d.current !== null) {
       const e = d.current - o.current, r = 50;
-      f((a) => e > r && a > 0 ? a - 1 : e < -r && a < s.length - 1 ? a + 1 : a);
+      f((n) => e > r && n > 0 ? n - 1 : e < -r && n < s.length - 1 ? n + 1 : n);
     }
     o.current = null, d.current = null;
   }, [s.length]);
-  return /* @__PURE__ */ l("div", { className: t.root, "data-scheme": c, children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ i("div", { className: t.root, "data-scheme": l, children: [
+    /* @__PURE__ */ a(
       "div",
       {
         className: t.stepsContainer,
-        "data-scheme": c,
+        "data-scheme": l,
         onTouchStart: v,
         onTouchMove: C,
         onTouchEnd: T,
         children: s.map((e, r) => {
-          const a = i === r;
-          return /* @__PURE__ */ l(
+          const n = c === r;
+          return /* @__PURE__ */ i(
             "button",
             {
               ref: (N) => {
                 N && (g.current[r] = N);
               },
-              className: b(t.card, a && t.cardActive),
+              className: b(t.card, n && t.cardActive),
               onClick: () => h(r),
               type: "button",
               children: [
-                /* @__PURE__ */ n("div", { className: b(t.imageWrapper, a && t.imageWrapperActive), children: /* @__PURE__ */ n("img", { src: e.image, alt: e.title, className: t.image }) }),
-                /* @__PURE__ */ n("div", { className: t.stepLabel, children: a ? /* @__PURE__ */ l(X, { children: [
-                  /* @__PURE__ */ l(
+                /* @__PURE__ */ a("div", { className: b(t.imageWrapper, n && t.imageWrapperActive), children: /* @__PURE__ */ a("img", { src: e.image, alt: e.title, className: t.image }) }),
+                /* @__PURE__ */ a("div", { className: t.stepLabel, children: n ? /* @__PURE__ */ i(X, { children: [
+                  /* @__PURE__ */ a(
                     k,
                     {
                       size: "lg",
                       className: t.desktop,
-                      color: c === "dark" ? "white" : "black",
-                      children: [
-                        "Step ",
-                        r + 1
-                      ]
+                      color: l === "dark" ? "white" : "black",
+                      children: `Step ${r + 1}`
                     }
                   ),
-                  /* @__PURE__ */ l(
+                  /* @__PURE__ */ a(
                     k,
                     {
                       size: "sm",
                       className: t.mobile,
-                      color: c === "dark" ? "white" : "black",
-                      children: [
-                        "Step ",
-                        r + 1
-                      ]
+                      color: l === "dark" ? "white" : "black",
+                      children: `Step ${r + 1}`
                     }
                   )
-                ] }) : /* @__PURE__ */ l(
+                ] }) : /* @__PURE__ */ i(
                   p,
                   {
                     defaultVariant: "labelSm",
@@ -81,9 +75,9 @@ const B = ({ steps: s, colorScheme: c }) => {
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ l("div", { className: t.textContainer, children: [
-                  /* @__PURE__ */ n(p, { as: "h3", defaultVariant: "headingXs", mobileVariant: "headingXxs", children: e.title }),
-                  e.description && /* @__PURE__ */ n(
+                /* @__PURE__ */ i("div", { className: t.textContainer, children: [
+                  /* @__PURE__ */ a(p, { as: "h3", defaultVariant: "headingXs", mobileVariant: "headingXxs", children: e.title }),
+                  e.description && /* @__PURE__ */ a(
                     p,
                     {
                       as: "p",
@@ -101,22 +95,22 @@ const B = ({ steps: s, colorScheme: c }) => {
         })
       }
     ),
-    /* @__PURE__ */ n("div", { className: b(t.mobile, t.progressButtonContainer), children: /* @__PURE__ */ n(
+    /* @__PURE__ */ a("div", { className: b(t.mobile, t.progressButtonContainer), children: /* @__PURE__ */ a(
       y,
       {
-        invert: c === "dark",
+        invert: l === "dark",
         left: {
-          disabled: i <= 0,
-          onClick: () => h(i - 1)
+          disabled: c <= 0,
+          onClick: () => h(c - 1)
         },
         right: {
-          disabled: i >= s.length - 1,
-          onClick: () => h(i + 1)
+          disabled: c >= s.length - 1,
+          onClick: () => h(c + 1)
         }
       }
     ) })
   ] });
 };
 export {
-  B as StepsCarousel
+  z as StepsCarousel
 };

package/dist/components/Tag/Tag.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../styles/typography.module.css.cjs.js"),m=require("../../utils/cn/cn.cjs.js"),s=require("../Icon/Icon.cjs.js"),t=require("./tag.module.css.cjs.js"),g={md:l.default.labelMd,lg:l.default.labelLg},j=({value:r,children:o,active:d,disabled:u,size:a="md",prefixIcon:n,suffixIcon:c,onClick:i})=>e.jsx("button",{className:m.cn(t.default.tag,g[a],{[t.default.active]:d},t.default[a]),disabled:u,onClick:()=>i(r),children:e.jsxs("div",{className:t.default.content,children:[n&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(s.Icon,{name:n})}),e.jsx("p",{children:o}),c&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(s.Icon,{name:c})})]})});exports.Tag=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../styles/typography.module.css.cjs.js"),m=require("../../utils/cn/cn.cjs.js"),d=require("../Icon/Icon.cjs.js"),t=require("./tag.module.css.cjs.js"),g={md:l.default.labelMd,lg:l.default.labelLg},j=({value:n,children:u,active:o,disabled:i,size:s="md",prefixIcon:c,suffixIcon:r,onClick:a})=>e.jsx("button",{className:m.cn(t.default.tag,g[s],{[t.default.active]:o},t.default[s]),disabled:i,onClick:()=>n&&(a==null?void 0:a(n)),children:e.jsxs("div",{className:t.default.content,children:[c&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(d.Icon,{name:c})}),e.jsx("p",{children:u}),r&&e.jsx("div",{className:t.default.iconWrap,children:e.jsx(d.Icon,{name:r})})]})});exports.Tag=j;

package/dist/components/Tag/Tag.d.ts

@@ -3,14 +3,14 @@ import { EIconName } from '../Icon';
 
 type Props = {
     children: ReactNode;
-    value: string;
+    value?: string;
     active?: boolean;
     size?: 'md' | 'lg';
     disabled?: boolean;
     prefixIcon?: EIconName;
     suffixIcon?: EIconName;
     iconPosition?: 'left' | 'right';
-    onClick: (value: string) => void;
+    onClick?: (value: string) => void;
 };
 export declare const Tag: ({ value, children, active, disabled, size, prefixIcon, suffixIcon, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tag/Tag.es.js

@@ -1,21 +1,21 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import c from "../../styles/typography.module.css.es.js";
 import { cn as g } from "../../utils/cn/cn.es.js";
-import { Icon as e } from "../Icon/Icon.es.js";
-import a from "./tag.module.css.es.js";
+import { Icon as n } from "../Icon/Icon.es.js";
+import m from "./tag.module.css.es.js";
 const h = {
   md: c.labelMd,
   lg: c.labelLg
-}, f = ({ value: l, children: n, active: i, disabled: s, size: m = "md", prefixIcon: o, suffixIcon: t, onClick: d }) => /* @__PURE__ */ r(
+}, f = ({ value: t, children: d, active: l, disabled: p, size: e = "md", prefixIcon: o, suffixIcon: s, onClick: a }) => /* @__PURE__ */ r(
   "button",
   {
-    className: g(a.tag, h[m], { [a.active]: i }, a[m]),
-    disabled: s,
-    onClick: () => d(l),
-    children: /* @__PURE__ */ p("div", { className: a.content, children: [
-      o && /* @__PURE__ */ r("div", { className: a.iconWrap, children: /* @__PURE__ */ r(e, { name: o }) }),
-      /* @__PURE__ */ r("p", { children: n }),
-      t && /* @__PURE__ */ r("div", { className: a.iconWrap, children: /* @__PURE__ */ r(e, { name: t }) })
+    className: g(m.tag, h[e], { [m.active]: l }, m[e]),
+    disabled: p,
+    onClick: () => t && (a == null ? void 0 : a(t)),
+    children: /* @__PURE__ */ i("div", { className: m.content, children: [
+      o && /* @__PURE__ */ r("div", { className: m.iconWrap, children: /* @__PURE__ */ r(n, { name: o }) }),
+      /* @__PURE__ */ r("p", { children: d }),
+      s && /* @__PURE__ */ r("div", { className: m.iconWrap, children: /* @__PURE__ */ r(n, { name: s }) })
     ] })
   }
 );