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

package/__generated/components/ui/table.tsx

@@ -1,92 +0,0 @@
-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<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<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<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<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<TablePrimitive.RowRef, TablePrimitive.RowProps>(
-  ({ 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<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<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 };

package/__generated/components/ui/tabs.tsx

@@ -1,62 +0,0 @@
-import * as TabsPrimitive from '@rn-primitives/tabs';
-import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from './text';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<TabsPrimitive.ListRef, TabsPrimitive.ListProps>(
-  ({ className, ...props }, ref) => (
-    <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'
-        )}
-      >
-        <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;
-
-const TabsContent = React.forwardRef<TabsPrimitive.ContentRef, TabsPrimitive.ContentProps>(
-  ({ className, ...props }, ref) => (
-    <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 };

package/__generated/components/ui/text.tsx

@@ -1,24 +0,0 @@
-import * as Slot from '@rn-primitives/slot';
-import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
-import * as React from 'react';
-import { Text as RNText } from 'react-native';
-import { cn } from '../../lib/utils';
-
-const TextClassContext = React.createContext<string | undefined>(undefined);
-
-const Text = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const textClass = React.useContext(TextClassContext);
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-base text-foreground web:select-text', textClass, className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Text.displayName = 'Text';
-
-export { Text, TextClassContext };

package/__generated/components/ui/textarea.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
-import { cn } from '../../lib/utils';
-
-const Textarea = React.forwardRef<React.ElementRef<typeof TextInput>, TextInputProps>(
-  ({ className, multiline = true, numberOfLines = 4, placeholderClassName, ...props }, ref) => {
-    return (
-      <TextInput
-        ref={ref}
-        className={cn(
-          'web:flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground web:ring-offset-background placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-          props.editable === false && 'opacity-50 web:cursor-not-allowed',
-          className
-        )}
-        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
-        multiline={multiline}
-        numberOfLines={numberOfLines}
-        textAlignVertical='top'
-        {...props}
-      />
-    );
-  }
-);
-
-Textarea.displayName = 'Textarea';
-
-export { Textarea };

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

@@ -1,84 +0,0 @@
-import type { VariantProps } from 'class-variance-authority';
-import type { LucideIcon } from 'lucide-react-native';
-import * as React from 'react';
-import { toggleTextVariants, toggleVariants } from '../../components/ui/toggle';
-import { TextClassContext } from './text';
-import * as ToggleGroupPrimitive from '@rn-primitives/toggle-group';
-import { cn } from '../../lib/utils';
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants> | null>(null);
-
-const ToggleGroup = React.forwardRef<
-  ToggleGroupPrimitive.RootRef,
-  ToggleGroupPrimitive.RootProps & VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn('flex flex-row items-center justify-center gap-1', className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-function useToggleGroupContext() {
-  const context = React.useContext(ToggleGroupContext);
-  if (context === null) {
-    throw new Error(
-      'ToggleGroup compound components cannot be rendered outside the ToggleGroup component'
-    );
-  }
-  return context;
-}
-
-const ToggleGroupItem = React.forwardRef<
-  ToggleGroupPrimitive.ItemRef,
-  ToggleGroupPrimitive.ItemProps & VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = useToggleGroupContext();
-  const { value } = ToggleGroupPrimitive.useRootContext();
-
-  return (
-    <TextClassContext.Provider
-      value={cn(
-        toggleTextVariants({ variant, size }),
-        ToggleGroupPrimitive.utils.getIsSelected(value, props.value)
-          ? 'text-accent-foreground'
-          : 'web:group-hover:text-muted-foreground'
-      )}
-    >
-      <ToggleGroupPrimitive.Item
-        ref={ref}
-        className={cn(
-          toggleVariants({
-            variant: context.variant || variant,
-            size: context.size || size,
-          }),
-          props.disabled && 'web:pointer-events-none opacity-50',
-          ToggleGroupPrimitive.utils.getIsSelected(value, props.value) && 'bg-accent',
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </ToggleGroupPrimitive.Item>
-    </TextClassContext.Provider>
-  );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-function ToggleGroupIcon({
-  className,
-  icon: Icon,
-  ...props
-}: React.ComponentPropsWithoutRef<LucideIcon> & {
-  icon: LucideIcon;
-}) {
-  const textClass = React.useContext(TextClassContext);
-  return <Icon className={cn(textClass, className)} {...props} />;
-}
-
-export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };

package/__generated/components/ui/toggle.tsx

@@ -1,85 +0,0 @@
-import * as TogglePrimitive from '@rn-primitives/toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-import type { LucideIcon } from 'lucide-react-native';
-import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from './text';
-
-const toggleVariants = cva(
-  'web:group web:inline-flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:hover:bg-muted active:bg-muted 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-transparent',
-        outline:
-          'border border-input bg-transparent web:hover:bg-accent active:bg-accent active:bg-accent',
-      },
-      size: {
-        default: 'h-10 px-3 native:h-12 native:px-[12]',
-        sm: 'h-9 px-2.5 native:h-10 native:px-[9]',
-        lg: 'h-11 px-5 native:h-14 native:px-6',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-const toggleTextVariants = cva('text-sm native:text-base text-foreground font-medium', {
-  variants: {
-    variant: {
-      default: '',
-      outline: 'web:group-hover:text-accent-foreground web:group-active:text-accent-foreground',
-    },
-    size: {
-      default: '',
-      sm: '',
-      lg: '',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'default',
-  },
-});
-
-const Toggle = React.forwardRef<
-  TogglePrimitive.RootRef,
-  TogglePrimitive.RootProps & VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TextClassContext.Provider
-    value={cn(
-      toggleTextVariants({ variant, size }),
-      props.pressed ? 'text-accent-foreground' : 'web:group-hover:text-muted-foreground',
-      className
-    )}
-  >
-    <TogglePrimitive.Root
-      ref={ref}
-      className={cn(
-        toggleVariants({ variant, size }),
-        props.disabled && 'web:pointer-events-none opacity-50',
-        props.pressed && 'bg-accent',
-        className
-      )}
-      {...props}
-    />
-  </TextClassContext.Provider>
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-function ToggleIcon({
-  className,
-  icon: Icon,
-  ...props
-}: React.ComponentPropsWithoutRef<LucideIcon> & {
-  icon: LucideIcon;
-}) {
-  const textClass = React.useContext(TextClassContext);
-  return <Icon className={cn(textClass, className)} {...props} />;
-}
-
-export { Toggle, ToggleIcon, toggleTextVariants, toggleVariants };

package/__generated/components/ui/tooltip.tsx

@@ -1,38 +0,0 @@
-import * as TooltipPrimitive from '@rn-primitives/tooltip';
-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 Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  TooltipPrimitive.ContentRef,
-  TooltipPrimitive.ContentProps & { portalHost?: string }
->(({ className, sideOffset = 4, portalHost, ...props }, ref) => (
-  <TooltipPrimitive.Portal hostName={portalHost}>
-    <TooltipPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
-      <Animated.View
-        entering={Platform.select({ web: undefined, default: FadeIn })}
-        exiting={Platform.select({ web: undefined, default: FadeOut })}
-      >
-        <TextClassContext.Provider value='text-sm native:text-base text-popover-foreground'>
-          <TooltipPrimitive.Content
-            ref={ref}
-            sideOffset={sideOffset}
-            className={cn(
-              'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md shadow-foreground/5 web:animate-in web:fade-in-0 web:zoom-in-95 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',
-              className
-            )}
-            {...props}
-          />
-        </TextClassContext.Provider>
-      </Animated.View>
-    </TooltipPrimitive.Overlay>
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipContent, TooltipTrigger };

package/__generated/components/ui/typography.tsx

@@ -1,205 +0,0 @@
-import * as Slot from '@rn-primitives/slot';
-import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
-import * as React from 'react';
-import { Platform, Text as RNText } from 'react-native';
-import { cn } from '../../lib/utils';
-
-const H1 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        role='heading'
-        aria-level='1'
-        className={cn(
-          'web:scroll-m-20 text-4xl text-foreground font-extrabold tracking-tight lg:text-5xl web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-H1.displayName = 'H1';
-
-const H2 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        role='heading'
-        aria-level='2'
-        className={cn(
-          'web:scroll-m-20 border-b border-border pb-2 text-3xl text-foreground font-semibold tracking-tight first:mt-0 web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-H2.displayName = 'H2';
-
-const H3 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        role='heading'
-        aria-level='3'
-        className={cn(
-          'web:scroll-m-20 text-2xl text-foreground font-semibold tracking-tight web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-H3.displayName = 'H3';
-
-const H4 = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        role='heading'
-        aria-level='4'
-        className={cn(
-          'web:scroll-m-20 text-xl text-foreground font-semibold tracking-tight web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-H4.displayName = 'H4';
-
-const P = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-base text-foreground web:select-text', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-P.displayName = 'P';
-
-const BlockQuote = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        // @ts-ignore - role of blockquote renders blockquote element on the web
-        role={Platform.OS === 'web' ? 'blockquote' : undefined}
-        className={cn(
-          'mt-6 native:mt-4 border-l-2 border-border pl-6 native:pl-3 text-base text-foreground italic web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-BlockQuote.displayName = 'BlockQuote';
-
-const Code = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        // @ts-ignore - role of code renders code element on the web
-        role={Platform.OS === 'web' ? 'code' : undefined}
-        className={cn(
-          'relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] text-sm text-foreground font-semibold web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Code.displayName = 'Code';
-
-const Lead = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-xl text-muted-foreground web:select-text', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Lead.displayName = 'Lead';
-
-const Large = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-xl text-foreground font-semibold web:select-text', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Large.displayName = 'Large';
-
-const Small = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn(
-          'text-sm text-foreground font-medium leading-none web:select-text',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Small.displayName = 'Small';
-
-const Muted = React.forwardRef<TextRef, SlottableTextProps>(
-  ({ className, asChild = false, ...props }, ref) => {
-    const Component = asChild ? Slot.Text : RNText;
-    return (
-      <Component
-        className={cn('text-sm text-muted-foreground web:select-text', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Muted.displayName = 'Muted';
-
-export { BlockQuote, Code, H1, H2, H3, H4, Large, Lead, Muted, P, Small };

package/__generated/starter-base/README.md

@@ -1,16 +0,0 @@
-# Starter base
-
-A starting point to help you set up your project quickly and use the common components provided by `react-native-reusables`. The idea is to make it easier for you to get started.
-
-## Features
-
-- NativeWind v4
-- Dark and light mode
-  - Android Navigation Bar matches mode
-  - Persistent mode
-- Common components
-  - ThemeToggle, Avatar, Button, Card, Progress, Text, Tooltip
-
-<img src="https://github.com/mrzachnugent/react-native-reusables/assets/63797719/42c94108-38a7-498b-9c70-18640420f1bc"
-     alt="starter-base-template"
-     style="width:270px;" />

package/__generated/starter-base/app/+not-found.tsx

@@ -1,18 +0,0 @@
-import { Link, Stack } from 'expo-router';
-import { View } from 'react-native';
-import { Text } from '~/components/ui/text';
-
-export default function NotFoundScreen() {
-  return (
-    <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
-      <View>
-        <Text>This screen doesn't exist.</Text>
-
-        <Link href='/'>
-          <Text>Go to home screen!</Text>
-        </Link>
-      </View>
-    </>
-  );
-}