@willphan1712000/frontend 1.8.2 → 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);
 
@@ -1703,30 +1704,35 @@ var InputGoogle = (_a) => {
   const [isFocus, setFocus] = (0, import_react13.useState)(false);
   const spanRef = (0, import_react13.useRef)(null);
   const inputRef = (0, import_react13.useRef)(null);
-  function transitionOnFocus() {
-    setFocus(true);
+  const borderWhenFocused = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
+  const labelColorWhenFocused = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
+  function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others2.topFocus;
       spanRef.current.style.fontSize = others2.fontSizeFocus;
     }
   }
-  function transitionOffFocus() {
-    setFocus(false);
-    if (value) return;
+  function spanPositionWhenNotFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others2.topRelease;
       spanRef.current.style.fontSize = others2.fontSizeRelease;
     }
   }
-  function handleClickOnLabel() {
+  function onFocus() {
+    setFocus(true);
+    spanPositionWhenFocused();
+  }
+  function offFocus() {
+    setFocus(false);
+    if (value) return;
+    spanPositionWhenNotFocused();
+  }
+  function focus() {
     var _a2;
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   }
-  const inputBorder = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
-  const labelTextColor = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
   (0, import_react13.useEffect)(() => {
-    transitionOnFocus();
-    transitionOffFocus();
+    if (value) spanPositionWhenFocused();
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: InputGoogle_styles_default.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -1736,13 +1742,15 @@ var InputGoogle = (_a) => {
         name: "will-input-google",
         ref: inputRef,
         value,
-        onChange: (e) => setValue(e.target.value),
+        onChange: (e) => {
+          setValue(e.target.value);
+        },
         type: "text",
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.input), {
-          border: inputBorder
+          border: borderWhenFocused
         }),
-        onFocus: transitionOnFocus,
-        onBlur: transitionOffFocus
+        onFocus,
+        onBlur: offFocus
       }, props)
     ),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -1750,9 +1758,9 @@ var InputGoogle = (_a) => {
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.label), {
-          color: labelTextColor
+          color: labelColorWhenFocused
         }),
-        onClick: handleClickOnLabel,
+        onClick: focus,
         children: label
       }
     )
@@ -1824,30 +1832,35 @@ var TextArea = (_a) => {
   const [isFocus, setFocus] = (0, import_react14.useState)(false);
   const spanRef = (0, import_react14.useRef)(null);
   const inputRef = (0, import_react14.useRef)(null);
-  function transitionOnFocus() {
-    setFocus(true);
+  const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
+  const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
+  function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others3.topFocus;
       spanRef.current.style.fontSize = others3.fontSizeFocus;
     }
   }
-  function transitionOffFocus() {
-    setFocus(false);
-    if (value) return;
+  function spanPositionWhenNotFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others3.topRelease;
       spanRef.current.style.fontSize = others3.fontSizeRelease;
     }
   }
-  function handleClickOnLabel() {
+  function onFocus() {
+    setFocus(true);
+    spanPositionWhenFocused();
+  }
+  function offFocus() {
+    setFocus(false);
+    if (value) return;
+    spanPositionWhenNotFocused();
+  }
+  function focus() {
     var _a2;
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   }
-  const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
-  const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
   (0, import_react14.useEffect)(() => {
-    transitionOnFocus();
-    transitionOffFocus();
+    if (value) spanPositionWhenFocused();
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: TextArea_styles_default.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -1861,8 +1874,8 @@ var TextArea = (_a) => {
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.input), {
           border: inputBorder
         }),
-        onFocus: transitionOnFocus,
-        onBlur: transitionOffFocus
+        onFocus,
+        onBlur: offFocus
       }, props)
     ),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -1872,7 +1885,7 @@ var TextArea = (_a) => {
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.label), {
           color: labelTextColor
         }),
-        onClick: handleClickOnLabel,
+        onClick: focus,
         children: label
       }
     )
@@ -3734,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,
@@ -3757,5 +3816,6 @@ var LinearAlgebra_default = LinearAlgebra;
   UploadImage,
   tools,
   useAuthClient,
-  useSession
+  useSession,
+  useThemeState
 });

package/dist/index.mjs

