@teardown/cli 2.0.69 → 2.0.71

package/package.json

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

package/templates/metro.config.js

@@ -30,7 +30,7 @@ const config = {};
 const teardownConfig = withTeardown(mergeConfig(getDefaultConfig(__dirname), config));
 
 const navigationConfig = withTeardownNavigation(teardownConfig, {
-	routesDir: "./src/routes",
+	routesDir: "./src/_routes",
 	generatedDir: "./.teardown",
 	verbose: false,
 });

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

@@ -71,58 +71,50 @@
  */
 
 import type {
-	CardBodyProps as HeroCardBodyProps,
-	CardDescriptionProps as HeroCardDescriptionProps,
-	CardFooterProps as HeroCardFooterProps,
-	CardHeaderProps as HeroCardHeaderProps,
-	CardProps as HeroCardProps,
-	CardTitleProps as HeroCardTitleProps,
-} from "heroui-native";
-import {
-	Card as HeroCard,
-	CardBody as HeroCardBody,
-	CardDescription as HeroCardDescription,
-	CardFooter as HeroCardFooter,
-	CardHeader as HeroCardHeader,
-	CardTitle as HeroCardTitle,
+	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 } 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 componentc
-const CardFooter = forwardRef<ViewRef, HeroCardFooterProps>((props, ref) => {
-	return <HeroCardFooter ref={ref} {...props} />;
+// Card Footer component
+const CardFooter = forwardRef<ViewRef, CardFooterProps>((props, ref) => {
+	return <HeroCard.Footer ref={ref} {...props} />;
 });
 CardFooter.displayName = "Card.Footer";
 
 // Card Title component
-const CardTitle = forwardRef<TextRef, HeroCardTitleProps>((props, ref) => {
-	return <HeroCardTitle ref={ref} {...props} />;
+const CardTitle = forwardRef<TextRef, CardTitleProps>((props, ref) => {
+	return <HeroCard.Title ref={ref} {...props} />;
 });
 CardTitle.displayName = "Card.Title";
 
 // Card Description component
-const CardDescription = forwardRef<TextRef, HeroCardDescriptionProps>((props, ref) => {
-	return <HeroCardDescription ref={ref} {...props} />;
+const CardDescription = forwardRef<TextRef, CardDescriptionProps>((props, ref) => {
+	return <HeroCard.Description ref={ref} {...props} />;
 });
 CardDescription.displayName = "Card.Description";
 
@@ -135,12 +127,4 @@ export const Card = Object.assign(CardRoot, {
 	Description: CardDescription,
 });
 
-// Re-export types for convenience
-export type {
-	HeroCardProps as CardProps,
-	HeroCardHeaderProps as CardHeaderProps,
-	HeroCardBodyProps as CardBodyProps,
-	HeroCardFooterProps as CardFooterProps,
-	HeroCardTitleProps as CardTitleProps,
-	HeroCardDescriptionProps as CardDescriptionProps,
-};
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, CardTitleProps, CardDescriptionProps };

package/templates/src/navigation/index.ts

@@ -5,5 +5,4 @@
  */
 
 export { useTypedNavigation, useTypedParams, useTypedRoute } from "./hooks";
-export { NavigationProvider } from "./navigation-provider";
 export { Router } from "./router";

package/templates/src/navigation/router.tsx

@@ -1,20 +1,17 @@
 /**
  * Router Component
  *
- * Renders the navigation structure based on the file-based routes.
- * Uses a simple stack navigator with Home as the initial route.
+ * Creates a type-safe router from the generated route tree.
+ * Routes are automatically generated from files in src/_routes/
  */
 
-import React from "react";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { createTeardownRouter } from "@teardown/navigation";
+import { routeTree } from "../../.teardown/routeTree.generated";
+import { generatedLinkingConfig, defaultPrefixes } from "../../.teardown/linking.generated";
 
-// Import screen definitions
-import HomeScreen from "@/routes/home";
-
-// Create navigator
-const Stack = createNativeStackNavigator();
-
-// Theme colors using CSS variable-friendly values
+/**
+ * Theme colors for navigation styling
+ */
 const theme = {
 	background: "hsl(0, 0%, 100%)",
 	foreground: "hsl(224, 71%, 4%)",
@@ -23,32 +20,33 @@ const theme = {
 /**
  * Root Router
  *
- * Stack navigator with Home as the initial route.
+ * Auto-generated from file-based routes in src/_routes/
+ * Add new screens by creating files in the _routes directory.
  */
-export function Router(): React.JSX.Element {
-	return (
-		<Stack.Navigator
-			initialRouteName="home"
-			screenOptions={{
-				headerShown: true,
-				animation: "slide_from_right",
-				contentStyle: {
-					backgroundColor: theme.background,
-				},
-				headerStyle: {
-					backgroundColor: theme.background,
-				},
-				headerTitleStyle: {
-					color: theme.foreground,
-					fontWeight: "600",
-				},
-			}}
-		>
-			<Stack.Screen
-				name="home"
-				component={HomeScreen.component}
-				options={HomeScreen.options}
-			/>
-		</Stack.Navigator>
-	);
-}
+export const Router = createTeardownRouter({
+	routeTree,
+	initialRouteName: "home",
+	linking: {
+		prefixes: defaultPrefixes,
+		config: generatedLinkingConfig,
+	},
+	navigationContainerProps: {
+		theme: {
+			dark: false,
+			colors: {
+				primary: theme.foreground,
+				background: theme.background,
+				card: theme.background,
+				text: theme.foreground,
+				border: "hsl(214, 32%, 91%)",
+				notification: "hsl(0, 84%, 60%)",
+			},
+			fonts: {
+				regular: { fontFamily: "System", fontWeight: "400" },
+				medium: { fontFamily: "System", fontWeight: "500" },
+				bold: { fontFamily: "System", fontWeight: "700" },
+				heavy: { fontFamily: "System", fontWeight: "900" },
+			},
+		},
+	},
+});

package/templates/src/providers/app.provider.tsx

@@ -8,7 +8,6 @@
 import { HeroUINativeProvider } from "heroui-native";
 import type React from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { NavigationProvider } from "@/navigation";
 
 interface AppProvidersProps {
 	children: React.ReactNode;
@@ -17,9 +16,7 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps): React.JSX.Element {
 	return (
 		<GestureHandlerRootView style={{ flex: 1 }}>
-			<HeroUINativeProvider>
-				<NavigationProvider>{children}</NavigationProvider>
-			</HeroUINativeProvider>
+			<HeroUINativeProvider>{children}</HeroUINativeProvider>
 		</GestureHandlerRootView>
 	);
 }

package/templates/src/navigation/navigation-provider.tsx

@@ -1,27 +0,0 @@
-/**
- * Navigation Provider
- *
- * Wraps the app with NavigationContainer and linking configuration.
- */
-
-import type { LinkingOptions } from "@react-navigation/native";
-import { NavigationContainer } from "@react-navigation/native";
-import type React from "react";
-import { defaultPrefixes, generatedLinkingConfig } from "@/.teardown/linking.generated";
-
-interface NavigationProviderProps {
-	children: React.ReactNode;
-}
-
-/**
- * Linking configuration for deep links.
- * Routes are automatically generated by @teardown/navigation-metro.
- */
-const linking: LinkingOptions<object> = {
-	prefixes: defaultPrefixes,
-	config: generatedLinkingConfig,
-};
-
-export function NavigationProvider({ children }: NavigationProviderProps): React.JSX.Element {
-	return <NavigationContainer linking={linking}>{children}</NavigationContainer>;
-}