@react-native-reusables/cli 0.1.2 → 0.2.1

package/README.md

@@ -14,7 +14,7 @@ npx @react-native-reusables/cli@latest add
 
 ### Arguments
 
-If you do not add arguments, you will be promted to select the `ui` components you would like to add to your project.
+If you do not add arguments, you will be prompted to select the `ui` components you would like to add to your project.
 
 #### UI Components
 

package/__generated/components/ui/button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
           '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 ',
+        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',

package/__generated/components/ui/card.tsx

@@ -1,4 +1,4 @@
-import { TextRef, ViewRef } from '@rn-primitives/types';
+import type { TextRef, ViewRef } from '@rn-primitives/types';
 import * as React from 'react';
 import { Text, type TextProps, View, type ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';

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

@@ -67,7 +67,7 @@ const ContextMenuSubContent = React.forwardRef<
         'z-50 min-w-[8rem] overflow-hidden rounded-md border mt-1 border-border bg-popover p-1 shadow-md shadow-foreground/5 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',
         open
           ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
-          : 'web:animate-out web:fade-out-0 web:zoom-out ',
+          : 'web:animate-out web:fade-out-0 web:zoom-out',
         className
       )}
       {...props}
@@ -93,7 +93,7 @@ const ContextMenuContent = React.forwardRef<
             ? StyleSheet.flatten([
                 Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined,
                 overlayStyle,
-              ] as ViewStyle)
+              ])
             : Platform.OS !== 'web'
             ? StyleSheet.absoluteFill
             : undefined

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

@@ -73,7 +73,7 @@ const DropdownMenuSubContent = React.forwardRef<
         'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border mt-1 bg-popover p-1 shadow-md shadow-foreground/5 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',
         open
           ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
-          : 'web:animate-out web:fade-out-0 web:zoom-out ',
+          : 'web:animate-out web:fade-out-0 web:zoom-out',
         className
       )}
       {...props}
@@ -99,7 +99,7 @@ const DropdownMenuContent = React.forwardRef<
             ? StyleSheet.flatten([
                 Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined,
                 overlayStyle,
-              ] as ViewStyle)
+              ])
             : Platform.OS !== 'web'
             ? StyleSheet.absoluteFill
             : undefined

package/__generated/components/ui/hover-card.tsx

@@ -1,9 +1,9 @@
+import * as HoverCardPrimitive from '@rn-primitives/hover-card';
 import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import Animated, { FadeIn } from 'react-native-reanimated';
-import { TextClassContext } from './text';
-import * as HoverCardPrimitive from '@rn-primitives/hover-card';
 import { cn } from '../../lib/utils';
+import { TextClassContext } from './text';
 
 const HoverCard = HoverCardPrimitive.Root;
 
@@ -28,8 +28,8 @@ const HoverCardContent = React.forwardRef<
               className={cn(
                 'z-50 w-64 rounded-md border border-border bg-popover p-4 shadow-md shadow-foreground/5 web:outline-none web:cursor-auto 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',
                 open
-                  ? 'web:animate-in  web:fade-in-0 web:zoom-in-95'
-                  : 'web:animate-out web:fade-out-0 web:zoom-out-95 ',
+                  ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
+                  : 'web:animate-out web:fade-out-0 web:zoom-out-95',
                 className
               )}
               {...props}

package/__generated/components/ui/menubar.tsx

@@ -1,6 +1,6 @@
 import * as MenubarPrimitive from '@rn-primitives/menubar';
 import * as React from 'react';
-import { Platform, Text, TextProps, View } from 'react-native';
+import { Platform, Text, type TextProps, View } from 'react-native';
 import { Check } from '../../lib/icons/Check';
 import { ChevronDown } from '../../lib/icons/ChevronDown';
 import { ChevronRight } from '../../lib/icons/ChevronRight';
@@ -117,7 +117,7 @@ const MenubarContent = React.forwardRef<
       <MenubarPrimitive.Content
         ref={ref}
         className={cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-md shadow-foreground/5 ',
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-md shadow-foreground/5',
           value === itemValue
             ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
             : 'web:animate-out web:fade-out-0 web:zoom-out-95',

package/__generated/components/ui/progress.tsx

@@ -48,7 +48,7 @@ function Indicator({ value, className }: { value: number | undefined | null; cla
         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)} />
+        <ProgressPrimitive.Indicator className={cn('h-full w-full', className)} />
       </View>
     );
   }

package/__generated/components/ui/select.tsx

