@shohojdhara/atomix 0.4.2 → 0.4.4

package/dist/index.js

@@ -3355,17 +3355,9 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }) ]
         }), withBorder && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("span", {
-                className: ATOMIX_GLASS.BORDER_1_CLASS,
-                style: {
-                    width: glassSize.width,
-                    height: glassSize.height
-                }
+                className: ATOMIX_GLASS.BORDER_1_CLASS
             }), jsxRuntime.jsx("span", {
-                className: ATOMIX_GLASS.BORDER_2_CLASS,
-                style: {
-                    width: glassSize.width,
-                    height: glassSize.height
-                }
+                className: ATOMIX_GLASS.BORDER_2_CLASS
             }) ]
         }) ]
     });
@@ -4114,10 +4106,9 @@ const BreadcrumbItem =  React.forwardRef((({children: children, href: href, acti
         className: itemClasses,
         style: style,
         ...props,
-        children: href && !active ? LinkComponent ? 
-        // @ts-ignore - Dynamic components are tricky in TS without stricter types
-        jsxRuntime.jsx(LinkComponent, {
+        children: href && !active ? linkAs && LinkComponent ? jsxRuntime.jsx(LinkComponent, {
             href: href,
+            to: href,
             ...commonLinkProps,
             children: linkContent
         }) : jsxRuntime.jsx("a", {
@@ -4391,6 +4382,7 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
             ref: ref,
             // LinkComponent usually forwards ref to anchor
             href: href,
+            to: href,
             target: target,
             rel: "_blank" === target ? "noopener noreferrer" : void 0
         };
@@ -4685,6 +4677,8 @@ active: active = !1, disabled: disabled = !1, loading: loading = !1, selected: s
 header: header, image: image, imageAlt: imageAlt = "", title: title, text: text, actions: actions, icon: icon, footer: footer, children: children, 
 // Interaction
 onClick: onClick, onHover: onHover, onFocus: onFocus, href: href, target: target, 
+// Custom Link
+LinkComponent: LinkComponent, 
 // Glass
 glass: glass, 
 // Accessibility
@@ -4768,7 +4762,19 @@ className: className = "", style: style, ...rest}, ref) => {
     };
     // Render as anchor if href is provided
     if (href && !isDisabled) {
-        const anchorElement = jsxRuntime.jsx("a", {
+        let anchorElement;
+        if (LinkComponent) {
+            const LinkComp = LinkComponent;
+            anchorElement = jsxRuntime.jsx(LinkComp, {
+                ...commonProps,
+                ref: ref,
+                href: href,
+                to: href,
+                target: target,
+                rel: "_blank" === target ? "noopener noreferrer" : void 0,
+                children: cardContent
+            });
+        } else anchorElement = jsxRuntime.jsx("a", {
             ...commonProps,
             ref: ref,
             href: href,
@@ -9870,6 +9876,7 @@ const DropdownItem =  React.memo((({children: children, href: href, active: acti
         close());
     }, itemClasses = [ "c-dropdown__menu-item", active ? "is-active" : "", disabled ? "is-disabled" : "", className ].filter(Boolean).join(" "), linkProps = {
         href: href,
+        to: href,
         className: itemClasses,
         onClick: handleClick,
         role: "menuitem",
@@ -9908,13 +9915,32 @@ const DropdownItem =  React.memo((({children: children, href: href, active: acti
             }), children ]
         })
     });
-})), DropdownDivider =  React.memo((({className: className = ""}) => jsxRuntime.jsx("li", {
+}));
+
+DropdownItem.displayName = "DropdownItem";
+
+/**
+ * DropdownDivider component for separating groups of items
+ */
+const DropdownDivider =  React.memo((({className: className = ""}) => jsxRuntime.jsx("li", {
     className: `c-dropdown__divider ${className}`,
     role: "separator"
-}))), DropdownHeader =  React.memo((({children: children, className: className = ""}) => jsxRuntime.jsx("li", {
+})));
+
+DropdownDivider.displayName = "DropdownDivider";
+
+/**
+ * DropdownHeader component for section headers
+ */
+const DropdownHeader =  React.memo((({children: children, className: className = ""}) => jsxRuntime.jsx("li", {
     className: `c-dropdown__header ${className}`,
     children: children
-}))), DropdownStyleContext =  React.createContext({}), Dropdown =  React.memo((({children: children, menu: menu, placement: placement = "bottom-start", trigger: trigger = "click", offset: offset = DROPDOWN.DEFAULTS.OFFSET, isOpen: controlledIsOpen, onOpenChange: onOpenChange, closeOnClickOutside: closeOnClickOutside = !0, closeOnEscape: closeOnEscape = !0, maxHeight: maxHeight, minWidth: minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH, variant: variant, className: className = "", style: style, glass: glass, ...props}) => {
+})));
+
+DropdownHeader.displayName = "DropdownHeader";
+
+// Helper context to pass glass prop to DropdownMenu
+const DropdownStyleContext =  React.createContext({}), Dropdown =  React.memo((function({children: children, menu: menu, placement: placement = "bottom-start", trigger: trigger = "click", offset: offset = DROPDOWN.DEFAULTS.OFFSET, isOpen: controlledIsOpen, onOpenChange: onOpenChange, closeOnClickOutside: closeOnClickOutside = !0, closeOnEscape: closeOnEscape = !0, maxHeight: maxHeight, minWidth: minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH, variant: variant, className: className = "", style: style, glass: glass, ...props}) {
     // Set up controlled vs uncontrolled state
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(!1), isControlled = void 0 !== controlledIsOpen, isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen, dropdownRef = React.useRef(null), toggleRef = React.useRef(null), menuRef = React.useRef(null), dropdownId = React.useRef(`dropdown-${Math.random().toString(36).substring(2, 9)}`).current, setIsOpen = React.useCallback((nextIsOpen => {
         isControlled || setUncontrolledIsOpen(nextIsOpen), onOpenChange && onOpenChange(nextIsOpen);
@@ -10066,9 +10092,7 @@ const DropdownItem =  React.memo((({children: children, href: href, active: acti
     });
 }));
 
-/**
- * DropdownDivider component for separating groups of items
- */ Dropdown.displayName = "Dropdown", Dropdown.Trigger = DropdownTrigger, Dropdown.Menu = DropdownMenu, 
+Dropdown.displayName = "Dropdown", Dropdown.Trigger = DropdownTrigger, Dropdown.Menu = DropdownMenu, 
 Dropdown.Item = DropdownItem, Dropdown.Divider = DropdownDivider, Dropdown.Header = DropdownHeader;
 
 /**
@@ -14000,11 +14024,12 @@ const FooterLink =  React.forwardRef((({href: href, icon: icon, external: extern
         const Component = LinkComponent, componentProps = {
             ref: ref,
             ...href && !disabled ? {
+                href: href,
                 to: href
             } : {},
             ...linkProps
         };
-        // Only pass href if the link is not disabled and href exists
+        // Only pass href/to if the link is not disabled and href exists
                 return jsxRuntime.jsxs(Component, {
             ...componentProps,
             children: [ icon && jsxRuntime.jsx("span", {
@@ -14839,7 +14864,24 @@ const Modal = ModalWithSubcomponents, Nav =  React.forwardRef((({children: child
  *   </NavDropdown>
  * </Nav>
  * ```
- */ Nav.displayName = "Nav";
+ */
+/**
+ * Utility to merge multiple React refs into one
+ */
+function setRef(ref, value) {
+    "function" == typeof ref ? ref(value) : ref && (
+    // This is safe because we're checking that ref exists first
+    ref.current = value);
+}
+
+/**
+ * Combines two React refs into a single ref function
+ * This is used when you need to use and forward a ref at the same time
+ */ function useForkRef(refA, refB) {
+    return React__default.default.useMemo((() => null == refA && null == refB ? null : refValue => {
+        setRef(refA, refValue), setRef(refB, refValue);
+    }), [ refA, refB ]);
+}
 
 /**
  * NavItem component represents a single navigation item that can be a link, dropdown trigger, or mega menu trigger.
@@ -14868,14 +14910,15 @@ const Modal = ModalWithSubcomponents, Nav =  React.forwardRef((({children: child
  *   </MegaMenu>
  * </NavItem>
  * ```
- */
+ */ Nav.displayName = "Nav";
+
 const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1, megaMenu: megaMenu = !1, active: active = !1, href: href, onClick: onClick, className: className = "", disabled: disabled = !1, "aria-expanded": ariaExpanded, LinkComponent: LinkComponent}, ref) => {
     const {generateNavItemClass: generateNavItemClass, generateNavLinkClass: generateNavLinkClass, handleClick: handleClick} = useNavItem({
         dropdown: dropdown,
         megaMenu: megaMenu,
         active: active,
         disabled: disabled
-    }), [isActive, setIsActive] = React.useState(!1), itemRef = React.useRef(null);
+    }), [isActive, setIsActive] = React.useState(!1), itemRef = React.useRef(null), combinedRef = useForkRef(ref, itemRef);
     // State for tracking dropdown open state
         // Close dropdown on outside click (desktop only)
     React.useEffect((() => {
@@ -14906,8 +14949,9 @@ const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1
         disabled: disabled,
         className: className
     }) + (isActive ? " is-active" : ""), navLinkClass = generateNavLinkClass(active, disabled, dropdown || megaMenu ? "c-nav__dropdown-toggle" : ""), childContent = React__default.default.Children.toArray(children), expanded = void 0 !== ariaExpanded ? ariaExpanded : isActive, linkProps = {
-        ref: itemRef,
+        ref: combinedRef,
         href: href || "#",
+        to: href || "#",
         className: navLinkClass,
         onClick: dropdown || megaMenu ? e => {
             (dropdown || megaMenu) && (e.preventDefault(), setIsActive(!isActive));
@@ -14917,7 +14961,6 @@ const NavItem =  React.forwardRef((({children: children, dropdown: dropdown = !1
         "aria-current": !active || dropdown || megaMenu ? void 0 : "page"
     };
     return jsxRuntime.jsxs("li", {
-        ref: ref,
         className: navItemClass,
         role: "menuitem",
         "aria-haspopup": dropdown || megaMenu,
@@ -15062,23 +15105,7 @@ const Navbar =  React.forwardRef((({brand: brand, children: children, variant: v
     });
 }));
 
-/**
- * Utility to merge multiple React refs into one
- */
-function setRef(ref, value) {
-    "function" == typeof ref ? ref(value) : ref && (
-    // This is safe because we're checking that ref exists first
-    ref.current = value);
-}
-
-/**
- * Combines two React refs into a single ref function
- * This is used when you need to use and forward a ref at the same time
- */ function useForkRef(refA, refB) {
-    return React__default.default.useMemo((() => null == refA && null == refB ? null : refValue => {
-        setRef(refA, refValue), setRef(refB, refValue);
-    }), [ refA, refB ]);
-}
+Navbar.displayName = "Navbar";
 
 /**
  * SideMenuList component provides a container for side menu items.
@@ -15091,8 +15118,7 @@ function setRef(ref, value) {
  *   <SideMenuItem href="/contact">Contact</SideMenuItem>
  * </SideMenuList>
  * ```
- */ Navbar.displayName = "Navbar";
-
+ */
 const SideMenuList =  React.forwardRef((({children: children, className: className = ""}, ref) => {
     const listClass = `c-side-menu__list ${className}`.trim();
     return jsxRuntime.jsx("ul", {