dune-react 0.0.22 → 0.0.24

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 (131) hide show
  1. package/dist/components/puck-base/image.js +1 -1
  2. package/dist/components/puck-block/banner-sections/css-marquee-banner/css-marquee-banner.js +13 -13
  3. package/dist/components/puck-block/banner-sections/dual-row-marquee/dual-row-marquee.js +77 -53
  4. package/dist/components/puck-block/banner-sections/scroll-driven-marquee/scroll-driven-marquee.js +8 -6
  5. package/dist/components/puck-block/banner-sections/scroll-parallax-text/scroll-parallax-text.js +3 -1
  6. package/dist/components/puck-block/contact-sections/contact-cards-grid/contact-cards-grid.js +1 -1
  7. package/dist/components/puck-block/contact-sections/form-with-media/form-with-media.js +1 -1
  8. package/dist/components/puck-block/contact-sections/header-form-cards/header-form-cards.js +1 -1
  9. package/dist/components/puck-block/contact-sections/header-info-fullwidth/header-info-fullwidth.js +2 -2
  10. package/dist/components/puck-block/contact-sections/info-cards-media/info-cards-media.js +2 -2
  11. package/dist/components/puck-block/contact-sections/split-info-form/split-info-form.js +1 -1
  12. package/dist/components/puck-block/contact-sections/tab-locations/tab-locations.js +71 -55
  13. package/dist/components/puck-block/cta-sections/mouse-track-cta/mouse-track-cta.js +4 -4
  14. package/dist/components/puck-block/cta-sections/side-media-cta/side-media-cta.js +1 -1
  15. package/dist/components/puck-block/cta-sections/text-block-cta/text-block-cta.js +2 -2
  16. package/dist/components/puck-block/feature-sections/feature-cards-grid/component.js +1 -1
  17. package/dist/components/puck-block/feature-sections/feature-list-split/component.js +1 -1
  18. package/dist/components/puck-block/feature-sections/tab-feature/component.js +4 -4
  19. package/dist/components/puck-block/feature-sections/text-media-split/component.js +1 -1
  20. package/dist/components/puck-block/footer-sections/centered-minimal-footer/centered-minimal-footer.js +72 -18
  21. package/dist/components/puck-block/footer-sections/centered-minimal-footer/index.d.ts +79 -0
  22. package/dist/components/puck-block/footer-sections/centered-minimal-footer/index.js +43 -1
  23. package/dist/components/puck-block/footer-sections/compact-newsletter-footer/index.d.ts +41 -0
  24. package/dist/components/puck-block/footer-sections/contact-links-footer/contact-links-footer.js +4 -3
  25. package/dist/components/puck-block/footer-sections/contact-links-footer/index.d.ts +86 -0
  26. package/dist/components/puck-block/footer-sections/contact-links-footer/index.js +1 -1
  27. package/dist/components/puck-block/footer-sections/cta-links-footer/cta-links-footer.js +3 -2
  28. package/dist/components/puck-block/footer-sections/cta-links-footer/index.d.ts +37 -0
  29. package/dist/components/puck-block/footer-sections/cta-links-footer/index.js +1 -1
  30. package/dist/components/puck-block/footer-sections/links-newsletter-footer/index.d.ts +54 -0
  31. package/dist/components/puck-block/footer-sections/newsletter-links-footer/index.d.ts +41 -0
  32. package/dist/components/puck-block/footer-sections/newsletter-top-links-footer/index.d.ts +54 -0
  33. package/dist/components/puck-block/footer-sections/props.d.ts +3 -0
  34. package/dist/components/puck-block/gallery-sections/fullscreen-portfolio/fullscreen-portfolio.js +1 -1
  35. package/dist/components/puck-block/gallery-sections/image-carousel/index.d.ts +14 -1
  36. package/dist/components/puck-block/gallery-sections/interactive-portfolio/interactive-portfolio.js +166 -105
  37. package/dist/components/puck-block/gallery-sections/masonry-grid/index.d.ts +17 -1
  38. package/dist/components/puck-block/gallery-sections/masonry-grid/masonry-grid.js +56 -31
  39. package/dist/components/puck-block/gallery-sections/portfolio-cards/index.d.ts +17 -1
  40. package/dist/components/puck-block/gallery-sections/portfolio-cards/portfolio-cards.js +41 -13
  41. package/dist/components/puck-block/gallery-sections/portfolio-divider/portfolio-divider.js +1 -1
  42. package/dist/components/puck-block/gallery-sections/props.d.ts +42 -3
  43. package/dist/components/puck-block/gallery-sections/props.js +24 -6
  44. package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.js +71 -22
  45. package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/scroll-parallax-portfolio.js +284 -159
  46. package/dist/components/puck-block/gallery-sections/split-carousel/index.d.ts +11 -1
  47. package/dist/components/puck-block/gallery-sections/static-grid/index.d.ts +17 -1
  48. package/dist/components/puck-block/header-sections/centered-navbar/centered-navbar.js +95 -14
  49. package/dist/components/puck-block/header-sections/drawer-navbar/drawer-navbar.js +4 -3
  50. package/dist/components/puck-block/header-sections/floating-bordered-navbar/floating-bordered-navbar.js +5 -4
  51. package/dist/components/puck-block/header-sections/fullscreen-overlay-navbar/fullscreen-overlay-navbar.js +4 -3
  52. package/dist/components/puck-block/header-sections/mega-menu-navbar/mega-menu-navbar.js +3 -2
  53. package/dist/components/puck-block/header-sections/props.d.ts +3 -0
  54. package/dist/components/puck-block/header-sections/standard-navbar/standard-navbar.js +3 -2
  55. package/dist/components/puck-block/hero-sections/carousel-hero/component.js +3 -3
  56. package/dist/components/puck-block/hero-sections/column-scroll-hero/component.js +8 -8
  57. package/dist/components/puck-block/hero-sections/dual-marquee-hero/component.js +6 -6
  58. package/dist/components/puck-block/hero-sections/fullscreen-video-hero/component.js +1 -1
  59. package/dist/components/puck-block/hero-sections/grid-expand-hero/component.js +26 -17
  60. package/dist/components/puck-block/hero-sections/grid-expand-hero/index.d.ts +17 -1
  61. package/dist/components/puck-block/hero-sections/horizontal-marquee-hero/component.js +3 -3
  62. package/dist/components/puck-block/hero-sections/inline-image-hero/inline-image-hero.js +59 -28
  63. package/dist/components/puck-block/hero-sections/mouse-track-hero/component.js +60 -19
  64. package/dist/components/puck-block/hero-sections/multi-image-grid-hero/index.d.ts +17 -1
  65. package/dist/components/puck-block/hero-sections/multi-image-grid-hero/multi-image-grid-hero.js +2 -2
  66. package/dist/components/puck-block/hero-sections/overlapping-image-hero/overlapping-image-hero.js +3 -3
  67. package/dist/components/puck-block/hero-sections/parallax-images-hero/component.js +18 -6
  68. package/dist/components/puck-block/hero-sections/props.d.ts +34 -2
  69. package/dist/components/puck-block/hero-sections/props.js +18 -4
  70. package/dist/components/puck-block/hero-sections/scatter-parallax-hero/component.js +9 -7
  71. package/dist/components/puck-block/hero-sections/scroll-expand-video-hero/component.js +7 -5
  72. package/dist/components/puck-block/hero-sections/scroll-zoom-hero/component.js +5 -3
  73. package/dist/components/puck-block/hero-sections/sticky-expand-hero/component.js +1 -1
  74. package/dist/components/puck-block/hero-sections/sticky-expand-hero/index.d.ts +13 -5
  75. package/dist/components/puck-block/hero-sections/sticky-expand-hero/index.js +2 -2
  76. package/dist/components/puck-block/hero-sections/sticky-video-hero/component.js +2 -2
  77. package/dist/components/puck-block/hero-sections/tab-hero/component.js +5 -5
  78. package/dist/components/puck-block/hero-sections/three-image-parallax-hero/component.js +3 -3
  79. package/dist/components/puck-block/hero-sections/vertical-gallery-hero/component.js +6 -6
  80. package/dist/components/puck-block/hero-sections/zoom-grid-hero/component.js +14 -12
  81. package/dist/components/puck-block/index.d.ts +1 -0
  82. package/dist/components/puck-block/location-sections/index.d.ts +3 -0
  83. package/dist/components/puck-block/location-sections/location-1/index.js +102 -0
  84. package/dist/components/puck-block/location-sections/location-1/location.d.ts +0 -3
  85. package/dist/components/puck-block/location-sections/location-1/location.js +139 -0
  86. package/dist/components/puck-block/location-sections/location-2/index.js +126 -0
  87. package/dist/components/puck-block/location-sections/location-2/location.d.ts +0 -3
  88. package/dist/components/puck-block/location-sections/location-2/location.js +133 -0
  89. package/dist/components/puck-block/location-sections/location-3/index.js +109 -0
  90. package/dist/components/puck-block/location-sections/location-3/location.d.ts +0 -3
  91. package/dist/components/puck-block/location-sections/location-3/location.js +140 -0
  92. package/dist/components/puck-block/location-sections/props.d.ts +0 -3
  93. package/dist/components/puck-block/metrics-sections/center-media-stats/center-media-stats.js +1 -1
  94. package/dist/components/puck-block/metrics-sections/header-stats-row/header-stats-row.js +1 -1
  95. package/dist/components/puck-block/metrics-sections/mixed-grid-stats/mixed-grid-stats.js +2 -2
  96. package/dist/components/puck-block/metrics-sections/split-stats/split-stats.js +1 -1
  97. package/dist/components/puck-block/metrics-sections/tab-stats/tab-stats.js +4 -4
  98. package/dist/components/puck-block/pricing-sections/pricing-comparison-table/component.js +134 -33
  99. package/dist/components/puck-block/pricing-sections/pricing-comparison-table/index.d.ts +47 -0
  100. package/dist/components/puck-block/pricing-sections/pricing-comparison-table/index.js +34 -0
  101. package/dist/components/puck-block/pricing-sections/split-pricing/component.js +3 -3
  102. package/dist/components/puck-block/pricing-sections/tab-pricing-grid/component.js +86 -40
  103. package/dist/components/puck-block/pricing-sections/tab-single-pricing/component.js +1 -1
  104. package/dist/components/puck-block/registry.generated.d.ts +501 -12
  105. package/dist/components/puck-block/registry.generated.js +157 -138
  106. package/dist/components/puck-block/showcase-sections/tab-timeline/component.js +2 -2
  107. package/dist/components/puck-block/testimonial-sections/bento-testimonial/component.js +157 -83
  108. package/dist/components/puck-block/testimonial-sections/centered-testimonial/component.js +71 -28
  109. package/dist/components/puck-block/testimonial-sections/image-testimonial/component.js +66 -29
  110. package/dist/components/puck-block/testimonial-sections/image-testimonial-carousel/component.js +1 -1
  111. package/dist/components/puck-block/testimonial-sections/tab-testimonial/component.js +6 -6
  112. package/dist/components/puck-block/testimonial-sections/testimonial-card-grid/component.js +2 -2
  113. package/dist/components/puck-block/testimonial-sections/testimonial-carousel/component.js +1 -1
  114. package/dist/components/puck-block/text-sections/prose-content/component.js +1 -1
  115. package/dist/components/puck-block/text-sections/side-media-content/component.js +1 -1
  116. package/dist/components/puck-block/text-sections/sticky-text-multi-image/component.js +3 -3
  117. package/dist/components/puck-core/core/props/form.js +25 -1
  118. package/dist/components/puck-core/core/props/media.js +6 -1
  119. package/dist/components/puck-core/fields/array-field.d.ts +7 -0
  120. package/dist/components/puck-core/fields/array-field.js +229 -0
  121. package/dist/components/puck-core/fields/auto-field.js +11 -0
  122. package/dist/components/puck-core/fields/image-upload-field.js +1 -1
  123. package/dist/components/puck-core/fields/index.d.ts +1 -0
  124. package/dist/components/puck-core/fields/location-field.js +4 -1
  125. package/dist/components/puck-core/fields/object-field.js +1 -1
  126. package/dist/index.js +6 -0
  127. package/dist/node_modules/.pnpm/@dnd-kit_accessibility@3.1.1_react@19.2.4/node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js +59 -0
  128. package/dist/node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@dnd-kit/core/dist/core.esm.js +3093 -0
  129. package/dist/node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.2.4_react@19.2.4__react@19.2.4__react@19.2.4/node_modules/@dnd-kit/sortable/dist/sortable.esm.js +592 -0
  130. package/dist/node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.2.4/node_modules/@dnd-kit/utilities/dist/utilities.esm.js +301 -0
  131. package/package.json +7 -1
