@zenpatient-org/healthspan-marketing-ui 0.2.66 → 0.2.68
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.
- package/dist/components/AdvancedGallery/AdvancedGallery.cjs.js +1 -1
- package/dist/components/AdvancedGallery/AdvancedGallery.es.js +8 -24
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/button.module.css +5 -0
- package/dist/components/ImageGallery/ImageGallery.cjs.js +1 -1
- package/dist/components/ImageGallery/ImageGallery.es.js +16 -18
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),m=require("swiper/modules"),d=require("swiper/react"),j=require("../../utils/useSwiper/useSwiper.cjs.js"),q=require("../../utils/cn/cn.cjs.js");;/* empty css */;/* empty css */;/* empty css */const x=require("../GalleryPagination/GalleryPagination.cjs.js"),i=require("../../src/components/AdvancedGallery/advancedGallery.module.css"),y=require("../Label/Label.cjs.js"),v=require("./components/VideoSlide/VideoSlide.cjs.js"),w=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),P=[m.Navigation],_=({items:r,label:l,className:u})=>{const{activeIndex:s,handleSlideTo:c,handleSlideChange:S,onSwiperInit:h,handleSwiperResize:p,handleUserInteraction:n}=j.useSwiperWithAutoPlay(5e3),o=g.useCallback(a=>{n(),c(a)},[n,c]);return e.jsxs("div",{className:q.cn(i.root,u),children:[l&&e.jsx("div",{className:i.labelWrap,children:e.jsx(y.Label,{color:"black",size:"sm",children:l})}),e.jsx(d.Swiper,{onSwiper:h,onResize:p,onSlideChange:S,onTouchStart:n,onTouchEnd:n,modules:P,spaceBetween:0,slidesPerView:1,className:i.swiper,children:r.map((a,t)=>e.jsxs(d.SwiperSlide,{children:[a.mediaType==="image"&&e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:a.url,alt:"product image",className:i.image,onClick:n})}),a.mediaType==="video"&&e.jsx(v.VideoSlide,{item:a,isActive:s===t,onClick:n})]},t))}),e.jsx("div",{className:i.hideOnMobile,children:e.jsx(w.ImageGalleryPagination,{items:r,activeIndex:s,onSelect:o})}),e.jsx("div",{className:i.hideOnDesktop,children:e.jsx(x.GalleryPagination,{count:r.length,activeIndex:s,onSelect:o})})]})};exports.AdvancedGallery=_;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsxs as s, jsx as e } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback as g } from "react";
|
|
4
4
|
import { Navigation as f } from "swiper/modules";
|
|
5
|
-
import { Swiper as u, SwiperSlide as
|
|
6
|
-
import { useSwiperWithAutoPlay as
|
|
5
|
+
import { Swiper as u, SwiperSlide as v } from "swiper/react";
|
|
6
|
+
import { useSwiperWithAutoPlay as w } from "../../utils/useSwiper/useSwiper.es.js";
|
|
7
7
|
import { cn as N } from "../../utils/cn/cn.es.js";
|
|
8
8
|
/* empty css */
|
|
9
9
|
/* empty css */
|
|
@@ -14,7 +14,7 @@ import { Label as P } from "../Label/Label.es.js";
|
|
|
14
14
|
import { VideoSlide as k } from "./components/VideoSlide/VideoSlide.es.js";
|
|
15
15
|
import { ImageGalleryPagination as C } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
|
|
16
16
|
const I = [f], U = ({ items: a, label: n, className: d }) => {
|
|
17
|
-
const { activeIndex: l, handleSlideTo: t, handleSlideChange: p, onSwiperInit: h, handleSwiperResize: S, handleUserInteraction: o } =
|
|
17
|
+
const { activeIndex: l, handleSlideTo: t, handleSlideChange: p, onSwiperInit: h, handleSwiperResize: S, handleUserInteraction: o } = w(5e3), c = g(
|
|
18
18
|
(r) => {
|
|
19
19
|
o(), t(r);
|
|
20
20
|
},
|
|
@@ -34,7 +34,7 @@ const I = [f], U = ({ items: a, label: n, className: d }) => {
|
|
|
34
34
|
spaceBetween: 0,
|
|
35
35
|
slidesPerView: 1,
|
|
36
36
|
className: i.swiper,
|
|
37
|
-
children: a.map((r,
|
|
37
|
+
children: a.map((r, m) => /* @__PURE__ */ s(v, { children: [
|
|
38
38
|
r.mediaType === "image" && /* @__PURE__ */ e("div", { className: i.imageWrapper, children: /* @__PURE__ */ e(
|
|
39
39
|
"img",
|
|
40
40
|
{
|
|
@@ -44,28 +44,12 @@ const I = [f], U = ({ items: a, label: n, className: d }) => {
|
|
|
44
44
|
onClick: o
|
|
45
45
|
}
|
|
46
46
|
) }),
|
|
47
|
-
r.mediaType === "video" && /* @__PURE__ */ e(k, { item: r, isActive: l ===
|
|
48
|
-
] },
|
|
47
|
+
r.mediaType === "video" && /* @__PURE__ */ e(k, { item: r, isActive: l === m, onClick: o })
|
|
48
|
+
] }, m))
|
|
49
49
|
}
|
|
50
50
|
),
|
|
51
|
-
/* @__PURE__ */ e(
|
|
52
|
-
|
|
53
|
-
{
|
|
54
|
-
items: a,
|
|
55
|
-
activeIndex: l,
|
|
56
|
-
className: i.hideOnMobile,
|
|
57
|
-
onSelect: m
|
|
58
|
-
}
|
|
59
|
-
),
|
|
60
|
-
/* @__PURE__ */ e(
|
|
61
|
-
y,
|
|
62
|
-
{
|
|
63
|
-
count: a.length,
|
|
64
|
-
activeIndex: l,
|
|
65
|
-
className: i.hideOnDesktop,
|
|
66
|
-
onSelect: m
|
|
67
|
-
}
|
|
68
|
-
)
|
|
51
|
+
/* @__PURE__ */ e("div", { className: i.hideOnMobile, children: /* @__PURE__ */ e(C, { items: a, activeIndex: l, onSelect: c }) }),
|
|
52
|
+
/* @__PURE__ */ e("div", { className: i.hideOnDesktop, children: /* @__PURE__ */ e(y, { count: a.length, activeIndex: l, onSelect: c }) })
|
|
69
53
|
] });
|
|
70
54
|
};
|
|
71
55
|
export {
|
|
@@ -2,7 +2,7 @@ import { default as React, ElementType, ButtonHTMLAttributes, AnchorHTMLAttribut
|
|
|
2
2
|
import { EIconName } from '../Icon';
|
|
3
3
|
import { TAnalyticsEvent } from '../../types/analytics';
|
|
4
4
|
|
|
5
|
-
export type ButtonVariant = 'primary' | 'primary-invert' | 'secondary' | 'muted' | 'muted-invert' | 'ghost';
|
|
5
|
+
export type ButtonVariant = 'primary' | 'primary-invert' | 'secondary' | 'tertiary' | 'muted' | 'muted-invert' | 'ghost';
|
|
6
6
|
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
7
7
|
interface BaseButtonProps {
|
|
8
8
|
variant?: ButtonVariant;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),x=require("swiper/modules"),d=require("swiper/react"),y=require("../../utils/useSwiper/useSwiper.cjs.js"),q=require("../../utils/cn/cn.cjs.js");;/* empty css */;/* empty css */;/* empty css */const i=require("../../src/components/ImageGallery/imageGallery.module.css"),w=require("../Label/Label.cjs.js"),P=require("./components/ImageGalleryPagination/ImageGalleryPagination.cjs.js"),u=require("../GalleryPagination/GalleryPagination.cjs.js"),v=[x.Navigation],N=({images:a,label:o,className:m,type:r="primary"})=>{const{activeIndex:s,handleSlideTo:t,handleSlideChange:h,onSwiperInit:g,handleSwiperResize:p,handleUserInteraction:n}=y.useSwiperWithAutoPlay(3e3),l=j.useCallback(c=>{n(),t(c)},[n,t]);return e.jsxs("div",{className:q.cn(i.root,m,{[i.primary]:r==="primary",[i.secondary]:r==="secondary"}),children:[o&&e.jsx("div",{className:i.labelWrap,children:e.jsx(w.Label,{color:"black",size:"sm",children:o})}),e.jsx(d.Swiper,{onSwiper:g,onResize:p,onSlideChange:h,onTouchStart:n,onTouchEnd:n,modules:v,spaceBetween:0,slidesPerView:1,className:i.swiper,children:a.map((c,S)=>e.jsx(d.SwiperSlide,{children:e.jsx("div",{className:i.imageContainer,children:e.jsx("div",{className:i.imageWrapper,children:e.jsx("img",{src:c,alt:"product image",width:r==="primary"?600:492,height:r==="primary"?600:389,className:i.image,onClick:n})})})},S))}),r==="primary"?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:i.hideOnMobile,children:e.jsx(P.ImageGalleryPagination,{images:a,activeIndex:s,onSelect:l})}),e.jsx("div",{className:i.hideOnDesktop,children:e.jsx(u.GalleryPagination,{count:a.length,activeIndex:s,onSelect:l})})]}):e.jsx(u.GalleryPagination,{count:a.length,activeIndex:s,onSelect:l})]})};exports.ImageGallery=N;
|
|
@@ -8,11 +8,11 @@ import { cn as P } from "../../utils/cn/cn.es.js";
|
|
|
8
8
|
/* empty css */
|
|
9
9
|
/* empty css */
|
|
10
10
|
/* empty css */
|
|
11
|
-
import
|
|
11
|
+
import i from "../../components/ImageGallery/imageGallery.module.css";
|
|
12
12
|
import { Label as C } from "../Label/Label.es.js";
|
|
13
13
|
import { ImageGalleryPagination as b } from "./components/ImageGalleryPagination/ImageGalleryPagination.es.js";
|
|
14
14
|
import { GalleryPagination as d } from "../GalleryPagination/GalleryPagination.es.js";
|
|
15
|
-
const k = [y], A = ({ images: o, label: m, className: p, type:
|
|
15
|
+
const k = [y], A = ({ images: o, label: m, className: p, type: r = "primary" }) => {
|
|
16
16
|
const { activeIndex: n, handleSlideTo: c, handleSlideChange: h, onSwiperInit: S, handleSwiperResize: g, handleUserInteraction: a } = I(3e3), l = w(
|
|
17
17
|
(t) => {
|
|
18
18
|
a(), c(t);
|
|
@@ -22,12 +22,12 @@ const k = [y], A = ({ images: o, label: m, className: p, type: i = "primary" })
|
|
|
22
22
|
return /* @__PURE__ */ s(
|
|
23
23
|
"div",
|
|
24
24
|
{
|
|
25
|
-
className: P(
|
|
26
|
-
[
|
|
27
|
-
[
|
|
25
|
+
className: P(i.root, p, {
|
|
26
|
+
[i.primary]: r === "primary",
|
|
27
|
+
[i.secondary]: r === "secondary"
|
|
28
28
|
}),
|
|
29
29
|
children: [
|
|
30
|
-
m && /* @__PURE__ */ e("div", { className:
|
|
30
|
+
m && /* @__PURE__ */ e("div", { className: i.labelWrap, children: /* @__PURE__ */ e(C, { color: "black", size: "sm", children: m }) }),
|
|
31
31
|
/* @__PURE__ */ e(
|
|
32
32
|
N,
|
|
33
33
|
{
|
|
@@ -39,39 +39,37 @@ const k = [y], A = ({ images: o, label: m, className: p, type: i = "primary" })
|
|
|
39
39
|
modules: k,
|
|
40
40
|
spaceBetween: 0,
|
|
41
41
|
slidesPerView: 1,
|
|
42
|
-
className:
|
|
43
|
-
children: o.map((t, u) => /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e("div", { className:
|
|
42
|
+
className: i.swiper,
|
|
43
|
+
children: o.map((t, u) => /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e("div", { className: i.imageContainer, children: /* @__PURE__ */ e("div", { className: i.imageWrapper, children: /* @__PURE__ */ e(
|
|
44
44
|
"img",
|
|
45
45
|
{
|
|
46
46
|
src: t,
|
|
47
47
|
alt: "product image",
|
|
48
|
-
width:
|
|
49
|
-
height:
|
|
50
|
-
className:
|
|
48
|
+
width: r === "primary" ? 600 : 492,
|
|
49
|
+
height: r === "primary" ? 600 : 389,
|
|
50
|
+
className: i.image,
|
|
51
51
|
onClick: a
|
|
52
52
|
}
|
|
53
53
|
) }) }) }, u))
|
|
54
54
|
}
|
|
55
55
|
),
|
|
56
|
-
|
|
57
|
-
/* @__PURE__ */ e(
|
|
56
|
+
r === "primary" ? /* @__PURE__ */ s(f, { children: [
|
|
57
|
+
/* @__PURE__ */ e("div", { className: i.hideOnMobile, children: /* @__PURE__ */ e(
|
|
58
58
|
b,
|
|
59
59
|
{
|
|
60
60
|
images: o,
|
|
61
|
-
className: r.hideOnMobile,
|
|
62
61
|
activeIndex: n,
|
|
63
62
|
onSelect: l
|
|
64
63
|
}
|
|
65
|
-
),
|
|
66
|
-
/* @__PURE__ */ e(
|
|
64
|
+
) }),
|
|
65
|
+
/* @__PURE__ */ e("div", { className: i.hideOnDesktop, children: /* @__PURE__ */ e(
|
|
67
66
|
d,
|
|
68
67
|
{
|
|
69
68
|
count: o.length,
|
|
70
69
|
activeIndex: n,
|
|
71
|
-
className: r.hideOnDesktop,
|
|
72
70
|
onSelect: l
|
|
73
71
|
}
|
|
74
|
-
)
|
|
72
|
+
) })
|
|
75
73
|
] }) : /* @__PURE__ */ e(d, { count: o.length, activeIndex: n, onSelect: l })
|
|
76
74
|
]
|
|
77
75
|
}
|