@zenpatient-org/healthspan-marketing-ui 0.1.123 → 0.1.124

package/dist/modules/SlidingTabsGallery/SlidingTabsGallery.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),y=require("../../node_modules/gsap/index.cjs.js"),p=require("../../node_modules/gsap/Flip.cjs.js"),N=require("../../node_modules/@gsap/react/src/index.cjs.js"),R=require("../../pageComponents/Bubbles/Bubbles.cjs.js"),q=require("../../pageComponents/Gradient/Gradient.cjs.js"),x=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),C=require("../../utils/cn/cn.cjs.js"),b=require("../../components/Typography/Typography.cjs.js"),_=require("../../components/Icon/Icon.cjs.js"),t=require("./SlidingTabsGallery.module.css.cjs.js");y.gsap.registerPlugin(p.Flip);const S=({title:j,tabs:o,withBubbles:m})=>{const s=f.useRef(null),a=f.useRef(null),[l,h]=f.useState(o[0]);N.useGSAP(()=>{const i=s.current,n=a.current,u=r=>{if(i&&n&&r){const T=n.getBoundingClientRect(),g=r.getBoundingClientRect();y.gsap.set(i,{left:g.left-T.left,top:g.top-T.top,width:g.width,height:g.height})}};if(n&&n.children.length>1){const r=n.children[1];r&&u(r)}let c;const d=()=>{clearTimeout(c),c=setTimeout(()=>{if(i&&n&&n.children.length>1&&o.length>0){const r=n.children[1];r&&(u(r),h(o[0]))}},250)};return window.addEventListener("resize",d),()=>{clearTimeout(c),window.removeEventListener("resize",d)}},{dependencies:[o,h],scope:a});const v=(i,n)=>{if(i===l)return;const u=p.Flip.getState(s.current);if(h(i),s.current&&a.current&&a.current.children.length>n+1){const c=a.current.children[n+1];if(c){const d=a.current.getBoundingClientRect(),r=c.getBoundingClientRect();s.current.style.left=`${r.left-d.left}px`,s.current.style.top=`${r.top-d.top}px`,s.current.style.width=`${r.width}px`,s.current.style.height=`${r.height}px`}}p.Flip.from(u,{targets:s.current,duration:.3,ease:"power1.inOut"})};return e.jsxs("section",{className:t.default.root,children:[m&&e.jsx(R.Bubbles,{className:t.default.bubbles}),e.jsxs("div",{className:t.default.container,children:[e.jsx(x.HighlightedTitle,{as:"div",title:j,className:t.default.header,colorScheme:"dark"}),e.jsxs("div",{className:t.default.content,children:[l.image&&e.jsx("div",{className:t.default.imageWrap,children:e.jsx("img",{src:l.image,alt:"Total Care",className:t.default.image})}),e.jsx("div",{className:t.default.tabsContainer,children:e.jsxs("div",{ref:a,className:t.default.tabs,children:[e.jsx("div",{ref:s,id:"marker",className:t.default.marker}),o.map((i,n)=>e.jsxs("button",{className:C.cn(t.default.tab,{[t.default.active]:l===i}),onClick:()=>v(i,n),children:[i.icon&&e.jsx(b.Typography,{defaultVariant:"displayMd",className:t.default.icon,children:e.jsx(_.Icon,{name:i.icon})}),e.jsx(b.Typography,{defaultVariant:"displayMd",className:t.default.hideMobile,children:i.label})]},i.label))]})}),l.description&&e.jsx("div",{className:t.default.description,children:e.jsx(x.HighlightedTitle,{as:"div",defaultVariant:"bodyMd",className:t.default.descriptionText,title:l.description,colorScheme:"dark"})})]})]}),m&&e.jsx(q.Gradient,{variant:"blue"})]})};exports.SlidingTabsGallery=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),y=require("../../node_modules/gsap/index.cjs.js"),p=require("../../node_modules/gsap/Flip.cjs.js"),N=require("../../node_modules/@gsap/react/src/index.cjs.js"),R=require("../../pageComponents/Bubbles/Bubbles.cjs.js"),q=require("../../pageComponents/Gradient/Gradient.cjs.js"),b=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),C=require("../../utils/cn/cn.cjs.js"),x=require("../../components/Typography/Typography.cjs.js"),_=require("../../components/Icon/Icon.cjs.js"),t=require("./SlidingTabsGallery.module.css.cjs.js");y.gsap.registerPlugin(p.Flip);const S=({title:j,tabs:o,withBubbles:m})=>{const s=f.useRef(null),a=f.useRef(null),[l,h]=f.useState(o[0]);N.useGSAP(()=>{const i=s.current,n=a.current,u=r=>{if(i&&n&&r){const T=n.getBoundingClientRect(),g=r.getBoundingClientRect();y.gsap.set(i,{left:g.left-T.left,top:g.top-T.top,width:g.width,height:g.height})}};if(n&&n.children.length>1){const r=n.children[1];r&&u(r)}let c;const d=()=>{clearTimeout(c),c=setTimeout(()=>{if(i&&n&&n.children.length>1&&o.length>0){const r=n.children[1];r&&(u(r),h(o[0]))}},250)};return window.addEventListener("resize",d),()=>{clearTimeout(c),window.removeEventListener("resize",d)}},{dependencies:[o,h],scope:a});const v=(i,n)=>{if(i===l)return;const u=p.Flip.getState(s.current);if(h(i),s.current&&a.current&&a.current.children.length>n+1){const c=a.current.children[n+1];if(c){const d=a.current.getBoundingClientRect(),r=c.getBoundingClientRect();s.current.style.left=`${r.left-d.left}px`,s.current.style.top=`${r.top-d.top}px`,s.current.style.width=`${r.width}px`,s.current.style.height=`${r.height}px`}}p.Flip.from(u,{targets:s.current,duration:.3,ease:"power1.inOut"})};return e.jsxs("section",{className:t.default.root,children:[m&&e.jsx(R.Bubbles,{className:t.default.bubbles}),e.jsxs("div",{className:t.default.container,children:[e.jsx(b.HighlightedTitle,{as:"div",title:j,className:t.default.header,colorScheme:"dark"}),e.jsxs("div",{className:t.default.content,children:[l.image&&e.jsx("div",{className:t.default.imageWrap,children:e.jsx("img",{src:l.image,alt:"Total Care",className:t.default.image})}),e.jsx("div",{className:t.default.tabsContainer,children:e.jsxs("div",{ref:a,className:t.default.tabs,children:[e.jsx("div",{ref:s,id:"marker",className:t.default.marker}),o.map((i,n)=>e.jsxs("button",{className:C.cn(t.default.tab,{[t.default.active]:l===i}),onClick:()=>v(i,n),children:[i.icon&&e.jsx(x.Typography,{defaultVariant:"displayMd",className:t.default.icon,children:e.jsx(_.Icon,{name:i.icon})}),e.jsx(x.Typography,{defaultVariant:"displayMd",className:t.default.hideMobile,children:i.label})]},i.label))]})}),l.description&&e.jsx("div",{className:t.default.description,children:e.jsx(b.HighlightedTitle,{as:"div",defaultVariant:"bodyXl",mobileVariant:"bodyMd",className:t.default.descriptionText,title:l.description,colorScheme:"dark"})})]})]}),m&&e.jsx(q.Gradient,{variant:"blue"})]})};exports.SlidingTabsGallery=S;

