@shohojdhara/atomix 0.2.1 → 0.2.3

package/src/lib/composables/index.ts

@@ -32,6 +32,10 @@ export * from './useTodo';
 export * from './useCheckbox';
 export * from './useForm';
 export * from './useFormGroup';
+
+// GlassContainer composables
+export * from './useGlassContainer';
+export * from './useAtomixGlass';
 export * from './useInput';
 export * from './useRadio';
 export * from './useSelect';

package/src/lib/composables/useAtomixGlass.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export interface UseAtomixGlassOptions {
+  size?: 'sm' | 'md' | 'lg';
+  mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+  overLight?: boolean;
+  clickable?: boolean;
+  active?: boolean;
+  className?: string;
+}
+
+export interface UseAtomixGlassReturn {
+  generateGlassClass: (options: UseAtomixGlassOptions) => string;
+  generateElementClass: (element: string, modifier?: string) => string;
+}
+
+/**
+ * Hook for generating AtomixGlass CSS classes following BEM methodology
+ */
+export function useAtomixGlass(): UseAtomixGlassReturn {
+  // Generate CSS class for the main glass component
+  const generateGlassClass = useCallback((options: UseAtomixGlassOptions) => {
+    const classes = ['c-atomix-glass'];
+
+    // Add size modifier
+    if (options.size && options.size !== 'md') {
+      classes.push(`c-atomix-glass--${options.size}`);
+    }
+
+    // Add mode modifier
+    if (options.mode && options.mode !== 'standard') {
+      classes.push(`c-atomix-glass--${options.mode}`);
+    }
+
+    // Add state modifiers
+    if (options.clickable) {
+      classes.push('c-atomix-glass--clickable');
+    }
+
+    if (options.overLight) {
+      classes.push('c-atomix-glass--over-light');
+    }
+
+    if (options.active) {
+      classes.push('c-atomix-glass--active');
+    }
+
+    // Add custom className
+    if (options.className) {
+      classes.push(options.className);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  }, []);
+
+  // Generate CSS class for elements
+  const generateElementClass = useCallback((element: string, modifier?: string) => {
+    const baseClass = `c-atomix-glass__${element}`;
+
+    if (modifier) {
+      return `${baseClass}--${modifier}`;
+    }
+
+    return baseClass;
+  }, []);
+
+  return {
+    generateGlassClass,
+    generateElementClass,
+  };
+}

package/src/lib/composables/useButton.ts

@@ -27,6 +27,7 @@ export function useButton(initialProps?: Partial<ButtonProps>) {
       disabled = defaultProps.disabled,
       rounded = defaultProps.rounded,
       iconOnly = false,
+      glass = defaultProps.glass,
       className = '',
     } = props;
 
@@ -34,8 +35,9 @@ export function useButton(initialProps?: Partial<ButtonProps>) {
     const iconOnlyClass = iconOnly ? 'c-btn--icon' : '';
     const roundedClass = rounded ? 'c-btn--rounded' : '';
     const disabledClass = disabled ? 'c-btn--disabled' : '';
+    const glassClass = glass ? 'c-btn--glass' : '';
 
-    return `c-btn c-btn--${variant} ${sizeClass} ${iconOnlyClass} ${roundedClass} ${disabledClass} ${className}`.trim();
+    return `c-btn c-btn--${variant} ${sizeClass} ${iconOnlyClass} ${roundedClass} ${disabledClass} ${glassClass} ${className}`.trim();
   };
 
   /**

package/src/lib/composables/useCallout.ts

@@ -11,6 +11,7 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
     variant: 'primary',
     oneLine: false,
     toast: false,
+    glass: false,
     ...initialProps,
   };
 
@@ -24,14 +25,16 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
       variant = defaultProps.variant,
       oneLine = defaultProps.oneLine,
       toast = defaultProps.toast,
+      glass = defaultProps.glass,
       className = '',
     } = props;
 
     const oneLineClass = oneLine ? 'c-callout--oneline' : '';
     const toastClass = toast ? 'c-callout--toast' : '';
     const variantClass = variant ? `c-callout--${variant}` : '';
+    const glassClass = glass ? 'c-callout--glass' : '';
 
-    return `c-callout ${variantClass} ${oneLineClass} ${toastClass} ${className}`.trim();
+    return `c-callout ${variantClass} ${oneLineClass} ${toastClass} ${glassClass} ${className}`.trim();
   };
 
   /**

package/src/lib/composables/useFooter.ts

@@ -0,0 +1,85 @@
+import { FooterLayout, ThemeColor, Size, SocialLink } from '../types/components';
+import { FOOTER } from '../constants/components';
+
+export interface UseFooterOptions {
+  layout?: FooterLayout;
+  variant?: ThemeColor;
+  size?: Size;
+  sticky?: boolean;
+  showNewsletter?: boolean;
+  showBackToTop?: boolean;
+  socialLinks?: SocialLink[];
+  onNewsletterSubmit?: (email: string) => void | Promise<void>;
+  onBackToTop?: () => void;
+  className?: string;
+}
+
+
+
+export function useFooter(options: UseFooterOptions = {}) {
+  const {
+    layout = FOOTER.DEFAULTS.LAYOUT,
+    variant = FOOTER.DEFAULTS.VARIANT,
+    size = FOOTER.DEFAULTS.SIZE,
+    sticky = FOOTER.DEFAULTS.STICKY,
+    showNewsletter = FOOTER.DEFAULTS.SHOW_NEWSLETTER,
+    showBackToTop = FOOTER.DEFAULTS.SHOW_BACK_TO_TOP,
+    socialLinks = [],
+    onNewsletterSubmit,
+    onBackToTop,
+    className = '',
+  } = options;
+
+  // Generate footer classes
+  const footerClass = (() => {
+    const classes = [
+      FOOTER.CLASSES.BASE,
+      FOOTER.CLASSES[layout.toUpperCase() as keyof typeof FOOTER.CLASSES] || FOOTER.CLASSES.COLUMNS,
+      `c-footer--${variant}`,
+      FOOTER.CLASSES[size.toUpperCase() as keyof typeof FOOTER.CLASSES] || FOOTER.CLASSES.MD,
+      sticky && FOOTER.CLASSES.STICKY,
+      className,
+    ];
+    return classes.filter(Boolean).join(' ');
+  })();
+
+  const containerClass = FOOTER.CLASSES.CONTAINER;
+  const brandClass = FOOTER.CLASSES.BRAND;
+  const sectionsClass = (() => {
+    const classes = [
+      FOOTER.CLASSES.SECTIONS,
+      layout === 'columns' && 'c-footer__sections--columns',
+      layout === 'centered' && 'c-footer__sections--centered',
+      layout === 'stacked' && 'c-footer__sections--stacked',
+    ];
+    return classes.filter(Boolean).join(' ');
+  })();
+  const bottomClass = FOOTER.CLASSES.BOTTOM;
+
+  // Handle newsletter submission
+  const handleNewsletterSubmit = (email: string) => {
+    if (onNewsletterSubmit) {
+      onNewsletterSubmit(email);
+    }
+  };
+
+  // Handle back to top
+  const handleBackToTop = () => {
+    if (onBackToTop) {
+      onBackToTop();
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  return {
+    footerClass,
+    containerClass,
+    brandClass,
+    sectionsClass,
+    bottomClass,
+    handleNewsletterSubmit,
+    handleBackToTop,
+    socialLinks,
+  };
+}

package/src/lib/composables/useGlassContainer.ts

@@ -0,0 +1,168 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { GlassContainerProps, MousePosition } from '../types/components';
+
+/**
+ * Custom hook for managing GlassContainer state and interactions
+ */
+export function useGlassContainer(props: GlassContainerProps) {
+  const {
+    glassSize = { width: 270, height: 69 },
+    elasticity = 0.15,
+    mouseContainer,
+    globalMousePos: externalGlobalMousePos,
+    mouseOffset: externalMouseOffset,
+  } = props;
+
+  const filterId = useId();
+  const glassRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isActive, setIsActive] = useState(false);
+  const [currentGlassSize, setCurrentGlassSize] = useState(glassSize);
+  const [internalGlobalMousePos, setInternalGlobalMousePos] = useState<MousePosition>({ x: 0, y: 0 });
+  const [internalMouseOffset, setInternalMouseOffset] = useState<MousePosition>({ x: 0, y: 0 });
+
+  // Use external mouse position if provided, otherwise use internal
+  const globalMousePos = externalGlobalMousePos || internalGlobalMousePos;
+  const mouseOffset = externalMouseOffset || internalMouseOffset;
+
+  // Internal mouse tracking
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      const container = mouseContainer?.current || glassRef.current;
+      if (!container) return;
+
+      const rect = container.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+
+      setInternalMouseOffset({
+        x: ((e.clientX - centerX) / rect.width) * 100,
+        y: ((e.clientY - centerY) / rect.height) * 100,
+      });
+
+      setInternalGlobalMousePos({
+        x: e.clientX,
+        y: e.clientY,
+      });
+    },
+    [mouseContainer]
+  );
+
+  // Set up mouse tracking if no external mouse position is provided
+  useEffect(() => {
+    if (externalGlobalMousePos && externalMouseOffset) return;
+
+    const container = mouseContainer?.current || glassRef.current;
+    if (!container) return;
+
+    container.addEventListener('mousemove', handleMouseMove);
+    return () => container.removeEventListener('mousemove', handleMouseMove);
+  }, [handleMouseMove, mouseContainer, externalGlobalMousePos, externalMouseOffset]);
+
+  // Calculate directional scaling based on mouse position
+  const calculateDirectionalScale = useCallback(() => {
+    if (!globalMousePos.x || !globalMousePos.y || !glassRef.current) {
+      return 'scale(1)';
+    }
+
+    const rect = glassRef.current.getBoundingClientRect();
+    const pillCenterX = rect.left + rect.width / 2;
+    const pillCenterY = rect.top + rect.height / 2;
+    const pillWidth = currentGlassSize.width;
+    const pillHeight = currentGlassSize.height;
+
+    const deltaX = globalMousePos.x - pillCenterX;
+    const deltaY = globalMousePos.y - pillCenterY;
+
+    const edgeDistanceX = Math.max(0, Math.abs(deltaX) - pillWidth / 2);
+    const edgeDistanceY = Math.max(0, Math.abs(deltaY) - pillHeight / 2);
+    const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
+
+    const activationZone = 200;
+    if (edgeDistance > activationZone) return 'scale(1)';
+
+    const fadeInFactor = 1 - edgeDistance / activationZone;
+    const centerDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    if (centerDistance === 0) return 'scale(1)';
+
+    const normalizedX = deltaX / centerDistance;
+    const normalizedY = deltaY / centerDistance;
+    const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor;
+
+    const scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * 0.3 - Math.abs(normalizedY) * stretchIntensity * 0.15;
+    const scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * 0.3 - Math.abs(normalizedX) * stretchIntensity * 0.15;
+
+    return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
+  }, [globalMousePos, elasticity, currentGlassSize]);
+
+  // Calculate elastic translation
+  const calculateElasticTranslation = useCallback(() => {
+    if (!glassRef.current) return { x: 0, y: 0 };
+
+    const rect = glassRef.current.getBoundingClientRect();
+    const pillCenterX = rect.left + rect.width / 2;
+    const pillCenterY = rect.top + rect.height / 2;
+    const pillWidth = currentGlassSize.width;
+    const pillHeight = currentGlassSize.height;
+
+    const edgeDistanceX = Math.max(0, Math.abs(globalMousePos.x - pillCenterX) - pillWidth / 2);
+    const edgeDistanceY = Math.max(0, Math.abs(globalMousePos.y - pillCenterY) - pillHeight / 2);
+    const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
+
+    const activationZone = 200;
+    const fadeInFactor = edgeDistance > activationZone ? 0 : 1 - edgeDistance / activationZone;
+
+    return {
+      x: (globalMousePos.x - pillCenterX) * elasticity * 0.1 * fadeInFactor,
+      y: (globalMousePos.y - pillCenterY) * elasticity * 0.1 * fadeInFactor,
+    };
+  }, [globalMousePos, elasticity, currentGlassSize]);
+
+  // Update glass size
+  useEffect(() => {
+    const updateGlassSize = () => {
+      if (glassRef.current) {
+        const rect = glassRef.current.getBoundingClientRect();
+        setCurrentGlassSize({ width: rect.width, height: rect.height });
+      }
+    };
+
+    updateGlassSize();
+    window.addEventListener('resize', updateGlassSize);
+    return () => window.removeEventListener('resize', updateGlassSize);
+  }, []);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  const handleMouseDown = useCallback(() => {
+    setIsActive(true);
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    setIsActive(false);
+  }, []);
+
+  return {
+    filterId,
+    glassRef,
+    isHovered,
+    isActive,
+    currentGlassSize,
+    globalMousePos,
+    mouseOffset,
+    calculateDirectionalScale,
+    calculateElasticTranslation,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleMouseDown,
+    handleMouseUp,
+  };
+}
+
+export default useGlassContainer;