@@ -57,6 +57,9 @@ export interface FooterSectionBaseProps {
57
57
  contact: FooterContact;
58
58
  companyImages: BaseImage[];
59
59
  styles: FooterSectionStyles;
60
+ __metadata?: {
61
+ type: "footer";
62
+ };
60
63
  }
61
64
  export declare const footerStyleFields: {
62
65
  readonly bordered: {
@@ -112,7 +112,7 @@ const defaultProject = {
112
112
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
113
113
  image: {
114
114
  src: "https://picsum.photos/seed/fullscreen-port/1920/1080",
115
- alt: "Relume placeholder image"
115
+ alt: "Placeholder image"
116
116
  },
117
117
  url: "#",
118
118
  button: { label: "View project", variant: "secondary" }
@@ -89,8 +89,21 @@ declare const conf: {
89
89
  }];
90
90
  };
91
91
  slidesPerView: {
92
- readonly type: "text";
92
+ readonly type: "select";
93
93
  readonly label: "Slides Per View";
94
+ readonly options: readonly [{
95
+ readonly label: "1";
96
+ readonly value: "1";
97
+ }, {
98
+ readonly label: "1 → 2 (responsive)";
99
+ readonly value: "1-md2";
100
+ }, {
101
+ readonly label: "2 → 3 (responsive)";
102
+ readonly value: "2-md3";
103
+ }, {
104
+ readonly label: "2 → 4 (responsive)";
105
+ readonly value: "2-md4";
106
+ }];
94
107
  };
95
108
  slideOverflow: {
96
109
  readonly type: "radio";
@@ -24,7 +24,12 @@ const InteractivePortfolio = (props) => {
24
24
  ...InteractivePortfolioDefaults,
25
25
  ...props
26
26
  };
27
- const { className: sectionClassName, style: sectionStyle, css, listLayout = "center" } = styles ?? {};
27
+ const {
28
+ className: sectionClassName,
29
+ style: sectionStyle,
30
+ css,
31
+ listLayout = "center"
32
+ } = styles ?? {};
28
33
  const ref = useRef(null);
29
34
  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
30
35
  const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -49,109 +54,129 @@ const InteractivePortfolio = (props) => {
49
54
  const translateLeftInverse = direction === "left" ? -50 : 0;
50
55
  const translateRightInverse = direction === "right" ? 50 : 0;
51
56
  if (listLayout === "left-with-sticky-image") {
52
- return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
53
- /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
54
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16", children: [
55
- /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-20 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden", children: /* @__PURE__ */ jsx(
56
- CompoundImage,
57
- {
58
- src: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.src : (_a = hoverLinks[0]) == null ? void 0 : _a.image.src,
59
- alt: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.alt : (_b = hoverLinks[0]) == null ? void 0 : _b.image.alt,
60
- className: "size-full object-cover transition-all duration-500"
61
- }
62
- ) }) }),
63
- /* @__PURE__ */ jsx("div", { children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
64
- "a",
65
- {
66
- href: link.url,
67
- onMouseEnter: () => setHoveredIndex(index),
68
- onMouseLeave: () => setHoveredIndex(null),
69
- className: "flex items-center justify-between border-b border-border-primary py-6 md:py-8",
70
- children: [
71
- /* @__PURE__ */ jsx(
72
- "h3",
73
- {
74
- className: cn(
75
- "text-2xl font-bold transition-colors duration-300 md:text-4xl lg:text-5xl",
57
+ return /* @__PURE__ */ jsx(
58
+ SectionWrapper,
59
+ {
60
+ className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
61
+ style: sectionStyle,
62
+ css,
63
+ children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
64
+ /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
65
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16", children: [
66
+ /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-20 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden", children: /* @__PURE__ */ jsx(
67
+ CompoundImage,
68
+ {
69
+ src: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.src : (_a = hoverLinks[0]) == null ? void 0 : _a.image.src,
70
+ alt: hoveredIndex !== null ? hoverLinks[hoveredIndex].image.alt : (_b = hoverLinks[0]) == null ? void 0 : _b.image.alt,
71
+ className: "size-full object-cover transition-all duration-500"
72
+ }
73
+ ) }) }),
74
+ /* @__PURE__ */ jsx("div", { children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
75
+ "a",
76
+ {
77
+ href: link.url,
78
+ onMouseEnter: () => setHoveredIndex(index),
79
+ onMouseLeave: () => setHoveredIndex(null),
80
+ className: "flex items-center justify-between border-b border-border-primary py-6 md:py-8",
81
+ children: [
82
+ /* @__PURE__ */ jsx(
83
+ "h3",
76
84
  {
77
- "text-black/20": hoveredIndex !== index && hoveredIndex !== null
85
+ className: cn(
86
+ "text-2xl font-bold transition-colors duration-300 md:text-4xl lg:text-5xl",
87
+ {
88
+ "text-black/20": hoveredIndex !== index && hoveredIndex !== null
89
+ }
90
+ ),
91
+ children: link.heading
78
92
  }
79
93
  ),
80
- children: link.heading
81
- }
82
- ),
83
- /* @__PURE__ */ jsx("div", { className: "bg-background-secondary px-2 py-1 text-sm font-semibold", children: link.tag })
84
- ]
85
- },
86
- index
87
- )) })
88
- ] })
89
- ] }) });
94
+ /* @__PURE__ */ jsx("div", { className: "bg-background-secondary px-2 py-1 text-sm font-semibold", children: link.tag })
95
+ ]
96
+ },
97
+ index
98
+ )) })
99
+ ] })
100
+ ] })
101
+ }
102
+ );
90
103
  }
