@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -33,7 +33,7 @@ import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
  *
  * @example
  * // Manual border-radius override
- * <AtomixGlass cornerRadius={20}>
+ * <AtomixGlass borderRadius={20}>
  *   <div>Content with 20px glass radius</div>
  * </AtomixGlass>
  *
@@ -82,7 +82,7 @@ export function AtomixGlass({
   saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
   aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
   elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY,
-  cornerRadius,
+  borderRadius,
   globalMousePosition: externalGlobalMousePosition,
   mouseOffset: externalMouseOffset,
   mouseContainer = null,
@@ -99,13 +99,16 @@ export function AtomixGlass({
   tabIndex,
   reducedMotion = false,
   highContrast = false,
-  disableEffects = false,
-  enableLiquidBlur = false,
-  enableBorderEffect = true,
-  enableOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS,
-  enablePerformanceMonitoring = false,
-  debugCornerRadius = false,
+  withoutEffects = false,
+  withLiquidBlur = false,
+  withBorder = true,
+  withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS,
+  debugPerformance = false,
+  debugBorderRadius = false,
   debugOverLight = false,
+  height,
+  width,
+  ...rest
 }: AtomixGlassProps) {
   const glassRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -115,10 +118,10 @@ export function AtomixGlass({
     isHovered,
     isActive,
     glassSize,
-    effectiveCornerRadius,
+    effectiveBorderRadius,
     effectiveReducedMotion,
     effectiveHighContrast,
-    effectiveDisableEffects,
+    effectiveWithoutEffects,
     overLightConfig,
     globalMousePosition,
     mouseOffset,
@@ -131,32 +134,38 @@ export function AtomixGlass({
   } = useAtomixGlass({
     glassRef,
     contentRef,
-    cornerRadius,
+    borderRadius,
     globalMousePosition: externalGlobalMousePosition,
     mouseOffset: externalMouseOffset,
     mouseContainer,
     overLight,
     reducedMotion,
     highContrast,
-    disableEffects,
+    withoutEffects,
     elasticity,
     onClick,
-    debugCornerRadius,
+    debugBorderRadius,
     debugOverLight,
-    enablePerformanceMonitoring,
+    debugPerformance,
     children,
+    blurAmount,
+    saturation,
+    withLiquidBlur,
+    padding,
+    style,
   });
 
   // Calculate isOverLight independently from overLightConfig to prevent displacement changes on hover
   // overLightConfig recalculates with hover/active states, but displacement should remain stable
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const isOverLight = useMemo(() => overLightConfig?.isOverLight, [overLight]);
 
-  const shouldRenderOverLightLayers = enableOverLightLayers && isOverLight;
+  const shouldRenderOverLightLayers = withOverLightLayers && isOverLight;
 
   // Calculate base style with transforms
   const baseStyle = {
     ...style,
-    ...(!effectiveDisableEffects && {
+    ...(!effectiveWithoutEffects && {
       transform: transformStyle,
     }),
   };
@@ -166,7 +175,7 @@ export function AtomixGlass({
     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`,
+    effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`,
     className,
   ]
     .filter(Boolean)
@@ -182,23 +191,32 @@ export function AtomixGlass({
     [style.position, style.top, style.left]
   );
 
-  const adjustedSize = useMemo(
-    () => ({
-      width:
-        style.position !== 'fixed'
-          ? '100%'
-          : style.width
-            ? style.width
-            : Math.max(glassSize.width, 0),
-      height:
-        style.position !== 'fixed'
-          ? '100%'
-          : style.height
-            ? style.height
-            : Math.max(glassSize.height, 0),
-    }),
-    [style.position, style.width, style.height, glassSize.width, glassSize.height]
-  );
+  const adjustedSize = useMemo(() => {
+    const resolveSize = (
+      propValue: string | number | undefined,
+      styleValue: string | number | undefined,
+      measuredSize: number
+    ) => {
+      const explicitSize = propValue ?? styleValue;
+      if (explicitSize !== undefined) {
+        return typeof explicitSize === 'number' ? `${explicitSize}px` : explicitSize;
+      }
+      return positionStyles.position === 'fixed' ? `${Math.max(measuredSize, 0)}px` : '100%';
+    };
+
+    return {
+      width: resolveSize(width, style.width, glassSize.width),
+      height: resolveSize(height, style.height, glassSize.height),
+    };
+  }, [
+    width,
+    height,
+    style.width,
+    style.height,
+    positionStyles.position,
+    glassSize.width,
+    glassSize.height,
+  ]);
 
   // Memoize expensive gradient calculations
   const gradientValues = useMemo(() => {
@@ -286,15 +304,13 @@ export function AtomixGlass({
     const configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
 
     return {
-      '--atomix-glass-radius': `${effectiveCornerRadius}px`,
+      '--atomix-glass-radius': `${effectiveBorderRadius}px`,
       '--atomix-glass-transform': transformStyle || 'none',
       '--atomix-glass-position': positionStyles.position,
       '--atomix-glass-top': positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
       '--atomix-glass-left': positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
-      '--atomix-glass-width':
-        style.position !== 'fixed' ? adjustedSize.width : `${adjustedSize.width}px`,
-      '--atomix-glass-height':
-        style.position !== 'fixed' ? adjustedSize.height : `${adjustedSize.height}px`,
+      '--atomix-glass-width': adjustedSize.width,
+      '--atomix-glass-height': adjustedSize.height,
       '--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] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
@@ -323,11 +339,10 @@ export function AtomixGlass({
   }, [
     gradientValues,
     opacityValues,
-    effectiveCornerRadius,
+    effectiveBorderRadius,
     transformStyle,
     positionStyles,
     adjustedSize,
-    style.position,
     isOverLight,
     overLightConfig.borderOpacity,
   ]);
@@ -350,7 +365,7 @@ export function AtomixGlass({
         ...positionStyles,
         height: adjustedSize.height,
         width: adjustedSize.width,
-        borderRadius: `${effectiveCornerRadius}px`,
+        borderRadius: `${effectiveBorderRadius}px`,
         transform: baseStyle.transform,
       }}
     />
@@ -358,13 +373,14 @@ export function AtomixGlass({
 
   return (
     <div
+      {...rest}
       className={componentClassName}
       style={glassVars}
       role={role || (onClick ? 'button' : undefined)}
       tabIndex={onClick ? (tabIndex ?? 0) : tabIndex}
       aria-label={ariaLabel}
       aria-describedby={ariaDescribedBy}
-      aria-disabled={onClick && effectiveDisableEffects ? true : onClick ? false : undefined}
+      aria-disabled={onClick && effectiveWithoutEffects ? true : onClick ? false : undefined}
       aria-pressed={onClick && isActive ? true : onClick ? false : undefined}
       onKeyDown={onClick ? handleKeyDown : undefined} // Dynamic CSS variables cause hydration mismatch due to mouse position calculations
     >
@@ -373,9 +389,9 @@ export function AtomixGlass({
         contentRef={contentRef}
         className={className}
         style={baseStyle}
-        cornerRadius={effectiveCornerRadius}
+        borderRadius={effectiveBorderRadius}
         displacementScale={
-          effectiveDisableEffects
+          effectiveWithoutEffects
             ? 0
             : mode === 'shader'
               ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT
@@ -383,7 +399,7 @@ export function AtomixGlass({
                 ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT
                 : displacementScale
         }
-        blurAmount={effectiveDisableEffects ? 0 : blurAmount}
+        blurAmount={effectiveWithoutEffects ? 0 : blurAmount}
         saturation={
           effectiveHighContrast
             ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST
@@ -392,7 +408,7 @@ export function AtomixGlass({
               : saturation
         }
         aberrationIntensity={
-          effectiveDisableEffects
+          effectiveWithoutEffects
             ? 0
             : mode === 'shader'
               ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION
@@ -400,8 +416,8 @@ export function AtomixGlass({
         }
         glassSize={glassSize}
         padding={padding}
-        mouseOffset={effectiveDisableEffects ? { x: 0, y: 0 } : mouseOffset}
-        globalMousePosition={effectiveDisableEffects ? { x: 0, y: 0 } : globalMousePosition}
+        mouseOffset={effectiveWithoutEffects ? { x: 0, y: 0 } : mouseOffset}
+        globalMousePosition={effectiveWithoutEffects ? { x: 0, y: 0 } : globalMousePosition}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         onMouseDown={handleMouseDown}
@@ -418,11 +434,11 @@ export function AtomixGlass({
         onClick={onClick}
         mode={mode}
         transform={baseStyle.transform}
-        effectiveDisableEffects={effectiveDisableEffects}
+        effectiveWithoutEffects={effectiveWithoutEffects}
         effectiveReducedMotion={effectiveReducedMotion}
         shaderVariant={shaderVariant}
         elasticity={elasticity}
-        enableLiquidBlur={enableLiquidBlur}
+        withLiquidBlur={withLiquidBlur}
       >
         {children}
       </AtomixGlassContainer>
@@ -455,12 +471,24 @@ export function AtomixGlass({
           />
         </>
       )}
-      {enableBorderEffect && (
+      {withBorder && (
         <>
           {/* Border elements - all styles (static and dynamic via CSS variables) are in SCSS */}
           {/* Position, size, transform, transition, border-radius all use CSS variables set in glassVars */}
-          <span className={ATOMIX_GLASS.BORDER_1_CLASS} />
-          <span className={ATOMIX_GLASS.BORDER_2_CLASS} />
+          <span
+            className={ATOMIX_GLASS.BORDER_1_CLASS}
+            style={{
+              width: glassSize.width,
+              height: glassSize.height,
+            }}
+          />
+          <span
+            className={ATOMIX_GLASS.BORDER_2_CLASS}
+            style={{
+              width: glassSize.width,
+              height: glassSize.height,
+            }}
+          />
         </>
       )}
     </div>

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -81,16 +81,16 @@ interface AtomixGlassContainerProps {
     shadowIntensity?: number;
     borderOpacity?: number;
   };
-  cornerRadius?: number;
+  borderRadius?: number;
   padding?: string;
   glassSize?: GlassSize;
   onClick?: () => void;
   mode?: DisplacementMode;
   transform?: string;
-  effectiveDisableEffects?: boolean;
+  effectiveWithoutEffects?: boolean;
   effectiveReducedMotion?: boolean;
   shaderVariant?: FragmentShaderType;
-  enableLiquidBlur?: boolean;
+  withLiquidBlur?: boolean;
   elasticity?: number;
   contentRef?: React.RefObject<HTMLDivElement>;
   children?: React.ReactNode;
@@ -120,15 +120,15 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       isActive = false,
       overLight = false,
       overLightConfig = {},
-      cornerRadius = 0,
+      borderRadius = 0,
       padding = '0 0',
       glassSize = { width: 0, height: 0 },
       onClick,
       mode = 'standard',
-      effectiveDisableEffects = false,
+      effectiveWithoutEffects = false,
       effectiveReducedMotion = false,
       shaderVariant = 'liquidGlass',
-      enableLiquidBlur = false,
+      withLiquidBlur = false,
       elasticity = 0,
       contentRef,
     },
@@ -291,7 +291,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
 
       // Enhanced validation for liquid blur
       if (
-        !enableLiquidBlur ||
+        !withLiquidBlur ||
         !rectCache ||
         !mouseOffset ||
         typeof mouseOffset.x !== 'number' ||
@@ -328,7 +328,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         console.warn('AtomixGlassContainer: Error calculating liquid blur', error);
         return defaultBlur;
       }
-    }, [enableLiquidBlur, blurAmount, mouseOffset, rectCache]);
+    }, [withLiquidBlur, blurAmount, mouseOffset, rectCache]);
 
     const backdropStyle = useMemo(() => {
       try {
@@ -355,8 +355,8 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         // Adaptive strategy: prefer single-pass blur for large areas or when effects are reduced
         const area = rectCache ? rectCache.width * rectCache.height : 0;
         const areaIsLarge = area > 180000; // ~600x300 threshold; tune as needed
-        const devicePrefersPerformance = effectiveReducedMotion || effectiveDisableEffects;
-        const useMultiPass = enableLiquidBlur && !devicePrefersPerformance && !areaIsLarge;
+        const devicePrefersPerformance = effectiveReducedMotion || effectiveWithoutEffects;
+        const useMultiPass = withLiquidBlur && !devicePrefersPerformance && !areaIsLarge;
 
         if (useMultiPass) {
           // Use a single weighted-average blur instead of stacking multiple
@@ -370,7 +370,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
           );
 
           return {
-            backdropFilter: `blur(${weightedBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`,
+            backdropFilter: `blur(${weightedBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1}) brightness(${overLightConfig?.brightness || 1})`,
           };
         }
 
@@ -399,8 +399,8 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       blurAmount,
       rectCache,
       effectiveReducedMotion,
-      effectiveDisableEffects,
-      enableLiquidBlur,
+      effectiveWithoutEffects,
+      withLiquidBlur,
     ]);
 
     const containerVars = useMemo(() => {
@@ -418,7 +418,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
           '--atomix-glass-container-width': `${glassSize?.width}`,
           '--atomix-glass-container-height': `${glassSize?.height}`,
           '--atomix-glass-container-padding': padding || '0 0',
-          '--atomix-glass-container-radius': `${typeof cornerRadius === 'number' && !isNaN(cornerRadius) ? cornerRadius : 0}px`,
+          '--atomix-glass-container-radius': `${typeof borderRadius === 'number' && !isNaN(borderRadius) ? borderRadius : 0}px`,
           '--atomix-glass-container-backdrop': backdropStyle?.backdropFilter || 'none',
           '--atomix-glass-container-shadow': overLight
             ? [
@@ -428,7 +428,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
                 `0 2px 12px rgba(0, 0, 0, ${(0.12 + Math.abs(my) * 0.002) * (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,
+          '--atomix-glass-container-shadow-opacity': effectiveWithoutEffects ? 0 : 1,
           // Background and shadow values use design token-aligned RGB values
           '--atomix-glass-container-bg': overLight
             ? `linear-gradient(${180 + mx * 0.5}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)`
@@ -455,11 +455,11 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     }, [
       glassSize,
       padding,
-      cornerRadius,
+      borderRadius,
       backdropStyle,
       mouseOffset,
       overLight,
-      effectiveDisableEffects,
+      effectiveWithoutEffects,
     ]);
 
     // Helper to force no transition/animation overrides with !important
@@ -475,7 +475,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       <div
         ref={el => {
           // Apply force no-transition
-          setForceNoTransition(el);
 
           // Handle forwarded ref
           if (typeof ref === 'function') {

package/src/components/AtomixGlass/README.md

@@ -27,7 +27,7 @@ function MyComponent() {
     <AtomixGlass
       displacementScale={20}
       blurAmount={10}
-      cornerRadius={15}
+      borderRadius={15}
     >
       <div>Your content here</div>
     </AtomixGlass>
@@ -45,14 +45,14 @@ function MyComponent() {
 | `saturation` | number | 150 | Controls the color saturation (100 is normal) |
 | `aberrationIntensity` | number | 1.5 | Controls the chromatic aberration effect intensity |
 | `elasticity` | number | 0.5 | Controls how responsive the glass is to mouse movement |
-| `cornerRadius` | number | 15 | Border radius of the glass container |
+| `borderRadius` | number | 15 | Border radius of the glass container |
 | `globalMousePos` | boolean | false | Whether to use global mouse position instead of local |
 | `mouseOffset` | { x: number, y: number } | { x: 0, y: 0 } | Offset for mouse position calculation |
 | `mouseContainer` | RefObject<HTMLElement> | null | Container to use for mouse position calculation |
 | `padding` | number | 0 | Additional padding around the content |
 | `style` | CSSProperties | {} | Additional CSS styles |
 | `overLight` | boolean \| 'auto' \| OverLightObjectConfig | 'auto' | OverLight configuration. See [OverLight Configuration](#overlight-configuration) section for details |
-| `enableOverLightLayers` | boolean | true | Whether to render additional overlay layers for overLight mode |
+| `withOverLightLayers` | boolean | true | Whether to render additional overlay layers for overLight mode |
 | `debugOverLight` | boolean | false | Enable debug logging for overLight detection and configuration |
 | `mode` | 'standard' \| 'polar' \| 'prominent' \| 'shader' | 'standard' | The glass effect mode |
 | `onClick` | function | undefined | Click handler |
@@ -218,8 +218,8 @@ This logs to console:
 - Use object config to fine-tune detection sensitivity and visual effects
 - Enable `debugOverLight` when troubleshooting auto-detection issues
 - Test glass effects across different devices and screen sizes
-- Use appropriate `cornerRadius` values to match your design language
-- Consider disabling `enableOverLightLayers` for performance optimization
+- Use appropriate `borderRadius` values to match your design language
+- Consider disabling `withOverLightLayers` for performance optimization
 
 ## Customization
 

package/src/components/AtomixGlass/stories/Customization.stories.tsx

@@ -53,7 +53,7 @@ export const WithCustomStyling: Story = {
     blurAmount: 0.4,
     saturation: 160,
     aberrationIntensity: 1.8,
-    cornerRadius: 30,
+    borderRadius: 30,
     padding: '40px',
     style: {
       width: '100%',
@@ -99,7 +99,7 @@ export const WithOtherComponents: Story = {
             saturation={170}
             aberrationIntensity={2.2}
             elasticity={0.18}
-            cornerRadius={28}
+            borderRadius={28}
             padding="36px"
             className="u-w-11/12 u-max-w-2xl"
           >