fix codemod changes

amnet-web/src/components/ui/alert-dialog.tsx

@@ -10,43 +10,39 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal
 
-const AlertDialogOverlay = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
-    ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Overlay>>;
-  }
-) => (<AlertDialogPrimitive.Overlay
-  className={cn(
-    "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-    className
-  )}
-  {...props}
-  ref={ref}
-/>)
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      className={cn(
+        "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
-const AlertDialogContent = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
-    ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Content>>;
-  }
-) => (<AlertDialogPortal>
-  <AlertDialogOverlay />
-  <AlertDialogPrimitive.Content
-    ref={ref}
-    className={cn(
-      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-      className
-    )}
-    {...props}
-  />
-</AlertDialogPortal>)
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
 const AlertDialogHeader = ({
@@ -77,69 +73,61 @@ const AlertDialogFooter = ({
 )
 AlertDialogFooter.displayName = "AlertDialogFooter"
 
-const AlertDialogTitle = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
-    ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Title>>;
-  }
-) => (<AlertDialogPrimitive.Title
-  ref={ref}
-  className={cn("text-lg font-semibold", className)}
-  {...props}
-/>)
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 
-const AlertDialogDescription = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & {
-    ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Description>>;
-  }
-) => (<AlertDialogPrimitive.Description
-  ref={ref}
-  className={cn("text-sm text-muted-foreground", className)}
-  {...props}
-/>)
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
 AlertDialogDescription.displayName =
   AlertDialogPrimitive.Description.displayName
 
-const AlertDialogAction = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
-    ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Action>>;
-  }
-) => (<AlertDialogPrimitive.Action
-  ref={ref}
-  className={cn(buttonVariants(), className)}
-  {...props}
-/>)
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 
-const AlertDialogCancel = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
-    ref: React.RefObject<React.ElementRef<typeof AlertDialogPrimitive.Cancel>>;
-  }
-) => (<AlertDialogPrimitive.Cancel
-  ref={ref}
-  className={cn(
-    buttonVariants({ variant: "outline" }),
-    "mt-2 sm:mt-0",
-    className
-  )}
-  {...props}
-/>)
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(
+        buttonVariants({ variant: "outline" }),
+        "mt-2 sm:mt-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {

amnet-web/src/components/ui/alert.tsx

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

amnet-web/src/components/ui/button.tsx

@@ -39,23 +39,17 @@ export interface ButtonProps
   asChild?: boolean
 }
 
-const Button = (
-  {
-    ref,
-    className,
-    variant,
-    size,
-    asChild = false,
-    ...props
-  }: ButtonProps & {
-    ref?: React.RefObject<HTMLButtonElement>;
-  }
-) => {
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps) {
   const Comp = asChild ? Slot : "button"
   return (
     <Comp
       className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
       {...props}
     />
   )

amnet-web/src/components/ui/card.tsx

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

amnet-web/src/components/ui/context-menu.tsx

@@ -16,170 +16,166 @@ const ContextMenuSub = ContextMenuPrimitive.Sub
 
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 
-const ContextMenuSubTrigger = (
-  {
-    ref,
-    className,
-    inset,
-    children,
-    ...props
-  }
-) => (<ContextMenuPrimitive.SubTrigger
-  ref={ref}
-  className={cn(
-    "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-    inset && "pl-8",
-    className
-  )}
-  {...props}
->
-  {children}
-  <ChevronRight className="ml-auto h-4 w-4" />
-</ContextMenuPrimitive.SubTrigger>)
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ml-auto h-4 w-4" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
-const ContextMenuSubContent = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
-    ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.SubContent>>;
-  }
-) => (<ContextMenuPrimitive.SubContent
-  ref={ref}
-  className={cn(
-    "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-    className
-  )}
-  {...props}
-/>)
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      className={cn(
+        "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 
-const ContextMenuContent = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
-    ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Content>>;
-  }
-) => (<ContextMenuPrimitive.Portal>
-  <ContextMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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}
-  />
-</ContextMenuPrimitive.Portal>)
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        className={cn(
+          "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 
-const ContextMenuItem = (
-  {
-    ref,
-    className,
-    inset,
-    ...props
-  }
-) => (<ContextMenuPrimitive.Item
-  ref={ref}
-  className={cn(
-    "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-    inset && "pl-8",
-    className
-  )}
-  {...props}
-/>)
+function ContextMenuItem({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 
-const ContextMenuCheckboxItem = (
-  {
-    ref,
-    className,
-    children,
-    checked,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
-    ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>>;
-  }
-) => (<ContextMenuPrimitive.CheckboxItem
-  ref={ref}
-  className={cn(
-    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-    className
-  )}
-  checked={checked}
-  {...props}
->
-  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-    <ContextMenuPrimitive.ItemIndicator>
-      <Check className="h-4 w-4" />
-    </ContextMenuPrimitive.ItemIndicator>
-  </span>
-  {children}
-</ContextMenuPrimitive.CheckboxItem>)
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
 ContextMenuCheckboxItem.displayName =
   ContextMenuPrimitive.CheckboxItem.displayName
 
-const ContextMenuRadioItem = (
-  {
-    ref,
-    className,
-    children,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
-    ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.RadioItem>>;
-  }
-) => (<ContextMenuPrimitive.RadioItem
-  ref={ref}
-  className={cn(
-    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-    className
-  )}
-  {...props}
->
-  <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-    <ContextMenuPrimitive.ItemIndicator>
-      <Circle className="h-2 w-2 fill-current" />
-    </ContextMenuPrimitive.ItemIndicator>
-  </span>
-  {children}
-</ContextMenuPrimitive.RadioItem>)
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <Circle className="h-2 w-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
 
-const ContextMenuLabel = (
-  {
-    ref,
-    className,
-    inset,
-    ...props
-  }
-) => (<ContextMenuPrimitive.Label
-  ref={ref}
-  className={cn(
-    "px-2 py-1.5 text-sm font-semibold text-foreground",
-    inset && "pl-8",
-    className
-  )}
-  {...props}
-/>)
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      className={cn(
+        "px-2 py-1.5 text-sm font-semibold text-foreground",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
 
-const ContextMenuSeparator = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> & {
-    ref: React.RefObject<React.ElementRef<typeof ContextMenuPrimitive.Separator>>;
-  }
-) => (<ContextMenuPrimitive.Separator
-  ref={ref}
-  className={cn("-mx-1 my-1 h-px bg-border", className)}
-  {...props}
-/>)
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
 
 const ContextMenuShortcut = ({

amnet-web/src/components/ui/dialog.tsx

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

amnet-web/src/components/ui/drawer.tsx

@@ -20,44 +20,40 @@ const DrawerPortal = DrawerPrimitive.Portal
 
 const DrawerClose = DrawerPrimitive.Close
 
-const DrawerOverlay = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
-    ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
-  }
-) => (<DrawerPrimitive.Overlay
-  ref={ref}
-  className={cn("fixed inset-0 z-50 bg-black/80", className)}
-  {...props}
-/>)
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      className={cn("fixed inset-0 z-50 bg-black/80", className)}
+      {...props}
+    />
+  )
+}
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 
-const DrawerContent = (
-  {
-    ref,
-    className,
-    children,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
-    ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Content>>;
-  }
-) => (<DrawerPortal>
-  <DrawerOverlay />
-  <DrawerPrimitive.Content
-    ref={ref}
-    className={cn(
-      "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-      className
-    )}
-    {...props}
-  >
-    <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-    {children}
-  </DrawerPrimitive.Content>
-</DrawerPortal>)
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        className={cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
 DrawerContent.displayName = "DrawerContent"
 
 const DrawerHeader = ({
@@ -82,37 +78,33 @@ const DrawerFooter = ({
 )
 DrawerFooter.displayName = "DrawerFooter"
 
-const DrawerTitle = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
-    ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Title>>;
-  }
-) => (<DrawerPrimitive.Title
-  ref={ref}
-  className={cn(
-    "text-lg font-semibold leading-none tracking-tight",
-    className
-  )}
-  {...props}
-/>)
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 
-const DrawerDescription = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
-    ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Description>>;
-  }
-) => (<DrawerPrimitive.Description
-  ref={ref}
-  className={cn("text-sm text-muted-foreground", className)}
-  {...props}
-/>)
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName
 
 export {

amnet-web/src/components/ui/form.tsx

@@ -70,39 +70,28 @@ const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue
 )
 
-const FormItem = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.HTMLAttributes<HTMLDivElement> & {
-    ref: React.RefObject<HTMLDivElement>;
-  }
-) => {
+function FormItem({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   const id = React.useId()
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
   )
 }
 FormItem.displayName = "FormItem"
 
-const FormLabel = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
-    ref: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root>>;
-  }
-) => {
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
   const { error, formItemId } = useFormField()
 
   return (
     <Label
-      ref={ref}
       className={cn(error && "text-destructive", className)}
       htmlFor={formItemId}
       {...props}
@@ -111,19 +100,13 @@ const FormLabel = (
 }
 FormLabel.displayName = "FormLabel"
 
-const FormControl = (
-  {
-    ref,
-    ...props
-  }: React.ComponentPropsWithoutRef<typeof Slot> & {
-    ref: React.RefObject<React.ElementRef<typeof Slot>>;
-  }
-) => {
+function FormControl({
+  ...props
+}: React.ComponentProps<typeof Slot>) {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
   return (
     <Slot
-      ref={ref}
       id={formItemId}
       aria-describedby={
         !error
@@ -137,20 +120,14 @@ const FormControl = (
 }
 FormControl.displayName = "FormControl"
 
-const FormDescription = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.HTMLAttributes<HTMLParagraphElement> & {
-    ref?: React.RefObject<HTMLParagraphElement>;
-  }
-) => {
+function FormDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
   const { formDescriptionId } = useFormField()
 
   return (
     <p
-      ref={ref}
       id={formDescriptionId}
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
@@ -159,16 +136,11 @@ const FormDescription = (
 }
 FormDescription.displayName = "FormDescription"
 
-const FormMessage = (
-  {
-    ref,
-    className,
-    children,
-    ...props
-  }: React.HTMLAttributes<HTMLParagraphElement> & {
-    ref?: React.RefObject<HTMLParagraphElement>;
-  }
-) => {
+function FormMessage({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
   const { error, formMessageId } = useFormField()
   const body = error ? String(error?.message) : children
 
@@ -178,7 +150,6 @@ const FormMessage = (
 
   return (
     <p
-      ref={ref}
       id={formMessageId}
       className={cn("text-sm font-medium text-destructive", className)}
       {...props}

amnet-web/src/components/ui/input.tsx

@@ -5,16 +5,11 @@ import { cn } from "@/lib/utils"
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = (
-  {
-    ref,
-    className,
-    type,
-    ...props
-  }: InputProps & {
-    ref: React.RefObject<HTMLInputElement>;
-  }
-) => {
+function Input({
+  className,
+  type,
+  ...props
+}: InputProps) {
   return (
     <input
       type={type}
@@ -22,7 +17,6 @@ const Input = (
         "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
-      ref={ref}
       {...props}
     />
   )

amnet-web/src/components/ui/label.tsx

@@ -8,17 +8,17 @@ const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 )
 
-const Label = (
-  {
-    ref,
-    className,
-    ...props
-  }
-) => (<LabelPrimitive.Root
-  ref={ref}
-  className={cn(labelVariants(), className)}
-  {...props}
-/>)
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      className={cn(labelVariants(), className)}
+      {...props}
+    />
+  )
+}
 Label.displayName = LabelPrimitive.Root.displayName
 
 export { Label }

amnet-web/src/components/ui/separator.tsx

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

amnet-web/src/components/ui/toast.tsx

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

amnet-web/src/components/ui/tooltip.tsx

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