@shohojdhara/atomix 0.6.0 → 0.6.2

package/dist/index.d.ts

@@ -1419,6 +1419,15 @@ 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;
 }
 /**
  * Common component size options
@@ -3022,10 +3031,6 @@ interface SpinnerProps extends BaseComponentProps {
  * Icon size options
  */
 type IconSize$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-/**
- * Icon size options
- */
-type IconSize$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Icon component properties
  */
@@ -10807,6 +10812,9 @@ declare const ATOMIX_GLASS: {
         MIN_BLUR: number;
         MOUSE_INFLUENCE_DIVISOR: number;
         EDGE_FADE_PIXELS: number;
+        ELASTICITY_TRANSLATION_FACTOR: number;
+        ELASTICITY_DISTANCE_THRESHOLD: number;
+        ELASTICITY_COMPRESSION_FACTOR: number;
         DEFAULT_CORNER_RADIUS: number;
         MAX_SIZE: number;
         PALETTE: {
@@ -11637,6 +11645,7 @@ interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
     wrapperRef?: React__default.RefObject<HTMLDivElement | null>;
     children?: React__default.ReactNode;
     isFixedOrSticky?: boolean;
+    priority?: number;
     withLiquidBlur?: boolean;
     animationQuality?: 'low' | 'medium' | 'high';
     timeSpeed?: number;
@@ -11685,7 +11694,8 @@ interface UseAtomixGlassReturn {
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-declare function useAtomixGlass({ glassRef, contentRef, wrapperRef, borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, overLight, reducedMotion, highContrast, withoutEffects, elasticity, onClick, debugBorderRadius, debugOverLight, children, blurAmount, saturation, padding, withLiquidBlur, isFixedOrSticky, withTimeAnimation, animationSpeed, withMultiLayerDistortion, distortionOctaves, distortionLacunarity, distortionGain, distortionQuality, }: UseAtomixGlassOptions): UseAtomixGlassReturn;
+declare function useAtomixGlass({ glassRef, contentRef, wrapperRef, borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, overLight, reducedMotion, highContrast, withoutEffects, elasticity, onClick, debugBorderRadius, debugOverLight, children, blurAmount, saturation, padding, withLiquidBlur, isFixedOrSticky, priority, // Default priority
+withTimeAnimation, animationSpeed, withMultiLayerDistortion, distortionOctaves, distortionLacunarity, distortionGain, distortionQuality, }: UseAtomixGlassOptions): UseAtomixGlassReturn;
 
 /**
  * Input state and functionality

package/dist/index.esm.js

@@ -1754,6 +1754,10 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
+        // Elasticity physics constants
+        ELASTICITY_TRANSLATION_FACTOR: .1,
+        ELASTICITY_DISTANCE_THRESHOLD: 200,
+        ELASTICITY_COMPRESSION_FACTOR: .3,
         // Note: This default must match the SCSS variable --atomix-radius-md
         // @see src/styles/01-settings/_settings.global.scss
         DEFAULT_CORNER_RADIUS: 16,
@@ -2506,9 +2510,21 @@ class {
                     y: this.lastEvent.clientY
                 }, 
                 // 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(), elementCenter = {
+                                x: elementRect.left + elementRect.width / 2,
+                                y: elementRect.top + elementRect.height / 2
+                            }, distance = this.calculateDistance(this.position, elementCenter), maxDistance = listener.maxDistance || 300, attenuation = Math.max(0, 1 - distance / maxDistance), attenuatedRelativePosition = {
+                                x: (this.position.x - elementCenter.x) / elementRect.width * 100 * attenuation,
+                                y: (this.position.y - elementCenter.y) / elementRect.height * 100 * 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);
                     }
@@ -2519,10 +2535,17 @@ class {
     /**
    * 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) {
+   */    subscribe(callback, element, maxDistance) {
+        const listener = {
+            callback: callback,
+            element: element,
+            maxDistance: maxDistance
+        };
         // Return unsubscribe function
-        return this.listeners.add(callback), 
+        return this.listeners.add(listener), 
         // Start tracking if this is the first subscriber
         1 === this.listeners.size && this.startTracking(), 
         // Immediately notify with current position
@@ -2533,9 +2556,13 @@ class {
     /**
    * Unsubscribe from mouse position updates
    */    unsubscribe(callback) {
-        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
-        0 === this.listeners.size && this.stopTracking();
+                0 === this.listeners.size && this.stopTracking();
     }
     /**
    * Start tracking mouse movement
@@ -2554,6 +2581,12 @@ class {
         null !== this.rafId && (cancelAnimationFrame(this.rafId), this.rafId = null), this.lastEvent = null);
     }
     /**
+   * Calculate distance between two points
+   */    calculateDistance(point1, point2) {
+        const dx = point1.x - point2.x, dy = point1.y - point2.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    /**
    * Get current mouse position (synchronous)
    */    getPosition() {
         return {
@@ -2838,7 +2871,8 @@ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new Weak
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, withTimeAnimation: 
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1, withTimeAnimation: 
+// Default priority
 // Phase 1: Animation System Props
 withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED, withMultiLayerDistortion: withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION, distortionOctaves: distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES, distortionLacunarity: distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY, distortionGain: distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN, distortionQuality: distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY}) {
     // State
@@ -3235,7 +3269,8 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
     useEffect((() => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
-        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition);
+        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition, glassRef.current || void 0, 300);
+ // 300px max distance for full effect
         // Initial start
                 startLerpLoop();
         const container = mouseContainer?.current || glassRef.current;