@willphan1712000/frontend 1.8.3 → 1.9.0

package/dist/index.d.mts

@@ -774,4 +774,24 @@ declare const LinearAlgebra: {
     getVectorMagnitude(vector: number[]): number;
 };
 
-export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession };
+declare const ThemeStateArray: readonly ["light", "dark", "system"];
+type ThemeState = (typeof ThemeStateArray)[number];
+interface UseThemeState {
+    setThemeState: (mode: ThemeState) => void;
+    getThemeState: () => ThemeState;
+}
+
+/**
+ * Custom React hook for managing and modifying the theme state ('light', 'dark', or 'system') on the web.
+ * It interacts with the browser's `localStorage` and `document.body` to persist and apply theme choices.
+ *
+ * @returns {UseThemeState} An object containing the following theme control methods:
+ * - `setThemeState(mode: ThemeState)`: Sets the theme to the specified mode.
+ *   - `'light'`: Sets the storage item to `'light'`, removes the dark theme class from the document body, and disables the OS color scheme change listener.
+ *   - `'dark'`: Sets the storage item to `'dark'`, adds the dark theme class to the document body, and disables the OS color scheme change listener.
+ *   - `'system'`: Sets the storage item to `'system'`, matches the document body class to the current OS color scheme preference, and registers a listener to react to future OS color scheme preference changes.
+ * - `getThemeState()`: Retrieves the stored theme value from `localStorage`. Defaults to `'light'` if empty or invalid.
+ */
+declare function useThemeState(): UseThemeState;
+
+export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };

package/dist/index.d.ts

@@ -774,4 +774,24 @@ declare const LinearAlgebra: {
     getVectorMagnitude(vector: number[]): number;
 };
 
-export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession };
+declare const ThemeStateArray: readonly ["light", "dark", "system"];
+type ThemeState = (typeof ThemeStateArray)[number];
+interface UseThemeState {
+    setThemeState: (mode: ThemeState) => void;
+    getThemeState: () => ThemeState;
+}
+
+/**
+ * Custom React hook for managing and modifying the theme state ('light', 'dark', or 'system') on the web.
+ * It interacts with the browser's `localStorage` and `document.body` to persist and apply theme choices.
+ *
+ * @returns {UseThemeState} An object containing the following theme control methods:
+ * - `setThemeState(mode: ThemeState)`: Sets the theme to the specified mode.
+ *   - `'light'`: Sets the storage item to `'light'`, removes the dark theme class from the document body, and disables the OS color scheme change listener.
+ *   - `'dark'`: Sets the storage item to `'dark'`, adds the dark theme class to the document body, and disables the OS color scheme change listener.
+ *   - `'system'`: Sets the storage item to `'system'`, matches the document body class to the current OS color scheme preference, and registers a listener to react to future OS color scheme preference changes.
+ * - `getThemeState()`: Retrieves the stored theme value from `localStorage`. Defaults to `'light'` if empty or invalid.
+ */
+declare function useThemeState(): UseThemeState;
+
+export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };

package/dist/index.js

@@ -90,7 +90,8 @@ __export(index_exports, {
   UploadImage: () => UploadImage_default,
   tools: () => tools_default,
   useAuthClient: () => useAuthClient_default,
-  useSession: () => useSession
+  useSession: () => useSession,
+  useThemeState: () => useThemeState
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -3746,6 +3747,52 @@ var LinearAlgebra = {
   }
 };
 var LinearAlgebra_default = LinearAlgebra;
+
+// src/utilities/theme/types.ts
+var ThemeStateArray = ["light", "dark", "system"];
+var config = {
+  localStorageName: "will-theme",
+  bodyClass: "will-dark"
+};
+
+// src/utilities/theme/useThemeState.ts
+function useThemeState() {
+  const { bodyClass, localStorageName } = config;
+  const htmlClassProcess = (isDark) => {
+    isDark ? document.body.classList.add(bodyClass) : document.body.classList.remove(bodyClass);
+  };
+  const themeCallback = (event) => htmlClassProcess(event.matches);
+  const setLightTheme = () => {
+    window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeCallback);
+    localStorage.setItem(localStorageName, ThemeStateArray[0]);
+    document.body.classList.remove(bodyClass);
+  };
+  const setDarkTheme = () => {
+    window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeCallback);
+    localStorage.setItem(localStorageName, ThemeStateArray[1]);
+    document.body.classList.add(bodyClass);
+  };
+  const setSystem = () => {
+    localStorage.setItem(localStorageName, ThemeStateArray[2]);
+    htmlClassProcess(
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeCallback);
+  };
+  return {
+    setThemeState: (mode) => {
+      if (mode === "system") return setSystem();
+      if (mode === "light") return setLightTheme();
+      if (mode === "dark") return setDarkTheme();
+    },
+    getThemeState: () => {
+      const theme = localStorage.getItem(localStorageName);
+      if (!theme) return "light";
+      if (!ThemeStateArray.includes(theme)) return "light";
+      return theme;
+    }
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -3769,5 +3816,6 @@ var LinearAlgebra_default = LinearAlgebra;
   UploadImage,
   tools,
   useAuthClient,
-  useSession
+  useSession,
+  useThemeState
 });

package/dist/index.mjs

@@ -3707,6 +3707,52 @@ var LinearAlgebra = {
   }
 };
 var LinearAlgebra_default = LinearAlgebra;
+
+// src/utilities/theme/types.ts
+var ThemeStateArray = ["light", "dark", "system"];
+var config = {
+  localStorageName: "will-theme",
+  bodyClass: "will-dark"
+};
+
+// src/utilities/theme/useThemeState.ts
+function useThemeState() {
+  const { bodyClass, localStorageName } = config;
+  const htmlClassProcess = (isDark) => {
+    isDark ? document.body.classList.add(bodyClass) : document.body.classList.remove(bodyClass);
+  };
+  const themeCallback = (event) => htmlClassProcess(event.matches);
+  const setLightTheme = () => {
+    window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeCallback);
+    localStorage.setItem(localStorageName, ThemeStateArray[0]);
+    document.body.classList.remove(bodyClass);
+  };
+  const setDarkTheme = () => {
+    window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeCallback);
+    localStorage.setItem(localStorageName, ThemeStateArray[1]);
+    document.body.classList.add(bodyClass);
+  };
+  const setSystem = () => {
+    localStorage.setItem(localStorageName, ThemeStateArray[2]);
+    htmlClassProcess(
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeCallback);
+  };
+  return {
+    setThemeState: (mode) => {
+      if (mode === "system") return setSystem();
+      if (mode === "light") return setLightTheme();
+      if (mode === "dark") return setDarkTheme();
+    },
+    getThemeState: () => {
+      const theme = localStorage.getItem(localStorageName);
+      if (!theme) return "light";
+      if (!ThemeStateArray.includes(theme)) return "light";
+      return theme;
+    }
+  };
+}
 export {
   Avatar_default as Avatar,
   Button_default as Button,
@@ -3729,5 +3775,6 @@ export {
   UploadImage_default as UploadImage,
   tools_default as tools,
   useAuthClient_default as useAuthClient,
-  useSession
+  useSession,
+  useThemeState
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@willphan1712000/frontend",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "description": "Frontend Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",