dune-react 0.0.8 → 0.0.10

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

@@ -0,0 +1,71 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { X, Check } from "lucide-react";
+const BeforeAfter = ({
+  eyebrow,
+  heading,
+  description,
+  beforeLabel = "Before",
+  beforeItems = [],
+  afterLabel = "After",
+  afterItems = [],
+  button,
+  layout = "side-by-side",
+  styles
+}) => /* @__PURE__ */ jsxs(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: [
+      (eyebrow || heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center max-w-2xl mx-auto", children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: "text-primary text-sm font-semibold uppercase tracking-widest mb-3", children: eyebrow }),
+        heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative mx-auto max-w-4xl",
+            layout === "side-by-side" ? "grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-0" : "flex flex-col gap-6"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-muted/40 p-8 md:rounded-r-none md:border-r-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-destructive" }) }),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm font-semibold uppercase tracking-wider", children: beforeLabel })
+              ] }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: beforeItems.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+                /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex-shrink-0 flex h-5 w-5 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-destructive" }) }),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm leading-relaxed", children: item.text })
+              ] }, i)) })
+            ] }),
+            layout === "side-by-side" && /* @__PURE__ */ jsxs("div", { className: "hidden md:flex flex-col items-center justify-center relative", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-1/2 -translate-x-1/2 w-px bg-border" }),
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background border border-border shadow-sm", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-bold", children: "VS" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-primary/20 bg-primary/5 p-8 md:rounded-l-none md:border-l-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary" }) }),
+                /* @__PURE__ */ jsx("span", { className: "text-primary text-sm font-semibold uppercase tracking-wider", children: afterLabel })
+              ] }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: afterItems.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+                /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex-shrink-0 flex h-5 w-5 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-primary" }) }),
+                /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm leading-relaxed font-medium", children: item.text })
+              ] }, i)) })
+            ] })
+          ]
+        }
+      ),
+      (button == null ? void 0 : button.label) && /* @__PURE__ */ jsx("div", { className: "mt-10 flex justify-center", children: /* @__PURE__ */ jsx(CompoundButton, { ...button }) })
+    ]
+  }
+);
+export {
+  BeforeAfter
+};

package/dist/components/puck-block/showcase-sections/before-after-1/index.d.ts

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

package/dist/components/puck-block/showcase-sections/before-after-1/index.js

@@ -0,0 +1,73 @@
+import { actionDefaults, button } from "../../../puck-base/core/fields.js";
+import { BeforeAfter } from "./before-after.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const conf = {
+  fields: {
+    eyebrow: { type: "text", contentEditable: true },
+    heading: { type: "text", contentEditable: true },
+    description: { type: "textarea", contentEditable: true },
+    layout: {
+      type: "radio",
+      label: "Layout",
+      options: [
+        { label: "Side by Side", value: "side-by-side" },
+        { label: "Stacked", value: "stacked" }
+      ]
+    },
+    beforeLabel: { type: "text" },
+    beforeItems: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, i = 0) => item.text || `Item ${i + 1}`,
+      arrayFields: {
+        text: { type: "text", contentEditable: true }
+      },
+      defaultItemProps: { text: "Pain point or old way of doing things" }
+    },
+    afterLabel: { type: "text" },
+    afterItems: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, i = 0) => item.text || `Item ${i + 1}`,
+      arrayFields: {
+        text: { type: "text", contentEditable: true }
+      },
+      defaultItemProps: { text: "Benefit or new way of doing things" }
+    },
+    button,
+    styles: createStylesField()
+  },
+  defaultProps: {
+    eyebrow: "Why choose us",
+    heading: "The old way vs. the better way",
+    description: "See exactly what changes when you switch to a smarter solution.",
+    layout: "side-by-side",
+    beforeLabel: "Without us",
+    beforeItems: [
+      { text: "Hours wasted on manual data entry every week" },
+      { text: "Siloed tools that don't talk to each other" },
+      { text: "Guessing what your customers actually want" },
+      { text: "Scaling requires hiring more people" }
+    ],
+    afterLabel: "With us",
+    afterItems: [
+      { text: "Data syncs automatically in real time" },
+      { text: "All your tools connected in one place" },
+      { text: "AI-powered insights at your fingertips" },
+      { text: "Scale effortlessly with smart automation" }
+    ],
+    button: {
+      label: "Get started free",
+      url: "#",
+      action: actionDefaults,
+      variant: "default",
+      size: "lg",
+      icon: "arrow-right"
+    },
+    styles: createStylesDefaults()
+  },
+  render: BeforeAfter
+};
+export {
+  conf
+};

package/dist/components/puck-block/showcase-sections/case-study-1/case-study.d.ts

