React 19 refactoring: Removed forwardRef references in all UI Components (#99)

* React 19 refactoring: Removed forwardRef references in all UI Components
* Added Progress UI component from Shadcn
* Updated dependencies
* Formatted files
* Fix Mobile Dropdowns

packages/ui/src/shadcn/table.tsx

@@ -2,110 +2,98 @@ import * as React from 'react';
 
 import { cn } from '../lib/utils';
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
+const Table: React.FC<React.HTMLAttributes<HTMLTableElement>> = ({
+  className,
+  ...props
+}) => (
   <div className="relative w-full overflow-auto">
     <table
-      ref={ref}
       className={cn('w-full caption-bottom text-sm', className)}
       {...props}
     />
   </div>
-));
+);
 Table.displayName = 'Table';
 
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
-));
+const TableHeader: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  className,
+  ...props
+}) => <thead className={cn('[&_tr]:border-b', className)} {...props} />;
 TableHeader.displayName = 'TableHeader';
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn('[&_tr:last-child]:border-0', className)}
-    {...props}
-  />
-));
+const TableBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  className,
+  ...props
+}) => (
+  <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+);
 TableBody.displayName = 'TableBody';
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableFooter: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  className,
+  ...props
+}) => (
   <tfoot
-    ref={ref}
     className={cn(
       'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
       className,
     )}
     {...props}
   />
-));
+);
 TableFooter.displayName = 'TableFooter';
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+const TableRow: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
+  className,
+  ...props
+}) => (
   <tr
-    ref={ref}
     className={cn(
       'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
       className,
     )}
     {...props}
   />
-));
+);
 TableRow.displayName = 'TableRow';
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+const TableHead: React.FC<React.ThHTMLAttributes<HTMLTableCellElement>> = ({
+  className,
+  ...props
+}) => (
   <th
-    ref={ref}
     className={cn(
       'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className,
     )}
     {...props}
   />
-));
+);
 TableHead.displayName = 'TableHead';
 
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+const TableCell: React.FC<React.TdHTMLAttributes<HTMLTableCellElement>> = ({
+  className,
+  ...props
+}) => (
   <td
-    ref={ref}
     className={cn(
       'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className,
     )}
     {...props}
   />
-));
+);
 TableCell.displayName = 'TableCell';
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
+const TableCaption: React.FC<React.HTMLAttributes<HTMLTableCaptionElement>> = ({
+  className,
+  ...props
+}) => (
   <caption
-    ref={ref}
     className={cn('mt-4 text-sm text-muted-foreground', className)}
     {...props}
   />
-));
+);
 TableCaption.displayName = 'TableCaption';
 
 export {