@react-native-reusables/cli 0.4.0 → 0.5.0-alpha.1

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

@@ -1,181 +0,0 @@
-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';
-import Animated, {
-  Extrapolation,
-  FadeInLeft,
-  FadeOutLeft,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { ChevronDown } from '../../lib/icons/ChevronDown';
-import { cn } from '../../lib/utils';
-
-const NavigationMenu = React.forwardRef<
-  NavigationMenuPrimitive.RootRef,
-  NavigationMenuPrimitive.RootProps
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn('relative z-10 flex flex-row max-w-max items-center justify-center', className)}
-    {...props}
-  >
-    {children}
-    {Platform.OS === 'web' && <NavigationMenuViewport />}
-  </NavigationMenuPrimitive.Root>
-));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-
-const NavigationMenuList = React.forwardRef<
-  NavigationMenuPrimitive.ListRef,
-  NavigationMenuPrimitive.ListProps
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      'web:group flex flex-1 flex-row web:list-none items-center justify-center gap-1',
-      className
-    )}
-    {...props}
-  />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item;
-
-const navigationMenuTriggerStyle = cva(
-  'web:group web:inline-flex flex-row h-10 native:h-12 native:px-3 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium web:transition-colors web:hover:bg-accent active:bg-accent web:hover:text-accent-foreground web:focus:bg-accent web:focus:text-accent-foreground web:focus:outline-none web:disabled:pointer-events-none disabled:opacity-50 web:data-[active]:bg-accent/50 web:data-[state=open]:bg-accent/50'
-);
-
-const NavigationMenuTrigger = React.forwardRef<
-  NavigationMenuPrimitive.TriggerRef,
-  NavigationMenuPrimitive.TriggerProps
->(({ className, children, ...props }, ref) => {
-  const { value } = NavigationMenuPrimitive.useRootContext();
-  const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
-
-  const progress = useDerivedValue(() =>
-    value === itemValue ? withTiming(1, { duration: 250 }) : withTiming(0, { duration: 200 })
-  );
-  const chevronStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${progress.value * 180}deg` }],
-    opacity: interpolate(progress.value, [0, 1], [1, 0.8], Extrapolation.CLAMP),
-  }));
-
-  return (
-    <NavigationMenuPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        navigationMenuTriggerStyle(),
-        'web:group gap-1.5',
-        value === itemValue && 'bg-accent',
-        className
-      )}
-      {...props}
-    >
-      <>{children}</>
-      <Animated.View style={chevronStyle}>
-        <ChevronDown
-          size={12}
-          className={cn('relative text-foreground h-3 w-3 web:transition web:duration-200')}
-          aria-hidden={true}
-        />
-      </Animated.View>
-    </NavigationMenuPrimitive.Trigger>
-  );
-});
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-
-const NavigationMenuContent = React.forwardRef<
-  NavigationMenuPrimitive.ContentRef,
-  NavigationMenuPrimitive.ContentProps & {
-    portalHost?: string;
-  }
->(({ className, children, portalHost, ...props }, ref) => {
-  const { value } = NavigationMenuPrimitive.useRootContext();
-  const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
-  return (
-    <NavigationMenuPrimitive.Portal hostName={portalHost}>
-      <NavigationMenuPrimitive.Content
-        ref={ref}
-        className={cn(
-          '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',
-          className
-        )}
-        {...props}
-      >
-        <Animated.View
-          entering={Platform.OS !== 'web' ? FadeInLeft : undefined}
-          exiting={Platform.OS !== 'web' ? FadeOutLeft : undefined}
-        >
-          {children}
-        </Animated.View>
-      </NavigationMenuPrimitive.Content>
-    </NavigationMenuPrimitive.Portal>
-  );
-});
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link;
-
-const NavigationMenuViewport = React.forwardRef<
-  NavigationMenuPrimitive.ViewportRef,
-  NavigationMenuPrimitive.ViewportProps
->(({ className, ...props }, ref) => {
-  return (
-    <View className={cn('absolute left-0 top-full flex justify-center')}>
-      <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>
-  );
-});
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-
-const NavigationMenuIndicator = React.forwardRef<
-  NavigationMenuPrimitive.IndicatorRef,
-  NavigationMenuPrimitive.IndicatorProps
->(({ className, ...props }, ref) => {
-  const { value } = NavigationMenuPrimitive.useRootContext();
-  const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
-
-  return (
-    <NavigationMenuPrimitive.Indicator
-      ref={ref}
-      className={cn(
-        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
-        value === itemValue ? 'web:animate-in web:fade-in' : 'web:animate-out web:fade-out',
-        className
-      )}
-      {...props}
-    >
-      <View className='relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md shadow-foreground/5' />
-    </NavigationMenuPrimitive.Indicator>
-  );
-});
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
-
-export {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-  NavigationMenuViewport,
-};

package/__generated/components/ui/popover.tsx

@@ -1,39 +0,0 @@
-import * as PopoverPrimitive from '@rn-primitives/popover';
-import * as React from 'react';
-import { Platform, StyleSheet } from 'react-native';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from './text';
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  PopoverPrimitive.ContentRef,
-  PopoverPrimitive.ContentProps & { portalHost?: string }
->(({ className, align = 'center', sideOffset = 4, portalHost, ...props }, ref) => {
-  return (
-    <PopoverPrimitive.Portal hostName={portalHost}>
-      <PopoverPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
-        <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut}>
-          <TextClassContext.Provider value='text-popover-foreground'>
-            <PopoverPrimitive.Content
-              ref={ref}
-              align={align}
-              sideOffset={sideOffset}
-              className={cn(
-                'z-50 w-72 rounded-md web:cursor-auto border border-border bg-popover p-4 shadow-md shadow-foreground/5 web:outline-none web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2 web:animate-in web:zoom-in-95 web:fade-in-0',
-                className
-              )}
-              {...props}
-            />
-          </TextClassContext.Provider>
-        </Animated.View>
-      </PopoverPrimitive.Overlay>
-    </PopoverPrimitive.Portal>
-  );
-});
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverContent, PopoverTrigger };

package/__generated/components/ui/progress.tsx

@@ -1,61 +0,0 @@
-import * as ProgressPrimitive from '@rn-primitives/progress';
-import * as React from 'react';
-import { Platform, View } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  withSpring,
-} from 'react-native-reanimated';
-import { cn } from '../../lib/utils';
-
-const Progress = React.forwardRef<
-  ProgressPrimitive.RootRef,
-  ProgressPrimitive.RootProps & {
-    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} className={indicatorClassName} />
-    </ProgressPrimitive.Root>
-  );
-});
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };
-
-function Indicator({ value, className }: { value: number | undefined | null; className?: string }) {
-  const progress = useDerivedValue(() => value ?? 0);
-
-  const indicator = useAnimatedStyle(() => {
-    return {
-      width: withSpring(
-        `${interpolate(progress.value, [0, 100], [1, 100], Extrapolation.CLAMP)}%`,
-        { overshootClamping: true }
-      ),
-    };
-  });
-
-  if (Platform.OS === 'web') {
-    return (
-      <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', className)} />
-    </ProgressPrimitive.Indicator>
-  );
-}

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

@@ -1,36 +0,0 @@
-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;
-
-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

@@ -1,173 +0,0 @@
-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';
-import { Check } from '../../lib/icons/Check';
-import { ChevronDown } from '../../lib/icons/ChevronDown';
-import { ChevronUp } from '../../lib/icons/ChevronUp';
-import { cn } from '../../lib/utils';
-
-type Option = SelectPrimitive.Option;
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-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 }: SelectPrimitive.ScrollUpButtonProps) => {
-  if (Platform.OS !== 'web') {
-    return null;
-  }
-  return (
-    <SelectPrimitive.ScrollUpButton
-      className={cn('flex web:cursor-default items-center justify-center py-1', className)}
-      {...props}
-    >
-      <ChevronUp size={14} className='text-foreground' />
-    </SelectPrimitive.ScrollUpButton>
-  );
-};
-
-/**
- * Platform: WEB ONLY
- */
-const SelectScrollDownButton = ({ className, ...props }: SelectPrimitive.ScrollDownButtonProps) => {
-  if (Platform.OS !== 'web') {
-    return null;
-  }
-  return (
-    <SelectPrimitive.ScrollDownButton
-      className={cn('flex web:cursor-default items-center justify-center py-1', className)}
-      {...props}
-    >
-      <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) => {
-  const { open } = SelectPrimitive.useRootContext();
-
-  return (
-    <SelectPrimitive.Portal hostName={portalHost}>
-      <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' &&
-                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-              open
-                ? 'web:zoom-in-95 web:animate-in web:fade-in-0'
-                : 'web:zoom-out-95 web:animate-out web:fade-out-0',
-              className
-            )}
-            position={position}
-            {...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>
-            <SelectScrollDownButton />
-          </SelectPrimitive.Content>
-        </Animated.View>
-      </SelectPrimitive.Overlay>
-    </SelectPrimitive.Portal>
-  );
-});
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-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<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<
-  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;
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-  type Option,
-};

package/__generated/components/ui/separator.tsx

@@ -1,22 +0,0 @@
-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) => (
-    <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/skeleton.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated';
-import { cn } from '../../lib/utils';
-
-const duration = 1000;
-
-function Skeleton({
-  className,
-  ...props
-}: Omit<React.ComponentPropsWithoutRef<typeof Animated.View>, 'style'>) {
-  const sv = useSharedValue(1);
-
-  React.useEffect(() => {
-    sv.value = withRepeat(
-      withSequence(withTiming(0.5, { duration }), withTiming(1, { duration })),
-      -1
-    );
-  }, []);
-
-  const style = useAnimatedStyle(() => ({
-    opacity: sv.value,
-  }));
-
-  return (
-    <Animated.View
-      style={style}
-      className={cn('rounded-md bg-secondary dark:bg-muted', className)}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

package/__generated/components/ui/switch.tsx

@@ -1,95 +0,0 @@
-import * as SwitchPrimitives from '@rn-primitives/switch';
-import * as React from 'react';
-import { Platform } from 'react-native';
-import Animated, {
-  interpolateColor,
-  useAnimatedStyle,
-  useDerivedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { useColorScheme } from '../../lib/useColorScheme';
-import { cn } from '../../lib/utils';
-
-const SwitchWeb = React.forwardRef<SwitchPrimitives.RootRef, SwitchPrimitives.RootProps>(
-  ({ 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
-        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';
-
-const RGB_COLORS = {
-  light: {
-    primary: 'rgb(24, 24, 27)',
-    input: 'rgb(228, 228, 231)',
-  },
-  dark: {
-    primary: 'rgb(250, 250, 250)',
-    input: 'rgb(39, 39, 42)',
-  },
-} 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')}
-      >
-        <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({
-  web: SwitchWeb,
-  default: SwitchNative,
-});
-
-export { Switch };