@react-native-reusables/cli 0.0.18 → 0.1.1

package/README.md

@@ -2,7 +2,7 @@
 
 > Please follow [the initial setup steps](https://rnr-docs.vercel.app/getting-started/initial-setup/) before using
 
-A CLI to add [react-native-reusables](https://rnr-docs.vercel.app/getting-started/introduction/) components to your project. When components depend on other components and/or primitives, they will also be added to your project.
+A CLI to add [react-native-reusables](https://rnr-docs.vercel.app/getting-started/introduction/) components to your project. When components depend on other components, they will also be added to your project.
 
 ## How to use
 
@@ -50,41 +50,6 @@ If you do not add arguments, you will be promted to select the `ui` components y
 - `tooltip`
 - `typography`
 
-#### Primitive Components
-
-- `accordion-primitive`
-- `alert-dialog-primitive`
-- `aspect-ratio-primitive`
-- `avatar-primitive`
-- `checkbox-primitive`
-- `collapsible-primitive`
-- `context-menu-primitive`
-- `dialog-primitive`
-- `dropdown-menu-primitive`
-- `hover-card-primitive`
-- `label-primitive`
-- `menubar-primitive`
-- `navigation-menu-primitive`
-- `popover-primitive`
-- `progress-primitive`
-- `radio-group-primitive`
-- `select-primitive`
-- `separator-primitive`
-- `slider-primitive`
-- `switch-primitive`
-- `table-primitive`
-- `tabs-primitive`
-- `toast-primitive`
-- `toggle-primitive`
-- `toggle-group-primitive`
-- `toolbar-primitive`
-- `tooltip-primitive`
-- `hooks-primitive`
-- `portal-primitive`
-- `slot-primitive`
-- `types-primitive`
-- `utils-primitive`
-
 ### Flags
 
 - `-o` or `--overwrite`: Overwrite existing files. Default to `false`
@@ -94,4 +59,4 @@ If you do not add arguments, you will be promted to select the `ui` components y
 This project uses code from shadcn.
 The code is licensed under the MIT License.
 https://github.com/shadcn-ui/ui
-```
+```

package/__generated/components/ui/accordion.tsx

@@ -1,4 +1,4 @@
-import * as AccordionPrimitive from '@rnr/accordion';
+import * as AccordionPrimitive from '@rn-primitives/accordion';
 import * as React from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import Animated, {
@@ -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 '@rnr/alert-dialog';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 
@@ -13,15 +13,14 @@ 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 (
     <AlertDialogPrimitive.Overlay
-      style={StyleSheet.absoluteFill}
       className={cn(
-        'z-50 bg-black/80 flex justify-center items-center p-2',
+        '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
       )}
@@ -34,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
@@ -60,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();
 
@@ -85,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}
@@ -105,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}
@@ -117,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}
@@ -129,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} />
@@ -139,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/aspect-ratio.tsx

@@ -1,4 +1,4 @@
-import * as AspectRatioPrimitive from '@rnr/aspect-ratio';
+import * as AspectRatioPrimitive from '@rn-primitives/aspect-ratio';
 
 const AspectRatio = AspectRatioPrimitive.Root;
 

package/__generated/components/ui/avatar.tsx

@@ -1,44 +1,41 @@
+import * as AvatarPrimitive from '@rn-primitives/avatar';
 import * as React from 'react';
-import * as AvatarPrimitive from '@rnr/avatar';
 import { cn } from '../../lib/utils';
 
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-    {...props}
-  />
-));
+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 AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn('aspect-square h-full w-full', className)}
-    {...props}
-  />
-));
+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 AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
-      className
-    )}
-    {...props}
-  />
-));
+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 * 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 * as Slot from '@rnr/slot';
-import type { SlottableViewProps } from '@rnr/types';
 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 { TextRef, ViewRef } from '@rn-primitives/types';
 import * as React from 'react';
-import { Text, View } from 'react-native';
-import { TextClassContext } from './text';
-import { TextRef, ViewRef } from '@rnr/types';
+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

@@ -1,34 +1,32 @@
-import * as CheckboxPrimitive from '@rnr/checkbox';
+import * as CheckboxPrimitive from '@rn-primitives/checkbox';
 import * as React from 'react';
-import { Check } from '../../lib/icons/Check';
-
 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/collapsible.tsx

@@ -1,4 +1,4 @@
-import * as CollapsiblePrimitive from '@rnr/collapsible';
+import * as CollapsiblePrimitive from '@rn-primitives/collapsible';
 
 const Collapsible = CollapsiblePrimitive.Root;