@cerberus-design/react 0.9.2-next-32b3154 → 0.9.2-next-cf82128

package/build/modern/_tsup-dts-rollup.d.ts

@@ -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/modern/chunk-EIQKX73Y.js

@@ -0,0 +1,31 @@
+import {
+  useTheme
+} from "./chunk-ETAK2CSW.js";
+
+// src/context/theme.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(
+  null
+);
+function ThemeProvider(props) {
+  const state = useTheme(props.defaultTheme, props.defaultColorMode, {
+    cache: props.cache,
+    updateMode: props.updateMode,
+    updateTheme: props.updateTheme
+  });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: state, children: props.children });
+}
+function useThemeContext() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+export {
+  ThemeProvider,
+  useThemeContext
+};
+//# sourceMappingURL=chunk-EIQKX73Y.js.map

package/build/modern/chunk-EIQKX73Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/theme.tsx"],"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"],"mappings":";;;;;AAEA,SAAS,eAAe,kBAA0C;AA0C9D;AA5BJ,IAAM,eAAe;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,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAC3B,gBAAM,UACT;AAEJ;AAEO,SAAS,kBAAoD;AAClE,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-ETAK2CSW.js

@@ -0,0 +1,71 @@
+// src/hooks/useTheme.ts
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState
+} from "react";
+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] = useState(defaultTheme);
+  const [colorMode, setColorMode] = useState(defaultColorMode);
+  const handleThemeChange = useCallback(
+    (newTheme) => {
+      setTheme(newTheme);
+      updateTheme?.(newTheme);
+    },
+    [updateTheme]
+  );
+  const handleColorModeChange = useCallback(
+    (newMode) => {
+      setColorMode(newMode);
+      updateMode?.(newMode);
+    },
+    [updateMode]
+  );
+  useLayoutEffect(() => {
+    const theme2 = localStorage.getItem(THEME_KEY);
+    if (theme2) {
+      setTheme(theme2);
+    }
+  }, []);
+  useLayoutEffect(() => {
+    const mode = localStorage.getItem(MODE_KEY);
+    if (mode) {
+      setColorMode(mode);
+    }
+  }, []);
+  useEffect(() => {
+    if (cache) {
+      const root = document.documentElement;
+      root.dataset.pandaTheme = theme;
+      localStorage.setItem(THEME_KEY, theme);
+    }
+  }, [theme, cache]);
+  useEffect(() => {
+    if (cache) {
+      const root = document.documentElement;
+      root.dataset.colorMode = colorMode;
+      localStorage.setItem(MODE_KEY, colorMode);
+    }
+  }, [colorMode, cache]);
+  return useMemo(
+    () => ({
+      theme,
+      mode: colorMode,
+      updateTheme: handleThemeChange,
+      updateMode: handleColorModeChange
+    }),
+    [theme, colorMode, handleThemeChange, handleColorModeChange]
+  );
+}
+
+export {
+  THEME_KEY,
+  MODE_KEY,
+  useTheme
+};
+//# sourceMappingURL=chunk-ETAK2CSW.js.map

package/build/modern/chunk-ETAK2CSW.js.map

@@ -0,0 +1 @@
+{"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":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;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,IAAI,SAA0B,YAAY;AAChE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAqB,gBAAgB;AAEvE,QAAM,oBAAoB;AAAA,IACxB,CAAC,aAAgB;AACf,eAAS,QAAQ;AACjB,oBAAc,QAAQ;AAAA,IACxB;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,wBAAwB;AAAA,IAC5B,CAAC,YAAwB;AACvB,mBAAa,OAAO;AACpB,mBAAa,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,kBAAgB,MAAM;AACpB,UAAMA,SAAQ,aAAa,QAAQ,SAAS;AAC5C,QAAIA,QAAO;AACT,eAASA,MAAwB;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AACpB,UAAM,OAAO,aAAa,QAAQ,QAAQ;AAC1C,QAAI,MAAM;AACR,mBAAa,IAAkB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,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,YAAU,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,SAAO;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/modern/context/theme.js

@@ -1,13 +1,10 @@
 "use client";
 import {
-  MODE_KEY,
-  THEME_KEY,
   ThemeProvider,
   useThemeContext
-} from "../chunk-SXXWC6UD.js";
+} from "../chunk-EIQKX73Y.js";
+import "../chunk-ETAK2CSW.js";
 export {
-  MODE_KEY,
-  THEME_KEY,
   ThemeProvider,
   useThemeContext
 };

package/build/modern/hooks/useTheme.js

