dune-react 0.0.8 → 0.0.9

package/dist/components/puck-block/cta-sections/banner-cta-1/banner-cta.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
 const variantStyles = {
   primary: "bg-primary text-primary-foreground",
   dark: "bg-foreground text-background",
@@ -21,19 +22,19 @@ const BannerCta = ({
   description && /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg opacity-90 max-w-2xl mx-auto", children: description }),
   /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-4", children: [
     /* @__PURE__ */ jsx(
-      "a",
+      CompoundButton,
       {
-        href: ctaUrl,
-        className: "inline-flex items-center rounded-full bg-background text-foreground px-8 py-3 text-sm font-semibold shadow hover:opacity-90 transition-opacity",
-        children: ctaLabel
+        label: ctaLabel,
+        url: ctaUrl,
+        variant: "secondary"
       }
     ),
     secondaryLabel && secondaryUrl && /* @__PURE__ */ jsx(
-      "a",
+      CompoundButton,
       {
-        href: secondaryUrl,
-        className: "inline-flex items-center rounded-full border border-current px-8 py-3 text-sm font-semibold hover:bg-white/10 transition-colors",
-        children: secondaryLabel
+        label: secondaryLabel,
+        url: secondaryUrl,
+        variant: "outline"
       }
     )
   ] })

package/dist/components/puck-block/cta-sections/gradient-cta-1/gradient-cta.js

