@shohojdhara/atomix 0.2.5 → 0.2.7

package/src/components/Hero/Hero.stories.tsx

@@ -100,6 +100,10 @@ const meta = {
       control: 'object',
       description: 'Video background options',
     },
+    backgroundSlider: {
+      control: 'object',
+      description: 'Background slider configuration with multiple images/videos',
+    },
   },
 } satisfies Meta<typeof Hero>;
 
@@ -345,3 +349,296 @@ export const VideoBackgroundWithImage: Story = {
     imageAlt: 'Product showcase',
   },
 };
+
+/**
+ * Hero with background image slider (fade transition)
+ */
+export const WithBackgroundSlider: Story = {
+  args: {
+    title: 'Dynamic Background Slider',
+    subtitle: 'Multiple Images with Fade Transition',
+    text: 'This hero features a background slider with multiple images that automatically transition using a smooth fade effect. Perfect for showcasing multiple products or features.',
+    alignment: 'center',
+    showOverlay: true,
+    actions: showcaseActionButtons,
+    contentWidth: '800px',
+    backgroundSlider: {
+      slides: [
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1015/1920/1080',
+          alt: 'Mountain landscape',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1018/1920/1080',
+          alt: 'Forest scene',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1025/1920/1080',
+          alt: 'Ocean view',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1035/1920/1080',
+          alt: 'City skyline',
+        },
+      ],
+      autoplay: {
+        delay: 3000,
+        pauseOnHover: false,
+      },
+      loop: true,
+      transition: 'fade',
+      transitionDuration: 1000,
+    },
+  },
+};
+
+/**
+ * Hero with background slider (mixed images and videos)
+ */
+export const WithMixedMediaSlider: Story = {
+  args: {
+    title: 'Mixed Media Background Slider',
+    subtitle: 'Images & Videos Combined',
+    text: 'This hero demonstrates a background slider that seamlessly transitions between images and videos, creating a rich, dynamic visual experience.',
+    alignment: 'center',
+    showOverlay: true,
+    actions: showcaseActionButtons,
+    contentWidth: '800px',
+    backgroundSlider: {
+      slides: [
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1015/1920/1080',
+          alt: 'Mountain landscape',
+        },
+        {
+          type: 'video',
+          src: 'https://cdn.pixabay.com/video/2021/02/20/65772-515379427_large.mp4',
+          videoOptions: {
+            autoplay: true,
+            loop: true,
+            muted: true,
+            posterUrl: 'https://picsum.photos/id/1018/1920/1080',
+          },
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1025/1920/1080',
+          alt: 'Ocean view',
+        },
+        {
+          type: 'video',
+          src: 'https://cdn.pixabay.com/video/2023/11/18/189639-886016299_large.mp4',
+          videoOptions: {
+            autoplay: true,
+            loop: true,
+            muted: true,
+            posterUrl: 'https://picsum.photos/id/1035/1920/1080',
+          },
+        },
+      ],
+      autoplay: {
+        delay: 4000,
+        pauseOnHover: false,
+      },
+      loop: true,
+      transition: 'fade',
+      transitionDuration: 1500,
+    },
+  },
+};
+
+/**
+ * Hero with background slider (fast transitions)
+ */
+export const WithFastSlider: Story = {
+  args: {
+    title: 'Fast-Paced Background Slider',
+    subtitle: 'Quick Transitions',
+    text: 'This slider uses faster transition times and shorter delays for a more dynamic, energetic feel.',
+    alignment: 'center',
+    showOverlay: true,
+    actions: primaryActionButtons,
+    contentWidth: '800px',
+    backgroundSlider: {
+      slides: [
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/106/1920/1080',
+          alt: 'Abstract art',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/107/1920/1080',
+          alt: 'Nature scene',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/108/1920/1080',
+          alt: 'Urban landscape',
+        },
+      ],
+      autoplay: {
+        delay: 2000,
+        pauseOnHover: false,
+      },
+      loop: true,
+      transition: 'fade',
+      transitionDuration: 500,
+    },
+  },
+};
+
+/**
+ * Hero with background slider (pause on hover)
+ */
+export const WithPauseOnHoverSlider: Story = {
+  args: {
+    title: 'Interactive Background Slider',
+    subtitle: 'Pause on Hover',
+    text: 'Hover over this hero to pause the slider. Move your mouse away to resume. Perfect for giving users control over the experience.',
+    alignment: 'center',
+    showOverlay: true,
+    actions: showcaseActionButtons,
+    contentWidth: '800px',
+    backgroundSlider: {
+      slides: [
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1015/1920/1080',
+          alt: 'Mountain landscape',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1018/1920/1080',
+          alt: 'Forest scene',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1025/1920/1080',
+          alt: 'Ocean view',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1035/1920/1080',
+          alt: 'City skyline',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1041/1920/1080',
+          alt: 'Desert landscape',
+        },
+      ],
+      autoplay: {
+        delay: 3000,
+        pauseOnHover: true,
+      },
+      loop: true,
+      transition: 'fade',
+      transitionDuration: 1000,
+    },
+  },
+};
+
+/**
+ * Hero with background slider and glass effect
+ */
+export const SliderWithGlassEffect: Story = {
+  args: {
+    title: 'Slider with Glass Effect',
+    subtitle: 'Best of Both Worlds',
+    text: 'Combine the dynamic background slider with the elegant glass effect for a truly modern, sophisticated hero section.',
+    alignment: 'center',
+    showOverlay: true,
+    glass: true,
+    actions: showcaseActionButtons,
+    contentWidth: '800px',
+    backgroundSlider: {
+      slides: [
+        {
+          type: 'video',
+          src: 'https://cdn.pixabay.com/video/2021/02/20/65772-515379427_large.mp4',
+          videoOptions: {
+            autoplay: true,
+            loop: true,
+            muted: true,
+            posterUrl: 'https://picsum.photos/id/1018/1920/1080',
+          },
+        },
+        {
+          type: 'video',
+          src: 'https://cdn.pixabay.com/video/2020/11/09/56026-478239201_large.mp4',
+          videoOptions: {
+            autoplay: true,
+            loop: true,
+            muted: true,
+            posterUrl: 'https://picsum.photos/id/1018/1920/1080',
+          },
+        },
+        {
+          type: 'video',
+          src: 'https://cdn.pixabay.com/video/2023/11/18/189639-886016299_large.mp4',
+          videoOptions: {
+            autoplay: true,
+            loop: true,
+            muted: true,
+            posterUrl: 'https://picsum.photos/id/1018/1920/1080',
+          },
+        },
+      ],
+      autoplay: {
+        delay: 30000,
+        pauseOnHover: false,
+      },
+      loop: true,
+      transition: 'fade',
+      transitionDuration: 1200,
+    },
+  },
+};
+
+/**
+ * Hero with background slider (full viewport height)
+ */
+export const FullHeightSlider: Story = {
+  args: {
+    title: 'Full Height Background Slider',
+    subtitle: 'Immersive Experience',
+    text: 'This hero takes the full viewport height and features a background slider, creating an immersive, full-screen experience.',
+    alignment: 'center',
+    showOverlay: true,
+    fullViewportHeight: true,
+    actions: showcaseActionButtons,
+    contentWidth: '800px',
+    backgroundSlider: {
+      slides: [
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1015/1920/1080',
+          alt: 'Mountain landscape',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1018/1920/1080',
+          alt: 'Forest scene',
+        },
+        {
+          type: 'image',
+          src: 'https://picsum.photos/id/1025/1920/1080',
+          alt: 'Ocean view',
+        },
+      ],
+      autoplay: {
+        delay: 4000,
+        pauseOnHover: false,
+      },
+      loop: true,
+      transition: 'fade',
+      transitionDuration: 1500,
+    },
+  },
+};

package/src/components/Hero/Hero.tsx

@@ -30,6 +30,7 @@ export const Hero: React.FC<HeroProps> = ({
     loop: true,
     muted: true,
   },
+  backgroundSlider,
 }) => {
   const {
     generateHeroClassNames,
@@ -40,6 +41,8 @@ export const Hero: React.FC<HeroProps> = ({
     useGridLayout,
     heroRef,
     videoRef,
+    backgroundSlider: sliderHook,
+    hasBackgroundSlider,
   } = useHero({
     alignment,
     imageColSize,
@@ -52,6 +55,7 @@ export const Hero: React.FC<HeroProps> = ({
     parallax,
     parallaxIntensity,
     videoBackground,
+    backgroundSlider,
   });
 
   // Create custom style for hero element with content width if provided
@@ -82,6 +86,81 @@ export const Hero: React.FC<HeroProps> = ({
   };
 
   const renderBackground = () => {
+    // Render background slider if configured
+    if (hasBackgroundSlider && backgroundSlider && sliderHook) {
+      const { slides, transition = 'fade', transitionDuration = 1000 } = backgroundSlider;
+      const { currentIndex, slideRefs, videoRefs } = sliderHook;
+
+      // Determine transition class
+      let transitionClass = HERO.CLASSES.SLIDER_FADE;
+      if (transition === 'slide') {
+        transitionClass = HERO.CLASSES.SLIDER_SLIDE;
+      } else if (transition === 'custom') {
+        transitionClass = HERO.CLASSES.SLIDER_CUSTOM;
+      }
+
+      return (
+        <div
+          className={`${HERO.SELECTORS.SLIDER.replace('.', '')} ${transitionClass}`}
+          style={{
+            '--slider-transition-duration': `${transitionDuration}ms`,
+          } as React.CSSProperties}
+          onMouseEnter={() => {
+            if (backgroundSlider.autoplay?.pauseOnHover) {
+              sliderHook.pauseAutoplay();
+            }
+          }}
+          onMouseLeave={() => {
+            if (backgroundSlider.autoplay?.pauseOnHover) {
+              sliderHook.resumeAutoplay();
+            }
+          }}
+        >
+          {slides.map((slide, index) => {
+            const isActive = index === currentIndex;
+            const slideRef = slideRefs[index];
+            const videoRef = videoRefs[index];
+
+            return (
+              <div
+                key={index}
+                ref={slideRef}
+                className={`${HERO.SELECTORS.SLIDER_ITEM.replace('.', '')} ${
+                  isActive ? HERO.CLASSES.SLIDER_ITEM_ACTIVE : ''
+                }`}
+              >
+                {slide.type === 'image' ? (
+                  <img
+                    src={slide.src}
+                    alt={slide.alt || 'Background slide'}
+                    className={HERO.SELECTORS.BG_IMAGE.replace('.', '')}
+                  />
+                ) : (
+                  <video
+                    ref={videoRef as React.LegacyRef<HTMLVideoElement>}
+                    className="c-hero__video"
+                    autoPlay={slide.videoOptions?.autoplay !== false}
+                    loop={slide.videoOptions?.loop !== false}
+                    muted={slide.videoOptions?.muted !== false}
+                    playsInline
+                    poster={slide.videoOptions?.posterUrl}
+                  >
+                    <source
+                      src={slide.src}
+                      type={`video/${slide.src.split('.').pop() || 'mp4'}`}
+                    />
+                    Your browser does not support the video tag.
+                  </video>
+                )}
+              </div>
+            );
+          })}
+          {showOverlay && <div className={HERO.SELECTORS.OVERLAY.replace('.', '')}></div>}
+        </div>
+      );
+    }
+
+    // Fall back to single background image/video
     if (!hasBackgroundImage && !videoBackground) return null;
 
     return (

package/src/components/{Tab/Tab.stories.tsx → Tabs/Tabs.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { Tab } from './Tab';
+import { Tabs } from './Tabs';
 
 export default {
-  title: 'Components/Tab',
-  component: Tab,
+  title: 'Components/Tabs',
+  component: Tabs,
   argTypes: {
     activeIndex: {
       control: { type: 'number' },
@@ -16,11 +16,11 @@ export default {
       description: 'Enable glass morphism effect',
     },
   },
-} as Meta<typeof Tab>;
+} as Meta<typeof Tabs>;
 
-const Template: StoryFn<typeof Tab> = args => (
+const Template: StoryFn<typeof Tabs> = args => (
   <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px' }}>
-    <Tab {...args} />
+    <Tabs {...args} />
   </div>
 );
 
@@ -164,7 +164,7 @@ export const Glass = {
       }}
     >
       <div style={{ width: '100%', maxWidth: '600px' }}>
-        <Tab {...args} />
+        <Tabs {...args} />
       </div>
     </div>
   ),
@@ -211,8 +211,8 @@ export const GlassCustom = {
       }}
     >
       <div style={{ width: '100%', maxWidth: '600px' }}>
-        <Tab {...args} />
+        <Tabs {...args} />
       </div>
     </div>
   ),
-};
+};

package/src/components/{Tab/Tab.tsx → Tabs/Tabs.tsx}

@@ -3,7 +3,7 @@ import { TAB } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 
-export interface TabItemProps {
+export interface TabsItemProps {
   /**
    * Label for the tab
    */
@@ -25,11 +25,11 @@ export interface TabItemProps {
   className?: string;
 }
 
-export interface TabProps {
+export interface TabsProps {
   /**
    * Array of tab items
    */
-  items: TabItemProps[];
+  items: TabsItemProps[];
 
   /**
    * Initial active tab index
@@ -59,9 +59,9 @@ export interface TabProps {
 }
 
 /**
- * Tab component for switching between different content panels
+ * Tabs component for switching between different content panels
  */
-export const Tab: React.FC<TabProps> = ({
+export const Tabs: React.FC<TabsProps> = ({
   items,
   activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
   onTabChange,
@@ -139,6 +139,6 @@ export const Tab: React.FC<TabProps> = ({
   return tabContent;
 };
 
-Tab.displayName = 'Tab';
+Tabs.displayName = 'Tabs';
 
-export default Tab;
+export default Tabs;

package/src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabsItemProps } from './Tabs';

package/src/components/index.ts

@@ -10,6 +10,8 @@ export { default as Breadcrumb, type BreadcrumbProps } from './Breadcrumb/Breadc
 export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Callout, type CalloutProps } from './Callout/Callout';
 export { default as Card, type CardProps } from './Card/Card';
+// Card sub-components
+export { default as ElevationCard, type ElevationCardProps } from './Card/ElevationCard';
 export {
   AnimatedChart,
   AreaChart,
@@ -29,7 +31,6 @@ export {
   ScatterChart,
   TreemapChart,
   WaterfallChart,
-  type AnimatedChartProps,
   type AreaChartProps,
   type BarChartProps,
   type BubbleChartProps,
@@ -87,6 +88,9 @@ export { default as Textarea, type TextareaProps } from './Form/Textarea';
 export { default as Hero, type HeroProps } from './Hero/Hero';
 export { default as Icon, type IconProps } from './Icon/Icon';
 export { default as List, type ListProps } from './List/List';
+// List sub-components
+export { ListGroup } from './List/ListGroup';
+export type { ListGroupProps } from '../lib/types/components';
 export { default as Messages, type MessagesProps } from './Messages/Messages';
 export { default as Modal, type ModalProps } from './Modal/Modal';
 export { default as Nav, type NavProps } from './Navigation/Nav/Nav';
@@ -101,6 +105,12 @@ export {
   default as SideMenuList,
   type SideMenuListProps,
 } from './Navigation/SideMenu/SideMenuList';
+// Menu components
+export { Menu, MenuItem, MenuDivider, type MenuProps, type MenuItemProps, type MenuDividerProps } from './Navigation/Menu/Menu';
+export { MegaMenu, MegaMenuColumn, MegaMenuLink } from './Navigation/Menu/MegaMenu';
+export type { MegaMenuProps, MegaMenuColumnProps, MegaMenuLinkProps } from '../lib/types/components';
+// Navigation sub-components
+export { NavDropdown, type NavDropdownProps } from './Navigation/Nav/NavDropdown';
 export { default as Pagination, type PaginationProps } from './Pagination/Pagination';
 export { default as PhotoViewer, type PhotoViewerProps } from './PhotoViewer/PhotoViewer';
 export { default as Popover, type PopoverProps } from './Popover/Popover';
@@ -112,7 +122,7 @@ export { default as SectionIntro, type SectionIntroProps } from './SectionIntro/
 export { Slider } from './Slider/Slider';
 export { default as Spinner, type SpinnerProps } from './Spinner/Spinner';
 export { default as Steps, type StepsProps } from './Steps/Steps';
-export { default as Tab, type TabProps } from './Tab/Tab';
+export { default as Tabs, type TabsProps } from './Tabs/Tabs';
 export { default as Testimonial, type TestimonialProps } from './Testimonial/Testimonial';
 export { default as Todo, type TodoProps } from './Todo/Todo';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';

package/src/lib/composables/useHero.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { HeroProps, HeroAlignment } from '../types/components';
 import { HERO } from '../constants/components';
+import { useHeroBackgroundSlider, UseHeroBackgroundSliderResult } from './useHeroBackgroundSlider';
 
 /**
  * Hero hook result interface
@@ -55,6 +56,16 @@ interface UseHeroResult {
    * Remove parallax effect
    */
   removeParallaxEffect: (element: HTMLElement) => void;
+
+  /**
+   * Background slider hook result (if slider is enabled)
+   */
+  backgroundSlider?: UseHeroBackgroundSliderResult;
+
+  /**
+   * Whether background slider is enabled
+   */
+  hasBackgroundSlider: boolean;
 }
 
 /**
@@ -80,10 +91,25 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
     ...initialProps,
   };
 
+  /**
+   * Check if background slider is enabled
+   */
+  const hasBackgroundSlider = !!defaultProps.backgroundSlider;
+
+  /**
+   * Initialize background slider hook if enabled
+   */
+  const backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider
+    ? useHeroBackgroundSlider(defaultProps.backgroundSlider)
+    : undefined;
+
   /**
    * Check if the hero has a background image
+   * Slider takes precedence over single background image
    */
-  const hasBackgroundImage = !!defaultProps.backgroundImageSrc;
+  const hasBackgroundImage = hasBackgroundSlider
+    ? true
+    : !!defaultProps.backgroundImageSrc || !!defaultProps.videoBackground;
 
   /**
    * Check if the hero has a foreground image
@@ -151,11 +177,12 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
     }
   };
 
-  // Apply parallax effect if enabled
+  // Apply parallax effect if enabled (disabled when slider is active)
   useEffect(() => {
     const heroElement = heroRef.current;
 
-    if (heroElement && defaultProps.parallax && hasBackgroundImage) {
+    // Disable parallax when slider is active (conflicts with transitions)
+    if (heroElement && defaultProps.parallax && hasBackgroundImage && !hasBackgroundSlider) {
       applyParallaxEffect(heroElement, defaultProps.parallaxIntensity);
     }
 
@@ -164,7 +191,7 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
         removeParallaxEffect(heroElement);
       }
     };
-  }, [defaultProps.parallax, defaultProps.parallaxIntensity, hasBackgroundImage]);
+  }, [defaultProps.parallax, defaultProps.parallaxIntensity, hasBackgroundImage, hasBackgroundSlider]);
 
   /**
    * Generate hero class names based on props
@@ -246,5 +273,7 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
     videoRef,
     applyParallaxEffect,
     removeParallaxEffect,
+    backgroundSlider,
+    hasBackgroundSlider,
   };
 }