@teardown/cli 1.2.38 → 2.0.41

package/templates/metro.config.js

@@ -0,0 +1,41 @@
+const { withTeardown } = require("@teardown/metro-config");
+const { withUniwindConfig } = require("uniwind/metro");
+const { withTeardownNavigation } = require("@teardown/navigation-metro");
+const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+
+/**
+ * Metro configuration with Teardown, Uniwind, and Navigation
+ *
+ * withTeardown() automatically handles:
+ * - Rust-powered transforms via Facetpack (36x faster builds)
+ * - Monorepo/workspace detection and watch folder configuration
+ * - Bun-specific handling (.bun directory blocking)
+ *
+ * withUniwindConfig() enables:
+ * - Tailwind CSS 4 support for React Native
+ * - Automatic className scanning and compilation
+ * - Hot reloading for style changes
+ *
+ * withTeardownNavigation() automatically handles:
+ * - Type-safe route generation from file-based routes
+ * - Deep linking configuration generation
+ * - Hot-reload support via file watching in development
+ *
+ * @type {import("metro-config").MetroConfig}
+ */
+const config = {};
+
+// First apply Teardown config, then Navigation, then Uniwind (outermost)
+const teardownConfig = withTeardown(mergeConfig(getDefaultConfig(__dirname), config));
+
+const navigationConfig = withTeardownNavigation(teardownConfig, {
+	routesDir: "./src/routes",
+	generatedDir: "./.teardown",
+	prefixes: ["<%= slug %>://"],
+	verbose: false,
+});
+
+module.exports = withUniwindConfig(navigationConfig, {
+	cssEntryFile: "./src/global.css",
+	dtsFile: "./src/uniwind-types.d.ts",
+});

package/templates/package.json

@@ -0,0 +1,57 @@
+{
+	"name": "<%= slug %>",
+	"version": "<%= version %>",
+	"private": true,
+	"scripts": {
+		"start": "teardown start",
+		"ios": "teardown run ios",
+		"android": "teardown run android",
+		"lint": "eslint .",
+		"prebuild": "teardown prebuild",
+		"prebuild:clean": "teardown prebuild --clean"
+	},
+	"dependencies": {
+		"@react-navigation/bottom-tabs": "^7.2.0",
+		"@react-navigation/native": "^7.0.14",
+		"@react-navigation/native-stack": "^7.2.0",
+		"@teardown/dev-client": "^0.0.1",
+		"@teardown/navigation": "^0.1.0",
+		"heroui-native": "^1.0.0-beta.12",
+		"react": "18.3.1",
+		"react-native": "0.78.2",
+		"react-native-mmkv": "^3.2.0",
+		"react-native-reanimated": "^3.16.0",
+		"react-native-safe-area-context": "^4.14.0",
+		"react-native-screens": "^4.4.0",
+		"react-native-svg": "^15.8.0",
+		"uniwind": "^1.2.0",
+		"tailwindcss": "^4.0.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.26.0",
+		"@babel/preset-env": "^7.26.0",
+		"@babel/runtime": "^7.26.0",
+		"@ecrindigital/facetpack": "^0.2.0",
+		"@react-native-community/cli": "15.0.1",
+		"@react-native-community/cli-platform-android": "15.0.1",
+		"@react-native-community/cli-platform-ios": "15.0.1",
+		"@react-native/babel-preset": "0.78.2",
+		"@react-native/eslint-config": "0.78.2",
+		"@react-native/metro-config": "0.78.2",
+		"@react-native/typescript-config": "0.78.2",
+		"@teardown/cli": "<%= cliVersion %>",
+		"@teardown/metro-config": "^0.1.0",
+		"@teardown/navigation-metro": "^0.1.0",
+		"@types/react": "^18.3.18",
+		"@types/react-test-renderer": "^18.3.1",
+		"babel-plugin-module-resolver": "^5.0.2",
+		"eslint": "^8.57.0",
+		"jest": "^29.7.0",
+		"prettier": "3.4.2",
+		"react-test-renderer": "18.3.1",
+		"typescript": "~5.7.3"
+	},
+	"engines": {
+		"node": ">=18"
+	}
+}