@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
   return (
     <SelectPrimitive.Portal hostName={portalHost}>
       <SelectPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
-        <Animated.View entering={FadeIn} exiting={FadeOut}>
+        <Animated.View className='z-50' entering={FadeIn} exiting={FadeOut}>
           <SelectPrimitive.Content
             ref={ref}
             className={cn(

package/__generated/components/ui/text.tsx

@@ -1,5 +1,5 @@
 import * as Slot from '@rn-primitives/slot';
-import { SlottableTextProps, TextRef } from '@rn-primitives/types';
+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';

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

@@ -1,4 +1,4 @@
-import { VariantProps } from 'class-variance-authority';
+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';

package/__generated/components/ui/typography.tsx

@@ -1,5 +1,5 @@
 import * as Slot from '@rn-primitives/slot';
-import { SlottableTextProps, TextRef } from '@rn-primitives/types';
+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';
@@ -96,6 +96,7 @@ const P = React.forwardRef<TextRef, SlottableTextProps>(
     );
   }
 );
+
 P.displayName = 'P';
 
 const BlockQuote = React.forwardRef<TextRef, SlottableTextProps>(

package/__generated/starter-base/README.md

@@ -0,0 +1,16 @@
+# 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
+    - Persistant 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

@@ -0,0 +1,18 @@
+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>
+    </>
+  );
+}

package/__generated/starter-base/app/_layout.tsx

@@ -0,0 +1,69 @@
+import '~/global.css';
+
+import { DarkTheme, DefaultTheme, Theme, ThemeProvider } from '@react-navigation/native';
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import * as React from 'react';
+import { Platform } from 'react-native';
+import { NAV_THEME } from '~/lib/constants';
+import { useColorScheme } from '~/lib/useColorScheme';
+import { PortalHost } from '@rn-primitives/portal';
+import { ThemeToggle } from '~/components/ThemeToggle';
+import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
+
+const LIGHT_THEME: Theme = {
+  ...DefaultTheme,
+  colors: NAV_THEME.light,
+};
+const DARK_THEME: Theme = {
+  ...DarkTheme,
+  colors: NAV_THEME.dark,
+};
+
+export {
+  // Catch any errors thrown by the Layout component.
+  ErrorBoundary,
+} from 'expo-router';
+
+export default function RootLayout() {
+  const hasMounted = React.useRef(false);
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
+  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    if (hasMounted.current) {
+      return;
+    }
+
+    if (Platform.OS === 'web') {
+      // Adds the background color to the html element to prevent white background on overscroll.
+      document.documentElement.classList.add('bg-background');
+    }
+    setAndroidNavigationBar(colorScheme);
+    setIsColorSchemeLoaded(true);
+    hasMounted.current = true;
+  }, []);
+
+  if (!isColorSchemeLoaded) {
+    return null;
+  }
+
+  return (
+    <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+      <StatusBar style={isDarkColorScheme ? 'light' : 'dark'} />
+      <Stack>
+        <Stack.Screen
+          name='index'
+          options={{
+            title: 'Starter Base',
+            headerRight: () => <ThemeToggle />,
+          }}
+        />
+      </Stack>
+      <PortalHost />
+    </ThemeProvider>
+  );
+}
+
+const useIsomorphicLayoutEffect =
+  Platform.OS === 'web' && typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;

package/__generated/starter-base/app/index.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Animated, { FadeInUp, FadeOutDown, LayoutAnimationConfig } from 'react-native-reanimated';
+import { Info } from '~/lib/icons/Info';
+import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
+import { Button } from '~/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '~/components/ui/card';
+import { Progress } from '~/components/ui/progress';
+import { Text } from '~/components/ui/text';
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip';
+
+const GITHUB_AVATAR_URI =
+  'https://i.pinimg.com/originals/ef/a2/8d/efa28d18a04e7fa40ed49eeb0ab660db.jpg';
+
+export default function Screen() {
+  const [progress, setProgress] = React.useState(78);
+
+  function updateProgressValue() {
+    setProgress(Math.floor(Math.random() * 100));
+  }
+  return (
+    <View className='flex-1 justify-center items-center gap-5 p-6 bg-secondary/30'>
+      <Card className='w-full max-w-sm p-6 rounded-2xl'>
+        <CardHeader className='items-center'>
+          <Avatar alt="Rick Sanchez's Avatar" className='w-24 h-24'>
+            <AvatarImage source={{ uri: GITHUB_AVATAR_URI }} />
+            <AvatarFallback>
+              <Text>RS</Text>
+            </AvatarFallback>
+          </Avatar>
+          <View className='p-3' />
+          <CardTitle className='pb-2 text-center'>Rick Sanchez</CardTitle>
+          <View className='flex-row'>
+            <CardDescription className='text-base font-semibold'>Scientist</CardDescription>
+            <Tooltip delayDuration={150}>
+              <TooltipTrigger className='px-2 pb-0.5 active:opacity-50'>
+                <Info size={14} strokeWidth={2.5} className='w-4 h-4 text-foreground/70' />
+              </TooltipTrigger>
+              <TooltipContent className='py-2 px-4 shadow'>
+                <Text className='native:text-lg'>Freelance</Text>
+              </TooltipContent>
+            </Tooltip>
+          </View>
+        </CardHeader>
+        <CardContent>
+          <View className='flex-row justify-around gap-3'>
+            <View className='items-center'>
+              <Text className='text-sm text-muted-foreground'>Dimension</Text>
+              <Text className='text-xl font-semibold'>C-137</Text>
+            </View>
+            <View className='items-center'>
+              <Text className='text-sm text-muted-foreground'>Age</Text>
+              <Text className='text-xl font-semibold'>70</Text>
+            </View>
+            <View className='items-center'>
+              <Text className='text-sm text-muted-foreground'>Species</Text>
+              <Text className='text-xl font-semibold'>Human</Text>
+            </View>
+          </View>
+        </CardContent>
+        <CardFooter className='flex-col gap-3 pb-0'>
+          <View className='flex-row items-center overflow-hidden'>
+            <Text className='text-sm text-muted-foreground'>Productivity:</Text>
+            <LayoutAnimationConfig skipEntering>
+              <Animated.View
+                key={progress}
+                entering={FadeInUp}
+                exiting={FadeOutDown}
+                className='w-11 items-center'
+              >
+                <Text className='text-sm font-bold text-sky-600'>{progress}%</Text>
+              </Animated.View>
+            </LayoutAnimationConfig>
+          </View>
+          <Progress value={progress} className='h-2' indicatorClassName='bg-sky-600' />
+          <View />
+          <Button
+            variant='outline'
+            className='shadow shadow-foreground/5'
+            onPress={updateProgressValue}
+          >
+            <Text>Update</Text>
+          </Button>
+        </CardFooter>
+      </Card>
+    </View>
+  );
+}

package/__generated/starter-base/app.json

@@ -0,0 +1,40 @@
+{
+  "expo": {
+    "name": "Starter Base",
+    "slug": "starter-base",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

package/__generated/starter-base/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
+  };
+};

package/__generated/starter-base/components/ThemeToggle.tsx

@@ -0,0 +1,38 @@
+import { Pressable, View } from 'react-native';
+import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
+import { MoonStar } from '~/lib/icons/MoonStar';
+import { Sun } from '~/lib/icons/Sun';
+import { useColorScheme } from '~/lib/useColorScheme';
+import { cn } from '~/lib/utils';
+
+export function ThemeToggle() {
+  const { isDarkColorScheme, setColorScheme } = useColorScheme();
+
+  function toggleColorScheme() {
+    const newTheme = isDarkColorScheme ? 'light' : 'dark';
+    setColorScheme(newTheme);
+    setAndroidNavigationBar(newTheme);
+  }
+
+  return (
+    <Pressable
+      onPress={toggleColorScheme}
+      className='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'
+    >
+      {({ pressed }) => (
+        <View
+          className={cn(
+            'flex-1 aspect-square pt-0.5 justify-center items-start web:px-5',
+            pressed && 'opacity-70'
+          )}
+        >
+          {isDarkColorScheme ? (
+            <MoonStar className='text-foreground' size={23} strokeWidth={1.25} />
+          ) : (
+            <Sun className='text-foreground' size={24} strokeWidth={1.25} />
+          )}
+        </View>
+      )}
+    </Pressable>
+  );
+}

package/__generated/starter-base/components/ui/avatar.tsx

@@ -0,0 +1,45 @@
+import * as AvatarPrimitive from '@rn-primitives/avatar';
+import * as React from 'react';
+import { cn } from '~/lib/utils';
+
+const AvatarPrimitiveRoot = AvatarPrimitive.Root;
+const AvatarPrimitiveImage = AvatarPrimitive.Image;
+const AvatarPrimitiveFallback = AvatarPrimitive.Fallback;
+
+const Avatar = React.forwardRef<AvatarPrimitive.RootRef, AvatarPrimitive.RootProps>(
+  ({ className, ...props }, ref) => (
+    <AvatarPrimitiveRoot
+      ref={ref}
+      className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+      {...props}
+    />
+  )
+);
+Avatar.displayName = AvatarPrimitiveRoot.displayName;
+
+const AvatarImage = React.forwardRef<AvatarPrimitive.ImageRef, AvatarPrimitive.ImageProps>(
+  ({ className, ...props }, ref) => (
+    <AvatarPrimitiveImage
+      ref={ref}
+      className={cn('aspect-square h-full w-full', className)}
+      {...props}
+    />
+  )
+);
+AvatarImage.displayName = AvatarPrimitiveImage.displayName;
+
+const AvatarFallback = React.forwardRef<AvatarPrimitive.FallbackRef, AvatarPrimitive.FallbackProps>(
+  ({ className, ...props }, ref) => (
+    <AvatarPrimitiveFallback
+      ref={ref}
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+AvatarFallback.displayName = AvatarPrimitiveFallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };

package/__generated/starter-base/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 '~/components/ui/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 };

package/__generated/starter-base/components/ui/card.tsx

@@ -0,0 +1,57 @@
+import type { TextRef, ViewRef } from '@rn-primitives/types';
+import * as React from 'react';
+import { Text, TextProps, View, ViewProps } from 'react-native';
+import { TextClassContext } from '~/components/ui/text';
+import { cn } from '~/lib/utils';
+
+const Card = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      'rounded-lg border border-border bg-card shadow-sm shadow-foreground/10',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<TextRef, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text
+      role='heading'
+      aria-level={3}
+      ref={ref}
+      className={cn(
+        'text-2xl text-card-foreground font-semibold leading-none tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<TextRef, TextProps>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
+  <TextClassContext.Provider value='text-card-foreground'>
+    <View ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  </TextClassContext.Provider>
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };