@jmruthers/pace-core 0.5.66 → 0.5.67

package/src/components/Switch/Switch.test.tsx

@@ -0,0 +1,438 @@
+/**
+ * @file Switch Component Tests
+ * @description Comprehensive tests for Switch component
+ * @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, beforeEach } from 'vitest';
+import { Switch } from './Switch';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+describe('Switch Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<Switch />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toBeInTheDocument();
+      expect(switchElement).not.toBeChecked();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<Switch className="custom-switch" />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveClass('custom-switch');
+    });
+
+    it('renders with custom id', () => {
+      renderWithProviders(<Switch id="test-switch" />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveAttribute('id', 'test-switch');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      renderWithProviders(<Switch ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it('applies all HTML attributes', () => {
+      renderWithProviders(
+        <Switch 
+          data-testid="test-switch" 
+          aria-label="Test switch"
+          title="Test title"
+        />
+      );
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveAttribute('data-testid', 'test-switch');
+      expect(switchElement).toHaveAttribute('aria-label', 'Test switch');
+      expect(switchElement).toHaveAttribute('title', 'Test title');
+    });
+  });
+
+  describe('State Management', () => {
+    it('renders as unchecked by default', () => {
+      renderWithProviders(<Switch />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).not.toBeChecked();
+    });
+
+    it('renders as checked when checked prop is true', () => {
+      renderWithProviders(<Switch checked={true} />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toBeChecked();
+    });
+
+    it('renders as unchecked when checked prop is false', () => {
+      renderWithProviders(<Switch checked={false} />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).not.toBeChecked();
+    });
+
+    it('handles controlled state changes', () => {
+      const handleCheckedChange = vi.fn();
+      renderWithProviders(
+        <Switch 
+          checked={false} 
+          onCheckedChange={handleCheckedChange} 
+        />
+      );
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).not.toBeChecked();
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('renders as disabled when disabled prop is true', () => {
+      renderWithProviders(<Switch disabled={true} />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toBeDisabled();
+    });
+
+    it('renders as enabled when disabled prop is false', () => {
+      renderWithProviders(<Switch disabled={false} />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).not.toBeDisabled();
+    });
+
+    it('applies disabled styling', () => {
+      renderWithProviders(<Switch disabled={true} />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveClass('disabled:cursor-not-allowed', 'disabled:opacity-50');
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('handles click events', async () => {
+      const handleCheckedChange = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Switch onCheckedChange={handleCheckedChange} />
+      );
+      
+      const switchElement = screen.getByRole('switch');
+      await user.click(switchElement);
+      
+      expect(handleCheckedChange).toHaveBeenCalledTimes(1);
+      expect(handleCheckedChange).toHaveBeenCalledWith(true);
+    });
+
+    it('handles keyboard events (Space)', async () => {
+      const handleCheckedChange = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Switch onCheckedChange={handleCheckedChange} />
+      );
+      
+      const switchElement = screen.getByRole('switch');
+      switchElement.focus();
+      await user.keyboard(' ');
+      
+      expect(handleCheckedChange).toHaveBeenCalledTimes(1);
+      expect(handleCheckedChange).toHaveBeenCalledWith(true);
+    });
+
+    it('handles keyboard events (Enter)', async () => {
+      const handleCheckedChange = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Switch onCheckedChange={handleCheckedChange} />
+      );
+      
+      const switchElement = screen.getByRole('switch');
+      switchElement.focus();
+      await user.keyboard('{Enter}');
+      
+      expect(handleCheckedChange).toHaveBeenCalledTimes(1);
+      expect(handleCheckedChange).toHaveBeenCalledWith(true);
+    });
+
+    it('toggles state on click', async () => {
+      const handleCheckedChange = vi.fn();
+      const user = userEvent.setup();
+      
+      const { rerender } = renderWithProviders(
+        <Switch checked={false} onCheckedChange={handleCheckedChange} />
+      );
+      
+      const switchElement = screen.getByRole('switch');
+      await user.click(switchElement);
+      
+      expect(handleCheckedChange).toHaveBeenCalledWith(true);
+      
+      // Simulate state change
+      rerender(<Switch checked={true} onCheckedChange={handleCheckedChange} />);
+      expect(switchElement).toBeChecked();
+      
+      await user.click(switchElement);
+      expect(handleCheckedChange).toHaveBeenCalledWith(false);
+    });
+
+    it('does not trigger events when disabled', async () => {
+      const handleCheckedChange = vi.fn();
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <Switch disabled={true} onCheckedChange={handleCheckedChange} />
+      );
+      
+      const switchElement = screen.getByRole('switch');
+      await user.click(switchElement);
+      
+      expect(handleCheckedChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(<Switch />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveAttribute('type', 'button');
+    });
+
+    it('supports aria-label', () => {
+      renderWithProviders(<Switch aria-label="Toggle notifications" />);
+      const switchElement = screen.getByRole('switch', { name: 'Toggle notifications' });
+      expect(switchElement).toBeInTheDocument();
+    });
+
+    it('supports aria-labelledby', () => {
+      renderWithProviders(
+        <div>
+          <label id="notifications-label">Enable notifications</label>
+          <Switch aria-labelledby="notifications-label" />
+        </div>
+      );
+      const switchElement = screen.getByRole('switch', { name: 'Enable notifications' });
+      expect(switchElement).toBeInTheDocument();
+    });
+
+    it('supports aria-describedby', () => {
+      renderWithProviders(
+        <div>
+          <Switch aria-describedby="notifications-help" />
+          <div id="notifications-help">You will receive email notifications</div>
+        </div>
+      );
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveAttribute('aria-describedby', 'notifications-help');
+    });
+
+    it('announces state changes to screen readers', () => {
+      const { rerender } = renderWithProviders(<Switch checked={false} />);
+      let switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveAttribute('aria-checked', 'false');
+      
+      rerender(<Switch checked={true} />);
+      switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveAttribute('aria-checked', 'true');
+    });
+
+    it('is keyboard accessible', () => {
+      renderWithProviders(<Switch />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).not.toHaveAttribute('tabindex', '-1');
+    });
+
+    it('has focus visible styles', () => {
+      renderWithProviders(<Switch />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveClass('focus-visible:outline-none', 'focus-visible:ring-2');
+    });
+  });
+
+  describe('Visual States', () => {
+    it('applies checked state styling', () => {
+      renderWithProviders(<Switch checked={true} />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveClass('data-[state=checked]:bg-main-600');
+    });
+
+    it('applies unchecked state styling', () => {
+      renderWithProviders(<Switch checked={false} />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveClass('data-[state=unchecked]:bg-sec-200');
+    });
+
+    it('has proper sizing', () => {
+      renderWithProviders(<Switch />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveClass('h-6', 'w-11');
+    });
+
+    it('has proper border and background styling', () => {
+      renderWithProviders(<Switch />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveClass('rounded-full', 'border-2', 'border-transparent');
+    });
+
+    it('has proper thumb styling', () => {
+      renderWithProviders(<Switch />);
+      const switchElement = screen.getByRole('switch');
+      const thumb = switchElement.querySelector('[data-state]');
+      expect(thumb).toHaveClass('h-5', 'w-5', 'rounded-full', 'bg-background');
+    });
+  });
+
+  describe('Form Integration', () => {
+    it('works with form labels', () => {
+      renderWithProviders(
+        <div>
+          <label htmlFor="notifications-switch">Enable notifications</label>
+          <Switch id="notifications-switch" />
+        </div>
+      );
+      
+      const switchElement = screen.getByRole('switch');
+      const label = screen.getByText('Enable notifications');
+      
+      expect(switchElement).toHaveAttribute('id', 'notifications-switch');
+      expect(label).toHaveAttribute('for', 'notifications-switch');
+    });
+
+    it('works with form submission', async () => {
+      const handleSubmit = vi.fn((e) => e.preventDefault());
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <form onSubmit={handleSubmit}>
+          <Switch name="notifications" />
+          <button type="submit">Submit</button>
+        </form>
+      );
+      
+      await user.click(screen.getByRole('button', { name: 'Submit' }));
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    it('works with form validation', () => {
+      renderWithProviders(
+        <Switch 
+          aria-invalid={true}
+          aria-describedby="error-message"
+        />
+      );
+      
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toHaveAttribute('aria-invalid', 'true');
+      expect(switchElement).toHaveAttribute('aria-describedby', 'error-message');
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing onCheckedChange gracefully', () => {
+      renderWithProviders(<Switch checked={true} />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toBeChecked();
+    });
+
+    it('handles invalid props gracefully', () => {
+      // @ts-expect-error Testing invalid prop
+      renderWithProviders(<Switch invalidProp="test" />);
+      const switchElement = screen.getByRole('switch');
+      expect(switchElement).toBeInTheDocument();
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with multiple switches', () => {
+      renderWithProviders(
+        <div>
+          <Switch id="switch1" />
+          <Switch id="switch2" />
+          <Switch id="switch3" />
+        </div>
+      );
+      
+      expect(screen.getAllByRole('switch')).toHaveLength(3);
+    });
+
+    it('works with switch groups', () => {
+      renderWithProviders(
+        <fieldset>
+          <legend>Notification preferences</legend>
+          <Switch id="email" />
+          <label htmlFor="email">Email notifications</label>
+          <Switch id="sms" />
+          <label htmlFor="sms">SMS notifications</label>
+        </fieldset>
+      );
+      
+      const switches = screen.getAllByRole('switch');
+      expect(switches).toHaveLength(2);
+      expect(switches[0]).toHaveAttribute('id', 'email');
+      expect(switches[1]).toHaveAttribute('id', 'sms');
+    });
+
+    it('works with controlled state management', async () => {
+      const TestComponent = () => {
+        const [checked, setChecked] = React.useState(false);
+        return (
+          <div>
+            <Switch 
+              checked={checked} 
+              onCheckedChange={setChecked}
+            />
+            <span data-testid="status">{checked ? 'on' : 'off'}</span>
+          </div>
+        );
+      };
+      
+      const user = userEvent.setup();
+      renderWithProviders(<TestComponent />);
+      
+      const switchElement = screen.getByRole('switch');
+      const status = screen.getByTestId('status');
+      
+      expect(status).toHaveTextContent('off');
+      
+      await user.click(switchElement);
+      expect(status).toHaveTextContent('on');
+    });
+
+    it('works with external state management', async () => {
+      const externalState = { checked: false };
+      const handleChange = vi.fn((checked) => {
+        externalState.checked = checked;
+      });
+      
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Switch 
+          checked={externalState.checked} 
+          onCheckedChange={handleChange}
+        />
+      );
+      
+      const switchElement = screen.getByRole('switch');
+      await user.click(switchElement);
+      
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('Performance', () => {
+    it('renders efficiently with many switches', () => {
+      const switches = Array.from({ length: 100 }, (_, i) => (
+        <Switch key={i} id={`switch-${i}`} />
+      ));
+      
+      const startTime = performance.now();
+      renderWithProviders(<div>{switches}</div>);
+      const endTime = performance.now();
+      
+      expect(screen.getAllByRole('switch')).toHaveLength(100);
+      expect(endTime - startTime).toBeLessThan(1000); // Should render in under 1 second
+    });
+  });
+});

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,140 @@
+/**
+ * @file Switch Component
+ * @package @jmruthers/pace-core
+ * @module Components/Switch
+ * @since 0.5.67
+ * 
+ * A toggle switch component built on Radix UI primitives.
+ * Provides an accessible, keyboard-navigable switch for boolean states.
+ * 
+ * Features:
+ * - WCAG 2.1 AA compliant
+ * - Keyboard navigation (Space/Enter)
+ * - Focus visible indicators
+ * - Disabled state support
+ * - Smooth animations
+ * - Tailwind v4 compatible
+ * - Theme-aware colors
+ * 
+ * @example
+ * ```tsx
+ * import { Switch } from '@jmruthers/pace-core';
+ * 
+ * function Example() {
+ *   const [checked, setChecked] = React.useState(false);
+ *   
+ *   return (
+ *     <div className="flex items-center gap-2">
+ *       <Switch 
+ *         checked={checked} 
+ *         onCheckedChange={setChecked}
+ *         id="notifications"
+ *       />
+ *       <label htmlFor="notifications">
+ *         Enable notifications
+ *       </label>
+ *     </div>
+ *   );
+ * }
+ * ```
+ * 
+ * @example With Form
+ * ```tsx
+ * import { Switch, Label } from '@jmruthers/pace-core';
+ * 
+ * function FormExample() {
+ *   return (
+ *     <div className="flex items-center gap-2">
+ *       <Switch id="terms" />
+ *       <Label htmlFor="terms">
+ *         I agree to the terms and conditions
+ *       </Label>
+ *     </div>
+ *   );
+ * }
+ * ```
+ * 
+ * @example Disabled State
+ * ```tsx
+ * <Switch disabled checked />
+ * ```
+ * 
+ * @accessibility
+ * - Uses Radix UI's accessible switch primitive
+ * - Proper keyboard navigation (Space to toggle)
+ * - Screen reader announcements for state changes
+ * - Focus visible styles for keyboard users
+ * - ARIA attributes handled automatically
+ */
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../../utils/cn";
+
+/**
+ * Switch component props
+ * Extends all props from Radix UI Switch.Root
+ */
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+  /**
+   * Additional CSS classes to apply to the switch
+   */
+  className?: string;
+}
+
+/**
+ * Switch component
+ * 
+ * A toggle switch for boolean states. Built on Radix UI for accessibility.
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * <Switch checked={isEnabled} onCheckedChange={setIsEnabled} />
+ * ```
+ */
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  SwitchProps
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(
+      // Base styles
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
+      // Border
+      "border-2 border-transparent",
+      // Transitions
+      "transition-colors",
+      // Focus styles
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-600",
+      "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      // Disabled state
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      // State-based colors (using theme variables)
+      "data-[state=checked]:bg-main-600",
+      "data-[state=unchecked]:bg-sec-200",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        // Base styles
+        "pointer-events-none block h-5 w-5 rounded-full",
+        // Background and shadow
+        "bg-background shadow-lg ring-0",
+        // Transition
+        "transition-transform",
+        // State-based position
+        "data-[state=checked]:translate-x-5",
+        "data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitive.Root>
+));
+
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

package/src/components/Switch/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @file Switch Component Exports
+ * @package @jmruthers/pace-core
+ * @module Components/Switch
+ * @since 0.5.67
+ */
+
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';

package/src/components/index.ts

@@ -50,6 +50,8 @@ export { Alert, AlertTitle, AlertDescription } from './Alert';
 export { Avatar, AvatarImage, AvatarFallback } from './Avatar';
 
 export { Checkbox } from './Checkbox';
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';
 export { Progress } from './Progress';
 
 // Table components

package/src/index.ts

@@ -62,6 +62,8 @@ export { Alert, AlertTitle, AlertDescription } from './components/Alert/Alert';
 export { Avatar, AvatarImage, AvatarFallback } from './components/Avatar/Avatar';
 
 export { Checkbox } from './components/Checkbox/Checkbox';
+export { Switch } from './components/Switch/Switch';
+export type { SwitchProps } from './components/Switch/Switch';
 export { Progress } from './components/Progress/Progress';
 
 // ADVANCED UI COMPONENTS