erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/animated-content-CttSmLWV.cjs

@@ -0,0 +1,298 @@
+require("./chunk-B_GkZjkl.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/effects/animated-content/AnimatedContent.tsx
+var easingMap = {
+	linear: [
+		0,
+		0,
+		1,
+		1
+	],
+	easeIn: [
+		.4,
+		0,
+		1,
+		1
+	],
+	easeOut: [
+		0,
+		0,
+		.2,
+		1
+	],
+	easeInOut: [
+		.4,
+		0,
+		.2,
+		1
+	],
+	circIn: [
+		.55,
+		0,
+		1,
+		.45
+	],
+	circOut: [
+		0,
+		.55,
+		.45,
+		1
+	],
+	circInOut: [
+		.85,
+		0,
+		.15,
+		1
+	],
+	backIn: [
+		.36,
+		0,
+		.66,
+		-.56
+	],
+	backOut: [
+		.34,
+		1.56,
+		.64,
+		1
+	],
+	backInOut: [
+		.68,
+		-.6,
+		.32,
+		1.6
+	],
+	anticipate: "anticipate",
+	bounce: "easeOut",
+	elastic: "easeOut"
+};
+var getSpringConfig = (ease) => {
+	switch (ease) {
+		case "bounce": return {
+			type: "spring",
+			damping: 8,
+			stiffness: 200,
+			bounce: .5
+		};
+		case "elastic": return {
+			type: "spring",
+			damping: 10,
+			stiffness: 100
+		};
+		default: return null;
+	}
+};
+var getPresetAnimation = (preset, distance, initialOpacity, initialScale, reverse) => {
+	const dir = reverse ? -1 : 1;
+	return {
+		fade: {
+			initial: { opacity: initialOpacity },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 }
+		},
+		scale: {
+			initial: {
+				opacity: initialOpacity,
+				scale: initialScale
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: initialScale
+			}
+		},
+		slideUp: {
+			initial: {
+				opacity: initialOpacity,
+				y: distance * dir
+			},
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			exit: {
+				opacity: 0,
+				y: distance / 2 * dir
+			}
+		},
+		slideDown: {
+			initial: {
+				opacity: initialOpacity,
+				y: -distance * dir
+			},
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			exit: {
+				opacity: 0,
+				y: -distance / 2 * dir
+			}
+		},
+		slideLeft: {
+			initial: {
+				opacity: initialOpacity,
+				x: distance * dir
+			},
+			animate: {
+				opacity: 1,
+				x: 0
+			},
+			exit: {
+				opacity: 0,
+				x: distance / 2 * dir
+			}
+		},
+		slideRight: {
+			initial: {
+				opacity: initialOpacity,
+				x: -distance * dir
+			},
+			animate: {
+				opacity: 1,
+				x: 0
+			},
+			exit: {
+				opacity: 0,
+				x: -distance / 2 * dir
+			}
+		},
+		elastic: {
+			initial: {
+				opacity: initialOpacity,
+				scale: initialScale,
+				y: distance / 2
+			},
+			animate: {
+				opacity: 1,
+				scale: 1,
+				y: 0
+			},
+			exit: {
+				opacity: 0,
+				scale: .8,
+				y: distance / 4
+			}
+		},
+		bounce: {
+			initial: {
+				opacity: initialOpacity,
+				scale: initialScale,
+				y: -distance
+			},
+			animate: {
+				opacity: 1,
+				scale: 1,
+				y: 0
+			},
+			exit: {
+				opacity: 0,
+				scale: .5,
+				y: -distance / 2
+			}
+		},
+		flip: {
+			initial: {
+				opacity: initialOpacity,
+				rotateX: -90 * dir,
+				scale: .9
+			},
+			animate: {
+				opacity: 1,
+				rotateX: 0,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				rotateX: 90 * dir,
+				scale: .9
+			}
+		},
+		zoom: {
+			initial: {
+				opacity: initialOpacity,
+				scale: 0,
+				rotate: -10 * dir
+			},
+			animate: {
+				opacity: 1,
+				scale: 1,
+				rotate: 0
+			},
+			exit: {
+				opacity: 0,
+				scale: .5,
+				rotate: 5 * dir
+			}
+		},
+		custom: {
+			initial: { opacity: initialOpacity },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 }
+		}
+	}[preset];
+};
+var AnimatedContent = ({ children, preset = "fade", direction = "vertical", ease = "easeOut", exitEase, reverse = false, animateOpacity = true, distance = 50, duration = .5, delay = 0, initialOpacity = 0, initialScale = .9, threshold = .1, disappearAfter = 0, disappearDuration = .3, triggerOnView = false, triggerOnce = true, className = "", as = "div" }) => {
+	const ref = (0, react.useRef)(null);
+	const isInView = (0, framer_motion.useInView)(ref, {
+		once: triggerOnce,
+		amount: threshold
+	});
+	const [isVisible, setIsVisible] = (0, react.useState)(!triggerOnView);
+	const [hasDisappeared, setHasDisappeared] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (triggerOnView && isInView && !isVisible) setIsVisible(true);
+	}, [
+		isInView,
+		triggerOnView,
+		isVisible
+	]);
+	(0, react.useEffect)(() => {
+		if (disappearAfter > 0 && isVisible && !hasDisappeared) {
+			const timer = setTimeout(() => {
+				setHasDisappeared(true);
+			}, disappearAfter * 1e3);
+			return () => clearTimeout(timer);
+		}
+	}, [
+		disappearAfter,
+		isVisible,
+		hasDisappeared
+	]);
+	const animation = getPresetAnimation(preset, distance, animateOpacity ? initialOpacity : 1, initialScale, reverse);
+	const springConfig = getSpringConfig(ease);
+	const easingValue = easingMap[ease];
+	const transition = springConfig || {
+		duration,
+		delay,
+		ease: typeof easingValue === "string" ? easingValue : easingValue
+	};
+	const exitTransition = exitEase ? {
+		duration: disappearDuration,
+		ease: easingMap[exitEase]
+	} : { duration: disappearDuration };
+	const currentState = hasDisappeared ? "exit" : (triggerOnView ? isVisible : true) ? "animate" : "initial";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion[as] || framer_motion.motion.div, {
+		ref,
+		className,
+		initial: animation.initial,
+		animate: currentState === "animate" ? animation.animate : currentState === "exit" ? animation.exit : animation.initial,
+		transition: currentState === "exit" ? exitTransition : transition,
+		style: { perspective: preset === "flip" ? 1e3 : void 0 },
+		children
+	});
+};
+//#endregion
+Object.defineProperty(exports, "AnimatedContent", {
+	enumerable: true,
+	get: function() {
+		return AnimatedContent;
+	}
+});
+
+//# sourceMappingURL=animated-content-CttSmLWV.cjs.map

