@yamada-ui/transitions
Version:
Yamada UI transitions components
70 lines (68 loc) • 1.86 kB
JavaScript
"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