chore: ref codemod from react

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<
+const Avatar = (
-  React.ElementRef<typeof AvatarPrimitive.Root>,
+  {
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <AvatarPrimitive.Root
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+  }
-      className
+) => (<AvatarPrimitive.Root
-    )}
+  ref={ref}
-    {...props}
+  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<
+const AvatarImage = (
-  React.ElementRef<typeof AvatarPrimitive.Image>,
+  {
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <AvatarPrimitive.Image
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
-    className={cn("aspect-square h-full w-full", className)}
+    ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
-    {...props}
+  }
-  />
+) => (<AvatarPrimitive.Image
-))
+  ref={ref}
+  className={cn("aspect-square h-full w-full", className)}
+  {...props}
+/>)
 AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
-const AvatarFallback = React.forwardRef<
+const AvatarFallback = (
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  {
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <AvatarPrimitive.Fallback
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+  }
-      className
+) => (<AvatarPrimitive.Fallback
-    )}
+  ref={ref}
-    {...props}
+  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 }

src/components/ui/breadcrumb.tsx

@@ -4,47 +4,55 @@ import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-const Breadcrumb = React.forwardRef<
+const Breadcrumb = (
-  HTMLElement,
+  {
-  React.ComponentPropsWithoutRef<"nav"> & {
+    ref,
-    separator?: React.ReactNode
+    ...props
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+) => <nav ref={ref} aria-label="breadcrumb" {...props} />
 Breadcrumb.displayName = "Breadcrumb"
 
-const BreadcrumbList = React.forwardRef<
+const BreadcrumbList = (
-  HTMLOListElement,
+  {
-  React.ComponentPropsWithoutRef<"ol">
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <ol
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<"ol"> & {
-    className={cn(
+    ref: React.RefObject<HTMLOListElement>;
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+  }
-      className
+) => (<ol
-    )}
+  ref={ref}
-    {...props}
+  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<
+const BreadcrumbItem = (
-  HTMLLIElement,
+  {
-  React.ComponentPropsWithoutRef<"li">
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <li
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<"li"> & {
-    className={cn("inline-flex items-center gap-1.5", className)}
+    ref: React.RefObject<HTMLLIElement>;
-    {...props}
+  }
-  />
+) => (<li
-))
+  ref={ref}
+  className={cn("inline-flex items-center gap-1.5", className)}
+  {...props}
+/>)
 BreadcrumbItem.displayName = "BreadcrumbItem"
 
-const BreadcrumbLink = React.forwardRef<
+const BreadcrumbLink = (
-  HTMLAnchorElement,
+  {
-  React.ComponentPropsWithoutRef<"a"> & {
+    ref,
-    asChild?: boolean
+    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<
+const BreadcrumbPage = (
-  HTMLSpanElement,
+  {
-  React.ComponentPropsWithoutRef<"span">
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <span
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<"span"> & {
-    role="link"
+    ref: React.RefObject<HTMLSpanElement>;
-    aria-disabled="true"
+  }
-    aria-current="page"
+) => (<span
-    className={cn("font-normal text-foreground", className)}
+  ref={ref}
-    {...props}
+  role="link"
-  />
+  aria-disabled="true"
-))
+  aria-current="page"
+  className={cn("font-normal text-foreground", className)}
+  {...props}
+/>)
 BreadcrumbPage.displayName = "BreadcrumbPage"
 
 const BreadcrumbSeparator = ({

src/components/ui/button.tsx

@@ -42,22 +42,32 @@ export interface ButtonProps
   loading?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = (
-  ({ className, variant, size, asChild = false, loading, ...props }, ref) => {
+  {
-    const Comp = asChild ? Slot : "button"
+    ref,
-    return (
+    className,
-      <Comp
+    variant,
-        className={cn(buttonVariants({ variant, size, className }))}
+    size,
-        disabled={loading}
+    asChild = false,
-        ref={ref}
+    loading,
-        {...props}
+    ...props
-      >
+  }: ButtonProps & {
-        {loading && <LoaderCircle className={cn('h-4 w-4 animate-spin', props.children && 'mr-2')} />}
+    ref: React.RefObject<HTMLButtonElement>;
-        {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 }

src/components/ui/card.tsx

@@ -2,78 +2,96 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-const Card = React.forwardRef<
+const Card = (
-  HTMLDivElement,
+  {
-  React.HTMLAttributes<HTMLDivElement>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <div
+    ...props
-    ref={ref}
+  }: React.HTMLAttributes<HTMLDivElement> & {
-    className={cn(
+    ref: React.RefObject<HTMLDivElement>;
-      "rounded-lg border bg-card text-card-foreground shadow-xs",
+  }
-      className
+) => (<div
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  />
+    "rounded-lg border bg-card text-card-foreground shadow-xs",
-))
+    className
+  )}
+  {...props}
+/>)
 Card.displayName = "Card"
 
-const CardHeader = React.forwardRef<
+const CardHeader = (
-  HTMLDivElement,
+  {
-  React.HTMLAttributes<HTMLDivElement>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <div
+    ...props
-    ref={ref}
+  }: React.HTMLAttributes<HTMLDivElement> & {
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    ref: React.RefObject<HTMLDivElement>;
-    {...props}
+  }
-  />
+) => (<div
-))
+  ref={ref}
+  className={cn("flex flex-col space-y-1.5 p-6", className)}
+  {...props}
+/>)
 CardHeader.displayName = "CardHeader"
 
-const CardTitle = React.forwardRef<
+const CardTitle = (
-  HTMLDivElement,
+  {
-  React.HTMLAttributes<HTMLDivElement>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <div
+    ...props
-    ref={ref}
+  }: React.HTMLAttributes<HTMLDivElement> & {
-    className={cn(
+    ref: React.RefObject<HTMLDivElement>;
-      "text-2xl font-semibold leading-none tracking-tight",
+  }
-      className
+) => (<div
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  />
+    "text-2xl font-semibold leading-none tracking-tight",
-))
+    className
+  )}
+  {...props}
+/>)
 CardTitle.displayName = "CardTitle"
 
-const CardDescription = React.forwardRef<
+const CardDescription = (
-  HTMLDivElement,
+  {
-  React.HTMLAttributes<HTMLDivElement>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <div
+    ...props
-    ref={ref}
+  }: React.HTMLAttributes<HTMLDivElement> & {
-    className={cn("text-sm text-muted-foreground", className)}
+    ref: React.RefObject<HTMLDivElement>;
-    {...props}
+  }
-  />
+) => (<div
-))
+  ref={ref}
+  className={cn("text-sm text-muted-foreground", className)}
+  {...props}
+/>)
 CardDescription.displayName = "CardDescription"
 
-const CardContent = React.forwardRef<
+const CardContent = (
-  HTMLDivElement,
+  {
-  React.HTMLAttributes<HTMLDivElement>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+    ...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<
+const CardFooter = (
-  HTMLDivElement,
+  {
-  React.HTMLAttributes<HTMLDivElement>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <div
+    ...props
-    ref={ref}
+  }: React.HTMLAttributes<HTMLDivElement> & {
-    className={cn("flex items-center p-6 pt-0", className)}
+    ref: React.RefObject<HTMLDivElement>;
-    {...props}
+  }
-  />
+) => (<div
-))
+  ref={ref}
+  className={cn("flex items-center p-6 pt-0", className)}
+  {...props}
+/>)
 CardFooter.displayName = "CardFooter"
 
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/checkbox.tsx

@@ -6,25 +6,28 @@ import { Check } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-const Checkbox = React.forwardRef<
+const Checkbox = (
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  {
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <CheckboxPrimitive.Root
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
-      "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
+) => (<CheckboxPrimitive.Root
-    )}
+  ref={ref}
-    {...props}
+  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
+    <Check className="h-4 w-4" />
-      className={cn("flex items-center justify-center text-current")}
+  </CheckboxPrimitive.Indicator>
-    >
+</CheckboxPrimitive.Root>)
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
 export { Checkbox }

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<
+const Command = (
-  React.ElementRef<typeof CommandPrimitive>,
+  {
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <CommandPrimitive
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+  }
-      className
+) => (<CommandPrimitive
-    )}
+  ref={ref}
-    {...props}
+  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<
+const CommandInput = (
-  React.ElementRef<typeof CommandPrimitive.Input>,
+  {
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    ...props
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
-    <CommandPrimitive.Input
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
-      ref={ref}
+  }
-      className={cn(
+) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-        "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",
+  <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-        className
+  <CommandPrimitive.Input
-      )}
+    ref={ref}
-      {...props}
+    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",
-  </div>
+      className
-))
+    )}
+    {...props}
+  />
+</div>)
 
 CommandInput.displayName = CommandPrimitive.Input.displayName
 
