remove forward ref

src/components/ui/alert.tsx

@@ -22,44 +22,52 @@ const alertVariants = cva(
     },
 );
 
-const Alert = React.forwardRef<
+const Alert = (
-    HTMLDivElement,
+    {
-    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+        ref,
->(({ className, variant, ...props }, ref) => (
+        className,
-    <div
+        variant,
-        ref={ref}
+        ...props
-        role="alert"
+    }
-        className={cn(alertVariants({ variant }), className)}
+) => (<div
-        {...props}
+    ref={ref}
-    />
+    role="alert"
-));
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+/>);
 Alert.displayName = "Alert";
 
-const AlertTitle = React.forwardRef<
+const AlertTitle = (
-    HTMLParagraphElement,
+    {
-    React.HTMLAttributes<HTMLHeadingElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-    <h5
+        ...props
-        ref={ref}
+    }: React.HTMLAttributes<HTMLHeadingElement> & {
-        className={cn(
+        ref: React.RefObject<HTMLParagraphElement>;
-            "mb-1 font-medium leading-none tracking-tight",
+    }
-            className,
+) => (<h5
-        )}
+    ref={ref}
-        {...props}
+    className={cn(
-    />
+        "mb-1 font-medium leading-none tracking-tight",
-));
+        className,
+    )}
+    {...props}
+/>);
 AlertTitle.displayName = "AlertTitle";
 
-const AlertDescription = React.forwardRef<
+const AlertDescription = (
-    HTMLParagraphElement,
+    {
-    React.HTMLAttributes<HTMLParagraphElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-    <div
+        ...props
-        ref={ref}
+    }: React.HTMLAttributes<HTMLParagraphElement> & {
-        className={cn("text-sm [&_p]:leading-relaxed", className)}
+        ref: React.RefObject<HTMLParagraphElement>;
-        {...props}
+    }
-    />
+) => (<div
-));
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+/>);
 AlertDescription.displayName = "AlertDescription";
 
 export { Alert, AlertTitle, AlertDescription };

src/components/ui/avatar.tsx

@@ -5,46 +5,55 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
 import { cn } from "@app/lib/cn"
 
-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 "@app/lib/cn"
 
-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

@@ -51,32 +51,32 @@ export interface ButtonProps
     loading?: boolean; // Add loading prop
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = (
-    (
+    {
-        {
+        ref,
-            className,
+        className,
-            variant,
+        variant,
-            size,
+        size,
-            asChild = false,
+        asChild = false,
-            loading = false,
+        loading = false,
-            ...props
+        ...props
-        },
+    }: ButtonProps & {
-        ref
+        ref: React.RefObject<HTMLButtonElement>;
-    ) => {
-        const Comp = asChild ? Slot : "button";
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
-                ref={ref}
-                disabled={loading || props.disabled} // Disable button when loading
-                {...props}
-            >
-                {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {props.children}
-            </Comp>
-        );
     }
-);
+) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+        <Comp
+            className={cn(buttonVariants({ variant, size, className }))}
+            ref={ref}
+            disabled={loading || props.disabled} // Disable button when loading
+            {...props}
+        >
+            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {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 "@app/lib/cn";
 
-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",
+    }
-            className,
+) => (<div
-        )}
+    ref={ref}
-        {...props}
+    className={cn(
-    />
+        "rounded-lg border bg-card text-card-foreground",
-));
+        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 = (
-    HTMLParagraphElement,
+    {
-    React.HTMLAttributes<HTMLHeadingElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-    <h3
+        ...props
-        ref={ref}
+    }: React.HTMLAttributes<HTMLHeadingElement> & {
-        className={cn(
+        ref: React.RefObject<HTMLParagraphElement>;
-            "text-2xl font-semibold leading-none tracking-tight",
+    }
-            className,
+) => (<h3
-        )}
+    ref={ref}
-        {...props}
+    className={cn(
-    />
+        "text-2xl font-semibold leading-none tracking-tight",
-));
+        className,
+    )}
+    {...props}
+/>);
 CardTitle.displayName = "CardTitle";
 
