dune-react 0.0.23 → 0.0.25

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

@@ -0,0 +1,126 @@
+import { Location2 } from "./location.js";
+import { buttonField } from "../../../puck-core/core/props/interactive.js";
+import { locationField } from "../../../puck-core/core/props/form.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-core/core/styles.js";
+const locationButtonFields = {
+  ...buttonField.objectFields,
+  colorMode: {
+    type: "select",
+    options: [
+      { label: "Theme", value: "theme" },
+      { label: "Custom", value: "custom" }
+    ]
+  },
+  backgroundColor: { type: "text" },
+  textColor: { type: "text" }
+};
+const locationButtonDefaults = {
+  label: "Button",
+  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 = {
+  fields: {
+    heading: { type: "textarea", contentEditable: true },
+    description: { type: "textarea", contentEditable: true },
+    displayAddress: {
+      type: "textarea",
+      label: "Display Address",
+      contentEditable: true
+    },
+    contentPosition: {
+      type: "radio",
+      label: "Card Position",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" }
+      ]
+    },
+    location: locationField,
+    mapStyle: {
+      type: "radio",
+      label: "Map Style",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Grayscale", value: "grayscale" },
+        { label: "Dark", value: "dark" }
+      ]
+    },
+    mapTint: {
+      type: "radio",
+      label: "Map Tint",
+      options: [
+        { label: "None", value: "none" },
+        { label: "Theme", value: "theme" }
+      ]
+    },
+    buttons: {
+      type: "array",
+      max: 3,
+      getItemSummary: (item, index = 0) => item.label || `Button ${index + 1}`,
+      arrayFields: locationButtonFields,
+      defaultItemProps: locationButtonDefaults
+    },
+    styles: createStylesField(location2ExtraStyleFields)
+  },
+  defaultProps: {
+    heading: "Our Offices",
+    description: "Visit our headquarters in London or reach out to one of our regional offices worldwide.",
+    displayAddress: "10 Finsbury Square\nLondon, UK EC2A 1AF",
+    contentPosition: "left",
+    location: {
+      address: "London, United Kingdom",
+      lat: 51.5074,
+      lng: -0.1278,
+      zoom: 13
+    },
+    mapStyle: "grayscale",
+    mapTint: "none",
+    buttons: [
+      {
+        label: "Get Directions",
+        variant: "default",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      },
+      {
+        label: "Call Us",
+        variant: "outline",
+        size: "default",
+        icon: "none",
+        colorMode: "theme"
+      }
+    ],
+    styles: createStylesDefaults({
+      cardStyle: "solid",
+      sectionHeight: "md"
+    })
+  },
+  render: Location2
+};
+export {
+  conf,
+  conf as default
+};

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

