@shohojdhara/atomix 0.3.13 → 0.3.15

package/dist/forms.js

@@ -1,9 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
-import React, { useRef, useEffect, memo, forwardRef, useMemo, useState, useCallback } from "react";
+import React, { memo, forwardRef, useMemo, useState, useRef, useEffect, useCallback, useImperativeHandle } from "react";
 
-// Define checkbox class constants
-const FORM_CLASSES_BASE = "c-form", FORM_CLASSES_DISABLED = "c-form--disabled", FORM_GROUP_CLASSES_BASE = "c-form-group", FORM_GROUP_CLASSES_SMALL = "c-form-group--sm", FORM_GROUP_CLASSES_LARGE = "c-form-group--lg", FORM_GROUP_CLASSES_INVALID = "c-form-group--invalid", FORM_GROUP_CLASSES_VALID = "c-form-group--valid", FORM_GROUP_CLASSES_DISABLED = "c-form-group--disabled", INPUT_CLASSES_BASE = "c-input", INPUT_CLASSES_SMALL = "c-input--sm", INPUT_CLASSES_LARGE = "c-input--lg", INPUT_CLASSES_INVALID = "is-invalid", INPUT_CLASSES_VALID = "is-valid", INPUT_CLASSES_DISABLED = "is-disabled", INPUT_CLASSES_FULL_WIDTH = "c-input--full-width", INPUT_CLASSES_PREFIX_ICON = "c-input--prefix-icon", INPUT_CLASSES_SUFFIX_ICON = "c-input--suffix-icon", INPUT_CLASSES_CLEARABLE = "c-input--clearable", INPUT_CLASSES_WITH_COUNTER = "c-input--with-counter", INPUT_CLASSES_PASSWORD_TOGGLE = "c-input--password-toggle", INPUT_ELEMENTS_WRAPPER = "c-input-wrapper", RADIO_CLASSES_BASE = "c-radio", RADIO_CLASSES_INVALID = "is-error", RADIO_CLASSES_VALID = "is-valid", RADIO_CLASSES_DISABLED = "is-disabled", SELECT_CLASSES_BASE = "c-select", SELECT_CLASSES_SELECTED = "c-select__selected", SELECT_CLASSES_SELECT_BODY = "c-select__body", SELECT_CLASSES_SELECT_PANEL = "c-select__panel", SELECT_CLASSES_SELECT_ITEMS = "c-select__items", SELECT_CLASSES_SELECT_ITEM = "c-select__item", SELECT_CLASSES_TOGGLE_ICON = "c-select__toggle-icon", SELECT_CLASSES_ICON_CARET = "icon-atomix-caret-down", SELECT_CLASSES_SMALL = "c-select--sm", SELECT_CLASSES_LARGE = "c-select--lg", SELECT_CLASSES_INVALID = "is-invalid", SELECT_CLASSES_VALID = "is-valid", SELECT_CLASSES_DISABLED = "is-disabled", SELECT_CLASSES_IS_OPEN = "is-open", TEXTAREA_CLASSES_BASE = "c-input c-input--textarea", TEXTAREA_CLASSES_SMALL = "c-input--sm", TEXTAREA_CLASSES_LARGE = "c-input--lg", TEXTAREA_CLASSES_INVALID = "is-invalid", TEXTAREA_CLASSES_VALID = "is-valid", TEXTAREA_CLASSES_DISABLED = "is-disabled", ATOMIX_GLASS = {
+/**
+ * Default theme colors for components
+ */
+/**
+ * Form-specific constants
+ */ const FORM_CLASSES_BASE = "c-form", FORM_CLASSES_DISABLED = "c-form--disabled", FORM_GROUP_CLASSES_BASE = "c-form-group", FORM_GROUP_CLASSES_SMALL = "c-form-group--sm", FORM_GROUP_CLASSES_LARGE = "c-form-group--lg", FORM_GROUP_CLASSES_INVALID = "c-form-group--invalid", FORM_GROUP_CLASSES_VALID = "c-form-group--valid", FORM_GROUP_CLASSES_DISABLED = "c-form-group--disabled", INPUT_CLASSES_BASE = "c-input", INPUT_CLASSES_SMALL = "c-input--sm", INPUT_CLASSES_LARGE = "c-input--lg", INPUT_CLASSES_INVALID = "is-invalid", INPUT_CLASSES_VALID = "is-valid", INPUT_CLASSES_DISABLED = "is-disabled", INPUT_CLASSES_FULL_WIDTH = "c-input--full-width", INPUT_CLASSES_PREFIX_ICON = "c-input--prefix-icon", INPUT_CLASSES_SUFFIX_ICON = "c-input--suffix-icon", INPUT_CLASSES_CLEARABLE = "c-input--clearable", INPUT_CLASSES_WITH_COUNTER = "c-input--with-counter", INPUT_CLASSES_PASSWORD_TOGGLE = "c-input--password-toggle", INPUT_ELEMENTS_WRAPPER = "c-input-wrapper", RADIO_CLASSES_BASE = "c-radio", RADIO_CLASSES_INVALID = "is-error", RADIO_CLASSES_VALID = "is-valid", RADIO_CLASSES_DISABLED = "is-disabled", SELECT_CLASSES_BASE = "c-select", SELECT_CLASSES_SELECTED = "c-select__selected", SELECT_CLASSES_SELECT_BODY = "c-select__body", SELECT_CLASSES_SELECT_PANEL = "c-select__panel", SELECT_CLASSES_SELECT_ITEMS = "c-select__items", SELECT_CLASSES_SELECT_ITEM = "c-select__item", SELECT_CLASSES_TOGGLE_ICON = "c-select__toggle-icon", SELECT_CLASSES_ICON_CARET = "icon-atomix-caret-down", SELECT_CLASSES_SMALL = "c-select--sm", SELECT_CLASSES_LARGE = "c-select--lg", SELECT_CLASSES_INVALID = "is-invalid", SELECT_CLASSES_VALID = "is-valid", SELECT_CLASSES_DISABLED = "is-disabled", SELECT_CLASSES_IS_OPEN = "is-open", TEXTAREA_CLASSES_BASE = "c-input c-input--textarea", TEXTAREA_CLASSES_SMALL = "c-input--sm", TEXTAREA_CLASSES_LARGE = "c-input--lg", TEXTAREA_CLASSES_INVALID = "is-invalid", TEXTAREA_CLASSES_VALID = "is-valid", TEXTAREA_CLASSES_DISABLED = "is-disabled", ATOMIX_GLASS = {
     BASE_CLASS: "c-atomix-glass",
     CONTAINER_CLASS: "c-atomix-glass__container",
     INNER_CLASS: "c-atomix-glass__inner",
@@ -58,10 +62,16 @@ const FORM_CLASSES_BASE = "c-form", FORM_CLASSES_DISABLED = "c-form--disabled",
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
+        // Note: This default must match the SCSS variable --atomix-radius-md
+        // @see src/styles/01-settings/_settings.global.scss
         DEFAULT_CORNER_RADIUS: 16,
-        // Fallback value matching design system
         MAX_SIZE: 4096,
         // Maximum width/height for glass size
+        // Palette for internal calculations (matches design system base colors)
+        PALETTE: {
+            WHITE: "255, 255, 255",
+            BLACK: "0, 0, 0"
+        },
         // Gradient calculation constants
         GRADIENT: {
             BASE_ANGLE: 135,
@@ -220,10 +230,10 @@ const FORM_CLASSES_BASE = "c-form", FORM_CLASSES_DISABLED = "c-form--disabled",
     y: 0
 }, calculateMouseInfluence = mouseOffset => {
     if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
-    // More responsive calculation for overlight effects
+    // Bounded calculation — keeps the glass effect subtle and stable
         const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$1.MOUSE_INFLUENCE_DIVISOR;
-    return Math.min(1.5, influence);
- // Cap influence for better control
+    return Math.min(.8, influence);
+ // Tighter cap to prevent blur/filter blow-out
 }, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$1.MIN_BLUR : Math.max(CONSTANTS$1.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$1.MAX_SIZE && size.height <= CONSTANTS$1.MAX_SIZE, parseBorderRadiusValue = value => {
     if ("number" == typeof value) return Math.max(0, value);
     if ("string" != typeof value || !value.trim()) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
@@ -438,9 +448,7 @@ const FORM_CLASSES_BASE = "c-form", FORM_CLASSES_DISABLED = "c-form--disabled",
 });
 
 /**
- * Checkbox state and functionality
- * @param initialProps - Initial checkbox properties
- * @returns Checkbox state and methods
+ * Form Group-specific constants
  */ GlassFilterComponent.displayName = "GlassFilter";
 
 // Memoize component to prevent unnecessary re-renders
@@ -456,7 +464,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, globalMousePosition: globalMousePosition = {
     x: 0,
     y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, active: active = !1, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, cornerRadius: cornerRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
+}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, cornerRadius: cornerRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     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) => {
@@ -569,28 +577,29 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             flowBlur: 1.2 * blurAmount
         };
         // Enhanced validation for liquid blur
-                if (!enableLiquidBlur || !rectCache || !globalMousePosition || "number" != typeof globalMousePosition.x || "number" != typeof globalMousePosition.y || isNaN(globalMousePosition.x) || isNaN(globalMousePosition.y)) return defaultBlur;
+                if (!enableLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
         try {
-            // Cache center and distance calculations
-            const center = calculateElementCenter(rectCache), distance = calculateDistance(globalMousePosition, center), maxDistance = Math.sqrt(rectCache.width * rectCache.width + rectCache.height * rectCache.height) / 2, normalizedDistance = Math.min(distance / maxDistance, 1), mouseInfluence = calculateMouseInfluence(mouseOffset), baseBlur = blurAmount + mouseInfluence * blurAmount * .4, edgeBlur = baseBlur * (.8 + .6 * (1.5 * normalizedDistance + .3 * mouseInfluence)), centerBlur = baseBlur * (.3 + .4 * (.3 * (1 - normalizedDistance) + .2 * mouseInfluence)), deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, flowDirection = Math.atan2(deltaY, deltaX), flowBlur = baseBlur * (.4 + .6 * (.5 * Math.sin(flowDirection + mouseInfluence * Math.PI) + .5)), stateMultiplier = (isHovered ? 1.2 : 1) * (isActive ? 1.4 : 1);
+            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = 2 * blurAmount, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * .15), edgeIntensity = .15 * mouseInfluence, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = .1 * mouseInfluence, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, 1.2 * baseBlur);
+            // NOTE: hover/active multipliers intentionally omitted here —
+            // they belong on opacity layers, not the blur filter itself.
             return {
-                baseBlur: clampBlur(baseBlur * stateMultiplier),
-                edgeBlur: clampBlur(edgeBlur * stateMultiplier),
-                centerBlur: clampBlur(centerBlur * stateMultiplier),
-                flowBlur: clampBlur(flowBlur * stateMultiplier)
+                baseBlur: clampBlur(baseBlur),
+                edgeBlur: clampBlur(edgeBlur),
+                centerBlur: clampBlur(centerBlur),
+                flowBlur: clampBlur(flowBlur)
             };
         } catch (error) {
             return console.warn("AtomixGlassContainer: Error calculating liquid blur", error), 
             defaultBlur;
         }
