@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/lib/composables/useHero.ts

@@ -15,12 +15,12 @@ interface UseHeroResult {
   /**
    * Generate image column class based on size
    */
-  generateImageColClass: (size?: number) => string;
+  generateImageColClass: (size?: number, customClass?: string) => string;
 
   /**
    * Generate content column class based on size
    */
-  generateContentColClass: (size?: number) => string;
+  generateContentColClass: (size?: number, customClass?: string) => string;
 
   /**
    * Determine if the hero has a background image
@@ -73,7 +73,7 @@ interface UseHeroResult {
  * @param initialProps - Initial hero props
  * @returns Hero methods
  */
-export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
+export function useHero(initialProps?: HeroProps): UseHeroResult {
   const heroRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
   const parallaxHandlerRef = useRef<((event: Event) => void) | null>(null);
@@ -88,6 +88,8 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
     contentWidth: undefined,
     parallax: false,
     parallaxIntensity: 0.5,
+    headingLevel: 'h1',
+    reverseOnMobile: false,
     ...initialProps,
   };
 
@@ -100,15 +102,16 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
    * Initialize background slider hook - always call hook, conditionally use result
    */
   const backgroundSliderResult = useHeroBackgroundSlider(
-    defaultProps.backgroundSlider || { 
-      slides: [], 
-      autoplay: { delay: 5000, pauseOnHover: true } 
+    defaultProps.backgroundSlider || {
+      slides: [],
+      autoplay: { delay: 5000, pauseOnHover: true },
+      transition: 'fade',
+      transitionDuration: 1000,
     }
   );
-  
-  const backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider
-    ? backgroundSliderResult
-    : undefined;
+
+  const backgroundSlider =
+    hasBackgroundSlider && defaultProps.backgroundSlider ? backgroundSliderResult : undefined;
 
   /**
    * Check if the hero has a background image
@@ -198,7 +201,12 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
         removeParallaxEffect(heroElement);
       }
     };
-  }, [defaultProps.parallax, defaultProps.parallaxIntensity, hasBackgroundImage, hasBackgroundSlider]);
+  }, [
+    defaultProps.parallax,
+    defaultProps.parallaxIntensity,
+    hasBackgroundImage,
+    hasBackgroundSlider,
+  ]);
 
   /**
    * Generate hero class names based on props
@@ -247,9 +255,13 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
   /**
    * Generate image column class based on size
    * @param size - Column size (1-12)
+   * @param customClass - Optional custom class name
    * @returns Column class
    */
-  const generateImageColClass = (size: number = defaultProps.imageColSize || 7): string => {
+  const generateImageColClass = (
+    size: number = defaultProps.imageColSize || 7,
+    customClass?: string
+  ): string => {
     const classes = [`o-grid__col o-grid__col--md-${size}`];
 
     // Add responsive margin if needed for mobile view
@@ -257,16 +269,48 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
       classes.push('u-mt-5 u-mt-md-0');
     }
 
+    // Handle mobile stacking order
+    if (defaultProps.reverseOnMobile) {
+      if (defaultProps.alignment === 'right' || defaultProps.alignment === 'center') {
+        classes.push('u-order-first u-order-md-last');
+      } else {
+        classes.push('u-order-last u-order-md-first');
+      }
+    }
+
+    if (customClass) {
+      classes.push(customClass);
+    }
+
     return classes.join(' ');
   };
 
   /**
    * Generate content column class based on size
    * @param size - Column size (1-12)
+   * @param customClass - Optional custom class name
    * @returns Column class
    */
-  const generateContentColClass = (size: number = defaultProps.contentColSize || 5): string => {
-    return `o-grid__col o-grid__col--md-${size}`;
+  const generateContentColClass = (
+    size: number = defaultProps.contentColSize || 5,
+    customClass?: string
+  ): string => {
+    const classes = [`o-grid__col o-grid__col--md-${size}`];
+
+    // Handle mobile stacking order
+    if (defaultProps.reverseOnMobile) {
+      if (defaultProps.alignment === 'right' || defaultProps.alignment === 'center') {
+        classes.push('u-order-last u-order-md-first');
+      } else {
+        classes.push('u-order-first u-order-md-last');
+      }
+    }
+
+    if (customClass) {
+      classes.push(customClass);
+    }
+
+    return classes.join(' ');
   };
 
   return {

package/src/lib/composables/useHeroBackgroundSlider.ts

@@ -49,13 +49,7 @@ export interface UseHeroBackgroundSliderResult {
 export function useHeroBackgroundSlider(
   config: HeroBackgroundSliderConfig
 ): UseHeroBackgroundSliderResult {
-  const {
-    slides,
-    autoplay,
-    loop = true,
-    transition = 'fade',
-    transitionDuration = 1000,
-  } = config;
+  const { slides, autoplay, loop = true, transition = 'fade', transitionDuration = 1000 } = config;
 
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isTransitioning, setIsTransitioning] = useState(false);
@@ -148,7 +142,7 @@ export function useHeroBackgroundSlider(
     if (isPausedRef.current && autoplay && slides.length > 1) {
       isPausedRef.current = false;
       const delay = typeof autoplay === 'object' ? autoplay.delay : 3000;
-      
+
       // Restart autoplay
       if (!autoplayRef.current) {
         autoplayRef.current = setInterval(() => {
@@ -227,4 +221,3 @@ export function useHeroBackgroundSlider(
     resumeAutoplay,
   };
 }
-

package/src/lib/composables/useInput.ts

@@ -6,14 +6,16 @@ import { INPUT } from '../constants/components';
  * @param initialProps - Initial input properties
  * @returns Input state and methods
  */
-export function useInput(initialProps?: Partial<InputProps> & {
-  prefixIcon?: boolean;
-  suffixIcon?: boolean;
-  clearable?: boolean;
-  showCounter?: boolean;
-  showPasswordToggle?: boolean;
-  fullWidth?: boolean;
-}) {
+export function useInput(
+  initialProps?: Partial<InputProps> & {
+    prefixIcon?: boolean;
+    suffixIcon?: boolean;
+    clearable?: boolean;
+    showCounter?: boolean;
+    showPasswordToggle?: boolean;
+    fullWidth?: boolean;
+  }
+) {
   // Default input properties
   const defaultProps: Partial<InputProps> = {
     size: 'md',

package/src/lib/composables/useSideMenu.ts

@@ -19,9 +19,9 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
 
   // Local open state for when not controlled externally
   const [isOpenState, setIsOpenState] = useState(
-    defaultProps.defaultCollapsedDesktop !== undefined 
-      ? !defaultProps.defaultCollapsedDesktop 
-      : (defaultProps.isOpen || false)
+    defaultProps.defaultCollapsedDesktop !== undefined
+      ? !defaultProps.defaultCollapsedDesktop
+      : defaultProps.isOpen || false
   );
 
   // Refs for managing responsive behavior
@@ -42,7 +42,8 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
   useEffect(() => {
     const isMobile = window.innerWidth < 768;
     const shouldCollapse = isMobile ? defaultProps.collapsible : defaultProps.collapsibleDesktop;
-    const currentOpen = typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+    const currentOpen =
+      typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
 
     if (shouldCollapse && wrapperRef.current && innerRef.current) {
       // Use setTimeout to ensure DOM is fully rendered
@@ -78,7 +79,7 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
         // Set proper height for vertical animation (both mobile and desktop)
         const currentOpen =
           typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
-        
+
         // Use requestAnimationFrame to ensure DOM is ready
         requestAnimationFrame(() => {
           if (wrapperRef.current && innerRef.current) {

package/src/lib/composables/useTooltip.ts

@@ -160,7 +160,7 @@ export const useTooltip = ({
   const [isPositioned, setIsPositioned] = useState(false);
   const [tooltipStyle, setTooltipStyle] = useState<React.CSSProperties>({});
   const [arrowStyle, setArrowStyle] = useState<React.CSSProperties>({});
-  
+
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const triggerRef = useRef<HTMLDivElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -282,4 +282,3 @@ export const useTooltip = ({
 };
 
 export default useTooltip;
-

package/src/lib/composables/useVideoPlayer.ts

@@ -170,7 +170,13 @@ export function useVideoPlayer({
 
         // Validate and sanitize the source URL
         const sanitizedSrc = String(newQuality.src).replace(/[<>"']/g, '');
-        if (sanitizedSrc && (sanitizedSrc.startsWith('http://') || sanitizedSrc.startsWith('https://') || sanitizedSrc.startsWith('blob:') || sanitizedSrc.startsWith('data:'))) {
+        if (
+          sanitizedSrc &&
+          (sanitizedSrc.startsWith('http://') ||
+            sanitizedSrc.startsWith('https://') ||
+            sanitizedSrc.startsWith('blob:') ||
+            sanitizedSrc.startsWith('data:'))
+        ) {
           videoRef.current.src = sanitizedSrc;
           videoRef.current.currentTime = currentTime;
 
@@ -299,40 +305,43 @@ export function useVideoPlayer({
   }, [onFullscreenChange]);
 
   // Keyboard shortcuts
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (!containerRef.current?.contains(document.activeElement)) return;
-
-    switch (e.code) {
-      case 'Space':
-        e.preventDefault();
-        togglePlay();
-        break;
-      case 'ArrowLeft':
-        e.preventDefault();
-        seek(currentTime - 10);
-        break;
-      case 'ArrowRight':
-        e.preventDefault();
-        seek(currentTime + 10);
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setVolume(Math.min(1, volume + 0.1));
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        setVolume(Math.max(0, volume - 0.1));
-        break;
-      case 'KeyM':
-        e.preventDefault();
-        toggleMute();
-        break;
-      case 'KeyF':
-        e.preventDefault();
-        toggleFullscreen();
-        break;
-    }
-  }, [togglePlay, seek, currentTime, setVolume, volume, toggleMute, toggleFullscreen, containerRef]);
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!containerRef.current?.contains(document.activeElement)) return;
+
+      switch (e.code) {
+        case 'Space':
+          e.preventDefault();
+          togglePlay();
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          seek(currentTime - 10);
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          seek(currentTime + 10);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setVolume(Math.min(1, volume + 0.1));
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          setVolume(Math.max(0, volume - 0.1));
+          break;
+        case 'KeyM':
+          e.preventDefault();
+          toggleMute();
+          break;
+        case 'KeyF':
+          e.preventDefault();
+          toggleFullscreen();
+          break;
+      }
+    },
+    [togglePlay, seek, currentTime, setVolume, volume, toggleMute, toggleFullscreen, containerRef]
+  );
 
   useEffect(() => {
     document.addEventListener('keydown', handleKeyDown);