91
104
  const isLeftAligned = listLayout === "left-aligned";
92
- return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, onMouseMove: handleMouseMove, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isLeftAligned }), children: [
93
- /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
94
- /* @__PURE__ */ jsx(
95
- motion.div,
96
- {
97
- initial: "initial",
98
- whileHover: direction,
99
- ref,
100
- onMouseEnter: handleMouseEnter,
101
- onMouseLeave: handleMouseLeave,
102
- children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
103
- "a",
104
- {
105
- href: link.url,
106
- onMouseEnter: () => setHoveredIndex(index),
107
- className: cn("flex items-center gap-2 p-4 sm:gap-4 md:gap-8", {
108
- "flex-col justify-center sm:flex-row": !isLeftAligned,
109
- "flex-row justify-between border-b border-border-primary": isLeftAligned
110
- }),
111
- children: [
112
- isLeftAligned && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-neutral-500", children: String(index + 1).padStart(2, "0") }),
113
- /* @__PURE__ */ jsx(
114
- "h3",
115
- {
116
- className: cn(
117
- "font-bold transition-colors duration-300",
118
- {
119
- "text-6xl md:text-9xl lg:text-10xl": !isLeftAligned,
120
- "text-2xl md:text-4xl lg:text-5xl": isLeftAligned,
121
- "lg:text-black/20": hoveredIndex !== index && hoveredIndex !== null,
122
- "lg:text-black": hoveredIndex === index || hoveredIndex === null
123
- }
124
- ),
125
- children: link.heading
126
- }
127
- ),
128
- /* @__PURE__ */ jsx("div", { className: "bg-background-secondary border border-neutral-lightest px-2 py-1 text-sm font-semibold", children: link.tag }),
129
- /* @__PURE__ */ jsx(
130
- motion.div,
131
- {
132
- className: `pointer-events-none fixed inset-0 -z-10 hidden size-[600px] lg:block ${hoveredIndex === index ? "opacity-100" : "opacity-0"}`,
133
- style: {
134
- translateX: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
135
- translateY: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
105
+ return /* @__PURE__ */ jsx(
106
+ SectionWrapper,
107
+ {
108
+ className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
109
+ style: sectionStyle,
110
+ css,
111
+ onMouseMove: handleMouseMove,
112
+ children: /* @__PURE__ */ jsxs(
113
+ "div",
114
+ {
115
+ className: cn("container", { "max-w-xl text-center": !isLeftAligned }),
116
+ children: [
117
+ /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
118
+ /* @__PURE__ */ jsx(
119
+ motion.div,
120
+ {
121
+ initial: "initial",
122
+ whileHover: direction,
123
+ ref,
124
+ onMouseEnter: handleMouseEnter,
125
+ onMouseLeave: handleMouseLeave,
126
+ children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
127
+ "a",
128
+ {
129
+ href: link.url,
130
+ onMouseEnter: () => setHoveredIndex(index),
131
+ className: cn("flex items-center gap-2 p-4 sm:gap-4 md:gap-8", {
132
+ "flex-col justify-center sm:flex-row": !isLeftAligned,
133
+ "flex-row justify-between border-b border-border-primary": isLeftAligned
134
+ }),
135
+ children: [
136
+ isLeftAligned && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-neutral-500", children: String(index + 1).padStart(2, "0") }),
137
+ /* @__PURE__ */ jsx(
138
+ "h3",
139
+ {
140
+ className: cn("font-bold transition-colors duration-300", {
141
+ "text-6xl md:text-9xl lg:text-10xl": !isLeftAligned,
142
+ "text-2xl md:text-4xl lg:text-5xl": isLeftAligned,
143
+ "lg:text-black/20": hoveredIndex !== index && hoveredIndex !== null,
144
+ "lg:text-black": hoveredIndex === index || hoveredIndex === null
145
+ }),
146
+ children: link.heading
147
+ }
148
+ ),
149
+ /* @__PURE__ */ jsx("div", { className: "bg-background-secondary whitespace-nowrap border border-neutral-lightest px-2 py-1 text-sm font-semibold", children: link.tag }),
150
+ /* @__PURE__ */ jsx(
151
+ motion.div,
152
+ {
153
+ className: `pointer-events-none fixed inset-0 -z-10 hidden size-[600px] lg:block ${hoveredIndex === index ? "opacity-100" : "opacity-0"}`,
154
+ style: {
155
+ translateX: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
156
+ translateY: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
157
+ },
158
+ children: /* @__PURE__ */ jsx(
159
+ motion.img,
160
+ {
161
+ className: "size-full max-w-md",
162
+ variants: imageVariants,
163
+ src: link.image.src,
164
+ alt: link.image.alt
165
+ }
166
+ )
167
+ }
168
+ )
169
+ ]
136
170
  },
137
- children: /* @__PURE__ */ jsx(
138
- motion.img,
139
- {
140
- className: "size-full max-w-md",
141
- variants: imageVariants,
142
- src: link.image.src,
143
- alt: link.image.alt
144
- }
145
- )
146
- }
147
- )
148
- ]
149
- },
150
- index
151
- ))
152
- }
153
- )
154
- ] }) });
171
+ index
172
+ ))
173
+ }
174
+ )
175
+ ]
176
+ }
177
+ )
178
+ }
179
+ );
155
180
  };