@@ -1,6 +1,5 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface CaseStudyProps {
-    padding?: CompoundContainerProps["padding"];
     heading?: string;
     description?: string;
     stats?: Array<{
@@ -13,5 +12,10 @@ export interface CaseStudyProps {
         src: string;
         alt: string;
     };
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const CaseStudy: ({ padding, heading, description, stats, quote, author, logo, }: CaseStudyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CaseStudy: ({ heading, description, stats, quote, author, logo, styles, }: CaseStudyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,40 +1,42 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
+import { CompoundImage } from "../../../puck-base/image.js";
 const CaseStudy = ({
-  padding,
   heading,
   description,
   stats = [],
   quote,
   author,
-  logo
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle: "muted", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
-  (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: logo.src,
-      alt: logo.alt || "",
-      className: "mb-8 h-8 opacity-60"
-    }
-  ),
-  heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-4 text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-  description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 text-lg", children: description }),
-  stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-10 grid grid-cols-2 gap-6 md:grid-cols-4", children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("p", { className: "text-primary text-3xl font-bold", children: s.value }),
-    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: s.label })
-  ] }, i)) }),
-  quote && /* @__PURE__ */ jsxs("blockquote", { className: "border-primary border-l-4 py-2 pl-6", children: [
-    /* @__PURE__ */ jsxs("p", { className: "text-foreground text-lg italic", children: [
-      "“",
-      quote,
-      "”"
-    ] }),
-    author && /* @__PURE__ */ jsxs("cite", { className: "text-muted-foreground mt-2 block text-sm not-italic", children: [
-      "— ",
-      author
+  logo,
+  styles
+}) => /* @__PURE__ */ jsx(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: (styles == null ? void 0 : styles.sectionStyle) ?? "muted",
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
+      (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx("span", { className: "mb-8 inline-block opacity-60", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt || "", className: "h-8 w-auto" }) }),
+      heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground mb-4 text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 text-lg", children: description }),
+      stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-10 grid grid-cols-2 gap-6 md:grid-cols-4", children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-primary text-3xl font-bold", children: s.value }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: s.label })
+      ] }, i)) }),
+      quote && /* @__PURE__ */ jsxs("blockquote", { className: "border-primary border-l-4 py-2 pl-6", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-foreground text-lg italic", children: [
+          "“",
+          quote,
+          "”"
+        ] }),
+        author && /* @__PURE__ */ jsxs("cite", { className: "text-muted-foreground mt-2 block text-sm not-italic", children: [
+          "— ",
+          author
+        ] })
+      ] })
     ] })
-  ] })
-] }) });
+  }
+);
 export {
   CaseStudy
 };

package/dist/components/puck-block/showcase-sections/case-study-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, padding, image } from "../../../puck-base/core/fields.js";
+import { image } from "../../../puck-base/core/fields.js";
 import { CaseStudy } from "./case-study.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -14,7 +15,7 @@ const conf = {
     },
     quote: { type: "textarea", contentEditable: true },
     author: { type: "text" },
-    padding
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "How Acme Corp grew 3x in 6 months",
@@ -26,7 +27,7 @@ const conf = {
     ],
     quote: "This product changed everything for our team. We can't imagine going back.",
     author: "Jane Doe, CEO at Acme",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: CaseStudy
 };

package/dist/components/puck-block/showcase-sections/props.d.ts

@@ -0,0 +1,48 @@
+type ShowcaseVariant = "before-after-1" | "case-study-1" | "step-by-step-1";
+type ShowcasePadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type ShowcaseSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type ShowcaseButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type ShowcaseImage = {
+    src: string;
+    alt?: string;
+};
+type ShowcaseItem = {
+    title?: string;
+    description?: string;
+    label?: string;
+    value?: string;
+};
+type ShowcaseSectionProps = {
+    variant?: ShowcaseVariant;
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    beforeLabel?: string;
+    beforeItems?: ShowcaseItem[];
+    afterLabel?: string;
+    afterItems?: ShowcaseItem[];
+    layout?: "side-by-side" | "stacked" | "vertical" | "horizontal" | "numbered";
+    button?: ShowcaseButton;
+    steps?: ShowcaseItem[];
+    stats?: Array<{
+        value: string;
+        label: string;
+    }>;
+    quote?: string;
+    author?: string;
+    logo?: ShowcaseImage;
+    styles?: {
+        padding?: ShowcasePadding;
+        sectionStyle?: ShowcaseSectionStyle;
+        backgroundColor?: string;
+    };
+};

package/dist/components/puck-block/showcase-sections/step-by-step-1/index.js

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { StepByStep } from "./step-by-step.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -28,9 +28,7 @@ const conf = {
         description: "Describe what happens in this step."
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "How it works",
@@ -53,7 +51,7 @@ const conf = {
         description: "Launch your first project and see results immediately."
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: StepByStep
 };

package/dist/components/puck-block/showcase-sections/step-by-step-1/step-by-step.d.ts

@@ -6,12 +6,14 @@ export interface StepByStepItem {
     iconUrl?: string;
 }
 export interface StepByStepProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     layout?: "vertical" | "horizontal" | "numbered";
     steps?: StepByStepItem[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const StepByStep: ({ padding, sectionStyle, backgroundColor, heading, description, layout, steps, }: StepByStepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepByStep: ({ heading, description, layout, steps, styles, }: StepByStepProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,53 +1,50 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 const StepByStep = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   layout = "horizontal",
-  steps = []
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-  (heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center max-w-2xl mx-auto", children: [
-    heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })
-  ] }),
-  layout === "vertical" ? (
-    // Vertical timeline-style
-    /* @__PURE__ */ jsxs("div", { className: "relative max-w-2xl mx-auto", children: [
-      /* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 bottom-0 left-6 w-px" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-10", children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "relative flex gap-8 pl-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold z-10", children: step.stepNumber || String(i + 1) }),
-        /* @__PURE__ */ jsxs("div", { className: "pb-4", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
-          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: step.description })
-        ] })
-      ] }, i)) })
-    ] })
-  ) : layout === "numbered" ? (
-    // Large number style
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-primary text-5xl font-black leading-none opacity-20 flex-shrink-0", children: step.stepNumber || String(i + 1).padStart(2, "0") }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-2", children: step.description })
-      ] })
-    ] }, i)) })
-  ) : (
-    // Horizontal (default) — cards in a row with connecting line
-    /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 md:grid-cols-3 gap-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "hidden md:block bg-border absolute top-6 left-[calc(16.66%+1rem)] right-[calc(16.66%+1rem)] h-px" }),
-      steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center gap-4 relative", children: [
-        /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold z-10 flex-shrink-0", children: step.stepNumber || String(i + 1) }),
+  steps = [],
+  styles
+}) => /* @__PURE__ */ jsxs(
+  CompoundContainer,
+  {
+    padding: styles == null ? void 0 : styles.padding,
+    sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+    backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+    children: [
+      (heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center max-w-2xl mx-auto", children: [
+        heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })
+      ] }),
+      layout === "vertical" ? /* @__PURE__ */ jsxs("div", { className: "relative max-w-2xl mx-auto", children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 bottom-0 left-6 w-px" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-10", children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "relative flex gap-8 pl-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold z-10", children: step.stepNumber || String(i + 1) }),
+          /* @__PURE__ */ jsxs("div", { className: "pb-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: step.description })
+          ] })
+        ] }, i)) })
+      ] }) : layout === "numbered" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-primary text-5xl font-black leading-none opacity-20 flex-shrink-0", children: step.stepNumber || String(i + 1).padStart(2, "0") }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
-          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: step.description })
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-2", children: step.description })
         ] })
-      ] }, i))
-    ] })
-  )
-] });
+      ] }, i)) }) : /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 md:grid-cols-3 gap-8", children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden md:block bg-border absolute top-6 left-[calc(16.66%+1rem)] right-[calc(16.66%+1rem)] h-px" }),
+        steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center gap-4 relative", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-primary text-primary-foreground w-12 h-12 rounded-full flex items-center justify-center text-sm font-bold z-10 flex-shrink-0", children: step.stepNumber || String(i + 1) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: step.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: step.description })
+          ] })
+        ] }, i))
+      ] })
+    ]
+  }
+);
 export {
   StepByStep
 };

package/dist/components/puck-block/team-sections/props.d.ts

@@ -0,0 +1,39 @@
+type TeamVariant = "team-grid-1" | "team-grid-2" | "team-profiles-1";
+type TeamPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type TeamSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type TeamButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type TeamImage = {
+    src: string;
+    alt?: string;
+};
+type TeamMember = {
+    name: string;
+    role: string;
+    image?: TeamImage;
+    description?: string;
+    instagramUrl?: string;
+    linkedinUrl?: string;
+};
+type TeamSectionProps = {
+    variant?: TeamVariant;
+    heading?: string;
+    description?: string;
+    buttons?: TeamButton[];
+    members?: TeamMember[];
+    columns?: 2 | 3 | 4;
+    layout?: "card" | "simple" | "round";
+    styles?: {
+        padding?: TeamPadding;
+        sectionStyle?: TeamSectionStyle;
+        backgroundColor?: string;
+    };
+};

package/dist/components/puck-block/team-sections/team-grid-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, image, description, heading } from "../../../puck-base/core/fields.js";
+import { image, description, heading } from "../../../puck-base/core/fields.js";
 import { TeamGrid } from "./team-grid.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultMember = {
   name: "Jane Smith",
   role: "CEO & Co-founder",
@@ -42,9 +43,7 @@ const conf = {
         { label: "Round Avatar", value: "round" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Meet Our Team",
@@ -57,7 +56,7 @@ const conf = {
       { ...defaultMember, name: "Sarah Williams", role: "Head of Design" },
       { ...defaultMember, name: "Michael Chen", role: "Lead Engineer" }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: TeamGrid
 };

package/dist/components/puck-block/team-sections/team-grid-1/team-grid.d.ts

@@ -9,13 +9,15 @@ export interface TeamMember {
     bio?: string;
 }
 export interface TeamGridProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     members?: TeamMember[];
     columns?: 2 | 3 | 4;
     layout?: "card" | "simple" | "round";
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const TeamGrid: ({ padding, sectionStyle, backgroundColor, heading, description, members, columns, layout, }: TeamGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TeamGrid: ({ heading, description, members, columns, layout, styles, }: TeamGridProps) => import("react/jsx-runtime").JSX.Element;