@teardown/cli 2.0.66 → 2.0.68

package/templates/src/components/ui/radio-group.tsx

@@ -6,9 +6,9 @@
  * @example Basic Usage
  * ```tsx
  * <RadioGroup label="Select an option">
- *   <Radio value="option1">Option 1</Radio>
- *   <Radio value="option2">Option 2</Radio>
- *   <Radio value="option3">Option 3</Radio>
+ *   <RadioGroup.Radio value="option1">Option 1</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="option2">Option 2</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="option3">Option 3</RadioGroup.Radio>
  * </RadioGroup>
  * ```
  *
@@ -21,8 +21,8 @@
  *   value={selected}
  *   onValueChange={setSelected}
  * >
- *   <Radio value="option1">Option 1</Radio>
- *   <Radio value="option2">Option 2</Radio>
+ *   <RadioGroup.Radio value="option1">Option 1</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="option2">Option 2</RadioGroup.Radio>
  * </RadioGroup>
  * ```
  *
@@ -32,35 +32,35 @@
  *   label="Shipping Method"
  *   defaultValue="standard"
  * >
- *   <Radio value="standard">Standard Shipping</Radio>
- *   <Radio value="express">Express Shipping</Radio>
- *   <Radio value="overnight">Overnight Shipping</Radio>
+ *   <RadioGroup.Radio value="standard">Standard Shipping</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="express">Express Shipping</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="overnight">Overnight Shipping</RadioGroup.Radio>
  * </RadioGroup>
  * ```
  *
  * @example Colors
  * ```tsx
  * <RadioGroup color="primary">
- *   <Radio value="a">Primary</Radio>
+ *   <RadioGroup.Radio value="a">Primary</RadioGroup.Radio>
  * </RadioGroup>
  * <RadioGroup color="secondary">
- *   <Radio value="a">Secondary</Radio>
+ *   <RadioGroup.Radio value="a">Secondary</RadioGroup.Radio>
  * </RadioGroup>
  * <RadioGroup color="success">
- *   <Radio value="a">Success</Radio>
+ *   <RadioGroup.Radio value="a">Success</RadioGroup.Radio>
  * </RadioGroup>
  * ```
  *
  * @example Sizes
  * ```tsx
  * <RadioGroup size="sm">
- *   <Radio value="a">Small</Radio>
+ *   <RadioGroup.Radio value="a">Small</RadioGroup.Radio>
  * </RadioGroup>
  * <RadioGroup size="md">
- *   <Radio value="a">Medium</Radio>
+ *   <RadioGroup.Radio value="a">Medium</RadioGroup.Radio>
  * </RadioGroup>
  * <RadioGroup size="lg">
- *   <Radio value="a">Large</Radio>
+ *   <RadioGroup.Radio value="a">Large</RadioGroup.Radio>
  * </RadioGroup>
  * ```
  *
@@ -70,10 +70,10 @@
  *   label="Select Size"
  *   orientation="horizontal"
  * >
- *   <Radio value="s">S</Radio>
- *   <Radio value="m">M</Radio>
- *   <Radio value="l">L</Radio>
- *   <Radio value="xl">XL</Radio>
+ *   <RadioGroup.Radio value="s">S</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="m">M</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="l">L</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="xl">XL</RadioGroup.Radio>
  * </RadioGroup>
  * ```
  *
@@ -83,29 +83,29 @@
  *   label="Plan"
  *   description="Choose your subscription plan"
  * >
- *   <Radio value="free" description="Limited features">
+ *   <RadioGroup.Radio value="free" description="Limited features">
  *     Free
- *   </Radio>
- *   <Radio value="pro" description="All features included">
+ *   </RadioGroup.Radio>
+ *   <RadioGroup.Radio value="pro" description="All features included">
  *     Pro
- *   </Radio>
+ *   </RadioGroup.Radio>
  * </RadioGroup>
  * ```
  *
  * @example Disabled
  * ```tsx
  * <RadioGroup label="Options" isDisabled>
- *   <Radio value="a">Option A</Radio>
- *   <Radio value="b">Option B</Radio>
+ *   <RadioGroup.Radio value="a">Option A</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="b">Option B</RadioGroup.Radio>
  * </RadioGroup>
  * ```
  *
  * @example Individual Disabled Radio
  * ```tsx
  * <RadioGroup label="Options">
- *   <Radio value="a">Option A</Radio>
- *   <Radio value="b" isDisabled>Option B (Unavailable)</Radio>
- *   <Radio value="c">Option C</Radio>
+ *   <RadioGroup.Radio value="a">Option A</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="b" isDisabled>Option B (Unavailable)</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="c">Option C</RadioGroup.Radio>
  * </RadioGroup>
  * ```
  *
