@jmruthers/pace-core 0.5.140 → 0.5.141

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,439 @@
+/**
+ * @file Tabs Component Tests
+ * @description Comprehensive tests for Tabs component system
+ * @package @jmruthers/pace-core
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+describe('Tabs Component', () => {
+  // Basic rendering tests
+  describe('Rendering', () => {
+    it('renders tabs with default value', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+          <TabsContent value="tab2">Content 2</TabsContent>
+        </Tabs>
+      );
+      
+      expect(screen.getByText('Tab 1')).toBeInTheDocument();
+      expect(screen.getByText('Tab 2')).toBeInTheDocument();
+      expect(screen.getByText('Content 1')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1" className="custom-tabs">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      const tabsRoot = screen.getByText('Tab 1').closest('[role="tablist"]')?.parentElement;
+      expect(tabsRoot).toBeInTheDocument();
+    });
+
+    it('renders TabsList with custom className', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList className="custom-list">
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      const tabsList = screen.getByRole('tablist');
+      expect(tabsList).toHaveClass('custom-list');
+    });
+
+    it('renders TabsTrigger with custom className', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1" className="custom-trigger">Tab 1</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      const trigger = screen.getByRole('tab', { name: 'Tab 1' });
+      expect(trigger).toHaveClass('custom-trigger');
+    });
+
+    it('renders TabsContent with custom className', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1" className="custom-content">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      const content = screen.getByText('Content 1');
+      expect(content).toHaveClass('custom-content');
+    });
+  });
+
+  // Controlled mode tests
+  describe('Controlled Mode', () => {
+    it('handles controlled state', () => {
+      const TestComponent = () => {
+        const [value, setValue] = React.useState('tab1');
+        return (
+          <Tabs value={value} onValueChange={setValue}>
+            <TabsList>
+              <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+              <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tab1">Content 1</TabsContent>
+            <TabsContent value="tab2">Content 2</TabsContent>
+          </Tabs>
+        );
+      };
+      
+      renderWithProviders(<TestComponent />);
+      
+      expect(screen.getByText('Content 1')).toBeInTheDocument();
+      expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    });
+
+    it('calls onValueChange when tab is clicked', async () => {
+      const handleValueChange = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Tabs value="tab1" onValueChange={handleValueChange}>
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+          <TabsContent value="tab2">Content 2</TabsContent>
+        </Tabs>
+      );
+      
+      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2);
+      
+      expect(handleValueChange).toHaveBeenCalledWith('tab2');
+    });
+  });
+
+  // Uncontrolled mode tests
+  describe('Uncontrolled Mode', () => {
+    it('handles uncontrolled state with defaultValue', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+          <TabsContent value="tab2">Content 2</TabsContent>
+        </Tabs>
+      );
+      
+      expect(screen.getByText('Content 1')).toBeVisible();
+      
+      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2);
+      
+      expect(screen.getByText('Content 2')).toBeVisible();
+      expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    });
+  });
+
+  // Keyboard navigation tests
+  describe('Keyboard Navigation', () => {
+    it('navigates with ArrowRight key', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+          <TabsContent value="tab2">Content 2</TabsContent>
+          <TabsContent value="tab3">Content 3</TabsContent>
+        </Tabs>
+      );
+      
+      const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+      tab1.focus();
+      
+      await user.keyboard('{ArrowRight}');
+      
+      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+      expect(tab2).toHaveFocus();
+    });
+
+    it('navigates with ArrowLeft key', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Tabs defaultValue="tab2">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+          <TabsContent value="tab2">Content 2</TabsContent>
+          <TabsContent value="tab3">Content 3</TabsContent>
+        </Tabs>
+      );
+      
+      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+      tab2.focus();
+      
+      await user.keyboard('{ArrowLeft}');
+      
+      const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+      expect(tab1).toHaveFocus();
+    });
+
+    it('navigates to first tab with Home key', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Tabs defaultValue="tab3">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+          <TabsContent value="tab2">Content 2</TabsContent>
+          <TabsContent value="tab3">Content 3</TabsContent>
+        </Tabs>
+      );
+      
+      const tab3 = screen.getByRole('tab', { name: 'Tab 3' });
+      tab3.focus();
+      
+      await user.keyboard('{Home}');
+      
+      const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+      expect(tab1).toHaveFocus();
+    });
+
+    it('navigates to last tab with End key', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+          <TabsContent value="tab2">Content 2</TabsContent>
+          <TabsContent value="tab3">Content 3</TabsContent>
+        </Tabs>
+      );
+      
+      const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+      tab1.focus();
+      
+      await user.keyboard('{End}');
+      
+      const tab3 = screen.getByRole('tab', { name: 'Tab 3' });
+      expect(tab3).toHaveFocus();
+    });
+  });
+
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      const tabsList = screen.getByRole('tablist');
+      expect(tabsList).toBeInTheDocument();
+      
+      const tab = screen.getByRole('tab', { name: 'Tab 1' });
+      expect(tab).toHaveAttribute('aria-selected');
+      
+      const tabPanel = screen.getByRole('tabpanel');
+      expect(tabPanel).toBeInTheDocument();
+    });
+
+    it('associates tab panels with triggers', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      const tab = screen.getByRole('tab', { name: 'Tab 1' });
+      const tabPanel = screen.getByRole('tabpanel');
+      
+      const tabId = tab.getAttribute('id');
+      const panelLabelledBy = tabPanel.getAttribute('aria-labelledby');
+      
+      expect(panelLabelledBy).toBe(tabId);
+    });
+
+    it('marks active tab with aria-selected="true"', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+          <TabsContent value="tab2">Content 2</TabsContent>
+        </Tabs>
+      );
+      
+      const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+      
+      expect(tab1).toHaveAttribute('aria-selected', 'true');
+      expect(tab2).toHaveAttribute('aria-selected', 'false');
+    });
+
+    it('has focus visible styles', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      const tab = screen.getByRole('tab', { name: 'Tab 1' });
+      expect(tab).toHaveClass('focus-visible:outline-none', 'focus-visible:ring-2');
+    });
+  });
+
+  // Visual states tests
+  describe('Visual States', () => {
+    it('applies active state styling', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      const tab = screen.getByRole('tab', { name: 'Tab 1' });
+      expect(tab).toHaveClass('data-[state=active]:bg-background', 'data-[state=active]:text-main-600');
+    });
+
+    it('applies inactive state styling', () => {
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+          <TabsContent value="tab2">Content 2</TabsContent>
+        </Tabs>
+      );
+      
+      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+      expect(tab2).toHaveClass('data-[state=inactive]:text-sec-600');
+    });
+  });
+
+  // Integration tests
+  describe('Integration', () => {
+    it('works with icons in triggers', () => {
+      const TestIcon = () => <span data-testid="icon">Icon</span>;
+      
+      renderWithProviders(
+        <Tabs defaultValue="tab1">
+          <TabsList>
+            <TabsTrigger value="tab1">
+              <TestIcon /> Tab 1
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      expect(screen.getByTestId('icon')).toBeInTheDocument();
+      expect(screen.getByText('Tab 1')).toBeInTheDocument();
+    });
+
+    it('forwards refs correctly', () => {
+      const tabsRef = React.createRef<HTMLDivElement>();
+      const listRef = React.createRef<HTMLDivElement>();
+      const triggerRef = React.createRef<HTMLButtonElement>();
+      const contentRef = React.createRef<HTMLDivElement>();
+      
+      renderWithProviders(
+        <Tabs ref={tabsRef} defaultValue="tab1">
+          <TabsList ref={listRef}>
+            <TabsTrigger ref={triggerRef} value="tab1">Tab 1</TabsTrigger>
+          </TabsList>
+          <TabsContent ref={contentRef} value="tab1">Content 1</TabsContent>
+        </Tabs>
+      );
+      
+      expect(tabsRef.current).toBeInstanceOf(HTMLDivElement);
+      expect(listRef.current).toBeInstanceOf(HTMLDivElement);
+      expect(triggerRef.current).toBeInstanceOf(HTMLButtonElement);
+      expect(contentRef.current).toBeInstanceOf(HTMLDivElement);
+    });
+
+    it('works with multiple tab groups', () => {
+      renderWithProviders(
+        <div>
+          <Tabs defaultValue="tab1">
+            <TabsList>
+              <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tab1">Content 1</TabsContent>
+          </Tabs>
+          <Tabs defaultValue="tabA">
+            <TabsList>
+              <TabsTrigger value="tabA">Tab A</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tabA">Content A</TabsContent>
+          </Tabs>
+        </div>
+      );
+      
+      expect(screen.getByText('Tab 1')).toBeInTheDocument();
+      expect(screen.getByText('Tab A')).toBeInTheDocument();
+      expect(screen.getByText('Content 1')).toBeInTheDocument();
+      expect(screen.getByText('Content A')).toBeInTheDocument();
+    });
+  });
+});
+

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,202 @@
+/**
+ * @file Tabs Component System
+ * @package @jmruthers/pace-core
+ * @module Components/Tabs
+ * @since 0.5.141
+ *
+ * A comprehensive tabs component system built on top of Radix UI primitives.
+ * Provides accessible tabbed interfaces with keyboard navigation and ARIA support.
+ *
+ * Features:
+ * - Controlled and uncontrolled modes
+ * - Keyboard navigation (arrow keys)
+ * - Accessible ARIA attributes
+ * - Customizable styling via className
+ * - Support for icons in triggers
+ * - Compound component pattern
+ *
+ * @example
+ * ```tsx
+ * // Basic tabs
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * 
+ * // Controlled tabs
+ * <Tabs value={activeTab} onValueChange={setActiveTab}>
+ *   <TabsList>
+ *     <TabsTrigger value="transport">
+ *       <Plane size={16} /> Transport
+ *     </TabsTrigger>
+ *     <TabsTrigger value="accommodation">
+ *       <Building size={16} /> Accommodation
+ *     </TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="transport">
+ *     <TransportPlanningView />
+ *   </TabsContent>
+ *   <TabsContent value="accommodation">
+ *     <AccommodationPlanningView />
+ *   </TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Keyboard navigation (Arrow keys, Home, End)
+ * - Screen reader support with proper ARIA attributes
+ * - Focus management
+ * - Tab panel association
+ */
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../../utils/core/cn';
+
+// ============================================================================
+// TABS ROOT COMPONENT
+// ============================================================================
+
+export interface TabsProps extends TabsPrimitive.TabsProps {}
+
+/**
+ * Tabs root component
+ * Provides the context for tab navigation and state management
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>...</TabsList>
+ *   <TabsContent value="tab1">...</TabsContent>
+ * </Tabs>
+ * ```
+ */
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  TabsProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Root ref={ref} {...props} />
+));
+
+Tabs.displayName = TabsPrimitive.Root.displayName || 'Tabs';
+
+// ============================================================================
+// TABS LIST COMPONENT
+// ============================================================================
+
+export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {}
+
+/**
+ * TabsList component
+ * Container for tab triggers
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * <TabsList>
+ *   <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *   <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ * </TabsList>
+ * ```
+ */
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-sec-100 p-1 text-sec-600',
+      className
+    )}
+    {...props}
+  />
+));
+
+TabsList.displayName = TabsPrimitive.List.displayName || 'TabsList';
+
+// ============================================================================
+// TABS TRIGGER COMPONENT
+// ============================================================================
+
+export interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {}
+
+/**
+ * TabsTrigger component
+ * Individual tab button that activates a tab panel
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ * 
+ * // With icon
+ * <TabsTrigger value="transport">
+ *   <Plane size={16} /> Transport
+ * </TabsTrigger>
+ * ```
+ */
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-background data-[state=active]:text-main-600 data-[state=active]:shadow-sm',
+      'data-[state=inactive]:text-sec-600 data-[state=inactive]:hover:text-main-600',
+      className
+    )}
+    {...props}
+  />
+));
+
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName || 'TabsTrigger';
+
+// ============================================================================
+// TABS CONTENT COMPONENT
+// ============================================================================
+
+export interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}
+
+/**
+ * TabsContent component
+ * Container for tab panel content
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * <TabsContent value="tab1">
+ *   <div>Content for tab 1</div>
+ * </TabsContent>
+ * ```
+ */
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600 focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+
+TabsContent.displayName = TabsPrimitive.Content.displayName || 'TabsContent';
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+

package/src/components/Tabs/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @file Tabs component exports
+ * @package @jmruthers/pace-core
+ * @module Tabs
+ * @since 0.5.141
+ */
+
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './Tabs';
+