@jmruthers/pace-core 0.5.191 → 0.6.1

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

@@ -65,7 +65,7 @@ vi.mock('lucide-react', () => ({
 }));
 
 describe('InactivityWarningModal Component', () => {
-  const defaultProps = {
+  const baseProps = {
     isOpen: true,
     timeRemaining: 45,
     onStaySignedIn: vi.fn(),
@@ -74,20 +74,20 @@ describe('InactivityWarningModal Component', () => {
 
     describe('Rendering', () => {
     it('renders when isOpen is true', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByTestId('dialog')).toBeInTheDocument();
       expect(screen.getByTestId('inactivity-warning-modal')).toBeInTheDocument();
     });
 
     it('does not render when isOpen is false', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} isOpen={false} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} isOpen={false} />);
       
       expect(screen.queryByTestId('dialog')).not.toBeInTheDocument();
     });
 
     it('renders with default title and description', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       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();
@@ -95,7 +95,7 @@ describe('InactivityWarningModal Component', () => {
 
     it('renders with custom title and description', () => {
       const customProps = {
-        ...defaultProps,
+        ...baseProps,
         title: 'Custom Warning',
         description: 'Custom description text',
       };
@@ -107,58 +107,58 @@ describe('InactivityWarningModal Component', () => {
     });
 
     it('renders with custom className', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} className="custom-modal" />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} className="custom-modal" />);
       
       const modal = screen.getByTestId('inactivity-warning-modal');
       expect(modal).toHaveClass('custom-modal');
     });
 
     it('renders countdown timer with correct time format', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={125} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={125} />);
       
       expect(screen.getByText('02:05')).toBeInTheDocument();
     });
 
     it('renders countdown timer with single digit minutes', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={65} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={65} />);
       
       expect(screen.getByText('01:05')).toBeInTheDocument();
     });
 
     it('renders countdown timer with zero seconds', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={60} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={60} />);
       
       expect(screen.getByText('01:00')).toBeInTheDocument();
     });
 
     it('renders countdown timer with single digit seconds', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={5} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={5} />);
       
       expect(screen.getByText('00:05')).toBeInTheDocument();
     });
 
     it('renders countdown timer with zero time', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={0} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={0} />);
       
       expect(screen.getByText('00:00')).toBeInTheDocument();
     });
 
     it('renders action buttons with correct text', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByRole('button', { name: 'Stay Signed In' })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Sign Out Now' })).toBeInTheDocument();
     });
 
     it('renders icons correctly', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByTestId('alert-triangle-icon')).toBeInTheDocument();
       expect(screen.getByTestId('clock-icon')).toBeInTheDocument();
     });
 
     it('renders additional security information', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByText("For security reasons, you'll be automatically signed out after 30 minutes of inactivity.")).toBeInTheDocument();
     });
