@jmruthers/pace-core 0.2.4

package/src/components/Input/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @file Input component exports
+ * @package @jmruthers/pace-core
+ * @module Input
+ * @since 0.1.0
+ */
+
+export { Input, InputGroup } from './Input';
+export type { InputProps, InputGroupProps } from './Input';

package/src/components/Label/Label.tsx

@@ -0,0 +1,186 @@
+/**
+ * @file Label Component
+ * @package @jmruthers/pace-core
+ * @module Components/Label
+ * @since 0.1.0
+ *
+ * An accessible label component built on top of Radix UI primitives.
+ * Provides form labels with helper text, error states, and required indicators.
+ *
+ * Features:
+ * - Proper label association with form controls
+ * - Required field indicators
+ * - Helper text support
+ * - Error state display
+ * - Customizable styling
+ * - Screen reader friendly
+ * - Keyboard accessible
+ *
+ * @example
+ * ```tsx
+ * // Basic label
+ * <Label htmlFor="email">Email Address</Label>
+ * <Input id="email" type="email" />
+ * 
+ * // Label with required indicator
+ * <Label htmlFor="name" required>
+ *   Full Name
+ * </Label>
+ * <Input id="name" />
+ * 
+ * // Label with helper text
+ * <Label 
+ *   htmlFor="password" 
+ *   required 
+ *   helperText="Must be at least 8 characters"
+ * >
+ *   Password
+ * </Label>
+ * <Input id="password" type="password" />
+ * 
+ * // Label with error state
+ * <Label 
+ *   htmlFor="email" 
+ *   error="Please enter a valid email address"
+ * >
+ *   Email Address
+ * </Label>
+ * <Input id="email" type="email" />
+ * 
+ * // Custom required indicator
+ * <Label 
+ *   htmlFor="terms" 
+ *   required 
+ *   requiredIndicator="(required)"
+ * >
+ *   Accept Terms
+ * </Label>
+ * <Checkbox id="terms" />
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Proper label association with htmlFor
+ * - Screen reader announcements for errors
+ * - Required field indicators for screen readers
+ * - Error messages with role="alert"
+ * - High contrast support
+ *
+ * @dependencies
+ * - @radix-ui/react-label - Core label functionality
+ * - class-variance-authority - Variant styling
+ * - React 18+ - Hooks and refs
+ * - Tailwind CSS - Styling
+ */
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../../utils/cn';
+
+const getLabelClasses = (): string => {
+  return 'font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70';
+};
+
+/**
+ * Props for the Label component
+ */
+export interface LabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+  /** Whether the field is required */
+  required?: boolean;
+  /** Custom required indicator (default: '*') */
+  requiredIndicator?: React.ReactNode;
+  /** Whether to hide the required indicator visually */
+  hideRequiredIndicator?: boolean;
+  /** Helper text to display below the label */
+  helperText?: string;
+  /** CSS classes for helper text styling */
+  helperTextClassName?: string;
+  /** Error message to display */
+  error?: string;
+  /** CSS classes for error message styling */
+  errorClassName?: string;
+}
+
+/**
+ * Label component
+ * An accessible label with helper text and error state support
+ * 
+ * @param props - Label configuration and styling
+ * @param ref - Forwarded ref to the label element
+ * @returns JSX.Element - The rendered label with optional helper text and errors
+ * 
+ * @example
+ * ```tsx
+ * <Label htmlFor="email" required helperText="We'll never share your email">
+ *   Email Address
+ * </Label>
+ * ```
+ */
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(({
+  className,
+  required = false,
+  requiredIndicator,
+  hideRequiredIndicator = false,
+  helperText,
+  helperTextClassName,
+  error,
+  errorClassName,
+  children,
+  htmlFor,
+  ...props
+}, ref) => {
+  const hasError = !!error;
+  const showHelperText = helperText && !hasError;
+  
+  return (
+    <>
+      <LabelPrimitive.Root
+        ref={ref}
+        className={cn(
+          getLabelClasses(),
+          hasError && 'text-destructive',
+          className
+        )}
+        htmlFor={htmlFor}
+        {...props}
+      >
+        {children}
+        {required && (
+          <label
+            aria-label="required"
+            className={cn(
+              'text-destructive ml-1',
+              hideRequiredIndicator && 'sr-only'
+            )}
+          >
+            {requiredIndicator || '*'}
+          </label>
+        )}
+      </LabelPrimitive.Root>
+      
+      {showHelperText && (
+        <p className={cn('text-muted-foreground', helperTextClassName)}>
+          {helperText}
+        </p>
+      )}
+      
+      {hasError && (
+        <p
+          role="alert"
+          aria-live="polite"
+          className={cn('text-destructive', errorClassName)}
+        >
+          {error}
+        </p>
+      )}
+    </>
+  );
+});
+
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/Label/__tests__/Label.accessibility.test.tsx

