@shohojdhara/atomix 0.4.1 → 0.4.3

package/src/lib/composables/useSlider.ts

@@ -45,6 +45,16 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
   const autoplayRef = useRef<NodeJS.Timeout | null>(null);
   const [autoplayRunning, setAutoplayRunning] = useState(false);
 
+  // Create a ref to store the latest state for the autoplay interval
+  const sliderStateRef = useRef({
+    isTransitioning: false,
+    loop,
+    slides,
+    slidesToShow,
+    speed,
+    onSlideChange,
+  });
+
   const [realIndex, setRealIndex] = useState(initialSlide);
   const [internalIndex, setInternalIndex] = useState(0);
   const [isTransitioning, setIsTransitioning] = useState(false);
@@ -76,6 +86,18 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     return -(internalIndex * slideWidth) + dragOffset;
   }, [slideWidth, internalIndex, dragOffset]);
 
+  // Update the ref whenever the relevant state/props change
+  useEffect(() => {
+    sliderStateRef.current = {
+      isTransitioning,
+      loop,
+      slides,
+      slidesToShow,
+      speed,
+      onSlideChange,
+    };
+  }, [isTransitioning, loop, slides, slidesToShow, speed, onSlideChange]);
+
   // Autoplay effect
   useEffect(() => {
     if (!autoplay) {
@@ -102,9 +124,19 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
 
     // Create new interval
     autoplayRef.current = setInterval(() => {
+      // Use ref to get the latest state without resetting the interval
+      const {
+        isTransitioning: currentIsTransitioning,
+        loop: currentLoop,
+        slides: currentSlides,
+        slidesToShow: currentSlidesToShow,
+        speed: currentSpeed,
+        onSlideChange: currentOnSlideChange,
+      } = sliderStateRef.current;
+
       // We need to use a functional update to get the latest values
       setRealIndex(prevRealIndex => {
-        if (isTransitioning) return prevRealIndex;
+        if (currentIsTransitioning) return prevRealIndex;
 
         // Stop autoplay on interaction if disableOnInteraction is true
         if (disableOnInteraction && autoplayRef.current) {
@@ -114,49 +146,49 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
         }
 
         let nextIndex;
-        if (loop) {
-          nextIndex = (prevRealIndex + 1) % slides.length;
+        if (currentLoop) {
+          nextIndex = (prevRealIndex + 1) % currentSlides.length;
         } else {
-          nextIndex = Math.min(prevRealIndex + 1, slides.length - slidesToShow);
+          nextIndex = Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow);
         }
 
         // Trigger the slide change
         if (reverseDirection) {
           // For reverse direction, we would go to previous slide
-          const prevIndex = loop
+          const prevIndex = currentLoop
             ? prevRealIndex === 0
-              ? slides.length - 1
+              ? currentSlides.length - 1
               : prevRealIndex - 1
             : Math.max(prevRealIndex - 1, 0);
-          setInternalIndex(loop ? slides.length + prevIndex : prevIndex);
+          setInternalIndex(currentLoop ? currentSlides.length + prevIndex : prevIndex);
           setIsTransitioning(true);
           setDragOffset(0);
 
           setTimeout(() => {
             setIsTransitioning(false);
-            onSlideChange?.(prevIndex);
-          }, speed);
+            currentOnSlideChange?.(prevIndex);
+          }, currentSpeed);
 
           return prevIndex;
         } else {
           // Normal direction
-          setInternalIndex(loop ? slides.length + nextIndex : nextIndex);
+          setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex);
           setIsTransitioning(true);
           setDragOffset(0);
 
           setTimeout(() => {
             setIsTransitioning(false);
-            onSlideChange?.(nextIndex);
+            currentOnSlideChange?.(nextIndex);
 
             // Reposition after transition ends for looped sliders
-            if (loop && nextIndex >= slides.length * 2) {
+            if (currentLoop && nextIndex >= currentSlides.length * 2) {
               repositioningRef.current = true;
-              setInternalIndex(slides.length + nextIndex);
+              setInternalIndex(currentSlides.length + nextIndex);
               setTimeout(() => {
                 repositioningRef.current = false;
               }, 0);
             }
-          }, speed);
+          }, currentSpeed);
 
           return nextIndex;
         }
@@ -182,35 +214,44 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
       }
 
       autoplayRef.current = setInterval(() => {
+        const {
+          isTransitioning: currentIsTransitioning,
+          loop: currentLoop,
+          slides: currentSlides,
+          slidesToShow: currentSlidesToShow,
+          speed: currentSpeed,
+          onSlideChange: currentOnSlideChange,
+        } = sliderStateRef.current;
+
         setRealIndex(prevRealIndex => {
-          if (isTransitioning) return prevRealIndex;
+          if (currentIsTransitioning) return prevRealIndex;
 
           let nextIndex;
-          if (loop) {
-            nextIndex = (prevRealIndex + 1) % slides.length;
+          if (currentLoop) {
+            nextIndex = (prevRealIndex + 1) % currentSlides.length;
           } else {
-            nextIndex = Math.min(prevRealIndex + 1, slides.length - slidesToShow);
+            nextIndex = Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow);
           }
 
-          setInternalIndex(loop ? slides.length + nextIndex : nextIndex);
+          setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex);
           setIsTransitioning(true);
           setDragOffset(0);
 
           setTimeout(() => {
             setIsTransitioning(false);
-            onSlideChange?.(nextIndex);
+            currentOnSlideChange?.(nextIndex);
 
-            if (loop) {
+            if (currentLoop) {
               // Reposition after transition ends
-              if (nextIndex >= slides.length * 2) {
+              if (nextIndex >= currentSlides.length * 2) {
                 repositioningRef.current = true;
-                setInternalIndex(slides.length + nextIndex);
+                setInternalIndex(currentSlides.length + nextIndex);
                 setTimeout(() => {
                   repositioningRef.current = false;
                 }, 0);
               }
             }
-          }, speed);
+          }, currentSpeed);
 
           return nextIndex;
         });
@@ -237,16 +278,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
       }
       setAutoplayRunning(false);
     };
-  }, [
-    autoplay,
-    slides.length,
-    loop,
-    slidesToShow,
-    isTransitioning,
-    speed,
-    onSlideChange,
-    repositioningRef,
-  ]);
+  }, [autoplay, repositioningRef]);
 
   // Initialize
   useEffect(() => {

package/src/lib/theme/devtools/CLI.ts

@@ -11,7 +11,7 @@ import { Command } from 'commander';
 import chalk from 'chalk';
 import * as fs from 'fs';
 import * as path from 'path';
-import { ThemeValidator } from './ThemeValidator';
+import { ThemeValidator } from './ThemeValidator.js';
 import boxen from 'boxen';
 
 const program = new Command();

package/src/lib/theme/utils/__tests__/themeUtils.test.ts

@@ -0,0 +1,213 @@
+import { describe, it, expect } from 'vitest';
+import {
+  hexToRgb,
+  rgbToHex,
+  getLuminance,
+  getContrastRatio,
+  getContrastText,
+  lighten,
+  darken,
+  alpha,
+  emphasize,
+  createSpacing,
+} from '../themeUtils';
+
+describe('Theme Utils', () => {
+  describe('hexToRgb', () => {
+    it('should convert valid 6-digit hex codes', () => {
+      expect(hexToRgb('#ffffff')).toEqual({ r: 255, g: 255, b: 255 });
+      expect(hexToRgb('#000000')).toEqual({ r: 0, g: 0, b: 0 });
+      expect(hexToRgb('#ff0000')).toEqual({ r: 255, g: 0, b: 0 });
+    });
+
+    it('should handle hex codes without hash', () => {
+      expect(hexToRgb('ffffff')).toEqual({ r: 255, g: 255, b: 255 });
+    });
+
+    it('should return null for invalid hex codes', () => {
+      expect(hexToRgb('invalid')).toBeNull();
+      expect(hexToRgb('#xyz')).toBeNull();
+      // Current implementation does NOT support 3-digit hex
+      expect(hexToRgb('#fff')).toBeNull();
+    });
+  });
+
+  describe('rgbToHex', () => {
+    it('should convert RGB values to hex string', () => {
+      expect(rgbToHex(255, 255, 255)).toBe('#ffffff');
+      expect(rgbToHex(0, 0, 0)).toBe('#000000');
+      expect(rgbToHex(255, 0, 0)).toBe('#ff0000');
+    });
+
+    it('should clamp values to 0-255 range', () => {
+      expect(rgbToHex(300, -50, 256)).toBe('#ff00ff');
+    });
+
+    it('should handle null/undefined values as 0', () => {
+      // @ts-ignore
+      expect(rgbToHex(null, undefined, 255)).toBe('#0000ff');
+    });
+  });
+
+  describe('getLuminance', () => {
+    it('should calculate luminance for standard colors', () => {
+      expect(getLuminance('#000000')).toBe(0);
+      expect(getLuminance('#ffffff')).toBe(1);
+    });
+
+    it('should return 0 for invalid colors', () => {
+      expect(getLuminance('invalid')).toBe(0);
+    });
+  });
+
+  describe('getContrastRatio', () => {
+    it('should calculate contrast ratio between black and white', () => {
+      const ratio = getContrastRatio('#000000', '#ffffff');
+      expect(ratio).toBeCloseTo(21, 1);
+    });
+
+    it('should be commutative', () => {
+      const r1 = getContrastRatio('#ffffff', '#000000');
+      const r2 = getContrastRatio('#000000', '#ffffff');
+      expect(r1).toBe(r2);
+    });
+
+    it('should return 1 for same colors', () => {
+      expect(getContrastRatio('#ffffff', '#ffffff')).toBe(1);
+    });
+  });
+
+  describe('getContrastText', () => {
+    it('should return white for dark backgrounds', () => {
+      expect(getContrastText('#000000')).toBe('#FFFFFF');
+      expect(getContrastText('#333333')).toBe('#FFFFFF');
+    });
+
+    it('should return black for light backgrounds', () => {
+      expect(getContrastText('#ffffff')).toBe('#000000');
+      expect(getContrastText('#eeeeee')).toBe('#000000');
+    });
+
+    it('should respect custom threshold', () => {
+      // Very strict threshold might force one or the other
+      // But standard usage is tested above
+      // Testing logic fallback:
+      // If contrast with white < threshold AND contrast with black < threshold
+      // it returns whichever has higher contrast.
+
+      // Let's test a middle grey.
+      // #808080.
+      // Contrast with white: ~3.95
+      // Contrast with black: ~5.32
+      // Default threshold is 3.
+      // 3.95 >= 3 -> returns white (checked first).
+      // Wait, let's check code order:
+      // if (contrastWithWhite >= threshold) return '#FFFFFF';
+
+      expect(getContrastText('#808080', 3)).toBe('#FFFFFF');
+
+      // If we raise threshold to 4.
+      // Contrast white (3.95) < 4.
+      // Contrast black (5.32) >= 4.
+      // Returns black.
+      expect(getContrastText('#808080', 4)).toBe('#000000');
+    });
+  });
+
+  describe('lighten', () => {
+    it('should lighten a color', () => {
+      const result = lighten('#000000', 0.5); // Lighten black by 50%
+      // black is 0, 0, 0.
+      // lightenValue = val + (255 - val) * amount
+      // 0 + 255 * 0.5 = 127.5 -> 128 (0x80)
+      expect(result).toBe('#808080');
+    });
+
+    it('should return original color if invalid', () => {
+      expect(lighten('invalid')).toBe('invalid');
+    });
+  });
+
+  describe('darken', () => {
+    it('should darken a color', () => {
+      const result = darken('#ffffff', 0.5); // Darken white by 50%
+      // white is 255.
+      // darkenValue = val * (1 - amount)
+      // 255 * 0.5 = 127.5 -> 128 (0x80)
+      expect(result).toBe('#808080');
+    });
+
+    it('should return original color if invalid', () => {
+      expect(darken('invalid')).toBe('invalid');
+    });
+  });
+
+  describe('alpha', () => {
+    it('should add alpha to hex color', () => {
+      expect(alpha('#ffffff', 0.5)).toBe('rgba(255, 255, 255, 0.5)');
+    });
+
+    it('should clamp opacity', () => {
+      expect(alpha('#ffffff', 1.5)).toBe('rgba(255, 255, 255, 1)');
+      expect(alpha('#ffffff', -0.5)).toBe('rgba(255, 255, 255, 0)');
+    });
+
+    it('should return original color if invalid', () => {
+      expect(alpha('invalid', 0.5)).toBe('invalid');
+    });
+  });
+
+  describe('emphasize', () => {
+    it('should darken light colors', () => {
+      // #ffffff luminance is 1 (> 0.5) -> darken
+      const result = emphasize('#ffffff', 0.2);
+      // darken #ffffff by 0.2
+      // 255 * 0.8 = 204 (0xCC)
+      expect(result).toBe('#cccccc');
+    });
+
+    it('should lighten dark colors', () => {
+      // #000000 luminance is 0 (<= 0.5) -> lighten
+      const result = emphasize('#000000', 0.2);
+      // lighten #000000 by 0.2
+      // 0 + 255 * 0.2 = 51 (0x33)
+      expect(result).toBe('#333333');
+    });
+  });
+
+  describe('createSpacing', () => {
+    it('should use default spacing (4px)', () => {
+      const spacing = createSpacing();
+      expect(spacing(1)).toBe('4px');
+      expect(spacing(2)).toBe('8px');
+      expect(spacing(1, 2)).toBe('4px 8px');
+    });
+
+    it('should use numeric spacing multiplier', () => {
+      const spacing = createSpacing(8);
+      expect(spacing(1)).toBe('8px');
+      expect(spacing(2)).toBe('16px');
+    });
+
+    it('should use array spacing', () => {
+      const scale = [0, 4, 8, 16, 32];
+      const spacing = createSpacing(scale);
+      expect(spacing(1)).toBe('4px');
+      expect(spacing(3)).toBe('16px');
+      // fallback to value if index out of bounds?
+      // Code: spacingInput[value] || value
+      expect(spacing(10)).toBe('10px');
+    });
+
+    it('should use function spacing', () => {
+      const customFn = (...values: number[]) => values.map(v => `${v}rem`).join(' ');
+      const spacing = createSpacing(customFn);
+      expect(spacing(1, 2)).toBe('1rem 2rem');
+    });
+
+    it('should handle no arguments', () => {
+      const spacing = createSpacing();
+      expect(spacing()).toBe('0px');
+    });
+  });
+});

package/src/lib/types/components.ts

@@ -215,20 +215,20 @@ export interface OverLightObjectConfig {
 /**
  * AtomixGlass component props interface
  */
-export interface AtomixGlassProps {
+export interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   displacementScale?: number;
   blurAmount?: number;
   saturation?: number;
   aberrationIntensity?: number;
   elasticity?: number;
-  cornerRadius?: number;
+  borderRadius?: number;
   globalMousePosition?: MousePosition;
   mouseOffset?: MousePosition;
   mouseContainer?: React.RefObject<HTMLElement | null> | null;
-  className?: string;
   padding?: string;
-  style?: React.CSSProperties;
+  height?: string | number;
+  width?: string | number;
   overLight?: OverLightConfig;
   mode?: DisplacementMode;
   onClick?: () => void;
@@ -245,33 +245,25 @@ export interface AtomixGlassProps {
     | 'waves'
     | 'noise';
 
-  /**
-   * Accessibility props
-   */
-  'aria-label'?: string;
-  'aria-describedby'?: string;
-  role?: string;
-  tabIndex?: number;
-
   /**
    * Performance and accessibility options
    */
   reducedMotion?: boolean;
   highContrast?: boolean;
-  disableEffects?: boolean;
-  enableLiquidBlur?: boolean;
-  enableBorderEffect?: boolean;
-  enableOverLightLayers?: boolean;
+  withoutEffects?: boolean;
+  withLiquidBlur?: boolean;
+  withBorder?: boolean;
+  withOverLightLayers?: boolean;
 
   /**
    * Performance monitoring
    */
-  enablePerformanceMonitoring?: boolean;
+  debugPerformance?: boolean;
 
   /**
-   * Debug mode for cornerRadius extraction
+   * Debug mode for borderRadius extraction
    */
-  debugCornerRadius?: boolean;
+  debugBorderRadius?: boolean;
 
   /**
    * Debug mode for overLight detection and configuration
@@ -3791,7 +3783,7 @@ export interface VideoPlayerProps extends BaseComponentProps {
         saturation?: number;
         aberrationIntensity?: number;
         elasticity?: number;
-        cornerRadius?: number;
+        borderRadius?: number;
         mode?: 'standard' | 'polar' | 'prominent' | 'shader';
         overLight?: boolean;
       };
@@ -4049,6 +4041,11 @@ export interface CardProps extends BaseComponentProps {
    */
   className?: string;
 
+  /**
+   * Optional custom link component (e.g., Next.js Link, React Router Link)
+   */
+  LinkComponent?: React.ElementType;
+
   /**
    * Optional click handler
    */
@@ -6642,7 +6639,7 @@ export interface GlassContainerProps extends BaseComponentProps {
    * Border radius of the glass container
    * @default 999
    */
-  cornerRadius?: number;
+  borderRadius?: number;
 
   /**
    * Padding inside the glass container

package/src/lib/utils/__tests__/dom.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { hasClass, addClass, removeClass, toggleClass } from '../dom';
+
+describe('dom utils', () => {
+  let element: HTMLElement;
+
+  beforeEach(() => {
+    element = document.createElement('div');
+  });
+
+  describe('hasClass', () => {
+    it('should return true if element has class', () => {
+      element.className = 'test-class';
+      expect(hasClass(element, 'test-class')).toBe(true);
+    });
+
+    it('should return false if element does not have class', () => {
+      element.className = 'other-class';
+      expect(hasClass(element, 'test-class')).toBe(false);
+    });
+
+    it('should return false if element has no classes', () => {
+      expect(hasClass(element, 'test-class')).toBe(false);
+    });
+  });
+
+  describe('addClass', () => {
+    it('should add class if not present', () => {
+      addClass(element, 'new-class');
+      expect(element.classList.contains('new-class')).toBe(true);
+    });
+
+    it('should not add duplicate class', () => {
+      element.className = 'existing-class';
+      addClass(element, 'existing-class');
+      expect(element.className).toBe('existing-class');
+      expect(element.classList.length).toBe(1);
+    });
+
+    it('should preserve existing classes', () => {
+      element.className = 'existing-class';
+      addClass(element, 'new-class');
+      expect(element.classList.contains('existing-class')).toBe(true);
+      expect(element.classList.contains('new-class')).toBe(true);
+    });
+  });
+
+  describe('removeClass', () => {
+    it('should remove existing class', () => {
+      element.className = 'test-class';
+      removeClass(element, 'test-class');
+      expect(element.classList.contains('test-class')).toBe(false);
+    });
+
+    it('should do nothing if class does not exist', () => {
+      element.className = 'other-class';
+      removeClass(element, 'test-class');
+      expect(element.className).toBe('other-class');
+    });
+
+    it('should preserve other classes', () => {
+      element.className = 'keep-me remove-me';
+      removeClass(element, 'remove-me');
+      expect(element.classList.contains('keep-me')).toBe(true);
+      expect(element.classList.contains('remove-me')).toBe(false);
+    });
+  });
+
+  describe('toggleClass', () => {
+    it('should add class if not present', () => {
+      toggleClass(element, 'test-class');
+      expect(element.classList.contains('test-class')).toBe(true);
+    });
+
+    it('should remove class if present', () => {
+      element.className = 'test-class';
+      toggleClass(element, 'test-class');
+      expect(element.classList.contains('test-class')).toBe(false);
+    });
+
+    it('should add class if force is true', () => {
+      toggleClass(element, 'test-class', true);
+      expect(element.classList.contains('test-class')).toBe(true);
+
+      // Should stay added if already present
+      toggleClass(element, 'test-class', true);
+      expect(element.classList.contains('test-class')).toBe(true);
+    });
+
+    it('should remove class if force is false', () => {
+      element.className = 'test-class';
+      toggleClass(element, 'test-class', false);
+      expect(element.classList.contains('test-class')).toBe(false);
+
+      // Should stay removed if not present
+      toggleClass(element, 'test-class', false);
+      expect(element.classList.contains('test-class')).toBe(false);
+    });
+  });
+});