-    }), [ enableLiquidBlur, blurAmount, globalMousePosition, mouseOffset, isHovered, isActive, rectCache, style, glassSize ]), backdropStyle = useMemo((() => {
+    }), [ enableLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
         try {
             const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), validatedBaseBlur = "number" != typeof liquidBlur.baseBlur || isNaN(liquidBlur.baseBlur) ? 0 : liquidBlur.baseBlur, validatedEdgeBlur = "number" != typeof liquidBlur.edgeBlur || isNaN(liquidBlur.edgeBlur) ? 0 : liquidBlur.edgeBlur, validatedCenterBlur = "number" != typeof liquidBlur.centerBlur || isNaN(liquidBlur.centerBlur) ? 0 : liquidBlur.centerBlur, validatedFlowBlur = "number" != typeof liquidBlur.flowBlur || isNaN(liquidBlur.flowBlur) ? 0 : liquidBlur.flowBlur, area = rectCache ? rectCache.width * rectCache.height : 0;
             // Validate blur values before using them
                         return !enableLiquidBlur || effectiveReducedMotion || effectiveDisableEffects || area > 18e4 ? {
-                backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`
+                backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
             } : {
-                backdropFilter: `${[ `blur(${validatedBaseBlur}px)`, `blur(${validatedEdgeBlur}px)`, `blur(${validatedCenterBlur}px)`, `blur(${validatedFlowBlur}px)` ].join(" ")} saturate(${Math.min(dynamicSaturation, 200)}%) contrast(1.05) brightness(1.05)`
+                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
             };
             // Single-pass fallback: stronger radius to match perceived blur of multi-pass
                 } catch (error) {
@@ -609,7 +618,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-padding": padding || "0 0",
                 "--atomix-glass-container-radius": `${"number" != typeof cornerRadius || isNaN(cornerRadius) ? 0 : cornerRadius}px`,
                 "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
-                "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${.4 + .002 * mx})`, `inset 0 -1px 0 rgba(0, 0, 0, ${.2 + .001 * Math.abs(my)})`, `inset 0 0 20px rgba(0, 0, 0, ${.08 + .001 * Math.abs(mx + my)})`, `0 2px 12px rgba(0, 0, 0, ${.12 + .002 * Math.abs(my)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset",
+                "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig?.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset",
                 "--atomix-glass-container-shadow-opacity": effectiveDisableEffects ? 0 : 1,
                 // Background and shadow values use design token-aligned RGB values
                 "--atomix-glass-container-bg": overLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none",
@@ -628,10 +637,18 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-text-shadow": "none"
             };
         }
-    }), [ glassSize, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects ]);
+    }), [ glassSize, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects ]), setForceNoTransition = el => {
+        el && (el.style.setProperty("transition-duration", "0s", "important"), el.style.setProperty("animation-duration", "0s", "important"), 
+        el.style.setProperty("transition-delay", "0s", "important"));
+    };
     return jsx("div", {
-        ref: ref,
-        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${active ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
+        ref: el => {
+            // Apply force no-transition
+            setForceNoTransition(el), 
+            // Handle forwarded ref
+            "function" == typeof ref ? ref(el) : ref && (ref.current = el);
+        },
+        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${isActive ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
         style: {
             ...style,
             ...containerVars
@@ -649,6 +666,11 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             onMouseUp: onMouseUp,
             children: [ jsxs("div", {
                 className: ATOMIX_GLASS.FILTER_CLASS,
+                style: {
+                    zIndex: 1,
+                    position: "absolute",
+                    inset: 0
+                },
                 children: [ jsx(GlassFilter, {
                     blurAmount: blurAmount,
                     mode: mode,
@@ -657,6 +679,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
+                    ref: setForceNoTransition,
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
                         filter: `url(#${filterId})`,
@@ -678,9 +701,8 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 style: {
                     position: "relative",
                     textShadow: "var(--atomix-glass-container-text-shadow)",
-                    ...elasticity > 0 ? {
-                        zIndex: 100
-                    } : {}
+                    // Ensure content is always above the filter layer (zIndex 1)
+                    zIndex: elasticity > 0 ? 100 : 2
                 },
                 children: children
             }) ]
@@ -798,12 +820,12 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [internalMouseOffset, setInternalMouseOffset] = useState({
         x: 0,
         y: 0
-    }), [dynamicCornerRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveCornerRadius = useMemo((() => void 0 !== cornerRadius ? Math.max(0, cornerRadius) : Math.max(0, dynamicCornerRadius)), [ cornerRadius, dynamicCornerRadius, debugCornerRadius ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveDisableEffects = useMemo((() => disableEffects || effectiveReducedMotion), [ disableEffects, effectiveReducedMotion ]), globalMousePosition = useMemo((() => externalGlobalMousePosition || internalGlobalMousePosition), [ externalGlobalMousePosition, internalGlobalMousePosition ]), mouseOffset = useMemo((() => externalMouseOffset || internalMouseOffset), [ externalMouseOffset, internalMouseOffset ]);
+    }), [dynamicCornerRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveCornerRadius = useMemo((() => void 0 !== cornerRadius ? Math.max(0, cornerRadius) : Math.max(0, dynamicCornerRadius)), [ cornerRadius, dynamicCornerRadius ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveDisableEffects = useMemo((() => disableEffects || effectiveReducedMotion), [ disableEffects, effectiveReducedMotion ]), globalMousePosition = useMemo((() => externalGlobalMousePosition || internalGlobalMousePosition), [ externalGlobalMousePosition, internalGlobalMousePosition ]), mouseOffset = useMemo((() => externalMouseOffset || internalMouseOffset), [ externalMouseOffset, internalMouseOffset ]);
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
             try {
-                let extractedRadius = null, extractionSource = "default";
+                let extractedRadius = null;
                 if (contentRef.current) {
                     const firstChild = contentRef.current.firstElementChild;
                     if (firstChild) {
@@ -820,15 +842,14 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                                 return null;
                             }
                         })(firstChild);
-                        null !== domRadius && domRadius > 0 && (extractedRadius = domRadius, extractionSource = "DOM element");
+                        null !== domRadius && domRadius > 0 && (extractedRadius = domRadius);
                     }
                 }
                 if (null === extractedRadius) {
                     const childRadius = extractBorderRadiusFromChildren(children);
-                    childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS && (extractedRadius = childRadius, 
-                    extractionSource = "React children");
+                    childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS && (extractedRadius = childRadius);
                 }
-                null !== extractedRadius && extractedRadius > 0 ? setDynamicCornerRadius(extractedRadius) : "undefined" == typeof process || process.env;
+                null !== extractedRadius && extractedRadius > 0 && setDynamicCornerRadius(extractedRadius);
             } catch (error) {
                 "undefined" != typeof process && "production" === process.env?.NODE_ENV || !debugCornerRadius || console.error("[AtomixGlass] Error extracting corner radius:", error);
             }
@@ -957,7 +978,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         }
         if ("boolean" == typeof overLight && 
         // For boolean values, disable auto-detection
-        // Cache is automatically managed by WeakMap (no manual clearing needed)
         setDetectedOverLight(!1), "function" == typeof window.matchMedia) try {
             const mediaQueryReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"), mediaQueryHighContrast = window.matchMedia("(prefers-contrast: high)");
             setUserPrefersReducedMotion(mediaQueryReducedMotion.matches), setUserPrefersHighContrast(mediaQueryHighContrast.matches);
@@ -1027,6 +1047,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects ]);
     // Transform calculations
     const calculateDirectionalScale = useCallback((() => {
+        if (!0 === overLight || "auto" === overLight && detectedOverLight || "object" == typeof overLight && null !== overLight && detectedOverLight) return "scale(1)";
         if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return "scale(1)";
         const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2), edgeDistance = calculateDistance({
             x: edgeDistanceX,
@@ -1040,7 +1061,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         if (0 === centerDistance) return "scale(1)";
         const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15;
         return `scaleX(${Math.max(.8, scaleX)}) scaleY(${Math.max(.8, scaleY)})`;
-    }), [ globalMousePosition, elasticity, glassSize, glassRef ]), calculateFadeInFactor = useCallback((() => {
+    }), [ globalMousePosition, elasticity, glassSize, glassRef, overLight, detectedOverLight ]), calculateFadeInFactor = useCallback((() => {
         if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return 0;
         const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2), edgeDistance = calculateDistance({
             x: edgeDistanceX,
@@ -1125,20 +1146,21 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             isOverLight: isOverLight,
             threshold: .7,
             opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
-            contrast: Math.min(1.8, Math.max(1, 1.4 + .3 * mouseInfluence)),
-            brightness: Math.min(1.2, Math.max(.7, .85 + .15 * mouseInfluence)),
-            saturationBoost: Math.min(2, Math.max(1, 1.3 + .4 * mouseInfluence)),
-            shadowIntensity: Math.min(1.5, Math.max(.5, .9 + .5 * mouseInfluence)),
-            borderOpacity: Math.min(1, Math.max(.3, .7 + .3 * mouseInfluence))
+            contrast: Math.min(1.6, Math.max(1, 1.4 + .1 * mouseInfluence)),
+            brightness: Math.min(1.1, Math.max(.8, .9 + .05 * mouseInfluence)),
+            saturationBoost: 1.3,
+            // Fixed value — dynamic saturation amplifies perceived displacement
+            shadowIntensity: Math.min(1.2, Math.max(.5, .9 + .2 * mouseInfluence)),
+            borderOpacity: Math.min(1, Math.max(.3, .7 + .1 * mouseInfluence))
         };
         if ("object" == typeof overLight && null !== overLight) {
             const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost), finalConfig = {
                 ...baseConfig,
                 threshold: validatedThreshold,
                 opacity: validatedOpacity * hoverIntensity * activeIntensity,
-                contrast: validatedContrast + .3 * mouseInfluence,
-                brightness: validatedBrightness + .15 * mouseInfluence,
-                saturationBoost: validatedSaturationBoost + .4 * mouseInfluence
+                contrast: Math.min(1.6, validatedContrast + .1 * mouseInfluence),
+                brightness: Math.min(1.1, validatedBrightness + .05 * mouseInfluence),
+                saturationBoost: validatedSaturationBoost
             };
             // Validate and apply object config values with proper clamping
                         return "undefined" == typeof process || process.env, finalConfig;
@@ -1272,19 +1294,19 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         debugOverLight: debugOverLight,
         enablePerformanceMonitoring: enablePerformanceMonitoring,
         children: children
-    }), isOverLight = overLightConfig.isOverLight, shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
+    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
         ...style,
-        ...0 !== elasticity && !effectiveDisableEffects && {
+        ...!effectiveDisableEffects && {
             transform: transformStyle
         }
-    }, 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 = {
+    }, 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 = useMemo((() => ({
         position: style.position || "absolute",
         top: style.top || 0,
         left: style.left || 0
-    }, adjustedSize = {
+    })), [ style.position, style.top, style.left ]), adjustedSize = useMemo((() => ({
         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)
-    }, gradientValues = useMemo((() => {
+    })), [ style.position, style.width, style.height, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
         const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
         return {
             borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
@@ -1324,7 +1346,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             over: isOverLight ? 1.1 * (overLightOpacity || .4) : 0
         };
     }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = useMemo((() => {
-        const whiteColor = "255, 255, 255", {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues;
+        const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues, configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
         return {
             "--atomix-glass-radius": `${effectiveCornerRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
@@ -1335,20 +1357,20 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
             "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
             "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
-            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[0]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[1]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${borderOpacities[2]}) ${borderStop1}%, rgba(${whiteColor}, ${borderOpacities[3]}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
+            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
             "--atomix-glass-hover-1-opacity": opacityValues.hover1,
-            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, 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 ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, 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-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, 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 ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, 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 ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, 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 ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, 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-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, 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 ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, 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 ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, 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 ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, 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-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, 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 ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, 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 + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
+            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${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(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * 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 ${basePosition.x}% ${basePosition.y}%, rgba(0, 0, 0, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * 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 + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
+            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * 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 + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
         };
-    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight ]), renderBackgroundLayer = layerType => jsx("div", {
+    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight, overLightConfig.borderOpacity ]), renderBackgroundLayer = layerType => jsx("div", {
         className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
         style: {
             ...positionStyles,
@@ -1374,9 +1396,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             className: className,
             style: baseStyle,
             cornerRadius: effectiveCornerRadius,
-            displacementScale: effectiveDisableEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : overLightConfig.isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
+            displacementScale: effectiveDisableEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
             blurAmount: effectiveDisableEffects ? 0 : blurAmount,
-            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : overLightConfig.isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
+            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
             aberrationIntensity: effectiveDisableEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
             glassSize: glassSize,
             padding: padding,
@@ -1392,10 +1414,15 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             onMouseLeave: handleMouseLeave,
             onMouseDown: handleMouseDown,
             onMouseUp: handleMouseUp,
-            active: isActive,
             isHovered: isHovered,
             isActive: isActive,
-            overLight: overLightConfig.isOverLight,
+            overLight: isOverLight,
+            overLightConfig: {
+                contrast: overLightConfig.contrast,
+                brightness: overLightConfig.brightness,
+                shadowIntensity: overLightConfig.shadowIntensity,
+                borderOpacity: overLightConfig.borderOpacity
+            },
             onClick: onClick,
             mode: mode,
             transform: baseStyle.transform,
@@ -1435,74 +1462,56 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     });
 }
 
-/**
- * Checkbox - A component for checkbox inputs
- */ const Checkbox =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
-    const {generateCheckboxClass: generateCheckboxClass, checkboxRef: checkboxRef} = function(initialProps) {
-        // Default checkbox properties
-        const defaultProps = {
-            disabled: !1,
-            invalid: !1,
-            valid: !1,
-            indeterminate: !1,
-            ...initialProps
-        }, checkboxRef = useRef(null);
-        // Ref for the checkbox input element
-                // Handle indeterminate state
-        return useEffect((() => {
-            checkboxRef.current && (checkboxRef.current.indeterminate = Boolean(defaultProps.indeterminate));
-        }), [ defaultProps.indeterminate ]), {
-            defaultProps: defaultProps,
-            generateCheckboxClass: props => {
-                const {disabled: disabled = defaultProps.disabled, invalid: invalid = defaultProps.invalid, valid: valid = defaultProps.valid, indeterminate: indeterminate = defaultProps.indeterminate, className: className = ""} = props;
-                let validationClass = "";
-                return invalid ? validationClass = "is-error" : valid && (validationClass = "is-valid"), 
-                `c-checkbox ${validationClass} ${disabled ? "is-disabled" : ""} ${indeterminate ? "c-checkbox--mixed" : ""} ${className}`.trim();
-            },
-            checkboxRef: checkboxRef
-        };
-    }
-    /**
- * Default theme colors for components
- */
-    /**
- * Form-specific constants
- */ ({
-        indeterminate: indeterminate,
-        disabled: disabled,
-        invalid: invalid,
-        valid: valid
-    }), checkboxClass = generateCheckboxClass({
-        className: `${className} ${glass ? "c-checkbox--glass" : ""}`.trim(),
+const Checkbox =  React.memo( forwardRef((({label: label, checked: checked, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, indeterminate: indeterminate = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, onClick: onClick, glass: glass, ...props}, ref) => {
+    // Local ref to handle indeterminate state
+    const localRef = useRef(null);
+    // Merge refs
+        useImperativeHandle(ref, (() => localRef.current)), 
+    // Handle indeterminate
+    useEffect((() => {
+        localRef.current && (localRef.current.indeterminate = Boolean(indeterminate));
+    }), [ indeterminate ]);
+    // Generate classes
+    let validationClass = "";
+    invalid ? validationClass = "is-error" : valid && (validationClass = "is-valid");
+    const checkboxClass = `c-checkbox ${validationClass} ${disabled ? "is-disabled" : ""} ${indeterminate ? "c-checkbox--mixed" : ""} ${glass ? "c-checkbox--glass" : ""} ${className}`.trim(), inputElement = jsx("input", {
+        ref: localRef,
+        type: "checkbox",
+        className: "c-checkbox__input",
+        checked: checked,
+        onChange: onChange,
+        onClick: onClick,
         disabled: disabled,
-        invalid: invalid,
-        valid: valid,
-        indeterminate: indeterminate
-    }), checkboxContent = jsxs("div", {
+        required: required,
+        id: id,
+        name: name,
+        value: value,
+        "aria-label": label ? void 0 : ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": invalid,
+        ...props
+    });
+    let content;
+    if (content = id && label ? jsxs("div", {
         className: checkboxClass,
         style: style,
-        children: [ jsx("input", {
-            ref: checkboxRef,
-            type: "checkbox",
-            className: "c-checkbox__input",
-            checked: checked,
-            onChange: onChange,
-            disabled: disabled,
-            required: required,
-            id: id,
-            name: name,
-            value: value,
-            "aria-label": label ? void 0 : ariaLabel,
-            "aria-describedby": ariaDescribedBy,
-            "aria-invalid": invalid
-        }), label && jsx("label", {
+        children: [ inputElement, jsx("label", {
             className: "c-checkbox__label",
             htmlFor: id,
             children: label
         }) ]
-    });
-    if (glass) {
-        // Default glass settings for checkboxes
+    }) : label ? jsxs("label", {
+        className: checkboxClass,
+        style: style,
+        children: [ inputElement, jsx("span", {
+            className: "c-checkbox__label",
+            children: label
+        }) ]
+    }) : jsx("div", {
+        className: checkboxClass,
+        style: style,
+        children: inputElement
+    }), glass) {
         const defaultGlassProps = {
             displacementScale: 40,
             blurAmount: 1,
@@ -1516,11 +1525,11 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         };
         return jsx(AtomixGlass, {
             ...glassProps,
-            children: checkboxContent
+            children: content
         });
     }
-    return checkboxContent;
-}));
+    return content;
+})));
 
 Checkbox.displayName = "Checkbox";
 
@@ -1646,7 +1655,7 @@ FormGroup.displayName = "FormGroup";
 /**
  * Input - A component for text input fields
  */
-const Input =  memo( forwardRef((({type: type = "text", value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Input =  memo( forwardRef((({type: type = "text", value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus = !1, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, maxLength: maxLength, minLength: minLength, pattern: pattern, min: min, max: max, step: step, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}, ref) => {
     const {generateInputClass: generateInputClass} = 
     /**
  * Input state and functionality
@@ -1701,6 +1710,7 @@ const Input =  memo( forwardRef((({type: type = "text", value: value, onChange:
         type: type,
         className: inputClass,
         value: value,
+        defaultValue: defaultValue,
         onChange: onChange,
         onBlur: onBlur,
         onFocus: onFocus,
@@ -1751,7 +1761,7 @@ Input.displayName = "Input";
 /**
  * Radio - A component for radio button inputs
  */
-const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange, className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, value: value, invalid: invalid = !1, valid: valid = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
     const {generateRadioClass: generateRadioClass} = 
     /**
  * Radio state and functionality
@@ -1836,7 +1846,7 @@ Radio.displayName = "Radio";
 /**
  * Select - A component for dropdown selection
  */
-const Select =  memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}) => {
+const Select =  memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
     const {generateSelectClass: generateSelectClass} = 
     /**
  * Select state and functionality
@@ -2015,7 +2025,7 @@ Select.displayName = "Select";
 /**
  * Textarea - A component for multiline text input
  */
-const Textarea =  memo( forwardRef((({value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, rows: rows = 4, cols: cols, maxLength: maxLength, minLength: minLength, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, autoFocus: autoFocus = !1, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, glass: glass}, ref) => {
+const Textarea =  memo( forwardRef((({value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, className: className = "", style: style, disabled: disabled = !1, required: required = !1, readOnly: readOnly = !1, id: id, name: name, rows: rows = 4, cols: cols, maxLength: maxLength, minLength: minLength, size: size = "md", variant: variant, invalid: invalid = !1, valid: valid = !1, autoFocus: autoFocus = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}, ref) => {
     const {generateTextareaClass: generateTextareaClass} = function(initialProps) {
         // Default textarea properties
         const defaultProps = {
@@ -2055,6 +2065,7 @@ const Textarea =  memo( forwardRef((({value: value, onChange: onChange, onBlur:
         ref: ref,
         className: textareaClass,
         value: value,
+        defaultValue: defaultValue,
         onChange: onChange,
         onBlur: onBlur,
         onFocus: onFocus,
@@ -2307,7 +2318,11 @@ const smoothStep = (a, b, t) => {
         // Add input validation
         "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = calculateLength(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = calculateLength(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothStep(.92, -.12, distanceToEdge), edgeSoftness = smoothStep(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
         return createTexture(clampValue(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clampValue(finalY + .5, 0, 1));
-    }
+    },
+    // Aliases for compatibility
+    plasma: (uv, mousePosition) => fragmentShaders.premiumGlass(uv, mousePosition),
+    waves: (uv, mousePosition) => fragmentShaders.liquidMetal(uv, mousePosition),
+    noise: (uv, mousePosition) => fragmentShaders.appleFluid(uv, mousePosition)
 }, shaderUtils =  Object.freeze( Object.defineProperty({
     __proto__: null,
     ShaderDisplacementGenerator: class {