@delmaredigital/payload-puck 0.1.3 → 0.3.0

package/dist/AnimatedWrapper.d.mts

@@ -1,30 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, CSSProperties, ElementType } from 'react';
-import { A as AnimationValue } from './shared-DeNKN95N.mjs';
-import '@measured/puck';
-
-interface AnimatedWrapperProps {
-    /** Animation configuration from the component */
-    animation: AnimationValue | null | undefined;
-    /** Child content to animate */
-    children: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-    /** Inline styles */
-    style?: CSSProperties;
-    /** HTML element to render as (default: 'div') */
-    as?: ElementType;
-}
-/**
- * Wraps children with scroll-triggered animation support.
- *
- * For preset animations: Applies initial/animate inline styles
- * when element enters viewport.
- *
- * For custom animations: Applies CSS transition properties.
- *
- * If no animation is set, renders children without a wrapper div.
- */
-declare function AnimatedWrapper({ animation, children, className, style, as: Component, }: AnimatedWrapperProps): react_jsx_runtime.JSX.Element;
-
-export { AnimatedWrapper, type AnimatedWrapperProps };

package/dist/AnimatedWrapper.d.ts

@@ -1,30 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, CSSProperties, ElementType } from 'react';
-import { A as AnimationValue } from './shared-DeNKN95N.js';
-import '@measured/puck';
-
-interface AnimatedWrapperProps {
-    /** Animation configuration from the component */
-    animation: AnimationValue | null | undefined;
-    /** Child content to animate */
-    children: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-    /** Inline styles */
-    style?: CSSProperties;
-    /** HTML element to render as (default: 'div') */
-    as?: ElementType;
-}
-/**
- * Wraps children with scroll-triggered animation support.
- *
- * For preset animations: Applies initial/animate inline styles
- * when element enters viewport.
- *
- * For custom animations: Applies CSS transition properties.
- *
- * If no animation is set, renders children without a wrapper div.
- */
-declare function AnimatedWrapper({ animation, children, className, style, as: Component, }: AnimatedWrapperProps): react_jsx_runtime.JSX.Element;
-
-export { AnimatedWrapper, type AnimatedWrapperProps };

package/dist/AnimatedWrapper.js

@@ -1,379 +0,0 @@
-"use client";
-'use strict';
-
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-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
-  };
-}
-
-// src/fields/shared.ts
-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 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
-    }
-  );
-}
-
-exports.AnimatedWrapper = AnimatedWrapper;
-//# sourceMappingURL=AnimatedWrapper.js.map
-//# sourceMappingURL=AnimatedWrapper.js.map