stoop 0.3.0 → 0.4.0

package/dist/api/theme-provider.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Theme Provider component and hook.
+ * Manages theme state, localStorage persistence, cookie sync, and centralized theme variable updates.
+ * Includes the useTheme hook for accessing theme management context.
+ */
+import { type ComponentType, type Context } from "react";
+import type { ProviderProps, Theme, ThemeContextValue, ThemeManagementContextValue } from "../types";
+/**
+ * Creates a Provider component for theme management.
+ *
+ * @param themes - Map of theme names to theme objects
+ * @param defaultTheme - Default theme object
+ * @param prefix - Optional prefix for CSS variable scoping
+ * @param globalCss - Optional global CSS object from config
+ * @param globalCssFunction - Optional globalCss function from createStoop
+ * @returns Provider component, theme context, and theme management context
+ *
+ * @remarks
+ * To prevent FOUC (Flash of Unstyled Content) when a user has a non-default theme stored,
+ * call `preloadTheme()` from your stoop instance in a script tag before React hydrates:
+ *
+ * ```html
+ * <script>
+ *   // Read theme from storage and preload before React renders
+ *   const storedTheme = localStorage.getItem('stoop-theme') || 'light';
+ *   stoopInstance.preloadTheme(storedTheme);
+ * </script>
+ * ```
+ */
+export declare function createProvider(themes: Record<string, Theme>, defaultTheme: Theme, prefix?: string, globalCss?: import("../types").CSS, globalCssFunction?: import("../types").GlobalCSSFunction): {
+    Provider: ComponentType<ProviderProps>;
+    ThemeContext: Context<ThemeContextValue | null>;
+    ThemeManagementContext: Context<ThemeManagementContextValue | null>;
+};
+/**
+ * Creates a useTheme hook for a specific theme management context.
+ *
+ * @param ThemeManagementContext - React context for theme management
+ * @returns Hook function that returns theme management context value
+ */
+export declare function createUseThemeHook(ThemeManagementContext: Context<ThemeManagementContextValue | null>): () => ThemeManagementContextValue;

package/dist/api/theme-provider.js

