@react-native-reusables/cli 0.0.18 → 0.1.0

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, {

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Platform, StyleSheet, View } 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 * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 
@@ -19,9 +19,8 @@ const AlertDialogOverlayWeb = React.forwardRef<
   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
       )}

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

package/__generated/components/ui/card.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { TextClassContext } from './text';
-import { TextRef, ViewRef } from '@rnr/types';
+import { TextRef, ViewRef } from '@rn-primitives/types';
 import { cn } from '../../lib/utils';
 
 const Card = React.forwardRef<ViewRef, React.ComponentPropsWithoutRef<typeof View>>(

package/__generated/components/ui/checkbox.tsx

@@ -1,8 +1,7 @@
-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<

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;
 

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

@@ -1,4 +1,4 @@
-import * as ContextMenuPrimitive from '@rnr/context-menu';
+import * as ContextMenuPrimitive from '@rn-primitives/context-menu';
 import * as React from 'react';
 import { Platform, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { Check } from '../../lib/icons/Check';
@@ -9,15 +9,9 @@ import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 
 const ContextMenu = ContextMenuPrimitive.Root;
-
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-
 const ContextMenuGroup = ContextMenuPrimitive.Group;
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
-
 const ContextMenuSub = ContextMenuPrimitive.Sub;
-
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const ContextMenuSubTrigger = React.forwardRef<
@@ -139,7 +133,7 @@ ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
@@ -147,7 +141,6 @@ const ContextMenuCheckboxItem = React.forwardRef<
       props.disabled && 'web:pointer-events-none opacity-50',
       className
     )}
-    checked={checked}
     {...props}
   >
     <View className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
@@ -233,10 +226,10 @@ export {
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
+  ContextMenuTrigger,
   ContextMenuGroup,
   ContextMenuItem,
   ContextMenuLabel,
-  ContextMenuPortal,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
   ContextMenuSeparator,
@@ -244,5 +237,4 @@ export {
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-  ContextMenuTrigger,
 };

package/__generated/components/ui/dialog.tsx

@@ -1,4 +1,4 @@
-import * as DialogPrimitive from '@rnr/dialog';
+import * as DialogPrimitive from '@rn-primitives/dialog';
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
@@ -20,9 +20,8 @@ const DialogOverlayWeb = React.forwardRef<
   const { open } = DialogPrimitive.useRootContext();
   return (
     <DialogPrimitive.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
       )}

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

@@ -1,4 +1,4 @@
-import * as DropdownMenuPrimitive from '@rnr/dropdown-menu';
+import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
 import * as React from 'react';
 import { Platform, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { Check } from '../../lib/icons/Check';

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import Animated, { FadeIn } from 'react-native-reanimated';
 import { TextClassContext } from './text';
-import * as HoverCardPrimitive from '@rnr/hover-card';
+import * as HoverCardPrimitive from '@rn-primitives/hover-card';
 import { cn } from '../../lib/utils';
 
 const HoverCard = HoverCardPrimitive.Root;

package/__generated/components/ui/label.tsx

@@ -1,4 +1,4 @@
-import * as LabelPrimitive from '@rnr/label';
+import * as LabelPrimitive from '@rn-primitives/label';
 import * as React from 'react';
 import { cn } from '../../lib/utils';
 

package/__generated/components/ui/menubar.tsx

@@ -1,4 +1,4 @@
-import * as MenubarPrimitive from '@rnr/menubar';
+import * as MenubarPrimitive from '@rn-primitives/menubar';
 import * as React from 'react';
 import { Platform, Text, View } from 'react-native';
 import { Check } from '../../lib/icons/Check';

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

@@ -1,4 +1,4 @@
-import * as NavigationMenuPrimitive from '@rnr/navigation-menu';
+import * as NavigationMenuPrimitive from '@rn-primitives/navigation-menu';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
@@ -102,7 +102,7 @@ const NavigationMenuContent = React.forwardRef<
       <NavigationMenuPrimitive.Content
         ref={ref}
         className={cn(
-          'left-0 top-0 w-full native:border native:border-border native:rounded-lg native:shadow-lg native:bg-popover native:text-popover-foreground native:overflow-hidden',
+          'w-full native:border native:border-border native:rounded-lg native:shadow-lg native:bg-popover native:text-popover-foreground native:overflow-hidden',
           value === itemValue
             ? 'web:animate-in web:fade-in web:slide-in-from-right-20'
             : 'web:animate-out web:fade-out web:slide-out-to-left-20',
@@ -130,14 +130,16 @@ const NavigationMenuViewport = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <View className={cn('absolute left-0 top-full flex justify-center')}>
-      <NavigationMenuPrimitive.Viewport
+      <View
         className={cn(
           'web:origin-top-center relative mt-1.5 web:h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg web:animate-in web:zoom-in-90',
           className
         )}
         ref={ref}
         {...props}
-      />
+      >
+        <NavigationMenuPrimitive.Viewport />
+      </View>
     </View>
   );
 });

