@jmruthers/pace-core 0.5.193 → 0.6.1

package/src/components/PasswordChange/PasswordChangeForm.test.tsx

@@ -55,13 +55,13 @@ vi.mock('../Label', () => ({
 
 describe('PasswordChangeForm', () => {
   const mockOnSubmit = vi.fn();
-  const defaultProps: PasswordChangeFormProps = {
+  const baseProps: PasswordChangeFormProps = {
     onSubmit: mockOnSubmit
   };
 
     describe('Rendering', () => {
     it('renders password change form with all elements', () => {
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       expect(screen.getByLabelText('New Password')).toBeInTheDocument();
       expect(screen.getByLabelText('Confirm Password')).toBeInTheDocument();
@@ -70,14 +70,14 @@ describe('PasswordChangeForm', () => {
 
     it('renders with custom className', () => {
       const customClass = 'custom-password-change-form';
-      const { container } = render(<PasswordChangeForm {...defaultProps} className={customClass} />);
+      const { container } = render(<PasswordChangeForm {...baseProps} className={customClass} />);
 
       const form = container.querySelector('form');
       expect(form).toHaveClass(customClass);
     });
 
     it('has proper form structure and accessibility', () => {
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       expect(newPasswordInput).toHaveAttribute('type', 'password');
@@ -97,7 +97,7 @@ describe('PasswordChangeForm', () => {
   describe('Form Interaction', () => {
     it('updates new password input value when user types', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       await user.type(newPasswordInput, 'newpassword123');
@@ -107,7 +107,7 @@ describe('PasswordChangeForm', () => {
 
     it('updates confirm password input value when user types', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
       await user.type(confirmPasswordInput, 'newpassword123');
@@ -117,7 +117,7 @@ describe('PasswordChangeForm', () => {
 
     it('enables submit button when both passwords are provided', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -133,7 +133,7 @@ describe('PasswordChangeForm', () => {
 
     it('disables submit button when new password is empty', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
       const submitButton = screen.getByRole('button', { name: 'Change Password' });
@@ -145,7 +145,7 @@ describe('PasswordChangeForm', () => {
 
     it('disables submit button when confirm password is empty', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const submitButton = screen.getByRole('button', { name: 'Change Password' });
@@ -159,7 +159,7 @@ describe('PasswordChangeForm', () => {
   describe('Form Validation', () => {
     it('shows error when password is too short', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -175,7 +175,7 @@ describe('PasswordChangeForm', () => {
 
     it('shows error when passwords do not match', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -191,7 +191,7 @@ describe('PasswordChangeForm', () => {
 
     it('validates password length before checking match', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -207,7 +207,7 @@ describe('PasswordChangeForm', () => {
 
     it('clears error when form is resubmitted with valid data', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -236,7 +236,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -254,7 +254,7 @@ describe('PasswordChangeForm', () => {
 
     it('prevents form submission when validation fails', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -273,7 +273,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -291,7 +291,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -309,7 +309,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -329,7 +329,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({ error: { message: 'Test error' } });
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -352,7 +352,7 @@ describe('PasswordChangeForm', () => {
       const errorMessage = 'Password change failed';
       mockOnSubmit.mockResolvedValue({ error: { message: errorMessage } });
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -373,7 +373,7 @@ describe('PasswordChangeForm', () => {
       const errorMessage = 'Network error';
       mockOnSubmit.mockRejectedValue(new Error(errorMessage));
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -393,7 +393,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockRejectedValue('String error');
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -412,7 +412,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({ error: { code: 'INVALID_PASSWORD' } });
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -433,7 +433,7 @@ describe('PasswordChangeForm', () => {
         .mockResolvedValueOnce({ error: { message: 'First error' } })
         .mockResolvedValueOnce({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -457,7 +457,7 @@ describe('PasswordChangeForm', () => {
 
   describe('Accessibility', () => {
     it('has proper form labels and associations', () => {
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       expect(newPasswordInput).toHaveAttribute('id', 'new-password');
@@ -472,7 +472,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({ error: { message: 'Test error' } });
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -492,7 +492,7 @@ describe('PasswordChangeForm', () => {
       const user = userEvent.setup();
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -510,7 +510,7 @@ describe('PasswordChangeForm', () => {
 
   describe('Edge Cases', () => {
     it('handles empty password values', () => {
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const submitButton = screen.getByRole('button', { name: 'Change Password' });
 
@@ -519,7 +519,7 @@ describe('PasswordChangeForm', () => {
 
     it('handles whitespace-only passwords', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -538,7 +538,7 @@ describe('PasswordChangeForm', () => {
       const longPassword = 'a'.repeat(1000);
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -559,7 +559,7 @@ describe('PasswordChangeForm', () => {
       const specialPassword = 'P@ssw0rd!@#$%^&*()_+-=';
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -580,7 +580,7 @@ describe('PasswordChangeForm', () => {
       const unicodePassword = 'pássw0rd_测试_пароль';
       mockOnSubmit.mockResolvedValue({});
 
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       const confirmPasswordInput = screen.getByLabelText('Confirm Password');
@@ -600,7 +600,7 @@ describe('PasswordChangeForm', () => {
   describe('Performance', () => {
     it('handles rapid input changes efficiently', async () => {
       const user = userEvent.setup();
-      render(<PasswordChangeForm {...defaultProps} />);
+      render(<PasswordChangeForm {...baseProps} />);
 
       const newPasswordInput = screen.getByLabelText('New Password');
       

package/src/components/PasswordChange/PasswordChangeForm.tsx

@@ -90,7 +90,7 @@
  * - Proper error handling
  *
  * @dependencies
- * - React 18+ - Hooks and state
+ * - React 19+ - Hooks and state
  * - Button component
  * - Input component
  * - Label component

package/src/components/Progress/Progress.tsx

@@ -57,7 +57,7 @@
  * - Minimal DOM structure (native HTML element)
  *
  * @dependencies
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling
  */
 

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -58,7 +58,7 @@
  * - Error handling for invalid routes
  *
  * @dependencies
- * - React 18+ - Component framework
+ * - React 19+ - Component framework
  * - React Router - Routing integration
  * - Public hooks - Data access
  * - Tailwind CSS - Styling

package/src/components/Select/Select.tsx

@@ -53,7 +53,7 @@ export interface UseSelectStateProps {
 export interface UseSelectEventsProps {
   state: SelectState;
   actions: SelectActions;
-  selectRef: React.RefObject<HTMLElement>;
+  selectRef: React.RefObject<HTMLElement | null>;
 }
 
 export interface UseSelectSearchProps {
@@ -299,12 +299,13 @@ export const useSelectSearch = ({
         if (!React.isValidElement(child)) return child;
 
         // Check if this is a SelectItem by looking for the data-testid or value prop
-        const isSelectItem = child.props && 
-          (child.props['data-testid'] === 'select-item' || 
-           child.props.value !== undefined);
+        const childProps = child.props as { 'data-testid'?: string; value?: unknown; children?: React.ReactNode; [key: string]: unknown };
+        const isSelectItem = childProps && 
+          (childProps['data-testid'] === 'select-item' || 
+           childProps.value !== undefined);
 
         if (isSelectItem) {
-          const childText = React.Children.toArray(child.props.children).join(' ').toLowerCase();
+          const childText = React.Children.toArray(childProps.children).join(' ').toLowerCase();
           const searchLower = searchTerm.toLowerCase();
           
           if (childText.includes(searchLower)) {
@@ -313,8 +314,8 @@ export const useSelectSearch = ({
           return null;
         }
 
-        if (child.props.children) {
-          const filteredChildChildren = filterChildren(child.props.children);
+        if (childProps.children) {
+          const filteredChildChildren = filterChildren(childProps.children);
           if (React.Children.count(filteredChildChildren) > 0) {
             return React.cloneElement(child, {}, filteredChildChildren);
           }
@@ -359,8 +360,11 @@ const useSelectContext = () => {
 const getTextContent = (children: React.ReactNode): string => {
   if (typeof children === 'string') return children;
   if (typeof children === 'number') return children.toString();
-  if (React.isValidElement(children) && children.props.children) {
-    return getTextContent(children.props.children);
+  if (React.isValidElement(children)) {
+    const props = children.props as { children?: React.ReactNode; [key: string]: unknown };
+    if (props.children) {
+      return getTextContent(props.children);
+    }
   }
   if (Array.isArray(children)) {
     return children.map(getTextContent).join('');
@@ -443,7 +447,7 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
     const internalRef = React.useRef<HTMLFormElement>(null);
     const selectRef = React.useMemo(() => {
       if (ref && typeof ref === 'object' && 'current' in ref) {
-        return ref as React.RefObject<HTMLFormElement>;
+        return ref as React.RefObject<HTMLFormElement | null>;
       }
       return internalRef;
     }, [ref]);
@@ -620,7 +624,7 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
     const opensUpward = direction === 'up';
 
     // Use ref to store the latest handleClick to avoid re-creating the effect
-    const handleClickRef = React.useRef<(e: React.MouseEvent) => void>();
+    const handleClickRef = React.useRef<(e: React.MouseEvent) => void>(undefined);
     
     const handleClick = React.useCallback((e: React.MouseEvent) => {
       if (disabled) {
@@ -687,22 +691,26 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
     };
 
     if (asChild) {
-      const childChildren = React.Children.toArray((children as React.ReactElement).props.children);
-      const hasChevron = childChildren.some(child => 
-        React.isValidElement(child) && 
-        (child.type === ChevronDown || 
-         (child.type === 'svg' && child.props['data-testid'] === 'chevron-down') ||
-         (typeof child === 'object' && 'type' in child && typeof child.type === 'function' && child.type.name === 'ChevronDown'))
-      );
+      const childElement = children as React.ReactElement<{ children?: React.ReactNode; [key: string]: unknown }>;
+      const childChildren = React.Children.toArray(childElement.props.children);
+      const hasChevron = childChildren.some(child => {
+        if (React.isValidElement(child)) {
+          const childProps = child.props as { 'data-testid'?: string; [key: string]: unknown };
+          return child.type === ChevronDown || 
+                 (child.type === 'svg' && childProps['data-testid'] === 'chevron-down') ||
+                 (typeof child === 'object' && 'type' in child && typeof child.type === 'function' && child.type.name === 'ChevronDown');
+        }
+        return false;
+      });
 
       // Merge child's className with triggerProps className
-      const childClassName = (children as React.ReactElement).props.className;
+      const childClassName = (children as React.ReactElement<any>).props.className;
       const mergedClassName = cn(
         triggerProps.className,
         childClassName
       );
 
-      return React.cloneElement(children as React.ReactElement, {
+      return React.cloneElement(children as React.ReactElement<any>, {
         ...triggerProps,
         className: mergedClassName,
         children: hasChevron ? childChildren : [
@@ -915,8 +923,11 @@ export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
     const getTextContent = (children: React.ReactNode): string => {
       if (typeof children === 'string') return children;
       if (typeof children === 'number') return children.toString();
-      if (React.isValidElement(children) && children.props.children) {
-        return getTextContent(children.props.children);
+      if (React.isValidElement(children)) {
+        const props = children.props as { children?: React.ReactNode; [key: string]: unknown };
+        if (props.children) {
+          return getTextContent(props.children);
+        }
       }
       if (Array.isArray(children)) {
         return children.map(getTextContent).join('');

package/src/components/SessionRestorationLoader/SessionRestorationLoader.tsx

@@ -30,7 +30,7 @@
  * - High contrast support
  *
  * @dependencies
- * - React 18+ - Component framework
+ * - React 19+ - Component framework
  * - LoadingSpinner - Spinner component
  * - Tailwind CSS - Styling
  */

package/src/components/Table/Table.tsx

@@ -85,7 +85,7 @@
  * - Caption for table description
  *
  * @dependencies
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling
  */
 

package/src/components/Textarea/Textarea.tsx

@@ -93,35 +93,33 @@ export interface TextareaProps
  * />
  * ```
  */
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, variant = 'default', size = 'md', error, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          // Base styles (matching Input component)
-          'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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
-          {
-            'min-h-[60px] px-2 py-1 text-xs': size === 'sm',
-            'min-h-[80px] px-3 py-2 text-sm': size === 'md',
-            'min-h-[100px] px-4 py-3 text-base': size === 'lg',
-          },
-          
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+function Textarea({ className, variant = 'default', size = 'md', error, ref, ...props }: TextareaProps & { ref?: React.Ref<HTMLTextAreaElement> }) {
+  return (
+    <textarea
+      className={cn(
+        // Base styles (matching Input component)
+        'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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
+        {
+          'min-h-[60px] px-2 py-1 text-xs': size === 'sm',
+          'min-h-[80px] px-3 py-2 text-sm': size === 'md',
+          'min-h-[100px] px-4 py-3 text-base': size === 'lg',
+        },
+        
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
 
 Textarea.displayName = 'Textarea';
 

package/src/components/Toast/Toast.tsx

@@ -81,7 +81,7 @@
  * @dependencies
  * - @radix-ui/react-toast - Core toast functionality
  * - lucide-react - Icons
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling
  */
 

package/src/components/Tooltip/Tooltip.tsx

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

package/src/components/UserMenu/UserMenu.tsx

@@ -90,7 +90,7 @@
  * - Optimized avatar rendering
  *
  * @dependencies
- * - React 18+ - Hooks and memo
+ * - React 19+ - Hooks and memo
  * - @supabase/supabase-js - User type
  * - lucide-react - Icons
  * - DropdownMenu components