@cerberus-design/react 0.9.2-next-76e34cc → 0.9.2-next-cf82128

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -282,7 +282,7 @@ export { CollisionDescriptor }
 
 export { CollisionDetection }
 
-declare type ColorModes = 'light' | 'dark';
+declare type ColorModes = 'light' | 'dark' | 'system';
 export { ColorModes }
 export { ColorModes as ColorModes_alias_1 }
 
@@ -349,7 +349,7 @@ export declare const defaultIcons: DefinedIcons;
 
 export { defaultScreenReaderInstructions }
 
-declare type DefaultThemes = 'cerberus';
+declare type DefaultThemes = 'cerberus' | 'acheron';
 export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
@@ -1603,7 +1603,7 @@ declare interface ThemeContextValue<T extends string = DefaultThemes> {
     theme: CustomThemes<T>;
     mode: ColorModes;
     updateTheme: (theme: T) => void;
-    updateMode: () => void;
+    updateMode: (mode: ColorModes) => void;
 }
 export { ThemeContextValue }
 export { ThemeContextValue as ThemeContextValue_alias_1 }
@@ -1617,10 +1617,17 @@ export { ThemeContextValue as ThemeContextValue_alias_1 }
  * </ThemeProvider>
  * ```
  */
-declare function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element;
+declare function ThemeProvider(props: PropsWithChildren<ThemeProviderProps>): JSX.Element;
 export { ThemeProvider }
 export { ThemeProvider as ThemeProvider_alias_1 }
 
+declare interface ThemeProviderProps extends UseThemeOptions {
+    defaultTheme?: DefaultThemes;
+    defaultColorMode?: ColorModes;
+}
+export { ThemeProviderProps }
+export { ThemeProviderProps as ThemeProviderProps_alias_1 }
+
 declare type ThProps = ThBaseProps & ThVariantProps;
 export { ThProps }
 export { ThProps as ThProps_alias_1 }
@@ -1759,7 +1766,7 @@ declare function useTabsKeyboardNavigation(): {
 export { useTabsKeyboardNavigation }
 export { useTabsKeyboardNavigation as useTabsKeyboardNavigation_alias_1 }
 
-declare function useTheme<C extends string = DefaultThemes>(defaultTheme?: CustomThemes<C>, defaultColorMode?: ColorModes): ThemeContextValue<C>;
+declare function useTheme<C extends string = DefaultThemes>(defaultTheme?: CustomThemes<C>, defaultColorMode?: ColorModes, options?: UseThemeOptions<C>): ThemeContextValue<C>;
 export { useTheme }
 export { useTheme as useTheme_alias_1 }
 
@@ -1767,6 +1774,14 @@ declare function useThemeContext(): ThemeContextValue<DefaultThemes>;
 export { useThemeContext }
 export { useThemeContext as useThemeContext_alias_1 }
 
+declare interface UseThemeOptions<T extends string = DefaultThemes> {
+    cache?: boolean;
+    updateTheme?: (theme: T) => void;
+    updateMode?: (mode: ColorModes) => void;
+}
+export { UseThemeOptions }
+export { UseThemeOptions as UseThemeOptions_alias_1 }
+
 declare function useToggle(options?: UseToggleOptions): ToggleHookReturn;
 export { useToggle }
 export { useToggle as useToggle_alias_1 }

package/build/legacy/context/theme.cjs

@@ -21,8 +21,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/context/theme.tsx
 var theme_exports = {};
 __export(theme_exports, {
-  MODE_KEY: () => MODE_KEY,
-  THEME_KEY: () => THEME_KEY,
   ThemeProvider: () => ThemeProvider,
   useThemeContext: () => useThemeContext
 });
@@ -31,20 +29,26 @@ var import_react2 = require("react");
 
 // src/hooks/useTheme.ts
 var import_react = require("react");
-function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
+var THEME_KEY = "cerberus-theme";
+var MODE_KEY = "cerberus-mode";
+function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
+  const { updateMode, updateTheme, cache } = options;
   const [theme, setTheme] = (0, import_react.useState)(defaultTheme);
   const [colorMode, setColorMode] = (0, import_react.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react.useCallback)((newTheme) => {
-    setTheme(newTheme);
-    localStorage.setItem(THEME_KEY, newTheme);
-  }, []);
-  const handleColorModeChange = (0, import_react.useCallback)(() => {
-    setColorMode((prev) => {
-      const newMode = prev === "light" ? "dark" : "light";
-      localStorage.setItem(MODE_KEY, newMode);
-      return newMode;
-    });
-  }, []);
+  const handleThemeChange = (0, import_react.useCallback)(
+    (newTheme) => {
+      setTheme(newTheme);
+      updateTheme == null ? void 0 : updateTheme(newTheme);
+    },
+    [updateTheme]
+  );
+  const handleColorModeChange = (0, import_react.useCallback)(
+    (newMode) => {
+      setColorMode(newMode);
+      updateMode == null ? void 0 : updateMode(newMode);
+    },
+    [updateMode]
+  );
   (0, import_react.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
@@ -58,13 +62,19 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
     }
   }, []);
   (0, import_react.useEffect)(() => {
-    const root = document.documentElement;
-    root.dataset.theme = theme;
-  }, [theme]);
+    if (cache) {
+      const root = document.documentElement;
+      root.dataset.pandaTheme = theme;
+      localStorage.setItem(THEME_KEY, theme);
+    }
+  }, [theme, cache]);
   (0, import_react.useEffect)(() => {
-    const root = document.documentElement;
-    root.dataset.colorMode = colorMode;
-  }, [colorMode]);
+    if (cache) {
+      const root = document.documentElement;
+      root.dataset.colorMode = colorMode;
+      localStorage.setItem(MODE_KEY, colorMode);
+    }
+  }, [colorMode, cache]);
   return (0, import_react.useMemo)(
     () => ({
       theme,
@@ -78,13 +88,15 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
 
 // src/context/theme.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var THEME_KEY = "cerberus-theme";
-var MODE_KEY = "cerberus-mode";
 var ThemeContext = (0, import_react2.createContext)(
   null
 );
 function ThemeProvider(props) {
-  const state = useTheme();
+  const state = useTheme(props.defaultTheme, props.defaultColorMode, {
+    cache: props.cache,
+    updateMode: props.updateMode,
+    updateTheme: props.updateTheme
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
@@ -96,8 +108,6 @@ function useThemeContext() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  MODE_KEY,
-  THEME_KEY,
   ThemeProvider,
   useThemeContext
 });

package/build/legacy/context/theme.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/theme.tsx","../../../src/hooks/useTheme.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport { useTheme } from '../hooks/useTheme'\n\nexport type DefaultThemes = 'cerberus'\nexport type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K\nexport type ColorModes = 'light' | 'dark'\n\nexport interface ThemeContextValue<T extends string = DefaultThemes> {\n  theme: CustomThemes<T>\n  mode: ColorModes\n  updateTheme: (theme: T) => void\n  updateMode: () => void\n}\n\nexport const THEME_KEY = 'cerberus-theme'\nexport const MODE_KEY = 'cerberus-mode'\n\nconst ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(\n  null,\n)\n\n/**\n * A context provider that allows the user to set the theme and mode of the application.\n * @example\n * ```tsx\n * <ThemeProvider>\n *  <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element {\n  const state = useTheme()\n  return (\n    <ThemeContext.Provider value={state}>\n      {props.children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useThemeContext(): ThemeContextValue<DefaultThemes> {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider')\n  }\n  return context\n}\n","'use client'\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  MODE_KEY,\n  THEME_KEY,\n  type ColorModes,\n  type CustomThemes,\n  type DefaultThemes,\n  type ThemeContextValue,\n} from '../context/theme'\n\nexport function useTheme<C extends string = DefaultThemes>(\n  defaultTheme: CustomThemes<C> = 'cerberus',\n  defaultColorMode: ColorModes = 'light',\n): ThemeContextValue<C> {\n  const [theme, setTheme] = useState<CustomThemes<C>>(defaultTheme)\n  const [colorMode, setColorMode] = useState<ColorModes>(defaultColorMode)\n\n  const handleThemeChange = useCallback((newTheme: CustomThemes<C>) => {\n    setTheme(newTheme)\n    localStorage.setItem(THEME_KEY, newTheme)\n  }, [])\n\n  const handleColorModeChange = useCallback(() => {\n    setColorMode((prev) => {\n      const newMode = prev === 'light' ? 'dark' : 'light'\n      localStorage.setItem(MODE_KEY, newMode)\n      return newMode\n    })\n  }, [])\n\n  useLayoutEffect(() => {\n    const theme = localStorage.getItem(THEME_KEY)\n    if (theme) {\n      setTheme(theme as CustomThemes<C>)\n    }\n  }, [])\n\n  useLayoutEffect(() => {\n    const mode = localStorage.getItem(MODE_KEY)\n    if (mode) {\n      setColorMode(mode as ColorModes)\n    }\n  }, [])\n\n  useEffect(() => {\n    const root = document.documentElement\n    root.dataset.theme = theme\n  }, [theme])\n\n  useEffect(() => {\n    const root = document.documentElement\n    root.dataset.colorMode = colorMode\n  }, [colorMode])\n\n  return useMemo(\n    () => ({\n      theme,\n      mode: colorMode,\n      updateTheme: handleThemeChange,\n      updateMode: handleColorModeChange,\n    }),\n    [theme, colorMode, handleThemeChange, handleColorModeChange],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAAkE;;;ACAlE,mBAMO;AAUA,SAAS,SACd,eAAgC,YAChC,mBAA+B,SACT;AACtB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA0B,YAAY;AAChE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAqB,gBAAgB;AAEvE,QAAM,wBAAoB,0BAAY,CAAC,aAA8B;AACnE,aAAS,QAAQ;AACjB,iBAAa,QAAQ,WAAW,QAAQ;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,iBAAa,CAAC,SAAS;AACrB,YAAM,UAAU,SAAS,UAAU,SAAS;AAC5C,mBAAa,QAAQ,UAAU,OAAO;AACtC,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,UAAMC,SAAQ,aAAa,QAAQ,SAAS;AAC5C,QAAIA,QAAO;AACT,eAASA,MAAwB;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,UAAM,OAAO,aAAa,QAAQ,QAAQ;AAC1C,QAAI,MAAM;AACR,mBAAa,IAAkB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,QAAQ;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAEV,8BAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,YAAY;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd;AAAA,IACA,CAAC,OAAO,WAAW,mBAAmB,qBAAqB;AAAA,EAC7D;AACF;;;ADpCI;AAnBG,IAAM,YAAY;AAClB,IAAM,WAAW;AAExB,IAAM,mBAAe;AAAA,EACnB;AACF;AAWO,SAAS,cAAc,OAAgD;AAC5E,QAAM,QAAQ,SAAS;AACvB,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,OAC3B,gBAAM,UACT;AAEJ;AAEO,SAAS,kBAAoD;AAClE,QAAM,cAAU,0BAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":["import_react","theme"]}
+{"version":3,"sources":["../../../src/context/theme.tsx","../../../src/hooks/useTheme.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport { useTheme, type UseThemeOptions } from '../hooks/useTheme'\n\nexport type DefaultThemes = 'cerberus' | 'acheron'\nexport type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K\nexport type ColorModes = 'light' | 'dark' | 'system'\n\nexport interface ThemeContextValue<T extends string = DefaultThemes> {\n  theme: CustomThemes<T>\n  mode: ColorModes\n  updateTheme: (theme: T) => void\n  updateMode: (mode: ColorModes) => void\n}\n\nconst ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(\n  null,\n)\n\nexport interface ThemeProviderProps extends UseThemeOptions {\n  defaultTheme?: DefaultThemes\n  defaultColorMode?: ColorModes\n}\n\n/**\n * A context provider that allows the user to set the theme and mode of the application.\n * @example\n * ```tsx\n * <ThemeProvider>\n *  <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider(\n  props: PropsWithChildren<ThemeProviderProps>,\n): JSX.Element {\n  const state = useTheme(props.defaultTheme, props.defaultColorMode, {\n    cache: props.cache,\n    updateMode: props.updateMode,\n    updateTheme: props.updateTheme,\n  }) as ThemeContextValue<DefaultThemes>\n\n  return (\n    <ThemeContext.Provider value={state}>\n      {props.children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useThemeContext(): ThemeContextValue<DefaultThemes> {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider')\n  }\n  return context\n}\n","'use client'\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  type ColorModes,\n  type CustomThemes,\n  type DefaultThemes,\n  type ThemeContextValue,\n} from '../context/theme'\n\nexport const THEME_KEY = 'cerberus-theme'\nexport const MODE_KEY = 'cerberus-mode'\n\nexport interface UseThemeOptions<T extends string = DefaultThemes> {\n  cache?: boolean\n  updateTheme?: (theme: T) => void\n  updateMode?: (mode: ColorModes) => void\n}\n\nexport function useTheme<C extends string = DefaultThemes>(\n  defaultTheme: CustomThemes<C> = 'cerberus',\n  defaultColorMode: ColorModes = 'light',\n  options: UseThemeOptions<C> = {},\n): ThemeContextValue<C> {\n  const { updateMode, updateTheme, cache } = options\n  const [theme, setTheme] = useState<CustomThemes<C>>(defaultTheme)\n  const [colorMode, setColorMode] = useState<ColorModes>(defaultColorMode)\n\n  const handleThemeChange = useCallback(\n    (newTheme: C) => {\n      setTheme(newTheme)\n      updateTheme?.(newTheme)\n    },\n    [updateTheme],\n  )\n\n  const handleColorModeChange = useCallback(\n    (newMode: ColorModes) => {\n      setColorMode(newMode)\n      updateMode?.(newMode)\n    },\n    [updateMode],\n  )\n\n  useLayoutEffect(() => {\n    const theme = localStorage.getItem(THEME_KEY)\n    if (theme) {\n      setTheme(theme as CustomThemes<C>)\n    }\n  }, [])\n\n  useLayoutEffect(() => {\n    const mode = localStorage.getItem(MODE_KEY)\n    if (mode) {\n      setColorMode(mode as ColorModes)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (cache) {\n      const root = document.documentElement\n      root.dataset.pandaTheme = theme\n      localStorage.setItem(THEME_KEY, theme)\n    }\n  }, [theme, cache])\n\n  useEffect(() => {\n    if (cache) {\n      const root = document.documentElement\n      root.dataset.colorMode = colorMode\n      localStorage.setItem(MODE_KEY, colorMode)\n    }\n  }, [colorMode, cache])\n\n  return useMemo(\n    () => ({\n      theme,\n      mode: colorMode,\n      updateTheme: handleThemeChange,\n      updateMode: handleColorModeChange,\n    }),\n    [theme, colorMode, handleThemeChange, handleColorModeChange],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAAkE;;;ACAlE,mBAMO;AAQA,IAAM,YAAY;AAClB,IAAM,WAAW;AAQjB,SAAS,SACd,eAAgC,YAChC,mBAA+B,SAC/B,UAA8B,CAAC,GACT;AACtB,QAAM,EAAE,YAAY,aAAa,MAAM,IAAI;AAC3C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA0B,YAAY;AAChE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAqB,gBAAgB;AAEvE,QAAM,wBAAoB;AAAA,IACxB,CAAC,aAAgB;AACf,eAAS,QAAQ;AACjB,iDAAc;AAAA,IAChB;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,4BAAwB;AAAA,IAC5B,CAAC,YAAwB;AACvB,mBAAa,OAAO;AACpB,+CAAa;AAAA,IACf;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,oCAAgB,MAAM;AACpB,UAAMC,SAAQ,aAAa,QAAQ,SAAS;AAC5C,QAAIA,QAAO;AACT,eAASA,MAAwB;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,UAAM,OAAO,aAAa,QAAQ,QAAQ;AAC1C,QAAI,MAAM;AACR,mBAAa,IAAkB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,OAAO,SAAS;AACtB,WAAK,QAAQ,aAAa;AAC1B,mBAAa,QAAQ,WAAW,KAAK;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,8BAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,OAAO,SAAS;AACtB,WAAK,QAAQ,YAAY;AACzB,mBAAa,QAAQ,UAAU,SAAS;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd;AAAA,IACA,CAAC,OAAO,WAAW,mBAAmB,qBAAqB;AAAA,EAC7D;AACF;;;AD7CI;AA5BJ,IAAM,mBAAe;AAAA,EACnB;AACF;AAgBO,SAAS,cACd,OACa;AACb,QAAM,QAAQ,SAAS,MAAM,cAAc,MAAM,kBAAkB;AAAA,IACjE,OAAO,MAAM;AAAA,IACb,YAAY,MAAM;AAAA,IAClB,aAAa,MAAM;AAAA,EACrB,CAAC;AAED,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,OAC3B,gBAAM,UACT;AAEJ;AAEO,SAAS,kBAAoD;AAClE,QAAM,cAAU,0BAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":["import_react","theme"]}

package/build/legacy/hooks/useTheme.cjs

@@ -21,56 +21,59 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/hooks/useTheme.ts
 var useTheme_exports = {};
 __export(useTheme_exports, {
+  MODE_KEY: () => MODE_KEY,
+  THEME_KEY: () => THEME_KEY,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(useTheme_exports);
-var import_react2 = require("react");
-
-// src/context/theme.tsx
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
 var THEME_KEY = "cerberus-theme";
 var MODE_KEY = "cerberus-mode";
-var ThemeContext = (0, import_react.createContext)(
-  null
-);
-
-// src/hooks/useTheme.ts
-function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
-  const [theme, setTheme] = (0, import_react2.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react2.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react2.useCallback)((newTheme) => {
-    setTheme(newTheme);
-    localStorage.setItem(THEME_KEY, newTheme);
-  }, []);
-  const handleColorModeChange = (0, import_react2.useCallback)(() => {
-    setColorMode((prev) => {
-      const newMode = prev === "light" ? "dark" : "light";
-      localStorage.setItem(MODE_KEY, newMode);
-      return newMode;
-    });
-  }, []);
-  (0, import_react2.useLayoutEffect)(() => {
+function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
+  const { updateMode, updateTheme, cache } = options;
+  const [theme, setTheme] = (0, import_react.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react.useCallback)(
+    (newTheme) => {
+      setTheme(newTheme);
+      updateTheme == null ? void 0 : updateTheme(newTheme);
+    },
+    [updateTheme]
+  );
+  const handleColorModeChange = (0, import_react.useCallback)(
+    (newMode) => {
+      setColorMode(newMode);
+      updateMode == null ? void 0 : updateMode(newMode);
+    },
+    [updateMode]
+  );
+  (0, import_react.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react2.useLayoutEffect)(() => {
+  (0, import_react.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react2.useEffect)(() => {
-    const root = document.documentElement;
-    root.dataset.theme = theme;
-  }, [theme]);
-  (0, import_react2.useEffect)(() => {
-    const root = document.documentElement;
-    root.dataset.colorMode = colorMode;
-  }, [colorMode]);
-  return (0, import_react2.useMemo)(
+  (0, import_react.useEffect)(() => {
+    if (cache) {
+      const root = document.documentElement;
+      root.dataset.pandaTheme = theme;
+      localStorage.setItem(THEME_KEY, theme);
+    }
+  }, [theme, cache]);
+  (0, import_react.useEffect)(() => {
+    if (cache) {
+      const root = document.documentElement;
+      root.dataset.colorMode = colorMode;
+      localStorage.setItem(MODE_KEY, colorMode);
+    }
+  }, [colorMode, cache]);
+  return (0, import_react.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -82,6 +85,8 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  MODE_KEY,
+  THEME_KEY,
   useTheme
 });
 //# sourceMappingURL=useTheme.cjs.map

package/build/legacy/hooks/useTheme.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useTheme.ts","../../../src/context/theme.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  MODE_KEY,\n  THEME_KEY,\n  type ColorModes,\n  type CustomThemes,\n  type DefaultThemes,\n  type ThemeContextValue,\n} from '../context/theme'\n\nexport function useTheme<C extends string = DefaultThemes>(\n  defaultTheme: CustomThemes<C> = 'cerberus',\n  defaultColorMode: ColorModes = 'light',\n): ThemeContextValue<C> {\n  const [theme, setTheme] = useState<CustomThemes<C>>(defaultTheme)\n  const [colorMode, setColorMode] = useState<ColorModes>(defaultColorMode)\n\n  const handleThemeChange = useCallback((newTheme: CustomThemes<C>) => {\n    setTheme(newTheme)\n    localStorage.setItem(THEME_KEY, newTheme)\n  }, [])\n\n  const handleColorModeChange = useCallback(() => {\n    setColorMode((prev) => {\n      const newMode = prev === 'light' ? 'dark' : 'light'\n      localStorage.setItem(MODE_KEY, newMode)\n      return newMode\n    })\n  }, [])\n\n  useLayoutEffect(() => {\n    const theme = localStorage.getItem(THEME_KEY)\n    if (theme) {\n      setTheme(theme as CustomThemes<C>)\n    }\n  }, [])\n\n  useLayoutEffect(() => {\n    const mode = localStorage.getItem(MODE_KEY)\n    if (mode) {\n      setColorMode(mode as ColorModes)\n    }\n  }, [])\n\n  useEffect(() => {\n    const root = document.documentElement\n    root.dataset.theme = theme\n  }, [theme])\n\n  useEffect(() => {\n    const root = document.documentElement\n    root.dataset.colorMode = colorMode\n  }, [colorMode])\n\n  return useMemo(\n    () => ({\n      theme,\n      mode: colorMode,\n      updateTheme: handleThemeChange,\n      updateMode: handleColorModeChange,\n    }),\n    [theme, colorMode, handleThemeChange, handleColorModeChange],\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport { useTheme } from '../hooks/useTheme'\n\nexport type DefaultThemes = 'cerberus'\nexport type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K\nexport type ColorModes = 'light' | 'dark'\n\nexport interface ThemeContextValue<T extends string = DefaultThemes> {\n  theme: CustomThemes<T>\n  mode: ColorModes\n  updateTheme: (theme: T) => void\n  updateMode: () => void\n}\n\nexport const THEME_KEY = 'cerberus-theme'\nexport const MODE_KEY = 'cerberus-mode'\n\nconst ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(\n  null,\n)\n\n/**\n * A context provider that allows the user to set the theme and mode of the application.\n * @example\n * ```tsx\n * <ThemeProvider>\n *  <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element {\n  const state = useTheme()\n  return (\n    <ThemeContext.Provider value={state}>\n      {props.children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useThemeContext(): ThemeContextValue<DefaultThemes> {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAMO;;;ACNP,mBAAkE;AAiC9D;AAnBG,IAAM,YAAY;AAClB,IAAM,WAAW;AAExB,IAAM,mBAAe;AAAA,EACnB;AACF;;;ADHO,SAAS,SACd,eAAgC,YAChC,mBAA+B,SACT;AACtB,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAA0B,YAAY;AAChE,QAAM,CAAC,WAAW,YAAY,QAAI,wBAAqB,gBAAgB;AAEvE,QAAM,wBAAoB,2BAAY,CAAC,aAA8B;AACnE,aAAS,QAAQ;AACjB,iBAAa,QAAQ,WAAW,QAAQ;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,QAAM,4BAAwB,2BAAY,MAAM;AAC9C,iBAAa,CAAC,SAAS;AACrB,YAAM,UAAU,SAAS,UAAU,SAAS;AAC5C,mBAAa,QAAQ,UAAU,OAAO;AACtC,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,qCAAgB,MAAM;AACpB,UAAMC,SAAQ,aAAa,QAAQ,SAAS;AAC5C,QAAIA,QAAO;AACT,eAASA,MAAwB;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,qCAAgB,MAAM;AACpB,UAAM,OAAO,aAAa,QAAQ,QAAQ;AAC1C,QAAI,MAAM;AACR,mBAAa,IAAkB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,+BAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,QAAQ;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAEV,+BAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,YAAY;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd;AAAA,IACA,CAAC,OAAO,WAAW,mBAAmB,qBAAqB;AAAA,EAC7D;AACF;","names":["import_react","theme"]}
+{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  type ColorModes,\n  type CustomThemes,\n  type DefaultThemes,\n  type ThemeContextValue,\n} from '../context/theme'\n\nexport const THEME_KEY = 'cerberus-theme'\nexport const MODE_KEY = 'cerberus-mode'\n\nexport interface UseThemeOptions<T extends string = DefaultThemes> {\n  cache?: boolean\n  updateTheme?: (theme: T) => void\n  updateMode?: (mode: ColorModes) => void\n}\n\nexport function useTheme<C extends string = DefaultThemes>(\n  defaultTheme: CustomThemes<C> = 'cerberus',\n  defaultColorMode: ColorModes = 'light',\n  options: UseThemeOptions<C> = {},\n): ThemeContextValue<C> {\n  const { updateMode, updateTheme, cache } = options\n  const [theme, setTheme] = useState<CustomThemes<C>>(defaultTheme)\n  const [colorMode, setColorMode] = useState<ColorModes>(defaultColorMode)\n\n  const handleThemeChange = useCallback(\n    (newTheme: C) => {\n      setTheme(newTheme)\n      updateTheme?.(newTheme)\n    },\n    [updateTheme],\n  )\n\n  const handleColorModeChange = useCallback(\n    (newMode: ColorModes) => {\n      setColorMode(newMode)\n      updateMode?.(newMode)\n    },\n    [updateMode],\n  )\n\n  useLayoutEffect(() => {\n    const theme = localStorage.getItem(THEME_KEY)\n    if (theme) {\n      setTheme(theme as CustomThemes<C>)\n    }\n  }, [])\n\n  useLayoutEffect(() => {\n    const mode = localStorage.getItem(MODE_KEY)\n    if (mode) {\n      setColorMode(mode as ColorModes)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (cache) {\n      const root = document.documentElement\n      root.dataset.pandaTheme = theme\n      localStorage.setItem(THEME_KEY, theme)\n    }\n  }, [theme, cache])\n\n  useEffect(() => {\n    if (cache) {\n      const root = document.documentElement\n      root.dataset.colorMode = colorMode\n      localStorage.setItem(MODE_KEY, colorMode)\n    }\n  }, [colorMode, cache])\n\n  return useMemo(\n    () => ({\n      theme,\n      mode: colorMode,\n      updateTheme: handleThemeChange,\n      updateMode: handleColorModeChange,\n    }),\n    [theme, colorMode, handleThemeChange, handleColorModeChange],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAMO;AAQA,IAAM,YAAY;AAClB,IAAM,WAAW;AAQjB,SAAS,SACd,eAAgC,YAChC,mBAA+B,SAC/B,UAA8B,CAAC,GACT;AACtB,QAAM,EAAE,YAAY,aAAa,MAAM,IAAI;AAC3C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA0B,YAAY;AAChE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAqB,gBAAgB;AAEvE,QAAM,wBAAoB;AAAA,IACxB,CAAC,aAAgB;AACf,eAAS,QAAQ;AACjB,iDAAc;AAAA,IAChB;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,4BAAwB;AAAA,IAC5B,CAAC,YAAwB;AACvB,mBAAa,OAAO;AACpB,+CAAa;AAAA,IACf;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,oCAAgB,MAAM;AACpB,UAAMA,SAAQ,aAAa,QAAQ,SAAS;AAC5C,QAAIA,QAAO;AACT,eAASA,MAAwB;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,UAAM,OAAO,aAAa,QAAQ,QAAQ;AAC1C,QAAI,MAAM;AACR,mBAAa,IAAkB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,OAAO,SAAS;AACtB,WAAK,QAAQ,aAAa;AAC1B,mBAAa,QAAQ,WAAW,KAAK;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,8BAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,OAAO,SAAS;AACtB,WAAK,QAAQ,YAAY;AACzB,mBAAa,QAAQ,UAAU,SAAS;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd;AAAA,IACA,CAAC,OAAO,WAAW,mBAAmB,qBAAqB;AAAA,EAC7D;AACF;","names":["theme"]}

package/build/legacy/index.cjs

@@ -2133,20 +2133,26 @@ var import_react20 = require("react");
 
 // src/hooks/useTheme.ts
 var import_react19 = require("react");
-function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
+var THEME_KEY = "cerberus-theme";
+var MODE_KEY = "cerberus-mode";
+function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
+  const { updateMode, updateTheme, cache } = options;
   const [theme, setTheme] = (0, import_react19.useState)(defaultTheme);
   const [colorMode, setColorMode] = (0, import_react19.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react19.useCallback)((newTheme) => {
-    setTheme(newTheme);
-    localStorage.setItem(THEME_KEY, newTheme);
-  }, []);
-  const handleColorModeChange = (0, import_react19.useCallback)(() => {
-    setColorMode((prev) => {
-      const newMode = prev === "light" ? "dark" : "light";
-      localStorage.setItem(MODE_KEY, newMode);
-      return newMode;
-    });
-  }, []);
+  const handleThemeChange = (0, import_react19.useCallback)(
+    (newTheme) => {
+      setTheme(newTheme);
+      updateTheme == null ? void 0 : updateTheme(newTheme);
+    },
+    [updateTheme]
+  );
+  const handleColorModeChange = (0, import_react19.useCallback)(
+    (newMode) => {
+      setColorMode(newMode);
+      updateMode == null ? void 0 : updateMode(newMode);
+    },
+    [updateMode]
+  );
   (0, import_react19.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
@@ -2160,13 +2166,19 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
     }
   }, []);
   (0, import_react19.useEffect)(() => {
-    const root = document.documentElement;
-    root.dataset.theme = theme;
-  }, [theme]);
+    if (cache) {
+      const root = document.documentElement;
+      root.dataset.pandaTheme = theme;
+      localStorage.setItem(THEME_KEY, theme);
+    }
+  }, [theme, cache]);
   (0, import_react19.useEffect)(() => {
-    const root = document.documentElement;
-    root.dataset.colorMode = colorMode;
-  }, [colorMode]);
+    if (cache) {
+      const root = document.documentElement;
+      root.dataset.colorMode = colorMode;
+      localStorage.setItem(MODE_KEY, colorMode);
+    }
+  }, [colorMode, cache]);
   return (0, import_react19.useMemo)(
     () => ({
       theme,
@@ -2180,13 +2192,15 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
 
 // src/context/theme.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var THEME_KEY = "cerberus-theme";
-var MODE_KEY = "cerberus-mode";
 var ThemeContext = (0, import_react20.createContext)(
   null
 );
 function ThemeProvider(props) {
-  const state = useTheme();
+  const state = useTheme(props.defaultTheme, props.defaultColorMode, {
+    cache: props.cache,
+    updateMode: props.updateMode,
+    updateTheme: props.updateTheme
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {