dune-react 0.0.19 → 0.0.20

package/dist/components/puck-block/pricing-sections/tab-pricing-grid/component.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BiCheck } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { Button } from "../../../shadcn/button.js";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.js";
+const TabPricingGrid = (props) => {
+  const { tagline, heading, description, defaultTabValue, tabs, styles } = {
+    ...TabPricingGridDefaults,
+    ...props
+  };
+  const { columns = 2 } = styles ?? {};
+  const gridColsClass = columns === 3 ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2";
+  const containerMaxW = columns === 3 ? "" : "max-w-xl";
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: `container ${containerMaxW}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-8 max-w-lg text-center md:mb-10 lg:mb-12", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabValue, children: [
+      /* @__PURE__ */ jsx(TabsList, { className: "mx-auto mb-12 w-fit", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.tabName }, index)) }),
+      tabs.map((tab, index) => /* @__PURE__ */ jsx(
+        TabsContent,
+        {
+          value: tab.value,
+          className: `grid grid-cols-1 gap-8 data-[state=active]:animate-tabs ${gridColsClass}`,
+          children: tab.plans.map((plan, planIndex) => /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "rb-6 mb-6 text-center md:mb-8", children: [
+                /* @__PURE__ */ jsx("h6", { className: "text-md font-bold leading-[1.4] md:text-xl", children: plan.planName }),
+                /* @__PURE__ */ jsxs("h1", { className: "my-2 text-6xl font-bold md:text-9xl lg:text-10xl", children: [
+                  plan.price,
+                  /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: tab.value === "monthly" ? "/mo" : "/yr" })
+                ] }),
+                tab.value === "yearly" && plan.discount && /* @__PURE__ */ jsx("p", { className: "mt-2 font-medium", children: plan.discount })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mb-8 grid grid-cols-1 gap-4 py-2", children: plan.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
+                /* @__PURE__ */ jsx("div", { className: "mr-4 flex-none self-start", children: /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }) }),
+                /* @__PURE__ */ jsx("p", { children: feature })
+              ] }, featureIndex)) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full", children: plan.button.label }) })
+          ] }, planIndex))
+        },
+        index
+      ))
+    ] })
+  ] }) });
+};
+const basePlan = {
+  planName: "Basic plan",
+  price: "$19",
+  features: ["Feature text goes here", "Feature text goes here", "Feature text goes here"],
+  button: { label: "Get started" }
+};
+const businessPlan = {
+  planName: "Business plan",
+  price: "$29",
+  features: ["Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here"],
+  button: { label: "Get started" }
+};
+const TabPricingGridDefaults = {
+  tagline: "Tagline",
+  heading: "Pricing plan",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  defaultTabValue: "monthly",
+  tabs: [
+    {
+      value: "monthly",
+      tabName: "Monthly",
+      plans: [basePlan, businessPlan]
+    },
+    {
+      value: "yearly",
+      tabName: "Yearly",
+      plans: [
+        { ...basePlan, price: "$180", discount: "Save 20% with the annual plan" },
+        { ...businessPlan, price: "$280", discount: "Save 20% with the annual plan" }
+      ]
+    }
+  ],
+  styles: {
+    columns: 2,
+    cardLayout: "center-price"
+  }
+};
+export {
+  TabPricingGrid,
+  TabPricingGridDefaults
+};

package/dist/components/puck-block/pricing-sections/tab-pricing-grid/index.d.ts

@@ -0,0 +1,77 @@
+import { TabPricingGrid, TabPricingGridDefaults } from "./component";
+import type { TabPricingGridProps } from "./component";
+export { TabPricingGrid, TabPricingGridDefaults };
+export type { TabPricingGridProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        defaultTabValue: {
+            type: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+        };
+        tabs: {
+            type: string;
+            getItemSummary: (item: {
+                tabName?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                tabName: {
+                    type: string;
+                };
+                value: {
+                    type: string;
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                columns: {
+                    readonly type: "radio";
+                    readonly label: "Columns";
+                    readonly options: readonly [{
+                        readonly label: "2";
+                        readonly value: "2";
+                    }, {
+                        readonly label: "3";
+                        readonly value: "3";
+                    }];
+                };
+                cardLayout: {
+                    readonly type: "select";
+                    readonly label: "Card Layout";
+                    readonly options: readonly [{
+                        readonly label: "Center Price";
+                        readonly value: "center-price";
+                    }, {
+                        readonly label: "Icon Corner";
+                        readonly value: "icon-corner";
+                    }, {
+                        readonly label: "Name + Desc + Divider";
+                        readonly value: "name-desc-divider";
+                    }, {
+                        readonly label: "Icon + Name Inline";
+                        readonly value: "icon-name-inline";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: TabPricingGridProps;
+    render: (props: TabPricingGridProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/pricing-sections/tab-pricing-grid/index.js

@@ -0,0 +1,40 @@
+import { TabPricingGrid, TabPricingGridDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { pricingStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    defaultTabValue: {
+      type: "radio",
+      options: [
+        { label: "Monthly", value: "monthly" },
+        { label: "Yearly", value: "yearly" }
+      ]
+    },
+    tabs: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.tabName || `Tab ${index + 1}`,
+      arrayFields: {
+        tabName: { type: "text" },
+        value: { type: "text" }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        columns: pricingStyleFields.columns,
+        cardLayout: pricingStyleFields.cardLayout
+      }
+    }
+  },
+  defaultProps: TabPricingGridDefaults,
+  render: TabPricingGrid
+};
+export {
+  TabPricingGrid,
+  TabPricingGridDefaults,
+  conf as default
+};

package/dist/components/puck-block/pricing-sections/tab-single-pricing/component.d.ts

@@ -0,0 +1,23 @@
+import type { PricingComponentProps, BaseImage, BaseButton } from "../props";
+type Billing = "monthly" | "yearly";
+type PricingPlan = {
+    icon?: BaseImage;
+    planName: string;
+    price: string;
+    discount?: string;
+    features: string[];
+    button: BaseButton;
+};
+type Tab = {
+    value: Billing;
+    tabName: string;
+    plans: PricingPlan[];
+};
+type TabSinglePricingExtra = {
+    defaultTabValue: Billing;
+    tabs: Tab[];
+};
+export type TabSinglePricingProps = PricingComponentProps<TabSinglePricingExtra>;
+export declare const TabSinglePricing: (props: TabSinglePricingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabSinglePricingDefaults: TabSinglePricingProps;
+export {};

package/dist/components/puck-block/pricing-sections/tab-single-pricing/component.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BiCheck } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { Button } from "../../../shadcn/button.js";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.js";
+const TabSinglePricing = (props) => {
+  const { tagline, heading, description, defaultTabValue, tabs } = {
+    ...TabSinglePricingDefaults,
+    ...props
+  };
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container max-w-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-8 max-w-lg text-center md:mb-10 lg:mb-12", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabValue, children: [
+      /* @__PURE__ */ jsx(TabsList, { className: "mx-auto mb-12 w-fit", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.tabName }, index)) }),
+      tabs.map((tab, index) => /* @__PURE__ */ jsx(
+        TabsContent,
+        {
+          value: tab.value,
+          className: "container max-w-md data-[state=active]:animate-tabs",
+          children: tab.plans.map((plan, planIndex) => /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "rb-6 mb-6 text-center md:mb-8", children: [
+                /* @__PURE__ */ jsx("h6", { className: "text-md font-bold leading-[1.4] md:text-xl", children: plan.planName }),
+                /* @__PURE__ */ jsxs("h1", { className: "my-2 text-6xl font-bold md:text-9xl lg:text-10xl", children: [
+                  plan.price,
+                  /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold md:text-3xl lg:text-4xl", children: tab.value === "monthly" ? "/mo" : "/yr" })
+                ] }),
+                tab.value === "yearly" && plan.discount && /* @__PURE__ */ jsx("p", { className: "mt-2 font-medium", children: plan.discount })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mb-8 grid grid-cols-1 gap-4 py-2", children: plan.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
+                /* @__PURE__ */ jsx("div", { className: "mr-4 flex-none self-start", children: /* @__PURE__ */ jsx(BiCheck, { className: "size-6" }) }),
+                /* @__PURE__ */ jsx("p", { children: feature })
+              ] }, featureIndex)) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: plan.button.variant, size: plan.button.size, className: "w-full", children: plan.button.label }) })
+          ] }, planIndex))
+        },
+        index
+      ))
+    ] })
+  ] }) });
+};
+const TabSinglePricingDefaults = {
+  tagline: "Tagline",
+  heading: "Pricing plan",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  defaultTabValue: "monthly",
+  tabs: [
+    {
+      value: "monthly",
+      tabName: "Monthly",
+      plans: [{
+        planName: "Basic plan",
+        price: "$19",
+        features: ["Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here"],
+        button: { label: "Get started" }
+      }]
+    },
+    {
+      value: "yearly",
+      tabName: "Yearly",
+      plans: [{
+        planName: "Basic plan",
+        price: "$180",
+        discount: "Save 20% with the annual plan",
+        features: ["Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here", "Feature text goes here"],
+        button: { label: "Get started" }
+      }]
+    }
+  ],
+  styles: {
+    cardLayout: "center-price"
+  }
+};
+export {
+  TabSinglePricing,
+  TabSinglePricingDefaults
+};

package/dist/components/puck-block/pricing-sections/tab-single-pricing/index.d.ts

@@ -0,0 +1,66 @@
+import { TabSinglePricing, TabSinglePricingDefaults } from "./component";
+import type { TabSinglePricingProps } from "./component";
+export { TabSinglePricing, TabSinglePricingDefaults };
+export type { TabSinglePricingProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        defaultTabValue: {
+            type: string;
+            options: {
+                label: string;
+                value: string;
+            }[];
+        };
+        tabs: {
+            type: string;
+            getItemSummary: (item: {
+                tabName?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                tabName: {
+                    type: string;
+                };
+                value: {
+                    type: string;
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                cardLayout: {
+                    readonly type: "select";
+                    readonly label: "Card Layout";
+                    readonly options: readonly [{
+                        readonly label: "Center Price";
+                        readonly value: "center-price";
+                    }, {
+                        readonly label: "Icon Corner";
+                        readonly value: "icon-corner";
+                    }, {
+                        readonly label: "Name + Desc + Divider";
+                        readonly value: "name-desc-divider";
+                    }, {
+                        readonly label: "Icon + Name Inline";
+                        readonly value: "icon-name-inline";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: TabSinglePricingProps;
+    render: (props: TabSinglePricingProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/pricing-sections/tab-single-pricing/index.js

@@ -0,0 +1,39 @@
+import { TabSinglePricing, TabSinglePricingDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { pricingStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    defaultTabValue: {
+      type: "radio",
+      options: [
+        { label: "Monthly", value: "monthly" },
+        { label: "Yearly", value: "yearly" }
+      ]
+    },
+    tabs: {
+      type: "array",
+      getItemSummary: (item, index = 0) => item.tabName || `Tab ${index + 1}`,
+      arrayFields: {
+        tabName: { type: "text" },
+        value: { type: "text" }
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        cardLayout: pricingStyleFields.cardLayout
+      }
+    }
+  },
+  defaultProps: TabSinglePricingDefaults,
+  render: TabSinglePricing
+};
+export {
+  TabSinglePricing,
+  TabSinglePricingDefaults,
+  conf as default
+};

package/dist/components/puck-block/showcase-sections/compact-timeline/component.d.ts

@@ -0,0 +1,13 @@
+import type { ShowcaseComponentProps, ShowcaseSectionBaseProps, BaseImage } from "../props";
+type TimelineItem = {
+    date: string;
+    description: string;
+    image?: BaseImage;
+};
+type CompactTimelineExtra = {
+    timelineItems: TimelineItem[];
+};
+export type CompactTimelineProps = ShowcaseComponentProps<CompactTimelineExtra>;
+export declare const CompactTimeline: (props: CompactTimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CompactTimelineDefaults: Partial<ShowcaseSectionBaseProps> & CompactTimelineExtra;
+export {};

package/dist/components/puck-block/showcase-sections/compact-timeline/component.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cn } from "../../../../utils/css-utils.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const CompactTimeline = (props) => {
+  const {
+    tagline,
+    heading,
+    description,
+    buttons = [],
+    timelineItems = [],
+    styles
+  } = {
+    ...CompactTimelineDefaults,
+    ...props
+  };
+  const {
+    hasImage = false
+  } = styles ?? {};
+  return /* @__PURE__ */ jsx("section", { id: "relume", className: "overflow-hidden px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+      /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap items-center gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative grid auto-cols-fr grid-flow-row grid-cols-1 items-center justify-center md:grid-flow-col md:grid-cols-[max-content_1fr] md:justify-normal", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative hidden md:grid md:grid-cols-1 md:gap-4", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center md:w-full md:flex-row", children: /* @__PURE__ */ jsx("div", { className: "h-full w-[3px] bg-black md:h-[3px] md:w-full" }) }) }),
+      timelineItems.map((item, index) => /* @__PURE__ */ jsx(
+        CompactEntry,
+        {
+          item,
+          index,
+          isLastItem: index === timelineItems.length - 1,
+          hasImage
+        },
+        index
+      )),
+      /* @__PURE__ */ jsx("div", { className: "absolute right-0 z-0 h-1 w-16 bg-gradient-to-r from-transparent to-white" })
+    ] })
+  ] }) });
+};
+const CompactEntry = ({
+  item,
+  index,
+  isLastItem,
+  hasImage
+}) => {
+  const isEven = index % 2 === 0;
+  const content = /* @__PURE__ */ jsxs("div", { className: cn("mb-8 flex flex-col items-start md:mb-0 md:mr-4", !isEven && "order-last md:order-none"), children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold md:text-2xl", children: item.date }),
+    /* @__PURE__ */ jsx("p", { children: item.description }),
+    hasImage && item.image && /* @__PURE__ */ jsx("div", { className: "mt-4 w-full", children: /* @__PURE__ */ jsx(CompoundImage, { src: item.image.src, alt: item.image.alt, className: "w-full object-cover" }) })
+  ] });
+  const line = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center md:w-full md:flex-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "z-20 size-[0.9375rem] flex-none rounded-full bg-black shadow-[0_0_0_8px_white]" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("h-full w-[3px] bg-black md:h-[3px] md:w-full", {
+          "hidden md:block": isLastItem
+        })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx("div", { className: "relative grid auto-cols-fr grid-cols-[max-content_1fr] gap-4 md:grid-cols-1 md:grid-rows-[1fr_max-content_1fr]", children: isEven ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden md:block" }),
+    line,
+    content
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    content,
+    line,
+    /* @__PURE__ */ jsx("div", { className: "hidden md:block" })
+  ] }) });
+};
+const defaultItem = {
+  date: "Date",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+  image: {
+    src: "https://picsum.photos/seed/compact-tl/400/300",
+    alt: "Timeline image"
+  }
+};
+const CompactTimelineDefaults = {
+  tagline: "Tagline",
+  heading: "Medium length section heading goes here",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+  buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
+  timelineItems: [defaultItem, defaultItem, defaultItem, defaultItem, defaultItem],
+  styles: {
+    hasImage: false
+  }
+};
+export {
+  CompactTimeline,
+  CompactTimelineDefaults
+};