@@ -18,9 +18,6 @@ export interface Location2Props {
     mapTint?: "none" | "theme";
     buttons?: LocationButton[];
     styles?: {
-        className?: string;
-        style?: Record<string, unknown>;
-        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;

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

@@ -0,0 +1,133 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { getMapEmbedUrl } from "../../../puck-core/core/props/form.js";
+const ActionButton = ({
+  label,
+  url,
+  action,
+  variant = "default",
+  size = "default",
+  icon = "none",
+  colorMode = "theme",
+  backgroundColor,
+  textColor
+}) => {
+  if (!label) return null;
+  const useCustomColors = colorMode === "custom";
+  const styleVars = {
+    ...useCustomColors && backgroundColor ? { "--loc2-btn-bg": backgroundColor } : {},
+    ...useCustomColors && textColor ? { "--loc2-btn-text": textColor } : {}
+  };
+  return /* @__PURE__ */ jsx("span", { style: Object.keys(styleVars).length ? styleVars : void 0, children: /* @__PURE__ */ jsx(
+    CompoundButton,
+    {
+      label,
+      action: action ?? (url ? /^https?:\/\//i.test(url) ? { type: "external", externalUrl: url } : { type: "page", pageUrl: url } : void 0),
+      variant,
+      size,
+      icon,
+      className: cn(
+        "transition-opacity hover:opacity-90",
+        useCustomColors && backgroundColor && "!border-[var(--loc2-btn-bg)] !bg-[var(--loc2-btn-bg)] hover:!bg-[var(--loc2-btn-bg)]",
+        useCustomColors && textColor && "!text-[var(--loc2-btn-text)]"
+      )
+    }
+  ) });
+};
+const MAP_STYLE_FILTERS = {
+  default: "",
+  grayscale: "grayscale(40%) contrast(1.05) brightness(1.0) saturate(0.85)",
+  dark: "grayscale(100%) invert(1) contrast(1.1) brightness(0.8)"
+};
+const Location2 = ({
+  heading,
+  description,
+  displayAddress,
+  contentPosition = "left",
+  location: loc,
+  mapStyle = "default",
+  mapTint = "none",
+  buttons = [],
+  styles
+}) => {
+  const isRight = contentPosition === "right";
+  const isGlass = (styles == null ? void 0 : styles.cardStyle) === "glass";
+  const showMapTint = mapTint === "theme";
+  const mapEmbedUrl = loc && loc.lat !== 0 ? getMapEmbedUrl(loc) : void 0;
+  const mapFilter = MAP_STYLE_FILTERS[mapStyle] || "";
+  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(
+        "iframe",
+        {
+          src: mapEmbedUrl,
+          title: (loc == null ? void 0 : loc.address) || "Google Maps",
+          className: "h-full w-full border-0",
+          loading: "lazy",
+          referrerPolicy: "no-referrer-when-downgrade",
+          allowFullScreen: true,
+          style: mapFilter ? { filter: mapFilter } : void 0
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground flex h-full w-full items-center justify-center text-sm", children: "Map address not configured" }),
+      showMapTint && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-primary pointer-events-none absolute inset-0",
+          style: {
+            opacity: 0.15,
+            mixBlendMode: "color"
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-full w-full items-center px-6 md:px-12 lg:px-16", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-full max-w-sm lg:max-w-md xl:max-w-lg",
+          isRight && "ml-auto"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-2xl p-8 shadow-xl",
+              isGlass ? "border border-white/20 bg-background/75 backdrop-blur-md backdrop-saturate-150" : "bg-background"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+              heading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground whitespace-pre-line font-serif text-3xl leading-tight tracking-tighter md:text-4xl", children: heading }) }),
+              description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm leading-relaxed", children: description }),
+              displayAddress && /* @__PURE__ */ jsxs("div", { className: "text-foreground flex items-start gap-2 text-sm", children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "text-primary mt-0.5 shrink-0",
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "whitespace-pre-line", children: displayAddress })
+              ] }),
+              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)) })
+            ] })
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  Location2
+};

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

@@ -0,0 +1,109 @@
+import { Location3 } from "./location.js";
+import { locationField } from "../../../puck-core/core/props/form.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-core/core/styles.js";
+const defaultLocationEntry = {
+  name: "San Francisco, CA",
+  location: {
+    address: "123 Market Street, San Francisco, CA 94105",
+    lat: 37.7749,
+    lng: -122.4194,
+    zoom: 14
+  },
+  phone: "+1 (415) 555-0100",
+  hours: "Mon–Fri: 9am–6pm\nSat: 10am–4pm"
+};
+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 },
+    description: { type: "textarea", contentEditable: true },
+    mapLocation: { ...locationField, label: "Map Location" },
+    mapStyle: {
+      type: "radio",
+      label: "Map Style",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Grayscale", value: "grayscale" },
+        { label: "Dark", value: "dark" }
+      ]
+    },
+    locations: {
+      type: "array",
+      min: 1,
+      max: 6,
+      getItemSummary: (item, index = 0) => item.name || `Location ${index + 1}`,
+      arrayFields: {
+        name: { type: "text", contentEditable: true },
+        location: locationField,
+        phone: { type: "text" },
+        hours: { type: "textarea", label: "Business Hours" },
+        directionsLabel: { type: "text", label: "Directions Button Label" }
+      },
+      defaultItemProps: defaultLocationEntry
+    },
+    styles: createStylesField(location3ExtraStyleFields)
+  },
+  defaultProps: {
+    heading: "Our Offices",
+    description: "We have teams around the world ready to help you succeed.",
+    mapLocation: {
+      address: "New York, NY, United States",
+      lat: 40.7128,
+      lng: -74.006,
+      zoom: 11
+    },
+    mapStyle: "grayscale",
+    locations: [
+      defaultLocationEntry,
+      {
+        name: "London, UK",
+        location: {
+          address: "10 Finsbury Square, London, EC2A 1AF",
+          lat: 51.5207,
+          lng: -0.0876,
+          zoom: 14
+        },
+        phone: "+44 20 7946 0200",
+        hours: "Mon–Fri: 9am–6pm\nSat: 10am–3pm"
+      },
+      {
+        name: "Tokyo, Japan",
+        location: {
+          address: "1-1-2 Marunouchi, Chiyoda-ku, Tokyo 100-0005",
+          lat: 35.6812,
+          lng: 139.7671,
+          zoom: 14
+        },
+        phone: "+81 3-1234-5678",
+        hours: "Mon–Fri: 9am–6pm"
+      }
+    ],
+    styles: createStylesDefaults({
+      mapHeight: "md",
+      columns: "3"
+    })
+  },
+  render: Location3
+};
+export {
+  conf,
+  conf as default
+};

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

