@react-native-reusables/cli 0.0.18 → 0.1.1

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,33 +7,30 @@ 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<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer flex-row h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed',
-      props.checked ? 'bg-primary' : 'bg-input',
-      props.disabled && 'opacity-50',
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
+const SwitchWeb = React.forwardRef<SwitchPrimitives.RootRef, SwitchPrimitives.RootProps>(
+  ({ className, ...props }, ref) => (
+    <SwitchPrimitives.Root
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-md shadow-foreground/5 ring-0 transition-transform',
-        props.checked ? 'translate-x-5' : 'translate-x-0'
+        'peer flex-row h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed',
+        props.checked ? 'bg-primary' : 'bg-input',
+        props.disabled && 'opacity-50',
+        className
       )}
-    />
-  </SwitchPrimitives.Root>
-));
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-md shadow-foreground/5 ring-0 transition-transform',
+          props.checked ? 'translate-x-5' : 'translate-x-0'
+        )}
+      />
+    </SwitchPrimitives.Root>
+  )
+);
 
 SwitchWeb.displayName = 'SwitchWeb';
 
@@ -47,46 +45,46 @@ const RGB_COLORS = {
   },
 } as const;
 
-const SwitchNative = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => {
-  const { colorScheme } = useColorScheme();
-  const translateX = useDerivedValue(() => (props.checked ? 18 : 0));
-  const animatedRootStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor: interpolateColor(
-        translateX.value,
-        [0, 18],
-        [RGB_COLORS[colorScheme].input, RGB_COLORS[colorScheme].primary]
-      ),
-    };
-  });
-  const animatedThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: withTiming(translateX.value, { duration: 200 }) }],
-  }));
-  return (
-    <Animated.View
-      style={animatedRootStyle}
-      className={cn('h-8 w-[46px] rounded-full', props.disabled && 'opacity-50')}
-    >
-      <SwitchPrimitives.Root
-        className={cn(
-          'flex-row h-8 w-[46px] shrink-0 items-center rounded-full border-2 border-transparent',
-          className
-        )}
-        {...props}
-        ref={ref}
+const SwitchNative = React.forwardRef<SwitchPrimitives.RootRef, SwitchPrimitives.RootProps>(
+  ({ className, ...props }, ref) => {
+    const { colorScheme } = useColorScheme();
+    const translateX = useDerivedValue(() => (props.checked ? 18 : 0));
+    const animatedRootStyle = useAnimatedStyle(() => {
+      return {
+        backgroundColor: interpolateColor(
+          translateX.value,
+          [0, 18],
+          [RGB_COLORS[colorScheme].input, RGB_COLORS[colorScheme].primary]
+        ),
+      };
+    });
+    const animatedThumbStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: withTiming(translateX.value, { duration: 200 }) }],
+    }));
+    return (
+      <Animated.View
+        style={animatedRootStyle}
+        className={cn('h-8 w-[46px] rounded-full', props.disabled && 'opacity-50')}
       >
-        <Animated.View style={animatedThumbStyle}>
-          <SwitchPrimitives.Thumb
-            className={'h-7 w-7 rounded-full bg-background shadow-md shadow-foreground/25 ring-0'}
-          />
-        </Animated.View>
-      </SwitchPrimitives.Root>
-    </Animated.View>
-  );
-});
+        <SwitchPrimitives.Root
+          className={cn(
+            'flex-row h-8 w-[46px] shrink-0 items-center rounded-full border-2 border-transparent',
+            props.checked ? 'bg-primary' : 'bg-input',
+            className
+          )}
+          {...props}
+          ref={ref}
+        >
+          <Animated.View style={animatedThumbStyle}>
+            <SwitchPrimitives.Thumb
+              className={'h-7 w-7 rounded-full bg-background shadow-md shadow-foreground/25 ring-0'}
+            />
+          </Animated.View>
+        </SwitchPrimitives.Root>
+      </Animated.View>
+    );
+  }
+);
 SwitchNative.displayName = 'SwitchNative';
 
 const Switch = Platform.select({

package/__generated/components/ui/table.tsx

@@ -1,99 +1,92 @@
+import * as TablePrimitive from '@rn-primitives/table';
 import * as React from 'react';
-import * as TablePrimitive from '@rnr/table';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 
-const Table = React.forwardRef<
-  React.ElementRef<typeof TablePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TablePrimitive.Root>
->(({ className, ...props }, ref) => (
-  <TablePrimitive.Root
-    ref={ref}
-    className={cn('w-full caption-bottom text-sm', className)}
-    {...props}
-  />
-));
+const Table = React.forwardRef<TablePrimitive.RootRef, TablePrimitive.RootProps>(
+  ({ className, ...props }, ref) => (
+    <TablePrimitive.Root
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  )
+);
 Table.displayName = 'Table';
 
-const TableHeader = React.forwardRef<
-  React.ElementRef<typeof TablePrimitive.Header>,
-  React.ComponentPropsWithoutRef<typeof TablePrimitive.Header>
->(({ className, ...props }, ref) => (
-  <TablePrimitive.Header
-    ref={ref}
-    className={cn('border-border [&_tr]:border-b', className)}
-    {...props}
-  />
-));
+const TableHeader = React.forwardRef<TablePrimitive.HeaderRef, TablePrimitive.HeaderProps>(
+  ({ className, ...props }, ref) => (
+    <TablePrimitive.Header
+      ref={ref}
+      className={cn('border-border [&_tr]:border-b', className)}
+      {...props}
+    />
+  )
+);
 TableHeader.displayName = 'TableHeader';
 
-const TableBody = React.forwardRef<
-  React.ElementRef<typeof TablePrimitive.Body>,
-  React.ComponentPropsWithoutRef<typeof TablePrimitive.Body>
->(({ className, style, ...props }, ref) => (
-  <TablePrimitive.Body
-    ref={ref}
-    className={cn('flex-1 border-border [&_tr:last-child]:border-0', className)}
-    style={[{ minHeight: 2 }, style]}
-    {...props}
-  />
-));
+const TableBody = React.forwardRef<TablePrimitive.BodyRef, TablePrimitive.BodyProps>(
+  ({ className, style, ...props }, ref) => (
+    <TablePrimitive.Body
+      ref={ref}
+      className={cn('flex-1 border-border [&_tr:last-child]:border-0', className)}
+      style={[{ minHeight: 2 }, style]}
+      {...props}
+    />
+  )
+);
 TableBody.displayName = 'TableBody';
 
-const TableFooter = React.forwardRef<
-  React.ElementRef<typeof TablePrimitive.Footer>,
-  React.ComponentPropsWithoutRef<typeof TablePrimitive.Footer>
->(({ className, ...props }, ref) => (
-  <TablePrimitive.Footer
-    ref={ref}
-    className={cn('bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
-    {...props}
-  />
-));
+const TableFooter = React.forwardRef<TablePrimitive.FooterRef, TablePrimitive.FooterProps>(
+  ({ className, ...props }, ref) => (
+    <TablePrimitive.Footer
+      ref={ref}
+      className={cn('bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+      {...props}
+    />
+  )
+);
 TableFooter.displayName = 'TableFooter';
 
-const TableRow = React.forwardRef<
-  React.ElementRef<typeof TablePrimitive.Row>,
-  React.ComponentPropsWithoutRef<typeof TablePrimitive.Row>
->(({ className, ...props }, ref) => (
-  <TablePrimitive.Row
-    ref={ref}
-    className={cn(
-      'flex-row border-border border-b web:transition-colors web:hover:bg-muted/50 web:data-[state=selected]:bg-muted',
-      className
-    )}
-    {...props}
-  />
-));
-TableRow.displayName = 'TableRow';
-
-const TableHead = React.forwardRef<
-  React.ElementRef<typeof TablePrimitive.Head>,
-  React.ComponentPropsWithoutRef<typeof TablePrimitive.Head>
->(({ className, ...props }, ref) => (
-  <TextClassContext.Provider value='text-muted-foreground'>
-    <TablePrimitive.Head
+const TableRow = React.forwardRef<TablePrimitive.RowRef, TablePrimitive.RowProps>(
+  ({ className, ...props }, ref) => (
+    <TablePrimitive.Row
       ref={ref}
       className={cn(
-        'h-12 px-4 text-left justify-center font-medium [&:has([role=checkbox])]:pr-0',
+        'flex-row border-border border-b web:transition-colors web:hover:bg-muted/50 web:data-[state=selected]:bg-muted',
         className
       )}
       {...props}
     />
-  </TextClassContext.Provider>
-));
+  )
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<TablePrimitive.HeadRef, TablePrimitive.HeadProps>(
+  ({ className, ...props }, ref) => (
+    <TextClassContext.Provider value='text-muted-foreground'>
+      <TablePrimitive.Head
+        ref={ref}
+        className={cn(
+          'h-12 px-4 text-left justify-center font-medium [&:has([role=checkbox])]:pr-0',
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  )
+);
 TableHead.displayName = 'TableHead';
 
-const TableCell = React.forwardRef<
-  React.ElementRef<typeof TablePrimitive.Cell>,
-  React.ComponentPropsWithoutRef<typeof TablePrimitive.Cell>
->(({ className, ...props }, ref) => (
-  <TablePrimitive.Cell
-    ref={ref}
-    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
-    {...props}
-  />
-));
+const TableCell = React.forwardRef<TablePrimitive.CellRef, TablePrimitive.CellProps>(
+  ({ className, ...props }, ref) => (
+    <TablePrimitive.Cell
+      ref={ref}
+      className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+      {...props}
+    />
+  )
+);
 TableCell.displayName = 'TableCell';
 
 export { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/__generated/components/ui/tabs.tsx

@@ -1,65 +1,62 @@
+import * as TabsPrimitive from '@rn-primitives/tabs';
 import * as React from 'react';
-import { TextClassContext } from './text';
-import * as TabsPrimitive from '@rnr/tabs';
 import { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
 
 const Tabs = TabsPrimitive.Root;
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'web:inline-flex h-10 native:h-12 items-center justify-center rounded-md bg-muted p-1 native:px-1.5',
-      className
-    )}
-    {...props}
-  />
-));
+const TabsList = React.forwardRef<TabsPrimitive.ListRef, TabsPrimitive.ListProps>(
+  ({ className, ...props }, ref) => (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        'web:inline-flex h-10 native:h-12 items-center justify-center rounded-md bg-muted p-1 native:px-1.5',
+        className
+      )}
+      {...props}
+    />
+  )
+);
 TabsList.displayName = TabsPrimitive.List.displayName;
 
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => {
-  const { value } = TabsPrimitive.useRootContext();
-  return (
-    <TextClassContext.Provider
-      value={cn(
-        'text-sm native:text-base font-medium text-muted-foreground web:transition-all',
-        value === props.value && 'text-foreground'
-      )}
-    >
-      <TabsPrimitive.Trigger
-        ref={ref}
-        className={cn(
-          'inline-flex items-center justify-center shadow-none web:whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium web:ring-offset-background web:transition-all web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-          props.disabled && 'web:pointer-events-none opacity-50',
-          props.value === value && 'bg-background shadow-lg shadow-foreground/10',
-          className
+const TabsTrigger = React.forwardRef<TabsPrimitive.TriggerRef, TabsPrimitive.TriggerProps>(
+  ({ className, ...props }, ref) => {
+    const { value } = TabsPrimitive.useRootContext();
+    return (
+      <TextClassContext.Provider
+        value={cn(
+          'text-sm native:text-base font-medium text-muted-foreground web:transition-all',
+          value === props.value && 'text-foreground'
         )}
-        {...props}
-      />
-    </TextClassContext.Provider>
-  );
-});
+      >
+        <TabsPrimitive.Trigger
+          ref={ref}
+          className={cn(
+            'inline-flex items-center justify-center shadow-none web:whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium web:ring-offset-background web:transition-all web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+            props.disabled && 'web:pointer-events-none opacity-50',
+            props.value === value && 'bg-background shadow-lg shadow-foreground/10',
+            className
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    );
+  }
+);
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      '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',
-      className
-    )}
-    {...props}
-  />
-));
+const TabsContent = React.forwardRef<TabsPrimitive.ContentRef, TabsPrimitive.ContentProps>(
+  ({ className, ...props }, ref) => (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cn(
+        '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',
+        className
+      )}
+      {...props}
+    />
+  )
+);
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 export { Tabs, TabsContent, TabsList, TabsTrigger };

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/textarea.tsx

@@ -1,27 +1,26 @@
 import * as React from 'react';
-import { TextInput } from 'react-native';
+import { TextInput, type TextInputProps } from 'react-native';
 import { cn } from '../../lib/utils';
 
-const Textarea = React.forwardRef<
-  React.ElementRef<typeof TextInput>,
-  React.ComponentPropsWithoutRef<typeof TextInput>
->(({ className, multiline = true, numberOfLines = 4, placeholderClassName, ...props }, ref) => {
-  return (
-    <TextInput
-      ref={ref}
-      className={cn(
-        'web:flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground web:ring-offset-background placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-        props.editable === false && 'opacity-50 web:cursor-not-allowed',
-        className
-      )}
-      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
-      multiline={multiline}
-      numberOfLines={numberOfLines}
-      textAlignVertical='top'
-      {...props}
-    />
-  );
-});
+const Textarea = React.forwardRef<React.ElementRef<typeof TextInput>, TextInputProps>(
+  ({ className, multiline = true, numberOfLines = 4, placeholderClassName, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          'web:flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground web:ring-offset-background placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          props.editable === false && 'opacity-50 web:cursor-not-allowed',
+          className
+        )}
+        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+        multiline={multiline}
+        numberOfLines={numberOfLines}
+        textAlignVertical='top'
+        {...props}
+      />
+    );
+  }
+);
 
 Textarea.displayName = 'Textarea';
 

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

@@ -3,15 +3,14 @@ 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);
 
 const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  ToggleGroupPrimitive.RootRef,