@@ -117,8 +117,8 @@
  *   isInvalid={!hasSelection}
  *   errorMessage="Please select an option"
  * >
- *   <Radio value="a">Option A</Radio>
- *   <Radio value="b">Option B</Radio>
+ *   <RadioGroup.Radio value="a">Option A</RadioGroup.Radio>
+ *   <RadioGroup.Radio value="b">Option B</RadioGroup.Radio>
  * </RadioGroup>
  * ```
  */
@@ -132,19 +132,21 @@ import { forwardRef } from "react";
 import type { View as ViewRef } from "react-native";
 
 // Radio component
-const RadioRoot = forwardRef<ViewRef, HeroRadioProps>((props, ref) => {
+const Radio = forwardRef<ViewRef, HeroRadioProps>((props, ref) => {
 	return <HeroRadio ref={ref} {...props} />;
 });
-RadioRoot.displayName = "Radio";
+Radio.displayName = "RadioGroup.Radio";
 
 // Radio Group component
-const RadioGroupComponent = forwardRef<ViewRef, HeroRadioGroupProps>((props, ref) => {
+const RadioGroupRoot = forwardRef<ViewRef, HeroRadioGroupProps>((props, ref) => {
 	return <HeroRadioGroup ref={ref} {...props} />;
 });
-RadioGroupComponent.displayName = "RadioGroup";
+RadioGroupRoot.displayName = "RadioGroup";
 
-export const Radio = RadioRoot;
-export const RadioGroup = RadioGroupComponent;
+// Compound RadioGroup component with Object.assign pattern
+export const RadioGroup = Object.assign(RadioGroupRoot, {
+	Radio: Radio,
+});
 
 // Re-export types for convenience
 export type {

package/templates/src/components/ui/scroll-shadow.tsx

@@ -51,15 +51,15 @@
  * @example In a Card
  * ```tsx
  * <Card>
- *   <CardHeader>
+ *   <Card.Header>
  *     <Text>Long List</Text>
- *   </CardHeader>
+ *   </Card.Header>
  *   <ScrollShadow style={{ maxHeight: 300 }}>
- *     <CardBody>
+ *     <Card.Body>
  *       {items.map(item => (
  *         <Text key={item.id}>{item.title}</Text>
  *       ))}
- *     </CardBody>
+ *     </Card.Body>
  *   </ScrollShadow>
  * </Card>
  * ```

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

@@ -6,9 +6,9 @@
  * @example Basic Usage
  * ```tsx
  * <Select label="Country">
- *   <SelectItem key="us">United States</SelectItem>
- *   <SelectItem key="uk">United Kingdom</SelectItem>
- *   <SelectItem key="ca">Canada</SelectItem>
+ *   <Select.Item key="us">United States</Select.Item>
+ *   <Select.Item key="uk">United Kingdom</Select.Item>
+ *   <Select.Item key="ca">Canada</Select.Item>
  * </Select>
  * ```
  *
@@ -21,8 +21,8 @@
  *   selectedKeys={value}
  *   onSelectionChange={setValue}
  * >
- *   <SelectItem key="us">United States</SelectItem>
- *   <SelectItem key="uk">United Kingdom</SelectItem>
+ *   <Select.Item key="us">United States</Select.Item>
+ *   <Select.Item key="uk">United Kingdom</Select.Item>
  * </Select>
  * ```
  *
