@yamada-ui/react/dist/esm/components/slide-fade/slide-fade.js

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

"use client";


import { createComponent } from "../../core/components/create-component.js";
import { motion as motion$1 } from "../motion/factory.js";
import { createTransition } from "../motion/transition.js";
import { slideFadeStyle } from "./slide-fade.style.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { AnimatePresence } from "motion/react";

//#region src/components/slide-fade/slide-fade.tsx
const slideFadeVariants = {
	enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({
		opacity: 1,
		transition: createTransition.enter(transition?.enter)(delay, duration),
		transitionEnd: transitionEnd?.enter,
		x: 0,
		y: 0,
		...enter
	}),
	exit: ({ delay, duration, exit, offsetX, offsetY, reverse, transition, transitionEnd } = {}) => ({
		opacity: 0,
		transition: createTransition.exit(transition?.exit)(delay, duration),
		...reverse ? {
			transitionEnd: transitionEnd?.exit,
			x: offsetX,
			y: offsetY
		} : { transitionEnd: {
			x: offsetX,
			y: offsetY,
			...transitionEnd?.exit
		} },
		...exit
	}),
	initial: ({ delay, duration, initial, offsetX, offsetY, transition, transitionEnd }) => ({
		opacity: 0,
		transition: createTransition.exit(transition?.exit)(delay, duration),
		transitionEnd: transitionEnd?.exit,
		x: offsetX,
		y: offsetY,
		...initial
	})
};
const { PropsContext: SlideFadePropsContext, usePropsContext: useSlideFadePropsContext, withContext } = createComponent("slide-fade", slideFadeStyle);
/**
* `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position.
*
* @see https://yamada-ui.com/docs/components/slide-fade
*/
const SlideFade = withContext(({ delay, duration, offsetX = 0, offsetY = 8, open: openProp, reverse = true, transition, transitionEnd, unmountOnExit,...rest }) => {
	const animate = openProp || unmountOnExit ? "enter" : "exit";
	const open = unmountOnExit ? openProp && unmountOnExit : true;
	const custom = useMemo(() => ({
		delay,
		duration,
		offsetX,
		offsetY,
		reverse,
		transition,
		transitionEnd
	}), [
		delay,
		duration,
		offsetX,
		offsetY,
		reverse,
		transition,
		transitionEnd
	]);
	return /* @__PURE__ */ jsx(AnimatePresence, {
		custom,
		children: open ? /* @__PURE__ */ jsx(motion$1.div, {
			animate,
			custom,
			exit: "exit",
			initial: "exit",
			variants: slideFadeVariants,
			...rest
		}) : null
	});
})();

//#endregion
export { SlideFade, SlideFadePropsContext, slideFadeVariants, useSlideFadePropsContext };
//# sourceMappingURL=slide-fade.js.map