156
181
  const defaultHoverLink = {
157
182
  url: "#",
@@ -159,7 +184,7 @@ const defaultHoverLink = {
159
184
  tag: "Tag",
160
185
  image: {
161
186
  src: "https://picsum.photos/seed/interactive-port/800/800",
162
- alt: "Relume placeholder image"
187
+ alt: "Placeholder image"
163
188
  }
164
189
  };
165
190
  const InteractivePortfolioDefaults = {
@@ -171,12 +196,48 @@ const InteractivePortfolioDefaults = {
171
196
  images: [],
172
197
  projects: [],
173
198
  hoverLinks: [
174
- { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-1/800/800", alt: "Project 1" } },
175
- { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-2/800/800", alt: "Project 2" } },
176
- { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-3/800/800", alt: "Project 3" } },
177
- { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-4/800/800", alt: "Project 4" } },
178
- { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-5/800/800", alt: "Project 5" } },
179
- { ...defaultHoverLink, image: { src: "https://picsum.photos/seed/ip-6/800/800", alt: "Project 6" } }
199
+ {
200
+ ...defaultHoverLink,
201
+ image: {
202
+ src: "https://picsum.photos/seed/ip-1/800/800",
203
+ alt: "Project 1"
204
+ }
205
+ },
206
+ {
207
+ ...defaultHoverLink,
208
+ image: {
209
+ src: "https://picsum.photos/seed/ip-2/800/800",
210
+ alt: "Project 2"
211
+ }
212
+ },
213
+ {
214
+ ...defaultHoverLink,
215
+ image: {
216
+ src: "https://picsum.photos/seed/ip-3/800/800",
217
+ alt: "Project 3"
218
+ }
219
+ },
220
+ {
221
+ ...defaultHoverLink,
222
+ image: {
223
+ src: "https://picsum.photos/seed/ip-4/800/800",
224
+ alt: "Project 4"
225
+ }
226
+ },
227
+ {
228
+ ...defaultHoverLink,
229
+ image: {
230
+ src: "https://picsum.photos/seed/ip-5/800/800",
231
+ alt: "Project 5"
232
+ }
233
+ },
234
+ {
235
+ ...defaultHoverLink,
236
+ image: {
237
+ src: "https://picsum.photos/seed/ip-6/800/800",
238
+ alt: "Project 6"
239
+ }
240
+ }
180
241
  ],
181
242
  styles: {
182
243
  listLayout: "center"
@@ -56,8 +56,24 @@ declare const conf: {
56
56
  };
57
57
  };
58
58
  columns: {
59
- readonly type: "text";
59
+ readonly type: "select";
60
60
  readonly label: "Columns";
61
+ readonly options: readonly [{
62
+ readonly label: "1";
63
+ readonly value: "1";
64
+ }, {
65
+ readonly label: "2";
66
+ readonly value: "2";
67
+ }, {
68
+ readonly label: "3";
69
+ readonly value: "3";
70
+ }, {
71
+ readonly label: "2 → 3 (responsive)";
72
+ readonly value: "2-lg3";
73
+ }, {
74
+ readonly label: "2 → 4 (responsive)";
75
+ readonly value: "2-lg4";
76
+ }];
61
77
  };
62
78
  };
63
79
  };
@@ -7,40 +7,53 @@ const MasonryGrid = (props) => {
7
7
  ...MasonryGridDefaults,
8
8
  ...props
9
9
  };
10
- const { className: sectionClassName, style: sectionStyle, css, columns = "2" } = styles ?? {};
10
+ const {
11
+ className: sectionClassName,
12
+ style: sectionStyle,
13
+ css,
14
+ columns = "2"
15
+ } = styles ?? {};
11
16
  const cols = parseInt(columns, 10) || 2;
12
- return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
13
- /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-18 lg:mb-20", children: [
14
- /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
15
- /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
16
- ] }),
17
- /* @__PURE__ */ jsx(
18
- "div",
19
- {
20
- className: cn("gap-x-8", {
21
- "md:columns-2": cols === 2,
22
- "md:columns-2 lg:columns-3": cols === 3
23
- }),
24
- children: images.map((image, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "mb-8 inline-block w-full", children: /* @__PURE__ */ jsx(
17
+ return /* @__PURE__ */ jsx(
18
+ SectionWrapper,
19
+ {
20
+ className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
21
+ style: sectionStyle,
22
+ css,
23
+ children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
24
+ /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-18 lg:mb-20", children: [
25
+ /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
26
+ /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
27
+ ] }),
28
+ /* @__PURE__ */ jsx(
25
29
  "div",
26
30
  {
27
- className: cn("relative inline-block w-full", {
28
- "pt-[100%]": index % 3 === 0,
29
- "pt-[66.66%]": index % 3 !== 0
31
+ className: cn("gap-x-8", {
32
+ "md:columns-2": cols === 2,
33
+ "md:columns-2 lg:columns-3": cols === 3
30
34
  }),
31
- children: /* @__PURE__ */ jsx(
32
- CompoundImage,
35
+ children: images.map((image, index) => /* @__PURE__ */ jsx("a", { href: "#", className: "mb-8 inline-block w-full", children: /* @__PURE__ */ jsx(
36
+ "div",
33
37
  {
34
- src: image.src,
35
- alt: image.alt,
36
- className: "absolute inset-0 size-full object-cover"
38
+ className: cn("relative inline-block w-full", {
39
+ "pt-[100%]": index % 3 === 0,
40
+ "pt-[66.66%]": index % 3 !== 0
41
+ }),
42
+ children: /* @__PURE__ */ jsx(
43
+ CompoundImage,
44
+ {
45
+ src: image.src,
46
+ alt: image.alt,
47
+ className: "absolute inset-0 size-full object-cover"
48
+ }
49
+ )
37
50
  }
38
- )
51
+ ) }, index))
39
52
  }
40
- ) }, index))
41
- }
42
- )
43
- ] }) });
53
+ )
54
+ ] })
55
+ }
56
+ );
44
57
  };
