@shohojdhara/atomix 0.4.4 → 0.4.6

package/src/components/Navigation/Nav/NavItem.tsx

@@ -39,11 +39,12 @@ export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
       megaMenu = false,
       active = false,
       href,
+      target,
       onClick,
       className = '',
       disabled = false,
       'aria-expanded': ariaExpanded,
-      LinkComponent,
+      linkComponent,
     },
     ref
   ) => {
@@ -139,6 +140,7 @@ export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
       ref: combinedRef,
       href: href || '#',
       to: href || '#',
+      target,
       className: navLinkClass,
       onClick: dropdown || megaMenu ? handleDropdownToggle : handleClick(onClick),
       'aria-disabled': disabled,
@@ -150,9 +152,9 @@ export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
 
     return (
       <li className={navItemClass} role="menuitem" aria-haspopup={dropdown || megaMenu}>
-        {LinkComponent ? (
+        {linkComponent ? (
           (() => {
-            const Component = LinkComponent as React.ComponentType<any>;
+            const Component = linkComponent as React.ComponentType<any>;
             return (
               <Component {...linkProps}>
                 {dropdown || megaMenu ? childContent[0] : children}

package/src/components/Navigation/Navbar/Navbar.tsx

@@ -152,15 +152,23 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
         shaderVariant: 'premiumGlass' as const,
       };
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      // AtomixGlass hoists layout props (position/top/left/right/zIndex) to its
+      // root element, keeping all internal layers in the same stacking context.
+      const isFixed = position === 'fixed' || position === 'fixed-bottom';
+
       return (
         <AtomixGlass
           {...glassProps}
           style={{
-            ...(position === 'fixed' && { position: 'fixed' }),
-            left: 0,
-            right: 0,
-            top: 0,
-            zIndex: 1000,
+            ...(isFixed && {
+              position: 'fixed' as const,
+              top: position === 'fixed' ? 0 : undefined,
+              bottom: position === 'fixed-bottom' ? 0 : undefined,
+              left: 0,
+              right: 0,
+              zIndex: 1030, // matches --atomix-navbar-z-index from _components.navbar.scss
+            }),
           }}
         >
           <nav

package/src/components/Navigation/SideMenu/SideMenu.tsx

@@ -39,7 +39,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       toggleIcon,
       id,
       glass,
-      LinkComponent,
+      linkComponent,
     },
     ref
   ) => {
@@ -287,7 +287,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
                               active={subItem.active}
                               disabled={subItem.disabled}
                               icon={subItem.icon}
-                              LinkComponent={LinkComponent}
+                              linkComponent={linkComponent}
                             >
                               {subItem.title}
                             </SideMenuItem>

package/src/components/Navigation/SideMenu/SideMenuItem.tsx

@@ -18,7 +18,7 @@ import { useSideMenuItem } from '../../../lib/composables/useSideMenu';
  *
  * // With icon and custom link component
  * import Link from 'next/link';
- * <SideMenuItem href="/settings" icon={<Icon name="Settings" />} LinkComponent={Link}>
+ * <SideMenuItem href="/settings" icon={<Icon name="Settings" />} linkComponent={Link}>
  *   Settings
  * </SideMenuItem>
  *
@@ -45,7 +45,7 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
       className = '',
       target,
       rel,
-      LinkComponent: LinkComponentProp,
+      linkComponent: linkComponentProp,
     },
     ref
   ) => {
@@ -59,8 +59,8 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
 
     // Render as link if href is provided
     if (href) {
-      if (LinkComponentProp) {
-        const LinkComp = LinkComponentProp as React.ComponentType<any>;
+      if (linkComponentProp) {
+        const LinkComp = linkComponentProp as React.ComponentType<any>;
         const linkProps: {
           ref?: React.Ref<HTMLAnchorElement>;
           className?: string;

package/src/components/Slider/Slider.tsx

@@ -25,9 +25,12 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     ...rest
   } = props;
 
+  // Ensure slides is an array to prevent .map errors
+  const validSlides = Array.isArray(slides) ? slides : [];
+
   // Hooks must be called unconditionally - before early return
   const slider = useSlider({
-    slides: slides || [],
+    slides: validSlides,
     slidesToShow,
     spaceBetween,
     loop,
@@ -65,7 +68,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     return allSlides.length * (slideWidth + spaceBetween) - spaceBetween;
   }, [allSlides.length, slideWidth, spaceBetween]);
 
-  if (!slides || slides.length === 0) {
+  if (validSlides.length === 0) {
     return (
       <div className="c-slider c-slider--empty" style={{ height, width, ...style }}>
         <div className="c-slider__empty-message">No slides available</div>
@@ -131,7 +134,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
               (() => {
                 if (!loop) return index === realIndex;
                 // For triple array: check if this slide index matches current real index
-                return index % slides.length === realIndex;
+                return index % validSlides.length === realIndex;
               })() && 'c-slider__slide--active',
               (slide as any).isClone && 'c-slider__slide--duplicate',
             ]
@@ -211,7 +214,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
 
       {pagination && (
         <div className="c-slider__pagination">
-          {slides.map((_, index) => (
+          {validSlides.map((_, index) => (
             <button
               key={index}
               type="button"

package/src/lib/composables/index.ts

@@ -29,8 +29,7 @@ export * from './useTodo';
 export * from './useForm';
 export * from './useFormGroup';
 
-// GlassContainer composables
-export * from './useGlassContainer';
+// AtomixGlass composables
 export * from './useAtomixGlass';
 export * from './useInput';
 export * from './useRadio';