@jmruthers/pace-core 0.5.193 → 0.6.2

package/src/components/Input/Input.tsx

@@ -55,6 +55,10 @@ import { cn } from '../../utils/core/cn';
 // BASE INPUT COMPONENT
 // ============================================================================
 
+/**
+ * Props for the Input component.
+ * Extends standard input HTML attributes.
+ */
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /**
@@ -101,36 +105,34 @@ export interface InputProps
  * />
  * ```
  */
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, variant = 'default', size = 'md', error, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          // Base styles
-          'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          
-          // Variant styles
-          {
-            'border-input': variant === 'default' && !error,
-            'border-destructive focus-visible:ring-destructive': variant === 'destructive' || error,
-          },
-          
-          // Size styles
-          {
-            'h-8 px-2 py-1 text-xs': size === 'sm',
-            'h-9 px-3 py-2 text-sm': size === 'md',
-            'h-10 px-4 py-3 text-base': size === 'lg',
-          },
-          
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+function Input({ className, variant = 'default', size = 'md', error, type, ref, ...props }: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
+  return (
+    <input
+      type={type}
+      className={cn(
+        // Base styles
+        'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        
+        // Variant styles
+        {
+          'border-input': variant === 'default' && !error,
+          'border-destructive focus-visible:ring-destructive': variant === 'destructive' || error,
+        },
+        
+        // Size styles
+        {
+          'h-8 px-2 py-1 text-xs': size === 'sm',
+          'h-9 px-3 py-2 text-sm': size === 'md',
+          'h-10 px-4 py-3 text-base': size === 'lg',
+        },
+        
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
 
 Input.displayName = 'Input';
 
@@ -138,7 +140,7 @@ Input.displayName = 'Input';
 // INPUT GROUP COMPONENT
 // ============================================================================
 
-export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface InputGroupProps extends React.HTMLAttributes<HTMLFieldSetElement> {
   /** Child elements to be rendered in the group */
   children: React.ReactNode;
   /** Layout orientation of the input group */
@@ -167,7 +169,7 @@ export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  * </InputGroup>
  * ```
  */
-export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+export const InputGroup = React.forwardRef<HTMLFieldSetElement, InputGroupProps>(
   ({ className, children, orientation = 'vertical', spacing = 'md', ...props }, ref) => {
     const spacingClasses = {
       sm: orientation === 'horizontal' ? 'space-x-2' : 'space-y-2',
@@ -176,7 +178,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
     };
 
     return (
-      <div
+      <fieldset
         ref={ref}
         className={cn(
           'flex',
@@ -187,7 +189,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
         {...props}
       >
         {children}
-      </div>
+      </fieldset>
     );
   }
 );

package/src/components/Label/Label.tsx

@@ -68,7 +68,7 @@
  *
  * @dependencies
  * - @radix-ui/react-label - Core label functionality
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling
  */
 

package/src/components/LoadingSpinner/LoadingSpinner.test.tsx

@@ -382,10 +382,10 @@ describe('LoadingSpinner Component', () => {
 
     it('works within a card or container', () => {
       renderWithProviders(
-        <div className="card">
+        <section className="card">
           <h2>Loading Content</h2>
           <LoadingSpinner size="lg" />
-        </div>
+        </section>
       );
       
       const spinner = screen.getByRole('status');
@@ -397,11 +397,11 @@ describe('LoadingSpinner Component', () => {
 
     it('works with multiple instances', () => {
       renderWithProviders(
-        <div>
+        <>
           <LoadingSpinner size="sm" />
           <LoadingSpinner size="md" />
           <LoadingSpinner size="lg" />
-        </div>
+        </>
       );
       
       const spinners = screen.getAllByRole('status');

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -52,7 +52,7 @@
  * - Efficient rendering
  *
  * @dependencies
- * - React 18+ - Component framework
+ * - React 19+ - Component framework
  * - Tailwind CSS - Styling and animations
  */
 

package/src/components/LoginForm/LoginForm.test.tsx

@@ -105,13 +105,13 @@ vi.mock('../../utils/core/cn', () => ({
 }));
 
 describe('LoginForm Component', () => {
-  const defaultProps = {
+  const baseProps = {
     onSignIn: vi.fn(),
   };
 
     describe('Rendering', () => {
     it('renders with default props', () => {
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
       expect(screen.getByTestId('card')).toBeInTheDocument();
@@ -121,7 +121,7 @@ describe('LoginForm Component', () => {
     it('renders with custom title and subtitle', () => {
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           title="Welcome Back" 
           subtitle="Please enter your credentials"
         />
@@ -134,7 +134,7 @@ describe('LoginForm Component', () => {
     it('renders with app name in title', () => {
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           appName="My App"
         />
       );
@@ -145,7 +145,7 @@ describe('LoginForm Component', () => {
     it('renders with custom className', () => {
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           className="custom-login-form"
         />
       );
@@ -154,7 +154,7 @@ describe('LoginForm Component', () => {
     });
 
     it('renders form inputs with correct attributes', () => {
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -169,13 +169,13 @@ describe('LoginForm Component', () => {
     });
 
     it('renders submit button with correct text', () => {
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       expect(screen.getByRole('button', { name: 'Sign In' })).toBeInTheDocument();
     });
 
     it('renders sign-up link when showSignUp is true without onSignUp', () => {
-      renderWithProviders(<LoginForm {...defaultProps} showSignUp={true} />);
+      renderWithProviders(<LoginForm {...baseProps} showSignUp={true} />);
       
       expect(screen.getByText("Don't have an account?")).toBeInTheDocument();
       expect(screen.getByRole('link', { name: 'Sign up' })).toBeInTheDocument();
@@ -186,7 +186,7 @@ describe('LoginForm Component', () => {
       const onSignUp = vi.fn();
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           showSignUp={true} 
           onSignUp={onSignUp} 
         />
@@ -199,7 +199,7 @@ describe('LoginForm Component', () => {
 
   describe('Form Validation', () => {
     it('disables submit button when form is empty', () => {
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const submitButton = screen.getByRole('button', { name: 'Sign In' });
       expect(submitButton).toBeDisabled();
@@ -207,7 +207,7 @@ describe('LoginForm Component', () => {
 
     it('enables submit button when both fields have values', async () => {
       const user = userEvent.setup();
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -224,7 +224,7 @@ describe('LoginForm Component', () => {
 
     it('disables submit button when only email is filled', async () => {
       const user = userEvent.setup();
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const emailInput = screen.getByLabelText('Email');
       const submitButton = screen.getByRole('button', { name: 'Sign In' });
@@ -235,7 +235,7 @@ describe('LoginForm Component', () => {
 
     it('disables submit button when only password is filled', async () => {
       const user = userEvent.setup();
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const passwordInput = screen.getByLabelText('Password');
       const submitButton = screen.getByRole('button', { name: 'Sign In' });
@@ -248,7 +248,7 @@ describe('LoginForm Component', () => {
   describe('User Interactions', () => {
     it('updates email input value when typed', async () => {
       const user = userEvent.setup();
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const emailInput = screen.getByLabelText('Email');
       await user.type(emailInput, 'test@example.com');
@@ -258,7 +258,7 @@ describe('LoginForm Component', () => {
 
     it('updates password input value when typed', async () => {
       const user = userEvent.setup();
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const passwordInput = screen.getByLabelText('Password');
       await user.type(passwordInput, 'password123');
@@ -269,7 +269,7 @@ describe('LoginForm Component', () => {
     it('calls onSignIn with form data when submitted', async () => {
       const user = userEvent.setup();
       const onSignIn = vi.fn().mockResolvedValue(undefined);
-      renderWithProviders(<LoginForm {...defaultProps} onSignIn={onSignIn} />);
+      renderWithProviders(<LoginForm {...baseProps} onSignIn={onSignIn} />);
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -290,7 +290,7 @@ describe('LoginForm Component', () => {
       const onSignUp = vi.fn();
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           showSignUp={true} 
           onSignUp={onSignUp} 
         />
@@ -305,7 +305,7 @@ describe('LoginForm Component', () => {
     it('prevents form submission when form is invalid', async () => {
       const user = userEvent.setup();
       const onSignIn = vi.fn();
-      renderWithProviders(<LoginForm {...defaultProps} onSignIn={onSignIn} />);
+      renderWithProviders(<LoginForm {...baseProps} onSignIn={onSignIn} />);
       
       const submitButton = screen.getByRole('button', { name: 'Sign In' });
       await user.click(submitButton);
@@ -318,7 +318,7 @@ describe('LoginForm Component', () => {
       const onSignIn = vi.fn();
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn} 
           isLoading={true}
         />
@@ -338,13 +338,13 @@ describe('LoginForm Component', () => {
 
   describe('Loading States', () => {
     it('shows loading text on submit button when loading', () => {
-      renderWithProviders(<LoginForm {...defaultProps} isLoading={true} />);
+      renderWithProviders(<LoginForm {...baseProps} isLoading={true} />);
       
       expect(screen.getByRole('button', { name: 'Signing in...' })).toBeInTheDocument();
     });
 
     it('disables form inputs when loading', () => {
-      renderWithProviders(<LoginForm {...defaultProps} isLoading={true} />);
+      renderWithProviders(<LoginForm {...baseProps} isLoading={true} />);
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -354,7 +354,7 @@ describe('LoginForm Component', () => {
     });
 
     it('disables submit button when loading', () => {
-      renderWithProviders(<LoginForm {...defaultProps} isLoading={true} />);
+      renderWithProviders(<LoginForm {...baseProps} isLoading={true} />);
       
       const submitButton = screen.getByRole('button', { name: 'Signing in...' });
       expect(submitButton).toBeDisabled();
@@ -363,7 +363,7 @@ describe('LoginForm Component', () => {
 
   describe('Error Handling', () => {
     it('displays error message when provided', () => {
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       // Simulate error state by triggering form submission with error
       const form = screen.getByTestId('login-form');
@@ -381,7 +381,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn} 
           onError={onError}
         />
@@ -406,7 +406,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn}
         />
       );
@@ -431,7 +431,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn} 
           onError={onError}
         />
@@ -459,7 +459,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn}
         />
       );
@@ -493,7 +493,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn} 
           onSuccess={onSuccess}
         />
@@ -518,7 +518,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn}
         />
       );
@@ -540,7 +540,7 @@ describe('LoginForm Component', () => {
 
   describe('Accessibility', () => {
     it('has proper form structure', () => {
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const form = screen.getByTestId('login-form');
       expect(form).toBeInTheDocument();
@@ -548,7 +548,7 @@ describe('LoginForm Component', () => {
     });
 
     it('has proper label associations', () => {
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -558,7 +558,7 @@ describe('LoginForm Component', () => {
     });
 
     it('has proper heading structure', () => {
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const title = screen.getByRole('heading', { level: 2 });
       expect(title).toBeInTheDocument();
@@ -571,7 +571,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn}
         />
       );
@@ -594,7 +594,7 @@ describe('LoginForm Component', () => {
 
     it('supports keyboard navigation', async () => {
       const user = userEvent.setup();
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -627,7 +627,7 @@ describe('LoginForm Component', () => {
   describe('Edge Cases', () => {
     it('handles empty string values', async () => {
       const user = userEvent.setup();
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -646,7 +646,7 @@ describe('LoginForm Component', () => {
       const longEmail = 'a'.repeat(100) + '@example.com';
       const longPassword = 'p'.repeat(100);
       
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -663,7 +663,7 @@ describe('LoginForm Component', () => {
       const specialEmail = 'test+tag@example.co.uk';
       const specialPassword = 'P@ssw0rd!@#$%^&*()';
       
-      renderWithProviders(<LoginForm {...defaultProps} />);
+      renderWithProviders(<LoginForm {...baseProps} />);
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -683,7 +683,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn}
         />
       );
@@ -732,12 +732,12 @@ describe('LoginForm Component', () => {
 
     it('handles prop changes efficiently', () => {
       const { rerender } = renderWithProviders(
-        <LoginForm {...defaultProps} appName="App 1" />
+        <LoginForm {...baseProps} appName="App 1" />
       );
       
       expect(screen.getByText('Sign in to App 1')).toBeInTheDocument();
       
-      rerender(<LoginForm {...defaultProps} appName="App 2" />);
+      rerender(<LoginForm {...baseProps} appName="App 2" />);
       
       expect(screen.getByText('Sign in to App 2')).toBeInTheDocument();
     });
@@ -751,7 +751,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn} 
           onSuccess={onSuccess}
         />
@@ -790,7 +790,7 @@ describe('LoginForm Component', () => {
       
       renderWithProviders(
         <LoginForm 
-          {...defaultProps} 
+          {...baseProps} 
           onSignIn={onSignIn} 
           onError={onError}
         />

package/src/components/LoginForm/LoginForm.tsx

@@ -89,7 +89,7 @@
  * - Minimal re-renders
  *
  * @dependencies
- * - React 18+ - Hooks and memo
+ * - React 19+ - Hooks and memo
  * - Button component
  * - Input component
  * - Label component
@@ -106,6 +106,10 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Alert, AlertDescription } from '../Alert/Alert';
 import { cn } from '../../utils/core/cn';
 
+/**
+ * Props for the LoginForm component.
+ * Configures login form behavior, validation, and callbacks.
+ */
 export interface LoginFormProps {
   /** Callback invoked when the form is submitted */
   onSignIn: (data: { email: string; password: string }) => Promise<void>;
@@ -167,14 +171,14 @@ export const LoginForm = React.memo<LoginFormProps>(({
     return formData.email.length > 0 && formData.password.length > 0;
   }, [formData.email, formData.password]);
 
-  // Memoized handlers
-  const handleEmailChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+  // React Compiler handles memoization automatically
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData(prev => ({ ...prev, email: e.target.value }));
-  }, []);
+  };
 
-  const handlePasswordChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData(prev => ({ ...prev, password: e.target.value }));
-  }, []);
+  };
 
   const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
@@ -190,9 +194,9 @@ export const LoginForm = React.memo<LoginFormProps>(({
     }
   }, [formData, isFormValid, isLoading, onSignIn, onSuccess, onError]);
 
-  const handleSignUpClick = useCallback(() => {
+  const handleSignUpClick = () => {
     onSignUp?.();
-  }, [onSignUp]);
+  };
 
   const displayTitle = useMemo(() => title || (appName ? `Sign in to ${appName}` : 'Sign In'), [title, appName]);
   const displaySubtitle = useMemo(() => subtitle || 'Enter your credentials to continue.', [subtitle]);