45
58
  const MasonryGridDefaults = {
46
59
  tagline: "",
@@ -49,10 +62,22 @@ const MasonryGridDefaults = {
49
62
  button: { label: "View all" },
50
63
  buttons: [],
51
64
  images: [
52
- { src: "https://picsum.photos/seed/masonry-1/800/800", alt: "Gallery image 1" },
53
- { src: "https://picsum.photos/seed/masonry-2/800/533", alt: "Gallery image 2" },
54
- { src: "https://picsum.photos/seed/masonry-3/800/533", alt: "Gallery image 3" },
55
- { src: "https://picsum.photos/seed/masonry-4/800/800", alt: "Gallery image 4" }
65
+ {
66
+ src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800&h=800&fit=crop",
67
+ alt: "Gallery image 1"
68
+ },
69
+ {
70
+ src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&h=533&fit=crop",
71
+ alt: "Gallery image 2"
72
+ },
73
+ {
74
+ src: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&h=533&fit=crop",
75
+ alt: "Gallery image 3"
76
+ },
77
+ {
78
+ src: "https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=800&h=800&fit=crop",
79
+ alt: "Gallery image 4"
80
+ }
56
81
  ],
57
82
  projects: [],
58
83
  hoverLinks: [],
@@ -179,8 +179,24 @@ declare const conf: {
179
179
  };
180
180
  };
181
181
  columns: {
182
- readonly type: "text";
182
+ readonly type: "select";
183
183
  readonly label: "Columns";
184
+ readonly options: readonly [{
185
+ readonly label: "1";
186
+ readonly value: "1";
187
+ }, {
188
+ readonly label: "2";
189
+ readonly value: "2";
190
+ }, {
191
+ readonly label: "3";
192
+ readonly value: "3";
193
+ }, {
194
+ readonly label: "2 → 3 (responsive)";
195
+ readonly value: "2-lg3";
196
+ }, {
197
+ readonly label: "2 → 4 (responsive)";
198
+ readonly value: "2-lg4";
199
+ }];
184
200
  };
185
201
  bordered: {
186
202
  readonly type: "radio";
@@ -42,7 +42,7 @@ const PortfolioCards = (props) => {
42
42
  const isStacked = cardLayout === "stacked";
43
43
  const isZigzag = cardLayout === "zigzag";
44
44
  const isMasonry = cardLayout === "masonry";
45
- const imageElement = /* @__PURE__ */ jsx("a", { href: project.url, className: cn({ "block": true }), children: /* @__PURE__ */ jsx(
45
+ const imageElement = /* @__PURE__ */ jsx("a", { href: project.url, className: cn({ block: true }), children: /* @__PURE__ */ jsx(
46
46
  CompoundImage,
47
47
  {
48
48
  src: project.image.src,
@@ -64,7 +64,14 @@ const PortfolioCards = (props) => {
64
64
  children: tag.label
65
65
  }
66
66
  ) }, tagIndex)) }),
67
- (metaType === "tags-button" || metaType === "none") && project.button && /* @__PURE__ */ jsx("div", { className: "mt-5 md:mt-6", children: /* @__PURE__ */ jsx(Button, { variant: project.button.variant, size: project.button.size, children: project.button.label }) })
67
+ (metaType === "tags-button" || metaType === "none") && project.button && /* @__PURE__ */ jsx("div", { className: "mt-5 md:mt-6", children: /* @__PURE__ */ jsx(
68
+ Button,
69
+ {
70
+ variant: project.button.variant,
71
+ size: project.button.size,
72
+ children: project.button.label
73
+ }
74
+ ) })
68
75
  ] });
69
76
  if (isZigzag) {
70
77
  return /* @__PURE__ */ jsx(
@@ -114,25 +121,46 @@ const PortfolioCards = (props) => {
114
121
  index
115
122
  );
116
123
  };
117
- return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
118
- /* @__PURE__ */ jsxs("header", { className: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
119
- /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
120
- /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
121
- /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
122
- ] }),
123
- /* @__PURE__ */ jsx("div", { className: getGridClass(), children: projects.map((project, index) => renderProject(project, index)) }),
124
- /* @__PURE__ */ jsx("footer", { className: "mt-12 flex justify-center md:mt-18 lg:mt-20", children: /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }) })
125
- ] }) });
124
+ return /* @__PURE__ */ jsx(
125
+ SectionWrapper,
126
+ {
127
+ className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
128
+ style: sectionStyle,
129
+ css,
130
+ children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
131
+ /* @__PURE__ */ jsxs("header", { className: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
132
+ /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
133
+ /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
134
+ /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
135
+ ] }),
136
+ /* @__PURE__ */ jsx("div", { className: getGridClass(), children: projects.map((project, index) => renderProject(project, index)) }),
137
+ /* @__PURE__ */ jsx("footer", { className: "mt-12 flex justify-center md:mt-18 lg:mt-20", children: /* @__PURE__ */ jsx(
138
+ CompoundButton,
139
+ {
140
+ label: button.label,
141
+ variant: button.variant,
142
+ size: button.size,
143
+ action: button.action,
144
+ icon: button.icon
145
+ }
146
+ ) })
147
+ ] })
148
+ }
149
+ );
126
150
  };
127
151
  const defaultProject = {
128
152
  title: "Project name here",
129
153
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
130
154
  image: {
131
155
  src: "https://picsum.photos/seed/portfolio-card/1200/800",
132
- alt: "Relume placeholder image"
156
+ alt: "Placeholder image"
133
157
  },
134
158
  url: "#",
135
- button: { label: "View project", variant: "link", size: "sm" },
159
+ button: {
160
+ label: "View project",
161
+ variant: "link",
162
+ size: "sm"
163
+ },
136
164
  tags: [
137
165
  { label: "Tag one", url: "#" },
138
166
  { label: "Tag two", url: "#" }
@@ -96,7 +96,7 @@ const defaultProject = {
96
96
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
97
97
  image: {
98
98
  src: "https://picsum.photos/seed/portfolio-div/1200/800",
99
- alt: "Relume placeholder image"
99
+ alt: "Placeholder image"
100
100
  },
101
101
  url: "#",
102
102
  button: { label: "View project", variant: "link", size: "sm" },