@yamada-ui/react/dist/cjs/components/loading/page.cjs

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

const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.cjs');
const require_factory = require('../motion/factory.cjs');
const require_hooks_use_timeout_index = require('../../hooks/use-timeout/index.cjs');
const require_text = require('../text/text.cjs');
const require_use_loading_component = require('./use-loading-component.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/loading/page.tsx
const variants = {
	overlay: {
		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 }
	},
	panel: {
		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 Page = (0, react.memo)(({ duration, initial, loadingScheme, message, onFinish }) => {
	const Component = require_use_loading_component.useLoadingComponent(loadingScheme);
	require_hooks_use_timeout_index.useTimeout(onFinish, duration);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.div, {
		"data-loading": true,
		alignItems: "center",
		animate: "animate",
		bg: "bg.overlay",
		display: "flex",
		exit: "exit",
		h: "100dvh",
		initial,
		inset: 0,
		justifyContent: "center",
		p: "md",
		position: "fixed",
		variants: variants.overlay,
		w: "100vw",
		zIndex: "beerus",
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.motion.div, {
			alignItems: "center",
			animate: "animate",
			bg: "bg.panel",
			boxShadow: "lg",
			display: "flex",
			exit: "exit",
			flexDirection: "column",
			gap: "sm",
			initial,
			justifyContent: "center",
			maxW: "24rem",
			p: "md",
			rounded: "l2",
			variants: variants.panel,
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { fontSize: "6xl" }), message ? require_children.isValidElement(message) ? message : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
				lineClamp: 3,
				children: message
			}) : null]
		})
	});
});
Page.displayName = "Page";

//#endregion
exports.Page = Page;
//# sourceMappingURL=page.cjs.map