-const CommandList = React.forwardRef<
+const CommandList = (
-  React.ElementRef<typeof CommandPrimitive.List>,
+  {
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <CommandPrimitive.List
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
-    {...props}
+  }
-  />
+) => (<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<
+const CommandEmpty = (
-  React.ElementRef<typeof CommandPrimitive.Empty>,
+  {
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+    ref,
->((props, ref) => (
+    ...props
-  <CommandPrimitive.Empty
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
-    ref={ref}
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
-    className="py-6 text-center text-sm"
+  }
-    {...props}
+) => (<CommandPrimitive.Empty
-  />
+  ref={ref}
-))
+  className="py-6 text-center text-sm"
+  {...props}
+/>)
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 
-const CommandGroup = React.forwardRef<
+const CommandGroup = (
-  React.ElementRef<typeof CommandPrimitive.Group>,
+  {
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <CommandPrimitive.Group
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
-      "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
+) => (<CommandPrimitive.Group
-    )}
+  ref={ref}
-    {...props}
+  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<
+const CommandSeparator = (
-  React.ElementRef<typeof CommandPrimitive.Separator>,
+  {
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <CommandPrimitive.Separator
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
-    className={cn("-mx-1 h-px bg-border", className)}
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
-    {...props}
+  }
-  />
+) => (<CommandPrimitive.Separator
-))
+  ref={ref}
+  className={cn("-mx-1 h-px bg-border", className)}
+  {...props}
+/>)
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 
-const CommandItem = React.forwardRef<
+const CommandItem = (
-  React.ElementRef<typeof CommandPrimitive.Item>,
+  {
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <CommandPrimitive.Item
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
-      "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
+) => (<CommandPrimitive.Item
-    )}
+  ref={ref}
-    {...props}
+  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
 