@@ -1,8 +1,12 @@
 "use client";
 import {
+  MODE_KEY,
+  THEME_KEY,
   useTheme
-} from "../chunk-SXXWC6UD.js";
+} from "../chunk-ETAK2CSW.js";
 export {
+  MODE_KEY,
+  THEME_KEY,
   useTheme
 };
 //# sourceMappingURL=useTheme.js.map

package/build/modern/index.js

@@ -6,6 +6,10 @@ import {
   PromptModal,
   usePromptModal
 } from "./chunk-T7TOXGZT.js";
+import {
+  ThemeProvider,
+  useThemeContext
+} from "./chunk-EIQKX73Y.js";
 import {
   Tag
 } from "./chunk-Z6IWNVPN.js";
@@ -111,10 +115,8 @@ import {
 import {
   MODE_KEY,
   THEME_KEY,
-  ThemeProvider,
-  useTheme,
-  useThemeContext
-} from "./chunk-SXXWC6UD.js";
+  useTheme
+} from "./chunk-ETAK2CSW.js";
 import {
   useToggle
 } from "./chunk-QEA6N6TN.js";

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.9.2-next-32b3154",
+  "version": "0.9.2-next-cf82128",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -25,8 +25,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
-    "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.9.2-next-32b3154"
+    "@cerberus-design/styled-system": "0.9.2-next-cf82128",
+    "@cerberus-design/configs": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/context/theme.tsx

@@ -1,26 +1,28 @@
 'use client'
 
 import { createContext, useContext, type PropsWithChildren } from 'react'
-import { useTheme } from '../hooks/useTheme'
+import { useTheme, type UseThemeOptions } from '../hooks/useTheme'
 
-export type DefaultThemes = 'cerberus'
+export type DefaultThemes = 'cerberus' | 'acheron'
 export type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K
-export type ColorModes = 'light' | 'dark'
+export type ColorModes = 'light' | 'dark' | 'system'
 
 export interface ThemeContextValue<T extends string = DefaultThemes> {
   theme: CustomThemes<T>
   mode: ColorModes
   updateTheme: (theme: T) => void
-  updateMode: () => void
+  updateMode: (mode: ColorModes) => void
 }
 
-export const THEME_KEY = 'cerberus-theme'
-export const MODE_KEY = 'cerberus-mode'
-
 const ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(
   null,
 )
 
+export interface ThemeProviderProps extends UseThemeOptions {
+  defaultTheme?: DefaultThemes
+  defaultColorMode?: ColorModes
+}
+
 /**
  * A context provider that allows the user to set the theme and mode of the application.
  * @example
@@ -30,8 +32,15 @@ const ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(
  * </ThemeProvider>
  * ```
  */
