@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/lib/composables/usePopover.ts

@@ -43,7 +43,9 @@ export const usePopover = ({
   id,
 }: UsePopoverProps): UsePopoverResult => {
   const [isOpen, setIsOpenState] = useState(defaultOpen);
-  const [currentPosition, setCurrentPosition] = useState<PopoverPosition>(position === 'auto' ? 'top' : position as PopoverPosition);
+  const [currentPosition, setCurrentPosition] = useState<PopoverPosition>(
+    position === 'auto' ? 'top' : (position as PopoverPosition)
+  );
   const triggerRef = useRef<HTMLElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
@@ -130,115 +132,119 @@ export const usePopover = ({
 
   const updatePosition = (event?: Event) => {
     if (!triggerRef.current || !popoverRef.current) return;
-    
+
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popoverRect = popoverRef.current.getBoundingClientRect();
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    
+
     // Check if the trigger is near viewport edges
-    const isNearViewportEdge = 
-      triggerRect.top < 50 || 
-      triggerRect.bottom > (viewportHeight - 50) ||
-      triggerRect.left < 50 || 
-      triggerRect.right > (viewportWidth - 50);
-    
+    const isNearViewportEdge =
+      triggerRect.top < 50 ||
+      triggerRect.bottom > viewportHeight - 50 ||
+      triggerRect.left < 50 ||
+      triggerRect.right > viewportWidth - 50;
+
     // If this is a scroll update and trigger isn't near edges, skip repositioning
-    if (
-      event?.type === 'scroll' && 
-      !isNearViewportEdge
-    ) {
+    if (event?.type === 'scroll' && !isNearViewportEdge) {
       return;
     }
-    
+
     // Calculate space available in each direction
     const spaceTop = triggerRect.top;
     const spaceBottom = viewportHeight - triggerRect.bottom;
     const spaceLeft = triggerRect.left;
     const spaceRight = viewportWidth - triggerRect.right;
-    
+
     // Determine best position based on available space
-    let bestPosition: PopoverPosition = position === 'auto' ? 'top' : position as PopoverPosition;
-    
+    let bestPosition: PopoverPosition = position === 'auto' ? 'top' : (position as PopoverPosition);
+
     // If specified position is 'auto', find the position with most space
     if (position === 'auto') {
       const spaces = [
         { position: 'top', space: spaceTop },
         { position: 'right', space: spaceRight },
         { position: 'bottom', space: spaceBottom },
-        { position: 'left', space: spaceLeft }
+        { position: 'left', space: spaceLeft },
       ];
-      
+
       // Sort by available space (descending)
       spaces.sort((a, b) => b.space - a.space);
-      
+
       // Select position with most space
       bestPosition = spaces[0].position as PopoverPosition;
     } else {
       // Check if the preferred position has enough space
-      const needsFlip = (
-        (position === 'top' && spaceTop < popoverRect.height + offset && spaceBottom >= popoverRect.height + offset) ||
-        (position === 'bottom' && spaceBottom < popoverRect.height + offset && spaceTop >= popoverRect.height + offset) ||
-        (position === 'left' && spaceLeft < popoverRect.width + offset && spaceRight >= popoverRect.width + offset) ||
-        (position === 'right' && spaceRight < popoverRect.width + offset && spaceLeft >= popoverRect.width + offset)
-      );
-      
+      const needsFlip =
+        (position === 'top' &&
+          spaceTop < popoverRect.height + offset &&
+          spaceBottom >= popoverRect.height + offset) ||
+        (position === 'bottom' &&
+          spaceBottom < popoverRect.height + offset &&
+          spaceTop >= popoverRect.height + offset) ||
+        (position === 'left' &&
+          spaceLeft < popoverRect.width + offset &&
+          spaceRight >= popoverRect.width + offset) ||
+        (position === 'right' &&
+          spaceRight < popoverRect.width + offset &&
+          spaceLeft >= popoverRect.width + offset);
+
       if (needsFlip) {
         // Flip to the opposite side
         const oppositePositions: Record<PopoverPosition | 'auto', PopoverPosition> = {
-          'top': 'bottom',
-          'bottom': 'top',
-          'left': 'right',
-          'right': 'left',
-          'auto': 'bottom'
+          top: 'bottom',
+          bottom: 'top',
+          left: 'right',
+          right: 'left',
+          auto: 'bottom',
         };
         bestPosition = oppositePositions[position as PopoverPosition | 'auto'];
       }
     }
-    
+
     setCurrentPosition(bestPosition);
-    
+
     // Calculate position based on the determined best position
     let top = 0;
     let left = 0;
-    
+
     // Calculate viewport-relative position
     switch (bestPosition) {
       case 'top':
         top = triggerRect.top - popoverRect.height - offset;
-        left = triggerRect.left + (triggerRect.width / 2) - (popoverRect.width / 2);
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
         break;
       case 'bottom':
         top = triggerRect.bottom + offset;
-        left = triggerRect.left + (triggerRect.width / 2) - (popoverRect.width / 2);
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
         break;
       case 'left':
-        top = triggerRect.top + (triggerRect.height / 2) - (popoverRect.height / 2);
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
         left = triggerRect.left - popoverRect.width - offset;
         break;
       case 'right':
-        top = triggerRect.top + (triggerRect.height / 2) - (popoverRect.height / 2);
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
         left = triggerRect.right + offset;
         break;
     }
-    
+
     // Constrain to viewport boundaries
     if (left < 0) {
       left = 5;
     } else if (left + popoverRect.width > viewportWidth) {
       left = viewportWidth - popoverRect.width - 5;
     }
-    
+
     if (top < 0) {
       top = 5;
     } else if (top + popoverRect.height > viewportHeight) {
       top = viewportHeight - popoverRect.height - 5;
     }
-    
+
     // Add scroll position to convert viewport coordinates to absolute position
     const absoluteTop = top + window.scrollY;
     const absoluteLeft = left + window.scrollX;
-    
+
     // Apply position using absolute positioning to follow when scrolling
     popoverRef.current.style.position = 'absolute';
     popoverRef.current.style.top = `${absoluteTop}px`;
@@ -248,33 +254,33 @@ export const usePopover = ({
   // Position the popover
   useEffect(() => {
     if (!isOpenState || !triggerRef.current || !popoverRef.current) return undefined;
-    
+
     // Initial positioning
     updatePosition();
-    
-    // Update position on resize 
+
+    // Update position on resize
     window.addEventListener('resize', updatePosition);
-    
+
     // Update position on scroll, but throttled for performance
     let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
     const handleScroll = (e: Event) => {
       if (scrollTimeout) {
         return;
       }
-      
+
       scrollTimeout = setTimeout(() => {
         updatePosition(e);
         scrollTimeout = null;
       }, 100);
     };
-    
+
     window.addEventListener('scroll', handleScroll, { passive: true });
-    
+
     // Update position less frequently to handle content changes
     const intervalId: ReturnType<typeof setInterval> = setInterval(() => {
       updatePosition();
     }, 500);
-    
+
     return () => {
       window.removeEventListener('resize', updatePosition);
       window.removeEventListener('scroll', handleScroll);
@@ -284,41 +290,41 @@ export const usePopover = ({
       clearInterval(intervalId);
     };
   }, [isOpenState, position, offset]);
-  
+
   // Handle click outside to close popover
   useEffect(() => {
     if (!isOpenState || !closeOnClickOutside) return undefined;
-    
+
     const handleClickOutside = (event: MouseEvent) => {
       if (
-        popoverRef.current && 
+        popoverRef.current &&
         !popoverRef.current.contains(event.target as Node) &&
-        triggerRef.current && 
+        triggerRef.current &&
         !triggerRef.current.contains(event.target as Node)
       ) {
         setIsOpen(false);
       }
     };
-    
+
     document.addEventListener('mousedown', handleClickOutside);
-    
+
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [isOpenState, closeOnClickOutside]);
-  
+
   // Handle escape key to close popover
   useEffect(() => {
     if (!isOpenState || !closeOnEscape) return undefined;
-    
+
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         setIsOpen(false);
       }
     };
-    
+
     document.addEventListener('keydown', handleEscapeKey);
-    
+
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
     };
@@ -345,4 +351,4 @@ export const usePopover = ({
   };
 };
 
-export default usePopover;
+export default usePopover;

package/src/lib/composables/useProgress.ts

@@ -5,17 +5,17 @@ interface UseProgressProps {
    * Progress value from 0 to 100
    */
   value: number;
-  
+
   /**
    * Optional color variant
    */
   variant?: ThemeColor;
-  
+
   /**
    * Optional size
    */
   size?: 'sm' | 'md' | 'lg';
-  
+
   /**
    * Optional className for custom styling
    */
@@ -27,12 +27,12 @@ interface UseProgressReturn {
    * Computed progress value clamped between 0 and 100
    */
   progressValue: number;
-  
+
   /**
    * CSS properties for the progress component
    */
   progressStyle: React.CSSProperties;
-  
+
   /**
    * CSS classes for the progress component
    */
@@ -61,13 +61,10 @@ export const useProgress = ({
   const variantClass = variant ? `${baseClass}--${variant}` : '';
   const sizeClass = size ? `${baseClass}--${size}` : '';
   const customClass = className || '';
-  
-  const progressClasses = [
-    baseClass,
-    variantClass,
-    sizeClass,
-    customClass
-  ].filter(Boolean).join(' ');
+
+  const progressClasses = [baseClass, variantClass, sizeClass, customClass]
+    .filter(Boolean)
+    .join(' ');
 
   return {
     progressValue,

package/src/lib/composables/useRadio.ts

@@ -12,7 +12,7 @@ export function useRadio(initialProps?: Partial<RadioProps>) {
     disabled: false,
     invalid: false,
     valid: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -34,9 +34,9 @@ export function useRadio(initialProps?: Partial<RadioProps>) {
     } else if (valid) {
       validationClass = RADIO.CLASSES.VALID;
     }
-    
+
     const disabledClass = disabled ? RADIO.CLASSES.DISABLED : '';
-    
+
     return `${RADIO.CLASSES.BASE} ${validationClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -44,4 +44,4 @@ export function useRadio(initialProps?: Partial<RadioProps>) {
     defaultProps,
     generateRadioClass,
   };
-} 
+}

package/src/lib/composables/useRating.ts

@@ -4,54 +4,57 @@ import type { RatingProps } from '../types/components';
 /**
  * Props for the useRating hook
  */
-export type UseRatingProps = Pick<RatingProps, 'value' | 'maxValue' | 'allowHalf' | 'readOnly' | 'onChange'>;
+export type UseRatingProps = Pick<
+  RatingProps,
+  'value' | 'maxValue' | 'allowHalf' | 'readOnly' | 'onChange'
+>;
 
 export interface UseRatingReturn {
   /**
    * Current rating value (controlled or uncontrolled)
    */
   currentValue: number;
-  
+
   /**
    * Value being hovered over
    */
   hoverValue: number | null;
-  
+
   /**
    * Currently focused star index
    */
   focusedIndex: number | null;
-  
+
   /**
    * Handle mouse enter on a star
    */
   handleMouseEnter: (starValue: number) => void;
-  
+
   /**
    * Handle mouse leave from rating component
    */
   handleMouseLeave: () => void;
-  
+
   /**
    * Handle click on a star
    */
   handleClick: (newValue: number) => void;
-  
+
   /**
    * Handle keyboard navigation
    */
   handleKeyDown: (e: React.KeyboardEvent, index: number) => void;
-  
+
   /**
    * Set focus on a specific star
    */
   setFocused: (index: number | null) => void;
-  
+
   /**
    * Set hover value directly
    */
   setHoverValue: (value: number | null) => void;
-  
+
   /**
    * Whether the component is in controlled mode
    */
@@ -66,85 +69,94 @@ export const useRating = ({
   maxValue = 5,
   allowHalf = false,
   readOnly = false,
-  onChange
+  onChange,
 }: UseRatingProps): UseRatingReturn => {
   // Determine if component is in controlled mode
   const isControlled = typeof onChange !== 'undefined';
-  
+
   // Internal state for uncontrolled mode
   const [internalValue, setInternalValue] = useState<number>(value);
   const [hoverValue, setHoverValue] = useState<number | null>(null);
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
-  
+
   // Use controlled or uncontrolled value
   const currentValue = isControlled ? value : internalValue;
-  
+
   // Handle mouse enter on star
-  const handleMouseEnter = useCallback((starValue: number) => {
-    if (readOnly) return;
-    setHoverValue(starValue);
-  }, [readOnly]);
-  
+  const handleMouseEnter = useCallback(
+    (starValue: number) => {
+      if (readOnly) return;
+      setHoverValue(starValue);
+    },
+    [readOnly]
+  );
+
   // Handle mouse leave from rating component
   const handleMouseLeave = useCallback(() => {
     if (readOnly) return;
     setHoverValue(null);
   }, [readOnly]);
-  
+
   // Handle click on star
-  const handleClick = useCallback((newValue: number) => {
-    if (readOnly) return;
-    
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-    
-    onChange?.(newValue);
-  }, [readOnly, onChange, isControlled]);
-  
-  // Handle keyboard navigation
-  const handleKeyDown = useCallback((e: React.KeyboardEvent, index: number) => {
-    if (readOnly) return;
-    
-    const step = allowHalf ? 0.5 : 1;
-    let newValue = currentValue;
-    
-    switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowUp':
-        newValue = Math.min(maxValue, currentValue + step);
-        e.preventDefault();
-        break;
-      case 'ArrowLeft':
-      case 'ArrowDown':
-        newValue = Math.max(0, currentValue - step);
-        e.preventDefault();
-        break;
-      case 'Home':
-        newValue = 0;
-        e.preventDefault();
-        break;
-      case 'End':
-        newValue = maxValue;
-        e.preventDefault();
-        break;
-      case ' ':
-      case 'Enter':
-        newValue = index;
-        e.preventDefault();
-        break;
-      default:
-        return;
-    }
-    
-    if (newValue !== currentValue) {
+  const handleClick = useCallback(
+    (newValue: number) => {
+      if (readOnly) return;
+
       if (!isControlled) {
         setInternalValue(newValue);
       }
+
       onChange?.(newValue);
-    }
-  }, [currentValue, maxValue, allowHalf, readOnly, onChange, isControlled]);
-  
+    },
+    [readOnly, onChange, isControlled]
+  );
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent, index: number) => {
+      if (readOnly) return;
+
+      const step = allowHalf ? 0.5 : 1;
+      let newValue = currentValue;
+
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          newValue = Math.min(maxValue, currentValue + step);
+          e.preventDefault();
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          newValue = Math.max(0, currentValue - step);
+          e.preventDefault();
+          break;
+        case 'Home':
+          newValue = 0;
+          e.preventDefault();
+          break;
+        case 'End':
+          newValue = maxValue;
+          e.preventDefault();
+          break;
+        case ' ':
+        case 'Enter':
+          newValue = index;
+          e.preventDefault();
+          break;
+        default:
+          return;
+      }
+
+      if (newValue !== currentValue) {
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+      }
+    },
+    [currentValue, maxValue, allowHalf, readOnly, onChange, isControlled]
+  );
+
   return {
     currentValue,
     hoverValue,
@@ -155,7 +167,7 @@ export const useRating = ({
     handleKeyDown,
     setFocused: setFocusedIndex,
     setHoverValue,
-    isControlled
+    isControlled,
   };
 };