@react-native-reusables/cli 0.1.0 → 0.1.2

package/__generated/components/ui/dialog.tsx

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from '@rn-primitives/dialog';
 import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { X } from '../../lib/icons/X';
 import { cn } from '../../lib/utils';
@@ -13,34 +13,33 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlayWeb = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => {
-  const { open } = DialogPrimitive.useRootContext();
-  return (
-    <DialogPrimitive.Overlay
-      className={cn(
-        'z-50 bg-black/80 flex justify-center items-center p-2 absolute top-0 right-0 bottom-0 left-0',
-        open ? 'web:animate-in web:fade-in-0' : 'web:animate-out web:fade-out-0',
-        className
-      )}
-      {...props}
-      ref={ref}
-    />
-  );
-});
+const DialogOverlayWeb = React.forwardRef<DialogPrimitive.OverlayRef, DialogPrimitive.OverlayProps>(
+  ({ className, ...props }, ref) => {
+    const { open } = DialogPrimitive.useRootContext();
+    return (
+      <DialogPrimitive.Overlay
+        className={cn(
+          'bg-black/80 flex justify-center items-center p-2 absolute top-0 right-0 bottom-0 left-0',
+          open ? 'web:animate-in web:fade-in-0' : 'web:animate-out web:fade-out-0',
+          className
+        )}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
 
 DialogOverlayWeb.displayName = 'DialogOverlayWeb';
 
 const DialogOverlayNative = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+  DialogPrimitive.OverlayRef,
+  DialogPrimitive.OverlayProps
 >(({ className, children, ...props }, ref) => {
   return (
     <DialogPrimitive.Overlay
       style={StyleSheet.absoluteFill}
-      className={cn('z-50 flex bg-black/80 justify-center items-center p-2', className)}
+      className={cn('flex bg-black/80 justify-center items-center p-2', className)}
       {...props}
       ref={ref}
     >
@@ -59,8 +58,8 @@ const DialogOverlay = Platform.select({
 });
 
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { portalHost?: string }
+  DialogPrimitive.ContentRef,
+  DialogPrimitive.ContentProps & { portalHost?: string }
 >(({ className, children, portalHost, ...props }, ref) => {
   const { open } = DialogPrimitive.useRootContext();
   return (
@@ -69,7 +68,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            'z-50 max-w-lg gap-4 border border-border web:cursor-default bg-background p-6 shadow-lg web:duration-200 rounded-lg',
+            'max-w-lg gap-4 border border-border web:cursor-default bg-background p-6 shadow-lg web:duration-200 rounded-lg',
             open
               ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
               : 'web:animate-out web:fade-out-0 web:zoom-out-95',
@@ -95,12 +94,12 @@ const DialogContent = React.forwardRef<
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+const DialogHeader = ({ className, ...props }: ViewProps) => (
   <View className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props} />
 );
 DialogHeader.displayName = 'DialogHeader';
 
-const DialogFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+const DialogFooter = ({ className, ...props }: ViewProps) => (
   <View
     className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
     {...props}
@@ -108,24 +107,23 @@ const DialogFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<ty
 );
 DialogFooter.displayName = 'DialogFooter';
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      'text-lg native:text-xl text-foreground font-semibold leading-none tracking-tight',
-      className
-    )}
-    {...props}
-  />
-));
+const DialogTitle = React.forwardRef<DialogPrimitive.TitleRef, DialogPrimitive.TitleProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn(
+        'text-lg native:text-xl text-foreground font-semibold leading-none tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  )
+);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+  DialogPrimitive.DescriptionRef,
+  DialogPrimitive.DescriptionProps
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}

package/__generated/components/ui/dropdown-menu.tsx

@@ -1,6 +1,14 @@
 import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
 import * as React from 'react';
-import { Platform, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextProps,
+  View,
+  type ViewStyle,
+} from 'react-native';
 import { Check } from '../../lib/icons/Check';
 import { ChevronDown } from '../../lib/icons/ChevronDown';
 import { ChevronRight } from '../../lib/icons/ChevronRight';
@@ -21,8 +29,8 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+  DropdownMenuPrimitive.SubTriggerRef,
+  DropdownMenuPrimitive.SubTriggerProps & {
     inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => {
@@ -54,8 +62,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+  DropdownMenuPrimitive.SubContentRef,
+  DropdownMenuPrimitive.SubContentProps
 >(({ className, ...props }, ref) => {
   const { open } = DropdownMenuPrimitive.useSubContext();
   return (
@@ -75,8 +83,8 @@ const DropdownMenuSubContent = React.forwardRef<
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+  DropdownMenuPrimitive.ContentRef,
+  DropdownMenuPrimitive.ContentProps & {
     overlayStyle?: StyleProp<ViewStyle>;
     overlayClassName?: string;
     portalHost?: string;
@@ -116,8 +124,8 @@ const DropdownMenuContent = React.forwardRef<
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+  DropdownMenuPrimitive.ItemRef,
+  DropdownMenuPrimitive.ItemProps & {
     inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
@@ -137,8 +145,8 @@ const DropdownMenuItem = React.forwardRef<
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+  DropdownMenuPrimitive.CheckboxItemRef,
+  DropdownMenuPrimitive.CheckboxItemProps
 >(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
@@ -161,8 +169,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+  DropdownMenuPrimitive.RadioItemRef,
+  DropdownMenuPrimitive.RadioItemProps
 >(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
@@ -184,8 +192,8 @@ const DropdownMenuRadioItem = React.forwardRef<
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+  DropdownMenuPrimitive.LabelRef,
+  DropdownMenuPrimitive.LabelProps & {
     inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
@@ -202,8 +210,8 @@ const DropdownMenuLabel = React.forwardRef<
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+  DropdownMenuPrimitive.SeparatorRef,
+  DropdownMenuPrimitive.SeparatorProps
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
@@ -213,10 +221,7 @@ const DropdownMenuSeparator = React.forwardRef<
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof Text>) => {
+const DropdownMenuShortcut = ({ className, ...props }: TextProps) => {
   return (
     <Text
       className={cn(

package/__generated/components/ui/hover-card.tsx

@@ -10,8 +10,8 @@ const HoverCard = HoverCardPrimitive.Root;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+  HoverCardPrimitive.ContentRef,
+  HoverCardPrimitive.ContentProps
 >(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
   const { open } = HoverCardPrimitive.useRootContext();
   return (

package/__generated/components/ui/input.tsx

@@ -1,24 +1,23 @@
 import * as React from 'react';
-import { TextInput } from 'react-native';
+import { TextInput, type TextInputProps } from 'react-native';
 import { cn } from '../../lib/utils';
 
-const Input = React.forwardRef<
-  React.ElementRef<typeof TextInput>,
-  React.ComponentPropsWithoutRef<typeof TextInput>
->(({ className, placeholderClassName, ...props }, ref) => {
-  return (
-    <TextInput
-      ref={ref}
-      className={cn(
-        'web:flex h-10 native:h-12 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-        props.editable === false && 'opacity-50 web:cursor-not-allowed',
-        className
-      )}
-      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
-      {...props}
-    />
-  );
-});
+const Input = React.forwardRef<React.ElementRef<typeof TextInput>, TextInputProps>(
+  ({ className, placeholderClassName, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          'web:flex h-10 native:h-12 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          props.editable === false && 'opacity-50 web:cursor-not-allowed',
+          className
+        )}
+        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+        {...props}
+      />
+    );
+  }
+);
 
 Input.displayName = 'Input';
 

package/__generated/components/ui/label.tsx

@@ -2,27 +2,26 @@ import * as LabelPrimitive from '@rn-primitives/label';
 import * as React from 'react';
 import { cn } from '../../lib/utils';
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Text>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Text>
->(({ className, onPress, onLongPress, onPressIn, onPressOut, ...props }, ref) => (
-  <LabelPrimitive.Root
-    className='web:cursor-default'
-    onPress={onPress}
-    onLongPress={onLongPress}
-    onPressIn={onPressIn}
-    onPressOut={onPressOut}
-  >
-    <LabelPrimitive.Text
-      ref={ref}
-      className={cn(
-        'text-sm text-foreground native:text-base font-medium leading-none web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70',
-        className
-      )}
-      {...props}
-    />
-  </LabelPrimitive.Root>
-));
+const Label = React.forwardRef<LabelPrimitive.TextRef, LabelPrimitive.TextProps>(
+  ({ className, onPress, onLongPress, onPressIn, onPressOut, ...props }, ref) => (
+    <LabelPrimitive.Root
+      className='web:cursor-default'
+      onPress={onPress}
+      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+    >
+      <LabelPrimitive.Text
+        ref={ref}
+        className={cn(
+          'text-sm text-foreground native:text-base font-medium leading-none web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70',
+          className
+        )}
+        {...props}
+      />
+    </LabelPrimitive.Root>
+  )
+);
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };

package/__generated/components/ui/menubar.tsx

@@ -1,6 +1,6 @@
 import * as MenubarPrimitive from '@rn-primitives/menubar';
 import * as React from 'react';
-import { Platform, Text, View } from 'react-native';
+import { Platform, Text, TextProps, View } from 'react-native';
 import { Check } from '../../lib/icons/Check';
 import { ChevronDown } from '../../lib/icons/ChevronDown';
 import { ChevronRight } from '../../lib/icons/ChevronRight';
@@ -18,45 +18,43 @@ const MenubarSub = MenubarPrimitive.Sub;
 
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      'flex flex-row h-10 native:h-12 items-center space-x-1 rounded-md border border-border bg-background p-1',
-      className
-    )}
-    {...props}
-  />
-));
-Menubar.displayName = MenubarPrimitive.Root.displayName;
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => {
-  const { value } = MenubarPrimitive.useRootContext();
-  const { value: itemValue } = MenubarPrimitive.useMenuContext();
-
-  return (
-    <MenubarPrimitive.Trigger
+const Menubar = React.forwardRef<MenubarPrimitive.RootRef, MenubarPrimitive.RootProps>(
+  ({ className, ...props }, ref) => (
+    <MenubarPrimitive.Root
       ref={ref}
       className={cn(
-        'flex flex-row web:cursor-default web:select-none items-center rounded-sm px-3 py-1.5 text-sm native:h-10 native:px-5 native:py-0 font-medium web:outline-none web:focus:bg-accent active:bg-accent web:focus:text-accent-foreground',
-        value === itemValue && 'bg-accent text-accent-foreground',
+        'flex flex-row h-10 native:h-12 items-center space-x-1 rounded-md border border-border bg-background p-1',
         className
       )}
       {...props}
     />
-  );
-});
+  )
+);
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<MenubarPrimitive.TriggerRef, MenubarPrimitive.TriggerProps>(
+  ({ className, ...props }, ref) => {
+    const { value } = MenubarPrimitive.useRootContext();
+    const { value: itemValue } = MenubarPrimitive.useMenuContext();
+
+    return (
+      <MenubarPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          'flex flex-row web:cursor-default web:select-none items-center rounded-sm px-3 py-1.5 text-sm native:h-10 native:px-5 native:py-0 font-medium web:outline-none web:focus:bg-accent active:bg-accent web:focus:text-accent-foreground',
+          value === itemValue && 'bg-accent text-accent-foreground',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
 const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+  MenubarPrimitive.SubTriggerRef,
+  MenubarPrimitive.SubTriggerProps & {
     inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => {
@@ -88,8 +86,8 @@ const MenubarSubTrigger = React.forwardRef<
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
 const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+  MenubarPrimitive.SubContentRef,
+  MenubarPrimitive.SubContentProps
 >(({ className, ...props }, ref) => {
   const { open } = MenubarPrimitive.useSubContext();
   return (
@@ -109,8 +107,8 @@ const MenubarSubContent = React.forwardRef<
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> & { portalHost?: string }
+  MenubarPrimitive.ContentRef,
+  MenubarPrimitive.ContentProps & { portalHost?: string }
 >(({ className, portalHost, ...props }, ref) => {
   const { value } = MenubarPrimitive.useRootContext();
   const { value: itemValue } = MenubarPrimitive.useMenuContext();
@@ -133,8 +131,8 @@ const MenubarContent = React.forwardRef<
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+  MenubarPrimitive.ItemRef,
+  MenubarPrimitive.ItemProps & {
     inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
@@ -154,8 +152,8 @@ const MenubarItem = React.forwardRef<
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
 const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+  MenubarPrimitive.CheckboxItemRef,
+  MenubarPrimitive.CheckboxItemProps
 >(({ className, children, checked, ...props }, ref) => (
   <MenubarPrimitive.CheckboxItem
     ref={ref}
@@ -178,8 +176,8 @@ const MenubarCheckboxItem = React.forwardRef<
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 
 const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+  MenubarPrimitive.RadioItemRef,
+  MenubarPrimitive.RadioItemProps
 >(({ className, children, ...props }, ref) => (
   <MenubarPrimitive.RadioItem
     ref={ref}
@@ -201,8 +199,8 @@ const MenubarRadioItem = React.forwardRef<
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
 const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+  MenubarPrimitive.LabelRef,
+  MenubarPrimitive.LabelProps & {
     inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
@@ -219,8 +217,8 @@ const MenubarLabel = React.forwardRef<
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
 const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+  MenubarPrimitive.SeparatorRef,
+  MenubarPrimitive.SeparatorProps
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator
     ref={ref}
@@ -230,7 +228,7 @@ const MenubarSeparator = React.forwardRef<
 ));
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
-const MenubarShortcut = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Text>) => {
+const MenubarShortcut = ({ className, ...props }: TextProps) => {
   return (
     <Text
       className={cn(

package/__generated/components/ui/navigation-menu.tsx

@@ -15,8 +15,8 @@ import { ChevronDown } from '../../lib/icons/ChevronDown';
 import { cn } from '../../lib/utils';
 
 const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+  NavigationMenuPrimitive.RootRef,
+  NavigationMenuPrimitive.RootProps
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
@@ -30,8 +30,8 @@ const NavigationMenu = React.forwardRef<
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
 const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+  NavigationMenuPrimitive.ListRef,
+  NavigationMenuPrimitive.ListProps
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.List
     ref={ref}
@@ -51,8 +51,8 @@ const navigationMenuTriggerStyle = cva(
 );
 
 const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+  NavigationMenuPrimitive.TriggerRef,
+  NavigationMenuPrimitive.TriggerProps
 >(({ className, children, ...props }, ref) => {
   const { value } = NavigationMenuPrimitive.useRootContext();
   const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
@@ -90,8 +90,8 @@ const NavigationMenuTrigger = React.forwardRef<
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
+  NavigationMenuPrimitive.ContentRef,
+  NavigationMenuPrimitive.ContentProps & {
     portalHost?: string;
   }
 >(({ className, children, portalHost, ...props }, ref) => {
@@ -125,8 +125,8 @@ NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
 const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+  NavigationMenuPrimitive.ViewportRef,
+  NavigationMenuPrimitive.ViewportProps
 >(({ className, ...props }, ref) => {
   return (
     <View className={cn('absolute left-0 top-full flex justify-center')}>
@@ -146,8 +146,8 @@ const NavigationMenuViewport = React.forwardRef<
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+  NavigationMenuPrimitive.IndicatorRef,
+  NavigationMenuPrimitive.IndicatorProps
 >(({ className, ...props }, ref) => {
   const { value } = NavigationMenuPrimitive.useRootContext();
   const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
@@ -176,6 +176,6 @@ export {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  NavigationMenuViewport,
   navigationMenuTriggerStyle,
+  NavigationMenuViewport,
 };

package/__generated/components/ui/popover.tsx

@@ -1,17 +1,17 @@
+import * as PopoverPrimitive from '@rn-primitives/popover';
 import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import { TextClassContext } from './text';
-import * as PopoverPrimitive from '@rn-primitives/popover';
 import { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
 
 const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { portalHost?: string }
+  PopoverPrimitive.ContentRef,
+  PopoverPrimitive.ContentProps & { portalHost?: string }
 >(({ className, align = 'center', sideOffset = 4, portalHost, ...props }, ref) => {
   return (
     <PopoverPrimitive.Portal hostName={portalHost}>

package/__generated/components/ui/progress.tsx

@@ -1,3 +1,4 @@
+import * as ProgressPrimitive from '@rn-primitives/progress';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
 import Animated, {
@@ -7,12 +8,11 @@ import Animated, {
   useDerivedValue,
   withSpring,
 } from 'react-native-reanimated';
-import * as ProgressPrimitive from '@rn-primitives/progress';
 import { cn } from '../../lib/utils';
 
 const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+  ProgressPrimitive.RootRef,
+  ProgressPrimitive.RootProps & {
     indicatorClassName?: string;
   }
 >(({ className, value, indicatorClassName, ...props }, ref) => {