revert: "chore: ref codemod from react"

This reverts commit efa082f623.
2026-06-06 00:56:54 +00:00 · 2025-04-16 14:27:30 +02:00
parent efa082f623
commit 7c21b1b9b6
17 changed files with 698 additions and 894 deletions
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -5,55 +5,46 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"

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

-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}
-/>)
+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}
+  />
+))
 Avatar.displayName = AvatarPrimitive.Root.displayName

-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}
-/>)
+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}
+  />
+))
 AvatarImage.displayName = AvatarPrimitive.Image.displayName

-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}
-/>)
+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}
+  />
+))
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

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

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

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

-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}
-/>)
+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}
+  />
+))
 BreadcrumbList.displayName = "BreadcrumbList"

-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}
-/>)
+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}
+  />
+))
 BreadcrumbItem.displayName = "BreadcrumbItem"

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

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

-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}
-/>)
+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}
+  />
+))
 BreadcrumbPage.displayName = "BreadcrumbPage"

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

-const Button = (
-  {
-    ref,
-    className,
-    variant,
-    size,
-    asChild = false,
-    loading,
-    ...props
-  }: ButtonProps & {
-    ref: React.RefObject<HTMLButtonElement>;
+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 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,96 +2,78 @@ import * as React from "react"

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

-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}
-/>)
+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}
+  />
+))
 Card.displayName = "Card"

-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}
-/>)
+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}
+  />
+))
 CardHeader.displayName = "CardHeader"

-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}
-/>)
+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}
+  />
+))
 CardTitle.displayName = "CardTitle"

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

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

-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}
-/>)
+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}
+  />
+))
 CardFooter.displayName = "CardFooter"

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

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

-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")}
+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}
  >
-    <Check className="h-4 w-4" />
-  </CheckboxPrimitive.Indicator>
-</CheckboxPrimitive.Root>)
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <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,22 +8,19 @@ import { Search } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Dialog, DialogContent } from "@/components/ui/dialog"

-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}
-/>)
+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}
+  />
+))
 Command.displayName = CommandPrimitive.displayName

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

-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
+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>
+))
+
+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}
+  />
+))
+
+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}
+  />
+))
+
+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(
-      "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",
+      "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}
  />
-</div>)
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-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 = (
-  {
-    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 = (
-  {
-    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 = (
-  {
-    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}
-/>)
+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}
+  />
+))
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName

-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}
-/>)
+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}
+  />
+))

 CommandItem.displayName = CommandPrimitive.Item.displayName

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

 const DialogClose = DialogPrimitive.Close

-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
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
    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",
+      "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}
-  >
-    {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>)
+  />
+))
+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>
+))
 DialogContent.displayName = DialogPrimitive.Content.displayName

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

-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}
-/>)
+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}
+  />
+))
 DialogTitle.displayName = DialogPrimitive.Title.displayName

-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}
-/>)
+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}
+  />
+))
 DialogDescription.displayName = DialogPrimitive.Description.displayName

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

 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

-const DropdownMenuSubTrigger = (
-  {
-    ref,
-    className,
-    inset,
-    children,
-    ...props
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
  }
-) => (<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>)
+>(({ 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>
+))
 DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

-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 = (
-  {
-    ref,
-    className,
-    sideOffset = 4,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
-    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
-  }
-) => (<DropdownMenuPrimitive.Portal>
-  <DropdownMenuPrimitive.Content
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
    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",
+      "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}
  />
-</DropdownMenuPrimitive.Portal>)
+))
+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 = (
-  {
-    ref,
-    className,
-    inset,
-    ...props
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
  }
-) => (<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}
-/>)
+>(({ className, inset, ...props }, ref) => (
+  <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 = (
-  {
-    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>)
+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>
+))
 DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

-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>)
+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>
+))
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

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

-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}
-/>)
+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}
+  />
+))
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

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

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

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

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

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

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

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

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

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

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

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

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

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

-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}
-/>)
+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}
+  />
+))
 InputOTP.displayName = "InputOTP"

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

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

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

-const InputOTPSeparator = (
-  {
-    ref,
-    ...props
-  }: React.ComponentPropsWithoutRef<"div"> & {
-    ref: React.RefObject<React.ElementRef<"div">>;
-  }
-) => (<div ref={ref} role="separator" {...props}>
-  <Dot />
-</div>)
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <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,28 +5,21 @@ import { cn } from "@/lib/utils"
 export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}

-const Input = (
-  {
-    ref,
-    className,
-    type,
-    ...props
-  }: InputProps & {
-    ref: React.RefObject<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}
+      />
+    )
  }
-) => {
-  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 = (
-  {
-    ref,
-    className,
-    ...props
-  }
-) => (<LabelPrimitive.Root
-  ref={ref}
-  className={cn(labelVariants(), className)}
-  {...props}
-/>)
+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}
+  />
+))
 Label.displayName = LabelPrimitive.Root.displayName

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

 const PopoverTrigger = PopoverPrimitive.Trigger

-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>)
+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>
+))
 PopoverContent.displayName = PopoverPrimitive.Content.displayName

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

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

-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>)
+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>
+))
 Table.displayName = "Table"

-const TableHeader = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.HTMLAttributes<HTMLTableSectionElement> & {
-    ref: React.RefObject<HTMLTableSectionElement>;
-  }
-) => (<thead 
-  ref={ref} 
-  className={cn(
-    "[&_tr]:border-b",
-    className
-  )} 
-  {...props} 
-/>)
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead 
+    ref={ref} 
+    className={cn(
+      "[&_tr]:border-b",
+      className
+    )} 
+    {...props} 
+  />
+))
 TableHeader.displayName = "TableHeader"

-const TableBody = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.HTMLAttributes<HTMLTableSectionElement> & {
-    ref: React.RefObject<HTMLTableSectionElement>;
-  }
-) => (<tbody
-  ref={ref}
-  className={cn("[&_tr:last-child]:border-0", className)}
-  {...props}
-/>)
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
 TableBody.displayName = "TableBody"

-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}
-/>)
+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}
+  />
+))
 TableFooter.displayName = "TableFooter"

-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}
-/>)
+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}
+  />
+))
 TableRow.displayName = "TableRow"

-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}
-/>)
+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}
+  />
+))
 TableHead.displayName = "TableHead"

-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}
-/>)
+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}
+  />
+))
 TableCell.displayName = "TableCell"

-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}
-/>)
+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}
+  />
+))
 TableCaption.displayName = "TableCaption"

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

 const Tabs = TabsPrimitive.Root

-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}
-/>)
+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}
+  />
+))
 TabsList.displayName = TabsPrimitive.List.displayName

-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}
-/>)
+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}
+  />
+))
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

-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}
-/>)
+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}
+  />
+))
 TabsContent.displayName = TabsPrimitive.Content.displayName

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

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

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

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

 const TooltipTrigger = TooltipPrimitive.Trigger

-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}
-/>)
+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}
+  />
+))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName

 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }