dune-react 0.0.9 → 0.0.10

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

@@ -1,18 +1,43 @@
 import { button } from "../../../puck-base/core/fields.js";
 import { Location2 } from "./location.js";
-const locationButtonField = {
-  type: "object",
-  objectFields: {
-    ...button.objectFields,
-    colorMode: {
-      type: "select",
-      options: [
-        { label: "Theme", value: "theme" },
-        { label: "Custom", value: "custom" }
-      ]
-    },
-    backgroundColor: { type: "text" },
-    textColor: { type: "text" }
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const locationButtonFields = {
+  ...button.objectFields,
+  colorMode: {
+    type: "select",
+    options: [
+      { label: "Theme", value: "theme" },
+      { label: "Custom", value: "custom" }
+    ]
+  },
+  backgroundColor: { type: "text" },
+  textColor: { type: "text" }
+};
+const locationButtonDefaults = {
+  label: "Button",
+  url: "",
+  variant: "default",
+  size: "default",
+  icon: "none",
+  colorMode: "theme"
+};
+const location2ExtraStyleFields = {
+  cardStyle: {
+    type: "radio",
+    label: "Card Style",
+    options: [
+      { label: "Solid", value: "solid" },
+      { label: "Glass", value: "glass" }
+    ]
+  },
+  sectionHeight: {
+    type: "radio",
+    label: "Section Height",
+    options: [
+      { label: "Compact", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Tall", value: "lg" }
+    ]
   }
 };
 const conf = {
@@ -20,7 +45,7 @@ const conf = {
     heading: { type: "textarea", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
     address: { type: "textarea", label: "Address", contentEditable: true },
-    cardPosition: {
+    contentPosition: {
       type: "radio",
       label: "Card Position",
       options: [
@@ -28,23 +53,6 @@ const conf = {
         { label: "Right", value: "right" }
       ]
     },
-    cardStyle: {
-      type: "radio",
-      label: "Card Style",
-      options: [
-        { label: "Solid", value: "solid" },
-        { label: "Glass", value: "glass" }
-      ]
-    },
-    sectionHeight: {
-      type: "radio",
-      label: "Section Height",
-      options: [
-        { label: "Compact", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Tall", value: "lg" }
-      ]
-    },
     mapEmbedUrl: { type: "text", label: "Google Map Embed URL" },
     mapTitle: { type: "text", label: "Map Title" },
     mapFilter: { type: "text", label: "Map Filter (CSS)" },
@@ -65,44 +73,48 @@ const conf = {
       max: 1,
       step: 0.01
     },
-    primaryButton: {
-      ...locationButtonField,
-      label: "Primary Button"
+    buttons: {
+      type: "array",
+      max: 3,
+      getItemSummary: (item, index = 0) => item.label || `Button ${index + 1}`,
+      arrayFields: locationButtonFields,
+      defaultItemProps: locationButtonDefaults
     },
-    secondaryButton: {
-      ...locationButtonField,
-      label: "Secondary Button"
-    }
+    styles: createStylesField(location2ExtraStyleFields)
   },
   defaultProps: {
     heading: "Come visit\nus today",
     description: "We're in the heart of the city, easy to reach by public transport or car. Drop by any time.",
     address: "123 Main Street\nNew York, NY 10001",
-    cardPosition: "left",
-    cardStyle: "solid",
-    sectionHeight: "md",
+    contentPosition: "left",
     mapEmbedUrl: "https://maps.google.com/maps?q=New%20York%2C%20NY%2C%20United%20States&z=13&t=m&output=embed",
     mapTitle: "Google Maps",
     mapFilter: "grayscale(40%) contrast(1.05) brightness(1.0) saturate(0.85)",
     mapTintMode: "none",
     mapTintColor: "var(--primary)",
     mapTintOpacity: 0.15,
-    primaryButton: {
-      label: "Get Directions",
-      url: "https://maps.google.com",
-      variant: "default",
-      size: "default",
-      icon: "none",
-      colorMode: "theme"
-    },
-    secondaryButton: {
-      label: "Call Us",
-      url: "tel:+12345678900",
-      variant: "outline",
-      size: "default",
-      icon: "none",
-      colorMode: "theme"
-    }
+    buttons: [
+      {
+        label: "Get Directions",
+        url: "https://maps.google.com",
+        variant: "default",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      },
+      {
+        label: "Call Us",
+        url: "tel:+12345678900",
+        variant: "outline",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      }
+    ],
+    styles: createStylesDefaults({
+      cardStyle: "solid",
+      sectionHeight: "md"
+    })
   },
   render: Location2
 };

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

@@ -1,3 +1,4 @@
+import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 interface LocationButton extends Omit<CompoundButtonProps, "label"> {
     label?: string;
@@ -9,17 +10,21 @@ export interface Location2Props {
     heading?: string;
     description?: string;
     address?: string;
-    cardPosition?: "left" | "right";
-    cardStyle?: "solid" | "glass";
-    sectionHeight?: "sm" | "md" | "lg";
+    contentPosition?: "left" | "right";
     mapEmbedUrl?: string;
     mapTitle?: string;
     mapFilter?: string;
     mapTintMode?: "none" | "theme" | "custom";
     mapTintColor?: string;
     mapTintOpacity?: number;
-    primaryButton?: LocationButton;
-    secondaryButton?: LocationButton;
+    buttons?: LocationButton[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        cardStyle?: "solid" | "glass";
+        sectionHeight?: "sm" | "md" | "lg";
+    };
 }
-export declare const Location2: ({ heading, description, address, cardPosition, cardStyle, sectionHeight, mapEmbedUrl, mapTitle, mapFilter, mapTintMode, mapTintColor, mapTintOpacity, primaryButton, secondaryButton, }: Location2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Location2: ({ heading, description, address, contentPosition, mapEmbedUrl, mapTitle, mapFilter, mapTintMode, mapTintColor, mapTintOpacity, buttons, styles, }: Location2Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -39,23 +39,21 @@ const Location2 = ({
   heading,
   description,
   address,
-  cardPosition = "left",
-  cardStyle = "solid",
-  sectionHeight = "md",
+  contentPosition = "left",
   mapEmbedUrl,
   mapTitle = "Google Maps",
   mapFilter,
   mapTintMode = "none",
   mapTintColor,
   mapTintOpacity = 0.15,
-  primaryButton,
-  secondaryButton
+  buttons = [],
+  styles
 }) => {
-  const isRight = cardPosition === "right";
-  const isGlass = cardStyle === "glass";
+  const isRight = contentPosition === "right";
+  const isGlass = (styles == null ? void 0 : styles.cardStyle) === "glass";
   const showMapTint = mapTintMode !== "none" && mapTintOpacity > 0;
   const tintColor = mapTintMode === "custom" ? mapTintColor || void 0 : void 0;
-  const heightClass = sectionHeight === "sm" ? "h-[480px]" : sectionHeight === "lg" ? "h-[75vh] min-h-[520px]" : "h-[600px]";
+  const heightClass = (styles == null ? void 0 : styles.sectionHeight) === "sm" ? "h-[480px]" : (styles == null ? void 0 : styles.sectionHeight) === "lg" ? "h-[75vh] min-h-[520px]" : "h-[600px]";
   return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full overflow-hidden", heightClass), children: [
     /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
       mapEmbedUrl ? /* @__PURE__ */ jsx(
@@ -120,10 +118,7 @@ const Location2 = ({
                 ),
                 /* @__PURE__ */ jsx("span", { className: "whitespace-pre-line", children: address })
               ] }),
-              ((primaryButton == null ? void 0 : primaryButton.label) || (secondaryButton == null ? void 0 : secondaryButton.label)) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3 pt-1", children: [
-                /* @__PURE__ */ jsx(ActionButton, { ...primaryButton }),
-                /* @__PURE__ */ jsx(ActionButton, { ...secondaryButton })
-              ] })
+              buttons.some((button) => button == null ? void 0 : button.label) && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 pt-1", children: buttons.map((button, index) => /* @__PURE__ */ jsx(ActionButton, { ...button }, index)) })
             ] })
           }
         )

package/dist/components/puck-block/location-sections/location-3/index.js

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { Location3 } from "./location.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultLocation = {
   name: "Downtown",
   address: "123 Main Street\nNew York, NY 10001",
@@ -7,6 +7,25 @@ const defaultLocation = {
   hours: "Mon–Fri: 9am–6pm\nSat: 10am–4pm",
   directionsUrl: "https://maps.google.com"
 };
+const location3ExtraStyleFields = {
+  mapHeight: {
+    type: "radio",
+    label: "Map Height",
+    options: [
+      { label: "Compact", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Tall", value: "lg" }
+    ]
+  },
+  columns: {
+    type: "radio",
+    label: "Grid Columns",
+    options: [
+      { label: "2 Columns", value: "2" },
+      { label: "3 Columns", value: "3" }
+    ]
+  }
+};
 const conf = {
   fields: {
     heading: { type: "textarea", contentEditable: true },
@@ -14,23 +33,6 @@ const conf = {
     mapEmbedUrl: { type: "text", label: "Google Map Embed URL" },
     mapTitle: { type: "text", label: "Map Title" },
     mapFilter: { type: "text", label: "Map Filter (CSS)" },
-    mapHeight: {
-      type: "radio",
-      label: "Map Height",
-      options: [
-        { label: "Compact", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Tall", value: "lg" }
-      ]
-    },
-    columns: {
-      type: "radio",
-      label: "Grid Columns",
-      options: [
-        { label: "2 Columns", value: "2" },
-        { label: "3 Columns", value: "3" }
-      ]
-    },
     locations: {
       type: "array",
       min: 1,
@@ -45,9 +47,7 @@ const conf = {
       },
       defaultItemProps: defaultLocation
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField(location3ExtraStyleFields)
   },
   defaultProps: {
     heading: "Find us\nnear you",
@@ -55,8 +55,6 @@ const conf = {
     mapEmbedUrl: "https://maps.google.com/maps?q=New%20York%2C%20NY%2C%20United%20States&z=11&t=m&output=embed",
     mapTitle: "Google Maps",
     mapFilter: "grayscale(35%) contrast(1.05) brightness(1.0)",
-    mapHeight: "md",
-    columns: "3",
     locations: [
       defaultLocation,
       {
@@ -74,7 +72,10 @@ const conf = {
         directionsUrl: "https://maps.google.com"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults({
+      mapHeight: "md",
+      columns: "3"
+    })
   },
   render: Location3
 };

package/dist/components/puck-block/location-sections/location-3/location.d.ts

@@ -7,16 +7,18 @@ export interface LocationEntry {
     directionsUrl?: string;
 }
 export interface Location3Props {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     mapEmbedUrl?: string;
     mapTitle?: string;
     mapFilter?: string;
-    mapHeight?: "sm" | "md" | "lg";
-    columns?: "2" | "3";
     locations: LocationEntry[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        mapHeight?: "sm" | "md" | "lg";
+        columns?: "2" | "3";
+    };
 }
-export declare const Location3: ({ padding, sectionStyle, backgroundColor, heading, description, mapEmbedUrl, mapTitle, mapFilter, mapHeight, columns, locations, }: Location3Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Location3: ({ heading, description, mapEmbedUrl, mapTitle, mapFilter, locations, styles, }: Location3Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/location-sections/location-3/location.js

@@ -3,26 +3,24 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { cn } from "../../../../utils/css-utils.js";
 const Location3 = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   mapEmbedUrl,
   mapTitle = "Google Maps",
   mapFilter,
-  mapHeight = "md",
-  columns = "3",
-  locations = []
+  locations = [],
+  styles
 }) => {
+  const mapHeight = (styles == null ? void 0 : styles.mapHeight) ?? "md";
+  const columns = (styles == null ? void 0 : styles.columns) ?? "3";
   const mapHeightClass = mapHeight === "sm" ? "h-[220px] md:h-[260px]" : mapHeight === "lg" ? "h-[360px] md:h-[440px]" : "h-[280px] md:h-[340px]";
   const colClass = columns === "2" ? "sm:grid-cols-2" : "sm:grid-cols-2 lg:grid-cols-3";
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
         (heading || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [
           heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground whitespace-pre-line font-serif text-3xl leading-tight tracking-tighter md:text-5xl", children: heading }),

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

@@ -0,0 +1,45 @@
+type LocationVariant = "location-1" | "location-2" | "location-3";
+type LocationPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type LocationSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type LocationButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type LocationItem = {
+    name: string;
+    address?: string;
+    phone?: string;
+    hours?: string;
+    directionsUrl?: string;
+};
+type LocationSectionProps = {
+    variant?: LocationVariant;
+    heading?: string;
+    description?: string;
+    address?: string;
+    mapEmbedUrl?: string;
+    mapTitle?: string;
+    mapFilter?: string;
+    mapTintMode?: "none" | "theme" | "custom";
+    mapTintColor?: string;
+    mapTintOpacity?: number;
+    buttons?: LocationButton[];
+    locations?: LocationItem[];
+    contentPosition?: "left" | "right";
+    contentAlign?: "left" | "right";
+    columns?: "2" | "3";
+    styles?: {
+        padding?: LocationPadding;
+        sectionStyle?: LocationSectionStyle;
+        backgroundColor?: string;
+        mapHeight?: "sm" | "md" | "lg";
+        cardStyle?: "solid" | "glass";
+        sectionHeight?: "sm" | "md" | "lg";
+    };
+};

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

@@ -0,0 +1,43 @@
+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;
+    description?: string;
+    percentage?: number;
+    direction?: "none" | "increase" | "decrease";
+    polarity?: "none" | "positive" | "negative";
+    tone?: "dark" | "light";
+};
+type MetricsSectionProps = {
+    variant?: MetricsVariant;
+    badge?: MetricsBadge;
+    heading?: string;
+    description?: string;
+    buttons?: MetricsButton[];
+    layout?: "section" | "inline" | "centered";
+    items?: MetricItem[];
+    styles?: {
+        padding?: MetricsPadding;
+        sectionStyle?: MetricsSectionStyle;
+        backgroundColor?: string;
+    };
+};

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

@@ -1,9 +1,10 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { Stats } from "./stats.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
-    statistics: {
+    items: {
       type: "array",
       max: 8,
       getItemSummary: (item, index = 0) => item.label || `Statistic ${index + 1}`,
@@ -63,9 +64,7 @@ const conf = {
         { label: "centered", value: "centered" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "The numbers speak for themselves",
@@ -83,7 +82,7 @@ const conf = {
         size: "default"
       }
     ],
-    statistics: [
+    items: [
       {
         label: "Monthly active users",
         value: "500",
@@ -114,7 +113,7 @@ const conf = {
       }
     ],
     layout: "section",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   resolveFields: (data, params) => {
     if (data.props.layout === "inline") {

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

@@ -1,16 +1,18 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 export interface StatsProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     layout?: "section" | "inline" | "centered";
-    statistics: {
+    items: {
         value: string;
         label: string;
         percentage?: number;
         direction?: "none" | "increase" | "decrease";
         polarity?: "none" | "positive" | "negative";
     }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Stats: ({ padding, sectionStyle, backgroundColor, layout, badge, heading, description, buttons, statistics, }: StatsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Stats: ({ layout, badge, heading, description, buttons, items, styles, }: StatsProps) => import("react/jsx-runtime").JSX.Element;