@react-native-reusables/cli 0.4.0 → 0.4.1

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

@@ -1,36 +1,36 @@
 import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
-import * as React from 'react';
 import { View } from 'react-native';
 import { cn } from '../../lib/utils';
 
-const RadioGroup = React.forwardRef<RadioGroupPrimitive.RootRef, RadioGroupPrimitive.RootProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <RadioGroupPrimitive.Root className={cn('web:grid gap-2', className)} {...props} ref={ref} />
-    );
-  }
-);
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+function RadioGroup({
+  className,
+  ...props
+}: RadioGroupPrimitive.RootProps & {
+  ref?: React.RefObject<RadioGroupPrimitive.RootRef>;
+}) {
+  return <RadioGroupPrimitive.Root className={cn('web:grid gap-2', className)} {...props} />;
+}
 
-const RadioGroupItem = React.forwardRef<RadioGroupPrimitive.ItemRef, RadioGroupPrimitive.ItemProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <RadioGroupPrimitive.Item
-        ref={ref}
-        className={cn(
-          'aspect-square h-4 w-4 native:h-5 native:w-5 rounded-full justify-center items-center border border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-          props.disabled && 'web:cursor-not-allowed opacity-50',
-          className
-        )}
-        {...props}
-      >
-        <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
-          <View className='aspect-square h-[9px] w-[9px] native:h-[10] native:w-[10] bg-primary rounded-full' />
-        </RadioGroupPrimitive.Indicator>
-      </RadioGroupPrimitive.Item>
-    );
-  }
-);
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+function RadioGroupItem({
+  className,
+  ...props
+}: RadioGroupPrimitive.ItemProps & {
+  ref?: React.RefObject<RadioGroupPrimitive.ItemRef>;
+}) {
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(
+        'aspect-square h-4 w-4 native:h-5 native:w-5 rounded-full justify-center items-center border border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
+        <View className='aspect-square h-[9px] w-[9px] native:h-[10] native:w-[10] bg-primary rounded-full' />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
 
 export { RadioGroup, RadioGroupItem };

package/__generated/components/ui/select.tsx

@@ -15,8 +15,16 @@ const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
-const SelectTrigger = React.forwardRef<SelectPrimitive.TriggerRef, SelectPrimitive.TriggerProps>(
-  ({ className, children, ...props }, ref) => (
+function SelectTrigger({
+  ref,
+  className,
+  children,
+  ...props
+}: SelectPrimitive.TriggerProps & {
+  ref?: React.RefObject<SelectPrimitive.TriggerRef>;
+  children?: React.ReactNode;
+}) {
+  return (
     <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
@@ -26,17 +34,16 @@ const SelectTrigger = React.forwardRef<SelectPrimitive.TriggerRef, SelectPrimiti
       )}
       {...props}
     >
-      <>{children}</>
+      {children}
       <ChevronDown size={16} aria-hidden={true} className='text-foreground opacity-50' />
     </SelectPrimitive.Trigger>
-  )
-);
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+  );
+}
 
 /**
  * Platform: WEB ONLY
  */
-const SelectScrollUpButton = ({ className, ...props }: SelectPrimitive.ScrollUpButtonProps) => {
+function SelectScrollUpButton({ className, ...props }: SelectPrimitive.ScrollUpButtonProps) {
   if (Platform.OS !== 'web') {
     return null;
   }
@@ -48,12 +55,12 @@ const SelectScrollUpButton = ({ className, ...props }: SelectPrimitive.ScrollUpB
       <ChevronUp size={14} className='text-foreground' />
     </SelectPrimitive.ScrollUpButton>
   );
-};
+}
 
 /**
  * Platform: WEB ONLY
  */
-const SelectScrollDownButton = ({ className, ...props }: SelectPrimitive.ScrollDownButtonProps) => {
+function SelectScrollDownButton({ className, ...props }: SelectPrimitive.ScrollDownButtonProps) {
   if (Platform.OS !== 'web') {
     return null;
   }
@@ -65,12 +72,19 @@ const SelectScrollDownButton = ({ className, ...props }: SelectPrimitive.ScrollD
       <ChevronDown size={14} className='text-foreground' />
     </SelectPrimitive.ScrollDownButton>
   );
-};
+}
 
