💩 f*ck react

src/components/ui/alert-dialog.tsx

@@ -1,7 +1,7 @@
 import { buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -9,9 +9,9 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal
 
-const AlertDialogOverlay = React.forwardRef<
+const AlertDialogOverlay = forwardRef<
-    React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
+    ComponentRef<typeof AlertDialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+    ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Overlay
         className={cn(
@@ -24,9 +24,9 @@ const AlertDialogOverlay = React.forwardRef<
 ))
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
-const AlertDialogContent = React.forwardRef<
+const AlertDialogContent = forwardRef<
-    React.ComponentRef<typeof AlertDialogPrimitive.Content>,
+    ComponentRef<typeof AlertDialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+    ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
     <AlertDialogPortal>
         <AlertDialogOverlay />
@@ -42,12 +42,12 @@ const AlertDialogContent = React.forwardRef<
 ))
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
 )
 AlertDialogHeader.displayName = "AlertDialogHeader"
 
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div
         className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
         {...props}
@@ -55,9 +55,9 @@ const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDiv
 )
 AlertDialogFooter.displayName = "AlertDialogFooter"
 
-const AlertDialogTitle = React.forwardRef<
+const AlertDialogTitle = forwardRef<
-    React.ComponentRef<typeof AlertDialogPrimitive.Title>,
+    ComponentRef<typeof AlertDialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+    ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Title
         ref={ref}
@@ -67,9 +67,9 @@ const AlertDialogTitle = React.forwardRef<
 ))
 AlertDialogTitle.displayName = "AlertDialogTitle"
 
-const AlertDialogDescription = React.forwardRef<
+const AlertDialogDescription = forwardRef<
-    React.ComponentRef<typeof AlertDialogPrimitive.Description>,
+    ComponentRef<typeof AlertDialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+    ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Description
         ref={ref}
@@ -79,17 +79,17 @@ const AlertDialogDescription = React.forwardRef<
 ))
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
 
-const AlertDialogAction = React.forwardRef<
+const AlertDialogAction = forwardRef<
-    React.ComponentRef<typeof AlertDialogPrimitive.Action>,
+    ComponentRef<typeof AlertDialogPrimitive.Action>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+    ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
 ))
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 
-const AlertDialogCancel = React.forwardRef<
+const AlertDialogCancel = forwardRef<
-    React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
+    ComponentRef<typeof AlertDialogPrimitive.Cancel>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+    ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Cancel
         ref={ref}

src/components/ui/avatar.tsx

@@ -1,10 +1,10 @@
 import { cn } from "@/lib/utils"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
-const Avatar = React.forwardRef<
+const Avatar = forwardRef<
-    React.ComponentRef<typeof AvatarPrimitive.Root>,
+    ComponentRef<typeof AvatarPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+    ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
     <AvatarPrimitive.Root
         ref={ref}
@@ -14,9 +14,9 @@ const Avatar = React.forwardRef<
 ))
 Avatar.displayName = AvatarPrimitive.Root.displayName
 
-const AvatarImage = React.forwardRef<
+const AvatarImage = forwardRef<
-    React.ComponentRef<typeof AvatarPrimitive.Image>,
+    ComponentRef<typeof AvatarPrimitive.Image>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+    ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
     <AvatarPrimitive.Image
         ref={ref}
@@ -26,9 +26,9 @@ const AvatarImage = React.forwardRef<
 ))
 AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
-const AvatarFallback = React.forwardRef<
+const AvatarFallback = forwardRef<
-    React.ComponentRef<typeof AvatarPrimitive.Fallback>,
+    ComponentRef<typeof AvatarPrimitive.Fallback>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+    ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
     <AvatarPrimitive.Fallback
         ref={ref}

src/components/ui/badge.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils"
 import { type VariantProps, cva } from "class-variance-authority"
