fix(registry): ref types + remove unnecessary react imports

Author: mrzachnugent

packages/registry/src/default/components/ui/accordion.tsx

@@ -3,7 +3,6 @@ import { TextClassContext } from '@/registry/default/components/ui/text';
 import { cn } from '@/registry/default/lib/utils';
 import * as AccordionPrimitive from '@rn-primitives/accordion';
 import { ChevronDown } from 'lucide-react-native';
-import * as React from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import Animated, {
   FadeOutUp,
@@ -17,9 +16,8 @@ import Animated, {
 function Accordion({
   children,
   ...props
-}: Omit<AccordionPrimitive.RootProps, 'asChild'> & {
-  ref?: React.RefObject<AccordionPrimitive.RootRef | null>;
-}) {
+}: Omit<AccordionPrimitive.RootProps, 'asChild'> &
+  React.RefAttributes<AccordionPrimitive.RootRef>) {
   return (
     <LayoutAnimationConfig skipEntering>
       <AccordionPrimitive.Root
@@ -36,9 +34,7 @@ function AccordionItem({
   className,
   value,
   ...props
-}: AccordionPrimitive.ItemProps & {
-  ref?: React.RefObject<AccordionPrimitive.ItemRef | null>;
-}) {
+}: AccordionPrimitive.ItemProps & React.RefAttributes<AccordionPrimitive.ItemRef>) {
   return (
     <AccordionPrimitive.Item
       className={cn('border-border border-b', className)}
@@ -62,8 +58,7 @@ function AccordionTrigger({
   ...props
 }: AccordionPrimitive.TriggerProps & {
   children?: React.ReactNode;
-  ref?: React.RefObject<AccordionPrimitive.TriggerRef | null>;
-}) {
+} & React.RefAttributes<AccordionPrimitive.TriggerRef>) {
   const { isExpanded } = AccordionPrimitive.useItemContext();
 
   const progress = useDerivedValue(
@@ -117,9 +112,7 @@ function AccordionContent({
   className,
   children,
   ...props
-}: AccordionPrimitive.ContentProps & {
-  ref?: React.RefObject<AccordionPrimitive.ContentRef | null>;
-}) {
+}: AccordionPrimitive.ContentProps & React.RefAttributes<AccordionPrimitive.ContentRef>) {
   const { isExpanded } = AccordionPrimitive.useItemContext();
   return (
     <TextClassContext.Provider value="text-sm">

packages/registry/src/default/components/ui/alert-dialog.tsx

@@ -20,9 +20,8 @@ function AlertDialogOverlay({
   className,
   children,
   ...props
-}: Omit<AlertDialogPrimitive.OverlayProps, 'asChild'> & {
-  ref?: React.RefObject<AlertDialogPrimitive.OverlayRef | null>;
-}) {
+}: Omit<AlertDialogPrimitive.OverlayProps, 'asChild'> &
+  React.RefAttributes<AlertDialogPrimitive.OverlayRef>) {
   return (
     <FullWindowOverlay>
       <AlertDialogPrimitive.Overlay
@@ -48,10 +47,10 @@ function AlertDialogContent({
   className,
   portalHost,
   ...props
-}: AlertDialogPrimitive.ContentProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.ContentRef | null>;
-  portalHost?: string;
-}) {
+}: AlertDialogPrimitive.ContentProps &
+  React.RefAttributes<AlertDialogPrimitive.ContentRef> & {
+    portalHost?: string;
+  }) {
   return (
     <AlertDialogPortal hostName={portalHost}>
       <AlertDialogOverlay>
@@ -90,9 +89,7 @@ function AlertDialogFooter({ className, ...props }: ViewProps) {
 function AlertDialogTitle({
   className,
   ...props
-}: AlertDialogPrimitive.TitleProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.TitleRef | null>;
-}) {
+}: AlertDialogPrimitive.TitleProps & React.RefAttributes<AlertDialogPrimitive.TitleRef>) {
   return (
     <AlertDialogPrimitive.Title
       className={cn('text-foreground text-lg font-semibold', className)}
@@ -104,9 +101,8 @@ function AlertDialogTitle({
 function AlertDialogDescription({
   className,
   ...props
-}: AlertDialogPrimitive.DescriptionProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.DescriptionRef | null>;
-}) {
+}: AlertDialogPrimitive.DescriptionProps &
+  React.RefAttributes<AlertDialogPrimitive.DescriptionRef>) {
   return (
     <AlertDialogPrimitive.Description
       className={cn('text-muted-foreground text-sm', className)}
@@ -118,9 +114,7 @@ function AlertDialogDescription({
 function AlertDialogAction({
   className,
   ...props
-}: AlertDialogPrimitive.ActionProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.ActionRef | null>;
-}) {
+}: AlertDialogPrimitive.ActionProps & React.RefAttributes<AlertDialogPrimitive.ActionRef>) {
   return (
     <TextClassContext.Provider value={buttonTextVariants({ className })}>
       <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />
@@ -131,9 +125,7 @@ function AlertDialogAction({
 function AlertDialogCancel({
   className,
   ...props
-}: AlertDialogPrimitive.CancelProps & {
-  ref?: React.RefObject<AlertDialogPrimitive.CancelRef | null>;
-}) {
+}: AlertDialogPrimitive.CancelProps & React.RefAttributes<AlertDialogPrimitive.CancelRef>) {
   return (
     <TextClassContext.Provider value={buttonTextVariants({ className, variant: 'outline' })}>
       <AlertDialogPrimitive.Cancel

packages/registry/src/default/components/ui/alert.tsx

@@ -26,8 +26,8 @@ function Alert({
   iconClassName,
   ...props
 }: ViewProps &
-  VariantProps<typeof alertVariants> & {
-    ref?: React.RefObject<View | null>;
+  VariantProps<typeof alertVariants> &
+  React.RefAttributes<View> & {
     icon: LucideIcon;
     iconClassName?: string;
   }) {

packages/registry/src/default/components/ui/avatar.tsx

@@ -1,13 +1,10 @@
 import { cn } from '@/registry/default/lib/utils';
 import * as AvatarPrimitive from '@rn-primitives/avatar';
-import * as React from 'react';
 
 function Avatar({
   className,
   ...props
-}: AvatarPrimitive.RootProps & {
-  ref?: React.RefObject<AvatarPrimitive.RootRef | null>;
-}) {
+}: AvatarPrimitive.RootProps & React.RefAttributes<AvatarPrimitive.RootRef>) {
   return (
     <AvatarPrimitive.Root
       className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
@@ -19,9 +16,7 @@ function Avatar({
 function AvatarImage({
   className,
   ...props
-}: AvatarPrimitive.ImageProps & {
-  ref?: React.RefObject<AvatarPrimitive.ImageRef | null>;
-}) {
+}: AvatarPrimitive.ImageProps & React.RefAttributes<AvatarPrimitive.ImageRef>) {
   return (
     <AvatarPrimitive.Image className={cn('aspect-square h-full w-full', className)} {...props} />
   );
@@ -30,9 +25,7 @@ function AvatarImage({
 function AvatarFallback({
   className,
   ...props
-}: AvatarPrimitive.FallbackProps & {
-  ref?: React.RefObject<AvatarPrimitive.FallbackRef | null>;
-}) {
+}: AvatarPrimitive.FallbackProps & React.RefAttributes<AvatarPrimitive.FallbackRef>) {
   return (
     <AvatarPrimitive.Fallback
       className={cn(

packages/registry/src/default/components/ui/badge.tsx

@@ -49,9 +49,10 @@ const badgeTextVariants = cva('text-xs font-semibold', {
   },
 });
 
-type BadgeProps = ViewProps & {
-  asChild?: boolean;
-} & VariantProps<typeof badgeVariants>;
+type BadgeProps = ViewProps &
+  React.RefAttributes<View> & {
+    asChild?: boolean;
+  } & VariantProps<typeof badgeVariants>;
 
 function Badge({ className, variant, asChild, ...props }: BadgeProps) {
   const Component = asChild ? Slot.View : View;

packages/registry/src/default/components/ui/button.tsx

@@ -1,7 +1,6 @@
 import { TextClassContext } from '@/registry/default/components/ui/text';
 import { cn } from '@/registry/default/lib/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
 import { Platform, Pressable } from 'react-native';
 
 const buttonVariants = cva(
@@ -89,7 +88,9 @@ const buttonTextVariants = cva(
   }
 );
 
-type ButtonProps = React.ComponentProps<typeof Pressable> & VariantProps<typeof buttonVariants>;
+type ButtonProps = React.ComponentProps<typeof Pressable> &
+  React.RefAttributes<typeof Pressable> &
+  VariantProps<typeof buttonVariants>;
 
 function Button({ className, variant, size, ...props }: ButtonProps) {
   return (

packages/registry/src/default/components/ui/card.tsx

@@ -1,14 +1,8 @@
 import { Text, TextClassContext } from '@/registry/new-york/components/ui/text';
 import { cn } from '@/registry/new-york/lib/utils';
-import * as React from 'react';
 import { View, type ViewProps } from 'react-native';
 
-function Card({
-  className,
-  ...props
-}: ViewProps & {
-  ref?: React.RefObject<View | null>;
-}) {
+function Card({ className, ...props }: ViewProps & React.RefAttributes<View>) {
   return (
     <TextClassContext.Provider value="text-card-foreground">
       <View
@@ -22,21 +16,14 @@ function Card({
   );
 }
 
-function CardHeader({
-  className,
-  ...props
-}: ViewProps & {
-  ref?: React.RefObject<View | null>;
-}) {
+function CardHeader({ className, ...props }: ViewProps & React.RefAttributes<View>) {
   return <View className={cn('flex flex-col gap-1.5 p-6', className)} {...props} />;
 }
 
 function CardTitle({
   className,
   ...props
-}: React.ComponentProps<typeof Text> & {
-  ref?: React.RefObject<Text | null>;
-}) {
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
   return (
     <Text
       role="heading"
@@ -50,27 +37,15 @@ function CardTitle({
 function CardDescription({
   className,
   ...props
-}: React.ComponentProps<typeof Text> & {
-  ref?: React.RefObject<Text | null>;
-}) {
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
   return <Text className={cn('text-muted-foreground text-sm', className)} {...props} />;
 }
 
-function CardContent({
-  className,
-  ...props
-}: ViewProps & {
-  ref?: React.RefObject<View | null>;
-}) {
+function CardContent({ className, ...props }: ViewProps & React.RefAttributes<View>) {
   return <View className={cn('p-6 pt-0', className)} {...props} />;
 }
 
-function CardFooter({
-  className,
-  ...props
-}: ViewProps & {
-  ref?: React.RefObject<View | null>;
-}) {
+function CardFooter({ className, ...props }: ViewProps & React.RefAttributes<View>) {
   return <View className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />;
 }
 

packages/registry/src/default/components/ui/checkbox.tsx

@@ -2,7 +2,6 @@ import { Icon } from '@/registry/default/components/ui/icon';
 import { cn } from '@/registry/default/lib/utils';
 import * as CheckboxPrimitive from '@rn-primitives/checkbox';
 import { Check } from 'lucide-react-native';
-import * as React from 'react';
 import { Platform } from 'react-native';
 
 const DEFAULT_HIT_SLOP = 24;
@@ -13,12 +12,12 @@ function Checkbox({
   indicatorClassName,
   iconClassName,
   ...props
-}: CheckboxPrimitive.RootProps & {
-  checkedClassName?: string;
-  indicatorClassName?: string;
-  iconClassName?: string;
-  ref?: React.RefObject<CheckboxPrimitive.RootRef | null>;
-}) {
+}: CheckboxPrimitive.RootProps &
+  React.RefAttributes<CheckboxPrimitive.RootRef> & {
+    checkedClassName?: string;
+    indicatorClassName?: string;
+    iconClassName?: string;
+  }) {
   return (
     <CheckboxPrimitive.Root
       className={cn(