@@ -0,0 +1,223 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Theme Provider component and hook.
+ * Manages theme state, localStorage persistence, cookie sync, and centralized theme variable updates.
+ * Includes the useTheme hook for accessing theme management context.
+ */
+import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { injectAllThemes } from "../core/theme-manager";
+import { isBrowser, isProduction } from "../utils/helpers";
+import { getCookie, setCookie, getFromStorage, setInStorage } from "../utils/storage";
+/**
+ * Syncs a theme value between cookie and localStorage.
+ * If cookie exists, syncs to localStorage. If localStorage exists, syncs to cookie.
+ *
+ * @param value - Theme value to sync
+ * @param cookieKey - Cookie key (if undefined, cookie sync is skipped)
+ * @param storageKey - LocalStorage key
+ */
+function syncThemeStorage(value, cookieKey, storageKey) {
+    if (!isBrowser()) {
+        return;
+    }
+    const cookieValue = cookieKey ? getCookie(cookieKey) : null;
+    const localStorageResult = getFromStorage(storageKey);
+    const localStorageValue = localStorageResult.success ? localStorageResult.value : null;
+    // Sync cookie -> localStorage
+    if (cookieValue === value && localStorageValue !== value) {
+        setInStorage(storageKey, value);
+    }
+    // Sync localStorage -> cookie
+    if (localStorageValue === value && cookieKey && cookieValue !== value) {
+        setCookie(cookieKey, value);
+    }
+}
+/**
+ * Reads theme from cookie or localStorage, preferring cookie if available.
+ *
+ * @param cookieKey - Cookie key (if undefined, cookie is not checked)
+ * @param storageKey - LocalStorage key
+ * @param themes - Available themes map for validation
+ * @returns Theme name or null if not found or invalid
+ */
+function readThemeFromStorage(cookieKey, storageKey, themes) {
+    if (!isBrowser()) {
+        return null;
+    }
+    // Try cookie first if cookieKey is provided
+    if (cookieKey !== undefined) {
+        const cookieValue = getCookie(cookieKey);
+        if (cookieValue && themes[cookieValue]) {
+            return cookieValue;
+        }
+    }
+    // Fall back to localStorage
+    const storageResult = getFromStorage(storageKey);
+    const stored = storageResult.success ? storageResult.value : null;
+    if (stored && themes[stored]) {
+        return stored;
+    }
+    return null;
+}
+/**
+ * Creates a Provider component for theme management.
+ *
+ * @param themes - Map of theme names to theme objects
+ * @param defaultTheme - Default theme object
+ * @param prefix - Optional prefix for CSS variable scoping
+ * @param globalCss - Optional global CSS object from config
+ * @param globalCssFunction - Optional globalCss function from createStoop
+ * @returns Provider component, theme context, and theme management context
+ *
+ * @remarks
+ * To prevent FOUC (Flash of Unstyled Content) when a user has a non-default theme stored,
+ * call `preloadTheme()` from your stoop instance in a script tag before React hydrates:
+ *
+ * ```html
+ * <script>
+ *   // Read theme from storage and preload before React renders
+ *   const storedTheme = localStorage.getItem('stoop-theme') || 'light';
+ *   stoopInstance.preloadTheme(storedTheme);
+ * </script>
+ * ```
+ */
+export function createProvider(themes, defaultTheme, prefix = "stoop", globalCss, globalCssFunction) {
+    const ThemeContext = createContext(null);
+    const ThemeManagementContext = createContext(null);
+    const availableThemeNames = Object.keys(themes);
+    const firstThemeName = availableThemeNames[0] || "default";
+    // Create global styles function from config if provided
+    const configGlobalStyles = globalCss && globalCssFunction ? globalCssFunction(globalCss) : undefined;
+    function Provider({ attribute = "data-theme", children, cookieKey, defaultTheme: defaultThemeProp, storageKey = "stoop-theme", }) {
+        // SSR-safe initialization: always start with default theme to match SSR
+        // This prevents hydration mismatch - server always renders with default theme
+        // Hydration will happen in useLayoutEffect to update to stored theme
+        const [themeName, setThemeNameState] = useState(defaultThemeProp || firstThemeName);
+        // Track if hydration has occurred to prevent re-running hydration effect
+        const hasHydratedRef = useRef(false);
+        // Hydrate from cookie/localStorage after mount to prevent hydration mismatch
+        // Only run once on mount - storage changes are handled by the storage event listener
+        useLayoutEffect(() => {
+            if (!isBrowser() || hasHydratedRef.current) {
+                return;
+            }
+            const stored = readThemeFromStorage(cookieKey, storageKey, themes);
+            if (stored) {
+                // Sync between cookie and localStorage
+                syncThemeStorage(stored, cookieKey, storageKey);
+                // Only update if different from initial state to avoid unnecessary re-render
+                if (stored !== themeName) {
+                    setThemeNameState(stored);
+                }
+            }
+            hasHydratedRef.current = true;
+        }, [cookieKey, storageKey, themes]); // Removed themeName from deps - only run once on mount
+        // Listen for storage changes from other tabs/windows
+        useLayoutEffect(() => {
+            if (!isBrowser()) {
+                return;
+            }
+            const handleStorageChange = (e) => {
+                if (e.key === storageKey && e.newValue && themes[e.newValue] && e.newValue !== themeName) {
+                    setThemeNameState(e.newValue);
+                    // Sync to cookie if cookieKey is provided
+                    syncThemeStorage(e.newValue, cookieKey, storageKey);
+                }
+            };
+            window.addEventListener("storage", handleStorageChange);
+            return () => {
+                window.removeEventListener("storage", handleStorageChange);
+            };
+        }, [storageKey, cookieKey, themeName, themes]);
+        const currentTheme = useMemo(() => {
+            return themes[themeName] || themes[defaultThemeProp || firstThemeName] || defaultTheme;
+        }, [themeName, defaultThemeProp, firstThemeName, themes, defaultTheme]);
+        // Track if themes and global styles have been injected
+        const themesInjectedRef = useRef(false);
+        const globalStylesInjectedRef = useRef(false);
+        // Inject all theme CSS variables once on mount (before global styles and theme switching)
+        // This ensures all themes are available simultaneously via attribute selectors
+        useLayoutEffect(() => {
+            if (!isBrowser() || themesInjectedRef.current) {
+                return;
+            }
+            // Inject all themes using attribute selectors
+            // This allows instant theme switching by only changing the data-theme attribute
+            injectAllThemes(themes, prefix, attribute);
+            themesInjectedRef.current = true;
+        }, [themes, prefix, attribute]);
+        // Inject global styles once on mount (after themes are injected)
+        useLayoutEffect(() => {
+            if (!isBrowser() || globalStylesInjectedRef.current) {
+                return;
+            }
+            // Inject global styles from config
+            // These use CSS variables, so they'll automatically work with all themes
+            if (configGlobalStyles) {
+                configGlobalStyles();
+                globalStylesInjectedRef.current = true;
+            }
+        }, [configGlobalStyles]);
+        // Update data-theme attribute when theme changes
+        // No need to update CSS variables since all themes are already injected
+        useLayoutEffect(() => {
+            if (!isBrowser()) {
+                return;
+            }
+            // Simply update the data-theme attribute - CSS variables are already available
+            if (attribute) {
+                document.documentElement.setAttribute(attribute, themeName);
+            }
+        }, [themeName, attribute]);
+        const setTheme = useCallback((newThemeName) => {
+            if (themes[newThemeName]) {
+                setThemeNameState(newThemeName);
+                setInStorage(storageKey, newThemeName);
+                syncThemeStorage(newThemeName, cookieKey, storageKey);
+            }
+            else if (!isProduction()) {
+                // eslint-disable-next-line no-console
+                console.warn(`[Stoop] Theme "${newThemeName}" not found. Available themes: ${availableThemeNames.join(", ")}`);
+            }
+        }, [storageKey, cookieKey, themes, availableThemeNames, themeName]);
+        const themeContextValue = useMemo(() => ({
+            theme: currentTheme,
+            themeName,
+        }), [currentTheme, themeName]);
+        const toggleTheme = useCallback(() => {
+            const currentIndex = availableThemeNames.indexOf(themeName);
+            const nextIndex = (currentIndex + 1) % availableThemeNames.length;
+            const newTheme = availableThemeNames[nextIndex];
+            setTheme(newTheme);
+        }, [themeName, setTheme, availableThemeNames]);
+        const managementContextValue = useMemo(() => ({
+            availableThemes: availableThemeNames,
+            setTheme,
+            theme: currentTheme,
+            themeName,
+            toggleTheme,
+        }), [currentTheme, themeName, setTheme, toggleTheme]);
+        return (_jsx(ThemeContext.Provider, { value: themeContextValue, children: _jsx(ThemeManagementContext.Provider, { value: managementContextValue, children: children }) }));
+    }
+    return {
+        Provider,
+        ThemeContext,
+        ThemeManagementContext,
+    };
+}
+/**
+ * Creates a useTheme hook for a specific theme management context.
+ *
+ * @param ThemeManagementContext - React context for theme management
+ * @returns Hook function that returns theme management context value
+ */
+export function createUseThemeHook(ThemeManagementContext) {
+    return function useTheme() {
+        const context = useContext(ThemeManagementContext);
+        if (!context) {
+            throw new Error("useTheme must be used within a Provider");
+        }
+        return context;
+    };
+}

