@delmaredigital/payload-puck 0.1.0

package/dist/AccordionClient.js

@@ -0,0 +1,786 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var iconsReact = require('@tabler/icons-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/fields/shared.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function isLegacyWidthValue(value) {
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return typeof v.maxWidth === "number" && typeof v.unit === "string" && typeof v.mode === "string" && !("minWidth" in v) && !("minHeight" in v) && !("maxHeight" in v);
+}
+function hexToRgb(hex) {
+  const clean = hex.replace(/^#/, "");
+  if (clean.length !== 6) return null;
+  const r = parseInt(clean.substring(0, 2), 16);
+  const g = parseInt(clean.substring(2, 4), 16);
+  const b = parseInt(clean.substring(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+  return { r, g, b };
+}
+function colorValueToCSS(color) {
+  if (!color?.hex) return void 0;
+  const rgb = hexToRgb(color.hex);
+  if (!rgb) return color.hex;
+  const opacity = (color.opacity ?? 100) / 100;
+  if (opacity === 1) {
+    return color.hex;
+  }
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+}
+function paddingValueToCSS(padding) {
+  if (!padding) return void 0;
+  const { top, right, bottom, left, unit } = padding;
+  if (top === right && right === bottom && bottom === left) {
+    return `${top}${unit}`;
+  }
+  if (top === bottom && left === right) {
+    return `${top}${unit} ${right}${unit}`;
+  }
+  if (left === right) {
+    return `${top}${unit} ${right}${unit} ${bottom}${unit}`;
+  }
+  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`;
+}
+function marginValueToCSS(margin) {
+  if (!margin) return void 0;
+  const { top, right, bottom, left, unit } = margin;
+  if (top === right && right === bottom && bottom === left) {
+    return `${top}${unit}`;
+  }
+  if (top === bottom && left === right) {
+    return `${top}${unit} ${right}${unit}`;
+  }
+  if (left === right) {
+    return `${top}${unit} ${right}${unit} ${bottom}${unit}`;
+  }
+  return `${top}${unit} ${right}${unit} ${bottom}${unit} ${left}${unit}`;
+}
+function widthValueToCSS(width) {
+  if (!width) return void 0;
+  const style = {};
+  if (width.mode === "full") {
+    style.width = "100%";
+    style.maxWidth = "100%";
+  } else {
+    style.maxWidth = `${width.maxWidth}${width.unit}`;
+    style.width = "100%";
+  }
+  switch (width.alignment) {
+    case "left":
+      style.marginLeft = "0";
+      style.marginRight = "auto";
+      break;
+    case "center":
+      style.marginLeft = "auto";
+      style.marginRight = "auto";
+      break;
+    case "right":
+      style.marginLeft = "auto";
+      style.marginRight = "0";
+      break;
+  }
+  return style;
+}
+function dimensionsValueToCSS(dimensions) {
+  if (!dimensions) return void 0;
+  if (isLegacyWidthValue(dimensions)) {
+    return widthValueToCSS(dimensions);
+  }
+  const dim = dimensions;
+  const style = {};
+  if (dim.mode === "full") {
+    style.width = "100%";
+    style.maxWidth = "100%";
+  } else {
+    style.width = "100%";
+    if (dim.maxWidth?.enabled !== false && dim.maxWidth?.value > 0) {
+      style.maxWidth = `${dim.maxWidth.value}${dim.maxWidth.unit}`;
+    }
+    if (dim.minWidth?.enabled && dim.minWidth.value > 0) {
+      style.minWidth = `${dim.minWidth.value}${dim.minWidth.unit}`;
+    }
+  }
+  if (dim.minHeight?.enabled && dim.minHeight.value > 0) {
+    style.minHeight = `${dim.minHeight.value}${dim.minHeight.unit}`;
+  }
+  if (dim.maxHeight?.enabled && dim.maxHeight.value > 0) {
+    style.maxHeight = `${dim.maxHeight.value}${dim.maxHeight.unit}`;
+  }
+  switch (dim.alignment) {
+    case "left":
+      style.marginLeft = "0";
+      style.marginRight = "auto";
+      break;
+    case "center":
+      style.marginLeft = "auto";
+      style.marginRight = "auto";
+      break;
+    case "right":
+      style.marginLeft = "auto";
+      style.marginRight = "0";
+      break;
+  }
+  return style;
+}
+function gradientValueToCSS(gradient) {
+  if (!gradient?.stops || gradient.stops.length === 0) {
+    return "transparent";
+  }
+  const sortedStops = [...gradient.stops].sort((a, b) => a.position - b.position);
+  const stopsCSS = sortedStops.map((stop) => {
+    const color = colorValueToCSS(stop.color) || "transparent";
+    return `${color} ${stop.position}%`;
+  }).join(", ");
+  if (gradient.type === "radial") {
+    const shape = gradient.radialShape || "circle";
+    const position = gradient.radialPosition || "center";
+    return `radial-gradient(${shape} at ${position}, ${stopsCSS})`;
+  }
+  return `linear-gradient(${gradient.angle}deg, ${stopsCSS})`;
+}
+function positionToCSS(position) {
+  const positionMap = {
+    center: "center",
+    top: "top",
+    bottom: "bottom",
+    left: "left",
+    right: "right",
+    "top-left": "top left",
+    "top-right": "top right",
+    "bottom-left": "bottom left",
+    "bottom-right": "bottom right"
+  };
+  return position ? positionMap[position] || "center" : "center";
+}
+function maskDirectionToCSS(direction) {
+  const directionMap = {
+    "to-top": "to top",
+    "to-bottom": "to bottom",
+    "to-left": "to left",
+    "to-right": "to right",
+    "to-top-left": "to top left",
+    "to-top-right": "to top right",
+    "to-bottom-left": "to bottom left",
+    "to-bottom-right": "to bottom right",
+    "from-center": "radial"
+    // Not used for linear, handled separately in maskToCSS
+  };
+  return directionMap[direction] || "to bottom";
+}
+function maskToCSS(mask) {
+  const startAlpha = (mask.startOpacity ?? 100) / 100;
+  const endAlpha = (mask.endOpacity ?? 0) / 100;
+  if (mask.direction === "from-center") {
+    return `radial-gradient(circle at center, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`;
+  }
+  const direction = maskDirectionToCSS(mask.direction);
+  return `linear-gradient(${direction}, rgba(0,0,0,${startAlpha}) ${mask.startPosition}%, rgba(0,0,0,${endAlpha}) ${mask.endPosition}%)`;
+}
+function backgroundValueToCSS(bg) {
+  if (!bg || bg.type === "none") {
+    return {};
+  }
+  const style = {};
+  switch (bg.type) {
+    case "solid":
+      if (bg.solid?.hex) {
+        style.backgroundColor = colorValueToCSS(bg.solid);
+      }
+      break;
+    case "gradient":
+      if (bg.gradient && bg.gradient.stops && bg.gradient.stops.length > 0) {
+        style.background = gradientValueToCSS(bg.gradient);
+      }
+      break;
+    case "image":
+      if (bg.image?.media?.url) {
+        const imageUrl = bg.image.media.url;
+        const size = bg.image.size || "cover";
+        const position = positionToCSS(bg.image.position);
+        const repeat = bg.image.repeat || "no-repeat";
+        const attachment = bg.image.attachment || "scroll";
+        if (bg.overlay?.enabled) {
+          const overlayCSS = bg.overlay.type === "solid" ? colorValueToCSS(bg.overlay.solid) : gradientValueToCSS(bg.overlay.gradient);
+          if (bg.overlay.type === "solid" && overlayCSS) {
+            style.backgroundImage = `linear-gradient(${overlayCSS}, ${overlayCSS}), url(${imageUrl})`;
+          } else {
+            style.backgroundImage = `${overlayCSS}, url(${imageUrl})`;
+          }
+          style.backgroundSize = `auto, ${size}`;
+          style.backgroundPosition = `center, ${position}`;
+          style.backgroundRepeat = `no-repeat, ${repeat}`;
+          style.backgroundAttachment = `scroll, ${attachment}`;
+        } else {
+          style.backgroundImage = `url(${imageUrl})`;
+          style.backgroundSize = size;
+          style.backgroundPosition = position;
+          style.backgroundRepeat = repeat;
+          style.backgroundAttachment = attachment;
+        }
+        if (bg.image.mask?.enabled) {
+          const maskCSS = maskToCSS(bg.image.mask);
+          style.maskImage = maskCSS;
+          style.WebkitMaskImage = maskCSS;
+        }
+      }
+      break;
+  }
+  return style;
+}
+function transformOriginToCSS(origin) {
+  const originMap = {
+    center: "center",
+    top: "top",
+    bottom: "bottom",
+    left: "left",
+    right: "right",
+    "top-left": "top left",
+    "top-right": "top right",
+    "bottom-left": "bottom left",
+    "bottom-right": "bottom right"
+  };
+  return originMap[origin] || "center";
+}
+function transformValueToCSS(transform) {
+  if (!transform) return void 0;
+  const style = {};
+  const transforms = [];
+  if (transform.enable3D && transform.perspective) {
+    style.perspective = `${transform.perspective}px`;
+  }
+  if (transform.translateX !== 0 || transform.translateY !== 0) {
+    transforms.push(
+      `translate(${transform.translateX}${transform.translateUnit}, ${transform.translateY}${transform.translateUnit})`
+    );
+  }
+  if (transform.rotate !== 0) {
+    transforms.push(`rotate(${transform.rotate}deg)`);
+  }
+  if (transform.enable3D) {
+    if (transform.rotateX && transform.rotateX !== 0) {
+      transforms.push(`rotateX(${transform.rotateX}deg)`);
+    }
+    if (transform.rotateY && transform.rotateY !== 0) {
+      transforms.push(`rotateY(${transform.rotateY}deg)`);
+    }
+  }
+  if (transform.scaleX !== 1 || transform.scaleY !== 1) {
+    if (transform.scaleX === transform.scaleY) {
+      transforms.push(`scale(${transform.scaleX})`);
+    } else {
+      transforms.push(`scale(${transform.scaleX}, ${transform.scaleY})`);
+    }
+  }
+  if (transform.skewX !== 0 || transform.skewY !== 0) {
+    if (transform.skewX !== 0 && transform.skewY !== 0) {
+      transforms.push(`skew(${transform.skewX}deg, ${transform.skewY}deg)`);
+    } else if (transform.skewX !== 0) {
+      transforms.push(`skewX(${transform.skewX}deg)`);
+    } else {
+      transforms.push(`skewY(${transform.skewY}deg)`);
+    }
+  }
+  if (transforms.length > 0) {
+    style.transform = transforms.join(" ");
+  }
+  if (transform.origin !== "center") {
+    style.transformOrigin = transformOriginToCSS(transform.origin);
+  }
+  if (transform.enable3D) {
+    style.transformStyle = "preserve-3d";
+  }
+  return Object.keys(style).length > 0 ? style : void 0;
+}
+var EASING_CSS_MAP = {
+  linear: "linear",
+  ease: "ease",
+  "ease-in": "ease-in",
+  "ease-out": "ease-out",
+  "ease-in-out": "ease-in-out",
+  spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  "spring-gentle": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+  "bounce-in": "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
+  "bounce-out": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  "back-in": "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
+  "back-out": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  "back-in-out": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+  elastic: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
+};
+function animationOriginToCSS(origin) {
+  if (!origin) return "center";
+  const originMap = {
+    center: "center",
+    top: "top",
+    bottom: "bottom",
+    left: "left",
+    right: "right",
+    "top-left": "top left",
+    "top-right": "top right",
+    "bottom-left": "bottom left",
+    "bottom-right": "bottom right"
+  };
+  return originMap[origin] || "center";
+}
+function animationValueToCSS(anim) {
+  if (!anim || anim.mode !== "custom") return void 0;
+  const duration = anim.duration ?? 300;
+  const delay = anim.delay ?? 0;
+  const easing = anim.easing ?? "ease";
+  const easingCSS = EASING_CSS_MAP[easing] || "ease";
+  return {
+    transition: `all ${duration}ms ${easingCSS} ${delay}ms`,
+    transitionProperty: "opacity, transform, filter, background-color, color, border-color, box-shadow"
+  };
+}
+function getEntranceAnimationStyles(anim) {
+  const defaultResult = {
+    initial: {},
+    animate: {},
+    duration: 500,
+    delay: 0,
+    easing: "ease",
+    origin: "center"
+  };
+  if (!anim || anim.mode !== "preset" || anim.entrance === "none") {
+    return defaultResult;
+  }
+  const duration = anim.entranceDuration ?? 500;
+  const delay = anim.entranceDelay ?? 0;
+  const easing = EASING_CSS_MAP[anim.easing ?? "ease"] || "ease";
+  const origin = animationOriginToCSS(anim.origin);
+  const distance = anim.distance ?? 24;
+  const scaleFrom = anim.scaleFrom ?? 0.9;
+  const rotateAngle = anim.rotateAngle ?? 15;
+  const blurAmount = anim.blurAmount ?? 8;
+  const entrance = anim.entrance ?? "none";
+  let initial = {};
+  let animate = {};
+  switch (entrance) {
+    // ==================== FADE (6) ====================
+    case "fade-in":
+      initial = { opacity: 0 };
+      animate = { opacity: 1 };
+      break;
+    case "fade-up":
+      initial = { opacity: 0, transform: `translateY(${distance}px)` };
+      animate = { opacity: 1, transform: "translateY(0)" };
+      break;
+    case "fade-down":
+      initial = { opacity: 0, transform: `translateY(-${distance}px)` };
+      animate = { opacity: 1, transform: "translateY(0)" };
+      break;
+    case "fade-left":
+      initial = { opacity: 0, transform: `translateX(${distance}px)` };
+      animate = { opacity: 1, transform: "translateX(0)" };
+      break;
+    case "fade-right":
+      initial = { opacity: 0, transform: `translateX(-${distance}px)` };
+      animate = { opacity: 1, transform: "translateX(0)" };
+      break;
+    case "fade-scale":
+      initial = { opacity: 0, transform: `scale(${scaleFrom})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    // ==================== SCALE (4) ====================
+    case "scale-in":
+      initial = { opacity: 0, transform: `scale(${scaleFrom})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    case "scale-up":
+      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(${distance}px)` };
+      animate = { opacity: 1, transform: "scale(1) translateY(0)" };
+      break;
+    case "scale-down":
+      initial = { opacity: 0, transform: `scale(${scaleFrom}) translateY(-${distance}px)` };
+      animate = { opacity: 1, transform: "scale(1) translateY(0)" };
+      break;
+    case "scale-out":
+      initial = { opacity: 0, transform: `scale(${2 - scaleFrom})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    // ==================== SLIDE (4) ====================
+    case "slide-up":
+      initial = { transform: `translateY(${distance}px)` };
+      animate = { transform: "translateY(0)" };
+      break;
+    case "slide-down":
+      initial = { transform: `translateY(-${distance}px)` };
+      animate = { transform: "translateY(0)" };
+      break;
+    case "slide-left":
+      initial = { transform: `translateX(${distance}px)` };
+      animate = { transform: "translateX(0)" };
+      break;
+    case "slide-right":
+      initial = { transform: `translateX(-${distance}px)` };
+      animate = { transform: "translateX(0)" };
+      break;
+    // ==================== BLUR (3) ====================
+    case "blur-in":
+      initial = { opacity: 0, filter: `blur(${blurAmount}px)` };
+      animate = { opacity: 1, filter: "blur(0)" };
+      break;
+    case "blur-up":
+      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(${distance}px)` };
+      animate = { opacity: 1, filter: "blur(0)", transform: "translateY(0)" };
+      break;
+    case "blur-down":
+      initial = { opacity: 0, filter: `blur(${blurAmount}px)`, transform: `translateY(-${distance}px)` };
+      animate = { opacity: 1, filter: "blur(0)", transform: "translateY(0)" };
+      break;
+    // ==================== ROTATE (3) ====================
+    case "rotate-in":
+      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) scale(${scaleFrom})` };
+      animate = { opacity: 1, transform: "rotate(0) scale(1)" };
+      break;
+    case "rotate-up":
+      initial = { opacity: 0, transform: `rotate(${rotateAngle}deg) translateY(${distance}px)` };
+      animate = { opacity: 1, transform: "rotate(0) translateY(0)" };
+      break;
+    case "rotate-down":
+      initial = { opacity: 0, transform: `rotate(-${rotateAngle}deg) translateY(-${distance}px)` };
+      animate = { opacity: 1, transform: "rotate(0) translateY(0)" };
+      break;
+    // ==================== BOUNCE (3) ====================
+    // These use spring/bounce easing by default for the effect
+    case "bounce-in":
+      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.8})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    case "bounce-up":
+      initial = { opacity: 0, transform: `translateY(${distance * 1.5}px)` };
+      animate = { opacity: 1, transform: "translateY(0)" };
+      break;
+    case "bounce-down":
+      initial = { opacity: 0, transform: `translateY(-${distance * 1.5}px)` };
+      animate = { opacity: 1, transform: "translateY(0)" };
+      break;
+    // ==================== FLIP (2) ====================
+    // Flip uses perspective in transform for proper 3D effect
+    // Starts from -90deg (tilted back) so the flip motion is visible
+    case "flip-x":
+      initial = {
+        transform: "perspective(1000px) rotateX(-90deg)",
+        opacity: 0.2,
+        backfaceVisibility: "hidden"
+      };
+      animate = {
+        transform: "perspective(1000px) rotateX(0deg)",
+        opacity: 1,
+        backfaceVisibility: "hidden"
+      };
+      break;
+    case "flip-y":
+      initial = {
+        transform: "perspective(1000px) rotateY(-90deg)",
+        opacity: 0.2,
+        backfaceVisibility: "hidden"
+      };
+      animate = {
+        transform: "perspective(1000px) rotateY(0deg)",
+        opacity: 1,
+        backfaceVisibility: "hidden"
+      };
+      break;
+    // ==================== ZOOM (2) ====================
+    case "zoom-in":
+      initial = { opacity: 0, transform: `scale(${scaleFrom * 0.5})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+    case "zoom-out":
+      initial = { opacity: 0, transform: `scale(${2.5 - scaleFrom})` };
+      animate = { opacity: 1, transform: "scale(1)" };
+      break;
+  }
+  return {
+    initial,
+    animate,
+    duration,
+    delay,
+    easing,
+    origin
+  };
+}
+function useScrollAnimation(options = {}) {
+  const {
+    triggerOnScroll = true,
+    threshold = 0.1,
+    once = true,
+    rootMargin = "0px",
+    delay = 0
+  } = options;
+  const ref = react.useRef(null);
+  const [isInView, setIsInView] = react.useState(false);
+  const [hasAnimated, setHasAnimated] = react.useState(false);
+  const timeoutRef = react.useRef(null);
+  const hasMountedRef = react.useRef(false);
+  const reset = react.useCallback(() => {
+    setIsInView(false);
+    setHasAnimated(false);
+    hasMountedRef.current = false;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  react.useEffect(() => {
+    if (!triggerOnScroll) {
+      if (hasMountedRef.current) return;
+      hasMountedRef.current = true;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+              setIsInView(true);
+              setHasAnimated(true);
+            }, delay);
+          } else {
+            setIsInView(true);
+            setHasAnimated(true);
+          }
+        });
+      });
+      return;
+    }
+    if (once && hasAnimated) {
+      return;
+    }
+    const element = ref.current;
+    if (!element) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setIsInView(true);
+      setHasAnimated(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        const inView = entry.isIntersecting;
+        if (inView) {
+          if (delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+              setIsInView(true);
+              setHasAnimated(true);
+            }, delay);
+          } else {
+            setIsInView(true);
+            setHasAnimated(true);
+          }
+          if (once) {
+            observer.disconnect();
+          }
+        } else if (!once) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+          }
+          setIsInView(false);
+        }
+      },
+      {
+        threshold,
+        rootMargin
+      }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [triggerOnScroll, threshold, once, rootMargin, delay, hasAnimated]);
+  return {
+    ref,
+    isInView,
+    hasAnimated,
+    reset
+  };
+}
+function AnimatedWrapper({
+  animation,
+  children,
+  className,
+  style,
+  as: Component = "div"
+}) {
+  const hasAnimation = animation && (animation.mode === "preset" && animation.entrance && animation.entrance !== "none" || animation.mode === "custom");
+  if (!hasAnimation) {
+    if (className || style) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { className, style, children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  const { ref, isInView } = useScrollAnimation({
+    triggerOnScroll: animation.triggerOnScroll ?? true,
+    threshold: animation.triggerThreshold ?? 0.1,
+    once: animation.triggerOnce ?? true,
+    rootMargin: animation.triggerMargin
+  });
+  if (animation.mode === "preset") {
+    const { initial, animate, duration, delay, easing, origin } = getEntranceAnimationStyles(animation);
+    const animationStyles = isInView ? animate : initial;
+    const transitionProperties = [
+      `opacity ${duration}ms ${easing} ${delay}ms`,
+      `transform ${duration}ms ${easing} ${delay}ms`,
+      `filter ${duration}ms ${easing} ${delay}ms`
+    ].join(", ");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className,
+        style: {
+          ...style,
+          ...animationStyles,
+          transition: transitionProperties,
+          transformOrigin: origin
+        },
+        children
+      }
+    );
+  }
+  const customStyles = animationValueToCSS(animation);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className,
+      style: {
+        ...style,
+        ...customStyles,
+        // Apply opacity for visibility-based transitions
+        opacity: isInView ? 1 : 0
+      },
+      children
+    }
+  );
+}
+function AccordionItem({
+  item,
+  isOpen,
+  onToggle,
+  textColorCSS
+}) {
+  const textStyle = textColorCSS ? { color: textColorCSS } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border last:border-b-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        className: "flex w-full items-center justify-between py-4 px-4 text-left font-medium transition-all hover:bg-muted/50 text-foreground",
+        style: textStyle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            iconsReact.IconChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 shrink-0 transition-transform duration-200",
+                isOpen && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden transition-all duration-200",
+          isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "px-4 pb-4 text-muted-foreground",
+            style: textColorCSS ? { color: textColorCSS } : void 0,
+            children: item.content
+          }
+        )
+      }
+    )
+  ] });
+}
+function AccordionClient({
+  items,
+  allowMultiple,
+  textColor,
+  margin,
+  background,
+  dimensions,
+  transform,
+  animation,
+  customPadding
+}) {
+  const [openItems, setOpenItems] = react.useState(() => {
+    const initialOpen = /* @__PURE__ */ new Set();
+    items?.forEach((item, index) => {
+      if (item.defaultOpen) {
+        initialOpen.add(index);
+      }
+    });
+    return initialOpen;
+  });
+  const handleToggle = (index) => {
+    setOpenItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        if (!allowMultiple) {
+          newSet.clear();
+        }
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+  const textColorCSS = colorValueToCSS(textColor);
+  const dimensionsStyles = dimensionsValueToCSS(dimensions);
+  const accordionClasses = "rounded-lg border border-border overflow-hidden bg-card";
+  const backgroundStyles = backgroundValueToCSS(background);
+  const accordionStyle = backgroundStyles && Object.keys(backgroundStyles).length > 0 ? backgroundStyles : {};
+  const style = {
+    ...dimensionsStyles
+  };
+  const marginCSS = marginValueToCSS(margin);
+  if (marginCSS) {
+    style.margin = marginCSS;
+  }
+  const paddingCSS = paddingValueToCSS(customPadding);
+  if (paddingCSS) {
+    style.padding = paddingCSS;
+  }
+  const transformStyles = transformValueToCSS(transform);
+  if (transformStyles) {
+    Object.assign(style, transformStyles);
+  }
+  if (!items || items.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionItem,
+    {
+      item,
+      isOpen: openItems.has(index),
+      onToggle: () => handleToggle(index),
+      textColorCSS
+    },
+    index
+  )) }) }) });
+}
+
+exports.AccordionClient = AccordionClient;
+//# sourceMappingURL=AccordionClient.js.map
+//# sourceMappingURL=AccordionClient.js.map