@shohojdhara/atomix 0.3.15 → 0.4.0

package/dist/index.js

@@ -9087,7 +9087,9 @@ function getRowId$1(row, rowKey) {
             }))) return !1;
             // Apply column-specific filters
                         for (let i = 0; i < activeColumnFilters.length; i++) {
-                const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = activeColumnFilters[i], cellValue = row[key];
+                const filter = activeColumnFilters[i];
+                if (!filter) continue;
+                const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = filter, cellValue = row[key];
                 if (null == cellValue) return !1;
                 // Use custom filter function if provided
                                 var _context2;
@@ -11075,6 +11077,8 @@ function useHero(initialProps) {
         contentWidth: void 0,
         parallax: !1,
         parallaxIntensity: .5,
+        headingLevel: "h1",
+        reverseOnMobile: !1,
         ...initialProps
     }, hasBackgroundSlider = !!defaultProps.backgroundSlider, backgroundSliderResult = 
     /**
@@ -11155,7 +11159,9 @@ function useHero(initialProps) {
         autoplay: {
             delay: 5e3,
             pauseOnHover: !0
-        }
+        },
+        transition: "fade",
+        transitionDuration: 1e3
     }), backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider ? backgroundSliderResult : void 0, hasBackgroundImage = !!hasBackgroundSlider || !!defaultProps.backgroundImageSrc || !!defaultProps.videoBackground, hasForegroundImage = !!defaultProps.imageSrc, useGridLayout = hasForegroundImage && "center" !== defaultProps.alignment, applyParallaxEffect = (element, intensity = .5) => {
         if (!element) return;
         // Ensure intensity is between 0 and 1
@@ -11206,13 +11212,20 @@ function useHero(initialProps) {
             defaultProps.videoBackground && classes.push("c-hero--video"), baseClassName && classes.push(baseClassName), 
             classes.join(" ");
         },
-        generateImageColClass: (size = defaultProps.imageColSize || 7) => {
+        generateImageColClass: (size = defaultProps.imageColSize || 7, customClass) => {
             const classes = [ `o-grid__col o-grid__col--md-${size}` ];
             // Add responsive margin if needed for mobile view
                         return "left" === defaultProps.alignment && classes.push("u-mt-5 u-mt-md-0"), 
-            classes.join(" ");
+            // Handle mobile stacking order
+            defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-first u-order-md-last") : classes.push("u-order-last u-order-md-first")), 
+            customClass && classes.push(customClass), classes.join(" ");
+        },
+        generateContentColClass: (size = defaultProps.contentColSize || 5, customClass) => {
+            const classes = [ `o-grid__col o-grid__col--md-${size}` ];
+            // Handle mobile stacking order
+                        return defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-last u-order-md-first") : classes.push("u-order-first u-order-md-last")), 
+            customClass && classes.push(customClass), classes.join(" ");
         },
-        generateContentColClass: (size = defaultProps.contentColSize || 5) => `o-grid__col o-grid__col--md-${size}`,
         hasBackgroundImage: hasBackgroundImage,
         hasForegroundImage: hasForegroundImage,
         useGridLayout: useGridLayout,
@@ -13484,12 +13497,14 @@ const FooterLink =  React.forwardRef((({href: href, icon: icon, external: extern
 
 FooterLink.displayName = "FooterLink";
 
-const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, contentColSize: contentColSize = 5, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
+const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, imageColClassName: imageColClassName, imageColStyle: imageColStyle, contentColSize: contentColSize = 5, contentColClassName: contentColClassName, contentColStyle: contentColStyle, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
     autoplay: !0,
     loop: !0,
     muted: !0
-}, backgroundSlider: backgroundSlider}) => {
-    const {generateHeroClassNames: generateHeroClassNames, generateImageColClass: generateImageColClass, generateContentColClass: generateContentColClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, useGridLayout: useGridLayout, heroRef: heroRef, videoRef: videoRef, backgroundSlider: sliderHook, hasBackgroundSlider: hasBackgroundSlider} = useHero({
+}, backgroundSlider: backgroundSlider, headingLevel: headingLevel = "h1", reverseOnMobile: reverseOnMobile = !1, parts: parts, ...rest}) => {
+    // Define dynamic heading tag
+    const HeadingTag = headingLevel, {generateHeroClassNames: generateHeroClassNames, generateImageColClass: generateImageColClass, generateContentColClass: generateContentColClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, useGridLayout: useGridLayout, heroRef: heroRef, videoRef: videoRef, backgroundSlider: sliderHook, hasBackgroundSlider: hasBackgroundSlider} = useHero({
+        title: title,
         alignment: alignment,
         imageColSize: imageColSize,
         contentColSize: contentColSize,
@@ -13501,7 +13516,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         parallax: parallax,
         parallaxIntensity: parallaxIntensity,
         videoBackground: videoBackground,
-        backgroundSlider: backgroundSlider
+        backgroundSlider: backgroundSlider,
+        reverseOnMobile: reverseOnMobile
     }), heroStyle = {
         ...contentWidth ? {
             "--atomix-hero-content-width": contentWidth
@@ -13525,18 +13541,23 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         });
     }, renderContent = () => {
         const content = jsxRuntime.jsxs("div", {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: [ subtitle && jsxRuntime.jsx("p", {
-                className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                style: parts?.subtitle?.style,
                 children: subtitle
-            }), jsxRuntime.jsx("h1", {
-                className: HERO.SELECTORS.TITLE.replace(".", ""),
+            }), jsxRuntime.jsx(HeadingTag, {
+                className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                style: parts?.title?.style,
                 children: title
             }), text && jsxRuntime.jsx("p", {
-                className: HERO.SELECTORS.TEXT.replace(".", ""),
+                className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                style: parts?.text?.style,
                 children: text
             }), actions && jsxRuntime.jsx("div", {
-                className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                style: parts?.actions?.style,
                 children: actions
             }) ]
         });
@@ -13546,7 +13567,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         glass ? 
         // If glass is true, use default glass props
         !0 === glass ? jsxRuntime.jsx("div", {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: jsxRuntime.jsx(AtomixGlass, {
                 displacementScale: 60,
                 blurAmount: 3,
@@ -13558,71 +13580,93 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                 children: jsxRuntime.jsxs("div", {
                     className: "u-p-4",
                     children: [ subtitle && jsxRuntime.jsx("p", {
-                        className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                        style: parts?.subtitle?.style,
                         children: subtitle
-                    }), jsxRuntime.jsx("h1", {
-                        className: HERO.SELECTORS.TITLE.replace(".", ""),
+                    }), jsxRuntime.jsx(HeadingTag, {
+                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                        style: parts?.title?.style,
                         children: title
                     }), text && jsxRuntime.jsx("p", {
-                        className: HERO.SELECTORS.TEXT.replace(".", ""),
+                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                        style: parts?.text?.style,
                         children: text
                     }), actions && jsxRuntime.jsx("div", {
-                        className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                        style: parts?.actions?.style,
                         children: actions
                     }) ]
                 })
             })
         }) : jsxRuntime.jsx("div", {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: jsxRuntime.jsx(AtomixGlass, {
                 ...glass,
                 children: jsxRuntime.jsxs("div", {
                     className: "u-p-4",
                     children: [ subtitle && jsxRuntime.jsx("p", {
-                        className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                        style: parts?.subtitle?.style,
                         children: subtitle
-                    }), jsxRuntime.jsx("h1", {
-                        className: HERO.SELECTORS.TITLE.replace(".", ""),
+                    }), jsxRuntime.jsx(HeadingTag, {
+                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                        style: parts?.title?.style,
                         children: title
                     }), text && jsxRuntime.jsx("p", {
-                        className: HERO.SELECTORS.TEXT.replace(".", ""),
+                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                        style: parts?.text?.style,
                         children: text
                     }), actions && jsxRuntime.jsx("div", {
-                        className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                        style: parts?.actions?.style,
                         children: actions
                     }) ]
                 })
             })
         }) : content;
     }, renderForegroundImage = () => hasForegroundImage ? "center" === alignment ? jsxRuntime.jsx("div", {
-        className: HERO.SELECTORS.IMAGE_WRAPPER.replace(".", ""),
+        className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${imageColClassName || ""} ${parts?.imageWrapper?.className || ""}`.trim(),
+        style: {
+            ...imageColStyle,
+            ...parts?.imageWrapper?.style
+        },
         children: jsxRuntime.jsx("img", {
             src: imageSrc,
             alt: imageAlt,
-            className: HERO.SELECTORS.IMAGE.replace(".", "")
+            className: `${HERO.SELECTORS.IMAGE.replace(".", "")} ${parts?.image?.className || ""}`.trim(),
+            style: parts?.image?.style
         })
     }) : jsxRuntime.jsx("div", {
-        className: generateImageColClass(),
+        className: `${generateImageColClass(imageColSize, imageColClassName)} ${parts?.imageWrapper?.className || ""}`.trim(),
+        style: {
+            ...imageColStyle,
+            ...parts?.imageWrapper?.style
+        },
         children: jsxRuntime.jsx("img", {
             src: imageSrc,
             alt: imageAlt,
-            className: HERO.SELECTORS.IMAGE.replace(".", "")
+            className: `${HERO.SELECTORS.IMAGE.replace(".", "")} ${parts?.image?.className || ""}`.trim(),
+            style: parts?.image?.style
         })
     }) : null;
-    // Create custom style for hero element with content width if provided
-        return jsxRuntime.jsxs("div", {
+    return jsxRuntime.jsxs("div", {
         ref: heroRef,
-        className: generateHeroClassNames(className),
-        style: heroStyle,
+        className: `${generateHeroClassNames(className)} ${parts?.root?.className || ""}`.trim(),
+        style: {
+            ...heroStyle,
+            ...parts?.root?.style
+        },
         "data-parallax": parallax ? "true" : void 0,
         "data-parallax-intensity": parallax ? parallaxIntensity : void 0,
+        ...rest,
         children: [ (() => {
             // Render background slider if configured
             if (hasBackgroundSlider && backgroundSlider && sliderHook) {
                 const {slides: slides, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = backgroundSlider, {currentIndex: currentIndex, slideRefs: slideRefs, videoRefs: videoRefs} = sliderHook;
                 // Determine transition class
                 let transitionClass = HERO.CLASSES.SLIDER_FADE;
-                return "slide" === transition ? transitionClass = HERO.CLASSES.SLIDER_SLIDE : "custom" === transition && (transitionClass = HERO.CLASSES.SLIDER_CUSTOM), 
+                return "slide" === transition && (transitionClass = HERO.CLASSES.SLIDER_SLIDE), 
                 jsxRuntime.jsxs("div", {
                     className: `${HERO.SELECTORS.SLIDER.replace(".", "")} ${transitionClass}`,
                     style: {
@@ -13639,57 +13683,68 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                         return jsxRuntime.jsx("div", {
                             ref: slideRef,
                             className: `${HERO.SELECTORS.SLIDER_ITEM.replace(".", "")} ${isActive ? HERO.CLASSES.SLIDER_ITEM_ACTIVE : ""}`,
-                            children: "image" === slide.type ? jsxRuntime.jsx("img", {
-                                src: slide.src,
-                                alt: slide.alt || "Background slide",
-                                className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
-                            }) : jsxRuntime.jsxs("video", {
+                            "aria-hidden": !isActive,
+                            children: "video" === slide.type ? jsxRuntime.jsxs("video", {
                                 ref: videoRef,
-                                className: "c-hero__video",
-                                autoPlay: !1 !== slide.videoOptions?.autoplay,
-                                loop: !1 !== slide.videoOptions?.loop,
-                                muted: !1 !== slide.videoOptions?.muted,
+                                className: "c-hero__bg-video",
+                                src: slide.src,
+                                poster: slide.videoOptions?.posterUrl || slide.alt,
+                                muted: slide.videoOptions?.muted ?? !0,
+                                loop: slide.videoOptions?.loop ?? !0,
                                 playsInline: !0,
-                                poster: slide.videoOptions?.posterUrl,
+                                "aria-hidden": "true",
+                                autoPlay: !1 !== slide.videoOptions?.autoplay,
                                 children: [ jsxRuntime.jsx("source", {
                                     src: slide.src,
                                     type: `video/${slide.src.split(".").pop() || "mp4"}`
                                 }), "Your browser does not support the video tag." ]
+                            }) : jsxRuntime.jsx("img", {
+                                src: slide.src,
+                                alt: slide.alt || "Background slide",
+                                className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
                             })
                         }, index);
                     })), showOverlay && jsxRuntime.jsx("div", {
-                        className: HERO.SELECTORS.OVERLAY.replace(".", "")
+                        className: `${HERO.SELECTORS.OVERLAY.replace(".", "")} ${parts?.overlay?.className || ""}`.trim(),
+                        style: parts?.overlay?.style
                     }) ]
                 });
             }
             // Fall back to single background image/video
                         return hasBackgroundImage || videoBackground ? jsxRuntime.jsxs("div", {
-                className: HERO.SELECTORS.BG.replace(".", ""),
+                className: `${HERO.SELECTORS.BG.replace(".", "")} ${parts?.background?.className || ""}`.trim(),
+                style: parts?.background?.style,
                 children: [ backgroundImageSrc && jsxRuntime.jsx("img", {
                     src: backgroundImageSrc,
                     alt: "Background",
                     className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
                 }), renderVideoBackground(), showOverlay && jsxRuntime.jsx("div", {
-                    className: HERO.SELECTORS.OVERLAY.replace(".", "")
+                    className: `${HERO.SELECTORS.OVERLAY.replace(".", "")} ${parts?.overlay?.className || ""}`.trim(),
+                    style: parts?.overlay?.style
                 }) ]
             }) : null;
         })(), jsxRuntime.jsx("div", {
-            className: `${HERO.SELECTORS.CONTAINER.replace(".", "")} o-container`,
+            className: `${HERO.SELECTORS.CONTAINER.replace(".", "")} o-container ${parts?.container?.className || ""}`.trim(),
+            style: parts?.container?.style,
             children: children ? jsxRuntime.jsx("div", {
-                className: HERO.SELECTORS.GRID.replace(".", ""),
+                className: `${HERO.SELECTORS.GRID.replace(".", "")} ${parts?.grid?.className || ""}`.trim(),
+                style: parts?.grid?.style,
                 children: children
             }) : useGridLayout ? jsxRuntime.jsx("div", {
-                className: `${HERO.SELECTORS.GRID.replace(".", "")} o-grid`,
+                className: `${HERO.SELECTORS.GRID.replace(".", "")} o-grid ${parts?.grid?.className || ""}`.trim(),
+                style: parts?.grid?.style,
                 children: 
                 // For left-aligned content, render content first then image
                 "left" === alignment ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [ jsxRuntime.jsx("div", {
-                        className: generateContentColClass(),
+                        className: generateContentColClass(contentColSize, contentColClassName),
+                        style: contentColStyle,
                         children: renderContent()
                     }), renderForegroundImage() ]
                 }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [ renderForegroundImage(), jsxRuntime.jsx("div", {
-                        className: generateContentColClass(),
+                        className: generateContentColClass(contentColSize, contentColClassName),
+                        style: contentColStyle,
                         children: renderContent()
                     }) ]
                 })
@@ -17344,7 +17399,7 @@ const Toggle = ({checked: controlledChecked, defaultChecked: defaultChecked = !1
         if (disabled) return;
         const nextChecked = !isChecked;
         isControlled || setInternalChecked(nextChecked), onChange?.(nextChecked);
-    }), [ disabled, isChecked, isControlled, onChange ]), toggleClass = [ "c-toggle", isChecked && TOGGLE.CLASSES.IS_ON, disabled && "is-disabled", className ].filter(Boolean).join(" "), toggleContent = jsxRuntime.jsx("div", {
+    }), [ disabled, isChecked, isControlled, onChange ]), toggleClass = [ "c-toggle", isChecked && TOGGLE.CLASSES.IS_ON, disabled && "is-disabled", glass && "c-toggle--glass", className ].filter(Boolean).join(" "), toggleContent = jsxRuntime.jsx("div", {
         className: toggleClass,
         style: style,
         onClick: handleClick,