@shohojdhara/atomix 0.6.1 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [

package/src/components/AtomixGlass/deprecated/AtomixGlass.deprecated.tsx

@@ -0,0 +1,390 @@
+import React, { useId, useMemo, useRef } from 'react';
+import type { AtomixGlassProps } from '../../../lib/types/components';
+import { ATOMIX_GLASS } from '../../../lib/constants/components';
+import { AtomixGlassContainer } from '../AtomixGlassContainer';
+import { useAtomixGlass } from '../../../lib/composables/useAtomixGlass';
+
+/**
+ * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
+ *
+ * Features:
+ * - Hardware-accelerated glass effects with SVG filters
+ * - Mouse-responsive liquid distortion
+ * - Dynamic border-radius extraction from children CSS properties
+ * - Automatic light/dark theme detection
+ * - Accessibility and performance optimizations
+ * - Multiple displacement modes (standard, polar, prominent, shader)
+ *
+ * @example
+ * // Dynamic border-radius extraction
+ * <AtomixGlass>
+ *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Manual border-radius override
+ * <AtomixGlass cornerRadius={20}>
+ *   <div>Content with 20px glass radius</div>
+ * </AtomixGlass>
+ */
+export function AtomixGlass({
+  children,
+  displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE,
+  blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
+  saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
+  aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
+  elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY,
+  borderRadius,
+  globalMousePosition: externalGlobalMousePosition,
+  mouseOffset: externalMouseOffset,
+  mouseContainer = null,
+  className = '',
+  padding = ATOMIX_GLASS.DEFAULTS.PADDING,
+  overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT,
+  style = {},
+  mode = ATOMIX_GLASS.DEFAULTS.MODE,
+  onClick,
+  shaderVariant = 'liquidGlass',
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  role,
+  tabIndex,
+  reducedMotion = false,
+  highContrast = false,
+  withoutEffects = false,
+  withLiquidBlur = false,
+  withBorder = true,
+  withOverLightLayers = false,
+  debugBorderRadius = false,
+}: AtomixGlassProps) {
+  const glassRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Use composable hook for all state and logic
+  const {
+    isHovered,
+    isActive,
+    glassSize,
+    effectiveBorderRadius,
+    effectiveReducedMotion,
+    effectiveHighContrast,
+    effectiveWithoutEffects,
+    overLightConfig,
+    globalMousePosition,
+    mouseOffset,
+    transformStyle,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleMouseDown,
+    handleMouseUp,
+    handleKeyDown,
+  } = useAtomixGlass({
+    glassRef,
+    contentRef,
+    borderRadius,
+    globalMousePosition: externalGlobalMousePosition,
+    mouseOffset: externalMouseOffset,
+    mouseContainer,
+    overLight,
+    reducedMotion,
+    highContrast,
+    withoutEffects,
+    elasticity,
+    onClick,
+    debugBorderRadius,
+    children,
+  });
+
+  // Calculate base style with transforms
+  const baseStyle = useMemo(
+    () => ({
+      ...style,
+      ...(elasticity !== 0 && {
+        transform: transformStyle,
+        transition: effectiveReducedMotion ? 'none' : 'all ease-out 0.2s',
+        willChange: effectiveWithoutEffects ? 'auto' : 'transform',
+      }),
+      ...(effectiveHighContrast && {
+        border: '2px solid currentColor',
+        outline: '2px solid transparent',
+        outlineOffset: '2px',
+      }),
+    }),
+    [
+      style,
+      transformStyle,
+      effectiveReducedMotion,
+      effectiveWithoutEffects,
+      effectiveHighContrast,
+      elasticity,
+    ]
+  );
+
+  // Calculate position and size styles
+  const positionStyles = useMemo(
+    () => ({
+      position: (baseStyle.position || 'absolute') as React.CSSProperties['position'],
+      top: baseStyle.top || 0,
+      left: baseStyle.left || 0,
+    }),
+    [baseStyle]
+  );
+
+  const adjustedSize = useMemo(
+    () => ({
+      width:
+        baseStyle.position !== 'fixed'
+          ? '100%'
+          : baseStyle.width
+            ? baseStyle.width
+            : Math.max(glassSize.width, 0),
+      height:
+        baseStyle.position !== 'fixed'
+          ? '100%'
+          : baseStyle.height
+            ? baseStyle.height
+            : Math.max(glassSize.height, 0),
+    }),
+    [baseStyle, glassSize]
+  );
+
+  // Generate CSS variables for layers
+  const glassId = useId();
+  const glassVars = useMemo(() => {
+    const isOverLight = overLightConfig?.isOverLight ?? false;
+    const mx = mouseOffset.x;
+    const my = mouseOffset.y;
+    const scopedId = `ag-${glassId.replace(/:/g, '')}`;
+
+    return {
+      [`--${scopedId}-pos`]: positionStyles.position,
+      [`--${scopedId}-top`]: positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
+      [`--${scopedId}-left`]: positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
+      [`--${scopedId}-w`]:
+        baseStyle.position !== 'fixed' ? adjustedSize.width : `${adjustedSize.width}px`,
+      [`--${scopedId}-h`]:
+        baseStyle.position !== 'fixed' ? adjustedSize.height : `${adjustedSize.height}px`,
+      [`--${scopedId}-r`]: `${effectiveBorderRadius}px`,
+      [`--${scopedId}-t`]: baseStyle.transform,
+      [`--${scopedId}-tr`]: effectiveReducedMotion ? 'none' : baseStyle.transition,
+      [`--${scopedId}-blend`]: isOverLight ? 'multiply' : 'overlay',
+      [`--${scopedId}-b1`]: `linear-gradient(${135 + mx * 1.2}deg, rgba(255,255,255,0) 0%, rgba(255,255,255,${0.12 + Math.abs(mx) * 0.008}) ${Math.max(10, 33 + my * 0.3)}%, rgba(255,255,255,${0.4 + Math.abs(mx) * 0.012}) ${Math.min(90, 66 + my * 0.4)}%, rgba(255,255,255,0) 100%)`,
+      [`--${scopedId}-b2`]: `linear-gradient(${135 + mx * 1.2}deg, rgba(255,255,255,0) 0%, rgba(255,255,255,${0.32 + Math.abs(mx) * 0.008}) ${Math.max(10, 33 + my * 0.3)}%, rgba(255,255,255,${0.6 + Math.abs(mx) * 0.012}) ${Math.min(90, 66 + my * 0.4)}%, rgba(255,255,255,0) 100%)`,
+      [`--${scopedId}-h1-o`]: isHovered || isActive ? (isOverLight ? 0.3 : 0.5) : 0,
+      [`--${scopedId}-h1`]: isOverLight
+        ? `radial-gradient(circle at ${50 + mx / 2}% ${50 + my / 2}%, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0) 60%)`
+        : `radial-gradient(circle at ${50 + mx / 2}% ${50 + my / 2}%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%)`,
+      [`--${scopedId}-h2-o`]: isActive ? (isOverLight ? 0.4 : 0.5) : 0,
+      [`--${scopedId}-h2`]: isOverLight
+        ? `radial-gradient(circle at ${50 + mx / 1.5}% ${50 + my / 1.5}%, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0) 80%)`
+        : `radial-gradient(circle at ${50 + mx / 1.5}% ${50 + my / 1.5}%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%)`,
+      [`--${scopedId}-h3-o`]: isHovered
+        ? isOverLight
+          ? 0.25
+          : 0.4
+        : isActive
+          ? isOverLight
+            ? 0.5
+            : 0.8
+          : 0,
+      [`--${scopedId}-h3`]: isOverLight
+        ? `radial-gradient(circle at ${50 + mx}% ${50 + my}%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%)`
+        : `radial-gradient(circle at ${50 + mx}% ${50 + my}%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)`,
+      [`--${scopedId}-base-o`]: isOverLight ? overLightConfig.opacity : 0,
+      [`--${scopedId}-base`]: isOverLight
+        ? `linear-gradient(135deg, rgba(0,0,0,${0.12 + mx * 0.002}) 0%, rgba(0,0,0,${0.08 + my * 0.001}) 50%, rgba(0,0,0,${0.15 + Math.abs(mx) * 0.003}) 100%)`
+        : 'rgba(255,255,255,0.1)',
+      [`--${scopedId}-over-o`]: isOverLight ? overLightConfig.opacity * 0.9 : 0,
+      [`--${scopedId}-over`]: isOverLight
+        ? `radial-gradient(circle at ${50 + mx * 0.5}% ${50 + my * 0.5}%, rgba(0,0,0,${0.08 + Math.abs(mx) * 0.002}) 0%, rgba(0,0,0,0.04) 40%, rgba(0,0,0,${0.12 + Math.abs(my) * 0.002}) 100%)`
+        : 'rgba(255,255,255,0.05)',
+      '--ag-scoped-id': scopedId,
+    } as React.CSSProperties;
+  }, [
+    glassId,
+    positionStyles,
+    adjustedSize,
+    effectiveBorderRadius,
+    baseStyle,
+    effectiveReducedMotion,
+    mouseOffset,
+    isHovered,
+    isActive,
+    overLightConfig,
+  ]);
+
+  const scopedId = `ag-${glassId.replace(/:/g, '')}`;
+
+  return (
+    <div
+      className={`${ATOMIX_GLASS.BASE_CLASS} ${className}`}
+      style={{ ...positionStyles, position: 'relative', ...glassVars }}
+      role={role || (onClick ? 'button' : undefined)}
+      tabIndex={onClick ? (tabIndex ?? 0) : tabIndex}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
+      aria-disabled={onClick ? false : undefined}
+      onKeyDown={onClick ? handleKeyDown : undefined}
+    >
+      <AtomixGlassContainer
+        ref={glassRef}
+        contentRef={contentRef}
+        className={className}
+        style={baseStyle}
+        borderRadius={effectiveBorderRadius}
+        displacementScale={
+          effectiveWithoutEffects
+            ? 0
+            : mode === 'shader'
+              ? displacementScale * 0.8
+              : overLightConfig.isOverLight
+                ? displacementScale * 0.6
+                : displacementScale
+        }
+        blurAmount={effectiveWithoutEffects ? 0 : blurAmount}
+        saturation={
+          effectiveHighContrast
+            ? 200
+            : overLightConfig.isOverLight
+              ? saturation * overLightConfig.saturationBoost
+              : saturation
+        }
+        aberrationIntensity={
+          effectiveWithoutEffects
+            ? 0
+            : mode === 'shader'
+              ? aberrationIntensity * 0.7
+              : aberrationIntensity
+        }
+        glassSize={glassSize}
+        padding={padding}
+        mouseOffset={effectiveWithoutEffects ? { x: 0, y: 0 } : mouseOffset}
+        globalMousePosition={effectiveWithoutEffects ? { x: 0, y: 0 } : globalMousePosition}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        isHovered={isHovered}
+        isActive={isActive}
+        overLight={overLightConfig?.isOverLight || false}
+        onClick={onClick}
+        mode={mode}
+        transform={baseStyle.transform}
+        effectiveWithoutEffects={effectiveWithoutEffects}
+        effectiveReducedMotion={effectiveReducedMotion}
+        shaderVariant={shaderVariant}
+        elasticity={elasticity}
+        withLiquidBlur={withLiquidBlur}
+      >
+        {children}
+      </AtomixGlassContainer>
+      {withBorder && (
+        <>
+          <span
+            className={ATOMIX_GLASS.BORDER_1_CLASS}
+            style={{
+              position: `var(--${scopedId}-pos)` as any,
+              top: `var(--${scopedId}-top)`,
+              left: `var(--${scopedId}-left)`,
+              width: `var(--${scopedId}-w)`,
+              height: `var(--${scopedId}-h)`,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              background: `var(--${scopedId}-b1)`,
+            }}
+          />
+          <span
+            className={ATOMIX_GLASS.BORDER_2_CLASS}
+            style={{
+              position: `var(--${scopedId}-pos)` as any,
+              top: `var(--${scopedId}-top)`,
+              left: `var(--${scopedId}-left)`,
+              width: `var(--${scopedId}-w)`,
+              height: `var(--${scopedId}-h)`,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              mixBlendMode: `var(--${scopedId}-blend)` as any,
+              background: `var(--${scopedId}-b2)`,
+            }}
+          />
+        </>
+      )}
+      {Boolean(onClick) && (
+        <>
+          <div
+            className={ATOMIX_GLASS.HOVER_1_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              mixBlendMode: `var(--${scopedId}-blend)` as any,
+              opacity: `var(--${scopedId}-h1-o)`,
+              background: `var(--${scopedId}-h1)`,
+            }}
+          />
+          <div
+            className={ATOMIX_GLASS.HOVER_2_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              mixBlendMode: `var(--${scopedId}-blend)` as any,
+              opacity: `var(--${scopedId}-h2-o)`,
+              background: `var(--${scopedId}-h2)`,
+            }}
+          />
+          <div
+            className={ATOMIX_GLASS.HOVER_3_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              mixBlendMode: `var(--${scopedId}-blend)` as any,
+              opacity: `var(--${scopedId}-h3-o)`,
+              background: `var(--${scopedId}-h3)`,
+            }}
+          />
+        </>
+      )}
+      {withOverLightLayers && (
+        <>
+          <div
+            className={ATOMIX_GLASS.BASE_LAYER_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              opacity: `var(--${scopedId}-base-o)`,
+              background: `var(--${scopedId}-base)`,
+            }}
+          />
+          <div
+            className={ATOMIX_GLASS.OVERLAY_LAYER_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              opacity: `var(--${scopedId}-over-o)`,
+              background: `var(--${scopedId}-over)`,
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default AtomixGlass;
+

package/src/lib/composables/shared-mouse-tracker.ts

@@ -1,12 +1,18 @@
 import type { MousePosition } from '../types/components';
 
+interface MouseTrackerListener {
+  callback: (pos: MousePosition) => void;
+  element?: HTMLElement; // Optional element for distance-based attenuation
+  maxDistance?: number; // Maximum distance for full effect
+}
+
 /**
  * Global mouse tracker singleton
  * Tracks mouse position at document level and distributes to subscribers
  * Reduces event processing overhead when multiple AtomixGlass instances are present
  */
 class GlobalMouseTracker {
-  private listeners = new Set<(pos: MousePosition) => void>();
+  private listeners = new Set<MouseTrackerListener>();
   private position: MousePosition = { x: 0, y: 0 };
   private rafId: number | null = null;
   private lastEvent: MouseEvent | null = null;
@@ -15,10 +21,17 @@ class GlobalMouseTracker {
   /**
    * Subscribe to mouse position updates
    * @param callback Function to call when mouse position changes
+   * @param element Optional element for distance-based attenuation
+   * @param maxDistance Optional maximum distance for full effect
    * @returns Unsubscribe function
    */
-  subscribe(callback: (pos: MousePosition) => void): () => void {
-    this.listeners.add(callback);
+  subscribe(
+    callback: (pos: MousePosition) => void,
+    element?: HTMLElement,
+    maxDistance?: number
+  ): () => void {
+    const listener: MouseTrackerListener = { callback, element, maxDistance };
+    this.listeners.add(listener);
 
     // Start tracking if this is the first subscriber
     if (this.listeners.size === 1) {
@@ -38,7 +51,13 @@ class GlobalMouseTracker {
    * Unsubscribe from mouse position updates
    */
   private unsubscribe(callback: (pos: MousePosition) => void): void {
-    this.listeners.delete(callback);
+    // Find and remove the listener with the given callback
+    for (const listener of this.listeners) {
+      if (listener.callback === callback) {
+        this.listeners.delete(listener);
+        break;
+      }
+    }
 
     // Stop tracking if no more subscribers
     if (this.listeners.size === 0) {
@@ -80,6 +99,15 @@ class GlobalMouseTracker {
     this.lastEvent = null;
   }
 
+  /**
+   * Calculate distance between two points
+   */
+  private calculateDistance(point1: MousePosition, point2: MousePosition): number {
+    const dx = point1.x - point2.x;
+    const dy = point1.y - point2.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+
   /**
    * Handle mouse move event
    */
@@ -96,9 +124,37 @@ class GlobalMouseTracker {
           };
 
           // Notify all subscribers
-          this.listeners.forEach(callback => {
+          this.listeners.forEach(listener => {
             try {
-              callback(this.position);
+              // If the listener has an element, calculate distance-based attenuation
+              if (listener.element) {
+                const elementRect = listener.element.getBoundingClientRect();
+                const elementCenter = {
+                  x: elementRect.left + elementRect.width / 2,
+                  y: elementRect.top + elementRect.height / 2,
+                };
+                
+                const distance = this.calculateDistance(this.position, elementCenter);
+                const maxDistance = listener.maxDistance || 300; // Default to 300px
+                
+                // Calculate attenuation factor (0 to 1)
+                const attenuation = Math.max(0, 1 - (distance / maxDistance));
+                
+                // Calculate relative mouse position for this specific element
+                const relativeX = (this.position.x - elementCenter.x) / elementRect.width * 100;
+                const relativeY = (this.position.y - elementCenter.y) / elementRect.height * 100;
+                
+                // Apply attenuation to the relative position
+                const attenuatedRelativePosition = {
+                  x: relativeX * attenuation,
+                  y: relativeY * attenuation,
+                };
+                
+                listener.callback(attenuatedRelativePosition);
+              } else {
+                // Send original position for listeners without distance-based attenuation
+                listener.callback(this.position);
+              }
             } catch (error) {
               console.error('GlobalMouseTracker: Error in subscriber callback', error);
             }

package/src/lib/composables/useAtomixGlass.ts

@@ -158,6 +158,7 @@ interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
   wrapperRef?: React.RefObject<HTMLDivElement | null>;
   children?: React.ReactNode;
   isFixedOrSticky?: boolean;
+  priority?: number; // Priority for z-index ordering
   // Phase 1: Time-Based Animation System
   withLiquidBlur?: boolean;
   animationQuality?: 'low' | 'medium' | 'high';
@@ -226,7 +227,7 @@ export function useAtomixGlass({
   reducedMotion = false,
   highContrast = false,
   withoutEffects = false,
-  elasticity = 0.05,
+  elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY,
   onClick,
   debugBorderRadius = false,
   debugOverLight = false,
@@ -236,6 +237,7 @@ export function useAtomixGlass({
   padding,
   withLiquidBlur,
   isFixedOrSticky = false,
+  priority = 1, // Default priority
   // Phase 1: Animation System Props
   withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION,
   animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED,
@@ -965,7 +967,7 @@ export function useAtomixGlass({
       return undefined;
     }
 
-    const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition);
+    const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition, glassRef.current || undefined, 300); // 300px max distance for full effect
     
     // Initial start
     startLerpLoop();

package/src/lib/constants/components.ts

@@ -1689,6 +1689,10 @@ export const ATOMIX_GLASS = {
     MIN_BLUR: 0.1,
     MOUSE_INFLUENCE_DIVISOR: 100,
     EDGE_FADE_PIXELS: 2,
+    // Elasticity physics constants
+    ELASTICITY_TRANSLATION_FACTOR: 0.1,
+    ELASTICITY_DISTANCE_THRESHOLD: 200,
+    ELASTICITY_COMPRESSION_FACTOR: 0.3,
     // Note: This default must match the SCSS variable --atomix-radius-md
     // @see src/styles/01-settings/_settings.global.scss
     DEFAULT_CORNER_RADIUS: 16,

package/src/lib/types/components.ts

@@ -321,6 +321,16 @@ export interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    */
   disableResponsiveBreakpoints?: boolean;
+
+  /**
+   * Priority level for rendering and performance scheduling
+   * 
+   * Controls the rendering priority of the glass effect, allowing for performance
+   * optimization in complex scenes. Higher priority elements are rendered first.
+   * 
+   * @default undefined
+   */
+  priority?: number;
 }
 
 /**
@@ -1207,10 +1217,6 @@ export interface SpinnerProps extends BaseComponentProps {
   glass?: AtomixGlassProps | boolean;
 }
 
-/**
- * Icon size options
- */
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 /**
  * Icon weight/style options

package/src/styles/06-components/_components.navbar.scss

@@ -252,6 +252,8 @@
   &--glass {
     position: relative;
     background-color: transparent;
+    display: flex;
+    height: 100%;
     @include dynamic-background(var(--#{$prefix}navbar-bg), $enable-transparency: true);
   }