♻️ Replace deprecated ElementRef by ComponentRef

packages/dashboard/src/module/common/component/Command/index.tsx

@@ -3,11 +3,11 @@
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import { forwardRef } from "react";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
 import styles from "./index.module.css";
 
 const Command = forwardRef<
-    ElementRef<typeof CommandPrimitive>,
+    ComponentRef<typeof CommandPrimitive>,
     ComponentPropsWithoutRef<typeof CommandPrimitive>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive
@@ -19,7 +19,7 @@ const Command = forwardRef<
 Command.displayName = CommandPrimitive.displayName;
 
 const CommandInput = forwardRef<
-    ElementRef<typeof CommandPrimitive.Input>,
+    ComponentRef<typeof CommandPrimitive.Input>,
     ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
     <div className={styles.command__inputWrapper}>
@@ -35,7 +35,7 @@ const CommandInput = forwardRef<
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = forwardRef<
-    ElementRef<typeof CommandPrimitive.List>,
+    ComponentRef<typeof CommandPrimitive.List>,
     ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.List
@@ -48,7 +48,7 @@ const CommandList = forwardRef<
 CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = forwardRef<
-    ElementRef<typeof CommandPrimitive.Empty>,
+    ComponentRef<typeof CommandPrimitive.Empty>,
     ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
     <CommandPrimitive.Empty
@@ -61,7 +61,7 @@ const CommandEmpty = forwardRef<
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = forwardRef<
-    ElementRef<typeof CommandPrimitive.Group>,
+    ComponentRef<typeof CommandPrimitive.Group>,
     ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.Group
@@ -74,7 +74,7 @@ const CommandGroup = forwardRef<
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = forwardRef<
-    ElementRef<typeof CommandPrimitive.Separator>,
+    ComponentRef<typeof CommandPrimitive.Separator>,
     ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.Separator
@@ -86,7 +86,7 @@ const CommandSeparator = forwardRef<
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = forwardRef<
-    ElementRef<typeof CommandPrimitive.Item>,
+    ComponentRef<typeof CommandPrimitive.Item>,
     ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.Item

packages/dashboard/src/module/common/component/Popover/index.tsx