package/__generated/components/ui/popover.tsx

@@ -2,7 +2,7 @@ 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 '@rnr/popover';
+import * as PopoverPrimitive from '@rn-primitives/popover';
 import { cn } from '../../lib/utils';
 
 const Popover = PopoverPrimitive.Root;

package/__generated/components/ui/progress.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { Platform, View } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -7,20 +7,22 @@ import Animated, {
   useDerivedValue,
   withSpring,
 } from 'react-native-reanimated';
-import * as ProgressPrimitive from '@rnr/progress';
+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>
->(({ className, value, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+    indicatorClassName?: string;
+  }
+>(({ className, value, indicatorClassName, ...props }, ref) => {
   return (
     <ProgressPrimitive.Root
       ref={ref}
       className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
       {...props}
     >
-      <Indicator value={value} />
+      <Indicator value={value} className={indicatorClassName} />
     </ProgressPrimitive.Root>
   );
 });
@@ -28,7 +30,7 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 
 export { Progress };
 
-function Indicator({ value }: { value: number | undefined | null }) {
+function Indicator({ value, className }: { value: number | undefined | null; className?: string }) {
   const progress = useDerivedValue(() => value ?? 0);
 
   const indicator = useAnimatedStyle(() => {
@@ -42,16 +44,18 @@ function Indicator({ value }: { value: number | undefined | null }) {
 
   if (Platform.OS === 'web') {
     return (
-      <ProgressPrimitive.Indicator
-        className='h-full w-full flex-1 bg-primary web:transition-all'
+      <View
+        className={cn('h-full w-full flex-1 bg-primary web:transition-all', className)}
         style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
-      />
+      >
+        <ProgressPrimitive.Indicator className={cn('h-full w-full ', className)} />
+      </View>
     );
   }
 
   return (
     <ProgressPrimitive.Indicator asChild>
-      <Animated.View style={indicator} className={cn('h-full bg-foreground')} />
+      <Animated.View style={indicator} className={cn('h-full bg-foreground', className)} />
     </ProgressPrimitive.Indicator>
   );
 }

package/__generated/components/ui/radio-group.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import * as RadioGroupPrimitive from '@rnr/radio-group';
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
 import { cn } from '../../lib/utils';
 
 const RadioGroup = React.forwardRef<

package/__generated/components/ui/select.tsx

@@ -1,4 +1,4 @@
-import * as SelectPrimitive from '@rnr/select';
+import * as SelectPrimitive from '@rn-primitives/select';
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
@@ -99,15 +99,17 @@ const SelectContent = React.forwardRef<
             {...props}
           >
             <SelectScrollUpButton />
-            <SelectPrimitive.Viewport
-              className={cn(
-                'p-1',
-                position === 'popper' &&
-                  'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-              )}
-            >
-              {children}
-            </SelectPrimitive.Viewport>
+            <View>
+              <SelectPrimitive.Viewport
+                className={cn(
+                  'p-1',
+                  position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+                )}
+              >
+                {children}
+              </SelectPrimitive.Viewport>
+            </View>
             <SelectScrollDownButton />
           </SelectPrimitive.Content>
         </Animated.View>
@@ -139,7 +141,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative web:group flex flex-row w-full web:cursor-default web:select-none items-center rounded-sm py-1.5 native:py-2 pl-8 native:pl-10 pr-2 active:bg-accent web:outline-none web:focus:bg-accent',
+      'relative web:group flex flex-row w-full web:cursor-default web:select-none items-center rounded-sm py-1.5 native:py-2 pl-8 native:pl-10 pr-2 web:hover:bg-accent/50 active:bg-accent web:outline-none web:focus:bg-accent',
       props.disabled && 'web:pointer-events-none opacity-50',
       className
     )}
@@ -150,7 +152,6 @@ const SelectItem = React.forwardRef<
         <Check size={16} strokeWidth={3} className='text-popover-foreground' />
       </SelectPrimitive.ItemIndicator>
     </View>
-
     <SelectPrimitive.ItemText className='text-sm native:text-lg text-popover-foreground native:text-base web:group-focus:text-accent-foreground' />
   </SelectPrimitive.Item>
 ));

package/__generated/components/ui/separator.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as SeparatorPrimitive from '@rnr/separator';
+import * as SeparatorPrimitive from '@rn-primitives/separator';
 import { cn } from '../../lib/utils';
 
 const Separator = React.forwardRef<

package/__generated/components/ui/switch.tsx

@@ -1,3 +1,4 @@
+import * as SwitchPrimitives from '@rn-primitives/switch';
 import * as React from 'react';
 import { Platform } from 'react-native';
 import Animated, {
@@ -6,9 +7,7 @@ import Animated, {
   useDerivedValue,
   withTiming,
 } from 'react-native-reanimated';
-import * as SwitchPrimitives from '@rnr/switch';
 import { useColorScheme } from '../../lib/useColorScheme';
-
 import { cn } from '../../lib/utils';
 
 const SwitchWeb = React.forwardRef<

package/__generated/components/ui/table.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as TablePrimitive from '@rnr/table';
+import * as TablePrimitive from '@rn-primitives/table';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 

package/__generated/components/ui/tabs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextClassContext } from './text';
-import * as TabsPrimitive from '@rnr/tabs';
+import * as TabsPrimitive from '@rn-primitives/tabs';
 import { cn } from '../../lib/utils';
 
 const Tabs = TabsPrimitive.Root;

package/__generated/components/ui/text.tsx

@@ -1,5 +1,5 @@
-import * as Slot from '@rnr/slot';
-import { SlottableTextProps, TextRef } from '@rnr/types';
+import * as Slot from '@rn-primitives/slot';
+import { SlottableTextProps, TextRef } from '@rn-primitives/types';
 import * as React from 'react';
 import { Text as RNText } from 'react-native';
 import { cn } from '../../lib/utils';

package/__generated/components/ui/toggle-group.tsx

@@ -3,7 +3,7 @@ import type { LucideIcon } from 'lucide-react-native';
 import * as React from 'react';
 import { toggleTextVariants, toggleVariants } from '../../components/ui/toggle';
 import { TextClassContext } from './text';
-import * as ToggleGroupPrimitive from '@rnr/toggle-group';
+import * as ToggleGroupPrimitive from '@rn-primitives/toggle-group';
 import { cn } from '../../lib/utils';
 
 const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants> | null>(null);

package/__generated/components/ui/toggle.tsx

@@ -2,7 +2,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import type { LucideIcon } from 'lucide-react-native';
 import * as React from 'react';
 import { TextClassContext } from './text';
-import * as TogglePrimitive from '@rnr/toggle';
+import * as TogglePrimitive from '@rn-primitives/toggle';
 import { cn } from '../../lib/utils';
 
 const toggleVariants = cva(

package/__generated/components/ui/tooltip.tsx

@@ -2,11 +2,10 @@ 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 TooltipPrimitive from '@rnr/tooltip';
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
 import { cn } from '../../lib/utils';
 
 const Tooltip = TooltipPrimitive.Root;
-
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<

package/__generated/components/ui/typography.tsx

@@ -1,5 +1,5 @@
-import * as Slot from '@rnr/slot';
-import { SlottableTextProps, TextRef } from '@rnr/types';
+import * as Slot from '@rn-primitives/slot';
+import { SlottableTextProps, TextRef } from '@rn-primitives/types';
 import * as React from 'react';
 import { Platform, Text as RNText } from 'react-native';
 import { cn } from '../../lib/utils';