@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/AtomixGlass/shader-utils.ts

@@ -39,7 +39,7 @@ const smoothStep = (a: number, b: number, t: number): number => {
   if (typeof a !== 'number' || typeof b !== 'number' || typeof t !== 'number') {
     return 0;
   }
-  
+
   const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
   return clamped * clamped * (3 - 2 * clamped);
 };
@@ -49,11 +49,11 @@ const calculateLength = (x: number, y: number): number => {
   if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
     return 0;
   }
-  
+
   // Prevent potential overflow
   const maxX = Math.max(Math.abs(x), Math.abs(y));
   if (maxX === 0) return 0;
-  
+
   const scaledX = x / maxX;
   const scaledY = y / maxX;
   return maxX * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
@@ -67,12 +67,16 @@ const roundedRectSDF = (
   radius: number
 ): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || 
-      typeof width !== 'number' || typeof height !== 'number' || 
-      typeof radius !== 'number') {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof width !== 'number' ||
+    typeof height !== 'number' ||
+    typeof radius !== 'number'
+  ) {
     return 0;
   }
-  
+
   const qx = Math.abs(x) - width + radius;
   const qy = Math.abs(y) - height + radius;
   return Math.min(Math.max(qx, qy), 0) + calculateLength(Math.max(qx, 0), Math.max(qy, 0)) - radius;
@@ -97,11 +101,11 @@ const clampValue = (value: number, min: number, max: number): number => {
   if (typeof value !== 'number' || typeof min !== 'number' || typeof max !== 'number') {
     return min;
   }
-  
+
   if (isNaN(value)) return min;
   if (isNaN(min)) return 0;
   if (isNaN(max)) return 1;
-  
+
   return Math.max(min, Math.min(max, value));
 };
 
@@ -111,9 +115,11 @@ const easeInOutCubic = (t: number): number => {
   if (typeof t !== 'number' || isNaN(t)) {
     return 0;
   }
-  
+
   const clampedT = Math.max(0, Math.min(1, t));
-  return clampedT < 0.5 ? 4 * clampedT * clampedT * clampedT : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
+  return clampedT < 0.5
+    ? 4 * clampedT * clampedT * clampedT
+    : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
 };
 
 const easeOutQuart = (t: number): number => {
@@ -121,7 +127,7 @@ const easeOutQuart = (t: number): number => {
   if (typeof t !== 'number' || isNaN(t)) {
     return 0;
   }
-  
+
   const clampedT = Math.max(0, Math.min(1, t));
   return 1 - Math.pow(1 - clampedT, 4);
 };
@@ -132,7 +138,7 @@ const noise2D = (x: number, y: number): number => {
   if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
     return 0;
   }
-  
+
   const X = Math.floor(x) & 255;
   const Y = Math.floor(y) & 255;
 
@@ -148,7 +154,7 @@ const noise2D = (x: number, y: number): number => {
     if (typeof i !== 'number' || typeof j !== 'number') {
       return 0;
     }
-    
+
     const n = i + j * 57;
     // Use a more stable hash function
     const hashed = Math.sin(n * 12.9898 + 78.233) * 43758.5453;
@@ -172,10 +178,10 @@ const fbm = (x: number, y: number, octaves: number = 4): number => {
   if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
     return 0;
   }
-  
+
   // Clamp octaves to prevent performance issues
   const clampedOctaves = Math.max(1, Math.min(8, Math.floor(octaves)));
-  
+
   let value = 0;
   let amplitude = 0.5;
   let frequency = 1;
@@ -192,11 +198,17 @@ const fbm = (x: number, y: number, octaves: number = 4): number => {
 // Radial distortion for glass-like refraction
 const calculateRadialDistortion = (x: number, y: number, strength: number): Vec2 => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof strength !== 'number' || 
-      isNaN(x) || isNaN(y) || isNaN(strength)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof strength !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(strength)
+  ) {
     return { x: 0, y: 0 };
   }
-  
+
   const distance = calculateLength(x, y);
   const distortion = Math.pow(Math.min(distance, 10), 2) * strength; // Limit distance to prevent extreme values
 
@@ -209,17 +221,23 @@ const calculateRadialDistortion = (x: number, y: number, strength: number): Vec2
 // Chromatic aberration calculation
 const calculateChromaticOffset = (x: number, y: number, intensity: number): Vec2 => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof intensity !== 'number' || 
-      isNaN(x) || isNaN(y) || isNaN(intensity)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof intensity !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(intensity)
+  ) {
     return { x: 0, y: 0 };
   }
-  
+
   const distance = calculateLength(x, y);
   // Prevent division by zero and extreme values
   if (distance === 0) {
     return { x: 0, y: 0 };
   }
-  
+
   const angle = Math.atan2(y, x);
 
   return {
@@ -231,11 +249,19 @@ const calculateChromaticOffset = (x: number, y: number, intensity: number): Vec2
 // Advanced caustic pattern generator for glass refraction
 const calculateCaustics = (x: number, y: number, time: number, intensity: number = 1): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof time !== 'number' || 
-      typeof intensity !== 'number' || isNaN(x) || isNaN(y) || isNaN(time) || isNaN(intensity)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof time !== 'number' ||
+    typeof intensity !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(time) ||
+    isNaN(intensity)
+  ) {
     return 0.5; // Return middle value on error
   }
-  
+
   const scale = 8;
   const speed = 2;
 
@@ -263,15 +289,23 @@ const calculateSpectralDispersion = (
   intensity: number
 ): { r: Vec2; g: Vec2; b: Vec2 } => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof angle !== 'number' || 
-      typeof intensity !== 'number' || isNaN(x) || isNaN(y) || isNaN(angle) || isNaN(intensity)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof angle !== 'number' ||
+    typeof intensity !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(angle) ||
+    isNaN(intensity)
+  ) {
     return {
       r: { x: 0, y: 0 },
       g: { x: 0, y: 0 },
-      b: { x: 0, y: 0 }
+      b: { x: 0, y: 0 },
     };
   }
-  
+
   const distance = calculateLength(x, y);
   const dispersionStrength = Math.min(distance * intensity, 1); // Limit strength to prevent extreme values
 
@@ -305,12 +339,21 @@ const calculateParallaxOffset = (
   mouseY: number = 0
 ): Vec2 => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof depth !== 'number' || 
-      typeof mouseX !== 'number' || typeof mouseY !== 'number' || 
-      isNaN(x) || isNaN(y) || isNaN(depth) || isNaN(mouseX) || isNaN(mouseY)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof depth !== 'number' ||
+    typeof mouseX !== 'number' ||
+    typeof mouseY !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(depth) ||
+    isNaN(mouseX) ||
+    isNaN(mouseY)
+  ) {
     return { x: 0, y: 0 };
   }
-  
+
   const parallaxStrength = Math.min(0.02 * depth, 0.1); // Limit strength to prevent extreme values
 
   // Calculate offset based on view angle (simulated by mouse position)
@@ -323,11 +366,19 @@ const calculateParallaxOffset = (
 // Volumetric density for depth perception and scattering
 const calculateVolumetricDensity = (x: number, y: number, depth: number, time: number): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof depth !== 'number' || 
-      typeof time !== 'number' || isNaN(x) || isNaN(y) || isNaN(depth) || isNaN(time)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof depth !== 'number' ||
+    typeof time !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(depth) ||
+    isNaN(time)
+  ) {
     return 0.5; // Return middle value on error
   }
-  
+
   const noiseValue = fbm(x * 5 + time * 0.5, y * 5 - time * 0.5, 3);
   const depthFalloff = Math.exp(-Math.max(0, depth) * 2); // Ensure depth is not negative
 
@@ -337,14 +388,22 @@ const calculateVolumetricDensity = (x: number, y: number, depth: number, time: n
 // Advanced turbulence for organic glass distortion
 const calculateTurbulence = (x: number, y: number, time: number, octaves: number = 5): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof time !== 'number' || 
-      typeof octaves !== 'number' || isNaN(x) || isNaN(y) || isNaN(time) || isNaN(octaves)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof time !== 'number' ||
+    typeof octaves !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(time) ||
+    isNaN(octaves)
+  ) {
     return 0;
   }
-  
+
   // Clamp octaves to prevent performance issues
   const clampedOctaves = Math.max(1, Math.min(8, Math.floor(octaves)));
-  
+
   let turbulence = 0;
   let amplitude = 1;
   let frequency = 1;
@@ -362,11 +421,17 @@ const calculateTurbulence = (x: number, y: number, time: number, octaves: number
 // Micro-surface detail for high-quality glass texture
 const calculateMicroSurface = (x: number, y: number, time: number): number => {
   // Add input validation
-  if (typeof x !== 'number' || typeof y !== 'number' || typeof time !== 'number' || 
-      isNaN(x) || isNaN(y) || isNaN(time)) {
+  if (
+    typeof x !== 'number' ||
+    typeof y !== 'number' ||
+    typeof time !== 'number' ||
+    isNaN(x) ||
+    isNaN(y) ||
+    isNaN(time)
+  ) {
     return 0.5; // Return middle value on error
   }
-  
+
   const highFreqNoise = fbm(x * 40 + time * 0.3, y * 40 - time * 0.3, 6);
   const microDetail = fbm(x * 80, y * 80, 4);
 
@@ -742,12 +807,20 @@ export class ShaderDisplacementGenerator {
 
     this.canvas = document.createElement('canvas');
     // Enhanced validation for canvas dimensions
-    this.canvas.width = Math.max(MIN_CANVAS_DIMENSION, 
-                               Math.min(MAX_CANVAS_DIMENSION, 
-                                       Math.round(options.width * this.canvasDPI || DEFAULT_CANVAS_WIDTH)));
-    this.canvas.height = Math.max(MIN_CANVAS_DIMENSION, 
-                                 Math.min(MAX_CANVAS_DIMENSION, 
-                                         Math.round(options.height * this.canvasDPI || DEFAULT_CANVAS_HEIGHT)));
+    this.canvas.width = Math.max(
+      MIN_CANVAS_DIMENSION,
+      Math.min(
+        MAX_CANVAS_DIMENSION,
+        Math.round(options.width * this.canvasDPI || DEFAULT_CANVAS_WIDTH)
+      )
+    );
+    this.canvas.height = Math.max(
+      MIN_CANVAS_DIMENSION,
+      Math.min(
+        MAX_CANVAS_DIMENSION,
+        Math.round(options.height * this.canvasDPI || DEFAULT_CANVAS_HEIGHT)
+      )
+    );
     this.canvas.style.display = 'none';
 
     const context = this.canvas.getContext('2d');
@@ -849,7 +922,10 @@ export class ShaderDisplacementGenerator {
       return this.canvas.toDataURL();
     } catch (error) {
       // Graceful fallback on error
-      console.warn('ShaderDisplacementGenerator: Error generating shader map, using fallback', error);
+      console.warn(
+        'ShaderDisplacementGenerator: Error generating shader map, using fallback',
+        error
+      );
       return ''; // Return empty string as fallback
     }
   }
@@ -874,4 +950,4 @@ export class ShaderDisplacementGenerator {
   getScale(): number {
     return this.canvasDPI;
   }
-}
+}

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

@@ -494,7 +494,7 @@ export const Playground: Story = {
     };
 
     const backgrounds = [
-      'https://images.unsplash.com/photo-1651483554034-8defec113cf2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2074',
+      'https://images.unsplash.com/photo-1579546929518-9e396f3cc809',
       'https://images.unsplash.com/photo-1734760858517-ff3e30c4a420?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987',
       'https://images.unsplash.com/photo-1590634875052-89c137f8df21?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2072',
       'https://images.unsplash.com/photo-1592880476174-2932b3061c30?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2070',

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

@@ -73,7 +73,7 @@ export const LiquidGlass: Story = {
             margin: '0 0 16px 0',
             fontSize: '38px',
             fontWeight: 700,
-            background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
+            background: 'url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809)',
             WebkitBackgroundClip: 'text',
             WebkitTextFillColor: 'transparent',
             backgroundClip: 'text',

package/src/components/Avatar/Avatar.stories.tsx

@@ -109,10 +109,10 @@ export const Basic: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Basic avatar with an image source'
-      }
-    }
-  }
+        story: 'Basic avatar with an image source',
+      },
+    },
+  },
 };
 
 // Avatar with Initials