package/dist/constants.d.ts

@@ -7,13 +7,23 @@ export declare const EMPTY_CSS: CSS;
 export declare const MAX_CSS_CACHE_SIZE = 10000;
 export declare const MAX_CLASS_NAME_CACHE_SIZE = 5000;
 export declare const MAX_CSS_NESTING_DEPTH = 10;
+/**
+ * Cache size limits for various LRU caches.
+ */
+export declare const KEYFRAME_CACHE_LIMIT = 500;
+export declare const SANITIZE_CACHE_SIZE_LIMIT = 1000;
+/**
+ * Cookie defaults.
+ */
+export declare const DEFAULT_COOKIE_MAX_AGE = 31536000;
+export declare const DEFAULT_COOKIE_PATH = "/";
 /**
  * Approved theme scales - only these scales are allowed in theme objects.
  */
 export declare const APPROVED_THEME_SCALES: ReadonlyArray<ThemeScale>;
 /**
  * Default themeMap mapping CSS properties to theme scales.
- * Covers 150+ common CSS properties for zero-config experience.
+ * Covers common CSS properties for zero-config experience.
  * Missing properties gracefully fallback to pattern-based auto-detection.
  */
 export declare const DEFAULT_THEME_MAP: Record<string, ThemeScale>;

package/dist/constants.js

