@zenpatient-org/healthspan-marketing-ui 0.1.43 → 0.1.44

package/dist/modules/ExpandingDetails/ExpandingDetails.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),H=require("../../node_modules/@gsap/react/src/index.cjs.js"),d=require("../../node_modules/gsap/index.cjs.js"),u=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),w=require("react"),A=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),g=require("../../components/Typography/Typography.cjs.js"),V=require("../../utils/debounce.cjs.js"),r=require("./expandingDetails.module.css.cjs.js");d.gsap.registerPlugin(u.ScrollTrigger);const $=({colorScheme:h,label:N,title:P,sections:b})=>{const c=w.useRef(null);return H.useGSAP(()=>{if(!c.current)return;const a=()=>{var S;d.gsap.killTweensOf("*"),u.ScrollTrigger.getAll().forEach(e=>e.kill());const o=d.gsap.utils.toArray('[data-scroll-id="section"]'),t=(S=c.current)==null?void 0:S.querySelector('[data-scroll-id="sections"]');if(!t)return;const f=d.gsap.timeline({scrollTrigger:{trigger:c.current,start:"top top",end:()=>`+=${o.length*500}`,scrub:1,markers:!1,pin:!0}}),p=t==null?void 0:t.querySelector('[data-scroll-id="heading"]');if(!p)return;d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="section"]'),{height:p.offsetHeight||0}),d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="protocol"]'),{scale:.5,yPercent:0}),d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="image-circle"]'),{scale:.5,yPercent:5});const y=window.innerWidth<768?1.2:2,m=window.innerWidth<768?1.2:2;o.forEach((e,E)=>{var x,q,T,j,v;const n=e==null?void 0:e.querySelector('[data-scroll-id="heading"]'),i=e==null?void 0:e.querySelector('[data-scroll-id="content"]');!n||!i||(f.to(e,{height:n.offsetHeight+i.offsetHeight}).to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:y,yPercent:50},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:m,yPercent:50},"<").to(i,{height:i.offsetHeight},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:1},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:1,yPercent:5},"<"),E<o.length-1&&f.to(e,{height:n.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:n.offsetHeight+i.offsetHeight},"<").to(((x=e.nextElementSibling)==null?void 0:x.querySelector('[data-scroll-id="section-title"]'))||null,{scale:y,yPercent:100},"<").to(((q=e.nextElementSibling)==null?void 0:q.querySelector('[data-scroll-id="section-index"]'))||null,{scale:m,yPercent:100},"<").to(((T=e.nextElementSibling)==null?void 0:T.querySelector('[data-scroll-id="content"]'))||null,{height:i.offsetHeight,yPercent:0},"<").to(((j=e.nextElementSibling)==null?void 0:j.querySelector('[data-scroll-id="protocol"]'))||null,{scale:1},"<").to(((v=e.nextElementSibling)==null?void 0:v.querySelector('[data-scroll-id="image-circle"]'))||null,{scale:1,yPercent:5},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:1,yPercent:-15},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:1,yPercent:-15},"<").to(i,{height:0,yPercent:0},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:0,yPercent:200},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:0,yPercent:200},"<"))})};a();const s=V.default(()=>{a()},200);return window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s),u.ScrollTrigger.getAll().forEach(o=>o.kill()),d.gsap.killTweensOf("*")}},{scope:c,dependencies:[c]}),l.jsx("div",{ref:c,className:`${r.default.root} ${r.default[h]}`,children:l.jsxs("div",{className:r.default.expandingDetailsWrapper,children:[l.jsxs("header",{"data-scroll-id":"header",className:r.default.header,children:[l.jsx(g.Typography,{as:"div",defaultVariant:"labelSm",emphasis:!0,className:r.default.label,children:N}),l.jsx(A.HighlightedTitle,{as:"div",defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:h,className:r.default.title,title:P})]}),l.jsx("div",{"data-scroll-id":"sections",className:r.default.sections,children:b.map((a,s)=>l.jsxs("div",{id:`section-${s+1}`,"data-scroll-id":"section",className:r.default.section,children:[l.jsxs("div",{"data-scroll-id":"heading",className:r.default.heading,children:[l.jsx("div",{"data-scroll-id":"section-title",className:r.default.sectionTitleWrapper,children:l.jsx(g.Typography,{as:"h3",defaultVariant:"headingSm",className:r.default.sectionTitle,children:a.title})}),l.jsx("div",{"data-scroll-id":"section-index",className:r.default.sectionIndexWrapper,children:l.jsxs(g.Typography,{as:"p",defaultVariant:"headingSm",className:r.default.sectionIndex,children:["(",String(s+1).padStart(2,"0"),")"]})})]}),l.jsxs("div",{"data-scroll-id":"content",className:r.default.content,children:[l.jsx("div",{"data-scroll-id":"protocol",className:r.default.protocolWrapper,children:l.jsx(g.Typography,{as:"div",defaultVariant:"bodyMd",mobileVariant:"bodySm",className:r.default.protocol,children:a.protocol})}),l.jsx("div",{"data-scroll-id":"image-circle",className:r.default.imageCircle,children:l.jsx("img",{src:a.image,alt:a.title})})]}),l.jsx("div",{className:r.default.leftBorder}),l.jsx("div",{className:r.default.rightBorder})]},a.title))})]})})};exports.ExpandingDetails=$;

