@primer/react/dist/ThemeProvider.js

An implementation of GitHub's Primer Design System using React

import theme from "./theme.js";
import { useSyncedState } from "./hooks/useSyncedState.js";
import { ThemeContext } from "./ThemeContext.js";
import { useTheme } from "./useTheme.js";
import { c } from "react-compiler-runtime";
import { jsx } from "react/jsx-runtime";
import React from "react";
import deepmerge from "deepmerge";
const defaultDayScheme = "light";
const defaultNightScheme = "dark";
const ThemeProvider = (t0) => {
	var _ref, _props$colorMode, _ref2, _props$dayScheme, _ref3, _props$nightScheme;
	const $ = c(34);
	let children;
	let props;
	if ($[0] !== t0) {
		({children, ...props} = t0);
		$[0] = t0;
		$[1] = children;
		$[2] = props;
	} else {
		children = $[1];
		props = $[2];
	}
	const { theme: fallbackTheme, colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, nightScheme: fallbackNightScheme } = useTheme();
	const theme$1 = fallbackTheme !== null && fallbackTheme !== void 0 ? fallbackTheme : theme;
	const [colorMode, setColorMode] = useSyncedState((_ref = (_props$colorMode = props.colorMode) !== null && _props$colorMode !== void 0 ? _props$colorMode : fallbackColorMode) !== null && _ref !== void 0 ? _ref : "day");
	const [dayScheme, setDayScheme] = useSyncedState((_ref2 = (_props$dayScheme = props.dayScheme) !== null && _props$dayScheme !== void 0 ? _props$dayScheme : fallbackDayScheme) !== null && _ref2 !== void 0 ? _ref2 : defaultDayScheme);
	const [nightScheme, setNightScheme] = useSyncedState((_ref3 = (_props$nightScheme = props.nightScheme) !== null && _props$nightScheme !== void 0 ? _props$nightScheme : fallbackNightScheme) !== null && _ref3 !== void 0 ? _ref3 : defaultNightScheme);
	const systemColorMode = useSystemColorMode();
	let resolvedColorMode;
	let t1;
	if ($[3] !== colorMode || $[4] !== dayScheme || $[5] !== nightScheme || $[6] !== systemColorMode) {
		resolvedColorMode = resolveColorMode(colorMode, systemColorMode);
		t1 = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
		$[3] = colorMode;
		$[4] = dayScheme;
		$[5] = nightScheme;
		$[6] = systemColorMode;
		$[7] = resolvedColorMode;
		$[8] = t1;
	} else {
		resolvedColorMode = $[7];
		t1 = $[8];
	}
	const colorScheme = t1;
	let t2;
	if ($[9] !== colorScheme || $[10] !== theme$1) {
		t2 = applyColorScheme(theme$1, colorScheme);
		$[9] = colorScheme;
		$[10] = theme$1;
		$[11] = t2;
	} else t2 = $[11];
	const { resolvedTheme, resolvedColorScheme } = t2;
	let t3;
	if ($[12] !== colorMode || $[13] !== colorScheme || $[14] !== dayScheme || $[15] !== nightScheme || $[16] !== resolvedColorMode || $[17] !== resolvedColorScheme || $[18] !== resolvedTheme || $[19] !== setColorMode || $[20] !== setDayScheme || $[21] !== setNightScheme) {
		t3 = {
			theme: resolvedTheme,
			colorScheme,
			colorMode,
			resolvedColorMode,
			resolvedColorScheme,
			dayScheme,
			nightScheme,
			setColorMode,
			setDayScheme,
			setNightScheme
		};
		$[12] = colorMode;
		$[13] = colorScheme;
		$[14] = dayScheme;
		$[15] = nightScheme;
		$[16] = resolvedColorMode;
		$[17] = resolvedColorScheme;
		$[18] = resolvedTheme;
		$[19] = setColorMode;
		$[20] = setDayScheme;
		$[21] = setNightScheme;
		$[22] = t3;
	} else t3 = $[22];
	const contextValue = t3;
	if (props.contextOnly) {
		let t4;
		if ($[23] !== children || $[24] !== contextValue) {
			t4 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
				value: contextValue,
				children
			});
			$[23] = children;
			$[24] = contextValue;
			$[25] = t4;
		} else t4 = $[25];
		return t4;
	}
	const t4 = colorMode === "auto" ? "auto" : colorScheme.includes("dark") ? "dark" : "light";
	let t5;
	if ($[26] !== children || $[27] !== dayScheme || $[28] !== nightScheme || $[29] !== t4) {
		t5 = /*#__PURE__*/ jsx("div", {
			"data-color-mode": t4,
			"data-light-theme": dayScheme,
			"data-dark-theme": nightScheme,
			children
		});
		$[26] = children;
		$[27] = dayScheme;
		$[28] = nightScheme;
		$[29] = t4;
		$[30] = t5;
	} else t5 = $[30];
	let t6;
	if ($[31] !== contextValue || $[32] !== t5) {
		t6 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
			value: contextValue,
			children: t5
		});
		$[31] = contextValue;
		$[32] = t5;
		$[33] = t6;
	} else t6 = $[33];
	return t6;
};
function subscribeToSystemColorMode(callback) {
	var _window, _window$matchMedia;
	const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
	media === null || media === void 0 || media.addEventListener("change", callback);
	return () => media === null || media === void 0 ? void 0 : media.removeEventListener("change", callback);
}
function useSystemColorMode() {
	return React.useSyncExternalStore(subscribeToSystemColorMode, getSystemColorMode, _temp);
}
function _temp() {
	return "day";
}
function getSystemColorMode() {
	var _window2, _window2$matchMedia, _window2$matchMedia$c;
	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia$c = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia$c !== void 0 && _window2$matchMedia$c.matches ? "night" : "day";
}
function resolveColorMode(colorMode, systemColorMode) {
	switch (colorMode) {
		case "auto": return systemColorMode;
		default: return colorMode;
	}
}
function chooseColorScheme(colorMode, dayScheme, nightScheme) {
	switch (colorMode) {
		case "day":
		case "light": return dayScheme;
		case "dark":
		case "night": return nightScheme;
	}
}
function applyColorScheme(theme, colorScheme) {
	if (!theme.colorSchemes) return {
		resolvedTheme: theme,
		resolvedColorScheme: void 0
	};
	if (!theme.colorSchemes[colorScheme]) {
		console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
		const defaultColorScheme = Object.keys(theme.colorSchemes)[0];
		return {
			resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
			resolvedColorScheme: defaultColorScheme
		};
	}
	return {
		resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
		resolvedColorScheme: colorScheme
	};
}
//#endregion
export { ThemeProvider, ThemeProvider as default };