@@ -2,15 +2,15 @@
 
 import { Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
 import { forwardRef } from "react";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
 import styles from "./index.module.css";
 
 const Popover = Root;
 
 const PopoverTrigger = Trigger;
 
 const PopoverContent = forwardRef<
-    ElementRef<typeof Content>,
+    ComponentRef<typeof Content>,
     ComponentPropsWithoutRef<typeof Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
     <Portal>

packages/dashboard/src/module/common/component/Separator/index.tsx

@@ -2,11 +2,11 @@
 
 import { Root } from "@radix-ui/react-separator";
 import { forwardRef } from "react";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
 import styles from "./index.module.css";
 
 export const Separator = forwardRef<
-    ElementRef<typeof Root>,
+    ComponentRef<typeof Root>,
     ComponentPropsWithoutRef<typeof Root>
 >(
     (

packages/dashboard/src/module/forms/Form/index.tsx

@@ -5,7 +5,7 @@ import { type VariantProps, cva, cx } from "class-variance-authority";
 import { createContext, forwardRef, useContext, useId } from "react";
 import type {
     ComponentPropsWithoutRef,
-    ElementRef,
+    ComponentRef,
     HTMLAttributes,
     ReactNode,
 } from "react";
@@ -129,7 +129,7 @@ export const formLabelVariants = cva(styles.form__label, {
 });
 
 const FormLabel = forwardRef<
-    ElementRef<typeof LabelPrimitive.Root>,
+    ComponentRef<typeof LabelPrimitive.Root>,
     FormLabelProps
 >(({ variant, selected, weight, className, ...props }, ref) => {
     const { error, formItemId } = useFormField();
@@ -152,7 +152,7 @@ const FormLabel = forwardRef<
 FormLabel.displayName = "FormLabel";
 
 const FormControl = forwardRef<
-    ElementRef<typeof Slot>,
+    ComponentRef<typeof Slot>,
     ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
     const { error, formItemId, formDescriptionId, formMessageId } =

packages/dashboard/src/module/forms/Label/index.tsx

@@ -3,13 +3,13 @@
 import { Root } from "@radix-ui/react-label";
 import { type VariantProps, cva } from "class-variance-authority";
 import { forwardRef } from "react";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
 import styles from "./index.module.css";
 
 const labelVariants = cva(styles.label);
 
 const Label = forwardRef<
-    ElementRef<typeof Root>,
+    ComponentRef<typeof Root>,
     ComponentPropsWithoutRef<typeof Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
     <Root ref={ref} className={labelVariants({ className })} {...props} />

packages/dashboard/src/module/forms/RadioGroup/index.tsx

@@ -2,11 +2,11 @@
 
 import { Indicator, Item, Root } from "@radix-ui/react-radio-group";
 import { forwardRef } from "react";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
 import styles from "./index.module.css";
 
 const RadioGroup = forwardRef<
-    ElementRef<typeof Root>,
+    ComponentRef<typeof Root>,
     ComponentPropsWithoutRef<typeof Root>
 >(({ className, ...props }, ref) => {
     return (
@@ -20,7 +20,7 @@ const RadioGroup = forwardRef<
 RadioGroup.displayName = Root.displayName;
 
 const RadioGroupItem = forwardRef<
-    ElementRef<typeof Item>,
+    ComponentRef<typeof Item>,
     ComponentPropsWithoutRef<typeof Item>
 >(({ className, ...props }, ref) => {
     return (

packages/dashboard/src/module/forms/Select/index.tsx

@@ -5,7 +5,7 @@ import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { forwardRef } from "react";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
 import styles from "./index.module.css";
 
 const Select = SelectPrimitive.Root;
@@ -28,7 +28,7 @@ export interface SelectTriggerProps
         VariantProps<typeof SelectTriggerVariants> {}
 
 const SelectTrigger = forwardRef<
-    ElementRef<typeof SelectPrimitive.Trigger>,
+    ComponentRef<typeof SelectPrimitive.Trigger>,
     SelectTriggerProps
 >(({ length, className = "", children, ...props }, ref) => (
     <SelectPrimitive.Trigger
@@ -47,7 +47,7 @@ const SelectTrigger = forwardRef<
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = forwardRef<
-    ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+    ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
     ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className = "", ...props }, ref) => (
     <SelectPrimitive.ScrollUpButton
@@ -61,7 +61,7 @@ const SelectScrollUpButton = forwardRef<
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = forwardRef<
-    ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+    ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
     ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className = "", ...props }, ref) => (
     <SelectPrimitive.ScrollDownButton
@@ -76,7 +76,7 @@ SelectScrollDownButton.displayName =
     SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = forwardRef<
-    ElementRef<typeof SelectPrimitive.Content>,
+    ComponentRef<typeof SelectPrimitive.Content>,
     ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className = "", children, position = "popper", ...props }, ref) => (
     <SelectPrimitive.Portal>
@@ -97,7 +97,7 @@ const SelectContent = forwardRef<
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = forwardRef<
-    ElementRef<typeof SelectPrimitive.Label>,
+    ComponentRef<typeof SelectPrimitive.Label>,
     ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
     <SelectPrimitive.Label
@@ -109,7 +109,7 @@ const SelectLabel = forwardRef<
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = forwardRef<
-    ElementRef<typeof SelectPrimitive.Item>,
+    ComponentRef<typeof SelectPrimitive.Item>,
     ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className = "", children, ...props }, ref) => (
     <SelectPrimitive.Item
@@ -129,7 +129,7 @@ const SelectItem = forwardRef<
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = forwardRef<
-    ElementRef<typeof SelectPrimitive.Separator>,
+    ComponentRef<typeof SelectPrimitive.Separator>,
     ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className = "", ...props }, ref) => (
     <SelectPrimitive.Separator

packages/dashboard/src/module/forms/Switch/index.tsx

@@ -2,11 +2,11 @@
 
 import { Root, Thumb } from "@radix-ui/react-switch";
 import { forwardRef } from "react";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
 import styles from "./index.module.css";
 
 export const Switch = forwardRef<
-    ElementRef<typeof Root>,
+    ComponentRef<typeof Root>,
     ComponentPropsWithoutRef<typeof Root>
 >(({ className, ...props }, ref) => (
     <Root className={`${styles.switch} ${className}`} {...props} ref={ref}>

packages/shared/module/component/Accordion/index.tsx

@@ -2,15 +2,15 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";
 import {
     type ComponentPropsWithoutRef,
-    type ElementRef,
+    type ComponentRef,
     forwardRef,
 } from "react";
 import styles from "./index.module.css";
 
 const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = forwardRef<
-    ElementRef<typeof AccordionPrimitive.Item>,
+    ComponentRef<typeof AccordionPrimitive.Item>,
     ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className = "", ...props }, ref) => (
     <AccordionPrimitive.Item
@@ -22,7 +22,7 @@ const AccordionItem = forwardRef<
 AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = forwardRef<
-    ElementRef<typeof AccordionPrimitive.Trigger>,
+    ComponentRef<typeof AccordionPrimitive.Trigger>,
     ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className = "", children, ...props }, ref) => (
     <AccordionPrimitive.Header className={styles.accordion__header} asChild>
@@ -41,7 +41,7 @@ const AccordionTrigger = forwardRef<
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = forwardRef<
-    ElementRef<typeof AccordionPrimitive.Content>,
+    ComponentRef<typeof AccordionPrimitive.Content>,
     ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {
         classNameText?: string;
     }

packages/shared/module/component/Spinner/index.tsx

@@ -1,9 +1,9 @@
 import { cx } from "class-variance-authority";
 import { forwardRef } from "react";
-import type { ElementRef, HTMLAttributes } from "react";
+import type { ComponentRef, HTMLAttributes } from "react";
 import styles from "./index.module.css";
 
-type SpinnerElement = ElementRef<"span">;
+type SpinnerElement = ComponentRef<"span">;
 interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
     className?: string;
 }

packages/shared/module/component/Switch/index.tsx

@@ -1,10 +1,10 @@
 import { Root, Thumb } from "@radix-ui/react-switch";
 import { forwardRef } from "react";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
 import styles from "./index.module.css";
 
 export const Switch = forwardRef<
-    ElementRef<typeof Root>,
+    ComponentRef<typeof Root>,
     ComponentPropsWithoutRef<typeof Root>
 >(({ className, ...props }, ref) => (
     <Root className={`${styles.switch} ${className}`} {...props} ref={ref}>

packages/shared/module/component/Tooltip/index.tsx

@@ -7,7 +7,7 @@ import {
     Trigger,
 } from "@radix-ui/react-tooltip";
 import { forwardRef } from "react";
-import type { ElementRef, ReactNode } from "react";
+import type { ComponentRef, ReactNode } from "react";
 import styles from "./index.module.css";
 
 type TooltipProps = {
@@ -18,7 +18,7 @@ type TooltipProps = {
     side?: "top" | "bottom" | "left" | "right";
 };
 
-export const Tooltip = forwardRef<ElementRef<typeof Provider>, TooltipProps>(
+export const Tooltip = forwardRef<ComponentRef<typeof Provider>, TooltipProps>(
     (
         { content, hidden = false, className = "", children, side, ...props },
         ref

packages/shared/module/component/forms/Checkbox/index.tsx

@@ -3,11 +3,11 @@
 import { Indicator, Root } from "@radix-ui/react-checkbox";
 import { Check, Minus } from "lucide-react";
 import { forwardRef } from "react";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
 import styles from "./index.module.css";
 
 export const Checkbox = forwardRef<
-    ElementRef<typeof Root>,
+    ComponentRef<typeof Root>,
     ComponentPropsWithoutRef<typeof Root>
 >(({ ...props }, ref) => {
     return (

packages/wallet/app/module/common/component/Drawer/index.tsx

@@ -2,7 +2,7 @@ import { prefixDrawerCss } from "@module/utils/prefixDrawerCss";
 import {
     type ComponentProps,
     type ComponentPropsWithoutRef,
-    type ElementRef,
+    type ComponentRef,
     type HTMLAttributes,
     forwardRef,
 } from "react";
@@ -27,7 +27,7 @@ const DrawerPortal = DrawerPrimitive.Portal;
 // const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = forwardRef<
-    ElementRef<typeof DrawerPrimitive.Overlay>,
+    ComponentRef<typeof DrawerPrimitive.Overlay>,
     ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
     <DrawerPrimitive.Overlay
@@ -39,7 +39,7 @@ const DrawerOverlay = forwardRef<
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = forwardRef<
-    ElementRef<typeof DrawerPrimitive.Content>,
+    ComponentRef<typeof DrawerPrimitive.Content>,
     ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
     <DrawerPortal>
@@ -79,15 +79,15 @@ const DrawerFooter = ({
 DrawerFooter.displayName = "DrawerFooter";
 
 const DrawerTitle = forwardRef<
-    ElementRef<typeof DrawerPrimitive.Title>,
+    ComponentRef<typeof DrawerPrimitive.Title>,
     ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(({ className, ...props }, ref) => (
     <DrawerPrimitive.Title ref={ref} className={`${className}`} {...props} />
 ));
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = forwardRef<
-    ElementRef<typeof DrawerPrimitive.Description>,
+    ComponentRef<typeof DrawerPrimitive.Description>,
     ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 >(({ className, ...props }, ref) => (
     <DrawerPrimitive.Description