dune-react 0.0.24 → 0.0.26

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.
Files changed (2) hide show
  1. package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/scroll-parallax-portfolio.js +155 -120
  2. package/package.json +1 -1
package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/scroll-parallax-portfolio.js CHANGED
@@ -49,7 +49,7 @@ const ThreeImageParallaxVariant = ({
49
49
  const transformRef = useRef(null);
50
50
  const [scrollContainerRef] = useScrollContainer(transformRef);
51
51
  const { scrollYProgress } = useScroll({
52
- target: transformRef,
52
+ ...isEditor ? {} : { target: transformRef },
53
53
  ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
54
54
  });
55
55
  const smoothProgress = useSpring(scrollYProgress, {
@@ -103,6 +103,51 @@ const ThreeImageParallaxVariant = ({
103
103
  }
104
104
  };
105
105
  });
106
+ if (isEditor) {
107
+ return /* @__PURE__ */ jsx(
108
+ SectionWrapper,
109
+ {
110
+ className: cn("relative px-[5%]", sectionClassName),
111
+ style: sectionStyle,
112
+ css,
113
+ children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-20 py-6 md:py-8 lg:py-10", children: projects2.map((project, index) => {
114
+ var _a, _b, _c, _d, _e, _f;
115
+ return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
116
+ /* @__PURE__ */ jsxs("div", { className: "mb-6 flex w-full max-w-lg flex-col items-center text-center", children: [
117
+ /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
118
+ project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
119
+ ] }),
120
+ /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-start justify-center", children: [
121
+ /* @__PURE__ */ jsx("div", { className: "hidden w-full max-w-xs shrink-0 lg:block", children: /* @__PURE__ */ jsx(
122
+ CompoundImage,
123
+ {
124
+ src: ((_a = project.imageLeft) == null ? void 0 : _a.src) ?? project.image.src,
125
+ alt: ((_b = project.imageLeft) == null ? void 0 : _b.alt) ?? project.image.alt,
126
+ className: "w-full object-contain"
127
+ }
128
+ ) }),
129
+ /* @__PURE__ */ jsx("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ jsx(
130
+ CompoundImage,
131
+ {
132
+ src: ((_c = project.imageCenter) == null ? void 0 : _c.src) ?? project.image.src,
133
+ alt: ((_d = project.imageCenter) == null ? void 0 : _d.alt) ?? project.image.alt,
134
+ className: "w-full object-contain"
135
+ }
136
+ ) }),
137
+ /* @__PURE__ */ jsx("div", { className: "hidden w-full max-w-xs shrink-0 lg:block", children: /* @__PURE__ */ jsx(
138
+ CompoundImage,
139
+ {
140
+ src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
141
+ alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
142
+ className: "w-full object-contain"
143
+ }
144
+ ) })
145
+ ] })
146
+ ] }, index);
147
+ }) }) })
148
+ }
149
+ );
150
+ }
106
151
  return /* @__PURE__ */ jsxs(
107
152
  SectionWrapper,
108
153
  {
@@ -115,126 +160,68 @@ const ThreeImageParallaxVariant = ({
115
160
  return /* @__PURE__ */ jsxs(
116
161
  "div",
117
162
  {
118
- className: cn(
119
- "relative flex flex-col",
120
- isEditor ? "h-auto mb-12" : "h-[500vh]",
121
- {
122
- "mt-[-40vh]": !isEditor && index > 0
123
- }
124
- ),
163
+ className: cn("relative flex h-[500vh] flex-col", {
164
+ "mt-[-40vh]": index > 0
165
+ }),
125
166
  children: [
126
167
  /* @__PURE__ */ jsx(
127
168
  motion.div,
128
169
  {
129
- className: cn(
130
- "flex justify-center",
131
- isEditor ? "relative h-auto py-8" : "sticky top-0 h-[150vh]"
132
- ),
133
- style: isEditor ? { opacity: 1, scale: 1 } : computedStyles[index].headerStyles,
134
- children: /* @__PURE__ */ jsxs(
135
- "div",
136
- {
137
- className: cn(
138
- "-z-10 flex w-full max-w-lg flex-col items-center text-center",
139
- isEditor ? "relative" : "absolute top-[50vh]"
140
- ),
141
- children: [
142
- /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
143
- project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
144
- ]
145
- }
146
- )
170
+ className: "sticky top-0 flex h-[150vh] justify-center",
171
+ style: computedStyles[index].headerStyles,
172
+ children: /* @__PURE__ */ jsxs("div", { className: "absolute top-[50vh] -z-10 flex w-full max-w-lg flex-col items-center text-center", children: [
173
+ /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
174
+ project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
175
+ ] })
147
176
  }
148
177
  ),
149
- /* @__PURE__ */ jsxs(
150
- "div",
151
- {
152
- className: cn(
153
- "z-10 flex items-center justify-center overflow-hidden",
154
- isEditor ? "relative h-auto" : "sticky top-0 h-screen"
155
- ),
156
- children: [
157
- /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx(
158
- "div",
159
- {
160
- className: cn(
161
- "flex w-full max-w-5xl items-center justify-center overflow-hidden",
162
- isEditor ? "h-auto" : "h-screen"
163
- ),
164
- children: /* @__PURE__ */ jsx(
165
- CompoundImage,
166
- {
167
- src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
168
- alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.image.alt,
169
- className: "size-full object-contain"
170
- }
171
- )
172
- }
173
- ) }),
174
- /* @__PURE__ */ jsx(
175
- "div",
178
+ /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex h-screen items-center justify-center overflow-hidden", children: [
179
+ /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "flex h-screen w-full max-w-5xl items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
180
+ CompoundImage,
181
+ {
182
+ src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
183
+ alt: ((_b = project.imageCenter) == null ? void 0 : _b.alt) ?? project.image.alt,
184
+ className: "size-full object-contain"
185
+ }
186
+ ) }) }),
187
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 right-auto z-20 hidden h-screen w-full max-w-xs lg:flex", children: /* @__PURE__ */ jsx(
188
+ motion.div,
189
+ {
190
+ className: "relative w-full pt-[100vh]",
191
+ style: computedStyles[index].imageLeftStyles,
192
+ children: /* @__PURE__ */ jsx(
193
+ CompoundImage,
176
194
  {
177
- className: cn(
178
- "absolute inset-y-0 left-0 right-auto z-20 hidden w-full max-w-xs lg:flex",
179
- isEditor ? "h-auto" : "h-screen"
180
- ),
181
- children: /* @__PURE__ */ jsx(
182
- motion.div,
183
- {
184
- className: cn(
185
- "relative w-full",
186
- isEditor ? "pt-0" : "pt-[100vh]"
187
- ),
188
- style: isEditor ? { y: 0 } : computedStyles[index].imageLeftStyles,
189
- children: /* @__PURE__ */ jsx(
190
- CompoundImage,
191
- {
192
- src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.image.src,
193
- alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.image.alt,
194
- className: "w-full object-contain"
195
- }
196
- )
197
- }
198
- )
195
+ src: ((_c = project.imageLeft) == null ? void 0 : _c.src) ?? project.image.src,
196
+ alt: ((_d = project.imageLeft) == null ? void 0 : _d.alt) ?? project.image.alt,
197
+ className: "h-auto w-full object-contain"
199
198
  }
200
- ),
201
- /* @__PURE__ */ jsx(
202
- "div",
199
+ )
200
+ }
201
+ ) }),
202
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-auto right-0 z-20 hidden h-screen w-full max-w-xs lg:flex", children: /* @__PURE__ */ jsx(
203
+ motion.div,
204
+ {
205
+ className: "relative w-full pt-[100vh]",
206
+ style: computedStyles[index].imageRightStyles,
207
+ children: /* @__PURE__ */ jsx(
208
+ CompoundImage,
203
209
  {
204
- className: cn(
205
- "absolute inset-y-0 left-auto right-0 z-20 hidden w-full max-w-xs lg:flex",
206
- isEditor ? "h-auto" : "h-screen"
207
- ),
208
- children: /* @__PURE__ */ jsx(
209
- motion.div,
210
- {
211
- className: cn(
212
- "relative w-full",
213
- isEditor ? "pt-0" : "pt-[100vh]"
214
- ),
215
- style: isEditor ? { y: 0 } : computedStyles[index].imageRightStyles,
216
- children: /* @__PURE__ */ jsx(
217
- CompoundImage,
218
- {
219
- src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
220
- alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
221
- className: "w-full object-contain"
222
- }
223
- )
224
- }
225
- )
210
+ src: ((_e = project.imageRight) == null ? void 0 : _e.src) ?? project.image.src,
211
+ alt: ((_f = project.imageRight) == null ? void 0 : _f.alt) ?? project.image.alt,
212
+ className: "h-auto w-full object-contain"
226
213
  }
227
214
  )
228
- ]
229
- }
230
- ),
231
- !isEditor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
215
+ }
216
+ ) })
217
+ ] }),
218
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
232
219
  ]
