@space-man/react-theme-animation 1.0.1 → 1.0.3

package/README.md

@@ -43,16 +43,16 @@ Perfect for custom theme toggle buttons and complete control over animated theme
 ### Basic Theme Toggle
 
 ```tsx
-import { useThemeAnimation } from '@space-man/react-theme-animation';
+import { useThemeAnimation } from '@space-man/react-theme-animation'
 
 function ThemeToggle() {
-  const { theme, toggleTheme, ref } = useThemeAnimation();
+  const { theme, toggleTheme, ref } = useThemeAnimation()
 
   return (
     <button ref={ref} onClick={toggleTheme} className="theme-toggle-btn">
       {theme === 'light' ? '🌙' : '🌞'} {theme}
     </button>
-  );
+  )
 }
 ```
 
@@ -69,7 +69,7 @@ import {
   SpacemanThemeProvider,
   ThemeSwitcher,
   ThemeSelector,
-} from '@space-man/react-theme-animation';
+} from '@space-man/react-theme-animation'
 
 function App() {
   return (
@@ -88,7 +88,7 @@ function App() {
         </main>
       </div>
     </SpacemanThemeProvider>
-  );
+  )
 }
 ```
 
@@ -135,7 +135,7 @@ Hook to access theme state from SpacemanThemeProvider context.
 
 ```tsx
 const { theme, colorTheme, switchTheme, setColorTheme, switchThemeFromElement, ref } =
-  useSpacemanTheme();
+  useSpacemanTheme()
 ```
 
 #### Returns
@@ -161,7 +161,7 @@ const { theme, colorTheme, switchTheme, setColorTheme, toggleTheme, ref } = useT
   duration: 800,
   onThemeChange: theme => console.log('Theme changed:', theme),
   onColorThemeChange: colorTheme => console.log('Color changed:', colorTheme),
-});
+})
 ```
 
 #### Options
