@shohojdhara/atomix 0.4.7 → 0.4.9

package/src/lib/composables/types.ts

@@ -0,0 +1,45 @@
+/**
+ * TestTypeCheck Hook Types
+ * Generated by Atomix CLI
+ */
+
+/**
+ * Component State Interface
+ */
+export interface ComponentState {
+  isActive: boolean;
+  isHovered: boolean;
+  isFocused: boolean;
+  isLoading: boolean;
+  variant: 'primary' | 'secondary' | 'outline' | string;
+  size: 'sm' | 'md' | 'lg' | string;
+}
+
+/**
+ * Event Handler Types
+ */
+export type ClickHandler = (event: React.MouseEvent<HTMLDivElement>) => void;
+export type HoverHandler = (event: React.MouseEvent<HTMLDivElement>) => void;
+export type FocusHandler = (event: React.FocusEvent<HTMLDivElement>) => void;
+export type BlurHandler = (event: React.FocusEvent<HTMLDivElement>) => void;
+export type StateChangeHandler = (state: ComponentState) => void;
+
+/**
+ * Variant Configuration
+ */
+export type VariantType = 'primary' | 'secondary' | 'outline' | 'ghost' | 'link';
+
+/**
+ * Size Configuration  
+ */
+export type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Glass Effect Configuration
+ */
+export interface GlassConfig {
+  displacementScale?: number;
+  blurAmount?: number;
+  saturation?: number;
+  elasticity?: number;
+}

package/src/lib/composables/useAccordion.ts

@@ -66,13 +66,6 @@ export function useAccordion(
       }
 
       defaultProps.onOpenChange?.(nextOpen);
-
-      // Call legacy handlers
-      if (nextOpen) {
-        defaultProps.onOpen?.();
-      } else {
-        defaultProps.onClose?.();
-      }
     }
   };
 

package/src/lib/composables/useAtomixGlass.ts

@@ -23,6 +23,13 @@ import {
   lerp,
 } from '../../components/AtomixGlass/glass-utils';
 import { updateAtomixGlassStyles } from './useAtomixGlassStyles';
+// Phase 1: Time-Based Animation System
+import {
+  createAnimationLoop,
+  createFBMEngine,
+  getFBMConfigForQuality,
+  liquidGlassWithTime,
+} from '../../components/AtomixGlass/animation-system';
 
 const { CONSTANTS } = ATOMIX_GLASS;
 
@@ -150,6 +157,14 @@ interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
   contentRef: React.RefObject<HTMLDivElement>;
   wrapperRef?: React.RefObject<HTMLDivElement>;
   children?: React.ReactNode;
