@react-native-reusables/cli 0.1.0 → 0.1.2

package/__generated/components/ui/accordion.tsx

@@ -16,43 +16,41 @@ import { ChevronDown } from '../../lib/icons/ChevronDown';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 
-const Accordion = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
->(({ children, ...props }, ref) => {
-  return (
-    <LayoutAnimationConfig skipEntering>
-      <AccordionPrimitive.Root ref={ref} {...props} asChild={Platform.OS !== 'web'}>
-        <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>
-      </AccordionPrimitive.Root>
-    </LayoutAnimationConfig>
-  );
-});
+const Accordion = React.forwardRef<AccordionPrimitive.RootRef, AccordionPrimitive.RootProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <LayoutAnimationConfig skipEntering>
+        <AccordionPrimitive.Root ref={ref} {...props} asChild={Platform.OS !== 'web'}>
+          <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>
+        </AccordionPrimitive.Root>
+      </LayoutAnimationConfig>
+    );
+  }
+);
 
 Accordion.displayName = AccordionPrimitive.Root.displayName;
 
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, value, ...props }, ref) => {
-  return (
-    <Animated.View className={'overflow-hidden'} layout={LinearTransition.duration(200)}>
-      <AccordionPrimitive.Item
-        ref={ref}
-        className={cn('border-b border-border', className)}
-        value={value}
-        {...props}
-      />
-    </Animated.View>
-  );
-});
+const AccordionItem = React.forwardRef<AccordionPrimitive.ItemRef, AccordionPrimitive.ItemProps>(
+  ({ className, value, ...props }, ref) => {
+    return (
+      <Animated.View className={'overflow-hidden'} layout={LinearTransition.duration(200)}>
+        <AccordionPrimitive.Item
+          ref={ref}
+          className={cn('border-b border-border', className)}
+          value={value}
+          {...props}
+        />
+      </Animated.View>
+    );
+  }
+);
 AccordionItem.displayName = AccordionPrimitive.Item.displayName;
 
 const Trigger = Platform.OS === 'web' ? View : Pressable;
 
 const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  React.ComponentPropsWithoutRef<typeof Pressable>
