@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/lib/composables/useHero.ts

@@ -10,47 +10,47 @@ interface UseHeroResult {
    * Generate hero class names based on props
    */
   generateHeroClassNames: (baseClassName?: string) => string;
-  
+
   /**
    * Generate image column class based on size
    */
   generateImageColClass: (size?: number) => string;
-  
+
   /**
    * Generate content column class based on size
    */
   generateContentColClass: (size?: number) => string;
-  
+
   /**
    * Determine if the hero has a background image
    */
   hasBackgroundImage: boolean;
-  
+
   /**
    * Determine if the hero has a foreground image
    */
   hasForegroundImage: boolean;
-  
+
   /**
    * Determine if content should be displayed in a grid
    */
   useGridLayout: boolean;
-  
+
   /**
    * Reference to the hero element
    */
   heroRef: React.RefObject<HTMLDivElement>;
-  
+
   /**
    * Reference to the video element
    */
   videoRef: React.RefObject<HTMLVideoElement>;
-  
+
   /**
    * Apply parallax effect
    */
   applyParallaxEffect: (element: HTMLElement, intensity: number) => void;
-  
+
   /**
    * Remove parallax effect
    */
@@ -66,7 +66,7 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
   const heroRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
   const parallaxHandlerRef = useRef<((event: Event) => void) | null>(null);
-  
+
   const defaultProps: Partial<HeroProps> = {
     alignment: 'left',
     imageColSize: 7,
@@ -77,88 +77,88 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
     contentWidth: undefined,
     parallax: false,
     parallaxIntensity: 0.5,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
    * Check if the hero has a background image
    */
   const hasBackgroundImage = !!defaultProps.backgroundImageSrc;
-  
+
   /**
    * Check if the hero has a foreground image
    */
   const hasForegroundImage = !!defaultProps.imageSrc;
-  
+
   /**
    * Check if content should be displayed in a grid
    */
   const useGridLayout = hasForegroundImage && defaultProps.alignment !== 'center';
-  
+
   /**
    * Apply parallax effect to hero background
    */
   const applyParallaxEffect = (element: HTMLElement, intensity: number = 0.5): void => {
     if (!element) return;
-    
+
     // Ensure intensity is between 0 and 1
     const safeIntensity = Math.max(0, Math.min(1, intensity));
-    
+
     // Add parallax class
     element.classList.add('c-hero--parallax');
-    
+
     // Handle scroll event
     const handleScroll = (): void => {
       const scrollPosition = window.pageYOffset;
       const offset = scrollPosition * safeIntensity;
-      
+
       // Apply transform to background
       const bgElement = element.querySelector(HERO.SELECTORS.BG);
       if (bgElement) {
         (bgElement as HTMLElement).style.transform = `translateY(${offset}px)`;
       }
     };
-    
+
     // Store the handler for cleanup
     parallaxHandlerRef.current = handleScroll;
-    
+
     // Add event listener
     window.addEventListener('scroll', handleScroll);
-    
+
     // Initial call
     handleScroll();
   };
-  
+
   /**
    * Remove parallax effect from hero
    */
   const removeParallaxEffect = (element: HTMLElement): void => {
     if (!element) return;
-    
+
     // Remove class
     element.classList.remove('c-hero--parallax');
-    
+
     // Remove transform
     const bgElement = element.querySelector(HERO.SELECTORS.BG);
     if (bgElement) {
       (bgElement as HTMLElement).style.transform = '';
     }
-    
+
     // Remove event listener
     if (parallaxHandlerRef.current) {
       window.removeEventListener('scroll', parallaxHandlerRef.current);
       parallaxHandlerRef.current = null;
     }
   };
-  
+
   // Apply parallax effect if enabled
   useEffect(() => {
     const heroElement = heroRef.current;
-    
+
     if (heroElement && defaultProps.parallax && hasBackgroundImage) {
       applyParallaxEffect(heroElement, defaultProps.parallaxIntensity);
     }
-    
+
     return () => {
       if (heroElement && parallaxHandlerRef.current) {
         removeParallaxEffect(heroElement);
@@ -172,9 +172,7 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
    * @returns Combined class names string
    */
   const generateHeroClassNames = (baseClassName: string = ''): string => {
-    const classes = [
-      HERO.SELECTORS.HERO.replace('.', '')
-    ];
+    const classes = [HERO.SELECTORS.HERO.replace('.', '')];
 
     // Add alignment class
     if (defaultProps.alignment === 'center') {
@@ -184,17 +182,17 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
     } else if (defaultProps.alignment === 'left') {
       classes.push(HERO.CLASSES.LEFT);
     }
-    
+
     // Add full viewport height class if needed
     if (defaultProps.fullViewportHeight) {
       classes.push(HERO.CLASSES.FULL_VH);
     }
-    
+
     // Add parallax class if enabled
     if (defaultProps.parallax) {
       classes.push('c-hero--parallax');
     }
-    
+
     // Add video background class if provided
     if (defaultProps.videoBackground) {
       classes.push('c-hero--video');
@@ -219,12 +217,12 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
    */
   const generateImageColClass = (size: number = defaultProps.imageColSize || 7): string => {
     const classes = [`o-grid__col o-grid__col--md-${size}`];
-    
+
     // Add responsive margin if needed for mobile view
     if (defaultProps.alignment === 'left') {
       classes.push('u-mt-5 u-mt-md-0');
     }
-    
+
     return classes.join(' ');
   };
 
@@ -247,6 +245,6 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
     heroRef,
     videoRef,
     applyParallaxEffect,
-    removeParallaxEffect
+    removeParallaxEffect,
   };
-} 
+}

package/src/lib/composables/useInput.ts

@@ -13,7 +13,7 @@ export function useInput(initialProps?: Partial<InputProps>) {
     disabled: false,
     invalid: false,
     valid: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -32,23 +32,22 @@ export function useInput(initialProps?: Partial<InputProps>) {
       type,
     } = props;
 
-    const sizeClass = size === 'md' ? '' : (
-      size === 'sm' ? INPUT.CLASSES.SMALL : INPUT.CLASSES.LARGE
-    );
-    
+    const sizeClass =
+      size === 'md' ? '' : size === 'sm' ? INPUT.CLASSES.SMALL : INPUT.CLASSES.LARGE;
+
     const variantClass = variant ? `c-input--${variant}` : '';
-    
+
     const textareaClass = type === 'textarea' ? 'c-input--textarea' : '';
-    
+
     let validationClass = '';
     if (invalid) {
       validationClass = INPUT.CLASSES.INVALID;
     } else if (valid) {
       validationClass = INPUT.CLASSES.VALID;
     }
-    
+
     const disabledClass = disabled ? INPUT.CLASSES.DISABLED : '';
-    
+
     return `${INPUT.CLASSES.BASE} ${sizeClass} ${variantClass} ${textareaClass} ${validationClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -56,4 +55,4 @@ export function useInput(initialProps?: Partial<InputProps>) {
     defaultProps,
     generateInputClass,
   };
-} 
+}

package/src/lib/composables/useMessages.ts

@@ -6,7 +6,7 @@ interface UseMessagesProps {
    * Initial messages
    */
   initialMessages?: MessageItem[];
-  
+
   /**
    * Callback when a message is sent
    */
@@ -18,22 +18,22 @@ interface UseMessagesReturn {
    * Current input value
    */
   inputValue: string;
-  
+
   /**
    * Set input value
    */
   setInputValue: (value: string) => void;
-  
+
   /**
    * Handle input change
    */
   handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  
+
   /**
    * Handle form submission
    */
   handleSubmit: (e: React.FormEvent) => void;
-  
+
   /**
    * Handle key down events
    */
@@ -43,15 +43,13 @@ interface UseMessagesReturn {
 /**
  * Hook for managing Messages component state and behavior
  */
-export const useMessages = ({
-  onSendMessage
-}: UseMessagesProps = {}): UseMessagesReturn => {
+export const useMessages = ({ onSendMessage }: UseMessagesProps = {}): UseMessagesReturn => {
   const [inputValue, setInputValue] = useState('');
-  
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
-  
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (inputValue.trim() && onSendMessage) {
@@ -59,21 +57,21 @@ export const useMessages = ({
       setInputValue('');
     }
   };
-  
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSubmit(e);
     }
   };
-  
+
   return {
     inputValue,
     setInputValue,
     handleInputChange,
     handleSubmit,
-    handleKeyDown
+    handleKeyDown,
   };
 };
 
-export default useMessages; 
+export default useMessages;

package/src/lib/composables/useModal.ts

@@ -5,17 +5,17 @@ export interface UseModalProps {
    * Whether the modal is open
    */
   isOpen?: boolean;
-  
+
   /**
    * Callback when modal state changes
    */
   onOpenChange?: (isOpen: boolean) => void;
-  
+
   /**
    * Callback when modal opens
    */
   onOpen?: () => void;
-  
+
   /**
    * Callback when modal closes
    */
@@ -27,17 +27,17 @@ export interface UseModalReturn {
    * Current open state
    */
   isOpen: boolean;
-  
+
   /**
    * Function to open the modal
    */
   open: () => void;
-  
+
   /**
    * Function to close the modal
    */
   close: () => void;
-  
+
   /**
    * Function to toggle the modal
    */
@@ -51,57 +51,60 @@ export function useModal({
   isOpen: isOpenProp,
   onOpenChange,
   onOpen,
-  onClose
+  onClose,
 }: UseModalProps = {}): UseModalReturn {
   // For uncontrolled usage
   const [isOpenState, setIsOpenState] = useState(false);
-  
+
   // Determine if we're in controlled or uncontrolled mode
   const isControlled = isOpenProp !== undefined;
   const isOpen = isControlled ? !!isOpenProp : isOpenState;
-  
+
   // Update internal state when prop changes (for controlled mode)
   useEffect(() => {
     if (isControlled) {
       setIsOpenState(!!isOpenProp);
     }
   }, [isOpenProp, isControlled]);
-  
-  const updateOpen = useCallback((nextIsOpen: boolean) => {
-    // For uncontrolled mode, update internal state
-    if (!isControlled) {
-      setIsOpenState(nextIsOpen);
-    }
-    
-    // Call the change handler in either mode
-    if (onOpenChange) {
-      onOpenChange(nextIsOpen);
-    }
-    
-    // Call the specific handler
-    if (nextIsOpen && onOpen) {
-      onOpen();
-    } else if (!nextIsOpen && onClose) {
-      onClose();
-    }
-  }, [isControlled, onOpenChange, onOpen, onClose]);
-  
+
+  const updateOpen = useCallback(
+    (nextIsOpen: boolean) => {
+      // For uncontrolled mode, update internal state
+      if (!isControlled) {
+        setIsOpenState(nextIsOpen);
+      }
+
+      // Call the change handler in either mode
+      if (onOpenChange) {
+        onOpenChange(nextIsOpen);
+      }
+
+      // Call the specific handler
+      if (nextIsOpen && onOpen) {
+        onOpen();
+      } else if (!nextIsOpen && onClose) {
+        onClose();
+      }
+    },
+    [isControlled, onOpenChange, onOpen, onClose]
+  );
+
   const open = useCallback(() => {
     updateOpen(true);
   }, [updateOpen]);
-  
+
   const close = useCallback(() => {
     updateOpen(false);
   }, [updateOpen]);
-  
+
   const toggle = useCallback(() => {
     updateOpen(!isOpen);
   }, [isOpen, updateOpen]);
-  
+
   return {
     isOpen,
     open,
     close,
-    toggle
+    toggle,
   };
-} 
+}

package/src/lib/composables/useNavbar.ts

@@ -14,11 +14,15 @@ export function useNavbar(initialProps?: Partial<NavbarProps>) {
   const defaultProps: Partial<NavbarProps> = {
     position: 'static',
     collapsible: true,
-    ...initialProps
+    backdrop: false,
+    closeOnOutsideClick: true,
+    closeOnEscape: true,
+    ariaLabel: 'Main navigation',
+    ...initialProps,
   };
 
   // Local expanded state for when not controlled externally
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(defaultProps.expanded || false);
 
   /**
    * Generate navbar class based on properties
@@ -36,7 +40,7 @@ export function useNavbar(initialProps?: Partial<NavbarProps>) {
     const positionClass = position !== 'static' ? `c-navbar--${position}` : '';
     const variantClass = variant ? `c-navbar--${variant}` : '';
     const collapsibleClass = collapsible ? 'c-navbar--collapsible' : '';
-    
+
     return `c-navbar ${positionClass} ${variantClass} ${collapsibleClass} ${className}`.trim();
   };
 
@@ -64,7 +68,7 @@ export function useNavbar(initialProps?: Partial<NavbarProps>) {
   const toggleExpanded = () => {
     const newState = !isExpanded;
     setIsExpanded(newState);
-    
+
     if (defaultProps.onToggle) {
       defaultProps.onToggle(newState);
     }
@@ -87,7 +91,7 @@ export function useNavbar(initialProps?: Partial<NavbarProps>) {
     generateContainerStyle,
     generateCollapseClass,
     toggleExpanded,
-    getExpandedState
+    getExpandedState,
   };
 }
 
@@ -100,7 +104,8 @@ export function useNav(initialProps?: Partial<NavProps>) {
   // Default nav properties
   const defaultProps: Partial<NavProps> = {
     alignment: 'start',
-    ...initialProps
+    variant: 'default',
+    ...initialProps,
   };
 
   /**
@@ -111,17 +116,19 @@ export function useNav(initialProps?: Partial<NavProps>) {
   const generateNavClass = (props: Partial<NavProps>): string => {
     const {
       alignment = defaultProps.alignment,
+      variant = defaultProps.variant,
       className = '',
     } = props;
 
     const alignmentClass = alignment !== 'start' ? `c-nav--${alignment}` : '';
-    
-    return `c-nav ${alignmentClass} ${className}`.trim();
+    const variantClass = variant !== 'default' ? `c-nav--${variant}` : '';
+
+    return `c-nav ${alignmentClass} ${variantClass} ${className}`.trim();
   };
 
   return {
     defaultProps,
-    generateNavClass
+    generateNavClass,
   };
 }
 
@@ -136,7 +143,7 @@ export function useNavItem(initialProps?: Partial<NavItemProps & { megaMenu?: bo
     dropdown: false,
     megaMenu: false,
     active: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -159,7 +166,7 @@ export function useNavItem(initialProps?: Partial<NavItemProps & { megaMenu?: bo
     const megaMenuClass = megaMenu ? 'c-nav__item--mega-menu' : '';
     const activeClass = active ? NAV.CLASSES.ACTIVE : '';
     const disabledClass = disabled ? NAV.CLASSES.DISABLED : '';
-    
+
     return `c-nav__item ${dropdownClass} ${megaMenuClass} ${activeClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -173,7 +180,7 @@ export function useNavItem(initialProps?: Partial<NavItemProps & { megaMenu?: bo
   const generateNavLinkClass = (active = false, disabled = false, className = ''): string => {
     const activeClass = active ? NAV.CLASSES.ACTIVE : '';
     const disabledClass = disabled ? 'c-nav__link--disabled' : '';
-    
+
     return `c-nav__link ${activeClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -188,7 +195,7 @@ export function useNavItem(initialProps?: Partial<NavItemProps & { megaMenu?: bo
         e.preventDefault();
         return;
       }
-      
+
       handler();
     };
   };
@@ -197,7 +204,7 @@ export function useNavItem(initialProps?: Partial<NavItemProps & { megaMenu?: bo
     defaultProps,
     generateNavItemClass,
     generateNavLinkClass,
-    handleClick
+    handleClick,
   };
 }
 
@@ -211,7 +218,7 @@ export function useNavDropdown(initialProps?: Partial<NavDropdownProps>) {
   const defaultProps: Partial<NavDropdownProps> = {
     alignment: 'start',
     megaMenu: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -227,8 +234,10 @@ export function useNavDropdown(initialProps?: Partial<NavDropdownProps>) {
     } = props;
 
     // Select the base class based on mega menu or regular dropdown
-    const baseClass = megaMenu ? NAV.SELECTORS.MEGA_MENU.replace('.', '') : NAV.SELECTORS.DROPDOWN_MENU.replace('.', '');
-    
+    const baseClass = megaMenu
+      ? NAV.SELECTORS.MEGA_MENU.replace('.', '')
+      : NAV.SELECTORS.DROPDOWN_MENU.replace('.', '');
+
     // Add alignment class if not default 'start'
     let alignmentClass = '';
     if (alignment === 'center') {
@@ -236,7 +245,7 @@ export function useNavDropdown(initialProps?: Partial<NavDropdownProps>) {
     } else if (alignment === 'end') {
       alignmentClass = `${baseClass}--end`;
     }
-    
+
     return `${baseClass} ${alignmentClass} ${className}`.trim();
   };
 
@@ -249,7 +258,7 @@ export function useNavDropdown(initialProps?: Partial<NavDropdownProps>) {
     // because it requires DOM access
     return document.querySelector('.c-navbar--fixed-bottom') !== null;
   };
-  
+
   /**
    * Get the appropriate icon name based on navbar position
    * @param isMegaMenu - Whether it's a mega menu
@@ -262,7 +271,9 @@ export function useNavDropdown(initialProps?: Partial<NavDropdownProps>) {
 
   // Keeping this for backward compatibility
   const getIconClass = (isMegaMenu: boolean = false): string => {
-    console.warn('getIconClass is deprecated. Please use the Icon component directly with the getIconName function.');
+    console.warn(
+      'getIconClass is deprecated. Please use the Icon component directly with the getIconName function.'
+    );
     const isFixedBottom = isInFixedBottomNavbar();
     return `c-nav__icon ${isFixedBottom ? 'icon-lux-caret-up' : 'icon-lux-caret-down'}`;
   };
@@ -272,6 +283,6 @@ export function useNavDropdown(initialProps?: Partial<NavDropdownProps>) {
     generateDropdownMenuClass,
     isInFixedBottomNavbar,
     getIconClass,
-    getIconName
+    getIconName,
   };
-} 
+}

package/src/lib/composables/usePagination.ts

@@ -26,10 +26,7 @@ export const usePagination = ({
     }
 
     const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-    const rightSiblingIndex = Math.min(
-      currentPage + siblingCount,
-      totalPages
-    );
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
 
     const shouldShowLeftDots = leftSiblingIndex > 2;
     const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
@@ -52,10 +49,7 @@ export const usePagination = ({
     */
     if (shouldShowLeftDots && !shouldShowRightDots) {
       let rightItemCount = 3 + 2 * siblingCount;
-      let rightRange = range(
-        totalPages - rightItemCount + 1,
-        totalPages
-      );
+      let rightRange = range(totalPages - rightItemCount + 1, totalPages);
       return [firstPageIndex, DOTS, ...rightRange];
     }
 
@@ -68,8 +62,7 @@ export const usePagination = ({
     }
 
     // This case should ideally not be reached if logic is correct
-    return []; 
-
+    return [];
   }, [totalPages, siblingCount, currentPage]);
 
   const goToPage = (page: number) => {