@jmruthers/pace-core 0.6.9 → 0.6.10

package/src/components/Header/Header.tsx

@@ -5,15 +5,14 @@
  * @since 0.1.0
  *
  * A comprehensive header component for application layouts with navigation,
- * user menu, organisation selector, event selector, and customizable branding.
+ * user menu, context selector, and customizable branding.
  *
  * Features:
- * - Customizable logo (URL or component)
+ * - Customizable logo via URL
  * - Clickable logo that routes to dashboard (configurable)
  * - Navigation menu integration
  * - User menu with authentication
- * - Organisation selector for multi-organisation applications
- * - Event selector for multi-tenant applications
+ * - Context selector for multi-organisation and multi-event applications
  * - Custom actions support
  * - Responsive design
  * - Accessibility compliant
@@ -33,7 +32,7 @@
  * 
  * // Header with navigation and custom actions
  * <Header
- *   logo={<CustomLogo />}
+ *   logoUrl="/logo.svg"
  *   logoHref="/home"
  *   navItems={[
  *     { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
@@ -83,17 +82,18 @@
  * - Tailwind CSS - Styling
  * - NavigationMenu component
  * - UserMenu component
- * - ContextSelector component (unified org/event selector)
+ * - ContextSelector component
  */
 
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { AppSwitcher } from '../AppSwitcher/AppSwitcher';
+import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { User } from '@supabase/supabase-js';
 import { cn } from '../../utils/core/cn';
 import { ContextSelector } from '../ContextSelector';
 import { UserMenu } from '../UserMenu';
-import { NavigationMenu } from '../NavigationMenu';
-import type { NavigationItem } from '../NavigationMenu';
+import { NavigationMenu, type NavigationItem } from '../NavigationMenu';
 import type { PasswordChangeFormError } from '../PasswordChange/PasswordChangeForm';
 import { useOrganisations } from '../../hooks/useOrganisations';
 import { useEvents } from '../../hooks/useEvents';
@@ -107,8 +107,6 @@ export interface HeaderProps {
   logoUrl?: string;
   /** Alt text for the logo */
   logoAlt?: string;
-  /** Custom logo component (overrides logoUrl) */
-  logo?: React.ReactNode;
   /** Navigation items for the menu - uses NavigationItem interface */
   navItems?: NavigationItem[];
   /** Current user for the user menu */
@@ -117,13 +115,13 @@ export interface HeaderProps {
   onSignOut?: () => Promise<void>;
   /** Password change handler for user menu */
   onChangePassword?: (newPassword: string, confirmPassword: string) => Promise<{ error?: PasswordChangeFormError }>;
-  /** Additional actions to display (will be placed between event selector and user menu) */
+  /** Additional actions to display (will be placed between context selector and user menu) */
   actions?: React.ReactNode;
   /** Custom user menu component (overrides default UserMenu) */
   userMenu?: React.ReactNode;
   /** Custom className */
   className?: string;
-  /** Show/hide context selector (unified org/event selector) - default: true */
+  /** Show/hide context selector - default: true */
   showContextSelector?: boolean;
   /** Show organisations in context selector - default: true */
   showOrganisations?: boolean;
@@ -135,7 +133,7 @@ export interface HeaderProps {
   currentPath?: string;
   /** Custom navigation handler */
   onNavigate?: (item: NavigationItem) => void;
-  /** URL to navigate to when logo is clicked (e.g., '/dashboard') */
+  /** URL to navigate to when logo is clicked (e.g., '/dashboard'). Defaults to '/' if not provided. */
   logoHref?: string;
 }
 
@@ -152,11 +150,11 @@ export interface HeaderProps {
  * authenticated and public pages.
  * 
  * Features:
- * - Customizable logo (URL or custom component)
+ * - Customizable logo via URL
  * - Clickable logo that automatically routes to dashboard (configurable via logoHref)
  * - Navigation menu integration with highlighting
  * - User menu with authentication and password management
- * - Event selector for multi-tenant applications
+ * - Context selector for multi-organisation and multi-event applications
  * - Custom actions support
  * - Responsive design with mobile considerations
  * - Accessibility compliant with proper ARIA attributes
@@ -242,15 +240,17 @@ export interface HeaderProps {
  */
 /**
  * Header component for application layouts.
- * Provides navigation, user menu, organisation/event selectors, and customizable branding.
+ * Provides navigation, user menu, context selector, and customizable branding.
  * 
  * @param props - Header configuration
  * @returns The rendered header
  */
+// Default logo SVG data URL (simple white square 32x32)
+const DEFAULT_LOGO_SRC = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiNmZmYiLz48L3N2Zz4=';
+
 export function Header({
   logoUrl,
   logoAlt = 'Logo',
-  logo,
   navItems = [],
   user,
   onSignOut,
@@ -272,55 +272,68 @@ export function Header({
   // Get hooks for context selector
   const { switchOrganisation } = useOrganisations();
   const { events, setSelectedEvent } = useEvents();
+  
+  // Get app name for app switcher (only if user is authenticated)
+  const authContext = useUnifiedAuth();
+  const isAuthenticated = authContext?.isAuthenticated ?? false;
+  const appName = authContext?.appName;
 
   return (
     <header className={cn(
       "w-full border-b border-main-200 h-16 shadow-sm bg-main-100 ",
       className
     )} role="banner">
-      <nav className="px-4 w-[min(var(--app-width),100%)] mx-auto grid grid-cols-[auto_1fr_auto_auto_auto_auto] items-center gap-4 h-full">
-          {/* Logo */}
-          {logo ? (
-            logoHref ? (
-              <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
-                {logo}
-              </Link>
-            ) : (
-              logo
-            )
-          ) : logoUrl ? (
+      <nav className={cn(
+        "px-4 w-[min(var(--app-width),100%)] mx-auto grid items-center gap-4 h-full",
+        isAuthenticated && appName 
+          ? "grid-cols-[auto_auto_1fr_auto_auto]"
+          : "grid-cols-[auto_1fr_auto_auto]"
+      )}>
+          {/* PACE Logo with App Switcher (if authenticated) */}
+          {isAuthenticated && appName && (
+              <AppSwitcher
+                currentAppName={appName}
+                className="w-9"
+              />
+          )}
+          
+          {/* App Logo (regular link, not app switcher) */}
+          {logoUrl && (
             logoHref ? (
-              <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
+              <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity flex items-center">
                 <img
                   src={logoUrl}
                   alt={logoAlt || 'Logo'}
-                  className="h-[2.15rem] w-auto max-w-[200px] object-contain rounded-md shadow-md bg-transparent"
+                  className="h-9 w-auto shadow-md"
                 />
               </Link>
             ) : (
               <img
                 src={logoUrl}
                 alt={logoAlt || 'Logo'}
-                className="h-[2.15rem] w-auto max-w-[200px] object-contain rounded-md shadow-md bg-transparent"
+                className="h-9 w-auto shadow-md"
               />
             )
-          ) : (
+          )}
+          {!logoUrl && (
+            // Default logo when logoUrl is not provided
             logoHref ? (
-              <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity">
+              <Link to={logoHref} className="cursor-pointer hover:opacity-80 transition-opacity flex items-center">
                 <img
-                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
+                  src={DEFAULT_LOGO_SRC}
                   alt={logoAlt || 'Logo'}
-                  className="size-8 shadow-md"
+                  className="h-9 w-auto shadow-md"
                 />
               </Link>
             ) : (
               <img
-                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
+                src={DEFAULT_LOGO_SRC}
                 alt={logoAlt || 'Logo'}
-                className="size-8 shadow-md"
+                className="h-9 w-auto shadow-md"
               />
             )
           )}
+          
 
           {/* Navigation Menu */}
           {navItems && navItems.length > 0 && (
@@ -334,15 +347,11 @@ export function Header({
             />
           )}
 
-          {/* Unified Context Selector - Shows all accessible orgs and events */}
+          {/* Context Selector - Shows all accessible orgs and events */}
           {shouldShowContextSelector ? (
             <ContextSelector
               placeholder="Select organisation or event"
-              className={cn(
-                "w-96",
-                // Adjust width based on whether actions exist
-                actions ? "col-span-1" : "col-span-2"
-              )}
+              className="w-96"
               showOrganisations={showOrganisations}
               showEvents={showEvents}
               onOrganisationSelect={async (org) => {

package/src/components/InactivityWarningModal/InactivityWarningModal.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { InactivityWarningModal } from './InactivityWarningModal';
@@ -13,7 +13,7 @@ import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 // Mock the Dialog components to avoid complex modal behavior in tests
 vi.mock('../Dialog/Dialog', () => ({
-  Dialog: ({ children, open, onOpenChange }: { children: React.ReactNode; open: boolean; onOpenChange: (open: boolean) => void }) => 
+  Dialog: ({ children, open, _onOpenChange }: { children: React.ReactNode; open: boolean; _onOpenChange: (open: boolean) => void }) => 
     open ? <div data-testid="dialog" role="dialog">{children}</div> : null,
   DialogContent: ({ children, className, preventCloseOnEscape, preventCloseOnOutsideClick, ...props }: any) => (
     <div 
@@ -110,34 +110,16 @@ describe('InactivityWarningModal Component', () => {
       expect(modal).toHaveClass('custom-modal');
     });
 
-    it('renders countdown timer with correct time format', () => {
-      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={125} />);
+    it.each([
+      { timeRemaining: 0, expected: '00:00' },
+      { timeRemaining: 5, expected: '00:05' },
+      { timeRemaining: 60, expected: '01:00' },
+      { timeRemaining: 65, expected: '01:05' },
+      { timeRemaining: 125, expected: '02:05' },
+    ])('renders countdown timer with correct format (timeRemaining: $timeRemaining)', ({ timeRemaining, expected }) => {
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={timeRemaining} />);
       
-      expect(screen.getByText('02:05')).toBeInTheDocument();
-    });
-
-    it('renders countdown timer with single digit minutes', () => {
-      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={65} />);
-      
-      expect(screen.getByText('01:05')).toBeInTheDocument();
-    });
-
-    it('renders countdown timer with zero seconds', () => {
-      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={60} />);
-      
-      expect(screen.getByText('01:00')).toBeInTheDocument();
-    });
-
-    it('renders countdown timer with single digit seconds', () => {
-      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={5} />);
-      
-      expect(screen.getByText('00:05')).toBeInTheDocument();
-    });
-
-    it('renders countdown timer with zero time', () => {
-      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={0} />);
-      
-      expect(screen.getByText('00:00')).toBeInTheDocument();
+      expect(screen.getByText(expected)).toBeInTheDocument();
     });
 
     it('renders action buttons with correct text', () => {
@@ -162,25 +144,20 @@ describe('InactivityWarningModal Component', () => {
   });
 
   describe('Time Formatting', () => {
-    it('formats time correctly for various values', () => {
-      const testCases = [
-        { input: 0, expected: '00:00' },
-        { input: 5, expected: '00:05' },
-        { input: 30, expected: '00:30' },
-        { input: 60, expected: '01:00' },
-        { input: 90, expected: '01:30' },
-        { input: 125, expected: '02:05' },
-        { input: 3661, expected: '61:01' },
-      ];
-
-      testCases.forEach(({ input, expected }) => {
-        const { unmount } = renderWithProviders(
-          <InactivityWarningModal {...baseProps} timeRemaining={input} />
-        );
-        
-        expect(screen.getByText(expected)).toBeInTheDocument();
-        unmount();
-      });
+    it.each([
+      { input: 0, expected: '00:00' },
+      { input: 5, expected: '00:05' },
+      { input: 30, expected: '00:30' },
+      { input: 60, expected: '01:00' },
+      { input: 90, expected: '01:30' },
+      { input: 125, expected: '02:05' },
+      { input: 3661, expected: '61:01' },
+    ])('formats time correctly (input: $input, expected: $expected)', ({ input, expected }) => {
+      renderWithProviders(
+        <InactivityWarningModal {...baseProps} timeRemaining={input} />
+      );
+      
+      expect(screen.getByText(expected)).toBeInTheDocument();
     });
 
     it('updates display time when timeRemaining prop changes', () => {
@@ -318,20 +295,16 @@ describe('InactivityWarningModal Component', () => {
   });
 
   describe('Edge Cases', () => {
-    it('handles negative time values gracefully', () => {
-      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={-5} />);
+    it.each([
+      { timeRemaining: -5, expected: '-1:-5', description: 'negative time' },
+      { timeRemaining: 999999, expected: '16666:39', description: 'very large time' },
+    ])('handles $description gracefully', ({ timeRemaining, expected }) => {
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={timeRemaining} />);
       
-      // Should still render, but with negative time formatted as the component actually does it
-      expect(screen.getByText('-1:-5')).toBeInTheDocument();
+      expect(screen.getByText(expected)).toBeInTheDocument();
     });
 
-    it('handles very large time values', () => {
-      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={999999} />);
-      
-      expect(screen.getByText('16666:39')).toBeInTheDocument();
-    });
-
-    it('handles undefined title and description', () => {
+    it('uses default title and description when undefined', () => {
       const propsWithoutDefaults = {
         isOpen: true,
         timeRemaining: 30,
@@ -343,12 +316,11 @@ describe('InactivityWarningModal Component', () => {
       
       renderWithProviders(<InactivityWarningModal {...propsWithoutDefaults} />);
       
-      // Should use default values
       expect(screen.getByText('Session Timeout Warning')).toBeInTheDocument();
       expect(screen.getByText("You've been inactive for a while. Your session will expire soon for security reasons.")).toBeInTheDocument();
     });
 
-    it('handles empty string title and description', () => {
+    it('renders empty strings when title and description are empty', () => {
       renderWithProviders(
         <InactivityWarningModal 
           {...baseProps} 
@@ -357,13 +329,8 @@ describe('InactivityWarningModal Component', () => {
         />
       );
       
-      // Should render empty strings - title is h2, description is p in DialogHeader
       const title = screen.getByRole('heading', { level: 2 });
-      const description = screen.getByText(/Time remaining/i).closest('div')?.previousElementSibling?.querySelector('p');
       expect(title).toHaveTextContent('');
-      if (description) {
-        expect(description).toHaveTextContent('');
-      }
     });
   });
 
@@ -439,21 +406,14 @@ describe('InactivityWarningModal Component', () => {
       
       renderWithProviders(<InactivityWarningModal {...propsWithoutCallbacks} />);
       
-      // Should render without errors
       expect(screen.getByTestId('dialog')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Stay Signed In' })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Sign Out Now' })).toBeInTheDocument();
     });
 
-    it('handles invalid timeRemaining values', () => {
-      const invalidTimeProps = {
-        ...baseProps,
-        timeRemaining: NaN,
-      };
-      
-      renderWithProviders(<InactivityWarningModal {...invalidTimeProps} />);
+    it('handles invalid timeRemaining values (NaN)', () => {
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={NaN} />);
       
-      // Should render with NaN formatted as "NaN:NaN" or handle gracefully
       expect(screen.getByTestId('dialog')).toBeInTheDocument();
     });
   });
@@ -473,7 +433,6 @@ describe('InactivityWarningModal Component', () => {
         <InactivityWarningModal {...stableProps} />
       );
       
-      const initialTime = screen.getByText('00:30');
       
       // Re-render with same props
       rerender(<InactivityWarningModal {...stableProps} />);

package/src/components/Input/Input.test.tsx

@@ -59,47 +59,25 @@ describe('Input Component', () => {
   });
 
   describe('Variants', () => {
-    it('renders with default variant', () => {
-      renderWithProviders(<Input variant="default" />);
+    it.each([
+      { variant: 'default' as const, description: 'default variant' },
+      { variant: 'destructive' as const, description: 'destructive variant' },
+      { error: true, description: 'error prop' },
+    ])('renders with $description', (props) => {
+      renderWithProviders(<Input {...props} />);
       const input = screen.getByRole('textbox');
       expect(input).toBeInTheDocument();
       expect(input).toBeVisible();
     });
-
-    it('renders with destructive variant', () => {
-      renderWithProviders(<Input variant="destructive" />);
-      const input = screen.getByRole('textbox');
-      // Verify destructive variant is rendered (behavior-based check)
-      expect(input).toBeInTheDocument();
-      expect(input).toBeVisible();
-    });
-
-    it('applies destructive styling when error is true', () => {
-      renderWithProviders(<Input error={true} />);
-      const input = screen.getByRole('textbox');
-      // Verify error state is applied (behavior-based check)
-      expect(input).toBeInTheDocument();
-      expect(input).toBeVisible();
-    });
   });
 
   describe('Sizes', () => {
-    it('renders with small size', () => {
-      renderWithProviders(<Input size="sm" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-      expect(input).toBeVisible();
-    });
-
-    it('renders with medium size (default)', () => {
-      renderWithProviders(<Input size="md" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-      expect(input).toBeVisible();
-    });
-
-    it('renders with large size', () => {
-      renderWithProviders(<Input size="lg" />);
+    it.each([
+      { size: 'sm' as const },
+      { size: 'md' as const },
+      { size: 'lg' as const },
+    ])('renders with $size size', ({ size }) => {
+      renderWithProviders(<Input size={size} />);
       const input = screen.getByRole('textbox');
       expect(input).toBeInTheDocument();
       expect(input).toBeVisible();
@@ -228,16 +206,22 @@ describe('Input Component', () => {
     it('handles error state styling', () => {
       renderWithProviders(<Input error={true} />);
       const input = screen.getByRole('textbox');
-      // Verify error state is applied (behavior-based check)
       expect(input).toBeInTheDocument();
       expect(input).toBeVisible();
     });
 
-    it('handles invalid input gracefully', () => {
+    it('handles invalid input values gracefully', () => {
       renderWithProviders(<Input type="email" value="invalid-email" />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveValue('invalid-email');
     });
+
+    it('handles readOnly state', () => {
+      renderWithProviders(<Input readOnly value="readonly value" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('readonly');
+      expect(input).toHaveValue('readonly value');
+    });
   });
 
   // Integration tests
@@ -310,108 +294,38 @@ describe('InputGroup Component', () => {
   });
 
   describe('Orientation', () => {
-    it('renders with vertical orientation (default)', () => {
+    it.each([
+      { orientation: 'vertical' as const },
+      { orientation: 'horizontal' as const },
+    ])('renders with $orientation orientation', ({ orientation }) => {
       renderWithProviders(
-        <InputGroup orientation="vertical">
+        <InputGroup orientation={orientation}>
           <Input placeholder="Input 1" />
           <Input placeholder="Input 2" />
         </InputGroup>
       );
       
-      // Verify inputs are rendered (behavior-based check)
-      expect(screen.getByPlaceholderText('Input 1')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Input 2')).toBeInTheDocument();
-    });
-
-    it('renders with horizontal orientation', () => {
-      renderWithProviders(
-        <InputGroup orientation="horizontal">
-          <Input placeholder="Input 1" />
-          <Input placeholder="Input 2" />
-        </InputGroup>
-      );
-      
-      // Verify inputs are rendered (behavior-based check)
       expect(screen.getByPlaceholderText('Input 1')).toBeInTheDocument();
       expect(screen.getByPlaceholderText('Input 2')).toBeInTheDocument();
     });
   });
 
   describe('Spacing', () => {
-    it('applies small spacing for vertical orientation', () => {
-      renderWithProviders(
-        <InputGroup orientation="vertical" spacing="sm">
-          <Input placeholder="Input 1" />
-          <Input placeholder="Input 2" />
-        </InputGroup>
-      );
-      
-      // Verify inputs are rendered with spacing (behavior-based check)
-      expect(screen.getByPlaceholderText('Input 1')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Input 2')).toBeInTheDocument();
-    });
-
-    it('applies medium spacing for vertical orientation (default)', () => {
-      renderWithProviders(
-        <InputGroup orientation="vertical" spacing="md">
-          <Input placeholder="Input 1" />
-          <Input placeholder="Input 2" />
-        </InputGroup>
-      );
-      
-      // Verify inputs are rendered with spacing (behavior-based check)
-      expect(screen.getByPlaceholderText('Input 1')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Input 2')).toBeInTheDocument();
-    });
-
-    it('applies large spacing for vertical orientation', () => {
-      renderWithProviders(
-        <InputGroup orientation="vertical" spacing="lg">
-          <Input placeholder="Input 1" />
-          <Input placeholder="Input 2" />
-        </InputGroup>
-      );
-      
-      // Verify inputs are rendered with spacing (behavior-based check)
-      expect(screen.getByPlaceholderText('Input 1')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Input 2')).toBeInTheDocument();
-    });
-
-    it('applies small spacing for horizontal orientation', () => {
-      renderWithProviders(
-        <InputGroup orientation="horizontal" spacing="sm">
-          <Input placeholder="Input 1" />
-          <Input placeholder="Input 2" />
-        </InputGroup>
-      );
-      
-      // Verify inputs are rendered with spacing (behavior-based check)
-      expect(screen.getByPlaceholderText('Input 1')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Input 2')).toBeInTheDocument();
-    });
-
-    it('applies medium spacing for horizontal orientation (default)', () => {
-      renderWithProviders(
-        <InputGroup orientation="horizontal" spacing="md">
-          <Input placeholder="Input 1" />
-          <Input placeholder="Input 2" />
-        </InputGroup>
-      );
-      
-      // Verify inputs are rendered with spacing (behavior-based check)
-      expect(screen.getByPlaceholderText('Input 1')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Input 2')).toBeInTheDocument();
-    });
-
-    it('applies large spacing for horizontal orientation', () => {
+    it.each([
+      { orientation: 'vertical' as const, spacing: 'sm' as const },
+      { orientation: 'vertical' as const, spacing: 'md' as const },
+      { orientation: 'vertical' as const, spacing: 'lg' as const },
+      { orientation: 'horizontal' as const, spacing: 'sm' as const },
+      { orientation: 'horizontal' as const, spacing: 'md' as const },
+      { orientation: 'horizontal' as const, spacing: 'lg' as const },
+    ])('applies $spacing spacing for $orientation orientation', ({ orientation, spacing }) => {
       renderWithProviders(
-        <InputGroup orientation="horizontal" spacing="lg">
+        <InputGroup orientation={orientation} spacing={spacing}>
           <Input placeholder="Input 1" />
           <Input placeholder="Input 2" />
         </InputGroup>
       );
       
-      // Verify inputs are rendered with spacing (behavior-based check)
       expect(screen.getByPlaceholderText('Input 1')).toBeInTheDocument();
       expect(screen.getByPlaceholderText('Input 2')).toBeInTheDocument();
     });