@zenpatient-org/healthspan-marketing-ui 0.1.135 → 0.1.136

package/dist/lib/useSwiper.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { Swiper as SwiperType } from 'swiper';
 
-export type UseSwiperReturnProps = {
+export type BaseSwiperReturnProps = {
     swiper: SwiperType | null;
     setSwiper: React.Dispatch<React.SetStateAction<SwiperType | null>>;
     activeIndex: number;
@@ -20,4 +20,11 @@ export type UseSwiperReturnProps = {
     onSwiperInit: (swiper: SwiperType) => void;
     handleSwiperResize: (swiper: SwiperType) => void;
 };
-export declare const useSwiper: () => UseSwiperReturnProps;
+export type AutoPlaySwiperReturnProps = BaseSwiperReturnProps & {
+    isAutoPlay: boolean;
+    stopAutoPlay: () => void;
+    startAutoPlay: () => void;
+    handleUserInteraction: () => void;
+};
+export declare const useSwiper: () => BaseSwiperReturnProps;
+export declare const useSwiperWithAutoPlay: (autoPlayInterval?: number) => AutoPlaySwiperReturnProps;

package/dist/modules/Curiosity/Curiosity.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../components/Button/Button.cjs.js"),m=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),o=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/StudyGridCard/StudyGridCard.cjs.js"),t=require("./curiosity.module.css.cjs.js"),f=require("../../utils/cn/cn.cjs.js"),h=({title:c,description:r,studies:s,indexed:i})=>e.jsxs("div",{className:f.cn(t.default.root,{[t.default.notIndexed]:!i}),children:[e.jsxs("div",{className:t.default.contentContainer,children:[e.jsxs("div",{className:t.default.containerHeader,children:[e.jsx(m.HighlightedTitle,{title:c,className:t.default.title,defaultVariant:"displayXl",mobileVariant:"displayXs"}),e.jsxs("div",{className:t.default.contentTextContainer,children:[r&&e.jsx(n.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodySm",className:t.default.contentText,children:r}),e.jsx("div",{className:t.default.buttonContainer,children:e.jsx(u.Button,{as:"a",href:"/research",variant:"muted",size:"lg",children:"View all studies"})})]})]}),i&&e.jsxs("div",{className:t.default.dividerContainer,children:[e.jsx(n.Typography,{defaultVariant:"labelMd",children:i.number}),e.jsx("div",{className:t.default.divider}),e.jsx(n.Typography,{defaultVariant:"labelMd",emphasis:!0,children:i.label})]})]}),e.jsxs("div",{className:t.default.containerBottom,children:[e.jsx(o.InfiniteScroll,{items:s,speed:50,contentClassName:t.default.infiniteScrollContent,itemClassName:t.default.infiniteScrollItem,rootClassName:t.default.infiniteScrollRoot,renderItem:(a,l)=>e.jsx(d.StudyGridCard,{...a,compressed:!0},l)}),e.jsx(o.InfiniteScroll,{items:s,speed:50,direction:"right",contentClassName:t.default.infiniteScrollContent,itemClassName:t.default.infiniteScrollItemTwo,rootClassName:t.default.infiniteScrollRoot,renderItem:(a,l)=>e.jsx(d.StudyGridCard,{...a,compressed:!0},l)})]})]});exports.Curiosity=h;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../components/Button/Button.cjs.js"),m=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),o=require("../../components/InfiniteScroll/InfiniteScroll.cjs.js"),a=require("../../components/Typography/Typography.cjs.js"),d=require("../../components/StudyGridCard/StudyGridCard.cjs.js"),f=require("../../utils/cn/cn.cjs.js"),t=require("./curiosity.module.css.cjs.js"),h=({title:c,description:r,studies:s,indexed:i})=>e.jsxs("div",{className:f.cn(t.default.root,{[t.default.notIndexed]:!i}),children:[e.jsxs("div",{className:t.default.contentContainer,children:[e.jsxs("div",{className:t.default.containerHeader,children:[e.jsx(m.HighlightedTitle,{title:c,className:t.default.title,defaultVariant:"displayXl",mobileVariant:"displayXs"}),e.jsxs("div",{className:t.default.contentTextContainer,children:[r&&e.jsx(a.Typography,{defaultVariant:"bodyLg",mobileVariant:"bodySm",className:t.default.contentText,children:r}),e.jsx("div",{className:t.default.buttonContainer,children:e.jsx(u.Button,{as:"a",href:"/research",variant:"muted",size:"lg",children:"View all studies"})})]})]}),i&&e.jsxs("div",{className:t.default.dividerContainer,children:[e.jsx(a.Typography,{defaultVariant:"labelMd",children:i.number}),e.jsx("div",{className:t.default.divider}),e.jsx(a.Typography,{defaultVariant:"labelMd",emphasis:!0,children:i.label})]})]}),e.jsxs("div",{className:t.default.containerBottom,children:[e.jsx(o.InfiniteScroll,{items:s,speed:50,slowOnTouch:!0,enableManualScroll:!0,contentClassName:t.default.infiniteScrollContent,itemClassName:t.default.infiniteScrollItem,rootClassName:t.default.infiniteScrollRoot,renderItem:(l,n)=>e.jsx(d.StudyGridCard,{...l,compressed:!0},n)}),e.jsx(o.InfiniteScroll,{items:s,speed:50,direction:"right",slowOnTouch:!0,enableManualScroll:!0,contentClassName:t.default.infiniteScrollContent,itemClassName:t.default.infiniteScrollItemTwo,renderItem:(l,n)=>e.jsx(d.StudyGridCard,{...l,compressed:!0},n)})]})]});exports.Curiosity=h;

package/dist/modules/Curiosity/Curiosity.es.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { Button as f } from "../../components/Button/Button.es.js";
+import { Button as u } from "../../components/Button/Button.es.js";
 import { HighlightedTitle as h } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { InfiniteScroll as m } from "../../components/InfiniteScroll/InfiniteScroll.es.js";
-import { Typography as l } from "../../components/Typography/Typography.es.js";
+import { Typography as n } from "../../components/Typography/Typography.es.js";
 import { StudyGridCard as c } from "../../components/StudyGridCard/StudyGridCard.es.js";
+import { cn as f } from "../../utils/cn/cn.es.js";
 import e from "./curiosity.module.css.es.js";
-import { cn as p } from "../../utils/cn/cn.es.js";
-const g = ({ title: d, description: o, studies: s, indexed: r }) => /* @__PURE__ */ i("div", { className: p(e.root, { [e.notIndexed]: !r }), children: [
+const V = ({ title: d, description: o, studies: s, indexed: r }) => /* @__PURE__ */ i("div", { className: f(e.root, { [e.notIndexed]: !r }), children: [
   /* @__PURE__ */ i("div", { className: e.contentContainer, children: [
     /* @__PURE__ */ i("div", { className: e.containerHeader, children: [
       /* @__PURE__ */ t(
@@ -20,14 +20,14 @@ const g = ({ title: d, description: o, studies: s, indexed: r }) => /* @__PURE__
         }
       ),
       /* @__PURE__ */ i("div", { className: e.contentTextContainer, children: [
-        o && /* @__PURE__ */ t(l, { defaultVariant: "bodyLg", mobileVariant: "bodySm", className: e.contentText, children: o }),
-        /* @__PURE__ */ t("div", { className: e.buttonContainer, children: /* @__PURE__ */ t(f, { as: "a", href: "/research", variant: "muted", size: "lg", children: "View all studies" }) })
+        o && /* @__PURE__ */ t(n, { defaultVariant: "bodyLg", mobileVariant: "bodySm", className: e.contentText, children: o }),
+        /* @__PURE__ */ t("div", { className: e.buttonContainer, children: /* @__PURE__ */ t(u, { as: "a", href: "/research", variant: "muted", size: "lg", children: "View all studies" }) })
       ] })
     ] }),
     r && /* @__PURE__ */ i("div", { className: e.dividerContainer, children: [
-      /* @__PURE__ */ t(l, { defaultVariant: "labelMd", children: r.number }),
+      /* @__PURE__ */ t(n, { defaultVariant: "labelMd", children: r.number }),
       /* @__PURE__ */ t("div", { className: e.divider }),
-      /* @__PURE__ */ t(l, { defaultVariant: "labelMd", emphasis: !0, children: r.label })
+      /* @__PURE__ */ t(n, { defaultVariant: "labelMd", emphasis: !0, children: r.label })
     ] })
   ] }),
   /* @__PURE__ */ i("div", { className: e.containerBottom, children: [
@@ -36,10 +36,12 @@ const g = ({ title: d, description: o, studies: s, indexed: r }) => /* @__PURE__
       {
         items: s,
         speed: 50,
+        slowOnTouch: !0,
+        enableManualScroll: !0,
         contentClassName: e.infiniteScrollContent,
         itemClassName: e.infiniteScrollItem,
         rootClassName: e.infiniteScrollRoot,
-        renderItem: (a, n) => /* @__PURE__ */ t(c, { ...a, compressed: !0 }, n)
+        renderItem: (a, l) => /* @__PURE__ */ t(c, { ...a, compressed: !0 }, l)
       }
     ),
     /* @__PURE__ */ t(
@@ -48,14 +50,15 @@ const g = ({ title: d, description: o, studies: s, indexed: r }) => /* @__PURE__
         items: s,
         speed: 50,
         direction: "right",
+        slowOnTouch: !0,
+        enableManualScroll: !0,
         contentClassName: e.infiniteScrollContent,
         itemClassName: e.infiniteScrollItemTwo,
-        rootClassName: e.infiniteScrollRoot,
-        renderItem: (a, n) => /* @__PURE__ */ t(c, { ...a, compressed: !0 }, n)
+        renderItem: (a, l) => /* @__PURE__ */ t(c, { ...a, compressed: !0 }, l)
       }
     )
   ] })
 ] });
 export {
-  g as Curiosity
+  V as Curiosity
 };

package/dist/modules/HowItWorks/components/Content/Content.d.ts

@@ -1,4 +1,4 @@
-import { UseSwiperReturnProps } from '../../../../lib/useSwiper';
+import { BaseSwiperReturnProps } from '../../../../lib/useSwiper';
 
 type ContentProps = {
     items: Array<{
@@ -8,7 +8,7 @@ type ContentProps = {
     }>;
     colorScheme: 'light' | 'dark';
     showBottomNav: boolean;
-    swiper: UseSwiperReturnProps;
+    swiper: BaseSwiperReturnProps;
 };
 export declare const Content: ({ items, colorScheme, showBottomNav, swiper }: ContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/utils/useSwiper/useSwiper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),x=()=>{const[n,c]=t.useState(null),[o,i]=t.useState(0),[u,l]=t.useState(!0),[S,s]=t.useState(!1),[g,d]=t.useState(!1),a=t.useCallback(e=>{i(e.activeIndex),s(e.isEnd),l(e.isBeginning)},[]),h=t.useCallback(()=>{n&&(n.slidePrev(),a(n))},[n,a]),k=t.useCallback(()=>{n&&(n.slideNext(),a(n))},[n,a]),C=t.useCallback(e=>{n&&(n.slideTo(e),a(n))},[n,a]),b=e=>{c(e),d(e==null?void 0:e.isLocked),a(e)},f=t.useCallback(e=>{s(e.isEnd),d(e==null?void 0:e.isLocked),a(e)},[a]),v=t.useCallback(()=>{s(!0),l(!1)},[]),r=t.useCallback(()=>{l(!0),s(!1)},[]);return{swiper:n,setSwiper:c,activeIndex:o,setActiveIndex:i,isEnd:S,setIsEnd:s,hideNav:g,handleSlideChange:a,handlePrevClick:h,handleNextClick:k,handleSlideTo:C,onSwiperInit:b,handleSwiperResize:f,isBeginning:u,setIsBeginning:l,handleReachEnd:v,handleReachBeginning:r}};exports.useSwiper=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),h=()=>{const[n,s]=e.useState(null),[u,r]=e.useState(0),[a,l]=e.useState(!0),[f,c]=e.useState(!1),[d,o]=e.useState(!1),i=e.useCallback(t=>{r(t.activeIndex),c(t.isEnd),l(t.isBeginning)},[]),b=e.useCallback(()=>{n&&(n.slidePrev(),i(n))},[n,i]),v=e.useCallback(()=>{n&&(n.slideNext(),i(n))},[n,i]),S=e.useCallback(t=>{n&&(n.slideTo(t),i(n))},[n,i]),g=t=>{s(t),o(t==null?void 0:t.isLocked),i(t)},k=e.useCallback(t=>{c(t.isEnd),o(t==null?void 0:t.isLocked),i(t)},[i]),C=e.useCallback(()=>{c(!0),l(!1)},[]),E=e.useCallback(()=>{l(!0),c(!1)},[]);return{swiper:n,setSwiper:s,activeIndex:u,setActiveIndex:r,isEnd:f,setIsEnd:c,hideNav:d,handleSlideChange:i,handlePrevClick:b,handleNextClick:v,handleSlideTo:S,onSwiperInit:g,handleSwiperResize:k,isBeginning:a,setIsBeginning:l,handleReachEnd:C,handleReachBeginning:E}},y=(n=3e3)=>{const s=h(),[u,r]=e.useState(!0),a=e.useRef(null),l=e.useCallback(()=>{r(!1),a.current&&(clearInterval(a.current),a.current=null)},[]),f=e.useCallback(()=>{r(!0)},[]),c=e.useCallback(()=>{l()},[l]);return e.useEffect(()=>{if(!(!u||!s.swiper||s.swiper.slides.length<=1))return a.current=setInterval(()=>{s.swiper&&(s.isEnd?s.swiper.slideTo(0):s.swiper.slideNext())},n),()=>{a.current&&(clearInterval(a.current),a.current=null)}},[u,s.swiper,s.isEnd,n]),e.useEffect(()=>{const d=()=>l(),o=()=>{document.hidden&&l()};return window.addEventListener("beforeunload",d),document.addEventListener("visibilitychange",o),()=>{window.removeEventListener("beforeunload",d),document.removeEventListener("visibilitychange",o)}},[l]),{...s,isAutoPlay:u,stopAutoPlay:l,startAutoPlay:f,handleUserInteraction:c}};exports.useSwiper=h;exports.useSwiperWithAutoPlay=y;

package/dist/utils/useSwiper/useSwiper.es.js

@@ -1,48 +1,78 @@
-import { useState as s, useCallback as d } from "react";
-const N = () => {
-  const [n, l] = s(null), [h, o] = s(0), [g, c] = s(!0), [u, i] = s(!1), [f, a] = s(!1), t = d((e) => {
-    o(e.activeIndex), i(e.isEnd), c(e.isBeginning);
-  }, []), v = d(() => {
-    n && (n.slidePrev(), t(n));
-  }, [n, t]), S = d(() => {
-    n && (n.slideNext(), t(n));
-  }, [n, t]), x = d(
+import { useState as c, useCallback as r, useRef as y, useEffect as v } from "react";
+const A = () => {
+  const [n, t] = c(null), [d, a] = c(0), [l, i] = c(!0), [h, o] = c(!1), [f, u] = c(!1), s = r((e) => {
+    a(e.activeIndex), o(e.isEnd), i(e.isBeginning);
+  }, []), g = r(() => {
+    n && (n.slidePrev(), s(n));
+  }, [n, s]), E = r(() => {
+    n && (n.slideNext(), s(n));
+  }, [n, s]), S = r(
     (e) => {
-      n && (n.slideTo(e), t(n));
+      n && (n.slideTo(e), s(n));
     },
-    [n, t]
-  ), k = (e) => {
-    l(e), a(e == null ? void 0 : e.isLocked), t(e);
-  }, E = d(
+    [n, s]
+  ), m = (e) => {
+    t(e), u(e == null ? void 0 : e.isLocked), s(e);
+  }, I = r(
     (e) => {
-      i(e.isEnd), a(e == null ? void 0 : e.isLocked), t(e);
+      o(e.isEnd), u(e == null ? void 0 : e.isLocked), s(e);
     },
-    [t]
-  ), B = d(() => {
-    i(!0), c(!1);
-  }, []), C = d(() => {
-    c(!0), i(!1);
+    [s]
+  ), b = r(() => {
+    o(!0), i(!1);
+  }, []), x = r(() => {
+    i(!0), o(!1);
   }, []);
   return {
     swiper: n,
-    setSwiper: l,
-    activeIndex: h,
-    setActiveIndex: o,
-    isEnd: u,
-    setIsEnd: i,
+    setSwiper: t,
+    activeIndex: d,
+    setActiveIndex: a,
+    isEnd: h,
+    setIsEnd: o,
     hideNav: f,
-    handleSlideChange: t,
-    handlePrevClick: v,
-    handleNextClick: S,
-    handleSlideTo: x,
-    onSwiperInit: k,
-    handleSwiperResize: E,
-    isBeginning: g,
-    setIsBeginning: c,
-    handleReachEnd: B,
-    handleReachBeginning: C
+    handleSlideChange: s,
+    handlePrevClick: g,
+    handleNextClick: E,
+    handleSlideTo: S,
+    onSwiperInit: m,
+    handleSwiperResize: I,
+    isBeginning: l,
+    setIsBeginning: i,
+    handleReachEnd: b,
+    handleReachBeginning: x
+  };
+}, P = (n = 3e3) => {
+  const t = A(), [d, a] = c(!0), l = y(null), i = r(() => {
+    a(!1), l.current && (clearInterval(l.current), l.current = null);
+  }, []), h = r(() => {
+    a(!0);
+  }, []), o = r(() => {
+    i();
+  }, [i]);
+  return v(() => {
+    if (!(!d || !t.swiper || t.swiper.slides.length <= 1))
+      return l.current = setInterval(() => {
+        t.swiper && (t.isEnd ? t.swiper.slideTo(0) : t.swiper.slideNext());
+      }, n), () => {
+        l.current && (clearInterval(l.current), l.current = null);
+      };
+  }, [d, t.swiper, t.isEnd, n]), v(() => {
+    const f = () => i(), u = () => {
+      document.hidden && i();
+    };
+    return window.addEventListener("beforeunload", f), document.addEventListener("visibilitychange", u), () => {
+      window.removeEventListener("beforeunload", f), document.removeEventListener("visibilitychange", u);
+    };
+  }, [i]), {
+    ...t,
+    isAutoPlay: d,
+    stopAutoPlay: i,
+    startAutoPlay: h,
+    handleUserInteraction: o
   };
 };
 export {
-  N as useSwiper
+  A as useSwiper,
+  P as useSwiperWithAutoPlay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.1.135",
+    "version": "0.1.136",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",