@@ -32,9 +32,9 @@
  *   label="Status"
  *   placeholder="Select a status"
  * >
- *   <SelectItem key="active">Active</SelectItem>
- *   <SelectItem key="inactive">Inactive</SelectItem>
- *   <SelectItem key="pending">Pending</SelectItem>
+ *   <Select.Item key="active">Active</Select.Item>
+ *   <Select.Item key="inactive">Inactive</Select.Item>
+ *   <Select.Item key="pending">Pending</Select.Item>
  * </Select>
  * ```
  *
@@ -44,12 +44,12 @@
  *   label="Plan"
  *   description="Choose your subscription plan"
  * >
- *   <SelectItem key="free" description="Basic features">
+ *   <Select.Item key="free" description="Basic features">
  *     Free
- *   </SelectItem>
- *   <SelectItem key="pro" description="All features">
+ *   </Select.Item>
+ *   <Select.Item key="pro" description="All features">
  *     Pro
- *   </SelectItem>
+ *   </Select.Item>
  * </Select>
  * ```
  *
@@ -59,8 +59,8 @@
  *   label="Category"
  *   isRequired
  * >
- *   <SelectItem key="tech">Technology</SelectItem>
- *   <SelectItem key="health">Health</SelectItem>
+ *   <Select.Item key="tech">Technology</Select.Item>
+ *   <Select.Item key="health">Health</Select.Item>
  * </Select>
  * ```
  *
@@ -70,16 +70,16 @@
  *   label="Disabled Select"
  *   isDisabled
  * >
- *   <SelectItem key="a">Option A</SelectItem>
+ *   <Select.Item key="a">Option A</Select.Item>
  * </Select>
  * ```
  *
  * @example Disabled Items
  * ```tsx
  * <Select label="Options">
- *   <SelectItem key="a">Available</SelectItem>
- *   <SelectItem key="b" isDisabled>Unavailable</SelectItem>
- *   <SelectItem key="c">Available</SelectItem>
+ *   <Select.Item key="a">Available</Select.Item>
+ *   <Select.Item key="b" isDisabled>Unavailable</Select.Item>
+ *   <Select.Item key="c">Available</Select.Item>
  * </Select>
  * ```
  *
@@ -90,8 +90,8 @@
  *   isInvalid
  *   errorMessage="Please select an option"
  * >
- *   <SelectItem key="a">Option A</SelectItem>
- *   <SelectItem key="b">Option B</SelectItem>
+ *   <Select.Item key="a">Option A</Select.Item>
+ *   <Select.Item key="b">Option B</Select.Item>
  * </Select>
  * ```
  *
@@ -116,9 +116,9 @@
  *   label="Select Country"
  *   startContent={<GlobeIcon />}
  * >
- *   <SelectItem key="us" startContent={<UsFlag />}>
+ *   <Select.Item key="us" startContent={<UsFlag />}>
  *     United States
- *   </SelectItem>
+ *   </Select.Item>
  * </Select>
  * ```
  *
@@ -128,9 +128,9 @@
  *   label="Tags"
  *   selectionMode="multiple"
  * >
- *   <SelectItem key="react">React</SelectItem>
- *   <SelectItem key="vue">Vue</SelectItem>
- *   <SelectItem key="angular">Angular</SelectItem>
+ *   <Select.Item key="react">React</Select.Item>
+ *   <Select.Item key="vue">Vue</Select.Item>
+ *   <Select.Item key="angular">Angular</Select.Item>
  * </Select>
  * ```
  */
@@ -150,13 +150,15 @@ const SelectRoot = forwardRef<ViewRef, HeroSelectProps>((props, ref) => {
 SelectRoot.displayName = "Select";
 
 // Select Item component
-const SelectItemComponent = forwardRef<ViewRef, HeroSelectItemProps>((props, ref) => {
+const SelectItem = forwardRef<ViewRef, HeroSelectItemProps>((props, ref) => {
 	return <HeroSelectItem ref={ref} {...props} />;
 });
-SelectItemComponent.displayName = "SelectItem";
+SelectItem.displayName = "Select.Item";
 
-export const Select = SelectRoot;
-export const SelectItem = SelectItemComponent;
+// Compound Select component with Object.assign pattern
+export const Select = Object.assign(SelectRoot, {
+	Item: SelectItem,
+});
 
 // Re-export types for convenience
 export type {

package/templates/src/components/ui/skeleton-group.tsx

@@ -26,7 +26,7 @@
  * @example Card Loading State
  * ```tsx
  * <Card>
- *   <CardBody>
+ *   <Card.Body>
  *     <SkeletonGroup isLoaded={!isLoading}>
  *       <View style={{ flexDirection: 'row', gap: 12 }}>
  *         <Skeleton style={{ width: 48, height: 48, borderRadius: 24 }} />
@@ -36,7 +36,7 @@
  *         </View>
  *       </View>
  *     </SkeletonGroup>
- *   </CardBody>
+ *   </Card.Body>
  * </Card>
  * ```
  *

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

@@ -20,13 +20,13 @@
  * @example Card Skeleton
  * ```tsx
  * <Card>
- *   <CardBody>
+ *   <Card.Body>
  *     <Skeleton style={{ width: 50, height: 50, borderRadius: 25 }} />
  *     <View style={{ marginTop: 8 }}>
  *       <Skeleton style={{ width: '80%', height: 16 }} />
  *       <Skeleton style={{ width: '60%', height: 16, marginTop: 4 }} />
  *     </View>
- *   </CardBody>
+ *   </Card.Body>
  * </Card>
  * ```
  *

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

@@ -63,10 +63,10 @@
  * @example In Card
  * ```tsx
  * <Card>
- *   <CardBody style={{ alignItems: 'center', padding: 32 }}>
+ *   <Card.Body style={{ alignItems: 'center', padding: 32 }}>
  *     <Spinner size="lg" color="primary" />
  *     <Text style={{ marginTop: 16 }}>Fetching results...</Text>
- *   </CardBody>
+ *   </Card.Body>
  * </Card>
  * ```
  */

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

@@ -6,15 +6,15 @@
  * @example Basic Usage
  * ```tsx
  * <Tabs>
- *   <Tab key="photos" title="Photos">
+ *   <Tabs.Tab key="photos" title="Photos">
  *     <Text>Photos content</Text>
- *   </Tab>
- *   <Tab key="videos" title="Videos">
+ *   </Tabs.Tab>
+ *   <Tabs.Tab key="videos" title="Videos">
  *     <Text>Videos content</Text>
- *   </Tab>
- *   <Tab key="music" title="Music">
+ *   </Tabs.Tab>
+ *   <Tabs.Tab key="music" title="Music">
  *     <Text>Music content</Text>
- *   </Tab>
+ *   </Tabs.Tab>
  * </Tabs>
  * ```
  *
@@ -26,16 +26,16 @@
  *   selectedKey={selected}
  *   onSelectionChange={setSelected}
  * >
- *   <Tab key="photos" title="Photos">Photos</Tab>
- *   <Tab key="videos" title="Videos">Videos</Tab>
+ *   <Tabs.Tab key="photos" title="Photos">Photos</Tabs.Tab>
+ *   <Tabs.Tab key="videos" title="Videos">Videos</Tabs.Tab>
  * </Tabs>
  * ```
  *
  * @example Default Selected
  * ```tsx
  * <Tabs defaultSelectedKey="videos">
- *   <Tab key="photos" title="Photos">Photos</Tab>
- *   <Tab key="videos" title="Videos">Videos</Tab>
+ *   <Tabs.Tab key="photos" title="Photos">Photos</Tabs.Tab>
+ *   <Tabs.Tab key="videos" title="Videos">Videos</Tabs.Tab>
  * </Tabs>
  * ```
  *
