@shohojdhara/atomix 0.4.0 → 0.4.1

package/src/components/Hero/Hero.tsx

@@ -1,10 +1,139 @@
-import React, { CSSProperties, useEffect } from 'react';
-import { HeroProps, HeroAlignment } from '../../lib/types/components';
+import React, { CSSProperties, useEffect, ReactNode } from 'react';
+import { HeroProps, HeroAlignment, AtomixGlassProps } from '../../lib/types/components';
 import { useHero } from '../../lib/composables/useHero';
 import { HERO } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Hero: React.FC<HeroProps> = ({
+// Subcomponents
+export interface HeroTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+}
+
+const HeroTitle = ({ children, className, level = 'h1', ...props }: HeroTitleProps) => {
+  const Tag = level as any;
+  return (
+    <Tag className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </Tag>
+  );
+};
+
+const HeroSubtitle = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+  return (
+    <p className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </p>
+  );
+};
+
+const HeroText = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+  return (
+    <p className={`${HERO.SELECTORS.TEXT.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </p>
+  );
+};
+
+const HeroActions = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface HeroContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  glass?: AtomixGlassProps | boolean;
+}
+
+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,
+      cornerRadius: 8,
+      overLight: false,
+      mode: 'standard' as const,
+    } : glass;
+
+    return (
+      <div className={contentClass} style={style} {...props}>
+        <AtomixGlass {...glassProps}>
+          <div className="u-p-4">
+            {children}
+          </div>
+        </AtomixGlass>
+      </div>
+    );
+  }
+
+  return (
+    <div className={contentClass} style={style} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface HeroImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  wrapperClassName?: string;
+  wrapperStyle?: React.CSSProperties;
+}
+
+const HeroImage = ({
+  src,
+  alt = '',
+  className,
+  wrapperClassName,
+  wrapperStyle,
+  ...props
+}: HeroImageProps) => {
+  return (
+    <div
+      className={`${HERO.SELECTORS.IMAGE_WRAPPER.replace('.', '')} ${wrapperClassName || ''}`.trim()}
+      style={wrapperStyle}
+    >
+      <img
+        src={src}
+        alt={alt}
+        className={`${HERO.SELECTORS.IMAGE.replace('.', '')} ${className || ''}`.trim()}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const HeroBackground = ({ className, style, src, children, ...props }: React.HTMLAttributes<HTMLDivElement> & { src?: string }) => {
+  return (
+    <div
+      className={`${HERO.SELECTORS.BG.replace('.', '')} ${className || ''}`.trim()}
+      style={style}
+      {...props}
+    >
+      {src && (
+         <img
+            src={src}
+            alt="Background"
+            className={HERO.SELECTORS.BG_IMAGE.replace('.', '')}
+          />
+      )}
+      {children}
+    </div>
+  );
+};
+
+export const Hero: React.FC<HeroProps> & {
+  Title: typeof HeroTitle;
+  Subtitle: typeof HeroSubtitle;
+  Text: typeof HeroText;
+  Actions: typeof HeroActions;
+  Content: typeof HeroContent;
+  Image: typeof HeroImage;
+  Background: typeof HeroBackground;
+} = ({
   title,
   subtitle,
   text,
@@ -38,6 +167,7 @@ export const Hero: React.FC<HeroProps> = ({
   headingLevel = 'h1',
   reverseOnMobile = false,
   parts,
+  backgroundElement,
   ...rest
 }: HeroProps) => {
   // Define dynamic heading tag
@@ -421,6 +551,7 @@ export const Hero: React.FC<HeroProps> = ({
       data-parallax-intensity={parallax ? parallaxIntensity : undefined}
       {...rest}
     >
+      {backgroundElement}
       {renderBackground()}
       <div
         className={`${HERO.SELECTORS.CONTAINER.replace('.', '')} o-container ${parts?.container?.className || ''}`.trim()}
@@ -451,6 +582,14 @@ export const Hero: React.FC<HeroProps> = ({
   );
 };
 
+Hero.Title = HeroTitle;
+Hero.Subtitle = HeroSubtitle;
+Hero.Text = HeroText;
+Hero.Actions = HeroActions;
+Hero.Content = HeroContent;
+Hero.Image = HeroImage;
+Hero.Background = HeroBackground;
+
 export type { HeroProps };
 
 Hero.displayName = 'Hero';

package/src/components/List/List.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { List } from './List';
+
+describe('List Component', () => {
+  it('renders legacy items wrapped in li', () => {
+    render(
+      <List>
+        <span>Item 1</span>
+        <span>Item 2</span>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Item 1');
+    expect(listItems[0]).toHaveClass('c-list__item');
+  });
+
+  it('renders List.Item components directly', () => {
+    render(
+      <List>
+        <List.Item>Item 1</List.Item>
+        <List.Item className="custom-class">Item 2</List.Item>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Item 1');
+    expect(listItems[0]).toHaveClass('c-list__item');
+    expect(listItems[1]).toHaveTextContent('Item 2');
+    expect(listItems[1]).toHaveClass('c-list__item');
+    expect(listItems[1]).toHaveClass('custom-class');
+  });
+
+  it('renders mixed content correctly', () => {
+    render(
+      <List>
+        <List.Item>Compound Item</List.Item>
+        <span>Legacy Item</span>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Compound Item');
+    expect(listItems[1]).toHaveTextContent('Legacy Item');
+  });
+
+  it('renders ordered list when variant is number', () => {
+    render(
+      <List variant="number">
+        <List.Item>Item 1</List.Item>
+      </List>
+    );
+
+    const list = screen.getByRole('list');
+    expect(list.tagName).toBe('OL');
+  });
+});

package/src/components/List/List.tsx

@@ -1,9 +1,16 @@
 import React, { memo } from 'react';
 import { ListProps } from '../../lib/types/components';
 import { LIST } from '../../lib/constants/components';
+import { ListItem } from './ListItem';
 
-export const List: React.FC<ListProps> = memo(
-  ({ children, variant = 'default', className = '', style, ...props }) => {
+export type { ListProps };
+
+export type ListComponent = React.FC<ListProps> & {
+  Item: typeof ListItem;
+};
+
+export const List: ListComponent = memo(
+  ({ children, variant = 'default', className = '', style, ...props }: ListProps) => {
     // Generate CSS classes
     const listClasses = [LIST.BASE_CLASS, variant !== 'default' && `c-list--${variant}`, className]
       .filter(Boolean)
@@ -16,6 +23,11 @@ export const List: React.FC<ListProps> = memo(
       <ListElement className={listClasses} style={style} {...props}>
         {React.Children.map(children, child => {
           if (React.isValidElement(child)) {
+            // Check if child is a ListItem
+            if (child.type === ListItem) {
+              return child;
+            }
+            // Legacy behavior: wrap in li
             return <li className="c-list__item">{child}</li>;
           }
           return <li className="c-list__item">{child}</li>;
@@ -23,10 +35,9 @@ export const List: React.FC<ListProps> = memo(
       </ListElement>
     );
   }
-);
-
-export type { ListProps };
+) as unknown as ListComponent;
 
 List.displayName = 'List';
+List.Item = ListItem;
 
 export default List;

package/src/components/List/ListItem.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { LIST } from '../../lib/constants/components';
+
+export interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  children?: React.ReactNode;
+}
+
+export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <li ref={ref} className={`${LIST.ITEM_CLASS} ${className}`.trim()} {...props}>
+        {children}
+      </li>
+    );
+  }
+);
+
+ListItem.displayName = 'ListItem';
+
+export default ListItem;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { useState } from 'react';
 import type { AtomixGlassProps } from '../../lib/types/components';
-import Modal from './Modal';
+import { Modal } from './Modal';
 
 // Helper type for glass props in stories (without children requirement)
 type GlassProps = boolean | Omit<AtomixGlassProps, 'children'>;
@@ -31,6 +31,7 @@ Modal displays content in a focused overlay dialog. It provides a way to present
 - Header and footer sections
 - Accessible design
 - Responsive behavior
+- **Compound Component Pattern** (new)
 
 ## Accessibility
 
@@ -53,6 +54,20 @@ Modal displays content in a focused overlay dialog. It provides a way to present
 </Modal>
 \`\`\`
 
+### Compound Component Usage
+
+\`\`\`tsx
+<Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+  <Modal.Header closeButton title="Custom Header" />
+  <Modal.Body>
+    <p>Flexible body content</p>
+  </Modal.Body>
+  <Modal.Footer>
+    <button>Action</button>
+  </Modal.Footer>
+</Modal>
+\`\`\`
+
 ### With Glass Effect
 
 \`\`\`tsx
@@ -284,6 +299,55 @@ export const WithGlassEffect: Story = {
   },
 };
 
+export const CompoundUsage: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <div
+          className="c-btn c-btn--primary"
+          onClick={() => setIsOpen(true)}
+          style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+        >
+          Open Compound Modal
+        </div>
+
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+        >
+          <Modal.Header
+            title="Compound Component Pattern"
+            subtitle="Fully customizable header"
+            closeButton
+          />
+          <Modal.Body>
+            <p>
+              This modal uses the Compound Component pattern (Modal.Header, Modal.Body, Modal.Footer).
+              This allows for greater flexibility in content arrangement.
+            </p>
+            <div style={{ marginTop: '1rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
+              Custom content structure inside Body
+            </div>
+          </Modal.Body>
+          <Modal.Footer>
+             <button className="c-btn c-btn--outline-secondary" onClick={() => setIsOpen(false)}>Custom Footer Button</button>
+          </Modal.Footer>
+        </Modal>
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the Compound Component usage pattern.',
+      },
+    },
+  },
+};
+
 /**
  * Small size modal variant.
  */

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback, memo } from 'react';
+import React, { useEffect, useRef, useState, useCallback, memo, forwardRef, ReactNode } from 'react';
 import { ModalProps } from '../../lib/types/components';
 import { MODAL } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -73,10 +73,83 @@ function useModal({
   };
 }
 
+// Modal Subcomponents
+
+export interface ModalHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  closeButton?: boolean;
+  onClose?: () => void;
+}
+
+export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
+  ({ title, subtitle, closeButton, onClose, children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-modal__header ${className}`.trim()} {...props}>
+        <div className="c-modal__header-content">
+          {title && <h3 className="c-modal__title">{title}</h3>}
+          {subtitle && <p className="c-modal__sub">{subtitle}</p>}
+          {children}
+        </div>
+        {closeButton && (
+          <button
+            type="button"
+            className="c-modal__close c-btn js-modal-close"
+            onClick={onClose}
+            aria-label="Close modal"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
+                fill="#141414"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+ModalHeader.displayName = 'ModalHeader';
+
+export const ModalBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-modal__body ${className}`.trim()} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalBody.displayName = 'ModalBody';
+
+export const ModalFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-modal__footer ${className}`.trim()} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalFooter.displayName = 'ModalFooter';
+
 /**
  * Modal component for displaying overlay content
  */
-export const Modal: React.FC<ModalProps> = memo(
+type ModalComponent = React.FC<ModalProps> & {
+  Header: typeof ModalHeader;
+  Body: typeof ModalBody;
+  Footer: typeof ModalFooter;
+};
+
+const ModalImpl = memo(
   ({
     children,
     isOpen = false,
@@ -94,7 +167,7 @@ export const Modal: React.FC<ModalProps> = memo(
     footer,
     glass,
     ...props
-  }) => {
+  }: ModalProps) => {
     const modalRef = useRef<HTMLDivElement>(null);
     const dialogRef = useRef<HTMLDivElement>(null);
     const backdropRef = useRef<HTMLDivElement>(null);
@@ -144,41 +217,40 @@ export const Modal: React.FC<ModalProps> = memo(
       .filter(Boolean)
       .join(' ');
 
+    // Check for compound components usage
+    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+      React.isValidElement(child) &&
+      ['ModalHeader', 'ModalBody', 'ModalFooter'].includes((child.type as any).displayName)
+    );
+
     const modalContent = (
       <div className="c-modal__content">
-        {(title || closeButton) && (
-          <div className="c-modal__header">
-            <div className="c-modal__header-content">
-              {title && <h3 className="c-modal__title">{title}</h3>}
-              {subtitle && <p className="c-modal__sub">{subtitle}</p>}
-            </div>
-            {closeButton && (
-              <button
-                type="button"
-                className="c-modal__close c-btn js-modal-close"
-                onClick={close}
-                aria-label="Close modal"
-              >
-                <svg
-                  width="20"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
-                    fill="#141414"
-                  />
-                </svg>
-              </button>
+        {hasCompoundComponents ? (
+          React.Children.map(children, child => {
+            if (
+              React.isValidElement(child) &&
+              (child.type as any).displayName === 'ModalHeader'
+            ) {
+              return React.cloneElement(child, {
+                onClose: (child.props as any).onClose || close,
+              } as any);
+            }
+            return child;
+          })
+        ) : (
+          <>
+            {(title || closeButton) && (
+              <ModalHeader
+                title={title}
+                subtitle={subtitle}
+                closeButton={closeButton}
+                onClose={close}
+              />
             )}
-          </div>
+            <ModalBody>{children}</ModalBody>
+            {footer && <ModalFooter>{footer}</ModalFooter>}
+          </>
         )}
-
-        <div className="c-modal__body">{children}</div>
-
-        {footer && <div className="c-modal__footer">{footer}</div>}
       </div>
     );
 
@@ -218,7 +290,15 @@ export const Modal: React.FC<ModalProps> = memo(
   }
 );
 
-Modal.displayName = 'Modal';
+ModalImpl.displayName = 'Modal';
+
+// Attach subcomponents
+const ModalWithSubcomponents = ModalImpl as unknown as ModalComponent;
+ModalWithSubcomponents.Header = ModalHeader;
+ModalWithSubcomponents.Body = ModalBody;
+ModalWithSubcomponents.Footer = ModalFooter;
+
+export const Modal = ModalWithSubcomponents;
 
 export type { ModalProps };
 

package/src/components/Modal/ModalCompound.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Modal } from './Modal';
+import React from 'react';
+
+describe('Modal Component', () => {
+  it('renders correctly with legacy props', () => {
+    render(
+      <Modal isOpen={true} title="Legacy Title" footer="Legacy Footer">
+        Legacy Content
+      </Modal>
+    );
+
+    expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Content')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Footer')).toBeInTheDocument();
+
+    // Check structure classes
+    expect(document.querySelector('.c-modal__header')).toBeInTheDocument();
+    expect(document.querySelector('.c-modal__body')).toBeInTheDocument();
+    expect(document.querySelector('.c-modal__footer')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Modal isOpen={true}>
+        <Modal.Header title="Compound Header" />
+        <Modal.Body>Compound Body</Modal.Body>
+        <Modal.Footer>Compound Footer</Modal.Footer>
+      </Modal>
+    );
+
+    expect(screen.getByText('Compound Header')).toBeInTheDocument();
+    expect(screen.getByText('Compound Body')).toBeInTheDocument();
+    expect(screen.getByText('Compound Footer')).toBeInTheDocument();
+
+    // Verify no double wrapping
+    // If double wrapping occurred, we might see nested .c-modal__body or similar issues,
+    // or the header inside the body if logic failed.
+
+    const header = document.querySelector('.c-modal__header');
+    const body = document.querySelector('.c-modal__body');
+    const footer = document.querySelector('.c-modal__footer');
+
+    // Header should be a direct child of .c-modal__content (or close to it)
+    expect(header?.parentElement).toHaveClass('c-modal__content');
+    expect(body?.parentElement).toHaveClass('c-modal__content');
+    expect(footer?.parentElement).toHaveClass('c-modal__content');
+  });
+
+  it('injects onClose into Modal.Header when used in compound mode', () => {
+    const onClose = vi.fn();
+    render(
+      <Modal isOpen={true} onClose={onClose}>
+        <Modal.Header closeButton data-testid="header" />
+        <Modal.Body>Content</Modal.Body>
+      </Modal>
+    );
+
+    const closeBtn = screen.getByLabelText('Close modal');
+    fireEvent.click(closeBtn);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('allows custom onClose in Modal.Header', () => {
+    const modalOnClose = vi.fn();
+    const headerOnClose = vi.fn();
+
+    render(
+      <Modal isOpen={true} onClose={modalOnClose}>
+        <Modal.Header closeButton onClose={headerOnClose} />
+        <Modal.Body>Content</Modal.Body>
+      </Modal>
+    );
+
+    const closeBtn = screen.getByLabelText('Close modal');
+    fireEvent.click(closeBtn);
+
+    expect(headerOnClose).toHaveBeenCalled();
+    expect(modalOnClose).not.toHaveBeenCalled();
+  });
+
+  it('prioritizes compound components over legacy props', () => {
+    render(
+      <Modal isOpen={true} title="Legacy Title">
+        <Modal.Header title="Compound Header" />
+        <Modal.Body>Compound Body</Modal.Body>
+      </Modal>
+    );
+
+    expect(screen.getByText('Compound Header')).toBeInTheDocument();
+    expect(screen.queryByText('Legacy Title')).not.toBeInTheDocument();
+  });
+});