@react-native-reusables/cli 0.4.1 → 0.5.0-beta.2

package/__generated/components/ui/table.tsx

@@ -1,108 +0,0 @@
-import * as TablePrimitive from '@rn-primitives/table';
-import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from './text';
-
-function Table({
-  className,
-  ...props
-}: TablePrimitive.RootProps & {
-  ref?: React.RefObject<TablePrimitive.RootRef>;
-}) {
-  return (
-    <TablePrimitive.Root className={cn('w-full caption-bottom text-sm', className)} {...props} />
-  );
-}
-
-function TableHeader({
-  className,
-  ...props
-}: TablePrimitive.HeaderProps & {
-  ref?: React.RefObject<TablePrimitive.HeaderRef>;
-}) {
-  return (
-    <TablePrimitive.Header className={cn('border-border [&_tr]:border-b', className)} {...props} />
-  );
-}
-
-function TableBody({
-  className,
-  style,
-  ...props
-}: TablePrimitive.BodyProps & {
-  ref?: React.RefObject<TablePrimitive.BodyRef>;
-}) {
-  return (
-    <TablePrimitive.Body
-      className={cn('flex-1 border-border [&_tr:last-child]:border-0', className)}
-      style={[{ minHeight: 2 }, style]}
-      {...props}
-    />
-  );
-}
-
-function TableFooter({
-  className,
-  ...props
-}: TablePrimitive.FooterProps & {
-  ref?: React.RefObject<TablePrimitive.FooterRef>;
-}) {
-  return (
-    <TablePrimitive.Footer
-      className={cn('bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
-      {...props}
-    />
-  );
-}
-
-function TableRow({
-  className,
-  ...props
-}: TablePrimitive.RowProps & {
-  ref?: React.RefObject<TablePrimitive.RowRef>;
-}) {
-  return (
-    <TablePrimitive.Row
-      className={cn(
-        'flex-row border-border border-b web:transition-colors web:hover:bg-muted/50 web:data-[state=selected]:bg-muted',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableHead({
-  className,
-  ...props
-}: TablePrimitive.HeadProps & {
-  ref?: React.RefObject<TablePrimitive.HeadRef>;
-}) {
-  return (
-    <TextClassContext.Provider value='text-muted-foreground'>
-      <TablePrimitive.Head
-        className={cn(
-          'h-12 px-4 text-left justify-center font-medium [&:has([role=checkbox])]:pr-0',
-          className
-        )}
-        {...props}
-      />
-    </TextClassContext.Provider>
-  );
-}
-
-function TableCell({
-  className,
-  ...props
-}: TablePrimitive.CellProps & {
-  ref?: React.RefObject<TablePrimitive.CellRef>;
-}) {
-  return (
-    <TablePrimitive.Cell
-      className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
-      {...props}
-    />
-  );
-}
-
-export { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/__generated/components/ui/tabs.tsx

@@ -1,69 +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;
-
-function TabsList({
-  className,
-  ...props
-}: TabsPrimitive.ListProps & {
-  ref?: React.RefObject<TabsPrimitive.ListRef>;
-}) {
-  return (
-    <TabsPrimitive.List
-      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}
-    />
-  );
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: TabsPrimitive.TriggerProps & {
-  ref?: React.RefObject<TabsPrimitive.TriggerRef>;
-}) {
-  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
-        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>
-  );
-}
-
-function TabsContent({
-  className,
-  ...props
-}: TabsPrimitive.ContentProps & {
-  ref?: React.RefObject<TabsPrimitive.ContentRef>;
-}) {
-  return (
-    <TabsPrimitive.Content
-      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}
-    />
-  );
-}
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };

package/__generated/components/ui/text.tsx

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

package/__generated/components/ui/textarea.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
-import { cn } from '../../lib/utils';
-
-function Textarea({
-  className,
-  multiline = true,
-  numberOfLines = 4,
-  placeholderClassName,
-  ...props
-}: TextInputProps & {
-  ref?: React.RefObject<TextInput>;
-}) {
-  return (
-    <TextInput
-      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}
-    />
-  );
-}
-
-export { Textarea };

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

@@ -1,94 +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);
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: ToggleGroupPrimitive.RootProps &
-  VariantProps<typeof toggleVariants> & {
-    ref?: React.RefObject<ToggleGroupPrimitive.RootRef>;
-  }) {
-  return (
-    <ToggleGroupPrimitive.Root
-      className={cn('flex flex-row items-center justify-center gap-1', className)}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
-}
-
-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;
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: ToggleGroupPrimitive.ItemProps &
-  VariantProps<typeof toggleVariants> & {
-    ref?: React.RefObject<ToggleGroupPrimitive.ItemRef>;
-  }) {
-  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
-        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>
-  );
-}
-
-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,90 +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',
-  },
-});
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: TogglePrimitive.RootProps &
-  VariantProps<typeof toggleVariants> &
-  VariantProps<typeof toggleVariants> & {
-    ref?: React.RefObject<TogglePrimitive.RootRef>;
-  }) {
-  return (
-    <TextClassContext.Provider
-      value={cn(
-        toggleTextVariants({ variant, size }),
-        props.pressed ? 'text-accent-foreground' : 'web:group-hover:text-muted-foreground',
-        className
-      )}
-    >
-      <TogglePrimitive.Root
-        className={cn(
-          toggleVariants({ variant, size }),
-          props.disabled && 'web:pointer-events-none opacity-50',
-          props.pressed && 'bg-accent',
-          className
-        )}
-        {...props}
-      />
-    </TextClassContext.Provider>
-  );
-}
-
-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,43 +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;
-
-function TooltipContent({
-  className,
-  sideOffset = 4,
-  portalHost,
-  ...props
-}: TooltipPrimitive.ContentProps & {
-  ref?: React.RefObject<TooltipPrimitive.ContentRef>;
-  portalHost?: string;
-}) {
-  return (
-    <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
-              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>
-  );
-}
-
-export { Tooltip, TooltipContent, TooltipTrigger };

