npm - @willphan1712000/frontend - Versions diffs - 1.8.3 → 1.9.1 - Mend

@willphan1712000/frontend 1.8.3 → 1.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -28,6 +28,7 @@ Reusable React UI components and frontend utilities packaged for application dev
 - `Transform`
 - `tools`
 - `LinearAlgebra`
+- `useThemeState`
 ### Auth helpers
 - `useSession`
@@ -249,6 +250,44 @@ function AppProviders({ children }: { children: React.ReactNode }) {
 - `session`
 - `auth`
+## Theme management usage
+### `useThemeState`
+A custom React hook for managing, persisting, and applying the application's theme state (`'light'`, `'dark'`, or `'system'`). It synchronizes state with browser `localStorage` and applies/removes the theme class on `document.body`.
+```tsx
+import { useThemeState } from '@willphan1712000/frontend';
+const Example = () => {
+  const { setThemeState, getThemeState } = useThemeState();
+  return (
+    <div>
+      <p>Current Theme: {getThemeState()}</p>
+      <button onClick={() => setThemeState('light')}>Light</button>
+      <button onClick={() => setThemeState('dark')}>Dark</button>
+      <button onClick={() => setThemeState('system')}>System</button>
+    </div>
+  );
+};
+```
+#### API Reference
+- `getThemeState(): 'light' | 'dark' | 'system'`
+  Retrieves the active theme setting from `localStorage`. Defaults to `'light'`.
+- `setThemeState(mode: 'light' | 'dark' | 'system'): void`
+  Sets the active theme setting.
+  - `'light'`: Stores `'light'`, removes `'will-dark'` class from `document.body`, and disables OS preference event listeners.
+  - `'dark'`: Stores `'dark'`, adds `'will-dark'` class to `document.body`, and disables OS preference event listeners.
+  - `'system'`: Stores `'system'`, automatically toggles `'will-dark'` based on OS preferences, and registers a listener to react to future OS preference changes.
+#### Configuration Details
+- **Local Storage Key:** `'will-theme'`
+- **CSS Class Applied to `<body>`:** `'will-dark'`
 ## Exported utilities
 ```ts

package/dist/index.d.mts CHANGED Viewed

@@ -174,7 +174,10 @@ interface Props$5 {
     setValue?: (value?: string) => void;
     label?: string;
     options?: {
-        focusColor: string;
+        focusColor?: string;
+        backgroundColor?: string;
+        textColor?: string;
+        borderColor?: string;
     };
 }
 /**
@@ -203,7 +206,10 @@ interface Props$4 {
     setValue?: (value?: string) => void;
     label?: string;
     options?: {
-        focusColor: string;
+        focusColor?: string;
+        backgroundColor?: string;
+        textColor?: string;
+        borderColor?: string;
     };
 }
 /**
@@ -774,4 +780,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 CHANGED Viewed

@@ -174,7 +174,10 @@ interface Props$5 {
     setValue?: (value?: string) => void;
     label?: string;
     options?: {
-        focusColor: string;
+        focusColor?: string;
+        backgroundColor?: string;
+        textColor?: string;
+        borderColor?: string;
     };
 }
 /**
@@ -203,7 +206,10 @@ interface Props$4 {
     setValue?: (value?: string) => void;
     label?: string;
     options?: {
-        focusColor: string;
+        focusColor?: string;
+        backgroundColor?: string;
+        textColor?: string;
+        borderColor?: string;
     };
 }
 /**
@@ -774,4 +780,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 CHANGED Viewed

@@ -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);
@@ -1656,7 +1657,8 @@ var others2 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 1px"
+  border: "solid 1px",
+  backgroundColor: "#fff"
 };
 var styles10 = {
   input: {
@@ -1666,7 +1668,9 @@ var styles10 = {
     border: `${others2.border} ${others2.borderRelease}`,
     borderRadius: "6px",
     padding: "10px",
-    outline: "none"
+    outline: "none",
+    backgroundColor: others2.backgroundColor,
+    color: others2.textRelease
   },
   container: {
     width: "100%",
@@ -1680,7 +1684,8 @@ var styles10 = {
     transform: "translateY(-50%)",
     transition: "all .1s linear",
     padding: "0px 5px",
-    backgroundColor: "white"
+    backgroundColor: others2.backgroundColor,
+    color: others2.textRelease
   }
 };
 var InputGoogle_styles_default = styles10;
@@ -1703,8 +1708,11 @@ 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);
-  const borderWhenFocused = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
-  const labelColorWhenFocused = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
+  const backgroundColor = (options == null ? void 0 : options.backgroundColor) ? options.backgroundColor : others2.backgroundColor;
+  const textColor = (options == null ? void 0 : options.textColor) ? options.textColor : others2.textRelease;
+  const borderColor = (options == null ? void 0 : options.borderColor) ? options.borderColor : others2.borderRelease;
+  const borderWhenFocused = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${borderColor}`;
+  const labelColorWhenFocused = isFocus ? `${(options == null ? void 0 : options.focusColor) ? options.focusColor : others2.textFocus}` : `${textColor}`;
   function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others2.topFocus;
@@ -1746,7 +1754,9 @@ var InputGoogle = (_a) => {
         },
         type: "text",
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.input), {
-          border: borderWhenFocused
+          border: borderWhenFocused,
+          backgroundColor,
+          color: textColor
         }),
         onFocus,
         onBlur: offFocus