-import * as React from "react"
+import { HTMLAttributes } from "react"
 
 const badgeVariants = cva(
     "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",
@@ -23,7 +23,7 @@ const badgeVariants = cva(
 )
 
 export interface BadgeProps
-    extends React.HTMLAttributes<HTMLDivElement>,
+    extends HTMLAttributes<HTMLDivElement>,
         VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {

src/components/ui/breadcrumb.tsx

@@ -1,17 +1,17 @@
 import { cn } from "@/lib/utils"
 import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
-import * as React from "react"
+import { forwardRef, ComponentPropsWithoutRef, ReactNode, ComponentProps } from "react"
 
-const Breadcrumb = React.forwardRef<
+const Breadcrumb = forwardRef<
     HTMLElement,
-    React.ComponentPropsWithoutRef<"nav"> & {
+    ComponentPropsWithoutRef<"nav"> & {
-        separator?: React.ReactNode
+        separator?: ReactNode
     }
 >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
 Breadcrumb.displayName = "Breadcrumb"
 
-const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+const BreadcrumbList = forwardRef<HTMLOListElement, ComponentPropsWithoutRef<"ol">>(
     ({ className, ...props }, ref) => (
         <ol
             ref={ref}
@@ -25,16 +25,16 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
 )
 BreadcrumbList.displayName = "BreadcrumbList"
 
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+const BreadcrumbItem = forwardRef<HTMLLIElement, ComponentPropsWithoutRef<"li">>(
     ({ className, ...props }, ref) => (
         <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
     ),
 )
 BreadcrumbItem.displayName = "BreadcrumbItem"
 
-const BreadcrumbLink = React.forwardRef<
+const BreadcrumbLink = forwardRef<
     HTMLAnchorElement,
-    React.ComponentPropsWithoutRef<"a"> & {
+    ComponentPropsWithoutRef<"a"> & {
         asChild?: boolean
     }
 >(({ asChild, className, ...props }, ref) => {
@@ -50,7 +50,7 @@ const BreadcrumbLink = React.forwardRef<
 })
 BreadcrumbLink.displayName = "BreadcrumbLink"
 
-const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+const BreadcrumbPage = forwardRef<HTMLSpanElement, ComponentPropsWithoutRef<"span">>(
     ({ className, ...props }, ref) => (
         <span
             ref={ref}
@@ -64,7 +64,7 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
 )
 BreadcrumbPage.displayName = "BreadcrumbPage"
 
-const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+const BreadcrumbSeparator = ({ children, className, ...props }: ComponentProps<"li">) => (
     <li
         role="presentation"
         aria-hidden="true"
@@ -76,7 +76,7 @@ const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentP
 )
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 
-const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+const BreadcrumbEllipsis = ({ className, ...props }: ComponentProps<"span">) => (
     <span
         role="presentation"
         aria-hidden="true"

src/components/ui/button.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import { Slot } from "@radix-ui/react-slot"
 import { type VariantProps, cva } from "class-variance-authority"
-import * as React from "react"
+import { forwardRef, ButtonHTMLAttributes } from "react"
 
 const buttonVariants = cva(
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -31,12 +31,12 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    extends ButtonHTMLAttributes<HTMLButtonElement>,
         VariantProps<typeof buttonVariants> {
     asChild?: boolean
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     ({ className, variant, size, asChild = false, ...props }, ref) => {
         const Comp = asChild ? Slot : "button"
         return (

src/components/ui/calendar.tsx

@@ -1,7 +1,7 @@
 import { Button, buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
-import * as React from "react"
+import { ComponentProps, useRef, useEffect } from "react"
 import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
 
 function Calendar({
@@ -13,8 +13,8 @@ function Calendar({
     formatters,
     components,
     ...props
-}: React.ComponentProps<typeof DayPicker> & {
+}: ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+    buttonVariant?: ComponentProps<typeof Button>["variant"]
 }) {
     const defaultClassNames = getDefaultClassNames()
 
@@ -148,11 +148,11 @@ function CalendarDayButton({
     day,
     modifiers,
     ...props
-}: React.ComponentProps<typeof DayButton>) {
+}: ComponentProps<typeof DayButton>) {
     const defaultClassNames = getDefaultClassNames()
 
-    const ref = React.useRef<HTMLButtonElement>(null)
+    const ref = useRef<HTMLButtonElement>(null)
-    React.useEffect(() => {
+    useEffect(() => {
         if (modifiers.focused) ref.current?.focus()
     }, [modifiers.focused])
 

src/components/ui/card.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
-import * as React from "react"
+import { forwardRef, HTMLAttributes } from "react"
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
         <div
             ref={ref}
@@ -12,14 +12,14 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
 )
 Card.displayName = "Card"
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
         <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
     ),
 )
 CardHeader.displayName = "CardHeader"
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
     ({ className, ...props }, ref) => (
         <h3
             ref={ref}
@@ -30,22 +30,22 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
 )
 CardTitle.displayName = "CardTitle"
 
-const CardDescription = React.forwardRef<
+const CardDescription = forwardRef<
     HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
+    HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
     <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
 ))
 CardDescription.displayName = "CardDescription"
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
         <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
     ),
 )
 CardContent.displayName = "CardContent"
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
         <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
     ),

src/components/ui/checkbox.tsx

@@ -1,11 +1,11 @@
 import { cn } from "@/lib/utils"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
-const Checkbox = React.forwardRef<
+const Checkbox = forwardRef<
-    React.ComponentRef<typeof CheckboxPrimitive.Root>,
+    ComponentRef<typeof CheckboxPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+    ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
     <CheckboxPrimitive.Root
         ref={ref}

src/components/ui/combobox.tsx

@@ -12,9 +12,9 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { cn } from "@/lib/utils"
 import { Check, ChevronDown } from "lucide-react"
-import * as React from "react"
+import { forwardRef, ButtonHTMLAttributes, useState } from "react"
 
-interface ComboboxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ComboboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     options: {
         label: string
         value: string
@@ -26,10 +26,10 @@ interface ComboboxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     onValueChange: (value: string) => void
 }
 
-export const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
+export const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(
     ({ options, placeholder, defaultValue, className, onValueChange, ...props }, ref) => {
-        const [open, setOpen] = React.useState(false)
+        const [open, setOpen] = useState(false)
-        const [value, setValue] = React.useState(defaultValue)
+        const [value, setValue] = useState(defaultValue)
 
         return (
             <Popover open={open} onOpenChange={setOpen}>

src/components/ui/command.tsx

@@ -3,11 +3,11 @@ import { cn } from "@/lib/utils"
 import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
 
-const Command = React.forwardRef<
+const Command = forwardRef<
-    React.ComponentRef<typeof CommandPrimitive>,
+    ComponentRef<typeof CommandPrimitive>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+    ComponentPropsWithoutRef<typeof CommandPrimitive>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive
         ref={ref}
@@ -32,9 +32,9 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
     )
 }
 
-const CommandInput = React.forwardRef<
+const CommandInput = forwardRef<
-    React.ComponentRef<typeof CommandPrimitive.Input>,
+    ComponentRef<typeof CommandPrimitive.Input>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+    ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
     <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
         <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
@@ -51,9 +51,9 @@ const CommandInput = React.forwardRef<
 
 CommandInput.displayName = CommandPrimitive.Input.displayName
 
-const CommandList = React.forwardRef<
+const CommandList = forwardRef<
-    React.ComponentRef<typeof CommandPrimitive.List>,
+    ComponentRef<typeof CommandPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+    ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.List
         ref={ref}
@@ -64,18 +64,18 @@ const CommandList = React.forwardRef<
 
 CommandList.displayName = CommandPrimitive.List.displayName
 
-const CommandEmpty = React.forwardRef<
+const CommandEmpty = forwardRef<
-    React.ComponentRef<typeof CommandPrimitive.Empty>,
+    ComponentRef<typeof CommandPrimitive.Empty>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+    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<
+const CommandGroup = forwardRef<
-    React.ComponentRef<typeof CommandPrimitive.Group>,
+    ComponentRef<typeof CommandPrimitive.Group>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+    ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.Group
         ref={ref}
@@ -89,9 +89,9 @@ const CommandGroup = React.forwardRef<
 
 CommandGroup.displayName = CommandPrimitive.Group.displayName
 
-const CommandSeparator = React.forwardRef<
+const CommandSeparator = forwardRef<
-    React.ComponentRef<typeof CommandPrimitive.Separator>,
+    ComponentRef<typeof CommandPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+    ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.Separator
         ref={ref}
@@ -101,9 +101,9 @@ const CommandSeparator = React.forwardRef<
 ))
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 
-const CommandItem = React.forwardRef<
+const CommandItem = forwardRef<
-    React.ComponentRef<typeof CommandPrimitive.Item>,
+    ComponentRef<typeof CommandPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+    ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.Item
         ref={ref}
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
 
 CommandItem.displayName = CommandPrimitive.Item.displayName
 
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => {
     return (
         <span
             className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}

src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
 
 const Dialog = DialogPrimitive.Root
 
@@ -11,9 +11,9 @@ const DialogPortal = DialogPrimitive.Portal
 
 const DialogClose = DialogPrimitive.Close
 
-const DialogOverlay = React.forwardRef<
+const DialogOverlay = forwardRef<
-    React.ComponentRef<typeof DialogPrimitive.Overlay>,
+    ComponentRef<typeof DialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+    ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Overlay
         ref={ref}
@@ -26,9 +26,9 @@ const DialogOverlay = React.forwardRef<
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
-const DialogContent = React.forwardRef<
+const DialogContent = forwardRef<
-    React.ComponentRef<typeof DialogPrimitive.Content>,
+    ComponentRef<typeof DialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+    ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
     <DialogPortal>
         <DialogOverlay />
@@ -50,7 +50,7 @@ const DialogContent = React.forwardRef<
 ))
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div
         className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
         {...props}
@@ -58,7 +58,7 @@ const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 )
 DialogHeader.displayName = "DialogHeader"
 
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div
         className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
         {...props}
@@ -66,9 +66,9 @@ const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 )
 DialogFooter.displayName = "DialogFooter"
 
-const DialogTitle = React.forwardRef<
+const DialogTitle = forwardRef<
-    React.ComponentRef<typeof DialogPrimitive.Title>,
+    ComponentRef<typeof DialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+    ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Title
         ref={ref}
@@ -78,9 +78,9 @@ const DialogTitle = React.forwardRef<
 ))
 DialogTitle.displayName = "DialogTitle"
 
-const DialogDescription = React.forwardRef<
+const DialogDescription = forwardRef<
-    React.ComponentRef<typeof DialogPrimitive.Description>,
+    ComponentRef<typeof DialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+    ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Description
         ref={ref}

src/components/ui/drawer.tsx

@@ -1,11 +1,11 @@
 import { cn } from "@/lib/utils"
-import * as React from "react"
+import { ComponentProps, forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 
 const Drawer = ({
     shouldScaleBackground = true,
     ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+}: ComponentProps<typeof DrawerPrimitive.Root>) => (
     <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
 )
 Drawer.displayName = "Drawer"
@@ -16,9 +16,9 @@ const DrawerPortal = DrawerPrimitive.Portal
 
 const DrawerClose = DrawerPrimitive.Close
 
-const DrawerOverlay = React.forwardRef<
+const DrawerOverlay = forwardRef<
-    React.ComponentRef<typeof DrawerPrimitive.Overlay>,
+    ComponentRef<typeof DrawerPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+    ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
     <DrawerPrimitive.Overlay
         ref={ref}
@@ -28,9 +28,9 @@ const DrawerOverlay = React.forwardRef<
 ))
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 
-const DrawerContent = React.forwardRef<
+const DrawerContent = forwardRef<
-    React.ComponentRef<typeof DrawerPrimitive.Content>,
+    ComponentRef<typeof DrawerPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+    ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
     <DrawerPortal>
         <DrawerOverlay />
@@ -49,19 +49,19 @@ const DrawerContent = React.forwardRef<
 ))
 DrawerContent.displayName = "DrawerContent"
 
