@shohojdhara/atomix 0.4.3 → 0.4.5

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/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/useFooter.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { FooterLayout, ThemeColor, Size, SocialLink } from '../types/components';
 import { FOOTER } from '../constants/components';
 
@@ -8,61 +9,149 @@ export interface UseFooterOptions {
   sticky?: boolean;
   showNewsletter?: boolean;
   showBackToTop?: boolean;
+  showDivider?: boolean;
   socialLinks?: SocialLink[];
   onNewsletterSubmit?: (email: string) => void | Promise<void>;
   onBackToTop?: () => void;
+  glass?: boolean;
   className?: string;
 }
 
+/** Raw column size map per layout */
+type ColumnSizeMap = {
+  brand: number | 'auto';
+  content: number | 'auto';
+  newsletter: number | 'auto';
+};
+
+/**
+ * Resolves grid column size map for a given layout.
+ */
+function resolveColumnSizes(layout: FooterLayout, showNewsletter: boolean): ColumnSizeMap {
+  switch (layout) {
+    case 'columns':
+      return {
+        brand: 4,
+        content: showNewsletter ? 4 : 8,
+        newsletter: showNewsletter ? 4 : 0,
+      };
+    case 'centered':
+    case 'minimal':
+    case 'stacked':
+      return {
+        brand: 12,
+        content: 12,
+        newsletter: showNewsletter ? 12 : 0,
+      };
+    case 'flexible':
+      return { brand: 'auto', content: 'auto', newsletter: 'auto' };
+    case 'sidebar':
+      return {
+        brand: 3,
+        content: 9,
+        newsletter: showNewsletter ? 9 : 0,
+      };
+    case 'wide':
+      return {
+        brand: 3,
+        content: 6,
+        newsletter: showNewsletter ? 3 : 0,
+      };
+    default:
+      return {
+        brand: 4,
+        content: showNewsletter ? 4 : 8,
+        newsletter: showNewsletter ? 4 : 0,
+      };
+  }
+}
+
+/**
+ * Computes responsive GridCol props for a given column type.
+ */
+function resolveResponsiveColProps(
+  columnType: 'brand' | 'content' | 'newsletter',
+  layout: FooterLayout,
+  columnSizes: ColumnSizeMap
+): Record<string, number | boolean> {
+  if (layout === 'flexible' && columnSizes[columnType] === 'auto') {
+    return { xs: 12, sm: true, md: true };
+  }
+
+  const isMultiColumn = layout === 'columns' || layout === 'sidebar' || layout === 'wide';
+  const baseMd = isMultiColumn ? columnSizes[columnType] : 12;
+
+  return { xs: 12, md: baseMd as number };
+}
+
 export function useFooter(options: UseFooterOptions = {}) {
   const {
-    layout = FOOTER.DEFAULTS.LAYOUT,
+    layout = FOOTER.DEFAULTS.LAYOUT as FooterLayout,
     variant = FOOTER.DEFAULTS.VARIANT,
-    size = FOOTER.DEFAULTS.SIZE,
+    size = FOOTER.DEFAULTS.SIZE as Size,
     sticky = FOOTER.DEFAULTS.STICKY,
     showNewsletter = FOOTER.DEFAULTS.SHOW_NEWSLETTER,
     showBackToTop = FOOTER.DEFAULTS.SHOW_BACK_TO_TOP,
+    showDivider = FOOTER.DEFAULTS.SHOW_DIVIDER,
     socialLinks = [],
     onNewsletterSubmit,
     onBackToTop,
+    glass = false,
     className = '',
   } = options;
 
-  // Generate footer classes
-  const footerClass = (() => {
-    const classes = [
+  // ---------- CSS class strings ----------
+
+  const footerClass = useMemo(() => {
+    const layoutKey = layout.toUpperCase() as keyof typeof FOOTER.CLASSES;
+    const sizeKey = size.toUpperCase() as keyof typeof FOOTER.CLASSES;
+
+    return [
       FOOTER.CLASSES.BASE,
-      FOOTER.CLASSES[layout.toUpperCase() as keyof typeof FOOTER.CLASSES] || FOOTER.CLASSES.COLUMNS,
+      FOOTER.CLASSES[layoutKey] || FOOTER.CLASSES.COLUMNS,
       `c-footer--${variant}`,
-      FOOTER.CLASSES[size.toUpperCase() as keyof typeof FOOTER.CLASSES] || FOOTER.CLASSES.MD,
+      FOOTER.CLASSES[sizeKey] || FOOTER.CLASSES.MD,
       sticky && FOOTER.CLASSES.STICKY,
       showNewsletter && 'c-footer--with-newsletter',
+      glass && 'c-footer--glass',
       className,
-    ];
-    return classes.filter(Boolean).join(' ');
-  })();
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }, [layout, variant, size, sticky, showNewsletter, glass, className]);
 
   const containerClass = FOOTER.CLASSES.CONTAINER;
   const brandClass = FOOTER.CLASSES.BRAND;
-  const sectionsClass = (() => {
-    const classes = [
+
+  const sectionsClass = useMemo(() => {
+    return [
       FOOTER.CLASSES.SECTIONS,
       layout === 'columns' && 'c-footer__sections--columns',
       layout === 'centered' && 'c-footer__sections--centered',
       layout === 'stacked' && 'c-footer__sections--stacked',
-    ];
-    return classes.filter(Boolean).join(' ');
-  })();
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }, [layout]);
+
   const bottomClass = FOOTER.CLASSES.BOTTOM;
 
-  // Handle newsletter submission
+  // ---------- Grid helpers ----------
+
+  const columnSizes = useMemo(
+    () => resolveColumnSizes(layout, showNewsletter),
+    [layout, showNewsletter]
+  );
+
+  const getResponsiveColumnProps = (columnType: 'brand' | 'content' | 'newsletter') =>
+    resolveResponsiveColProps(columnType, layout, columnSizes);
+
+  // ---------- Handlers ----------
+
   const handleNewsletterSubmit = (email: string) => {
-    if (onNewsletterSubmit) {
-      onNewsletterSubmit(email);
-    }
+    onNewsletterSubmit?.(email);
   };
 
-  // Handle back to top
   const handleBackToTop = () => {
     if (onBackToTop) {
       onBackToTop();
@@ -72,14 +161,22 @@ export function useFooter(options: UseFooterOptions = {}) {
   };
 
   return {
+    // Classes
     footerClass,
     containerClass,
     brandClass,
     sectionsClass,
     bottomClass,
+    // Grid helpers
+    columnSizes,
+    getResponsiveColumnProps,
+    // Handlers
     handleNewsletterSubmit,
     handleBackToTop,
+    // Pass-through state
     socialLinks,
     showNewsletter,
+    showBackToTop,
+    showDivider,
   };
 }

package/src/lib/composables/useSlider.ts

@@ -26,7 +26,7 @@ export interface UseSliderReturn extends SliderState {
 
 export function useSlider(options: UseSliderOptions): UseSliderReturn {
   const {
-    slides,
+    slides: rawSlides,
     slidesToShow = 1,
     spaceBetween = 0,
     loop = false,
@@ -39,6 +39,8 @@ export function useSlider(options: UseSliderOptions): UseSliderReturn {
     onSlideChange,
   } = options;
 
+  const slides = Array.isArray(rawSlides) ? rawSlides : [];
+
   const containerRef = useRef<HTMLDivElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const repositioningRef = useRef(false);

package/src/lib/types/components.ts

@@ -1344,6 +1344,11 @@ export interface NavItemProps extends BaseComponentProps {
    */
   href?: string;
 
+  /**
+   * Link target attribute (used with href)
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
   /**
    * Optional click handler
    */
@@ -1357,7 +1362,7 @@ export interface NavItemProps extends BaseComponentProps {
   /**
    * Optional custom link component
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 }
 
 /**
@@ -1409,6 +1414,16 @@ export interface MenuItemProps extends BaseComponentProps {
    */
   href?: string;
 
+  /**
+   * Link target attribute (used with href)
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
+  /**
+   * Optional custom link component
+   */
+  linkComponent?: React.ElementType;
+
   /**
    * Item icon
    */
@@ -1469,6 +1484,18 @@ export interface MegaMenuLinkProps extends BaseComponentProps {
    */
   href: string;
 
+  /**
+   * Link target attribute (used with href)
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
+  /**
+   * Optional custom link component
+   */
+  linkComponent?: React.ElementType;
+
+
+
   /**
    * Link content
    */
@@ -1544,14 +1571,14 @@ export interface SideMenuProps extends BaseComponentProps {
    * ```tsx
    * // Next.js
    * import Link from 'next/link';
-   * <SideMenu LinkComponent={Link} />
+   * <SideMenu linkComponent={Link} />
    *
    * // React Router
    * import { Link } from 'react-router-dom';
-   * <SideMenu LinkComponent={Link} />
+   * <SideMenu linkComponent={Link} />
    * ```
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 
   /**
    * Menu items
@@ -1623,7 +1650,7 @@ export interface SideMenuItemProps extends BaseComponentProps {
   /**
    * Link target attribute
    */
-  target?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 
   /**
    * Link rel attribute
@@ -1632,20 +1659,20 @@ export interface SideMenuItemProps extends BaseComponentProps {
 
   /**
    * Optional custom link component (e.g., Next.js Link, React Router Link)
-   * If not provided, will use LinkComponent from parent SideMenu context
+   * If not provided, will use linkComponent from parent SideMenu context
    *
    * @example
    * ```tsx
    * // Next.js
    * import Link from 'next/link';
-   * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
+   * <SideMenuItem href="/about" linkComponent={Link}>About</SideMenuItem>
    *
    * // React Router
    * import { Link } from 'react-router-dom';
-   * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
+   * <SideMenuItem href="/about" linkComponent={Link}>About</SideMenuItem>
    * ```
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 }
 
 /**
@@ -3460,6 +3487,11 @@ export interface DropdownItemProps extends BaseComponentProps {
    */
   href?: string;
 
+  /**
+   * Link target attribute (used with href)
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+
   /**
    * Whether item is active
    */
@@ -3483,7 +3515,7 @@ export interface DropdownItemProps extends BaseComponentProps {
   /**
    * Optional custom link component
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 }
 
 /**
@@ -4044,7 +4076,7 @@ export interface CardProps extends BaseComponentProps {
   /**
    * Optional custom link component (e.g., Next.js Link, React Router Link)
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 
   /**
    * Optional click handler
@@ -6549,7 +6581,7 @@ export interface FooterLinkProps extends BaseComponentProps {
   /**
    * Custom link component (e.g., React Router Link)
    */
-  LinkComponent?: React.ElementType;
+  linkComponent?: React.ElementType;
 }
 
 /**

package/src/styles/06-components/_components.atomix-glass.scss

@@ -9,16 +9,46 @@
   // CSS custom property defaults
   --atomix-glass-radius: var(--atomix-radius-md, 16px);
   --atomix-glass-transform: none;
-  --atomix-glass-transition: all var(--atomix-transition-duration, 0.15s) ease-out;
+  --atomix-glass-transition: transform var(--atomix-transition-duration, 0.15s) ease-out;
   --atomix-glass-position: absolute;
   --atomix-glass-container-width: 100%;
   --atomix-glass-container-height: 100%;
   --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
 
+  // =========================================================================
+  // Z-INDEX STACKING ORDER (local scale, scoped to this component)
+  // =========================================================================
+  // 0: background layers
+  // 1: filter (SVG filter + backdrop)
+  // 2: base / overlay effect layers
+  // 3: hover effect layers
+  // 4: content (user-facing children)
+  // 5: border-1
+  // 6: border-2
+  // 7: overlay-highlight
+  // =========================================================================
+  --_glass-z-background: 0;
+  --_glass-z-filter: 1;
+  --_glass-z-effect: 2;
+  --_glass-z-hover: 3;
+  --_glass-z-overlay-highlight: 4;
+  --_glass-z-border-1: 5;
+  --_glass-z-border-2: 6;
+  --_glass-z-content: 7;
+
   // Base layer styles for all effect layers (hover, border, overlay)
   &__hover-1,
   &__hover-2,
-  &__hover-3,
+  &__hover-3 {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: var(--atomix-glass-radius);
+    transform: var(--atomix-glass-transform);
+    transition: var(--atomix-glass-transition);
+    z-index: var(--_glass-z-hover);
+  }
+
   &__base,
   &__overlay {
     position: absolute;
@@ -27,6 +57,7 @@
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);
     transition: var(--atomix-glass-transition);
+    z-index: var(--_glass-z-effect);
   }
 
   // Interactive hover effects
@@ -80,6 +111,7 @@
     transform: var(--atomix-glass-transform);
     transition: var(--atomix-glass-transition);
     mix-blend-mode: screen;
+    z-index: var(--_glass-z-overlay-highlight);
     // Dynamic opacity and background are set via inline styles
     // Opacity is calculated: opacityValues.over * OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER
     // Background gradient uses constants for positioning
@@ -119,7 +151,7 @@
   &__border-1 {
     opacity: var(--atomix-opacity-20, 0.2);
     mix-blend-mode: screen;
-    z-index: var(--atomix-z-index-5, 5);
+    z-index: var(--_glass-z-border-1);
     background: var(--atomix-glass-border-gradient-1, none);
     box-shadow: var(
       --atomix-glass-border-shadow,
@@ -131,7 +163,7 @@
 
   &__border-2 {
     mix-blend-mode: overlay;
-    z-index: var(--atomix-z-index-6, 6);
+    z-index: var(--_glass-z-border-2);
     background: var(--atomix-glass-border-gradient-2, none);
     box-shadow: var(
       --atomix-glass-border-shadow,
@@ -164,6 +196,7 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
+    z-index: var(--_glass-z-filter);
 
     svg {
       border-radius: var(--atomix-glass-radius);
@@ -188,6 +221,7 @@
     width: var(--atomix-glass-container-width);
     height: var(--atomix-glass-container-height);
     border-radius: var(--atomix-glass-radius);
+    z-index: var(--_glass-z-content);
   }
 
   // Background layers for over-light mode
@@ -197,6 +231,7 @@
     border-radius: var(--atomix-glass-radius);
     transform: var(--atomix-glass-transform);
     transition: var(--atomix-glass-transition);
+    z-index: var(--_glass-z-background);
 
     &--dark {
       background-color: var(--atomix-gray-9, #1f2937);
@@ -209,7 +244,6 @@
 
     &--dark#{&}--over-light {
       opacity: var(--atomix-opacity-50, 0.5);
-      z-index: -1;
     }
 
     &--black#{&}--over-light {