@@ -258,59 +258,59 @@ enum ThemeAnimationType {
 ### Types
 
 ```tsx
-type Theme = 'light' | 'dark' | 'system';
-type ColorTheme = string; // e.g., 'default', 'blue', 'green', etc.
+type Theme = 'light' | 'dark' | 'system'
+type ColorTheme = string // e.g., 'default', 'blue', 'green', etc.
 
 interface SpacemanThemeProviderProps {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  defaultColorTheme?: ColorTheme;
-  themes?: Theme[];
-  colorThemes?: ColorTheme[];
-  animationType?: ThemeAnimationType;
-  duration?: number;
-  blurAmount?: number;
-  onThemeChange?: (theme: Theme) => void;
-  onColorThemeChange?: (colorTheme: ColorTheme) => void;
+  children: React.ReactNode
+  defaultTheme?: Theme
+  defaultColorTheme?: ColorTheme
+  themes?: Theme[]
+  colorThemes?: ColorTheme[]
+  animationType?: ThemeAnimationType
+  duration?: number
+  blurAmount?: number
+  onThemeChange?: (theme: Theme) => void
+  onColorThemeChange?: (colorTheme: ColorTheme) => void
 }
 
 interface UseThemeAnimationProps {
-  themes?: Theme[];
-  colorThemes?: ColorTheme[];
-  theme?: Theme;
-  colorTheme?: ColorTheme;
-  animationType?: ThemeAnimationType;
-  duration?: number;
-  blurAmount?: number;
-  onThemeChange?: (theme: Theme) => void;
-  onColorThemeChange?: (colorTheme: ColorTheme) => void;
+  themes?: Theme[]
+  colorThemes?: ColorTheme[]
+  theme?: Theme
+  colorTheme?: ColorTheme
+  animationType?: ThemeAnimationType
+  duration?: number
+  blurAmount?: number
+  onThemeChange?: (theme: Theme) => void
+  onColorThemeChange?: (colorTheme: ColorTheme) => void
 }
 
 interface UseThemeAnimationReturn {
-  theme: Theme;
-  colorTheme: ColorTheme;
-  switchTheme: (theme: Theme) => Promise<void>;
-  setColorTheme: (colorTheme: ColorTheme) => void;
-  toggleTheme: () => Promise<void>;
-  ref: RefObject<HTMLElement>;
+  theme: Theme
+  colorTheme: ColorTheme
+  switchTheme: (theme: Theme) => Promise<void>
+  setColorTheme: (colorTheme: ColorTheme) => void
+  toggleTheme: () => Promise<void>
+  ref: RefObject<HTMLElement>
 }
 
 interface ThemeSwitcherProps {
-  themes?: Theme[];
-  currentTheme?: Theme;
-  onThemeChange?: (theme: Theme) => void;
-  animationType?: ThemeAnimationType;
-  duration?: number;
-  className?: string;
+  themes?: Theme[]
+  currentTheme?: Theme
+  onThemeChange?: (theme: Theme) => void
+  animationType?: ThemeAnimationType
+  duration?: number
+  className?: string
 }
 
 interface ThemeSelectorProps {
-  themes?: Theme[];
-  colorThemes?: ColorTheme[];
-  currentColorTheme?: ColorTheme;
-  onColorThemeChange?: (colorTheme: ColorTheme) => void;
-  animationType?: ThemeAnimationType;
-  duration?: number;
+  themes?: Theme[]
+  colorThemes?: ColorTheme[]
+  currentColorTheme?: ColorTheme
+  onColorThemeChange?: (colorTheme: ColorTheme) => void
+  animationType?: ThemeAnimationType
+  duration?: number
 }
 ```
 

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/components/ThemeSelector.js

@@ -24,9 +24,9 @@ const ThemeSelector = ({ themes = ['light', 'dark', 'system'], colorThemes = ['d
         onColorThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { colorTheme, setColorTheme } = isControlled ?
-        { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme } :
-        standaloneHook;
+    const { colorTheme, setColorTheme } = isControlled
+        ? { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme }
+        : standaloneHook;
     const handleColorThemeChange = (newColorTheme) => {
         setColorTheme(newColorTheme);
         // Also call the callback if provided

package/dist/cjs/components/ThemeSwitcher.js

@@ -11,7 +11,7 @@ const SunIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16
 const MoonIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
 const MonitorIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "16", y1: "21", y2: "21" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", x2: "12", y1: "17", y2: "21" })] }));
 const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter, onMouseLeave, buttonRef, }) => {
-    return ((0, jsx_runtime_1.jsxs)("button", { ref: isActive ? buttonRef : undefined, className: (0, clsx_1.clsx)('relative flex h-9 w-12 cursor-pointer items-center justify-center transition-all duration-200 ease-in-out', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: (event) => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: isActive ? buttonRef : undefined, className: (0, clsx_1.clsx)('relative flex h-9 w-12 cursor-pointer items-center justify-center transition-all duration-200 ease-in-out', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: event => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
             borderRadius: 'var(--radius)',
         }, children: [isHovered && ((0, jsx_runtime_1.jsx)(react_2.motion.div, { layoutId: "theme-hover-bg", className: "absolute inset-0 bg-muted backdrop-blur-sm", style: {
                     borderRadius: 'var(--radius)',
@@ -67,9 +67,9 @@ const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentTheme, onT
         onThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { ref, theme, switchTheme } = isControlled ?
-        { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme } :
-        standaloneHook;
+    const { ref, theme, switchTheme } = isControlled
+        ? { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme }
+        : standaloneHook;
     const [isMounted, setIsMounted] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         setIsMounted(true);

package/dist/cjs/components/ui/select.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
 declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
+    size?: 'sm' | 'default';
 }): import("react/jsx-runtime").JSX.Element;
 declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ui/select.js

@@ -58,26 +58,26 @@ function SelectValue({ ...props }) {
 const ChevronDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m6 9 6 6 6-6" }) }));
 const ChevronUpIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m18 15-6-6-6 6" }) }));
 const CheckIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M20 6 9 17l-5-5" }) }));
-function SelectTrigger({ className, size = "default", children, ...props }) {
+function SelectTrigger({ className, size = 'default', children, ...props }) {
     return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: (0, clsx_1.clsx)("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) })] }));
 }
-function SelectContent({ className, children, position = "popper", ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Content, { "data-slot": "select-content", className: (0, clsx_1.clsx)("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, clsx_1.clsx)("p-1", position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }) }) }));
+function SelectContent({ className, children, position = 'popper', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Content, { "data-slot": "select-content", className: (0, clsx_1.clsx)('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, clsx_1.clsx)('p-1', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }) }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { "data-slot": "select-label", className: (0, clsx_1.clsx)("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { "data-slot": "select-label", className: (0, clsx_1.clsx)('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
     return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Item, { "data-slot": "select-item", className: (0, clsx_1.clsx)("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(CheckIcon, {}) }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Separator, { "data-slot": "select-separator", className: (0, clsx_1.clsx)("-mx-1 my-1 h-px bg-muted", className), ...props }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Separator, { "data-slot": "select-separator", className: (0, clsx_1.clsx)('-mx-1 my-1 h-px bg-muted', className), ...props }));
 }
 function SelectScrollUpButton({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: (0, clsx_1.clsx)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronUpIcon, {}) }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: (0, clsx_1.clsx)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronUpIcon, {}) }));
 }
 function SelectScrollDownButton({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: (0, clsx_1.clsx)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) }));
+    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: (0, clsx_1.clsx)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) }));
 }

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/components/ThemeSelector.js

@@ -21,9 +21,9 @@ export const ThemeSelector = ({ themes = ['light', 'dark', 'system'], colorTheme
         onColorThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { colorTheme, setColorTheme } = isControlled ?
-        { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme } :
-        standaloneHook;
+    const { colorTheme, setColorTheme } = isControlled
+        ? { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme }
+        : standaloneHook;
     const handleColorThemeChange = (newColorTheme) => {
         setColorTheme(newColorTheme);
         // Also call the callback if provided

package/dist/esm/components/ThemeSwitcher.js

@@ -8,7 +8,7 @@ const SunIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 2
 const MoonIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
 const MonitorIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }), _jsx("line", { x1: "8", x2: "16", y1: "21", y2: "21" }), _jsx("line", { x1: "12", x2: "12", y1: "17", y2: "21" })] }));
 const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter, onMouseLeave, buttonRef, }) => {
-    return (_jsxs("button", { ref: isActive ? buttonRef : undefined, className: clsx('relative flex h-9 w-12 cursor-pointer items-center justify-center transition-all duration-200 ease-in-out', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: (event) => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
+    return (_jsxs("button", { ref: isActive ? buttonRef : undefined, className: clsx('relative flex h-9 w-12 cursor-pointer items-center justify-center transition-all duration-200 ease-in-out', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: event => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
             borderRadius: 'var(--radius)',
         }, children: [isHovered && (_jsx(motion.div, { layoutId: "theme-hover-bg", className: "absolute inset-0 bg-muted backdrop-blur-sm", style: {
                     borderRadius: 'var(--radius)',
@@ -64,9 +64,9 @@ export const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentThe
         onThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { ref, theme, switchTheme } = isControlled ?
-        { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme } :
-        standaloneHook;
+    const { ref, theme, switchTheme } = isControlled
+        ? { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme }
+        : standaloneHook;
     const [isMounted, setIsMounted] = useState(false);
     useEffect(() => {
         setIsMounted(true);

package/dist/esm/components/ui/select.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
 declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
+    size?: 'sm' | 'default';
 }): import("react/jsx-runtime").JSX.Element;
 declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ui/select.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { clsx } from "clsx";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { clsx } from 'clsx';
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -13,27 +13,27 @@ function SelectValue({ ...props }) {
 const ChevronDownIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
 const ChevronUpIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m18 15-6-6-6 6" }) }));
 const CheckIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
-function SelectTrigger({ className, size = "default", children, ...props }) {
+function SelectTrigger({ className, size = 'default', children, ...props }) {
     return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: clsx("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }));
 }
-function SelectContent({ className, children, position = "popper", ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { "data-slot": "select-content", className: clsx("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: _jsx(SelectPrimitive.Viewport, { className: clsx("p-1", position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }) }) }));
+function SelectContent({ className, children, position = 'popper', ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { "data-slot": "select-content", className: clsx('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: _jsx(SelectPrimitive.Viewport, { className: clsx('p-1', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }) }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: clsx("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props }));
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: clsx('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
     return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: clsx("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, {}) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: clsx("-mx-1 my-1 h-px bg-muted", className), ...props }));
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: clsx('-mx-1 my-1 h-px bg-muted', className), ...props }));
 }
 function SelectScrollUpButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: clsx("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, {}) }));
+    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: clsx('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUpIcon, {}) }));
 }
 function SelectScrollDownButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: clsx("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: clsx('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDownIcon, {}) }));
 }
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

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,21 +1,28 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "keywords": [
     "react",
-    "reactjs",
-    "hooks",
     "theme",
+    "dark mode",
+    "light mode",
+    "theme switching",
+    "view transitions",
+    "hooks",
     "animation",
     "switch",
     "typescript",
-    "nextjs",
     "dark",
     "light",
     "view-transition",
+    "view-transition-api",
+    "tailwind",
     "tailwindcss",
-    "shadcn"
+    "shadcn",
+    "reactjs",
+    "nextjs",
+    "vite"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -50,6 +57,8 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix . --ext .{js,jsx,ts,tsx}",
     "test": "echo \"Error: no test specified\" && exit 1",
+    "prettier:check": "prettier --check . --config ./.prettierrc",
+    "prettier:fix": "prettier --write . --config ./.prettierrc",
     "changeset": "changeset add --type patch",
     "changeset:patch": "changeset add --type patch",
     "changeset:feature": "changeset add --type minor",