@react-native-reusables/cli 0.0.8 → 0.0.10

package/dist/generated/components/primitives/types.ts

@@ -0,0 +1,105 @@
+import type { Pressable, Text, View, ViewStyle } from 'react-native';
+
+type ComponentPropsWithAsChild<T extends React.ElementType<any>> =
+  React.ComponentPropsWithoutRef<T> & { asChild?: boolean };
+
+type ViewRef = React.ElementRef<typeof View>;
+type PressableRef = React.ElementRef<typeof Pressable>;
+type TextRef = React.ElementRef<typeof Text>;
+
+type SlottableViewProps = ComponentPropsWithAsChild<typeof View>;
+type SlottablePressableProps = ComponentPropsWithAsChild<typeof Pressable> & {
+  /**
+   * Platform: WEB ONLY
+   */
+  onKeyDown?: (ev: React.KeyboardEvent) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onKeyUp?: (ev: React.KeyboardEvent) => void;
+};
+type SlottableTextProps = ComponentPropsWithAsChild<typeof Text>;
+
+interface Insets {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;
+type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;
+
+/**
+ * Certain props are only available on the native version of the component.
+ * @docs For the web version, see the Radix documentation https://www.radix-ui.com/primitives
+ */
+interface PositionedContentProps {
+  forceMount?: true | undefined;
+  style?: ViewStyle;
+  alignOffset?: number;
+  insets?: Insets;
+  avoidCollisions?: boolean;
+  align?: 'start' | 'center' | 'end';
+  side?: 'top' | 'bottom';
+  sideOffset?: number;
+  /**
+   * Platform: NATIVE ONLY
+   */
+  disablePositioningStyle?: boolean;
+  /**
+   * Platform: WEB ONLY
+   */
+  loop?: boolean;
+  /**
+   * Platform: WEB ONLY
+   */
+  onCloseAutoFocus?: (event: Event) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onFocusOutside?: (event: FocusOutsideEvent) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onInteractOutside?: (
+    event: PointerDownOutsideEvent | FocusOutsideEvent
+  ) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  collisionBoundary?: Element | null | Array<Element | null>;
+  /**
+   * Platform: WEB ONLY
+   */
+  sticky?: 'partial' | 'always';
+  /**
+   * Platform: WEB ONLY
+   */
+  hideWhenDetached?: boolean;
+}
+
+interface ForceMountable {
+  forceMount?: true | undefined;
+}
+
+export type {
+  ComponentPropsWithAsChild,
+  ForceMountable,
+  Insets,
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+};

package/dist/generated/components/primitives/utils.ts

@@ -0,0 +1,61 @@
+import type { GestureResponderEvent } from 'react-native';
+
+const ToggleGroupUtils = {
+  getIsSelected(value: string | string[] | undefined, itemValue: string) {
+    if (value === undefined) {
+      return false;
+    }
+    if (typeof value === 'string') {
+      return value === itemValue;
+    }
+    return value.includes(itemValue);
+  },
+  getNewSingleValue(originalValue: string | string[] | undefined, itemValue: string) {
+    if (originalValue === itemValue) {
+      return undefined;
+    }
+    return itemValue;
+  },
+  getNewMultipleValue(originalValue: string | string[] | undefined, itemValue: string) {
+    if (originalValue === undefined) {
+      return [itemValue];
+    }
+    if (typeof originalValue === 'string') {
+      return originalValue === itemValue ? [] : [originalValue, itemValue];
+    }
+    if (originalValue.includes(itemValue)) {
+      return originalValue.filter((v) => v !== itemValue);
+    }
+    return [...originalValue, itemValue];
+  },
+};
+
+const EmptyGestureResponderEvent: GestureResponderEvent = {
+  nativeEvent: {
+    changedTouches: [],
+    identifier: '0',
+    locationX: 0,
+    locationY: 0,
+    pageX: 0,
+    pageY: 0,
+    target: '0',
+    timestamp: 0,
+    touches: [],
+  },
+  bubbles: false,
+  cancelable: false,
+  currentTarget: {} as any,
+  defaultPrevented: false,
+  eventPhase: 0,
+  persist: () => {},
+  isDefaultPrevented: () => false,
+  isPropagationStopped: () => false,
+  isTrusted: false,
+  preventDefault: () => {},
+  stopPropagation: () => {},
+  target: {} as any,
+  timeStamp: 0,
+  type: '',
+};
+
+export { ToggleGroupUtils, EmptyGestureResponderEvent };

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

@@ -0,0 +1,127 @@
+import * as AccordionPrimitive from '@rnr/accordion';
+import * as React from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  FadeIn,
+  FadeOutUp,
+  LayoutAnimationConfig,
+  LinearTransition,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+import { ChevronDown } from '../Icons';
+import { TextClassContext } from './text';
+
+const Accordion = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+>(({ children, ...props }, ref) => {
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <AccordionPrimitive.Root ref={ref} {...props} asChild={Platform.OS !== 'web'}>
+        <Animated.View layout={LinearTransition.duration(200)}>{children}</Animated.View>
+      </AccordionPrimitive.Root>
+    </LayoutAnimationConfig>
+  );
+});
+
+Accordion.displayName = AccordionPrimitive.Root.displayName;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, value, ...props }, ref) => {
+  return (
+    <Animated.View className={'overflow-hidden'} layout={LinearTransition.duration(200)}>
+      <AccordionPrimitive.Item
+        ref={ref}
+        className={cn('border-b border-border', className)}
+        value={value}
+        {...props}
+      />
+    </Animated.View>
+  );
+});
+AccordionItem.displayName = AccordionPrimitive.Item.displayName;
+
+const Trigger = Platform.OS === 'web' ? View : Pressable;
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable>
+>(({ className, children, ...props }, ref) => {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+
+  const progress = useDerivedValue(() =>
+    isExpanded ? 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 (
+    <TextClassContext.Provider value='native:text-lg font-medium web:group-hover:underline'>
+      <AccordionPrimitive.Header className='flex'>
+        <AccordionPrimitive.Trigger ref={ref} {...props} asChild>
+          <Trigger
+            className={cn(
+              'flex flex-row web:flex-1 items-center justify-between py-4 web:transition-all group web:focus-visible:outline-none web:focus-visible:ring-1 web:focus-visible:ring-muted-foreground',
+              className
+            )}
+          >
+            <>{children}</>
+            <Animated.View style={chevronStyle}>
+              <ChevronDown size={18} className={'text-foreground shrink-0'} />
+            </Animated.View>
+          </Trigger>
+        </AccordionPrimitive.Trigger>
+      </AccordionPrimitive.Header>
+    </TextClassContext.Provider>
+  );
+});
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+  return (
+    <TextClassContext.Provider value='native:text-lg'>
+      <AccordionPrimitive.Content
+        className={cn(
+          'overflow-hidden text-sm web:transition-all',
+          isExpanded ? 'web:animate-accordion-down' : 'web:animate-accordion-up'
+        )}
+        ref={ref}
+        {...props}
+      >
+        <InnerContent className={cn('pb-4', className)}>{children}</InnerContent>
+      </AccordionPrimitive.Content>
+    </TextClassContext.Provider>
+  );
+});
+
+function InnerContent({ children, className }: { children: React.ReactNode; className?: string }) {
+  if (Platform.OS === 'web') {
+    return <View className={cn('pb-4', className)}>{children}</View>;
+  }
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOutUp.duration(200)}
+      className={cn('pb-4', className)}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/generated/components/ui/alert-dialog.tsx

