@react-native-reusables/cli 0.0.9 → 0.0.11

package/dist/generated/components/ui/navigation-menu.tsx

@@ -0,0 +1,177 @@
+import * as NavigationMenuPrimitive from '@rnr/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 '../../components/Icons';
+import { cn } from '../../lib/utils';
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ 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<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ 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<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ 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<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  const { value } = NavigationMenuPrimitive.useRootContext();
+  const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <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',
+          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<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => {
+  return (
+    <View className={cn('absolute left-0 top-full flex justify-center')}>
+      <NavigationMenuPrimitive.Viewport
+        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}
+      />
+    </View>
+  );
+});
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ 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,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

package/dist/generated/components/ui/popover.tsx

@@ -0,0 +1,39 @@
+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 { cn } from '../../lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
+  return (
+    <PopoverPrimitive.Portal>
+      <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/dist/generated/components/ui/radio-group.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import * as RadioGroupPrimitive from '@rnr/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} />
+  );
+});
+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>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/dist/generated/components/ui/select.tsx

@@ -0,0 +1,181 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { Check, ChevronDown, ChevronUp } from '../../components/Icons';
+import * as SelectPrimitive from '@rnr/select';
+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<
+  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>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+/**
+ * Platform: WEB ONLY
+ */
+const SelectScrollUpButton = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>) => {
+  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
+}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>) => {
+  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<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => {
+  const { open } = SelectPrimitive.useRootContext();
+
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
+        <Animated.View 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<
+  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}
+  />
+));
+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 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>
+>(({ 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/dist/generated/components/ui/separator.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@rnr/separator';
+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}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/dist/generated/components/ui/skeleton.tsx

@@ -0,0 +1,39 @@
+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/dist/generated/components/ui/switch.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  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
+      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<
+  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}
+      >
+        <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 };