@@ -178,7 +178,7 @@ describe('InactivityWarningModal Component', () => {
 
       testCases.forEach(({ input, expected }) => {
         const { unmount } = renderWithProviders(
-          <InactivityWarningModal {...defaultProps} timeRemaining={input} />
+          <InactivityWarningModal {...baseProps} timeRemaining={input} />
         );
         
         expect(screen.getByText(expected)).toBeInTheDocument();
@@ -188,12 +188,12 @@ describe('InactivityWarningModal Component', () => {
 
     it('updates display time when timeRemaining prop changes', () => {
       const { rerender } = renderWithProviders(
-        <InactivityWarningModal {...defaultProps} timeRemaining={60} />
+        <InactivityWarningModal {...baseProps} timeRemaining={60} />
       );
       
       expect(screen.getByText('01:00')).toBeInTheDocument();
       
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={30} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={30} />);
       
       expect(screen.getByText('00:30')).toBeInTheDocument();
     });
@@ -205,7 +205,7 @@ describe('InactivityWarningModal Component', () => {
       const onStaySignedIn = vi.fn();
       
       renderWithProviders(
-        <InactivityWarningModal {...defaultProps} onStaySignedIn={onStaySignedIn} />
+        <InactivityWarningModal {...baseProps} onStaySignedIn={onStaySignedIn} />
       );
       
       await user.click(screen.getByRole('button', { name: 'Stay Signed In' }));
@@ -218,7 +218,7 @@ describe('InactivityWarningModal Component', () => {
       const onSignOutNow = vi.fn();
       
       renderWithProviders(
-        <InactivityWarningModal {...defaultProps} onSignOutNow={onSignOutNow} />
+        <InactivityWarningModal {...baseProps} onSignOutNow={onSignOutNow} />
       );
       
       await user.click(screen.getByRole('button', { name: 'Sign Out Now' }));
@@ -231,7 +231,7 @@ describe('InactivityWarningModal Component', () => {
       const onStaySignedIn = vi.fn();
       
       renderWithProviders(
-        <InactivityWarningModal {...defaultProps} onStaySignedIn={onStaySignedIn} />
+        <InactivityWarningModal {...baseProps} onStaySignedIn={onStaySignedIn} />
       );
       
       // Simulate dialog close (this would normally happen via the Dialog component)
@@ -244,7 +244,7 @@ describe('InactivityWarningModal Component', () => {
 
   describe('Button Styling and Props', () => {
     it('applies correct styling to Stay Signed In button', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const stayButton = screen.getByRole('button', { name: 'Stay Signed In' });
       expect(stayButton).toHaveClass('bg-main-600', 'hover:bg-main-700', 'text-main-50');
@@ -252,7 +252,7 @@ describe('InactivityWarningModal Component', () => {
     });
 
     it('applies correct styling to Sign Out Now button', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const signOutButton = screen.getByRole('button', { name: 'Sign Out Now' });
       expect(signOutButton).toHaveAttribute('data-variant', 'outline');
@@ -263,7 +263,7 @@ describe('InactivityWarningModal Component', () => {
 
   describe('Accessibility', () => {
     it('has proper ARIA attributes', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const dialog = screen.getByTestId('dialog');
       expect(dialog).toHaveAttribute('role', 'dialog');
@@ -277,14 +277,14 @@ describe('InactivityWarningModal Component', () => {
     });
 
     it('has accessible button labels', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByRole('button', { name: 'Stay Signed In' })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Sign Out Now' })).toBeInTheDocument();
     });
 
     it('has proper heading structure', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const title = screen.getByRole('heading', { level: 2 });
       expect(title).toBeInTheDocument();
@@ -292,7 +292,7 @@ describe('InactivityWarningModal Component', () => {
     });
 
     it('provides descriptive text for screen readers', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByText('Time remaining before automatic logout')).toBeInTheDocument();
       expect(screen.getByText("For security reasons, you'll be automatically signed out after 30 minutes of inactivity.")).toBeInTheDocument();
@@ -301,7 +301,7 @@ describe('InactivityWarningModal Component', () => {
 
   describe('Dialog Configuration', () => {
     it('configures dialog with correct props', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const modal = screen.getByTestId('inactivity-warning-modal');
       expect(modal).toHaveClass('sm:max-w-md');
@@ -311,7 +311,7 @@ describe('InactivityWarningModal Component', () => {
 
     it('applies custom className to dialog content', () => {
       renderWithProviders(
-        <InactivityWarningModal {...defaultProps} className="custom-dialog-class" />
+        <InactivityWarningModal {...baseProps} className="custom-dialog-class" />
       );
       
       const modal = screen.getByTestId('inactivity-warning-modal');
@@ -321,14 +321,14 @@ describe('InactivityWarningModal Component', () => {
 
   describe('Edge Cases', () => {
     it('handles negative time values gracefully', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={-5} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={-5} />);
       
       // Should still render, but with negative time formatted as the component actually does it
       expect(screen.getByText('-1:-5')).toBeInTheDocument();
     });
 
     it('handles very large time values', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={999999} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={999999} />);
       
       expect(screen.getByText('16666:39')).toBeInTheDocument();
     });
@@ -353,7 +353,7 @@ describe('InactivityWarningModal Component', () => {
     it('handles empty string title and description', () => {
       renderWithProviders(
         <InactivityWarningModal 
-          {...defaultProps} 
+          {...baseProps} 
           title="" 
           description="" 
         />
@@ -370,19 +370,19 @@ describe('InactivityWarningModal Component', () => {
   describe('Integration', () => {
     it('works with rapid prop changes', () => {
       const { rerender } = renderWithProviders(
-        <InactivityWarningModal {...defaultProps} timeRemaining={60} />
+        <InactivityWarningModal {...baseProps} timeRemaining={60} />
       );
       
       expect(screen.getByText('01:00')).toBeInTheDocument();
       
       // Rapid changes
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={30} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={30} />);
       expect(screen.getByText('00:30')).toBeInTheDocument();
       
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={15} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={15} />);
       expect(screen.getByText('00:15')).toBeInTheDocument();
       
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={0} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={0} />);
       expect(screen.getByText('00:00')).toBeInTheDocument();
     });
 
@@ -393,7 +393,7 @@ describe('InactivityWarningModal Component', () => {
       
       renderWithProviders(
         <InactivityWarningModal 
-          {...defaultProps} 
+          {...baseProps} 
           onStaySignedIn={onStaySignedIn}
           onSignOutNow={onSignOutNow}
         />
@@ -413,17 +413,17 @@ describe('InactivityWarningModal Component', () => {
 
     it('maintains state consistency during re-renders', () => {
       const { rerender } = renderWithProviders(
-        <InactivityWarningModal {...defaultProps} timeRemaining={45} />
+        <InactivityWarningModal {...baseProps} timeRemaining={45} />
       );
       
       expect(screen.getByText('00:45')).toBeInTheDocument();
       
       // Re-render with same props
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={45} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={45} />);
       expect(screen.getByText('00:45')).toBeInTheDocument();
       
       // Re-render with different props
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={30} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={30} />);
       expect(screen.getByText('00:30')).toBeInTheDocument();
     });
   });
@@ -447,7 +447,7 @@ describe('InactivityWarningModal Component', () => {
 
     it('handles invalid timeRemaining values', () => {
       const invalidTimeProps = {
-        ...defaultProps,
+        ...baseProps,
         timeRemaining: NaN,
       };
       

package/src/components/InactivityWarningModal/InactivityWarningModal.tsx

@@ -41,7 +41,7 @@
  * - Optimized timer management
  *
  * @dependencies
- * - React 18+ - Hooks and effects
+ * - React 19+ - Hooks and effects
  * - Dialog components - Modal functionality
  * - Tailwind CSS v4 - Styling
  */

package/src/components/Input/Input.tsx

@@ -101,36 +101,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';
 

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.tsx

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