UNPKG

@yamada-ui/transitions

Version:

Yamada UI transitions components

90 lines (88 loc) 2.24 kB
"use client" // src/scale-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, scale: 1, transition: transitionEnter(transition == null ? void 0 : transition.enter)(delay, duration), transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter, ...enter }), exit: ({ delay, duration, exit, reverse, scale, transition, transitionEnd } = {}) => ({ opacity: 0, transition: transitionExit(transition == null ? void 0 : transition.exit)(delay, duration), ...reverse ? { scale, transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit } : { transitionEnd: { scale, ...transitionEnd == null ? void 0 : transitionEnd.exit } }, ...exit }) }; var scaleFadeProps = { animate: "enter", exit: "exit", initial: "exit", variants }; var ScaleFade = motionForwardRef( (props, ref) => { const [style, mergedProps] = useComponentStyle("ScaleFade", props); const { className, delay, duration, isOpen, open = isOpen, reverse, scale, transition, transitionEnd, unmountOnExit, ...rest } = omitThemeProps(mergedProps); const animate = open || unmountOnExit ? "enter" : "exit"; const custom = { delay, duration, reverse, scale, transition, transitionEnd }; const resolvedOpen = unmountOnExit ? open && unmountOnExit : true; return /* @__PURE__ */ jsx(AnimatePresence, { custom, children: resolvedOpen ? /* @__PURE__ */ jsx( motion.div, { ref, className: cx("ui-scale-fade", className), custom, ...scaleFadeProps, animate, __css: style, ...rest } ) : null }); } ); ScaleFade.displayName = "ScaleFade"; ScaleFade.__ui__ = "ScaleFade"; export { scaleFadeProps, ScaleFade }; //# sourceMappingURL=chunk-IGZM27HS.mjs.map