@shohojdhara/atomix 0.4.4 → 0.4.6

package/src/components/Footer/FooterSection.tsx

@@ -1,7 +1,6 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { FooterSectionProps } from '../../lib/types/components';
 import { GridCol } from '../../layouts';
-import { useFooter } from '../../lib/composables/useFooter';
 
 /**
  * FooterSection component provides a section within the footer for organizing links and content.
@@ -31,14 +30,16 @@ export const FooterSection = forwardRef<
     },
     ref
   ) => {
-    const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
+    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
 
     const handleToggle = () => {
-      if (collapsible) {
-        setIsCollapsed(!isCollapsed);
-      }
+      if (collapsible) setIsCollapsed(prev => !prev);
     };
 
+    const sectionId = title
+      ? `footer-section-${title.toString().toLowerCase().replace(/\s+/g, '-')}`
+      : undefined;
+
     const sectionClass = [
       'c-footer__section',
       collapsible && 'c-footer__section--collapsible',
@@ -48,42 +49,42 @@ export const FooterSection = forwardRef<
       .filter(Boolean)
       .join(' ');
 
+    const renderHeader = () => {
+      if (!title) return null;
+
+      if (collapsible) {
+        return (
+          <div className="c-footer__section-header">
+            <button
+              type="button"
+              className="c-footer__section-toggle"
+              onClick={handleToggle}
+              aria-expanded={!isCollapsed}
+              aria-controls={sectionId}
+            >
+              {icon && <span className="c-footer__section-icon">{icon}</span>}
+              <h4 className="c-footer__section-title">{title}</h4>
+              <span className="c-footer__section-chevron">{isCollapsed ? '▼' : '▲'}</span>
+            </button>
+          </div>
+        );
+      }
+
+      return (
+        <div className="c-footer__section-header">
+          <div className="c-footer__section-header-content">
+            {icon && <span className="c-footer__section-icon">{icon}</span>}
+            <h4 className="c-footer__section-title">{title}</h4>
+          </div>
+        </div>
+      );
+    };
+
     return (
       <GridCol xs={12} md={showNewsletter ? 6 : 3} className="c-footer__section-col">
         <div ref={ref} className={sectionClass} {...props}>
-          {title && (
-            <div className="c-footer__section-header">
-              {collapsible ? (
-                <button
-                  type="button"
-                  className="c-footer__section-toggle"
-                  onClick={handleToggle}
-                  aria-expanded={!isCollapsed}
-                  aria-controls={`footer-section-${title.toString().toLowerCase().replace(/\s+/g, '-')}`}
-                >
-                  {icon && <span className="c-footer__section-icon">{icon}</span>}
-                  <h4 className="c-footer__section-title">{title}</h4>
-                  <span className="c-footer__section-chevron">{isCollapsed ? '▼' : '▲'}</span>
-                </button>
-              ) : (
-                <div className="c-footer__section-header-content">
-                  {icon && <span className="c-footer__section-icon">{icon}</span>}
-                  <h4 className="c-footer__section-title">{title}</h4>
-                </div>
-              )}
-            </div>
-          )}
-          <div
-            className="c-footer__section-content"
-            id={
-              title
-                ? `footer-section-${title.toString().toLowerCase().replace(/\s+/g, '-')}`
-                : undefined
-            }
-            style={{
-              display: collapsible && isCollapsed ? 'none' : 'flex',
-            }}
-          >
+          {renderHeader()}
+          <div className="c-footer__section-content" id={sectionId}>
             {children}
           </div>
         </div>

package/src/components/Footer/FooterSocialLink.tsx

@@ -2,6 +2,65 @@ import React, { forwardRef } from 'react';
 import { Icon } from '../Icon/Icon';
 import { FooterSocialLinkProps } from '../../lib/types/components';
 
+// ─── Platform Maps ───────────────────────────────────────────────
+
+const PLATFORM_ICON_MAP: Record<string, string> = {
+  facebook: 'FacebookLogo',
+  twitter: 'TwitterLogo',
+  instagram: 'InstagramLogo',
+  linkedin: 'LinkedinLogo',
+  youtube: 'YoutubeLogo',
+  github: 'GithubLogo',
+  discord: 'DiscordLogo',
+  tiktok: 'TiktokLogo',
+  pinterest: 'PinterestLogo',
+  snapchat: 'SnapchatLogo',
+  whatsapp: 'WhatsappLogo',
+  telegram: 'TelegramLogo',
+  reddit: 'RedditLogo',
+  twitch: 'TwitchLogo',
+  spotify: 'SpotifyLogo',
+  dribbble: 'DribbbleLogo',
+  behance: 'BehanceLogo',
+  medium: 'MediumLogo',
+  dev: 'DevToLogo',
+  codepen: 'CodepenLogo',
+};
+
+const PLATFORM_LABEL_MAP: Record<string, string> = {
+  facebook: 'Facebook',
+  twitter: 'Twitter',
+  instagram: 'Instagram',
+  linkedin: 'LinkedIn',
+  youtube: 'YouTube',
+  github: 'GitHub',
+  discord: 'Discord',
+  tiktok: 'TikTok',
+  pinterest: 'Pinterest',
+  snapchat: 'Snapchat',
+  whatsapp: 'WhatsApp',
+  telegram: 'Telegram',
+  reddit: 'Reddit',
+  twitch: 'Twitch',
+  spotify: 'Spotify',
+  dribbble: 'Dribbble',
+  behance: 'Behance',
+  medium: 'Medium',
+  dev: 'Dev.to',
+  codepen: 'CodePen',
+};
+
+// ─── Helpers ─────────────────────────────────────────────────────
+
+const getPlatformIcon = (platform: string) => {
+  const iconName = PLATFORM_ICON_MAP[platform];
+  return iconName ? <Icon name={iconName as any} /> : <Icon name="Link" />;
+};
+
+const getPlatformLabel = (platform: string): string => PLATFORM_LABEL_MAP[platform] || platform;
+
+// ─── Component ───────────────────────────────────────────────────
+
 /**
  * FooterSocialLink component provides styled social media links with platform-specific icons.
  *
@@ -26,64 +85,6 @@ export const FooterSocialLink = forwardRef<HTMLAnchorElement, FooterSocialLinkPr
     },
     ref
   ) => {
-    const getPlatformIcon = (platform: string) => {
-      const iconMap: Record<string, string> = {
-        facebook: 'FacebookLogo',
-        twitter: 'TwitterLogo',
-        instagram: 'InstagramLogo',
-        linkedin: 'LinkedinLogo',
-        youtube: 'YoutubeLogo',
-        github: 'GithubLogo',
-        discord: 'DiscordLogo',
-        tiktok: 'TiktokLogo',
-        pinterest: 'PinterestLogo',
-        snapchat: 'SnapchatLogo',
-        whatsapp: 'WhatsappLogo',
-        telegram: 'TelegramLogo',
-        reddit: 'RedditLogo',
-        twitch: 'TwitchLogo',
-        spotify: 'SpotifyLogo',
-        dribbble: 'DribbbleLogo',
-        behance: 'BehanceLogo',
-        medium: 'MediumLogo',
-        dev: 'DevToLogo',
-        codepen: 'CodepenLogo',
-      };
-
-      const iconName = iconMap[platform];
-      if (iconName) {
-        return <Icon name={iconName as any} />;
-      }
-
-      return <Icon name="Link" />;
-    };
-
-    const getPlatformLabel = (platform: string) => {
-      const labels: Record<string, string> = {
-        facebook: 'Facebook',
-        twitter: 'Twitter',
-        instagram: 'Instagram',
-        linkedin: 'LinkedIn',
-        youtube: 'YouTube',
-        github: 'GitHub',
-        discord: 'Discord',
-        tiktok: 'TikTok',
-        pinterest: 'Pinterest',
-        snapchat: 'Snapchat',
-        whatsapp: 'WhatsApp',
-        telegram: 'Telegram',
-        reddit: 'Reddit',
-        twitch: 'Twitch',
-        spotify: 'Spotify',
-        dribbble: 'Dribbble',
-        behance: 'Behance',
-        medium: 'Medium',
-        dev: 'Dev.to',
-        codepen: 'CodePen',
-      };
-      return labels[platform] || platform;
-    };
-
     const linkClass = [
       'c-footer__social-link',
       `c-footer__social-link--${platform}`,

package/src/components/Footer/README.md

@@ -110,7 +110,7 @@ import { Footer, FooterSection, FooterLink } from '@shohojdhara/atomix';
 | `active` | `boolean` | `false` | Whether link is active |
 | `disabled` | `boolean` | `false` | Whether link is disabled |
 | `onClick` | `(event: MouseEvent) => void` | - | Link click handler |
-| `LinkComponent` | `React.ElementType` | - | Custom link component (e.g., React Router Link) |
+| `linkComponent` | `React.ElementType` | - | Custom link component (e.g., React Router Link) |
 
 ### Social Link Configuration
 

package/src/components/Hero/Hero.tsx

@@ -12,21 +12,35 @@ export interface HeroTitleProps extends React.HTMLAttributes<HTMLHeadingElement>
 const HeroTitle = ({ children, className, level = 'h1', ...props }: HeroTitleProps) => {
   const Tag = level as any;
   return (
-    <Tag className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${className || ''}`.trim()} {...props}>
+    <Tag
+      className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${className || ''}`.trim()}
+      {...props}
+    >
       {children}
     </Tag>
   );
 };
 
-const HeroSubtitle = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+const HeroSubtitle = ({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => {
   return (
-    <p className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${className || ''}`.trim()} {...props}>
+    <p
+      className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${className || ''}`.trim()}
+      {...props}
+    >
       {children}
     </p>
   );
 };
 
-const HeroText = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+const HeroText = ({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => {
   return (
     <p className={`${HERO.SELECTORS.TEXT.replace('.', '')} ${className || ''}`.trim()} {...props}>
       {children}
@@ -36,7 +50,10 @@ const HeroText = ({ children, className, ...props }: React.HTMLAttributes<HTMLPa
 
 const HeroActions = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
   return (
-    <div className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${className || ''}`.trim()} {...props}>
+    <div
+      className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${className || ''}`.trim()}
+      {...props}
+    >
       {children}
     </div>
   );
@@ -46,34 +63,32 @@ export interface HeroContentProps extends React.HTMLAttributes<HTMLDivElement> {
   glass?: AtomixGlassProps | boolean;
 }
 
+const HERO_DEFAULT_GLASS_PROPS = {
+  displacementScale: 60,
+  blurAmount: 3,
+  saturation: 180,
+  aberrationIntensity: 0,
+  borderRadius: 8,
+  overLight: false as const,
+  mode: 'standard' as const,
+};
+
 const HeroContent = ({ children, className, style, glass, ...props }: HeroContentProps) => {
   const contentClass = `${HERO.SELECTORS.CONTENT.replace('.', '')} ${className || ''}`.trim();
 
-  if (glass) {
-    const glassProps = typeof glass === 'boolean' ? {
-      displacementScale: 60,
-      blurAmount: 3,
-      saturation: 180,
-      aberrationIntensity: 0,
-      borderRadius: 8,
-      overLight: false,
-      mode: 'standard' as const,
-    } : glass;
+  const innerContent = glass ? <div className="u-p-4">{children}</div> : children;
 
-    return (
-      <div className={contentClass} style={style} {...props}>
-        <AtomixGlass {...glassProps}>
-          <div className="u-p-4">
-            {children}
-          </div>
-        </AtomixGlass>
-      </div>
-    );
-  }
+  const wrappedContent = glass
+    ? (() => {
+        const glassProps =
+          glass === true ? HERO_DEFAULT_GLASS_PROPS : { ...HERO_DEFAULT_GLASS_PROPS, ...glass };
+        return <AtomixGlass {...glassProps}>{innerContent}</AtomixGlass>;
+      })()
+    : innerContent;
 
   return (
     <div className={contentClass} style={style} {...props}>
-      {children}
+      {wrappedContent}
     </div>
   );
 };
@@ -106,7 +121,13 @@ const HeroImage = ({
   );
 };
 
-const HeroBackground = ({ className, style, src, children, ...props }: React.HTMLAttributes<HTMLDivElement> & { src?: string }) => {
+const HeroBackground = ({
+  className,
+  style,
+  src,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { src?: string }) => {
   return (
     <div
       className={`${HERO.SELECTORS.BG.replace('.', '')} ${className || ''}`.trim()}
@@ -114,11 +135,7 @@ const HeroBackground = ({ className, style, src, children, ...props }: React.HTM
       {...props}
     >
       {src && (
-         <img
-            src={src}
-            alt="Background"
-            className={HERO.SELECTORS.BG_IMAGE.replace('.', '')}
-          />
+        <img src={src} alt="Background" className={HERO.SELECTORS.BG_IMAGE.replace('.', '')} />
       )}
       {children}
     </div>
@@ -332,11 +349,9 @@ export const Hero: React.FC<HeroProps> & {
   };
 
   const renderContent = () => {
-    const content = (
-      <div
-        className={`${HERO.SELECTORS.CONTENT.replace('.', '')} ${parts?.content?.className || ''}`.trim()}
-        style={parts?.content?.style}
-      >
+    // Build inner content elements ONCE — no duplication
+    const innerElements = (
+      <>
         {subtitle && (
           <p
             className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${parts?.subtitle?.className || ''}`.trim()}
@@ -367,115 +382,30 @@ export const Hero: React.FC<HeroProps> & {
             {actions}
           </div>
         )}
-      </div>
+      </>
     );
 
-    // If glass is explicitly set to false, don't apply glass effect
-    if (glass === false) {
-      return content;
-    }
-
-    // If glass is true or an object, apply glass effect
-    if (glass) {
-      // If glass is true, use default glass props
-      if (glass === true) {
-        return (
-          <div
-            className={`${HERO.SELECTORS.CONTENT.replace('.', '')} ${parts?.content?.className || ''}`.trim()}
-            style={parts?.content?.style}
-          >
-            <AtomixGlass
-              displacementScale={60}
-              blurAmount={3}
-              saturation={180}
-              aberrationIntensity={0}
-              borderRadius={8}
-              overLight={false}
-              mode="standard"
-            >
-              <div className="u-p-4">
-                {subtitle && (
-                  <p
-                    className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${parts?.subtitle?.className || ''}`.trim()}
-                    style={parts?.subtitle?.style}
-                  >
-                    {subtitle}
-                  </p>
-                )}
-                <HeadingTag
-                  className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${parts?.title?.className || ''}`.trim()}
-                  style={parts?.title?.style}
-                >
-                  {title}
-                </HeadingTag>
-                {text && (
-                  <p
-                    className={`${HERO.SELECTORS.TEXT.replace('.', '')} ${parts?.text?.className || ''}`.trim()}
-                    style={parts?.text?.style}
-                  >
-                    {text}
-                  </p>
-                )}
-                {actions && (
-                  <div
-                    className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${parts?.actions?.className || ''}`.trim()}
-                    style={parts?.actions?.style}
-                  >
-                    {actions}
-                  </div>
-                )}
-              </div>
+    // Conditionally wrap with AtomixGlass using the standard glass prop pattern
+    const contentBody = glass
+      ? (() => {
+          const glassProps =
+            glass === true ? HERO_DEFAULT_GLASS_PROPS : { ...HERO_DEFAULT_GLASS_PROPS, ...glass };
+          return (
+            <AtomixGlass {...glassProps}>
+              <div className="u-p-4">{innerElements}</div>
             </AtomixGlass>
-          </div>
-        );
-      }
-
-      // If glass is an object, use provided glass props
-      return (
-        <div
-          className={`${HERO.SELECTORS.CONTENT.replace('.', '')} ${parts?.content?.className || ''}`.trim()}
-          style={parts?.content?.style}
-        >
-          <AtomixGlass {...glass}>
-            <div className="u-p-4">
-              {subtitle && (
-                <p
-                  className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${parts?.subtitle?.className || ''}`.trim()}
-                  style={parts?.subtitle?.style}
-                >
-                  {subtitle}
-                </p>
-              )}
-              <HeadingTag
-                className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${parts?.title?.className || ''}`.trim()}
-                style={parts?.title?.style}
-              >
-                {title}
-              </HeadingTag>
-              {text && (
-                <p
-                  className={`${HERO.SELECTORS.TEXT.replace('.', '')} ${parts?.text?.className || ''}`.trim()}
-                  style={parts?.text?.style}
-                >
-                  {text}
-                </p>
-              )}
-              {actions && (
-                <div
-                  className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${parts?.actions?.className || ''}`.trim()}
-                  style={parts?.actions?.style}
-                >
-                  {actions}
-                </div>
-              )}
-            </div>
-          </AtomixGlass>
-        </div>
-      );
-    }
+          );
+        })()
+      : innerElements;
 
-    // Default behavior - no glass effect
-    return content;
+    return (
+      <div
+        className={`${HERO.SELECTORS.CONTENT.replace('.', '')} ${parts?.content?.className || ''}`.trim()}
+        style={parts?.content?.style}
+      >
+        {contentBody}
+      </div>
+    );
   };
 
   const renderForegroundImage = () => {

package/src/components/Navigation/Menu/MegaMenu.tsx

@@ -86,7 +86,7 @@ export const MegaMenuColumn = forwardRef<HTMLDivElement, MegaMenuColumnProps>(
 MegaMenuColumn.displayName = 'MegaMenuColumn';
 
 export const MegaMenuLink = forwardRef<HTMLAnchorElement, MegaMenuLinkProps>(
-  ({ href, children, className = '', disabled = false, onClick }, ref) => {
+  ({ href, target, linkComponent, children, className = '', disabled = false, onClick }, ref) => {
     const handleClick = (e: React.MouseEvent) => {
       if (disabled) {
         e.preventDefault();
@@ -98,17 +98,22 @@ export const MegaMenuLink = forwardRef<HTMLAnchorElement, MegaMenuLinkProps>(
       }
     };
 
-    return (
-      <a
-        ref={ref}
-        href={href}
-        className={`c-menu__subitem-link ${disabled ? 'is-disabled' : ''} ${className}`}
-        onClick={handleClick}
-        aria-disabled={disabled}
-      >
-        {children}
-      </a>
-    );
+    const linkProps = {
+      ref,
+      href,
+      to: href,
+      target,
+      className: `c-menu__subitem-link ${disabled ? 'is-disabled' : ''} ${className}`,
+      onClick: handleClick,
+      'aria-disabled': disabled,
+    };
+
+    if (linkComponent) {
+      const Component = linkComponent as React.ComponentType<any>;
+      return <Component {...linkProps}>{children}</Component>;
+    }
+
+    return <a {...linkProps}>{children}</a>;
   }
 );
 

package/src/components/Navigation/Menu/Menu.tsx

@@ -39,7 +39,17 @@ interface MenuDividerProps {
 
 export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
   (
-    { children, href = '#', icon, active = false, disabled = false, onClick, className = '' },
+    {
+      children,
+      href = '#',
+      target,
+      linkComponent,
+      icon,
+      active = false,
+      disabled = false,
+      onClick,
+      className = '',
+    },
     ref
   ) => {
     const handleClick = (e: React.MouseEvent) => {
@@ -55,31 +65,46 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
 
     const itemClass = `c-menu__item ${active ? 'is-active' : ''} ${disabled ? 'is-disabled' : ''} ${className}`;
 
+    const linkProps = {
+      href,
+      to: href,
+      target,
+      className: 'c-menu__link',
+      onClick: handleClick,
+      'aria-disabled': disabled,
+      'aria-current': (active ? 'page' : undefined) as React.AriaAttributes['aria-current'],
+    };
+
+    const content = (
+      <>
+        {icon &&
+          (typeof icon === 'string' ? (
+            icon.startsWith('c-icon-') ? (
+              <Icon
+                name={mapIconName(icon.replace('c-icon-', ''))}
+                size="sm"
+                className="c-menu__icon"
+              />
+            ) : (
+              <i className={`c-menu__icon ${icon}`}>{typeof icon !== 'string' && icon}</i>
+            )
+          ) : (
+            <span className="c-menu__icon">{icon}</span>
+          ))}
+        {children}
+      </>
+    );
+
     return (
       <li ref={ref} className={itemClass} role="menuitem">
-        <a
-          href={href}
-          className="c-menu__link"
-          onClick={handleClick}
-          aria-disabled={disabled}
-          aria-current={active ? 'page' : undefined}
-        >
-          {icon &&
-            (typeof icon === 'string' ? (
-              icon.startsWith('c-icon-') ? (
-                <Icon
-                  name={mapIconName(icon.replace('c-icon-', ''))}
-                  size="sm"
-                  className="c-menu__icon"
-                />
-              ) : (
-                <i className={`c-menu__icon ${icon}`}>{typeof icon !== 'string' && icon}</i>
-              )
-            ) : (
-              <span className="c-menu__icon">{icon}</span>
-            ))}
-          {children}
-        </a>
+        {linkComponent ? (
+          (() => {
+            const Component = linkComponent as React.ComponentType<any>;
+            return <Component {...linkProps}>{content}</Component>;
+          })()
+        ) : (
+          <a {...linkProps}>{content}</a>
+        )}
       </li>
     );
   }