package/__generated/components/ui/typography.tsx

@@ -1,148 +0,0 @@
-import * as Slot from '@rn-primitives/slot';
-import * as React from 'react';
-import { Platform, Text as RNText } from 'react-native';
-import { cn } from '../../lib/utils';
-
-type TypographyProps = React.ComponentProps<typeof RNText> & {
-  ref?: React.RefObject<RNText>;
-  asChild?: boolean;
-};
-
-function H1({ className, asChild = false, ...props }: TypographyProps) {
-  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
-      )}
-      {...props}
-    />
-  );
-}
-
-function H2({ className, asChild = false, ...props }: TypographyProps) {
-  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
-      )}
-      {...props}
-    />
-  );
-}
-
-function H3({ className, asChild = false, ...props }: TypographyProps) {
-  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
-      )}
-      {...props}
-    />
-  );
-}
-
-function H4({ className, asChild = false, ...props }: TypographyProps) {
-  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
-      )}
-      {...props}
-    />
-  );
-}
-
-function P({ className, asChild = false, ...props }: TypographyProps) {
-  const Component = asChild ? Slot.Text : RNText;
-  return (
-    <Component className={cn('text-base text-foreground web:select-text', className)} {...props} />
-  );
-}
-
-function BlockQuote({ className, asChild = false, ...props }: TypographyProps) {
-  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
-      )}
-      {...props}
-    />
-  );
-}
-
-function Code({ className, asChild = false, ...props }: TypographyProps) {
-  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
-      )}
-      {...props}
-    />
-  );
-}
-
-function Lead({ className, asChild = false, ...props }: TypographyProps) {
-  const Component = asChild ? Slot.Text : RNText;
-  return (
-    <Component
-      className={cn('text-xl text-muted-foreground web:select-text', className)}
-      {...props}
-    />
-  );
-}
-
-function Large({ className, asChild = false, ...props }: TypographyProps) {
-  const Component = asChild ? Slot.Text : RNText;
-  return (
-    <Component
-      className={cn('text-xl text-foreground font-semibold web:select-text', className)}
-      {...props}
-    />
-  );
-}
-
-function Small({ className, asChild = false, ...props }: TypographyProps) {
-  const Component = asChild ? Slot.Text : RNText;
-  return (
-    <Component
-      className={cn('text-sm text-foreground font-medium leading-none web:select-text', className)}
-      {...props}
-    />
-  );
-}
-
-function Muted({ className, asChild = false, ...props }: TypographyProps) {
-  const Component = asChild ? Slot.Text : RNText;
-  return (
-    <Component
-      className={cn('text-sm text-muted-foreground web:select-text', className)}
-      {...props}
-    />
-  );
-}
-
-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>
-    </>
-  );
-}