@space-man/react-theme-animation 1.0.0 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# @spaceman/react-theme-animation
+# @space-man/react-theme-animation
 
 React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
 
@@ -20,7 +20,7 @@ React theme switching with smooth view transition animations, multi-theme suppor
 ## Installation
 
 ```bash
-npm install @spaceman/react-theme-animation
+npm install @space-man/react-theme-animation
 ```
 
 ## Usage Patterns
@@ -30,6 +30,10 @@ This library supports two main usage patterns:
 1. **Hook-Only Usage**: Direct hook usage for custom implementations
 2. **Provider Pattern**: Centralized state management (recommended)
 
+📚 **[See the complete Getting Started Guide](./getting-started.md)** for detailed examples, advanced configurations, and best practices.
+
+🚀 **[View the Code Example](./example/)** to see this package in action with a complete implementation of both hook and provider pattern.
+
 ---
 
 ## 1. Hook-Only Usage For Light and Dark mode animation
@@ -39,7 +43,7 @@ Perfect for custom theme toggle buttons and complete control over animated theme
 ### Basic Theme Toggle
 
 ```tsx
-import { useThemeAnimation } from '@spaceman/react-theme-animation';
+import { useThemeAnimation } from '@space-man/react-theme-animation';
 
 function ThemeToggle() {
   const { theme, toggleTheme, ref } = useThemeAnimation();
@@ -65,7 +69,7 @@ import {
   SpacemanThemeProvider,
   ThemeSwitcher,
   ThemeSelector,
-} from '@spaceman/react-theme-animation';
+} from '@space-man/react-theme-animation';
 
 function App() {
   return (
@@ -88,249 +92,6 @@ function App() {
 }
 ```
 
