chore: ref codemod from react

2026-06-06 00:56:54 +00:00 · 2025-04-16 13:58:56 +02:00
parent 52c3257786
commit efa082f623
17 changed files with 890 additions and 694 deletions
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -5,46 +5,55 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"

 import { cn } from "@/lib/utils"

-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
-))
+const Avatar = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
+    ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
+  }
+) => (<AvatarPrimitive.Root
+  ref={ref}
+  className={cn(
+    "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+    className
+  )}
+  {...props}
+/>)
 Avatar.displayName = AvatarPrimitive.Root.displayName

-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-))
+const AvatarImage = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
+    ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
+  }
+) => (<AvatarPrimitive.Image
+  ref={ref}
+  className={cn("aspect-square h-full w-full", className)}
+  {...props}
+/>)
 AvatarImage.displayName = AvatarPrimitive.Image.displayName

-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
+const AvatarFallback = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
+    ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
+  }
+) => (<AvatarPrimitive.Fallback
+  ref={ref}
+  className={cn(
+    "flex h-full w-full items-center justify-center rounded-full bg-muted",
+    className
+  )}
+  {...props}
+/>)
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

 export { Avatar, AvatarImage, AvatarFallback }
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -4,47 +4,55 @@ import { ChevronRight, MoreHorizontal } from "lucide-react"

 import { cn } from "@/lib/utils"

-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+const Breadcrumb = (
+  {
+    ref,
+    ...props
  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+) => <nav ref={ref} aria-label="breadcrumb" {...props} />
 Breadcrumb.displayName = "Breadcrumb"

-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
+const BreadcrumbList = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"ol"> & {
+    ref: React.RefObject<HTMLOListElement>;
+  }
+) => (<ol
+  ref={ref}
+  className={cn(
+    "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+    className
+  )}
+  {...props}
+/>)
 BreadcrumbList.displayName = "BreadcrumbList"

-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
+const BreadcrumbItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"li"> & {
+    ref: React.RefObject<HTMLLIElement>;
+  }
+) => (<li
+  ref={ref}
+  className={cn("inline-flex items-center gap-1.5", className)}
+  {...props}
+/>)
 BreadcrumbItem.displayName = "BreadcrumbItem"

-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+const BreadcrumbLink = (
+  {
+    ref,
+    asChild,
+    className,
+    ...props
  }
->(({ asChild, className, ...props }, ref) => {
+) => {
  const Comp = asChild ? Slot : "a"

  return (
@@ -54,22 +62,25 @@ const BreadcrumbLink = React.forwardRef<
      {...props}
    />
  )
-})
+}
 BreadcrumbLink.displayName = "BreadcrumbLink"

-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
+const BreadcrumbPage = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"span"> & {
+    ref: React.RefObject<HTMLSpanElement>;
+  }
+) => (<span
+  ref={ref}
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  className={cn("font-normal text-foreground", className)}
+  {...props}
+/>)
 BreadcrumbPage.displayName = "BreadcrumbPage"

 const BreadcrumbSeparator = ({
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -42,22 +42,32 @@ export interface ButtonProps
  loading?: boolean;
 }

-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, loading, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        disabled={loading}
-        ref={ref}
-        {...props}
-      >
-        {loading && <LoaderCircle className={cn('h-4 w-4 animate-spin', props.children && 'mr-2')} />}
-        {props.children}
-      </Comp>
-    )
+const Button = (
+  {
+    ref,
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading,
+    ...props
+  }: ButtonProps & {
+    ref: React.RefObject<HTMLButtonElement>;
  }
-)
+) => {
+  const Comp = asChild ? Slot : "button"
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      disabled={loading}
+      ref={ref}
+      {...props}
+    >
+      {loading && <LoaderCircle className={cn('h-4 w-4 animate-spin', props.children && 'mr-2')} />}
+      {props.children}
+    </Comp>
+  )
+}
 Button.displayName = "Button"

 export { Button, buttonVariants }
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -2,78 +2,96 @@ import * as React from "react"

 import { cn } from "@/lib/utils"