-const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
 )
 DrawerHeader.displayName = "DrawerHeader"
 
-const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
 )
 DrawerFooter.displayName = "DrawerFooter"
 
-const DrawerTitle = React.forwardRef<
+const DrawerTitle = forwardRef<
-    React.ComponentRef<typeof DrawerPrimitive.Title>,
+    ComponentRef<typeof DrawerPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+    ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(({ className, ...props }, ref) => (
     <DrawerPrimitive.Title
         ref={ref}
@@ -71,9 +71,9 @@ const DrawerTitle = React.forwardRef<
 ))
 DrawerTitle.displayName = "DrawerTitle"
 
-const DrawerDescription = React.forwardRef<
+const DrawerDescription = forwardRef<
-    React.ComponentRef<typeof DrawerPrimitive.Description>,
+    ComponentRef<typeof DrawerPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+    ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 >(({ className, ...props }, ref) => (
     <DrawerPrimitive.Description
         ref={ref}

src/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef, HTMLAttributes } from "react"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -15,9 +15,9 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
-const DropdownMenuSubTrigger = React.forwardRef<
+const DropdownMenuSubTrigger = forwardRef<
-    React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
+    ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
         inset?: boolean
     }
 >(({ className, inset, children, ...props }, ref) => (
@@ -36,9 +36,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
 ))
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
 
-const DropdownMenuSubContent = React.forwardRef<
+const DropdownMenuSubContent = forwardRef<
-    React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+    ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+    ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
     <DropdownMenuPrimitive.SubContent
         ref={ref}
@@ -51,9 +51,9 @@ const DropdownMenuSubContent = React.forwardRef<
 ))
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
 
-const DropdownMenuContent = React.forwardRef<
+const DropdownMenuContent = forwardRef<
-    React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+    ComponentRef<typeof DropdownMenuPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+    ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
     <DropdownMenuPrimitive.Portal>
         <DropdownMenuPrimitive.Content
@@ -69,9 +69,9 @@ const DropdownMenuContent = React.forwardRef<
 ))
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
-const DropdownMenuItem = React.forwardRef<
+const DropdownMenuItem = forwardRef<
-    React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+    ComponentRef<typeof DropdownMenuPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
         inset?: boolean
     }
 >(({ className, inset, ...props }, ref) => (
@@ -87,9 +87,9 @@ const DropdownMenuItem = React.forwardRef<
 ))
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
-const DropdownMenuCheckboxItem = React.forwardRef<
+const DropdownMenuCheckboxItem = forwardRef<
-    React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+    ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+    ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
     <DropdownMenuPrimitive.CheckboxItem
         ref={ref}
@@ -110,9 +110,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 ))
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
 
-const DropdownMenuRadioItem = React.forwardRef<
+const DropdownMenuRadioItem = forwardRef<
-    React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
+    ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+    ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
     <DropdownMenuPrimitive.RadioItem
         ref={ref}
@@ -132,9 +132,9 @@ const DropdownMenuRadioItem = React.forwardRef<
 ))
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
-const DropdownMenuLabel = React.forwardRef<
+const DropdownMenuLabel = forwardRef<
-    React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+    ComponentRef<typeof DropdownMenuPrimitive.Label>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
         inset?: boolean
     }
 >(({ className, inset, ...props }, ref) => (
@@ -146,9 +146,9 @@ const DropdownMenuLabel = React.forwardRef<
 ))
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
-const DropdownMenuSeparator = React.forwardRef<
+const DropdownMenuSeparator = forwardRef<
-    React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+    ComponentRef<typeof DropdownMenuPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+    ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
     <DropdownMenuPrimitive.Separator
         ref={ref}
@@ -158,7 +158,7 @@ const DropdownMenuSeparator = React.forwardRef<
 ))
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => {
     return (
         <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
     )

src/components/ui/form.tsx

@@ -2,7 +2,7 @@ import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"
-import * as React from "react"
+import { createContext, useContext, forwardRef, HTMLAttributes, useId, ComponentRef, ComponentPropsWithoutRef } from "react"
 import {
     Controller,
     ControllerProps,
@@ -21,7 +21,7 @@ type FormFieldContextValue<
     name: TName
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
+const FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue)
 
 const FormField = <
     TFieldValues extends FieldValues = FieldValues,
@@ -37,8 +37,8 @@ const FormField = <
 }
 
 const useFormField = () => {
-    const fieldContext = React.useContext(FormFieldContext)
+    const fieldContext = useContext(FormFieldContext)
-    const itemContext = React.useContext(FormItemContext)
+    const itemContext = useContext(FormItemContext)
     const { getFieldState, formState } = useFormContext()
 
     const fieldState = getFieldState(fieldContext.name, formState)
@@ -63,11 +63,11 @@ type FormItemContextValue = {
     id: string
 }
 
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
+const FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue)
 
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const FormItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => {
-        const id = React.useId()
+        const id = useId()
 
         return (
             <FormItemContext.Provider value={{ id }}>
@@ -78,9 +78,9 @@ const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
 )
 FormItem.displayName = "FormItem"
 
-const FormLabel = React.forwardRef<
+const FormLabel = forwardRef<
-    React.ComponentRef<typeof LabelPrimitive.Root>,
+    ComponentRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+    ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
     const { error, formItemId } = useFormField()
 
@@ -95,9 +95,9 @@ const FormLabel = React.forwardRef<
 })
 FormLabel.displayName = "FormLabel"
 
-const FormControl = React.forwardRef<
+const FormControl = forwardRef<
-    React.ComponentRef<typeof Slot>,
+    ComponentRef<typeof Slot>,
-    React.ComponentPropsWithoutRef<typeof Slot>
+    ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
     const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
@@ -115,9 +115,9 @@ const FormControl = React.forwardRef<
 })
 FormControl.displayName = "FormControl"
 
-const FormDescription = React.forwardRef<
+const FormDescription = forwardRef<
     HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
+    HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
     const { formDescriptionId } = useFormField()
 
@@ -132,9 +132,9 @@ const FormDescription = React.forwardRef<
 })
 FormDescription.displayName = "FormDescription"
 
