@teardown/cli 2.0.66 → 2.0.67

package/package.json

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

package/templates/metro.config.js

@@ -11,59 +11,31 @@ const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
  * - 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
  *
+ *
+ * withUniwindConfig() enables:
+ * - Tailwind CSS 4 support for React Native
+ * - Automatic className scanning and compilation
+ * - Hot reloading for style changes
+ *
  * @type {import("metro-config").MetroConfig}
  */
 const config = {};
 
-// First apply Teardown config, then Navigation
 const teardownConfig = withTeardown(mergeConfig(getDefaultConfig(__dirname), config));
 
 const navigationConfig = withTeardownNavigation(teardownConfig, {
 	routesDir: "./src/routes",
 	generatedDir: "./.teardown",
-	prefixes: ["<%= slug %>://"],
 	verbose: false,
 });
 
-/**
- * Wrap resolvers with null-handling before Uniwind.
- * Uniwind doesn't handle null returns from resolvers, so we ensure
- * any null returns are converted to Metro's default resolution.
- */
-const withNullSafeResolver = (inputConfig) => {
-	const existingResolver = inputConfig.resolver?.resolveRequest;
-	if (!existingResolver) return inputConfig;
-
-	return {
-		...inputConfig,
-		resolver: {
-			...inputConfig.resolver,
-			resolveRequest: (context, moduleName, platform) => {
-				const result = existingResolver(context, moduleName, platform);
-				// If resolver returns null, use Metro's internal resolver
-				if (result === null) {
-					return context.resolveRequest(context, moduleName, platform);
-				}
-				return result;
-			},
-		},
-	};
-};
-
-// Apply null-safe wrapper before Uniwind (which expects non-null results)
-const safeConfig = withNullSafeResolver(navigationConfig);
-
-module.exports = withUniwindConfig(safeConfig, {
+module.exports = withUniwindConfig(navigationConfig, {
 	cssEntryFile: "./src/global.css",
 	dtsFile: "./src/uniwind-types.d.ts",
 });

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

@@ -6,25 +6,25 @@
  * @example Basic Usage
  * ```tsx
  * <Accordion>
- *   <AccordionItem key="1" title="Section 1">
+ *   <Accordion.Item key="1" title="Section 1">
  *     <Text>Content for section 1</Text>
- *   </AccordionItem>
- *   <AccordionItem key="2" title="Section 2">
+ *   </Accordion.Item>
+ *   <Accordion.Item key="2" title="Section 2">
  *     <Text>Content for section 2</Text>
- *   </AccordionItem>
+ *   </Accordion.Item>
  * </Accordion>
  * ```
  *
  * @example With Subtitle
  * ```tsx
  * <Accordion>
- *   <AccordionItem
+ *   <Accordion.Item
  *     key="1"
  *     title="Account Settings"
  *     subtitle="Manage your account preferences"
  *   >
  *     <Text>Account settings content</Text>
- *   </AccordionItem>
+ *   </Accordion.Item>
  * </Accordion>
  * ```
  *
@@ -32,14 +32,14 @@
  * ```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.Item key="1" title="Item 1">Content 1</Accordion.Item>
+ *   <Accordion.Item key="2" title="Item 2">Content 2</Accordion.Item>
  * </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.Item key="1" title="Item 1">Content 1</Accordion.Item>
+ *   <Accordion.Item key="2" title="Item 2">Content 2</Accordion.Item>
  * </Accordion>
  * ```
  *
@@ -51,17 +51,17 @@
  *   selectedKeys={selectedKeys}
  *   onSelectionChange={setSelectedKeys}
  * >
- *   <AccordionItem key="1" title="Item 1">Content 1</AccordionItem>
- *   <AccordionItem key="2" title="Item 2">Content 2</AccordionItem>
+ *   <Accordion.Item key="1" title="Item 1">Content 1</Accordion.Item>
+ *   <Accordion.Item key="2" title="Item 2">Content 2</Accordion.Item>
  * </Accordion>
  * ```
  *
  * @example Default Expanded
  * ```tsx
  * <Accordion defaultExpandedKeys={['1']}>
- *   <AccordionItem key="1" title="Expanded by default">
+ *   <Accordion.Item key="1" title="Expanded by default">
  *     This section is expanded initially
- *   </AccordionItem>
+ *   </Accordion.Item>
  * </Accordion>
  * ```
  *
@@ -76,10 +76,10 @@
  * @example Disabled Item
  * ```tsx
  * <Accordion>
- *   <AccordionItem key="1" title="Normal Item">Content</AccordionItem>
- *   <AccordionItem key="2" title="Disabled Item" isDisabled>
+ *   <Accordion.Item key="1" title="Normal Item">Content</Accordion.Item>
+ *   <Accordion.Item key="2" title="Disabled Item" isDisabled>
  *     This item is disabled
- *   </AccordionItem>
+ *   </Accordion.Item>
  * </Accordion>
  * ```
  */
@@ -99,13 +99,15 @@ const AccordionRoot = forwardRef<ViewRef, HeroAccordionProps>((props, ref) => {
 AccordionRoot.displayName = "Accordion";
 
 // Accordion Item component
-const AccordionItemComponent = forwardRef<ViewRef, HeroAccordionItemProps>((props, ref) => {
+const AccordionItem = forwardRef<ViewRef, HeroAccordionItemProps>((props, ref) => {
 	return <HeroAccordionItem ref={ref} {...props} />;
 });
-AccordionItemComponent.displayName = "AccordionItem";
+AccordionItem.displayName = "Accordion.Item";
 
-export const Accordion = AccordionRoot;
-export const AccordionItem = AccordionItemComponent;
+// Compound Accordion component with Object.assign pattern
+export const Accordion = Object.assign(AccordionRoot, {
+	Item: AccordionItem,
+});
 
 // Re-export types for convenience
 export type {

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

@@ -6,36 +6,36 @@
  * @example Basic Usage
  * ```tsx
  * <Card>
- *   <CardBody>
+ *   <Card.Body>
  *     <Text>Card content goes here</Text>
- *   </CardBody>
+ *   </Card.Body>
  * </Card>
  * ```
  *
  * @example With Header
  * ```tsx
  * <Card>
- *   <CardHeader>
+ *   <Card.Header>
  *     <Text>Card Title</Text>
- *   </CardHeader>
- *   <CardBody>
+ *   </Card.Header>
+ *   <Card.Body>
  *     <Text>Card content goes here</Text>
- *   </CardBody>
+ *   </Card.Body>
  * </Card>
  * ```
  *
  * @example Full Card Structure
  * ```tsx
  * <Card>
- *   <CardHeader>
+ *   <Card.Header>
  *     <Text>Card Title</Text>
- *   </CardHeader>
- *   <CardBody>
+ *   </Card.Header>
+ *   <Card.Body>
  *     <Text>Main content area</Text>
- *   </CardBody>
- *   <CardFooter>
+ *   </Card.Body>
+ *   <Card.Footer>
  *     <Button>Action</Button>
- *   </CardFooter>
+ *   </Card.Footer>
  * </Card>
  * ```
  *
@@ -51,18 +51,18 @@
  * @example Pressable Card
  * ```tsx
  * <Card isPressable onPress={() => console.log('Card pressed!')}>
- *   <CardBody>
+ *   <Card.Body>
  *     <Text>Pressable Card</Text>
- *   </CardBody>
+ *   </Card.Body>
  * </Card>
  * ```
  *
  * @example Disabled Card
  * ```tsx
  * <Card isDisabled>
- *   <CardBody>
+ *   <Card.Body>
  *     <Text>Disabled Card</Text>
- *   </CardBody>
+ *   </Card.Body>
  * </Card>
  * ```
  */
@@ -89,27 +89,29 @@ const CardRoot = forwardRef<ViewRef, HeroCardProps>((props, ref) => {
 CardRoot.displayName = "Card";
 
 // Card Header component
-const CardHeaderComponent = forwardRef<ViewRef, HeroCardHeaderProps>((props, ref) => {
+const CardHeader = forwardRef<ViewRef, HeroCardHeaderProps>((props, ref) => {
 	return <HeroCardHeader ref={ref} {...props} />;
 });
-CardHeaderComponent.displayName = "CardHeader";
+CardHeader.displayName = "Card.Header";
 
 // Card Body component
-const CardBodyComponent = forwardRef<ViewRef, HeroCardBodyProps>((props, ref) => {
+const CardBody = forwardRef<ViewRef, HeroCardBodyProps>((props, ref) => {
 	return <HeroCardBody ref={ref} {...props} />;
 });
-CardBodyComponent.displayName = "CardBody";
+CardBody.displayName = "Card.Body";
 
 // Card Footer component
-const CardFooterComponent = forwardRef<ViewRef, HeroCardFooterProps>((props, ref) => {
+const CardFooter = forwardRef<ViewRef, HeroCardFooterProps>((props, ref) => {
 	return <HeroCardFooter ref={ref} {...props} />;
 });
-CardFooterComponent.displayName = "CardFooter";
+CardFooter.displayName = "Card.Footer";
 
-export const Card = CardRoot;
-export const CardHeader = CardHeaderComponent;
-export const CardBody = CardBodyComponent;
-export const CardFooter = CardFooterComponent;
+// Compound Card component with Object.assign pattern
+export const Card = Object.assign(CardRoot, {
+	Header: CardHeader,
+	Body: CardBody,
+	Footer: CardFooter,
+});
 
 // Re-export types for convenience
 export type {

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

@@ -67,39 +67,39 @@
  *
  * @example Checkbox Group
  * ```tsx
- * <CheckboxGroup
+ * <Checkbox.Group
  *   label="Select your hobbies"
  *   defaultValue={['reading']}
  * >
  *   <Checkbox value="reading">Reading</Checkbox>
  *   <Checkbox value="gaming">Gaming</Checkbox>
  *   <Checkbox value="music">Music</Checkbox>
- * </CheckboxGroup>
+ * </Checkbox.Group>
  * ```
  *
  * @example Controlled Group
  * ```tsx
  * const [selected, setSelected] = useState(['reading']);
  *
- * <CheckboxGroup
+ * <Checkbox.Group
  *   label="Interests"
  *   value={selected}
  *   onValueChange={setSelected}
  * >
  *   <Checkbox value="sports">Sports</Checkbox>
  *   <Checkbox value="travel">Travel</Checkbox>
- * </CheckboxGroup>
+ * </Checkbox.Group>
  * ```
  *
  * @example Horizontal Group
  * ```tsx
- * <CheckboxGroup
+ * <Checkbox.Group
  *   label="Options"
  *   orientation="horizontal"
  * >
  *   <Checkbox value="a">Option A</Checkbox>
  *   <Checkbox value="b">Option B</Checkbox>
- * </CheckboxGroup>
+ * </Checkbox.Group>
  * ```
  */
 
@@ -118,13 +118,15 @@ const CheckboxRoot = forwardRef<ViewRef, HeroCheckboxProps>((props, ref) => {
 CheckboxRoot.displayName = "Checkbox";
 
 // Checkbox Group component
-const CheckboxGroupComponent = forwardRef<ViewRef, HeroCheckboxGroupProps>((props, ref) => {
+const CheckboxGroup = forwardRef<ViewRef, HeroCheckboxGroupProps>((props, ref) => {
 	return <HeroCheckboxGroup ref={ref} {...props} />;
 });
-CheckboxGroupComponent.displayName = "CheckboxGroup";
+CheckboxGroup.displayName = "Checkbox.Group";
 
-export const Checkbox = CheckboxRoot;
-export const CheckboxGroup = CheckboxGroupComponent;
+// Compound Checkbox component with Object.assign pattern
+export const Checkbox = Object.assign(CheckboxRoot, {
+	Group: CheckboxGroup,
+});
 
 // Re-export types for convenience
 export type {

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

@@ -10,31 +10,31 @@
  * <Button onPress={() => setOpen(true)}>Open Dialog</Button>
  *
  * <Dialog isOpen={isOpen} onClose={() => setOpen(false)}>
- *   <DialogHeader>
+ *   <Dialog.Header>
  *     <Text>Dialog Title</Text>
- *   </DialogHeader>
- *   <DialogBody>
+ *   </Dialog.Header>
+ *   <Dialog.Body>
  *     <Text>Dialog content goes here</Text>
- *   </DialogBody>
- *   <DialogFooter>
+ *   </Dialog.Body>
+ *   <Dialog.Footer>
  *     <Button onPress={() => setOpen(false)}>Close</Button>
- *   </DialogFooter>
+ *   </Dialog.Footer>
  * </Dialog>
  * ```
  *
  * @example Simple Alert
  * ```tsx
  * <Dialog isOpen={isOpen} onClose={handleClose}>
- *   <DialogHeader>
+ *   <Dialog.Header>
  *     <Text>Alert</Text>
- *   </DialogHeader>
- *   <DialogBody>
+ *   </Dialog.Header>
+ *   <Dialog.Body>
  *     <Text>Are you sure you want to proceed?</Text>
- *   </DialogBody>
- *   <DialogFooter>
+ *   </Dialog.Body>
+ *   <Dialog.Footer>
  *     <Button variant="light" onPress={handleClose}>Cancel</Button>
  *     <Button color="primary" onPress={handleConfirm}>Confirm</Button>
- *   </DialogFooter>
+ *   </Dialog.Footer>
  * </Dialog>
  * ```
  *
@@ -62,21 +62,21 @@
  *   onClose={handleClose}
  *   isDismissable={false}
  * >
- *   <DialogBody>
+ *   <Dialog.Body>
  *     <Text>Click outside won't close this dialog</Text>
- *   </DialogBody>
+ *   </Dialog.Body>
  * </Dialog>
  * ```
  *
  * @example Scrollable Body
  * ```tsx
  * <Dialog scrollBehavior="inside">
- *   <DialogHeader>
+ *   <Dialog.Header>
  *     <Text>Long Content</Text>
- *   </DialogHeader>
- *   <DialogBody>
+ *   </Dialog.Header>
+ *   <Dialog.Body>
  *     <Text>Long content that scrolls...</Text>
- *   </DialogBody>
+ *   </Dialog.Body>
  * </Dialog>
  * ```
  */
@@ -103,27 +103,29 @@ const DialogRoot = forwardRef<ViewRef, HeroDialogProps>((props, ref) => {
 DialogRoot.displayName = "Dialog";
 
 // Dialog Header component
-const DialogHeaderComponent = forwardRef<ViewRef, HeroDialogHeaderProps>((props, ref) => {
+const DialogHeader = forwardRef<ViewRef, HeroDialogHeaderProps>((props, ref) => {
 	return <HeroDialogHeader ref={ref} {...props} />;
 });
-DialogHeaderComponent.displayName = "DialogHeader";
+DialogHeader.displayName = "Dialog.Header";
 
 // Dialog Body component
-const DialogBodyComponent = forwardRef<ViewRef, HeroDialogBodyProps>((props, ref) => {
+const DialogBody = forwardRef<ViewRef, HeroDialogBodyProps>((props, ref) => {
 	return <HeroDialogBody ref={ref} {...props} />;
 });
-DialogBodyComponent.displayName = "DialogBody";
+DialogBody.displayName = "Dialog.Body";
 
 // Dialog Footer component
-const DialogFooterComponent = forwardRef<ViewRef, HeroDialogFooterProps>((props, ref) => {
+const DialogFooter = forwardRef<ViewRef, HeroDialogFooterProps>((props, ref) => {
 	return <HeroDialogFooter ref={ref} {...props} />;
 });
-DialogFooterComponent.displayName = "DialogFooter";
+DialogFooter.displayName = "Dialog.Footer";
 
-export const Dialog = DialogRoot;
-export const DialogHeader = DialogHeaderComponent;
-export const DialogBody = DialogBodyComponent;
-export const DialogFooter = DialogFooterComponent;
+// Compound Dialog component with Object.assign pattern
+export const Dialog = Object.assign(DialogRoot, {
+	Header: DialogHeader,
+	Body: DialogBody,
+	Footer: DialogFooter,
+});
 
 // Re-export types for convenience
 export type {

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

@@ -26,17 +26,17 @@
  * @example In a Card
  * ```tsx
  * <Card>
- *   <CardHeader>
+ *   <Card.Header>
  *     <Text>Title</Text>
- *   </CardHeader>
+ *   </Card.Header>
  *   <Divider />
- *   <CardBody>
+ *   <Card.Body>
  *     <Text>Content</Text>
- *   </CardBody>
+ *   </Card.Body>
  *   <Divider />
- *   <CardFooter>
+ *   <Card.Footer>
  *     <Button>Action</Button>
- *   </CardFooter>
+ *   </Card.Footer>
  * </Card>
  * ```
  *

package/templates/src/components/ui/form-field.tsx

@@ -57,10 +57,10 @@
  *   label="Preferences"
  *   description="Select all that apply"
  * >
- *   <CheckboxGroup>
+ *   <Checkbox.Group>
  *     <Checkbox value="notifications">Email notifications</Checkbox>
  *     <Checkbox value="updates">Product updates</Checkbox>
- *   </CheckboxGroup>
+ *   </Checkbox.Group>
  * </FormField>
  * ```
  *

package/templates/src/components/ui/pressable-feedback.tsx

@@ -17,9 +17,9 @@
  *   pressedOpacity={0.7}
  * >
  *   <Card>
- *     <CardBody>
+ *     <Card.Body>
  *       <Text>Pressable Card</Text>
- *     </CardBody>
+ *     </Card.Body>
  *   </Card>
  * </PressableFeedback>
  * ```