@mission-studio/puck 1.0.23 → 1.0.24

package/dist/chunk-TRPKXVMO.mjs

@@ -0,0 +1,695 @@
+import {
+  dotsContainerStyle,
+  getArrowStyle,
+  getBaseStyle,
+  getCaptionStyle,
+  getCardStyle,
+  getContainerStyle,
+  getContainerStyle2,
+  getContainerStyle3,
+  getDotStyle,
+  getEmptyState,
+  getHeadingStyle,
+  getHrStyle,
+  getImageStyle,
+  getParagraphStyle,
+  getSectionStyle,
+  getSlideContainerStyle,
+  getVariantStyles,
+  getVisibilityClasses,
+  getWrapperStyle,
+  getWrapperStyle2,
+  getWrapperStyle3,
+  getWrapperStyle4,
+  icons,
+  imageStyle,
+  isEntryBoundValue,
+  isEntryBoundValue2,
+  isThemeableValue,
+  isThemeableValue2,
+  isThemeableValue3,
+  isThemeableValue4,
+  isThemeableValue5,
+  isThemeableValue6,
+  isThemeableValue7,
+  resolveBackgroundColor,
+  sizeMap,
+  sizeMap2,
+  slideStyle
+} from "./chunk-YIPEC4L4.mjs";
+import {
+  getShadowCSS,
+  useEntries,
+  useTheme
+} from "./chunk-PJXZC564.mjs";
+import {
+  useGtmEvent,
+  useUtmParams
+} from "./chunk-QSWQDR6M.mjs";
+import {
+  cn,
+  hexToRgba
+} from "./chunk-C6V3YUPF.mjs";
+
+// components/page/next/Heading.tsx
+import { jsx } from "react/jsx-runtime";
+function isThemeableValue8(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function isEntryBoundValue3(value) {
+  return typeof value === "object" && value !== null && "useEntry" in value;
+}
+function Heading({
+  text,
+  level = "h2",
+  size = "2xl",
+  weight = "bold",
+  color,
+  align = "left",
+  letterSpacing = "normal",
+  lineHeight = "tight",
+  id
+}) {
+  const { resolveColor } = useTheme();
+  const { getEntryValue } = useEntries();
+  const resolvedText = (() => {
+    if (!text) return "";
+    if (typeof text === "string") return text;
+    if (isEntryBoundValue3(text)) {
+      if (text.useEntry) {
+        return String(getEntryValue(text.entryName, text.fieldKey) ?? "");
+      }
+      return text.value;
+    }
+    return "";
+  })();
+  const resolvedColor = (() => {
+    if (!color)
+      return hexToRgba(
+        resolveColor("foreground").color,
+        resolveColor("foreground").opacity
+      );
+    if (typeof color === "string") return color;
+    if (isThemeableValue8(color)) {
+      return color.useTheme ? hexToRgba(
+        resolveColor(color.themeKey).color,
+        resolveColor(color.themeKey).opacity
+      ) : hexToRgba(color.value.color, color.value.opacity);
+    }
+    if ("color" in color) return hexToRgba(color.color, color.opacity);
+    return hexToRgba(
+      resolveColor("foreground").color,
+      resolveColor("foreground").opacity
+    );
+  })();
+  const Tag = level;
+  const style = getHeadingStyle({
+    size,
+    weight,
+    color: resolvedColor,
+    align,
+    letterSpacing,
+    lineHeight
+  });
+  if (!resolvedText) return null;
+  return /* @__PURE__ */ jsx(Tag, { id, style, children: resolvedText });
+}
+
+// components/page/next/Paragraph.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function isThemeableValue9(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function isEntryBoundValue4(value) {
+  return typeof value === "object" && value !== null && "useEntry" in value;
+}
+function Paragraph({
+  text,
+  size = "base",
+  weight = "normal",
+  color,
+  align = "left",
+  lineHeight = "normal",
+  maxWidth,
+  id
+}) {
+  const { resolveColor } = useTheme();
+  const { getEntryValue } = useEntries();
+  const resolvedText = (() => {
+    if (!text) return "";
+    if (typeof text === "string") return text;
+    if (isEntryBoundValue4(text)) {
+      if (text.useEntry) {
+        return String(getEntryValue(text.entryName, text.fieldKey) ?? "");
+      }
+      return text.value;
+    }
+    return "";
+  })();
+  const resolvedColor = (() => {
+    if (!color)
+      return hexToRgba(
+        resolveColor("foreground").color,
+        resolveColor("foreground").opacity
+      );
+    if (typeof color === "string") return color;
+    if (isThemeableValue9(color)) {
+      return color.useTheme ? hexToRgba(
+        resolveColor(color.themeKey).color,
+        resolveColor(color.themeKey).opacity
+      ) : hexToRgba(color.value.color, color.value.opacity);
+    }
+    if ("color" in color) return hexToRgba(color.color, color.opacity);
+    return hexToRgba(
+      resolveColor("foreground").color,
+      resolveColor("foreground").opacity
+    );
+  })();
+  const style = getParagraphStyle({
+    size,
+    weight,
+    color: resolvedColor,
+    align,
+    lineHeight,
+    maxWidth
+  });
+  if (!resolvedText) return null;
+  return /* @__PURE__ */ jsx2("p", { id, style, children: resolvedText });
+}
+
+// components/page/next/Button.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Button({
+  text,
+  href,
+  target = "_self",
+  variant = "solid",
+  size = "md",
+  color,
+  textColor,
+  borderRadius = "md",
+  fullWidth = false,
+  align = "center",
+  id
+}) {
+  const { resolveColor } = useTheme();
+  const { getEntryValue } = useEntries();
+  const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
+  const resolvedText = (() => {
+    if (!text) return "Button";
+    if (typeof text === "string") return text;
+    if (isEntryBoundValue(text)) {
+      if (text.useEntry) {
+        return String(getEntryValue(text.entryName, text.fieldKey) ?? "Button");
+      }
+      return text.value;
+    }
+    return "Button";
+  })();
+  const handleClick = () => {
+    const sessionId = typeof window !== "undefined" ? sessionStorage.getItem("session_id") : null;
+    sendEvent("button_click", {
+      text: resolvedText,
+      href: href || void 0,
+      variant,
+      session_id: sessionId,
+      ...utm
+    });
+  };
+  const resolvedColor = (() => {
+    if (!color) return resolveColor("primary");
+    if (typeof color === "string") return { color, opacity: 100 };
+    if (isThemeableValue(color)) {
+      return color.useTheme ? resolveColor(color.themeKey) : color.value;
+    }
+    if ("color" in color) return color;
+    return resolveColor("primary");
+  })();
+  const resolvedTextColor = (() => {
+    if (!textColor) {
+      if (variant === "solid") return { color: "#FFFFFF", opacity: 100 };
+      return resolvedColor;
+    }
+    if (typeof textColor === "string")
+      return { color: textColor, opacity: 100 };
+    if (isThemeableValue(textColor)) {
+      return textColor.useTheme ? resolveColor(textColor.themeKey) : textColor.value;
+    }
+    if ("color" in textColor) return textColor;
+    return { color: "#FFFFFF", opacity: 100 };
+  })();
+  const bgColor = hexToRgba(resolvedColor.color, resolvedColor.opacity);
+  const fgColor = hexToRgba(resolvedTextColor.color, resolvedTextColor.opacity);
+  const baseStyle = getBaseStyle(size, borderRadius, fullWidth);
+  const variantStyle = getVariantStyles(variant, bgColor, fgColor);
+  const style = { ...baseStyle, ...variantStyle };
+  const wrapperStyle = getWrapperStyle(align);
+  if (href) {
+    return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3(
+      "a",
+      {
+        id,
+        href,
+        target,
+        style,
+        rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        onClick: handleClick,
+        children: resolvedText
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3("button", { id, type: "button", style, onClick: handleClick, children: resolvedText }) });
+}
+
+// components/page/next/Image.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function Image({
+  src,
+  alt = "",
+  width = "full",
+  aspectRatio = "auto",
+  objectFit = "cover",
+  borderRadius = "none",
+  shadow = "none",
+  align = "center",
+  caption,
+  captionColor,
+  id
+}) {
+  const { resolveColor } = useTheme();
+  const { getEntryValue } = useEntries();
+  const resolvedSrc = (() => {
+    if (!src) return "";
+    if (typeof src === "string") return src;
+    if (isEntryBoundValue2(src)) {
+      if (src.useEntry) {
+        return String(getEntryValue(src.entryName, src.fieldKey) ?? "");
+      }
+      return src.value;
+    }
+    return "";
+  })();
+  const resolvedCaption = (() => {
+    if (!caption) return "";
+    if (typeof caption === "string") return caption;
+    if (isEntryBoundValue2(caption)) {
+      if (caption.useEntry) {
+        return String(getEntryValue(caption.entryName, caption.fieldKey) ?? "");
+      }
+      return caption.value;
+    }
+    return "";
+  })();
+  const resolvedCaptionColor = (() => {
+    if (!captionColor) return resolveColor("muted");
+    if (typeof captionColor === "string")
+      return { color: captionColor, opacity: 100 };
+    if (isThemeableValue2(captionColor)) {
+      return captionColor.useTheme ? resolveColor(captionColor.themeKey) : captionColor.value;
+    }
+    if ("color" in captionColor) return captionColor;
+    return resolveColor("muted");
+  })();
+  const wrapperStyle = getWrapperStyle2(align);
+  const imageStyle2 = getImageStyle(
+    width,
+    aspectRatio,
+    objectFit,
+    borderRadius,
+    shadow
+  );
+  const captionStyle = getCaptionStyle(
+    align,
+    width,
+    hexToRgba(resolvedCaptionColor.color, resolvedCaptionColor.opacity)
+  );
+  if (!resolvedSrc) {
+    return /* @__PURE__ */ jsx4("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          ...imageStyle2,
+          backgroundColor: "#e5e7eb",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "200px",
+          color: "#9ca3af"
+        },
+        children: "No image"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("figure", { id, style: { ...wrapperStyle, margin: 0 }, children: [
+    /* @__PURE__ */ jsx4("img", { src: resolvedSrc, alt, style: imageStyle2, loading: "lazy" }),
+    resolvedCaption && /* @__PURE__ */ jsx4("figcaption", { style: captionStyle, children: resolvedCaption })
+  ] });
+}
+
+// components/page/next/ImageCarousel.tsx
+import { useState } from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ImageCarousel({
+  images = [],
+  aspectRatio = "16:9",
+  borderRadius = "none",
+  showDots = true,
+  showArrows = true,
+  arrowColor,
+  dotColor,
+  id
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const { resolveColor } = useTheme();
+  const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
+  const resolvedArrowColor = (() => {
+    if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
+    if (typeof arrowColor === "string")
+      return { color: arrowColor, opacity: 100 };
+    if (isThemeableValue3(arrowColor)) {
+      return arrowColor.useTheme ? resolveColor(arrowColor.themeKey) : arrowColor.value;
+    }
+    if ("color" in arrowColor) return arrowColor;
+    return { color: "#FFFFFF", opacity: 100 };
+  })();
+  const resolvedDotColor = (() => {
+    if (!dotColor) return resolveColor("primary");
+    if (typeof dotColor === "string") return { color: dotColor, opacity: 100 };
+    if (isThemeableValue3(dotColor)) {
+      return dotColor.useTheme ? resolveColor(dotColor.themeKey) : dotColor.value;
+    }
+    if ("color" in dotColor) return dotColor;
+    return resolveColor("primary");
+  })();
+  const goToPrevious = () => {
+    const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+    sendEvent("carousel_navigate", {
+      direction: "previous",
+      slideIndex: newIndex,
+      totalSlides: images.length,
+      ...utm
+    });
+  };
+  const goToNext = () => {
+    const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+    sendEvent("carousel_navigate", {
+      direction: "next",
+      slideIndex: newIndex,
+      totalSlides: images.length,
+      ...utm
+    });
+  };
+  const goToSlide = (index) => {
+    setCurrentIndex(index);
+    sendEvent("carousel_navigate", {
+      direction: "direct",
+      slideIndex: index,
+      totalSlides: images.length,
+      ...utm
+    });
+  };
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx5("div", { style: getEmptyState(aspectRatio, borderRadius), children: "No images" });
+  }
+  const arrowColorStr = hexToRgba(
+    resolvedArrowColor.color,
+    resolvedArrowColor.opacity
+  );
+  const dotColorStr = hexToRgba(
+    resolvedDotColor.color,
+    resolvedDotColor.opacity
+  );
+  return /* @__PURE__ */ jsxs2("div", { id, style: getContainerStyle(aspectRatio, borderRadius), children: [
+    /* @__PURE__ */ jsx5("div", { style: getSlideContainerStyle(currentIndex), children: images.map((image, index) => /* @__PURE__ */ jsx5("div", { style: slideStyle, children: /* @__PURE__ */ jsx5(
+      "img",
+      {
+        src: image.src,
+        alt: image.alt || "",
+        style: imageStyle,
+        loading: "lazy"
+      }
+    ) }, index)) }),
+    showArrows && images.length > 1 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: goToPrevious,
+          style: { ...getArrowStyle(arrowColorStr), left: "16px" },
+          "aria-label": "Previous slide",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: goToNext,
+          style: { ...getArrowStyle(arrowColorStr), right: "16px" },
+          "aria-label": "Next slide",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    showDots && images.length > 1 && /* @__PURE__ */ jsx5("div", { style: dotsContainerStyle, children: images.map((_, index) => /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: () => goToSlide(index),
+        style: getDotStyle(index === currentIndex, dotColorStr),
+        "aria-label": `Go to slide ${index + 1}`
+      },
+      index
+    )) })
+  ] });
+}
+
+// components/page/next/Icon.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Icon({
+  name = "check",
+  size = "md",
+  color,
+  align = "center",
+  id
+}) {
+  const { resolveColor } = useTheme();
+  const resolvedColor = (() => {
+    if (!color) return resolveColor("primary");
+    if (typeof color === "string") return { color, opacity: 100 };
+    if (isThemeableValue4(color)) {
+      return color.useTheme ? resolveColor(color.themeKey) : color.value;
+    }
+    if ("color" in color) return color;
+    return resolveColor("primary");
+  })();
+  const IconComponent = icons[name.toLowerCase()] || icons.check;
+  const { size: iconSize, strokeWidth } = sizeMap[size];
+  const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
+  const wrapperStyle = getWrapperStyle3(align);
+  return /* @__PURE__ */ jsx6("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx6(
+    IconComponent,
+    {
+      size: iconSize,
+      color: colorValue,
+      strokeWidth
+    }
+  ) });
+}
+
+// components/page/next/Section.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Section({
+  children: _children,
+  verticalPadding = 48,
+  horizontalPadding = 32,
+  gap = 24,
+  backgroundColor,
+  backgroundImage,
+  shadow = "none",
+  borderRadius = 0,
+  contentMaxWidth = "1400px",
+  anchorLink,
+  visibility,
+  puck
+}) {
+  const { resolveColor } = useTheme();
+  const DropZone = puck?.renderDropZone;
+  const style = {
+    ...getSectionStyle(
+      verticalPadding,
+      horizontalPadding,
+      gap,
+      resolveBackgroundColor(backgroundColor, resolveColor),
+      backgroundImage,
+      shadow,
+      borderRadius
+    ),
+    boxShadow: getShadowCSS(shadow)
+  };
+  return /* @__PURE__ */ jsx7(
+    "section",
+    {
+      id: anchorLink,
+      className: cn("flex w-full flex-col", getVisibilityClasses(visibility)),
+      style,
+      children: /* @__PURE__ */ jsx7("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children: DropZone && /* @__PURE__ */ jsx7(DropZone, { zone: "content" }) })
+    }
+  );
+}
+
+// components/page/next/Container.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Container({
+  maxWidth = "lg",
+  padding,
+  paddingX = "md",
+  paddingY = "none",
+  backgroundColor,
+  centered = true,
+  id,
+  puck
+}) {
+  const { resolveColor } = useTheme();
+  const DropZone = puck?.renderDropZone;
+  const resolvedBgColor = (() => {
+    if (!backgroundColor) return null;
+    if (typeof backgroundColor === "string")
+      return { color: backgroundColor, opacity: 100 };
+    if (isThemeableValue5(backgroundColor)) {
+      return backgroundColor.useTheme ? resolveColor(backgroundColor.themeKey) : backgroundColor.value;
+    }
+    if ("color" in backgroundColor) return backgroundColor;
+    return null;
+  })();
+  const effectivePaddingX = padding || paddingX;
+  const effectivePaddingY = padding || paddingY;
+  const style = getContainerStyle2(
+    maxWidth,
+    effectivePaddingX,
+    effectivePaddingY,
+    centered,
+    resolvedBgColor ? hexToRgba(resolvedBgColor.color, resolvedBgColor.opacity) : void 0
+  );
+  return /* @__PURE__ */ jsx8("div", { id, style, children: DropZone && /* @__PURE__ */ jsx8(DropZone, { zone: "container-content" }) });
+}
+
+// components/page/next/Columns.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Columns({
+  columns = 2,
+  gap = "md",
+  verticalAlign = "top",
+  stackOnMobile = true,
+  id,
+  puck
+}) {
+  const DropZone = puck?.renderDropZone;
+  const containerStyle = getContainerStyle3(columns, gap, verticalAlign);
+  return /* @__PURE__ */ jsx9("div", { id, style: containerStyle, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx9("div", { style: { minWidth: 0 }, children: DropZone && /* @__PURE__ */ jsx9(DropZone, { zone: `column-${index}` }) }, index)) });
+}
+
+// components/page/next/Card.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Card({
+  backgroundColor,
+  borderColor,
+  borderWidth = "thin",
+  borderRadius = "md",
+  shadow = "sm",
+  padding = "md",
+  id,
+  puck
+}) {
+  const { resolveColor } = useTheme();
+  const DropZone = puck?.renderDropZone;
+  const resolvedBgColor = (() => {
+    if (!backgroundColor) return resolveColor("background");
+    if (typeof backgroundColor === "string")
+      return { color: backgroundColor, opacity: 100 };
+    if (isThemeableValue6(backgroundColor)) {
+      return backgroundColor.useTheme ? resolveColor(backgroundColor.themeKey) : backgroundColor.value;
+    }
+    if ("color" in backgroundColor) return backgroundColor;
+    return resolveColor("background");
+  })();
+  const resolvedBorderColor = (() => {
+    if (!borderColor) return resolveColor("muted");
+    if (typeof borderColor === "string")
+      return { color: borderColor, opacity: 100 };
+    if (isThemeableValue6(borderColor)) {
+      return borderColor.useTheme ? resolveColor(borderColor.themeKey) : borderColor.value;
+    }
+    if ("color" in borderColor) return borderColor;
+    return resolveColor("muted");
+  })();
+  const style = getCardStyle(
+    hexToRgba(resolvedBgColor.color, resolvedBgColor.opacity),
+    hexToRgba(resolvedBorderColor.color, resolvedBorderColor.opacity),
+    borderWidth,
+    borderRadius,
+    shadow,
+    padding
+  );
+  return /* @__PURE__ */ jsx10("div", { id, style, children: DropZone && /* @__PURE__ */ jsx10(DropZone, { zone: "card-content" }) });
+}
+
+// components/page/next/Divider.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Divider({
+  style: lineStyle = "solid",
+  thickness = "thin",
+  color,
+  width = "full",
+  align = "center",
+  spacing = "md",
+  id
+}) {
+  const { resolveColor } = useTheme();
+  const resolvedColor = (() => {
+    if (!color) return resolveColor("muted");
+    if (typeof color === "string") return { color, opacity: 100 };
+    if (isThemeableValue7(color)) {
+      return color.useTheme ? resolveColor(color.themeKey) : color.value;
+    }
+    if ("color" in color) return color;
+    return resolveColor("muted");
+  })();
+  const wrapperStyle = getWrapperStyle4(align, spacing);
+  const hrStyle = getHrStyle(
+    width,
+    thickness,
+    lineStyle,
+    hexToRgba(resolvedColor.color, resolvedColor.opacity)
+  );
+  return /* @__PURE__ */ jsx11("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx11("hr", { style: hrStyle }) });
+}
+
+// components/page/next/Spacer.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Spacer({ size = "md", id }) {
+  const style = {
+    height: sizeMap2[size],
+    width: "100%"
+  };
+  return /* @__PURE__ */ jsx12("div", { id, style, "aria-hidden": "true" });
+}
+
+export {
+  Heading,
+  Paragraph,
+  Button,
+  Image,
+  ImageCarousel,
+  Icon,
+  Section,
+  Container,
+  Columns,
+  Card,
+  Divider,
+  Spacer
+};