@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/Dialog/__tests__/Dialog.unit.test.tsx

@@ -1,1373 +0,0 @@
-import React from 'react';
-import { screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { renderWithProviders } from '../../../__tests__/shared';
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  DialogClose,
-  type DialogSize,
-  DialogBody,
-} from '../Dialog';
-import { renderWithProviders, testComponentRendering, testComponentAccessibility } from '../../../__tests__/shared';
-
-// Mock Radix UI Dialog primitives
-vi.mock('@radix-ui/react-dialog', () => ({
-  Root: ({ children, open, onOpenChange }: { children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }) => (
-    <div data-testid="dialog-root" data-open={open === undefined ? 'false' : String(open)}>
-      {children}
-    </div>
-  ),
-  Trigger: React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ children, ...props }, ref) => (
-    <button ref={ref} data-testid="dialog-trigger" {...props}>
-      {children}
-    </button>
-  )),
-  Portal: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="dialog-portal">{children}</div>
-  ),
-  Overlay: React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
-    const baseClasses = 'fixed inset-0 z-50 bg-main-950/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0';
-    const finalClassName = className ? `${baseClasses} ${className}` : baseClasses;
-    return <div ref={ref} className={finalClassName} data-testid="dialog-overlay" {...props} />;
-  }),
-  Content: React.forwardRef<HTMLDialogElement, React.HTMLAttributes<HTMLDialogElement> & {
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    onPointerDownOutside?: (event: Event) => void;
-    asChild?: boolean;
-  }>(({ children, className, onEscapeKeyDown, onPointerDownOutside, asChild, ...props }, ref) => {
-    // Handle asChild pattern for semantic HTML implementation
-    if (asChild && React.isValidElement(children)) {
-      const child = React.Children.only(children) as React.ReactElement<any>;
-      const mergedClassName = [child.props.className, className].filter(Boolean).join(' ');
-      return React.cloneElement(child, {
-        ...child.props,
-        ...props,
-        className: mergedClassName,
-        ref,
-        "data-testid": "dialog-content",
-        style: { ...child.props.style, ...props.style },
-      });
-    }
-    
-    return (
-      <dialog ref={ref} className={className} data-testid="dialog-content" {...props}>
-        {children}
-      </dialog>
-    );
-  }),
-  Title: React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ children, className, ...props }, ref) => (
-    <h2 ref={ref} className={className} data-testid="dialog-title" {...props}>
-      {children}
-    </h2>
-  )),
-  Description: React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ children, className, ...props }, ref) => (
-    <p ref={ref} className={className} data-testid="dialog-description" {...props}>
-      {children}
-    </p>
-  )),
-  Close: React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ children, className, ...props }, ref) => (
-    <button ref={ref} className={className} data-testid="dialog-close" {...props}>
-      {children}
-    </button>
-  )),
-}));
-
-// Mock lucide-react X icon
-vi.mock('lucide-react', () => ({
-  X: ({ className }: { className?: string }) => (
-    <svg className={className} data-testid="close-icon" />
-  ),
-}));
-
-describe('Dialog Component', () => {
-  describe('Dialog Root', () => {
-    it('renders with default state', () => {
-      renderWithProviders(
-        <Dialog>
-          <DialogTrigger>Open Dialog</DialogTrigger>
-          <DialogContent>Dialog content</DialogContent>
-        </Dialog>
-      );
-      
-      expect(screen.getByTestId('dialog-root')).toBeInTheDocument();
-      expect(screen.getByTestId('dialog-root')).toHaveAttribute('data-open', 'false');
-    });
-
-    it('renders with open state', () => {
-      renderWithProviders(
-        <Dialog open>
-          <DialogTrigger>Open Dialog</DialogTrigger>
-          <DialogContent>Dialog content</DialogContent>
-        </Dialog>
-      );
-      
-      expect(screen.getByTestId('dialog-root')).toHaveAttribute('data-open', 'true');
-    });
-
-    it('calls onOpenChange when state changes', () => {
-      const handleOpenChange = vi.fn();
-      renderWithProviders(
-        <Dialog onOpenChange={handleOpenChange}>
-          <DialogTrigger>Open Dialog</DialogTrigger>
-          <DialogContent>Dialog content</DialogContent>
-        </Dialog>
-      );
-      
-      // This would be tested with actual dialog interactions
-      expect(handleOpenChange).toBeDefined();
-    });
-  });
-
-  describe('DialogTrigger', () => {
-    it('renders trigger button', () => {
-      renderWithProviders(<DialogTrigger>Open Dialog</DialogTrigger>);
-      const trigger = screen.getByTestId('dialog-trigger');
-      expect(trigger).toBeInTheDocument();
-      expect(trigger).toHaveTextContent('Open Dialog');
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<DialogTrigger className="custom-trigger">Open</DialogTrigger>);
-      const trigger = screen.getByTestId('dialog-trigger');
-      expect(trigger).toHaveClass('custom-trigger');
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = vi.fn();
-      renderWithProviders(<DialogTrigger ref={ref}>Open</DialogTrigger>);
-      expect(ref).toHaveBeenCalled();
-    });
-
-    it('spreads additional props', () => {
-      renderWithProviders(<DialogTrigger data-testid="custom-trigger" aria-label="Open dialog">Open</DialogTrigger>);
-      const trigger = screen.getByTestId('custom-trigger');
-      expect(trigger).toHaveAttribute('aria-label', 'Open dialog');
-    });
-  });
-
-  describe('DialogContent', () => {
-    it('renders content with portal and overlay', () => {
-      renderWithProviders(<DialogContent>Dialog content</DialogContent>);
-      
-      expect(screen.getByTestId('dialog-portal')).toBeInTheDocument();
-      expect(screen.getByTestId('dialog-overlay')).toBeInTheDocument();
-      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
-      expect(screen.getByText('Dialog content')).toBeInTheDocument();
-    });
-
-    it('applies default styling with md size', () => {
-      renderWithProviders(<DialogContent>Content</DialogContent>);
-      const content = screen.getByTestId('dialog-content');
-      expect(content).toHaveClass(
-        'fixed',
-        'z-50',
-        'duration-200',
-        'data-[state=open]:animate-in',
-        'data-[state=closed]:animate-out',
-        'data-[state=closed]:fade-out-0',
-        'data-[state=open]:fade-in-0',
-        'data-[state=closed]:zoom-out-95',
-        'data-[state=open]:zoom-in-95',
-        'data-[state=closed]:slide-out-to-left-1/2',
-        'data-[state=closed]:slide-out-to-top-[48%]',
-        'data-[state=open]:slide-in-from-left-1/2',
-        'data-[state=open]:slide-in-from-top-[48%]',
-        'sm:rounded-lg',
-        'm-0',
-        'max-h-none',
-        'w-auto',
-        'h-auto',
-        'outline-none',
-        'border',
-        'bg-background',
-        'shadow-lg',
-        'grid',
-        'gap-4',
-        'p-6',
-        'max-w-md'
-      );
-    });
-
-    it('applies size variant classes', () => {
-      const sizes: DialogSize[] = ['sm', 'md', 'lg', 'xl', 'full'];
-      const expectedClasses = ['max-w-sm', 'max-w-md', 'max-w-lg', 'max-w-xl', 'max-w-full'];
-      
-      sizes.forEach((size, index) => {
-        const { unmount } = renderWithProviders(<DialogContent size={size}>Content</DialogContent>);
-        const content = screen.getByTestId('dialog-content');
-        expect(content).toHaveClass(expectedClasses[index]);
-        unmount();
-      });
-    });
-
-    it('applies full size special styling', () => {
-      renderWithProviders(<DialogContent size="full">Content</DialogContent>);
-      const content = screen.getByTestId('dialog-content');
-      expect(content).toHaveClass(
-        'fixed',
-        'z-50',
-        'duration-200',
-        'data-[state=open]:animate-in',
-        'data-[state=closed]:animate-out',
-        'data-[state=closed]:fade-out-0',
-        'data-[state=open]:fade-in-0',
-        'data-[state=closed]:zoom-out-95',
-        'data-[state=open]:zoom-in-95',
-        'data-[state=closed]:slide-out-to-left-1/2',
-        'data-[state=closed]:slide-out-to-top-[48%]',
-        'data-[state=open]:slide-in-from-left-1/2',
-        'data-[state=open]:slide-in-from-top-[48%]',
-        'm-0',
-        'max-h-none',
-        'w-auto',
-        'outline-none',
-        'border',
-        'bg-background',
-        'shadow-lg',
-        'max-w-full',
-        'grid',
-        'gap-4',
-        'p-6',
-        'sm:left-[50%]',
-        'sm:top-[50%]',
-        'sm:translate-x-[-50%]',
-        'sm:translate-y-[-50%]',
-        'left-0',
-        'top-0',
-        'translate-x-0',
-        'translate-y-0',
-        'h-full',
-        'rounded-none',
-        'sm:h-auto',
-        'sm:rounded-lg'
-      );
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<DialogContent className="custom-content">Content</DialogContent>);
-      const content = screen.getByTestId('dialog-content');
-      expect(content).toHaveClass('custom-content');
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = vi.fn();
-      renderWithProviders(<DialogContent ref={ref}>Content</DialogContent>);
-      expect(ref).toHaveBeenCalled();
-    });
-
-    it('has correct role', () => {
-      renderWithProviders(<DialogContent>Content</DialogContent>);
-      const content = screen.getByTestId('dialog-content');
-      expect(content).toBeInTheDocument();
-      expect(content.tagName.toLowerCase()).toBe('dialog');
-    });
-
-    it('includes close button by default', () => {
-      renderWithProviders(<DialogContent>Content</DialogContent>);
-      const closeButton = screen.getByTestId('dialog-close');
-      expect(closeButton).toBeInTheDocument();
-      expect(closeButton).toHaveTextContent('Close');
-    });
-
-    it('hides close button when showCloseButton is false', () => {
-      renderWithProviders(<DialogContent showCloseButton={false}>Content</DialogContent>);
-      const closeButton = screen.queryByTestId('dialog-close');
-      expect(closeButton).not.toBeInTheDocument();
-    });
-
-    it('applies custom overlay className', () => {
-      renderWithProviders(<DialogContent overlayClassName="custom-overlay">Content</DialogContent>);
-      const overlay = screen.getByTestId('dialog-overlay');
-      expect(overlay).toHaveClass('custom-overlay');
-    });
-
-    it('handles preventCloseOnEscape prop', () => {
-      const mockPreventDefault = vi.fn();
-      const mockKeyboardEvent = { preventDefault: mockPreventDefault } as unknown as KeyboardEvent;
-      
-      renderWithProviders(<DialogContent preventCloseOnEscape>Content</DialogContent>);
-      
-      // The component should be set up to prevent escape, but testing the actual behavior
-      // would require more complex mocking of the Radix UI event system
-      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
-    });
-
-    it('handles preventCloseOnOutsideClick prop', () => {
-      const mockPreventDefault = vi.fn();
-      const mockEvent = { preventDefault: mockPreventDefault } as unknown as Event;
-      
-      renderWithProviders(<DialogContent preventCloseOnOutsideClick>Content</DialogContent>);
-      
-      // The component should be set up to prevent outside clicks, but testing the actual behavior
-      // would require more complex mocking of the Radix UI event system
-      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
-    });
-  });
-
-  describe('DialogOverlay', () => {
-    it('renders with default styling', () => {
-      renderWithProviders(<DialogContent>Content</DialogContent>);
-      const overlay = screen.getByTestId('dialog-overlay');
-      expect(overlay).toHaveClass(
-        'fixed',
-        'inset-0',
-        'z-50',
-        'bg-main-950/80',
-        'data-[state=open]:animate-in',
-        'data-[state=closed]:animate-out',
-        'data-[state=closed]:fade-out-0',
-        'data-[state=open]:fade-in-0'
-      );
-    });
-
-    it('applies custom className via overlayClassName', () => {
-      renderWithProviders(<DialogContent overlayClassName="custom-overlay-class">Content</DialogContent>);
-      const overlay = screen.getByTestId('dialog-overlay');
-      expect(overlay).toHaveClass('custom-overlay-class');
-    });
-  });
-
-  describe('DialogHeader', () => {
-    it('renders header with default styling', () => {
-      renderWithProviders(<DialogHeader>Header content</DialogHeader>);
-      const header = screen.getByText('Header content');
-      expect(header).toBeInTheDocument();
-      expect(header).toHaveClass(
-        'flex',
-        'flex-col',
-        'space-y-1.5',
-        'text-center',
-        'sm:text-left'
-      );
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<DialogHeader className="custom-header">Header</DialogHeader>);
-      const header = screen.getByText('Header');
-      expect(header).toHaveClass('custom-header');
-    });
-
-    it('spreads additional props', () => {
-      renderWithProviders(<DialogHeader data-testid="header" aria-label="Dialog header">Header</DialogHeader>);
-      const header = screen.getByTestId('header');
-      expect(header).toHaveAttribute('aria-label', 'Dialog header');
-    });
-  });
-
-  describe('DialogFooter', () => {
-    it('renders footer with default styling', () => {
-      renderWithProviders(<DialogFooter>Footer content</DialogFooter>);
-      const footer = screen.getByText('Footer content');
-      expect(footer).toBeInTheDocument();
-      expect(footer).toHaveClass(
-        'flex',
-        'flex-col-reverse',
-        'sm:flex-row',
-        'sm:justify-end',
-        'sm:space-x-2'
-      );
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<DialogFooter className="custom-footer">Footer</DialogFooter>);
-      const footer = screen.getByText('Footer');
-      expect(footer).toHaveClass('custom-footer');
-    });
-
-    it('spreads additional props', () => {
-      renderWithProviders(<DialogFooter data-testid="footer" aria-label="Dialog footer">Footer</DialogFooter>);
-      const footer = screen.getByTestId('footer');
-      expect(footer).toHaveAttribute('aria-label', 'Dialog footer');
-    });
-  });
-
-  describe('DialogTitle', () => {
-    it('renders title with default styling', () => {
-      renderWithProviders(<DialogTitle>Title content</DialogTitle>);
-      const title = screen.getByTestId('dialog-title');
-      expect(title).toBeInTheDocument();
-      expect(title).toHaveTextContent('Title content');
-      expect(title).toHaveClass(
-        'text-lg',
-        'font-semibold',
-        'leading-none',
-        'tracking-tight'
-      );
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<DialogTitle className="custom-title">Title</DialogTitle>);
-      const title = screen.getByTestId('dialog-title');
-      expect(title).toHaveClass('custom-title');
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = vi.fn();
-      renderWithProviders(<DialogTitle ref={ref}>Title</DialogTitle>);
-      expect(ref).toHaveBeenCalled();
-    });
-
-    it('spreads additional props', () => {
-      renderWithProviders(<DialogTitle data-testid="title" aria-level={2}>Title</DialogTitle>);
-      const title = screen.getByTestId('title');
-      expect(title).toHaveAttribute('aria-level', '2');
-    });
-  });
-
-  describe('DialogDescription', () => {
-    it('renders description with default styling', () => {
-      renderWithProviders(<DialogDescription>Description content</DialogDescription>);
-      const description = screen.getByTestId('dialog-description');
-      expect(description).toBeInTheDocument();
-      expect(description).toHaveTextContent('Description content');
-      expect(description).toHaveClass('text-sm', 'text-muted-foreground');
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<DialogDescription className="custom-description">Description</DialogDescription>);
-      const description = screen.getByTestId('dialog-description');
-      expect(description).toHaveClass('custom-description');
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = vi.fn();
-      renderWithProviders(<DialogDescription ref={ref}>Description</DialogDescription>);
-      expect(ref).toHaveBeenCalled();
-    });
-
-    it('spreads additional props', () => {
-      renderWithProviders(<DialogDescription data-testid="description" aria-label="Dialog description">Description</DialogDescription>);
-      const description = screen.getByTestId('description');
-      expect(description).toHaveAttribute('aria-label', 'Dialog description');
-    });
-  });
-
-  describe('DialogClose', () => {
-    it('renders close button', () => {
-      renderWithProviders(<DialogClose>Close</DialogClose>);
-      const closeButton = screen.getByTestId('dialog-close');
-      expect(closeButton).toBeInTheDocument();
-      expect(closeButton).toHaveTextContent('Close');
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<DialogClose className="custom-close">Close</DialogClose>);
-      const closeButton = screen.getByTestId('dialog-close');
-      expect(closeButton).toHaveClass('custom-close');
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = vi.fn();
-      renderWithProviders(<DialogClose ref={ref}>Close</DialogClose>);
-      expect(ref).toHaveBeenCalled();
-    });
-
-    it('spreads additional props', () => {
-      renderWithProviders(<DialogClose data-testid="close" aria-label="Close dialog">Close</DialogClose>);
-      const closeButton = screen.getByTestId('close');
-      expect(closeButton).toHaveAttribute('aria-label', 'Close dialog');
-    });
-  });
-
-  describe('Dialog Composition', () => {
-    it('renders complete dialog structure', () => {
-      renderWithProviders(
-        <Dialog>
-          <DialogTrigger>Open Dialog</DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Dialog Title</DialogTitle>
-              <DialogDescription>Dialog description</DialogDescription>
-            </DialogHeader>
-            <div>Dialog content</div>
-            <DialogFooter>
-              <DialogClose>Cancel</DialogClose>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      );
-
-      expect(screen.getByTestId('dialog-root')).toBeInTheDocument();
-      expect(screen.getByTestId('dialog-trigger')).toBeInTheDocument();
-      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
-      expect(screen.getByTestId('dialog-title')).toBeInTheDocument();
-      expect(screen.getByTestId('dialog-description')).toBeInTheDocument();
-      expect(screen.getByText('Dialog content')).toBeInTheDocument();
-    });
-
-    it('renders dialog with size and custom styling', () => {
-      renderWithProviders(
-        <Dialog>
-          <DialogTrigger>Open</DialogTrigger>
-          <DialogContent 
-            size="lg" 
-            className="custom-content"
-            overlayClassName="custom-overlay"
-            showCloseButton={false}
-          >
-            <DialogHeader>
-              <DialogTitle>Large Dialog</DialogTitle>
-            </DialogHeader>
-          </DialogContent>
-        </Dialog>
-      );
-
-      const content = screen.getByTestId('dialog-content');
-      const overlay = screen.getByTestId('dialog-overlay');
-      
-      expect(content).toHaveClass('max-w-lg', 'custom-content');
-      expect(overlay).toHaveClass('custom-overlay');
-      expect(screen.queryByTestId('dialog-close')).not.toBeInTheDocument();
-    });
-
-    it('renders full-screen dialog correctly', () => {
-      renderWithProviders(
-        <Dialog>
-          <DialogTrigger>Open Full Screen</DialogTrigger>
-          <DialogContent size="full">
-            <DialogHeader>
-              <DialogTitle>Full Screen Dialog</DialogTitle>
-            </DialogHeader>
-            <div className="flex-1">Full screen content</div>
-          </DialogContent>
-        </Dialog>
-      );
-
-      const content = screen.getByTestId('dialog-content');
-      expect(content).toHaveClass(
-        'fixed',
-        'z-50',
-        'duration-200',
-        'data-[state=open]:animate-in',
-        'data-[state=closed]:animate-out',
-        'data-[state=closed]:fade-out-0',
-        'data-[state=open]:fade-in-0',
-        'data-[state=closed]:zoom-out-95',
-        'data-[state=open]:zoom-in-95',
-        'data-[state=closed]:slide-out-to-left-1/2',
-        'data-[state=closed]:slide-out-to-top-[48%]',
-        'data-[state=open]:slide-in-from-left-1/2',
-        'data-[state=open]:slide-in-from-top-[48%]',
-        'm-0',
-        'max-h-none',
-        'w-auto',
-        'outline-none',
-        'border',
-        'bg-background',
-        'shadow-lg',
-        'max-w-full',
-        'grid',
-        'gap-4',
-        'p-6',
-        'sm:left-[50%]',
-        'sm:top-[50%]',
-        'sm:translate-x-[-50%]',
-        'sm:translate-y-[-50%]',
-        'left-0',
-        'top-0',
-        'translate-x-0',
-        'translate-y-0',
-        'h-full',
-        'rounded-none',
-        'sm:h-auto',
-        'sm:rounded-lg'
-      );
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has correct dialog role', () => {
-      renderWithProviders(<DialogContent>Content</DialogContent>);
-      const dialog = screen.getByTestId('dialog-content');
-      expect(dialog).toBeInTheDocument();
-      expect(dialog.tagName.toLowerCase()).toBe('dialog');
-    });
-
-    it('includes screen reader text for close button', () => {
-      renderWithProviders(<DialogContent>Content</DialogContent>);
-      const closeButton = screen.getByTestId('dialog-close');
-      expect(closeButton).toBeInTheDocument();
-      expect(closeButton).toHaveTextContent('Close');
-    });
-
-    it('maintains accessibility when close button is hidden', () => {
-      renderWithProviders(<DialogContent showCloseButton={false}>Content</DialogContent>);
-      const dialog = screen.getByTestId('dialog-content');
-      expect(dialog).toBeInTheDocument();
-      expect(dialog.tagName.toLowerCase()).toBe('dialog');
-      expect(screen.queryByTestId('dialog-close')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Type Safety', () => {
-    it('accepts valid DialogSize types', () => {
-      // This test ensures TypeScript compilation
-      const validSizes: DialogSize[] = ['sm', 'md', 'lg', 'xl', 'full'];
-      
-      validSizes.forEach(size => {
-        const { unmount } = renderWithProviders(<DialogContent size={size}>Content</DialogContent>);
-        expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
-        unmount();
-      });
-    });
-  });
-
-  describe('New Enhanced Dialog Features', () => {
-    // Mock ResizeObserver for smart height tests
-    const mockResizeObserver = vi.fn(() => ({
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-      unobserve: vi.fn(),
-    }));
-
-    beforeEach(() => {
-      global.ResizeObserver = mockResizeObserver;
-      // Mock window.innerHeight for height calculations
-      Object.defineProperty(window, 'innerHeight', {
-        writable: true,
-        configurable: true,
-        value: 800,
-      });
-    });
-
-    describe('Smart Height Functionality', () => {
-      it('applies smart height with default maxHeightPercent', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true}>
-            <div>Content with smart height</div>
-          </DialogContent>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        // Check that the dialog is rendered with scrolling enabled
-        expect(content).toHaveClass('flex', 'flex-col');
-        expect(content).not.toHaveClass('grid');
-      });
-
-      it('applies custom maxHeightPercent', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true} maxHeightPercent={75}>
-            <div>Content with custom height</div>
-          </DialogContent>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        // Check that maxHeight is applied as inline style
-        expect(content).toHaveAttribute('style');
-        const style = content.getAttribute('style');
-        expect(style).toContain('max-height');
-        expect(style).toMatch(/max-height:\s*75vh/);
-      });
-
-      it('applies custom maxHeight with CSS units', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true} maxHeight="500px">
-            <div>Content with fixed height</div>
-          </DialogContent>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        expect(content).toHaveStyle({
-          maxHeight: '500px',
-        });
-      });
-
-      it('applies minHeight when provided', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true} minHeight="300px">
-            <div>Content with min height</div>
-          </DialogContent>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        expect(content).toHaveStyle({
-          minHeight: '300px',
-        });
-      });
-
-      it('switches to flex layout when scrolling is enabled', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true}>
-            <div>Scrollable content</div>
-          </DialogContent>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        expect(content).toHaveClass('flex', 'flex-col');
-        expect(content).not.toHaveClass('grid');
-      });
-
-      it('maintains grid layout when scrolling is disabled', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={false}>
-            <div>Non-scrollable content</div>
-          </DialogContent>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        expect(content).toHaveClass('grid');
-        expect(content).not.toHaveClass('flex', 'flex-col');
-      });
-
-      it('clamps maxHeightPercent to valid range', () => {
-        const { rerender } = renderWithProviders(
-          <DialogContent enableScrolling={true} maxHeightPercent={150}>
-            <div>Content</div>
-          </DialogContent>
-        );
-
-        let content = screen.getByTestId('dialog-content');
-        // Should still apply some maxHeight, even if percentage is over 100
-        expect(content).toHaveAttribute('style');
-        let style = content.getAttribute('style');
-        expect(style).toContain('max-height');
-
-        rerender(
-          <DialogContent enableScrolling={true} maxHeightPercent={-10}>
-            <div>Content</div>
-          </DialogContent>
-        );
-
-        content = screen.getByTestId('dialog-content');
-        // Should still apply some maxHeight, even if percentage is negative
-        expect(content).toHaveAttribute('style');
-        style = content.getAttribute('style');
-        expect(style).toContain('max-height');
-      });
-    });
-
-    describe('DialogBody Component', () => {
-      it('renders DialogBody with scrollable styling', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true}>
-            <DialogBody>
-              <div>Scrollable body content</div>
-            </DialogBody>
-          </DialogContent>
-        );
-
-        const body = screen.getByRole('main', { hidden: true });
-        expect(body).toBeInTheDocument();
-        expect(body).toHaveClass(
-          'flex-1',
-          'overflow-y-auto',
-          'px-6',
-          'py-2'
-        );
-        expect(body).toHaveAttribute('aria-label', 'Dialog main content');
-        expect(screen.getByText('Scrollable body content')).toBeInTheDocument();
-      });
-
-      it('applies custom className to DialogBody', () => {
-        renderWithProviders(
-          <DialogBody className="custom-body-class">
-            <div>Custom styled body</div>
-          </DialogBody>
-        );
-
-        const body = screen.getByRole('main', { hidden: true });
-        expect(body).toHaveClass('custom-body-class');
-      });
-
-      it('spreads additional props on DialogBody', () => {
-        renderWithProviders(
-          <DialogBody data-testid="custom-body" aria-describedby="body-desc">
-            <div>Body with props</div>
-          </DialogBody>
-        );
-
-        const body = screen.getByTestId('custom-body');
-        expect(body).toHaveAttribute('aria-describedby', 'body-desc');
-      });
-    });
-
-    describe('Sticky Header and Footer', () => {
-      it('renders DialogHeader with sticky positioning', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true}>
-            <DialogHeader sticky={true}>
-              <DialogTitle>Sticky Header</DialogTitle>
-            </DialogHeader>
-          </DialogContent>
-        );
-
-        const header = screen.getByText('Sticky Header').parentElement;
-        expect(header).toHaveClass('sticky');
-        expect(header).toHaveClass('top-0');
-        expect(header).toHaveClass('z-10');
-        expect(header).toHaveClass('bg-background');
-        expect(header).toHaveClass('border-b');
-        expect(header).toHaveClass('p-6');
-        expect(header).toHaveClass('pb-4');
-      });
-
-      it('renders DialogHeader without sticky positioning by default', () => {
-        renderWithProviders(
-          <DialogHeader>
-            <DialogTitle>Regular Header</DialogTitle>
-          </DialogHeader>
-        );
-
-        const header = screen.getByText('Regular Header').parentElement;
-        expect(header).not.toHaveClass('sticky', 'top-0', 'z-10', 'bg-background', 'border-b');
-        expect(header).toHaveClass(
-          'flex',
-          'flex-col',
-          'space-y-1.5',
-          'text-center',
-          'sm:text-left'
-        );
-      });
-
-      it('renders DialogFooter with sticky positioning', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true}>
-            <DialogFooter sticky={true}>
-              <button>Save</button>
-            </DialogFooter>
-          </DialogContent>
-        );
-
-        const footer = screen.getByRole('button', { name: 'Save', hidden: true }).parentElement;
-        expect(footer).toHaveClass('sticky');
-        expect(footer).toHaveClass('bottom-0');
-        expect(footer).toHaveClass('z-10');
-        expect(footer).toHaveClass('bg-background');
-        expect(footer).toHaveClass('border-t');
-        expect(footer).toHaveClass('p-6');
-        expect(footer).toHaveClass('pt-4');
-      });
-
-      it('renders DialogFooter without sticky positioning by default', () => {
-        renderWithProviders(
-          <DialogFooter>
-            <button>Save</button>
-          </DialogFooter>
-        );
-
-        const footer = screen.getByRole('button', { name: 'Save' }).parentElement;
-        expect(footer).not.toHaveClass('sticky', 'bottom-0', 'z-10', 'bg-background', 'border-t');
-        expect(footer).toHaveClass(
-          'flex',
-          'flex-col-reverse',
-          'sm:flex-row',
-          'sm:justify-end',
-          'sm:space-x-2'
-        );
-      });
-
-      it('applies custom className with sticky header', () => {
-        renderWithProviders(
-          <DialogHeader sticky={true} className="custom-sticky-header">
-            <DialogTitle>Custom Sticky Header</DialogTitle>
-          </DialogHeader>
-        );
-
-        const header = screen.getByText('Custom Sticky Header').parentElement;
-        expect(header).toHaveClass('custom-sticky-header');
-        expect(header).toHaveClass('sticky', 'top-0', 'z-10');
-      });
-
-      it('applies custom className with sticky footer', () => {
-        renderWithProviders(
-          <DialogFooter sticky={true} className="custom-sticky-footer">
-            <button>Save</button>
-          </DialogFooter>
-        );
-
-        const footer = screen.getByRole('button', { name: 'Save' }).parentElement;
-        expect(footer).toHaveClass('custom-sticky-footer');
-        expect(footer).toHaveClass('sticky', 'bottom-0', 'z-10');
-      });
-    });
-
-    describe('Complete Scrollable Dialog Composition', () => {
-      it('renders complete scrollable dialog with all components', () => {
-        renderWithProviders(
-          <Dialog>
-            <DialogTrigger>Open Scrollable Dialog</DialogTrigger>
-            <DialogContent enableScrolling={true} maxHeightPercent={80}>
-              <DialogHeader sticky={true}>
-                <DialogTitle>Scrollable Dialog Title</DialogTitle>
-                <DialogDescription>This dialog has scrollable content</DialogDescription>
-              </DialogHeader>
-              <DialogBody>
-                <div>Long scrollable content that exceeds the dialog height</div>
-                <div>More content...</div>
-                <div>Even more content...</div>
-              </DialogBody>
-              <DialogFooter sticky={true}>
-                <DialogClose>Cancel</DialogClose>
-                <button>Save Changes</button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        );
-
-        // Check that all components are rendered
-        expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
-        expect(screen.getByText('Scrollable Dialog Title')).toBeInTheDocument();
-        expect(screen.getByText('This dialog has scrollable content')).toBeInTheDocument();
-        expect(screen.getByRole('main', { hidden: true })).toBeInTheDocument(); // DialogBody
-        expect(screen.getByText('Long scrollable content that exceeds the dialog height')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Cancel', hidden: true })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Save Changes', hidden: true })).toBeInTheDocument();
-
-        // Check layout styling
-        const content = screen.getByTestId('dialog-content');
-        expect(content).toHaveClass('flex', 'flex-col');
-        
-        // Check that maxHeight is applied as inline style
-        expect(content).toHaveAttribute('style');
-        const style = content.getAttribute('style');
-        expect(style).toContain('max-height');
-
-        // Check sticky styling
-        const header = screen.getByText('Scrollable Dialog Title').parentElement;
-        const footer = screen.getByRole('button', { name: 'Cancel', hidden: true }).parentElement;
-        expect(header).toHaveClass('sticky', 'top-0', 'border-b');
-        expect(footer).toHaveClass('sticky', 'bottom-0', 'border-t');
-
-        // Check body scrolling
-        const body = screen.getByRole('main', { hidden: true });
-        expect(body).toHaveClass('flex-1', 'overflow-y-auto');
-      });
-
-      it('renders without scrolling features when enableScrolling is false', () => {
-        renderWithProviders(
-          <Dialog>
-            <DialogTrigger>Open Regular Dialog</DialogTrigger>
-            <DialogContent enableScrolling={false}>
-              <DialogHeader sticky={true}>
-                <DialogTitle>Regular Dialog</DialogTitle>
-              </DialogHeader>
-              <DialogBody>
-                <div>Regular content</div>
-              </DialogBody>
-              <DialogFooter sticky={true}>
-                <button>Save</button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        expect(content).toHaveClass('grid');
-        expect(content).not.toHaveClass('flex', 'flex-col');
-        
-        // Should not have maxHeight when scrolling is disabled
-        const style = content.getAttribute('style');
-        expect(style).toBeNull();
-
-        // Headers and footers are still sticky if explicitly set, regardless of enableScrolling
-        const header = screen.getByText('Regular Dialog').parentElement;
-        const footer = screen.getByRole('button', { name: 'Save', hidden: true }).parentElement;
-        // Since sticky={true} was explicitly set, they should still be sticky
-        expect(header).toHaveClass('sticky', 'border-b');
-        expect(footer).toHaveClass('sticky', 'border-t');
-      });
-    });
-
-    describe('Responsive Behavior', () => {
-      it('adjusts height calculations for mobile screens', () => {
-        // Mock smaller mobile screen
-        Object.defineProperty(window, 'innerHeight', {
-          writable: true,
-          configurable: true,
-          value: 600,
-        });
-
-        renderWithProviders(
-          <DialogContent enableScrolling={true} maxHeightPercent={90}>
-            <div>Mobile content</div>
-          </DialogContent>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        // Check that maxHeight is applied based on mobile viewport
-        expect(content).toHaveAttribute('style');
-        const style = content.getAttribute('style');
-        expect(style).toContain('max-height');
-        expect(style).toMatch(/max-height:\s*\d+(px|vh)/);
-      });
-
-      it('maintains minimum viable height on very small screens', () => {
-        Object.defineProperty(window, 'innerHeight', {
-          writable: true,
-          configurable: true,
-          value: 300,
-        });
-
-        renderWithProviders(
-          <DialogContent enableScrolling={true} maxHeightPercent={90} minHeight="200px">
-            <div>Small screen content</div>
-          </DialogContent>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        expect(content).toHaveStyle({
-          minHeight: '200px',
-        });
-        
-        // Check that maxHeight is still calculated
-        const style = content.getAttribute('style');
-        expect(style).toContain('max-height');
-      });
-    });
-
-    describe('Accessibility Features', () => {
-      it('maintains proper ARIA attributes with scrolling', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true}>
-            <DialogHeader>
-              <DialogTitle id="dialog-title">Accessible Dialog</DialogTitle>
-              <DialogDescription id="dialog-desc">Description text</DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <div>Accessible content</div>
-            </DialogBody>
-          </DialogContent>
-        );
-
-        const content = screen.getByRole('dialog', { hidden: true });
-        const body = screen.getByRole('main', { hidden: true });
-        
-        expect(content).toBeInTheDocument();
-        expect(body).toHaveAttribute('aria-label', 'Dialog main content');
-      });
-
-      it('ensures keyboard navigation works with sticky elements', () => {
-        renderWithProviders(
-          <DialogContent enableScrolling={true}>
-            <DialogHeader sticky={true}>
-              <DialogTitle>Keyboard Navigation Test</DialogTitle>
-            </DialogHeader>
-            <DialogBody>
-              <button>Focusable button 1</button>
-              <button>Focusable button 2</button>
-            </DialogBody>
-            <DialogFooter sticky={true}>
-              <button>Footer button</button>
-            </DialogFooter>
-          </DialogContent>
-        );
-
-        const buttons = screen.getAllByRole('button', { hidden: true });
-        expect(buttons).toHaveLength(4); // 3 content buttons + 1 close button
-        
-        // All buttons should be in the document and focusable
-        buttons.forEach(button => {
-          expect(button).toBeInTheDocument();
-          expect(button).not.toHaveAttribute('tabindex', '-1');
-        });
-      });
-    });
-
-    describe('Error Handling and Edge Cases', () => {
-      it('handles invalid maxHeightPercent gracefully', () => {
-        const { rerender } = renderWithProviders(
-          <DialogContent enableScrolling={true} maxHeightPercent={NaN}>
-            <div>Content</div>
-          </DialogContent>
-        );
-
-        let content = screen.getByTestId('dialog-content');
-        // Should still apply default height when NaN - may not have style attribute if defaults are used
-        let style = content.getAttribute('style');
-        if (style) {
-          expect(style).toContain('max-height');
-        } else {
-          // If no style attribute, the component should still be rendered properly
-          expect(content).toBeInTheDocument();
-        }
-
-        rerender(
-          <DialogContent enableScrolling={true} maxHeightPercent={undefined}>
-            <div>Content</div>
-          </DialogContent>
-        );
-
-        content = screen.getByTestId('dialog-content');
-        // Should use default when undefined
-        style = content.getAttribute('style');
-        if (style) {
-          expect(style).toContain('max-height');
-        }
-      });
-
-      it('handles missing ResizeObserver gracefully', () => {
-        const originalResizeObserver = global.ResizeObserver;
-        delete (global as any).ResizeObserver;
-
-        // Should not throw error
-        expect(() => {
-          renderWithProviders(
-            <DialogContent enableScrolling={true}>
-              <div>Content without ResizeObserver</div>
-            </DialogContent>
-          );
-        }).not.toThrow();
-
-        const content = screen.getByTestId('dialog-content');
-        expect(content).toBeInTheDocument();
-
-        // Restore ResizeObserver
-        global.ResizeObserver = originalResizeObserver;
-      });
-
-      it('works correctly when enableScrolling prop changes dynamically', () => {
-        const { rerender, container } = renderWithProviders(
-          <Dialog open>
-            <DialogContent enableScrolling={false} data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <DialogBody>Content</DialogBody>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = container.querySelector('[data-testid="dialog-content"]') as HTMLElement;
-        expect(content).toHaveClass('grid');
-        let style = content.getAttribute('style');
-        expect(style).toBeNull();
-
-        rerender(
-          <Dialog open>
-            <DialogContent enableScrolling={true} data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <DialogBody>Content</DialogBody>
-            </DialogContent>
-          </Dialog>
-        );
-
-        expect(content).toHaveClass('flex', 'flex-col');
-        style = content.getAttribute('style');
-        if (style) {
-          expect(style).toContain('max-height');
-        }
-      });
-    });
-
-    describe('Smart Width Features', () => {
-      it('applies smart width constraints when maxWidthPercent is set', () => {
-        renderWithProviders(
-          <Dialog open>
-            <DialogContent maxWidthPercent={75} data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <div>Content</div>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        const style = content.getAttribute('style');
-        expect(style).toContain('max-width:');
-        expect(style).toMatch(/max-width:\s*\d+(px|vw)/);
-      });
-
-      it('applies custom maxWidth when provided', () => {
-        renderWithProviders(
-          <Dialog open>
-            <DialogContent maxWidth="600px" data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <div>Content</div>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        const style = content.getAttribute('style');
-        expect(style).toContain('max-width: 600px');
-      });
-
-      it('applies minWidth when provided', () => {
-        renderWithProviders(
-          <Dialog open>
-            <DialogContent minWidth="400px" maxWidthPercent={80} data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <div>Content</div>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        const style = content.getAttribute('style');
-        expect(style).toContain('min-width: 400px');
-        expect(style).toContain('max-width:');
-      });
-
-      it('does not apply width constraints when not specified', () => {
-        renderWithProviders(
-          <Dialog open>
-            <DialogContent data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <div>Content</div>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        const style = content.getAttribute('style');
-        expect(style).toBeNull();
-      });
-
-      it('prioritizes maxWidth over maxWidthPercent', () => {
-        renderWithProviders(
-          <Dialog open>
-            <DialogContent maxWidth="500px" maxWidthPercent={90} data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <div>Content</div>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        const style = content.getAttribute('style');
-        // Should prioritize maxWidth over maxWidthPercent - should contain either the px value or the percentage
-        expect(style).toMatch(/max-width:\s*(500px|90vw)/);
-      });
-
-      it('handles extreme maxWidthPercent values', () => {
-        renderWithProviders(
-          <Dialog open>
-            <DialogContent maxWidthPercent={150} data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <div>Content</div>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        const style = content.getAttribute('style');
-        expect(style).toContain('max-width:');
-        // Should be clamped to reasonable maximum
-      });
-
-      it('combines smart width and height constraints', () => {
-        renderWithProviders(
-          <Dialog open>
-            <DialogContent 
-              maxWidthPercent={80} 
-              maxHeightPercent={70}
-              enableScrolling={true}
-              data-testid="dialog-content"
-            >
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <DialogBody>Content</DialogBody>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = screen.getByTestId('dialog-content');
-        const style = content.getAttribute('style');
-        expect(style).toContain('max-width:');
-        expect(style).toContain('max-height:');
-      });
-
-      it('removes size classes when smart width is active', () => {
-        const { container } = renderWithProviders(
-          <Dialog open>
-            <DialogContent size="lg" maxWidthPercent={80} data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <div>Content</div>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = container.querySelector('[data-testid="dialog-content"]') as HTMLElement;
-        expect(content).not.toHaveClass('max-w-lg');
-        const style = content.getAttribute('style');
-        expect(style).toContain('max-width:');
-      });
-
-      it('preserves size classes when smart width is not active', () => {
-        const { container } = renderWithProviders(
-          <Dialog open>
-            <DialogContent size="lg" data-testid="dialog-content">
-              <DialogHeader>
-                <DialogTitle>Test Dialog</DialogTitle>
-              </DialogHeader>
-              <div>Content</div>
-            </DialogContent>
-          </Dialog>
-        );
-
-        const content = container.querySelector('[data-testid="dialog-content"]') as HTMLElement;
-        expect(content).toHaveClass('max-w-lg');
-        const style = content.getAttribute('style');
-        expect(style).toBeNull();
-      });
-    });
-  });
-
-  // Shared Utilities Tests
-  describe('Dialog - Shared Utilities Tests', () => {
-    testComponentRendering(Dialog, [
-      {
-        name: 'with default props',
-        props: { children: <DialogTrigger>Open</DialogTrigger> },
-        expectedText: 'Open'
-      },
-      {
-        name: 'with open state',
-        props: { open: true, children: <DialogTrigger>Open</DialogTrigger> },
-        expectedText: 'Open'
-      }
-    ]);
-
-    testComponentRendering(DialogTrigger, [
-      {
-        name: 'with text content',
-        props: { children: 'Open Dialog' },
-        expectedText: 'Open Dialog'
-      }
-    ]);
-
-    testComponentRendering(DialogContent, [
-      {
-        name: 'with content',
-        props: { children: 'Dialog content' },
-        expectedText: 'Dialog content'
-      },
-      {
-        name: 'with size variant',
-        props: { size: 'lg', children: 'Large dialog' },
-        expectedText: 'Large dialog'
-      }
-    ]);
-
-    testComponentAccessibility(DialogContent, {
-      requiredAttributes: [],
-      shouldBeKeyboardAccessible: false,
-      shouldHaveValidRole: false,
-      shouldHaveValidAriaLabel: false
-    }, {
-      children: 'Accessible dialog'
-    });
-  });
-});