@@ -0,0 +1,239 @@
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { Label } from '../Label';
+import { renderWithProviders } from '../../../__tests__/shared';
+
+describe('Label Accessibility', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders with label role for accessibility', () => {
+      renderWithProviders(<Label>Test Label</Label>);
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+  });
+
+  it('supports htmlFor attribute to associate with form controls', () => {
+      renderWithProviders(<Label htmlFor="test-input">Test Label</Label>);
+    const label = screen.getByText('Test Label');
+    expect(label).toHaveAttribute('for', 'test-input');
+  });
+describe('Label Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('Label component error');
+    };
+
+      renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: Label component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+      renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'Label interaction error',
+      'click'
+    );
+
+      renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('Label prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+describe('Label Edge Cases', () => {
+  describe('Extreme Data Values', () => {
+    it('should handle very long strings', () => {
+      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
+      
+      const { container } = renderWithProviders(<Label>{longString}</Label>);
+      expect(container.querySelector('label')).toBeInTheDocument();
+    });
+
+    it('should handle empty and null values', () => {
+      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
+      
+      emptyValues.forEach(value => {
+        const { container, unmount } = renderWithProviders(<Label>{value as any}</Label>);
+        expect(container.querySelector('label')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle special characters', () => {
+      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
+      
+      const { container } = renderWithProviders(<Label>{specialChars}</Label>);
+      expect(container.querySelector('label')).toBeInTheDocument();
+    });
+
+    it('should handle unicode characters', () => {
+      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
+      
+      const { container } = renderWithProviders(<Label>{unicodeChars}</Label>);
+      expect(container.querySelector('label')).toBeInTheDocument();
+    });
+  });
+
+  describe('Extreme Numbers', () => {
+    it('should handle very large numbers', () => {
+      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
+      
+      largeNumbers.forEach(number => {
+        const { container, unmount } = renderWithProviders(<Label>{number}</Label>);
+        expect(container.querySelector('label')).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle very small numbers', () => {
+      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
+      
+      smallNumbers.forEach(number => {
+        const { container, unmount } = renderWithProviders(<Label>{number}</Label>);
+        expect(container.querySelector('label')).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
+  describe('Rapid State Changes', () => {
+    it('should handle rapid prop changes', async () => {
+      const stateProps = [
+        { children: 'State 1' },
+        { children: 'State 2' },
+        { children: 'State 3' },
+        { children: 'State 4' },
+        { children: 'State 5' },
+      ];
+
+      await edgeCaseUtils.testRapidStateChanges(Label, stateProps);
+    });
+
+    it('should handle rapid user interactions', async () => {
+      const user = userEvent.setup();
+      const { container } = renderWithProviders(<Label />);
+      
+      const label = container.querySelector('label');
+      
+      // Rapidly interact with the component
+      for (let i = 0; i < 10; i++) {
+        await user.click(label!);
+        await new Promise(resolve => setTimeout(resolve, 0));
+      }
+      
+      expect(label).toBeInTheDocument();
+    });
+  });
+
+  describe('Memory Management', () => {
+    it('should not leak memory with repeated renders', () => {
+      edgeCaseUtils.testMemoryLeaks(Label, { children: 'Memory test' });
+    });
+  });
+
+  describe('Boundary Conditions', () => {
+    it('should handle boundary prop values', () => {
+      const boundaryProps = [
+        { children: '' },
+        { children: 0 },
+        { children: false },
+        { children: [] },{ className: '' },
+        { 'data-testid': '' },
+      ];
+
+      edgeCaseUtils.testBoundaryConditions(Label, boundaryProps);
+    });
+  });
+
+  describe('Complex Data Structures', () => {
+    it('should handle deeply nested objects', () => {
+      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
+      
+      const { container } = renderWithProviders(<Label>{JSON.stringify(deepObject)}</Label>);
+      expect(container.querySelector('label')).toBeInTheDocument();
+    });
+
+    it('should handle large arrays', () => {
+      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
+      
+      const { container } = renderWithProviders(<Label>{largeArray.length} items</Label>);
+      expect(container.querySelector('label')).toBeInTheDocument();
+    });
+  });
+});
+});