@shohojdhara/atomix 0.3.5 → 0.3.7

package/dist/core.js

@@ -586,9 +586,7 @@ import * as PhosphorIcons from "@phosphor-icons/react";
     })
 });
 
-/**
- * Accordion-specific constants
- */ GlassFilterComponent.displayName = "GlassFilter";
+GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
 const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
@@ -601,10 +599,11 @@ const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
     width: 0,
     height: 0
 }, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
-    // Use React's useId() for SSR compatibility
-    // Note: In Next.js, IDs may differ between server and client
-    // We'll suppress hydration warnings on elements that use this ID
-    const filterId = useId(), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
+    // Generate a stable, deterministic ID for SSR compatibility
+    // React's useId() should produce the same ID on server and client for the same
+    // component position in the tree. We use useState to ensure the ID is only
+    // generated once and remains stable across renders.
+    const baseId = useId(), [filterId] = useState((() => `atomix-glass-filter-${baseId.replace(/:/g, "-").replace(/^[^a-z]/i, "atomix-")}`)), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     useEffect((() => {
         "shader" === mode ? 
@@ -664,7 +663,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, {
@@ -977,9 +976,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();
@@ -1054,7 +1053,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;
@@ -1093,7 +1092,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;
@@ -1150,7 +1149,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((() => {
@@ -1290,10 +1289,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 => {}), []);
@@ -1404,7 +1403,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), {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,
@@ -1421,128 +1420,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 && !opacityCacheRef.current) try {
-            const computedStyle = window.getComputedStyle(glassRef.current), 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)
-            };
-        } catch (error) {
-            // Fallback to defaults if reading fails
-            opacityCacheRef.current = {
-                opacity50: .5,
-                opacity40: .4,
-                opacity80: .8,
-                opacity0: 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, so we use direct values
-        // These values align with design tokens: --atomix-white-rgb and --atomix-black-rgb
-        // The actual RGB values are defined in SCSS and should match these fallbacks
-        // TODO: Consider reading from CSS custom properties if browser support improves
-        const whiteColor = "255, 255, 255";
- // Matches --atomix-white-rgb design token
-                // Matches --atomix-black-rgb design token
-        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(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 ${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(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 ${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(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 ${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(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + gradientMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(0, 0, 0, ${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(0, 0, 0, ${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(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + Math.abs(gradientMx) * 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(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),
@@ -2063,69 +1985,103 @@ const sizeMap = {
  * Icon component that displays a Phosphor icon
  */ Icon.displayName = "Icon";
 
+/**
+ * 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} = 
-    /**
- * Button state and functionality
- * @param initialProps - Initial button properties
- * @returns Button state and methods
- */
-    function(initialProps) {
-        // Default button properties
-        const defaultProps = {
-            variant: "primary",
-            size: "md",
-            disabled: !1,
-            rounded: !1,
-            loading: !1,
-            fullWidth: !1,
-            block: !1,
-            active: !1,
-            selected: !1,
-            ...initialProps
-        };
-        /**
-   * Generate button class based on properties
-   * @param props - Button properties
-   * @returns Class string
-   */        return {
-            defaultProps: defaultProps,
-            generateButtonClass: props => {
-                const {variant: variant = defaultProps.variant, size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, rounded: rounded = defaultProps.rounded, iconOnly: iconOnly = !1, glass: glass = defaultProps.glass, loading: loading = defaultProps.loading, fullWidth: fullWidth = defaultProps.fullWidth, block: block = defaultProps.block, active: active = defaultProps.active, selected: selected = defaultProps.selected, className: className = ""} = props, sizeClass = "md" === size ? "" : `c-btn--${size}`, iconOnlyClass = iconOnly ? "c-btn--icon" : "", roundedClass = rounded ? "c-btn--rounded" : "", disabledClass = disabled ? "c-btn--disabled" : "", glassClass = glass ? "c-btn--glass" : "", loadingClass = loading ? BUTTON.CLASSES.LOADING : "", fullWidthClass = fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", blockClass = block ? BUTTON.CLASSES.BLOCK : "", activeClass = active ? BUTTON.CLASSES.ACTIVE : "", selectedClass = selected ? BUTTON.CLASSES.SELECTED : "";
-                return [ BUTTON.BASE_CLASS, `c-btn--${variant}`, sizeClass, iconOnlyClass, roundedClass, disabledClass, glassClass, loadingClass, fullWidthClass, blockClass, activeClass, selectedClass, className ].filter(Boolean).join(" ");
-            },
-            handleClick: handler => event => {
-                defaultProps.disabled || defaultProps.loading || !handler || handler(event);
-            }
-        };
-    }({
-        variant: variant,
-        size: size,
-        disabled: isDisabled,
-        rounded: rounded,
-        glass: glass,
-        loading: loading,
-        fullWidth: fullWidth,
-        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 => {
+    }) : icon;
+    // Determine if we should render as a link
+        const buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass("btn", variant), "md" !== size ? ThemeNaming.sizeClass("btn", size) : "", iconOnly ? ThemeNaming.stateClass("btn", "icon") : "", rounded ? ThemeNaming.stateClass("btn", "rounded") : "", isDisabled ? ThemeNaming.stateClass("btn", "disabled") : "", glass ? ThemeNaming.stateClass("btn", "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);
@@ -2133,28 +2089,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("btn", "spinner"),
             "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("btn", "icon"),
+            "aria-hidden": "true",
+            children: iconElement
+        }), !iconOnly && buttonText && jsx("span", {
+            className: ThemeNaming.bemClass("btn", "label"),
             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,
@@ -2172,8 +2123,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 = {
@@ -2193,22 +2152,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", {
@@ -2219,46 +2166,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";