@shohojdhara/atomix 0.2.9 → 0.3.1

package/src/components/Button/Button.tsx

@@ -3,6 +3,7 @@ import { useButton } from '../../lib/composables/useButton';
 import { ButtonProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { Spinner } from '../Spinner/Spinner';
+import { Icon, type PhosphorIconsType } from '../Icon/Icon';
 import { BUTTON } from '../../lib/constants/components';
 
 export type ButtonAsProp = {
@@ -13,7 +14,7 @@ export type ButtonAsProp = {
 };
 
 export const Button = React.memo(
-  forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
+  forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps & ButtonAsProp>(
     (
       {
         label,
@@ -25,6 +26,8 @@ export const Button = React.memo(
         loading = false,
         loadingText,
         icon,
+        iconName,
+        iconSize = 'sm',
         iconPosition = 'start',
         iconOnly = false,
         rounded = false,
@@ -35,6 +38,8 @@ export const Button = React.memo(
         type = 'button',
         className = '',
         as: Component = 'button',
+        href,
+        target,
         glass,
         onHover,
         onFocus,
@@ -51,6 +56,18 @@ export const Button = React.memo(
     ) => {
       const isDisabled = disabled || loading;
 
+      // Determine if we should render as a link
+      const shouldRenderAsLink = Boolean(href && !isDisabled);
+
+      // Resolve icon element - support both icon (ReactNode) and iconName (string)
+      const iconElement = useMemo(() => {
+        if (loading) return null;
+        if (iconName) {
+          return <Icon name={iconName as PhosphorIconsType} size={iconSize} />;
+        }
+        return icon;
+      }, [icon, iconName, iconSize, loading]);
+
       const { generateButtonClass, handleClick } = useButton({
         variant,
         size,
@@ -85,21 +102,21 @@ export const Button = React.memo(
 
       // Handle click with loading check
       const handleClickEvent = useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
+        (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
           if (isDisabled) {
             event.preventDefault();
             return;
           }
-          onClick?.(event);
+          onClick?.(event as React.MouseEvent<HTMLButtonElement>);
         },
         [isDisabled, onClick]
       );
 
       // Handle hover
       const handleMouseEnter = useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
+        (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
           if (!isDisabled) {
-            onHover?.(event);
+            onHover?.(event as React.MouseEvent<HTMLButtonElement>);
           }
         },
         [isDisabled, onHover]
@@ -107,9 +124,9 @@ export const Button = React.memo(
 
       // Handle focus
       const handleFocusEvent = useCallback(
-        (event: React.FocusEvent<HTMLButtonElement>) => {
+        (event: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => {
           if (!isDisabled) {
-            onFocus?.(event);
+            onFocus?.(event as React.FocusEvent<HTMLButtonElement>);
           }
         },
         [isDisabled, onFocus]
@@ -117,9 +134,9 @@ export const Button = React.memo(
 
       // Handle blur
       const handleBlurEvent = useCallback(
-        (event: React.FocusEvent<HTMLButtonElement>) => {
+        (event: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => {
           if (!isDisabled) {
-            onBlur?.(event);
+            onBlur?.(event as React.FocusEvent<HTMLButtonElement>);
           }
         },
         [isDisabled, onBlur]
@@ -141,9 +158,9 @@ export const Button = React.memo(
 
       // Button content with icon positioning
       const buttonContent = useMemo(() => {
-        const iconElement = icon && !loading && (
+        const iconSpan = iconElement && (
           <span className={BUTTON.ICON_CLASS} aria-hidden="true">
-            {icon}
+            {iconElement}
           </span>
         );
 
@@ -169,7 +186,7 @@ export const Button = React.memo(
             <>
               {labelElement}
               {spinnerElement}
-              {iconElement}
+              {iconSpan}
             </>
           );
         }
@@ -177,23 +194,23 @@ export const Button = React.memo(
         return (
           <>
             {spinnerElement}
-            {iconElement}
+            {iconSpan}
             {labelElement}
           </>
         );
-      }, [icon, iconPosition, iconOnly, buttonText, loading, spinnerSize, variant]);
+      }, [iconElement, iconPosition, iconOnly, buttonText, loading, spinnerSize, variant]);
 
       // Button props
       const buttonProps = useMemo(
         () => ({
           ref,
           className: buttonClass,
-          type: Component === 'button' ? type : undefined,
+          type: Component === 'button' && !shouldRenderAsLink ? type : undefined,
           onClick: handleClickEvent,
           onMouseEnter: onHover ? handleMouseEnter : undefined,
           onFocus: onFocus ? handleFocusEvent : undefined,
           onBlur: onBlur ? handleBlurEvent : undefined,
-          disabled: isDisabled && Component === 'button',
+          disabled: isDisabled && Component === 'button' && !shouldRenderAsLink,
           'aria-disabled': isDisabled,
           'aria-busy': loading,
           'aria-label': ariaLabel || (iconOnly ? label || children : undefined),
@@ -228,8 +245,36 @@ export const Button = React.memo(
         ]
       );
 
+      // Render as anchor if href is provided
+      if (shouldRenderAsLink) {
+        const { ref: _, ...buttonPropsWithoutRef } = buttonProps;
+        const anchorButtonProps = {
+          ...buttonPropsWithoutRef,
+          type: undefined, 
+          disabled: undefined,
+        };
+        const anchorElement = (
+          <a {...anchorButtonProps} ref={ref as React.Ref<HTMLAnchorElement>} href={href} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined}>
+            {buttonContent}
+          </a>
+        );
+
+        if (glass) {
+          const defaultGlassProps = {
+            displacementScale: 20,
+            blurAmount: 0,
+            saturation: 200,
+            elasticity: 0,
+          };
+          const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+          return <AtomixGlass {...glassProps}>{anchorElement}</AtomixGlass>;
+        }
+
+        return anchorElement;
+      }
+
+      // Default button rendering
       if (glass) {
-        // Default glass settings for buttons
         const defaultGlassProps = {
           displacementScale: 20,
           blurAmount: 0,

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/Footer/Footer.stories.tsx

@@ -143,7 +143,6 @@ export const WithNewsletter: Story = {
     newsletterDescription:
       'Get the latest updates, articles, and resources delivered to your inbox.',
     onNewsletterSubmit: (email: string) => {
-      console.log('Newsletter signup:', email);
       alert(`Thank you for subscribing with ${email}!`);
     },
   },
@@ -156,7 +155,7 @@ export const WithBackToTop: Story = {
     showBackToTop: true,
     backToTopText: 'Back to Top',
     onBackToTop: () => {
-      console.log('Back to top clicked');
+      // Back to top functionality
     },
   },
   render: Default.render,

package/src/components/Footer/Footer.tsx

@@ -205,11 +205,6 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
                   {React.Children.map(children, child => {
                     // Check if the child is a valid React element
                     if (React.isValidElement(child)) {
-                      console.log(
-                        'Footer - passing showNewsletter:',
-                        showNewsletter,
-                        typeof showNewsletter
-                      );
                       // Clone the element and pass the showNewsletter prop
                       return React.cloneElement(child, { showNewsletter } as any);
                     }

package/src/components/Footer/FooterLink.tsx

@@ -48,12 +48,13 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
     };
 
     if (LinkComponent) {
+      const Component = LinkComponent as React.ComponentType<any>;
       return (
-        <LinkComponent ref={ref} to={href} {...linkProps}>
+        <Component ref={ref} to={href} {...linkProps}>
           {icon && <span className="c-footer__link-icon">{icon}</span>}
           <span className="c-footer__link-text">{children}</span>
           {external && <span className="c-footer__link-external">↗</span>}
-        </LinkComponent>
+        </Component>
       );
     }
 

package/src/components/Footer/FooterSection.tsx

@@ -33,13 +33,6 @@ export const FooterSection = forwardRef<
   ) => {
     const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
 
-    console.log(
-      'FooterSection render - showNewsletter:',
-      showNewsletter,
-      'Type:',
-      typeof showNewsletter
-    );
-
     const handleToggle = () => {
       if (collapsible) {
         setIsCollapsed(!isCollapsed);

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/Nav/NavItem.tsx

@@ -148,9 +148,14 @@ export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
     return (
       <li ref={ref} className={navItemClass} role="menuitem" aria-haspopup={dropdown || megaMenu}>
         {LinkComponent ? (
-          <LinkComponent {...linkProps}>
-            {dropdown || megaMenu ? childContent[0] : children}
-          </LinkComponent>
+          (() => {
+            const Component = LinkComponent as React.ComponentType<any>;
+            return (
+              <Component {...linkProps}>
+                {dropdown || megaMenu ? childContent[0] : children}
+              </Component>
+            );
+          })()
         ) : (
           <a {...linkProps}>{dropdown || megaMenu ? childContent[0] : children}</a>
         )}