@shohojdhara/atomix 0.1.26 → 0.1.28

package/src/lib/composables/usePopover.ts

@@ -1,354 +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,74 +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,174 +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;