-### Advanced Provider Configuration
-
-```tsx
-import {
-  SpacemanThemeProvider,
-  ThemeSwitcher,
-  ThemeSelector,
-  ThemeAnimationType,
-} from '@spaceman/react-theme-animation';
-
-function App() {
-  return (
-    <SpacemanThemeProvider
-      defaultTheme="system"
-      defaultColorTheme="blue"
-      themes={['light', 'dark', 'system']}
-      colorThemes={['default', 'blue', 'green', 'purple', 'red']}
-      animationType={ThemeAnimationType.BLUR_CIRCLE}
-      blurAmount={10}
-      duration={1000}
-      onThemeChange={theme => {
-        // Analytics, localStorage, etc.
-        console.log('Global theme changed:', theme);
-      }}
-      onColorThemeChange={colorTheme => {
-        console.log('Global color theme changed:', colorTheme);
-      }}
-    >
-      <AppLayout />
-    </SpacemanThemeProvider>
-  );
-}
-
-function AppLayout() {
-  return (
-    <div className="app-layout">
-      <Header />
-      <Sidebar />
-      <MainContent />
-    </div>
-  );
-}
-
-function Header() {
-  return (
-    <header className="header">
-      <h1>My App</h1>
-      <ThemeSwitcher className="ml-auto" />
-    </header>
-  );
-}
-
-function Sidebar() {
-  return (
-    <aside className="sidebar">
-      <h2>Settings</h2>
-      <ThemeSelector colorThemes={['default', 'blue', 'green', 'purple', 'red']} />
-    </aside>
-  );
-}
-```
-
-### Using the Provider Hook
-
-Access theme state anywhere in your component tree. This hook also enables you to set a reference point for the animation to start from.
-
-```tsx
-import { useSpacemanTheme } from '@spaceman/react-theme-animation';
-
-function ThemeStatus() {
-  const { theme, colorTheme, switchTheme, setColorTheme, switchThemeFromElement } =
-    useSpacemanTheme();
-
-  const handleCustomThemeSwitch = event => {
-    // Animate from the clicked element
-    switchThemeFromElement('dark', event.currentTarget);
-  };
-
-  return (
-    <div className="theme-status">
-      <p>Current theme: {theme}</p>
-      <p>Current color: {colorTheme}</p>
-
-      <button onClick={handleCustomThemeSwitch}>Switch to Dark (with animation)</button>
-    </div>
-  );
-}
-```
-
----
-
-## Complete Example: Advanced Theme System
-
-Here's a complete example showcasing all features:
-
-```tsx
-import React from 'react';
-import {
-  SpacemanThemeProvider,
-  ThemeSwitcher,
-  ThemeSelector,
-  useSpacemanTheme,
-  ThemeAnimationType,
-} from '@spaceman/react-theme-animation';
-
-// Main App with Provider
-function App() {
-  return (
-    <SpacemanThemeProvider
-      defaultTheme="system"
-      defaultColorTheme="blue"
-      themes={['light', 'dark', 'system']}
-      colorThemes={['default', 'blue', 'green', 'purple', 'red', 'orange']}
-      animationType={ThemeAnimationType.CIRCLE}
-      duration={800}
-      onThemeChange={theme => {
-        // Save to localStorage, analytics, etc.
-        localStorage.setItem('preferred-theme', theme);
-      }}
-      onColorThemeChange={colorTheme => {
-        localStorage.setItem('preferred-color-theme', colorTheme);
-      }}
-    >
-      <AppContent />
-    </SpacemanThemeProvider>
-  );
-}
-
-// App Layout
-function AppContent() {
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <Header />
-      <div className="container mx-auto px-4 py-8">
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
-          <Sidebar />
-          <MainContent />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Header with Theme Switcher
-function Header() {
-  return (
-    <header className="border-b bg-card">
-      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Theme Demo</h1>
-        <div className="flex items-center gap-4">
-          <ThemeSwitcher className="rounded-lg" />
-        </div>
-      </div>
-    </header>
-  );
-}
-
-// Sidebar with Theme Selector
-function Sidebar() {
-  return (
-    <aside className="space-y-6">
-      <div className="bg-card p-6 rounded-lg border">
-        <h2 className="text-lg font-semibold mb-4">Theme Settings</h2>
-        <div className="space-y-4">
-          <div>
-            <label className="text-sm font-medium mb-2 block">Color Theme</label>
-            <ThemeSelector colorThemes={['default', 'blue', 'green', 'purple', 'red', 'orange']} />
-          </div>
-        </div>
-      </div>
-
-      <ThemeInfo />
-    </aside>
-  );
-}
-
-// Component using the theme hook
-function ThemeInfo() {
-  const { theme, colorTheme, switchThemeFromElement } = useSpacemanTheme();
-
-  const quickSwitchTheme = (newTheme, event) => {
-    switchThemeFromElement(newTheme, event.currentTarget);
-  };
-
-  return (
-    <div className="bg-card p-6 rounded-lg border">
-      <h3 className="text-lg font-semibold mb-4">Current State</h3>
-      <div className="space-y-2 text-sm">
-        <p>
-          <strong>Theme:</strong> {theme}
-        </p>
-        <p>
-          <strong>Color:</strong> {colorTheme}
-        </p>
-      </div>
-
-      <div className="mt-4 space-y-2">
-        <p className="text-sm font-medium">Quick Switch:</p>
-        <div className="flex gap-2">
-          {['light', 'dark'].map(t => (
-            <button
-              key={t}
-              onClick={e => quickSwitchTheme(t, e)}
-              className="px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
-            >
-              {t}
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Main content area
-function MainContent() {
-  return (
-    <main className="lg:col-span-3 space-y-6">
-      <div className="bg-card p-6 rounded-lg border">
-        <h2 className="text-xl font-semibold mb-4">Welcome to Theme Demo</h2>
-        <p className="text-muted-foreground">
-          This demo showcases the spaceman-react-theme-animation library with synchronized theme
-          state, smooth animations, and multiple color themes.
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {[1, 2, 3, 4].map(i => (
-          <div key={i} className="bg-card p-6 rounded-lg border">
-            <h3 className="font-semibold mb-2">Card {i}</h3>
-            <p className="text-sm text-muted-foreground">
-              Sample content that adapts to the current theme and color scheme.
-            </p>
-          </div>
-        ))}
-      </div>
-    </main>
-  );
-}
-
-export default App;
-```
-
 ---
 
 ## API Reference

package/dist/cjs/components/SpacemanThemeProvider.js

