@zenpatient-org/healthspan-marketing-ui 0.1.123 → 0.1.125
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.
- package/dist/components/StepsCarousel/StepsCarousel.cjs.js +1 -1
- package/dist/components/StepsCarousel/StepsCarousel.d.ts +1 -0
- package/dist/components/StepsCarousel/StepsCarousel.es.js +20 -23
- package/dist/healthspan-marketing-ui.css +1 -1
- package/dist/modules/SlidingTabsGallery/SlidingTabsGallery.cjs.js +1 -1
- package/dist/modules/SlidingTabsGallery/SlidingTabsGallery.es.js +34 -33
- package/package.json +1 -1
|
@@ -1 +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"),
|
|
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"),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;
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
2
|
+
import { jsxs as m, jsx as a, Fragment as V } from "react/jsx-runtime";
|
|
3
3
|
import { useState as A, useRef as h, useCallback as f, useEffect as M } from "react";
|
|
4
4
|
import { cn as p } from "../../utils/cn/cn.es.js";
|
|
5
5
|
import { Label as N } from "../Label/Label.es.js";
|
|
6
6
|
import { ProgressButton as x } from "../ProgressButton/ProgressButton.es.js";
|
|
7
7
|
import { Typography as b } from "../Typography/Typography.es.js";
|
|
8
8
|
import r from "./stepsCarousel.module.css.es.js";
|
|
9
|
-
const S = 50,
|
|
10
|
-
const [n, k] = A(0), v = h(null), g = h([]), c = h(null),
|
|
9
|
+
const S = 50, W = ({ steps: u, colorScheme: i }) => {
|
|
10
|
+
const [n, k] = A(0), v = h(null), g = h([]), c = h(null), d = h(null), C = f((e) => {
|
|
11
11
|
c.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
|
|
12
12
|
}, []), s = f((e) => {
|
|
13
13
|
var t;
|
|
14
14
|
k(e), (t = g.current[e]) == null || t.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
|
|
15
15
|
}, []), y = f(() => {
|
|
16
|
-
if (c.current !== null &&
|
|
17
|
-
const e =
|
|
16
|
+
if (c.current !== null && d.current !== null) {
|
|
17
|
+
const e = d.current - c.current.x;
|
|
18
18
|
let t = n;
|
|
19
|
-
e > S && n > 0 ? t = n - 1 : e < -S && n <
|
|
19
|
+
e > S && n > 0 ? t = n - 1 : e < -S && n < u.length - 1 && (t = n + 1), t !== n && s(t);
|
|
20
20
|
}
|
|
21
|
-
c.current = null,
|
|
22
|
-
}, [n,
|
|
21
|
+
c.current = null, d.current = null;
|
|
22
|
+
}, [n, u.length, s]);
|
|
23
23
|
return M(() => {
|
|
24
24
|
const e = v.current;
|
|
25
25
|
if (!e) return;
|
|
26
26
|
const t = (l) => {
|
|
27
27
|
if (c.current === null) return;
|
|
28
28
|
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);
|
|
29
|
-
T > X && (l.preventDefault(),
|
|
29
|
+
T > X && (l.preventDefault(), d.current = o);
|
|
30
30
|
};
|
|
31
31
|
return e.addEventListener("touchmove", t, { passive: !1 }), () => {
|
|
32
32
|
e.removeEventListener("touchmove", t);
|
|
33
33
|
};
|
|
34
|
-
}, []), /* @__PURE__ */
|
|
34
|
+
}, []), /* @__PURE__ */ m("div", { className: r.root, "data-scheme": i, children: [
|
|
35
35
|
/* @__PURE__ */ a(
|
|
36
36
|
"div",
|
|
37
37
|
{
|
|
@@ -40,9 +40,9 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
|
|
|
40
40
|
"data-scheme": i,
|
|
41
41
|
onTouchStart: C,
|
|
42
42
|
onTouchEnd: y,
|
|
43
|
-
children:
|
|
43
|
+
children: u.map((e, t) => {
|
|
44
44
|
const l = n === t;
|
|
45
|
-
return /* @__PURE__ */
|
|
45
|
+
return /* @__PURE__ */ m(
|
|
46
46
|
"button",
|
|
47
47
|
{
|
|
48
48
|
ref: (o) => {
|
|
@@ -53,14 +53,14 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
|
|
|
53
53
|
type: "button",
|
|
54
54
|
children: [
|
|
55
55
|
/* @__PURE__ */ a("div", { className: p(r.imageWrapper, l && r.imageWrapperActive), children: /* @__PURE__ */ a("img", { src: e.image, alt: e.title, className: r.image }) }),
|
|
56
|
-
/* @__PURE__ */ a("div", { className: r.stepLabel, children: l ? /* @__PURE__ */
|
|
56
|
+
/* @__PURE__ */ a("div", { className: r.stepLabel, children: l ? /* @__PURE__ */ m(V, { children: [
|
|
57
57
|
/* @__PURE__ */ a(
|
|
58
58
|
N,
|
|
59
59
|
{
|
|
60
60
|
size: "lg",
|
|
61
61
|
className: r.desktop,
|
|
62
62
|
color: i === "dark" ? "white" : "black",
|
|
63
|
-
children: `Step ${t + 1}`
|
|
63
|
+
children: e.name || `Step ${t + 1}`
|
|
64
64
|
}
|
|
65
65
|
),
|
|
66
66
|
/* @__PURE__ */ a(
|
|
@@ -69,23 +69,20 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
|
|
|
69
69
|
size: "sm",
|
|
70
70
|
className: r.mobile,
|
|
71
71
|
color: i === "dark" ? "white" : "black",
|
|
72
|
-
children: `Step ${t + 1}`
|
|
72
|
+
children: e.name || `Step ${t + 1}`
|
|
73
73
|
}
|
|
74
74
|
)
|
|
75
|
-
] }) : /* @__PURE__ */
|
|
75
|
+
] }) : /* @__PURE__ */ a(
|
|
76
76
|
b,
|
|
77
77
|
{
|
|
78
78
|
defaultVariant: "labelSm",
|
|
79
79
|
mobileVariant: "labelXs",
|
|
80
80
|
emphasis: !0,
|
|
81
81
|
className: r.labelText,
|
|
82
|
-
children:
|
|
83
|
-
"Step ",
|
|
84
|
-
t + 1
|
|
85
|
-
]
|
|
82
|
+
children: e.name || `Step ${t + 1}`
|
|
86
83
|
}
|
|
87
84
|
) }),
|
|
88
|
-
/* @__PURE__ */
|
|
85
|
+
/* @__PURE__ */ m("div", { className: r.textContainer, children: [
|
|
89
86
|
/* @__PURE__ */ a(b, { as: "h3", defaultVariant: "headingSm", mobileVariant: "headingXxs", children: e.title }),
|
|
90
87
|
e.description && /* @__PURE__ */ a(
|
|
91
88
|
b,
|
|
@@ -114,7 +111,7 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
|
|
|
114
111
|
onClick: () => s(n - 1)
|
|
115
112
|
},
|
|
116
113
|
right: {
|
|
117
|
-
disabled: n >=
|
|
114
|
+
disabled: n >= u.length - 1,
|
|
118
115
|
onClick: () => s(n + 1)
|
|
119
116
|
}
|
|
120
117
|
}
|
|
@@ -122,5 +119,5 @@ const S = 50, $ = ({ steps: d, colorScheme: i }) => {
|
|
|
122
119
|
] });
|
|
123
120
|
};
|
|
124
121
|
export {
|
|
125
|
-
|
|
122
|
+
W as StepsCarousel
|
|
126
123
|
};
|