@react-native-reusables/cli 0.4.0 → 0.4.1

package/__generated/components/ui/accordion.tsx

@@ -16,42 +16,52 @@ import { ChevronDown } from '../../lib/icons/ChevronDown';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 
-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;
+function Accordion({
+  children,
+  ...props
+}: Omit<AccordionPrimitive.RootProps, 'asChild'> & {
+  ref?: React.RefObject<AccordionPrimitive.RootRef>;
+}) {
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <AccordionPrimitive.Root
+        {...(props as AccordionPrimitive.RootProps)}
+        asChild={Platform.OS !== 'web'}
+      >
+        <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>
+      </AccordionPrimitive.Root>
+    </LayoutAnimationConfig>
+  );
+}
 
-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;
+function AccordionItem({
+  className,
+  value,
+  ...props
+}: AccordionPrimitive.ItemProps & {
+  ref?: React.RefObject<AccordionPrimitive.ItemRef>;
+}) {
+  return (
+    <Animated.View className={'overflow-hidden'} layout={LinearTransition.duration(200)}>
+      <AccordionPrimitive.Item
+        className={cn('border-b border-border', className)}
+        value={value}
+        {...props}
+      />
+    </Animated.View>
+  );
+}
 
 const Trigger = Platform.OS === 'web' ? View : Pressable;
 
-const AccordionTrigger = React.forwardRef<
-  AccordionPrimitive.TriggerRef,
-  AccordionPrimitive.TriggerProps
->(({ className, children, ...props }, ref) => {
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.TriggerProps & {
+  children?: React.ReactNode;
+  ref?: React.RefObject<AccordionPrimitive.TriggerRef>;
+}) {
   const { isExpanded } = AccordionPrimitive.useItemContext();
 
   const progress = useDerivedValue(() =>
@@ -65,14 +75,14 @@ const AccordionTrigger = React.forwardRef<
   return (
     <TextClassContext.Provider value='native:text-lg font-medium web:group-hover:underline'>
       <AccordionPrimitive.Header className='flex'>
-        <AccordionPrimitive.Trigger ref={ref} {...props} asChild>
+        <AccordionPrimitive.Trigger {...props} asChild>
           <Trigger
             className={cn(
               'flex flex-row web:flex-1 items-center justify-between py-4 web:transition-all group web:focus-visible:outline-none web:focus-visible:ring-1 web:focus-visible:ring-muted-foreground',
               className
             )}
           >
-            <>{children}</>
+            {children}
             <Animated.View style={chevronStyle}>
               <ChevronDown size={18} className={'text-foreground shrink-0'} />
             </Animated.View>
@@ -81,13 +91,15 @@ const AccordionTrigger = React.forwardRef<
       </AccordionPrimitive.Header>
     </TextClassContext.Provider>
   );
-});
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+}
 
-const AccordionContent = React.forwardRef<
-  AccordionPrimitive.ContentRef,
-  AccordionPrimitive.ContentProps
->(({ className, children, ...props }, ref) => {
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.ContentProps & {
+  ref?: React.RefObject<AccordionPrimitive.ContentRef>;
+}) {
   const { isExpanded } = AccordionPrimitive.useItemContext();
   return (
     <TextClassContext.Provider value='native:text-lg'>
@@ -96,14 +108,13 @@ const AccordionContent = React.forwardRef<
           'overflow-hidden text-sm web:transition-all',
           isExpanded ? 'web:animate-accordion-down' : 'web:animate-accordion-up'
         )}
-        ref={ref}
         {...props}
       >
         <InnerContent className={cn('pb-4', className)}>{children}</InnerContent>
       </AccordionPrimitive.Content>
     </TextClassContext.Provider>
   );
-});
+}
 
 function InnerContent({ children, className }: { children: React.ReactNode; className?: string }) {
   if (Platform.OS === 'web') {
@@ -120,6 +131,4 @@ function InnerContent({ children, className }: { children: React.ReactNode; clas
   );
 }
 
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -1,6 +1,6 @@
 import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
 import * as React from 'react';
-import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
+import { Platform, View, type ViewProps } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { buttonTextVariants, buttonVariants } from '../../components/ui/button';
 import { cn } from '../../lib/utils';
@@ -12,10 +12,12 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-const AlertDialogOverlayWeb = React.forwardRef<
-  AlertDialogPrimitive.OverlayRef,
-  AlertDialogPrimitive.OverlayProps
->(({ className, ...props }, ref) => {
+function AlertDialogOverlayWeb({
+  className,
+  ...props
+}: AlertDialogPrimitive.OverlayProps & {
+  ref?: React.RefObject<AlertDialogPrimitive.OverlayRef>;
+}) {
   const { open } = AlertDialogPrimitive.useRootContext();
   return (
     <AlertDialogPrimitive.Overlay
@@ -25,23 +27,24 @@ const AlertDialogOverlayWeb = React.forwardRef<
         className
       )}
       {...props}
-      ref={ref}
     />
   );
-});
-
-AlertDialogOverlayWeb.displayName = 'AlertDialogOverlayWeb';
-
-const AlertDialogOverlayNative = React.forwardRef<
-  AlertDialogPrimitive.OverlayRef,
-  AlertDialogPrimitive.OverlayProps
->(({ className, children, ...props }, ref) => {
+}
+
+function AlertDialogOverlayNative({
+  className,
+  children,
+  ...props
+}: AlertDialogPrimitive.OverlayProps & {
+  ref?: React.RefObject<AlertDialogPrimitive.OverlayRef>;
+}) {
   return (
     <AlertDialogPrimitive.Overlay
-      style={StyleSheet.absoluteFill}
-      className={cn('z-50 bg-black/80 flex justify-center items-center p-2', className)}
+      className={cn(
+        'z-50 absolute top-0 right-0 bottom-0 left-0 bg-black/80 flex justify-center items-center p-2',
+        className
+      )}
       {...props}
-      ref={ref}
       asChild
     >
       <Animated.View entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)}>
@@ -49,26 +52,27 @@ const AlertDialogOverlayNative = React.forwardRef<
       </Animated.View>
     </AlertDialogPrimitive.Overlay>
   );
-});
-
-AlertDialogOverlayNative.displayName = 'AlertDialogOverlayNative';
+}
 
 const AlertDialogOverlay = Platform.select({
   web: AlertDialogOverlayWeb,
   default: AlertDialogOverlayNative,
 });
 
