fix ref type error

src/app/[orgId]/settings/sites/SitesTable.tsx

@@ -283,17 +283,46 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
             {selectedSite && (
                 <ConfirmDeleteDialog
                     open={isDeleteModalOpen}
-                    setOpen={setIsDeleteModalOpen}
+                    setOpen={(val) => {
-                    onConfirm={async () => deleteSite(selectedSite.id)}
+                        setIsDeleteModalOpen(val);
+                        setSelectedSite(null);
+                    }}
+                    dialog={
+                        <div className="space-y-4">
+                            <p>
+                                Are you sure you want to remove the site{" "}
+                                <b>{selectedSite?.name || selectedSite?.id}</b>{" "}
+                                from the organization?
+                            </p>
+
+                            <p>
+                                Once removed, the site will no longer be
+                                accessible.{" "}
+                                <b>
+                                    All resources and targets associated with
+                                    the site will also be removed.
+                                </b>
+                            </p>
+
+                            <p>
+                                To confirm, please type the name of the site
+                                below.
+                            </p>
+                        </div>
+                    }
+                    buttonText="Confirm Delete Site"
+                    onConfirm={async () => deleteSite(selectedSite!.id)}
+                    string={selectedSite.name}
                     title="Delete Site"
-                    description="Are you sure you want to delete this site? This action cannot be undone."
                 />
             )}
 
             <SitesDataTable
                 columns={columns}
                 data={rows}
-                createSite={() => router.push(`/${orgId}/settings/sites/create`)}
+                createSite={() =>
+                    router.push(`/${orgId}/settings/sites/create`)
+                }
             />
         </>
     );

src/components/tags/autocomplete.tsx

@@ -306,7 +306,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                                             role="option"
                                             aria-selected={isSelected}
                                             className={cn(
-                                                "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent aria-selected:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 hover:bg-accent",
+                                                "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",
                                                 isSelected &&
                                                     "bg-accent text-accent-foreground",
                                                 classStyleProps?.commandItem

src/components/ui/alert.tsx

@@ -22,52 +22,44 @@ const alertVariants = cva(
     },
 );
 
-const Alert = (
+const Alert = React.forwardRef<
-    {
+    HTMLDivElement,
-        ref,
+    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
-        className,
+>(({ className, variant, ...props }, ref) => (
-        variant,
+    <div
-        ...props
+        ref={ref}
-    }
+        role="alert"
-) => (<div
+        className={cn(alertVariants({ variant }), className)}
-    ref={ref}
+        {...props}
-    role="alert"
+    />
-    className={cn(alertVariants({ variant }), className)}
+));
-    {...props}
-/>);
 Alert.displayName = "Alert";
 
-const AlertTitle = (
+const AlertTitle = React.forwardRef<
-    {
+    HTMLParagraphElement,
-        ref,
+    React.HTMLAttributes<HTMLHeadingElement>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <h5
-    }: React.HTMLAttributes<HTMLHeadingElement> & {
+        ref={ref}
-        ref: React.RefObject<HTMLParagraphElement>;
+        className={cn(
-    }
+            "mb-1 font-medium leading-none tracking-tight",
-) => (<h5
+            className,
-    ref={ref}
+        )}
-    className={cn(
+        {...props}
-        "mb-1 font-medium leading-none tracking-tight",
+    />
-        className,
+));
-    )}
-    {...props}
-/>);
 AlertTitle.displayName = "AlertTitle";
 
-const AlertDescription = (
+const AlertDescription = React.forwardRef<
-    {
+    HTMLParagraphElement,
-        ref,
+    React.HTMLAttributes<HTMLParagraphElement>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <div
-    }: React.HTMLAttributes<HTMLParagraphElement> & {
+        ref={ref}
-        ref: React.RefObject<HTMLParagraphElement>;
+        className={cn("text-sm [&_p]:leading-relaxed", className)}
-    }
+        {...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,55 +5,46 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
 import { cn } from "@app/lib/cn"
 
-const Avatar = (
+const Avatar = React.forwardRef<
-  {
+  React.ElementRef<typeof AvatarPrimitive.Root>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <AvatarPrimitive.Root
-  }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
+    className={cn(
-  }
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-) => (<AvatarPrimitive.Root
+      className
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+  />
-    className
+))
-  )}
-  {...props}
-/>)
 Avatar.displayName = AvatarPrimitive.Root.displayName
 
-const AvatarImage = (
+const AvatarImage = React.forwardRef<
-  {
+  React.ElementRef<typeof AvatarPrimitive.Image>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <AvatarPrimitive.Image
-  }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
+    className={cn("aspect-square h-full w-full", className)}
-  }
+    {...props}
-) => (<AvatarPrimitive.Image
+  />
-  ref={ref}
+))
-  className={cn("aspect-square h-full w-full", className)}
-  {...props}
-/>)
 AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
