@zenpatient-org/healthspan-marketing-ui 0.1.26 → 0.1.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),
|
|
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 n=s.current,i=a.current,u=r=>{if(n&&i&&r){const T=i.getBoundingClientRect(),g=r.getBoundingClientRect();y.gsap.set(n,{left:g.left-T.left,top:g.top-T.top,width:g.width,height:g.height})}};if(i&&i.children.length>1){const r=i.children[1];r&&u(r)}let c;const d=()=>{clearTimeout(c),c=setTimeout(()=>{if(n&&i&&i.children.length>1&&o.length>0){const r=i.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=(n,i)=>{if(n===l)return;const u=p.Flip.getState(s.current);if(h(n),s.current&&a.current&&a.current.children.length>i+1){const c=a.current.children[i+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((n,i)=>e.jsxs("button",{className:C.cn(t.default.tab,{[t.default.active]:l===n}),onClick:()=>v(n,i),children:[n.icon&&e.jsx(b.Typography,{defaultVariant:"displayMd",className:t.default.icon,children:e.jsx(_.Icon,{name:n.icon})}),e.jsx(b.Typography,{defaultVariant:"headingXs",children:n.label})]},n.label))]})}),l.description&&e.jsx("div",{className:t.default.description,children:e.jsx(x.HighlightedTitle,{as:"div",defaultVariant:"headingXs",mobileVariant:"bodyMd",className:t.default.descriptionText,title:l.description,colorScheme:"dark"})})]})]}),m&&e.jsx(q.Gradient,{variant:"blue"})]})};exports.SlidingTabsGallery=S;
|
|
@@ -5,6 +5,5 @@ export type SlidingTabsGalleryProps = {
|
|
|
5
5
|
title: ReactNode;
|
|
6
6
|
tabs: ReadonlyArray<TContentTab>;
|
|
7
7
|
withBubbles?: boolean;
|
|
8
|
-
withGradient?: boolean;
|
|
9
8
|
};
|
|
10
|
-
export declare const SlidingTabsGallery: ({ title, tabs, withBubbles
|
|
9
|
+
export declare const SlidingTabsGallery: ({ title, tabs, withBubbles }: SlidingTabsGalleryProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as m, jsx as n } from "react/jsx-runtime";
|
|
3
|
-
import { useRef as
|
|
4
|
-
import { gsap as
|
|
3
|
+
import { useRef as T, useState as k } from "react";
|
|
4
|
+
import { gsap as C } from "../../node_modules/gsap/index.es.js";
|
|
5
5
|
import { Flip as f } from "../../node_modules/gsap/Flip.es.js";
|
|
6
|
-
import { useGSAP as
|
|
6
|
+
import { useGSAP as w } from "../../node_modules/@gsap/react/src/index.es.js";
|
|
7
7
|
import { Bubbles as S } from "../../pageComponents/Bubbles/Bubbles.es.js";
|
|
8
8
|
import { Gradient as x } from "../../pageComponents/Gradient/Gradient.es.js";
|
|
9
|
-
import { HighlightedTitle as
|
|
10
|
-
import { cn as
|
|
9
|
+
import { HighlightedTitle as N } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
|
|
10
|
+
import { cn as B } from "../../utils/cn/cn.es.js";
|
|
11
11
|
import { Typography as b } from "../../components/Typography/Typography.es.js";
|
|
12
|
-
import { Icon as
|
|
12
|
+
import { Icon as z } from "../../components/Icon/Icon.es.js";
|
|
13
13
|
import e from "./SlidingTabsGallery.module.css.es.js";
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
const a =
|
|
17
|
-
|
|
14
|
+
C.registerPlugin(f);
|
|
15
|
+
const H = ({ title: R, tabs: l, withBubbles: g }) => {
|
|
16
|
+
const a = T(null), c = T(null), [o, p] = k(l[0]);
|
|
17
|
+
w(
|
|
18
18
|
() => {
|
|
19
19
|
const t = a.current, r = c.current, u = (i) => {
|
|
20
20
|
if (t && r && i) {
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
left: h.left -
|
|
24
|
-
top: h.top -
|
|
21
|
+
const v = r.getBoundingClientRect(), h = i.getBoundingClientRect();
|
|
22
|
+
C.set(t, {
|
|
23
|
+
left: h.left - v.left,
|
|
24
|
+
top: h.top - v.top,
|
|
25
25
|
width: h.width,
|
|
26
26
|
height: h.height
|
|
27
27
|
});
|
|
@@ -46,7 +46,7 @@ const I = ({ title: C, tabs: l, withBubbles: R, withGradient: y }) => {
|
|
|
46
46
|
},
|
|
47
47
|
{ dependencies: [l, p], scope: c }
|
|
48
48
|
);
|
|
49
|
-
const
|
|
49
|
+
const y = (t, r) => {
|
|
50
50
|
if (t === o) return;
|
|
51
51
|
const u = f.getState(a.current);
|
|
52
52
|
if (p(t), a.current && c.current && c.current.children.length > r + 1) {
|
|
@@ -63,9 +63,9 @@ const I = ({ title: C, tabs: l, withBubbles: R, withGradient: y }) => {
|
|
|
63
63
|
});
|
|
64
64
|
};
|
|
65
65
|
return /* @__PURE__ */ m("section", { className: e.root, children: [
|
|
66
|
-
|
|
66
|
+
g && /* @__PURE__ */ n(S, { className: e.bubbles }),
|
|
67
67
|
/* @__PURE__ */ m("div", { className: e.container, children: [
|
|
68
|
-
/* @__PURE__ */ n(
|
|
68
|
+
/* @__PURE__ */ n(N, { as: "div", title: R, className: e.header, colorScheme: "dark" }),
|
|
69
69
|
/* @__PURE__ */ m("div", { className: e.content, children: [
|
|
70
70
|
o.image && /* @__PURE__ */ n("div", { className: e.imageWrap, children: /* @__PURE__ */ n("img", { src: o.image, alt: "Total Care", className: e.image }) }),
|
|
71
71
|
/* @__PURE__ */ n("div", { className: e.tabsContainer, children: /* @__PURE__ */ m("div", { ref: c, className: e.tabs, children: [
|
|
@@ -73,12 +73,12 @@ const I = ({ title: C, tabs: l, withBubbles: R, withGradient: y }) => {
|
|
|
73
73
|
l.map((t, r) => /* @__PURE__ */ m(
|
|
74
74
|
"button",
|
|
75
75
|
{
|
|
76
|
-
className:
|
|
76
|
+
className: B(e.tab, {
|
|
77
77
|
[e.active]: o === t
|
|
78
78
|
}),
|
|
79
|
-
onClick: () =>
|
|
79
|
+
onClick: () => y(t, r),
|
|
80
80
|
children: [
|
|
81
|
-
t.icon && /* @__PURE__ */ n(b, { defaultVariant: "displayMd", className: e.icon, children: /* @__PURE__ */ n(
|
|
81
|
+
t.icon && /* @__PURE__ */ n(b, { defaultVariant: "displayMd", className: e.icon, children: /* @__PURE__ */ n(z, { name: t.icon }) }),
|
|
82
82
|
/* @__PURE__ */ n(b, { defaultVariant: "headingXs", children: t.label })
|
|
83
83
|
]
|
|
84
84
|
},
|
|
@@ -86,7 +86,7 @@ const I = ({ title: C, tabs: l, withBubbles: R, withGradient: y }) => {
|
|
|
86
86
|
))
|
|
87
87
|
] }) }),
|
|
88
88
|
o.description && /* @__PURE__ */ n("div", { className: e.description, children: /* @__PURE__ */ n(
|
|
89
|
-
|
|
89
|
+
N,
|
|
90
90
|
{
|
|
91
91
|
as: "div",
|
|
92
92
|
defaultVariant: "headingXs",
|
|
@@ -98,9 +98,9 @@ const I = ({ title: C, tabs: l, withBubbles: R, withGradient: y }) => {
|
|
|
98
98
|
) })
|
|
99
99
|
] })
|
|
100
100
|
] }),
|
|
101
|
-
|
|
101
|
+
g && /* @__PURE__ */ n(x, { variant: "blue" })
|
|
102
102
|
] });
|
|
103
103
|
};
|
|
104
104
|
export {
|
|
105
|
-
|
|
105
|
+
H as SlidingTabsGallery
|
|
106
106
|
};
|