+  ToggleGroupPrimitive.RootProps & VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
   <ToggleGroupPrimitive.Root
     ref={ref}
@@ -35,9 +34,8 @@ function useToggleGroupContext() {
 }
 
 const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
+  ToggleGroupPrimitive.ItemRef,
+  ToggleGroupPrimitive.ItemProps & VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
   const context = useToggleGroupContext();
   const { value } = ToggleGroupPrimitive.useRootContext();

package/__generated/components/ui/toggle.tsx

@@ -1,9 +1,9 @@
+import * as TogglePrimitive from '@rn-primitives/toggle';
 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 { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
 
 const toggleVariants = cva(
   'web:group web:inline-flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:hover:bg-muted active:bg-muted web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
@@ -46,8 +46,8 @@ const toggleTextVariants = cva('text-sm native:text-base text-foreground font-me
 });
 
 const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+  TogglePrimitive.RootRef,
+  TogglePrimitive.RootProps & VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
   <TextClassContext.Provider
     value={cn(

package/__generated/components/ui/tooltip.tsx

@@ -1,17 +1,16 @@
+import * as TooltipPrimitive from '@rn-primitives/tooltip';
 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 { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
 
 const Tooltip = TooltipPrimitive.Root;
-
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { portalHost?: string }
+  TooltipPrimitive.ContentRef,
+  TooltipPrimitive.ContentProps & { portalHost?: string }
 >(({ className, sideOffset = 4, portalHost, ...props }, ref) => (
   <TooltipPrimitive.Portal hostName={portalHost}>
     <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>

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';