@@ -1664,30 +1664,35 @@ var InputGoogle = (_a) => {
   const [isFocus, setFocus] = useState9(false);
   const spanRef = useRef8(null);
   const inputRef = useRef8(null);
-  function transitionOnFocus() {
-    setFocus(true);
+  const borderWhenFocused = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
+  const labelColorWhenFocused = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
+  function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others2.topFocus;
       spanRef.current.style.fontSize = others2.fontSizeFocus;
     }
   }
-  function transitionOffFocus() {
-    setFocus(false);
-    if (value) return;
+  function spanPositionWhenNotFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others2.topRelease;
       spanRef.current.style.fontSize = others2.fontSizeRelease;
     }
   }
-  function handleClickOnLabel() {
+  function onFocus() {
+    setFocus(true);
+    spanPositionWhenFocused();
+  }
+  function offFocus() {
+    setFocus(false);
+    if (value) return;
+    spanPositionWhenNotFocused();
+  }
+  function focus() {
     var _a2;
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   }
-  const inputBorder = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
-  const labelTextColor = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
   useEffect9(() => {
-    transitionOnFocus();
-    transitionOffFocus();
+    if (value) spanPositionWhenFocused();
   }, [value]);
   return /* @__PURE__ */ jsxs12("div", { style: InputGoogle_styles_default.container, children: [
     /* @__PURE__ */ jsx15(
@@ -1697,13 +1702,15 @@ var InputGoogle = (_a) => {
         name: "will-input-google",
         ref: inputRef,
         value,
-        onChange: (e) => setValue(e.target.value),
+        onChange: (e) => {
+          setValue(e.target.value);
+        },
         type: "text",
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.input), {
-          border: inputBorder
+          border: borderWhenFocused
         }),
-        onFocus: transitionOnFocus,
-        onBlur: transitionOffFocus
+        onFocus,
+        onBlur: offFocus
       }, props)
     ),
     /* @__PURE__ */ jsx15(
@@ -1711,9 +1718,9 @@ var InputGoogle = (_a) => {
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.label), {
-          color: labelTextColor
+          color: labelColorWhenFocused
         }),
-        onClick: handleClickOnLabel,
+        onClick: focus,
         children: label
       }
     )
@@ -1785,30 +1792,35 @@ var TextArea = (_a) => {
   const [isFocus, setFocus] = useState10(false);
   const spanRef = useRef9(null);
   const inputRef = useRef9(null);
-  function transitionOnFocus() {
-    setFocus(true);
+  const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
+  const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
+  function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others3.topFocus;
       spanRef.current.style.fontSize = others3.fontSizeFocus;
     }
   }
-  function transitionOffFocus() {
-    setFocus(false);
-    if (value) return;
+  function spanPositionWhenNotFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others3.topRelease;
       spanRef.current.style.fontSize = others3.fontSizeRelease;
     }
   }
-  function handleClickOnLabel() {
+  function onFocus() {
+    setFocus(true);
+    spanPositionWhenFocused();
+  }
+  function offFocus() {
+    setFocus(false);
+    if (value) return;
+    spanPositionWhenNotFocused();
+  }
+  function focus() {
     var _a2;
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   }
-  const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
-  const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
   useEffect10(() => {
-    transitionOnFocus();
-    transitionOffFocus();
+    if (value) spanPositionWhenFocused();
   }, [value]);
   return /* @__PURE__ */ jsxs13("div", { style: TextArea_styles_default.container, children: [
     /* @__PURE__ */ jsx16(
@@ -1822,8 +1834,8 @@ var TextArea = (_a) => {
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.input), {
           border: inputBorder
         }),
-        onFocus: transitionOnFocus,
-        onBlur: transitionOffFocus
+        onFocus,
+        onBlur: offFocus
       }, props)
     ),
     /* @__PURE__ */ jsx16(
@@ -1833,7 +1845,7 @@ var TextArea = (_a) => {
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.label), {
           color: labelTextColor
         }),
-        onClick: handleClickOnLabel,
+        onClick: focus,
         children: label
       }
     )
@@ -3695,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,
@@ -3717,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.2",
+  "version": "1.9.0",
   "description": "Frontend Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",