-const SelectContent = React.forwardRef<
-  SelectPrimitive.ContentRef,
-  SelectPrimitive.ContentProps & { portalHost?: string }
->(({ className, children, position = 'popper', portalHost, ...props }, ref) => {
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  portalHost,
+  ...props
+}: SelectPrimitive.ContentProps & {
+  ref?: React.RefObject<SelectPrimitive.ContentRef>;
+  className?: string;
+  portalHost?: string;
+}) {
   const { open } = SelectPrimitive.useRootContext();
 
   return (
@@ -78,7 +92,6 @@ const SelectContent = React.forwardRef<
       <SelectPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
         <Animated.View className='z-50' entering={FadeIn} exiting={FadeOut}>
           <SelectPrimitive.Content
-            ref={ref}
             className={cn(
               'relative z-50 max-h-96 min-w-[8rem] rounded-md border border-border bg-popover shadow-md shadow-foreground/10 py-2 px-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
               position === 'popper' &&
@@ -107,27 +120,34 @@ const SelectContent = React.forwardRef<
       </SelectPrimitive.Overlay>
     </SelectPrimitive.Portal>
   );
-});
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+}
 
-const SelectLabel = React.forwardRef<SelectPrimitive.LabelRef, SelectPrimitive.LabelProps>(
-  ({ className, ...props }, ref) => (
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.LabelProps & {
+  ref?: React.RefObject<SelectPrimitive.LabelRef>;
+}) {
+  return (
     <SelectPrimitive.Label
-      ref={ref}
       className={cn(
         'py-1.5 native:pb-2 pl-8 native:pl-10 pr-2 text-popover-foreground text-sm native:text-base font-semibold',
         className
       )}
       {...props}
     />
-  )
-);
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+  );
+}
 
-const SelectItem = React.forwardRef<SelectPrimitive.ItemRef, SelectPrimitive.ItemProps>(
-  ({ className, children, ...props }, ref) => (
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.ItemProps & {
+  ref?: React.RefObject<SelectPrimitive.ItemRef>;
+}) {
+  return (
     <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 web:hover:bg-accent/50 active:bg-accent web:outline-none web:focus:bg-accent',
         props.disabled && 'web:pointer-events-none opacity-50',
@@ -142,21 +162,19 @@ const SelectItem = React.forwardRef<SelectPrimitive.ItemRef, SelectPrimitive.Ite
       </View>
       <SelectPrimitive.ItemText className='text-sm native:text-lg text-popover-foreground native:text-base web:group-focus:text-accent-foreground' />
     </SelectPrimitive.Item>
-  )
-);
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+  );
+}
 
-const SelectSeparator = React.forwardRef<
-  SelectPrimitive.SeparatorRef,
-  SelectPrimitive.SeparatorProps
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.SeparatorProps & {
+  ref?: React.RefObject<SelectPrimitive.SeparatorRef>;
+}) {
+  return (
+    <SelectPrimitive.Separator className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+  );
+}
 
 export {
   Select,

package/__generated/components/ui/separator.tsx

@@ -2,10 +2,16 @@ import * as SeparatorPrimitive from '@rn-primitives/separator';
 import * as React from 'react';
 import { cn } from '../../lib/utils';
 
-const Separator = React.forwardRef<SeparatorPrimitive.RootRef, SeparatorPrimitive.RootProps>(
-  ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: SeparatorPrimitive.RootProps & {
+  ref?: React.RefObject<SeparatorPrimitive.RootRef>;
+}) {
+  return (
     <SeparatorPrimitive.Root
-      ref={ref}
       decorative={decorative}
       orientation={orientation}
       className={cn(
@@ -15,8 +21,7 @@ const Separator = React.forwardRef<SeparatorPrimitive.RootRef, SeparatorPrimitiv
       )}
       {...props}
     />
-  )
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+  );
+}
 
 export { Separator };

package/__generated/components/ui/switch.tsx

@@ -10,8 +10,13 @@ import Animated, {
 import { useColorScheme } from '../../lib/useColorScheme';
 import { cn } from '../../lib/utils';
 
-const SwitchWeb = React.forwardRef<SwitchPrimitives.RootRef, SwitchPrimitives.RootProps>(
-  ({ className, ...props }, ref) => (
+function SwitchWeb({
+  className,
+  ...props
+}: SwitchPrimitives.RootProps & {
+  ref?: React.RefObject<SwitchPrimitives.RootRef>;
+}) {
+  return (
     <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',
@@ -20,7 +25,6 @@ const SwitchWeb = React.forwardRef<SwitchPrimitives.RootRef, SwitchPrimitives.Ro
         className
       )}
       {...props}
-      ref={ref}
     >
       <SwitchPrimitives.Thumb
         className={cn(
@@ -29,10 +33,8 @@ const SwitchWeb = React.forwardRef<SwitchPrimitives.RootRef, SwitchPrimitives.Ro
         )}
       />
     </SwitchPrimitives.Root>
-  )
-);
-
-SwitchWeb.displayName = 'SwitchWeb';
+  );
+}
 
 const RGB_COLORS = {
   light: {
@@ -45,47 +47,48 @@ const RGB_COLORS = {
   },
 } as const;
 
-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')}
+function SwitchNative({
+  className,
+  ...props
+}: SwitchPrimitives.RootProps & {
+  ref?: React.RefObject<SwitchPrimitives.RootRef>;
+}) {
+  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',
+          props.checked ? 'bg-primary' : 'bg-input',
+          className
+        )}
+        {...props}
       >