package/src/lib/composables/useSlider.ts

@@ -35,12 +35,15 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     speed = 300,
     allowTouchMove = true,
     threshold = 50,
+    autoplay,
     onSlideChange,
   } = options;
 
   const containerRef = useRef<HTMLDivElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const repositioningRef = useRef(false);
+  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
+  const [autoplayRunning, setAutoplayRunning] = useState(false);
 
   const [realIndex, setRealIndex] = useState(initialSlide);
   const [internalIndex, setInternalIndex] = useState(0);
@@ -73,6 +76,160 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     return -(internalIndex * slideWidth) + dragOffset;
   }, [slideWidth, internalIndex, dragOffset]);
 
+  // Autoplay effect
+  useEffect(() => {
+    if (!autoplay) {
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+      }
+      setAutoplayRunning(false);
+      return;
+    }
+
+    const autoplayParams = typeof autoplay === 'boolean' ? { delay: 3000 } : autoplay;
+    const { delay = 3000, pauseOnMouseEnter = false, disableOnInteraction = false, reverseDirection = false } = autoplayParams;
+
+    // Clear any existing interval
+    if (autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+    }
+
+    // Create new interval
+    autoplayRef.current = setInterval(() => {
+      // We need to use a functional update to get the latest values
+      setRealIndex(prevRealIndex => {
+        if (isTransitioning) return prevRealIndex;
+        
+        // Stop autoplay on interaction if disableOnInteraction is true
+        if (disableOnInteraction && autoplayRef.current) {
+          clearInterval(autoplayRef.current);
+          autoplayRef.current = null;
+          setAutoplayRunning(false);
+        }
+
+        let nextIndex;
+        if (loop) {
+          nextIndex = (prevRealIndex + 1) % slides.length;
+        } else {
+          nextIndex = Math.min(prevRealIndex + 1, slides.length - slidesToShow);
+        }
+        
+        // Trigger the slide change
+        if (reverseDirection) {
+          // For reverse direction, we would go to previous slide
+          const prevIndex = loop ? (prevRealIndex === 0 ? slides.length - 1 : prevRealIndex - 1) : Math.max(prevRealIndex - 1, 0);
+          setInternalIndex(loop ? slides.length + prevIndex : prevIndex);
+          setIsTransitioning(true);
+          setDragOffset(0);
+
+          setTimeout(() => {
+            setIsTransitioning(false);
+            onSlideChange?.(prevIndex);
+          }, speed);
+          
+          return prevIndex;
+        } else {
+          // Normal direction
+          setInternalIndex(loop ? slides.length + nextIndex : nextIndex);
+          setIsTransitioning(true);
+          setDragOffset(0);
+
+          setTimeout(() => {
+            setIsTransitioning(false);
+            onSlideChange?.(nextIndex);
+            
+            // Reposition after transition ends for looped sliders
+            if (loop && nextIndex >= slides.length * 2) {
+              repositioningRef.current = true;
+              setInternalIndex(slides.length + nextIndex);
+              setTimeout(() => {
+                repositioningRef.current = false;
+              }, 0);
+            }
+          }, speed);
+          
+          return nextIndex;
+        }
+      });
+    }, delay);
+    
+    setAutoplayRunning(true);
+
+    // Handle pause on mouse enter/leave if enabled
+    let containerElement: HTMLDivElement | null = null;
+    const handleMouseEnter = () => {
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+        setAutoplayRunning(false);
+      }
+    };
+    
+    const handleMouseLeave = () => {
+      // Restart autoplay
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+      }
+      
+      autoplayRef.current = setInterval(() => {
+        setRealIndex(prevRealIndex => {
+          if (isTransitioning) return prevRealIndex;
+          
+          let nextIndex;
+          if (loop) {
+            nextIndex = (prevRealIndex + 1) % slides.length;
+          } else {
+            nextIndex = Math.min(prevRealIndex + 1, slides.length - slidesToShow);
+          }
+          
+          setInternalIndex(loop ? slides.length + nextIndex : nextIndex);
+          setIsTransitioning(true);
+          setDragOffset(0);
+
+          setTimeout(() => {
+            setIsTransitioning(false);
+            onSlideChange?.(nextIndex);
+            
+            if (loop) {
+              // Reposition after transition ends
+              if (nextIndex >= slides.length * 2) {
+                repositioningRef.current = true;
+                setInternalIndex(slides.length + nextIndex);
+                setTimeout(() => {
+                  repositioningRef.current = false;
+                }, 0);
+              }
+            }
+          }, speed);
+          
+          return nextIndex;
+        });
+      }, delay);
+      
+      setAutoplayRunning(true);
+    };
+
+    if (pauseOnMouseEnter && containerRef.current) {
+      containerElement = containerRef.current;
+      containerElement.addEventListener('mouseenter', handleMouseEnter);
+      containerElement.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    // Cleanup
+    return () => {
+      if (autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+      }
+      if (containerElement) {
+        containerElement.removeEventListener('mouseenter', handleMouseEnter);
+        containerElement.removeEventListener('mouseleave', handleMouseLeave);
+      }
+      setAutoplayRunning(false);
+    };
+  }, [autoplay, slides.length, loop, slidesToShow, isTransitioning, speed, onSlideChange, repositioningRef]);
+
   // Initialize
   useEffect(() => {
     if (loop) {
@@ -100,6 +257,13 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
   const slideNext = useCallback(() => {
     if (isTransitioning) return;
 
+    // Stop autoplay on interaction if disableOnInteraction is true
+    if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+      autoplayRef.current = null;
+      setAutoplayRunning(false);
+    }
+
     if (loop) {
       const nextRealIndex = (realIndex + 1) % slides.length;
       const nextInternalIndex = internalIndex + 1;
@@ -145,11 +309,19 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
     allSlides.length,
     loopedSlides,
+    autoplay
   ]);
 
   const slidePrev = useCallback(() => {
     if (isTransitioning) return;
 
+    // Stop autoplay on interaction if disableOnInteraction is true
+    if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+      autoplayRef.current = null;
+      setAutoplayRunning(false);
+    }
+
     if (loop) {
       const prevRealIndex = realIndex === 0 ? slides.length - 1 : realIndex - 1;
       const prevInternalIndex = internalIndex - 1;
@@ -194,12 +366,20 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
     allSlides.length,
     loopedSlides,
+    autoplay
   ]);
 
   const goToSlide = useCallback(
     (index: number) => {
       if (isTransitioning || index === realIndex) return;
 
+      // Stop autoplay on interaction if disableOnInteraction is true
+      if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+        setAutoplayRunning(false);
+      }
+
       setIsTransitioning(true);
       setDragOffset(0);
 
@@ -211,13 +391,20 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
         onSlideChange?.(index);
       }, speed);
     },
-    [realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides]
+    [realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides, autoplay]
   );
 
   const handleTouchStart = useCallback(
     (e: React.TouchEvent | React.MouseEvent) => {
       if (!allowTouchMove) return;
 
+      // Stop autoplay on interaction if disableOnInteraction is true
+      if (autoplay && typeof autoplay === 'object' && autoplay.disableOnInteraction && autoplayRef.current) {
+        clearInterval(autoplayRef.current);
+        autoplayRef.current = null;
+        setAutoplayRunning(false);
+      }
+
       const client =
         direction === 'horizontal'
           ? 'touches' in e
@@ -230,7 +417,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
       setTouching(true);
       setDragOffset(0);
     },
-    [allowTouchMove, direction]
+    [allowTouchMove, direction, autoplay]
   );
 
   const handleTouchMove = useCallback(
@@ -293,7 +480,7 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     isBeginning: !loop && realIndex === 0,
     isEnd: !loop && realIndex >= slides.length - slidesToShow,
     progress: slides.length > 0 ? realIndex / (slides.length - 1) : 0,
-    autoplayRunning: false,
+    autoplayRunning,
     transitioning: isTransitioning,
     touching,
     translate: translateValue,
@@ -336,4 +523,4 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     loopedSlides,
     repositioningRef,
   };
-}
+}