@shohojdhara/atomix 0.3.0 → 0.3.1

package/src/components/Callout/Callout.test.tsx

@@ -151,13 +151,9 @@ describe('Callout Component', () => {
       const glassProps = JSON.parse(glassElement.getAttribute('data-glass-props') || '{}');
 
       expect(glassProps).toMatchObject({
-        displacementScale: 40,
-        blurAmount: 0,
-        saturation: 160,
-        aberrationIntensity: 1,
+        displacementScale: 30,
         cornerRadius: 8,
-        overLight: false,
-        mode: 'standard',
+        elasticity: 0,
       });
     });
 
@@ -184,10 +180,8 @@ describe('Callout Component', () => {
         blurAmount: 2,
         saturation: 180,
         cornerRadius: 12,
-        // Default values that weren't overridden
-        aberrationIntensity: 1,
-        overLight: false,
-        mode: 'standard',
+        // Default values from Callout
+        elasticity: 0,
       });
     });
 
@@ -196,7 +190,7 @@ describe('Callout Component', () => {
       const TestIcon = () => <div data-testid="test-icon">Icon</div>;
       const actions = <button data-testid="action-button">Action</button>;
 
-      render(
+      const { container } = render(
         <Callout
           title="Glass Test"
           variant="success"
@@ -223,9 +217,9 @@ describe('Callout Component', () => {
       // Check that glass wrapper is present
       expect(screen.getByTestId('atomix-glass')).toBeInTheDocument();
 
-      // Check that all classes are applied
-      const calloutElement = screen.getByTestId('atomix-glass').firstChild;
-      expect(calloutElement).toHaveClass(
+      // Check that all classes are applied to the outer wrapper
+      const outerCallout = container.querySelector('.c-callout');
+      expect(outerCallout).toHaveClass(
         'c-callout',
         'c-callout--success',
         'c-callout--oneline',

package/src/components/Card/Card.tsx

@@ -12,6 +12,8 @@ export const Card = React.memo(
         variant = '',
         appearance = 'filled',
         elevation = 'none',
+        hoverable = false,
+        hoverElevation = 'md',
         // Layout
         row = false,
         flat = false,
@@ -77,6 +79,9 @@ export const Card = React.memo(
             elevation === 'md' ? CARD.CLASSES.ELEVATION_MD : '',
             elevation === 'lg' ? CARD.CLASSES.ELEVATION_LG : '',
             elevation === 'xl' ? CARD.CLASSES.ELEVATION_XL : '',
+            // Hoverable modifier
+            hoverable ? 'c-card--hoverable' : '',
+            hoverable && hoverElevation ? `c-card--hover-elevation-${hoverElevation}` : '',
             // Layout modifiers
             row ? CARD.CLASSES.ROW : '',
             flat ? CARD.CLASSES.FLAT : '',
@@ -91,7 +96,7 @@ export const Card = React.memo(
           ]
             .filter(Boolean)
             .join(' '),
-        [size, variant, appearance, elevation, row, flat, active, disabled, loading, selected, interactive, isClickable, glass, className]
+        [size, variant, appearance, elevation, hoverable, hoverElevation, row, flat, active, disabled, loading, selected, interactive, isClickable, glass, className]
       );
 
       // Determine ARIA role
@@ -267,6 +272,103 @@ export const Card = React.memo(
 
 Card.displayName = 'Card';
 
+// Card subcomponents for structured content
+export interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Header title
+   */
+  title?: React.ReactNode;
+  /**
+   * Header subtitle
+   */
+  subtitle?: React.ReactNode;
+  /**
+   * Action element (e.g., button) to display in header
+   */
+  action?: React.ReactNode;
+  /**
+   * Icon to display in header
+   */
+  icon?: React.ReactNode;
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ title, subtitle, action, icon, children, className = '', ...props }, ref) => {
+    const headerClasses = `${CARD.SELECTORS.HEADER.substring(1)} ${className}`.trim();
+
+    return (
+      <div ref={ref} className={headerClasses} {...props}>
+        {icon && <div className={CARD.SELECTORS.ICON.substring(1)}>{icon}</div>}
+        {(title || subtitle) && (
+          <div>
+            {title && <h3 className={CARD.SELECTORS.TITLE.substring(1)}>{title}</h3>}
+            {subtitle && <p className={CARD.SELECTORS.TEXT.substring(1)}>{subtitle}</p>}
+          </div>
+        )}
+        {action && <div className={CARD.SELECTORS.ACTIONS.substring(1)}>{action}</div>}
+        {children}
+      </div>
+    );
+  }
+);
+
+CardHeader.displayName = 'CardHeader';
+
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Make body scrollable
+   */
+  scrollable?: boolean;
+  /**
+   * Maximum height for scrollable body
+   */
+  maxHeight?: string | number;
+}
+
+export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
+  ({ scrollable = false, maxHeight, children, className = '', style, ...props }, ref) => {
+    const bodyClasses = `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? 'c-card__body--scrollable' : ''} ${className}`.trim();
+    const bodyStyle: React.CSSProperties = {
+      ...style,
+      ...(scrollable && maxHeight ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight, overflowY: 'auto' } : {}),
+    };
+
+    return (
+      <div ref={ref} className={bodyClasses} style={bodyStyle} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardBody.displayName = 'CardBody';
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Footer alignment
+   */
+  align?: 'start' | 'center' | 'end' | 'between';
+}
+
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ align, children, className = '', style, ...props }, ref) => {
+    const footerClasses = `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ''} ${className}`.trim();
+
+    return (
+      <div ref={ref} className={footerClasses} style={style} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardFooter.displayName = 'CardFooter';
+
+// Attach subcomponents to Card
+(Card as any).Header = CardHeader;
+(Card as any).Body = CardBody;
+(Card as any).Footer = CardFooter;
+
 export type { CardProps };
 
 export default Card;

package/src/components/Card/index.ts

@@ -5,8 +5,9 @@
  * Types and hooks are defined in the lib directory.
  */
 
-// Export the main Card component
-export { default as Card } from './Card';
+// Export the main Card component with subcomponents
+export { default as Card, CardHeader, CardBody, CardFooter } from './Card';
+export type { CardHeaderProps, CardBodyProps, CardFooterProps } from './Card';
 
 // Export the ElevationCard variant
 export { default as ElevationCard } from './ElevationCard';

package/src/components/Icon/index.ts

@@ -1,2 +1,2 @@
-export { Icon, type IconProps, type IconSize, type IconWeight } from './Icon';
+export { Icon, type IconProps, type IconSize, type IconWeight, type PhosphorIconsType } from './Icon';
 export { default } from './Icon';

package/src/components/Modal/Modal.stories.tsx

@@ -317,6 +317,7 @@ export const GlassModal: Story = {
             appearance. The glass effect creates a modern, elegant look that works well over
             colorful backgrounds.
           </p>
+          <img src="https://picsum.photos/800/410" alt="desert" style={{ maxWidth: '100%' }} />
           <p>
             The glass effect includes displacement, blur, and chromatic aberration for a premium
             feel.
@@ -329,9 +330,14 @@ export const GlassModal: Story = {
     Story => (
       <div
         style={{
-          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-          minHeight: '100vh',
-          padding: '2rem',
+          background: 'url(https://picsum.photos/1920/1080)',
+          height: '100vh',
+          width: '100vw',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
       >
         <Story />
@@ -375,23 +381,10 @@ export const GlassModalCustom: Story = {
           }
           footer={
             <>
-              <div
-                className="c-btn c-btn--outline-secondary"
-                onClick={() => setIsOpen(false)}
-                style={{
-                  cursor: 'pointer',
-                  padding: '8px 16px',
-                  display: 'inline-block',
-                  marginRight: '8px',
-                }}
-              >
+              <div className="c-btn c-btn--outline-secondary" onClick={() => setIsOpen(false)}>
                 Cancel
               </div>
-              <div
-                className="c-btn c-btn--primary"
-                onClick={() => setIsOpen(false)}
-                style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
-              >
+              <div className="c-btn c-btn--primary" onClick={() => setIsOpen(false)}>
                 Confirm
               </div>
             </>
@@ -402,6 +395,7 @@ export const GlassModalCustom: Story = {
             aberration. The polar mode creates a different visual effect compared to the standard
             shader mode.
           </p>
+          <img src="https://picsum.photos/800/410" alt="desert" style={{ maxWidth: '100%' }} />
         </Modal>
       </>
     );
@@ -410,12 +404,14 @@ export const GlassModalCustom: Story = {
     Story => (
       <div
         style={{
-          background:
-            'url(https://images.unsplash.com/photo-1744872665943-fd335d371059?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+          background: 'url(https://picsum.photos/1920/1080)',
           height: '100vh',
           width: '100vw',
           backgroundSize: 'cover',
           backgroundPosition: 'center',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
       >
         <Story />
@@ -489,23 +485,10 @@ export const GlassModalSizes: Story = {
           glass={true}
           footer={
             <>
-              <div
-                className="c-btn c-btn--outline-secondary"
-                onClick={() => setIsOpen(false)}
-                style={{
-                  cursor: 'pointer',
-                  padding: '8px 16px',
-                  display: 'inline-block',
-                  marginRight: '8px',
-                }}
-              >
+              <div className="c-btn c-btn--outline-secondary" onClick={() => setIsOpen(false)}>
                 Cancel
               </div>
-              <div
-                className="c-btn c-btn--primary"
-                onClick={() => setIsOpen(false)}
-                style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
-              >
+              <div className="c-btn c-btn--primary" onClick={() => setIsOpen(false)}>
                 Confirm
               </div>
             </>
@@ -515,6 +498,9 @@ export const GlassModalSizes: Story = {
           <p>
             The glass effect adapts to different modal sizes while maintaining its visual appeal.
           </p>
+          <p>
+            The glass effect enhances the modal's appearance, making it visually appealing and  easier to read.
+          </p>
         </Modal>
       </div>
     );
@@ -523,9 +509,14 @@ export const GlassModalSizes: Story = {
     Story => (
       <div
         style={{
-          background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-          minHeight: '100vh',
-          padding: '2rem',
+          background: 'url(https://picsum.photos/1920/1080)',
+          height: '100vh',
+          width: '100vw',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
       >
         <Story />

package/src/components/Modal/Modal.tsx

@@ -197,11 +197,11 @@ export const Modal: React.FC<ModalProps> = ({
           ? // Default glass settings for modals
             (() => {
               const defaultGlassProps = {
-                displacementScale: 100,
-                blurAmount: 2,
-                aberrationIntensity: 1,
-                cornerRadius: 12,
+                displacementScale: document.querySelector('.c-modal---glass .c-modal__content')?.clientHeight,
+                blurAmount: 2.2,
+                elasticity: 0,
                 mode: 'shader' as const,
+                shaderMode: 'premiumGlass'
               };
 
               const glassProps =

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

@@ -1,11 +1,32 @@
-import React, { useState, useEffect, useRef, forwardRef } from 'react';
+import React, { useState, useEffect, useRef, forwardRef, createContext, useContext } from 'react';
 import { SideMenuProps } from '../../../lib/types/components';
 import { useSideMenu } from '../../../lib/composables/useSideMenu';
 import { Icon } from '../../Icon';
 import { AtomixGlass } from '../../AtomixGlass/AtomixGlass';
+import useForkRef from '../../../lib/utils/useForkRef';
 import SideMenuList from './SideMenuList';
 import SideMenuItem from './SideMenuItem';
 
+// Context for passing LinkComponent to SideMenuItem children
+const SideMenuContext = createContext<{
+  LinkComponent?: React.ComponentType<{
+    href?: string;
+    to?: string;
+    children: React.ReactNode;
+    className?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    target?: string;
+    rel?: string;
+    'aria-disabled'?: boolean;
+    'aria-current'?: string;
+    tabIndex?: number;
+    ref?: React.Ref<HTMLAnchorElement>;
+  }>;
+}>({});
+
+// Hook to use SideMenu context
+export const useSideMenuContext = () => useContext(SideMenuContext);
+
 /**
  * SideMenu component provides a collapsible navigation menu with title and menu items.
  * Automatically collapses on mobile devices and can be toggled via a header button.
@@ -38,6 +59,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       toggleIcon,
       id,
       glass,
+      LinkComponent,
     },
     ref
   ) => {
@@ -49,7 +71,6 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       generateSideMenuClass,
       generateWrapperClass,
       handleToggle,
-      handleDesktopCollapse,
     } = useSideMenu({
       isOpen,
       onToggle,
@@ -59,6 +80,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       disabled,
     });
 
+    // Mobile breakpoint matches md breakpoint (768px)
     const MOBILE_BREAKPOINT = 768;
 
     // Track mobile state
@@ -116,23 +138,23 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       });
     }, [menuItems?.length]);
 
+    // Helper function to update nested wrapper height
+    const updateNestedHeight = (index: number, isOpen: boolean) => {
+      const wrapper = nestedWrapperRefs.current[index];
+      const inner = nestedInnerRefs.current[index];
+      if (wrapper && inner) {
+        wrapper.style.height = isOpen ? `${inner.scrollHeight}px` : '0px';
+      }
+    };
+
     // Set initial heights for nested wrappers on mount and when menuItems change
     useEffect(() => {
       if (!menuItems?.length) return;
 
       const timeoutId = setTimeout(() => {
         menuItems.forEach((_, index) => {
-          const wrapper = nestedWrapperRefs.current[index];
-          const inner = nestedInnerRefs.current[index];
           const isOpen = nestedItemStates[index] ?? true;
-
-          if (wrapper && inner) {
-            if (isOpen) {
-              wrapper.style.height = `${inner.scrollHeight}px`;
-            } else {
-              wrapper.style.height = '0px';
-            }
-          }
+          updateNestedHeight(index, isOpen);
         });
       }, 0);
 
@@ -149,22 +171,12 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
 
       Object.keys(nestedItemStates).forEach(key => {
         const index = Number(key);
-        const wrapper = nestedWrapperRefs.current[index];
-        const inner = nestedInnerRefs.current[index];
-        const isOpen = nestedItemStates[index];
-
-        if (wrapper && inner) {
-          const frameId = requestAnimationFrame(() => {
-            if (wrapper && inner) {
-              if (isOpen) {
-                wrapper.style.height = `${inner.scrollHeight}px`;
-              } else {
-                wrapper.style.height = '0px';
-              }
-            }
-          });
-          frameIds.push(frameId);
-        }
+        const isOpen = nestedItemStates[index] ?? true;
+
+        const frameId = requestAnimationFrame(() => {
+          updateNestedHeight(index, isOpen);
+        });
+        frameIds.push(frameId);
       });
 
       return () => {
@@ -172,15 +184,8 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       };
     }, [nestedItemStates, menuItems?.length]);
 
-    // Combine refs
-    const combinedRef = (node: HTMLDivElement | null) => {
-      (sideMenuRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) {
-        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
-      }
-    };
+    // Combine refs using utility
+    const combinedRef = useForkRef(sideMenuRef, ref);
 
     const sideMenuClass = generateSideMenuClass({
       className,
@@ -230,8 +235,9 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
           id={id ? `${id}-content` : undefined}
           aria-hidden={shouldShowToggler ? !isOpenState : false}
         >
-          <div ref={innerRef} className="c-side-menu__inner">
-            {children && children}
+          <SideMenuContext.Provider value={{ LinkComponent }}>
+            <div ref={innerRef} className="c-side-menu__inner">
+              {children}
             {menuItems?.map((item, index) => {
               const isNestedItemOpen = nestedItemStates[index] ?? true;
               const hasItems = item.items && item.items.length > 0;
@@ -302,6 +308,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
                               active={subItem.active}
                               disabled={subItem.disabled}
                               icon={subItem.icon}
+                              LinkComponent={LinkComponent}
                             >
                               {subItem.title}
                             </SideMenuItem>
@@ -313,7 +320,8 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
                 </div>
               );
             })}
-          </div>
+            </div>
+          </SideMenuContext.Provider>
         </div>
       </>
     );
@@ -330,7 +338,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
         <AtomixGlass {...glassProps}>
           <div
             ref={combinedRef}
-            className={sideMenuClass + ' c-side-menu--glass'}
+            className={`${sideMenuClass} c-side-menu--glass`}
             id={id}
             style={style}
           >

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

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import { SideMenuItemProps } from '../../../lib/types/components';
 import { useSideMenuItem } from '../../../lib/composables/useSideMenu';
+import { useSideMenuContext } from './SideMenu';
 
 /**
  * SideMenuItem component represents a single navigation item in a side menu.
@@ -39,10 +40,14 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
       className = '',
       target,
       rel,
-      LinkComponent,
+      LinkComponent: LinkComponentProp,
     },
     ref
   ) => {
+    const { LinkComponent: LinkComponentFromContext } = useSideMenuContext();
+    // Use LinkComponent from props first, then fall back to context
+    const LinkComponent = LinkComponentProp ?? LinkComponentFromContext;
+    
     const { generateSideMenuItemClass, handleClick } = useSideMenuItem({
       active,
       disabled,
@@ -51,31 +56,65 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
 
     const itemClass = generateSideMenuItemClass();
 
-    const linkProps = {
-      ref: ref as React.Ref<HTMLAnchorElement>,
-      href: disabled ? undefined : href,
-      className: itemClass,
-      onClick: handleClick(onClick),
-      'aria-disabled': disabled,
-      'aria-current': (active ? 'page' : undefined) as React.AriaAttributes['aria-current'],
-      target: target,
-      rel: rel,
-      tabIndex: disabled ? -1 : 0,
-    };
-
     // Render as link if href is provided
     if (href) {
-      return LinkComponent ? (
-        (() => {
-          const Component = LinkComponent as React.ComponentType<any>;
-          return (
-            <Component {...linkProps}>
-              {icon && <span className="c-side-menu__link-icon">{icon}</span>}
-              <span className="c-side-menu__link-text">{children}</span>
-            </Component>
-          );
-        })()
-      ) : (
+      // When using a custom LinkComponent (e.g., Next.js Link, React Router Link)
+      if (LinkComponent) {
+        const Component = LinkComponent;
+        
+        // Build link props - support both 'href' (Next.js) and 'to' (React Router)
+        // The Link component will use whichever prop it needs
+        const linkProps: {
+          ref?: React.Ref<HTMLAnchorElement>;
+          className?: string;
+          onClick?: (event: React.MouseEvent) => void;
+          'aria-disabled'?: boolean;
+          'aria-current'?: string;
+          target?: string;
+          rel?: string;
+          tabIndex?: number;
+          href?: string;
+          to?: string;
+        } = {
+          ref: ref as React.Ref<HTMLAnchorElement>,
+          className: itemClass,
+          onClick: disabled
+            ? (e: React.MouseEvent) => {
+                e.preventDefault();
+              }
+            : onClick,
+          'aria-disabled': disabled,
+          'aria-current': active ? 'page' : undefined,
+          target: target,
+          rel: rel,
+          tabIndex: disabled ? -1 : 0,
+          // Support both Next.js (href) and React Router (to) Link components
+          // Pass both props - the Link component will use whichever it needs
+          ...(disabled ? {} : { href, to: href }),
+        };
+        
+        return (
+          <Component {...linkProps}>
+            {icon && <span className="c-side-menu__link-icon">{icon}</span>}
+            <span className="c-side-menu__link-text">{children}</span>
+          </Component>
+        );
+      }
+      
+      // Regular anchor tag
+      const linkProps = {
+        ref: ref as React.Ref<HTMLAnchorElement>,
+        href: disabled ? undefined : href,
+        className: itemClass,
+        onClick: handleClick(onClick),
+        'aria-disabled': disabled,
+        'aria-current': (active ? 'page' : undefined) as React.AriaAttributes['aria-current'],
+        target: target,
+        rel: rel,
+        tabIndex: disabled ? -1 : 0,
+      };
+      
+      return (
         <a {...linkProps}>
           {icon && <span className="c-side-menu__link-icon">{icon}</span>}
           <span className="c-side-menu__link-text">{children}</span>

package/src/components/Popover/Popover.tsx

@@ -94,7 +94,7 @@ export const Popover: React.FC<PopoverProps> = ({
                   glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
                 return (
-                  <AtomixGlass {...glassProps}>
+                  <AtomixGlass {...glassProps} style={style}>
                     <div className="c-popover__content">
                       <div className="c-popover__content-inner">{content}</div>
                     </div>