package/dist/modules/SlidingTabsGallery/SlidingTabsGallery.es.js

@@ -1,25 +1,25 @@
 "use client";
 import { jsxs as m, jsx as n } from "react/jsx-runtime";
 import { useRef as T, useState as k } from "react";
-import { gsap as C } from "../../node_modules/gsap/index.es.js";
+import { gsap as y } from "../../node_modules/gsap/index.es.js";
 import { Flip as f } from "../../node_modules/gsap/Flip.es.js";
 import { useGSAP as w } from "../../node_modules/@gsap/react/src/index.es.js";
 import { Bubbles as S } from "../../pageComponents/Bubbles/Bubbles.es.js";
 import { Gradient as x } from "../../pageComponents/Gradient/Gradient.es.js";
-import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
+import { HighlightedTitle as b } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
 import { cn as B } from "../../utils/cn/cn.es.js";
-import { Typography as b } from "../../components/Typography/Typography.es.js";
+import { Typography as N } from "../../components/Typography/Typography.es.js";
 import { Icon as M } from "../../components/Icon/Icon.es.js";
 import e from "./SlidingTabsGallery.module.css.es.js";
-C.registerPlugin(f);
-const I = ({ title: R, tabs: l, withBubbles: g }) => {
-  const c = T(null), o = T(null), [s, p] = k(l[0]);
+y.registerPlugin(f);
+const I = ({ title: C, tabs: l, withBubbles: g }) => {
+  const o = T(null), a = T(null), [c, p] = k(l[0]);
   w(
     () => {
-      const t = c.current, r = o.current, u = (i) => {
+      const t = o.current, r = a.current, u = (i) => {
         if (t && r && i) {
           const v = r.getBoundingClientRect(), h = i.getBoundingClientRect();
-          C.set(t, {
+          y.set(t, {
             left: h.left - v.left,
             top: h.top - v.top,
             width: h.width,
@@ -31,9 +31,9 @@ const I = ({ title: R, tabs: l, withBubbles: g }) => {
         const i = r.children[1];
         i && u(i);
       }
-      let a;
+      let s;
       const d = () => {
-        clearTimeout(a), a = setTimeout(() => {
+        clearTimeout(s), s = setTimeout(() => {
           if (t && r && r.children.length > 1 && l.length > 0) {
             const i = r.children[1];
             i && (u(i), p(l[0]));
@@ -41,23 +41,23 @@ const I = ({ title: R, tabs: l, withBubbles: g }) => {
         }, 250);
       };
       return window.addEventListener("resize", d), () => {
-        clearTimeout(a), window.removeEventListener("resize", d);
+        clearTimeout(s), window.removeEventListener("resize", d);
       };
     },
-    { dependencies: [l, p], scope: o }
+    { dependencies: [l, p], scope: a }
   );
-  const y = (t, r) => {
-    if (t === s) return;
-    const u = f.getState(c.current);
-    if (p(t), c.current && o.current && o.current.children.length > r + 1) {
-      const a = o.current.children[r + 1];
-      if (a) {
-        const d = o.current.getBoundingClientRect(), i = a.getBoundingClientRect();
-        c.current.style.left = `${i.left - d.left}px`, c.current.style.top = `${i.top - d.top}px`, c.current.style.width = `${i.width}px`, c.current.style.height = `${i.height}px`;
+  const R = (t, r) => {
+    if (t === c) return;
+    const u = f.getState(o.current);
+    if (p(t), o.current && a.current && a.current.children.length > r + 1) {
+      const s = a.current.children[r + 1];
+      if (s) {
+        const d = a.current.getBoundingClientRect(), i = s.getBoundingClientRect();
+        o.current.style.left = `${i.left - d.left}px`, o.current.style.top = `${i.top - d.top}px`, o.current.style.width = `${i.width}px`, o.current.style.height = `${i.height}px`;
       }
     }
     f.from(u, {
-      targets: c.current,
+      targets: o.current,
       duration: 0.3,
       ease: "power1.inOut"
     });
@@ -65,33 +65,34 @@ const I = ({ title: R, tabs: l, withBubbles: g }) => {
   return /* @__PURE__ */ m("section", { className: e.root, children: [
     g && /* @__PURE__ */ n(S, { className: e.bubbles }),
     /* @__PURE__ */ m("div", { className: e.container, children: [
-      /* @__PURE__ */ n(N, { as: "div", title: R, className: e.header, colorScheme: "dark" }),
+      /* @__PURE__ */ n(b, { as: "div", title: C, className: e.header, colorScheme: "dark" }),
       /* @__PURE__ */ m("div", { className: e.content, children: [
-        s.image && /* @__PURE__ */ n("div", { className: e.imageWrap, children: /* @__PURE__ */ n("img", { src: s.image, alt: "Total Care", className: e.image }) }),
-        /* @__PURE__ */ n("div", { className: e.tabsContainer, children: /* @__PURE__ */ m("div", { ref: o, className: e.tabs, children: [
-          /* @__PURE__ */ n("div", { ref: c, id: "marker", className: e.marker }),
+        c.image && /* @__PURE__ */ n("div", { className: e.imageWrap, children: /* @__PURE__ */ n("img", { src: c.image, alt: "Total Care", className: e.image }) }),
+        /* @__PURE__ */ n("div", { className: e.tabsContainer, children: /* @__PURE__ */ m("div", { ref: a, className: e.tabs, children: [
+          /* @__PURE__ */ n("div", { ref: o, id: "marker", className: e.marker }),
           l.map((t, r) => /* @__PURE__ */ m(
             "button",
             {
               className: B(e.tab, {
-                [e.active]: s === t
+                [e.active]: c === t
               }),
-              onClick: () => y(t, r),
+              onClick: () => R(t, r),
               children: [
-                t.icon && /* @__PURE__ */ n(b, { defaultVariant: "displayMd", className: e.icon, children: /* @__PURE__ */ n(M, { name: t.icon }) }),
-                /* @__PURE__ */ n(b, { defaultVariant: "displayMd", className: e.hideMobile, children: t.label })
+                t.icon && /* @__PURE__ */ n(N, { defaultVariant: "displayMd", className: e.icon, children: /* @__PURE__ */ n(M, { name: t.icon }) }),
+                /* @__PURE__ */ n(N, { defaultVariant: "displayMd", className: e.hideMobile, children: t.label })
               ]
             },
             t.label
           ))
         ] }) }),
-        s.description && /* @__PURE__ */ n("div", { className: e.description, children: /* @__PURE__ */ n(
-          N,
+        c.description && /* @__PURE__ */ n("div", { className: e.description, children: /* @__PURE__ */ n(
+          b,
           {
             as: "div",
-            defaultVariant: "bodyMd",
+            defaultVariant: "bodyXl",
+            mobileVariant: "bodyMd",
             className: e.descriptionText,
-            title: s.description,
+            title: c.description,
             colorScheme: "dark"
           }
         ) })

package/package.json

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