233
220
  },
234
221
  index
235
222
  );
236
223
  }) }) }),
237
- !isEditor && /* @__PURE__ */ jsx("div", { className: "h-screen" })
224
+ /* @__PURE__ */ jsx("div", { className: "h-screen" })
238
225
  ]
239
226
  }
240
227
  );
@@ -331,35 +318,83 @@ const projects = [
331
318
  {
332
319
  title: "Project name",
333
320
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
334
- image: { src: "https://images.unsplash.com/photo-1547658719-da2b51169166?w=1200&h=800&fit=crop", alt: "Web design workspace" },
321
+ image: {
322
+ src: "https://images.unsplash.com/photo-1547658719-da2b51169166?w=1200&h=800&fit=crop",
323
+ alt: "Web design workspace"
324
+ },
335
325
  url: "#",
336
326
  button: { label: "View project" },
337
- tags: [{ label: "Tag one", url: "#" }, { label: "Tag two", url: "#" }, { label: "Tag three", url: "#" }],
338
- imageCenter: { src: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=1000&h=660&fit=crop", alt: "Web design process" },
339
- imageLeft: { src: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?w=600&h=400&fit=crop", alt: "Wireframe sketches" },
340
- imageRight: { src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop", alt: "Analytics dashboard" }
327
+ tags: [
328
+ { label: "Tag one", url: "#" },
329
+ { label: "Tag two", url: "#" },
330
+ { label: "Tag three", url: "#" }
331
+ ],
332
+ imageCenter: {
333
+ src: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=1000&h=660&fit=crop",
334
+ alt: "Web design process"
335
+ },
336
+ imageLeft: {
337
+ src: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?w=600&h=400&fit=crop",
338
+ alt: "Wireframe sketches"
339
+ },
340
+ imageRight: {
341
+ src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop",
342
+ alt: "Analytics dashboard"
343
+ }
341
344
  },
342
345
  {
343
346
  title: "Project name",
344
347
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
345
- image: { src: "https://images.unsplash.com/photo-1626785774573-4b799315345d?w=1200&h=800&fit=crop", alt: "Design studio" },
348
+ image: {
349
+ src: "https://images.unsplash.com/photo-1626785774573-4b799315345d?w=1200&h=800&fit=crop",
350
+ alt: "Design studio"
351
+ },
346
352
  url: "#",
347
353
  button: { label: "View project" },
348
- tags: [{ label: "Tag one", url: "#" }, { label: "Tag two", url: "#" }, { label: "Tag three", url: "#" }],
349
- imageCenter: { src: "https://images.unsplash.com/photo-1618004912476-29818d81ae2e?w=1000&h=660&fit=crop", alt: "Colorful abstract shapes" },
350
- imageLeft: { src: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=600&h=400&fit=crop", alt: "Brand color palette" },
351
- imageRight: { src: "https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=600&h=400&fit=crop", alt: "Typography design" }
354
+ tags: [
355
+ { label: "Tag one", url: "#" },
356
+ { label: "Tag two", url: "#" },
357
+ { label: "Tag three", url: "#" }
358
+ ],
359
+ imageCenter: {
360
+ src: "https://images.unsplash.com/photo-1618004912476-29818d81ae2e?w=1000&h=660&fit=crop",
361
+ alt: "Colorful abstract shapes"
362
+ },
363
+ imageLeft: {
364
+ src: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=600&h=400&fit=crop",
365
+ alt: "Brand color palette"
366
+ },
367
+ imageRight: {
368
+ src: "https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=600&h=400&fit=crop",
369
+ alt: "Typography design"
370
+ }
352
371
  },
353
372
  {
354
373
  title: "Project name",
355
374
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
356
- image: { src: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=1200&h=800&fit=crop", alt: "Mobile device" },
375
+ image: {
376
+ src: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=1200&h=800&fit=crop",
377
+ alt: "Mobile device"
378
+ },
357
379
  url: "#",
358
380
  button: { label: "View project" },
359
- tags: [{ label: "Tag one", url: "#" }, { label: "Tag two", url: "#" }, { label: "Tag three", url: "#" }],
360
- imageCenter: { src: "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=1000&h=660&fit=crop", alt: "App mockup" },
361
- imageLeft: { src: "https://images.unsplash.com/photo-1522542550221-31fd19575a2d?w=600&h=400&fit=crop", alt: "Wireframe sketches" },
362
- imageRight: { src: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=600&h=400&fit=crop", alt: "Mobile app in use" }
381
+ tags: [
382
+ { label: "Tag one", url: "#" },
383
+ { label: "Tag two", url: "#" },
384
+ { label: "Tag three", url: "#" }
385
+ ],
386
+ imageCenter: {
387
+ src: "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=1000&h=660&fit=crop",
388
+ alt: "App mockup"
389
+ },
390
+ imageLeft: {
391
+ src: "https://images.unsplash.com/photo-1522542550221-31fd19575a2d?w=600&h=400&fit=crop",
392
+ alt: "Wireframe sketches"
393
+ },
394
+ imageRight: {
395
+ src: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=600&h=400&fit=crop",
396
+ alt: "Mobile app in use"
397
+ }
363
398
  }
364
399
  ];
365
400
  const ScrollParallaxPortfolioDefaults = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dune-react",
3
- "version": "0.0.24",
3
+ "version": "0.0.26",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {