@teardown/cli 2.0.68 → 2.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@teardown/cli",
-	"version": "2.0.68",
+	"version": "2.0.70",
 	"private": false,
 	"type": "module",
 	"main": "./src/index.ts",
@@ -76,7 +76,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.11",
-		"@teardown/tsconfig": "2.0.68",
+		"@teardown/tsconfig": "2.0.70",
 		"@types/bun": "1.3.5",
 		"@types/ejs": "^3.1.5",
 		"typescript": "5.9.3"

package/templates/package.json

@@ -1,6 +1,5 @@
 {
 	"name": "<%= slug %>",
-	"version": "<%= version %>",
 	"private": true,
 	"main": "./src/index.tsx",
 	"scripts": {
@@ -16,6 +15,7 @@
 		"@react-navigation/bottom-tabs": "^7.2.0",
 		"@react-navigation/native": "^7.0.14",
 		"@react-navigation/native-stack": "^7.2.0",
+		"class-variance-authority": "^0.7.1",
 		"@teardown/dev-client": "<%= cliVersion %>",
 		"@teardown/navigation": "<%= cliVersion %>",
 		"heroui-native": "^1.0.0-beta.12",

package/templates/src/app/index.tsx

@@ -10,22 +10,17 @@
 
 import "../global.css";
 
-import React from "react";
-import { View, StatusBar } from "react-native";
+import type React from "react";
+import { StatusBar, View } from "react-native";
 import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
-import { AppProviders } from "@/providers";
 import { Router } from "@/navigation";
+import { AppProviders } from "@/providers";
 
 export function App(): React.JSX.Element {
 	return (
 		<SafeAreaProvider>
 			<AppProviders>
-				<View className="flex-1 bg-background">
-					<StatusBar barStyle="dark-content" backgroundColor="transparent" translucent />
-					<SafeAreaView className="flex-1">
-						<Router />
-					</SafeAreaView>
-				</View>
+				<Router />
 			</AppProviders>
 		</SafeAreaProvider>
 	);

package/templates/src/components/ui/card.tsx

@@ -7,7 +7,8 @@
  * ```tsx
  * <Card>
  *   <Card.Body>
- *     <Text>Card content goes here</Text>
+ *     <Card.Title>Card Title</Card.Title>
+ *     <Card.Description>Card content goes here</Card.Description>
  *   </Card.Body>
  * </Card>
  * ```
@@ -16,10 +17,11 @@
  * ```tsx
  * <Card>
  *   <Card.Header>
- *     <Text>Card Title</Text>
+ *     <Avatar src="https://example.com/avatar.png" />
  *   </Card.Header>
  *   <Card.Body>
- *     <Text>Card content goes here</Text>
+ *     <Card.Title>Card Title</Card.Title>
+ *     <Card.Description>Card content goes here</Card.Description>
  *   </Card.Body>
  * </Card>
  * ```
@@ -28,10 +30,11 @@
  * ```tsx
  * <Card>
  *   <Card.Header>
- *     <Text>Card Title</Text>
+ *     <Icon name="star" />
  *   </Card.Header>
  *   <Card.Body>
- *     <Text>Main content area</Text>
+ *     <Card.Title>Card Title</Card.Title>
+ *     <Card.Description>Main content area</Card.Description>
  *   </Card.Body>
  *   <Card.Footer>
  *     <Button>Action</Button>
@@ -52,7 +55,7 @@
  * ```tsx
  * <Card isPressable onPress={() => console.log('Card pressed!')}>
  *   <Card.Body>
- *     <Text>Pressable Card</Text>
+ *     <Card.Title>Pressable Card</Card.Title>
  *   </Card.Body>
  * </Card>
  * ```
@@ -61,62 +64,67 @@
  * ```tsx
  * <Card isDisabled>
  *   <Card.Body>
- *     <Text>Disabled Card</Text>
+ *     <Card.Title>Disabled Card</Card.Title>
  *   </Card.Body>
  * </Card>
  * ```
  */
 
 import type {
-	CardBodyProps as HeroCardBodyProps,
-	CardFooterProps as HeroCardFooterProps,
-	CardHeaderProps as HeroCardHeaderProps,
-	CardProps as HeroCardProps,
-} from "heroui-native";
-import {
-	Card as HeroCard,
-	CardBody as HeroCardBody,
-	CardFooter as HeroCardFooter,
-	CardHeader as HeroCardHeader,
+	CardBodyProps,
+	CardDescriptionProps,
+	CardFooterProps,
+	CardHeaderProps,
+	CardRootProps as CardProps,
+	CardTitleProps,
 } from "heroui-native";
+import { Card as HeroCard } from "heroui-native";
 import { forwardRef } from "react";
-import type { View as ViewRef } from "react-native";
+import type { Text as TextRef, View as ViewRef } from "react-native";
 
 // Card Root component
-const CardRoot = forwardRef<ViewRef, HeroCardProps>((props, ref) => {
+const CardRoot = forwardRef<ViewRef, CardProps>((props, ref) => {
 	return <HeroCard ref={ref} {...props} />;
 });
 CardRoot.displayName = "Card";
 
 // Card Header component
-const CardHeader = forwardRef<ViewRef, HeroCardHeaderProps>((props, ref) => {
-	return <HeroCardHeader ref={ref} {...props} />;
+const CardHeader = forwardRef<ViewRef, CardHeaderProps>((props, ref) => {
+	return <HeroCard.Header ref={ref} {...props} />;
 });
 CardHeader.displayName = "Card.Header";
 
 // Card Body component
-const CardBody = forwardRef<ViewRef, HeroCardBodyProps>((props, ref) => {
-	return <HeroCardBody ref={ref} {...props} />;
+const CardBody = forwardRef<ViewRef, CardBodyProps>((props, ref) => {
+	return <HeroCard.Body ref={ref} {...props} />;
 });
 CardBody.displayName = "Card.Body";
 
 // Card Footer component
-const CardFooter = forwardRef<ViewRef, HeroCardFooterProps>((props, ref) => {
-	return <HeroCardFooter ref={ref} {...props} />;
+const CardFooter = forwardRef<ViewRef, CardFooterProps>((props, ref) => {
+	return <HeroCard.Footer ref={ref} {...props} />;
 });
 CardFooter.displayName = "Card.Footer";
 
+// Card Title component
+const CardTitle = forwardRef<TextRef, CardTitleProps>((props, ref) => {
+	return <HeroCard.Title ref={ref} {...props} />;
+});
+CardTitle.displayName = "Card.Title";
+
+// Card Description component
+const CardDescription = forwardRef<TextRef, CardDescriptionProps>((props, ref) => {
+	return <HeroCard.Description ref={ref} {...props} />;
+});
+CardDescription.displayName = "Card.Description";
+
 // Compound Card component with Object.assign pattern
 export const Card = Object.assign(CardRoot, {
 	Header: CardHeader,
 	Body: CardBody,
 	Footer: CardFooter,
+	Title: CardTitle,
+	Description: CardDescription,
 });
 
-// Re-export types for convenience
-export type {
-	HeroCardProps as CardProps,
-	HeroCardHeaderProps as CardHeaderProps,
-	HeroCardBodyProps as CardBodyProps,
-	HeroCardFooterProps as CardFooterProps,
-};
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, CardTitleProps, CardDescriptionProps };

package/templates/src/components/ui/text.tsx

@@ -0,0 +1,117 @@
+/**
+ * Text Component
+ *
+ * A styled text component with variants for typography, color, and other text styles.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Text>Hello World</Text>
+ * ```
+ *
+ * @example Variants
+ * ```tsx
+ * <Text variant="body">Body text</Text>
+ * <Text variant="header">Header text</Text>
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <Text color="primary">Primary text</Text>
+ * <Text color="secondary">Secondary text</Text>
+ * <Text color="muted">Muted text</Text>
+ * <Text color="tertiary">Tertiary text</Text>
+ * <Text color="quaternary">Quaternary text</Text>
+ * ```
+ *
+ * @example Inverted (for dark backgrounds)
+ * ```tsx
+ * <Text invert>Inverted text</Text>
+ * ```
+ *
+ * @example Combining Props
+ * ```tsx
+ * <Text variant="header" color="secondary">
+ *   Secondary Header
+ * </Text>
+ * ```
+ */
+
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import Animated from "react-native-reanimated";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merge class names with Tailwind CSS class conflict resolution
+ */
+function cn(...inputs: (string | undefined | null | false)[]): string {
+	return twMerge(inputs.filter(Boolean).join(" "));
+}
+
+const textVariants = cva("text-foreground font-sans text-base", {
+	variants: {
+		variant: {
+			body: "",
+			header: "font-semibold text-lg text-foreground",
+		},
+		color: {
+			primary: "text-foreground",
+			secondary: "text-secondary-foreground/90",
+			muted: "text-muted",
+			tertiary: "text-muted-foreground/70",
+			quaternary: "text-muted-foreground/50",
+		},
+		invert: {
+			true: "text-background dark:text-background",
+			false: "",
+		},
+	},
+	defaultVariants: {
+		variant: "body",
+		color: "primary",
+		invert: false,
+	},
+	compoundVariants: [],
+});
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+export type TextVariant = VariantProps<typeof textVariants>["variant"];
+
+/** Props for Text component */
+export type TextProps = React.ComponentProps<typeof Animated.Text> &
+	VariantProps<typeof textVariants> & {
+		/** Text variant */
+		variant?: TextVariant;
+	};
+
+const Text = (props: TextProps) => {
+	const { className, variant, color, invert, ...otherProps } = props;
+	const textClassName = React.useContext(TextClassContext);
+
+	const classNames = React.useMemo(() => {
+		return cn(
+			textVariants({
+				variant: variant,
+				color: color,
+				invert: invert,
+			}),
+			textClassName,
+			className,
+		);
+	}, [variant, color, invert, textClassName, className]);
+
+	return (
+		<TextClassContext.Provider value={classNames}>
+			<Animated.Text
+				{...otherProps}
+				className={classNames}
+				allowFontScaling={false}
+			/>
+		</TextClassContext.Provider>
+	);
+};
+
+Text.displayName = "Text";
+
+export { TextClassContext, Text, textVariants };

package/templates/src/routes/home.tsx

@@ -31,10 +31,8 @@ function HomeScreen(): React.JSX.Element {
 
 			{/* Quick Actions */}
 			<Card>
-				<Card.Header>
-					<Text className="text-lg font-semibold text-foreground">Quick Actions</Text>
-				</Card.Header>
 				<Card.Body className="gap-3">
+					<Card.Title>Quick Actions</Card.Title>
 					<Button onPress={() => console.log("Primary action")} fullWidth>
 						Get Started
 					</Button>
@@ -67,13 +65,13 @@ function HomeScreen(): React.JSX.Element {
 			{/* Getting Started */}
 			<Card className="bg-primary/5 border-primary/20">
 				<Card.Body className="py-4">
-					<Text className="text-base font-semibold text-foreground">Getting Started</Text>
-					<Text className="text-sm text-muted-foreground mt-2">
+					<Card.Title>Getting Started</Card.Title>
+					<Card.Description>
 						1. Explore the components in src/components/ui/{"\n"}
 						2. Add new routes in src/routes/{"\n"}
 						3. Customize the theme in global.css{"\n"}
 						4. Build your app!
-					</Text>
+					</Card.Description>
 				</Card.Body>
 			</Card>
 		</ScrollView>
@@ -96,8 +94,8 @@ function FeatureCard({
 					<Text className="text-2xl">{icon}</Text>
 				</View>
 				<View className="flex-1">
-					<Text className="text-base font-medium text-foreground">{title}</Text>
-					<Text className="text-sm text-muted-foreground">{description}</Text>
+					<Card.Title>{title}</Card.Title>
+					<Card.Description>{description}</Card.Description>
 				</View>
 			</Card.Body>
 		</Card>

package/templates/tsconfig.json

@@ -4,7 +4,8 @@
 		"jsx": "react-native",
 		"strict": true,
 		"paths": {
-			"@/*": ["./src/*"]
+			"@/*": ["./src/*"],
+			"@/.teardown/*": ["./.teardown/*"]
 		}
 	},
 	"include": ["src/**/*", ".teardown/**/*"],