@@ -21,7 +21,7 @@ const SpacemanThemeContext = (0, react_1.createContext)(undefined);
  * @param duration - Animation duration in milliseconds (default: 750)
  */
 const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, }) => {
-    // This is our master hook instance - the single source of truth
+    const [mounted, setMounted] = (0, react_1.useState)(false);
     const themeState = (0, use_theme_animation_1.useThemeAnimation)({
         themes,
         colorThemes,
@@ -30,39 +30,47 @@ const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'system'],
         animationType,
         duration,
     });
-    /**
-     * Switch theme with animation originating from a specific element
-     *
-     * @param theme - Theme to switch to
-     * @param element - HTML button element to use as animation origin
-     */
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
     const switchThemeFromElement = async (theme, element) => {
-        // Temporarily set the ref to the clicked element
         if (themeState.ref.current) {
             const originalRef = themeState.ref.current;
-            // Use Object.defineProperty to temporarily override the ref
             Object.defineProperty(themeState.ref, 'current', {
                 value: element,
                 writable: true,
-                configurable: true
+                configurable: true,
             });
             await themeState.switchTheme(theme);
-            // Restore the original ref after animation
             Object.defineProperty(themeState.ref, 'current', {
                 value: originalRef,
                 writable: true,
-                configurable: true
+                configurable: true,
             });
         }
         else {
             Object.defineProperty(themeState.ref, 'current', {
                 value: element,
                 writable: true,
-                configurable: true
+                configurable: true,
             });
             await themeState.switchTheme(theme);
         }
     };
+    if (!mounted) {
+        const loadingContextValue = {
+            theme: defaultTheme,
+            colorTheme: defaultColorTheme,
+            resolvedTheme: defaultTheme === 'dark' ? 'dark' : 'light',
+            setTheme: () => { },
+            setColorTheme: () => { },
+            toggleTheme: async () => { },
+            switchTheme: async () => { },
+            switchThemeFromElement: async () => { },
+            ref: { current: null },
+        };
+        return ((0, jsx_runtime_1.jsx)(SpacemanThemeContext.Provider, { value: loadingContextValue, children: children }));
+    }
     const contextValue = {
         theme: themeState.theme,
         colorTheme: themeState.colorTheme,

package/dist/cjs/hooks/use-theme-animation.js

@@ -10,21 +10,35 @@ const useThemeAnimation = (props = {}) => {
     const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = types_1.ThemeAnimationType.CIRCLE, blurAmount = 2, styleId = 'spaceman-theme-style', themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', globalClassName = 'dark', colorThemePrefix = 'theme-', storageKey = 'theme', colorStorageKey = 'color-theme', theme: externalTheme, colorTheme: externalColorTheme, onThemeChange, onColorThemeChange, } = props;
     const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
     const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
+    const [mounted, setMounted] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         (0, animations_1.injectBaseStyles)();
     }, []);
     const [internalTheme, setInternalTheme] = (0, react_1.useState)(() => {
         if (!isBrowser)
             return defaultTheme;
-        const saved = localStorage.getItem(storageKey);
-        return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
+        return defaultTheme;
     });
     const [internalColorTheme, setInternalColorTheme] = (0, react_1.useState)(() => {
         if (!isBrowser)
             return defaultColorTheme;
-        const saved = localStorage.getItem(colorStorageKey);
-        return saved && colorThemes.indexOf(saved) !== -1 ? saved : defaultColorTheme;
+        return defaultColorTheme;
     });
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+        if (isBrowser && !externalTheme) {
+            const saved = localStorage.getItem(storageKey);
+            if (saved && themes.indexOf(saved) !== -1) {
+                setInternalTheme(saved);
+            }
+        }
+        if (isBrowser && !externalColorTheme) {
+            const saved = localStorage.getItem(colorStorageKey);
+            if (saved && colorThemes.indexOf(saved) !== -1) {
+                setInternalColorTheme(saved);
+            }
+        }
+    }, []);
     const currentTheme = externalTheme ?? internalTheme;
     const currentColorTheme = externalColorTheme ?? internalColorTheme;
     const [, setSystemTheme] = (0, react_1.useState)(() => (0, animations_1.getSystemTheme)());
@@ -39,23 +53,19 @@ const useThemeAnimation = (props = {}) => {
     }, []);
     // Apply theme classes to DOM
     (0, react_1.useEffect)(() => {
-        if (!isBrowser)
+        if (!isBrowser || !mounted)
             return;
-        // Apply theme class (light/dark) - use resolvedTheme instead of manual resolution
         if (resolvedTheme === 'dark') {
             document.documentElement.classList.add(globalClassName);
         }
         else {
             document.documentElement.classList.remove(globalClassName);
         }
-        // Apply color theme classes
-        // Remove all existing color theme classes
         colorThemes.forEach(theme => {
             document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
         });
-        // Add current color theme class
         document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes]);
+    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes, mounted]);
     const ref = (0, react_1.useRef)(null);
     const setTheme = (0, react_1.useCallback)((newTheme) => {
         // Always save to localStorage
@@ -119,22 +129,21 @@ const useThemeAnimation = (props = {}) => {
         await switchTheme(newTheme);
     }, [resolvedTheme, switchTheme]);
     (0, react_1.useEffect)(() => {
-        if (!isBrowser)
+        if (!isBrowser || !mounted)
             return;
-        const root = document.documentElement;
         if (resolvedTheme === 'dark') {
-            root.classList.add(globalClassName);
+            document.documentElement.classList.add(globalClassName);
         }
         else {
-            root.classList.remove(globalClassName);
+            document.documentElement.classList.remove(globalClassName);
         }
         colorThemes.forEach(theme => {
-            root.classList.remove(`${colorThemePrefix}${theme}`);
+            document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
         });
         if (currentColorTheme !== 'default') {
-            root.classList.add(`${colorThemePrefix}${currentColorTheme}`);
+            document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
         }
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes]);
+    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes, mounted]);
     return {
         ref,
         theme: currentTheme,

package/dist/esm/components/SpacemanThemeProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useState, useEffect } from 'react';
 import { useThemeAnimation } from '../hooks/use-theme-animation';
 import { ThemeAnimationType } from '../types';
 const SpacemanThemeContext = createContext(undefined);
@@ -18,7 +18,7 @@ const SpacemanThemeContext = createContext(undefined);
  * @param duration - Animation duration in milliseconds (default: 750)
  */
 export const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = ThemeAnimationType.CIRCLE, duration = 750, }) => {
-    // This is our master hook instance - the single source of truth
+    const [mounted, setMounted] = useState(false);
     const themeState = useThemeAnimation({
         themes,
         colorThemes,
@@ -27,39 +27,47 @@ export const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'sy
         animationType,
         duration,
     });
-    /**
-     * Switch theme with animation originating from a specific element
-     *
-     * @param theme - Theme to switch to
-     * @param element - HTML button element to use as animation origin
-     */
+    useEffect(() => {
+        setMounted(true);
+    }, []);
     const switchThemeFromElement = async (theme, element) => {
-        // Temporarily set the ref to the clicked element
         if (themeState.ref.current) {
             const originalRef = themeState.ref.current;
-            // Use Object.defineProperty to temporarily override the ref
             Object.defineProperty(themeState.ref, 'current', {
                 value: element,
                 writable: true,
-                configurable: true
+                configurable: true,
             });
             await themeState.switchTheme(theme);
-            // Restore the original ref after animation
             Object.defineProperty(themeState.ref, 'current', {
                 value: originalRef,
                 writable: true,
-                configurable: true
+                configurable: true,
             });
         }
         else {
             Object.defineProperty(themeState.ref, 'current', {
                 value: element,
                 writable: true,
-                configurable: true
+                configurable: true,
             });
             await themeState.switchTheme(theme);
         }
     };
+    if (!mounted) {
+        const loadingContextValue = {
+            theme: defaultTheme,
+            colorTheme: defaultColorTheme,
+            resolvedTheme: defaultTheme === 'dark' ? 'dark' : 'light',
+            setTheme: () => { },
+            setColorTheme: () => { },
+            toggleTheme: async () => { },
+            switchTheme: async () => { },
+            switchThemeFromElement: async () => { },
+            ref: { current: null },
+        };
+        return (_jsx(SpacemanThemeContext.Provider, { value: loadingContextValue, children: children }));
+    }
     const contextValue = {
         theme: themeState.theme,
         colorTheme: themeState.colorTheme,

package/dist/esm/hooks/use-theme-animation.js

@@ -7,21 +7,35 @@ export const useThemeAnimation = (props = {}) => {
     const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = ThemeAnimationType.CIRCLE, blurAmount = 2, styleId = 'spaceman-theme-style', themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', globalClassName = 'dark', colorThemePrefix = 'theme-', storageKey = 'theme', colorStorageKey = 'color-theme', theme: externalTheme, colorTheme: externalColorTheme, onThemeChange, onColorThemeChange, } = props;
     const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
     const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
+    const [mounted, setMounted] = useState(false);
     useEffect(() => {
         injectBaseStyles();
     }, []);
     const [internalTheme, setInternalTheme] = useState(() => {
         if (!isBrowser)
             return defaultTheme;
-        const saved = localStorage.getItem(storageKey);
-        return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
+        return defaultTheme;
     });
     const [internalColorTheme, setInternalColorTheme] = useState(() => {
         if (!isBrowser)
             return defaultColorTheme;
-        const saved = localStorage.getItem(colorStorageKey);
-        return saved && colorThemes.indexOf(saved) !== -1 ? saved : defaultColorTheme;
+        return defaultColorTheme;
     });
+    useEffect(() => {
+        setMounted(true);
+        if (isBrowser && !externalTheme) {
+            const saved = localStorage.getItem(storageKey);
+            if (saved && themes.indexOf(saved) !== -1) {
+                setInternalTheme(saved);
+            }
+        }
+        if (isBrowser && !externalColorTheme) {
+            const saved = localStorage.getItem(colorStorageKey);
+            if (saved && colorThemes.indexOf(saved) !== -1) {
+                setInternalColorTheme(saved);
+            }
+        }
+    }, []);
     const currentTheme = externalTheme ?? internalTheme;
     const currentColorTheme = externalColorTheme ?? internalColorTheme;
     const [, setSystemTheme] = useState(() => getSystemTheme());
@@ -36,23 +50,19 @@ export const useThemeAnimation = (props = {}) => {
     }, []);
     // Apply theme classes to DOM
     useEffect(() => {
-        if (!isBrowser)
+        if (!isBrowser || !mounted)
             return;
-        // Apply theme class (light/dark) - use resolvedTheme instead of manual resolution
         if (resolvedTheme === 'dark') {
             document.documentElement.classList.add(globalClassName);
         }
         else {
             document.documentElement.classList.remove(globalClassName);
         }
-        // Apply color theme classes
-        // Remove all existing color theme classes
         colorThemes.forEach(theme => {
             document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
         });
-        // Add current color theme class
         document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes]);
+    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes, mounted]);
     const ref = useRef(null);
     const setTheme = useCallback((newTheme) => {
         // Always save to localStorage
@@ -116,22 +126,21 @@ export const useThemeAnimation = (props = {}) => {
         await switchTheme(newTheme);
     }, [resolvedTheme, switchTheme]);
     useEffect(() => {
-        if (!isBrowser)
+        if (!isBrowser || !mounted)
             return;
-        const root = document.documentElement;
         if (resolvedTheme === 'dark') {
-            root.classList.add(globalClassName);
+            document.documentElement.classList.add(globalClassName);
         }
         else {
-            root.classList.remove(globalClassName);
+            document.documentElement.classList.remove(globalClassName);
         }
         colorThemes.forEach(theme => {
-            root.classList.remove(`${colorThemePrefix}${theme}`);
+            document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
         });
         if (currentColorTheme !== 'default') {
-            root.classList.add(`${colorThemePrefix}${currentColorTheme}`);
+            document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
         }
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes]);
+    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes, mounted]);
     return {
         ref,
         theme: currentTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "keywords": [
     "react",
@@ -49,7 +49,14 @@
     "format": "prettier --write . --config ./.prettierrc",
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix . --ext .{js,jsx,ts,tsx}",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "changeset": "changeset add --type patch",
+    "changeset:patch": "changeset add --type patch",
+    "changeset:feature": "changeset add --type minor",
+    "changeset:breaking": "changeset add --type major",
+    "changeset:custom": "changeset",
+    "version-packages": "changeset version",
+    "release": "npm run build && changeset publish"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -58,6 +65,7 @@
     "@radix-ui/react-select": ">=2"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.27.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.15.0",