@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/lib/composables/useDropdown.ts

@@ -36,7 +36,7 @@ export const useDropdown = ({
   onOpenChange,
   closeOnClickOutside = true,
   closeOnEscape = true,
-  id
+  id,
 }: UseDropdownProps): UseDropdownReturn => {
   // Generate unique ID for the dropdown menu
   const uniqueId = useRef(`dropdown-${id || Math.random().toString(36).substring(2, 9)}`);
@@ -48,15 +48,18 @@ export const useDropdown = ({
   const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : uncontrolledIsOpen;
 
   // Callback to update open state with notification to parent
-  const setIsOpen = useCallback((nextIsOpen: boolean) => {
-    if (controlledIsOpen === undefined) {
-      setUncontrolledIsOpen(nextIsOpen);
-    }
+  const setIsOpen = useCallback(
+    (nextIsOpen: boolean) => {
+      if (controlledIsOpen === undefined) {
+        setUncontrolledIsOpen(nextIsOpen);
+      }
 
-    if (onOpenChange) {
-      onOpenChange(nextIsOpen);
-    }
-  }, [controlledIsOpen, onOpenChange]);
+      if (onOpenChange) {
+        onOpenChange(nextIsOpen);
+      }
+    },
+    [controlledIsOpen, onOpenChange]
+  );
 
   // Refs for trigger and dropdown menu elements
   const triggerRef = useRef<HTMLElement>(null);
@@ -105,78 +108,90 @@ export const useDropdown = ({
   }, [isOpen, closeOnEscape, setIsOpen]);
 
   // Helper function to get the flipped placement if needed
-  const getFlippedPlacement = useCallback((
-    placement: DropdownPlacement, 
-    triggerRect: DOMRect, 
-    menuRect: DOMRect, 
-    offset: number
-  ): DropdownPlacement => {
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    // Start with the requested placement
-    let newPlacement = placement;
-
-    // Flip vertical placement if needed
-    if (placement.startsWith('bottom') && triggerRect.bottom + menuRect.height + offset > viewportHeight) {
-      newPlacement = placement.replace('bottom', 'top') as DropdownPlacement;
-    } else if (placement.startsWith('top') && triggerRect.top - menuRect.height - offset < 0) {
-      newPlacement = placement.replace('top', 'bottom') as DropdownPlacement;
-    }
+  const getFlippedPlacement = useCallback(
+    (
+      placement: DropdownPlacement,
+      triggerRect: DOMRect,
+      menuRect: DOMRect,
+      offset: number
+    ): DropdownPlacement => {
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Start with the requested placement
+      let newPlacement = placement;
+
+      // Flip vertical placement if needed
+      if (
+        placement.startsWith('bottom') &&
+        triggerRect.bottom + menuRect.height + offset > viewportHeight
+      ) {
+        newPlacement = placement.replace('bottom', 'top') as DropdownPlacement;
+      } else if (placement.startsWith('top') && triggerRect.top - menuRect.height - offset < 0) {
+        newPlacement = placement.replace('top', 'bottom') as DropdownPlacement;
+      }
 
-    // Flip horizontal placement if needed
-    if (placement.startsWith('left') && triggerRect.left - menuRect.width - offset < 0) {
-      newPlacement = placement.replace('left', 'right') as DropdownPlacement;
-    } else if (placement.startsWith('right') && triggerRect.right + menuRect.width + offset > viewportWidth) {
-      newPlacement = placement.replace('right', 'left') as DropdownPlacement;
-    }
+      // Flip horizontal placement if needed
+      if (placement.startsWith('left') && triggerRect.left - menuRect.width - offset < 0) {
+        newPlacement = placement.replace('left', 'right') as DropdownPlacement;
+      } else if (
+        placement.startsWith('right') &&
+        triggerRect.right + menuRect.width + offset > viewportWidth
+      ) {
+        newPlacement = placement.replace('right', 'left') as DropdownPlacement;
+      }
 
-    // Adjust alignment for top/bottom placements
-    if ((newPlacement.startsWith('top') || newPlacement.startsWith('bottom'))) {
-      if (newPlacement.endsWith('start') && triggerRect.left + menuRect.width > viewportWidth) {
-        newPlacement = newPlacement.replace('start', 'end') as DropdownPlacement;
-      } else if (newPlacement.endsWith('end') && triggerRect.right - menuRect.width < 0) {
-        newPlacement = newPlacement.replace('end', 'start') as DropdownPlacement;
+      // Adjust alignment for top/bottom placements
+      if (newPlacement.startsWith('top') || newPlacement.startsWith('bottom')) {
+        if (newPlacement.endsWith('start') && triggerRect.left + menuRect.width > viewportWidth) {
+          newPlacement = newPlacement.replace('start', 'end') as DropdownPlacement;
+        } else if (newPlacement.endsWith('end') && triggerRect.right - menuRect.width < 0) {
+          newPlacement = newPlacement.replace('end', 'start') as DropdownPlacement;
+        }
       }
-    }
 
-    return newPlacement;
-  }, []);
+      return newPlacement;
+    },
+    []
+  );
 
   // Helper function to calculate position based on placement
-  const calculatePosition = useCallback((
-    placement: DropdownPlacement, 
-    triggerRect: DOMRect, 
-    menuRect: DOMRect, 
-    offset: number
-  ): { top: number; left: number } => {
-    let top = 0;
-    let left = 0;
-
-    // Vertical positioning
-    if (placement.startsWith('bottom')) {
-      top = triggerRect.height + offset;
-    } else if (placement.startsWith('top')) {
-      top = -menuRect.height - offset;
-    } else if (placement.startsWith('left') || placement.startsWith('right')) {
-      top = (triggerRect.height / 2) - (menuRect.height / 2);
-    }
+  const calculatePosition = useCallback(
+    (
+      placement: DropdownPlacement,
+      triggerRect: DOMRect,
+      menuRect: DOMRect,
+      offset: number
+    ): { top: number; left: number } => {
+      let top = 0;
+      let left = 0;
+
+      // Vertical positioning
+      if (placement.startsWith('bottom')) {
+        top = triggerRect.height + offset;
+      } else if (placement.startsWith('top')) {
+        top = -menuRect.height - offset;
+      } else if (placement.startsWith('left') || placement.startsWith('right')) {
+        top = triggerRect.height / 2 - menuRect.height / 2;
+      }
 
-    // Horizontal positioning
-    if (placement.startsWith('left')) {
-      left = -menuRect.width - offset;
-    } else if (placement.startsWith('right')) {
-      left = triggerRect.width + offset;
-    } else if (placement.endsWith('start')) {
-      left = 0;
-    } else if (placement.endsWith('end')) {
-      left = triggerRect.width - menuRect.width;
-    } else {
-      left = (triggerRect.width / 2) - (menuRect.width / 2);
-    }
+      // Horizontal positioning
+      if (placement.startsWith('left')) {
+        left = -menuRect.width - offset;
+      } else if (placement.startsWith('right')) {
+        left = triggerRect.width + offset;
+      } else if (placement.endsWith('start')) {
+        left = 0;
+      } else if (placement.endsWith('end')) {
+        left = triggerRect.width - menuRect.width;
+      } else {
+        left = triggerRect.width / 2 - menuRect.width / 2;
+      }
 
-    return { top, left };
-  }, []);
+      return { top, left };
+    },
+    []
+  );
 
   // Calculate and update dropdown position
   const updatePosition = useCallback(() => {
@@ -252,6 +267,6 @@ export const useDropdown = ({
     menuRef,
     dropdownId: uniqueId.current,
     currentPlacement,
-    updatePosition
+    updatePosition,
   };
-}; 
+};

package/src/lib/composables/useEdgePanel.ts

@@ -16,7 +16,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
     backdrop: true,
     closeOnBackdropClick: true,
     closeOnEscape: true,
-    ...initialProps
+    ...initialProps,
   };
 
   const [isOpen, setIsOpen] = useState(defaultProps.isOpen || false);
@@ -29,29 +29,26 @@ 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 = defaultProps.position, className = '', isOpen: propIsOpen } = props;
 
     const baseClass = EDGE_PANEL.CLASSES.BASE;
     const positionClass = position ? `${baseClass}--${position}` : '';
     const openClass = (propIsOpen ?? isOpen) ? EDGE_PANEL.CLASSES.IS_OPEN : '';
-    
+
     return `${baseClass} ${positionClass} ${openClass} ${className}`.trim();
   };
-  
+
   /**
    * Adjust body padding in push mode
    */
   const adjustBodyPadding = useCallback(() => {
     if (!containerRef.current || defaultProps.mode !== 'push') return;
-    
+
     const { position } = defaultProps;
-    const size = position === 'top' || position === 'bottom'
-      ? containerRef.current.clientHeight
-      : containerRef.current.clientWidth;
+    const size =
+      position === 'top' || position === 'bottom'
+        ? containerRef.current.clientHeight
+        : containerRef.current.clientWidth;
 
     // Map position to CSS padding property
     let paddingProperty: string;
@@ -66,19 +63,19 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
         // For top/bottom, capitalize first letter
         paddingProperty = `padding${position!.charAt(0).toUpperCase() + position!.slice(1)}`;
     }
-    
+
     document.body.style[paddingProperty as any] = `${size}px`;
     document.body.classList.add('is-pushed');
   }, [defaultProps.mode, defaultProps.position]);
-  
+
   /**
    * Reset body padding
    */
   const resetBodyPadding = useCallback(() => {
     if (defaultProps.mode !== 'push') return;
-    
+
     const { position } = defaultProps;
-    
+
     // Map position to CSS padding property
     let paddingProperty: string;
     switch (position) {
@@ -92,7 +89,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
         // For top/bottom, capitalize first letter
         paddingProperty = `padding${position!.charAt(0).toUpperCase() + position!.slice(1)}`;
     }
-    
+
     document.body.style[paddingProperty as any] = '';
     document.body.classList.remove('is-pushed');
   }, [defaultProps.mode, defaultProps.position]);
@@ -103,18 +100,18 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   const openPanel = useCallback(() => {
     setIsOpen(true);
     document.body.classList.add('is-edgepanel-open');
-    
+
     if (containerRef.current) {
       const { mode } = defaultProps;
-      
+
       // Only add animation if not in 'none' mode
       if (mode !== 'none') {
         // Add animation class first
         containerRef.current.classList.add('is-animating');
-        
+
         // Force a reflow before starting the animation
         void containerRef.current.offsetHeight;
-        
+
         // Remove animation class after animation completes
         const container = containerRef.current;
         setTimeout(() => {
@@ -123,16 +120,16 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
           }
         }, EDGE_PANEL.ANIMATION_DURATION);
       }
-      
+
       // Then set transform
       containerRef.current.style.transform = 'translate(0)';
-      
+
       // If push mode, adjust body padding
       if (defaultProps.mode === 'push') {
         adjustBodyPadding();
       }
     }
-    
+
     if (defaultProps.onOpenChange) {
       defaultProps.onOpenChange(true);
     }
@@ -144,37 +141,37 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   const closePanel = useCallback(() => {
     if (containerRef.current) {
       const { position, mode } = defaultProps;
-      
+
       // Only add animation if not in 'none' mode
       if (mode !== 'none') {
         // Add animation class first
         containerRef.current.classList.add('is-animating-out');
-        
+
         // Capture container for setTimeout
         const container = containerRef.current;
-        
+
         setTimeout(() => {
           if (container) {
             container.classList.remove('is-animating-out');
           }
         }, EDGE_PANEL.ANIMATION_DURATION);
       }
-      
+
       // Then set transform
       containerRef.current.style.transform = position ? EDGE_PANEL.TRANSFORM_VALUES[position] : '';
-      
+
       // Reset body padding if push mode
       if (defaultProps.mode === 'push') {
         resetBodyPadding();
       }
-      
+
       // Wait for animation to complete before hiding
       const hideDelay = mode === 'none' ? 0 : EDGE_PANEL.ANIMATION_DURATION;
-      
+
       setTimeout(() => {
         setIsOpen(false);
         document.body.classList.remove('is-edgepanel-open');
-        
+
         if (defaultProps.onOpenChange) {
           defaultProps.onOpenChange(false);
         }
@@ -182,7 +179,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
     } else {
       setIsOpen(false);
       document.body.classList.remove('is-edgepanel-open');
-      
+
       if (defaultProps.onOpenChange) {
         defaultProps.onOpenChange(false);
       }
@@ -192,20 +189,26 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   /**
    * Handle Escape key press
    */
-  const handleEscapeKey = useCallback((event: KeyboardEvent) => {
-    if (defaultProps.closeOnEscape && event.key === 'Escape' && isOpen) {
-      closePanel();
-    }
-  }, [closePanel, defaultProps.closeOnEscape, isOpen]);
+  const handleEscapeKey = useCallback(
+    (event: KeyboardEvent) => {
+      if (defaultProps.closeOnEscape && event.key === 'Escape' && isOpen) {
+        closePanel();
+      }
+    },
+    [closePanel, defaultProps.closeOnEscape, isOpen]
+  );
 
   /**
    * Handle backdrop click
    */
-  const handleBackdropClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
-    if (defaultProps.closeOnBackdropClick && event.target === event.currentTarget) {
-      closePanel();
-    }
-  }, [closePanel, defaultProps.closeOnBackdropClick]);
+  const handleBackdropClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (defaultProps.closeOnBackdropClick && event.target === event.currentTarget) {
+        closePanel();
+      }
+    },
+    [closePanel, defaultProps.closeOnBackdropClick]
+  );
 
   /**
    * Set up event listeners for keyboard events
@@ -214,7 +217,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
     if (isOpen && defaultProps.closeOnEscape) {
       document.addEventListener('keydown', handleEscapeKey);
     }
-    
+
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
     };
@@ -226,7 +229,7 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   useEffect(() => {
     if (containerRef.current) {
       const { position, mode } = defaultProps;
-      
+
       if (!isOpen && (mode === 'slide' || mode === 'push') && position) {
         containerRef.current.style.transform = EDGE_PANEL.TRANSFORM_VALUES[position];
       }
@@ -253,6 +256,6 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
     generateEdgePanelClass,
     openPanel,
     closePanel,
-    handleBackdropClick
+    handleBackdropClick,
   };
-} 
+}

package/src/lib/composables/useForm.ts

@@ -10,7 +10,7 @@ export function useForm(initialProps?: Partial<FormProps>) {
   // Default form properties
   const defaultProps: Partial<FormProps> = {
     disabled: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -19,13 +19,10 @@ export function useForm(initialProps?: Partial<FormProps>) {
    * @returns Class string
    */
   const generateFormClass = (props: Partial<FormProps>): string => {
-    const {
-      disabled = defaultProps.disabled,
-      className = '',
-    } = props;
+    const { disabled = defaultProps.disabled, className = '' } = props;
 
     const disabledClass = disabled ? FORM.CLASSES.DISABLED : '';
-    
+
     return `${FORM.CLASSES.BASE} ${disabledClass} ${className}`.trim();
   };
 
@@ -62,4 +59,4 @@ export function useForm(initialProps?: Partial<FormProps>) {
     handleSubmit,
     handleReset,
   };
-} 
+}

package/src/lib/composables/useFormGroup.ts

@@ -13,7 +13,7 @@ export function useFormGroup(initialProps?: Partial<FormGroupProps>) {
     disabled: false,
     invalid: false,
     valid: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -30,18 +30,17 @@ export function useFormGroup(initialProps?: Partial<FormGroupProps>) {
       className = '',
     } = props;
 
-    const sizeClass = size === 'md' ? '' : (
-      size === 'sm' ? FORM_GROUP.CLASSES.SMALL : FORM_GROUP.CLASSES.LARGE
-    );
-    
-    const validationClass = invalid 
-      ? FORM_GROUP.CLASSES.INVALID 
-      : valid 
-        ? FORM_GROUP.CLASSES.VALID 
+    const sizeClass =
+      size === 'md' ? '' : size === 'sm' ? FORM_GROUP.CLASSES.SMALL : FORM_GROUP.CLASSES.LARGE;
+
+    const validationClass = invalid
+      ? FORM_GROUP.CLASSES.INVALID
+      : valid
+        ? FORM_GROUP.CLASSES.VALID
         : '';
-    
+
     const disabledClass = disabled ? FORM_GROUP.CLASSES.DISABLED : '';
-    
+
     return `${FORM_GROUP.CLASSES.BASE} ${sizeClass} ${validationClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -49,4 +48,4 @@ export function useFormGroup(initialProps?: Partial<FormGroupProps>) {
     defaultProps,
     generateFormGroupClass,
   };
-} 
+}