-        <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';
+        <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>
+  );
+}
 
 const Switch = Platform.select({
   web: SwitchWeb,

package/__generated/components/ui/table.tsx

@@ -3,70 +3,84 @@ import * as React from 'react';
 import { cn } from '../../lib/utils';
 import { TextClassContext } from './text';
 
-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';
+function Table({
+  className,
+  ...props
+}: TablePrimitive.RootProps & {
+  ref?: React.RefObject<TablePrimitive.RootRef>;
+}) {
+  return (
+    <TablePrimitive.Root className={cn('w-full caption-bottom text-sm', 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';
+function TableHeader({
+  className,
+  ...props
+}: TablePrimitive.HeaderProps & {
+  ref?: React.RefObject<TablePrimitive.HeaderRef>;
+}) {
+  return (
+    <TablePrimitive.Header className={cn('border-border [&_tr]:border-b', className)} {...props} />
+  );
+}
 
-const TableBody = React.forwardRef<TablePrimitive.BodyRef, TablePrimitive.BodyProps>(
-  ({ className, style, ...props }, ref) => (
+function TableBody({
+  className,
+  style,
+  ...props
+}: TablePrimitive.BodyProps & {
+  ref?: React.RefObject<TablePrimitive.BodyRef>;
+}) {
+  return (
     <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<TablePrimitive.FooterRef, TablePrimitive.FooterProps>(
-  ({ className, ...props }, ref) => (
+function TableFooter({
+  className,
+  ...props
+}: TablePrimitive.FooterProps & {
+  ref?: React.RefObject<TablePrimitive.FooterRef>;
+}) {
+  return (
     <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<TablePrimitive.RowRef, TablePrimitive.RowProps>(
-  ({ className, ...props }, ref) => (
+function TableRow({
+  className,
+  ...props
+}: TablePrimitive.RowProps & {
+  ref?: React.RefObject<TablePrimitive.RowRef>;
+}) {
+  return (
     <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<TablePrimitive.HeadRef, TablePrimitive.HeadProps>(
-  ({ className, ...props }, ref) => (
+function TableHead({
+  className,
+  ...props
+}: TablePrimitive.HeadProps & {
+  ref?: React.RefObject<TablePrimitive.HeadRef>;
+}) {
+  return (
     <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
@@ -74,19 +88,21 @@ const TableHead = React.forwardRef<TablePrimitive.HeadRef, TablePrimitive.HeadPr
         {...props}
       />
     </TextClassContext.Provider>
-  )
-);
-TableHead.displayName = 'TableHead';
+  );
+}
 
-const TableCell = React.forwardRef<TablePrimitive.CellRef, TablePrimitive.CellProps>(
-  ({ className, ...props }, ref) => (
+function TableCell({
+  className,
+  ...props
+}: TablePrimitive.CellProps & {
+  ref?: React.RefObject<TablePrimitive.CellRef>;
+}) {
+  return (
     <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

@@ -5,58 +5,65 @@ import { TextClassContext } from './text';
 
 const Tabs = TabsPrimitive.Root;
 
-const TabsList = React.forwardRef<TabsPrimitive.ListRef, TabsPrimitive.ListProps>(
-  ({ className, ...props }, ref) => (
+function TabsList({
+  className,
+  ...props
+}: TabsPrimitive.ListProps & {
+  ref?: React.RefObject<TabsPrimitive.ListRef>;
+}) {
+  return (
     <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<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'
+function TabsTrigger({
+  className,
+  ...props
+}: TabsPrimitive.TriggerProps & {
+  ref?: React.RefObject<TabsPrimitive.TriggerRef>;
+}) {
+  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
+        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
         )}
-      >
-        <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;
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
 
-const TabsContent = React.forwardRef<TabsPrimitive.ContentRef, TabsPrimitive.ContentProps>(
-  ({ className, ...props }, ref) => (
+function TabsContent({
+  className,
+  ...props
+}: TabsPrimitive.ContentProps & {
+  ref?: React.RefObject<TabsPrimitive.ContentRef>;
+}) {
+  return (
     <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 };