@@ -1757,7 +1767,8 @@ var InputGoogle = (_a) => {
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.label), {
-          color: labelColorWhenFocused
+          color: labelColorWhenFocused,
+          backgroundColor
         }),
         onClick: focus,
         children: label
@@ -1781,7 +1792,8 @@ var others3 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 1px"
+  border: "solid 1px",
+  backgroundColor: "#fff"
 };
 var styles11 = {
   input: {
@@ -1792,7 +1804,9 @@ var styles11 = {
     borderRadius: "6px",
     padding: "10px",
     outline: "none",
-    resize: "none"
+    resize: "none",
+    backgroundColor: others3.backgroundColor,
+    color: others3.textRelease
   },
   container: {
     width: "100%",
@@ -1808,7 +1822,8 @@ var styles11 = {
     transform: "translateY(-50%)",
     transition: "all .1s linear",
     padding: "0px 5px",
-    backgroundColor: "white"
+    backgroundColor: others3.backgroundColor,
+    color: others3.textRelease
   }
 };
 var TextArea_styles_default = styles11;
@@ -1831,8 +1846,11 @@ 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);
-  const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
-  const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
+  const backgroundColor = (options == null ? void 0 : options.backgroundColor) ? options.backgroundColor : others3.backgroundColor;
+  const textColor = (options == null ? void 0 : options.textColor) ? options.textColor : others3.textRelease;
+  const borderColor = (options == null ? void 0 : options.borderColor) ? options.borderColor : others3.borderRelease;
+  const borderWhenFocused = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${borderColor}`;
+  const labelColorWhenFocused = isFocus ? `${(options == null ? void 0 : options.focusColor) ? options.focusColor : others3.textFocus}` : `${textColor}`;
   function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others3.topFocus;
@@ -1871,7 +1889,9 @@ var TextArea = (_a) => {
         value,
         onChange: (e) => setValue(e.target.value),
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.input), {
-          border: inputBorder
+          border: borderWhenFocused,
+          backgroundColor,
+          color: textColor
         }),
         onFocus,
         onBlur: offFocus
@@ -1882,7 +1902,8 @@ var TextArea = (_a) => {
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.label), {
-          color: labelTextColor
+          color: labelColorWhenFocused,
+          backgroundColor
         }),
         onClick: focus,
         children: label
@@ -3746,6 +3767,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 +3836,6 @@ var LinearAlgebra_default = LinearAlgebra;
   UploadImage,
   tools,
   useAuthClient,
-  useSession
+  useSession,
+  useThemeState
 });

package/dist/index.mjs CHANGED Viewed

@@ -1617,7 +1617,8 @@ var others2 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 1px"
+  border: "solid 1px",
+  backgroundColor: "#fff"
 };
 var styles10 = {
   input: {
@@ -1627,7 +1628,9 @@ var styles10 = {
     border: `${others2.border} ${others2.borderRelease}`,
     borderRadius: "6px",
     padding: "10px",
-    outline: "none"
+    outline: "none",
+    backgroundColor: others2.backgroundColor,
+    color: others2.textRelease
   },
   container: {
     width: "100%",
@@ -1641,7 +1644,8 @@ var styles10 = {
     transform: "translateY(-50%)",
     transition: "all .1s linear",
     padding: "0px 5px",
-    backgroundColor: "white"
+    backgroundColor: others2.backgroundColor,
+    color: others2.textRelease
   }
 };
 var InputGoogle_styles_default = styles10;
@@ -1664,8 +1668,11 @@ var InputGoogle = (_a) => {
   const [isFocus, setFocus] = useState9(false);
   const spanRef = useRef8(null);
   const inputRef = useRef8(null);
-  const borderWhenFocused = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${others2.borderRelease}`;
-  const labelColorWhenFocused = isFocus ? `${options ? options.focusColor : others2.textFocus}` : `${others2.textRelease}`;
+  const backgroundColor = (options == null ? void 0 : options.backgroundColor) ? options.backgroundColor : others2.backgroundColor;
+  const textColor = (options == null ? void 0 : options.textColor) ? options.textColor : others2.textRelease;
+  const borderColor = (options == null ? void 0 : options.borderColor) ? options.borderColor : others2.borderRelease;
+  const borderWhenFocused = isFocus ? `${others2.border} ${options ? options.focusColor : others2.borderFocus}` : `${others2.border} ${borderColor}`;
+  const labelColorWhenFocused = isFocus ? `${(options == null ? void 0 : options.focusColor) ? options.focusColor : others2.textFocus}` : `${textColor}`;
   function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others2.topFocus;
@@ -1707,7 +1714,9 @@ var InputGoogle = (_a) => {
         },
         type: "text",
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.input), {
-          border: borderWhenFocused
+          border: borderWhenFocused,
+          backgroundColor,
+          color: textColor
         }),
         onFocus,
         onBlur: offFocus
