@yamada-ui/react/dist/esm/components/loading/screen.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 { Center } from "../center/center.js";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/loading/screen.tsx
const variants = {
	animate: {
		opacity: 1,
		transition: {
			duration: .4,
			ease: [
				.4,
				0,
				.2,
				1
			]
		}
	},
	exit: {
		opacity: 0,
		transition: {
			duration: .4,
			ease: [
				.4,
				0,
				1,
				1
			]
		}
	},
	initial: { opacity: 0 }
};
const Screen = memo(({ duration, initial, loadingScheme, message, onFinish }) => {
	const Component = useLoadingComponent(loadingScheme);
	useTimeout(onFinish, duration);
	return /* @__PURE__ */ jsx(motion.div, {
		"data-loading": true,
		alignItems: "center",
		animate: "animate",
		bg: "bg",
		display: "flex",
		exit: "exit",
		h: "100dvh",
		initial,
		inset: 0,
		justifyContent: "center",
		p: "md",
		position: "fixed",
		variants,
		w: "100vw",
		zIndex: "beerus",
		children: /* @__PURE__ */ jsxs(Center, {
			flexDirection: "column",
			gap: "sm",
			maxW: "24rem",
			children: [/* @__PURE__ */ jsx(Component, { fontSize: "6xl" }), message ? isValidElement$1(message) ? message : /* @__PURE__ */ jsx(Text, {
				lineClamp: 3,
				children: message
			}) : null]
		})
	});
});
Screen.displayName = "Screen";

//#endregion
export { Screen };
//# sourceMappingURL=screen.js.map