"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useStorage } from "../storage/useStorage.js";
import { isColorScheme } from "./isColorScheme.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 { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
 * import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
 * import { LocalStorageColorSchemeProvider } from "@react-md/core/theme/LocalStorageColorSchemeProvider";
 * import { useColorScheme } from "@react-md/core/theme/useColorScheme";
 * import { createRoot } from "react-dom/client";
 *
 * function MyComponent(): ReactElement {
 *   const { currentColor, colorScheme, setColorScheme } = useColorScheme();
 *   // currentColor: "light" | "dark"
 *   // colorScheme: "light" | "dark" | "system"
 *
 *   return (
 *     <>
 *       The current color scheme is {currentColor}
 *       <SegmentedButtonContainer>
 *         <SegmentedButton
 *           selected={colorScheme === "light"}
 *           onClick={() => {
 *             setColorScheme("light")
 *           }}
 *         >
 *           Light
 *         </SegmentedButton>
 *         <SegmentedButton
 *           selected={colorScheme === "dark"}
 *           onClick={() => {
 *             setColorScheme("dark")
 *           }}
 *         >
 *           Dark
 *         </SegmentedButton>
 *         <SegmentedButton
 *           selected={colorScheme === "system"}
 *           onClick={() => {
 *             setColorScheme("system")
 *           }}
 *         >
 *           System
 *         </SegmentedButton>
 *       </SegmentedButtonContainer>
 *     </>
 *   )l
 * }
 *
 * const container = document.getElementById("root");
 * const root = createRoot(container);
 *
 * root.render(
 *   <LocalStorageColorSchemeProvider defaultColorScheme="system">
 *     <MyComponent />
 *   </LocalStorageColorSchemeProvider>
 * );
 * ```
 *
 * @see {@link https://react-md.dev/components/color-scheme-provider | ColorSchemeProvider Demos}
 * @see {@link https://react-md.dev/customization/dark-mode|Dark Mode Setup}
 * @since 6.0.0
 */ export function LocalStorageColorSchemeProvider(props) {
    const { localStorageKey = "colorScheme", defaultColorScheme = "light", disableMetaTag, children } = props;
    const { value: colorScheme, setValue: setColorScheme } = useStorage({
        key: localStorageKey,
        defaultValue: defaultColorScheme,
        deserializer: (item)=>isColorScheme(item) ? item : defaultColorScheme
    });
    const value = useColorSchemeProvider({
        disableMetaTag,
        colorScheme,
        setColorScheme
    });
    return /*#__PURE__*/ _jsx(ColorSchemeProvider, {
        value: value,
        children: children
    });
}

//# sourceMappingURL=LocalStorageColorSchemeProvider.js.map