"use client";
import { createContext, useCallback, useContext, useEffect, useState } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/components/ThemeProvider/theme-provider.tsx
var ThemeContext = createContext(null);
/**
* Get the initial theme from localStorage or return default
* Returns defaultTheme during SSR (no localStorage available)
*/
function getInitialTheme(storageKey, defaultTheme) {
	if (typeof window === "undefined") return defaultTheme;
	const stored = localStorage.getItem(storageKey);
	if (stored === "light" || stored === "dark") return stored;
	return defaultTheme;
}
/**
* Update the DOM to reflect the current theme
*/
function updateDOM(theme) {
	const root = document.documentElement;
	root.classList.remove("light", "dark");
	root.classList.add(theme);
}
/**
* ThemeProvider component
*
* Provides theme context to the application with support for:
* - Persistent theme storage via localStorage
* - DOM class management for CSS-based theming
* - Cross-tab synchronization via storage events
*
* @llms Theme context provider with localStorage persistence, cross-tab sync, light/dark modes
* @example
* ```tsx
* <ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
*   <App />
* </ThemeProvider>
* ```
*/
function ThemeProvider({ children, defaultTheme = "light", storageKey = "theme" }) {
	const [theme, setThemeState] = useState(() => getInitialTheme(storageKey, defaultTheme));
	const setTheme = useCallback((newTheme) => {
		setThemeState(newTheme);
		localStorage.setItem(storageKey, newTheme);
		updateDOM(newTheme);
	}, [storageKey]);
	const toggleTheme = useCallback(() => {
		setTheme(theme === "light" ? "dark" : "light");
	}, [theme, setTheme]);
	useEffect(() => {
		updateDOM(theme);
	}, [theme]);
	useEffect(() => {
		const handleStorage = (event) => {
			if (event.key === storageKey && event.newValue) {
				const newTheme = event.newValue;
				if (newTheme === "light" || newTheme === "dark") {
					setThemeState(newTheme);
					updateDOM(newTheme);
				}
			}
		};
		window.addEventListener("storage", handleStorage);
		return () => window.removeEventListener("storage", handleStorage);
	}, [storageKey]);
	const value = {
		theme,
		resolvedTheme: theme,
		setTheme,
		toggleTheme
	};
	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
		value,
		children
	});
}
/**
* Hook to access the theme context
*
* @throws Error if used outside of ThemeProvider
*
* @example
* ```tsx
* function MyComponent() {
*   const { theme, setTheme, toggleTheme } = useTheme();
*
*   return (
*     <button onClick={toggleTheme}>
*       Current theme: {theme}
*     </button>
*   );
* }
* ```
*/
function useTheme() {
	const context = useContext(ThemeContext);
	if (context === null) throw new Error("useTheme must be used within a ThemeProvider");
	return context;
}
/**
* Hook to optionally access the theme context without throwing
*
* Returns null if used outside of ThemeProvider, making it safe for
* components that support both controlled and uncontrolled modes.
*
* @example
* ```tsx
* function MyComponent({ value, onValueChange }) {
*   const themeContext = useThemeOptional();
*   const isControlled = value !== undefined;
*
*   // Use controlled value if provided, otherwise context
*   const theme = isControlled ? value : themeContext?.theme;
* }
* ```
*/
function useThemeOptional() {
	return useContext(ThemeContext);
}
//#endregion
export { ThemeProvider, useTheme, useThemeOptional };

//# sourceMappingURL=index35.js.map