+  AccordionPrimitive.TriggerRef,
+  AccordionPrimitive.TriggerProps
 >(({ className, children, ...props }, ref) => {
   const { isExpanded } = AccordionPrimitive.useItemContext();
 
@@ -87,8 +85,8 @@ const AccordionTrigger = React.forwardRef<
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+  AccordionPrimitive.ContentRef,
+  AccordionPrimitive.ContentProps
 >(({ className, children, ...props }, ref) => {
   const { isExpanded } = AccordionPrimitive.useItemContext();
   return (

package/__generated/components/ui/alert-dialog.tsx

@@ -1,8 +1,8 @@
+import * as AlertDialogPrimitive from '@rn-primitives/alert-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 { buttonTextVariants, buttonVariants } from '../../components/ui/button';
-import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 
@@ -13,8 +13,8 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlayWeb = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+  AlertDialogPrimitive.OverlayRef,
+  AlertDialogPrimitive.OverlayProps
 >(({ className, ...props }, ref) => {
   const { open } = AlertDialogPrimitive.useRootContext();
   return (
@@ -33,8 +33,8 @@ const AlertDialogOverlayWeb = React.forwardRef<
 AlertDialogOverlayWeb.displayName = 'AlertDialogOverlayWeb';
 
 const AlertDialogOverlayNative = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+  AlertDialogPrimitive.OverlayRef,
+  AlertDialogPrimitive.OverlayProps
 >(({ className, children, ...props }, ref) => {
   return (
     <AlertDialogPrimitive.Overlay
@@ -59,8 +59,8 @@ const AlertDialogOverlay = Platform.select({
 });
 
 const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & { portalHost?: string }
+  AlertDialogPrimitive.ContentRef,
+  AlertDialogPrimitive.ContentProps & { portalHost?: string }
 >(({ className, portalHost, ...props }, ref) => {
   const { open } = AlertDialogPrimitive.useRootContext();
 
@@ -84,18 +84,12 @@ const AlertDialogContent = React.forwardRef<
 });
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof View>) => (
+const AlertDialogHeader = ({ className, ...props }: ViewProps) => (
   <View className={cn('flex flex-col gap-2', className)} {...props} />
 );
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof View>) => (
+const AlertDialogFooter = ({ className, ...props }: ViewProps) => (
   <View
     className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
     {...props}
@@ -104,8 +98,8 @@ const AlertDialogFooter = ({
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 
 const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+  AlertDialogPrimitive.TitleRef,
+  AlertDialogPrimitive.TitleProps
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
@@ -116,8 +110,8 @@ const AlertDialogTitle = React.forwardRef<
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+  AlertDialogPrimitive.DescriptionRef,
+  AlertDialogPrimitive.DescriptionProps
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
@@ -128,8 +122,8 @@ const AlertDialogDescription = React.forwardRef<
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+  AlertDialogPrimitive.ActionRef,
+  AlertDialogPrimitive.ActionProps
 >(({ className, ...props }, ref) => (
   <TextClassContext.Provider value={buttonTextVariants({ className })}>
     <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
@@ -138,8 +132,8 @@ const AlertDialogAction = React.forwardRef<
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+  AlertDialogPrimitive.CancelRef,
+  AlertDialogPrimitive.CancelProps
 >(({ className, ...props }, ref) => (
   <TextClassContext.Provider value={buttonTextVariants({ className, variant: 'outline' })}>
     <AlertDialogPrimitive.Cancel

package/__generated/components/ui/avatar.tsx

@@ -1,48 +1,41 @@
-import * as React from 'react';
 import * as AvatarPrimitive from '@rn-primitives/avatar';
+import * as React from 'react';
 import { cn } from '../../lib/utils';
 
-const AvatarPrimitiveRoot = AvatarPrimitive.Root;
-const AvatarPrimitiveImage = AvatarPrimitive.Image;
-const AvatarPrimitiveFallback = AvatarPrimitive.Fallback;
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitiveRoot>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitiveRoot>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitiveRoot
-    ref={ref}
-    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitiveRoot.displayName;
+const Avatar = React.forwardRef<AvatarPrimitive.RootRef, AvatarPrimitive.RootProps>(
+  ({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root
+      ref={ref}
+      className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+      {...props}
+    />
+  )
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitiveImage>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitiveImage>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitiveImage
-    ref={ref}
-    className={cn('aspect-square h-full w-full', className)}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitiveImage.displayName;
+const AvatarImage = React.forwardRef<AvatarPrimitive.ImageRef, AvatarPrimitive.ImageProps>(
+  ({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image
+      ref={ref}
+      className={cn('aspect-square h-full w-full', className)}
+      {...props}
+    />
+  )
+);
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitiveFallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitiveFallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitiveFallback
-    ref={ref}
-    className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
-      className
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitiveFallback.displayName;
+const AvatarFallback = React.forwardRef<AvatarPrimitive.FallbackRef, AvatarPrimitive.FallbackProps>(
+  ({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 export { Avatar, AvatarFallback, AvatarImage };

package/__generated/components/ui/badge.tsx

@@ -1,7 +1,7 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { View } from 'react-native';
 import * as Slot from '@rn-primitives/slot';
 import type { SlottableViewProps } from '@rn-primitives/types';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { View } from 'react-native';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 

package/__generated/components/ui/button.tsx

@@ -1,8 +1,8 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { Pressable } from 'react-native';
-import { TextClassContext } from './text';
 import { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
 
 const buttonVariants = cva(
   'group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
@@ -64,10 +64,7 @@ const Button = React.forwardRef<React.ElementRef<typeof Pressable>, ButtonProps>
   ({ className, variant, size, ...props }, ref) => {
     return (
       <TextClassContext.Provider
-        value={cn(
-          props.disabled && 'web:pointer-events-none',
-          buttonTextVariants({ variant, size })
-        )}
+        value={buttonTextVariants({ variant, size, className: 'web:pointer-events-none' })}
       >
         <Pressable
           className={cn(

package/__generated/components/ui/card.tsx

@@ -1,67 +1,55 @@
-import * as React from 'react';
-import { Text, View } from 'react-native';
-import { TextClassContext } from './text';
 import { TextRef, ViewRef } from '@rn-primitives/types';
+import * as React from 'react';
+import { Text, type TextProps, View, type ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
 
-const Card = React.forwardRef<ViewRef, React.ComponentPropsWithoutRef<typeof View>>(
-  ({ className, ...props }, ref) => (
-    <View
-      ref={ref}
-      className={cn(
-        'rounded-lg border border-border bg-card shadow-sm shadow-foreground/10',
-        className
-      )}
-      {...props}
-    />
-  )
-);
+const Card = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      'rounded-lg border border-border bg-card shadow-sm shadow-foreground/10',
+      className
+    )}
+    {...props}
+  />
+));
 Card.displayName = 'Card';
 
-const CardHeader = React.forwardRef<ViewRef, React.ComponentPropsWithoutRef<typeof View>>(
-  ({ className, ...props }, ref) => (
-    <View ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  )
-);
+const CardHeader = React.forwardRef<ViewRef, ViewProps>(({ 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<TextRef, React.ComponentPropsWithoutRef<typeof Text>>(
-  ({ className, ...props }, ref) => (
-    <Text
-      role='heading'
-      aria-level={3}
-      ref={ref}
-      className={cn(
-        'text-2xl text-card-foreground font-semibold leading-none tracking-tight',
-        className
-      )}
-      {...props}
-    />
-  )
-);
+const CardTitle = React.forwardRef<TextRef, TextProps>(({ className, ...props }, ref) => (
+  <Text
+    role='heading'
+    aria-level={3}
+    ref={ref}
+    className={cn(
+      'text-2xl text-card-foreground font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
 CardTitle.displayName = 'CardTitle';
 
-const CardDescription = React.forwardRef<TextRef, React.ComponentPropsWithoutRef<typeof Text>>(
-  ({ className, ...props }, ref) => (
-    <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-  )
-);
+const CardDescription = React.forwardRef<TextRef, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
 CardDescription.displayName = 'CardDescription';
 
-const CardContent = React.forwardRef<ViewRef, React.ComponentPropsWithoutRef<typeof View>>(
-  ({ className, ...props }, ref) => (
-    <TextClassContext.Provider value='text-card-foreground'>
-      <View ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-    </TextClassContext.Provider>
-  )
-);
+const CardContent = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
+  <TextClassContext.Provider value='text-card-foreground'>
+    <View ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  </TextClassContext.Provider>
+));
 CardContent.displayName = 'CardContent';
 
-const CardFooter = React.forwardRef<ViewRef, React.ComponentPropsWithoutRef<typeof View>>(
-  ({ className, ...props }, ref) => (
-    <View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />
-  )
-);
+const CardFooter = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />
+));
 CardFooter.displayName = 'CardFooter';
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/__generated/components/ui/checkbox.tsx

@@ -4,30 +4,29 @@ import { Platform } from 'react-native';
 import { Check } from '../../lib/icons/Check';
 import { cn } from '../../lib/utils';
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <CheckboxPrimitive.Root
-      ref={ref}
-      className={cn(
-        'web:peer h-4 w-4 native:h-[20] native:w-[20] shrink-0 rounded-sm native:rounded border border-primary web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        props.checked && 'bg-primary',
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator className={cn('items-center justify-center h-full w-full')}>
-        <Check
-          size={12}
-          strokeWidth={Platform.OS === 'web' ? 2.5 : 3.5}
-          className='text-primary-foreground'
-        />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-});
+const Checkbox = React.forwardRef<CheckboxPrimitive.RootRef, CheckboxPrimitive.RootProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <CheckboxPrimitive.Root
+        ref={ref}
+        className={cn(
+          'web:peer h-4 w-4 native:h-[20] native:w-[20] shrink-0 rounded-sm native:rounded border border-primary web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          props.checked && 'bg-primary',
+          className
+        )}
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator className={cn('items-center justify-center h-full w-full')}>
+          <Check
+            size={12}
+            strokeWidth={Platform.OS === 'web' ? 2.5 : 3.5}
+            className='text-primary-foreground'
+          />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    );
+  }
+);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };

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

@@ -1,6 +1,14 @@
 import * as ContextMenuPrimitive from '@rn-primitives/context-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';
@@ -15,8 +23,8 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+  ContextMenuPrimitive.SubTriggerRef,
+  ContextMenuPrimitive.SubTriggerProps & {
     inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => {
@@ -48,8 +56,8 @@ const ContextMenuSubTrigger = React.forwardRef<
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+  ContextMenuPrimitive.SubContentRef,
+  ContextMenuPrimitive.SubContentProps
 >(({ className, ...props }, ref) => {
   const { open } = ContextMenuPrimitive.useSubContext();
   return (
@@ -69,8 +77,8 @@ const ContextMenuSubContent = React.forwardRef<
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
+  ContextMenuPrimitive.ContentRef,
+  ContextMenuPrimitive.ContentProps & {
     overlayStyle?: StyleProp<ViewStyle>;
     overlayClassName?: string;
     portalHost?: string;
@@ -110,8 +118,8 @@ const ContextMenuContent = React.forwardRef<
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+  ContextMenuPrimitive.ItemRef,
+  ContextMenuPrimitive.ItemProps & {
     inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
@@ -131,8 +139,8 @@ const ContextMenuItem = React.forwardRef<
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+  ContextMenuPrimitive.CheckboxItemRef,
+  ContextMenuPrimitive.CheckboxItemProps
 >(({ className, children, ...props }, ref) => (
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
@@ -154,8 +162,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+  ContextMenuPrimitive.RadioItemRef,
+  ContextMenuPrimitive.RadioItemProps
 >(({ className, children, ...props }, ref) => (
   <ContextMenuPrimitive.RadioItem
     ref={ref}
@@ -177,8 +185,8 @@ const ContextMenuRadioItem = React.forwardRef<
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+  ContextMenuPrimitive.LabelRef,
+  ContextMenuPrimitive.LabelProps & {
     inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
@@ -195,8 +203,8 @@ const ContextMenuLabel = React.forwardRef<
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+  ContextMenuPrimitive.SeparatorRef,
+  ContextMenuPrimitive.SeparatorProps
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
@@ -206,10 +214,7 @@ const ContextMenuSeparator = React.forwardRef<
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof Text>) => {
+const ContextMenuShortcut = ({ className, ...props }: TextProps) => {
   return (
     <Text
       className={cn(
@@ -226,7 +231,6 @@ export {
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
-  ContextMenuTrigger,
   ContextMenuGroup,
   ContextMenuItem,
   ContextMenuLabel,
@@ -237,4 +241,5 @@ export {
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
+  ContextMenuTrigger,
 };