@gv-tech/ui-native 2.23.3 → 2.24.0

package/src/accordion.tsx

@@ -13,9 +13,9 @@ import Animated, {
 import { cn } from './lib/utils';
 
 const Accordion: React.ForwardRefExoticComponent<
-  AccordionProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Root>>
+  AccordionProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Root>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Root>,
+  React.ComponentRef<typeof AccordionPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
 >(({ className, ...props }, ref) => {
   return <AccordionPrimitive.Root ref={ref} className={cn('web:gap-0', className)} {...props} />;
@@ -23,9 +23,9 @@ const Accordion: React.ForwardRefExoticComponent<
 Accordion.displayName = AccordionPrimitive.Root?.displayName || 'Accordion';
 
 const AccordionItem: React.ForwardRefExoticComponent<
-  AccordionItemProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Item>>
+  AccordionItemProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Item>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => {
   return (
@@ -35,9 +35,9 @@ const AccordionItem: React.ForwardRefExoticComponent<
 AccordionItem.displayName = AccordionPrimitive.Item?.displayName || 'AccordionItem';
 
 const AccordionHeader: React.ForwardRefExoticComponent<
-  AccordionHeaderProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Header>>
+  AccordionHeaderProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Header>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Header>,
+  React.ComponentRef<typeof AccordionPrimitive.Header>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>
 >(({ className, ...props }, ref) => {
   return <AccordionPrimitive.Header ref={ref} className={cn('flex flex-row', className)} {...props} />;
@@ -45,9 +45,9 @@ const AccordionHeader: React.ForwardRefExoticComponent<
 AccordionHeader.displayName = AccordionPrimitive.Header?.displayName || 'AccordionHeader';
 
 const AccordionTrigger: React.ForwardRefExoticComponent<
-  AccordionTriggerProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Trigger>>
+  AccordionTriggerProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Trigger>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => {
   const { isExpanded } = AccordionPrimitive.useItemContext();
@@ -80,9 +80,9 @@ const AccordionTrigger: React.ForwardRefExoticComponent<
 AccordionTrigger.displayName = AccordionPrimitive.Trigger?.displayName || 'AccordionTrigger';
 
 const AccordionContent: React.ForwardRefExoticComponent<
-  AccordionContentProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Content>>
+  AccordionContentProps & React.RefAttributes<React.ComponentRef<typeof AccordionPrimitive.Content>>
 > = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentRef<typeof AccordionPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => {
   return (

package/src/alert-dialog.tsx

@@ -13,9 +13,9 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay: React.ForwardRefExoticComponent<
-  AlertDialogOverlayProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Overlay>>
+  AlertDialogOverlayProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Overlay>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => {
   return (
@@ -31,9 +31,9 @@ const AlertDialogOverlay: React.ForwardRefExoticComponent<
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay?.displayName || 'AlertDialogOverlay';
 
 const AlertDialogContent: React.ForwardRefExoticComponent<
-  AlertDialogContentProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Content>>
+  AlertDialogContentProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Content>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
     portalHost?: string;
     overlayClassName?: string;
@@ -69,9 +69,9 @@ const AlertDialogFooter = ({ className, ...props }: React.ComponentPropsWithoutR
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 
 const AlertDialogTitle: React.ForwardRefExoticComponent<
-  AlertDialogTitleProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Title>>
+  AlertDialogTitleProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Title>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
@@ -83,9 +83,9 @@ const AlertDialogTitle: React.ForwardRefExoticComponent<
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title?.displayName || 'AlertDialogTitle';
 
 const AlertDialogDescription: React.ForwardRefExoticComponent<
-  AlertDialogDescriptionProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Description>>
+  AlertDialogDescriptionProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Description>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
@@ -97,9 +97,9 @@ const AlertDialogDescription: React.ForwardRefExoticComponent<
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description?.displayName || 'AlertDialogDescription';
 
 const AlertDialogAction: React.ForwardRefExoticComponent<
-  AlertDialogActionProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Action>>
+  AlertDialogActionProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Action>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
@@ -107,9 +107,9 @@ const AlertDialogAction: React.ForwardRefExoticComponent<
 AlertDialogAction.displayName = AlertDialogPrimitive.Action?.displayName || 'AlertDialogAction';
 
 const AlertDialogCancel: React.ForwardRefExoticComponent<
-  AlertDialogCancelProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Cancel>>
+  AlertDialogCancelProps & React.RefAttributes<React.ComponentRef<typeof AlertDialogPrimitive.Cancel>>
 > = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel

package/src/alert.tsx

@@ -20,7 +20,7 @@ const alertVariants = cva('relative w-full rounded-lg border p-4', {
 });
 
 const Alert = React.forwardRef<
-  React.ElementRef<typeof View>,
+  React.ComponentRef<typeof View>,
   React.ComponentPropsWithoutRef<typeof View> & VariantProps<typeof alertVariants>
 >(({ className, variant, children, ...props }, ref) => (
   <View ref={ref} className={cn(alertVariants({ variant }), className)} {...props}>
@@ -29,7 +29,7 @@ const Alert = React.forwardRef<
 ));
 Alert.displayName = 'Alert';
 
-const AlertTitle = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+const AlertTitle = React.forwardRef<React.ComponentRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text
       ref={ref}
@@ -40,7 +40,7 @@ const AlertTitle = React.forwardRef<React.ElementRef<typeof Text>, React.Compone
 );
 AlertTitle.displayName = 'AlertTitle';
 
-const AlertDescription = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+const AlertDescription = React.forwardRef<React.ComponentRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text ref={ref} className={cn('text-muted-foreground text-sm leading-relaxed', className)} {...props} />
   ),

package/src/avatar.tsx

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { cn } from './lib/utils';
 
 const Avatar: React.ForwardRefExoticComponent<
-  AvatarProps & React.RefAttributes<React.ElementRef<typeof AvatarPrimitive.Root>>
+  AvatarProps & React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Root>>
 > = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
@@ -18,9 +18,9 @@ const Avatar: React.ForwardRefExoticComponent<
 Avatar.displayName = AvatarPrimitive.Root?.displayName || 'Avatar';
 
 const AvatarImage: React.ForwardRefExoticComponent<
-  AvatarImageProps & React.RefAttributes<React.ElementRef<typeof AvatarPrimitive.Image>>
+  AvatarImageProps & React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Image>>
 > = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
@@ -28,9 +28,9 @@ const AvatarImage: React.ForwardRefExoticComponent<
 AvatarImage.displayName = AvatarPrimitive.Image?.displayName || 'AvatarImage';
 
 const AvatarFallback: React.ForwardRefExoticComponent<
-  AvatarFallbackProps & React.RefAttributes<React.ElementRef<typeof AvatarPrimitive.Fallback>>
+  AvatarFallbackProps & React.RefAttributes<React.ComponentRef<typeof AvatarPrimitive.Fallback>>
 > = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback

package/src/button.tsx

@@ -20,9 +20,13 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
+        xs: 'h-7 px-2',
         sm: 'h-9 px-3',
         lg: 'h-12 px-8',
         icon: 'h-10 w-10',
+        'icon-xs': 'h-7 w-7',
+        'icon-sm': 'h-9 w-9',
+        'icon-lg': 'h-12 w-12',
       },
     },
     defaultVariants: {
@@ -50,7 +54,7 @@ const buttonTextVariants = cva('text-sm font-medium', {
 
 export interface ButtonProps extends ButtonBaseProps {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | null;
-  size?: 'default' | 'sm' | 'lg' | 'icon' | null;
+  size?: 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | null;
   onPress?: () => void;
 }
 

package/src/card.tsx

@@ -7,19 +7,19 @@ import { cn } from './lib/utils';
 
 export interface CardProps extends React.ComponentPropsWithoutRef<typeof View>, CardBaseProps {}
 
-const Card = React.forwardRef<React.ElementRef<typeof View>, CardProps>(({ className, ...props }, ref) => (
+const Card = React.forwardRef<React.ComponentRef<typeof View>, CardProps>(({ className, ...props }, ref) => (
   <View ref={ref} className={cn('border-border bg-card rounded-xl border shadow-sm', className)} {...props} />
 ));
 Card.displayName = 'Card';
 
-const CardHeader = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+const CardHeader = React.forwardRef<React.ComponentRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
   ({ className, ...props }, ref) => (
     <View ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
   ),
 );
 CardHeader.displayName = 'CardHeader';
 
-const CardTitle = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+const CardTitle = React.forwardRef<React.ComponentRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text
       ref={ref}
@@ -30,14 +30,14 @@ const CardTitle = React.forwardRef<React.ElementRef<typeof Text>, React.Componen
 );
 CardTitle.displayName = 'CardTitle';
 
-const CardDescription = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+const CardDescription = React.forwardRef<React.ComponentRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
   ),
 );
 CardDescription.displayName = 'CardDescription';
 
-const CardContent = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+const CardContent = React.forwardRef<React.ComponentRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
   ({ className, ...props }, ref) => (
     <View ref={ref} className={cn('p-6 pt-0', className)} {...props}>
       {wrapTextChildren(props.children, Text, { className: 'text-sm text-card-foreground' })}
@@ -46,7 +46,7 @@ const CardContent = React.forwardRef<React.ElementRef<typeof View>, React.Compon
 );
 CardContent.displayName = 'CardContent';
 
-const CardFooter = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+const CardFooter = React.forwardRef<React.ComponentRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
   ({ className, ...props }, ref) => (
     <View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />
   ),

package/src/carousel.tsx

@@ -151,7 +151,7 @@ export const CarouselItem = React.forwardRef<View, CarouselItemBaseProps>(({ chi
 });
 CarouselItem.displayName = 'CarouselItem';
 
-export const CarouselPrevious = React.forwardRef<React.ElementRef<typeof Button>, CarouselPreviousBaseProps>(
+export const CarouselPrevious = React.forwardRef<React.ComponentRef<typeof Button>, CarouselPreviousBaseProps>(
   ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
@@ -178,7 +178,7 @@ export const CarouselPrevious = React.forwardRef<React.ElementRef<typeof Button>
 );
 CarouselPrevious.displayName = 'CarouselPrevious';
 
-export const CarouselNext = React.forwardRef<React.ElementRef<typeof Button>, CarouselNextBaseProps>(
+export const CarouselNext = React.forwardRef<React.ComponentRef<typeof Button>, CarouselNextBaseProps>(
   ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
     const { orientation, scrollNext, canScrollNext } = useCarousel();
 

package/src/checkbox.tsx

@@ -6,7 +6,7 @@ import { Platform } from 'react-native';
 import { cn } from './lib/utils';
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => {
   return (

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

@@ -25,7 +25,7 @@ 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) => {
@@ -41,7 +41,7 @@ const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.
   });
 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) => {
@@ -86,7 +86,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 +98,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();