dune-react 0.0.36 → 0.0.37
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/puck-block/gallery-sections/image-carousel/image-carousel.js +143 -95
- package/dist/components/puck-block/registry.generated.d.ts +219 -2014
- package/dist/components/puck-block/registry.generated.js +182 -238
- package/dist/components/puck-core/core/props/index.js +0 -7
- package/dist/components/shadcn/carousel.js +3 -3
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useState, useEffect } from "react";
|
|
3
|
+
import { useState, useEffect, useRef } from "react";
|
|
4
4
|
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.js";
|
|
5
5
|
import { CompoundMedia } from "../../../puck-base/media.js";
|
|
6
6
|
import { cn } from "../../../../utils/css-utils.js";
|
|
@@ -29,10 +29,36 @@ const ImageCarousel = (props) => {
|
|
|
29
29
|
const [current, setCurrent] = useState(0);
|
|
30
30
|
useEffect(() => {
|
|
31
31
|
if (!api) return;
|
|
32
|
-
|
|
33
|
-
api.on("select", () => {
|
|
32
|
+
const onSelect = () => {
|
|
34
33
|
setCurrent(api.selectedScrollSnap() + 1);
|
|
35
|
-
}
|
|
34
|
+
};
|
|
35
|
+
const onSettle = () => {
|
|
36
|
+
const idx = api.selectedScrollSnap();
|
|
37
|
+
const container = api.containerNode();
|
|
38
|
+
if (container && idx > 0) {
|
|
39
|
+
const slideNodes = api.slideNodes();
|
|
40
|
+
const viewportNode = container.parentElement;
|
|
41
|
+
if (viewportNode && slideNodes[idx]) {
|
|
42
|
+
const viewportLeft = viewportNode.getBoundingClientRect().left;
|
|
43
|
+
const slideLeft = slideNodes[idx].getBoundingClientRect().left;
|
|
44
|
+
const offset = slideLeft - viewportLeft;
|
|
45
|
+
if (Math.abs(offset) > 2) {
|
|
46
|
+
const currentTransform = new DOMMatrix(getComputedStyle(container).transform);
|
|
47
|
+
container.style.transform = "translate3d(" + (currentTransform.m41 - offset) + "px, 0px, 0px)";
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
onSelect();
|
|
53
|
+
api.on("select", onSelect);
|
|
54
|
+
api.on("settle", onSettle);
|
|
55
|
+
return () => {
|
|
56
|
+
api.off("select", onSelect);
|
|
57
|
+
api.off("settle", onSettle);
|
|
58
|
+
api.off("select", onSelect);
|
|
59
|
+
api.off("reInit", onReInit);
|
|
60
|
+
api.off("settle", onSettle);
|
|
61
|
+
};
|
|
36
62
|
}, [api]);
|
|
37
63
|
const getBasisClass = () => {
|
|
38
64
|
switch (slidesPerView) {
|
|
@@ -48,46 +74,65 @@ const ImageCarousel = (props) => {
|
|
|
48
74
|
return "basis-full";
|
|
49
75
|
}
|
|
50
76
|
};
|
|
51
|
-
return /* @__PURE__ */ jsxs(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
77
|
+
return /* @__PURE__ */ jsxs(
|
|
78
|
+
SectionWrapper,
|
|
79
|
+
{
|
|
80
|
+
className: cn(
|
|
81
|
+
{ "h-dvh flex flex-col overflow-hidden": isFullscreen },
|
|
82
|
+
sectionClassName
|
|
83
|
+
),
|
|
84
|
+
style: sectionStyle,
|
|
85
|
+
css,
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsx("div", { className: cn("px-[5%] py-8 md:py-12 lg:py-14", { "shrink-0": isFullscreen }), children: /* @__PURE__ */ jsxs(
|
|
88
|
+
"div",
|
|
89
|
+
{
|
|
90
|
+
className: cn("container", {
|
|
91
|
+
"text-center": isHeaderCenter,
|
|
92
|
+
"text-left": !isHeaderCenter
|
|
93
|
+
}),
|
|
94
|
+
children: [
|
|
95
|
+
/* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
|
|
96
|
+
/* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
) }),
|
|
100
|
+
/* @__PURE__ */ jsxs(
|
|
101
|
+
Carousel,
|
|
102
|
+
{
|
|
103
|
+
setApi,
|
|
104
|
+
opts: { loop: true, align: "start" },
|
|
105
|
+
className: cn({
|
|
106
|
+
"overflow-hidden": slideOverflow === "hidden",
|
|
107
|
+
"relative flex-1 min-h-0 [&>[data-slot=carousel-content]]:h-full": isFullscreen
|
|
108
|
+
}),
|
|
109
|
+
children: [
|
|
110
|
+
/* @__PURE__ */ jsx(CarouselContent, { className: cn("ml-0", { "h-full": isFullscreen }), children: medias.map((media, index) => /* @__PURE__ */ jsx(
|
|
111
|
+
CarouselItem,
|
|
85
112
|
{
|
|
86
|
-
className: cn("
|
|
87
|
-
"
|
|
88
|
-
"
|
|
113
|
+
className: cn("pl-0", getBasisClass(), {
|
|
114
|
+
"relative h-full": isFullscreen,
|
|
115
|
+
"pr-6 md:pr-8": slidesPerView !== "1"
|
|
89
116
|
}),
|
|
90
|
-
children: /* @__PURE__ */ jsx(
|
|
117
|
+
children: hasActiveOpacity ? /* @__PURE__ */ jsx(
|
|
118
|
+
"div",
|
|
119
|
+
{
|
|
120
|
+
className: cn("size-full transition-opacity duration-300", {
|
|
121
|
+
"opacity-100": current === index + 1,
|
|
122
|
+
"opacity-40": current !== index + 1
|
|
123
|
+
}),
|
|
124
|
+
children: /* @__PURE__ */ jsx(
|
|
125
|
+
CompoundMedia,
|
|
126
|
+
{
|
|
127
|
+
src: media.src,
|
|
128
|
+
alt: media.alt,
|
|
129
|
+
className: cn("size-full object-cover", {
|
|
130
|
+
"absolute inset-0": isFullscreen
|
|
131
|
+
})
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
}
|
|
135
|
+
) : /* @__PURE__ */ jsx(
|
|
91
136
|
CompoundMedia,
|
|
92
137
|
{
|
|
93
138
|
src: media.src,
|
|
@@ -97,57 +142,51 @@ const ImageCarousel = (props) => {
|
|
|
97
142
|
})
|
|
98
143
|
}
|
|
99
144
|
)
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
145
|
+
},
|
|
146
|
+
index
|
|
147
|
+
)) }),
|
|
148
|
+
isFullscreen && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
149
|
+
/* @__PURE__ */ jsx(CarouselPrevious, { className: "-mt-8 ml-16 hidden lg:flex" }),
|
|
150
|
+
/* @__PURE__ */ jsx(CarouselNext, { className: "-mt-8 mr-16 hidden lg:flex" })
|
|
151
|
+
] }),
|
|
152
|
+
isBottomBar ? /* @__PURE__ */ jsxs("div", { className: "container mt-8 flex items-center justify-between px-[5%]", children: [
|
|
153
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 md:gap-4", children: [
|
|
154
|
+
/* @__PURE__ */ jsx(CarouselPrevious, { className: "static left-0 top-0 size-12 -translate-y-0" }),
|
|
155
|
+
/* @__PURE__ */ jsx(CarouselNext, { className: "static left-0 top-0 size-12 -translate-y-0" })
|
|
156
|
+
] }),
|
|
157
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center", children: medias.map((_, index) => /* @__PURE__ */ jsx(
|
|
158
|
+
"button",
|
|
159
|
+
{
|
|
160
|
+
onClick: () => api == null ? void 0 : api.scrollTo(index),
|
|
161
|
+
className: cn("mx-[3px] inline-block size-2 rounded-full", {
|
|
162
|
+
"bg-black": current === index + 1,
|
|
163
|
+
"bg-neutral-light": current !== index + 1
|
|
164
|
+
})
|
|
165
|
+
},
|
|
166
|
+
index
|
|
167
|
+
)) })
|
|
168
|
+
] }) : /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 transform", children: medias.map((_, index) => /* @__PURE__ */ jsx(
|
|
169
|
+
"button",
|
|
103
170
|
{
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
/* @__PURE__ */ jsx("div", { className: "flex items-center", children: medias.map((_, index) => /* @__PURE__ */ jsx(
|
|
124
|
-
"button",
|
|
125
|
-
{
|
|
126
|
-
onClick: () => api == null ? void 0 : api.scrollTo(index),
|
|
127
|
-
className: cn("mx-[3px] inline-block size-2 rounded-full", {
|
|
128
|
-
"bg-black": current === index + 1,
|
|
129
|
-
"bg-neutral-light": current !== index + 1
|
|
130
|
-
})
|
|
131
|
-
},
|
|
132
|
-
index
|
|
133
|
-
)) })
|
|
134
|
-
] }) : /* @__PURE__ */ jsx("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 transform", children: medias.map((_, index) => /* @__PURE__ */ jsx(
|
|
135
|
-
"button",
|
|
136
|
-
{
|
|
137
|
-
onClick: () => api == null ? void 0 : api.scrollTo(index),
|
|
138
|
-
className: cn("relative mx-[3px] inline-block size-2 rounded-full", {
|
|
139
|
-
"bg-white": isFullscreen && current === index + 1,
|
|
140
|
-
"bg-white/40": isFullscreen && current !== index + 1,
|
|
141
|
-
"bg-black": !isFullscreen && current === index + 1,
|
|
142
|
-
"bg-neutral-light": !isFullscreen && current !== index + 1
|
|
143
|
-
})
|
|
144
|
-
},
|
|
145
|
-
index
|
|
146
|
-
)) })
|
|
147
|
-
]
|
|
148
|
-
}
|
|
149
|
-
)
|
|
150
|
-
] });
|
|
171
|
+
onClick: () => api == null ? void 0 : api.scrollTo(index),
|
|
172
|
+
className: cn(
|
|
173
|
+
"relative mx-[3px] inline-block size-2 rounded-full",
|
|
174
|
+
{
|
|
175
|
+
"bg-white": isFullscreen && current === index + 1,
|
|
176
|
+
"bg-white/40": isFullscreen && current !== index + 1,
|
|
177
|
+
"bg-black": !isFullscreen && current === index + 1,
|
|
178
|
+
"bg-neutral-light": !isFullscreen && current !== index + 1
|
|
179
|
+
}
|
|
180
|
+
)
|
|
181
|
+
},
|
|
182
|
+
index
|
|
183
|
+
)) })
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
)
|
|
187
|
+
]
|
|
188
|
+
}
|
|
189
|
+
);
|
|
151
190
|
};
|
|
152
191
|
const ImageCarouselDefaults = {
|
|
153
192
|
tagline: "",
|
|
@@ -156,9 +195,18 @@ const ImageCarouselDefaults = {
|
|
|
156
195
|
button: { label: "View all" },
|
|
157
196
|
buttons: [],
|
|
158
197
|
medias: [
|
|
159
|
-
{
|
|
160
|
-
|
|
161
|
-
|
|
198
|
+
{
|
|
199
|
+
src: "https://picsum.photos/seed/carousel-1/1920/1080",
|
|
200
|
+
alt: "Gallery image 1"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
src: "https://picsum.photos/seed/carousel-2/1920/1080",
|
|
204
|
+
alt: "Gallery image 2"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
src: "https://picsum.photos/seed/carousel-3/1920/1080",
|
|
208
|
+
alt: "Gallery image 3"
|
|
209
|
+
}
|
|
162
210
|
],
|
|
163
211
|
projects: [],
|
|
164
212
|
hoverLinks: [],
|