@gv-tech/ui-native 2.23.3 → 2.25.0

package/src/context-menu.tsx

@@ -31,7 +31,7 @@ export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 export const ContextMenuSub = ContextMenuPrimitive.Sub;
 
 const ContextMenuOverlay = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Overlay>,
+  React.ComponentRef<typeof ContextMenuPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Overlay>
 >(({ className, ...props }, ref) => {
   return (
@@ -51,7 +51,7 @@ const ContextMenuOverlay = React.forwardRef<
 ContextMenuOverlay.displayName = 'ContextMenuOverlay';
 
 export const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentRef<typeof ContextMenuPrimitive.Content>,
   ContextMenuContentBaseProps
 >(({ className, children, ...props }, ref) => {
   return (
@@ -73,7 +73,7 @@ export const ContextMenuContent = React.forwardRef<
 ContextMenuContent.displayName = 'ContextMenuContent';
 
 export const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentRef<typeof ContextMenuPrimitive.Item>,
   ContextMenuItemBaseProps
 >(({ className, children, inset, ...props }, ref) => {
   return (
@@ -93,7 +93,7 @@ export const ContextMenuItem = React.forwardRef<
 ContextMenuItem.displayName = 'ContextMenuItem';
 
 export const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,
   ContextMenuCheckboxItemBaseProps
 >(({ className, children, checked, onCheckedChange, ...props }, ref) => {
   return (
@@ -119,7 +119,7 @@ export const ContextMenuCheckboxItem = React.forwardRef<
 ContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';
 
 export const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,
   ContextMenuRadioItemBaseProps
 >(({ className, children, value, ...props }, ref) => {
   return (
@@ -144,7 +144,7 @@ export const ContextMenuRadioItem = React.forwardRef<
 ContextMenuRadioItem.displayName = 'ContextMenuRadioItem';
 
 export const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentRef<typeof ContextMenuPrimitive.Label>,
   ContextMenuLabelBaseProps
 >(({ className, children, inset, ...props }, ref) => {
   return (
@@ -160,7 +160,7 @@ export const ContextMenuLabel = React.forwardRef<
 ContextMenuLabel.displayName = 'ContextMenuLabel';
 
 export const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
   ContextMenuSeparatorBaseProps
 >(({ className, ...props }, ref) => {
   return <ContextMenuPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />;
@@ -177,7 +177,7 @@ export const ContextMenuShortcut = ({ className, children, ...props }: ContextMe
 ContextMenuShortcut.displayName = 'ContextMenuShortcut';
 
 export const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
   ContextMenuSubTriggerBaseProps
 >(({ className, children, inset, ...props }, ref) => {
   return (
@@ -198,7 +198,7 @@ export const ContextMenuSubTrigger = React.forwardRef<
 ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';
 
 export const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
   ContextMenuSubContentBaseProps
 >(({ className, children, ...props }, ref) => {
   return (

package/src/dialog.tsx

@@ -2,7 +2,7 @@ import { DialogBaseProps, DialogContentBaseProps } from '@gv-tech/ui-core';
 import * as DialogPrimitive from '@rn-primitives/dialog';
 import { X } from 'lucide-react-native';
 import * as React from 'react';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 
 import { cn } from './lib/utils';
@@ -25,51 +25,98 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 
 export type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
-export type DialogOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
+export type DialogOverlayRef = React.ComponentRef<typeof DialogPrimitive.Overlay>;
 
 const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<DialogOverlayRef>> =
-  React.forwardRef<DialogOverlayRef, DialogOverlayProps>(({ className, ...props }, ref) => {
+  React.forwardRef<DialogOverlayRef, DialogOverlayProps>(({ className, style, ...props }, ref) => {
     return (
-      <DialogPrimitive.Overlay style={StyleSheet.absoluteFill} asChild ref={ref} {...props}>
+      <DialogPrimitive.Overlay
+        style={[
+          {
+            position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 50,
+          } as unknown as ViewStyle,
+          style as StyleProp<ViewStyle>,
+        ]}
+        asChild
+        ref={ref}
+        {...props}
+      >
         <Animated.View
           entering={FadeIn.duration(150)}
           exiting={FadeOut.duration(150)}
-          className={cn('z-50 flex items-center justify-center bg-black/80 p-2', className)}
+          className={cn('flex items-center justify-center bg-black/80 p-2', className)}
         />
       </DialogPrimitive.Overlay>
     );
   });
 DialogOverlay.displayName = DialogPrimitive.Overlay?.displayName || 'DialogOverlay';
 
-export type DialogContentRef = React.ElementRef<typeof DialogPrimitive.Content>;
+export type DialogContentRef = React.ComponentRef<typeof DialogPrimitive.Content>;
 const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<DialogContentRef>> =
   React.forwardRef<DialogContentRef, DialogContentProps>(
     ({ className, children, portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
+      const PlatformWrapper = React.useCallback(({ children }: { children: React.ReactNode }) => {
+        if (Platform.OS === 'web') {
+          return <>{children}</>;
+        }
+        return (
+          <View
+            pointerEvents="box-none"
+            style={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: 50,
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 16,
+            }}
+          >
+            {children}
+          </View>
+        );
+      }, []);
+
       return (
         <DialogPortal hostName={portalHost}>
           <DialogOverlay className={overlayClassName} style={overlayStyle} />
-          <DialogPrimitive.Content ref={ref} asChild {...props}>
-            <Animated.View
-              entering={FadeIn.duration(150)}
-              exiting={FadeOut.duration(150)}
-              className={cn(
-                'border-border bg-background z-50 w-full max-w-lg gap-4 rounded-xl border p-6 shadow-lg sm:rounded-lg',
-                className,
-              )}
-            >
-              {children}
-              <DialogPrimitive.Close
-                className={
-                  'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'
-                }
+          <PlatformWrapper>
+            <DialogPrimitive.Content ref={ref} {...props}>
+              <View
+                pointerEvents="box-none"
+                className="absolute inset-0 z-50 flex items-center justify-center"
+                style={Platform.OS === 'web' ? ({ position: 'fixed' } as unknown as ViewStyle) : undefined}
               >
-                <X size={18} className="text-muted-foreground" />
-                <View className="sr-only">
-                  <DialogPrimitive.Title>Close</DialogPrimitive.Title>
-                </View>
-              </DialogPrimitive.Close>
-            </Animated.View>
-          </DialogPrimitive.Content>
+                <Animated.View
+                  entering={FadeIn.duration(150)}
+                  exiting={FadeOut.duration(150)}
+                  className={cn(
+                    'border-border bg-background w-full max-w-lg gap-4 rounded-xl border p-6 shadow-lg sm:rounded-lg',
+                    className,
+                  )}
+                >
+                  {children}
+                  <DialogPrimitive.Close
+                    className={
+                      'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'
+                    }
+                  >
+                    <X size={18} className="text-muted-foreground" />
+                    <View className="sr-only">
+                      <DialogPrimitive.Title>Close</DialogPrimitive.Title>
+                    </View>
+                  </DialogPrimitive.Close>
+                </Animated.View>
+              </View>
+            </DialogPrimitive.Content>
+          </PlatformWrapper>
         </DialogPortal>
       );
     },
@@ -86,7 +133,7 @@ const DialogFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<ty
 );
 DialogFooter.displayName = 'DialogFooter';
 
-export type DialogTitleRef = React.ElementRef<typeof DialogPrimitive.Title>;
+export type DialogTitleRef = React.ComponentRef<typeof DialogPrimitive.Title>;
 export type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<DialogTitleRef>> =
   React.forwardRef<DialogTitleRef, DialogTitleProps>(({ className, ...props }, ref) => (
@@ -98,7 +145,7 @@ const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefA
   ));
 DialogTitle.displayName = DialogPrimitive.Title?.displayName || 'DialogTitle';
 
-export type DialogDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
+export type DialogDescriptionRef = React.ComponentRef<typeof DialogPrimitive.Description>;
 export type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
 const DialogDescription: React.ForwardRefExoticComponent<
   DialogDescriptionProps & React.RefAttributes<DialogDescriptionRef>

package/src/drawer.tsx

@@ -21,12 +21,12 @@ export const Drawer: React.FC<DrawerBaseProps> = ({ children }) => {
 Drawer.displayName = 'Drawer';
 
 export const DrawerTrigger = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Trigger>,
+  React.ComponentRef<typeof DialogPrimitive.Trigger>,
   DrawerTriggerBaseProps & { className?: string }
 >(({ children, className, ...props }, ref) => {
   return (
     <DialogPrimitive.Trigger ref={ref} className={className} {...props}>
-      {wrapTextChildren(children)}
+      {wrapTextChildren(children as React.ReactNode)}
     </DialogPrimitive.Trigger>
   );
 });
@@ -35,7 +35,7 @@ DrawerTrigger.displayName = 'DrawerTrigger';
 export const DrawerPortal = DialogPrimitive.Portal;
 
 export type DrawerOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
-export type DrawerOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
+export type DrawerOverlayRef = React.ComponentRef<typeof DialogPrimitive.Overlay>;
 
 export const DrawerOverlay: React.ForwardRefExoticComponent<
   DrawerOverlayProps & React.RefAttributes<DrawerOverlayRef>
@@ -53,7 +53,7 @@ export const DrawerOverlay: React.ForwardRefExoticComponent<
 DrawerOverlay.displayName = 'DrawerOverlay';
 
 export const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentRef<typeof DialogPrimitive.Content>,
   DrawerContentBaseProps & {
     portalHost?: string;
     overlayClassName?: string;
@@ -83,31 +83,31 @@ DrawerContent.displayName = 'DrawerContent';
 
 export const DrawerHeader = ({ className, children, ...props }: DrawerHeaderBaseProps) => (
   <View className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props}>
-    {wrapTextChildren(children)}
+    {wrapTextChildren(children as React.ReactNode)}
   </View>
 );
 DrawerHeader.displayName = 'DrawerHeader';
 
 export const DrawerFooter = ({ className, children, ...props }: DrawerFooterBaseProps) => (
   <View className={cn('mt-auto flex flex-col gap-2', className)} {...props}>
-    {wrapTextChildren(children)}
+    {wrapTextChildren(children as React.ReactNode)}
   </View>
 );
 DrawerFooter.displayName = 'DrawerFooter';
 
 export const DrawerClose = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Close>,
+  React.ComponentRef<typeof DialogPrimitive.Close>,
   DrawerCloseBaseProps & { className?: string }
 >(({ children, className, ...props }, ref) => {
   return (
     <DialogPrimitive.Close ref={ref} className={className} {...props}>
-      {wrapTextChildren(children)}
+      {wrapTextChildren(children as React.ReactNode)}
     </DialogPrimitive.Close>
   );
 });
 DrawerClose.displayName = 'DrawerClose';
 
-export const DrawerTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, DrawerTitleBaseProps>(
+export const DrawerTitle = React.forwardRef<React.ComponentRef<typeof DialogPrimitive.Title>, DrawerTitleBaseProps>(
   ({ className, children, ...props }, ref) => {
     return (
       <DialogPrimitive.Title
@@ -115,7 +115,7 @@ export const DrawerTitle = React.forwardRef<React.ElementRef<typeof DialogPrimit
         className={cn('text-foreground text-lg leading-none font-semibold tracking-tight', className)}
         {...props}
       >
-        {wrapTextChildren(children)}
+        {wrapTextChildren(children as React.ReactNode)}
       </DialogPrimitive.Title>
     );
   },
@@ -123,12 +123,12 @@ export const DrawerTitle = React.forwardRef<React.ElementRef<typeof DialogPrimit
 DrawerTitle.displayName = 'DrawerTitle';
 
 export const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentRef<typeof DialogPrimitive.Description>,
   DrawerDescriptionBaseProps
 >(({ className, children, ...props }, ref) => {
   return (
     <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props}>
-      {wrapTextChildren(children)}
+      {wrapTextChildren(children as React.ReactNode)}
     </DialogPrimitive.Description>
   );
 });

package/src/dropdown-menu.tsx

@@ -31,7 +31,7 @@ export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuOverlay = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Overlay>,
+  React.ComponentRef<typeof DropdownMenuPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Overlay>
 >(({ className, ...props }, ref) => {
   return (
@@ -51,7 +51,7 @@ const DropdownMenuOverlay = React.forwardRef<
 DropdownMenuOverlay.displayName = 'DropdownMenuOverlay';
 
 export const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
   DropdownMenuContentBaseProps
 >(({ className, children, side, ...props }, ref) => {
   const nativeSide = side === 'left' || side === 'right' ? 'bottom' : side;
@@ -75,7 +75,7 @@ export const DropdownMenuContent = React.forwardRef<
 DropdownMenuContent.displayName = 'DropdownMenuContent';
 
 export const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
   DropdownMenuItemBaseProps
 >(({ className, children, inset, onSelect, ...props }, ref) => {
   return (
@@ -96,7 +96,7 @@ export const DropdownMenuItem = React.forwardRef<
 DropdownMenuItem.displayName = 'DropdownMenuItem';
 
 export const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
   DropdownMenuCheckboxItemBaseProps
 >(({ className, children, checked, onCheckedChange, ...props }, ref) => {
   return (
@@ -122,7 +122,7 @@ export const DropdownMenuCheckboxItem = React.forwardRef<
 DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
 
 export const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
   DropdownMenuRadioItemBaseProps
 >(({ className, children, value, ...props }, ref) => {
   return (
@@ -147,7 +147,7 @@ export const DropdownMenuRadioItem = React.forwardRef<
 DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
 
 export const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
   DropdownMenuLabelBaseProps
 >(({ className, children, inset, ...props }, ref) => {
   return (
@@ -156,14 +156,14 @@ export const DropdownMenuLabel = React.forwardRef<
       className={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
       {...props}
     >
-      {wrapTextChildren(children, Text)}
+      {wrapTextChildren(children as React.ReactNode, Text)}
     </DropdownMenuPrimitive.Label>
   );
 });
 DropdownMenuLabel.displayName = 'DropdownMenuLabel';
 
 export const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
   DropdownMenuSeparatorBaseProps
 >(({ className, ...props }, ref) => {
   return (
@@ -182,7 +182,7 @@ export const DropdownMenuShortcut = ({ className, children, ...props }: Dropdown
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
   DropdownMenuSubTriggerBaseProps
 >(({ className, children, inset, ...props }, ref) => {
   return (
@@ -195,7 +195,7 @@ export const DropdownMenuSubTrigger = React.forwardRef<
       )}
       {...props}
     >
-      <View className="flex flex-row items-center gap-1.5">{wrapTextChildren(children, Text)}</View>
+      <View className="flex flex-row items-center gap-1.5">{wrapTextChildren(children as React.ReactNode, Text)}</View>
       <ChevronRight size={14} className="text-foreground ml-auto" />
     </DropdownMenuPrimitive.SubTrigger>
   );
@@ -203,7 +203,7 @@ export const DropdownMenuSubTrigger = React.forwardRef<
 DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
 
 export const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
   DropdownMenuSubContentBaseProps
 >(({ className, children, ...props }, ref) => {
   return (

package/src/form.tsx

@@ -79,7 +79,7 @@ type FormItemContextValue = {
 const FormItemContext = React.createContext<FormItemContextValue | null>(null);
 
 const FormItem = React.forwardRef<
-  React.ElementRef<typeof View>,
+  React.ComponentRef<typeof View>,
   React.ComponentPropsWithoutRef<typeof View> & FormItemBaseProps
 >(({ className, ...props }, ref) => {
   const id = React.useId();
@@ -93,7 +93,7 @@ const FormItem = React.forwardRef<
 FormItem.displayName = 'FormItem';
 
 const FormLabel = React.forwardRef<
-  React.ElementRef<typeof Label>,
+  React.ComponentRef<typeof Label>,
   React.ComponentPropsWithoutRef<typeof Label> & FormLabelBaseProps
 >(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
@@ -103,8 +103,8 @@ const FormLabel = React.forwardRef<
 FormLabel.displayName = 'FormLabel';
 
 const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot.Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot.Slot>
+  React.ComponentRef<typeof Slot.Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot.Slot> & FormControlBaseProps & { children?: React.ReactNode }
 >(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
@@ -121,7 +121,7 @@ const FormControl = React.forwardRef<
 FormControl.displayName = 'FormControl';
 
 const FormDescription = React.forwardRef<
-  React.ElementRef<typeof Text>,
+  React.ComponentRef<typeof Text>,
   React.ComponentPropsWithoutRef<typeof Text> & FormDescriptionBaseProps
 >(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
@@ -138,7 +138,7 @@ const FormDescription = React.forwardRef<
 FormDescription.displayName = 'FormDescription';
 
 const FormMessage = React.forwardRef<
-  React.ElementRef<typeof Text>,
+  React.ComponentRef<typeof Text>,
   React.ComponentPropsWithoutRef<typeof Text> & FormMessageBaseProps
 >(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();

package/src/hover-card.tsx

@@ -8,7 +8,7 @@ export const HoverCard = HoverCardPrimitive.Root;
 export const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 export const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentRef<typeof HoverCardPrimitive.Content>,
   HoverCardContentBaseProps
 >(({ className, children, ...props }, ref) => {
   return (

package/src/input.tsx

@@ -6,7 +6,7 @@ import { cn } from './lib/utils';
 
 export interface InputProps extends React.ComponentPropsWithoutRef<typeof TextInput>, InputBaseProps {}
 
-const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
+const Input = React.forwardRef<React.ComponentRef<typeof TextInput>, InputProps>(
   ({ className, placeholderClassName, ...props }, ref) => {
     return (
       <TextInput

package/src/label.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { cn } from './lib/utils';
 
 const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Text>,
+  React.ComponentRef<typeof LabelPrimitive.Text>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Text>
 >(({ className, onPress, onLongPress, onPressIn, onPressOut, ...props }, ref) => (
   <LabelPrimitive.Root

package/src/menubar.tsx

@@ -20,7 +20,7 @@ import { wrapTextChildren } from './lib/render-native';
 import { cn } from './lib/utils';
 import { Text } from './text';
 
-export const Menubar = React.forwardRef<React.ElementRef<typeof MenubarPrimitive.Root>, MenubarBaseProps>(
+export const Menubar = React.forwardRef<React.ComponentRef<typeof MenubarPrimitive.Root>, MenubarBaseProps>(
   ({ className, children, value: valueProp, onValueChange: onValueChangeProp, ...props }, ref) => {
     const [localValue, setLocalValue] = React.useState<string | undefined>(valueProp || '');
     const value = valueProp !== undefined ? valueProp : localValue;
@@ -58,7 +58,7 @@ export const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 export const MenubarSub = MenubarPrimitive.Sub;
 
 const MenubarOverlay = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Overlay>,
+  React.ComponentRef<typeof MenubarPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Overlay>
 >(({ className, ...props }, ref) => {
   return (
@@ -74,7 +74,7 @@ const MenubarOverlay = React.forwardRef<
 MenubarOverlay.displayName = 'MenubarOverlay';
 
 export const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentRef<typeof MenubarPrimitive.Trigger>,
   MenubarTriggerBaseProps
 >(({ className, children, ...props }, ref) => {
   return (
@@ -86,14 +86,14 @@ export const MenubarTrigger = React.forwardRef<
       )}
       {...props}
     >
-      {wrapTextChildren(children, Text)}
+      {wrapTextChildren(children as React.ReactNode, Text)}
     </MenubarPrimitive.Trigger>
   );
 });
 MenubarTrigger.displayName = 'MenubarTrigger';
 
 export const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentRef<typeof MenubarPrimitive.Content>,
   MenubarContentBaseProps
 >(({ className, children, ...props }, ref) => {
   return (
@@ -114,7 +114,7 @@ export const MenubarContent = React.forwardRef<
 });
 MenubarContent.displayName = 'MenubarContent';
 
-export const MenubarItem = React.forwardRef<React.ElementRef<typeof MenubarPrimitive.Item>, MenubarItemBaseProps>(
+export const MenubarItem = React.forwardRef<React.ComponentRef<typeof MenubarPrimitive.Item>, MenubarItemBaseProps>(
   ({ className, children, inset, ...props }, ref) => {
     return (
       <MenubarPrimitive.Item
@@ -126,7 +126,7 @@ export const MenubarItem = React.forwardRef<React.ElementRef<typeof MenubarPrimi
         )}
         {...props}
       >
-        {wrapTextChildren(children, Text)}
+        {wrapTextChildren(children as React.ReactNode, Text)}
       </MenubarPrimitive.Item>
     );
   },
@@ -134,7 +134,7 @@ export const MenubarItem = React.forwardRef<React.ElementRef<typeof MenubarPrimi
 MenubarItem.displayName = 'MenubarItem';
 
 export const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>,
   MenubarCheckboxItemBaseProps
 >(({ className, children, checked, onCheckedChange, ...props }, ref) => {
   return (
@@ -153,14 +153,14 @@ export const MenubarCheckboxItem = React.forwardRef<
           <Check size={14} className="text-foreground" />
         </MenubarPrimitive.ItemIndicator>
       </View>
-      {wrapTextChildren(children, Text)}
+      {wrapTextChildren(children as React.ReactNode, Text)}
     </MenubarPrimitive.CheckboxItem>
   );
 });
 MenubarCheckboxItem.displayName = 'MenubarCheckboxItem';
 
 export const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentRef<typeof MenubarPrimitive.RadioItem>,
   MenubarRadioItemBaseProps
 >(({ className, children, value, ...props }, ref) => {
   return (
@@ -178,13 +178,13 @@ export const MenubarRadioItem = React.forwardRef<
           <Circle size={8} className="text-foreground fill-current" />
         </MenubarPrimitive.ItemIndicator>
       </View>
-      {wrapTextChildren(children, Text)}
+      {wrapTextChildren(children as React.ReactNode, Text)}
     </MenubarPrimitive.RadioItem>
   );
 });
 MenubarRadioItem.displayName = 'MenubarRadioItem';
 
-export const MenubarLabel = React.forwardRef<React.ElementRef<typeof MenubarPrimitive.Label>, MenubarLabelBaseProps>(
+export const MenubarLabel = React.forwardRef<React.ComponentRef<typeof MenubarPrimitive.Label>, MenubarLabelBaseProps>(
   ({ className, children, inset, ...props }, ref) => {
     return (
       <MenubarPrimitive.Label
@@ -192,7 +192,7 @@ export const MenubarLabel = React.forwardRef<React.ElementRef<typeof MenubarPrim
         className={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
         {...props}
       >
-        {wrapTextChildren(children, Text)}
+        {wrapTextChildren(children as React.ReactNode, Text)}
       </MenubarPrimitive.Label>
     );
   },
@@ -200,7 +200,7 @@ export const MenubarLabel = React.forwardRef<React.ElementRef<typeof MenubarPrim
 MenubarLabel.displayName = 'MenubarLabel';
 
 export const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentRef<typeof MenubarPrimitive.Separator>,
   MenubarSeparatorBaseProps
 >(({ className, ...props }, ref) => {
   return <MenubarPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />;
@@ -217,7 +217,7 @@ export const MenubarShortcut = ({ className, children, ...props }: MenubarShortc
 MenubarShortcut.displayName = 'MenubarShortcut';
 
 export const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentRef<typeof MenubarPrimitive.SubTrigger>,
   MenubarSubTriggerBaseProps
 >(({ className, children, inset, ...props }, ref) => {
   return (
@@ -230,7 +230,7 @@ export const MenubarSubTrigger = React.forwardRef<
       )}
       {...props}
     >
-      <View className="flex flex-row items-center gap-1.5">{wrapTextChildren(children, Text)}</View>
+      <View className="flex flex-row items-center gap-1.5">{wrapTextChildren(children as React.ReactNode, Text)}</View>
       <ChevronRight size={14} className="text-foreground ml-auto" />
     </MenubarPrimitive.SubTrigger>
   );
@@ -238,7 +238,7 @@ export const MenubarSubTrigger = React.forwardRef<
 MenubarSubTrigger.displayName = 'MenubarSubTrigger';
 
 export const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentRef<typeof MenubarPrimitive.SubContent>,
   MenubarSubContentBaseProps
 >(({ className, children, ...props }, ref) => {
   return (