package/dist/modules/ExpandingDetails/ExpandingDetails.d.ts

@@ -0,0 +1,3 @@
+import { ExpandingDetailsProps } from './types';
+
+export declare const ExpandingDetails: ({ colorScheme, label, title, sections }: ExpandingDetailsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/ExpandingDetails/ExpandingDetails.es.js

@@ -0,0 +1,157 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { useGSAP as A } from "../../node_modules/@gsap/react/src/index.es.js";
+import { gsap as d } from "../../node_modules/gsap/index.es.js";
+import { ScrollTrigger as g } from "../../node_modules/gsap/ScrollTrigger.es.js";
+import { useRef as V } from "react";
+import { HighlightedTitle as W } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { Typography as m } from "../../components/Typography/Typography.es.js";
+import k from "../../utils/debounce.es.js";
+import l from "./expandingDetails.module.css.es.js";
+d.registerPlugin(g);
+const O = ({ colorScheme: u, label: E, title: w, sections: T }) => {
+  const c = V(null);
+  return A(
+    () => {
+      if (!c.current) return;
+      const a = () => {
+        var q;
+        d.killTweensOf("*"), g.getAll().forEach((e) => e.kill());
+        const n = d.utils.toArray('[data-scroll-id="section"]'), r = (q = c.current) == null ? void 0 : q.querySelector('[data-scroll-id="sections"]');
+        if (!r) return;
+        const f = d.timeline({
+          scrollTrigger: {
+            trigger: c.current,
+            start: "top top",
+            end: () => `+=${n.length * 500}`,
+            scrub: 1,
+            markers: !1,
+            pin: !0
+          }
+        }), p = r == null ? void 0 : r.querySelector('[data-scroll-id="heading"]');
+        if (!p) return;
+        d.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="section"]'), {
+          height: p.offsetHeight || 0
+        }), d.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="protocol"]'), {
+          scale: 0.5,
+          yPercent: 0
+        }), d.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="image-circle"]'), {
+          scale: 0.5,
+          yPercent: 5
+        });
+        const y = window.innerWidth < 768 ? 1.2 : 2, S = window.innerWidth < 768 ? 1.2 : 2;
+        n.forEach((e, H) => {
+          var v, N, x, P, b;
+          const h = e == null ? void 0 : e.querySelector('[data-scroll-id="heading"]'), i = e == null ? void 0 : e.querySelector('[data-scroll-id="content"]');
+          !h || !i || (f.to(e, { height: h.offsetHeight + i.offsetHeight }).to(
+            e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
+            { scale: y, yPercent: 50 },
+            "<"
+          ).to(
+            e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
+            { scale: S, yPercent: 50 },
+            "<"
+          ).to(i, { height: i.offsetHeight }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'), { scale: 1, yPercent: 5 }, "<"), H < n.length - 1 && f.to(e, { height: h.offsetHeight, delay: 0.5 }).to(
+            e.nextElementSibling,
+            { height: h.offsetHeight + i.offsetHeight },
+            "<"
+          ).to(
+            ((v = e.nextElementSibling) == null ? void 0 : v.querySelector('[data-scroll-id="section-title"]')) || null,
+            { scale: y, yPercent: 100 },
+            "<"
+          ).to(
+            ((N = e.nextElementSibling) == null ? void 0 : N.querySelector('[data-scroll-id="section-index"]')) || null,
+            { scale: S, yPercent: 100 },
+            "<"
+          ).to(
+            ((x = e.nextElementSibling) == null ? void 0 : x.querySelector('[data-scroll-id="content"]')) || null,
+            { height: i.offsetHeight, yPercent: 0 },
+            "<"
+          ).to(
+            ((P = e.nextElementSibling) == null ? void 0 : P.querySelector('[data-scroll-id="protocol"]')) || null,
+            { scale: 1 },
+            "<"
+          ).to(
+            ((b = e.nextElementSibling) == null ? void 0 : b.querySelector('[data-scroll-id="image-circle"]')) || null,
+            { scale: 1, yPercent: 5 },
+            "<"
+          ).to(
+            e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
+            { scale: 1, yPercent: -15 },
+            "<"
+          ).to(
+            e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
+            { scale: 1, yPercent: -15 },
+            "<"
+          ).to(i, { height: 0, yPercent: 0 }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 0, yPercent: 200 }, "<").to(
+            e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
+            { scale: 0, yPercent: 200 },
+            "<"
+          ));
+        });
+      };
+      a();
+      const s = k(() => {
+        a();
+      }, 200);
+      return window.addEventListener("resize", s), () => {
+        window.removeEventListener("resize", s), g.getAll().forEach((n) => n.kill()), d.killTweensOf("*");
+      };
+    },
+    {
+      scope: c,
+      dependencies: [c]
+    }
+  ), /* @__PURE__ */ t("div", { ref: c, className: `${l.root} ${l[u]}`, children: /* @__PURE__ */ o("div", { className: l.expandingDetailsWrapper, children: [
+    /* @__PURE__ */ o("header", { "data-scroll-id": "header", className: l.header, children: [
+      /* @__PURE__ */ t(m, { as: "div", defaultVariant: "labelSm", emphasis: !0, className: l.label, children: E }),
+      /* @__PURE__ */ t(
+        W,
+        {
+          as: "div",
+          defaultVariant: "displayMd",
+          mobileVariant: "headingXl",
+          colorScheme: u,
+          className: l.title,
+          title: w
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { "data-scroll-id": "sections", className: l.sections, children: T.map((a, s) => /* @__PURE__ */ o(
+      "div",
+      {
+        id: `section-${s + 1}`,
+        "data-scroll-id": "section",
+        className: l.section,
+        children: [
+          /* @__PURE__ */ o("div", { "data-scroll-id": "heading", className: l.heading, children: [
+            /* @__PURE__ */ t("div", { "data-scroll-id": "section-title", className: l.sectionTitleWrapper, children: /* @__PURE__ */ t(m, { as: "h3", defaultVariant: "headingSm", className: l.sectionTitle, children: a.title }) }),
+            /* @__PURE__ */ t("div", { "data-scroll-id": "section-index", className: l.sectionIndexWrapper, children: /* @__PURE__ */ o(m, { as: "p", defaultVariant: "headingSm", className: l.sectionIndex, children: [
+              "(",
+              String(s + 1).padStart(2, "0"),
+              ")"
+            ] }) })
+          ] }),
+          /* @__PURE__ */ o("div", { "data-scroll-id": "content", className: l.content, children: [
+            /* @__PURE__ */ t("div", { "data-scroll-id": "protocol", className: l.protocolWrapper, children: /* @__PURE__ */ t(
+              m,
+              {
+                as: "div",
+                defaultVariant: "bodyMd",
+                mobileVariant: "bodySm",
+                className: l.protocol,
+                children: a.protocol
+              }
+            ) }),
+            /* @__PURE__ */ t("div", { "data-scroll-id": "image-circle", className: l.imageCircle, children: /* @__PURE__ */ t("img", { src: a.image, alt: a.title }) })
+          ] }),
+          /* @__PURE__ */ t("div", { className: l.leftBorder }),
+          /* @__PURE__ */ t("div", { className: l.rightBorder })
+        ]
+      },
+      a.title
+    )) })
+  ] }) });
+};
+export {
+  O as ExpandingDetails
+};

package/dist/modules/ExpandingDetails/expandingDetails.module.css.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="expandingDetails-module__root___5WLQh",t="expandingDetails-module__dark___BhUf9",o="expandingDetails-module__expandingDetailsWrapper___sqLS5",n="expandingDetails-module__header___Rp1BD",r="expandingDetails-module__title___5WsER",i="expandingDetails-module__label___w2Sjs",_="expandingDetails-module__sections___xpvak",a="expandingDetails-module__section___zgXvg",l="expandingDetails-module__leftBorder___lZI-L",s="expandingDetails-module__rightBorder___xfwvL",d="expandingDetails-module__topLeftCorner___sT8-Q",p="expandingDetails-module__topRightCorner___q9HbO",c="expandingDetails-module__bottomLeftCorner___E3e0F",g="expandingDetails-module__bottomRightCorner___VQJBu",x="expandingDetails-module__heading___htlX-",m="expandingDetails-module__sectionTitleWrapper___WxS9B",u="expandingDetails-module__sectionIndexWrapper___l-3VD",D="expandingDetails-module__content___1uGIY",h="expandingDetails-module__protocolWrapper___nq7ij",C="expandingDetails-module__imageCircle___HZJB-",W="expandingDetails-module__sectionIndex___spgOf",f={root:e,dark:t,expandingDetailsWrapper:o,header:n,title:r,label:i,sections:_,section:a,leftBorder:l,rightBorder:s,topLeftCorner:d,topRightCorner:p,bottomLeftCorner:c,bottomRightCorner:g,heading:x,sectionTitleWrapper:m,sectionIndexWrapper:u,content:D,protocolWrapper:h,imageCircle:C,sectionIndex:W};exports.bottomLeftCorner=c;exports.bottomRightCorner=g;exports.content=D;exports.dark=t;exports.default=f;exports.expandingDetailsWrapper=o;exports.header=n;exports.heading=x;exports.imageCircle=C;exports.label=i;exports.leftBorder=l;exports.protocolWrapper=h;exports.rightBorder=s;exports.root=e;exports.section=a;exports.sectionIndex=W;exports.sectionIndexWrapper=u;exports.sectionTitleWrapper=m;exports.sections=_;exports.title=r;exports.topLeftCorner=d;exports.topRightCorner=p;

package/dist/modules/ExpandingDetails/expandingDetails.module.css.es.js

@@ -0,0 +1,47 @@
+const e = "expandingDetails-module__root___5WLQh", t = "expandingDetails-module__dark___BhUf9", n = "expandingDetails-module__expandingDetailsWrapper___sqLS5", o = "expandingDetails-module__header___Rp1BD", _ = "expandingDetails-module__title___5WsER", i = "expandingDetails-module__label___w2Sjs", r = "expandingDetails-module__sections___xpvak", a = "expandingDetails-module__section___zgXvg", s = "expandingDetails-module__leftBorder___lZI-L", l = "expandingDetails-module__rightBorder___xfwvL", d = "expandingDetails-module__topLeftCorner___sT8-Q", p = "expandingDetails-module__topRightCorner___q9HbO", c = "expandingDetails-module__bottomLeftCorner___E3e0F", g = "expandingDetails-module__bottomRightCorner___VQJBu", x = "expandingDetails-module__heading___htlX-", m = "expandingDetails-module__sectionTitleWrapper___WxS9B", D = "expandingDetails-module__sectionIndexWrapper___l-3VD", u = "expandingDetails-module__content___1uGIY", h = "expandingDetails-module__protocolWrapper___nq7ij", C = "expandingDetails-module__imageCircle___HZJB-", W = "expandingDetails-module__sectionIndex___spgOf", f = {
+  root: e,
+  dark: t,
+  expandingDetailsWrapper: n,
+  header: o,
+  title: _,
+  label: i,
+  sections: r,
+  section: a,
+  leftBorder: s,
+  rightBorder: l,
+  topLeftCorner: d,
+  topRightCorner: p,
+  bottomLeftCorner: c,
+  bottomRightCorner: g,
+  heading: x,
+  sectionTitleWrapper: m,
+  sectionIndexWrapper: D,
+  content: u,
+  protocolWrapper: h,
+  imageCircle: C,
+  sectionIndex: W
+};
+export {
+  c as bottomLeftCorner,
+  g as bottomRightCorner,
+  u as content,
+  t as dark,
+  f as default,
+  n as expandingDetailsWrapper,
+  o as header,
+  x as heading,
+  C as imageCircle,
+  i as label,
+  s as leftBorder,
+  h as protocolWrapper,
+  l as rightBorder,
+  e as root,
+  a as section,
+  W as sectionIndex,
+  D as sectionIndexWrapper,
+  m as sectionTitleWrapper,
+  r as sections,
+  _ as title,
+  d as topLeftCorner,
+  p as topRightCorner
+};

package/dist/modules/ExpandingDetails/index.d.ts

@@ -0,0 +1 @@
+export { ExpandingDetails } from './ExpandingDetails';

package/dist/modules/ExpandingDetails/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { TColorScheme } from '../../types/common';
+
+export type ExpandingDetailsProps = {
+    colorScheme: TColorScheme;
+    label: string;
+    title: ReactNode;
+    sections: {
+        title: string;
+        protocol: React.ReactNode;
+        image: string;
+    }[];
+};

package/dist/modules/IndividualProductCard/IndividualProductCard.d.ts

@@ -9,8 +9,8 @@ type IndividualProductCardProps = {
     description?: string;
     label?: string;
     rating?: {
-        stars: number;
-        totalReviews: number;
+        stars?: number;
+        totalReviews?: number;
     };
     button: {
         label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zenpatient-org/healthspan-marketing-ui",
-    "version": "0.1.43",
+    "version": "0.1.44",
     "description": "Design system",
     "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
@@ -395,6 +395,11 @@
             "import": "./dist/modules/LongevityPathways/LongevityPathways.es.js",
             "require": "./dist/modules/LongevityPathways/LongevityPathways.cjs.js"
         },
+        "./ExpandingDetails": {
+            "types": "./dist/modules/ExpandingDetails/ExpandingDetails.d.ts",
+            "import": "./dist/modules/ExpandingDetails/ExpandingDetails.es.js",
+            "require": "./dist/modules/ExpandingDetails/ExpandingDetails.cjs.js"
+        },
         "./Compare": {
             "types": "./dist/modules/Compare/Compare.d.ts",
             "import": "./dist/modules/Compare/Compare.es.js",

package/dist/components/ComplexImageCarousel/complexImageCarousel.module.css.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="complexImageCarousel-module__container___uoYKj",o="complexImageCarousel-module__carouselArea___dqNWo",s="complexImageCarousel-module__slideContainer___H-r26",r="complexImageCarousel-module__description___R8XsG",t="complexImageCarousel-module__descriptionItem___SAPt8",_="complexImageCarousel-module__progressButtonContainer___l3Qih",l="complexImageCarousel-module__progressButton___b78tE",a={container:e,carouselArea:o,slideContainer:s,"size-atom":"complexImageCarousel-module__size-atom___t7PmI","size-small":"complexImageCarousel-module__size-small___mjSZM","size-medium":"complexImageCarousel-module__size-medium___M-0BQ","size-large":"complexImageCarousel-module__size-large___GITeg","size-x-large":"complexImageCarousel-module__size-x-large___e-BOY",description:r,descriptionItem:t,progressButtonContainer:_,progressButton:l};exports.carouselArea=o;exports.container=e;exports.default=a;exports.description=r;exports.descriptionItem=t;exports.progressButton=l;exports.progressButtonContainer=_;exports.slideContainer=s;

package/dist/components/ComplexImageCarousel/complexImageCarousel.module.css.es.js

@@ -1,24 +0,0 @@
-const e = "complexImageCarousel-module__container___uoYKj", o = "complexImageCarousel-module__carouselArea___dqNWo", s = "complexImageCarousel-module__slideContainer___H-r26", _ = "complexImageCarousel-module__description___R8XsG", l = "complexImageCarousel-module__descriptionItem___SAPt8", r = "complexImageCarousel-module__progressButtonContainer___l3Qih", a = "complexImageCarousel-module__progressButton___b78tE", m = {
-  container: e,
-  carouselArea: o,
-  slideContainer: s,
-  "size-atom": "complexImageCarousel-module__size-atom___t7PmI",
-  "size-small": "complexImageCarousel-module__size-small___mjSZM",
-  "size-medium": "complexImageCarousel-module__size-medium___M-0BQ",
-  "size-large": "complexImageCarousel-module__size-large___GITeg",
-  "size-x-large": "complexImageCarousel-module__size-x-large___e-BOY",
-  description: _,
-  descriptionItem: l,
-  progressButtonContainer: r,
-  progressButton: a
-};
-export {
-  o as carouselArea,
-  e as container,
-  m as default,
-  _ as description,
-  l as descriptionItem,
-  a as progressButton,
-  r as progressButtonContainer,
-  s as slideContainer
-};