"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useLocalStorage } from "../useLocalStorage.js";
import { ColorSchemeProvider } from "./useColorScheme.js";
import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
/**
 * An optional implementation of the {@link ColorSchemeProvider} that supports
 * storing the value in local storage if the
 * {@link LocalStorageColorSchemeProviderProps.localStorageKey} is provided.
 *
 * @example
 * ```tsx
 * import {
 *   LocalStorageColorSchemeProvider,
 *   SegmentedButtonContainer,
 *   SegmentedButton,
 *   useColorScheme,
 * } from "@react-md/core";
 * import { createRoot } from "react-dom/client";
 *
 * function MyComponent(): ReactElement {
 *   const { colorScheme, colorSchemeMode, setColorSchemeMode } = useColorScheme();
 *   // colorScheme: "light" | "dark"
 *   // colorSchemeMode: "light" | "dark" | "system"
 *
 *   return (
 *     <>
 *       The current color scheme is {colorScheme}
 *       <SegmentedButtonContainer>
 *         <SegmentedButton
 *           selected={colorSchemeMode === "light"}
 *           onClick={() => {
 *             setColorSchemeMode("light")
 *           }}
 *         >
 *           Light
 *         </SegmentedButton>
 *         <SegmentedButton
 *           selected={colorSchemeMode === "dark"}
 *           onClick={() => {
 *             setColorSchemeMode("dark")
 *           }}
 *         >
 *           Dark
 *         </SegmentedButton>
 *         <SegmentedButton
 *           selected={colorSchemeMode === "system"}
 *           onClick={() => {
 *             setColorSchemeMode("system")
 *           }}
 *         >
 *           System
 *         </SegmentedButton>
 *       </SegmentedButtonContainer>
 *     </>
 *   )l
 * }
 *
 * const container = document.getElementById("root");
 * const root = createRoot(container);
 *
 * root.render(
 *   <LocalStorageColorSchemeProvider defaultColorSchemeMode="system">
 *     <MyComponent />
 *   </LocalStorageColorSchemeProvider>
 * );
 * ```
 *
 * @remarks \@since 6.0.0
 */ export function LocalStorageColorSchemeProvider(props) {
    const { localStorageKey = "", defaultColorSchemeMode = "light", disableMetaTag, children } = props;
    const { value: colorSchemeMode, setValue: setColorSchemeMode } = useLocalStorage({
        key: localStorageKey,
        defaultValue: defaultColorSchemeMode,
        deserializer: (item)=>item === "light" || item === "dark" || item === "system" ? item : defaultColorSchemeMode
    });
    const value = useColorSchemeProvider({
        disableMetaTag,
        colorSchemeMode,
        setColorSchemeMode
    });
    return /*#__PURE__*/ _jsx(ColorSchemeProvider, {
        value: value,
        children: children
    });
}

//# sourceMappingURL=LocalStorageColorSchemeProvider.js.map