@yamada-ui/react/dist/esm/components/loading/background.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { isValidElement as isValidElement$1 } from "../../utils/children.js";
import { motion } from "../motion/factory.js";
import { useTimeout } from "../../hooks/use-timeout/index.js";
import { Text } from "../text/text.js";
import { useLoadingComponent } from "./use-loading-component.js";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/loading/background.tsx
const variants = {
	animate: {
		opacity: 1,
		scale: 1,
		transition: {
			duration: .4,
			ease: [
				.4,
				0,
				.2,
				1
			]
		}
	},
	exit: {
		opacity: 0,
		scale: .95,
		transition: {
			duration: .4,
			ease: [
				.4,
				0,
				1,
				1
			]
		}
	},
	initial: {
		opacity: 0,
		scale: .95
	}
};
const Background = memo(({ duration, initial, loadingScheme, message, onFinish }) => {
	const Component = useLoadingComponent(loadingScheme);
	useTimeout(onFinish, duration);
	return /* @__PURE__ */ jsxs(motion.div, {
		"data-loading": true,
		alignItems: "center",
		animate: "animate",
		bg: "bg.panel",
		bottom: "md",
		boxShadow: "lg",
		display: "flex",
		exit: "exit",
		gap: "sm",
		initial,
		justifyContent: "center",
		maxW: "20rem",
		p: "sm",
		position: "fixed",
		right: "md",
		rounded: "l2",
		variants,
		zIndex: "beerus",
		children: [/* @__PURE__ */ jsx(Component, { fontSize: "xl" }), message ? isValidElement$1(message) ? message : /* @__PURE__ */ jsx(Text, {
			fontSize: "sm",
			lineClamp: 1,
			children: message
		}) : null]
	});
});
Background.displayName = "Background";

//#endregion
export { Background };
//# sourceMappingURL=background.js.map