@yamada-ui/react/dist/cjs/components/fade-scale/fade-scale.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_factory = require('../motion/factory.cjs');
const require_transition = require('../motion/transition.cjs');
const require_fade_scale_style = require('./fade-scale.style.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);

//#region src/components/fade-scale/fade-scale.tsx
const fadeScaleVariants = {
	enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({
		opacity: 1,
		scale: 1,
		transition: require_transition.createTransition.enter(transition?.enter)(delay, duration),
		transitionEnd: transitionEnd?.enter,
		...enter
	}),
	exit: ({ delay, duration, exit, reverse, scale, transition, transitionEnd } = {}) => ({
		opacity: 0,
		transition: require_transition.createTransition.exit(transition?.exit)(delay, duration),
		...reverse ? {
			scale,
			transitionEnd: transitionEnd?.exit
		} : { transitionEnd: {
			scale,
			...transitionEnd?.exit
		} },
		...exit
	})
};
const { PropsContext: FadeScalePropsContext, usePropsContext: useFadeScalePropsContext, withContext } = require_create_component.createComponent("fade-scale", require_fade_scale_style.fadeScaleStyle);
/**
* `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element.
*
* @see https://yamada-ui.com/docs/components/fade-scale
*/
const FadeScale = withContext(({ delay, duration, open: openProp, reverse = true, scale = .95, transition, transitionEnd, unmountOnExit,...rest }) => {
	const animate = openProp || unmountOnExit ? "enter" : "exit";
	const open = unmountOnExit ? openProp && unmountOnExit : true;
	const custom = (0, react.useMemo)(() => ({
		delay,
		duration,
		reverse,
		scale,
		transition,
		transitionEnd
	}), [
		delay,
		duration,
		reverse,
		scale,
		transition,
		transitionEnd
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
		custom,
		children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.div, {
			animate,
			custom,
			exit: "exit",
			initial: "exit",
			variants: fadeScaleVariants,
			...rest
		}) : null
	});
})();

//#endregion
exports.FadeScale = FadeScale;
exports.fadeScaleVariants = fadeScaleVariants;
//# sourceMappingURL=fade-scale.cjs.map