@@ -6,6 +6,16 @@ export const EMPTY_CSS = Object.freeze({});
 export const MAX_CSS_CACHE_SIZE = 10000;
 export const MAX_CLASS_NAME_CACHE_SIZE = 5000;
 export const MAX_CSS_NESTING_DEPTH = 10;
+/**
+ * Cache size limits for various LRU caches.
+ */
+export const KEYFRAME_CACHE_LIMIT = 500;
+export const SANITIZE_CACHE_SIZE_LIMIT = 1000;
+/**
+ * Cookie defaults.
+ */
+export const DEFAULT_COOKIE_MAX_AGE = 31536000; // 1 year in seconds
+export const DEFAULT_COOKIE_PATH = "/";
 /**
  * Approved theme scales - only these scales are allowed in theme objects.
  */
@@ -26,7 +36,7 @@ export const APPROVED_THEME_SCALES = [
 ];
 /**
  * Default themeMap mapping CSS properties to theme scales.
- * Covers 150+ common CSS properties for zero-config experience.
+ * Covers common CSS properties for zero-config experience.
  * Missing properties gracefully fallback to pattern-based auto-detection.
  */
 export const DEFAULT_THEME_MAP = {

package/dist/core/compiler.d.ts

@@ -4,6 +4,17 @@
  * Handles nested selectors, media queries, styled component targeting, and theme tokens.
  */
 import type { CSS, Theme, ThemeScale, UtilityFunction } from "../types";
+/**
+ * Converts a CSS object to a CSS string with proper nesting and selectors.
+ * Handles pseudo-selectors, media queries, combinators, and styled component targeting.
+ *
+ * @param obj - CSS object to convert
+ * @param selector - Current selector context
+ * @param depth - Current nesting depth
+ * @param media - Media query breakpoints
+ * @returns CSS string
+ */
+export declare function cssObjectToString(obj: CSS, selector?: string, depth?: number, media?: Record<string, string>): string;
 /**
  * Compiles CSS objects into CSS strings and generates unique class names.
  * Handles nested selectors, media queries, styled component targeting, and theme tokens.

package/dist/core/compiler.js

@@ -5,25 +5,28 @@
  */
 import { MAX_CSS_NESTING_DEPTH, STOOP_COMPONENT_SYMBOL } from "../constants";
 import { injectCSS } from "../inject";
-import { escapeCSSValue, hash, sanitizeCSSPropertyName, sanitizeCSSSelector, sanitizeMediaQuery, sanitizePrefix, } from "../utils/string";
+import { isValidCSSObject, applyUtilities, isStyledComponentRef } from "../utils/helpers";
 import { replaceThemeTokensWithVars } from "../utils/theme";
-import { isValidCSSObject } from "../utils/type-guards";
-import { applyUtilities } from "../utils/utilities";
+import { escapeCSSValue, hash, sanitizeCSSPropertyName, sanitizeCSSSelector, sanitizeMediaQuery, sanitizePrefix, } from "../utils/theme-utils";
 import { classNameCache, cssStringCache } from "./cache";
 /**
  * Checks if a key/value pair represents a styled component reference.
+ * Uses shared isStyledComponentRef helper for consistency.
  *
  * @param key - Property key to check
  * @param value - Property value to check
  * @returns True if key/value represents a styled component reference
  */
 function isStyledComponentKey(key, value) {
+    // Check symbol key
     if (typeof key === "symbol" && key === STOOP_COMPONENT_SYMBOL) {
         return true;
     }
-    if (typeof value === "object" && value !== null && STOOP_COMPONENT_SYMBOL in value) {
+    // Check if value is a styled component ref (consolidated check)
+    if (isStyledComponentRef(value)) {
         return true;
     }
+    // Check string key prefix
     if (typeof key === "string" && key.startsWith("__STOOP_COMPONENT_")) {
         return true;
     }
@@ -58,7 +61,7 @@ function getClassNameFromKeyOrValue(key, value) {
  * @param media - Media query breakpoints
  * @returns CSS string
  */
-function cssObjectToString(obj, selector = "", depth = 0, media) {
+export function cssObjectToString(obj, selector = "", depth = 0, media) {
     if (!obj || typeof obj !== "object") {
         return "";
     }
@@ -162,8 +165,13 @@ function cssObjectToString(obj, selector = "", depth = 0, media) {
             }
         }
     }
-    const rule = cssProperties.length > 0 ? `${selector} { ${cssProperties.join(" ")} }` : "";
-    return rule + nestedRulesList.join("");
+    // Use array join pattern for better performance with large stylesheets
+    const parts = [];
+    if (cssProperties.length > 0) {
+        parts.push(`${selector} { ${cssProperties.join(" ")} }`);
+    }
+    parts.push(...nestedRulesList);
+    return parts.join("");
 }
 /**
  * Compiles CSS objects into CSS strings and generates unique class names.

package/dist/core/theme-manager.d.ts

@@ -14,9 +14,40 @@ import type { Theme } from "../types";
  */
 export declare function registerDefaultTheme(theme: Theme, prefix?: string): void;
 /**
- * Updates CSS custom properties when theme changes.
+ * Gets the default theme for a given prefix.
+ *
+ * @param prefix - Optional prefix for theme scoping
+ * @returns Default theme or null if not registered
+ */
+export declare function getDefaultTheme(prefix?: string): Theme | null;
+/**
+ * Core theme merging logic.
+ * Merges source theme into target theme, handling nested objects.
+ * Shared implementation used by both mergeWithDefaultTheme and createTheme.
+ *
+ * @param target - Target theme to merge into
+ * @param source - Source theme to merge from
+ * @returns Merged theme
+ */
+export declare function mergeThemes(target: Theme, source: Theme | Partial<Theme>): Theme;
+/**
+ * Merges a theme with the default theme if it's not already the default theme.
+ * This ensures all themes extend the default theme, keeping all original properties.
+ * Uses caching to avoid repeated merging of the same theme objects.
+ *
+ * @param theme - Theme to merge
+ * @param prefix - Optional prefix for theme scoping
+ * @returns Merged theme (or original if it's the default theme)
+ */
+export declare function mergeWithDefaultTheme(theme: Theme, prefix?: string): Theme;
+/**
+ * Injects CSS variables for all themes using attribute selectors.
+ * This allows all themes to be available simultaneously, with theme switching
+ * handled by changing the data-theme attribute. This prevents layout shifts
+ * and eliminates the need to replace CSS variables on theme change.
  *
- * @param theme - Theme object to generate CSS variables from
+ * @param themes - Map of theme names to theme objects
  * @param prefix - Optional prefix for CSS variable names
+ * @param attribute - Attribute name for theme selection (defaults to 'data-theme')
  */
-export declare function updateThemeVariables(theme: Theme, prefix?: string): void;
+export declare function injectAllThemes(themes: Record<string, Theme>, prefix?: string, attribute?: string): void;

package/dist/core/theme-manager.js

@@ -4,11 +4,10 @@
  * Ensures CSS variables are injected and kept in sync with theme updates.
  * Automatically merges themes with the default theme when applied.
  */
-import { injectThemeVariables } from "../inject";
-import { isBrowser } from "../utils/environment";
-import { generateCSSVariables, themesAreEqual } from "../utils/theme";
+import { injectAllThemeVariables } from "../inject";
+import { isBrowser } from "../utils/helpers";
+import { generateAllThemeVariables, themesAreEqual } from "../utils/theme";
 const defaultThemes = new Map();
-const mergedThemeCache = new WeakMap();
 /**
  * Registers the default theme for a given prefix.
  * Called automatically by createStoop.
@@ -26,10 +25,44 @@ export function registerDefaultTheme(theme, prefix = "stoop") {
  * @param prefix - Optional prefix for theme scoping
  * @returns Default theme or null if not registered
  */
-function getDefaultTheme(prefix = "stoop") {
+export function getDefaultTheme(prefix = "stoop") {
     const sanitizedPrefix = prefix || "";
     return defaultThemes.get(sanitizedPrefix) || null;
 }
+/**
+ * Core theme merging logic.
+ * Merges source theme into target theme, handling nested objects.
+ * Shared implementation used by both mergeWithDefaultTheme and createTheme.
+ *
+ * @param target - Target theme to merge into
+ * @param source - Source theme to merge from
+ * @returns Merged theme
+ */
+export function mergeThemes(target, source) {
+    const merged = { ...target };
+    const sourceKeys = Object.keys(source);
+    for (const key of sourceKeys) {
+        if (key === "media") {
+            continue;
+        }
+        const sourceValue = source[key];
+        const targetValue = target[key];
+        if (sourceValue &&
+            typeof sourceValue === "object" &&
+            !Array.isArray(sourceValue) &&
+            targetValue &&
+            typeof targetValue === "object" &&
+            !Array.isArray(targetValue)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            merged[key] = { ...targetValue, ...sourceValue };
+        }
+        else if (sourceValue !== undefined) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            merged[key] = sourceValue;
+        }
+    }
+    return merged;
+}
 /**
  * Merges a theme with the default theme if it's not already the default theme.
  * This ensures all themes extend the default theme, keeping all original properties.
@@ -39,7 +72,7 @@ function getDefaultTheme(prefix = "stoop") {
  * @param prefix - Optional prefix for theme scoping
  * @returns Merged theme (or original if it's the default theme)
  */
-function mergeWithDefaultTheme(theme, prefix = "stoop") {
+export function mergeWithDefaultTheme(theme, prefix = "stoop") {
     const defaultTheme = getDefaultTheme(prefix);
     if (!defaultTheme) {
         return theme;
@@ -47,51 +80,28 @@ function mergeWithDefaultTheme(theme, prefix = "stoop") {
     if (themesAreEqual(theme, defaultTheme)) {
         return theme;
     }
-    let prefixCache = mergedThemeCache.get(theme);
-    if (!prefixCache) {
-        prefixCache = new Map();
-        mergedThemeCache.set(theme, prefixCache);
-    }
-    const cached = prefixCache.get(prefix);
-    if (cached) {
-        return cached;
-    }
-    const merged = { ...defaultTheme };
-    const allThemeKeys = Object.keys(theme);
-    for (const key of allThemeKeys) {
-        if (key === "media") {
-            continue;
-        }
-        const themeValue = theme[key];
-        const defaultValue = defaultTheme[key];
-        if (themeValue &&
-            typeof themeValue === "object" &&
-            !Array.isArray(themeValue) &&
-            defaultValue &&
-            typeof defaultValue === "object" &&
-            !Array.isArray(defaultValue)) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            merged[key] = { ...defaultValue, ...themeValue };
-        }
-        else if (themeValue !== undefined) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            merged[key] = themeValue;
-        }
-    }
-    prefixCache.set(prefix, merged);
-    return merged;
+    // Merge theme with default theme
+    return mergeThemes(defaultTheme, theme);
 }
 /**
- * Updates CSS custom properties when theme changes.
+ * Injects CSS variables for all themes using attribute selectors.
+ * This allows all themes to be available simultaneously, with theme switching
+ * handled by changing the data-theme attribute. This prevents layout shifts
+ * and eliminates the need to replace CSS variables on theme change.
  *
- * @param theme - Theme object to generate CSS variables from
+ * @param themes - Map of theme names to theme objects
  * @param prefix - Optional prefix for CSS variable names
+ * @param attribute - Attribute name for theme selection (defaults to 'data-theme')
  */
-export function updateThemeVariables(theme, prefix = "stoop") {
+export function injectAllThemes(themes, prefix = "stoop", attribute = "data-theme") {
     if (!isBrowser()) {
         return;
     }
-    const mergedTheme = mergeWithDefaultTheme(theme, prefix);
-    const cssVars = generateCSSVariables(mergedTheme, prefix);
-    injectThemeVariables(cssVars, mergedTheme, prefix);
+    // Merge all themes with default theme
+    const mergedThemes = {};
+    for (const [themeName, theme] of Object.entries(themes)) {
+        mergedThemes[themeName] = mergeWithDefaultTheme(theme, prefix);
+    }
+    const allThemeVars = generateAllThemeVariables(mergedThemes, prefix, attribute);
+    injectAllThemeVariables(allThemeVars, prefix);
 }

package/dist/core/variants.js

@@ -26,7 +26,13 @@ export function applyVariants(variants, props, baseStyles) {
             hasVariants = true;
         }
     }
-    return hasVariants
-        ? { ...baseStyles, ...appliedVariantStyles.reduce((acc, style) => ({ ...acc, ...style }), {}) }
-        : baseStyles;
+    if (!hasVariants) {
+        return baseStyles;
+    }
+    // Merge all variant styles into a single object using spread for consistency
+    const mergedVariants = { ...appliedVariantStyles[0] };
+    for (let i = 1; i < appliedVariantStyles.length; i++) {
+        Object.assign(mergedVariants, appliedVariantStyles[i]);
+    }
+    return { ...baseStyles, ...mergedVariants };
 }

package/dist/create-stoop-internal.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Internal implementation for creating Stoop instances.
+ * This file is used by the SSR entry point and does NOT import React types at module level.
+ * React types are only imported conditionally when creating client instances.
+ */
+import type { CSS, StoopConfig, Theme, ThemeScale } from "./types";
+import { createCSSFunction, createKeyframesFunction } from "./api/core-api";
+import { createGlobalCSSFunction } from "./api/global-css";
+/**
+ * Shared implementation for creating Stoop instances.
+ * Handles common setup logic for both client and server instances.
+ * Exported for use in SSR entry point.
+ */
+export declare function createStoopBase(config: StoopConfig): {
+    config: StoopConfig;
+    createTheme: (overrides?: Partial<Theme>) => Theme;
+    css: ReturnType<typeof createCSSFunction>;
+    getCssText: (theme?: string | Theme) => string;
+    globalCss: ReturnType<typeof createGlobalCSSFunction>;
+    globalCssConfig: StoopConfig["globalCss"];
+    keyframes: ReturnType<typeof createKeyframesFunction>;
+    media: StoopConfig["media"];
+    mergedThemeMap: Record<string, ThemeScale>;
+    preloadTheme: (theme: string | Theme) => void;
+    sanitizedPrefix: string;
+    theme: Theme;
+    utils: StoopConfig["utils"];
+    validatedTheme: Theme;
+    warmCache: (styles: CSS[]) => void;
+};