-const FormMessage = React.forwardRef<
+const FormMessage = forwardRef<
     HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
+    HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
     const { error, formMessageId } = useFormField()
     const body = error ? String(error?.message) : children

src/components/ui/input.tsx

@@ -1,9 +1,9 @@
 import { cn } from "@/lib/utils"
-import * as React from "react"
+import { forwardRef, InputHTMLAttributes } from "react"
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = forwardRef<HTMLInputElement, InputProps>(
     ({ className, type, ...props }, ref) => {
         return (
             <input

src/components/ui/label.tsx

@@ -1,15 +1,15 @@
 import { cn } from "@/lib/utils"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { type VariantProps, cva } from "class-variance-authority"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
 const labelVariants = cva(
     "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 )
 
-const Label = React.forwardRef<
+const Label = forwardRef<
-    React.ComponentRef<typeof LabelPrimitive.Root>,
+    ComponentRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+    ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
     <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
 ))

src/components/ui/navigation-menu.tsx

@@ -2,11 +2,11 @@ import { cn } from "@/lib/utils"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { ChevronDown } from "lucide-react"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
-const NavigationMenu = React.forwardRef<
+const NavigationMenu = forwardRef<
-    React.ComponentRef<typeof NavigationMenuPrimitive.Root>,
+    ComponentRef<typeof NavigationMenuPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+    ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
     <NavigationMenuPrimitive.Root
         ref={ref}
@@ -19,9 +19,9 @@ const NavigationMenu = React.forwardRef<
 ))
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 
-const NavigationMenuList = React.forwardRef<
+const NavigationMenuList = forwardRef<
-    React.ComponentRef<typeof NavigationMenuPrimitive.List>,
+    ComponentRef<typeof NavigationMenuPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+    ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 >(({ className, ...props }, ref) => (
     <NavigationMenuPrimitive.List
         ref={ref}
@@ -40,9 +40,9 @@ const navigationMenuTriggerStyle = cva(
     "group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:text-accent-foreground focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 )
 
-const NavigationMenuTrigger = React.forwardRef<
+const NavigationMenuTrigger = forwardRef<
-    React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>,
+    ComponentRef<typeof NavigationMenuPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+    ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
     <NavigationMenuPrimitive.Trigger
         ref={ref}
@@ -58,9 +58,9 @@ const NavigationMenuTrigger = React.forwardRef<
 ))
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 
-const NavigationMenuContent = React.forwardRef<
+const NavigationMenuContent = forwardRef<
-    React.ComponentRef<typeof NavigationMenuPrimitive.Content>,
+    ComponentRef<typeof NavigationMenuPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+    ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
     <NavigationMenuPrimitive.Content
         ref={ref}
@@ -75,9 +75,9 @@ NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link
 
-const NavigationMenuViewport = React.forwardRef<
+const NavigationMenuViewport = forwardRef<
-    React.ComponentRef<typeof NavigationMenuPrimitive.Viewport>,
+    ComponentRef<typeof NavigationMenuPrimitive.Viewport>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+    ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
     <div className={cn("absolute left-0 top-full flex justify-center")}>
         <NavigationMenuPrimitive.Viewport
@@ -92,9 +92,9 @@ const NavigationMenuViewport = React.forwardRef<
 ))
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName
 
-const NavigationMenuIndicator = React.forwardRef<
+const NavigationMenuIndicator = forwardRef<
-    React.ComponentRef<typeof NavigationMenuPrimitive.Indicator>,
+    ComponentRef<typeof NavigationMenuPrimitive.Indicator>,
-    React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+    ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
 >(({ className, ...props }, ref) => (
     <NavigationMenuPrimitive.Indicator
         ref={ref}

src/components/ui/pagination.tsx

@@ -1,9 +1,9 @@
 import { ButtonProps, buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
-import * as React from "react"
+import { ComponentProps, forwardRef } from "react"
 
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+const Pagination = ({ className, ...props }: ComponentProps<"nav">) => (
     <nav
         role="navigation"
         aria-label="pagination"
@@ -13,14 +13,14 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
 )
 Pagination.displayName = "Pagination"
 
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+const PaginationContent = forwardRef<HTMLUListElement, ComponentProps<"ul">>(
     ({ className, ...props }, ref) => (
         <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
     ),
 )
 PaginationContent.displayName = "PaginationContent"
 
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+const PaginationItem = forwardRef<HTMLLIElement, ComponentProps<"li">>(
     ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
 )
 PaginationItem.displayName = "PaginationItem"
@@ -28,7 +28,7 @@ PaginationItem.displayName = "PaginationItem"
 type PaginationLinkProps = {
     isActive?: boolean
 } & Pick<ButtonProps, "size"> &
-    React.ComponentProps<"a">
+    ComponentProps<"a">
 
 const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
     <a
@@ -48,7 +48,7 @@ PaginationLink.displayName = "PaginationLink"
 const PaginationPrevious = ({
     className,
     ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+}: ComponentProps<typeof PaginationLink>) => (
     <PaginationLink
         aria-label="Go to previous page"
         size="default"
@@ -61,7 +61,7 @@ const PaginationPrevious = ({
 )
 PaginationPrevious.displayName = "PaginationPrevious"
 
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+const PaginationNext = ({ className, ...props }: ComponentProps<typeof PaginationLink>) => (
     <PaginationLink
         aria-label="Go to next page"
         size="default"
@@ -74,7 +74,7 @@ const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof Pag
 )
 PaginationNext.displayName = "PaginationNext"
 
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+const PaginationEllipsis = ({ className, ...props }: ComponentProps<"span">) => (
     <span
         aria-hidden
         className={cn("flex h-9 w-9 items-center justify-center", className)}

src/components/ui/popover.tsx

@@ -1,14 +1,14 @@
 import { cn } from "@/lib/utils"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
 const Popover = PopoverPrimitive.Root
 
 const PopoverTrigger = PopoverPrimitive.Trigger
 
-const PopoverContent = React.forwardRef<
+const PopoverContent = forwardRef<
-    React.ComponentRef<typeof PopoverPrimitive.Content>,
+    ComponentRef<typeof PopoverPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+    ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
     <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content

src/components/ui/scroll-area.tsx

@@ -1,10 +1,10 @@
 import { cn } from "@/lib/utils"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
-const ScrollArea = React.forwardRef<
+const ScrollArea = forwardRef<
-    React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
+    ComponentRef<typeof ScrollAreaPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+    ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
     <ScrollAreaPrimitive.Root
         ref={ref}
@@ -20,9 +20,9 @@ const ScrollArea = React.forwardRef<
 ))
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
-const ScrollBar = React.forwardRef<
+const ScrollBar = forwardRef<
-    React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+    ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+    ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
     <ScrollAreaPrimitive.ScrollAreaScrollbar
         ref={ref}

src/components/ui/select.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
 const Select = SelectPrimitive.Root
 
@@ -9,9 +9,9 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
-const SelectTrigger = React.forwardRef<
+const SelectTrigger = forwardRef<
-    React.ComponentRef<typeof SelectPrimitive.Trigger>,
+    ComponentRef<typeof SelectPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+    ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
     <SelectPrimitive.Trigger
         ref={ref}
@@ -29,9 +29,9 @@ const SelectTrigger = React.forwardRef<
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-const SelectScrollUpButton = React.forwardRef<
+const SelectScrollUpButton = forwardRef<
-    React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
+    ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+    ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
     <SelectPrimitive.ScrollUpButton
         ref={ref}
@@ -43,9 +43,9 @@ const SelectScrollUpButton = React.forwardRef<
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 
-const SelectScrollDownButton = React.forwardRef<
+const SelectScrollDownButton = forwardRef<
-    React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
+    ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+    ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
     <SelectPrimitive.ScrollDownButton
         ref={ref}
@@ -57,9 +57,9 @@ const SelectScrollDownButton = React.forwardRef<
 ))
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
 
-const SelectContent = React.forwardRef<
+const SelectContent = forwardRef<
-    React.ComponentRef<typeof SelectPrimitive.Content>,
+    ComponentRef<typeof SelectPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+    ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = "popper", ...props }, ref) => (
     <SelectPrimitive.Portal>
         <SelectPrimitive.Content
@@ -89,9 +89,9 @@ const SelectContent = React.forwardRef<
 ))
 SelectContent.displayName = SelectPrimitive.Content.displayName
 
-const SelectLabel = React.forwardRef<
+const SelectLabel = forwardRef<
-    React.ComponentRef<typeof SelectPrimitive.Label>,
+    ComponentRef<typeof SelectPrimitive.Label>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+    ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
     <SelectPrimitive.Label
         ref={ref}
@@ -101,9 +101,9 @@ const SelectLabel = React.forwardRef<
 ))
 SelectLabel.displayName = SelectPrimitive.Label.displayName
 
-const SelectItem = React.forwardRef<
+const SelectItem = forwardRef<
-    React.ComponentRef<typeof SelectPrimitive.Item>,
+    ComponentRef<typeof SelectPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+    ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => (
     <SelectPrimitive.Item
         ref={ref}
@@ -124,9 +124,9 @@ const SelectItem = React.forwardRef<
 ))
 SelectItem.displayName = SelectPrimitive.Item.displayName
 
-const SelectSeparator = React.forwardRef<
+const SelectSeparator = forwardRef<
-    React.ComponentRef<typeof SelectPrimitive.Separator>,
+    ComponentRef<typeof SelectPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+    ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
     <SelectPrimitive.Separator
         ref={ref}

src/components/ui/separator.tsx

@@ -1,10 +1,10 @@
 import { cn } from "@/lib/utils"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
-const Separator = React.forwardRef<
+const Separator = forwardRef<
-    React.ComponentRef<typeof SeparatorPrimitive.Root>,
+    ComponentRef<typeof SeparatorPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+    ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
     <SeparatorPrimitive.Root
         ref={ref}

src/components/ui/switch.tsx

@@ -1,10 +1,10 @@
 import { cn } from "@/lib/utils"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
-const Switch = React.forwardRef<
+const Switch = forwardRef<
-    React.ComponentRef<typeof SwitchPrimitives.Root>,
+    ComponentRef<typeof SwitchPrimitives.Root>,
-    React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+    ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
     <SwitchPrimitives.Root
         className={cn(

src/components/ui/table.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
-import * as React from "react"
+import { forwardRef, HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from "react"
 
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(
     ({ className, ...props }, ref) => (
         <div className="relative w-full overflow-auto">
             <table
@@ -14,25 +14,25 @@ const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableE
 )
 Table.displayName = "Table"
 
-const TableHeader = React.forwardRef<
+const TableHeader = forwardRef<
     HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
+    HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
     <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 ))
 TableHeader.displayName = "TableHeader"
 
-const TableBody = React.forwardRef<
+const TableBody = forwardRef<
     HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
+    HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
     <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
 ))
 TableBody.displayName = "TableBody"
 
-const TableFooter = React.forwardRef<
+const TableFooter = forwardRef<
     HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
+    HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
     <tfoot
         ref={ref}
@@ -42,7 +42,7 @@ const TableFooter = React.forwardRef<
 ))
 TableFooter.displayName = "TableFooter"
 
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
     ({ className, ...props }, ref) => (
         <tr
             ref={ref}
@@ -56,9 +56,9 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 )
 TableRow.displayName = "TableRow"
 
-const TableHead = React.forwardRef<
+const TableHead = forwardRef<
     HTMLTableCellElement,
-    React.ThHTMLAttributes<HTMLTableCellElement>
+    ThHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
     <th
         ref={ref}
@@ -71,9 +71,9 @@ const TableHead = React.forwardRef<
 ))
 TableHead.displayName = "TableHead"
 
-const TableCell = React.forwardRef<
+const TableCell = forwardRef<
     HTMLTableCellElement,
-    React.TdHTMLAttributes<HTMLTableCellElement>
+    TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
     <td
         ref={ref}
@@ -83,9 +83,9 @@ const TableCell = React.forwardRef<
 ))
 TableCell.displayName = "TableCell"
 
-const TableCaption = React.forwardRef<
+const TableCaption = forwardRef<
     HTMLTableCaptionElement,
-    React.HTMLAttributes<HTMLTableCaptionElement>
+    HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
     <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
 ))

src/components/ui/tabs.tsx

@@ -1,12 +1,12 @@
 import { cn } from "@/lib/utils"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
-import * as React from "react"
+import { forwardRef, ComponentRef, ComponentPropsWithoutRef } from "react"
 
 const Tabs = TabsPrimitive.Root
 
-const TabsList = React.forwardRef<
+const TabsList = forwardRef<
-    React.ComponentRef<typeof TabsPrimitive.List>,
+    ComponentRef<typeof TabsPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+    ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => (
     <TabsPrimitive.List
         ref={ref}
@@ -19,9 +19,9 @@ const TabsList = React.forwardRef<
 ))
 TabsList.displayName = TabsPrimitive.List.displayName
 
-const TabsTrigger = React.forwardRef<
+const TabsTrigger = forwardRef<
-    React.ComponentRef<typeof TabsPrimitive.Trigger>,
+    ComponentRef<typeof TabsPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+    ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
 >(({ className, ...props }, ref) => (
     <TabsPrimitive.Trigger
         ref={ref}
@@ -34,9 +34,9 @@ const TabsTrigger = React.forwardRef<
 ))
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
-const TabsContent = React.forwardRef<
+const TabsContent = forwardRef<
-    React.ComponentRef<typeof TabsPrimitive.Content>,
+    ComponentRef<typeof TabsPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+    ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
     <TabsPrimitive.Content
         ref={ref}