@@ -67,24 +67,24 @@
  * @example Disabled Tabs
  * ```tsx
  * <Tabs disabledKeys={['videos']}>
- *   <Tab key="photos" title="Photos">Photos</Tab>
- *   <Tab key="videos" title="Videos">Videos (Disabled)</Tab>
- *   <Tab key="music" title="Music">Music</Tab>
+ *   <Tabs.Tab key="photos" title="Photos">Photos</Tabs.Tab>
+ *   <Tabs.Tab key="videos" title="Videos">Videos (Disabled)</Tabs.Tab>
+ *   <Tabs.Tab key="music" title="Music">Music</Tabs.Tab>
  * </Tabs>
  * ```
  *
  * @example Full Width
  * ```tsx
  * <Tabs fullWidth>
- *   <Tab key="tab1" title="Tab 1">Content 1</Tab>
- *   <Tab key="tab2" title="Tab 2">Content 2</Tab>
+ *   <Tabs.Tab key="tab1" title="Tab 1">Content 1</Tabs.Tab>
+ *   <Tabs.Tab key="tab2" title="Tab 2">Content 2</Tabs.Tab>
  * </Tabs>
  * ```
  *
  * @example With Icons
  * ```tsx
  * <Tabs>
- *   <Tab
+ *   <Tabs.Tab
  *     key="photos"
  *     title={
  *       <View style={{ flexDirection: 'row', gap: 4 }}>
@@ -94,8 +94,8 @@
  *     }
  *   >
  *     Photos content
- *   </Tab>
- *   <Tab
+ *   </Tabs.Tab>
+ *   <Tabs.Tab
  *     key="videos"
  *     title={
  *       <View style={{ flexDirection: 'row', gap: 4 }}>
@@ -105,7 +105,7 @@
  *     }
  *   >
  *     Videos content
- *   </Tab>
+ *   </Tabs.Tab>
  * </Tabs>
  * ```
  *