-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-xs",
-      className
-    )}
-    {...props}
-  />
-))
+const Card = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => (<div
+  ref={ref}
+  className={cn(
+    "rounded-lg border bg-card text-card-foreground shadow-xs",
+    className
+  )}
+  {...props}
+/>)
 Card.displayName = "Card"

-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
+const CardHeader = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => (<div
+  ref={ref}
+  className={cn("flex flex-col space-y-1.5 p-6", className)}
+  {...props}
+/>)
 CardHeader.displayName = "CardHeader"

-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
+const CardTitle = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => (<div
+  ref={ref}
+  className={cn(
+    "text-2xl font-semibold leading-none tracking-tight",
+    className
+  )}
+  {...props}
+/>)
 CardTitle.displayName = "CardTitle"

-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
+const CardDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => (<div
+  ref={ref}
+  className={cn("text-sm text-muted-foreground", className)}
+  {...props}
+/>)
 CardDescription.displayName = "CardDescription"

-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
+const CardContent = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => (<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />)
 CardContent.displayName = "CardContent"

-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
+const CardFooter = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => (<div
+  ref={ref}
+  className={cn("flex items-center p-6 pt-0", className)}
+  {...props}
+/>)
 CardFooter.displayName = "CardFooter"

 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -6,25 +6,28 @@ import { Check } from "lucide-react"

 import { cn } from "@/lib/utils"

-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    )}
-    {...props}
+const Checkbox = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
+  }
+) => (<CheckboxPrimitive.Root
+  ref={ref}
+  className={cn(
+    "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+    className
+  )}
+  {...props}
+>
+  <CheckboxPrimitive.Indicator
+    className={cn("flex items-center justify-center text-current")}
  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
+    <Check className="h-4 w-4" />
+  </CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>)
 Checkbox.displayName = CheckboxPrimitive.Root.displayName

 export { Checkbox }
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -8,19 +8,22 @@ import { Search } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Dialog, DialogContent } from "@/components/ui/dialog"

-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
+const Command = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
+  }
+) => (<CommandPrimitive
+  ref={ref}
+  className={cn(
+    "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+    className
+  )}
+  {...props}
+/>)
 Command.displayName = CommandPrimitive.displayName

 const CommandDialog = ({ children, ...props }: DialogProps) => {
@@ -35,92 +38,109 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
  )
 }

-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
+const CommandInput = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
+  }
+) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <CommandPrimitive.Input
+    ref={ref}
+    className={cn(
+      "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+</div>)

 CommandInput.displayName = CommandPrimitive.Input.displayName

-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
+const CommandList = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
+  }
+) => (<CommandPrimitive.List
+  ref={ref}
+  className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+  {...props}
+/>)

 CommandList.displayName = CommandPrimitive.List.displayName

-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
+const CommandEmpty = (
+  {
+    ref,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
+  }
+) => (<CommandPrimitive.Empty
+  ref={ref}
+  className="py-6 text-center text-sm"
+  {...props}
+/>)

 CommandEmpty.displayName = CommandPrimitive.Empty.displayName

-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
+const CommandGroup = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
+  }
+) => (<CommandPrimitive.Group
+  ref={ref}
+  className={cn(
+    "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+    className
+  )}
+  {...props}
+/>)

 CommandGroup.displayName = CommandPrimitive.Group.displayName

-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
+const CommandSeparator = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
+  }
+) => (<CommandPrimitive.Separator
+  ref={ref}
+  className={cn("-mx-1 h-px bg-border", className)}
+  {...props}
+/>)
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName

-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
-))
+const CommandItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
+  }
+) => (<CommandPrimitive.Item
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    className
+  )}
+  {...props}
+/>)

 CommandItem.displayName = CommandPrimitive.Item.displayName

--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -14,43 +14,50 @@ const DialogPortal = DialogPrimitive.Portal

 const DialogClose = DialogPrimitive.Close

-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
+const DialogOverlay = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Overlay>>;
+  }
+) => (<DialogPrimitive.Overlay
+  ref={ref}
+  className={cn(
+    "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    className
+  )}
+  {...props}
+/>)
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
+  }
+) => (<DialogPortal>
+  <DialogOverlay />
+  <DialogPrimitive.Content
    ref={ref}
    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
      className
    )}
    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
