dune-react 0.0.19 → 0.0.21

package/dist/components/puck-block/metrics-sections/mixed-grid-stats/index.d.ts

@@ -0,0 +1,184 @@
+import { MixedGridStats, MixedGridStatsDefaults } from "./mixed-grid-stats";
+import type { MixedGridStatsProps } from "./mixed-grid-stats";
+export { MixedGridStats, MixedGridStatsDefaults };
+export type { MixedGridStatsProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        buttons: {
+            readonly type: "array";
+            readonly max: 3;
+            readonly getItemSummary: (item: {
+                label?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly label: {
+                    readonly type: "text";
+                };
+                readonly action: {
+                    type: "custom";
+                    label: string;
+                    render: typeof import("../../../puck-core").ActionField;
+                };
+                readonly variant: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "primary";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "secondary";
+                        readonly value: "secondary";
+                    }, {
+                        readonly label: "outline";
+                        readonly value: "outline";
+                    }, {
+                        readonly label: "ghost";
+                        readonly value: "ghost";
+                    }, {
+                        readonly label: "link";
+                        readonly value: "link";
+                    }, {
+                        readonly label: "destructive";
+                        readonly value: "destructive";
+                    }];
+                };
+                readonly size: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "default";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "sm";
+                        readonly value: "sm";
+                    }, {
+                        readonly label: "lg";
+                        readonly value: "lg";
+                    }, {
+                        readonly label: "icon";
+                        readonly value: "icon";
+                    }];
+                };
+                readonly icon: {
+                    type: "custom";
+                    render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
+                };
+            };
+            readonly defaultItemProps: {
+                readonly label: "Button";
+                readonly action: {
+                    readonly type: "page";
+                    readonly pageUrl: "";
+                    readonly externalUrl: "";
+                    readonly openInNewTab: "false";
+                    readonly email: "";
+                    readonly subject: "";
+                    readonly phone: "";
+                    readonly sectionId: "";
+                    readonly downloadUrl: "";
+                };
+                readonly variant: "default";
+                readonly size: "default";
+                readonly icon: "none";
+            };
+            readonly ai: {
+                readonly instructions: "Buttons must use the same size";
+            };
+        };
+        cards: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                heading?: string;
+                image?: any;
+            }, index?: number) => string;
+            arrayFields: {
+                percentage: {
+                    type: string;
+                };
+                heading: {
+                    readonly type: "text";
+                    readonly contentEditable: true;
+                };
+                description: {
+                    readonly type: "textarea";
+                    readonly contentEditable: true;
+                };
+                image: {
+                    type: "object";
+                    objectFields: {
+                        src: import("@puckeditor/core").Field<string>;
+                        alt: {
+                            type: "text";
+                        };
+                    };
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
+                textLayout: {
+                    readonly type: "radio";
+                    readonly label: "Text Layout";
+                    readonly options: readonly [{
+                        readonly label: "Two Column";
+                        readonly value: "twoColumn";
+                    }, {
+                        readonly label: "Stacked";
+                        readonly value: "stacked";
+                    }];
+                };
+                statsStyle: {
+                    readonly type: "select";
+                    readonly label: "Stats Style";
+                    readonly options: readonly [{
+                        readonly label: "Line (border-left)";
+                        readonly value: "line";
+                    }, {
+                        readonly label: "Card Plain";
+                        readonly value: "cardPlain";
+                    }, {
+                        readonly label: "Card Reversed";
+                        readonly value: "cardReversed";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: MixedGridStatsProps;
+    render: (props: MixedGridStatsProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/metrics-sections/mixed-grid-stats/index.js

@@ -0,0 +1,41 @@
+import { MixedGridStats, MixedGridStatsDefaults } from "./mixed-grid-stats.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { metricsStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    cards: {
+      type: "array",
+      max: 8,
+      getItemSummary: (item, index = 0) => item.heading || (item.image ? "Image Card" : `Card ${index + 1}`),
+      arrayFields: {
+        percentage: { type: "text" },
+        heading: headingField,
+        description: descriptionField,
+        image: imageField
+      }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        textLayout: metricsStyleFields.textLayout,
+        statsStyle: metricsStyleFields.statsStyle,
+        ...sectionWrapperFields
+      }
+    }
+  },
+  defaultProps: MixedGridStatsDefaults,
+  render: MixedGridStats
+};
+export {
+  MixedGridStats,
+  MixedGridStatsDefaults,
+  conf as default
+};

package/dist/components/puck-block/metrics-sections/mixed-grid-stats/mixed-grid-stats.d.ts

@@ -0,0 +1,13 @@
+import type { MetricsComponentProps, BaseImage } from "../props";
+type MixedCard = {
+    percentage?: string;
+    heading?: string;
+    description?: string;
+    image?: BaseImage;
+};
+export type MixedGridStatsProps = MetricsComponentProps<{
+    cards: MixedCard[];
+}>;
+export declare const MixedGridStats: (props: MixedGridStatsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MixedGridStatsDefaults: MixedGridStatsProps;
+export {};

package/dist/components/puck-block/metrics-sections/mixed-grid-stats/mixed-grid-stats.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+import React__default from "react";
+const MixedGridStats = (props) => {
+  const {
+    tagline,
+    heading,
+    description,
+    buttons = [],
+    cards = [],
+    styles
+  } = {
+    ...MixedGridStatsDefaults,
+    ...props
+  };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    textLayout = "twoColumn",
+    statsStyle = "cardPlain"
+  } = styles ?? {};
+  const isTwoColumn = textLayout === "twoColumn";
+  const isReversed = statsStyle === "cardReversed";
+  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: [
+    /* @__PURE__ */ jsx("div", { className: cn("mb-12 md:mb-18 lg:mb-20", {
+      "grid grid-cols-1 gap-y-5 md:grid-cols-2 md:gap-x-12 lg:gap-x-20": isTwoColumn
+    }), children: isTwoColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+        /* @__PURE__ */ jsx("h2", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: heading })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__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", { 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: "grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3", children: cards.map((card, index) => /* @__PURE__ */ jsx(React__default.Fragment, { children: card.image ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      CompoundImage,
+      {
+        className: "aspect-[3/2] size-full object-cover",
+        src: card.image.src,
+        alt: card.image.alt
+      }
+    ) }) : /* @__PURE__ */ jsx("div", { className: cn(
+      "border border-border-primary p-8",
+      "first:flex first:flex-col first:md:col-span-2 first:md:row-span-1 first:lg:col-span-1 first:lg:row-span-2",
+      "[&:nth-last-child(2)]:order-last [&:nth-last-child(2)]:md:order-none",
+      { "bg-background-secondary": isReversed }
+    ), children: isReversed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("h3", { className: cn("text-md font-bold leading-[1.4] md:text-xl", {
+        "mt-auto": index === 0
+      }), children: card.heading }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2", children: card.description }),
+      /* @__PURE__ */ jsx("p", { className: "mb-8 mt-auto text-10xl font-bold leading-[1.3] md:mb-10 md:text-[4rem] lg:mb-12 lg:text-[5rem]", children: card.percentage })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-8 text-10xl font-bold leading-[1.3] md:mb-10 md:text-[4rem] lg:mb-12 lg:text-[5rem]", children: card.percentage }),
+      /* @__PURE__ */ jsx("h3", { className: cn("text-md font-bold leading-[1.4] md:text-xl", {
+        "mt-auto": index === 0
+      }), children: card.heading }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2", children: card.description })
+    ] }) }) }, index)) })
+  ] }) });
+};
+const MixedGridStatsDefaults = {
+  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", variant: "secondary" },
+    { label: "Button", variant: "link" }
+  ],
+  cards: [
+    {
+      percentage: "30%",
+      heading: "Short heading goes here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    },
+    {
+      image: {
+        src: "https://picsum.photos/seed/stats-card1/800/600",
+        alt: "Relume placeholder image"
+      }
+    },
+    {
+      percentage: "30%",
+      heading: "Short heading goes here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    },
+    {
+      percentage: "30%",
+      heading: "Short heading goes here",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    },
+    {
+      image: {
+        src: "https://picsum.photos/seed/stats-card2/800/600",
+        alt: "Relume placeholder image"
+      }
+    }
+  ],
+  styles: {
+    textLayout: "twoColumn",
+    statsStyle: "cardPlain"
+  }
+};
+export {
+  MixedGridStats,
+  MixedGridStatsDefaults
+};

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

@@ -1,43 +1,127 @@
-type MetricsVariant = "stats-1" | "stats-2" | "stats-3";
-type MetricsPadding = {
-    top?: "none" | "small" | "medium" | "large";
-    bottom?: "none" | "small" | "medium" | "large";
-};
-type MetricsSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
-type MetricsButton = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
-    size?: "default" | "sm" | "lg" | "icon";
-    icon?: string;
-};
-type MetricsBadge = {
-    label: string;
-    url?: string;
-    variant?: "default" | "secondary" | "destructive" | "outline";
-};
-type MetricItem = {
-    value?: string;
-    metric?: string;
-    label?: string;
-    title?: string;
+/**
+ * Metrics Section 共享 Props
+ *
+ * 基础类型引用自 ../props/（全局共享）
+ * MetricsSectionStyles 为 Metrics 特有的样式字段
+ */
+import type { BaseImage } from "@/components/puck-core/core/props/media";
+import type { BaseButton } from "@/components/puck-core/core/props/interactive";
+export type { BaseImage, BaseButton };
+export interface MetricsSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
+    textLayout?: "twoColumn" | "stacked";
+    statsLayout?: "2x2" | "single-column";
+    mediaPosition?: "left" | "right";
+    bgMedia?: "none" | "image" | "video";
+    mediaType?: "image" | "playButton";
+    statsStyle?: "line" | "cardPlain" | "cardReversed";
+}
+export interface StatItem {
+    percentage: string;
+    heading: string;
     description?: string;
-    percentage?: number;
-    direction?: "none" | "increase" | "decrease";
-    polarity?: "none" | "positive" | "negative";
-    tone?: "dark" | "light";
-};
-type MetricsSectionProps = {
-    variant?: MetricsVariant;
-    badge?: MetricsBadge;
+}
+export interface StatCard {
+    percentage?: string;
     heading?: string;
     description?: string;
-    buttons?: MetricsButton[];
-    layout?: "section" | "inline" | "centered";
-    items?: MetricItem[];
-    styles?: {
-        padding?: MetricsPadding;
-        sectionStyle?: MetricsSectionStyle;
-        backgroundColor?: string;
+    image?: BaseImage;
+}
+export interface TabStat {
+    value: string;
+    percentage: string;
+    heading: string;
+    description: string;
+    image?: BaseImage;
+    video?: {
+        image: BaseImage;
+        url: string;
+    };
+}
+export interface MetricsSectionBaseProps {
+    tagline: string;
+    heading: string;
+    description: string;
+    buttons: BaseButton[];
+    stats: StatItem[];
+    image: BaseImage;
+    styles: MetricsSectionStyles;
+}
+export declare const metricsStyleFields: {
+    readonly textLayout: {
+        readonly type: "radio";
+        readonly label: "Text Layout";
+        readonly options: readonly [{
+            readonly label: "Two Column";
+            readonly value: "twoColumn";
+        }, {
+            readonly label: "Stacked";
+            readonly value: "stacked";
+        }];
+    };
+    readonly statsLayout: {
+        readonly type: "radio";
+        readonly label: "Stats Layout";
+        readonly options: readonly [{
+            readonly label: "2x2 Grid";
+            readonly value: "2x2";
+        }, {
+            readonly label: "Single Column";
+            readonly value: "single-column";
+        }];
+    };
+    readonly mediaPosition: {
+        readonly type: "radio";
+        readonly label: "Media Position";
+        readonly options: readonly [{
+            readonly label: "Left";
+            readonly value: "left";
+        }, {
+            readonly label: "Right";
+            readonly value: "right";
+        }];
+    };
+    readonly bgMedia: {
+        readonly type: "select";
+        readonly label: "Background Media";
+        readonly options: readonly [{
+            readonly label: "None";
+            readonly value: "none";
+        }, {
+            readonly label: "Image";
+            readonly value: "image";
+        }, {
+            readonly label: "Video";
+            readonly value: "video";
+        }];
+    };
+    readonly mediaType: {
+        readonly type: "radio";
+        readonly label: "Media Type";
+        readonly options: readonly [{
+            readonly label: "Image";
+            readonly value: "image";
+        }, {
+            readonly label: "Play Button";
+            readonly value: "playButton";
+        }];
+    };
+    readonly statsStyle: {
+        readonly type: "select";
+        readonly label: "Stats Style";
+        readonly options: readonly [{
+            readonly label: "Line (border-left)";
+            readonly value: "line";
+        }, {
+            readonly label: "Card Plain";
+            readonly value: "cardPlain";
+        }, {
+            readonly label: "Card Reversed";
+            readonly value: "cardReversed";
+        }];
     };
 };
+/** 将 MetricsSectionBaseProps 与组件特有字段合并，生成最终 Props */
+export type MetricsComponentProps<T extends object = object> = React.ComponentPropsWithoutRef<"section"> & Partial<MetricsSectionBaseProps> & Partial<T>;

package/dist/components/puck-block/metrics-sections/props.js

@@ -0,0 +1,55 @@
+const metricsStyleFields = {
+  textLayout: {
+    type: "radio",
+    label: "Text Layout",
+    options: [
+      { label: "Two Column", value: "twoColumn" },
+      { label: "Stacked", value: "stacked" }
+    ]
+  },
+  statsLayout: {
+    type: "radio",
+    label: "Stats Layout",
+    options: [
+      { label: "2x2 Grid", value: "2x2" },
+      { label: "Single Column", value: "single-column" }
+    ]
+  },
+  mediaPosition: {
+    type: "radio",
+    label: "Media Position",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  bgMedia: {
+    type: "select",
+    label: "Background Media",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Image", value: "image" },
+      { label: "Video", value: "video" }
+    ]
+  },
+  mediaType: {
+    type: "radio",
+    label: "Media Type",
+    options: [
+      { label: "Image", value: "image" },
+      { label: "Play Button", value: "playButton" }
+    ]
+  },
+  statsStyle: {
+    type: "select",
+    label: "Stats Style",
+    options: [
+      { label: "Line (border-left)", value: "line" },
+      { label: "Card Plain", value: "cardPlain" },
+      { label: "Card Reversed", value: "cardReversed" }
+    ]
+  }
+};
+export {
+  metricsStyleFields
+};