@@ -125,10 +125,10 @@ export const WithInitials: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Avatar displaying user initials when no image is available'
-      }
-    }
-  }
+        story: 'Avatar displaying user initials when no image is available',
+      },
+    },
+  },
 };
 
 // Avatar with Icon
@@ -141,10 +141,10 @@ export const WithIcon: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Avatar displaying an icon when no image or initials are available'
-      }
-    }
-  }
+        story: 'Avatar displaying an icon when no image or initials are available',
+      },
+    },
+  },
 };
 
 // Avatar Sizes
@@ -156,10 +156,10 @@ export const Sizes: Story = {
       <div className="u-flex u-gap-4 u-flex-wrap u-items-center">
         {sizes.map(size => (
           <div key={size} className="u-flex u-flex-col u-items-center u-gap-2">
-            <Avatar 
-              src={`https://i.pravatar.cc/150?img=${size === 'xs' ? 1 : size === 'sm' ? 2 : size === 'md' ? 3 : size === 'lg' ? 4 : 5}`} 
-              size={size} 
-              circle 
+            <Avatar
+              src={`https://i.pravatar.cc/150?img=${size === 'xs' ? 1 : size === 'sm' ? 2 : size === 'md' ? 3 : size === 'lg' ? 4 : 5}`}
+              size={size}
+              circle
             />
             <span className="u-text-xs u-capitalize">{size}</span>
           </div>
@@ -170,10 +170,10 @@ export const Sizes: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Different avatar sizes from extra-small to extra-large'
-      }
-    }
-  }
+        story: 'Different avatar sizes from extra-small to extra-large',
+      },
+    },
+  },
 };
 
 // Avatar Shapes
@@ -182,19 +182,11 @@ export const Shapes: Story = {
     return (
       <div className="u-flex u-gap-6 u-items-center">
         <div className="u-flex u-flex-col u-items-center u-gap-2">
-          <Avatar 
-            src="https://i.pravatar.cc/150?img=6" 
-            size="md" 
-            circle={false}
-          />
+          <Avatar src="https://i.pravatar.cc/150?img=6" size="md" circle={false} />
           <span className="u-text-xs">Square</span>
         </div>
         <div className="u-flex u-flex-col u-items-center u-gap-2">
-          <Avatar 
-            src="https://i.pravatar.cc/150?img=7" 
-            size="md" 
-            circle={true}
-          />
+          <Avatar src="https://i.pravatar.cc/150?img=7" size="md" circle={true} />
           <span className="u-text-xs">Circle</span>
         </div>
       </div>
@@ -203,10 +195,10 @@ export const Shapes: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Avatar shapes: square and circle'
-      }
-    }
-  }
+        story: 'Avatar shapes: square and circle',
+      },
+    },
+  },
 };
 
 // Avatar States
@@ -215,20 +207,11 @@ export const States: Story = {
     return (
       <div className="u-flex u-gap-6 u-items-center">
         <div className="u-flex u-flex-col u-items-center u-gap-2">
-          <Avatar 
-            src="https://i.pravatar.cc/150?img=8" 
-            size="md" 
-            circle
-          />
+          <Avatar src="https://i.pravatar.cc/150?img=8" size="md" circle />
           <span className="u-text-xs">Default</span>
         </div>
         <div className="u-flex u-flex-col u-items-center u-gap-2">
-          <Avatar 
-            src="https://i.pravatar.cc/150?img=9" 
-            size="md" 
-            circle
-            disabled
-          />
+          <Avatar src="https://i.pravatar.cc/150?img=9" size="md" circle disabled />
           <span className="u-text-xs">Disabled</span>
         </div>
       </div>
@@ -237,10 +220,10 @@ export const States: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Avatar states: default and disabled'
-      }
-    }
-  }
+        story: 'Avatar states: default and disabled',
+      },
+    },
+  },
 };
 
 // Avatar with Glass Effect
@@ -254,10 +237,10 @@ export const WithGlassEffect: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Avatar with glassmorphism effect'
-      }
-    }
-  }
+        story: 'Avatar with glassmorphism effect',
+      },
+    },
+  },
 };
 
 // Avatar Variants Showcase
@@ -357,10 +340,10 @@ export const VariantsShowcase: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Comprehensive showcase of avatar variants across all sizes'
-      }
-    }
-  }
+        story: 'Comprehensive showcase of avatar variants across all sizes',
+      },
+    },
+  },
 };
 
 // Avatar Group Showcase
@@ -469,8 +452,8 @@ export const AvatarGroupShowcase: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Various configurations of AvatarGroup component'
-      }
-    }
-  }
-};
+        story: 'Various configurations of AvatarGroup component',
+      },
+    },
+  },
+};

package/src/components/Avatar/Avatar.tsx

@@ -3,66 +3,68 @@ import { AvatarProps } from '../../lib/types/components';
 import { AVATAR } from '../../lib/constants/components';
 import { Icon } from '../Icon/Icon';
 
-export const Avatar: React.FC<AvatarProps> = memo(({
-  src,
-  alt = 'Avatar',
-  initials,
-  icon,
-  size = 'md',
-  circle = false,
-  className = '',
-  disabled = false,
-  onClick,
-  style,
-  glass,
-}) => {
-  const [imageError, setImageError] = useState(false);
+export const Avatar: React.FC<AvatarProps> = memo(
+  ({
+    src,
+    alt = 'Avatar',
+    initials,
+    icon,
+    size = 'md',
+    circle = false,
+    className = '',
+    disabled = false,
+    onClick,
+    style,
+    glass,
+  }) => {
+    const [imageError, setImageError] = useState(false);
 
-  const handleImageError = () => {
-    setImageError(true);
-  };
+    const handleImageError = () => {
+      setImageError(true);
+    };
 
-  // Generate CSS classes
-  const avatarClasses = [
-    AVATAR.CLASSES.BASE,
-    size !== 'md' && `c-avatar--${size}`,
-    circle && AVATAR.CLASSES.CIRCLE,
-    disabled && 'is-disabled',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
+    // Generate CSS classes
+    const avatarClasses = [
+      AVATAR.CLASSES.BASE,
+      size !== 'md' && `c-avatar--${size}`,
+      circle && AVATAR.CLASSES.CIRCLE,
+      disabled && 'is-disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
 
-  // Handle click event
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!disabled && onClick) {
-      onClick(e);
-    }
-  };
+    // Handle click event
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    };
 
-  return (
-    <div
-      className={avatarClasses}
-      onClick={onClick ? handleClick : undefined}
-      role={onClick ? 'button' : undefined}
-      tabIndex={onClick && !disabled ? 0 : undefined}
-      aria-disabled={disabled || undefined}
-      style={style}
-    >
-      {src && !imageError ? (
-        <img src={src} alt={alt} className="c-avatar__image" onError={handleImageError} />
-      ) : initials ? (
-        <span className="c-avatar__initials">{initials}</span>
-      ) : icon ? (
-        <span className="c-avatar__icon">{icon}</span>
-      ) : (
-        <span className="c-avatar__icon">
-          <Icon name="User" size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
-        </span>
-      )}
-    </div>
-  );
-});
+    return (
+      <div
+        className={avatarClasses}
+        onClick={onClick ? handleClick : undefined}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick && !disabled ? 0 : undefined}
+        aria-disabled={disabled || undefined}
+        style={style}
+      >
+        {src && !imageError ? (
+          <img src={src} alt={alt} className="c-avatar__image" onError={handleImageError} />
+        ) : initials ? (
+          <span className="c-avatar__initials">{initials}</span>
+        ) : icon ? (
+          <span className="c-avatar__icon">{icon}</span>
+        ) : (
+          <span className="c-avatar__icon">
+            <Icon name="User" size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+          </span>
+        )}
+      </div>
+    );
+  }
+);
 
 Avatar.displayName = 'Avatar';