-export function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element {
-  const state = useTheme()
+export function ThemeProvider(
+  props: PropsWithChildren<ThemeProviderProps>,
+): JSX.Element {
+  const state = useTheme(props.defaultTheme, props.defaultColorMode, {
+    cache: props.cache,
+    updateMode: props.updateMode,
+    updateTheme: props.updateTheme,
+  }) as ThemeContextValue<DefaultThemes>
+
   return (
     <ThemeContext.Provider value={state}>
       {props.children}

package/src/hooks/useTheme.ts

@@ -8,33 +8,45 @@ import {
   useState,
 } from 'react'
 import {
-  MODE_KEY,
-  THEME_KEY,
   type ColorModes,
   type CustomThemes,
   type DefaultThemes,
   type ThemeContextValue,
 } from '../context/theme'
 
+export const THEME_KEY = 'cerberus-theme'
+export const MODE_KEY = 'cerberus-mode'
+
+export interface UseThemeOptions<T extends string = DefaultThemes> {
+  cache?: boolean
+  updateTheme?: (theme: T) => void
+  updateMode?: (mode: ColorModes) => void
+}
+
 export function useTheme<C extends string = DefaultThemes>(
   defaultTheme: CustomThemes<C> = 'cerberus',
   defaultColorMode: ColorModes = 'light',
+  options: UseThemeOptions<C> = {},
 ): ThemeContextValue<C> {
+  const { updateMode, updateTheme, cache } = options
   const [theme, setTheme] = useState<CustomThemes<C>>(defaultTheme)
   const [colorMode, setColorMode] = useState<ColorModes>(defaultColorMode)
 
-  const handleThemeChange = useCallback((newTheme: CustomThemes<C>) => {
-    setTheme(newTheme)
-    localStorage.setItem(THEME_KEY, newTheme)
-  }, [])
+  const handleThemeChange = useCallback(
+    (newTheme: C) => {
+      setTheme(newTheme)
+      updateTheme?.(newTheme)
+    },
+    [updateTheme],
+  )
 
-  const handleColorModeChange = useCallback(() => {
-    setColorMode((prev) => {
-      const newMode = prev === 'light' ? 'dark' : 'light'
-      localStorage.setItem(MODE_KEY, newMode)
-      return newMode
-    })
-  }, [])
+  const handleColorModeChange = useCallback(
+    (newMode: ColorModes) => {
+      setColorMode(newMode)
+      updateMode?.(newMode)
+    },
+    [updateMode],
+  )
 
   useLayoutEffect(() => {
     const theme = localStorage.getItem(THEME_KEY)
@@ -51,14 +63,20 @@ export function useTheme<C extends string = DefaultThemes>(
   }, [])
 
   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])
 
   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 useMemo(
     () => ({

package/build/modern/chunk-SXXWC6UD.js

@@ -1,83 +0,0 @@
-// src/hooks/useTheme.ts
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState
-} from "react";
-
-// src/context/theme.tsx
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-var THEME_KEY = "cerberus-theme";
-var MODE_KEY = "cerberus-mode";
-var ThemeContext = createContext(
-  null
-);
-function ThemeProvider(props) {
-  const state = useTheme();
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: state, children: props.children });
-}
-function useThemeContext() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useThemeContext must be used within a ThemeProvider");
-  }
-  return context;
-}
-
-// src/hooks/useTheme.ts
-function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
-  const [theme, setTheme] = useState(defaultTheme);
-  const [colorMode, setColorMode] = useState(defaultColorMode);
-  const handleThemeChange = useCallback((newTheme) => {
-    setTheme(newTheme);
-    localStorage.setItem(THEME_KEY, newTheme);
-  }, []);
-  const handleColorModeChange = useCallback(() => {
-    setColorMode((prev) => {
-      const newMode = prev === "light" ? "dark" : "light";
-      localStorage.setItem(MODE_KEY, newMode);
-      return newMode;
-    });
-  }, []);
-  useLayoutEffect(() => {
-    const theme2 = localStorage.getItem(THEME_KEY);
-    if (theme2) {
-      setTheme(theme2);
-    }
-  }, []);
-  useLayoutEffect(() => {
-    const mode = localStorage.getItem(MODE_KEY);
-    if (mode) {
-      setColorMode(mode);
-    }
-  }, []);
-  useEffect(() => {
-    const root = document.documentElement;
-    root.dataset.theme = theme;
-  }, [theme]);
-  useEffect(() => {
-    const root = document.documentElement;
-    root.dataset.colorMode = colorMode;
-  }, [colorMode]);
-  return useMemo(
-    () => ({
-      theme,
-      mode: colorMode,
-      updateTheme: handleThemeChange,
-      updateMode: handleColorModeChange
-    }),
-    [theme, colorMode, handleThemeChange, handleColorModeChange]
-  );
-}
-
-export {
-  useTheme,
-  THEME_KEY,
-  MODE_KEY,
-  ThemeProvider,
-  useThemeContext
-};
-//# sourceMappingURL=chunk-SXXWC6UD.js.map

package/build/modern/chunk-SXXWC6UD.js.map

@@ -1 +0,0 @@
-{"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":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACNP,SAAS,eAAe,kBAA0C;AAiC9D;AAnBG,IAAM,YAAY;AAClB,IAAM,WAAW;AAExB,IAAM,eAAe;AAAA,EACnB;AACF;AAWO,SAAS,cAAc,OAAgD;AAC5E,QAAM,QAAQ,SAAS;AACvB,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAC3B,gBAAM,UACT;AAEJ;AAEO,SAAS,kBAAoD;AAClE,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;AD7BO,SAAS,SACd,eAAgC,YAChC,mBAA+B,SACT;AACtB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA0B,YAAY;AAChE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAqB,gBAAgB;AAEvE,QAAM,oBAAoB,YAAY,CAAC,aAA8B;AACnE,aAAS,QAAQ;AACjB,iBAAa,QAAQ,WAAW,QAAQ;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAwB,YAAY,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,kBAAgB,MAAM;AACpB,UAAMA,SAAQ,aAAa,QAAQ,SAAS;AAC5C,QAAIA,QAAO;AACT,eAASA,MAAwB;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AACpB,UAAM,OAAO,aAAa,QAAQ,QAAQ;AAC1C,QAAI,MAAM;AACR,mBAAa,IAAkB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,QAAQ;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,YAAY;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;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"]}