-const AvatarFallback = (
+const AvatarFallback = React.forwardRef<
-  {
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <AvatarPrimitive.Fallback
-  }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
+    className={cn(
-  }
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-) => (<AvatarPrimitive.Fallback
+      className
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "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/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@app/lib/cn";
 
 const badgeVariants = cva(
-    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
     {
         variants: {
             variant: {

src/components/ui/breadcrumb.tsx

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

src/components/ui/button.tsx

@@ -6,7 +6,7 @@ import { cn } from "@app/lib/cn";
 import { Loader2 } from "lucide-react";
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center rounded-full whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    "inline-flex items-center justify-center rounded-full whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
     {
         variants: {
             variant: {
@@ -51,32 +51,32 @@ export interface ButtonProps
     loading?: boolean; // Add loading prop
 }
 
-const Button = (
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    {
+    (
-        ref,
+        {
-        className,
+            className,
-        variant,
+            variant,
-        size,
+            size,
-        asChild = false,
+            asChild = false,
-        loading = false,
+            loading = false,
-        ...props
+            ...props
-    }: ButtonProps & {
+        },
-        ref: React.RefObject<HTMLButtonElement>;
+        ref
+    ) => {
+        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,96 +2,78 @@ import * as React from "react";
 
 import { cn } from "@app/lib/cn";
 
-const Card = (
+const Card = React.forwardRef<
-    {
+    HTMLDivElement,
-        ref,
+    React.HTMLAttributes<HTMLDivElement>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <div
-    }: React.HTMLAttributes<HTMLDivElement> & {
+        ref={ref}
-        ref: React.RefObject<HTMLDivElement>;
+        className={cn(
-    }
+            "rounded-lg border bg-card text-card-foreground",
-) => (<div
+            className,
-    ref={ref}
+        )}
-    className={cn(
+        {...props}
-        "rounded-lg border bg-card text-card-foreground",
+    />
-        className,
+));
-    )}
-    {...props}
-/>);
 Card.displayName = "Card";
 
-const CardHeader = (
+const CardHeader = React.forwardRef<
-    {
+    HTMLDivElement,
-        ref,
+    React.HTMLAttributes<HTMLDivElement>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <div
-    }: React.HTMLAttributes<HTMLDivElement> & {
+        ref={ref}
-        ref: React.RefObject<HTMLDivElement>;
+        className={cn("flex flex-col space-y-1.5 p-6", className)}
-    }
+        {...props}
-) => (<div
+    />
-    ref={ref}
+));
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-/>);
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = (
+const CardTitle = React.forwardRef<
-    {
+    HTMLParagraphElement,
-        ref,
+    React.HTMLAttributes<HTMLHeadingElement>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <h3
-    }: React.HTMLAttributes<HTMLHeadingElement> & {
+        ref={ref}
-        ref: React.RefObject<HTMLParagraphElement>;
+        className={cn(
-    }
+            "text-2xl font-semibold leading-none tracking-tight",
-) => (<h3
+            className,
-    ref={ref}
+        )}
-    className={cn(
+        {...props}
-        "text-2xl font-semibold leading-none tracking-tight",
+    />
-        className,
+));
-    )}
-    {...props}
-/>);
 CardTitle.displayName = "CardTitle";
 
-const CardDescription = (
+const CardDescription = React.forwardRef<
-    {
+    HTMLParagraphElement,
-        ref,
+    React.HTMLAttributes<HTMLParagraphElement>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <p
-    }: React.HTMLAttributes<HTMLParagraphElement> & {
+        ref={ref}
-        ref: React.RefObject<HTMLParagraphElement>;
+        className={cn("text-sm text-muted-foreground pt-1", className)}
-    }
+        {...props}
-) => (<p
+    />
-    ref={ref}
+));
-    className={cn("text-sm text-muted-foreground pt-1", className)}
-    {...props}
-/>);
 CardDescription.displayName = "CardDescription";
 
-const CardContent = (
+const CardContent = React.forwardRef<
-    {
+    HTMLDivElement,
-        ref,
+    React.HTMLAttributes<HTMLDivElement>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-    }: React.HTMLAttributes<HTMLDivElement> & {
+));
-        ref: React.RefObject<HTMLDivElement>;
-    }
-) => (<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />);
 CardContent.displayName = "CardContent";
 
-const CardFooter = (
+const CardFooter = React.forwardRef<
-    {
+    HTMLDivElement,
-        ref,
+    React.HTMLAttributes<HTMLDivElement>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <div
-    }: React.HTMLAttributes<HTMLDivElement> & {
+        ref={ref}
-        ref: React.RefObject<HTMLDivElement>;
+        className={cn("flex items-center p-6 pt-0", className)}
-    }
+        {...props}
-) => (<div
+    />
-    ref={ref}
+));
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-/>);
 CardFooter.displayName = "CardFooter";
 
 export {

src/components/ui/checkbox.tsx

@@ -9,7 +9,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 // Define checkbox variants
 const checkboxVariants = cva(
-    "peer h-4 w-4 shrink-0 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    "peer h-4 w-4 shrink-0 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
     {
         variants: {
             variant: {
@@ -33,24 +33,20 @@ interface CheckboxProps
     extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
         VariantProps<typeof checkboxVariants> {}
 
-const Checkbox = (
+const Checkbox = React.forwardRef<
-    {
+    React.ElementRef<typeof CheckboxPrimitive.Root>,
-        ref,
+    CheckboxProps
-        className,
+>(({ className, variant, ...props }, ref) => (
-        variant,
+    <CheckboxPrimitive.Root
-        ...props
+        ref={ref}
-    }: CheckboxProps & {
+        className={cn(checkboxVariants({ variant }), className)}
-        ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
+        {...props}
-    }
+    >
-) => (<CheckboxPrimitive.Root
+        <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
-    ref={ref}
+            <Check className="h-4 w-4" />
-    className={cn(checkboxVariants({ variant }), className)}
+        </CheckboxPrimitive.Indicator>
-    {...props}
+    </CheckboxPrimitive.Root>
->
+));
-    <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
@@ -58,17 +54,10 @@ interface CheckboxWithLabelProps
     label: string;
 }
 
-const CheckboxWithLabel = (
+const CheckboxWithLabel = React.forwardRef<
-    {
+    React.ElementRef<typeof Checkbox>,
-        ref,
+    CheckboxWithLabelProps
-        className,
+>(({ className, label, id, ...props }, ref) => {
-        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} />
@@ -80,7 +69,7 @@ const CheckboxWithLabel = (
             </label>
         </div>
     );
-};
+});
 CheckboxWithLabel.displayName = "CheckboxWithLabel";
 
 export { Checkbox, CheckboxWithLabel };

src/components/ui/command.tsx

@@ -8,22 +8,19 @@ import { Search } from "lucide-react"
 import { cn } from "@app/lib/cn"
 import { Dialog, DialogContent } from "@/components/ui/dialog"
 
-const Command = (
+const Command = React.forwardRef<
-  {
+  React.ElementRef<typeof CommandPrimitive>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <CommandPrimitive
-  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
+    className={cn(
-  }
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-) => (<CommandPrimitive
+      className
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "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 {}
@@ -40,109 +37,92 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   )
 }
 
-const CommandInput = (
+const CommandInput = React.forwardRef<
-  {
+  React.ElementRef<typeof CommandPrimitive.Input>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
+    <CommandPrimitive.Input
-  }
+      ref={ref}
-) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+      className={cn(
-  <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-base md:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-  <CommandPrimitive.Input
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "flex h-11 w-full rounded-md bg-transparent py-3 text-base md:text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
       className
     )}
     {...props}
   />
-</div>)
+))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
-    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
-  }
-) => (<CommandPrimitive.List
-  ref={ref}
-  className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-  {...props}
-/>)
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = (
-  {
-    ref,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
-    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
-  }
-) => (<CommandPrimitive.Empty
-  ref={ref}
-  className="py-6 text-center text-sm"
-  {...props}
-/>)
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
-    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
-  }
-) => (<CommandPrimitive.Group
-  ref={ref}
-  className={cn(
-    "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-    className
-  )}
-  {...props}
-/>)
 
 CommandGroup.displayName = CommandPrimitive.Group.displayName
 
