@zenpatient-org/healthspan-marketing-ui 0.1.21 → 0.1.22

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

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