@@ -16,9 +16,6 @@ export interface Location3Props {
     mapStyle?: "default" | "grayscale" | "dark";
     locations: LocationEntry[];
     styles?: {
-        className?: string;
-        style?: Record<string, unknown>;
-        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;

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

@@ -0,0 +1,140 @@
+import { jsx, jsxs } 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 { getMapEmbedUrl, getDirectionsUrl } from "../../../puck-core/core/props/form.js";
+const MAP_STYLE_FILTERS = {
+  default: "",
+  grayscale: "grayscale(35%) contrast(1.05) brightness(1.0)",
+  dark: "grayscale(100%) invert(1) contrast(1.1) brightness(0.8)"
+};
+const Location3 = ({
+  heading,
+  description,
+  mapLocation,
+  mapStyle = "default",
+  locations = [],
+  styles
+}) => {
+  const mapEmbedUrl = mapLocation && mapLocation.lat !== 0 ? getMapEmbedUrl(mapLocation) : void 0;
+  const mapFilter = MAP_STYLE_FILTERS[mapStyle] || "";
+  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: 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 }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-xl text-base leading-relaxed", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden rounded-2xl", mapHeightClass), children: mapEmbedUrl ? /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            src: mapEmbedUrl,
+            title: (mapLocation == null ? void 0 : mapLocation.address) || "Google Maps",
+            className: "h-full w-full border-0",
+            loading: "lazy",
+            referrerPolicy: "no-referrer-when-downgrade",
+            allowFullScreen: true,
+            style: mapFilter ? { filter: mapFilter } : void 0
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "bg-muted text-muted-foreground flex h-full w-full items-center justify-center text-sm", children: "Map address not configured" }) }),
+        locations.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-5", colClass), children: locations.map((loc, i) => {
+          var _a;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "bg-card border-border flex flex-col gap-3 rounded-xl border p-6",
+              children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: loc.name }),
+                ((_a = loc.location) == null ? void 0 : _a.address) && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-start gap-2 text-sm", children: [
+                  /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      className: "text-primary mt-0.5 shrink-0",
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
+                        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "whitespace-pre-line", children: loc.location.address })
+                ] }),
+                loc.phone && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: "text-primary shrink-0",
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: /* @__PURE__ */ jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 14a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.62 3h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 10.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 17.92Z" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: loc.phone })
+                ] }),
+                loc.hours && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-start gap-2 text-sm", children: [
+                  /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      className: "text-primary mt-0.5 shrink-0",
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                        /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "whitespace-pre-line", children: loc.hours })
+                ] }),
+                (loc.directionsAction || loc.location && loc.location.lat !== 0) && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-2", children: /* @__PURE__ */ jsx(
+                  CompoundButton,
+                  {
+                    label: loc.directionsLabel || "Get Directions",
+                    action: loc.directionsAction ?? (loc.location ? {
+                      type: "external",
+                      externalUrl: getDirectionsUrl(loc.location)
+                    } : void 0),
+                    variant: "outline",
+                    size: "sm",
+                    icon: "map-pin"
+                  }
+                ) })
+              ]
+            },
+            i
+          );
+        }) })
+      ] })
+    }
+  );
+};
+export {
+  Location3
+};

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

@@ -33,9 +33,6 @@ export type LocationSectionProps = {
     contentAlign?: "left" | "right";
     columns?: "2" | "3";
     styles?: {
-        className?: string;
-        style?: React.CSSProperties;
-        css?: string;
         padding?: LocationPadding;
         sectionStyle?: LocationSectionStyle;
         backgroundColor?: string;

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

@@ -30,7 +30,7 @@ const TabStats = (props) => {
     TabsContent,
     {
       value: tab.value,
-      className: "data-[state=active]:animate-tabs",
+      className: "animate-tabs",
       children: /* @__PURE__ */ jsxs("div", { className: "relative size-full", children: [
         tab.image && /* @__PURE__ */ jsx(
           CompoundImage,