package/templates/react-native.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	project: {
+		ios: {
+			automaticPodsInstallation: true,
+		},
+		android: {},
+	},
+};

package/templates/src/app/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * Root App Component
+ *
+ * This is the main application component that wraps all providers
+ * and renders the navigation structure.
+ *
+ * IMPORTANT: global.css is imported here (not in index.ts) to enable
+ * hot reloading for Tailwind CSS changes.
+ */
+
+import "../global.css";
+
+import React from "react";
+import { View, StatusBar } from "react-native";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { AppProviders } from "@/providers";
+import { Router } from "@/navigation";
+
+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>
+			</AppProviders>
+		</SafeAreaProvider>
+	);
+}
+
+export default App;

package/templates/src/assets/fonts/.gitkeep

@@ -0,0 +1 @@
+# Add your custom fonts here

package/templates/src/assets/images/.gitkeep

@@ -0,0 +1 @@
+# Add your image assets here

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

@@ -0,0 +1,114 @@
+/**
+ * Accordion Component
+ *
+ * A collapsible component for showing/hiding content sections.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem key="1" title="Section 1">
+ *     <Text>Content for section 1</Text>
+ *   </AccordionItem>
+ *   <AccordionItem key="2" title="Section 2">
+ *     <Text>Content for section 2</Text>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @example With Subtitle
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem
+ *     key="1"
+ *     title="Account Settings"
+ *     subtitle="Manage your account preferences"
+ *   >
+ *     <Text>Account settings content</Text>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @example Selection Modes
+ * ```tsx
+ * // Single selection (default)
+ * <Accordion selectionMode="single">
+ *   <AccordionItem key="1" title="Item 1">Content 1</AccordionItem>
+ *   <AccordionItem key="2" title="Item 2">Content 2</AccordionItem>
+ * </Accordion>
+ *
+ * // Multiple selection
+ * <Accordion selectionMode="multiple">
+ *   <AccordionItem key="1" title="Item 1">Content 1</AccordionItem>
+ *   <AccordionItem key="2" title="Item 2">Content 2</AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [selectedKeys, setSelectedKeys] = useState(new Set(['1']));
+ *
+ * <Accordion
+ *   selectedKeys={selectedKeys}
+ *   onSelectionChange={setSelectedKeys}
+ * >
+ *   <AccordionItem key="1" title="Item 1">Content 1</AccordionItem>
+ *   <AccordionItem key="2" title="Item 2">Content 2</AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @example Default Expanded
+ * ```tsx
+ * <Accordion defaultExpandedKeys={['1']}>
+ *   <AccordionItem key="1" title="Expanded by default">
+ *     This section is expanded initially
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @example Variants
+ * ```tsx
+ * <Accordion variant="light">Light variant</Accordion>
+ * <Accordion variant="bordered">Bordered variant</Accordion>
+ * <Accordion variant="shadow">Shadow variant</Accordion>
+ * <Accordion variant="splitted">Splitted variant</Accordion>
+ * ```
+ *
+ * @example Disabled Item
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem key="1" title="Normal Item">Content</AccordionItem>
+ *   <AccordionItem key="2" title="Disabled Item" isDisabled>
+ *     This item is disabled
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+
+import type {
+	AccordionItemProps as HeroAccordionItemProps,
+	AccordionProps as HeroAccordionProps,
+} from "heroui-native";
+import { Accordion as HeroAccordion, AccordionItem as HeroAccordionItem } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+// Accordion Root component
+const AccordionRoot = forwardRef<ViewRef, HeroAccordionProps>((props, ref) => {
+	return <HeroAccordion ref={ref} {...props} />;
+});
+AccordionRoot.displayName = "Accordion";
+
+// Accordion Item component
+const AccordionItemComponent = forwardRef<ViewRef, HeroAccordionItemProps>((props, ref) => {
+	return <HeroAccordionItem ref={ref} {...props} />;
+});
+AccordionItemComponent.displayName = "AccordionItem";
+
+export const Accordion = AccordionRoot;
+export const AccordionItem = AccordionItemComponent;
+
+// Re-export types for convenience
+export type {
+	HeroAccordionProps as AccordionProps,
+	HeroAccordionItemProps as AccordionItemProps,
+};

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

@@ -0,0 +1,75 @@
+/**
+ * Avatar Component
+ *
+ * A circular component for displaying user profile images or initials.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Avatar src="https://example.com/avatar.jpg" />
+ * ```
+ *
+ * @example With Fallback
+ * ```tsx
+ * <Avatar
+ *   src="https://example.com/avatar.jpg"
+ *   fallback="JD"
+ * />
+ * ```
+ *
+ * @example With Name (auto-generates initials)
+ * ```tsx
+ * <Avatar name="John Doe" />
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <Avatar size="sm" src="..." />
+ * <Avatar size="md" src="..." />
+ * <Avatar size="lg" src="..." />
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <Avatar color="default" name="Default" />
+ * <Avatar color="primary" name="Primary" />
+ * <Avatar color="secondary" name="Secondary" />
+ * <Avatar color="success" name="Success" />
+ * <Avatar color="warning" name="Warning" />
+ * <Avatar color="danger" name="Danger" />
+ * ```
+ *
+ * @example Bordered
+ * ```tsx
+ * <Avatar isBordered src="..." />
+ * <Avatar isBordered color="primary" src="..." />
+ * ```
+ *
+ * @example Disabled
+ * ```tsx
+ * <Avatar isDisabled src="..." />
+ * ```
+ *
+ * @example Radius
+ * ```tsx
+ * <Avatar radius="none" src="..." />
+ * <Avatar radius="sm" src="..." />
+ * <Avatar radius="md" src="..." />
+ * <Avatar radius="lg" src="..." />
+ * <Avatar radius="full" src="..." />
+ * ```
+ */
+
+import type { AvatarProps as HeroAvatarProps } from "heroui-native";
+import { Avatar as HeroAvatar } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const AvatarRoot = forwardRef<ViewRef, HeroAvatarProps>((props, ref) => {
+	return <HeroAvatar ref={ref} {...props} />;
+});
+AvatarRoot.displayName = "Avatar";
+
+export const Avatar = AvatarRoot;
+
+// Re-export types for convenience
+export type { HeroAvatarProps as AvatarProps };

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

@@ -0,0 +1,93 @@
+/**
+ * Button Component
+ *
+ * A versatile button component with multiple variants, sizes, and states.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Button onPress={() => console.log('Pressed!')}>
+ *   Click Me
+ * </Button>
+ * ```
+ *
+ * @example Variants
+ * ```tsx
+ * <Button variant="solid">Solid</Button>
+ * <Button variant="bordered">Bordered</Button>
+ * <Button variant="light">Light</Button>
+ * <Button variant="flat">Flat</Button>
+ * <Button variant="faded">Faded</Button>
+ * <Button variant="shadow">Shadow</Button>
+ * <Button variant="ghost">Ghost</Button>
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <Button color="default">Default</Button>
+ * <Button color="primary">Primary</Button>
+ * <Button color="secondary">Secondary</Button>
+ * <Button color="success">Success</Button>
+ * <Button color="warning">Warning</Button>
+ * <Button color="danger">Danger</Button>
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <Button size="sm">Small</Button>
+ * <Button size="md">Medium</Button>
+ * <Button size="lg">Large</Button>
+ * ```
+ *
+ * @example Loading State
+ * ```tsx
+ * <Button isLoading>
+ *   Loading...
+ * </Button>
+ * ```
+ *
+ * @example Disabled State
+ * ```tsx
+ * <Button isDisabled>
+ *   Disabled
+ * </Button>
+ * ```
+ *
+ * @example With Icon
+ * ```tsx
+ * <Button startContent={<Icon name="star" />}>
+ *   Favorite
+ * </Button>
+ * <Button endContent={<Icon name="arrow-right" />}>
+ *   Next
+ * </Button>
+ * ```
+ *
+ * @example Icon Only
+ * ```tsx
+ * <Button isIconOnly>
+ *   <Icon name="settings" />
+ * </Button>
+ * ```
+ *
+ * @example Full Width
+ * ```tsx
+ * <Button fullWidth>
+ *   Full Width Button
+ * </Button>
+ * ```
+ */
+
+import type { ButtonProps as HeroButtonProps } from "heroui-native";
+import { Button as HeroButton } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const ButtonRoot = forwardRef<ViewRef, HeroButtonProps>((props, ref) => {
+	return <HeroButton ref={ref} {...props} />;
+});
+ButtonRoot.displayName = "Button";
+
+export const Button = ButtonRoot;
+
+// Re-export types for convenience
+export type { HeroButtonProps as ButtonProps };

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

@@ -0,0 +1,120 @@
+/**
+ * Card Component
+ *
+ * A container component for grouping related content with optional header, body, and footer.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Card>
+ *   <CardBody>
+ *     <Text>Card content goes here</Text>
+ *   </CardBody>
+ * </Card>
+ * ```
+ *
+ * @example With Header
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <Text>Card Title</Text>
+ *   </CardHeader>
+ *   <CardBody>
+ *     <Text>Card content goes here</Text>
+ *   </CardBody>
+ * </Card>
+ * ```
+ *
+ * @example Full Card Structure
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <Text>Card Title</Text>
+ *   </CardHeader>
+ *   <CardBody>
+ *     <Text>Main content area</Text>
+ *   </CardBody>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ *
+ * @example Variants
+ * ```tsx
+ * <Card variant="solid">Solid Card</Card>
+ * <Card variant="bordered">Bordered Card</Card>
+ * <Card variant="flat">Flat Card</Card>
+ * <Card variant="faded">Faded Card</Card>
+ * <Card variant="shadow">Shadow Card</Card>
+ * ```
+ *
+ * @example Pressable Card
+ * ```tsx
+ * <Card isPressable onPress={() => console.log('Card pressed!')}>
+ *   <CardBody>
+ *     <Text>Pressable Card</Text>
+ *   </CardBody>
+ * </Card>
+ * ```
+ *
+ * @example Disabled Card
+ * ```tsx
+ * <Card isDisabled>
+ *   <CardBody>
+ *     <Text>Disabled Card</Text>
+ *   </CardBody>
+ * </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,
+} from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+// Card Root component
+const CardRoot = forwardRef<ViewRef, HeroCardProps>((props, ref) => {
+	return <HeroCard ref={ref} {...props} />;
+});
+CardRoot.displayName = "Card";
+
+// Card Header component
+const CardHeaderComponent = forwardRef<ViewRef, HeroCardHeaderProps>((props, ref) => {
+	return <HeroCardHeader ref={ref} {...props} />;
+});
+CardHeaderComponent.displayName = "CardHeader";
+
+// Card Body component
+const CardBodyComponent = forwardRef<ViewRef, HeroCardBodyProps>((props, ref) => {
+	return <HeroCardBody ref={ref} {...props} />;
+});
+CardBodyComponent.displayName = "CardBody";
+
+// Card Footer component
+const CardFooterComponent = forwardRef<ViewRef, HeroCardFooterProps>((props, ref) => {
+	return <HeroCardFooter ref={ref} {...props} />;
+});
+CardFooterComponent.displayName = "CardFooter";
+
+export const Card = CardRoot;
+export const CardHeader = CardHeaderComponent;
+export const CardBody = CardBodyComponent;
+export const CardFooter = CardFooterComponent;
+
+// Re-export types for convenience
+export type {
+	HeroCardProps as CardProps,
+	HeroCardHeaderProps as CardHeaderProps,
+	HeroCardBodyProps as CardBodyProps,
+	HeroCardFooterProps as CardFooterProps,
+};

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

@@ -0,0 +1,133 @@
+/**
+ * Checkbox Component
+ *
+ * A selectable checkbox component with optional grouping support.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Checkbox>Accept terms and conditions</Checkbox>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [isSelected, setSelected] = useState(false);
+ *
+ * <Checkbox
+ *   isSelected={isSelected}
+ *   onValueChange={setSelected}
+ * >
+ *   Remember me
+ * </Checkbox>
+ * ```
+ *
+ * @example Default Selected
+ * ```tsx
+ * <Checkbox defaultSelected>
+ *   Newsletter subscription
+ * </Checkbox>
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <Checkbox color="default">Default</Checkbox>
+ * <Checkbox color="primary">Primary</Checkbox>
+ * <Checkbox color="secondary">Secondary</Checkbox>
+ * <Checkbox color="success">Success</Checkbox>
+ * <Checkbox color="warning">Warning</Checkbox>
+ * <Checkbox color="danger">Danger</Checkbox>
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <Checkbox size="sm">Small</Checkbox>
+ * <Checkbox size="md">Medium</Checkbox>
+ * <Checkbox size="lg">Large</Checkbox>
+ * ```
+ *
+ * @example Disabled State
+ * ```tsx
+ * <Checkbox isDisabled>
+ *   Disabled checkbox
+ * </Checkbox>
+ * ```
+ *
+ * @example Readonly State
+ * ```tsx
+ * <Checkbox isReadOnly defaultSelected>
+ *   Read-only checkbox
+ * </Checkbox>
+ * ```
+ *
+ * @example Invalid State
+ * ```tsx
+ * <Checkbox isInvalid>
+ *   Invalid checkbox
+ * </Checkbox>
+ * ```
+ *
+ * @example Checkbox Group
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Select your hobbies"
+ *   defaultValue={['reading']}
+ * >
+ *   <Checkbox value="reading">Reading</Checkbox>
+ *   <Checkbox value="gaming">Gaming</Checkbox>
+ *   <Checkbox value="music">Music</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ *
+ * @example Controlled Group
+ * ```tsx
+ * const [selected, setSelected] = useState(['reading']);
+ *
+ * <CheckboxGroup
+ *   label="Interests"
+ *   value={selected}
+ *   onValueChange={setSelected}
+ * >
+ *   <Checkbox value="sports">Sports</Checkbox>
+ *   <Checkbox value="travel">Travel</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ *
+ * @example Horizontal Group
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Options"
+ *   orientation="horizontal"
+ * >
+ *   <Checkbox value="a">Option A</Checkbox>
+ *   <Checkbox value="b">Option B</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
+
+import type {
+	CheckboxGroupProps as HeroCheckboxGroupProps,
+	CheckboxProps as HeroCheckboxProps,
+} from "heroui-native";
+import { Checkbox as HeroCheckbox, CheckboxGroup as HeroCheckboxGroup } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+// Checkbox component
+const CheckboxRoot = forwardRef<ViewRef, HeroCheckboxProps>((props, ref) => {
+	return <HeroCheckbox ref={ref} {...props} />;
+});
+CheckboxRoot.displayName = "Checkbox";
+
+// Checkbox Group component
+const CheckboxGroupComponent = forwardRef<ViewRef, HeroCheckboxGroupProps>((props, ref) => {
+	return <HeroCheckboxGroup ref={ref} {...props} />;
+});
+CheckboxGroupComponent.displayName = "CheckboxGroup";
+
+export const Checkbox = CheckboxRoot;
+export const CheckboxGroup = CheckboxGroupComponent;
+
+// Re-export types for convenience
+export type {
+	HeroCheckboxProps as CheckboxProps,
+	HeroCheckboxGroupProps as CheckboxGroupProps,
+};