@react-native-reusables/cli 0.1.0 → 0.1.2

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

@@ -1,38 +1,36 @@
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
 import * as React from 'react';
 import { View } from 'react-native';
-import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
 import { cn } from '../../lib/utils';
 
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root className={cn('web:grid gap-2', className)} {...props} ref={ref} />
-  );
-});
+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;
 
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ 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>
-  );
-});
+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;
 
 export { RadioGroup, RadioGroupItem };

package/__generated/components/ui/select.tsx

@@ -15,32 +15,28 @@ const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex flex-row h-10 native:h-12 items-center text-sm justify-between rounded-md border border-input bg-background px-3 py-2 web:ring-offset-background text-muted-foreground web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 [&>span]:line-clamp-1',
-      props.disabled && 'web:cursor-not-allowed opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <>{children}</>
-    <ChevronDown size={16} aria-hidden={true} className='text-foreground opacity-50' />
-  </SelectPrimitive.Trigger>
-));
+const SelectTrigger = React.forwardRef<SelectPrimitive.TriggerRef, SelectPrimitive.TriggerProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-row h-10 native:h-12 items-center text-sm justify-between rounded-md border border-input bg-background px-3 py-2 web:ring-offset-background text-muted-foreground web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 [&>span]:line-clamp-1',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <>{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
-}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>) => {
+const SelectScrollUpButton = ({ className, ...props }: SelectPrimitive.ScrollUpButtonProps) => {
   if (Platform.OS !== 'web') {
     return null;
   }
@@ -57,10 +53,7 @@ const SelectScrollUpButton = ({
 /**
  * Platform: WEB ONLY
  */
-const SelectScrollDownButton = ({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>) => {
+const SelectScrollDownButton = ({ className, ...props }: SelectPrimitive.ScrollDownButtonProps) => {
   if (Platform.OS !== 'web') {
     return null;
   }
@@ -75,8 +68,8 @@ const SelectScrollDownButton = ({
 };
 
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & { portalHost?: string }
+  SelectPrimitive.ContentRef,
+  SelectPrimitive.ContentProps & { portalHost?: string }
 >(({ className, children, position = 'popper', portalHost, ...props }, ref) => {
   const { open } = SelectPrimitive.useRootContext();
 
@@ -99,17 +92,15 @@ const SelectContent = React.forwardRef<
             {...props}
           >
             <SelectScrollUpButton />
-            <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>
+            <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>
             <SelectScrollDownButton />
           </SelectPrimitive.Content>
         </Animated.View>
@@ -119,47 +110,45 @@ const SelectContent = React.forwardRef<
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <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}
-  />
-));
+const SelectLabel = React.forwardRef<SelectPrimitive.LabelRef, SelectPrimitive.LabelProps>(
+  ({ className, ...props }, ref) => (
+    <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<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <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',
-      className
-    )}
-    {...props}
-  >
-    <View className='absolute left-2 native:left-3.5 flex h-3.5 native:pt-px w-3.5 items-center justify-center'>
-      <SelectPrimitive.ItemIndicator>
-        <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>
-));
+const SelectItem = React.forwardRef<SelectPrimitive.ItemRef, SelectPrimitive.ItemProps>(
+  ({ className, children, ...props }, ref) => (
+    <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',
+        className
+      )}
+      {...props}
+    >
+      <View className='absolute left-2 native:left-3.5 flex h-3.5 native:pt-px w-3.5 items-center justify-center'>
+        <SelectPrimitive.ItemIndicator>
+          <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>
+  )
+);
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+  SelectPrimitive.SeparatorRef,
+  SelectPrimitive.SeparatorProps
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}

package/__generated/components/ui/separator.tsx

@@ -1,23 +1,22 @@
-import * as React from 'react';
 import * as SeparatorPrimitive from '@rn-primitives/separator';
+import * as React from 'react';
 import { cn } from '../../lib/utils';
 
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      'shrink-0 bg-border',
-      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-      className
-    )}
-    {...props}
-  />
-));
+const Separator = React.forwardRef<SeparatorPrimitive.RootRef, SeparatorPrimitive.RootProps>(
+  ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 export { Separator };

package/__generated/components/ui/switch.tsx

@@ -10,28 +10,27 @@ import Animated, {
 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';
 
@@ -46,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 React from 'react';
 import * as TablePrimitive from '@rn-primitives/table';
+import * as React from 'react';
 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 };