@@ -0,0 +1,167 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { buttonTextVariants, buttonVariants } from '../../components/ui/button';
+import * as AlertDialogPrimitive from '@rnr/alert-dialog';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlayWeb = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  const { open } = AlertDialogPrimitive.useRootContext();
+  return (
+    <AlertDialogPrimitive.Overlay
+      style={StyleSheet.absoluteFill}
+      className={cn(
+        'z-50 bg-black/80 flex justify-center items-center p-2',
+        open ? 'web:animate-in web:fade-in-0' : 'web:animate-out web:fade-out-0',
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+AlertDialogOverlayWeb.displayName = 'AlertDialogOverlayWeb';
+
+const AlertDialogOverlayNative = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <AlertDialogPrimitive.Overlay
+      style={StyleSheet.absoluteFill}
+      className={cn('z-50 bg-black/80 flex justify-center items-center p-2', className)}
+      {...props}
+      ref={ref}
+      asChild
+    >
+      <Animated.View entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)}>
+        {children}
+      </Animated.View>
+    </AlertDialogPrimitive.Overlay>
+  );
+});
+
+AlertDialogOverlayNative.displayName = 'AlertDialogOverlayNative';
+
+const AlertDialogOverlay = Platform.select({
+  web: AlertDialogOverlayWeb,
+  default: AlertDialogOverlayNative,
+});
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => {
+  const { open } = AlertDialogPrimitive.useRootContext();
+
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay>
+        <AlertDialogPrimitive.Content
+          ref={ref}
+          className={cn(
+            'z-50 max-w-lg gap-4 border border-border bg-background p-6 shadow-lg shadow-foreground/10 web:duration-200 rounded-lg',
+            open
+              ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
+              : 'web:animate-out web:fade-out-0 web:zoom-out-95',
+            className
+          )}
+          {...props}
+        />
+      </AlertDialogOverlay>
+    </AlertDialogPortal>
+  );
+});
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View className={cn('flex flex-col gap-2', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg native:text-xl text-foreground font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm native:text-base text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <TextClassContext.Provider value={buttonTextVariants({ className })}>
+    <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+  </TextClassContext.Provider>
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <TextClassContext.Provider value={buttonTextVariants({ className, variant: 'outline' })}>
+    <AlertDialogPrimitive.Cancel
+      ref={ref}
+      className={cn(buttonVariants({ variant: 'outline', className }))}
+      {...props}
+    />
+  </TextClassContext.Provider>
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/dist/generated/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from '@rnr/aspect-ratio';
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@rnr/avatar';
+import { cn } from '../../lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };

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

@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { View } from 'react-native';
+import * as Slot from '@rnr/slot';
+import type { SlottableViewProps } from '@rnr/types';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
+
+const badgeVariants = cva(
+  'web:inline-flex items-center rounded-full border border-border px-2.5 py-0.5 web:transition-colors web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary web:hover:opacity-80 active:opacity-80',
+        secondary: 'border-transparent bg-secondary web:hover:opacity-80 active:opacity-80',
+        destructive: 'border-transparent bg-destructive web:hover:opacity-80 active:opacity-80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const badgeTextVariants = cva('text-xs font-semibold ', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-secondary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type BadgeProps = SlottableViewProps & VariantProps<typeof badgeVariants>;
+
+function Badge({ className, variant, asChild, ...props }: BadgeProps) {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <TextClassContext.Provider value={badgeTextVariants({ variant })}>
+      <Component className={cn(badgeVariants({ variant }), className)} {...props} />
+    </TextClassContext.Provider>
+  );
+}
+
+export { Badge, badgeTextVariants, badgeVariants };
+export type { BadgeProps };

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

@@ -0,0 +1,88 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Pressable } from 'react-native';
+import { TextClassContext } from './text';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary web:hover:opacity-90 active:opacity-90',
+        destructive: 'bg-destructive web:hover:opacity-90 active:opacity-90',
+        outline:
+          'border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
+        secondary: 'bg-secondary web:hover:opacity-80 active:opacity-80',
+        ghost: 'web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
+        link: 'web:underline-offset-4 web:hover:underline web:focus:underline ',
+      },
+      size: {
+        default: 'h-10 px-4 py-2 native:h-12 native:px-5 native:py-3',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8 native:h-14',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const buttonTextVariants = cva(
+  'web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'text-primary-foreground',
+        destructive: 'text-destructive-foreground',
+        outline: 'group-active:text-accent-foreground',
+        secondary: 'text-secondary-foreground group-active:text-secondary-foreground',
+        ghost: 'group-active:text-accent-foreground',
+        link: 'text-primary group-active:underline',
+      },
+      size: {
+        default: '',
+        sm: '',
+        lg: 'native:text-lg',
+        icon: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
+  VariantProps<typeof buttonVariants>;
+
+const Button = React.forwardRef<React.ElementRef<typeof Pressable>, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <TextClassContext.Provider
+        value={cn(
+          props.disabled && 'web:pointer-events-none',
+          buttonTextVariants({ variant, size })
+        )}
+      >
+        <Pressable
+          className={cn(
+            props.disabled && 'opacity-50 web:pointer-events-none',
+            buttonVariants({ variant, size, className })
+          )}
+          ref={ref}
+          role='button'
+          {...props}
+        />
+      </TextClassContext.Provider>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };