@shohojdhara/atomix 0.5.5 → 0.5.6

package/dist/index.esm.js

@@ -4431,29 +4431,30 @@ const AccordionImpl =  memo((({title: title, children: children, defaultOpen: de
     }), headerClassNames = generateHeaderClassNames(), panelClassNames = ACCORDION.SELECTORS.PANEL.replace(".", ""), hasCompoundComponents = React.Children.toArray(children).some((child => {
         var _context;
         
-        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "AccordionHeader", "AccordionBody" ]).call(_context, child.type.displayName);
+        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "AccordionHeader", "AccordionBody" ]).call(_context, child.type.displayName || "");
     })), content = jsx("div", {
         className: generateClassNames(className) + (glass ? " c-accordion--glass" : ""),
         style: style,
         children: hasCompoundComponents ? React.Children.map(children, (child => {
             if ( React.isValidElement(child)) {
+                const childProps = child.props;
                 if ("AccordionHeader" === child.type.displayName) 
                 return React.cloneElement(child, {
                     id: buttonId,
-                    className: `${headerClassNames} ${child.props.className || ""}`.trim(),
+                    className: `${headerClassNames} ${childProps.className || ""}`.trim(),
                     onClick: e => {
-                        toggle(), child.props.onClick?.(e);
+                        toggle(), childProps?.onClick?.(e);
                     },
                     "aria-expanded": state.isOpen,
                     "aria-controls": panelId,
                     "aria-disabled": disabled,
                     disabled: disabled,
-                    iconPosition: child.props.iconPosition || iconPosition
+                    iconPosition: childProps.iconPosition || iconPosition
                 });
                 if ("AccordionBody" === child.type.displayName) 
                 return React.cloneElement(child, {
                     id: panelId,
-                    className: `${panelClassNames} ${child.props.className || ""}`.trim(),
+                    className: `${panelClassNames} ${childProps.className || ""}`.trim(),
                     "aria-labelledby": buttonId,
                     panelRef: panelRef,
                     contentRef: contentRef
@@ -5133,8 +5134,9 @@ const BreadcrumbComponent =  memo((function({items: items, divider: divider, cla
         const childrenCount = Children.count(children);
         content = Children.map(children, ((child, index) => {
             if ( isValidElement(child)) {
-                const isLast = index === childrenCount - 1, childProps = child.props, {active: active, linkAs: linkAs, ...otherProps} = childProps;
-                
+                const isLast = index === childrenCount - 1, {active: active, linkAs: linkAs, ...otherProps} = child.props;
+                // Extract props from the child element with proper typing
+                                
                 return cloneElement(child, {
                     active: active ?? (!!isLast || void 0),
                     linkAs: linkAs ?? linkComponent
@@ -5181,7 +5183,7 @@ function useSpinner(initialProps) {
 
 Breadcrumb.displayName = "Breadcrumb", Breadcrumb.Item = BreadcrumbItem;
 
-const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, role: role = "status"}) => {
+const Spinner =  memo( forwardRef((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, role: role = "status", "aria-live": ariaLive = "polite", "aria-describe": ariaDescribe, ...rest}, ref) => {
     const {generateSpinnerClass: generateSpinnerClass} = useSpinner({
         size: size,
         variant: variant,
@@ -5192,13 +5194,17 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
         fullscreen: fullscreen,
         className: `${className} ${glass ? "c-spinner--glass" : ""}`.trim()
     }), spinnerContent = jsx("div", {
+        ref: ref,
         className: spinnerClass,
         style: style,
         role: role,
         "aria-label": ariaLabel || "Loading",
+        "aria-live": ariaLive,
+        "aria-describe": ariaDescribe,
+        ...rest,
         children: jsx("span", {
             className: SPINNER.VISUALLY_HIDDEN,
-            children: ariaLabel || "Loading..."
+            children: ariaLabel || "Loading content..."
         })
     });
     if (glass) {
@@ -5217,7 +5223,7 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
         });
     }
     return spinnerContent;
-}));
+})));
 
 Spinner.displayName = "Spinner";
 
@@ -5735,7 +5741,7 @@ const Callout =  memo((({title: title, children: children, icon: icon, variant:
     }, calloutContent = React.Children.toArray(children).some((child => {
         var _context3;
         
-        return React.isValidElement(child) && _includesInstanceProperty(_context3 = [ "CalloutIcon", "CalloutMessage", "CalloutTitle", "CalloutText", "CalloutActions", "CalloutContent" ]).call(_context3, child.type.displayName);
+        return React.isValidElement(child) && _includesInstanceProperty(_context3 = [ "CalloutIcon", "CalloutMessage", "CalloutTitle", "CalloutText", "CalloutActions", "CalloutContent" ]).call(_context3, child.type.displayName || "");
     })) ? children : jsxs(Fragment, {
         children: [ jsxs("div", {
             className: "c-callout__content",
@@ -5820,7 +5826,66 @@ Callout.Icon = CalloutIcon, Callout.Message = CalloutMessage, Callout.Title = Ca
 Callout.Text = CalloutText, Callout.Actions = CalloutActions, Callout.CloseButton = CalloutCloseButton, 
 Callout.Content = CalloutContent;
 
-const Card =  React.memo( forwardRef((({
+const CardHeader =  forwardRef((({title: title, subtitle: subtitle, action: action, icon: icon, children: children, className: className = "", ...props}, ref) => {
+    const headerClasses = `${CARD.SELECTORS.HEADER.substring(1)} ${className}`.trim();
+    return jsxs("div", {
+        ref: ref,
+        className: headerClasses,
+        ...props,
+        children: [ icon && jsx("div", {
+            className: CARD.SELECTORS.ICON.substring(1),
+            children: icon
+        }), (title || subtitle) && jsxs("div", {
+            children: [ title && jsx("h3", {
+                className: CARD.SELECTORS.TITLE.substring(1),
+                children: title
+            }), subtitle && jsx("p", {
+                className: CARD.SELECTORS.TEXT.substring(1),
+                children: subtitle
+            }) ]
+        }), action && jsx("div", {
+            className: CARD.SELECTORS.ACTIONS.substring(1),
+            children: action
+        }), children ]
+    });
+}));
+
+CardHeader.displayName = "CardHeader";
+
+const CardBody =  forwardRef((({scrollable: scrollable = !1, maxHeight: maxHeight, children: children, className: className = "", style: style, ...props}, ref) => {
+    const bodyClasses = `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? "c-card__body--scrollable" : ""} ${className}`.trim(), bodyStyle = {
+        ...style,
+        ...scrollable && maxHeight ? {
+            maxHeight: "number" == typeof maxHeight ? `${maxHeight}px` : maxHeight,
+            overflowY: "auto"
+        } : {}
+    };
+    return jsx("div", {
+        ref: ref,
+        className: bodyClasses,
+        style: bodyStyle,
+        ...props,
+        children: children
+    });
+}));
+
+CardBody.displayName = "CardBody";
+
+const CardFooter =  forwardRef((({align: align, children: children, className: className = "", style: style, ...props}, ref) => {
+    const footerClasses = `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ""} ${className}`.trim();
+    return jsx("div", {
+        ref: ref,
+        className: footerClasses,
+        style: style,
+        ...props,
+        children: children
+    });
+}));
+
+CardFooter.displayName = "CardFooter";
+
+// Main Card component implementation
+const CardImpl =  React.memo( forwardRef((({
 // Variants
 size: size = "md", variant: variant = "", appearance: appearance = "filled", elevation: elevation = "none", hoverable: hoverable = !1, hoverElevation: hoverElevation = "md", 
 // Layout
@@ -5951,75 +6016,15 @@ className: className = "", style: style, ...rest}, ref) => {
     }) : divElement;
 })));
 
-Card.displayName = "Card";
-
-const CardHeader =  forwardRef((({title: title, subtitle: subtitle, action: action, icon: icon, children: children, className: className = "", ...props}, ref) => {
-    const headerClasses = `${CARD.SELECTORS.HEADER.substring(1)} ${className}`.trim();
-    return jsxs("div", {
-        ref: ref,
-        className: headerClasses,
-        ...props,
-        children: [ icon && jsx("div", {
-            className: CARD.SELECTORS.ICON.substring(1),
-            children: icon
-        }), (title || subtitle) && jsxs("div", {
-            children: [ title && jsx("h3", {
-                className: CARD.SELECTORS.TITLE.substring(1),
-                children: title
-            }), subtitle && jsx("p", {
-                className: CARD.SELECTORS.TEXT.substring(1),
-                children: subtitle
-            }) ]
-        }), action && jsx("div", {
-            className: CARD.SELECTORS.ACTIONS.substring(1),
-            children: action
-        }), children ]
-    });
-}));
-
-CardHeader.displayName = "CardHeader";
+CardImpl.displayName = "Card";
 
-const CardBody =  forwardRef((({scrollable: scrollable = !1, maxHeight: maxHeight, children: children, className: className = "", style: style, ...props}, ref) => {
-    const bodyClasses = `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? "c-card__body--scrollable" : ""} ${className}`.trim(), bodyStyle = {
-        ...style,
-        ...scrollable && maxHeight ? {
-            maxHeight: "number" == typeof maxHeight ? `${maxHeight}px` : maxHeight,
-            overflowY: "auto"
-        } : {}
-    };
-    return jsx("div", {
-        ref: ref,
-        className: bodyClasses,
-        style: bodyStyle,
-        ...props,
-        children: children
-    });
-}));
+// Create compound component with proper typing
+const CardWithSubcomponents = CardImpl;
 
-CardBody.displayName = "CardBody";
+CardWithSubcomponents.Header = CardHeader, CardWithSubcomponents.Body = CardBody, 
+CardWithSubcomponents.Footer = CardFooter;
 
-const CardFooter =  forwardRef((({align: align, children: children, className: className = "", style: style, ...props}, ref) => {
-    const footerClasses = `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ""} ${className}`.trim();
-    return jsx("div", {
-        ref: ref,
-        className: footerClasses,
-        style: style,
-        ...props,
-        children: children
-    });
-}));
-
-CardFooter.displayName = "CardFooter", 
-// Attach subcomponents to Card
-Card.Header = CardHeader, Card.Body = CardBody, Card.Footer = CardFooter;
-
-/**
- * Hook for managing Card component state and behaviors
- *
- * @param options - Configuration options for the card
- * @returns Card state and handlers
- */
-const ElevationCard = ({elevationClass: elevationClass = "is-elevated", className: className = "", style: style, children: children, onClick: onClick, ...props}) => {
+const Card = CardWithSubcomponents, ElevationCard = ({elevationClass: elevationClass = "is-elevated", className: className = "", style: style, children: children, onClick: onClick, ...props}) => {
     const {getCardProps: getCardProps} = ((options = {}) => {
         const {elevationEffect: elevationEffect = !1, elevationClass: elevationClass = CARD.CLASSES.ACTIVE, flipEffect: flipEffect = !1, flipTrigger: flipTrigger = "click", focusEffect: focusEffect = !1, clickable: clickable = !1, onClick: onClick} = options, cardRef = useRef(null), frontRef = useRef(null), backRef = useRef(null), [isFlipped, setIsFlipped] = useState(!1), [isElevated, setIsElevated] = useState(!1), [isFocused, setIsFocused] = useState(!1), [isHovered, setIsHovered] = useState(!1), handleClick = useCallback((event => {
             flipEffect && "click" === flipTrigger && setIsFlipped((prev => !prev)), onClick && onClick(event);
@@ -6090,6 +6095,12 @@ const ElevationCard = ({elevationClass: elevationClass = "is-elevated", classNam
     });
 };
 
+/**
+ * Hook for managing Card component state and behaviors
+ *
+ * @param options - Configuration options for the card
+ * @returns Card state and handlers
+ */
 /**
  * Comprehensive chart hook with shared functionality
  * @param initialProps - Initial chart properties
@@ -10840,23 +10851,29 @@ const DropdownStyleContext =  createContext({}), Dropdown =  memo((function({chi
     React.Children.toArray(children).some((child => {
         var _context;
         
-        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "DropdownTrigger", "DropdownMenu" ]).call(_context, child.type.displayName);
+        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "DropdownTrigger", "DropdownMenu" ]).call(_context, child.type.displayName || "");
     })) ? 
     // Find Trigger and Menu in children
     React.Children.forEach(children, (child => {
-         React.isValidElement(child) && ("DropdownTrigger" === child.type.displayName ? triggerContent =  React.cloneElement(child, {
-            ref: toggleRef,
-            onClick: e => {
-                handleToggleClick(e), child.props.onClick?.(e);
-            },
-            onKeyDown: e => {
-                handleToggleKeyDown(e), child.props.onKeyDown?.(e);
-            },
-            "aria-haspopup": "menu",
-            "aria-expanded": isOpen,
-            "aria-controls": dropdownId,
-            tabIndex: 0
-        }) : "DropdownMenu" === child.type.displayName && (menuContentNode = child));
+        if ( React.isValidElement(child)) {
+            const component = child.type;
+            if ("DropdownTrigger" === component.displayName) {
+                const triggerProps = {
+                    ref: toggleRef,
+                    onClick: e => {
+                        handleToggleClick(e), child.props.onClick?.(e);
+                    },
+                    onKeyDown: e => {
+                        handleToggleKeyDown(e), child.props.onKeyDown?.(e);
+                    },
+                    "aria-haspopup": "menu",
+                    "aria-expanded": isOpen,
+                    "aria-controls": dropdownId,
+                    tabIndex: 0
+                };
+                triggerContent =  React.cloneElement(child, triggerProps);
+            } else "DropdownMenu" === component.displayName && (menuContentNode = child);
+        }
     })) : (
     // Legacy mode
     triggerContent = jsx("div", {
@@ -12230,7 +12247,7 @@ const EdgePanel =  memo((({title: title, children: children, position: position
     }, panelContent = React.Children.toArray(children).some((child => {
         var _context;
         
-        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "EdgePanelHeader", "EdgePanelBody", "EdgePanelFooter" ]).call(_context, child.type.displayName);
+        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "EdgePanelHeader", "EdgePanelBody", "EdgePanelFooter" ]).call(_context, child.type.displayName || "");
     })) ? children : jsxs(Fragment, {
         children: [ jsxs("div", {
             className: "c-edge-panel__header",
@@ -12396,11 +12413,6 @@ const FormGroup = ({children: children, label: label, helperText: helperText, ht
     });
 };
 
-/**
- * Input state and functionality
- * @param initialProps - Initial input properties
- * @returns Input state and methods
- */
 function useInput(initialProps) {
     // Default input properties
     const defaultProps = {
@@ -15359,11 +15371,12 @@ const ModalImpl =  memo((({children: children, isOpen: isOpen = !1, onOpenChange
     const modalClasses = [ "c-modal", isOpenState ? MODAL.CLASSES.IS_OPEN : "", size ? `c-modal--${size}` : "", glass ? "c-modal--glass" : "", className ].filter(Boolean).join(" "), hasCompoundComponents = React.Children.toArray(children).some((child => {
         var _context;
         
-        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "ModalHeader", "ModalBody", "ModalFooter" ]).call(_context, child.type.displayName);
+        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "ModalHeader", "ModalBody", "ModalFooter" ]).call(_context, child.type.displayName || "");
     })), modalContent = jsx("div", {
         className: "c-modal__content",
         ref: contentRef,
         children: hasCompoundComponents ? React.Children.map(children, (child =>  React.isValidElement(child) && "ModalHeader" === child.type.displayName ?  React.cloneElement(child, {
+            ...child.props,
             onClose: child.props.onClose || close,
             id: titleId
         }) : child)) : jsxs(Fragment, {