@shohojdhara/atomix 0.3.6 → 0.3.7

package/dist/index.esm.js

@@ -15,6 +15,11 @@ import { createPortal } from "react-dom";
     UTILITY: "u-",
     LAYOUT: "l-",
     OBJECT: "o-"
+}, THEME_NAMING = {
+    BUTTON_PREFIX: "btn",
+    ICON_ELEMENT: "icon",
+    LABEL_ELEMENT: "label",
+    SPINNER_ELEMENT: "spinner"
 }, BUTTON = {
     BASE_CLASS: "c-btn",
     ICON_CLASS: "c-btn__icon",
@@ -1885,7 +1890,7 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
                                 timestamp: Date.now()
                             }), 
                             // Development mode: log cache size
-                            "production" !== process.env.NODE_ENV && sharedShaderCache.size;
+                            "undefined" != typeof process && "production" === process.env?.NODE_ENV || sharedShaderCache.size;
                         })(cacheKey, url), setShaderMapUrl(url);
                     };
                     "undefined" != typeof requestIdleCallback ? requestIdleCallback(generate, {
@@ -2198,9 +2203,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                     childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS && (extractedRadius = childRadius, 
                     extractionSource = "React children");
                 }
-                null !== extractedRadius && extractedRadius > 0 ? setDynamicCornerRadius(extractedRadius) : process.env.NODE_ENV;
+                null !== extractedRadius && extractedRadius > 0 ? setDynamicCornerRadius(extractedRadius) : "undefined" == typeof process || process.env;
             } catch (error) {
-                "production" !== process.env.NODE_ENV && debugCornerRadius && console.error("[AtomixGlass] Error extracting corner radius:", error);
+                "undefined" != typeof process && "production" === process.env?.NODE_ENV || !debugCornerRadius || console.error("[AtomixGlass] Error extracting corner radius:", error);
             }
         };
         extractRadius();
@@ -2275,7 +2280,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                             // For image backgrounds, assume medium luminance
                             totalLuminance += .5, validSamples++, hasValidBackground = !0);
                         } catch (styleError) {
-                            process.env.NODE_ENV;
+                            "undefined" == typeof process || process.env;
                         }
                         // Move to parent element for next iteration
                                                 if (!currentElement) break;
@@ -2314,7 +2319,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                     }
                 } catch (error) {
                     // Enhanced error logging with context
-                    "development" === process.env.NODE_ENV && console.warn("AtomixGlass: Error detecting background brightness:", error);
+                    "undefined" != typeof process && "development" !== process.env?.NODE_ENV || console.warn("AtomixGlass: Error detecting background brightness:", error);
                     const result = !1;
                     if (element && element.parentElement) {
                         const threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
@@ -2371,7 +2376,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         };
         // Calculate offset relative to this container
                 // React 18 automatically batches these updates
-        setInternalMouseOffset(newOffset), setInternalGlobalMousePosition(globalPos), "production" !== process.env.NODE_ENV && enablePerformanceMonitoring && performance.now();
+        setInternalMouseOffset(newOffset), setInternalGlobalMousePosition(globalPos), "undefined" != typeof process && "production" === process.env?.NODE_ENV || !enablePerformanceMonitoring || performance.now();
     }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects, enablePerformanceMonitoring ]);
     // Subscribe to shared mouse tracker
     useEffect((() => {
@@ -2511,10 +2516,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                 saturationBoost: validatedSaturationBoost + .4 * mouseInfluence
             };
             // Validate and apply object config values with proper clamping
-                        return process.env.NODE_ENV, finalConfig;
+                        return "undefined" == typeof process || process.env, finalConfig;
         }
         // Debug logging for non-object configs
-                return process.env.NODE_ENV, baseConfig;
+                return "undefined" == typeof process || process.env, baseConfig;
     }), [ overLight, getEffectiveOverLight, mouseOffset, isHovered, isActive, validateConfigValue, debugOverLight ]), handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleKeyDown = useCallback((e => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
     }), [ onClick ]), handleMouseMove = useCallback((_e => {}), []);