-const CardDescription = React.forwardRef<
+const CardDescription = (
-    HTMLParagraphElement,
+    {
-    React.HTMLAttributes<HTMLParagraphElement>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-    <p
+        ...props
-        ref={ref}
+    }: React.HTMLAttributes<HTMLParagraphElement> & {
-        className={cn("text-sm text-muted-foreground pt-1", className)}
+        ref: React.RefObject<HTMLParagraphElement>;
-        {...props}
+    }
-    />
+) => (<p
-));
+    ref={ref}
+    className={cn("text-sm text-muted-foreground pt-1", 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 {

src/components/ui/checkbox.tsx

@@ -33,20 +33,24 @@ interface CheckboxProps
     extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
         VariantProps<typeof checkboxVariants> {}
 
-const Checkbox = React.forwardRef<
+const Checkbox = (
-    React.ElementRef<typeof CheckboxPrimitive.Root>,
+    {
-    CheckboxProps
+        ref,
->(({ className, variant, ...props }, ref) => (
+        className,
-    <CheckboxPrimitive.Root
+        variant,
-        ref={ref}
+        ...props
-        className={cn(checkboxVariants({ variant }), className)}
+    }: CheckboxProps & {
-        {...props}
+        ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
-    >
+    }
-        <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+) => (<CheckboxPrimitive.Root
-            <Check className="h-4 w-4" />
+    ref={ref}
-        </CheckboxPrimitive.Indicator>
+    className={cn(checkboxVariants({ variant }), className)}
-    </CheckboxPrimitive.Root>
+    {...props}
-));
+>
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 interface CheckboxWithLabelProps
@@ -54,10 +58,17 @@ interface CheckboxWithLabelProps
     label: string;
 }
 
-const CheckboxWithLabel = React.forwardRef<
+const CheckboxWithLabel = (
-    React.ElementRef<typeof Checkbox>,
+    {
-    CheckboxWithLabelProps
+        ref,
->(({ className, label, id, ...props }, ref) => {
+        className,
+        label,
+        id,
+        ...props
+    }: CheckboxWithLabelProps & {
+        ref: React.RefObject<React.ElementRef<typeof Checkbox>>;
+    }
+) => {
     return (
         <div className={cn("flex items-center space-x-2", className)}>
             <Checkbox id={id} ref={ref} {...props} />
@@ -69,7 +80,7 @@ const CheckboxWithLabel = React.forwardRef<
             </label>
         </div>
     );
-});
+};
 CheckboxWithLabel.displayName = "CheckboxWithLabel";
 
 export { Checkbox, CheckboxWithLabel };

src/components/ui/command.tsx

@@ -8,19 +8,22 @@ import { Search } from "lucide-react"
 import { cn } from "@app/lib/cn"
 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
 
 interface CommandDialogProps extends DialogProps {}
@@ -37,92 +40,109 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   )
 }
 
-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-base md: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
-      )}
-      {...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(
-      "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",
+      "flex h-11 w-full rounded-md bg-transparent py-3 text-base md: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 = (
+  {
+    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 = 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 select-none rounded-md items-center 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",
+  }
-      className,
+) => (<CommandPrimitive.Item
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  />
+    "relative flex cursor-default select-none rounded-md items-center 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",
-))
+    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/50  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/50  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-card 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-card 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/drawer.tsx

@@ -22,37 +22,44 @@ const DrawerPortal = DrawerPrimitive.Portal;
 
 const DrawerClose = DrawerPrimitive.Close;
 
-const DrawerOverlay = React.forwardRef<
+const DrawerOverlay = (
-    React.ElementRef<typeof DrawerPrimitive.Overlay>,
+    {
-    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-    <DrawerPrimitive.Overlay
+        ...props
-        ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
-        className={cn("fixed inset-0 z-50 bg-black/80", className)}
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
-        {...props}
+    }
-    />
+) => (<DrawerPrimitive.Overlay
-));
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+/>);
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
-const DrawerContent = React.forwardRef<
+const DrawerContent = (
-    React.ElementRef<typeof DrawerPrimitive.Content>,
+    {
-    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+        ref,
->(({ className, children, ...props }, ref) => (
+        className,
-    <DrawerPortal>
+        children,
-        <DrawerOverlay />
+        ...props
-        <DrawerPrimitive.Content
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
-            ref={ref}
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Content>>;
-            className={cn(
+    }
-                "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+) => (<DrawerPortal>
-                className
+    <DrawerOverlay />
-            )}
+    <DrawerPrimitive.Content
-            {...props}
+        ref={ref}
-        >
+        className={cn(
-            <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+            "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-            {children}
+            className
-        </DrawerPrimitive.Content>
+        )}
-    </DrawerPortal>
+        {...props}
-));
+    >
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+        {children}
+    </DrawerPrimitive.Content>
+</DrawerPortal>);
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
@@ -77,31 +84,37 @@ const DrawerFooter = ({
 );
 DrawerFooter.displayName = "DrawerFooter";
 
-const DrawerTitle = React.forwardRef<
+const DrawerTitle = (
-    React.ElementRef<typeof DrawerPrimitive.Title>,
+    {
-    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-    <DrawerPrimitive.Title
+        ...props
-        ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
-        className={cn(
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Title>>;
-            "text-lg font-semibold leading-none tracking-tight",
+    }
-            className
+) => (<DrawerPrimitive.Title
-        )}
+    ref={ref}
-        {...props}
+    className={cn(
-    />
+        "text-lg font-semibold leading-none tracking-tight",
-));
+        className
+    )}
+    {...props}
+/>);
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
-const DrawerDescription = React.forwardRef<
+const DrawerDescription = (
-    React.ElementRef<typeof DrawerPrimitive.Description>,
+    {
-    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+        ref,
->(({ className, ...props }, ref) => (
+        className,
-    <DrawerPrimitive.Description
+        ...props
-        ref={ref}
+    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
-        className={cn("text-sm text-muted-foreground", className)}
+        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Description>>;
-        {...props}
+    }
-    />
+) => (<DrawerPrimitive.Description
-));
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+/>);
 DrawerDescription.displayName = DrawerPrimitive.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-2 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-2 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-2 bg-popover p-1 text-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-2 bg-popover p-1 text-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 "@app/lib/cn"
 
-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,39 +5,23 @@ import { EyeOff, Eye } from "lucide-react";
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = (
-    ({ className, type, ...props }, ref) => {
+    {
-        const [showPassword, setShowPassword] = React.useState(false);
+        ref,
-        const togglePasswordVisibility = () => setShowPassword(!showPassword);
+        className,
+        type,
+        ...props
+    }: InputProps & {
+        ref: React.RefObject<HTMLInputElement>;
+    }
+) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    const togglePasswordVisibility = () => setShowPassword(!showPassword);
 
-        return type === "password" ? (
+    return type === "password" ? (
-            <div className="relative">
+        <div className="relative">
-                <input
-                    type={showPassword ? "text" : "password"}
-                    className={cn(
-                        "flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground 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}
-                />
-                <div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400">
-                    {showPassword ? (
-                        <EyeOff
-                            className="h-4 w-4"
-                            onClick={togglePasswordVisibility}
-                        />
-                    ) : (
-                        <Eye
-                            className="h-4 w-4"
-                            onClick={togglePasswordVisibility}
-                        />
-                    )}
-                </div>
-            </div>
-        ) : (
             <input
-                type={type}
+                type={showPassword ? "text" : "password"}
                 className={cn(
                     "flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground 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
@@ -45,9 +29,32 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 ref={ref}
                 {...props}
             />
-        );
+            <div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400">
-    }
+                {showPassword ? (
-);
+                    <EyeOff
+                        className="h-4 w-4"
+                        onClick={togglePasswordVisibility}
+                    />
+                ) : (
+                    <Eye
+                        className="h-4 w-4"
+                        onClick={togglePasswordVisibility}
+                    />
+                )}
+            </div>
+        </div>
+    ) : (
+        <input
+            type={type}
+            className={cn(
+                "flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground 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

@@ -7,34 +7,42 @@ import { cn } from "@app/lib/cn"
 
 const Popover = PopoverPrimitive.Root
 
-const PopoverTrigger = React.forwardRef<
+const PopoverTrigger = (
-    React.ElementRef<typeof PopoverPrimitive.Trigger>,
+  {
-    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-    <PopoverPrimitive.Trigger
+    ...props
-        ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
-        className={cn(className, "rounded-md")}
+    ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Trigger>>;
-        {...props}
+  }
-    />
+) => (<PopoverPrimitive.Trigger
-))
+    ref={ref}
+    className={cn(className, "rounded-md")}
+    {...props}
+/>)
 
-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-2 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-2 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/radio-group.tsx

@@ -6,10 +6,15 @@ import { Circle } from "lucide-react"
 
 import { cn } from "@app/lib/cn"
 
-const RadioGroup = React.forwardRef<
+const RadioGroup = (
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  {
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+    ref,
->(({ className, ...props }, ref) => {
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
+    ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
+  }
+) => {
   return (
     <RadioGroupPrimitive.Root
       className={cn("grid gap-2", className)}
@@ -17,13 +22,18 @@ const RadioGroup = React.forwardRef<
       ref={ref}
     />
   )
-})
+}
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
-const RadioGroupItem = React.forwardRef<
+const RadioGroupItem = (
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  {
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+    ref,
->(({ className, ...props }, ref) => {
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
+  }
+) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
@@ -38,7 +48,7 @@ const RadioGroupItem = React.forwardRef<
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
-})
+}
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
 
 export { RadioGroup, RadioGroupItem }

src/components/ui/select.tsx

@@ -12,139 +12,163 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
-const SelectTrigger = React.forwardRef<
+const SelectTrigger = (
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  {
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+    ref,
->(({ className, children, ...props }, ref) => (
+    className,
-  <SelectPrimitive.Trigger
+    children,
-    ref={ref}
+    ...props
-    className={cn(
+  }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
-      "flex h-9 w-full items-center justify-between border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+    ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
-      "rounded-md",
+  }
-      className
+) => (<SelectPrimitive.Trigger
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  >
+    "flex h-9 w-full items-center justify-between border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-    {children}
+    "rounded-md",
-    <SelectPrimitive.Icon asChild>
+    className
-      <ChevronDown className="h-4 w-4 opacity-50" />
+  )}
-    </SelectPrimitive.Icon>
+  {...props}
-  </SelectPrimitive.Trigger>
+>
-))
+  {children}
+  <SelectPrimitive.Icon asChild>
+    <ChevronDown className="h-4 w-4 opacity-50" />
+  </SelectPrimitive.Icon>
+</SelectPrimitive.Trigger>)
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-const SelectScrollUpButton = React.forwardRef<
+const SelectScrollUpButton = (
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  {
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <SelectPrimitive.ScrollUpButton
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
-      "flex cursor-default items-center justify-center py-1",
+  }
-      className
+) => (<SelectPrimitive.ScrollUpButton
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  >
+    "flex cursor-default items-center justify-center py-1",
-    <ChevronUp className="h-4 w-4" />
+    className
-  </SelectPrimitive.ScrollUpButton>
+  )}
-))
+  {...props}
+>
+  <ChevronUp className="h-4 w-4" />
+</SelectPrimitive.ScrollUpButton>)
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 
-const SelectScrollDownButton = React.forwardRef<
+const SelectScrollDownButton = (
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  {
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <SelectPrimitive.ScrollDownButton
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;
-      "flex cursor-default items-center justify-center py-1",
+  }
-      className
+) => (<SelectPrimitive.ScrollDownButton
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  >
+    "flex cursor-default items-center justify-center py-1",
-    <ChevronDown className="h-4 w-4" />
+    className
-  </SelectPrimitive.ScrollDownButton>
+  )}
-))
+  {...props}
+>
+  <ChevronDown className="h-4 w-4" />
+</SelectPrimitive.ScrollDownButton>)
 SelectScrollDownButton.displayName =
   SelectPrimitive.ScrollDownButton.displayName
 
-const SelectContent = React.forwardRef<
+const SelectContent = (
-  React.ElementRef<typeof SelectPrimitive.Content>,
+  {
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+    ref,
->(({ className, children, position = "popper", ...props }, ref) => (
+    className,
-  <SelectPrimitive.Portal>
+    children,
-    <SelectPrimitive.Content
+    position = "popper",
-      ref={ref}
+    ...props
-      className={cn(
+  }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover 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",
+    ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
-        position === "popper" &&
+  }
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+) => (<SelectPrimitive.Portal>
-        className
+  <SelectPrimitive.Content
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover 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",
+      position === "popper" &&
+        "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     )}
+    position={position}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <SelectScrollUpButton />
-      <SelectPrimitive.ItemIndicator>
+    <SelectPrimitive.Viewport
-        <Check className="h-4 w-4" />
+      className={cn(
-      </SelectPrimitive.ItemIndicator>
+        "p-1",
-    </span>
+        position === "popper" &&
+          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+      )}
+    >
+      {children}
+    </SelectPrimitive.Viewport>
+    <SelectScrollDownButton />
+  </SelectPrimitive.Content>
+</SelectPrimitive.Portal>)
+SelectContent.displayName = SelectPrimitive.Content.displayName
 
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+const SelectLabel = (
-  </SelectPrimitive.Item>
+  {
-))
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
+    ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Label>>;
+  }
+) => (<SelectPrimitive.Label
+  ref={ref}
+  className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+  {...props}
+/>)
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = (
+  {
+    ref,
+    className,
+    children,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+    ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Item>>;
+  }
+) => (<SelectPrimitive.Item
+  ref={ref}
+  className={cn(
+    "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden 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">
+    <SelectPrimitive.ItemIndicator>
+      <Check className="h-4 w-4" />
+    </SelectPrimitive.ItemIndicator>
+  </span>
+  <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+</SelectPrimitive.Item>)
 SelectItem.displayName = SelectPrimitive.Item.displayName
 
-const SelectSeparator = React.forwardRef<
+const SelectSeparator = (
-  React.ElementRef<typeof SelectPrimitive.Separator>,
+  {
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <SelectPrimitive.Separator
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
-    {...props}
+  }
-  />
+) => (<SelectPrimitive.Separator
-))
+  ref={ref}
+  className={cn("-mx-1 my-1 h-px bg-muted", className)}
+  {...props}
+/>)
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {

src/components/ui/separator.tsx

@@ -5,27 +5,27 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
 import { cn } from "@app/lib/cn"
 
-const Separator = React.forwardRef<
+const Separator = (
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  {
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+    ref,
->(
+    className,
-  (
+    orientation = "horizontal",
-    { className, orientation = "horizontal", decorative = true, ...props },
+    decorative = true,
-    ref
+    ...props
-  ) => (
+  }: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
-    <SeparatorPrimitive.Root
+    ref: React.RefObject<React.ElementRef<typeof SeparatorPrimitive.Root>>;
-      ref={ref}
+  }
-      decorative={decorative}
+) => (<SeparatorPrimitive.Root
-      orientation={orientation}
+  ref={ref}
-      className={cn(
+  decorative={decorative}
-        "shrink-0 bg-border",
+  orientation={orientation}
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+  className={cn(
-        className
+    "shrink-0 bg-border",
-      )}
+    orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      {...props}
+    className
-    />
+  )}
-  )
+  {...props}
-)
+/>)
 Separator.displayName = SeparatorPrimitive.Root.displayName
 
 export { Separator }

src/components/ui/sheet.tsx

@@ -15,19 +15,22 @@ const SheetClose = SheetPrimitive.Close
 
 const SheetPortal = SheetPrimitive.Portal
 
-const SheetOverlay = React.forwardRef<
+const SheetOverlay = (
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  {
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <SheetPrimitive.Overlay
+    ...props
-    className={cn(
+  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
-      "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",
+    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Overlay>>;
-      className
+  }
-    )}
+) => (<SheetPrimitive.Overlay
-    {...props}
+  className={cn(
-    ref={ref}
+    "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}
+  ref={ref}
+/>)
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
@@ -53,25 +56,30 @@ interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
-const SheetContent = React.forwardRef<
+const SheetContent = (
-  React.ElementRef<typeof SheetPrimitive.Content>,
+  {
-  SheetContentProps
+    ref,
->(({ side = "right", className, children, ...props }, ref) => (
+    side = "right",
-  <SheetPortal>
+    className,
-    <SheetOverlay />
+    children,
-    <SheetPrimitive.Content
+    ...props
-      ref={ref}
+  }: SheetContentProps & {
-      className={cn(sheetVariants({ side }), className)}
+    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Content>>;
-      {...props}
+  }
-    >
+) => (<SheetPortal>
-      {children}
+  <SheetOverlay />
-      {/* <SheetPrimitive.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-secondary"> */}
+  <SheetPrimitive.Content
-      {/*   <X className="h-4 w-4" /> */}
+    ref={ref}
-      {/*   <span className="sr-only">Close</span> */}
+    className={cn(sheetVariants({ side }), className)}
-      {/* </SheetPrimitive.Close> */}
+    {...props}
-    </SheetPrimitive.Content>
+  >
-  </SheetPortal>
+    {children}
-))
+    {/* <SheetPrimitive.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-secondary"> */}
+    {/*   <X className="h-4 w-4" /> */}
+    {/*   <span className="sr-only">Close</span> */}
+    {/* </SheetPrimitive.Close> */}
+  </SheetPrimitive.Content>
+</SheetPortal>)
 SheetContent.displayName = SheetPrimitive.Content.displayName
 
 const SheetHeader = ({
@@ -102,28 +110,34 @@ const SheetFooter = ({
 )
 SheetFooter.displayName = "SheetFooter"
 
-const SheetTitle = React.forwardRef<
+const SheetTitle = (
-  React.ElementRef<typeof SheetPrimitive.Title>,
+  {
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <SheetPrimitive.Title
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
-    className={cn("text-lg font-semibold text-foreground", className)}
+    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Title>>;
-    {...props}
+  }
-  />
+) => (<SheetPrimitive.Title
-))
+  ref={ref}
+  className={cn("text-lg font-semibold text-foreground", className)}
+  {...props}
+/>)
 SheetTitle.displayName = SheetPrimitive.Title.displayName
 
-const SheetDescription = React.forwardRef<
+const SheetDescription = (
-  React.ElementRef<typeof SheetPrimitive.Description>,
+  {
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <SheetPrimitive.Description
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
-    className={cn("text-sm text-muted-foreground", className)}
+    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Description>>;
-    {...props}
+  }
-  />
+) => (<SheetPrimitive.Description
-))
+  ref={ref}
+  className={cn("text-sm text-muted-foreground", className)}
+  {...props}
+/>)
 SheetDescription.displayName = SheetPrimitive.Description.displayName
 
 export {

src/components/ui/switch.tsx

@@ -5,25 +5,28 @@ import * as SwitchPrimitives from "@radix-ui/react-switch"
 
 import { cn } from "@app/lib/cn"
 
-const Switch = React.forwardRef<
+const Switch = (
-  React.ElementRef<typeof SwitchPrimitives.Root>,
+  {
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <SwitchPrimitives.Root
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+    ref: React.RefObject<React.ElementRef<typeof SwitchPrimitives.Root>>;
+  }
+) => (<SwitchPrimitives.Root
+  className={cn(
+    "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+    className
+  )}
+  {...props}
+  ref={ref}
+>
+  <SwitchPrimitives.Thumb
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-      className
     )}
-    {...props}
+  />
-    ref={ref}
+</SwitchPrimitives.Root>)
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-      )}
-    />
-  </SwitchPrimitives.Root>
-))
 Switch.displayName = SwitchPrimitives.Root.displayName
 
 export { Switch }