src/components/ui/dialog.tsx

@@ -14,43 +14,50 @@ const DialogPortal = DialogPrimitive.Portal
 
 const DialogClose = DialogPrimitive.Close
 
-const DialogOverlay = React.forwardRef<
+const DialogOverlay = (
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  {
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <DialogPrimitive.Overlay
+    ...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}
-  />
+  >
-))
+    {children}
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+    <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" />
-const DialogContent = React.forwardRef<
+      <span className="sr-only">Close</span>
-  React.ElementRef<typeof DialogPrimitive.Content>,
+    </DialogPrimitive.Close>
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  </DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+</DialogPortal>)
-  <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 = ({
@@ -81,31 +88,37 @@ const DialogFooter = ({
 )
 DialogFooter.displayName = "DialogFooter"
 
-const DialogTitle = React.forwardRef<
+const DialogTitle = (
-  React.ElementRef<typeof DialogPrimitive.Title>,
+  {
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <DialogPrimitive.Title
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
-      "text-lg font-semibold leading-none tracking-tight",
+  }
-      className
+) => (<DialogPrimitive.Title
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  />
+    "text-lg font-semibold leading-none tracking-tight",
-))
+    className
+  )}
+  {...props}
+/>)
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 
-const DialogDescription = React.forwardRef<
+const DialogDescription = (
-  React.ElementRef<typeof DialogPrimitive.Description>,
+  {
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <DialogPrimitive.Description
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
-    className={cn("text-sm text-muted-foreground", className)}
+    ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
-    {...props}
+  }
-  />
+) => (<DialogPrimitive.Description
-))
+  ref={ref}
+  className={cn("text-sm text-muted-foreground", className)}
+  {...props}
+/>)
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {

src/components/ui/dropdown-menu.tsx

@@ -18,154 +18,174 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
-const DropdownMenuSubTrigger = React.forwardRef<
+const DropdownMenuSubTrigger = (
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    ref,
-    inset?: boolean
+    className,
+    inset,
+    children,
+    ...props
   }
->(({ className, inset, children, ...props }, ref) => (
+) => (<DropdownMenuPrimitive.SubTrigger
-  <DropdownMenuPrimitive.SubTrigger
+  ref={ref}
-    ref={ref}
+  className={cn(
-    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",
-      "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",
-      inset && "pl-8",
+    className
-      className
+  )}
-    )}
+  {...props}
-    {...props}
+>
-  >
+  {children}
-    {children}
+  <ChevronRight className="ml-auto h-4 w-4" />
-    <ChevronRight className="ml-auto h-4 w-4" />
+</DropdownMenuPrimitive.SubTrigger>)
-  </DropdownMenuPrimitive.SubTrigger>
-))
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName
 