package/dist/chunks/animated-content-CttSmLWV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-content-CttSmLWV.cjs","names":[],"sources":["../../src/components/effects/animated-content/AnimatedContent.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { motion, useInView, type TargetAndTransition } from \"framer-motion\";\nimport type {\n  AnimatedContentProps,\n  AnimationPreset,\n  AnimationEase,\n} from \"./types\";\n\n// Easing function mappings\nconst easingMap: Record<AnimationEase, number[] | string> = {\n  linear: [0, 0, 1, 1],\n  easeIn: [0.4, 0, 1, 1],\n  easeOut: [0, 0, 0.2, 1],\n  easeInOut: [0.4, 0, 0.2, 1],\n  circIn: [0.55, 0, 1, 0.45],\n  circOut: [0, 0.55, 0.45, 1],\n  circInOut: [0.85, 0, 0.15, 1],\n  backIn: [0.36, 0, 0.66, -0.56],\n  backOut: [0.34, 1.56, 0.64, 1],\n  backInOut: [0.68, -0.6, 0.32, 1.6],\n  anticipate: \"anticipate\",\n  bounce: \"easeOut\",\n  elastic: \"easeOut\",\n};\n\n// Get spring config for bouncy/elastic animations\nconst getSpringConfig = (ease: AnimationEase) => {\n  switch (ease) {\n    case \"bounce\":\n      return {\n        type: \"spring\" as const,\n        damping: 8,\n        stiffness: 200,\n        bounce: 0.5,\n      };\n    case \"elastic\":\n      return { type: \"spring\" as const, damping: 10, stiffness: 100 };\n    default:\n      return null;\n  }\n};\n\n// Preset animation configurations\nconst getPresetAnimation = (\n  preset: AnimationPreset,\n  distance: number,\n  initialOpacity: number,\n  initialScale: number,\n  reverse: boolean,\n): {\n  initial: TargetAndTransition;\n  animate: TargetAndTransition;\n  exit: TargetAndTransition;\n} => {\n  const dir = reverse ? -1 : 1;\n\n  const presets: Record<\n    AnimationPreset,\n    {\n      initial: TargetAndTransition;\n      animate: TargetAndTransition;\n      exit: TargetAndTransition;\n    }\n  > = {\n    fade: {\n      initial: { opacity: initialOpacity },\n      animate: { opacity: 1 },\n      exit: { opacity: 0 },\n    },\n    scale: {\n      initial: { opacity: initialOpacity, scale: initialScale },\n      animate: { opacity: 1, scale: 1 },\n      exit: { opacity: 0, scale: initialScale },\n    },\n    slideUp: {\n      initial: { opacity: initialOpacity, y: distance * dir },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: (distance / 2) * dir },\n    },\n    slideDown: {\n      initial: { opacity: initialOpacity, y: -distance * dir },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: (-distance / 2) * dir },\n    },\n    slideLeft: {\n      initial: { opacity: initialOpacity, x: distance * dir },\n      animate: { opacity: 1, x: 0 },\n      exit: { opacity: 0, x: (distance / 2) * dir },\n    },\n    slideRight: {\n      initial: { opacity: initialOpacity, x: -distance * dir },\n      animate: { opacity: 1, x: 0 },\n      exit: { opacity: 0, x: (-distance / 2) * dir },\n    },\n    elastic: {\n      initial: {\n        opacity: initialOpacity,\n        scale: initialScale,\n        y: distance / 2,\n      },\n      animate: { opacity: 1, scale: 1, y: 0 },\n      exit: { opacity: 0, scale: 0.8, y: distance / 4 },\n    },\n    bounce: {\n      initial: { opacity: initialOpacity, scale: initialScale, y: -distance },\n      animate: { opacity: 1, scale: 1, y: 0 },\n      exit: { opacity: 0, scale: 0.5, y: -distance / 2 },\n    },\n    flip: {\n      initial: { opacity: initialOpacity, rotateX: -90 * dir, scale: 0.9 },\n      animate: { opacity: 1, rotateX: 0, scale: 1 },\n      exit: { opacity: 0, rotateX: 90 * dir, scale: 0.9 },\n    },\n    zoom: {\n      initial: { opacity: initialOpacity, scale: 0, rotate: -10 * dir },\n      animate: { opacity: 1, scale: 1, rotate: 0 },\n      exit: { opacity: 0, scale: 0.5, rotate: 5 * dir },\n    },\n    custom: {\n      initial: { opacity: initialOpacity },\n      animate: { opacity: 1 },\n      exit: { opacity: 0 },\n    },\n  };\n\n  return presets[preset];\n};\n\nexport const AnimatedContent = ({\n  children,\n  preset = \"fade\",\n  direction = \"vertical\",\n  ease = \"easeOut\",\n  exitEase,\n  reverse = false,\n  animateOpacity = true,\n  distance = 50,\n  duration = 0.5,\n  delay = 0,\n  initialOpacity = 0,\n  initialScale = 0.9,\n  threshold = 0.1,\n  disappearAfter = 0,\n  disappearDuration = 0.3,\n  triggerOnView = false,\n  triggerOnce = true,\n  className = \"\",\n  as = \"div\",\n}: AnimatedContentProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const isInView = useInView(ref, {\n    once: triggerOnce,\n    amount: threshold,\n  });\n  const [isVisible, setIsVisible] = useState(!triggerOnView);\n  const [hasDisappeared, setHasDisappeared] = useState(false);\n\n  // Handle view-triggered animation\n  useEffect(() => {\n    if (triggerOnView && isInView && !isVisible) {\n      setIsVisible(true);\n    }\n  }, [isInView, triggerOnView, isVisible]);\n\n  // Handle disappear after timeout\n  useEffect(() => {\n    if (disappearAfter > 0 && isVisible && !hasDisappeared) {\n      const timer = setTimeout(() => {\n        setHasDisappeared(true);\n      }, disappearAfter * 1000);\n      return () => clearTimeout(timer);\n    }\n  }, [disappearAfter, isVisible, hasDisappeared]);\n\n  // Get animation config\n  const opacity = animateOpacity ? initialOpacity : 1;\n  const animation = getPresetAnimation(\n    preset,\n    distance,\n    opacity,\n    initialScale,\n    reverse,\n  );\n\n  // Get transition config\n  const springConfig = getSpringConfig(ease);\n  const easingValue = easingMap[ease];\n\n  const transition = springConfig || {\n    duration,\n    delay,\n    ease: (typeof easingValue === \"string\" ? easingValue : easingValue) as any,\n  };\n\n  const exitTransition = exitEase\n    ? { duration: disappearDuration, ease: easingMap[exitEase] }\n    : { duration: disappearDuration };\n\n  // Determine current animation state\n  const shouldAnimate = triggerOnView ? isVisible : true;\n  const currentState = hasDisappeared\n    ? \"exit\"\n    : shouldAnimate\n      ? \"animate\"\n      : \"initial\";\n\n  const MotionComponent = (motion as any)[as] || motion.div;\n\n  return (\n    <MotionComponent\n      ref={ref as any}\n      className={className}\n      initial={animation.initial}\n      animate={\n        currentState === \"animate\"\n          ? animation.animate\n          : currentState === \"exit\"\n            ? animation.exit\n            : animation.initial\n      }\n      transition={\n        (currentState === \"exit\" ? exitTransition : transition) as any\n      }\n      style={{ perspective: preset === \"flip\" ? 1000 : undefined }}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n"],"mappings":"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"}