@yamada-ui/react/dist/esm/components/slide/slide.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 { useValue } from "../../hooks/use-value/index.js";
import { slideStyle } from "./slide.style.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { AnimatePresence } from "motion/react";

//#region src/components/slide/slide.tsx
const getAnimationProps = (placement) => {
	switch (placement) {
		case "block-start": return {
			enter: {
				x: 0,
				y: 0
			},
			exit: {
				x: 0,
				y: "-100%"
			}
		};
		case "inline-end": return {
			enter: {
				x: 0,
				y: 0
			},
			exit: {
				x: "100%",
				y: 0
			}
		};
		case "block-end": return {
			enter: {
				x: 0,
				y: 0
			},
			exit: {
				x: 0,
				y: "100%"
			}
		};
		case "inline-start": return {
			enter: {
				x: 0,
				y: 0
			},
			exit: {
				x: "-100%",
				y: 0
			}
		};
		default: return {};
	}
};
const slideVariants = {
	enter: ({ delay, duration, enter, placement, transition, transitionEnd } = {}) => ({
		...getAnimationProps(placement).enter,
		transition: createTransition.enter(transition?.enter)(delay, duration),
		transitionEnd: transitionEnd?.enter,
		...enter
	}),
	exit: ({ delay, duration, exit, placement, transition, transitionEnd } = {}) => ({
		...getAnimationProps(placement).exit,
		transition: createTransition.exit(transition?.exit)(delay, duration),
		transitionEnd: transitionEnd?.exit,
		...exit
	})
};
const { PropsContext: SlidePropsContext, usePropsContext: useSlidePropsContext, withContext } = createComponent("slide", slideStyle);
/**
* `Slide` is a component that shows or hides an element from the corners of the page.
*
* @see https://yamada-ui.com/docs/components/slide
*/
const Slide = withContext(({ delay, duration = {
	enter: .4,
	exit: .3
}, open: openProp, placement: placementProp, transition, transitionEnd, unmountOnExit,...rest }) => {
	const animate = openProp || unmountOnExit ? "enter" : "exit";
	const open = unmountOnExit ? openProp && unmountOnExit : true;
	const placement = useValue(placementProp);
	const custom = useMemo(() => ({
		delay,
		duration,
		placement,
		transition,
		transitionEnd
	}), [
		delay,
		duration,
		placement,
		transition,
		transitionEnd
	]);
	return /* @__PURE__ */ jsx(AnimatePresence, {
		custom,
		children: open ? /* @__PURE__ */ jsx(motion$1.div, {
			animate,
			custom,
			exit: "exit",
			initial: "exit",
			variants: slideVariants,
			...rest
		}) : null
	});
}, { transferProps: ["placement"] })();

//#endregion
export { Slide, SlidePropsContext, slideVariants, useSlidePropsContext };
//# sourceMappingURL=slide.js.map