-const AlertDialogContent = React.forwardRef<
-  AlertDialogPrimitive.ContentRef,
-  AlertDialogPrimitive.ContentProps & { portalHost?: string }
->(({ className, portalHost, ...props }, ref) => {
+function AlertDialogContent({
+  className,
+  portalHost,
+  ...props
+}: AlertDialogPrimitive.ContentProps & {
+  ref?: React.RefObject<AlertDialogPrimitive.ContentRef>;
+  portalHost?: string;
+}) {
   const { open } = AlertDialogPrimitive.useRootContext();
 
   return (
     <AlertDialogPortal hostName={portalHost}>
       <AlertDialogOverlay>
         <AlertDialogPrimitive.Content
-          ref={ref}
           className={cn(
             'z-50 max-w-lg gap-4 border border-border bg-background p-6 shadow-lg shadow-foreground/10 web:duration-200 rounded-lg',
             open
@@ -81,69 +85,77 @@ const AlertDialogContent = React.forwardRef<
       </AlertDialogOverlay>
     </AlertDialogPortal>
   );
-});
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: ViewProps) => (
-  <View className={cn('flex flex-col gap-2', className)} {...props} />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({ className, ...props }: ViewProps) => (
-  <View
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
+}
 
-const AlertDialogTitle = React.forwardRef<
-  AlertDialogPrimitive.TitleRef,
-  AlertDialogPrimitive.TitleProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg native:text-xl text-foreground font-semibold', className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+function AlertDialogHeader({ className, ...props }: ViewProps) {
+  return <View className={cn('flex flex-col gap-2', className)} {...props} />;
+}
 
-const AlertDialogDescription = React.forwardRef<
-  AlertDialogPrimitive.DescriptionRef,
-  AlertDialogPrimitive.DescriptionProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm native:text-base text-muted-foreground', className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  AlertDialogPrimitive.ActionRef,
-  AlertDialogPrimitive.ActionProps
->(({ className, ...props }, ref) => (
-  <TextClassContext.Provider value={buttonTextVariants({ className })}>
-    <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-  </TextClassContext.Provider>
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  AlertDialogPrimitive.CancelRef,
-  AlertDialogPrimitive.CancelProps
->(({ className, ...props }, ref) => (
-  <TextClassContext.Provider value={buttonTextVariants({ className, variant: 'outline' })}>
-    <AlertDialogPrimitive.Cancel
-      ref={ref}
-      className={cn(buttonVariants({ variant: 'outline', className }))}
+function AlertDialogFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
       {...props}
     />
-  </TextClassContext.Provider>
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogPrimitive.TitleProps & {
+  ref?: React.RefObject<AlertDialogPrimitive.TitleRef>;
+}) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn('text-lg native:text-xl text-foreground font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogPrimitive.DescriptionProps & {
+  ref?: React.RefObject<AlertDialogPrimitive.DescriptionRef>;
+}) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn('text-sm native:text-base text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: AlertDialogPrimitive.ActionProps & {
+  ref?: React.RefObject<AlertDialogPrimitive.ActionRef>;
+}) {
+  return (
+    <TextClassContext.Provider value={buttonTextVariants({ className })}>
+      <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />
+    </TextClassContext.Provider>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: AlertDialogPrimitive.CancelProps & {
+  ref?: React.RefObject<AlertDialogPrimitive.CancelRef>;
+}) {
+  return (
+    <TextClassContext.Provider value={buttonTextVariants({ className, variant: 'outline' })}>
+      <AlertDialogPrimitive.Cancel
+        className={cn(buttonVariants({ variant: 'outline', className }))}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
 
 export {
   AlertDialog,

package/__generated/components/ui/alert.tsx

@@ -21,18 +21,24 @@ const alertVariants = cva(
   }
 );
 
-const Alert = React.forwardRef<
-  React.ElementRef<typeof View>,
-  ViewProps &
-    VariantProps<typeof alertVariants> & {
-      icon: LucideIcon;
-      iconSize?: number;
-      iconClassName?: string;
-    }
->(({ className, variant, children, icon: Icon, iconSize = 16, iconClassName, ...props }, ref) => {
+function Alert({
+  className,
+  variant,
+  children,
+  icon: Icon,
+  iconSize = 16,
+  iconClassName,
+  ...props
+}: ViewProps &
+  VariantProps<typeof alertVariants> & {
+    ref?: React.RefObject<View>;
+    icon: LucideIcon;
+    iconSize?: number;
+    iconClassName?: string;
+  }) {
   const { colors } = useTheme();
   return (
-    <View ref={ref} role='alert' className={alertVariants({ variant, className })} {...props}>
+    <View role='alert' className={alertVariants({ variant, className })} {...props}>
       <View className='absolute left-3.5 top-4 -translate-y-0.5'>
         <Icon
           size={iconSize}
@@ -42,34 +48,24 @@ const Alert = React.forwardRef<
       {children}
     </View>
   );
-});
-Alert.displayName = 'Alert';
+}
 
-const AlertTitle = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  React.ComponentPropsWithoutRef<typeof Text>
->(({ className, ...props }, ref) => (
-  <Text
-    ref={ref}
-    className={cn(
-      'pl-7 mb-1 font-medium text-base leading-none tracking-tight text-foreground',
-      className
-    )}
-    {...props}
-  />
-));
-AlertTitle.displayName = 'AlertTitle';
+function AlertTitle({ className, ...props }: React.ComponentProps<typeof Text>) {
+  return (
+    <Text
+      className={cn(
+        'pl-7 mb-1 font-medium text-base leading-none tracking-tight text-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+}
 
-const AlertDescription = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  React.ComponentPropsWithoutRef<typeof Text>
->(({ className, ...props }, ref) => (
-  <Text
-    ref={ref}
-    className={cn('pl-7 text-sm leading-relaxed text-foreground', className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = 'AlertDescription';
+function AlertDescription({ className, ...props }: React.ComponentProps<typeof Text>) {
+  return (
+    <Text className={cn('pl-7 text-sm leading-relaxed text-foreground', className)} {...props} />
+  );
+}
 
 export { Alert, AlertDescription, AlertTitle };

package/__generated/components/ui/avatar.tsx

@@ -2,40 +2,46 @@ import * as AvatarPrimitive from '@rn-primitives/avatar';
 import * as React from 'react';
 import { cn } from '../../lib/utils';
 
-const Avatar = React.forwardRef<AvatarPrimitive.RootRef, AvatarPrimitive.RootProps>(
-  ({ className, ...props }, ref) => (
+function Avatar({
+  className,
+  ...props
+}: AvatarPrimitive.RootProps & {
+  ref?: React.RefObject<AvatarPrimitive.RootRef>;
+}) {
+  return (
     <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<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;
+function AvatarImage({
+  className,
+  ...props
+}: AvatarPrimitive.ImageProps & {
+  ref?: React.RefObject<AvatarPrimitive.ImageRef>;
+}) {
+  return (
+    <AvatarPrimitive.Image className={cn('aspect-square h-full w-full', className)} {...props} />
+  );
+}
 
-const AvatarFallback = React.forwardRef<AvatarPrimitive.FallbackRef, AvatarPrimitive.FallbackProps>(
-  ({ className, ...props }, ref) => (
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.FallbackProps & {
+  ref?: React.RefObject<AvatarPrimitive.FallbackRef>;
+}) {
+  return (
     <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,6 @@
 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 { View, ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 
@@ -36,7 +35,9 @@ const badgeTextVariants = cva('text-xs font-semibold ', {
   },
 });
 
-type BadgeProps = SlottableViewProps & VariantProps<typeof badgeVariants>;
+type BadgeProps = ViewProps & {
+  asChild?: boolean;
+} & VariantProps<typeof badgeVariants>;
 
 function Badge({ className, variant, asChild, ...props }: BadgeProps) {
   const Component = asChild ? Slot.View : View;

package/__generated/components/ui/button.tsx

@@ -57,29 +57,25 @@ const buttonTextVariants = cva(
   }
 );
 
-type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
-  VariantProps<typeof buttonVariants>;
+type ButtonProps = React.ComponentProps<typeof Pressable> & VariantProps<typeof buttonVariants>;
 
-const Button = React.forwardRef<React.ElementRef<typeof Pressable>, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
-    return (
-      <TextClassContext.Provider
-        value={buttonTextVariants({ variant, size, className: 'web:pointer-events-none' })}
-      >
-        <Pressable
-          className={cn(
-            props.disabled && 'opacity-50 web:pointer-events-none',
-            buttonVariants({ variant, size, className })
-          )}
-          ref={ref}
-          role='button'
-          {...props}
-        />
-      </TextClassContext.Provider>
-    );
-  }
-);
-Button.displayName = 'Button';
+function Button({ ref, className, variant, size, ...props }: ButtonProps) {
+  return (
+    <TextClassContext.Provider
+      value={buttonTextVariants({ variant, size, className: 'web:pointer-events-none' })}
+    >
+      <Pressable
+        className={cn(
+          props.disabled && 'opacity-50 web:pointer-events-none',
+          buttonVariants({ variant, size, className })
+        )}
+        ref={ref}
+        role='button'
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
 
 export { Button, buttonTextVariants, buttonVariants };
 export type { ButtonProps };