@yamada-ui/transitions
Version:
Yamada UI transitions components
131 lines (130 loc) • 4.08 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/slide-fade.tsx
var slide_fade_exports = {};
__export(slide_fade_exports, {
SlideFade: () => SlideFade,
slideFadeProps: () => slideFadeProps
});
module.exports = __toCommonJS(slide_fade_exports);
var import_core = require("@yamada-ui/core");
var import_motion = require("@yamada-ui/motion");
var import_use_value = require("@yamada-ui/use-value");
var import_utils = require("@yamada-ui/utils");
var import_jsx_runtime = require("react/jsx-runtime");
var variants = {
enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({
opacity: 1,
transition: (0, import_motion.transitionEnter)(transition == null ? void 0 : transition.enter)(delay, duration),
transitionEnd: transitionEnd == null ? void 0 : transitionEnd.enter,
x: 0,
y: 0,
...enter
}),
exit: ({
delay,
duration,
exit,
offsetX,
offsetY,
reverse,
transition,
transitionEnd
} = {}) => ({
opacity: 0,
transition: (0, import_motion.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
...reverse ? { transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit, x: offsetX, y: offsetY } : { transitionEnd: { x: offsetX, y: offsetY, ...transitionEnd == null ? void 0 : transitionEnd.exit } },
...exit
}),
initial: ({
delay,
duration,
initial,
offsetX,
offsetY,
transition,
transitionEnd
}) => ({
opacity: 0,
transition: (0, import_motion.transitionExit)(transition == null ? void 0 : transition.exit)(delay, duration),
transitionEnd: transitionEnd == null ? void 0 : transitionEnd.exit,
x: offsetX,
y: offsetY,
...initial
})
};
var slideFadeProps = {
animate: "enter",
exit: "exit",
initial: "exit",
variants
};
var SlideFade = (0, import_motion.motionForwardRef)(
(props, ref) => {
const [style, mergedProps] = (0, import_core.useComponentStyle)("SlideFade", props);
const {
className,
delay,
duration,
isOpen,
offsetX: _offsetX,
offsetY: _offsetY,
open = isOpen,
reverse,
transition,
transitionEnd,
unmountOnExit,
...rest
} = (0, import_core.omitThemeProps)(mergedProps);
const animate = open || unmountOnExit ? "enter" : "exit";
const offsetX = (0, import_use_value.useValue)(_offsetX);
const offsetY = (0, import_use_value.useValue)(_offsetY);
const custom = {
delay,
duration,
offsetX,
offsetY,
reverse,
transition,
transitionEnd
};
const resolvedOpen = unmountOnExit ? open && unmountOnExit : true;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { custom, children: resolvedOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_motion.motion.div,
{
ref,
className: (0, import_utils.cx)("ui-slide-fade", className),
custom,
...slideFadeProps,
animate,
__css: style,
...rest
}
) : null });
}
);
SlideFade.displayName = "SlideFade";
SlideFade.__ui__ = "SlideFade";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
SlideFade,
slideFadeProps
});
//# sourceMappingURL=slide-fade.js.map