@shohojdhara/atomix 0.5.0 → 0.5.2

package/src/lib/composables/useChartToolbar.ts

@@ -148,17 +148,17 @@ export function useChartToolbar(
     return { ...getChartDefaults(), ...defaults };
   }, [getChartDefaults, defaults]);
 
-  const enhancedHandlers = {
-    onRefresh: useCallback(() => {
-      setState(prev => ({ ...prev, isRefreshing: true }));
-      handlers.onRefresh?.();
-      setTimeout(() => {
-        setState(prev => ({ ...prev, isRefreshing: false }));
-      }, 1000);
-    }, [handlers.onRefresh]),
-
-    onExport: useCallback(
-      async (format: string) => {
+  const enhancedHandlers = useMemo(
+    () => ({
+      onRefresh: () => {
+        setState(prev => ({ ...prev, isRefreshing: true }));
+        handlers.onRefresh?.();
+        setTimeout(() => {
+          setState(prev => ({ ...prev, isRefreshing: false }));
+        }, 1000);
+      },
+
+      onExport: async (format: string) => {
         setState(prev => ({ ...prev, isExporting: true }));
         try {
           await handlers.onExport?.(format);
@@ -166,83 +166,65 @@ export function useChartToolbar(
           setState(prev => ({ ...prev, isExporting: false }));
         }
       },
-      [handlers.onExport]
-    ),
 
-    onFullscreen: useCallback(
-      (isFullscreen: boolean) => {
+      onFullscreen: (isFullscreen: boolean) => {
         setState(prev => ({ ...prev, isFullscreen }));
         handlers.onFullscreen?.(isFullscreen);
       },
-      [handlers.onFullscreen]
-    ),
-
-    onZoomIn: useCallback(() => {
-      setState(prev => ({ ...prev, zoomLevel: Math.min(prev.zoomLevel * 1.2, 5) }));
-      handlers.onZoomIn?.();
-    }, [handlers.onZoomIn]),
-
-    onZoomOut: useCallback(() => {
-      setState(prev => ({ ...prev, zoomLevel: Math.max(prev.zoomLevel / 1.2, 0.2) }));
-      handlers.onZoomOut?.();
-    }, [handlers.onZoomOut]),
-
-    onZoomReset: useCallback(() => {
-      setState(prev => ({ ...prev, zoomLevel: 1 }));
-      handlers.onZoomReset?.();
-    }, [handlers.onZoomReset]),
-
-    onPanToggle: useCallback(
-      (enabled: boolean) => {
+
+      onZoomIn: () => {
+        setState(prev => ({ ...prev, zoomLevel: Math.min(prev.zoomLevel * 1.2, 5) }));
+        handlers.onZoomIn?.();
+      },
+
+      onZoomOut: () => {
+        setState(prev => ({ ...prev, zoomLevel: Math.max(prev.zoomLevel / 1.2, 0.2) }));
+        handlers.onZoomOut?.();
+      },
+
+      onZoomReset: () => {
+        setState(prev => ({ ...prev, zoomLevel: 1 }));
+        handlers.onZoomReset?.();
+      },
+
+      onPanToggle: (enabled: boolean) => {
         setState(prev => ({ ...prev, panEnabled: enabled }));
         handlers.onPanToggle?.(enabled);
       },
-      [handlers.onPanToggle]
-    ),
-
-    onReset: useCallback(() => {
-      setState(prev => ({
-        ...prev,
-        zoomLevel: 1,
-        panEnabled: false,
-      }));
-      handlers.onReset?.();
-    }, [handlers.onReset]),
-
-    onGridToggle: useCallback(
-      (show: boolean) => {
+
+      onReset: () => {
+        setState(prev => ({
+          ...prev,
+          zoomLevel: 1,
+          panEnabled: false,
+        }));
+        handlers.onReset?.();
+      },
+
+      onGridToggle: (show: boolean) => {
         setState(prev => ({ ...prev, showGrid: show }));
         handlers.onGridToggle?.(show);
       },
-      [handlers.onGridToggle]
-    ),
 
-    onLegendToggle: useCallback(
-      (show: boolean) => {
+      onLegendToggle: (show: boolean) => {
         setState(prev => ({ ...prev, showLegend: show }));
         handlers.onLegendToggle?.(show);
       },
-      [handlers.onLegendToggle]
-    ),
 
-    onTooltipsToggle: useCallback(
-      (show: boolean) => {
+      onTooltipsToggle: (show: boolean) => {
         setState(prev => ({ ...prev, showTooltips: show }));
         handlers.onTooltipsToggle?.(show);
       },
-      [handlers.onTooltipsToggle]
-    ),
 
-    onAnimationsToggle: useCallback(
-      (enabled: boolean) => {
+      onAnimationsToggle: (enabled: boolean) => {
         setState(prev => ({ ...prev, animationsEnabled: enabled }));
         handlers.onAnimationsToggle?.(enabled);
       },
-      [handlers.onAnimationsToggle]
-    ),
 
-    onSettings: useCallback(() => {}, []),
-  };
+      onSettings: () => {},
+    }),
+    [handlers]
+  );
 
   // Generate chart-specific toolbar groups
   const generateToolbarGroups = useCallback((): ChartToolbarGroup[] => {
@@ -441,7 +423,7 @@ export function useChartToolbar(
     }
 
     return groups;
-  }, [chartType, finalDefaults, state, enhancedHandlers, customActions, customGroups]);
+  }, [finalDefaults, state, enhancedHandlers, customActions, customGroups]);
 
   // Keyboard shortcuts
   useEffect(() => {

package/src/lib/composables/useDataTable.ts

@@ -255,7 +255,7 @@ export function useDataTable({
     ) {
       setColumnOrder(newOrder);
     }
-  }, [columns]);
+  }, [columns, columnOrder]);
 
   // Update column visibility when columns prop changes
   useEffect(() => {

package/src/lib/composables/useDatePicker.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import {
   DatePickerViewMode,
   DatePickerSelectionMode,
@@ -106,7 +106,7 @@ export function useDatePicker({
   const datePickerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const today = new Date();
+  const today = useMemo(() => new Date(), []);
   const currentMonth = viewDate.getMonth();
   const currentYear = viewDate.getFullYear();
   const daysInMonth = getDaysInMonth(currentYear, currentMonth);

package/src/lib/composables/useEdgePanel.ts

@@ -8,19 +8,19 @@ import { EDGE_PANEL } from '../constants/components';
  * @returns EdgePanel state and methods
  */
 export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
-  // Default EdgePanel properties
-  const defaultProps: Partial<EdgePanelProps> = {
-    position: 'start',
-    mode: 'slide',
-    isOpen: false,
-    backdrop: true,
-    closeOnBackdropClick: true,
-    closeOnEscape: true,
-    glass: undefined,
-    ...initialProps,
-  };
-
-  const [isOpen, setIsOpen] = useState(defaultProps.isOpen || false);
+  const {
+    position = 'start',
+    mode = 'slide',
+    isOpen: propIsOpen = false,
+    backdrop = true,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    glass,
+    onOpenChange,
+    className = '',
+  } = initialProps || {};
+
+  const [isOpen, setIsOpen] = useState(propIsOpen || false);
   const containerRef = useRef<HTMLDivElement>(null);
   const backdropRef = useRef<HTMLDivElement>(null);
 
@@ -30,22 +30,21 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
    * @returns Class string
    */
   const generateEdgePanelClass = (props: Partial<EdgePanelProps>): string => {
-    const { position = defaultProps.position, className = '', isOpen: propIsOpen } = props;
+    const { position: propPosition = position, className: propClassName = className, isOpen: argIsOpen } = props;
 
     const baseClass = EDGE_PANEL.CLASSES.BASE;
-    const positionClass = position ? `${baseClass}--${position}` : '';
-    const openClass = (propIsOpen ?? isOpen) ? EDGE_PANEL.CLASSES.IS_OPEN : '';
+    const positionClass = propPosition ? `${baseClass}--${propPosition}` : '';
+    const openClass = (argIsOpen ?? isOpen) ? EDGE_PANEL.CLASSES.IS_OPEN : '';
 
-    return `${baseClass} ${positionClass} ${openClass} ${className}`.trim();
+    return `${baseClass} ${positionClass} ${openClass} ${propClassName}`.trim();
   };
 
   /**
    * Adjust body padding in push mode
    */
   const adjustBodyPadding = useCallback(() => {
-    if (!containerRef.current || defaultProps.mode !== 'push') return;
+    if (!containerRef.current || mode !== 'push') return;
 
-    const { position } = defaultProps;
     const size =
       position === 'top' || position === 'bottom'
         ? containerRef.current.clientHeight
@@ -67,15 +66,13 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
 
     document.body.style[paddingProperty as any] = `${size}px`;
     document.body.classList.add('is-pushed');
-  }, [defaultProps.mode, defaultProps.position]);
+  }, [mode, position]);
 
   /**
    * Reset body padding
    */
   const resetBodyPadding = useCallback(() => {
-    if (defaultProps.mode !== 'push') return;
-
-    const { position } = defaultProps;
+    if (mode !== 'push') return;
 
     // Map position to CSS padding property
     let paddingProperty: string;
@@ -93,7 +90,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
 
     document.body.style[paddingProperty as any] = '';
     document.body.classList.remove('is-pushed');
-  }, [defaultProps.mode, defaultProps.position]);
+  }, [mode, position]);
 
   /**
    * Open the panel
@@ -104,8 +101,6 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
       document.body.classList.add('is-edgepanel-open');
 
       if (containerRef.current) {
-        const { mode } = defaultProps;
-
         // Only add animation if not in 'none' mode
         if (mode !== 'none') {
           if (useFadeAnimation) {
@@ -148,16 +143,16 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
         }
 
         // If push mode, adjust body padding
-        if (defaultProps.mode === 'push') {
+        if (mode === 'push') {
           adjustBodyPadding();
         }
       }
 
-      if (defaultProps.onOpenChange) {
-        defaultProps.onOpenChange(true);
+      if (onOpenChange) {
+        onOpenChange(true);
       }
     },
-    [defaultProps, adjustBodyPadding]
+    [mode, adjustBodyPadding, onOpenChange]
   );
 
   /**
@@ -166,8 +161,6 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   const closePanel = useCallback(
     (useFadeAnimation = false) => {
       if (containerRef.current) {
-        const { position, mode } = defaultProps;
-
         // Only add animation if not in 'none' mode
         if (mode !== 'none') {
           if (useFadeAnimation) {
@@ -209,7 +202,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
         }
 
         // Reset body padding if push mode
-        if (defaultProps.mode === 'push') {
+        if (mode === 'push') {
           resetBodyPadding();
         }
 
@@ -220,20 +213,20 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
           setIsOpen(false);
           document.body.classList.remove('is-edgepanel-open');
 
-          if (defaultProps.onOpenChange) {
-            defaultProps.onOpenChange(false);
+          if (onOpenChange) {
+            onOpenChange(false);
           }
         }, hideDelay);
       } else {
         setIsOpen(false);
         document.body.classList.remove('is-edgepanel-open');
 
-        if (defaultProps.onOpenChange) {
-          defaultProps.onOpenChange(false);
+        if (onOpenChange) {
+          onOpenChange(false);
         }
       }
     },
-    [defaultProps, resetBodyPadding]
+    [mode, position, onOpenChange, resetBodyPadding]
   );
 
   /**
@@ -241,11 +234,11 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
    */
   const handleEscapeKey = useCallback(
     (event: KeyboardEvent) => {
-      if (defaultProps.closeOnEscape && event.key === 'Escape' && isOpen) {
+      if (closeOnEscape && event.key === 'Escape' && isOpen) {
         closePanel();
       }
     },
-    [closePanel, defaultProps.closeOnEscape, isOpen]
+    [closePanel, closeOnEscape, isOpen]
   );
 
   /**
@@ -253,55 +246,53 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
    */
   const handleBackdropClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      if (defaultProps.closeOnBackdropClick && event.target === event.currentTarget) {
+      if (closeOnBackdropClick && event.target === event.currentTarget) {
         closePanel();
       }
     },
-    [closePanel, defaultProps.closeOnBackdropClick]
+    [closePanel, closeOnBackdropClick]
   );
 
   /**
    * Set up event listeners for keyboard events
    */
   useEffect(() => {
-    if (isOpen && defaultProps.closeOnEscape) {
+    if (isOpen && closeOnEscape) {
       document.addEventListener('keydown', handleEscapeKey);
     }
 
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
     };
-  }, [isOpen, handleEscapeKey, defaultProps.closeOnEscape]);
+  }, [isOpen, handleEscapeKey, closeOnEscape]);
 
   /**
    * Set initial transform values
    */
   useEffect(() => {
     if (containerRef.current) {
-      const { position, mode } = defaultProps;
-
       if (!isOpen && (mode === 'slide' || mode === 'push') && position) {
-        containerRef.current.style.transform = EDGE_PANEL.TRANSFORM_VALUES[position];
+        containerRef.current.style.transform = EDGE_PANEL.TRANSFORM_VALUES[position as keyof typeof EDGE_PANEL.TRANSFORM_VALUES];
         // Set initial opacity for fade animations
-        if (defaultProps.glass) {
+        if (glass) {
           containerRef.current.style.opacity = '0';
         }
       }
     }
-  }, [defaultProps.mode, defaultProps.position, defaultProps.glass, isOpen]);
+  }, [mode, position, glass, isOpen]);
 
   /**
    * Sync with prop changes
    */
   useEffect(() => {
-    if (defaultProps.isOpen !== undefined && defaultProps.isOpen !== isOpen) {
-      if (defaultProps.isOpen) {
-        openPanel(!!defaultProps.glass);
+    if (propIsOpen !== undefined && propIsOpen !== isOpen) {
+      if (propIsOpen) {
+        openPanel(!!glass);
       } else {
-        closePanel(!!defaultProps.glass);
+        closePanel(!!glass);
       }
     }
-  }, [defaultProps.isOpen, closePanel, isOpen, openPanel, defaultProps.glass]);
+  }, [propIsOpen, closePanel, isOpen, openPanel, glass]);
 
   return {
     isOpen,

package/src/lib/composables/useHeroBackgroundSlider.ts

@@ -18,12 +18,12 @@ export interface UseHeroBackgroundSliderResult {
   /**
    * Array of refs for slide container elements
    */
-  slideRefs: React.RefObject<HTMLDivElement>[];
+  slideRefs: React.RefObject<HTMLDivElement | null>[];
 
   /**
    * Array of refs for video elements
    */
-  videoRefs: React.RefObject<HTMLVideoElement>[];
+  videoRefs: React.RefObject<HTMLVideoElement | null>[];
 
   /**
    * Handle slide transition to next index
@@ -55,18 +55,18 @@ export function useHeroBackgroundSlider(
   const [isTransitioning, setIsTransitioning] = useState(false);
   const autoplayRef = useRef<NodeJS.Timeout | null>(null);
   const isPausedRef = useRef(false);
-  const callbackRef = useRef<() => void>();
+  const callbackRef = useRef<() => void | undefined>(undefined);
 
   // Create refs for slide containers
   const slideRefs = useMemo(
     () => slides.map(() => React.createRef<HTMLDivElement>()),
-    [slides.length]
+    [slides]
   );
 
   // Create refs for video elements
   const videoRefs = useMemo(
     () => slides.map(() => React.createRef<HTMLVideoElement>()),
-    [slides.length]
+    [slides]
   );
 
   /**

package/src/lib/composables/usePhotoViewer.ts

@@ -305,7 +305,7 @@ export const usePhotoViewer = ({
         };
       });
     },
-    [isMounted, currentIndex, calculateBounds, constrainPosition]
+    [currentIndex, calculateBounds, constrainPosition]
   );
 
   const setImagePosition = useCallback(
@@ -366,7 +366,7 @@ export const usePhotoViewer = ({
         };
       });
     },
-    [isMounted, currentIndex, calculateBounds, constrainPosition]
+    [currentIndex, calculateBounds, constrainPosition]
   );
 
   // Handle mouse wheel for zooming with proper bounds
@@ -866,7 +866,6 @@ export const usePhotoViewer = ({
       });
     },
     [
-      isMounted,
       enableGestures,
       isDragging,
       startDragPosition,

package/src/lib/composables/usePieChart.ts

@@ -294,7 +294,7 @@ export function usePieChart(data: ChartDataPoint[], options: PieChartOptions = {
 
       return parts.join(' - ');
     },
-    [options.labelFormatter, options.showLabels, options.showPercentages, options.showValues]
+    [options]
   );
 
   // Get slice transform for hover effect