@@ -139,13 +139,15 @@ const TabsRoot = forwardRef<ViewRef, HeroTabsProps>((props, ref) => {
 TabsRoot.displayName = "Tabs";
 
 // Tab component
-const TabComponent = forwardRef<ViewRef, HeroTabProps>((props, ref) => {
+const Tab = forwardRef<ViewRef, HeroTabProps>((props, ref) => {
 	return <HeroTab ref={ref} {...props} />;
 });
-TabComponent.displayName = "Tab";
+Tab.displayName = "Tabs.Tab";
 
-export const Tabs = TabsRoot;
-export const Tab = TabComponent;
+// Compound Tabs component with Object.assign pattern
+export const Tabs = Object.assign(TabsRoot, {
+	Tab: Tab,
+});
 
 // Re-export types for convenience
 export type {

package/templates/src/global.css

@@ -7,81 +7,97 @@
 
 @import "tailwindcss";
 @import "uniwind";
+@import "heroui-native/styles";
+
+@source "../node_modules/heroui-native/lib";
 
 /**
- * Custom CSS Variables (Design Tokens)
- * Customize these to match your brand.
+ * Custom theme tokens
  */
-:root {
-	/* Primary Colors */
-	--color-primary: #3b82f6;
-	--color-primary-foreground: #ffffff;
-
-	/* Secondary Colors */
-	--color-secondary: #64748b;
-	--color-secondary-foreground: #ffffff;
-
-	/* Accent Colors */
-	--color-accent: #8b5cf6;
-	--color-accent-foreground: #ffffff;
-
-	/* Destructive Colors */
-	--color-destructive: #ef4444;
-	--color-destructive-foreground: #ffffff;
-
-	/* Background Colors */
-	--color-background: #ffffff;
-	--color-foreground: #0f172a;
-
-	/* Muted Colors */
-	--color-muted: #f1f5f9;
-	--color-muted-foreground: #64748b;
-
-	/* Card Colors */
-	--color-card: #ffffff;
-	--color-card-foreground: #0f172a;
-
-	/* Border Colors */
-	--color-border: #e2e8f0;
-
-	/* Input Colors */
-	--color-input: #e2e8f0;
-	--color-ring: #3b82f6;
-
-	/* Spacing */
-	--radius-sm: 0.375rem;
-	--radius-md: 0.5rem;
-	--radius-lg: 0.75rem;
-	--radius-xl: 1rem;
+@theme {
+	--radius-sm: 4px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+	--radius-xl: 16px;
 }
 
 /**
- * Dark mode support
+ * Light and dark theme CSS variables
  */
-.dark {
-	--color-primary: #60a5fa;
-	--color-primary-foreground: #0f172a;
-
-	--color-secondary: #94a3b8;
-	--color-secondary-foreground: #0f172a;
-
-	--color-accent: #a78bfa;
-	--color-accent-foreground: #0f172a;
-
-	--color-destructive: #f87171;
-	--color-destructive-foreground: #0f172a;
-
-	--color-background: #0f172a;
-	--color-foreground: #f8fafc;
-
-	--color-muted: #1e293b;
-	--color-muted-foreground: #94a3b8;
-
-	--color-card: #1e293b;
-	--color-card-foreground: #f8fafc;
-
-	--color-border: #334155;
-
-	--color-input: #334155;
-	--color-ring: #60a5fa;
+@layer theme {
+	:root {
+		@variant light {
+			/* Primary Colors */
+			--color-primary: #3b82f6;
+			--color-primary-foreground: #ffffff;
+
+			/* Secondary Colors */
+			--color-secondary: #64748b;
+			--color-secondary-foreground: #ffffff;
+
+			/* Accent Colors */
+			--color-accent: #8b5cf6;
+			--color-accent-foreground: #ffffff;
+
+			/* Destructive Colors */
+			--color-destructive: #ef4444;
+			--color-destructive-foreground: #ffffff;
+
+			/* Background Colors */
+			--color-background: #ffffff;
+			--color-foreground: #0f172a;
+
+			/* Muted Colors */
+			--color-muted: #f1f5f9;
+			--color-muted-foreground: #64748b;
+
+			/* Card Colors */
+			--color-card: #ffffff;
+			--color-card-foreground: #0f172a;
+
+			/* Border Colors */
+			--color-border: #e2e8f0;
+
+			/* Input Colors */
+			--color-input: #e2e8f0;
+			--color-ring: #3b82f6;
+		}
+
+		@variant dark {
+			/* Primary Colors */
+			--color-primary: #60a5fa;
+			--color-primary-foreground: #0f172a;
+
+			/* Secondary Colors */
+			--color-secondary: #94a3b8;
+			--color-secondary-foreground: #0f172a;
+
+			/* Accent Colors */
+			--color-accent: #a78bfa;
+			--color-accent-foreground: #0f172a;
+
+			/* Destructive Colors */
+			--color-destructive: #f87171;
+			--color-destructive-foreground: #0f172a;
+
+			/* Background Colors */
+			--color-background: #0f172a;
+			--color-foreground: #f8fafc;
+
+			/* Muted Colors */
+			--color-muted: #1e293b;
+			--color-muted-foreground: #94a3b8;
+
+			/* Card Colors */
+			--color-card: #1e293b;
+			--color-card-foreground: #f8fafc;
+
+			/* Border Colors */
+			--color-border: #334155;
+
+			/* Input Colors */
+			--color-input: #334155;
+			--color-ring: #60a5fa;
+		}
+	}
 }