-const DropdownMenuSubContent = React.forwardRef<
+const DropdownMenuSubContent = (
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <DropdownMenuPrimitive.SubContent
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
-      "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
+) => (<DropdownMenuPrimitive.SubContent
-    )}
+  ref={ref}
-    {...props}
+  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<
+const DropdownMenuContent = (
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+    ref,
->(({ className, sideOffset = 4, ...props }, ref) => (
+    className,
-  <DropdownMenuPrimitive.Portal>
+    sideOffset = 4,
-    <DropdownMenuPrimitive.Content
+    ...props
-      ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
-      sideOffset={sideOffset}
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
-      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
   }
->(({ className, inset, ...props }, ref) => (
+) => (<DropdownMenuPrimitive.Portal>
-  <DropdownMenuPrimitive.Item
+  <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",
+      "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",
-      inset && "pl-8",
       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<
+const DropdownMenuCheckboxItem = (
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+    ref,
->(({ className, children, checked, ...props }, ref) => (
+    className,
-  <DropdownMenuPrimitive.CheckboxItem
+    children,
-    ref={ref}
+    checked,
-    className={cn(
+    ...props
-      "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",
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
-      className
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
-    )}
+  }
-    checked={checked}
+) => (<DropdownMenuPrimitive.CheckboxItem
-    {...props}
+  ref={ref}
-  >
+  className={cn(
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    "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",
-      <DropdownMenuPrimitive.ItemIndicator>
+    className
-        <Check className="h-4 w-4" />
+  )}
-      </DropdownMenuPrimitive.ItemIndicator>
+  checked={checked}
-    </span>
+  {...props}
-    {children}
+>
-  </DropdownMenuPrimitive.CheckboxItem>
+  <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<
+const DropdownMenuRadioItem = (
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+    ref,
->(({ className, children, ...props }, ref) => (
+    className,
-  <DropdownMenuPrimitive.RadioItem
+    children,
-    ref={ref}
+    ...props
-    className={cn(
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
-      "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",
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
-      className
+  }
-    )}
+) => (<DropdownMenuPrimitive.RadioItem
-    {...props}
+  ref={ref}
-  >
+  className={cn(
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    "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",
-      <DropdownMenuPrimitive.ItemIndicator>
+    className
-        <Circle className="h-2 w-2 fill-current" />
+  )}
-      </DropdownMenuPrimitive.ItemIndicator>
+  {...props}
-    </span>
+>
-    {children}
+  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-  </DropdownMenuPrimitive.RadioItem>
+    <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<
+const DropdownMenuLabel = (
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    ref,
-    inset?: boolean
+    className,
+    inset,
+    ...props
   }
->(({ className, inset, ...props }, ref) => (
+) => (<DropdownMenuPrimitive.Label
-  <DropdownMenuPrimitive.Label
+  ref={ref}
-    ref={ref}
+  className={cn(
-    className={cn(
+    "px-2 py-1.5 text-sm font-semibold",
-      "px-2 py-1.5 text-sm font-semibold",
+    inset && "pl-8",
-      inset && "pl-8",
+    className
-      className
+  )}
-    )}
+  {...props}
-    {...props}
+/>)
-  />
-))
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
-const DropdownMenuSeparator = React.forwardRef<
+const DropdownMenuSeparator = (
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <DropdownMenuPrimitive.Separator
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
-    {...props}
+  }
-  />
+) => (<DropdownMenuPrimitive.Separator
-))
+  ref={ref}
+  className={cn("-mx-1 my-1 h-px bg-muted", className)}
+  {...props}
+/>)
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
 const DropdownMenuShortcut = ({

src/components/ui/form.tsx

@@ -72,10 +72,15 @@ const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue
 )
 
-const FormItem = React.forwardRef<
+const FormItem = (
-  HTMLDivElement,
+  {
-  React.HTMLAttributes<HTMLDivElement>
+    ref,
->(({ className, ...props }, 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<
+const FormLabel = (
-  React.ElementRef<typeof LabelPrimitive.Root>,
+  {
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+    ref,
->(({ className, ...props }, 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<
+const FormControl = (
-  React.ElementRef<typeof Slot>,
+  {
-  React.ComponentPropsWithoutRef<typeof Slot>
+    ref,
->(({ ...props }, 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<
+const FormDescription = (
-  HTMLParagraphElement,
+  {
-  React.HTMLAttributes<HTMLParagraphElement>
+    ref,
->(({ className, ...props }, 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<
+const FormMessage = (
-  HTMLParagraphElement,
+  {
-  React.HTMLAttributes<HTMLParagraphElement>
+    ref,
->(({ className, children, ...props }, 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 {

src/components/ui/input-otp.tsx

@@ -6,34 +6,45 @@ import { Dot } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-const InputOTP = React.forwardRef<
+const InputOTP = (
-  React.ElementRef<typeof OTPInput>,
+  {
-  React.ComponentPropsWithoutRef<typeof OTPInput>
+    ref,
->(({ className, containerClassName, ...props }, ref) => (
+    className,
-  <OTPInput
+    containerClassName,
-    ref={ref}
+    ...props
-    containerClassName={cn(
+  }: React.ComponentPropsWithoutRef<typeof OTPInput> & {
-      "flex items-center gap-2 has-disabled:opacity-50",
+    ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
-      containerClassName
+  }
-    )}
+) => (<OTPInput
-    className={cn("disabled:cursor-not-allowed", className)}
+  ref={ref}
-    {...props}
+  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<
+const InputOTPGroup = (
-  React.ElementRef<"div">,
+  {
-  React.ComponentPropsWithoutRef<"div">
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+    ...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<
+const InputOTPSlot = (
-  React.ElementRef<"div">,
+  {
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
+    ref,
->(({ index, className, ...props }, 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<
+const InputOTPSeparator = (
-  React.ElementRef<"div">,
+  {
-  React.ComponentPropsWithoutRef<"div">
+    ref,
->(({ ...props }, ref) => (
+    ...props
-  <div ref={ref} role="separator" {...props}>
+  }: React.ComponentPropsWithoutRef<"div"> & {
-    <Dot />
+    ref: React.RefObject<React.ElementRef<"div">>;
-  </div>
+  }
-))
+) => (<div ref={ref} role="separator" {...props}>
+  <Dot />
+</div>)
 InputOTPSeparator.displayName = "InputOTPSeparator"
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

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>(
+const Input = (
-  ({ className, type, ...props }, ref) => {
+  {
-    return (
+    ref,
-      <input
+    className,
-        type={type}
+    type,
-        className={cn(
+    ...props
-          "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",
+  }: InputProps & {
-          className
+    ref: React.RefObject<HTMLInputElement>;
-        )}
-        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 }

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

src/components/ui/popover.tsx

@@ -9,23 +9,28 @@ const Popover = PopoverPrimitive.Root
 
 const PopoverTrigger = PopoverPrimitive.Trigger
 
-const PopoverContent = React.forwardRef<
+const PopoverContent = (
-  React.ElementRef<typeof PopoverPrimitive.Content>,
+  {
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+    ref,
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+    className,
-  <PopoverPrimitive.Portal>
+    align = "center",
-    <PopoverPrimitive.Content
+    sideOffset = 4,
-      ref={ref}
+    ...props
-      align={align}
+  }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
-      sideOffset={sideOffset}
+    ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
-      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",
+) => (<PopoverPrimitive.Portal>
-        className
+  <PopoverPrimitive.Content
-      )}
+    ref={ref}
-      {...props}
+    align={align}
-    />
+    sideOffset={sideOffset}
-  </PopoverPrimitive.Portal>
+    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 }

src/components/ui/table.tsx

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

src/components/ui/tabs.tsx

@@ -7,49 +7,58 @@ import { cn } from "@/lib/utils"
 
 const Tabs = TabsPrimitive.Root
 
-const TabsList = React.forwardRef<
+const TabsList = (
-  React.ElementRef<typeof TabsPrimitive.List>,
+  {
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <TabsPrimitive.List
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+  }
-      className
+) => (<TabsPrimitive.List
-    )}
+  ref={ref}
-    {...props}
+  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<
+const TabsTrigger = (
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  {
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <TabsPrimitive.Trigger
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
-      "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
+) => (<TabsPrimitive.Trigger
-    )}
+  ref={ref}
-    {...props}
+  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<
+const TabsContent = (
-  React.ElementRef<typeof TabsPrimitive.Content>,
+  {
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <TabsPrimitive.Content
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
-      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  }
-      className
+) => (<TabsPrimitive.Content
-    )}
+  ref={ref}
-    {...props}
+  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 }

src/components/ui/textarea.tsx

@@ -2,10 +2,15 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-const Textarea = React.forwardRef<
+const Textarea = (
-  HTMLTextAreaElement,
+  {
-  React.ComponentProps<"textarea">
+    ref,
->(({ className, ...props }, 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 }

src/components/ui/tooltip.tsx

@@ -11,20 +11,24 @@ const Tooltip = TooltipPrimitive.Root
 
 const TooltipTrigger = TooltipPrimitive.Trigger
 
-const TooltipContent = React.forwardRef<
+const TooltipContent = (
-  React.ElementRef<typeof TooltipPrimitive.Content>,
+  {
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+    ref,
->(({ className, sideOffset = 4, ...props }, ref) => (
+    className,
-  <TooltipPrimitive.Content
+    sideOffset = 4,
-    ref={ref}
+    ...props
-    sideOffset={sideOffset}
+  }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof TooltipPrimitive.Content>>;
-      "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
+) => (<TooltipPrimitive.Content
-    )}
+  ref={ref}
-    {...props}
+  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 }