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

package/dist/modules/TrackProgress/components/TimelineContent/TimelineContent.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),o=require("../../../../components/Typography/Typography.cjs.js"),b=require("../../../../utils/cn/cn.cjs.js"),l=require("./timelineContent.module.css.cjs.js");function T(r){const t=r.slice();for(let n=t.length-1;n>0;n--){const i=Math.floor(Math.random()*(n+1));[t[n],t[i]]=[t[i],t[n]]}return t}const j=[{key:"optimal",label:"Optimal"},{key:"inRange",label:"In Range"},{key:"outOfRange",label:"Out of Range"}],x=({tabs:r})=>{const[t,n]=u.useState(0),i=u.useRef(null),{optimal:h,inRange:m,outOfRange:f}=r[t],g=u.useMemo(()=>T([...Array(h).fill("optimal"),...Array(m).fill("inRange"),...Array(f).fill("outOfRange")]),[h,m,f]),p=u.useCallback(a=>{i.current=a.touches[0].clientX},[]),y=u.useCallback(a=>{if(i.current===null)return;const d=a.changedTouches[0].clientX-i.current;Math.abs(d)>50&&n(c=>d<0&&c<r.length-1?c+1:d>0&&c>0?c-1:c),i.current=null},[r.length]);return e.jsx("div",{className:l.default.root,children:e.jsxs("div",{className:l.default.container,children:[e.jsxs("div",{className:l.default.content,onTouchStart:p,onTouchEnd:y,children:[e.jsx("div",{className:l.default.metricsContainer,children:j.map((a,s)=>e.jsxs("div",{className:l.default.metric,children:[e.jsx(o.Typography,{defaultVariant:"displayLg",mobileVariant:"displaySm",weight:"regular",children:r[t][a.key]}),e.jsxs("div",{className:l.default.metricTitle,children:[e.jsx(o.Typography,{as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:"("}),e.jsx(o.Typography,{as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:a.label}),e.jsx("div",{className:l.default.circle,"data-value":a.key}),e.jsx(o.Typography,{as:"p",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:")"})]})]},`${a.key}_${s}`))}),e.jsx("div",{className:l.default.canvas,children:g.map((a,s)=>e.jsx("div",{className:l.default.circle,"data-value":a},s))})]}),e.jsx("div",{className:l.default.tabsContainer,children:r.map((a,s)=>e.jsx("button",{className:b.cn(l.default.tab,t===s&&l.default.tabActive),onClick:()=>n(s),children:e.jsx(o.Typography,{defaultVariant:"labelMd",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:a.label})},a.label))})]})})};exports.TimelineContent=x;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),d=require("../../../../node_modules/swiper/swiper-react.cjs.js");;/* empty css                                              */const t=require("../../../../components/Typography/Typography.cjs.js"),y=require("../../../../utils/cn/cn.cjs.js"),f=require("../../../../utils/useSwiper/useSwiper.cjs.js"),b=require("./utils.cjs.js"),a=require("./timelineContent.module.css.cjs.js"),v=[{key:"optimal",label:"Optimal"},{key:"inRange",label:"In Range"},{key:"outOfRange",label:"Out of Range"}],S=({tabs:s})=>{const{activeIndex:c,onSwiperInit:o,handleSlideTo:u,handleSlideChange:p,handleSwiperResize:m}=f.useSwiper(),h=g.useMemo(()=>s.map(l=>b.distributePoints(l.optimal,l.inRange,l.outOfRange)),[s]);return e.jsx("div",{className:a.default.root,children:e.jsxs("div",{className:a.default.container,children:[e.jsx(d.Swiper,{onSwiper:o,onResize:m,onSlideChange:p,slidesPerView:1,allowTouchMove:s.length>1,spaceBetween:0,initialSlide:0,className:a.default.swiper,children:s.map((l,n)=>e.jsx(d.SwiperSlide,{children:e.jsxs("div",{className:a.default.content,children:[e.jsx("div",{className:a.default.metricsContainer,children:v.map((i,r)=>e.jsxs("div",{className:a.default.metric,children:[e.jsx(t.Typography,{defaultVariant:"displayLg",mobileVariant:"displaySm",weight:"regular",children:l[i.key]}),e.jsxs("div",{className:a.default.metricTitle,children:[e.jsx(t.Typography,{as:"div",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:"("}),e.jsx(t.Typography,{as:"div",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:i.label}),e.jsx("div",{className:a.default.circle,"data-value":i.key}),e.jsx(t.Typography,{as:"div",defaultVariant:"labelSm",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:")"})]})]},`${i.key}_${r}`))}),e.jsx("div",{className:a.default.canvas,children:h[n].map((i,r)=>e.jsx("div",{className:a.default.circle,"data-value":i},r))})]})},l.label))}),e.jsx("div",{className:a.default.tabsContainer,children:s.map((l,n)=>e.jsx("button",{className:y.cn(a.default.tab,c===n&&a.default.tabActive),onClick:()=>u(n),children:e.jsx(t.Typography,{defaultVariant:"labelMd",mobileVariant:"labelXs",emphasis:!0,weight:"regular",children:l.label})},l.label))})]})})};exports.TimelineContent=S;

package/dist/modules/TrackProgress/components/TimelineContent/TimelineContent.es.js

@@ -1,99 +1,97 @@
 "use client";
-import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import { useState as v, useRef as N, useMemo as T, useCallback as g } from "react";
-import { Typography as o } from "../../../../components/Typography/Typography.es.js";
-import { cn as R } from "../../../../utils/cn/cn.es.js";
-import l from "./timelineContent.module.css.es.js";
-function V(i) {
-  const n = i.slice();
-  for (let t = n.length - 1; t > 0; t--) {
-    const r = Math.floor(Math.random() * (t + 1));
-    [n[t], n[r]] = [n[r], n[t]];
-  }
-  return n;
-}
-const X = [
-  {
-    key: "optimal",
-    label: "Optimal"
-  },
-  {
-    key: "inRange",
-    label: "In Range"
-  },
-  {
-    key: "outOfRange",
-    label: "Out of Range"
-  }
-], E = ({ tabs: i }) => {
-  const [n, t] = v(0), r = N(null), { optimal: h, inRange: d, outOfRange: f } = i[n], b = T(() => V([
-    ...Array(h).fill("optimal"),
-    ...Array(d).fill("inRange"),
-    ...Array(f).fill("outOfRange")
-  ]), [h, d, f]), p = g((e) => {
-    r.current = e.touches[0].clientX;
-  }, []), y = g(
-    (e) => {
-      if (r.current === null) return;
-      const m = e.changedTouches[0].clientX - r.current;
-      Math.abs(m) > 50 && t((s) => m < 0 && s < i.length - 1 ? s + 1 : m > 0 && s > 0 ? s - 1 : s), r.current = null;
-    },
-    [i.length]
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import { Swiper as v, SwiperSlide as b } from "../../../../node_modules/swiper/swiper-react.es.js";
+/* empty css                                            */
+import { Typography as n } from "../../../../components/Typography/Typography.es.js";
+import { cn as f } from "../../../../utils/cn/cn.es.js";
+import { useSwiper as S } from "../../../../utils/useSwiper/useSwiper.es.js";
+import { distributePoints as w } from "./utils.es.js";
+import a from "./timelineContent.module.css.es.js";
+const y = [
+  { key: "optimal", label: "Optimal" },
+  { key: "inRange", label: "In Range" },
+  { key: "outOfRange", label: "Out of Range" }
+], X = ({ tabs: r }) => {
+  const { activeIndex: m, onSwiperInit: d, handleSlideTo: c, handleSlideChange: p, handleSwiperResize: h } = S(), u = g(
+    () => r.map((i) => w(i.optimal, i.inRange, i.outOfRange)),
+    [r]
   );
-  return /* @__PURE__ */ a("div", { className: l.root, children: /* @__PURE__ */ u("div", { className: l.container, children: [
-    /* @__PURE__ */ u("div", { className: l.content, onTouchStart: p, onTouchEnd: y, children: [
-      /* @__PURE__ */ a("div", { className: l.metricsContainer, children: X.map((e, c) => /* @__PURE__ */ u("div", { className: l.metric, children: [
-        /* @__PURE__ */ a(o, { defaultVariant: "displayLg", mobileVariant: "displaySm", weight: "regular", children: i[n][e.key] }),
-        /* @__PURE__ */ u("div", { className: l.metricTitle, children: [
-          /* @__PURE__ */ a(
-            o,
-            {
-              as: "p",
-              defaultVariant: "labelSm",
-              mobileVariant: "labelXs",
-              emphasis: !0,
-              weight: "regular",
-              children: "("
-            }
-          ),
-          /* @__PURE__ */ a(
-            o,
-            {
-              as: "p",
-              defaultVariant: "labelSm",
-              mobileVariant: "labelXs",
-              emphasis: !0,
-              weight: "regular",
-              children: e.label
-            }
-          ),
-          /* @__PURE__ */ a("div", { className: l.circle, "data-value": e.key }),
-          /* @__PURE__ */ a(
-            o,
-            {
-              as: "p",
-              defaultVariant: "labelSm",
-              mobileVariant: "labelXs",
-              emphasis: !0,
-              weight: "regular",
-              children: ")"
-            }
-          )
-        ] })
-      ] }, `${e.key}_${c}`)) }),
-      /* @__PURE__ */ a("div", { className: l.canvas, children: b.map((e, c) => /* @__PURE__ */ a("div", { className: l.circle, "data-value": e }, c)) })
-    ] }),
-    /* @__PURE__ */ a("div", { className: l.tabsContainer, children: i.map((e, c) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ e("div", { className: a.root, children: /* @__PURE__ */ s("div", { className: a.container, children: [
+    /* @__PURE__ */ e(
+      v,
+      {
+        onSwiper: d,
+        onResize: h,
+        onSlideChange: p,
+        slidesPerView: 1,
+        allowTouchMove: r.length > 1,
+        spaceBetween: 0,
+        initialSlide: 0,
+        className: a.swiper,
+        children: r.map((i, t) => /* @__PURE__ */ e(b, { children: /* @__PURE__ */ s("div", { className: a.content, children: [
+          /* @__PURE__ */ e("div", { className: a.metricsContainer, children: y.map((l, o) => /* @__PURE__ */ s("div", { className: a.metric, children: [
+            /* @__PURE__ */ e(
+              n,
+              {
+                defaultVariant: "displayLg",
+                mobileVariant: "displaySm",
+                weight: "regular",
+                children: i[l.key]
+              }
+            ),
+            /* @__PURE__ */ s("div", { className: a.metricTitle, children: [
+              /* @__PURE__ */ e(
+                n,
+                {
+                  as: "div",
+                  defaultVariant: "labelSm",
+                  mobileVariant: "labelXs",
+                  emphasis: !0,
+                  weight: "regular",
+                  children: "("
+                }
+              ),
+              /* @__PURE__ */ e(
+                n,
+                {
+                  as: "div",
+                  defaultVariant: "labelSm",
+                  mobileVariant: "labelXs",
+                  emphasis: !0,
+                  weight: "regular",
+                  children: l.label
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: a.circle, "data-value": l.key }),
+              /* @__PURE__ */ e(
+                n,
+                {
+                  as: "div",
+                  defaultVariant: "labelSm",
+                  mobileVariant: "labelXs",
+                  emphasis: !0,
+                  weight: "regular",
+                  children: ")"
+                }
+              )
+            ] })
+          ] }, `${l.key}_${o}`)) }),
+          /* @__PURE__ */ e("div", { className: a.canvas, children: u[t].map((l, o) => /* @__PURE__ */ e("div", { className: a.circle, "data-value": l }, o)) })
+        ] }) }, i.label))
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: a.tabsContainer, children: r.map((i, t) => /* @__PURE__ */ e(
       "button",
       {
-        className: R(l.tab, n === c && l.tabActive),
-        onClick: () => t(c),
-        children: /* @__PURE__ */ a(o, { defaultVariant: "labelMd", mobileVariant: "labelXs", emphasis: !0, weight: "regular", children: e.label })
+        className: f(a.tab, m === t && a.tabActive),
+        onClick: () => c(t),
+        children: /* @__PURE__ */ e(n, { defaultVariant: "labelMd", mobileVariant: "labelXs", emphasis: !0, weight: "regular", children: i.label })
       },
-      e.label
+      i.label
     )) })
   ] }) });
 };
 export {
-  E as TimelineContent
+  X as TimelineContent
 };

package/dist/modules/TrackProgress/components/TimelineContent/timelineContent.module.css.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="timelineContent-module__root___5V2gz",e="timelineContent-module__container___DSrBq",n="timelineContent-module__content___HS3bJ",o="timelineContent-module__metricsContainer___Bl9Mq",i="timelineContent-module__metric___QgjTy",_="timelineContent-module__metricTitle___NgmIf",c="timelineContent-module__canvas___nyUmZ",r="timelineContent-module__circle___FOAjD",l="timelineContent-module__tabsContainer___drNVG",a="timelineContent-module__tab___sCTOs",m="timelineContent-module__tabActive___Oa023",s={root:t,container:e,content:n,metricsContainer:o,metric:i,metricTitle:_,canvas:c,circle:r,tabsContainer:l,tab:a,tabActive:m};exports.canvas=c;exports.circle=r;exports.container=e;exports.content=n;exports.default=s;exports.metric=i;exports.metricTitle=_;exports.metricsContainer=o;exports.root=t;exports.tab=a;exports.tabActive=m;exports.tabsContainer=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="timelineContent-module__root___5V2gz",e="timelineContent-module__container___DSrBq",n="timelineContent-module__swiper___Pm56z",i="timelineContent-module__content___HS3bJ",o="timelineContent-module__metricsContainer___Bl9Mq",_="timelineContent-module__metric___QgjTy",c="timelineContent-module__metricTitle___NgmIf",r="timelineContent-module__canvas___nyUmZ",l="timelineContent-module__circle___FOAjD",m="timelineContent-module__tabsContainer___drNVG",a="timelineContent-module__tab___sCTOs",s="timelineContent-module__tabActive___Oa023",C={root:t,container:e,swiper:n,content:i,metricsContainer:o,metric:_,metricTitle:c,canvas:r,circle:l,tabsContainer:m,tab:a,tabActive:s};exports.canvas=r;exports.circle=l;exports.container=e;exports.content=i;exports.default=C;exports.metric=_;exports.metricTitle=c;exports.metricsContainer=o;exports.root=t;exports.swiper=n;exports.tab=a;exports.tabActive=s;exports.tabsContainer=m;

package/dist/modules/TrackProgress/components/TimelineContent/timelineContent.module.css.es.js

@@ -1,27 +1,29 @@
-const t = "timelineContent-module__root___5V2gz", e = "timelineContent-module__container___DSrBq", n = "timelineContent-module__content___HS3bJ", _ = "timelineContent-module__metricsContainer___Bl9Mq", o = "timelineContent-module__metric___QgjTy", i = "timelineContent-module__metricTitle___NgmIf", c = "timelineContent-module__canvas___nyUmZ", m = "timelineContent-module__circle___FOAjD", l = "timelineContent-module__tabsContainer___drNVG", a = "timelineContent-module__tab___sCTOs", r = "timelineContent-module__tabActive___Oa023", s = {
+const t = "timelineContent-module__root___5V2gz", e = "timelineContent-module__container___DSrBq", n = "timelineContent-module__swiper___Pm56z", _ = "timelineContent-module__content___HS3bJ", o = "timelineContent-module__metricsContainer___Bl9Mq", i = "timelineContent-module__metric___QgjTy", c = "timelineContent-module__metricTitle___NgmIf", m = "timelineContent-module__canvas___nyUmZ", l = "timelineContent-module__circle___FOAjD", r = "timelineContent-module__tabsContainer___drNVG", s = "timelineContent-module__tab___sCTOs", a = "timelineContent-module__tabActive___Oa023", C = {
   root: t,
   container: e,
-  content: n,
-  metricsContainer: _,
-  metric: o,
-  metricTitle: i,
-  canvas: c,
-  circle: m,
-  tabsContainer: l,
-  tab: a,
-  tabActive: r
+  swiper: n,
+  content: _,
+  metricsContainer: o,
+  metric: i,
+  metricTitle: c,
+  canvas: m,
+  circle: l,
+  tabsContainer: r,
+  tab: s,
+  tabActive: a
 };
 export {
-  c as canvas,
-  m as circle,
+  m as canvas,
+  l as circle,
   e as container,
-  n as content,
-  s as default,
-  o as metric,
-  i as metricTitle,
-  _ as metricsContainer,
+  _ as content,
+  C as default,
+  i as metric,
+  c as metricTitle,
+  o as metricsContainer,
   t as root,
-  a as tab,
-  r as tabActive,
-  l as tabsContainer
+  n as swiper,
+  s as tab,
+  a as tabActive,
+  r as tabsContainer
 };

package/dist/modules/TrackProgress/components/TimelineContent/utils.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(e){for(let t=e.length-1;t>0;t--){const n=Math.floor(Math.random()*(t+1));[e[t],e[n]]=[e[n],e[t]]}}function r(e,t){const n=[];for(let i=0;i<e.length;i++)e[i]===t&&n.push(i);return n}function c(e,t,n,i){p(t);for(let o=0;o<i&&o<t.length;o++)e[t[o]]=n}function a(e,t,n){const i=e+t+n,o=new Array(i).fill("optimal");let u=0,f=1,l=0;for(;Math.round(u)<i&&l<n;){const s=Math.round(u);o[s]==="optimal"&&(o[s]="outOfRange",l++),u+=f,f+=.3}if(l<n){const s=r(o,"optimal");c(o,s,"outOfRange",n-l)}const d=r(o,"optimal");return c(o,d,"inRange",t),o}exports.distributePoints=a;

package/dist/modules/TrackProgress/components/TimelineContent/utils.d.ts

@@ -0,0 +1,3 @@
+type PointType = 'optimal' | 'inRange' | 'outOfRange';
+export declare function distributePoints(optimal: number, inRange: number, outOfRange: number): PointType[];
+export {};

package/dist/modules/TrackProgress/components/TimelineContent/utils.es.js

@@ -0,0 +1,34 @@
+function d(n) {
+  for (let t = n.length - 1; t > 0; t--) {
+    const o = Math.floor(Math.random() * (t + 1));
+    [n[t], n[o]] = [n[o], n[t]];
+  }
+}
+function u(n, t) {
+  const o = [];
+  for (let l = 0; l < n.length; l++)
+    n[l] === t && o.push(l);
+  return o;
+}
+function r(n, t, o, l) {
+  d(t);
+  for (let e = 0; e < l && e < t.length; e++)
+    n[t[e]] = o;
+}
+function h(n, t, o) {
+  const l = n + t + o, e = new Array(l).fill("optimal");
+  let c = 0, s = 1, i = 0;
+  for (; Math.round(c) < l && i < o; ) {
+    const f = Math.round(c);
+    e[f] === "optimal" && (e[f] = "outOfRange", i++), c += s, s += 0.3;
+  }
+  if (i < o) {
+    const f = u(e, "optimal");
+    r(e, f, "outOfRange", o - i);
+  }
+  const p = u(e, "optimal");
+  return r(e, p, "inRange", t), e;
+}
+export {
+  h as distributePoints
+};

package/package.json

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