@shohojdhara/atomix 0.5.1 → 0.5.4

package/dist/heavy.d.ts

@@ -578,7 +578,7 @@ declare global {
  * AtomixGlass - wrapped with React.memo to prevent unnecessary re-renders.
  * Ref is forwarded to the root `<div>` element.
  */
-declare const AtomixGlass: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<AtomixGlassProps & React$1.RefAttributes<HTMLDivElement>>>;
+declare const AtomixGlass: React$1.NamedExoticComponent<AtomixGlassProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Advanced Video Player Component

package/dist/heavy.js

@@ -3575,11 +3575,13 @@ const VideoPlayer =  forwardRef((({src: src, type: type = "video", youtubeId: yo
                 detectBorderRadius();
         // Create ResizeObserver to watch for style changes
         let resizeObserver = null;
-        return "undefined" != typeof ResizeObserver && containerRef.current && (resizeObserver = new ResizeObserver(detectBorderRadius), 
+        "undefined" != typeof ResizeObserver && containerRef.current && (resizeObserver = new ResizeObserver(detectBorderRadius), 
         resizeObserver.observe(containerRef.current)), 
         // Also listen for window resize (in case styles change)
-        window.addEventListener("resize", detectBorderRadius), () => {
-            window.removeEventListener("resize", detectBorderRadius), resizeObserver && containerRef.current && (resizeObserver.unobserve(containerRef.current), 
+        window.addEventListener("resize", detectBorderRadius);
+        const currentContainer = containerRef.current;
+        return () => {
+            window.removeEventListener("resize", detectBorderRadius), resizeObserver && currentContainer && (resizeObserver.unobserve(currentContainer), 
             resizeObserver.disconnect());
         };
     }), []);
@@ -3914,7 +3916,7 @@ VideoPlayer.displayName = "VideoPlayer";
  */
 const MasonryGrid =  forwardRef((({children: children, className: className = "", xs: xs = 1, sm: sm, md: md, lg: lg, xl: xl, xxl: xxl, gap: gap = 16, animate: animate = !0, imagesLoaded: imagesLoaded = !0, onLayoutComplete: onLayoutComplete, onImageLoad: onImageLoad, ...props}, ref) => {
     // === REFS & STATE ===
-    const [columns, setColumns] = useState(xs), [positions, setPositions] = useState([]), [layoutComplete, setLayoutComplete] = useState(!1), [loadingImages, setLoadingImages] = useState(!1), containerRef = useRef(null), columnHeights = useRef([]), imagesLoadedCount = useRef(0), totalImagesCount = useRef(0), imageElements = useRef(new Map);
+    const [columns, setColumns] = useState(xs), [positions, setPositions] = useState([]), [, setLayoutComplete] = useState(!1), [loadingImages, setLoadingImages] = useState(!1), containerRef = useRef(null), columnHeights = useRef([]), imagesLoadedCount = useRef(0), totalImagesCount = useRef(0), imageElements = useRef(new Map);
     useEffect((() => {
         setLoadingImages(!!imagesLoaded);
     }), [ columns, imagesLoaded ]), 
@@ -3943,34 +3945,45 @@ const MasonryGrid =  forwardRef((({children: children, className: className = ""
             });
         })), setItems(newItems);
     }), [ children ]);
-    // === TRACK & MANAGE IMAGES ===
-    const handleImageLoad = useCallback((img => {
-        if (!imageElements.current.get(img)) {
-            // Add loaded class for animation
-            if (imageElements.current.set(img, !0), imagesLoadedCount.current += 1, containerRef.current && imagesLoaded) {
-                const itemElement = img.closest(".o-masonry-grid > div");
-                itemElement && (itemElement.offsetHeight, itemElement.classList.add("o-masonry-grid__item-loaded"), 
-                itemElement.classList.remove("o-masonry-grid__item-loading"));
+    // === MANAGE ITEM LAYOUT ===
+    const calculateLayout = useCallback((() => {
+        if (!containerRef.current || 0 === items.length) return;
+        const colWidth = (containerRef.current.offsetWidth - gap * (columns - 1)) / columns;
+        columnHeights.current = Array(columns).fill(0);
+        const newPositions = [];
+        items.forEach(((item, index) => {
+            if (item.ref.current) {
+                // Find the shortest column
+                const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current)), left = shortestCol * (colWidth + gap), top = columnHeights.current[shortestCol] ?? 0, height = item.ref.current.offsetHeight;
+                columnHeights.current[shortestCol] = top + height + gap, newPositions[index] = {
+                    left: left,
+                    top: top,
+                    width: colWidth,
+                    height: height
+                };
             }
-            // Ensure layout is recalculated after DOM paints the item image (prevents overlap on slow/late image loads)
-                        requestAnimationFrame((() => {
-                requestAnimationFrame((() => {
-                    calculateLayout();
-                }));
-            })), onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current), 
-            // If all images have loaded, update loading state and complete layout
-            imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0 && (setLayoutComplete(!0), 
-            setLoadingImages(!1), // This ensures the loading class is removed *immediately* after images load
-            // Force a double requestAnimationFrame for final layout calculation after all images are loaded (guarantees DOM paint)
-            requestAnimationFrame((() => {
-                requestAnimationFrame((() => {
-                    calculateLayout(), 
-                    // As a failsafe, if still present for some render lag, force another setLoadingImages(false)
-                    setLoadingImages(!1);
-                }));
-            })), onLayoutComplete?.());
+        })), setPositions(newPositions);
+    }), [ items, columns, gap ]), handleImageLoad = useCallback((img => {
+        if (imageElements.current.get(img)) return;
+        // Add loaded class for animation
+        if (imageElements.current.set(img, !0), imagesLoadedCount.current += 1, containerRef.current && imagesLoaded) {
+            const itemElement = img.closest(".o-masonry-grid > div");
+            itemElement && (itemElement.offsetHeight, itemElement.classList.add("o-masonry-grid__item-loaded"), 
+            itemElement.classList.remove("o-masonry-grid__item-loading"));
         }
-    }), [ onImageLoad, onLayoutComplete, imagesLoaded ]), trackImages = useCallback((() => {
+        // Schedule layout recalculation after next paint to prevent overlap
+                const scheduleLayoutUpdate = () => {
+            const frameId = requestAnimationFrame((() => {
+                onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current), calculateLayout();
+            }));
+            return () => cancelAnimationFrame(frameId);
+        }, cleanup = scheduleLayoutUpdate();
+        // Clean up previous scheduled updates
+                // If all images have loaded, update loading state and complete layout
+        imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0 && (setLayoutComplete(!0), 
+        setLoadingImages(!1), setTimeout((() => cleanup()), 0), // Clean up after current execution
+        scheduleLayoutUpdate(), onLayoutComplete?.());
+    }), [ onImageLoad, onLayoutComplete, imagesLoaded, calculateLayout ]), trackImages = useCallback((() => {
         if (!imagesLoaded || !containerRef.current) return;
         imageElements.current.clear(), imagesLoadedCount.current = 0;
         const images = containerRef.current.querySelectorAll("img");
@@ -3989,30 +4002,21 @@ const MasonryGrid =  forwardRef((({children: children, className: className = ""
                 img.removeEventListener("error", masonryImg._masonryLoadHandler), delete masonryImg._masonryLoadHandler);
             }));
         });
-    }), [ imagesLoaded, handleImageLoad, onLayoutComplete ]), calculateLayout = useCallback((() => {
-        if (!containerRef.current || 0 === items.length) return;
-        const colWidth = (containerRef.current.offsetWidth - gap * (columns - 1)) / columns;
-        columnHeights.current = Array(columns).fill(0);
-        const newPositions = [];
-        items.forEach(((item, index) => {
-            if (item.ref.current) {
-                // Find the shortest column
-                const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current)), left = shortestCol * (colWidth + gap), top = columnHeights.current[shortestCol] ?? 0, height = item.ref.current.offsetHeight;
-                columnHeights.current[shortestCol] = top + height + gap, newPositions[index] = {
-                    left: left,
-                    top: top,
-                    width: colWidth,
-                    height: height
-                };
-            }
-        })), setPositions(newPositions);
-    }), [ items, columns, gap ]);
-    // === OBSERVE CONTAINER RESIZE ===
+    }), [ imagesLoaded, handleImageLoad, onLayoutComplete ]);
+    // === TRACK & MANAGE IMAGES ===
+        // === OBSERVE CONTAINER RESIZE ===
     useEffect((() => {
         if (!containerRef.current) return;
-        let animationFrame = null;
-        const observer = new ResizeObserver((() => {
-            animationFrame && cancelAnimationFrame(animationFrame), animationFrame = requestAnimationFrame((() => calculateLayout()));
+        let animationFrame = null, lastWidth = 0;
+        const observer = new ResizeObserver((entries => {
+            const entry = entries[0];
+            if (!entry) return;
+            const currentWidth = entry.contentRect.width;
+            // Only recalculate if width actually changed (prevents excessive calculations)
+                        Math.abs(currentWidth - lastWidth) > 1 && (animationFrame && cancelAnimationFrame(animationFrame), 
+            animationFrame = requestAnimationFrame((() => {
+                calculateLayout(), lastWidth = currentWidth;
+            })));
         }));
         return observer.observe(containerRef.current), () => {
             observer.disconnect(), animationFrame && cancelAnimationFrame(animationFrame);
@@ -4023,24 +4027,21 @@ const MasonryGrid =  forwardRef((({children: children, className: className = ""
     setLayoutComplete(!0), void setLoadingImages(!1))
     // Only reset layoutComplete when items or columns change
     ), [ items, columns, calculateLayout, imagesLoaded, trackImages ]), 
-    // === NEW: Add ResizeObservers to all grid items for bulletproof image+content measurement ===
+    // === ADD RESIZEOBSERVERS TO GRID ITEMS FOR DYNAMIC CONTENT MEASUREMENT ===
     React.useEffect((() => {
-        // Clean up old observers if items ever change
         const observers = [];
+        let animationFrame = null;
+        // Debounced layout calculation for item resize events
+                const debouncedCalculateLayout = () => {
+            animationFrame && cancelAnimationFrame(animationFrame), animationFrame = requestAnimationFrame(calculateLayout);
+        };
         return items.forEach((item => {
             if (item.ref.current) {
-                const obs = new ResizeObserver((() => {
-                    // Double rAF: ensures layout only runs after DOM/paint/async renders
-                    requestAnimationFrame((() => {
-                        requestAnimationFrame((() => {
-                            calculateLayout();
-                        }));
-                    }));
-                }));
+                const obs = new ResizeObserver(debouncedCalculateLayout);
                 obs.observe(item.ref.current), observers.push(obs);
             }
         })), () => {
-            observers.forEach((obs => obs.disconnect()));
+            observers.forEach((obs => obs.disconnect())), animationFrame && cancelAnimationFrame(animationFrame);
         };
     }), [ items, calculateLayout ]);
     // Ensure loadingImages state resets when items/columns/imagesLoaded change
@@ -4351,9 +4352,48 @@ class ThemeNaming {
     }
 }
 
+/**
+ * Render a slot with the given props
+ *
+ * Priority order:
+ * 1. render function
+ * 2. component
+ * 3. children
+ * 4. fallback
+ *
+ * @example
+ * renderSlot(
+ *   { render: (props) => <CustomButton {...props} /> },
+ *   { onClick: handleClick, children: 'Click me' }
+ * )
+ */
+function renderSlot(slot, props, fallback) {
+    // No slot provided, use fallback
+    if (!slot) return fallback;
+    // Slot is a plain React node
+        if ( React.isValidElement(slot) || "string" == typeof slot || "number" == typeof slot) return slot;
+    // Slot is an object with rendering options
+        if ("object" == typeof slot && null !== slot) {
+        const slotObj = slot;
+        // Priority 1: render function
+                if (slotObj.render && "function" == typeof slotObj.render) return slotObj.render(props);
+        // Priority 2: component
+                if (slotObj.component) {
+            const Component = slotObj.component;
+            return jsx(Component, {
+                ...props
+            });
+        }
+        // Priority 3: children
+                if (void 0 !== slotObj.children) return slotObj.children;
+    }
+    // Fallback
+        return fallback;
+}
+
 ThemeNaming.prefix = "atomix";
 
-const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, ...props}, ref) => {
+const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, slots: slots, ...props}, ref) => {
     const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href), iconElement = iconName ? jsx(Icon, {
         name: iconName,
         size: iconSize
@@ -4369,17 +4409,28 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         children: [ loading && jsx("span", {
             className: ThemeNaming.bemClass("btn", "spinner"),
             "aria-hidden": "true",
-            children: jsx(Spinner, {
+            children: renderSlot(slots?.spinner, {
+                className: ThemeNaming.bemClass("btn", "spinner"),
                 size: spinnerSize,
                 variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
-            })
+            }, jsx(Spinner, {
+                size: spinnerSize,
+                variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
+            }))
         }), iconElement && !loading && jsx("span", {
             className: ThemeNaming.bemClass("btn", "icon"),
             "aria-hidden": "true",
-            children: iconElement
+            children: renderSlot(slots?.icon, {
+                className: ThemeNaming.bemClass("btn", "icon"),
+                children: iconElement,
+                size: iconSize
+            }, iconElement)
         }), !iconOnly && buttonText && jsx("span", {
             className: ThemeNaming.bemClass("btn", "label"),
-            children: buttonText
+            children: renderSlot(slots?.label, {
+                className: ThemeNaming.bemClass("btn", "label"),
+                children: buttonText
+            }, buttonText)
         }) ]
     }), buttonProps = {
         className: buttonClass,
@@ -4396,48 +4447,59 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         tabIndex: void 0 !== tabIndex ? tabIndex : isDisabled ? -1 : 0,
         style: style,
         ...props
-    };
-    // Determine if we should render as a link
-    // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
-    // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
-    // This is a safe fallback for disabled links.
-        let content;
-    // Render as anchor if href is provided
-        if (shouldRenderAsLink) 
-    // Use custom linkComponent if provided (e.g., Next.js Link)
-    if (linkComponent) {
-        const LinkComp = linkComponent, linkProps = {
+    }, buttonChildren = renderSlot(slots?.root, {
+        className: buttonClass,
+        children: buttonContent,
+        disabled: isDisabled,
+        loading: loading,
+        onClick: handleClickEvent,
+        type: type,
+        "aria-label": safeAriaLabel,
+        "aria-disabled": isDisabled,
+        "aria-busy": loading
+    }, (() => {
+        // Render as anchor if href is provided
+        if (shouldRenderAsLink) {
+            // Use custom linkComponent if provided (e.g., Next.js Link)
+            if (linkComponent) {
+                const LinkComp = linkComponent, linkProps = {
+                    ...buttonProps,
+                    ref: ref,
+                    // linkComponent usually forwards ref to anchor
+                    href: isDisabled ? void 0 : href,
+                    to: isDisabled ? void 0 : href,
+                    target: target,
+                    rel: "_blank" === target ? "noopener noreferrer" : void 0
+                };
+                return jsx(LinkComp, {
+                    ...linkProps,
+                    children: buttonContent
+                });
+            }
+            // Fallback to regular anchor tag
+            return jsx("a", {
+                ...buttonProps,
+                ref: ref,
+                href: isDisabled ? void 0 : href,
+                target: target,
+                rel: "_blank" === target ? "noopener noreferrer" : void 0,
+                children: buttonContent
+            });
+        }
+        // Default button rendering
+        return jsx(Component, {
             ...buttonProps,
             ref: ref,
-            // linkComponent usually forwards ref to anchor
-            href: isDisabled ? void 0 : href,
-            to: isDisabled ? void 0 : href,
-            target: target,
-            rel: "_blank" === target ? "noopener noreferrer" : void 0
-        };
-        content = jsx(LinkComp, {
-            ...linkProps,
+            type: "button" === Component ? type : void 0,
+            disabled: isDisabled,
             children: buttonContent
         });
-    } else 
-    // Fallback to regular anchor tag
-    content = jsx("a", {
-        ...buttonProps,
-        ref: ref,
-        href: isDisabled ? void 0 : href,
-        target: target,
-        rel: "_blank" === target ? "noopener noreferrer" : void 0,
-        children: buttonContent
-    }); else 
-    // Default button rendering
-    content = jsx(Component, {
-        ...buttonProps,
-        ref: ref,
-        type: "button" === Component ? type : void 0,
-        disabled: isDisabled,
-        children: buttonContent
-    });
-    if (glass) {
+    })());
+    // Determine if we should render as a link
+    // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
+    // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
+    // This is a safe fallback for disabled links.
+        if (glass) {
         // Default glass props
         const defaultGlassProps = {
             displacementScale: 20,
@@ -4450,10 +4512,10 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         };
         return jsx(AtomixGlass, {
             ...glassProps,
-            children: content
+            children: buttonChildren
         });
     }
-    return content;
+    return buttonChildren;
 })));
 
 Button.displayName = "Button";
@@ -4992,7 +5054,7 @@ useEffect((() => {
                     }
                 };
             }));
-        }), [ isMounted, currentIndex, calculateBounds, constrainPosition ]), setImagePosition = useCallback((position => {
+        }), [ currentIndex, calculateBounds, constrainPosition ]), setImagePosition = useCallback((position => {
             setImageStates((prev => {
                 const currentState = prev[currentIndex] || {
                     zoomLevel: 1,
@@ -5042,7 +5104,7 @@ useEffect((() => {
                     }
                 };
             }));
-        }), [ isMounted, currentIndex, calculateBounds, constrainPosition ]), handleWheel = useCallback((event => {
+        }), [ currentIndex, calculateBounds, constrainPosition ]), handleWheel = useCallback((event => {
             var _context;
             if (!isMounted || !event || !event.currentTarget) return;
             // Additional safety check for the target element
@@ -5399,7 +5461,7 @@ useEffect((() => {
                 }
                 return prev;
             }));
-        }), [ isMounted, enableGestures, isDragging, startDragPosition, currentIndex, constrainPosition, calculateBounds ]), handleTouchEnd = useCallback((() => {
+        }), [ enableGestures, isDragging, startDragPosition, currentIndex, constrainPosition, calculateBounds ]), handleTouchEnd = useCallback((() => {
             setIsDragging(!1), lastDistanceRef.current = null, lastMidpointRef.current = null;
         }), []), currentState = imageStates[currentIndex] || {
             zoomLevel: 1,