@@ -2625,7 +2630,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
  *   <div>Content with debug logging enabled</div>
  * </AtomixGlass>
  */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, cornerRadius: cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, disableEffects: disableEffects = !1, enableLiquidBlur: enableLiquidBlur = !1, enableBorderEffect: enableBorderEffect = !0, enableOverLightLayers: enableOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, enablePerformanceMonitoring: enablePerformanceMonitoring = !1, debugCornerRadius: debugCornerRadius = !1, debugOverLight: debugOverLight = !1}) {
-    const glassRef = useRef(null), contentRef = useRef(null), opacityCacheRef = useRef(null), rgbCacheRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveCornerRadius: effectiveCornerRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveDisableEffects: effectiveDisableEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+    const glassRef = useRef(null), contentRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveCornerRadius: effectiveCornerRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveDisableEffects: effectiveDisableEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
         cornerRadius: cornerRadius,
@@ -2642,143 +2647,51 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         debugOverLight: debugOverLight,
         enablePerformanceMonitoring: enablePerformanceMonitoring,
         children: children
-    }), isOverLight = overLightConfig.isOverLight, shouldRenderOverLightLayers = enableOverLightLayers && isOverLight;
-    // Read CSS custom properties once on mount and cache them
-    useEffect((() => {
-        if ("undefined" != typeof window && glassRef.current) try {
-            const computedStyle = window.getComputedStyle(glassRef.current);
-            // Cache opacity values
-                        if (!opacityCacheRef.current) {
-                const opacity50Value = computedStyle.getPropertyValue("--atomix-opacity-50").trim(), opacity40Value = computedStyle.getPropertyValue("--atomix-opacity-40").trim(), opacity80Value = computedStyle.getPropertyValue("--atomix-opacity-80").trim(), opacity0Value = computedStyle.getPropertyValue("--atomix-opacity-0").trim(), parseOpacity = (value, defaultValue) => {
-                    if (!value) return defaultValue;
-                    const parsed = parseFloat(value);
-                    return isNaN(parsed) ? defaultValue : parsed;
-                };
-                opacityCacheRef.current = {
-                    opacity50: parseOpacity(opacity50Value, .5),
-                    opacity40: parseOpacity(opacity40Value, .4),
-                    opacity80: parseOpacity(opacity80Value, .8),
-                    opacity0: parseOpacity(opacity0Value, 0)
-                };
-            }
-            // Cache RGB color values from design tokens
-                        if (!rgbCacheRef.current) {
-                // Try to read from design tokens, fallback to defaults
-                const whiteRgbValue = computedStyle.getPropertyValue("--atomix-light-rgb").trim() || computedStyle.getPropertyValue("--atomix-white-rgb").trim() || "", blackRgbValue = computedStyle.getPropertyValue("--atomix-dark-rgb").trim() || computedStyle.getPropertyValue("--atomix-black-rgb").trim() || "";
-                rgbCacheRef.current = {
-                    whiteRgb: whiteRgbValue || "255, 255, 255",
-                    // Fallback to white RGB
-                    blackRgb: blackRgbValue || "0, 0, 0"
-                };
-            }
-        } catch (error) {
-            // Fallback to defaults if reading fails
-            opacityCacheRef.current || (opacityCacheRef.current = {
-                opacity50: .5,
-                opacity40: .4,
-                opacity80: .8,
-                opacity0: 0
-            }), rgbCacheRef.current || (rgbCacheRef.current = {
-                whiteRgb: "255, 255, 255",
-                blackRgb: "0, 0, 0"
-            });
-        }
-    }), []);
-    // Calculate base style with transforms (only dynamic values)
-    const baseStyle = useMemo((() => ({
+    }), isOverLight = overLightConfig.isOverLight, shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
         ...style,
         ...0 !== elasticity && !effectiveDisableEffects && {
             transform: transformStyle
         }
-    })), [ style, transformStyle, effectiveDisableEffects, elasticity ]), componentClassName = useMemo((() => [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveDisableEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" ")), [ effectiveReducedMotion, effectiveHighContrast, effectiveDisableEffects, className ]), baseStylePosition = baseStyle.position, baseStyleTop = baseStyle.top, baseStyleLeft = baseStyle.left, positionStyles = useMemo((() => ({
-        position: baseStylePosition || "absolute",
-        top: baseStyleTop || 0,
-        left: baseStyleLeft || 0
-    })), [ baseStylePosition, baseStyleTop, baseStyleLeft ]), baseStyleWidth = baseStyle.width, baseStyleHeight = baseStyle.height, glassSizeWidth = glassSize.width, glassSizeHeight = glassSize.height, adjustedSize = useMemo((() => ({
-        width: "fixed" !== baseStylePosition ? "100%" : baseStyleWidth || Math.max(glassSizeWidth, 0),
-        height: "fixed" !== baseStylePosition ? "100%" : baseStyleHeight || Math.max(glassSizeHeight, 0)
-    })), [ baseStylePosition, baseStyleWidth, baseStyleHeight, glassSizeWidth, glassSizeHeight ]), mouseOffsetX = mouseOffset.x, mouseOffsetY = mouseOffset.y, GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, gradientCalculations = useMemo((() => {
-        const mx = mouseOffsetX, my = mouseOffsetY, borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), borderOpacity1 = GRADIENT.BORDER_OPACITY.BASE_1 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, borderOpacity2 = GRADIENT.BORDER_OPACITY.BASE_2 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, borderOpacity3 = GRADIENT.BORDER_OPACITY.BASE_3 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, borderOpacity4 = GRADIENT.BORDER_OPACITY.BASE_4 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, hover1X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1, hover1Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1, hover2X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2, hover2Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2, hover3X = GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3, hover3Y = GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3, baseX = GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER, baseY = GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER;
-        return {
-            isOverLight: isOverLight,
-            mx: mx,
-            my: my,
-            borderGradientAngle: borderGradientAngle,
-            borderStop1: borderStop1,
-            borderStop2: borderStop2,
-            borderOpacity1: borderOpacity1,
-            borderOpacity2: borderOpacity2,
-            borderOpacity3: borderOpacity3,
-            borderOpacity4: borderOpacity4,
-            hover1X: hover1X,
-            hover1Y: hover1Y,
-            hover2X: hover2X,
-            hover2Y: hover2Y,
-            hover3X: hover3X,
-            hover3Y: hover3Y,
-            baseX: baseX,
-            baseY: baseY
-        };
-    }), [ mouseOffsetX, mouseOffsetY, isOverLight ]), overLightOpacity = overLightConfig.opacity, opacityValues = useMemo((() => {
-        // Use cached values if available, otherwise fallback to defaults
-        const opacity50 = opacityCacheRef.current?.opacity50 ?? .5, opacity40 = opacityCacheRef.current?.opacity40 ?? .4, opacity80 = opacityCacheRef.current?.opacity80 ?? .8, opacity0 = opacityCacheRef.current?.opacity0 ?? 0;
-        // Dynamic multiplier for overlay
-        return {
-            hover1: isHovered || isActive ? opacity50 : opacity0,
-            hover2: isActive ? opacity50 : opacity0,
-            hover3: isHovered ? opacity40 : isActive ? opacity80 : opacity0,
-            base: isOverLight ? overLightOpacity || opacity40 : opacity0,
-            over: isOverLight ? 1.1 * (overLightOpacity || opacity40) : opacity0
-        };
-    }), [ isHovered, isActive, isOverLight, overLightOpacity ]), gradientIsOverLight = gradientCalculations.isOverLight, gradientMx = gradientCalculations.mx, gradientMy = gradientCalculations.my, gradientBorderGradientAngle = gradientCalculations.borderGradientAngle, gradientBorderStop1 = gradientCalculations.borderStop1, gradientBorderStop2 = gradientCalculations.borderStop2, gradientBorderOpacity1 = gradientCalculations.borderOpacity1, gradientBorderOpacity2 = gradientCalculations.borderOpacity2, gradientBorderOpacity3 = gradientCalculations.borderOpacity3, gradientBorderOpacity4 = gradientCalculations.borderOpacity4, gradientHover1X = gradientCalculations.hover1X, gradientHover1Y = gradientCalculations.hover1Y, gradientHover2X = gradientCalculations.hover2X, gradientHover2Y = gradientCalculations.hover2Y, gradientHover3X = gradientCalculations.hover3X, gradientHover3Y = gradientCalculations.hover3Y, gradientBaseX = gradientCalculations.baseX, gradientBaseY = gradientCalculations.baseY, positionStylesPosition = positionStyles.position, positionStylesTop = positionStyles.top, positionStylesLeft = positionStyles.left, adjustedSizeWidth = adjustedSize.width, adjustedSizeHeight = adjustedSize.height, baseStyleTransform = baseStyle.transform, opacityValuesHover1 = opacityValues.hover1, opacityValuesHover2 = opacityValues.hover2, opacityValuesHover3 = opacityValues.hover3, opacityValuesBase = opacityValues.base, opacityValuesOver = opacityValues.over, glassVars = useMemo((() => {
-        // RGB color values for rgba() functions
-        // Note: CSS doesn't support rgba(var(--rgb), opacity) syntax - this is a CSS specification
-        // limitation, not a browser support issue. We read RGB values from design tokens at mount
-        // and cache them for performance. Falls back to defaults if tokens are not available.
-        // Uses design tokens: --atomix-light-rgb / --atomix-white-rgb and --atomix-dark-rgb / --atomix-black-rgb
-        const whiteColor = rgbCacheRef.current?.whiteRgb || "255, 255, 255", blackColor = rgbCacheRef.current?.blackRgb || "0, 0, 0";
-        return {
-            // Standard CSS custom properties for dynamic values
-            "--atomix-glass-radius": `${effectiveCornerRadius}px`,
-            "--atomix-glass-transform": baseStyleTransform || "none",
-            "--atomix-glass-position": positionStylesPosition,
-            "--atomix-glass-top": "fixed" !== positionStylesTop ? `${positionStylesTop}px` : "0",
-            "--atomix-glass-left": "fixed" !== positionStylesLeft ? `${positionStylesLeft}px` : "0",
-            "--atomix-glass-width": "fixed" !== baseStylePosition ? adjustedSizeWidth : `${adjustedSizeWidth}px`,
-            "--atomix-glass-height": "fixed" !== baseStylePosition ? adjustedSizeHeight : `${adjustedSizeHeight}px`,
-            // Border width: Use spacing token for consistency
-            "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
-            "--atomix-glass-blend-mode": gradientIsOverLight ? "multiply" : "overlay",
-            // Dynamic gradients and backgrounds
-            // Note: RGB values use design token-aligned constants (white: 255,255,255; black: 0,0,0)
-            "--atomix-glass-border-gradient-1": `linear-gradient(${gradientBorderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${gradientBorderOpacity1}) ${gradientBorderStop1}%, rgba(${whiteColor}, ${gradientBorderOpacity2}) ${gradientBorderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-border-gradient-2": `linear-gradient(${gradientBorderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${gradientBorderOpacity3}) ${gradientBorderStop1}%, rgba(${whiteColor}, ${gradientBorderOpacity4}) ${gradientBorderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-hover-1-opacity": opacityValuesHover1,
-            "--atomix-glass-hover-1-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientHover1X}% ${gradientHover1Y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${gradientHover1X}% ${gradientHover1Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
-            "--atomix-glass-hover-2-opacity": opacityValuesHover2,
-            "--atomix-glass-hover-2-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientHover2X}% ${gradientHover2Y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${gradientHover2X}% ${gradientHover2Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
-            "--atomix-glass-hover-3-opacity": opacityValuesHover3,
-            "--atomix-glass-hover-3-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientHover3X}% ${gradientHover3Y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${gradientHover3X}% ${gradientHover3Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
-            "--atomix-glass-base-opacity": opacityValuesBase,
-            "--atomix-glass-base-gradient": gradientIsOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + gradientMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + gradientMy * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + Math.abs(gradientMx) * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
-            "--atomix-glass-overlay-opacity": opacityValuesOver,
-            "--atomix-glass-overlay-gradient": gradientIsOverLight ? `radial-gradient(circle at ${gradientBaseX}% ${gradientBaseY}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + Math.abs(gradientMx) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + Math.abs(gradientMy) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
-        };
-    }), [ 
-    // Position styles - only specific properties
-    positionStylesPosition, positionStylesTop, positionStylesLeft, 
-    // Adjusted size - only specific properties
-    adjustedSizeWidth, adjustedSizeHeight, 
-    // Base style - only transform property
-    baseStyleTransform, baseStylePosition, 
-    // Other values
-    effectiveCornerRadius, effectiveReducedMotion, 
-    // Gradient calculations - extracted properties
-    gradientIsOverLight, gradientMx, gradientMy, gradientBorderGradientAngle, gradientBorderStop1, gradientBorderStop2, gradientBorderOpacity1, gradientBorderOpacity2, gradientBorderOpacity3, gradientBorderOpacity4, gradientHover1X, gradientHover1Y, gradientHover2X, gradientHover2Y, gradientHover3X, gradientHover3Y, gradientBaseX, gradientBaseY, 
-    // Opacity values - extracted properties
-    opacityValuesHover1, opacityValuesHover2, opacityValuesHover3, opacityValuesBase, opacityValuesOver ]);
-    // Build className with state modifiers
-        return jsxs("div", {
+    }, componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveDisableEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = {
+        position: style.position || "absolute",
+        top: style.top || 0,
+        left: style.left || 0
+    }, adjustedSize = {
+        width: "fixed" !== style.position ? "100%" : style.width ? style.width : Math.max(glassSize.width, 0),
+        height: "fixed" !== style.position ? "100%" : style.height ? style.height : Math.max(glassSize.height, 0)
+    }, mx = mouseOffset.x, my = mouseOffset.y, GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), borderOpacity1 = GRADIENT.BORDER_OPACITY.BASE_1 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, borderOpacity2 = GRADIENT.BORDER_OPACITY.BASE_2 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, borderOpacity3 = GRADIENT.BORDER_OPACITY.BASE_3 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, borderOpacity4 = GRADIENT.BORDER_OPACITY.BASE_4 + Math.abs(mx) * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, hover1X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1, hover1Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1, hover2X = GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2, hover2Y = GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2, hover3X = GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3, hover3Y = GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3, baseX = GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER, baseY = GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER, overLightOpacity = overLightConfig.opacity, opacityValues = {
+        hover1: isHovered || isActive ? .5 : 0,
+        hover2: isActive ? .5 : 0,
+        hover3: isHovered ? .4 : isActive ? .8 : 0,
+        base: isOverLight ? overLightOpacity || .4 : 0,
+        over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
+    }, whiteColor = "255, 255, 255", glassVars = {
+        // Standard CSS custom properties for dynamic values
+        "--atomix-glass-radius": `${effectiveCornerRadius}px`,
+        "--atomix-glass-transform": transformStyle || "none",
+        "--atomix-glass-position": positionStyles.position,
+        "--atomix-glass-top": "fixed" !== positionStyles.top ? `${positionStyles.top}px` : "0",
+        "--atomix-glass-left": "fixed" !== positionStyles.left ? `${positionStyles.left}px` : "0",
+        "--atomix-glass-width": "fixed" !== style.position ? adjustedSize.width : `${adjustedSize.width}px`,
+        "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
+        // Border width: Use spacing token for consistency
+        "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
+        "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
+        // Dynamic gradients and backgrounds
+        "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacity1}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacity2}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+        "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacity3}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacity4}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+        "--atomix-glass-hover-1-opacity": opacityValues.hover1,
+        "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hover1X}% ${hover1Y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hover1X}% ${hover1Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
+        "--atomix-glass-hover-2-opacity": opacityValues.hover2,
+        "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hover2X}% ${hover2Y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hover2X}% ${hover2Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
+        "--atomix-glass-hover-3-opacity": opacityValues.hover3,
+        "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hover3X}% ${hover3Y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(0, 0, 0, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hover3X}% ${hover3Y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
+        "--atomix-glass-base-opacity": opacityValues.base,
+        "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + Math.abs(mx) * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+        "--atomix-glass-overlay-opacity": opacityValues.over,
+        "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${baseX}% ${baseY}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + Math.abs(mx) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + Math.abs(my) * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
+    };
+    return jsxs("div", {
         className: componentClassName,
         style: glassVars,
         role: role || (onClick ? "button" : void 0),
@@ -3642,11 +3555,103 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
 
 Spinner.displayName = "Spinner";
 
+/**
+ * Theme Naming Utility
+ *
+ * Provides consistent naming conventions for CSS classes, CSS variables,
+ * and JavaScript properties throughout the theme system.
+ */
+class ThemeNaming {
+    /**
+   * Set the global prefix for all theme tokens
+   * @param newPrefix - New prefix to use
+   */
+    static setPrefix(newPrefix) {
+        this.prefix = newPrefix;
+    }
+    /**
+   * Get the current prefix
+   */    static getPrefix() {
+        return this.prefix;
+    }
+    /**
+   * Convert camelCase to kebab-case for CSS variables
+   * @param str - String to convert
+   */    static camelToKebab(str) {
+        return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    /**
+   * Convert kebab-case to camelCase for JavaScript properties
+   * @param str - String to convert
+   */    static kebabToCamel(str) {
+        return str.replace(/-([a-z])/g, (g => g[1].toUpperCase()));
+    }
+    /**
+   * Create a CSS variable name
+   * @param token - Token name in camelCase
+   */    static cssVar(token) {
+        return `--${this.prefix}-${this.camelToKebab(token)}`;
+    }
+    /**
+   * Create a BEM CSS class name
+   * @param block - Block name
+   * @param element - Element name (optional)
+   * @param modifier - Modifier name (optional)
+   */    static bemClass(block, element, modifier) {
+        let className = `c-${block}`;
+        return element && (className += `__${element}`), modifier && (className += `--${modifier}`), 
+        className;
+    }
+    /**
+   * Create a variant class name
+   * @param component - Component name
+   * @param variant - Variant name
+   */    static variantClass(component, variant) {
+        return `c-${component}--${variant}`;
+    }
+    /**
+   * Create a size class name
+   * @param component - Component name
+   * @param size - Size name
+   */    static sizeClass(component, size) {
+        return `c-${component}--${size}`;
+    }
+    /**
+   * Create a state class name
+   * @param component - Component name
+   * @param state - State name
+   */    static stateClass(component, state) {
+        return `c-${component}--${state}`;
+    }
+    /**
+   * Create a utility class name
+   * @param utility - Utility name
+   */    static utilityClass(utility) {
+        return `u-${utility}`;
+    }
+    /**
+   * Create a layout class name
+   * @param layout - Layout name
+   */    static layoutClass(layout) {
+        return `l-${layout}`;
+    }
+    /**
+   * Create an object class name
+   * @param object - Object name
+   */    static objectClass(object) {
+        return `o-${object}`;
+    }
+}
+
+ThemeNaming.prefix = "atomix";
+
 const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaExpanded: ariaExpanded, ariaControls: ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
-    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = useMemo((() => loading ? null : iconName ? jsx(Icon, {
+    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
-    }) : icon), [ icon, iconName, iconSize, loading ]), {generateButtonClass: generateButtonClass, handleClick: handleClick} = useButton({
+    }) : icon;
+    // Determine if we should render as a link
+        useButton({
         variant: variant,
         size: size,
         disabled: isDisabled,
@@ -3657,20 +3662,8 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         block: block,
         active: active,
         selected: selected
-    }), buttonClass = useMemo((() => generateButtonClass({
-        variant: variant,
-        size: size,
-        disabled: isDisabled,
-        rounded: rounded,
-        iconOnly: iconOnly,
-        glass: glass,
-        loading: loading,
-        fullWidth: fullWidth,
-        block: block,
-        active: active,
-        selected: selected,
-        className: className
-    })), [ variant, size, isDisabled, rounded, iconOnly, glass, loading, fullWidth, block, active, selected, className, generateButtonClass ]), handleClickEvent = useCallback((event => {
+    });
+    const buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant), "md" !== size ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : "", iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : "", rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "rounded") : "", isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "disabled") : "", glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = useCallback((event => {
         isDisabled ? event.preventDefault() : onClick?.(event);
     }), [ isDisabled, onClick ]), handleMouseEnter = useCallback((event => {
         isDisabled || onHover?.(event);
@@ -3678,28 +3671,23 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         isDisabled || onFocus?.(event);
     }), [ isDisabled, onFocus ]), handleBlurEvent = useCallback((event => {
         isDisabled || onBlur?.(event);
-    }), [ isDisabled, onBlur ]), buttonText = useMemo((() => loading && loadingText ? loadingText : label || children), [ loading, loadingText, label, children ]), spinnerSize = useMemo((() => "sm" === size ? "sm" : "lg" === size ? "md" : "sm"), [ size ]), buttonContent = useMemo((() => {
-        const iconSpan = iconElement && jsx("span", {
-            className: BUTTON.ICON_CLASS,
-            "aria-hidden": "true",
-            children: iconElement
-        }), spinnerElement = loading && jsx("span", {
-            className: BUTTON.SPINNER_CLASS,
+    }), [ isDisabled, onBlur ]), buttonText = loading && loadingText ? loadingText : label || children, spinnerSize = "sm" === size ? "sm" : "lg" === size ? "md" : "sm", buttonContent = jsxs(Fragment, {
+        children: [ loading && jsx("span", {
+            className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT),
             "aria-hidden": "true",
             children: jsx(Spinner, {
                 size: spinnerSize,
                 variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
             })
-        }), labelElement = !iconOnly && buttonText && jsx("span", {
-            className: BUTTON.LABEL_CLASS,
+        }), iconElement && !loading && jsx("span", {
+            className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT),
+            "aria-hidden": "true",
+            children: iconElement
+        }), !iconOnly && buttonText && jsx("span", {
+            className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.LABEL_ELEMENT),
             children: buttonText
-        });
-        return jsxs(Fragment, "end" === iconPosition ? {
-            children: [ labelElement, spinnerElement, iconSpan ]
-        } : {
-            children: [ spinnerElement, iconSpan, labelElement ]
-        });
-    }), [ iconElement, iconPosition, iconOnly, buttonText, loading, spinnerSize, variant ]), buttonProps = useMemo((() => ({
+        }) ]
+    }), buttonProps = {
         ref: ref,
         className: buttonClass,
         type: "button" !== Component || shouldRenderAsLink ? void 0 : type,
@@ -3717,8 +3705,16 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         tabIndex: void 0 !== tabIndex ? tabIndex : isDisabled ? -1 : 0,
         style: style,
         ...props
-    })), [ ref, buttonClass, Component, type, handleClickEvent, handleMouseEnter, handleFocusEvent, handleBlurEvent, isDisabled, loading, ariaLabel, iconOnly, label, children, ariaDescribedBy, ariaExpanded, ariaControls, tabIndex, style, props ]);
-    // Determine if we should render as a link
+    }, defaultGlassProps = {
+        displacementScale: 20,
+        blurAmount: 0,
+        saturation: 200,
+        elasticity: 0
+    }, glassProps = !0 === glass ? defaultGlassProps : {
+        ...defaultGlassProps,
+        ...glass
+    };
+    // Handle click with loading check
         // Render as anchor if href is provided
     if (shouldRenderAsLink) {
         const {ref: _, ...buttonPropsWithoutRef} = buttonProps, anchorButtonProps = {
@@ -3738,22 +3734,10 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
                 ...linkProps,
                 children: buttonContent
             });
-            if (glass) {
-                const defaultGlassProps = {
-                    displacementScale: 20,
-                    blurAmount: 0,
-                    saturation: 200,
-                    elasticity: 0
-                }, glassProps = !0 === glass ? defaultGlassProps : {
-                    ...defaultGlassProps,
-                    ...glass
-                };
-                return jsx(AtomixGlass, {
-                    ...glassProps,
-                    children: linkElement
-                });
-            }
-            return linkElement;
+            return glass ? jsx(AtomixGlass, {
+                ...glassProps,
+                children: linkElement
+            }) : linkElement;
         }
         // Fallback to regular anchor tag
                 const anchorElement = jsx("a", {
@@ -3764,46 +3748,20 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
             rel: "_blank" === target ? "noopener noreferrer" : void 0,
             children: buttonContent
         });
-        if (glass) {
-            const defaultGlassProps = {
-                displacementScale: 20,
-                blurAmount: 0,
-                saturation: 200,
-                elasticity: 0
-            }, glassProps = !0 === glass ? defaultGlassProps : {
-                ...defaultGlassProps,
-                ...glass
-            };
-            return jsx(AtomixGlass, {
-                ...glassProps,
-                children: anchorElement
-            });
-        }
-        return anchorElement;
-    }
-    // Default button rendering
-        if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 0,
-            saturation: 200,
-            elasticity: 0
-        }, glassProps = !0 === glass ? defaultGlassProps : {
-            ...defaultGlassProps,
-            ...glass
-        };
-        return jsx(AtomixGlass, {
+        return glass ? jsx(AtomixGlass, {
             ...glassProps,
-            children: jsx(Component, {
-                ...buttonProps,
-                children: buttonContent
-            })
-        });
+            children: anchorElement
+        }) : anchorElement;
     }
-    return jsx(Component, {
+    // Default button rendering
+        const buttonElement = jsx(Component, {
         ...buttonProps,
         children: buttonContent
     });
+    return glass ? jsx(AtomixGlass, {
+        ...glassProps,
+        children: buttonElement
+    }) : buttonElement;
 })));
 
 Button.displayName = "Button";
@@ -11104,62 +11062,6 @@ function useHero(initialProps) {
     };
 }
 
-/**
- * CSS Variable Mapper
- *
- * Utilities for generating and managing CSS custom properties from SCSS tokens
- * and component configurations.
- */
-/**
- * Generate CSS variable name from parts
- *
- * @example
- * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
- * // Returns: '--atomix-button-bg'
- */ function generateCSSVariableName(component, property, options = {}) {
-    const {prefix: prefix = "atomix", separator: separator = "-", includeComponent: includeComponent = !0} = options, parts = [ prefix ];
-    return includeComponent && parts.push(component), parts.push(property), `--${parts.join(separator)}`;
-}
-
-/**
- * Generate CSS variables object from configuration
- *
- * @example
- * const vars = generateComponentCSSVars({
- *   component: 'button',
- *   properties: { bg: '#000', color: '#fff' }
- * })
- * // Returns: { '--atomix-button-bg': '#000', '--atomix-button-color': '#fff' }
- */ function generateComponentCSSVars(config, options = {}) {
-    const vars = {}, {component: component, properties: properties, parts: parts, states: states, variants: variants} = config;
-    // Base properties
-    return Object.entries(properties).forEach((([key, value]) => {
-        const varName = generateCSSVariableName(component, key, options);
-        vars[varName] = String(value);
-    })), 
-    // Part properties
-    parts && Object.entries(parts).forEach((([partName, partProps]) => {
-        Object.entries(partProps).forEach((([key, value]) => {
-            const varName = generateCSSVariableName(component, `${partName}-${key}`, options);
-            vars[varName] = String(value);
-        }));
-    })), 
-    // State properties
-    states && Object.entries(states).forEach((([stateName, stateProps]) => {
-        Object.entries(stateProps).forEach((([key, value]) => {
-            const varName = generateCSSVariableName(component, `${stateName}-${key}`, options);
-            vars[varName] = String(value);
-        }));
-    })), 
-    // Variant properties
-    variants && Object.entries(variants).forEach((([variantName, variantProps]) => {
-        Object.entries(variantProps).forEach((([key, value]) => {
-            const varName = generateCSSVariableName(component, `${variantName}-${key}`, options);
-            vars[varName] = String(value);
-        }));
-    })), vars;
-}
-
 /**
  * Map SCSS tokens to CSS custom properties
  *
@@ -11322,7 +11224,7 @@ function mergeComponentProps(baseProps, customization) {
 /**
  * Create data attributes for debugging
  */ function createDebugAttrs(componentName, variant) {
-    return "development" !== process.env.NODE_ENV ? {} : {
+    return "undefined" == typeof process || "development" !== process.env?.NODE_ENV ? {} : {
         "data-component": componentName,
         ...variant && {
             "data-variant": variant
@@ -18180,6 +18082,7 @@ const components =  Object.freeze( Object.defineProperty({
     TESTIMONIAL: TESTIMONIAL,
     TEXTAREA: TEXTAREA,
     THEME_COLORS: THEME_COLORS,
+    THEME_NAMING: THEME_NAMING,
     TODO: TODO,
     TOGGLE: TOGGLE,
     TOOLTIP: TOOLTIP,
@@ -18652,13 +18555,6 @@ function createTokens(overrides) {
  * @param coefficient - Amount to emphasize (0-1), default 0.15
  * @returns Emphasized hex color
  */
-/**
- * Check if a theme is a JS theme (created with createTheme)
- */
-function isJSTheme(theme) {
-    return theme && "object" == typeof theme && !0 === theme.__isJSTheme;
-}
-
 /**
  * Theme Adapter
  *
@@ -18678,7 +18574,8 @@ function isJSTheme(theme) {
  * const tokens = themeToDesignTokens(theme);
  * // Returns: { 'primary': '#7c3aed', ... }
  * ```
- */ function themeToDesignTokens(theme) {
+ */
+function themeToDesignTokens(theme) {
     const tokens = {};
     // Convert palette colors
         if (theme.palette) {
@@ -18818,158 +18715,10 @@ function isJSTheme(theme) {
     };
 }
 
-/**
- * Config Loader
- *
- * Load design tokens from atomix.config.ts and convert to flat token format.
- */
-/**
- * Convert nested config tokens to flat DesignTokens format
- *
- * Handles conversion from atomix.config.ts structure to flat tokens.
- * Maps config structure to actual DesignTokens key names.
- */ function flattenConfigTokens(tokens, prefix = "atomix") {
-    const flat = {};
-    // Colors
-        return tokens.colors && Object.entries(tokens.colors).forEach((([key, value]) => {
-        var _context;
-        // Simple color: 'primary': '#7AFFD7'
-        // Map directly to DesignTokens keys (e.g., 'primary', 'secondary', 'error')
-        // Only map if it's a valid semantic color key
-                if ("string" == typeof value) _includesInstanceProperty(_context = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context, key) && (flat[key] = value); else if (value && "object" == typeof value) 
-        // Color scale or palette
-        if ("main" in value) {
-            var _context2;
-            // PaletteColorOptions: { main: '#7AFFD7', light?: '#...', dark?: '#...' }
-                        const palette = value, baseKey = key;
-            // Map main to base color (e.g., primary, secondary, error)
-            _includesInstanceProperty(_context2 = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context2, key) && (flat[baseKey] = palette.main, 
-            // Map light/dark to appropriate scale values
-            // light typically maps to step 3, dark to step 9
-            palette.light && (flat[`${key}-3`] = palette.light), palette.dark && (flat[`${key}-9`] = palette.dark));
-        } else 
-        // Color scale: { 1: '#fff', 2: '#eee', ..., 6: '#main', ... }
-        // Or full scale: { 1: '#...', 2: '#...', ..., 10: '#...' }
-        Object.entries(value).forEach((([scaleKey, scaleValue]) => {
-            if ("string" == typeof scaleValue) 
-            // Map scale keys to DesignTokens format
-            if ("main" === scaleKey || "6" === scaleKey) {
-                var _context3, _context4;
-                // Main color maps to base key (e.g., 'primary')
-                                _includesInstanceProperty(_context3 = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context3, key) && (flat[key] = scaleValue), 
-                // Also map to step 6 if it's a scale color
-                _includesInstanceProperty(_context4 = [ "primary", "red", "green", "blue", "yellow", "gray" ]).call(_context4, key) && (flat[`${key}-6`] = scaleValue);
-            } else {
-                // Map scale numbers (1-10) to DesignTokens format
-                const scaleNum = parseInt(scaleKey, 10);
-                !isNaN(scaleNum) && scaleNum >= 1 && scaleNum <= 10 && (flat[`${key}-${scaleKey}`] = scaleValue);
-            }
-        }));
-    })), 
-    // Spacing
-    tokens.spacing && Object.entries(tokens.spacing).forEach((([key, value]) => {
-        flat[`spacing-${key}`] = String(value);
-    })), 
-    // Border Radius
-    tokens.borderRadius && Object.entries(tokens.borderRadius).forEach((([key, value]) => {
-        // Map to DesignTokens format
-        "sm" === key || "base" === key || "" === key ? flat["border-radius-sm"] = String(value) : "md" === key || "default" === key ? flat["border-radius"] = String(value) : "lg" === key ? flat["border-radius-lg"] = String(value) : flat[`border-radius-${key}`] = String(value);
-    })), 
-    // Typography
-    tokens.typography && (
-    // Font Families
-    tokens.typography.fontFamilies && Object.entries(tokens.typography.fontFamilies).forEach((([key, value]) => {
-        // Map to DesignTokens format
-        "sans" === key || "base" === key ? (flat["font-sans-serif"] = String(value), flat["body-font-family"] = String(value)) : "mono" === key ? flat["font-monospace"] = String(value) : flat[`font-family-${key}`] = String(value);
-    })), 
-    // Font Sizes
-    tokens.typography.fontSizes && Object.entries(tokens.typography.fontSizes).forEach((([key, value]) => {
-        flat[`font-size-${key}`] = String(value);
-    })), 
-    // Font Weights
-    tokens.typography.fontWeights && Object.entries(tokens.typography.fontWeights).forEach((([key, value]) => {
-        flat[`font-weight-${key}`] = String(value);
-    })), 
-    // Line Heights
-    tokens.typography.lineHeights && Object.entries(tokens.typography.lineHeights).forEach((([key, value]) => {
-        "base" === key || "default" === key ? flat["line-height-base"] = String(value) : flat[`line-height-${key}`] = String(value);
-    }))), 
-    // Shadows
-    tokens.shadows && Object.entries(tokens.shadows).forEach((([key, value]) => {
-        flat[`shadow-${key}`] = String(value);
-    })), 
-    // Z-Index
-    tokens.zIndex && Object.entries(tokens.zIndex).forEach((([key, value]) => {
-        flat[`z-index-${key}`] = String(value);
-    })), 
-    // Transitions
-    tokens.transitions && tokens.transitions.durations && Object.entries(tokens.transitions.durations).forEach((([key, value]) => {
-        flat[`transition-${key}`] = String(value);
-    })), flat;
-}
-
-/**
- * Load theme tokens from atomix.config.ts
- *
- * Loads atomix.config.ts and extracts theme tokens.
- * Config file is required - throws error if not found.
- *
- * @param configPath - Optional custom config path (default: 'atomix.config.ts')
- * @returns Partial DesignTokens from config
- * @throws Error if config file is not found or cannot be loaded
- *
- * @example
- * ```typescript
- * const tokens = await loadThemeFromConfig();
- * const css = createTheme(tokens);
- * injectTheme(css);
- * ```
- */ async function loadThemeFromConfig(configPath = "atomix.config.ts") {
-    // In browser environments, config loading is not supported
-    if ("undefined" != typeof window) throw new Error("loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
-    // Load config using the existing loader (required)
-        const {loadAtomixConfig: loadAtomixConfig} = await Promise.resolve().then((() => loader)), config = loadAtomixConfig({
-        configPath: configPath,
-        required: !0
-    });
-    if (!config || !config.theme) throw new Error(`Config file ${configPath} does not contain theme configuration.`);
-    // Extract tokens from config
-        const tokens = config.theme.tokens || config.theme.extend || {};
-    if (0 === Object.keys(tokens).length) throw new Error(`Config file ${configPath} has empty theme configuration.`);
-    // Convert nested structure to flat tokens
-        return flattenConfigTokens(tokens, config.prefix || "atomix");
-}
-
-/**
- * Load theme tokens from atomix.config.ts (synchronous version)
- *
- * Synchronous version that uses require() instead of dynamic import.
- * Only works in Node.js environment.
- * Config file is required - throws error if not found.
- *
- * @param configPath - Optional custom config path
- * @returns Partial DesignTokens from config
- * @throws Error if config file is not found or cannot be loaded
- */ function loadThemeFromConfigSync(configPath = "atomix.config.ts") {
-    // In browser environments, config loading is not supported
-    if ("undefined" != typeof window) throw new Error("loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.");
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const {loadAtomixConfig: loadAtomixConfig} = require("../../config/loader"), config = loadAtomixConfig({
-        configPath: configPath,
-        required: !0
-    });
-    if (!config || !config.theme) throw new Error(`Config file ${configPath} does not contain theme configuration.`);
-    // Extract tokens from config
-        const tokens = config.theme.tokens || config.theme.extend || {};
-    if (0 === Object.keys(tokens).length) throw new Error(`Config file ${configPath} has empty theme configuration.`);
-    // Convert nested structure to flat tokens
-        return flattenConfigTokens(tokens, config.prefix || "atomix");
-}
-
 /**
  * Core Theme Functions
  *
- * Unified theme system that handles both DesignTokens and Theme objects.
+ * Simplified theme system that handles both DesignTokens and Theme objects.
  * Config-first approach: loads from atomix.config.ts when no input is provided.
  * Config file is required for automatic loading.
  */
@@ -19003,43 +18752,68 @@ function isJSTheme(theme) {
  * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
  * ```
  */ function createTheme(input, options) {
-    let tokens, configPrefix;
-    // If no input provided, load from config (required)
+    // Determine tokens based on input
+    let tokens;
     if (input) 
-    // Convert Theme to DesignTokens
-    tokens = !0 === input.__isJSTheme || input.palette && input.typography ? themeToDesignTokens(input) : input; else {
-        const configTokens = loadThemeFromConfigSync();
-        // Get prefix from config
-                try {
-            // eslint-disable-next-line @typescript-eslint/no-require-imports
-            const {loadAtomixConfig: loadAtomixConfig} = require("../../config/loader"), config = loadAtomixConfig({
-                configPath: "atomix.config.ts",
-                required: !0
-            });
-            configPrefix = config?.prefix;
+    // Use DesignTokens directly
+    tokens = 
+    // Helper functions to simplify main function
+    function(input) {
+        return !0 === input?.__isJSTheme || input?.palette && input?.typography;
+    }
+    /**
+ * Theme Composition Utilities
+ *
+ * Simplified utilities for composing, merging, and extending themes.
+ */
+    // ============================================================================
+    // Deep Merge Utility
+    // ============================================================================
+    /**
+ * Check if value is an object
+ */ (input) ? themeToDesignTokens(input) : input;
+    // Merge with defaults and generate CSS
+     else {
+        // Check if we're in a browser environment
+        if ("undefined" != typeof window) throw new Error("createTheme: No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.");
+        // Load from config when no input provided
+        // Using dynamic import in a way that's more compatible with bundlers
+                let loadThemeFromConfigSync, loadAtomixConfig;
+        try {
+            // Use dynamic require but only in Node.js environments
+            // This approach allows bundlers to properly handle external dependencies
+            const configLoaderModule = require("../config/configLoader"), loaderModule = require("../../config/loader");
+            // Get prefix from config if needed
+            if (loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync, loadAtomixConfig = loaderModule.loadAtomixConfig, 
+            tokens = loadThemeFromConfigSync(), !options?.prefix) try {
+                const config = loadAtomixConfig({
+                    configPath: "atomix.config.ts",
+                    required: !1
+                });
+                options = {
+                    ...options,
+                    prefix: config?.prefix || "atomix"
+                };
+            } catch (error) {
+                // If config loading fails, use default prefix
+                options = {
+                    ...options,
+                    prefix: "atomix"
+                };
+            }
         } catch (error) {
-            // Prefix loading failed, but tokens were loaded, so continue
+            throw new Error("createTheme: No input provided and config loading is not available in this environment. Please provide tokens explicitly.");
         }
-        tokens = configTokens;
     }
-    // Merge with defaults and generate CSS
-        return generateCSSVariables$1(createTokens(tokens), {
+    const allTokens = createTokens(tokens), prefix = options?.prefix ?? "atomix";
+    // Get prefix from options or use default
+        return generateCSSVariables$1(allTokens, {
         ...options,
-        prefix: options?.prefix ?? configPrefix ?? "atomix"
+        prefix: prefix
     });
 }
 
-/**
- * Theme Composition Utilities
- *
- * Utilities for composing, merging, and extending themes.
- */
-// ============================================================================
-// Deep Merge Utility
-// ============================================================================
-/**
- * Check if value is an object
- */ function isObject(item) {
+function isObject(item) {
     return item && "object" == typeof item && !Array.isArray(item) && "function" != typeof item;
 }
 
@@ -19098,65 +18872,14 @@ function isJSTheme(theme) {
  * });
  * ```
  */ function extendTheme(baseTheme, extension) {
-    // If baseTheme is a complete Theme, extract the options
-    const baseOptions = baseTheme.__isJSTheme ? 
-    /**
- * Extract theme options from a complete Theme object
- */
-    function(theme) {
-        return {
-            name: theme.name,
-            class: theme.class,
-            description: theme.description,
-            author: theme.author,
-            version: theme.version,
-            tags: theme.tags,
-            supportsDarkMode: theme.supportsDarkMode,
-            status: theme.status,
-            a11y: theme.a11y,
-            color: theme.color,
-            features: theme.features,
-            dependencies: theme.dependencies,
-            palette: {
-                primary: theme.palette.primary,
-                secondary: theme.palette.secondary,
-                error: theme.palette.error,
-                warning: theme.palette.warning,
-                info: theme.palette.info,
-                success: theme.palette.success,
-                background: theme.palette.background,
-                text: theme.palette.text
-            },
-            typography: {
-                fontFamily: theme.typography.fontFamily,
-                fontSize: theme.typography.fontSize,
-                fontWeightLight: theme.typography.fontWeightLight,
-                fontWeightRegular: theme.typography.fontWeightRegular,
-                fontWeightMedium: theme.typography.fontWeightMedium,
-                fontWeightSemiBold: theme.typography.fontWeightSemiBold,
-                fontWeightBold: theme.typography.fontWeightBold,
-                h1: theme.typography.h1,
-                h2: theme.typography.h2,
-                h3: theme.typography.h3,
-                h4: theme.typography.h4,
-                h5: theme.typography.h5,
-                h6: theme.typography.h6,
-                body1: theme.typography.body1,
-                body2: theme.typography.body2
-            },
-            shadows: theme.shadows,
-            transitions: theme.transitions,
-            zIndex: theme.zIndex,
-            custom: theme.custom
-        };
-    }
-    // ============================================================================
-    // Default Theme Values
-    // ============================================================================
-    (baseTheme) : baseTheme;
-    return createThemeObject(mergeTheme(baseOptions, extension));
+    return createThemeObject(mergeTheme(baseTheme.__isJSTheme ? {
+        ...baseTheme
+    } : baseTheme, extension));
 }
 
+// ============================================================================
+// Default Theme Values
+// ============================================================================
 const DEFAULT_PALETTE = {
     primary: {
         main: "#7c3aed",
@@ -19418,7 +19141,10 @@ function createThemeObject(...options) {
         "number" == typeof spacingInput ? (...values) => 0 === values.length ? "0px" : values.map((value => value * spacingInput + "px")).join(" ") : 
         // If it's an array, use it as a scale
         Array.isArray(spacingInput) ? (...values) => 0 === values.length ? "0px" : values.map((value => `${spacingInput[value] || value}px`)).join(" ") : (...values) => 0 === values.length ? "0px" : values.map((value => 4 * value + "px")).join(" ");
-    }(mergedOptions.spacing), breakpoints = function(breakpointsInput) {
+    }
+    /**
+ * Check if a theme is a JS theme (created with createTheme)
+ */ (mergedOptions.spacing), breakpoints = function(breakpointsInput) {
         const values = {
             xs: 0,
             sm: 576,
@@ -19478,694 +19204,71 @@ function createThemeObject(...options) {
 }
 
 /**
- * Theme Configuration Validator
- *
- * Validates theme configuration structure and values
- */
+ * Create a new theme registry
+ */ function createThemeRegistry() {
+    return {};
+}
+
 /**
- * Validate theme configuration
- *
- * @param config - Configuration to validate
- * @returns Validation result with errors and warnings
- */
+ * Register a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ * @param metadata - Theme metadata
+ */ function registerTheme(registry, id, metadata) {
+    registry[id] = metadata;
+}
+
 /**
- * Validate CSS theme
- */
-function validateCSSTheme(themeId, theme) {
-    const errors = [];
-    // CSS themes don't require createTheme function
-    // But can have optional cssPath
-    return {
-        valid: 0 === errors.length,
-        errors: errors,
-        warnings: []
-    };
+ * Unregister a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function unregisterTheme(registry, id) {
+    const exists = id in registry;
+    return delete registry[id], exists;
 }
 
 /**
- * Validate JS theme
- */ function validateJSTheme(themeId, theme) {
-    const errors = [];
-    // JS themes must have createTheme function
-    return theme.createTheme && "function" == typeof theme.createTheme || errors.push(`JS theme "${themeId}" must have a "createTheme" function`), 
-    {
-        valid: 0 === errors.length,
-        errors: errors,
-        warnings: []
-    };
+ * Check if a theme is registered
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function hasTheme(registry, id) {
+    return id in registry;
 }
 
 /**
- * Validate build configuration
- */
+ * Get theme metadata
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function getTheme(registry, id) {
+    return registry[id];
+}
+
 /**
- * Theme System Error Handling
- *
- * Centralized error handling for the Atomix theme system.
- * Provides custom error classes and logging utilities.
- */
-/**
- * Theme error codes
- */
-var ThemeErrorCode, LogLevel;
-
-!function(ThemeErrorCode) {
-    /** Theme not found in registry */
-    ThemeErrorCode.THEME_NOT_FOUND = "THEME_NOT_FOUND", 
-    /** Theme failed to load */
-    ThemeErrorCode.THEME_LOAD_FAILED = "THEME_LOAD_FAILED", 
-    /** Theme validation failed */
-    ThemeErrorCode.THEME_VALIDATION_FAILED = "THEME_VALIDATION_FAILED", 
-    /** Configuration loading failed */
-    ThemeErrorCode.CONFIG_LOAD_FAILED = "CONFIG_LOAD_FAILED", 
-    /** Configuration validation failed */
-    ThemeErrorCode.CONFIG_VALIDATION_FAILED = "CONFIG_VALIDATION_FAILED", 
-    /** Circular dependency detected */
-    ThemeErrorCode.CIRCULAR_DEPENDENCY = "CIRCULAR_DEPENDENCY", 
-    /** Missing dependency */
-    ThemeErrorCode.MISSING_DEPENDENCY = "MISSING_DEPENDENCY", 
-    /** Storage operation failed */
-    ThemeErrorCode.STORAGE_ERROR = "STORAGE_ERROR", 
-    /** Invalid theme name */
-    ThemeErrorCode.INVALID_THEME_NAME = "INVALID_THEME_NAME", 
-    /** CSS injection failed */
-    ThemeErrorCode.CSS_INJECTION_FAILED = "CSS_INJECTION_FAILED", 
-    /** Unknown error */
-    ThemeErrorCode.UNKNOWN_ERROR = "UNKNOWN_ERROR";
-}(ThemeErrorCode || (ThemeErrorCode = {}));
-
-/**
- * Custom error class for theme-related errors
- */
-class ThemeError extends Error {
-    constructor(message, code = ThemeErrorCode.UNKNOWN_ERROR, context) {
-        super(message), this.name = "ThemeError", this.code = code, this.context = context, 
-        this.timestamp = Date.now(), 
-        // Maintains proper stack trace for where our error was thrown (only available on V8)
-        Error.captureStackTrace && Error.captureStackTrace(this, ThemeError);
-    }
-    /**
-   * Convert error to JSON for logging
-   */    toJSON() {
-        return {
-            name: this.name,
-            message: this.message,
-            code: this.code,
-            context: this.context,
-            timestamp: this.timestamp,
-            stack: this.stack
-        };
-    }
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */ function getAllThemes(registry) {
+    return Object.values(registry);
 }
 
 /**
- * Log level
- */ !function(LogLevel) {
-    LogLevel[LogLevel.ERROR = 0] = "ERROR", LogLevel[LogLevel.WARN = 1] = "WARN", LogLevel[LogLevel.INFO = 2] = "INFO", 
-    LogLevel[LogLevel.DEBUG = 3] = "DEBUG";
-}(LogLevel || (LogLevel = {}));
-
-/**
- * Theme Logger
- *
- * Centralized logging for the theme system.
- * Replaces console statements with structured logging.
- */
-class ThemeLogger {
-    constructor(config = {}) {
-        this.config = {
-            level: config.level ?? ("production" === process.env.NODE_ENV ? LogLevel.WARN : LogLevel.INFO),
-            enableConsole: config.enableConsole ?? !0,
-            onError: config.onError,
-            onWarn: config.onWarn,
-            onInfo: config.onInfo,
-            onDebug: config.onDebug
-        };
-    }
-    /**
-   * Log an error
-   */    error(message, error, context) {
-        if (this.config.level < LogLevel.ERROR) return;
-        const errorObj = error instanceof Error ? error : new Error(message), themeError = error instanceof ThemeError ? error : new ThemeError(message, ThemeErrorCode.UNKNOWN_ERROR, context);
-        this.config.enableConsole && console.error(`[ThemeError] ${message}`, {
-            error: errorObj,
-            context: {
-                ...context,
-                ...themeError.context
-            },
-            code: themeError.code
-        }), this.config.onError?.(themeError, context);
-    }
-    /**
-   * Log a warning
-   */    warn(message, context) {
-        this.config.level < LogLevel.WARN || (this.config.enableConsole && console.warn(`[ThemeWarning] ${message}`, context || {}), 
-        this.config.onWarn?.(message, context));
-    }
-    /**
-   * Log an info message
-   */    info(message, context) {
-        this.config.level < LogLevel.INFO || (this.config.enableConsole && console.info(`[ThemeInfo] ${message}`, context || {}), 
-        this.config.onInfo?.(message, context));
-    }
-    /**
-   * Log a debug message
-   */    debug(message, context) {
-        this.config.level < LogLevel.DEBUG || (this.config.enableConsole, this.config.onDebug?.(message, context));
-    }
+ * Get all registered theme IDs
+ * @param registry - Theme registry object
+ */ function getThemeIds(registry) {
+    return Object.keys(registry);
 }
 
 /**
- * Default logger instance
- */ let defaultLogger = null;
-
-/**
- * Get or create default logger
- */ function getLogger() {
-    return defaultLogger || (defaultLogger = new ThemeLogger), defaultLogger;
+ * Clear all registered themes
+ * @param registry - Theme registry object
+ */ function clearThemes(registry) {
+    Object.keys(registry).forEach((key => delete registry[key]));
 }
 
 /**
- * Theme System Constants
- *
- * Centralized constants for the theme system to avoid magic numbers and strings.
- */
-/**
- * Default storage key for theme persistence
- */ const DEFAULT_ATOMIX_CONFIG_PATH = "atomix.config.ts";
-
-/**
- * Default data attribute name for theme
- */ process.env.NODE_ENV;
-
-/**
- * Integration default class names
- */
-const DEFAULT_INTEGRATION_CLASS_NAMES = {
-    theme: "data-theme",
-    colorMode: "data-atomix-color-mode"
-}, DEFAULT_INTEGRATION_CSS_VARIABLES = {
-    colorMode: "--storybook-color-mode"
-}, DEFAULT_SASS_CONFIG = {
-    style: "expanded",
-    sourceMap: !0,
-    loadPaths: [ "src" ]
-};
-
-/**
- * Integration default CSS variables
- */
-/**
- * Theme Configuration Loader
- *
- * Loads and validates the theme configuration from atomix.config.ts
- */
-/**
- * Cache for loaded configuration
- */
-let cachedConfig = null;
-
-/**
- * Logger instance
- */ const logger = getLogger();
-
-/**
- * Load theme configuration from atomix.config.ts
- *
- * @param options - Loader options
- * @returns Loaded and validated theme configuration
- *
- * @example
- * ```typescript
- * import { loadThemeConfig } from '@shohojdhara/atomix/theme/config';
- * const config = loadThemeConfig();
- * ```
- */
-/**
- * Theme Registry
- *
- * Manages theme registration, discovery, and dependency resolution
- */
-class ThemeRegistry {
-    constructor() {
-        this.entries = new Map, this.config = null, this.initialized = !1;
-    }
-    /**
-   * Initialize registry from config
-   */    async initialize(config) {
-        if (!this.initialized) {
-            // Load config if not provided
-            if (config) this.config = config; else try {
-                this.config = function(options = {}) {
-                    const {configPath: configPath = DEFAULT_ATOMIX_CONFIG_PATH, validate: validate = !0, env: env = ("undefined" != typeof process && process.env && "production" === process.env.NODE_ENV ? "production" : "development")} = options;
-                    // Return cached config if available
-                                        if (cachedConfig) return cachedConfig;
-                    // Try to load config dynamically
-                                        let config;
-                    try {
-                        // In browser/Vite environment, we can't load config dynamically
-                        if ("undefined" != typeof window) throw new Error("Theme config loading not supported in browser environment");
-                        // In ESM environments, require might be undefined.
-                                                let nodeRequire, configModule;
-                        try {
-                            nodeRequire = require;
-                        } catch {
-                            // require is not defined
-                        }
-                        if (!nodeRequire) throw new Error("Theme config loading not supported in this environment (require is undefined)");
-                        // Try require (Node.js/CommonJS)
-                        try {
-                            // Try relative path first
-                            try {
-                                configModule = nodeRequire("../../../../atomix.config");
-                            } catch {
-                                // If relative path fails, try to resolve from process.cwd()
-                                const path = nodeRequire("path"), fs = nodeRequire("fs");
-                                let configFilePath = path.resolve(process.cwd(), configPath);
-                                // If atomix.config.ts not found at the root, use the default path
-                                                                if (fs.existsSync(configFilePath) || configPath !== DEFAULT_ATOMIX_CONFIG_PATH || (configFilePath = path.resolve(process.cwd(), DEFAULT_ATOMIX_CONFIG_PATH)), 
-                                !fs.existsSync(configFilePath)) throw new Error(`Config file not found: ${configFilePath}`);
-                                {
-                                    const resolvedPath = nodeRequire.resolve(configFilePath);
-                                    nodeRequire.cache && nodeRequire.cache[resolvedPath] && delete nodeRequire.cache[resolvedPath], 
-                                    configModule = nodeRequire(configFilePath);
-                                }
-                            }
-                        } catch (requireError) {
-                            const errorMessage = requireError instanceof Error ? requireError.message : String(requireError);
-                            throw new ThemeError(`Cannot load config: ${errorMessage}`, ThemeErrorCode.CONFIG_LOAD_FAILED, {
-                                configPath: configPath,
-                                error: errorMessage
-                            });
-                        }
-                        const rawConfig = configModule.default || configModule, finalConfig = 
-                        /**
- * Apply environment-specific overrides to configuration
- *
- * @param config - Base configuration
- * @param env - Environment name
- * @returns Configuration with environment overrides applied
- */
-                        function(config, env) {
-                            const overridden = {
-                                ...config
-                            };
-                            // Production overrides
-                                                        return "production" === env && overridden.runtime && (overridden.runtime = {
-                                ...overridden.runtime,
-                                useMinified: !0,
-                                lazy: !0
-                            }), 
-                            // Development overrides
-                            "development" === env && (overridden.runtime && (overridden.runtime = {
-                                ...overridden.runtime,
-                                useMinified: !1,
-                                lazy: !1
-                            }), overridden.build && (overridden.build = {
-                                ...overridden.build,
-                                sass: {
-                                    ...overridden.build.sass,
-                                    sourceMap: !0
-                                }
-                            })), 
-                            // Test overrides
-                            "test" === env && overridden.runtime && (overridden.runtime = {
-                                ...overridden.runtime,
-                                enablePersistence: !1,
-                                preload: []
-                            }), overridden;
-                        }({
-                            themes: rawConfig.theme?.themes || {},
-                            build: rawConfig.build || {},
-                            runtime: rawConfig.runtime || {},
-                            integration: rawConfig.integration || {},
-                            dependencies: rawConfig.dependencies || {},
-                            validated: !1,
-                            // Will be set after validation
-                            // Store tokens for generator
-                            __tokens: rawConfig.theme?.tokens,
-                            __extend: rawConfig.theme?.extend
-                        }, env);
-                        // Process the AtomixConfig structure
-                                                // Validate if requested
-                        let validationResult = null;
-                        validate && (validationResult = function(config) {
-                            const errors = [], warnings = [];
-                            // Validate top-level structure
-                            if (!config || "object" != typeof config) return errors.push("Configuration must be an object"), 
-                            {
-                                valid: !1,
-                                errors: errors,
-                                warnings: warnings
-                            };
-                            // Validate themes
-                                                        if (config.themes && "object" == typeof config.themes) {
-                                const themeErrors = 
-                                /**
- * Validate themes object
- */
-                                function(themes) {
-                                    const errors = [], warnings = [];
-                                    0 === Object.keys(themes).length && warnings.push("No themes defined in configuration");
-                                    for (const [themeId, theme] of Object.entries(themes)) 
-                                    // Validate theme ID
-                                    if (themeId && "string" == typeof themeId) 
-                                    // Validate theme object
-                                    if (theme && "object" == typeof theme) 
-                                    // Validate theme type
-                                    if (!theme.type || "css" !== theme.type && "js" !== theme.type) errors.push(`Theme "${themeId}" must have type "css" or "js"`); else {
-                                        // Validate CSS theme
-                                        if (
-                                        // Validate required fields
-                                        theme.name && "string" == typeof theme.name || errors.push(`Theme "${themeId}" must have a "name" string`), 
-                                        "css" === theme.type) {
-                                            const cssErrors = validateCSSTheme();
-                                            errors.push(...cssErrors.errors), warnings.push(...cssErrors.warnings);
-                                        }
-                                        // Validate JS theme
-                                                                                if ("js" === theme.type) {
-                                            const jsErrors = validateJSTheme(themeId, theme);
-                                            errors.push(...jsErrors.errors), warnings.push(...jsErrors.warnings);
-                                        }
-                                        // Validate accessibility (only critical checks)
-                                                                                theme.a11y?.contrastTarget && ("number" != typeof theme.a11y.contrastTarget || theme.a11y.contrastTarget < 1 || theme.a11y.contrastTarget > 21) && warnings.push(`Theme "${themeId}" has invalid contrast target: ${theme.a11y.contrastTarget}`);
-                                    } else errors.push(`Theme "${themeId}" must be an object`); else errors.push(`Invalid theme ID: ${themeId}`);
-                                    return {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: warnings
-                                    };
-                                }(config.themes);
-                                errors.push(...themeErrors.errors), warnings.push(...themeErrors.warnings);
-                            }
-                            // Validate build config (only if provided)
-                             else errors.push('Configuration must have a "themes" object');
-                            if (config.build) {
-                                const buildErrors = function(build) {
-                                    const errors = [];
-                                    // Only validate structure if provided
-                                    return build.output && "object" != typeof build.output && errors.push("Build output must be an object"), 
-                                    build.sass && "object" != typeof build.sass && errors.push("Build sass config must be an object"), 
-                                    {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: []
-                                    };
-                                }
-                                /**
- * Validate runtime configuration
- */ (config.build);
-                                errors.push(...buildErrors.errors), warnings.push(...buildErrors.warnings);
-                            }
-                            // Validate runtime config (only if provided)
-                                                        if (config.runtime) {
-                                const runtimeErrors = function(runtime) {
-                                    const errors = [];
-                                    return runtime.basePath && "string" != typeof runtime.basePath && errors.push("Runtime basePath must be a string"), 
-                                    runtime.defaultTheme && "string" != typeof runtime.defaultTheme && errors.push("Runtime defaultTheme must be a string"), 
-                                    runtime.preload && !Array.isArray(runtime.preload) && errors.push("Runtime preload must be an array"), 
-                                    runtime.storageKey && "string" != typeof runtime.storageKey && errors.push("Runtime storageKey must be a string"), 
-                                    {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: []
-                                    };
-                                }
-                                /**
- * Validate integration configuration
- */ (config.runtime);
-                                errors.push(...runtimeErrors.errors), warnings.push(...runtimeErrors.warnings);
-                            }
-                            // Validate integration config (only if provided)
-                                                        if (config.integration) {
-                                const integrationErrors = function(integration) {
-                                    const errors = [];
-                                    // Only validate structure if provided
-                                    return integration.classNames && "object" != typeof integration.classNames && errors.push("Integration classNames must be an object"), 
-                                    {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: []
-                                    };
-                                }
-                                /**
- * Validate dependencies
- */ (config.integration);
-                                errors.push(...integrationErrors.errors), warnings.push(...integrationErrors.warnings);
-                            }
-                            // Validate dependencies
-                                                        if (config.dependencies) {
-                                const depErrors = function(dependencies, themes) {
-                                    const errors = [], warnings = [];
-                                    for (const [themeId, deps] of Object.entries(dependencies)) 
-                                    // Check if theme exists
-                                    if (themes[themeId]) 
-                                    // Validate dependencies array
-                                    if (Array.isArray(deps)) 
-                                    // Check if all dependencies exist
-                                    for (const dep of deps) themes[dep] || errors.push(`Theme "${themeId}" depends on non-existent theme: ${dep}`); else errors.push(`Dependencies for "${themeId}" must be an array`); else warnings.push(`Dependencies defined for non-existent theme: ${themeId}`);
-                                    return {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: warnings
-                                    };
-                                }(config.dependencies, config.themes || {});
-                                errors.push(...depErrors.errors), warnings.push(...depErrors.warnings);
-                            }
-                            return {
-                                valid: 0 === errors.length,
-                                errors: errors,
-                                warnings: warnings
-                            };
-                        }(finalConfig)), config = {
-                            ...finalConfig,
-                            validated: validate,
-                            errors: validationResult?.errors,
-                            warnings: validationResult?.warnings
-                        };
-                    } catch (error) {
-                        // Fallback: return default config structure
-                        const errorMessage = error instanceof Error ? error.message : String(error);
-                        logger.warn(`Failed to load theme config from ${configPath}`, {
-                            configPath: configPath,
-                            error: errorMessage
-                        }), config = {
-                            themes: {},
-                            build: {
-                                output: {
-                                    directory: "themes",
-                                    formats: {
-                                        expanded: ".css",
-                                        compressed: ".min.css"
-                                    }
-                                },
-                                sass: {
-                                    ...DEFAULT_SASS_CONFIG,
-                                    loadPaths: [ ...DEFAULT_SASS_CONFIG.loadPaths ]
-                                }
-                            },
-                            runtime: {
-                                basePath: "/themes",
-                                cdnPath: null,
-                                preload: [],
-                                lazy: !0,
-                                defaultTheme: "",
-                                // No default - use built-in styles (empty string instead of undefined)
-                                storageKey: "atomix-theme",
-                                dataAttribute: "data-theme",
-                                enablePersistence: !0,
-                                useMinified: "production" === env
-                            },
-                            integration: {
-                                cssVariables: DEFAULT_INTEGRATION_CSS_VARIABLES,
-                                classNames: DEFAULT_INTEGRATION_CLASS_NAMES
-                            },
-                            dependencies: {},
-                            validated: !1,
-                            errors: [ `Failed to load config: ${error instanceof Error ? error.message : String(error)}` ],
-                            warnings: [],
-                            __tokens: {},
-                            __extend: {}
-                        };
-                    }
-                    // Cache the loaded config
-                                        return cachedConfig = config, config;
-                }();
-            } catch (error) {
-                // In browser environments, config loading will fail
-                // Use empty config as fallback
-                this.config = {
-                    themes: {},
-                    build: {
-                        output: {
-                            directory: "themes",
-                            formats: {
-                                expanded: ".css",
-                                compressed: ".min.css"
-                            }
-                        },
-                        sass: {
-                            style: "expanded",
-                            sourceMap: !0,
-                            loadPaths: [ "src" ]
-                        }
-                    },
-                    runtime: {
-                        basePath: "",
-                        defaultTheme: void 0
-                    },
-                    integration: {
-                        cssVariables: {
-                            colorMode: "--color-mode"
-                        },
-                        classNames: {
-                            theme: "data-theme",
-                            colorMode: "data-color-mode"
-                        }
-                    },
-                    dependencies: {},
-                    validated: !1,
-                    errors: [],
-                    warnings: [],
-                    __tokens: {},
-                    __extend: {}
-                };
-            }
-            // Register all themes from config
-                        for (const [themeId, definition] of Object.entries(this.config.themes)) this.register(themeId, definition);
-            // Resolve dependencies
-                        this.resolveDependencies(), this.initialized = !0;
-        }
-    }
-    /**
-   * Register a theme
-   */    register(themeId, definition) {
-        // Get dependencies from config or definition
-        const entry = {
-            id: themeId,
-            definition: definition,
-            loaded: !1,
-            dependencies: [ ...this.config?.dependencies?.[themeId] || definition.dependencies || [] ],
-            dependents: []
-        };
-        this.entries.set(themeId, entry);
-    }
-    /**
-   * Get theme entry
-   */    get(themeId) {
-        return this.entries.get(themeId);
-    }
-    /**
-   * Check if theme exists
-   */    has(themeId) {
-        return this.entries.has(themeId);
-    }
-    /**
-   * Get all theme IDs
-   */    getAllIds() {
-        return Array.from(this.entries.keys());
-    }
-    /**
-   * Get all theme metadata
-   */    getAllMetadata() {
-        return Array.from(this.entries.values()).map((entry => ({
-            id: entry.id,
-            name: entry.definition.name,
-            type: entry.definition.type,
-            class: entry.definition.class,
-            description: entry.definition.description,
-            author: entry.definition.author,
-            version: entry.definition.version,
-            tags: entry.definition.tags,
-            supportsDarkMode: entry.definition.supportsDarkMode,
-            status: entry.definition.status,
-            a11y: entry.definition.a11y,
-            color: entry.definition.color,
-            features: entry.definition.features,
-            dependencies: entry.dependencies
-        })));
-    }
-    /**
-   * Get theme definition
-   */    getDefinition(themeId) {
-        return this.entries.get(themeId)?.definition;
-    }
-    /**
-   * Check if a theme is loaded
-   */    isThemeLoaded(themeId) {
-        const entry = this.entries.get(themeId);
-        return !!entry && entry.loaded;
-    }
-    /**
-   * Mark a theme as loaded
-   */    markLoaded(themeId, theme) {
-        const entry = this.entries.get(themeId);
-        entry && (entry.loaded = !0, theme && (entry.theme = theme));
-    }
-    /**
-   * Get theme object (for JS themes)
-   */    getTheme(themeId) {
-        const entry = this.entries.get(themeId);
-        return entry?.loaded ? entry.theme : void 0;
-    }
-    /**
-   * Get dependencies for a theme
-   */    getDependencies(themeId) {
-        return this.entries.get(themeId)?.dependencies || [];
-    }
-    /**
-   * Get dependents for a theme (themes that depend on this one)
-   */    getDependents(themeId) {
-        return this.entries.get(themeId)?.dependents || [];
-    }
-    /**
-   * Resolve all dependencies in correct order
-   */    resolveDependencyOrder(themeId) {
-        const resolved = [], visited = new Set, visiting = new Set, visit = id => {
-            if (visiting.has(id)) throw new Error(`Circular dependency detected involving theme: ${id}`);
-            if (visited.has(id)) return;
-            visiting.add(id);
-            const entry = this.entries.get(id);
-            if (entry) for (const dep of entry.dependencies) {
-                if (!this.has(dep)) throw new Error(`Theme "${id}" depends on non-existent theme: ${dep}`);
-                visit(dep);
-            }
-            visiting.delete(id), visited.add(id), resolved.push(id);
-        };
-        return visit(themeId), resolved;
-    }
-    /**
-   * Resolve dependencies and build dependency graph
-   */    resolveDependencies() {
-        // Build dependents map
-        for (const entry of this.entries.values()) for (const dep of entry.dependencies) {
-            const depEntry = this.entries.get(dep);
-            var _context;
-            depEntry && (_includesInstanceProperty(_context = depEntry.dependents).call(_context, entry.id) || depEntry.dependents.push(entry.id));
-        }
-    }
-    /**
-   * Validate all themes
-   */    validate() {
-        const errors = [];
-        // Check for circular dependencies
-                for (const themeId of this.entries.keys()) try {
-            this.resolveDependencyOrder(themeId);
-        } catch (error) {
-            errors.push(error instanceof Error ? error.message : String(error));
-        }
-        // Check for missing dependencies
-                for (const [themeId, entry] of this.entries.entries()) for (const dep of entry.dependencies) this.has(dep) || errors.push(`Theme "${themeId}" depends on non-existent theme: ${dep}`);
-        return {
-            valid: 0 === errors.length,
-            errors: errors
-        };
-    }
-    /**
-   * Clear registry
-   */    clear() {
-        this.entries.clear(), this.config = null, this.initialized = !1;
-    }
+ * Get the number of registered themes
+ * @param registry - Theme registry object
+ */ function getThemeCount(registry) {
+    return Object.keys(registry).length;
 }
 
 /**
@@ -20250,71 +19353,18 @@ class ThemeRegistry {
  * const css = ':root { --atomix-color-primary: #7AFFD7; }';
  * await saveCSSFile(css, './themes/custom.css');
  * ```
- */ async function saveCSSFile(css, filePath) {
-    // Check if in browser environment
-    if ("undefined" != typeof window) throw new Error("saveCSSFile can only be used in Node.js environment. Use injectCSS() for browser environments.");
-    // Dynamic import to avoid bundling Node.js modules in browser builds
-        const fs = await import("fs/promises"), dir = (await import("path")).dirname(filePath);
-    await fs.mkdir(dir, {
-        recursive: !0
-    }), 
-    // Write file
-    await fs.writeFile(filePath, css, "utf8");
-}
-
-/**
- * Save CSS to file (synchronous version)
- *
- * Synchronous version of saveCSSFile. Only works in Node.js environment.
- *
- * @param css - CSS string to save
- * @param filePath - Output file path
- * @throws Error if called in browser environment
- */ function saveCSSFileSync(css, filePath) {
-    // Check if in browser environment
-    if ("undefined" != typeof window) throw new Error("saveCSSFileSync can only be used in Node.js environment. Use injectCSS() for browser environments.");
-    // Use require for synchronous file operations
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const fs = require("fs"), dir = require("path").dirname(filePath);
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-        fs.existsSync(dir) || fs.mkdirSync(dir, {
-        recursive: !0
-    }), 
-    // Write file
-    fs.writeFileSync(filePath, css, "utf8");
-}
+ */ "undefined" != typeof process && process.env;
 
 /**
  * Check if code is running in a browser environment
- */ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof document, isServer = () => !isBrowser(), getThemeLinkId = themeName => `atomix-theme-${themeName}`, buildThemePath = (themeName, basePath = "/themes", useMinified = !1, cdnPath = null) => {
+ */
+const isBrowser = () => "undefined" != typeof window && "undefined" != typeof document, isServer = () => !isBrowser(), buildThemePath = (themeName, basePath = "/themes", useMinified = !1, cdnPath = null) => {
     // Validate theme name to prevent path injection
     if (!isValidThemeName(themeName)) throw new Error(`Invalid theme name: "${themeName}". Theme names must be lowercase alphanumeric with hyphens.`);
     const fileName = `${themeName}${useMinified ? ".min.css" : ".css"}`;
     return cdnPath ? `${cdnPath.replace(/[<>"']/g, "")}/${fileName}` : `${basePath.replace(/\/$/, "").replace(/[<>"']/g, "")}/${fileName.replace(/^\//, "")}`;
     // Ensure basePath doesn't end with slash and fileName doesn't start with slash
     // Also sanitize basePath to prevent path injection
-}, loadThemeCSS = (fullPath, linkId) => isServer() ? Promise.resolve() : new Promise(((resolve, reject) => {
-    if (document.getElementById(linkId)) return void resolve();
-    // Create link element
-        const link = document.createElement("link");
-    link.id = linkId, link.rel = "stylesheet", link.type = "text/css", link.href = fullPath, 
-    // Add data attribute for tracking
-    link.setAttribute("data-atomix-theme", "true"), 
-    // Handle load success
-    link.onload = () => {
-        resolve();
-    }, 
-    // Handle load error
-    link.onerror = () => {
-        // Remove failed link element
-        link.remove(), reject(new Error(`Failed to load theme CSS: ${fullPath}`));
-    }, 
-    // Append to head
-    document.head.appendChild(link);
-})), isThemeLoaded = themeName => {
-    if (isServer()) return !1;
-    const linkId = getThemeLinkId(themeName);
-    return null !== document.getElementById(linkId);
 }, isValidThemeName = themeName => !(!themeName || "string" != typeof themeName) && /^[a-z0-9]+(-[a-z0-9]+)*$/.test(themeName);
 
 /**
@@ -20787,211 +19837,198 @@ function generateCSSVariables(theme, options = {}) {
         styleElement.textContent = css;
     }
     /**
- * Theme Context
+ * Naming Utilities
  *
- * React context for theme management
+ * Provides consistent naming conventions across the theme system
  */
     /**
- * Theme context with default values
+ * Generate consistent CSS class names following BEM methodology
  */ (css, styleId), css;
 }
 
-const ThemeContext =  createContext(null);
+function generateClassName(block, element, modifiers) {
+    let className = block;
+    return element && (className += `__${element}`), modifiers && Object.entries(modifiers).forEach((([key, value]) => {
+        value && (className += `--${key}`, "string" == typeof value && value !== key && (className += `-${value}`));
+    })), className;
+}
 
-ThemeContext.displayName = "ThemeContext";
+/**
+ * Generate consistent CSS variable names
+ */ function generateCSSVariableName(property, options = {}) {
+    const {prefix: prefix = "atomix", component: component, variant: variant, state: state} = options, parts = [ prefix ];
+    return component && parts.push(component), variant && parts.push(variant), state && parts.push(state), 
+    parts.push(property), `--${parts.join("-")}`;
+}
 
 /**
- * Theme Applicator
- *
- * Applies theme configurations to the DOM, including CSS variables,
- * component overrides, typography, spacing, and color palettes.
- *
- * Uses the unified theme system for CSS generation and injection.
- */
+ * Normalize theme tokens to consistent naming convention
+ */ function normalizeThemeTokens(tokens) {
+    const normalized = {};
+    for (const [key, value] of Object.entries(tokens)) 
+    // Recursively normalize nested objects
+    normalized[key] = "object" == typeof value && null !== value ? normalizeThemeTokens(value) : value;
+    return normalized;
+}
+
 /**
- * Theme applicator class for runtime theme application
+ * Convert camelCase to kebab-case for CSS custom properties
+ */ function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, (match => `-${match.toLowerCase()}`));
+}
+
+/**
+ * Convert theme property to CSS variable name
+ */ function themePropertyToCSSVar(propertyPath, prefix = "atomix") {
+    return `--${prefix}-${propertyPath.split(".").map((part => camelToKebab(part))).join("-")}`;
+}
+
+/**
+ * Component Theming Utilities
  *
- * Uses the unified theme system for efficient CSS variable generation and injection.
+ * Provides consistent patterns for applying theme values to components
  */
-class ThemeApplicator {
-    constructor(root = document.documentElement) {
-        this.styleId = "atomix-theme-applicator", this.root = root;
-    }
-    /**
-   * Apply a complete theme configuration
-   *
-   * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
-   * Automatically respects atomix.config.ts when using DesignTokens.
-   */    applyTheme(theme) {
-        // Clear previously applied variables
-        this.clearAppliedVars(), 
-        // Check if it's DesignTokens
-        this.isDesignTokens(theme) ? 
-        // Direct DesignTokens - use unified theme system (with config support)
-        this.applyDesignTokens(theme) : injectCSS$1(createTheme(theme, {
-            selector: ":root",
-            prefix: "atomix"
-        }), this.styleId), 
-        // Apply component overrides (only for Theme objects)
-        !this.isDesignTokens(theme) && theme.components && this.applyComponentOverrides(theme.components);
-    }
-    /**
-   * Apply DesignTokens using unified theme system
-   *
-   * Uses createTheme() which automatically loads from atomix.config.ts
-   * if no tokens are provided, ensuring config is always respected.
-   */    applyDesignTokens(tokens) {
-        // Inject CSS into DOM
-        injectCSS$1(createTheme(tokens, {
-            selector: ":root",
-            prefix: "atomix"
-        }), this.styleId);
-    }
-    /**
-   * Check if object is DesignTokens
-   */    isDesignTokens(obj) {
-        // DesignTokens is a flat object with string keys, no nested structures
-        return null !== obj && "object" == typeof obj && !("palette" in obj) && !("typography" in obj) && !("__isJSTheme" in obj);
-    }
-    /**
-   * Apply global CSS variables (for component overrides)
-   */    applyGlobalCSSVars(vars) {
-        Object.entries(vars).forEach((([key, value]) => {
-            this.root.style.setProperty(key, String(value));
-        }));
-    }
-    /**
-   * Apply component-level overrides
-   */    applyComponentOverrides(overrides) {
-        Object.entries(overrides).forEach((([componentName, override]) => {
-            override && this.applyComponentOverride(componentName, override);
-        }));
-    }
-    /**
-   * Apply override for a specific component
-   */    applyComponentOverride(componentName, override) {
-        const vars = {}, componentKey = componentName.toLowerCase();
-        // Apply component-level CSS variables
-        override.cssVars && Object.entries(override.cssVars).forEach((([key, value]) => {
-            // If key doesn't start with --, add component prefix
-            const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${key}`;
-            vars[varKey] = value;
-        })), 
-        // Apply part-specific CSS variables
-        override.parts && Object.entries(override.parts).forEach((([partName, partOverride]) => {
-            partOverride.cssVars && Object.entries(partOverride.cssVars).forEach((([key, value]) => {
-                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${partName}-${key}`;
-                vars[varKey] = value;
-            }));
-        })), 
-        // Apply variant-specific CSS variables
-        override.variants && Object.entries(override.variants).forEach((([variantName, variantOverride]) => {
-            variantOverride.cssVars && Object.entries(variantOverride.cssVars).forEach((([key, value]) => {
-                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${variantName}-${key}`;
-                vars[varKey] = value;
-            }));
-        })), this.applyGlobalCSSVars(vars);
-    }
-    /**
-   * Clear all applied CSS variables
-   */    clearAppliedVars() {
-        removeCSS(this.styleId);
-    }
-    /**
-   * Remove theme application
-   */    removeTheme() {
-        this.clearAppliedVars(), removeCSS(this.styleId);
-    }
-    /**
-   * Update specific CSS variables without clearing all
-   */    updateCSSVars(vars) {
-        this.applyGlobalCSSVars(vars);
-    }
+/**
+ * Get a theme value for a specific component using CSS variables
+ * This ensures all components access theme values consistently
+ */ function getComponentThemeValue(component, property, variant, size) {
+    // Build CSS variable name following consistent pattern
+    const parts = [ "atomix", component ];
+    // Return CSS variable reference with fallback
+    return variant && parts.push(variant), size && parts.push(size), parts.push(property), 
+    `var(--${parts.join("-")}, var(--atomix-${property}, initial))`;
 }
 
 /**
- * Global theme applicator instance
- */ let globalApplicator = null;
+ * Generate component-specific CSS variables from theme
+ */ function generateComponentCSSVars(component, theme, variant, size) {
+    const vars = {}, prefixParts = [ "atomix", component ];
+    // This is a simplified implementation - in a real system you'd have more
+    // sophisticated logic to extract component-specific values from the theme
+        variant && prefixParts.push(variant), size && prefixParts.push(size);
+    const prefix = prefixParts.join("-");
+    // Add common component properties
+        if (theme.palette && (vars[`--${prefix}-color`] = theme.palette.primary?.main || "#7c3aed", 
+    vars[`--${prefix}-color-hover`] = theme.palette.primary?.dark || "#5b21b6", vars[`--${prefix}-color-active`] = theme.palette.primary?.main || "#7c3aed", 
+    vars[`--${prefix}-color-disabled`] = theme.palette.text?.disabled || "#9ca3af"), 
+    theme.typography && (vars[`--${prefix}-font-family`] = theme.typography.fontFamily || "Inter, sans-serif", 
+    vars[`--${prefix}-font-size`] = theme.typography.fontSize ? `${theme.typography.fontSize}px` : "16px"), 
+    theme.spacing) {
+        const spacing = "function" == typeof theme.spacing ? theme.spacing : val => 8 * val;
+        vars[`--${prefix}-spacing-unit`] = `${spacing(1)}px`, vars[`--${prefix}-spacing-sm`] = `${spacing(.5)}px`, 
+        vars[`--${prefix}-spacing-md`] = `${spacing(1)}px`, vars[`--${prefix}-spacing-lg`] = `${spacing(2)}px`;
+    }
+    return vars;
+}
 
 /**
- * Get or create global theme applicator
- */ function getThemeApplicator() {
-    return globalApplicator || (globalApplicator = new ThemeApplicator), globalApplicator;
+ * Apply consistent theme to component style object
+ */ function applyComponentTheme(component, style = {}, variant, size, theme) {
+    // If no theme provided, return original style
+    return theme ? {
+        ...generateComponentCSSVars(component, theme, variant, size),
+        ...style
+    } : style;
+    // Generate component-specific CSS variables
 }
 
 /**
- * Apply theme using global applicator
- */ function applyTheme(theme) {
-    getThemeApplicator().applyTheme(theme);
+ * Create a hook for consistent component theming
+ */ function useComponentTheme(component, variant, size, theme) {
+    return property => getComponentThemeValue(component, property, variant, size);
 }
 
 /**
- * ThemeProvider component
- *
- * Provides theme context to child components and manages theme state.
+ * Theme Configuration Loader
  *
- * **Config-First Approach**: If `defaultTheme` is not provided, loads from `atomix.config.ts`.
- * Config file is required when `defaultTheme` is not provided.
+ * Provides functions to load theme configurations from atomix.config.ts
+ * Includes both sync and async versions, with automatic fallbacks
+ */
+/**
+ * Load theme from config file (synchronous, Node.js only)
+ * @param configPath - Path to config file (default: atomix.config.ts)
+ * @returns DesignTokens from theme configuration
+ * @throws Error if config loading is not available in browser environment
+ */ function loadThemeFromConfigSync(options) {
+    // Check if we're in a browser environment
+    if ("undefined" != typeof window) throw new Error("loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.");
+    // Use dynamic import to load the config loader
+    // This allows bundlers to handle external dependencies properly
+        let loadAtomixConfig;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const {loadAtomixConfig: loader} = require("../../config/loader");
+        loadAtomixConfig = loader;
+    } catch (error) {
+        if (!1 !== options?.required) throw new Error("Config loader module not available");
+        // Return empty tokens if config is not required
+                return createTokens({});
+    }
+    const config = loadAtomixConfig({
+        configPath: options?.configPath || "atomix.config.ts",
+        required: !1 !== options?.required
+    });
+    return config?.theme ? isThemeObject$1(config.theme) ? createDesignTokensFromTheme(config.theme) : createTokens(config.theme) : createTokens({});
+}
+
+/**
+ * Load theme from config file (asynchronous)
+ * @param configPath - Path to config file (default: atomix.config.ts)
+ * @returns Promise resolving to DesignTokens from theme configuration
+ */ async function loadThemeFromConfig(options) {
+    // Check if we're in a browser environment
+    if ("undefined" != typeof window) throw new Error("loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
+    // Dynamic import for config loader
+        const {loadAtomixConfig: loadAtomixConfig} = await import("./lib/config/loader"), config = await loadAtomixConfig({
+        configPath: options?.configPath || "atomix.config.ts",
+        required: !1 !== options?.required
+    });
+    return config?.theme ? isThemeObject$1(config.theme) ? createDesignTokensFromTheme(config.theme) : createTokens(config.theme) : createTokens({});
+}
+
+/**
+ * Check if the provided object is a Theme object
+ * @param theme - Object to check
+ * @returns True if the object is a Theme object, false otherwise
+ */ function isThemeObject$1(theme) {
+    return "object" == typeof theme && null !== theme;
+}
+
+/**
+ * Theme Context
  *
- * @example
- * ```tsx
- * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ * React context for theme management
+ */
+/**
+ * Theme context with default values
+ */ const ThemeContext =  createContext(null);
+
+ThemeContext.displayName = "ThemeContext";
+
+/**
+ * Theme Provider
  *
- * // Loads from atomix.config.ts (config file required)
- * function App() {
- *   return (
- *     <ThemeProvider>
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
+ * React context provider for theme management with separated concerns.
+ * Simplified version focusing on core functionality:
+ * - String-based themes (CSS files)
+ * - JS Theme objects
+ * - Persistence via localStorage
  *
- * // Provide explicit theme (bypasses config)
- * function App() {
- *   return (
- *     <ThemeProvider defaultTheme="dark">
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
- * ```
- */ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, preload: preload = [], lazy: lazy = !0, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, useMinified: useMinified = !1, onThemeChange: onThemeChange, onError: onError}) => {
+ * Falls back to 'default' theme if no configuration is found.
+ */
+const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, useMinified: useMinified = !1, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, onThemeChange: onThemeChange, onError: onError}) => {
     // Store callbacks in refs to avoid recreating when they change
     const onThemeChangeRef = useRef(onThemeChange), onErrorRef = useRef(onError);
-    // Update refs when callbacks change
+    // Update ref when callback changes
     useEffect((() => {
         onThemeChangeRef.current = onThemeChange, onErrorRef.current = onError;
     }), [ onThemeChange, onError ]);
-    // Create stable wrapper functions that read from refs
+    // Create stable wrapper functions that read from ref
     const handleThemeChange = useCallback((theme => {
         onThemeChangeRef.current?.(theme);
     }), []), handleError = useCallback(((error, themeName) => {
         onErrorRef.current?.(error, themeName);
-    }), []), themesRef = useRef(themes), themesStable = useMemo((() => {
-        // Only update if themes object actually changed (shallow comparison)
-        const currentKeys = Object.keys(themes), prevKeys = Object.keys(themesRef.current);
-        return currentKeys.length !== prevKeys.length || currentKeys.some((key => themes[key] !== themesRef.current[key])) ? (themesRef.current = themes, 
-        themes) : themesRef.current;
-    }), [ themes ]), logger = useMemo((() => getLogger()), []), registry = useMemo((() => {
-        const reg = new ThemeRegistry;
-        // Register themes from props
-                if (themesStable && Object.keys(themesStable).length > 0) for (const [themeId, metadata] of Object.entries(themesStable)) reg.has(themeId) || reg.register(themeId, {
-            type: "css",
-            name: metadata.name,
-            class: metadata.class || themeId,
-            description: metadata.description,
-            author: metadata.author,
-            version: metadata.version,
-            tags: metadata.tags,
-            supportsDarkMode: metadata.supportsDarkMode,
-            status: metadata.status,
-            a11y: metadata.a11y,
-            color: metadata.color,
-            features: metadata.features,
-            dependencies: metadata.dependencies
-        });
-        return reg;
-    }), [ themesStable ]), storageAdapter = useMemo((() => ({
+    }), []), storageAdapter = useMemo((() => ({
         getItem: key => {
             if (isServer()) return null;
             try {
@@ -21023,7 +20060,7 @@ class ThemeApplicator {
                 return !1;
             }
         }
-    })), []), themeApplicator = useMemo((() => isServer() ? null : new ThemeApplicator), []), initialDefaultTheme = useMemo((() => {
+    })), []), initialDefaultTheme = useMemo((() => {
         // Check storage first
         if (enablePersistence && storageAdapter.isAvailable()) {
             const stored = storageAdapter.getItem(storageKey);
@@ -21031,236 +20068,368 @@ class ThemeApplicator {
         }
         // If defaultTheme is provided, use it
                 if (null != defaultTheme) return defaultTheme;
-        // Load from atomix.config.ts (required)
-                const configTokens = loadThemeFromConfigSync();
-        return configTokens && Object.keys(configTokens).length > 0 ? configTokens : null;
-        // Config is required - this will be caught in useEffect
-        }), [ enablePersistence, storageAdapter, storageKey, defaultTheme ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : isJSTheme(initialDefaultTheme) ? initialDefaultTheme.name || "js-theme" : initialDefaultTheme && "object" == typeof initialDefaultTheme && !isJSTheme(initialDefaultTheme) ? "config-theme" : "" // No default theme - use built-in styles
-    )), [activeTheme, setActiveTheme] = useState((() => isJSTheme(initialDefaultTheme) ? initialDefaultTheme : null)), [availableThemes, setAvailableThemes] = useState((() => registry.getAllMetadata().map((meta => ({
-        name: meta.name || "",
-        class: meta.class,
-        description: meta.description,
-        author: meta.author,
-        version: meta.version,
-        tags: meta.tags,
-        supportsDarkMode: meta.supportsDarkMode,
-        status: meta.status,
-        a11y: meta.a11y,
-        color: meta.color,
-        features: meta.features,
-        dependencies: meta.dependencies
-    }))))), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), previousThemeRef = useRef(null);
-    // Get default theme (with automatic config loading)
-    useCallback((() => {
-        // Check storage first
-        if (enablePersistence && storageAdapter.isAvailable()) {
-            const stored = storageAdapter.getItem(storageKey);
-            if (stored) return stored;
+        // Try to load from atomix.config.ts as fallback, but only in Node.js/SSR environments
+                if ("undefined" == typeof window) try {
+            // Dynamically import the config loader to avoid bundling issues in browser
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const {loadThemeFromConfigSync: loadThemeFromConfigSync} = require("../config/configLoader"), configTokens = loadThemeFromConfigSync();
+            if (configTokens && Object.keys(configTokens).length > 0) 
+            // For simplicity, we'll treat config tokens as a special theme name
+            return "config-theme";
+        } catch (error) {
+            console.warn("Failed to load theme from config, using default");
         }
-        // If defaultTheme is provided, use it
-                if (null != defaultTheme) return defaultTheme;
-        // Load from atomix.config.ts (required)
-        // Config file must exist - throws error if not found
-                const configTokens = loadThemeFromConfigSync();
-        if (configTokens && Object.keys(configTokens).length > 0) 
-        // Return config tokens as Partial<DesignTokens>
-        return configTokens;
-        throw new Error("ThemeProvider: atomix.config.ts is required when defaultTheme is not provided.");
-    }), [ enablePersistence, storageAdapter, storageKey, defaultTheme ]);
-    // Apply JS theme (supports both Theme and DesignTokens)
-    const applyJSTheme = useCallback((async (theme, removePrevious = !0) => {
-        !isServer() && themeApplicator && (removePrevious && (
-        // Remove previous theme
-        removeCSS("atomix-theme"), 
-        // Also remove any existing CSS variables
-        activeTheme && activeTheme.cssVars && Object.keys(activeTheme.cssVars).forEach((key => {
-            document.documentElement.style.removeProperty(key);
-        }))), null === theme || "object" != typeof theme || "palette" in theme || "typography" in theme || "__isJSTheme" in theme ? 
-        // Use ThemeApplicator for Theme objects
-        themeApplicator?.applyTheme(theme) : injectCSS$1(createTheme(theme), "atomix-theme"));
-    }), [ activeTheme, themeApplicator ]), setTheme = useCallback((async (theme, options) => {
-        const {removePrevious: removePrevious = !0, fallbackOnError: fallbackOnError = !0, customPath: customPath} = options || {};
+        // Default fallback
+                return "default";
+    }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => initialDefaultTheme)), [activeTheme, setActiveTheme] = useState(null), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({});
+    // Apply initial theme attributes to document element
+    useEffect((() => {
+        isServer() || ((dataAttribute, themeName) => {
+            isServer() || (
+            // Set data attribute on body
+            document.body.setAttribute(dataAttribute, themeName), 
+            // Also set on documentElement for broader compatibility
+            document.documentElement.setAttribute(dataAttribute, themeName));
+        })(String(currentTheme), dataAttribute);
+    }), [ currentTheme, dataAttribute ]), 
+    // Handle theme persistence
+    useEffect((() => {
+        enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, String(currentTheme));
+    }), [ currentTheme, storageKey, enablePersistence ]);
+    // Function to set theme with proper type handling
+    const setTheme = useCallback((async (theme, options) => {
         setIsLoading(!0), setError(null);
         try {
-            // Handle Theme or DesignTokens object directly
-            if ("string" != typeof theme) {
-                if (null !== theme && "object" == typeof theme && !("palette" in theme) && !("typography" in theme) && !("__isJSTheme" in theme)) {
-                    // Handle DesignTokens using unified theme system
-                    await applyJSTheme(theme, removePrevious);
-                    const themeName = "design-tokens-theme";
-                    return previousThemeRef.current = currentTheme, setCurrentTheme(themeName), setActiveTheme(null), 
-                    previousThemeRef.current, Date.now(), handleThemeChange(themeName), 
-                    // Persist to storage
-                    enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, themeName), 
-                    void setIsLoading(!1);
-                }
-                if (isJSTheme(theme)) {
-                    // Handle Theme object
-                    await applyJSTheme(theme, removePrevious);
-                    const themeName = theme.name || "js-theme";
-                    return previousThemeRef.current = currentTheme, setCurrentTheme(themeName), setActiveTheme(theme), 
-                    previousThemeRef.current, Date.now(), handleThemeChange(theme), 
-                    // Persist to storage
-                    enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, themeName), 
-                    void setIsLoading(!1);
-                }
-                {
-                    const error = new Error("Invalid theme object provided");
-                    throw handleError(error, "js-theme"), setError(error), setIsLoading(!1), error;
-                }
-            }
-            // Check if theme exists
-                        if (!registry.has(theme)) {
-                const error = new Error(`Theme "${theme}" not found in registry`);
-                if (handleError(error, theme), setError(error), fallbackOnError && currentTheme) return void setIsLoading(!1);
-                throw setIsLoading(!1), error;
-            }
-            // Load theme CSS if needed
-                        const themePath = customPath || buildThemePath(theme, basePath, useMinified, cdnPath || void 0), linkId = getThemeLinkId(theme);
-            // Remove previous theme if requested
-            removePrevious && previousThemeRef.current && previousThemeRef.current !== theme && (themeNameOrLinkId => {
-                if (isServer()) return;
-                // Try as link ID first, then as theme name
-                                let link = document.getElementById(themeNameOrLinkId);
-                if (!link) {
-                    const linkId = getThemeLinkId(themeNameOrLinkId);
-                    link = document.getElementById(linkId);
-                }
-                link && link.remove();
-            })(previousThemeRef.current), 
-            // Load CSS if not already loaded
-            isThemeLoaded(theme) || (await loadThemeCSS(themePath, linkId), loadedThemesRef.current.add(theme)), 
-            // Apply theme attributes
-            ((dataAttribute, themeName) => {
-                isServer() || (
-                // Set data attribute on body
-                document.body.setAttribute(dataAttribute, themeName), 
-                // Also set on documentElement for broader compatibility
-                document.documentElement.setAttribute(dataAttribute, themeName));
-            })(dataAttribute, theme), 
-            // Update state
-            previousThemeRef.current = currentTheme, setCurrentTheme(theme), setActiveTheme(null), 
-            previousThemeRef.current, Date.now(), handleThemeChange(theme), 
-            // Persist to storage
-            enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, theme), 
-            setIsLoading(!1);
+            let themeName, themeObj = null;
+            // If it's a string theme name, load the associated CSS
+            if ("string" == typeof theme ? themeName = theme : 
+            // If it's a Theme object or DesignTokens, we need to process it
+            function(theme) {
+                return "object" == typeof theme && null !== theme && "__isJSTheme" in theme && !0 === theme.__isJSTheme;
+            }(theme) ? (themeObj = theme, 
+            // For JS themes, we use a generic name
+            themeName = "js-theme", setActiveTheme(themeObj)) : 
+            // For DesignTokens, we might create a theme from tokens
+            themeName = "tokens-theme", "string" == typeof theme && themes[theme]) {
+                // Check if theme is already loading
+                if (themePromisesRef.current[theme]) return await themePromisesRef.current[theme], 
+                setCurrentTheme(theme), setActiveTheme(null), void handleThemeChange(theme);
+                // Load CSS theme
+                                const themeLoadPromise = new Promise((async (resolve, reject) => {
+                    try {
+                        if (!themes[theme]) throw new Error(`Theme metadata not found for theme: ${theme}`);
+                        {
+                            // Build CSS path using utility function
+                            const cssPath = buildThemePath(theme, basePath, useMinified, cdnPath);
+                            // Remove any previously loaded theme CSS
+                                                        removeCSS(`theme-${String(currentTheme)}`), 
+                            // Inject new theme CSS
+                            await injectCSS$1(cssPath, `theme-${theme}`), loadedThemesRef.current.add(theme), 
+                            setCurrentTheme(theme), setActiveTheme(null), handleThemeChange(theme), resolve();
+                        }
+                    } catch (err) {
+                        const error = err instanceof Error ? err : new Error(String(err));
+                        setError(error), handleError(error, String(theme)), reject(error);
+                    }
+                }));
+                themePromisesRef.current[theme] = themeLoadPromise, await themeLoadPromise;
+            } else themeObj ? (
+            // For JS themes, set them directly
+            setCurrentTheme(themeName), setActiveTheme(themeObj), handleThemeChange(themeObj)) : (
+            // For string theme that isn't in our themes record, just set the name
+            setCurrentTheme(themeName), setActiveTheme(null), handleThemeChange(themeName));
         } catch (err) {
             const error = err instanceof Error ? err : new Error(String(err));
-            throw handleError(error, "string" == typeof theme ? theme : "js-theme"), setError(error), 
-            setIsLoading(!1), err;
+            setError(error), handleError(error, String(theme));
+        } finally {
+            setIsLoading(!1);
         }
-    }), [ registry, basePath, cdnPath, useMinified, dataAttribute, enablePersistence, storageAdapter, storageKey, currentTheme, activeTheme, applyJSTheme, handleThemeChange, handleError ]), preloadTheme = useCallback((async themeName => {
-        if (!isServer() && !isThemeLoaded(themeName)) {
+    }), [ themes, currentTheme, handleThemeChange, handleError, basePath, useMinified, cdnPath ]), isThemeLoaded = useCallback((themeName => loadedThemesRef.current.has(themeName)), []), preloadTheme = useCallback((async themeName => {
+        if (themes[themeName] && !isThemeLoaded(themeName)) {
             setIsLoading(!0);
             try {
-                if (!registry.has(themeName)) throw new Error(`Theme "${themeName}" not found in registry`);
-                const themePath = buildThemePath(themeName, basePath, useMinified, cdnPath || void 0), linkId = getThemeLinkId(themeName);
-                await loadThemeCSS(themePath, linkId), loadedThemesRef.current.add(themeName);
+                // Build CSS path using utility function
+                const cssPath = buildThemePath(themeName, basePath, useMinified, cdnPath);
+                // Preload CSS by fetching it
+                                await fetch(cssPath), loadedThemesRef.current.add(themeName);
             } catch (err) {
                 const error = err instanceof Error ? err : new Error(String(err));
-                handleError(error, themeName), setError(error);
+                setError(error), handleError(error, themeName);
             } finally {
                 setIsLoading(!1);
             }
         }
-    }), [ registry, basePath, cdnPath, useMinified, handleError ]), isThemeLoaded$1 = useCallback((themeName => isThemeLoaded(themeName)), []);
-    // Set theme function (supports string, Theme, or DesignTokens)
-        // Initialize default theme on mount
-    useEffect((() => {
-        isServer() || (async () => {
-            // Use the initial default theme we computed
-            const defaultThemeValue = initialDefaultTheme;
-            if (defaultThemeValue) try {
-                null === defaultThemeValue || "object" != typeof defaultThemeValue || "palette" in defaultThemeValue || "typography" in defaultThemeValue || "__isJSTheme" in defaultThemeValue || "string" == typeof defaultThemeValue ? 
-                // Handle string or Theme object
-                await setTheme(defaultThemeValue, {
-                    removePrevious: !1,
-                    fallbackOnError: !0
-                }) : (
-                // Apply config tokens directly
-                await applyJSTheme(defaultThemeValue, !1), 
-                // Update state and emit events
-                setCurrentTheme("config-theme"), setActiveTheme(null), Date.now(), handleThemeChange("config-theme"), 
-                // Persist to storage
-                enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, "config-theme"));
-            } catch (err) {
-                const error = err instanceof Error ? err : new Error(String(err));
-                throw logger.error("Failed to load theme from config", error, {
-                    theme: defaultThemeValue
-                }), handleError(error, "config-theme"), setError(error), error;
+    }), [ themes, isThemeLoaded, handleError, basePath, useMinified, cdnPath ]), themeManager = useMemo((() => ({})), []), contextValue = useMemo((() => ({
+        theme: "string" == typeof currentTheme ? currentTheme : "js-theme",
+        activeTheme: activeTheme,
+        setTheme: setTheme,
+        availableThemes: Object.entries(themes).map((([name, metadata]) => ({
+            ...metadata
+        }))),
+        isLoading: isLoading,
+        error: error,
+        isThemeLoaded: isThemeLoaded,
+        preloadTheme: preloadTheme,
+        themeManager: themeManager
+    })), [ currentTheme, activeTheme, setTheme, themes, isLoading, error, isThemeLoaded, preloadTheme, themeManager ]);
+    // Check if theme is loaded
+        return jsx(ThemeContext.Provider, {
+        value: contextValue,
+        children: children
+    });
+};
+
+/**
+ * useTheme Hook
+ *
+ * React hook for accessing theme context
+ */
+/**
+ * useTheme hook
+ *
+ * Access theme context and theme management functions
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, setTheme, availableThemes } = useTheme();
+ *
+ *   return (
+ *     <div>
+ *       <p>Current theme: {theme}</p>
+ *       <button onClick={() => setTheme('dark-theme')}>
+ *         Switch to Dark
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */ function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) throw new Error("useTheme must be used within a ThemeProvider");
+    return {
+        theme: context.theme,
+        activeTheme: context.activeTheme,
+        setTheme: context.setTheme,
+        availableThemes: context.availableThemes,
+        isLoading: context.isLoading,
+        error: context.error,
+        isThemeLoaded: context.isThemeLoaded,
+        preloadTheme: context.preloadTheme
+    };
+}
+
+function useThemeTokens() {
+    const {theme: theme, activeTheme: activeTheme} = useTheme(), getToken = useCallback(((tokenName, fallback) => {
+        if ("undefined" == typeof window) return fallback || "";
+        const cssVarName = `--atomix-${tokenName}`;
+        return getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim() || fallback || "";
+    }), []), getThemeValue = useCallback(((path, fallback) => {
+        var _context;
+        return activeTheme && _reduceInstanceProperty(_context = path.split(".")).call(_context, ((obj, key) => obj?.[key]), activeTheme) || fallback;
+        // Navigate through nested theme object using dot notation
+        }), [ activeTheme ]);
+    // Helper function to get CSS variable value
+        // Return unified API for accessing theme values
+    return {
+        theme: theme,
+        activeTheme: activeTheme,
+        getToken: getToken,
+        getThemeValue: getThemeValue,
+        // Commonly used tokens with fallbacks
+        colors: {
+            primary: getToken("primary", "#3b82f6"),
+            secondary: getToken("secondary", "#10b981"),
+            error: getToken("error", "#ef4444"),
+            success: getToken("success", "#22c55e"),
+            warning: getToken("warning", "#eab308"),
+            info: getToken("info", "#3b82f6"),
+            light: getToken("light", "#f9fafb"),
+            dark: getToken("dark", "#111827")
+        },
+        spacing: {
+            1: getToken("spacing-1", "0.25rem"),
+            2: getToken("spacing-2", "0.5rem"),
+            3: getToken("spacing-3", "0.75rem"),
+            4: getToken("spacing-4", "1rem"),
+            5: getToken("spacing-5", "1.25rem"),
+            6: getToken("spacing-6", "1.5rem"),
+            8: getToken("spacing-8", "2rem"),
+            10: getToken("spacing-10", "2.5rem"),
+            12: getToken("spacing-12", "3rem"),
+            16: getToken("spacing-16", "4rem"),
+            20: getToken("spacing-20", "5rem")
+        },
+        borderRadius: {
+            sm: getToken("border-radius-sm", "0.25rem"),
+            md: getToken("border-radius-md", "0.5rem"),
+            lg: getToken("border-radius-lg", "0.75rem"),
+            xl: getToken("border-radius-xl", "1rem"),
+            full: getToken("border-radius-full", "9999px")
+        },
+        typography: {
+            fontFamily: {
+                sans: getToken("font-sans-serif", "Inter, system-ui, sans-serif"),
+                serif: getToken("font-serif", "Georgia, serif"),
+                mono: getToken("font-monospace", "Fira Code, monospace")
+            },
+            fontSize: {
+                xs: getToken("font-size-xs", "0.75rem"),
+                sm: getToken("font-size-sm", "0.875rem"),
+                md: getToken("font-size-md", "1rem"),
+                lg: getToken("font-size-lg", "1.125rem"),
+                xl: getToken("font-size-xl", "1.25rem"),
+                "2xl": getToken("font-size-2xl", "1.5rem"),
+                "3xl": getToken("font-size-3xl", "1.875rem"),
+                "4xl": getToken("font-size-4xl", "2.25rem")
+            },
+            fontWeight: {
+                light: getToken("font-weight-light", "300"),
+                normal: getToken("font-weight-normal", "400"),
+                medium: getToken("font-weight-medium", "500"),
+                semibold: getToken("font-weight-semibold", "600"),
+                bold: getToken("font-weight-bold", "700")
             }
-        })();
+        },
+        shadows: {
+            sm: getToken("box-shadow-sm", "0 1px 2px 0 rgba(0, 0, 0, 0.05)"),
+            md: getToken("box-shadow-md", "0 4px 6px -1px rgba(0, 0, 0, 0.1)"),
+            lg: getToken("box-shadow-lg", "0 10px 15px -3px rgba(0, 0, 0, 0.1)"),
+            xl: getToken("box-shadow-xl", "0 20px 25px -5px rgba(0, 0, 0, 0.1)"),
+            inset: getToken("box-shadow-inset", "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)")
+        },
+        transitions: {
+            fast: getToken("transition-fast", "150ms"),
+            base: getToken("transition-base", "200ms"),
+            slow: getToken("transition-slow", "300ms")
+        }
+    };
+}
+
+/**
+ * Theme System Error Handling
+ *
+ * Centralized error handling for the Atomix theme system.
+ * Provides custom error classes and logging utilities.
+ */
+/**
+ * Theme error codes
+ */ var ThemeErrorCode, LogLevel;
+
+!function(ThemeErrorCode) {
+    /** Theme not found in registry */
+    ThemeErrorCode.THEME_NOT_FOUND = "THEME_NOT_FOUND", 
+    /** Theme failed to load */
+    ThemeErrorCode.THEME_LOAD_FAILED = "THEME_LOAD_FAILED", 
+    /** Theme validation failed */
+    ThemeErrorCode.THEME_VALIDATION_FAILED = "THEME_VALIDATION_FAILED", 
+    /** Configuration loading failed */
+    ThemeErrorCode.CONFIG_LOAD_FAILED = "CONFIG_LOAD_FAILED", 
+    /** Configuration validation failed */
+    ThemeErrorCode.CONFIG_VALIDATION_FAILED = "CONFIG_VALIDATION_FAILED", 
+    /** Circular dependency detected */
+    ThemeErrorCode.CIRCULAR_DEPENDENCY = "CIRCULAR_DEPENDENCY", 
+    /** Missing dependency */
+    ThemeErrorCode.MISSING_DEPENDENCY = "MISSING_DEPENDENCY", 
+    /** Storage operation failed */
+    ThemeErrorCode.STORAGE_ERROR = "STORAGE_ERROR", 
+    /** Invalid theme name */
+    ThemeErrorCode.INVALID_THEME_NAME = "INVALID_THEME_NAME", 
+    /** CSS injection failed */
+    ThemeErrorCode.CSS_INJECTION_FAILED = "CSS_INJECTION_FAILED", 
+    /** Unknown error */
+    ThemeErrorCode.UNKNOWN_ERROR = "UNKNOWN_ERROR";
+}(ThemeErrorCode || (ThemeErrorCode = {}));
+
+/**
+ * Custom error class for theme-related errors
+ */
+class ThemeError extends Error {
+    constructor(message, code = ThemeErrorCode.UNKNOWN_ERROR, context) {
+        super(message), this.name = "ThemeError", this.code = code, this.context = context, 
+        this.timestamp = Date.now(), 
+        // Maintains proper stack trace for where our error was thrown (only available on V8)
+        Error.captureStackTrace && Error.captureStackTrace(this, ThemeError);
+    }
+    /**
+   * Convert error to JSON for logging
+   */    toJSON() {
+        return {
+            name: this.name,
+            message: this.message,
+            code: this.code,
+            context: this.context,
+            timestamp: this.timestamp,
+            stack: this.stack
+        };
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ), []), // Only run once on mount - initialDefaultTheme is stable
-    // Preload themes
-    useEffect((() => {
-        !isServer() && preload && 0 !== preload.length && (async () => {
-            for (const themeName of preload) if (!isThemeLoaded(themeName)) try {
-                await preloadTheme(themeName);
-            } catch (err) {
-                // Silently fail for preload
-                logger.warn(`Failed to preload theme "${themeName}"`, {
-                    error: err instanceof Error ? err.message : String(err)
-                });
-            }
-        })();
-    }), [ preload, preloadTheme, logger ]);
-    // Context value
-    const contextValue = useMemo((() => ({
-        theme: currentTheme,
-        activeTheme: activeTheme,
-        setTheme: setTheme,
-        availableThemes: availableThemes,
-        isLoading: isLoading,
-        error: error,
-        isThemeLoaded: isThemeLoaded$1,
-        preloadTheme: preloadTheme
-    })), [ currentTheme, activeTheme, setTheme, availableThemes, isLoading, error, isThemeLoaded$1, preloadTheme ]);
-    return jsx(ThemeContext.Provider, {
-        value: contextValue,
-        children: children
-    });
-};
+}
 
 /**
- * useTheme Hook
+ * Log level
+ */ !function(LogLevel) {
+    LogLevel[LogLevel.ERROR = 0] = "ERROR", LogLevel[LogLevel.WARN = 1] = "WARN", LogLevel[LogLevel.INFO = 2] = "INFO", 
+    LogLevel[LogLevel.DEBUG = 3] = "DEBUG";
+}(LogLevel || (LogLevel = {}));
+
+/**
+ * Theme Logger
  *
- * React hook for accessing theme context
+ * Centralized logging for the theme system.
+ * Replaces console statements with structured logging.
  */
+class ThemeLogger {
+    constructor(config = {}) {
+        this.config = {
+            level: config.level ?? ("undefined" != typeof process && "production" === process.env?.NODE_ENV ? LogLevel.WARN : LogLevel.INFO),
+            enableConsole: config.enableConsole ?? !0,
+            onError: config.onError,
+            onWarn: config.onWarn,
+            onInfo: config.onInfo,
+            onDebug: config.onDebug
+        };
+    }
+    /**
+   * Log an error
+   */    error(message, error, context) {
+        if (this.config.level < LogLevel.ERROR) return;
+        const errorObj = error instanceof Error ? error : new Error(message), themeError = error instanceof ThemeError ? error : new ThemeError(message, ThemeErrorCode.UNKNOWN_ERROR, context);
+        this.config.enableConsole && console.error(`[ThemeError] ${message}`, {
+            error: errorObj,
+            context: {
+                ...context,
+                ...themeError.context
+            },
+            code: themeError.code
+        }), this.config.onError?.(themeError, context);
+    }
+    /**
+   * Log a warning
+   */    warn(message, context) {
+        this.config.level < LogLevel.WARN || (this.config.enableConsole && console.warn(`[ThemeWarning] ${message}`, context || {}), 
+        this.config.onWarn?.(message, context));
+    }
+    /**
+   * Log an info message
+   */    info(message, context) {
+        this.config.level < LogLevel.INFO || (this.config.enableConsole && console.info(`[ThemeInfo] ${message}`, context || {}), 
+        this.config.onInfo?.(message, context));
+    }
+    /**
+   * Log a debug message
+   */    debug(message, context) {
+        this.config.level < LogLevel.DEBUG || (this.config.enableConsole, this.config.onDebug?.(message, context));
+    }
+}
+
 /**
- * useTheme hook
- *
- * Access theme context and theme management functions
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { theme, setTheme, availableThemes } = useTheme();
- *
- *   return (
- *     <div>
- *       <p>Current theme: {theme}</p>
- *       <button onClick={() => setTheme('dark-theme')}>
- *         Switch to Dark
- *       </button>
- *     </div>
- *   );
- * }
- * ```
- */ function useTheme() {
-    const context = useContext(ThemeContext);
-    if (!context) throw new Error("useTheme must be used within a ThemeProvider");
-    return {
-        theme: context.theme,
-        activeTheme: context.activeTheme,
-        setTheme: context.setTheme,
-        availableThemes: context.availableThemes,
-        isLoading: context.isLoading,
-        error: context.error,
-        isThemeLoaded: context.isThemeLoaded,
-        preloadTheme: context.preloadTheme
-    };
+ * Default logger instance
+ */ let defaultLogger = null;
+
+/**
+ * Get or create default logger
+ */ function getLogger() {
+    return defaultLogger || (defaultLogger = new ThemeLogger), defaultLogger;
 }
 
 /**
@@ -21311,7 +20480,7 @@ class ThemeApplicator {
                 },
                 children: JSON.stringify(context, null, 2)
             }) ]
-        }), "development" === process.env.NODE_ENV && errorInfo && jsxs("details", {
+        }), ("undefined" == typeof process || "development" === process.env?.NODE_ENV) && errorInfo && jsxs("details", {
             style: {
                 marginTop: "1rem"
             },
@@ -21407,6 +20576,130 @@ class ThemeApplicator {
     }
 }
 
+/**
+ * Theme Applicator
+ *
+ * Applies theme configurations to the DOM, including CSS variables,
+ * component overrides, typography, spacing, and color palettes.
+ *
+ * Uses the unified theme system for CSS generation and injection.
+ */
+/**
+ * Theme applicator class for runtime theme application
+ *
+ * Uses the unified theme system for efficient CSS variable generation and injection.
+ */ class ThemeApplicator {
+    constructor(root = document.documentElement) {
+        this.styleId = "atomix-theme-applicator", this.root = root;
+    }
+    /**
+   * Apply a complete theme configuration
+   *
+   * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
+   * Automatically respects atomix.config.ts when using DesignTokens.
+   */    applyTheme(theme) {
+        // Clear previously applied variables
+        this.clearAppliedVars(), 
+        // Check if it's DesignTokens
+        this.isDesignTokens(theme) ? 
+        // Direct DesignTokens - use unified theme system (with config support)
+        this.applyDesignTokens(theme) : injectCSS$1(createTheme(theme, {
+            selector: ":root",
+            prefix: "atomix"
+        }), this.styleId), 
+        // Apply component overrides (only for Theme objects)
+        !this.isDesignTokens(theme) && theme.components && this.applyComponentOverrides(theme.components);
+    }
+    /**
+   * Apply DesignTokens using unified theme system
+   *
+   * Uses createTheme() which automatically loads from atomix.config.ts
+   * if no tokens are provided, ensuring config is always respected.
+   */    applyDesignTokens(tokens) {
+        // Inject CSS into DOM
+        injectCSS$1(createTheme(tokens, {
+            selector: ":root",
+            prefix: "atomix"
+        }), this.styleId);
+    }
+    /**
+   * Check if object is DesignTokens
+   */    isDesignTokens(obj) {
+        // DesignTokens is a flat object with string keys, no nested structures
+        return null !== obj && "object" == typeof obj && !("palette" in obj) && !("typography" in obj) && !("__isJSTheme" in obj);
+    }
+    /**
+   * Apply global CSS variables (for component overrides)
+   */    applyGlobalCSSVars(vars) {
+        Object.entries(vars).forEach((([key, value]) => {
+            this.root.style.setProperty(key, String(value));
+        }));
+    }
+    /**
+   * Apply component-level overrides
+   */    applyComponentOverrides(overrides) {
+        Object.entries(overrides).forEach((([componentName, override]) => {
+            override && this.applyComponentOverride(componentName, override);
+        }));
+    }
+    /**
+   * Apply override for a specific component
+   */    applyComponentOverride(componentName, override) {
+        const vars = {}, componentKey = componentName.toLowerCase();
+        // Apply component-level CSS variables
+        override.cssVars && Object.entries(override.cssVars).forEach((([key, value]) => {
+            // If key doesn't start with --, add component prefix
+            const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${key}`;
+            vars[varKey] = value;
+        })), 
+        // Apply part-specific CSS variables
+        override.parts && Object.entries(override.parts).forEach((([partName, partOverride]) => {
+            partOverride.cssVars && Object.entries(partOverride.cssVars).forEach((([key, value]) => {
+                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${partName}-${key}`;
+                vars[varKey] = value;
+            }));
+        })), 
+        // Apply variant-specific CSS variables
+        override.variants && Object.entries(override.variants).forEach((([variantName, variantOverride]) => {
+            variantOverride.cssVars && Object.entries(variantOverride.cssVars).forEach((([key, value]) => {
+                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${variantName}-${key}`;
+                vars[varKey] = value;
+            }));
+        })), this.applyGlobalCSSVars(vars);
+    }
+    /**
+   * Clear all applied CSS variables
+   */    clearAppliedVars() {
+        removeCSS(this.styleId);
+    }
+    /**
+   * Remove theme application
+   */    removeTheme() {
+        this.clearAppliedVars(), removeCSS(this.styleId);
+    }
+    /**
+   * Update specific CSS variables without clearing all
+   */    updateCSSVars(vars) {
+        this.applyGlobalCSSVars(vars);
+    }
+}
+
+/**
+ * Global theme applicator instance
+ */ let globalApplicator = null;
+
+/**
+ * Get or create global theme applicator
+ */ function getThemeApplicator() {
+    return globalApplicator || (globalApplicator = new ThemeApplicator), globalApplicator;
+}
+
+/**
+ * Apply theme using global applicator
+ */ function applyTheme(theme) {
+    getThemeApplicator().applyTheme(theme);
+}
+
 const VIEWPORT_PRESETS = {
     mobile: {
         width: 375,
@@ -23633,7 +22926,25 @@ class RTLManager {
 /**
  * Save theme to CSS file
  */ async function saveTheme(css, filePath) {
-    await saveCSSFile(css, filePath);
+    await async function(css, filePath) {
+        // Check if in browser environment
+        if ("undefined" != typeof window) throw new Error("saveCSSFile can only be used in Node.js environment. Use injectCSS() for browser environments.");
+        // Dynamic import to avoid bundling Node.js modules in browser builds
+                const fs = await import("fs/promises"), dir = (await import("path")).dirname(filePath);
+        await fs.mkdir(dir, {
+            recursive: !0
+        }), 
+        // Write file
+        await fs.writeFile(filePath, css, "utf8");
+    }
+    /**
+ * Theme System Constants
+ *
+ * Centralized constants for the theme system to avoid magic numbers and strings.
+ */
+    /**
+ * Default storage key for theme persistence
+ */ (css, filePath);
 }
 
 const themeImport =  Object.freeze( Object.defineProperty({
@@ -23647,13 +22958,16 @@ const themeImport =  Object.freeze( Object.defineProperty({
     ThemeLiveEditor: ThemeLiveEditor,
     ThemePreview: ThemePreview,
     ThemeProvider: ThemeProvider,
-    ThemeRegistry: ThemeRegistry,
     ThemeValidator: ThemeValidator,
     applyCSSVariables: applyCSSVariables,
+    applyComponentTheme: applyComponentTheme,
     applyTheme: applyTheme,
+    camelToKebab: camelToKebab,
+    clearThemes: clearThemes,
     createDesignTokensFromTheme: createDesignTokensFromTheme,
     createTheme: createTheme,
     createThemeObject: createThemeObject,
+    createThemeRegistry: createThemeRegistry,
     createTokens: createTokens,
     cssVarsToStyle: cssVarsToStyle,
     deepMerge: deepMerge,
@@ -23665,10 +22979,17 @@ const themeImport =  Object.freeze( Object.defineProperty({
     generateCSSVariableName: generateCSSVariableName,
     generateCSSVariables: generateCSSVariables$1,
     generateCSSVariablesForSelector: generateCSSVariablesForSelector,
+    generateClassName: generateClassName,
     generateComponentCSSVars: generateComponentCSSVars,
+    getAllThemes: getAllThemes,
     getCSSVariable: getCSSVariable,
+    getComponentThemeValue: getComponentThemeValue,
     getDesignTokensFromTheme: getDesignTokensFromTheme,
+    getTheme: getTheme,
     getThemeApplicator: getThemeApplicator,
+    getThemeCount: getThemeCount,
+    getThemeIds: getThemeIds,
+    hasTheme: hasTheme,
     injectCSS: injectCSS$1,
     injectTheme: injectTheme,
     isCSSInjected: isCSSInjected,
@@ -23680,15 +23001,19 @@ const themeImport =  Object.freeze( Object.defineProperty({
     mapSCSSTokensToCSSVars: mapSCSSTokensToCSSVars,
     mergeCSSVars: mergeCSSVars,
     mergeTheme: mergeTheme,
+    normalizeThemeTokens: normalizeThemeTokens,
+    registerTheme: registerTheme,
     removeCSS: removeCSS,
     removeCSSVariables: removeCSSVariables,
     removeTheme: removeTheme,
-    saveCSSFile: saveCSSFile,
-    saveCSSFileSync: saveCSSFileSync,
     saveTheme: saveTheme,
+    themePropertyToCSSVar: themePropertyToCSSVar,
     themeToDesignTokens: themeToDesignTokens,
+    unregisterTheme: unregisterTheme,
+    useComponentTheme: useComponentTheme,
     useHistory: useHistory,
-    useTheme: useTheme
+    useTheme: useTheme,
+    useThemeTokens: useThemeTokens
 }, Symbol.toStringTag, {
     value: "Module"
 })), BUTTON_CSS_VARS = {
@@ -24173,7 +23498,7 @@ function getComponentCSSVars(component) {
     // Default config
         // In browser environments, config loading is not supported
     if ("undefined" != typeof window) {
-        if (required) throw new Error("Config loading not supported in browser environment");
+        if (required) throw new Error("loadAtomixConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
         return defaultConfig;
     }
     // Try to load config file
@@ -24237,14 +23562,6 @@ function getComponentCSSVars(component) {
     return null;
 }
 
-const loader =  Object.freeze( Object.defineProperty({
-    __proto__: null,
-    loadAtomixConfig: loadAtomixConfig,
-    resolveConfigPath: resolveConfigPath
-}, Symbol.toStringTag, {
-    value: "Module"
-}));
-
 /**
  * Atomix Configuration System
  *
@@ -24414,5 +23731,5 @@ const atomix = {
     types: types
 };
 
-export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GLASS_CONTAINER, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeRegistry, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyPartStyles, applyTheme, composables, constants, createCSSVarStyle, createDarkVariant, createDebugAttrs, createDesignTokensFromTheme, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeObject, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, designTokensToTheme, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getCSSVariable, getComponentCSSVars, getDesignTokensFromTheme, getPartStyles, getThemeApplicator, getThemeMetadata, hasCustomization, importTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isThemeObject, isValidCSSVariableName, isYouTubeUrl, loadAtomixConfig, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, preloadFonts, quickTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, saveCSSFile, saveCSSFileSync, saveTheme, sliderConstants, supportsDarkMode, theme, themeToCSS, themeToDesignTokens, types, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useButton, useCard, useChartData, useChartInteraction, useChartScale, useCheckbox, useComponentCustomization, useComponentDefaultProps, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal$1 as useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useTodo, utils, validateTheme };
+export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GLASS_CONTAINER, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemes, composables, constants, createCSSVarStyle, createDarkVariant, createDebugAttrs, createDesignTokensFromTheme, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeObject, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, designTokensToTheme, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getDesignTokensFromTheme, getPartStyles, getTheme, getThemeApplicator, getThemeCount, getThemeIds, getThemeMetadata, hasCustomization, hasTheme, importTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isThemeObject, isValidCSSVariableName, isYouTubeUrl, loadAtomixConfig, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, quickTheme, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, saveTheme, sliderConstants, supportsDarkMode, theme, themePropertyToCSSVar, themeToCSS, themeToDesignTokens, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useButton, useCard, useChartData, useChartInteraction, useChartScale, useCheckbox, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal$1 as useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useThemeTokens, useTodo, utils, validateTheme };
 //# sourceMappingURL=index.esm.js.map