@zenpatient-org/healthspan-marketing-ui 0.1.124 → 0.1.126

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

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

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

@@ -1,6 +1,7 @@
 import { TColorScheme } from '../../types/common';
 
 export type TStepsCarouselView = Array<{
+    name?: string;
     title: string;
     image: string;
     description?: string;

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

@@ -1,37 +1,37 @@
 "use client";
-import { jsxs as u, jsx as a, Fragment as V } from "react/jsx-runtime";
+import { jsxs as m, jsx as a, Fragment as V } from "react/jsx-runtime";
 import { useState as A, useRef as h, useCallback as f, useEffect as M } from "react";
 import { cn as p } from "../../utils/cn/cn.es.js";
 import { Label as N } from "../Label/Label.es.js";
 import { ProgressButton as x } from "../ProgressButton/ProgressButton.es.js";
 import { Typography as b } from "../Typography/Typography.es.js";
 import r from "./stepsCarousel.module.css.es.js";
-const S = 50, $ = ({ steps: d, colorScheme: i }) => {
-  const [n, k] = A(0), v = h(null), g = h([]), c = h(null), m = h(null), C = f((e) => {
+const S = 50, W = ({ steps: u, colorScheme: i }) => {
+  const [n, k] = A(0), v = h(null), g = h([]), c = h(null), d = h(null), C = f((e) => {
     c.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
   }, []), s = f((e) => {
     var t;
     k(e), (t = g.current[e]) == null || t.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
   }, []), y = f(() => {
-    if (c.current !== null && m.current !== null) {
-      const e = m.current - c.current.x;
+    if (c.current !== null && d.current !== null) {
+      const e = d.current - c.current.x;
       let t = n;
-      e > S && n > 0 ? t = n - 1 : e < -S && n < d.length - 1 && (t = n + 1), t !== n && s(t);
+      e > S && n > 0 ? t = n - 1 : e < -S && n < u.length - 1 && (t = n + 1), t !== n && s(t);
     }
-    c.current = null, m.current = null;
-  }, [n, d.length, s]);
+    c.current = null, d.current = null;
+  }, [n, u.length, s]);
   return M(() => {
     const e = v.current;
     if (!e) return;
     const t = (l) => {
       if (c.current === null) return;
       const o = l.touches[0].clientX, E = l.touches[0].clientY, T = Math.abs(o - c.current.x), X = Math.abs(E - c.current.y);
-      T > X && (l.preventDefault(), m.current = o);
+      T > X && (l.preventDefault(), d.current = o);
     };
     return e.addEventListener("touchmove", t, { passive: !1 }), () => {
       e.removeEventListener("touchmove", t);
     };
-  }, []), /* @__PURE__ */ u("div", { className: r.root, "data-scheme": i, children: [
+  }, []), /* @__PURE__ */ m("div", { className: r.root, "data-scheme": i, children: [
     /* @__PURE__ */ a(
       "div",
       {
@@ -40,9 +40,9 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
         "data-scheme": i,
         onTouchStart: C,
         onTouchEnd: y,
-        children: d.map((e, t) => {
+        children: u.map((e, t) => {
           const l = n === t;
-          return /* @__PURE__ */ u(
+          return /* @__PURE__ */ m(
             "button",
             {
               ref: (o) => {
@@ -53,14 +53,14 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
               type: "button",
               children: [
                 /* @__PURE__ */ a("div", { className: p(r.imageWrapper, l && r.imageWrapperActive), children: /* @__PURE__ */ a("img", { src: e.image, alt: e.title, className: r.image }) }),
-                /* @__PURE__ */ a("div", { className: r.stepLabel, children: l ? /* @__PURE__ */ u(V, { children: [
+                /* @__PURE__ */ a("div", { className: r.stepLabel, children: l ? /* @__PURE__ */ m(V, { children: [
                   /* @__PURE__ */ a(
                     N,
                     {
                       size: "lg",
                       className: r.desktop,
                       color: i === "dark" ? "white" : "black",
-                      children: `Step ${t + 1}`
+                      children: e.name || `Step ${t + 1}`
                     }
                   ),
                   /* @__PURE__ */ a(
@@ -69,23 +69,20 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
                       size: "sm",
                       className: r.mobile,
                       color: i === "dark" ? "white" : "black",
-                      children: `Step ${t + 1}`
+                      children: e.name || `Step ${t + 1}`
                     }
                   )
-                ] }) : /* @__PURE__ */ u(
+                ] }) : /* @__PURE__ */ a(
                   b,
                   {
                     defaultVariant: "labelSm",
                     mobileVariant: "labelXs",
                     emphasis: !0,
                     className: r.labelText,
-                    children: [
-                      "Step ",
-                      t + 1
-                    ]
+                    children: e.name || `Step ${t + 1}`
                   }
                 ) }),
-                /* @__PURE__ */ u("div", { className: r.textContainer, children: [
+                /* @__PURE__ */ m("div", { className: r.textContainer, children: [
                   /* @__PURE__ */ a(b, { as: "h3", defaultVariant: "headingSm", mobileVariant: "headingXxs", children: e.title }),
                   e.description && /* @__PURE__ */ a(
                     b,
@@ -114,7 +111,7 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
           onClick: () => s(n - 1)
         },
         right: {
-          disabled: n >= d.length - 1,
+          disabled: n >= u.length - 1,
           onClick: () => s(n + 1)
         }
       }
@@ -122,5 +119,5 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
   ] });
 };
 export {
-  $ as StepsCarousel
+  W as StepsCarousel
 };