@@ -1718,7 +1727,8 @@ var InputGoogle = (_a) => {
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, InputGoogle_styles_default.label), {
-          color: labelColorWhenFocused
+          color: labelColorWhenFocused,
+          backgroundColor
         }),
         onClick: focus,
         children: label
@@ -1742,7 +1752,8 @@ var others3 = {
   borderFocus: "#0957d0",
   textRelease: "#000",
   textFocus: "#0957d0",
-  border: "solid 1px"
+  border: "solid 1px",
+  backgroundColor: "#fff"
 };
 var styles11 = {
   input: {
@@ -1753,7 +1764,9 @@ var styles11 = {
     borderRadius: "6px",
     padding: "10px",
     outline: "none",
-    resize: "none"
+    resize: "none",
+    backgroundColor: others3.backgroundColor,
+    color: others3.textRelease
   },
   container: {
     width: "100%",
@@ -1769,7 +1782,8 @@ var styles11 = {
     transform: "translateY(-50%)",
     transition: "all .1s linear",
     padding: "0px 5px",
-    backgroundColor: "white"
+    backgroundColor: others3.backgroundColor,
+    color: others3.textRelease
   }
 };
 var TextArea_styles_default = styles11;
@@ -1792,8 +1806,11 @@ var TextArea = (_a) => {
   const [isFocus, setFocus] = useState10(false);
   const spanRef = useRef9(null);
   const inputRef = useRef9(null);
-  const inputBorder = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${others3.borderRelease}`;
-  const labelTextColor = isFocus ? `${options ? options.focusColor : others3.textFocus}` : `${others3.textRelease}`;
+  const backgroundColor = (options == null ? void 0 : options.backgroundColor) ? options.backgroundColor : others3.backgroundColor;
+  const textColor = (options == null ? void 0 : options.textColor) ? options.textColor : others3.textRelease;
+  const borderColor = (options == null ? void 0 : options.borderColor) ? options.borderColor : others3.borderRelease;
+  const borderWhenFocused = isFocus ? `${others3.border} ${options ? options.focusColor : others3.borderFocus}` : `${others3.border} ${borderColor}`;
+  const labelColorWhenFocused = isFocus ? `${(options == null ? void 0 : options.focusColor) ? options.focusColor : others3.textFocus}` : `${textColor}`;
   function spanPositionWhenFocused() {
     if (spanRef.current) {
       spanRef.current.style.top = others3.topFocus;
@@ -1832,7 +1849,9 @@ var TextArea = (_a) => {
         value,
         onChange: (e) => setValue(e.target.value),
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.input), {
-          border: inputBorder
+          border: borderWhenFocused,
+          backgroundColor,
+          color: textColor
         }),
         onFocus,
         onBlur: offFocus
@@ -1843,7 +1862,8 @@ var TextArea = (_a) => {
       {
         ref: spanRef,
         style: __spreadProps(__spreadValues({}, TextArea_styles_default.label), {
-          color: labelTextColor
+          color: labelColorWhenFocused,
+          backgroundColor
         }),
         onClick: focus,
         children: label
@@ -3707,6 +3727,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 +3795,6 @@ export {
   UploadImage_default as UploadImage,
   tools_default as tools,
   useAuthClient_default as useAuthClient,
-  useSession
+  useSession,
+  useThemeState
 };

package/package.json CHANGED Viewed

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