@zenpatient-org/healthspan-marketing-ui 0.1.18 → 0.1.19

package/dist/components/ProgressButton/ProgressButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
+import { default as React, ButtonHTMLAttributes } from 'react';
 import { TOrientation } from './types';
 
 export type PropgressButtonBaseProps = {
@@ -11,4 +11,4 @@ export type ProgressButtonProps = {
     left: ButtonHTMLAttributes<HTMLButtonElement>;
     right: ButtonHTMLAttributes<HTMLButtonElement>;
 };
-export declare const ProgressButton: ({ invert, left, right, }: ProgressButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressButton: ({ invert, left, right }: ProgressButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressButton/ProgressButton.es.js

@@ -4,12 +4,7 @@ import { EIconName as r } from "../Icon/constants.es.js";
 import "react";
 import { Icon as l } from "../Icon/Icon.es.js";
 import o from "./progressButton.module.css.es.js";
-const a = ({
-  orientation: s,
-  icon: i,
-  disabled: e = !1,
-  onClick: c
-}) => /* @__PURE__ */ t.jsx(
+const a = ({ orientation: s, icon: i, disabled: e = !1, onClick: c }) => /* @__PURE__ */ t.jsx(
   "button",
   {
     className: n(o.button, {
@@ -20,41 +15,16 @@ const a = ({
     onClick: c,
     children: /* @__PURE__ */ t.jsx("div", { className: o.iconWrap, children: /* @__PURE__ */ t.jsx(l, { name: i, className: o.icon }) })
   }
-), u = ({
-  invert: s = !1,
-  left: i,
-  right: e
-}) => /* @__PURE__ */ t.jsxs(
+), u = ({ invert: s = !1, left: i, right: e }) => /* @__PURE__ */ t.jsxs(
   "div",
   {
     className: n(o.root, {
       [o.inverted]: s
     }),
     children: [
-      /* @__PURE__ */ t.jsx(
-        a,
-        {
-          orientation: "left",
-          icon: r.ARROW_BACK,
-          disabled: i.disabled,
-          onClick: i.onClick
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        "div",
-        {
-          className: n(o.divider, { [o.inverted]: s })
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        a,
-        {
-          orientation: "right",
-          icon: r.ARROW_FORWARD,
-          disabled: e.disabled,
-          onClick: e.onClick
-        }
-      )
+      /* @__PURE__ */ t.jsx(a, { orientation: "left", icon: r.ARROW_BACK, disabled: i.disabled, onClick: i.onClick }),
+      /* @__PURE__ */ t.jsx("div", { className: n(o.divider, { [o.inverted]: s }) }),
+      /* @__PURE__ */ t.jsx(a, { orientation: "right", icon: r.ARROW_FORWARD, disabled: e.disabled, onClick: e.onClick })
     ]
   }
 );

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

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

package/dist/components/StepsCarousel/StepsCarousel.d.ts

@@ -0,0 +1,13 @@
+import { TColorScheme } from '../../types/common';
+
+export type TStepsCarouselView = Array<{
+    title: string;
+    image: string;
+    description?: string;
+}>;
+type StepsCarouselProps = {
+    steps: TStepsCarouselView;
+    colorScheme: TColorScheme;
+};
+export declare const StepsCarousel: ({ steps, colorScheme }: StepsCarouselProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,71 @@
+import { j as e } from "../../_virtual/jsx-runtime.es.js";
+import { useState as b, useRef as u, useEffect as f } from "react";
+import { cn as o } from "../../utils/cn.es.js";
+import { Label as p } from "../Label/Label.es.js";
+import { ProgressButton as j } from "../ProgressButton/ProgressButton.es.js";
+import { Typography as m } from "../Typography/Typography.es.js";
+import s from "./stepsCarousel.module.css.es.js";
+const y = ({ steps: d, colorScheme: i }) => {
+  const [r, l] = b(0), c = u([]);
+  return f(() => {
+    var a;
+    c.current[r] && ((a = c.current[r]) == null || a.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+      block: "nearest"
+    }));
+  }, [r]), /* @__PURE__ */ e.jsxs("div", { className: s.root, "data-scheme": i, children: [
+    /* @__PURE__ */ e.jsx("div", { className: s.stepsContainer, "data-scheme": i, children: d.map((a, t) => {
+      const n = r === t;
+      return /* @__PURE__ */ e.jsxs(
+        "button",
+        {
+          ref: (h) => {
+            c.current.splice(t, 1, h);
+          },
+          className: o(s.card, n && s.cardActive),
+          onClick: () => l(t),
+          type: "button",
+          children: [
+            /* @__PURE__ */ e.jsx("div", { className: o(s.imageWrapper, n && s.imageWrapperActive), children: /* @__PURE__ */ e.jsx("img", { src: a.image, alt: a.title, className: s.image }) }),
+            /* @__PURE__ */ e.jsx("div", { className: s.stepLabel, children: n ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsxs(p, { size: "lg", className: s.desktop, color: i === "dark" ? "white" : "black", children: [
+                "Step ",
+                t + 1
+              ] }),
+              /* @__PURE__ */ e.jsxs(p, { size: "sm", className: s.mobile, color: i === "dark" ? "white" : "black", children: [
+                "Step ",
+                t + 1
+              ] })
+            ] }) : /* @__PURE__ */ e.jsxs(m, { defaultVariant: "labelSm", mobileVariant: "labelXs", emphasis: !0, className: s.labelText, children: [
+              "Step ",
+              t + 1
+            ] }) }),
+            /* @__PURE__ */ e.jsxs("div", { className: s.textContainer, children: [
+              /* @__PURE__ */ e.jsx(m, { as: "h3", defaultVariant: "headingXs", mobileVariant: "headingXxs", children: a.title }),
+              a.description && /* @__PURE__ */ e.jsx(m, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", className: s.cardDescription, children: a.description })
+            ] })
+          ]
+        },
+        `step-${t}`
+      );
+    }) }),
+    /* @__PURE__ */ e.jsx("div", { className: o(s.mobile, s.progressButtonContainer), children: /* @__PURE__ */ e.jsx(
+      j,
+      {
+        invert: i === "dark",
+        left: {
+          disabled: r <= 0,
+          onClick: () => l((a) => a - 1)
+        },
+        right: {
+          disabled: r >= d.length - 1,
+          onClick: () => l((a) => a + 1)
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  y as StepsCarousel
+};

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

@@ -0,0 +1 @@
+export { StepsCarousel, type TStepsCarouselView } from './StepsCarousel';

package/dist/components/StepsCarousel/stepsCarousel.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="stepsCarousel-module__root___VidW7",t="stepsCarousel-module__stepsContainer___yWhtm",s="stepsCarousel-module__card___16wd3",o="stepsCarousel-module__imageWrapper___WCmbp",_="stepsCarousel-module__image___RY9-R",r="stepsCarousel-module__cardActive___xdGR8",a="stepsCarousel-module__stepLabel___jnL1f",l="stepsCarousel-module__labelText___TC392",n="stepsCarousel-module__textContainer___l--dI",p="stepsCarousel-module__cardDescription___oPSgY",i="stepsCarousel-module__mobile___4s-pE",d="stepsCarousel-module__progressButtonContainer___PdL6N",c="stepsCarousel-module__desktop___awZBc",u={root:e,stepsContainer:t,card:s,imageWrapper:o,image:_,cardActive:r,stepLabel:a,labelText:l,textContainer:n,cardDescription:p,mobile:i,progressButtonContainer:d,desktop:c};exports.card=s;exports.cardActive=r;exports.cardDescription=p;exports.default=u;exports.desktop=c;exports.image=_;exports.imageWrapper=o;exports.labelText=l;exports.mobile=i;exports.progressButtonContainer=d;exports.root=e;exports.stepLabel=a;exports.stepsContainer=t;exports.textContainer=n;

package/dist/components/StepsCarousel/stepsCarousel.module.css.es.js

@@ -0,0 +1,31 @@
+const e = "stepsCarousel-module__root___VidW7", s = "stepsCarousel-module__stepsContainer___yWhtm", t = "stepsCarousel-module__card___16wd3", o = "stepsCarousel-module__imageWrapper___WCmbp", _ = "stepsCarousel-module__image___RY9-R", r = "stepsCarousel-module__cardActive___xdGR8", a = "stepsCarousel-module__stepLabel___jnL1f", l = "stepsCarousel-module__labelText___TC392", n = "stepsCarousel-module__textContainer___l--dI", p = "stepsCarousel-module__cardDescription___oPSgY", d = "stepsCarousel-module__mobile___4s-pE", c = "stepsCarousel-module__progressButtonContainer___PdL6N", u = "stepsCarousel-module__desktop___awZBc", i = {
+  root: e,
+  stepsContainer: s,
+  card: t,
+  imageWrapper: o,
+  image: _,
+  cardActive: r,
+  stepLabel: a,
+  labelText: l,
+  textContainer: n,
+  cardDescription: p,
+  mobile: d,
+  progressButtonContainer: c,
+  desktop: u
+};
+export {
+  t as card,
+  r as cardActive,
+  p as cardDescription,
+  i as default,
+  u as desktop,
+  _ as image,
+  o as imageWrapper,
+  l as labelText,
+  d as mobile,
+  c as progressButtonContainer,
+  e as root,
+  a as stepLabel,
+  s as stepsContainer,
+  n as textContainer
+};

package/dist/components/StudyGridCard/StudyGridCard.d.ts

@@ -9,4 +9,4 @@ export type StudyGridCardProps = {
     readTime: number;
     link: string;
 };
-export declare function StudyGridCard({ title, link, inverted, image, date, label, readTime, }: StudyGridCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function StudyGridCard({ title, link, inverted, image, date, label, readTime }: StudyGridCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/Tabs.es.js

@@ -3,14 +3,7 @@ import { forwardRef as f } from "react";
 import { cn as x } from "../../utils/cn.es.js";
 import { Icon as l } from "../Icon/Icon.es.js";
 import s from "./tabs.module.css.es.js";
-function p({
-  activeTab: n,
-  tabs: o,
-  onTabClick: c,
-  size: r = "sm",
-  activeLinePosition: m = "bottom",
-  inverted: a
-}, d) {
+function p({ activeTab: n, tabs: o, onTabClick: c, size: r = "sm", activeLinePosition: m = "bottom", inverted: a }, d) {
   return /* @__PURE__ */ i.jsx("div", { ref: d, className: s.container, children: o.map((e) => /* @__PURE__ */ i.jsxs(
     "button",
     {

package/dist/components/Tabs/TabsWithFade.d.ts

@@ -5,5 +5,5 @@ type Props<T extends string | number> = {
     activeTab: T;
     onTabChange: (tab: T) => void;
 };
-export declare function TabsWithFade<T extends string>({ tabs, activeTab, onTabChange, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TabsWithFade<T extends string>({ tabs, activeTab, onTabChange }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tabs/TabsWithFade.es.js

@@ -3,11 +3,7 @@ import { useRef as h, useState as i, useCallback as u, useEffect as p } from "re
 import { cn as w } from "../../utils/cn.es.js";
 import { Tabs as L } from "./Tabs.es.js";
 import s from "./tabs.module.css.es.js";
-function j({
-  tabs: n,
-  activeTab: l,
-  onTabChange: c
-}) {
+function j({ tabs: n, activeTab: l, onTabChange: c }) {
   const r = h(null), [a, f] = i(!1), [m, d] = i(!1), t = u(() => {
     const e = r.current;
     e && (f(e.scrollLeft > 0), d(e.scrollLeft + e.clientWidth < e.scrollWidth));
@@ -25,16 +21,7 @@ function j({
         [s.showFadeLeft]: a,
         [s.showFadeRight]: m
       }),
-      children: /* @__PURE__ */ o.jsx("div", { ref: r, className: s.tabsTape, children: /* @__PURE__ */ o.jsx(
-        L,
-        {
-          activeTab: l,
-          tabs: n,
-          size: "lg",
-          activeLinePosition: "bottom",
-          onTabClick: c
-        }
-      ) })
+      children: /* @__PURE__ */ o.jsx("div", { ref: r, className: s.tabsTape, children: /* @__PURE__ */ o.jsx(L, { activeTab: l, tabs: n, size: "lg", activeLinePosition: "bottom", onTabClick: c }) })
     }
   );
 }

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

@@ -12,5 +12,5 @@ type Props = {
     iconPosition?: 'left' | 'right';
     onClick: (value: string) => void;
 };
-export declare const Tag: ({ value, children, active, disabled, size, prefixIcon, suffixIcon, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+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,35 +1,21 @@
 import { j as s } from "../../_virtual/jsx-runtime.es.js";
-import t from "../../styles/typography.module.css.es.js";
-import { cn as d } from "../../utils/cn.es.js";
+import o from "../../styles/typography.module.css.es.js";
+import { cn as j } from "../../utils/cn.es.js";
 import { Icon as e } from "../Icon/Icon.es.js";
-import r from "./tag.module.css.es.js";
-const j = {
-  md: t.labelMd,
-  lg: t.labelLg
-}, S = ({
-  value: n,
-  children: c,
-  active: l,
-  disabled: i,
-  size: a = "md",
-  prefixIcon: m,
-  suffixIcon: o,
-  onClick: p
-}) => /* @__PURE__ */ s.jsx(
+import m from "./tag.module.css.es.js";
+const p = {
+  md: o.labelMd,
+  lg: o.labelLg
+}, S = ({ value: l, children: n, active: c, disabled: i, size: r = "md", prefixIcon: t, suffixIcon: a, onClick: d }) => /* @__PURE__ */ s.jsx(
   "button",
   {
-    className: d(
-      r.tag,
-      j[a],
-      { [r.active]: l },
-      r[a]
-    ),
+    className: j(m.tag, p[r], { [m.active]: c }, m[r]),
     disabled: i,
-    onClick: () => p(n),
-    children: /* @__PURE__ */ s.jsxs("div", { className: r.content, children: [
-      m && /* @__PURE__ */ s.jsx("div", { className: r.iconWrap, children: /* @__PURE__ */ s.jsx(e, { name: m }) }),
-      /* @__PURE__ */ s.jsx("p", { children: c }),
-      o && /* @__PURE__ */ s.jsx("div", { className: r.iconWrap, children: /* @__PURE__ */ s.jsx(e, { name: o }) })
+    onClick: () => d(l),
+    children: /* @__PURE__ */ s.jsxs("div", { className: m.content, children: [
+      t && /* @__PURE__ */ s.jsx("div", { className: m.iconWrap, children: /* @__PURE__ */ s.jsx(e, { name: t }) }),
+      /* @__PURE__ */ s.jsx("p", { children: n }),
+      a && /* @__PURE__ */ s.jsx("div", { className: m.iconWrap, children: /* @__PURE__ */ s.jsx(e, { name: a }) })
     ] })
   }
 );

package/dist/components/TextButton/TextButton.es.js

@@ -18,12 +18,7 @@ const f = ({
     i,
     {
       ...d,
-      className: v(
-        t.button,
-        x,
-        j,
-        p
-      ),
+      className: v(t.button, x, j, p),
       disabled: e,
       "data-hide-on": l,
       children: /* @__PURE__ */ s.jsxs("div", { className: t.content, children: [

package/dist/components/Typography/Typography.es.js

@@ -1,35 +1,22 @@
-import { j as y } from "../../_virtual/jsx-runtime.es.js";
+import { j as C } from "../../_virtual/jsx-runtime.es.js";
 import t from "../../styles/typography.module.css.es.js";
-import { cn as C } from "../../utils/cn.es.js";
+import { cn as y } from "../../utils/cn.es.js";
 import { getMemoizedColorStyles as g } from "./Typography.service.es.js";
 const u = ({
   defaultVariant: o,
-  children: l,
+  children: a,
   className: m = "",
   weight: e,
-  emphasis: r = !1,
+  emphasis: l = !1,
   as: i = "span",
-  mobileVariant: a,
+  mobileVariant: r,
   color: p
 }) => {
   const c = t[o] || "";
   let s = e;
-  r && !e && (s = "medium");
-  const n = s ? t[`weight${s.charAt(0).toUpperCase()}${s.slice(1)}`] : "", h = o.startsWith("label") && r ? t.labelEmphasis : "", f = a ? t[`mobile__${a}`] : "";
-  return /* @__PURE__ */ y.jsx(
-    i,
-    {
-      style: g(p),
-      className: C(
-        c,
-        n,
-        h,
-        f,
-        m
-      ),
-      children: l
-    }
-  );
+  l && !e && (s = "medium");
+  const n = s ? t[`weight${s.charAt(0).toUpperCase()}${s.slice(1)}`] : "", f = o.startsWith("label") && l ? t.labelEmphasis : "", h = r ? t[`mobile__${r}`] : "";
+  return /* @__PURE__ */ C.jsx(i, { style: g(p), className: y(c, n, f, h, m), children: a });
 };
 export {
   u as Typography

package/dist/components/index.d.ts

@@ -1,5 +1,3 @@
-export { Typography } from './Typography';
-export type { TypographyVariant, TypographyProps } from './Typography';
 export { Button } from './Button';
 export { Label } from './Label';
 export type { LabelColor } from './Label';
@@ -13,7 +11,7 @@ export { Icon, EIconName } from './Icon';
 export { ProductGalleryCard } from './ProductGalleryCard';
 export type { TProductGalleryCardView } from './ProductGalleryCard';
 export { HighlightedTitle } from './HighlightedTitle';
-export { Callback } from './Callback';
+export { Callback, type CallbackProps } from './Callback';
 export { IconButton } from './IconButton';
 export type { CallbackSize } from './Callback';
 export { FilterMenu } from './FilterMenu';
@@ -24,3 +22,6 @@ export type { TProductGalleryProps } from './ProductGallery';
 export { ProgressButton } from './ProgressButton';
 export type { ProgressButtonProps } from './ProgressButton';
 export { TextButton } from './TextButton';
+export { Typography } from './Typography';
+export type { TypographyVariant, TypographyProps } from './Typography';
+export { StepsCarousel, type TStepsCarouselView } from './StepsCarousel';