@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/lib/composables/usePopover.ts

@@ -1,348 +0,0 @@
-import { useState, useRef, useEffect, RefObject } from 'react';
-
-type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
-type PopoverTrigger = 'click' | 'hover';
-
-interface UsePopoverProps {
-  position?: PopoverPosition | 'auto';
-  trigger?: PopoverTrigger;
-  offset?: number;
-  delay?: number;
-  defaultOpen?: boolean;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-  closeOnClickOutside?: boolean;
-  closeOnEscape?: boolean;
-  id?: string;
-}
-
-interface UsePopoverResult {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  triggerRef: RefObject<HTMLElement>;
-  popoverRef: RefObject<HTMLDivElement>;
-  arrowRef: RefObject<HTMLDivElement>;
-  popoverId: string;
-  currentPosition: PopoverPosition;
-  updatePosition: () => void;
-}
-
-/**
- * Hook for managing popover state and positioning logic
- */
-export const usePopover = ({
-  position = 'top',
-  trigger = 'click',
-  offset = 12,
-  delay = 0,
-  defaultOpen = false,
-  isOpen: controlledIsOpen,
-  onOpenChange,
-  closeOnClickOutside = true,
-  closeOnEscape = true,
-  id,
-}: UsePopoverProps): UsePopoverResult => {
-  const [isOpen, setIsOpenState] = useState(defaultOpen);
-  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);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const popoverId = id || `popover-${Math.random().toString(36).slice(2, 11)}`;
-
-  // Use controlled state if provided
-  const isControlled = controlledIsOpen !== undefined;
-  const isOpenState = isControlled ? controlledIsOpen : isOpen;
-
-  // Define setIsOpen function before using it in useEffect
-  const setIsOpen = (newIsOpen: boolean) => {
-    if (!isControlled) {
-      setIsOpenState(newIsOpen);
-    }
-    if (onOpenChange) {
-      onOpenChange(newIsOpen);
-    }
-  };
-
-  // Handle hover events if trigger is hover
-  useEffect(() => {
-    if (trigger !== 'hover' || !triggerRef.current || !popoverRef.current) return undefined;
-
-    const handleTriggerMouseEnter = () => {
-      if (timeoutRef.current !== null) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-
-      if (delay > 0) {
-        timeoutRef.current = setTimeout(() => {
-          setIsOpen(true);
-        }, delay);
-      } else {
-        setIsOpen(true);
-      }
-    };
-
-    const handleTriggerMouseLeave = () => {
-      if (timeoutRef.current !== null) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-
-      timeoutRef.current = setTimeout(() => {
-        if (!popoverRef.current?.matches(':hover')) {
-          setIsOpen(false);
-        }
-      }, 100);
-    };
-
-    const handlePopoverMouseEnter = () => {
-      if (timeoutRef.current !== null) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-    };
-
-    const handlePopoverMouseLeave = () => {
-      setIsOpen(false);
-    };
-
-    // Add hover event listeners
-    triggerRef.current.addEventListener('mouseenter', handleTriggerMouseEnter);
-    triggerRef.current.addEventListener('mouseleave', handleTriggerMouseLeave);
-    popoverRef.current.addEventListener('mouseenter', handlePopoverMouseEnter);
-    popoverRef.current.addEventListener('mouseleave', handlePopoverMouseLeave);
-
-    return () => {
-      if (triggerRef.current) {
-        triggerRef.current.removeEventListener('mouseenter', handleTriggerMouseEnter);
-        triggerRef.current.removeEventListener('mouseleave', handleTriggerMouseLeave);
-      }
-      if (popoverRef.current) {
-        popoverRef.current.removeEventListener('mouseenter', handlePopoverMouseEnter);
-        popoverRef.current.removeEventListener('mouseleave', handlePopoverMouseLeave);
-      }
-      if (timeoutRef.current !== null) {
-        window.clearTimeout(timeoutRef.current);
-      }
-    };
-  }, [trigger, delay, isOpenState]);
-
-  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);
-    
-    // If this is a scroll update and trigger isn't near edges, skip repositioning
-    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;
-    
-    // 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 }
-      ];
-      
-      // 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)
-      );
-      
-      if (needsFlip) {
-        // Flip to the opposite side
-        const oppositePositions: Record<PopoverPosition | 'auto', PopoverPosition> = {
-          '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);
-        break;
-      case 'bottom':
-        top = triggerRect.bottom + offset;
-        left = triggerRect.left + (triggerRect.width / 2) - (popoverRect.width / 2);
-        break;
-      case 'left':
-        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);
-        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`;
-    popoverRef.current.style.left = `${absoluteLeft}px`;
-  };
-
-  // Position the popover
-  useEffect(() => {
-    if (!isOpenState || !triggerRef.current || !popoverRef.current) return undefined;
-    
-    // Initial positioning
-    updatePosition();
-    
-    // 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);
-      if (scrollTimeout) {
-        clearTimeout(scrollTimeout);
-      }
-      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.contains(event.target as Node) &&
-        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);
-    };
-  }, [isOpenState, closeOnEscape]);
-
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current !== null) {
-        window.clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  return {
-    isOpen: isOpenState,
-    setIsOpen,
-    triggerRef,
-    popoverRef,
-    arrowRef,
-    popoverId,
-    currentPosition,
-    updatePosition,
-  };
-};
-
-export default usePopover;

package/src/lib/composables/useProgress.ts

@@ -1,77 +0,0 @@
-import { ThemeColor } from '../types/components';
-
-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
-   */
-  className?: string;
-}
-
-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
-   */
-  progressClasses: string;
-}
-
-/**
- * Hook for managing Progress component state and behavior
- */
-export const useProgress = ({
-  value,
-  variant = 'primary',
-  size = 'md',
-  className = '',
-}: UseProgressProps): UseProgressReturn => {
-  // Clamp value between 0 and 100
-  const progressValue = Math.min(Math.max(value, 0), 100);
-
-  // Create CSS custom properties
-  const progressStyle = {
-    '--atomix-progress-percentage': `${progressValue}%`,
-  } as React.CSSProperties;
-
-  // Generate class names
-  const baseClass = 'c-progress';
-  const variantClass = variant ? `${baseClass}--${variant}` : '';
-  const sizeClass = size ? `${baseClass}--${size}` : '';
-  const customClass = className || '';
-  
-  const progressClasses = [
-    baseClass,
-    variantClass,
-    sizeClass,
-    customClass
-  ].filter(Boolean).join(' ');
-
-  return {
-    progressValue,
-    progressStyle,
-    progressClasses,
-  };
-};

package/src/lib/composables/useRadio.ts

@@ -1,47 +0,0 @@
-import { RadioProps } from '../types/components';
-import { RADIO } from '../constants/components';
-
-/**
- * Radio state and functionality
- * @param initialProps - Initial radio properties
- * @returns Radio state and methods
- */
-export function useRadio(initialProps?: Partial<RadioProps>) {
-  // Default radio properties
-  const defaultProps: Partial<RadioProps> = {
-    disabled: false,
-    invalid: false,
-    valid: false,
-    ...initialProps
-  };
-
-  /**
-   * Generate radio class based on properties
-   * @param props - Radio properties
-   * @returns Class string
-   */
-  const generateRadioClass = (props: Partial<RadioProps>): string => {
-    const {
-      disabled = defaultProps.disabled,
-      invalid = defaultProps.invalid,
-      valid = defaultProps.valid,
-      className = '',
-    } = props;
-
-    let validationClass = '';
-    if (invalid) {
-      validationClass = RADIO.CLASSES.INVALID;
-    } else if (valid) {
-      validationClass = RADIO.CLASSES.VALID;
-    }
-    
-    const disabledClass = disabled ? RADIO.CLASSES.DISABLED : '';
-    
-    return `${RADIO.CLASSES.BASE} ${validationClass} ${disabledClass} ${className}`.trim();
-  };
-
-  return {
-    defaultProps,
-    generateRadioClass,
-  };
-} 

package/src/lib/composables/useRating.ts

@@ -1,162 +0,0 @@
-import { useState, useCallback } from 'react';
-import type { RatingProps } from '../types/components';
-
-/**
- * Props for the useRating hook
- */
-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
-   */
-  isControlled: boolean;
-}
-
-/**
- * Hook for managing rating component state and interactions
- */
-export const useRating = ({
-  value = 0,
-  maxValue = 5,
-  allowHalf = false,
-  readOnly = false,
-  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]);
-  
-  // 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) {
-      if (!isControlled) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-    }
-  }, [currentValue, maxValue, allowHalf, readOnly, onChange, isControlled]);
-  
-  return {
-    currentValue,
-    hoverValue,
-    focusedIndex,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleClick,
-    handleKeyDown,
-    setFocused: setFocusedIndex,
-    setHoverValue,
-    isControlled
-  };
-};
-
-export default useRating;