@yamada-ui/react/dist/cjs/core/system/theme-provider.cjs

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_constant = require('../constant.cjs');
const require_environment_provider = require('./environment-provider.cjs');
const require_storage_manager = require('./storage-manager.cjs');
const require_system_provider = require('./system-provider.cjs');
const require_css = require('../css/css.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);
let __emotion_react = require("@emotion/react");
__emotion_react = require_rolldown_runtime.__toESM(__emotion_react);

//#region src/core/system/theme-provider.tsx
const getPreventTransition = (environment) => {
	const { getDocument, getWindow } = environment;
	const win = getWindow();
	const doc = getDocument();
	if (!win || !doc) return;
	const css$1 = doc.createElement("style");
	const node = doc.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`);
	css$1.appendChild(node);
	doc.head.appendChild(css$1);
	return () => {
		const forceReflow = () => win.getComputedStyle(doc.body);
		forceReflow();
		requestAnimationFrame(() => {
			requestAnimationFrame(() => {
				document.head.removeChild(css$1);
			});
		});
	};
};
const ThemeProvider = ({ children, config, cookie, storage = !!cookie ? "cookie" : "localStorage", storageKey = require_constant.THEME_SCHEME_STORAGE_KEY, theme = {} }) => {
	const { defaultThemeScheme = "base", disableTransitionOnChange } = config ?? {};
	const storageManager = (0, react.useMemo)(() => require_storage_manager.createStorageManager(storage, storageKey, defaultThemeScheme, cookie), [
		cookie,
		defaultThemeScheme,
		storage,
		storageKey
	]);
	const environment = require_environment_provider.useEnvironment();
	const [themeScheme, setThemeScheme] = (0, react.useState)(storageManager.get());
	const changeThemeScheme = (0, react.useCallback)((themeScheme$1) => {
		const { getDocument } = environment;
		const doc = getDocument();
		const cleanup = disableTransitionOnChange ? getPreventTransition(environment) : void 0;
		if (doc) doc.documentElement.dataset.theme = themeScheme$1;
		cleanup?.();
		setThemeScheme(themeScheme$1);
		storageManager.set(themeScheme$1);
	}, [
		disableTransitionOnChange,
		environment,
		storageManager
	]);
	(0, react.useEffect)(() => {
		changeThemeScheme(storageManager.get());
	}, [changeThemeScheme, storageManager]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__emotion_react.ThemeProvider, {
		theme: {
			changeThemeScheme,
			themeScheme,
			...theme
		},
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalStyles, {}), children]
	});
};
const GlobalStyles = () => {
	const system = require_system_provider.useSystem();
	const { theme } = useTheme();
	const { atRule, wrap } = system.layers;
	const resetStyle = (0, react.useMemo)(() => {
		const style = theme.styles?.resetStyle;
		if (!style || (0, require_utils_index.utils_exports.isEmptyObject)(style)) return void 0;
		return require_css.css(system, theme)(style);
	}, [system, theme]);
	const globalStyle = (0, react.useMemo)(() => {
		const style = theme.styles?.globalStyle;
		if (!style || (0, require_utils_index.utils_exports.isEmptyObject)(style)) return void 0;
		return require_css.css(system, theme)(style);
	}, [system, theme]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__emotion_react.Global, { styles: [
		atRule,
		wrap("tokens", (0, react.useMemo)(() => {
			return { ":host, :root, [data-mode]": system.cssVars };
		}, [system])),
		wrap("reset", resetStyle),
		wrap("global", globalStyle)
	] });
};
/**
* `useTheme` is a custom hook that returns a function for retrieving and switching themes.
*
* @see https://yamada-ui.com/docs/hooks/use-theme
*/
const useTheme = () => {
	const internalTheme = (0, react.use)(__emotion_react.ThemeContext);
	const theme = (0, react.useMemo)(() => {
		const { themeScheme } = internalTheme;
		if ((0, require_utils_index.utils_exports.isUndefined)(themeScheme) || themeScheme === "base") return internalTheme;
		const nestedTheme = "themeSchemes" in internalTheme && (0, require_utils_index.utils_exports.isObject)(internalTheme.themeSchemes) ? internalTheme.themeSchemes[themeScheme] : void 0;
		if (!nestedTheme) return internalTheme;
		return (0, require_utils_index.utils_exports.merge)(internalTheme, nestedTheme);
	}, [internalTheme]);
	return (0, react.useMemo)(() => {
		const { changeThemeScheme, themeScheme } = internalTheme;
		return {
			changeThemeScheme,
			internalTheme,
			theme,
			themeScheme
		};
	}, [theme, internalTheme]);
};

//#endregion
exports.GlobalStyles = GlobalStyles;
exports.ThemeProvider = ThemeProvider;
exports.getPreventTransition = getPreventTransition;
exports.useTheme = useTheme;
//# sourceMappingURL=theme-provider.cjs.map