UNPKG

@yamada-ui/transitions

Version:

Yamada UI transitions components

70 lines (68 loc) 1.86 kB
"use client" // src/fade.tsx import { omitThemeProps, useComponentStyle } from "@yamada-ui/core"; import { AnimatePresence, motion, motionForwardRef, transitionEnter, transitionExit } from "@yamada-ui/motion"; import { cx } from "@yamada-ui/utils"; import { jsx } from "react/jsx-runtime"; var variants = { enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({ opacity: 1, transition: transitionEnter(transition == null ? void 0 : transition.enter)(delay, duration), transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter, ...enter }), exit: ({ delay, duration, exit, transition, transitionEnd } = {}) => ({ opacity: 0, transition: transitionExit(transition == null ? void 0 : transition.exit)(delay, duration), transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit, ...exit }) }; var fadeProps = { animate: "enter", exit: "exit", initial: "exit", variants }; var Fade = motionForwardRef((props, ref) => { const [style, mergedProps] = useComponentStyle("Fade", props); const { className, delay, duration, isOpen, open = isOpen, transition, transitionEnd, unmountOnExit, ...rest } = omitThemeProps(mergedProps); const animate = open || unmountOnExit ? "enter" : "exit"; const custom = { delay, duration, transition, transitionEnd }; const resolvedOpen = unmountOnExit ? open && unmountOnExit : true; return /* @__PURE__ */ jsx(AnimatePresence, { custom, children: resolvedOpen ? /* @__PURE__ */ jsx( motion.div, { ref, className: cx("ui-fade", className), custom, ...fadeProps, animate, __css: style, ...rest } ) : null }); }); Fade.displayName = "Fade"; Fade.__ui__ = "Fade"; export { fadeProps, Fade }; //# sourceMappingURL=chunk-OO53BM43.mjs.map