src/components/ui/textarea.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
-import * as React from "react"
+import { forwardRef, ComponentProps } from "react"
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+const Textarea = forwardRef<HTMLTextAreaElement, ComponentProps<"textarea">>(
     ({ className, ...props }, ref) => {
         return (
             <textarea

src/components/xui/filepath.tsx

@@ -15,13 +15,13 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { formatPath } from "@/lib/utils"
-import * as React from "react"
+import { Dispatch, SetStateAction, FC, useState, Fragment } from "react"
 
 const ITEMS_TO_DISPLAY = 3
 
 interface FilepathProps {
     path: string
-    setPath: React.Dispatch<React.SetStateAction<string>>
+    setPath: Dispatch<SetStateAction<string>>
 }
 
 function pathToItems(path: string) {
@@ -38,8 +38,8 @@ function pathToItems(path: string) {
     return result
 }
 
-export const Filepath: React.FC<FilepathProps> = ({ path, setPath }) => {
+export const Filepath: FC<FilepathProps> = ({ path, setPath }) => {
-    const [open, setOpen] = React.useState(false)
+    const [open, setOpen] = useState(false)
     const items = pathToItems(formatPath(path))
 
     return (
@@ -87,7 +87,7 @@ export const Filepath: React.FC<FilepathProps> = ({ path, setPath }) => {
                     </>
                 ) : null}
                 {items.slice(-ITEMS_TO_DISPLAY).map((item, index, slicedItems) => (
-                    <React.Fragment key={index}>
+                    <Fragment key={index}>
                         <BreadcrumbItem className="overflow-auto">
                             {item.href ? (
                                 <>
@@ -107,7 +107,7 @@ export const Filepath: React.FC<FilepathProps> = ({ path, setPath }) => {
                             )}
                         </BreadcrumbItem>
                         {index !== slicedItems.length - 1 ? <BreadcrumbSeparator /> : null}
-                    </React.Fragment>
+                    </Fragment>
                 ))}
             </BreadcrumbList>
         </Breadcrumb>

src/components/xui/multi-select.tsx

@@ -38,7 +38,7 @@ import { Separator } from "@/components/ui/separator"
 import { cn } from "@/lib/utils"
 import { type VariantProps, cva } from "class-variance-authority"
 import { CheckIcon, ChevronDown, WandSparkles, XIcon } from "lucide-react"
-import * as React from "react"
+import { useState, forwardRef, KeyboardEvent } from "react"
 
 /**
  * Variants for the multi-select component to handle different styles.
@@ -129,7 +129,7 @@ interface MultiSelectProps
     className?: string
 }
 
-export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
+export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
     (
         {
             options,
@@ -146,11 +146,11 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
         },
         ref,
     ) => {
-        const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue)
+        const [selectedValues, setSelectedValues] = useState<string[]>(defaultValue)
-        const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)
+        const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-        const [isAnimating, setIsAnimating] = React.useState(false)
+        const [isAnimating, setIsAnimating] = useState(false)
 
-        const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
             if (event.key === "Enter") {
                 setIsPopoverOpen(true)
             } else if (event.key === "Backspace" && !event.currentTarget.value) {

src/components/xui/overlayless-sheet.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { type VariantProps, cva } from "class-variance-authority"
 import { X } from "lucide-react"
-import * as React from "react"
+import { ComponentPropsWithoutRef, Dispatch, SetStateAction, forwardRef, ComponentRef, HTMLAttributes } from "react"
 
 const Sheet = SheetPrimitive.Root
 
@@ -30,13 +30,13 @@ const sheetVariants = cva(
 )
 
 interface SheetContentProps
-    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
         VariantProps<typeof sheetVariants> {
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>
+    setOpen: Dispatch<SetStateAction<boolean>>
 }
 
-const SheetContent = React.forwardRef<
+const SheetContent = forwardRef<
-    React.ComponentRef<typeof SheetPrimitive.Content>,
+    ComponentRef<typeof SheetPrimitive.Content>,
     SheetContentProps
 >(({ side = "right", className, children, setOpen, ...props }, ref) => (
     <SheetPortal>
@@ -60,12 +60,12 @@ const SheetContent = React.forwardRef<
 ))
 SheetContent.displayName = SheetPrimitive.Content.displayName
 
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
 )
 SheetHeader.displayName = "SheetHeader"
 
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div
         className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
         {...props}
@@ -73,9 +73,9 @@ const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
 )
 SheetFooter.displayName = "SheetFooter"
 
-const SheetTitle = React.forwardRef<
+const SheetTitle = forwardRef<
-    React.ComponentRef<typeof SheetPrimitive.Title>,
+    ComponentRef<typeof SheetPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+    ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
     <SheetPrimitive.Title
         ref={ref}
@@ -85,9 +85,9 @@ const SheetTitle = React.forwardRef<
 ))
 SheetTitle.displayName = "SheetTitle"
 
-const SheetDescription = React.forwardRef<
+const SheetDescription = forwardRef<
-    React.ComponentRef<typeof SheetPrimitive.Description>,
+    ComponentRef<typeof SheetPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+    ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
 >(({ className, ...props }, ref) => (
     <SheetPrimitive.Description
         ref={ref}

src/hooks/useMediaQuery.tsx

@@ -1,9 +1,9 @@
-import * as React from "react"
+import { useState, useEffect } from "react"
 
 export function useMediaQuery(query: string) {
-    const [value, setValue] = React.useState(false)
+    const [value, setValue] = useState(false)
 
-    React.useEffect(() => {
+    useEffect(() => {
         function onChange(event: MediaQueryListEvent) {
             setValue(event.matches)
         }

src/main.tsx

@@ -1,27 +1,30 @@
 import { createRoot } from "react-dom/client"
 import { RouterProvider, createBrowserRouter } from "react-router-dom"
 
-import { TerminalPage } from "./components/terminal"
+import "./index.css"
-import ErrorPage from "./error-page"
+import "./lib/i18n"
+
 import { AuthProvider } from "./hooks/useAuth"
 import { NotificationProvider } from "./hooks/useNotfication"
 import { ServerProvider } from "./hooks/useServer"
-import "./index.css"
+
-import "./lib/i18n"
+import Root from "./routes/root"
-import AlertRulePage from "./routes/alert-rule"
+import ErrorPage from "./error-page"
+
+import ProtectedRoute from "./routes/protect"
 import CronPage from "./routes/cron"
-import DDNSPage from "./routes/ddns"
 import LoginPage from "./routes/login"
+import ServerPage from "./routes/server"
+import ServicePage from "./routes/service"
+import { TerminalPage } from "./components/terminal"
+import DDNSPage from "./routes/ddns"
 import NATPage from "./routes/nat"
-import NotificationPage from "./routes/notification"
 import NotificationGroupPage from "./routes/notification-group"
+import ServerGroupPage from "./routes/server-group"
+import AlertRulePage from "./routes/alert-rule"
+import NotificationPage from "./routes/notification"
 import OnlineUserPage from "./routes/online-user"
 import ProfilePage from "./routes/profile"
-import ProtectedRoute from "./routes/protect"
-import Root from "./routes/root"
-import ServerPage from "./routes/server"
-import ServerGroupPage from "./routes/server-group"
-import ServicePage from "./routes/service"
 import SettingsPage from "./routes/settings"
 import UserPage from "./routes/user"
 import WAFPage from "./routes/waf"
@@ -70,14 +73,6 @@ const router = createBrowserRouter([
                     </ServerProvider>
                 ),
             },
-            {
-                path: "/dashboard/notification",
-                element: (
-                    <NotificationProvider withNotifierGroup>
-                        <NotificationPage />
-                    </NotificationProvider>
-                ),
-            },
             {
                 path: "/dashboard/alert-rule",
                 element: (
@@ -114,6 +109,14 @@ const router = createBrowserRouter([
                 path: "/dashboard/terminal/:id",
                 element: <TerminalPage />,
             },
+            {
+                path: "/dashboard/notification",
+                element: (
+                    <NotificationProvider withNotifierGroup>
+                        <NotificationPage />
+                    </NotificationProvider>
+                ),
+            },
             {
                 path: "/dashboard/profile",
                 element: (