@@ -9,13 +9,13 @@ const GradientCta = ({
   heading,
   description,
   buttons,
-  gradientFrom = "oklch(0.55 0.2 260)",
-  gradientTo = "oklch(0.55 0.2 330)",
+  gradientFrom = "var(--primary)",
+  gradientTo = "var(--chart-2)",
   backgroundCSS,
   textColor
 }) => {
   const bg = backgroundCSS || `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
-  const color = textColor || (backgroundCSS ? void 0 : "white");
+  const color = textColor || (backgroundCSS ? void 0 : "var(--primary-foreground)");
   return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsx(
     "div",
     {

package/dist/components/puck-block/cta-sections/gradient-cta-1/index.js

@@ -6,12 +6,12 @@ const conf = {
     gradientFrom: {
       type: "text",
       label: "Gradient Start",
-      ai: { instructions: "oklch format" }
+      ai: { instructions: "Use a CSS variable from the template theme, e.g. 'var(--primary)', 'var(--chart-1)'. Also accepts oklch format." }
     },
     gradientTo: {
       type: "text",
       label: "Gradient End",
-      ai: { instructions: "oklch format" }
+      ai: { instructions: "Use a CSS variable from the template theme, e.g. 'var(--chart-2)', 'var(--accent)'. Also accepts oklch format." }
     },
     backgroundCSS: {
       type: "textarea",
@@ -35,8 +35,8 @@ const conf = {
     buttons: [
       { label: "Start Free Trial", icon: "move-right", variant: "default" }
     ],
-    gradientFrom: "oklch(0.55 0.2 260)",
-    gradientTo: "oklch(0.55 0.2 330)",
+    gradientFrom: "var(--primary)",
+    gradientTo: "var(--chart-2)",
     padding: paddingDefaults
   },
   render: GradientCta

package/dist/components/puck-block/cta-sections/newsletter-signup-1/newsletter-signup.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
 const NewsletterSignup = ({
   padding,
   heading,
@@ -24,11 +25,11 @@ const NewsletterSignup = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          CompoundButton,
           {
-            type: "submit",
-            className: "bg-primary text-primary-foreground rounded-lg px-6 py-2.5 font-medium transition-opacity hover:opacity-90",
-            children: buttonLabel
+            label: buttonLabel,
+            variant: "default",
+            type: "submit"
           }
         )
       ]

package/dist/components/puck-block/cta-sections/promo-section-1/promo-section.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundBadge } from "../../../puck-base/badge.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 const PromoSection = ({
   padding,
@@ -15,13 +16,13 @@ const PromoSection = ({
   badge
 }) => {
   if (imagePosition === "background") {
-    return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[400px] items-center overflow-hidden rounded-2xl", children: [
+    return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[400px] items-center overflow-hidden rounded-2xl [&>span]:h-full [&>span]:w-full", children: [
       (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
-        "img",
+        CompoundImage,
         {
           src: image.src,
           alt: image.alt ?? "",
-          className: "absolute inset-0 h-full w-full object-cover"
+          className: "h-full w-full object-cover"
         }
       ),
       /* @__PURE__ */ jsx("div", { className: "bg-foreground/50 absolute inset-0" }),
@@ -85,8 +86,8 @@ const PromoSection = ({
             ) : null
           ) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "bg-muted aspect-[4/3] overflow-hidden rounded-xl", children: (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
-          "img",
+        /* @__PURE__ */ jsx("div", { className: "bg-muted aspect-[4/3] overflow-hidden rounded-xl [&>span]:h-full [&>span]:w-full", children: (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
+          CompoundImage,
           {
             src: image.src,
             alt: image.alt ?? "",

package/dist/components/puck-block/faq-sections/faq-2/faq-2.d.ts

@@ -0,0 +1,16 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+import { CompoundImageProps } from "@/components/puck-base/image";
+export interface Faq2Item {
+    question: string;
+    answer: string;
+}
+export interface Faq2Props {
+    heading?: string;
+    items?: Faq2Item[];
+    image?: CompoundImageProps;
+    imagePosition?: "left" | "right";
+    padding?: CompoundContainerProps["padding"];
+    sectionStyle?: CompoundContainerProps["sectionStyle"];
+    backgroundColor?: string;
+}
+export declare const Faq2: ({ heading, items, image, imagePosition, padding, sectionStyle, backgroundColor, }: Faq2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/faq-sections/faq-2/faq-2.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../shadcn/accordion.js";
+const Faq2 = ({
+  heading,
+  items = [],
+  image,
+  imagePosition = "right",
+  padding,
+  sectionStyle,
+  backgroundColor
+}) => {
+  const imageCol = /* @__PURE__ */ jsx("div", { className: "hidden lg:block lg:sticky lg:top-8 aspect-square overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsx(
+    CompoundImage,
+    {
+      src: (image == null ? void 0 : image.src) ?? "",
+      alt: (image == null ? void 0 : image.alt) ?? "",
+      className: "h-full w-full object-cover"
+    }
+  ) });
+  const accordionCol = /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "flex flex-col gap-3", children: items.map((item, i) => /* @__PURE__ */ jsxs(
+    AccordionItem,
+    {
+      value: `faq2-${i}`,
+      className: "border-0 bg-foreground/[0.047] rounded-3xl px-6",
+      children: [
+        /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base font-medium hover:no-underline py-5 text-left", children: item.question }),
+        /* @__PURE__ */ jsx(AccordionContent, { className: "text-muted-foreground pb-5 text-sm leading-relaxed", children: item.answer })
+      ]
+    },
+    i
+  )) });
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding,
+      sectionStyle,
+      backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
+        heading && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif text-3xl font-semibold tracking-tight md:text-4xl lg:text-5xl", children: heading }) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-12 lg:grid-cols-2 lg:items-start lg:gap-16", children: imagePosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          imageCol,
+          accordionCol
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          accordionCol,
+          imageCol
+        ] }) })
+      ] })
+    }
+  );
+};
+export {
+  Faq2
+};

package/dist/components/puck-block/faq-sections/faq-2/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { Faq2Props } from "./faq-2";
+export type { Faq2Props };
+export declare const conf: ComponentConfig<Faq2Props>;
+export default conf;

package/dist/components/puck-block/faq-sections/faq-2/index.js

@@ -0,0 +1,62 @@
+import { paddingDefaults, image1x1Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { Faq2 } from "./faq-2.js";
+const defaultItems = [
+  {
+    question: "What's included in a session?",
+    answer: "Each session includes a personalized warm-up, structured training tailored to your goals, form coaching, and a cool-down. You'll also receive guidance on next steps to keep progressing."
+  },
+  {
+    question: "How do I know if this is right for me?",
+    answer: "If you have a goal — whether it's losing weight, building strength, improving mobility, or just feeling better — we can help. We offer a free consultation to assess your needs and build a plan."
+  },
+  {
+    question: "How often should I train to see results?",
+    answer: "Most clients see meaningful results training 2–3 times per week. We'll work with your schedule and lifestyle to find the right frequency for your goals."
+  },
+  {
+    question: "Do you offer programs for specific goals?",
+    answer: "Yes — we tailor every program to your specific objectives, whether that's weight loss, muscle gain, athletic performance, or general wellness."
+  }
+];
+const conf = {
+  fields: {
+    heading: { type: "textarea", contentEditable: true },
+    items: {
+      type: "array",
+      min: 1,
+      max: 20,
+      getItemSummary: (item, index = 0) => item.question ? `${item.question.slice(0, 30)}${item.question.length > 30 ? "..." : ""}` : `Question ${index + 1}`,
+      arrayFields: {
+        question: { type: "text", contentEditable: true },
+        answer: { type: "textarea", contentEditable: true }
+      },
+      defaultItemProps: {
+        question: "Your question here",
+        answer: "A helpful answer to the question."
+      }
+    },
+    image,
+    imagePosition: {
+      type: "radio",
+      label: "Image Position",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" }
+      ]
+    },
+    padding,
+    sectionStyle,
+    backgroundColor
+  },
+  defaultProps: {
+    heading: "Questions about getting started",
+    items: defaultItems,
+    image: image1x1Placeholder,
+    imagePosition: "right",
+    padding: paddingDefaults
+  },
+  render: Faq2
+};
+export {
+  conf
+};

package/dist/components/puck-block/feature-sections/feature-cards-1/feature-cards.d.ts

@@ -1,12 +1,11 @@
 import { CompoundContentProps } from "@/components/puck-base/content";
 import { CompoundContainerProps } from "@/components/puck-base/container";
-import { PuckComponent, Slot } from "@puckeditor/core";
+import { CompoundArticleCardProps } from "@/components/puck-base/article-card";
 export interface FeatureCardsProps extends CompoundContentProps {
     padding?: CompoundContainerProps["padding"];
     sectionStyle?: CompoundContainerProps["sectionStyle"];
     backgroundColor?: string;
     columns?: 1 | 2 | 3;
-    cards: Slot;
+    cards?: CompoundArticleCardProps[];
 }
-export declare const FeatureCard: PuckComponent<CompoundContainerProps>;
-export declare const FeatureCards: PuckComponent<FeatureCardsProps>;
+export declare const FeatureCards: ({ padding, sectionStyle, backgroundColor, badge, heading, description, buttons, columns, cards, alignContent, className, }: FeatureCardsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/feature-sections/feature-cards-1/feature-cards.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContent } from "../../../puck-base/content.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundArticleCard } from "../../../puck-base/article-card.js";
 import { cn } from "../../../../utils/css-utils.js";
 const FeatureCards = ({
   padding,
@@ -11,7 +12,7 @@ const FeatureCards = ({
   description,
   buttons,
   columns = 3,
-  cards: Cards,
+  cards = [],
   alignContent = "start",
   className
 }) => {
@@ -27,10 +28,19 @@ const FeatureCards = ({
         spacing: "tight"
       }
     ),
-    Cards && /* @__PURE__ */ jsx(Cards, { className: cn("grid grid-cols-1 gap-8", {
+    cards.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-8", {
       "sm:grid-cols-2": columns >= 2,
       "lg:grid-cols-3": columns >= 3
-    }) })
+    }), children: cards.map((card, index) => /* @__PURE__ */ jsx(
+      CompoundArticleCard,
+      {
+        image: card.image,
+        heading: card.heading,
+        description: card.description,
+        button: card.button
+      },
+      index
+    )) })
   ] }) });
 };
 export {

package/dist/components/puck-block/feature-sections/feature-cards-1/index.js

@@ -1,10 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, contentFields, image16x9Placeholder, cards } from "../../../puck-base/core/fields.js";
+import { paddingDefaults, image16x9Placeholder, backgroundColor, sectionStyle, padding, button, image, contentFields } from "../../../puck-base/core/fields.js";
 import { FeatureCards } from "./feature-cards.js";
-const { icon: defaultIcon, ...cardsDefaultItemProps } = cards.defaultItemProps;
-const defaultCard = {
-  ...cardsDefaultItemProps,
-  image: image16x9Placeholder
-};
 const conf = {
   fields: {
     ...contentFields,
@@ -26,8 +21,26 @@ const conf = {
       ]
     },
     cards: {
-      type: "slot",
-      allow: ["ArticleCard"]
+      type: "array",
+      getItemSummary: (item, index = 0) => item.heading || `Card ${index + 1}`,
+      arrayFields: {
+        image,
+        heading: { type: "text", contentEditable: true },
+        description: { type: "textarea", contentEditable: true },
+        button
+      },
+      defaultItemProps: {
+        image: image16x9Placeholder,
+        heading: "Card heading",
+        description: "Card description goes here.",
+        button: {
+          label: "",
+          url: "",
+          variant: "link",
+          size: "default",
+          icon: "move-right"
+        }
+      }
     },
     padding,
     sectionStyle,
@@ -44,13 +57,20 @@ const conf = {
     buttons: [],
     alignContent: "start",
     columns: 3,
-    cards: Array.from({ length: 1 }).map((_, index) => ({
-      type: "ArticleCard",
-      props: {
-        ...defaultCard,
-        heading: `Card ${index + 1}`
+    cards: [
+      {
+        image: image16x9Placeholder,
+        heading: "Card 1",
+        description: "Card description goes here.",
+        button: {
+          label: "",
+          url: "",
+          variant: "link",
+          size: "default",
+          icon: "move-right"
+        }
       }
-    })),
+    ],
     padding: paddingDefaults
   },
   render: FeatureCards

package/dist/components/puck-block/feature-sections/feature-showcase-1/feature-showcase.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 const FeatureShowcase = ({
   padding,
   sectionStyle,
@@ -27,14 +28,7 @@ const FeatureShowcase = ({
           /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: f.title }),
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: f.description })
         ] }, i)) }),
-        /* @__PURE__ */ jsx("div", { className: "border-border/50 bg-muted overflow-hidden rounded-xl border", children: (image == null ? void 0 : image.src) ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: image.src,
-            alt: (image == null ? void 0 : image.alt) || "",
-            className: "h-full w-full object-cover"
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-[4/3] w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Feature Image" }) }) })
+        /* @__PURE__ */ jsx("div", { className: "border-border/50 bg-muted [&>span]:w-full overflow-hidden rounded-xl border", children: (image == null ? void 0 : image.src) ? /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: (image == null ? void 0 : image.alt) || "", className: "w-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex aspect-[4/3] w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Feature Image" }) }) })
       ]
     }
   )

package/dist/components/puck-block/feature-sections/product-features-1/product-features.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 import DynamicIcon from "../../../../node_modules/.pnpm/lucide-react@0.540.0_react@19.2.4/node_modules/lucide-react/dist/esm/DynamicIcon.js";
 const GridLayout = ({
@@ -7,14 +8,7 @@ const GridLayout = ({
   columns,
   image
 }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
-  (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: image.src,
-      alt: image.alt || "",
-      className: "h-auto w-full object-cover"
-    }
-  ) }),
+  (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx("div", { className: "[&>span]:w-full overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt || "", className: "w-full object-cover" }) }),
   /* @__PURE__ */ jsx(
     "div",
     {
@@ -48,17 +42,10 @@ const AlternatingLayout = ({ features }) => /* @__PURE__ */ jsx("div", { classNa
           "div",
           {
             className: cn(
-              "bg-muted overflow-hidden rounded-xl",
+              "bg-muted [&>span]:w-full overflow-hidden rounded-xl",
               !isEven && "lg:order-2"
             ),
-            children: ((_a = feature.image) == null ? void 0 : _a.src) ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: feature.image.src,
-                alt: feature.image.alt || "",
-                className: "h-auto w-full object-cover"
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-video items-center justify-center", children: feature.icon && feature.icon !== "none" && /* @__PURE__ */ jsx(
+            children: ((_a = feature.image) == null ? void 0 : _a.src) ? /* @__PURE__ */ jsx(CompoundImage, { src: feature.image.src, alt: feature.image.alt || "", className: "w-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex aspect-video items-center justify-center", children: feature.icon && feature.icon !== "none" && /* @__PURE__ */ jsx(
               DynamicIcon,
               {
                 name: feature.icon,
@@ -107,14 +94,7 @@ const ListLayout = ({
     },
     index
   )) }),
-  (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: image.src,
-      alt: image.alt || "",
-      className: "sticky top-8 h-auto w-full rounded-xl object-cover"
-    }
-  ) })
+  (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx("div", { className: "[&>span]:w-full overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt || "", className: "sticky top-8 w-full rounded-xl object-cover" }) })
 ] });
 const ProductFeatures = ({
   padding,

package/dist/components/puck-block/gallery-sections/gallery-1/gallery.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 const columnClasses = {
   2: "grid-cols-1 sm:grid-cols-2",
@@ -44,8 +45,8 @@ const Gallery = ({
         {
           className: "group bg-muted relative overflow-hidden rounded-lg",
           children: [
-            /* @__PURE__ */ jsx("div", { className: cn(aspectClasses[aspectRatio]), children: image.src && /* @__PURE__ */ jsx(
-              "img",
+            /* @__PURE__ */ jsx("div", { className: cn(aspectClasses[aspectRatio], "[&>span]:w-full", aspectRatio !== "auto" && "[&>span]:h-full"), children: image.src && /* @__PURE__ */ jsx(
+              CompoundImage,
               {
                 src: image.src,
                 alt: image.alt ?? `Gallery image ${index + 1}`,

package/dist/components/puck-block/gallery-sections/gallery-2/gallery-2.d.ts

@@ -0,0 +1,14 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
+export interface Gallery2Image {
+    src: string;
+    alt?: string;
+}
+export interface Gallery2Props {
+    padding?: CompoundContainerProps["padding"];
+    sectionStyle?: CompoundContainerProps["sectionStyle"];
+    backgroundColor?: string;
+    heading?: string;
+    description?: string;
+    images?: Gallery2Image[];
+}
+export declare const Gallery2: ({ padding, sectionStyle, backgroundColor, heading, description, images, }: Gallery2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/gallery-sections/gallery-2/gallery-2.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+import { useState, useCallback, useEffect } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const Gallery2 = ({
+  padding,
+  sectionStyle,
+  backgroundColor,
+  heading,
+  description,
+  images = []
+}) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ align: "start", loop: false });
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setCanScrollPrev(emblaApi.canScrollPrev());
+    setCanScrollNext(emblaApi.canScrollNext());
+  }, [emblaApi]);
+  useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+    emblaApi.on("select", onSelect);
+    emblaApi.on("reInit", onSelect);
+    return () => {
+      emblaApi.off("select", onSelect);
+      emblaApi.off("reInit", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
+    {
+      padding,
+      sectionStyle,
+      backgroundColor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
+        (heading || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between lg:gap-8", children: [
+          heading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 lg:basis-1/2", children: /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground lg:text-4xl", children: heading }) }),
+          description && /* @__PURE__ */ jsx("div", { className: "lg:basis-1/2 lg:pt-11", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-base leading-relaxed", children: description }) })
+        ] }),
+        images.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden", ref: emblaRef, children: /* @__PURE__ */ jsx("div", { className: "flex -ml-4 lg:-ml-6", children: images.map((image, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "min-w-0 shrink-0 grow-0 pl-4 lg:pl-6 basis-[97%] lg:basis-[92%]",
+              children: /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-hidden aspect-[2/1]", children: /* @__PURE__ */ jsx("div", { className: "rounded-3xl overflow-hidden absolute inset-0 size-full [&>span]:h-full [&>span]:w-full", children: image.src ? /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: image.src,
+                  alt: image.alt ?? `Gallery image ${index + 1}`,
+                  className: "h-full w-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: image.alt ?? `Image ${index + 1}` }) }) }) })
+            },
+            index
+          )) }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => emblaApi == null ? void 0 : emblaApi.scrollPrev(),
+              disabled: !canScrollPrev,
+              className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-md transition hover:bg-background disabled:opacity-30",
+              "aria-label": "Previous image",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5 text-foreground" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => emblaApi == null ? void 0 : emblaApi.scrollNext(),
+              disabled: !canScrollNext,
+              className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background/90 shadow-md transition hover:bg-background disabled:opacity-30",
+              "aria-label": "Next image",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5 text-foreground" })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  Gallery2
+};

package/dist/components/puck-block/gallery-sections/gallery-2/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentConfig } from "@puckeditor/core";
+import { Gallery2Props } from "./gallery-2";
+export type { Gallery2Props };
+export declare const conf: ComponentConfig<Gallery2Props>;
+export default conf;