+  >
+    {children}
+    <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <X className="h-4 w-4" />
+      <span className="sr-only">Close</span>
+    </DialogPrimitive.Close>
+  </DialogPrimitive.Content>
+</DialogPortal>)
 DialogContent.displayName = DialogPrimitive.Content.displayName

 const DialogHeader = ({
@@ -81,31 +88,37 @@ const DialogFooter = ({
 )
 DialogFooter.displayName = "DialogFooter"

-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
+const DialogTitle = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
+  }
+) => (<DialogPrimitive.Title
+  ref={ref}
+  className={cn(
+    "text-lg font-semibold leading-none tracking-tight",
+    className
+  )}
+  {...props}
+/>)
 DialogTitle.displayName = DialogPrimitive.Title.displayName

-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
+const DialogDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
+  }
+) => (<DialogPrimitive.Description
+  ref={ref}
+  className={cn("text-sm text-muted-foreground", className)}
+  {...props}
+/>)
 DialogDescription.displayName = DialogPrimitive.Description.displayName

 export {
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -18,154 +18,174 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub

 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+const DropdownMenuSubTrigger = (
+  {
+    ref,
+    className,
+    inset,
+    children,
+    ...props
  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
+) => (<DropdownMenuPrimitive.SubTrigger
+  ref={ref}
+  className={cn(
+    "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+>
+  {children}
+  <ChevronRight className="ml-auto h-4 w-4" />
+</DropdownMenuPrimitive.SubTrigger>)
 DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
+const DropdownMenuSubContent = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
+  }
+) => (<DropdownMenuPrimitive.SubContent
+  ref={ref}
+  className={cn(
+    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    className
+  )}
+  {...props}
+/>)
 DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+const DropdownMenuContent = (
+  {
+    ref,
+    className,
+    sideOffset = 4,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
+) => (<DropdownMenuPrimitive.Portal>
+  <DropdownMenuPrimitive.Content
    ref={ref}
+    sideOffset={sideOffset}
    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      inset && "pl-8",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
-))
+</DropdownMenuPrimitive.Portal>)
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = (
+  {
+    ref,
+    className,
+    inset,
+    ...props
+  }
+) => (<DropdownMenuPrimitive.Item
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+/>)
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
+const DropdownMenuCheckboxItem = (
+  {
+    ref,
+    className,
+    children,
+    checked,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
+  }
+) => (<DropdownMenuPrimitive.CheckboxItem
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+    className
+  )}
+  checked={checked}
+  {...props}
+>
+  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <DropdownMenuPrimitive.ItemIndicator>
+      <Check className="h-4 w-4" />
+    </DropdownMenuPrimitive.ItemIndicator>
+  </span>
+  {children}
+</DropdownMenuPrimitive.CheckboxItem>)
 DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
+const DropdownMenuRadioItem = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
+  }
+) => (<DropdownMenuPrimitive.RadioItem
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+    className
+  )}
+  {...props}
+>
+  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <DropdownMenuPrimitive.ItemIndicator>
+      <Circle className="h-2 w-2 fill-current" />
+    </DropdownMenuPrimitive.ItemIndicator>
+  </span>
+  {children}
+</DropdownMenuPrimitive.RadioItem>)
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+const DropdownMenuLabel = (
+  {
+    ref,
+    className,
+    inset,
+    ...props
  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
+) => (<DropdownMenuPrimitive.Label
+  ref={ref}
+  className={cn(
+    "px-2 py-1.5 text-sm font-semibold",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+/>)
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
+const DropdownMenuSeparator = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
+  }
+) => (<DropdownMenuPrimitive.Separator
+  ref={ref}
+  className={cn("-mx-1 my-1 h-px bg-muted", className)}
+  {...props}
+/>)
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

 const DropdownMenuShortcut = ({
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -72,10 +72,15 @@ const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
 )

-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+const FormItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
+) => {
  const id = React.useId()

  return (
@@ -83,13 +88,18 @@ const FormItem = React.forwardRef<
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
  )
-})
+}
 FormItem.displayName = "FormItem"

-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
+const FormLabel = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    ref: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root>>;
+  }
+) => {
  const { error, formItemId } = useFormField()

  return (
@@ -100,13 +110,17 @@ const FormLabel = React.forwardRef<
      {...props}
    />
  )
-})
+}
 FormLabel.displayName = "FormLabel"

-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
+const FormControl = (
+  {
+    ref,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof Slot> & {
+    ref: React.RefObject<React.ElementRef<typeof Slot>>;
+  }
+) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

  return (
@@ -122,13 +136,18 @@ const FormControl = React.forwardRef<
      {...props}
    />
  )
-})
+}
 FormControl.displayName = "FormControl"

-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
+const FormDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLParagraphElement> & {
+    ref: React.RefObject<HTMLParagraphElement>;
+  }
+) => {
  const { formDescriptionId } = useFormField()

  return (
@@ -139,13 +158,19 @@ const FormDescription = React.forwardRef<
      {...props}
    />
  )
-})
+}
 FormDescription.displayName = "FormDescription"

-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
+const FormMessage = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLParagraphElement> & {
+    ref: React.RefObject<HTMLParagraphElement>;
+  }
+) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

@@ -163,7 +188,7 @@ const FormMessage = React.forwardRef<
      {body}
    </p>
  )
-})
+}
 FormMessage.displayName = "FormMessage"

 export {
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -6,34 +6,45 @@ import { Dot } from "lucide-react"

 import { cn } from "@/lib/utils"

-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-disabled:opacity-50",
-      containerClassName
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-))
+const InputOTP = (
+  {
+    ref,
+    className,
+    containerClassName,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof OTPInput> & {
+    ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
+  }
+) => (<OTPInput
+  ref={ref}
+  containerClassName={cn(
+    "flex items-center gap-2 has-disabled:opacity-50",
+    containerClassName
+  )}
+  className={cn("disabled:cursor-not-allowed", className)}
+  {...props}
+/>)
 InputOTP.displayName = "InputOTP"

-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
+const InputOTPGroup = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<"div"> & {
+    ref: React.RefObject<React.ElementRef<"div">>;
+  }
+) => (<div ref={ref} className={cn("flex items-center", className)} {...props} />)
 InputOTPGroup.displayName = "InputOTPGroup"

-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
+const InputOTPSlot = (
+  {
+    ref,
+    index,
+    className,
+    ...props
+  }
+) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

@@ -55,17 +66,19 @@ const InputOTPSlot = React.forwardRef<
      )}
    </div>
  )
-})
+}
 InputOTPSlot.displayName = "InputOTPSlot"

-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Dot />
-  </div>
-))
+const InputOTPSeparator = (
+  {
+    ref,
+    ...props
+  }: React.ComponentPropsWithoutRef<"div"> & {
+    ref: React.RefObject<React.ElementRef<"div">>;
+  }
+) => (<div ref={ref} role="separator" {...props}>
+  <Dot />
+</div>)
 InputOTPSeparator.displayName = "InputOTPSeparator"

 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -5,21 +5,28 @@ import { cn } from "@/lib/utils"
 export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}

-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 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-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
+const Input = (
+  {
+    ref,
+    className,
+    type,
+    ...props
+  }: InputProps & {
+    ref: React.RefObject<HTMLInputElement>;
  }
-)
+) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 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-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+}
 Input.displayName = "Input"

 export { Input }
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -10,17 +10,17 @@ const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 )

-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
+const Label = (
+  {
+    ref,
+    className,
+    ...props
+  }
+) => (<LabelPrimitive.Root
+  ref={ref}
+  className={cn(labelVariants(), className)}
+  {...props}
+/>)
 Label.displayName = LabelPrimitive.Root.displayName

 export { Label }
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -9,23 +9,28 @@ const Popover = PopoverPrimitive.Root

 const PopoverTrigger = PopoverPrimitive.Trigger