src/components/ui/table.tsx

@@ -6,107 +6,131 @@ export function TableContainer({ children }: { children: React.ReactNode }) {
     return <div className="border rounded-lg bg-card">{children}</div>
 }
 
-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 ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+    ...props
-))
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref: React.RefObject<HTMLTableSectionElement>;
+  }
+) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
 TableHeader.displayName = "TableHeader"
 
-const TableBody = React.forwardRef<
+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 data-[state=selected]:bg-muted",
+  }
-      className
+) => (<tr
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  />
+    "border-b transition-colors 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-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+  }
-      className
+) => (<th
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  />
+    "h-10 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-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    ref: React.RefObject<HTMLTableCellElement>;
-    {...props}
+  }
-  />
+) => (<td
-))
+  ref={ref}
+  className={cn("p-3 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 "@app/lib/cn"
 
 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",
+  }
-      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",
-))
+    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-6 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-6 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

@@ -5,20 +5,26 @@ import { cn } from "@app/lib/cn"
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = (
-  ({ className, ...props }, ref) => {
+  {
-    return (
+    ref,
-      <textarea
+    className,
-        className={cn(
+    ...props
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  }: TextareaProps & {
-          className
+    ref: React.RefObject<HTMLTextAreaElement>;
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
   }
-)
+) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-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}
+    />
+  )
+}
 Textarea.displayName = "Textarea"
 
 export { Textarea }

src/components/ui/toast.tsx

@@ -9,19 +9,22 @@ import { cn } from "@app/lib/cn"
 
 const ToastProvider = ToastPrimitives.Provider
 
-const ToastViewport = React.forwardRef<
+const ToastViewport = (
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  {
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <ToastPrimitives.Viewport
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
-      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+  }
-      className
+) => (<ToastPrimitives.Viewport
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  />
+    "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-))
+    className
+  )}
+  {...props}
+/>)
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
@@ -40,11 +43,14 @@ const toastVariants = cva(
   }
 )
 
-const Toast = React.forwardRef<
+const Toast = (
-  React.ElementRef<typeof ToastPrimitives.Root>,
+  {
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    ref,
-    VariantProps<typeof toastVariants>
+    className,
->(({ className, variant, ...props }, ref) => {
+    variant,
+    ...props
+  }
+) => {
   return (
     <ToastPrimitives.Root
       ref={ref}
@@ -52,64 +58,76 @@ const Toast = React.forwardRef<
       {...props}
     />
   )
-})
+}
 Toast.displayName = ToastPrimitives.Root.displayName
 
-const ToastAction = React.forwardRef<
+const ToastAction = (
-  React.ElementRef<typeof ToastPrimitives.Action>,
+  {
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <ToastPrimitives.Action
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
+  }
-      className
+) => (<ToastPrimitives.Action
-    )}
+  ref={ref}
-    {...props}
+  className={cn(
-  />
+    "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
-))
+    className
+  )}
+  {...props}
+/>)
 ToastAction.displayName = ToastPrimitives.Action.displayName
 
-const ToastClose = React.forwardRef<
+const ToastClose = (
-  React.ElementRef<typeof ToastPrimitives.Close>,
+  {
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <ToastPrimitives.Close
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
-    className={cn(
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+  }
-      className
+) => (<ToastPrimitives.Close
-    )}
+  ref={ref}
-    toast-close=""
+  className={cn(
-    {...props}
+    "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
-  >
+    className
-    <X className="h-4 w-4" />
+  )}
-  </ToastPrimitives.Close>
+  toast-close=""
-))
+  {...props}
+>
+  <X className="h-4 w-4" />
+</ToastPrimitives.Close>)
 ToastClose.displayName = ToastPrimitives.Close.displayName
 
-const ToastTitle = React.forwardRef<
+const ToastTitle = (
-  React.ElementRef<typeof ToastPrimitives.Title>,
+  {
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <ToastPrimitives.Title
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
-    className={cn("text-sm font-semibold", className)}
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
-    {...props}
+  }
-  />
+) => (<ToastPrimitives.Title
-))
+  ref={ref}
+  className={cn("text-sm font-semibold", className)}
+  {...props}
+/>)
 ToastTitle.displayName = ToastPrimitives.Title.displayName
 
-const ToastDescription = React.forwardRef<
+const ToastDescription = (
-  React.ElementRef<typeof ToastPrimitives.Description>,
+  {
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+    ref,
->(({ className, ...props }, ref) => (
+    className,
-  <ToastPrimitives.Description
+    ...props
-    ref={ref}
+  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
-    className={cn("text-sm opacity-90", className)}
+    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
-    {...props}
+  }
-  />
+) => (<ToastPrimitives.Description
-))
+  ref={ref}
+  className={cn("text-sm opacity-90", className)}
+  {...props}
+/>)
 ToastDescription.displayName = ToastPrimitives.Description.displayName
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>