do react types more better too 🧠

components/ui/dropdown-menu.tsx

@@ -3,17 +3,16 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
-import type { ComponentPropsWithoutRef } from "react";
 
-const DropdownMenu = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>) => {
+const DropdownMenu = ({ ...rest }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) => {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...rest} />;
 };
 
-const DropdownMenuPortal = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>) => {
+const DropdownMenuPortal = ({ ...rest }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) => {
   return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...rest} />;
 };
 
-const DropdownMenuTrigger = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>) => {
+const DropdownMenuTrigger = ({ ...rest }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) => {
   return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...rest} />;
 };
 
@@ -21,7 +20,7 @@ const DropdownMenuContent = ({
   className,
   sideOffset = 4,
   ...rest
-}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>) => {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) => {
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
@@ -37,7 +36,7 @@ const DropdownMenuContent = ({
   );
 };
 
-const DropdownMenuGroup = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>) => {
+const DropdownMenuGroup = ({ ...rest }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) => {
   return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...rest} />;
 };
 
@@ -46,7 +45,7 @@ const DropdownMenuItem = ({
   inset,
   variant = "default",
   ...rest
-}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
   inset?: boolean;
   variant?: "default" | "destructive";
 }) => {
@@ -69,7 +68,7 @@ const DropdownMenuCheckboxItem = ({
   children,
   checked,
   ...rest
-}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>) => {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => {
   return (
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
@@ -90,7 +89,7 @@ const DropdownMenuCheckboxItem = ({
   );
 };
 
-const DropdownMenuRadioGroup = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>) => {
+const DropdownMenuRadioGroup = ({ ...rest }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) => {
   return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...rest} />;
 };
 
@@ -98,7 +97,7 @@ const DropdownMenuRadioItem = ({
   className,
   children,
   ...rest
-}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>) => {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) => {
   return (
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
@@ -122,7 +121,7 @@ const DropdownMenuLabel = ({
   className,
   inset,
   ...rest
-}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
   inset?: boolean;
 }) => {
   return (
@@ -138,7 +137,7 @@ const DropdownMenuLabel = ({
 const DropdownMenuSeparator = ({
   className,
   ...rest
-}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>) => {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) => {
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
@@ -148,7 +147,7 @@ const DropdownMenuSeparator = ({
   );
 };
 
-const DropdownMenuShortcut = ({ className, ...rest }: ComponentPropsWithoutRef<"span">) => {
+const DropdownMenuShortcut = ({ className, ...rest }: React.ComponentProps<"span">) => {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
@@ -158,7 +157,7 @@ const DropdownMenuShortcut = ({ className, ...rest }: ComponentPropsWithoutRef<"
   );
 };
 
-const DropdownMenuSub = ({ ...rest }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>) => {
+const DropdownMenuSub = ({ ...rest }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) => {
   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...rest} />;
 };
 
@@ -167,7 +166,7 @@ const DropdownMenuSubTrigger = ({
   inset,
   children,
   ...rest
-}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
   inset?: boolean;
 }) => {
   return (
@@ -189,7 +188,7 @@ const DropdownMenuSubTrigger = ({
 const DropdownMenuSubContent = ({
   className,
   ...rest
-}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>) => {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => {
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"