-const CommandSeparator = (
+const CommandSeparator = React.forwardRef<
-  {
+  React.ElementRef<typeof CommandPrimitive.Separator>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <CommandPrimitive.Separator
-  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
+    className={cn("-mx-1 h-px bg-border", className)}
-  }
+    {...props}
-) => (<CommandPrimitive.Separator
+  />
-  ref={ref}
+))
-  className={cn("-mx-1 h-px bg-border", className)}
-  {...props}
-/>)
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 
-const CommandItem = (
+const CommandItem = React.forwardRef<
-  {
+  React.ElementRef<typeof CommandPrimitive.Item>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <CommandPrimitive.Item
-  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
+    className={cn(
-  }
+      "relative flex cursor-default select-none rounded-md items-center px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
-) => (<CommandPrimitive.Item
+      className,
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "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,50 +14,43 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = (
+const DialogOverlay = React.forwardRef<
-    {
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <DialogPrimitive.Overlay
-    }: 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 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",
+            "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}
-    >
+    />
-        {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">
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-            <X className="h-4 w-4" />
+
-            <span className="sr-only">Close</span>
+const DialogContent = React.forwardRef<
-        </DialogPrimitive.Close>
+    React.ElementRef<typeof DialogPrimitive.Content>,
-    </DialogPrimitive.Content>
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
-</DialogPortal>);
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-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-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -88,37 +81,31 @@ const DialogFooter = ({
 );
 DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = (
+const DialogTitle = React.forwardRef<
-    {
+    React.ElementRef<typeof DialogPrimitive.Title>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <DialogPrimitive.Title
-    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+        ref={ref}
-        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
+        className={cn(
-    }
+            "text-lg font-semibold leading-none tracking-tight",
-) => (<DialogPrimitive.Title
+            className
-    ref={ref}
+        )}
-    className={cn(
+        {...props}
-        "text-lg font-semibold leading-none tracking-tight",
+    />
-        className
+));
-    )}
-    {...props}
-/>);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = (
+const DialogDescription = React.forwardRef<
-    {
+    React.ElementRef<typeof DialogPrimitive.Description>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <DialogPrimitive.Description
-    }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+        ref={ref}
-        ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
+        className={cn("text-sm text-muted-foreground", className)}
-    }
+        {...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,44 +22,37 @@ const DrawerPortal = DrawerPrimitive.Portal;
 
 const DrawerClose = DrawerPrimitive.Close;
 
-const DrawerOverlay = (
+const DrawerOverlay = React.forwardRef<
-    {
+    React.ElementRef<typeof DrawerPrimitive.Overlay>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <DrawerPrimitive.Overlay
-    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
+        ref={ref}
-        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
+        className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    }
+        {...props}
-) => (<DrawerPrimitive.Overlay
+    />
-    ref={ref}
+));
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-/>);
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
-const DrawerContent = (
+const DrawerContent = React.forwardRef<
-    {
+    React.ElementRef<typeof DrawerPrimitive.Content>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
-        className,
+>(({ className, children, ...props }, ref) => (
-        children,
+    <DrawerPortal>
-        ...props
+        <DrawerOverlay />
-    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+        <DrawerPrimitive.Content
-        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Content>>;
+            ref={ref}
-    }
+            className={cn(
-) => (<DrawerPortal>
+                "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-    <DrawerOverlay />
+                className
-    <DrawerPrimitive.Content
+            )}
-        ref={ref}
+            {...props}
-        className={cn(
+        >
-            "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+            <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-            className
+            {children}
-        )}
+        </DrawerPrimitive.Content>
-        {...props}
+    </DrawerPortal>
-    >
+));
-        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-        {children}
-    </DrawerPrimitive.Content>
-</DrawerPortal>);
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
@@ -84,37 +77,31 @@ const DrawerFooter = ({
 );
 DrawerFooter.displayName = "DrawerFooter";
 
-const DrawerTitle = (
+const DrawerTitle = React.forwardRef<
-    {
+    React.ElementRef<typeof DrawerPrimitive.Title>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <DrawerPrimitive.Title
-    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
+        ref={ref}
-        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Title>>;
+        className={cn(
-    }
+            "text-lg font-semibold leading-none tracking-tight",
-) => (<DrawerPrimitive.Title
+            className
-    ref={ref}
+        )}
-    className={cn(
+        {...props}
-        "text-lg font-semibold leading-none tracking-tight",
+    />
-        className
+));
-    )}
-    {...props}
-/>);
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
-const DrawerDescription = (
+const DrawerDescription = React.forwardRef<
-    {
+    React.ElementRef<typeof DrawerPrimitive.Description>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
-        className,
+>(({ className, ...props }, ref) => (
-        ...props
+    <DrawerPrimitive.Description
-    }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
+        ref={ref}
-        ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Description>>;
+        className={cn("text-sm text-muted-foreground", className)}
-    }
+        {...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,174 +18,154 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
-const DropdownMenuSubTrigger = (
+const DropdownMenuSubTrigger = React.forwardRef<
-  {
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    className,
+    inset?: boolean
-    inset,
-    children,
-    ...props
   }
-) => (<DropdownMenuPrimitive.SubTrigger
+>(({ className, inset, children, ...props }, ref) => (
-  ref={ref}
+  <DropdownMenuPrimitive.SubTrigger
-  className={cn(
+    ref={ref}
-    "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",
+    className={cn(
-    inset && "pl-8",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-    className
+      inset && "pl-8",
-  )}
+      className
-  {...props}
+    )}
->
+    {...props}
-  {children}
+  >
-  <ChevronRight className="ml-auto h-4 w-4" />
+    {children}
-</DropdownMenuPrimitive.SubTrigger>)
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName
 
-const DropdownMenuSubContent = (
+const DropdownMenuSubContent = React.forwardRef<
-  {
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <DropdownMenuPrimitive.SubContent
-  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
-    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
-  }
-) => (<DropdownMenuPrimitive.SubContent
-  ref={ref}
-  className={cn(
-    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-    className
-  )}
-  {...props}
-/>)
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = (
-  {
-    ref,
-    className,
-    sideOffset = 4,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
-    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
-  }
-) => (<DropdownMenuPrimitive.Portal>
-  <DropdownMenuPrimitive.Content
     ref={ref}
-    sideOffset={sideOffset}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border 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",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
   />
-</DropdownMenuPrimitive.Portal>)
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-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 = (
+const DropdownMenuItem = React.forwardRef<
-  {
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    className,
+    inset?: boolean
-    inset,
-    ...props
   }
-) => (<DropdownMenuPrimitive.Item
+>(({ className, inset, ...props }, ref) => (
-  ref={ref}
+  <DropdownMenuPrimitive.Item
-  className={cn(
+    ref={ref}
-    "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",
+    className={cn(
-    inset && "pl-8",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-    className
+      inset && "pl-8",
-  )}
+      className
-  {...props}
+    )}
-/>)
+    {...props}
+  />
+))
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
-const DropdownMenuCheckboxItem = (
+const DropdownMenuCheckboxItem = React.forwardRef<
-  {
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
-    className,
+>(({ className, children, checked, ...props }, ref) => (
-    children,
+  <DropdownMenuPrimitive.CheckboxItem
-    checked,
+    ref={ref}
-    ...props
+    className={cn(
-  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none 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.CheckboxItem>>;
+      className
-  }
+    )}
-) => (<DropdownMenuPrimitive.CheckboxItem
+    checked={checked}
-  ref={ref}
+    {...props}
-  className={cn(
+  >
-    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-    className
+      <DropdownMenuPrimitive.ItemIndicator>
-  )}
+        <Check className="h-4 w-4" />
-  checked={checked}
+      </DropdownMenuPrimitive.ItemIndicator>
-  {...props}
+    </span>
->
+    {children}
-  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+  </DropdownMenuPrimitive.CheckboxItem>
-    <DropdownMenuPrimitive.ItemIndicator>
+))
-      <Check className="h-4 w-4" />
-    </DropdownMenuPrimitive.ItemIndicator>
-  </span>
-  {children}
-</DropdownMenuPrimitive.CheckboxItem>)
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName
 
-const DropdownMenuRadioItem = (
+const DropdownMenuRadioItem = React.forwardRef<
-  {
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
-    className,
+>(({ className, children, ...props }, ref) => (
-    children,
+  <DropdownMenuPrimitive.RadioItem
-    ...props
+    ref={ref}
-  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    className={cn(
-    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-  }
+      className
-) => (<DropdownMenuPrimitive.RadioItem
+    )}
-  ref={ref}
+    {...props}
-  className={cn(
+  >
-    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-    className
+      <DropdownMenuPrimitive.ItemIndicator>
-  )}
+        <Circle className="h-2 w-2 fill-current" />
-  {...props}
+      </DropdownMenuPrimitive.ItemIndicator>
->
+    </span>
-  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    {children}
-    <DropdownMenuPrimitive.ItemIndicator>
+  </DropdownMenuPrimitive.RadioItem>
-      <Circle className="h-2 w-2 fill-current" />
+))
-    </DropdownMenuPrimitive.ItemIndicator>
-  </span>
-  {children}
-</DropdownMenuPrimitive.RadioItem>)
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
-const DropdownMenuLabel = (
+const DropdownMenuLabel = React.forwardRef<
-  {
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    className,
+    inset?: boolean
-    inset,
-    ...props
   }
-) => (<DropdownMenuPrimitive.Label
+>(({ className, inset, ...props }, ref) => (
-  ref={ref}
+  <DropdownMenuPrimitive.Label
-  className={cn(
+    ref={ref}
-    "px-2 py-1.5 text-sm font-semibold",
+    className={cn(
-    inset && "pl-8",
+      "px-2 py-1.5 text-sm font-semibold",
-    className
+      inset && "pl-8",
-  )}
+      className
-  {...props}
+    )}
-/>)
+    {...props}
+  />
+))
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
-const DropdownMenuSeparator = (
+const DropdownMenuSeparator = React.forwardRef<
-  {
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <DropdownMenuPrimitive.Separator
-  }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-  }
+    {...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,15 +72,10 @@ const FormItemContext = React.createContext<FormItemContextValue>(
     {} as FormItemContextValue
 )
 
-const FormItem = (
+const FormItem = React.forwardRef<
-    {
+    HTMLDivElement,
-        ref,
+    React.HTMLAttributes<HTMLDivElement>
-        className,
+>(({ className, ...props }, ref) => {
-        ...props
-    }: React.HTMLAttributes<HTMLDivElement> & {
-        ref: React.RefObject<HTMLDivElement>;
-    }
-) => {
     const id = React.useId()
 
     return (
@@ -88,18 +83,13 @@ const FormItem = (
             <div ref={ref} className={cn("space-y-2", className)} {...props} />
         </FormItemContext.Provider>
     )
-}
+})
 FormItem.displayName = "FormItem"
 
-const FormLabel = (
+const FormLabel = React.forwardRef<
-    {
+    React.ElementRef<typeof LabelPrimitive.Root>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
-        className,
+>(({ className, ...props }, ref) => {
-        ...props
-    }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
-        ref: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root>>;
-    }
-) => {
     const { error, formItemId } = useFormField()
 
     return (
@@ -110,17 +100,13 @@ const FormLabel = (
             {...props}
         />
     )
-}
+})
 FormLabel.displayName = "FormLabel"
 
-const FormControl = (
+const FormControl = React.forwardRef<
-    {
+    React.ElementRef<typeof Slot>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof Slot>
-        ...props
+>(({ ...props }, ref) => {
-    }: React.ComponentPropsWithoutRef<typeof Slot> & {
-        ref: React.RefObject<React.ElementRef<typeof Slot>>;
-    }
-) => {
     const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
     return (
@@ -136,18 +122,13 @@ const FormControl = (
             {...props}
         />
     )
-}
+})
 FormControl.displayName = "FormControl"
 
-const FormDescription = (
+const FormDescription = React.forwardRef<
-    {
+    HTMLParagraphElement,
-        ref,
+    React.HTMLAttributes<HTMLParagraphElement>
-        className,
+>(({ className, ...props }, ref) => {
-        ...props
-    }: React.HTMLAttributes<HTMLParagraphElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => {
     const { formDescriptionId } = useFormField()
 
     return (
@@ -158,19 +139,13 @@ const FormDescription = (
             {...props}
         />
     )
-}
+})
 FormDescription.displayName = "FormDescription"
 
-const FormMessage = (
+const FormMessage = React.forwardRef<
-    {
+    HTMLParagraphElement,
-        ref,
+    React.HTMLAttributes<HTMLParagraphElement>
-        className,
+>(({ className, children, ...props }, ref) => {
-        children,
-        ...props
-    }: React.HTMLAttributes<HTMLParagraphElement> & {
-        ref: React.RefObject<HTMLParagraphElement>;
-    }
-) => {
     const { error, formMessageId } = useFormField()
     const body = error ? String(error?.message) : children
 
@@ -188,7 +163,7 @@ const FormMessage = (
             {body}
         </p>
     )
-}
+})
 FormMessage.displayName = "FormMessage"
 
 export {

src/components/ui/input-otp.tsx

@@ -6,45 +6,34 @@ import { Dot } from "lucide-react"
 
 import { cn } from "@app/lib/cn"
 
-const InputOTP = (
+const InputOTP = React.forwardRef<
-  {
+  React.ElementRef<typeof OTPInput>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
-    className,
+>(({ className, containerClassName, ...props }, ref) => (
-    containerClassName,
+  <OTPInput
-    ...props
+    ref={ref}
-  }: React.ComponentPropsWithoutRef<typeof OTPInput> & {
+    containerClassName={cn(
-    ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
-  }
+      containerClassName
-) => (<OTPInput
+    )}
-  ref={ref}
+    className={cn("disabled:cursor-not-allowed", className)}
-  containerClassName={cn(
+    {...props}
-    "flex items-center gap-2 has-disabled:opacity-50",
+  />
-    containerClassName
+))
-  )}
-  className={cn("disabled:cursor-not-allowed", className)}
-  {...props}
-/>)
 InputOTP.displayName = "InputOTP"
 
-const InputOTPGroup = (
+const InputOTPGroup = React.forwardRef<
-  {
+  React.ElementRef<"div">,
-    ref,
+  React.ComponentPropsWithoutRef<"div">
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-  }: React.ComponentPropsWithoutRef<"div"> & {
+))
-    ref: React.RefObject<React.ElementRef<"div">>;
-  }
-) => (<div ref={ref} className={cn("flex items-center", className)} {...props} />)
 InputOTPGroup.displayName = "InputOTPGroup"
 
-const InputOTPSlot = (
+const InputOTPSlot = React.forwardRef<
-  {
+  React.ElementRef<"div">,
-    ref,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
-    index,
+>(({ index, className, ...props }, ref) => {
-    className,
-    ...props
-  }
-) => {
   const inputOTPContext = React.useContext(OTPInputContext)
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
 
@@ -66,19 +55,17 @@ const InputOTPSlot = (
       )}
     </div>
   )
-}
+})
 InputOTPSlot.displayName = "InputOTPSlot"
 
-const InputOTPSeparator = (
+const InputOTPSeparator = React.forwardRef<
-  {
+  React.ElementRef<"div">,
-    ref,
+  React.ComponentPropsWithoutRef<"div">
-    ...props
+>(({ ...props }, ref) => (
-  }: React.ComponentPropsWithoutRef<"div"> & {
+  <div ref={ref} role="separator" {...props}>
-    ref: React.RefObject<React.ElementRef<"div">>;
+    <Dot />
-  }
+  </div>
-) => (<div ref={ref} role="separator" {...props}>
+))
-  <Dot />
-</div>)
 InputOTPSeparator.displayName = "InputOTPSeparator"
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

src/components/ui/input.tsx

@@ -5,56 +5,49 @@ import { EyeOff, Eye } from "lucide-react";
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
-const Input = (
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    {
+    ({ className, type, ...props }, ref) => {
-        ref,
+        const [showPassword, setShowPassword] = React.useState(false);
-        className,
+        const togglePasswordVisibility = () => setShowPassword(!showPassword);
-        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 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-none 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={showPassword ? "text" : "password"}
+                type={type}
                 className={cn(
-                    "flex h-9 w-full rounded-md border 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",
+                    "flex h-9 w-full rounded-md border 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-none 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}
-            className={cn(
-                "flex h-9 w-full rounded-md border 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 = (
+const Label = React.forwardRef<
-    {
+    React.ElementRef<typeof LabelPrimitive.Root>,
-        ref,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-        className,
+    VariantProps<typeof labelVariants>
-        ...props
+>(({ className, ...props }, ref) => (
-    }
+    <LabelPrimitive.Root
-) => (<LabelPrimitive.Root
+        ref={ref}
-    ref={ref}
+        className={cn(labelVariants(), className)}
-    className={cn(labelVariants(), className)}
+        {...props}
-    {...props}
+    />
-/>)
+))
 Label.displayName = LabelPrimitive.Root.displayName
 
 export { Label }

src/components/ui/popover.tsx

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

src/components/ui/radio-group.tsx

@@ -6,15 +6,10 @@ import { Circle } from "lucide-react"
 
 import { cn } from "@app/lib/cn"
 
-const RadioGroup = (
+const RadioGroup = React.forwardRef<
-  {
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
-    className,
+>(({ className, ...props }, ref) => {
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
-    ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
-  }
-) => {
   return (
     <RadioGroupPrimitive.Root
       className={cn("grid gap-2", className)}
@@ -22,23 +17,18 @@ const RadioGroup = (
       ref={ref}
     />
   )
-}
+})
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
-const RadioGroupItem = (
+const RadioGroupItem = React.forwardRef<
-  {
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
-    className,
+>(({ className, ...props }, ref) => {
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
-    ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
-  }
-) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -48,7 +38,7 @@ const RadioGroupItem = (
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
-}
+})
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
 
 export { RadioGroup, RadioGroupItem }

src/components/ui/select.tsx

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

src/components/ui/sheet.tsx

@@ -15,22 +15,19 @@ const SheetClose = SheetPrimitive.Close
 
 const SheetPortal = SheetPrimitive.Portal
 
-const SheetOverlay = (
+const SheetOverlay = React.forwardRef<
-  {
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <SheetPrimitive.Overlay
-  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
+    className={cn(
-    ref: React.RefObject<React.ElementRef<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",
-  }
+      className
-) => (<SheetPrimitive.Overlay
+    )}
-  className={cn(
+    {...props}
-    "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={ref}
-    className
+  />
-  )}
+))
-  {...props}
-  ref={ref}
-/>)
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
@@ -56,30 +53,25 @@ interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
-const SheetContent = (
+const SheetContent = React.forwardRef<
-  {
+  React.ElementRef<typeof SheetPrimitive.Content>,
-    ref,
+  SheetContentProps
-    side = "right",
+>(({ side = "right", className, children, ...props }, ref) => (
-    className,
+  <SheetPortal>
-    children,
+    <SheetOverlay />
-    ...props
+    <SheetPrimitive.Content
-  }: SheetContentProps & {
+      ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Content>>;
+      className={cn(sheetVariants({ side }), className)}
-  }
+      {...props}
-) => (<SheetPortal>
+    >
-  <SheetOverlay />
+      {children}
-  <SheetPrimitive.Content
+      {/* <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"> */}
-    ref={ref}
+      {/*   <X className="h-4 w-4" /> */}
-    className={cn(sheetVariants({ side }), className)}
+      {/*   <span className="sr-only">Close</span> */}
-    {...props}
+      {/* </SheetPrimitive.Close> */}
-  >
+    </SheetPrimitive.Content>
-    {children}
+  </SheetPortal>
-    {/* <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 = ({
@@ -110,34 +102,28 @@ const SheetFooter = ({
 )
 SheetFooter.displayName = "SheetFooter"
 
-const SheetTitle = (
+const SheetTitle = React.forwardRef<
-  {
+  React.ElementRef<typeof SheetPrimitive.Title>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <SheetPrimitive.Title
-  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Title>>;
+    className={cn("text-lg font-semibold text-foreground", className)}
-  }
+    {...props}
-) => (<SheetPrimitive.Title
+  />
-  ref={ref}
+))
-  className={cn("text-lg font-semibold text-foreground", className)}
-  {...props}
-/>)
 SheetTitle.displayName = SheetPrimitive.Title.displayName
 
-const SheetDescription = (
+const SheetDescription = React.forwardRef<
-  {
+  React.ElementRef<typeof SheetPrimitive.Description>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <SheetPrimitive.Description
-  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Description>>;
+    className={cn("text-sm text-muted-foreground", className)}
-  }
+    {...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,28 +5,25 @@ import * as SwitchPrimitives from "@radix-ui/react-switch"
 
 import { cn } from "@app/lib/cn"
 
-const Switch = (
+const Switch = React.forwardRef<
-  {
+  React.ElementRef<typeof SwitchPrimitives.Root>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <SwitchPrimitives.Root
-  }: 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 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(
-      "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"
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors focus-visible:outline-none 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}
-</SwitchPrimitives.Root>)
+    ref={ref}
+  >
+    <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,21 +6,18 @@ export function TableContainer({ children }: { children: React.ReactNode }) {
     return <div className="border rounded-lg bg-card">{children}</div>
 }
 
-const Table = (
+const Table = React.forwardRef<
-  {
+  HTMLTableElement,
-    ref,
+  React.HTMLAttributes<HTMLTableElement>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <div className="relative w-full overflow-auto">
-  }: React.HTMLAttributes<HTMLTableElement> & {
+    <table
-    ref: React.RefObject<HTMLTableElement>;
+      ref={ref}
-  }
+      className={cn("w-full caption-bottom text-sm", className)}
-) => (<div className="relative w-full overflow-auto">
+      {...props}
-  <table
+    />
-    ref={ref}
+  </div>
-    className={cn("w-full caption-bottom text-sm", className)}
+))
-    {...props}
-  />
-</div>)
 Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<
@@ -43,22 +40,19 @@ const TableBody = React.forwardRef<
 ))
 TableBody.displayName = "TableBody"
 
-const TableFooter = (
+const TableFooter = React.forwardRef<
-  {
+  HTMLTableSectionElement,
-    ref,
+  React.HTMLAttributes<HTMLTableSectionElement>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <tfoot
-  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref={ref}
-    ref: React.RefObject<HTMLTableSectionElement>;
+    className={cn(
-  }
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-) => (<tfoot
+      className
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
+  />
-    className
+))
-  )}
-  {...props}
-/>)
 TableFooter.displayName = "TableFooter"
 
 const TableRow = React.forwardRef<
@@ -83,7 +77,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-8 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className
     )}
     {...props}
@@ -97,28 +91,22 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn(
+    className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
-    )}
     {...props}
   />
 ))
 TableCell.displayName = "TableCell"
 
-const TableCaption = (
+const TableCaption = React.forwardRef<
-  {
+  HTMLTableCaptionElement,
-    ref,
+  React.HTMLAttributes<HTMLTableCaptionElement>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <caption
-  }: React.HTMLAttributes<HTMLTableCaptionElement> & {
+    ref={ref}
-    ref: React.RefObject<HTMLTableCaptionElement>;
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
-  }
+    {...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,58 +7,49 @@ import { cn } from "@app/lib/cn"
 
 const Tabs = TabsPrimitive.Root
 
-const TabsList = (
+const TabsList = React.forwardRef<
-  {
+  React.ElementRef<typeof TabsPrimitive.List>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <TabsPrimitive.List
-  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
+    className={cn(
-  }
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-) => (<TabsPrimitive.List
+      className
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "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 = (
+const TabsTrigger = React.forwardRef<
-  {
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <TabsPrimitive.Trigger
-  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
+    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-none 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",
-) => (<TabsPrimitive.Trigger
+      className
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "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 = (
+const TabsContent = React.forwardRef<
-  {
+  React.ElementRef<typeof TabsPrimitive.Content>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <TabsPrimitive.Content
-  }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
+    className={cn(
-  }
+      "mt-6 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-) => (<TabsPrimitive.Content
+      className
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "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,26 +5,20 @@ import { cn } from "@app/lib/cn"
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const Textarea = (
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  {
+  ({ className, ...props }, ref) => {
-    ref,
+    return (
-    className,
+      <textarea
-    ...props
+        className={cn(
-  }: TextareaProps & {
+          "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-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-    ref: React.RefObject<HTMLTextAreaElement>;
+          className
+        )}
+        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,22 +9,19 @@ import { cn } from "@app/lib/cn"
 
 const ToastProvider = ToastPrimitives.Provider
 
-const ToastViewport = (
+const ToastViewport = React.forwardRef<
-  {
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <ToastPrimitives.Viewport
-  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
+    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]",
-) => (<ToastPrimitives.Viewport
+      className
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "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(
@@ -43,14 +40,11 @@ const toastVariants = cva(
   }
 )
 
-const Toast = (
+const Toast = React.forwardRef<
-  {
+  React.ElementRef<typeof ToastPrimitives.Root>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    className,
+    VariantProps<typeof toastVariants>
-    variant,
+>(({ className, variant, ...props }, ref) => {
-    ...props
-  }
-) => {
   return (
     <ToastPrimitives.Root
       ref={ref}
@@ -58,76 +52,64 @@ const Toast = (
       {...props}
     />
   )
-}
+})
 Toast.displayName = ToastPrimitives.Root.displayName
 
-const ToastAction = (
+const ToastAction = React.forwardRef<
-  {
+  React.ElementRef<typeof ToastPrimitives.Action>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <ToastPrimitives.Action
-  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
+    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-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-) => (<ToastPrimitives.Action
+      className
-  ref={ref}
+    )}
-  className={cn(
+    {...props}
-    "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 = (
+const ToastClose = React.forwardRef<
-  {
+  React.ElementRef<typeof ToastPrimitives.Close>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <ToastPrimitives.Close
-  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
+    className={cn(
-  }
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-) => (<ToastPrimitives.Close
+      className
-  ref={ref}
+    )}
-  className={cn(
+    toast-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",
+    {...props}
-    className
+  >
-  )}
+    <X className="h-4 w-4" />
-  toast-close=""
+  </ToastPrimitives.Close>
-  {...props}
+))
->
-  <X className="h-4 w-4" />
-</ToastPrimitives.Close>)
 ToastClose.displayName = ToastPrimitives.Close.displayName
 
-const ToastTitle = (
+const ToastTitle = React.forwardRef<
-  {
+  React.ElementRef<typeof ToastPrimitives.Title>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <ToastPrimitives.Title
-  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
+    className={cn("text-sm font-semibold", className)}
-  }
+    {...props}
-) => (<ToastPrimitives.Title
+  />
-  ref={ref}
+))
-  className={cn("text-sm font-semibold", className)}
-  {...props}
-/>)
 ToastTitle.displayName = ToastPrimitives.Title.displayName
 
-const ToastDescription = (
+const ToastDescription = React.forwardRef<
-  {
+  React.ElementRef<typeof ToastPrimitives.Description>,
-    ref,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
-    className,
+>(({ className, ...props }, ref) => (
-    ...props
+  <ToastPrimitives.Description
-  }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
+    ref={ref}
-    ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
+    className={cn("text-sm opacity-90", className)}
-  }
+    {...props}
-) => (<ToastPrimitives.Description
+  />
-  ref={ref}
+))
-  className={cn("text-sm opacity-90", className)}
-  {...props}
-/>)
 ToastDescription.displayName = ToastPrimitives.Description.displayName
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>