+  isFixedOrSticky?: boolean;
+  // Phase 1: Time-Based Animation System
+  withLiquidBlur?: boolean;
+  animationQuality?: 'low' | 'medium' | 'high';
+  timeSpeed?: number;
+  noiseAmplitude?: number;
+  noiseFrequency?: number;
+  displacementStrength?: number;
 }
 
 interface UseAtomixGlassReturn {
@@ -181,6 +196,10 @@ interface UseAtomixGlassReturn {
   // Transform calculations
   transformStyle: string;
 
+  // Phase 1: Animation System - Shader time control
+  getShaderTime: () => number;
+  applyTimeBasedDistortion: (uv: { x: number; y: number }) => { x: number; y: number };
+
   // Event handlers
   handleMouseEnter: () => void;
   handleMouseLeave: () => void;
@@ -211,12 +230,20 @@ export function useAtomixGlass({
   onClick,
   debugBorderRadius = false,
   debugOverLight = false,
-  debugPerformance = false,
   children,
   blurAmount,
   saturation,
   padding,
   withLiquidBlur,
+  isFixedOrSticky = false,
+  // Phase 1: Animation System Props
+  withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION,
+  animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED,
+  withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION,
+  distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES,
+  distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY,
+  distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN,
+  distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY,
 }: UseAtomixGlassOptions): UseAtomixGlassReturn {
   // State
   const [isHovered, setIsHovered] = useState(false);
@@ -242,6 +269,115 @@ export function useAtomixGlass({
   const [userPrefersHighContrast, setUserPrefersHighContrast] = useState(false);
   const [detectedOverLight, setDetectedOverLight] = useState(false);
 
+  // ============================================================================
+  // Phase 1: Time-Based Animation System (Feature 1.1)
+  // ============================================================================
+
+  // Animation state refs
+  const animationFrameIdRef = useRef<number | null>(null);
+  const animationStartTimeRef = useRef<number>(0);
+  const elapsedTimeRef = useRef<number>(0);
+  const shaderTimeRef = useRef<number>(0);
+
+  /**
+   * Get FBM configuration based on quality preset or custom values
+   */
+  const fbmConfig = useMemo(() => {
+    // If quality preset is provided, use it as base
+    const preset = getFBMConfigForQuality(distortionQuality);
+    
+    // Override with custom values if provided
+    return {
+      octaves: distortionOctaves ?? preset.octaves,
+      lacunarity: distortionLacunarity ?? preset.lacunarity,
+      gain: distortionGain ?? preset.gain,
+    };
+  }, [distortionQuality, distortionOctaves, distortionLacunarity, distortionGain]);
+
+  /**
+   * Create FBM engine for multi-layer distortion
+   */
+  const fbmEngine = useMemo(() => {
+    if (!withMultiLayerDistortion) return null;
+    return createFBMEngine(fbmConfig);
+  }, [withMultiLayerDistortion, fbmConfig]);
+
+  /**
+   * Determine effective animation settings
+   */
+  const effectiveReducedMotion = useMemo(
+    () => reducedMotion || userPrefersReducedMotion,
+    [reducedMotion, userPrefersReducedMotion]
+  );
+
+  const effectiveWithTimeAnimation = useMemo(() => {
+    return withTimeAnimation && !effectiveReducedMotion;
+  }, [withTimeAnimation, effectiveReducedMotion]);
+
+  /**
+   * Animation loop for time-based effects
+   */
+  useEffect(() => {
+    if (!effectiveWithTimeAnimation || typeof window === 'undefined') {
+      return undefined;
+    }
+
+    let lastFrameTime = performance.now();
+
+    /**
+     * Animation frame handler
+     */
+    const animate = (currentTime: number) => {
+      // Calculate delta time
+      const deltaTime = currentTime - lastFrameTime;
+      lastFrameTime = currentTime;
+
+      // Apply animation speed multiplier
+      const scaledDelta = deltaTime * animationSpeed;
+      elapsedTimeRef.current += scaledDelta;
+      shaderTimeRef.current = elapsedTimeRef.current;
+
+      // Continue animation loop
+      animationFrameIdRef.current = requestAnimationFrame(animate);
+    };
+
+    // Start animation
+    animationStartTimeRef.current = performance.now();
+    animationFrameIdRef.current = requestAnimationFrame(animate);
+
+    // Cleanup
+    return () => {
+      if (animationFrameIdRef.current !== null) {
+        cancelAnimationFrame(animationFrameIdRef.current);
+        animationFrameIdRef.current = null;
+      }
+    };
+  }, [effectiveWithTimeAnimation, animationSpeed]);
+
+  /**
+   * Get current shader time for animations
+   */
+  const getShaderTime = useCallback(() => {
+    return shaderTimeRef.current;
+  }, []);
+
+  /**
+   * Apply time-based distortion to UV coordinates
+   */
+  const applyTimeBasedDistortion = useCallback(
+    (uv: { x: number; y: number }): { x: number; y: number } => {
+      if (!effectiveWithTimeAnimation || !fbmEngine) {
+        return uv;
+      }
+
+      const time = shaderTimeRef.current;
+      
+      // Apply liquid glass distortion with time
+      return liquidGlassWithTime(uv, time, fbmConfig);
+    },
+    [effectiveWithTimeAnimation, fbmEngine, fbmConfig]
+  );
+
   // Memoized derived values
   const effectiveBorderRadius = useMemo(() => {
     if (borderRadius !== undefined) {
@@ -258,10 +394,6 @@ export function useAtomixGlass({
     cachedRectRef 
   });
 
-  const effectiveReducedMotion = useMemo(
-    () => reducedMotion || userPrefersReducedMotion,
-    [reducedMotion, userPrefersReducedMotion]
-  );
 
   const effectiveHighContrast = useMemo(
     () => highContrast || userPrefersHighContrast,
@@ -700,6 +832,12 @@ export function useAtomixGlass({
     const tick = () => {
       if (!lerpActiveRef.current) return;
 
+      // Add ref validity check to prevent memory leaks
+      if (!glassRef.current || !wrapperRef?.current) {
+        lerpActiveRef.current = false;
+        return;
+      }
+
       const cur = internalMouseOffsetRef.current;
       const tgt = targetMouseOffsetRef.current;
 
@@ -725,7 +863,7 @@ export function useAtomixGlass({
 
       // Imperative style update with the smoothed values
       updateAtomixGlassStyles(
-        wrapperRef?.current || null,
+        wrapperRef.current,
         glassRef.current,
         {
           mouseOffset: internalMouseOffsetRef.current,
@@ -745,6 +883,7 @@ export function useAtomixGlass({
           blurAmount,
           saturation,
           padding,
+          isFixedOrSticky,
         }
       );
 
@@ -768,6 +907,7 @@ export function useAtomixGlass({
     blurAmount,
     saturation,
     padding,
+    isFixedOrSticky,
   ]);
 
   const stopLerpLoop = useCallback(() => {
@@ -913,6 +1053,8 @@ export function useAtomixGlass({
     mouseOffset,         // This is now static (refs or props) unless prop changes
     overLightConfig,
     transformStyle,
+    getShaderTime,
+    applyTimeBasedDistortion,
     handleMouseEnter,
     handleMouseLeave,
     handleMouseDown,

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -34,6 +34,7 @@ export const updateAtomixGlassStyles = (
     blurAmount?: number;
     saturation?: number;
     padding?: string;
+    isFixedOrSticky?: boolean;
   }
 ) => {
   if (!wrapperElement && !containerElement) return;
@@ -56,6 +57,7 @@ export const updateAtomixGlassStyles = (
     blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
     saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
     padding = ATOMIX_GLASS.DEFAULTS.PADDING,
+    isFixedOrSticky = false,
   } = params;
 
   // Calculate mouse influence
@@ -225,10 +227,10 @@ export const updateAtomixGlassStyles = (
     const my = mouseOffset.y;
 
     // Constants for blur calculation
-    const EDGE_BLUR_MULTIPLIER = 1.25;
-    const CENTER_BLUR_MULTIPLIER = 1.1;
-    const FLOW_BLUR_MULTIPLIER = 1.2;
-    const MOUSE_INFLUENCE_BLUR_FACTOR = 0.15;
+    const EDGE_BLUR_MULTIPLIER = 0.5;
+    const CENTER_BLUR_MULTIPLIER = 0.2;
+    const FLOW_BLUR_MULTIPLIER = 0.3;
+    const MOUSE_INFLUENCE_BLUR_FACTOR = 0.4;
     const EDGE_INTENSITY_MOUSE_FACTOR = 0.15;
     const CENTER_INTENSITY_MOUSE_FACTOR = 0.1;
     const MAX_BLUR_RELATIVE = 2;
@@ -296,8 +298,8 @@ export const updateAtomixGlassStyles = (
     // Container variables
     const style = containerElement.style;
 
-    style.setProperty('--atomix-glass-container-width', `${glassSize.width}`);
-    style.setProperty('--atomix-glass-container-height', `${glassSize.height}`);
+    style.setProperty('--atomix-glass-container-width', !isFixedOrSticky ? '100%' : `${glassSize.width}`);
+    style.setProperty('--atomix-glass-container-height', !isFixedOrSticky ? '100%' : `${glassSize.height}`);
     style.setProperty('--atomix-glass-container-padding', padding);
     style.setProperty('--atomix-glass-container-radius', `${effectiveBorderRadius}px`);
 
@@ -320,7 +322,7 @@ export const updateAtomixGlassStyles = (
         : 'none');
 
     style.setProperty('--atomix-glass-container-text-shadow', isOverLight
-        ? '0px 2px 12px rgba(0, 0, 0, 0)'
+        ? '0px 1px 2px rgba(255, 255, 255, 0.15)'
         : '0px 2px 12px rgba(0, 0, 0, 0.4)');
 
     style.setProperty('--atomix-glass-container-box-shadow', isOverLight

package/src/lib/composables/useChartExport.ts

@@ -139,20 +139,10 @@ export function useChartExport() {
 
   // Export as PDF
   const exportAsPDF = useCallback(
-    async (svgElement: SVGSVGElement, options: ExportOptions): Promise<void> => {
-      // Note: This requires a PDF library like jsPDF
-      // For now, we'll convert to canvas and then to PDF
-      const canvas = await svgToCanvas(svgElement, options);
-
-      // This would require jsPDF library
-      // const pdf = new jsPDF();
-      // const imgData = canvas.toDataURL('image/png');
-      // pdf.addImage(imgData, 'PNG', 0, 0);
-      // pdf.save(options.filename || 'chart.pdf');
-
-      console.warn('PDF export requires jsPDF library to be installed');
+    async (_svgElement: SVGSVGElement, _options: ExportOptions): Promise<void> => {
+      console.warn('PDF export requires a PDF library to be installed');
     },
-    [svgToCanvas]
+    []
   );
 
   // Export data as CSV

package/src/lib/composables/useDropdown.ts

@@ -107,6 +107,72 @@ export const useDropdown = ({
     };
   }, [isOpen, closeOnEscape, setIsOpen]);
 
+  // Handle arrow key navigation
+  useEffect(() => {
+    if (!isOpen || !menuRef.current) return undefined;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const menu = menuRef.current;
+      if (!menu) return;
+
+      const items = Array.from(
+        menu.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
+      );
+      if (items.length === 0) return;
+
+      const currentIndex = items.indexOf(document.activeElement as HTMLElement);
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          const nextIndex = (currentIndex + 1) % items.length;
+          const nextItem = items[nextIndex];
+          if (nextItem) nextItem.focus();
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          const prevIndex = (currentIndex - 1 + items.length) % items.length;
+          const prevItem = items[prevIndex];
+          if (prevItem) prevItem.focus();
+          break;
+        case 'Home':
+          event.preventDefault();
+          const firstItem = items[0];
+          if (firstItem) firstItem.focus();
+          break;
+        case 'End':
+          event.preventDefault();
+          const lastItem = items[items.length - 1];
+          if (lastItem) lastItem.focus();
+          break;
+        case 'Tab':
+          // Close dropdown on tab
+          setIsOpen(false);
+          break;
+        default:
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, setIsOpen]);
+
+  // Focus management when dropdown opens
+  useEffect(() => {
+    if (isOpen && menuRef.current) {
+      const firstItem = menuRef.current.querySelector<HTMLElement>(
+        '[role="menuitem"]:not([disabled])'
+      );
+      if (firstItem) {
+        setTimeout(() => firstItem.focus(), 0);
+      }
+    }
+  }, [isOpen]);
+
   // Helper function to get the flipped placement if needed
   const getFlippedPlacement = useCallback(
     (

package/src/lib/composables/useFocusTrap.ts

@@ -0,0 +1,80 @@
+import { useEffect, useRef, useCallback } from 'react';
+
+/**
+ * Hook to trap focus within an element
+ */
+export function useFocusTrap(isOpen: boolean) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const previouslyFocusedElement = useRef<HTMLElement | null>(null);
+
+  const getFocusableElements = useCallback(() => {
+    if (!containerRef.current) return [];
+    
+    return Array.from(
+      containerRef.current.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((el) => {
+      // Check if visible
+      const style = window.getComputedStyle(el);
+      return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) {
+        return;
+      }
+
+      const firstElement = focusableElements[0] as HTMLElement;
+      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+      if (event.shiftKey) {
+        // Shift + Tab
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+    },
+    [getFocusableElements]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      previouslyFocusedElement.current = document.activeElement as HTMLElement;
+      
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length > 0 && focusableElements[0]) {
+        // Delay focus slightly to ensure element is rendered
+        const firstEl = focusableElements[0] as HTMLElement;
+        setTimeout(() => {
+          firstEl.focus();
+        }, 0);
+      }
+
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      if (previouslyFocusedElement.current) {
+        previouslyFocusedElement.current.focus();
+      }
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, getFocusableElements, handleKeyDown]);
+
+  return containerRef;
+}