-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
+const PopoverContent = (
+  {
+    ref,
+    className,
+    align = "center",
+    sideOffset = 4,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
+  }
+) => (<PopoverPrimitive.Portal>
+  <PopoverPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+</PopoverPrimitive.Portal>)
 PopoverContent.displayName = PopoverPrimitive.Content.displayName

 export { Popover, PopoverTrigger, PopoverContent }
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -2,114 +2,138 @@ import * as React from "react"

 import { cn } from "@/lib/utils"

-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
+const Table = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableElement> & {
+    ref: React.RefObject<HTMLTableElement>;
+  }
+) => (<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 = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<thead 
+  ref={ref} 
+  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 = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<tbody
+  ref={ref}
+  className={cn("[&_tr:last-child]:border-0", className)}
+  {...props}
+/>)
 TableBody.displayName = "TableBody"

-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
+const TableFooter = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<tfoot
+  ref={ref}
+  className={cn(
+    "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
+    className
+  )}
+  {...props}
+/>)
 TableFooter.displayName = "TableFooter"

-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
+const TableRow = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableRowElement> & {
+    ref: React.RefObject<HTMLTableRowElement>;
+  }
+) => (<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) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
+const TableHead = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ThHTMLAttributes<HTMLTableCellElement> & {
+    ref: React.RefObject<HTMLTableCellElement>;
+  }
+) => (<th
+  ref={ref}
+  className={cn(
+    "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+    className
+  )}
+  {...props}
+/>)
 TableHead.displayName = "TableHead"

-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
+const TableCell = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.TdHTMLAttributes<HTMLTableCellElement> & {
+    ref: React.RefObject<HTMLTableCellElement>;
+  }
+) => (<td
+  ref={ref}
+  className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+  {...props}
+/>)
 TableCell.displayName = "TableCell"

-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
+const TableCaption = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableCaptionElement> & {
+    ref: React.RefObject<HTMLTableCaptionElement>;
+  }
+) => (<caption
+  ref={ref}
+  className={cn("mt-4 text-sm text-muted-foreground", className)}
+  {...props}
+/>)
 TableCaption.displayName = "TableCaption"

 export {
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -7,49 +7,58 @@ import { cn } from "@/lib/utils"

 const Tabs = TabsPrimitive.Root

-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
+const TabsList = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
+  }
+) => (<TabsPrimitive.List
+  ref={ref}
+  className={cn(
+    "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+    className
+  )}
+  {...props}
+/>)
 TabsList.displayName = TabsPrimitive.List.displayName

-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs",
-      className
-    )}
-    {...props}
-  />
-))
+const TabsTrigger = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
+  }
+) => (<TabsPrimitive.Trigger
+  ref={ref}
+  className={cn(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs",
+    className
+  )}
+  {...props}
+/>)
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-))
+const TabsContent = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
+    ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
+  }
+) => (<TabsPrimitive.Content
+  ref={ref}
+  className={cn(
+    "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    className
+  )}
+  {...props}
+/>)
 TabsContent.displayName = TabsPrimitive.Content.displayName

 export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -2,10 +2,15 @@ import * as React from "react"

 import { cn } from "@/lib/utils"

-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
+const Textarea = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentProps<"textarea"> & {
+    ref: React.RefObject<HTMLTextAreaElement>;
+  }
+) => {
  return (
    <textarea
      className={cn(
@@ -16,7 +21,7 @@ const Textarea = React.forwardRef<
      {...props}
    />
  )
-})
+}
 Textarea.displayName = "Textarea"

 export { Textarea }
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -11,20 +11,24 @@ const Tooltip = TooltipPrimitive.Root

 const TooltipTrigger = TooltipPrimitive.Trigger

-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
+const TooltipContent = (
+  {
+    ref,
+    className,
+    sideOffset = 4,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    ref: React.RefObject<React.ElementRef<typeof TooltipPrimitive.Content>>;
+  }
+) => (<TooltipPrimitive.Content
+  ref={ref}
+  sideOffset={sideOffset}
+  className={cn(
+    "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    className
+  )}
+  {...props}
+/>)
 TooltipContent.displayName = TooltipPrimitive.Content.displayName

 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }