@teardown/cli 1.2.39 → 2.0.42

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

@@ -0,0 +1,87 @@
+/**
+ * Spinner Component
+ *
+ * A loading indicator component for showing async operations.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Spinner />
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <Spinner size="sm" />
+ * <Spinner size="md" />
+ * <Spinner size="lg" />
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <Spinner color="default" />
+ * <Spinner color="primary" />
+ * <Spinner color="secondary" />
+ * <Spinner color="success" />
+ * <Spinner color="warning" />
+ * <Spinner color="danger" />
+ * ```
+ *
+ * @example With Label
+ * ```tsx
+ * <Spinner label="Loading..." />
+ * ```
+ *
+ * @example Label Placement
+ * ```tsx
+ * <Spinner label="Loading" labelColor="primary" />
+ * ```
+ *
+ * @example In Button
+ * ```tsx
+ * <Button isLoading>
+ *   <Spinner size="sm" />
+ *   Submitting...
+ * </Button>
+ * ```
+ *
+ * @example Full Screen Loading
+ * ```tsx
+ * <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+ *   <Spinner size="lg" />
+ *   <Text style={{ marginTop: 16 }}>Loading data...</Text>
+ * </View>
+ * ```
+ *
+ * @example Conditional Loading
+ * ```tsx
+ * {isLoading ? (
+ *   <Spinner />
+ * ) : (
+ *   <Content data={data} />
+ * )}
+ * ```
+ *
+ * @example In Card
+ * ```tsx
+ * <Card>
+ *   <CardBody style={{ alignItems: 'center', padding: 32 }}>
+ *     <Spinner size="lg" color="primary" />
+ *     <Text style={{ marginTop: 16 }}>Fetching results...</Text>
+ *   </CardBody>
+ * </Card>
+ * ```
+ */
+
+import type { SpinnerProps as HeroSpinnerProps } from "heroui-native";
+import { Spinner as HeroSpinner } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const SpinnerRoot = forwardRef<ViewRef, HeroSpinnerProps>((props, ref) => {
+	return <HeroSpinner ref={ref} {...props} />;
+});
+SpinnerRoot.displayName = "Spinner";
+
+export const Spinner = SpinnerRoot;
+
+// Re-export types for convenience
+export type { HeroSpinnerProps as SpinnerProps };

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

@@ -0,0 +1,95 @@
+/**
+ * Surface Component
+ *
+ * A themed container component that adapts to the current color scheme.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Surface>
+ *   <Text>Content on a themed surface</Text>
+ * </Surface>
+ * ```
+ *
+ * @example With Padding
+ * ```tsx
+ * <Surface style={{ padding: 16 }}>
+ *   <Text>Padded content</Text>
+ * </Surface>
+ * ```
+ *
+ * @example Elevation Levels
+ * ```tsx
+ * <Surface elevation={0}>Base level</Surface>
+ * <Surface elevation={1}>Elevated</Surface>
+ * <Surface elevation={2}>More elevated</Surface>
+ * <Surface elevation={3}>Most elevated</Surface>
+ * ```
+ *
+ * @example As Card Container
+ * ```tsx
+ * <Surface style={{ borderRadius: 12, padding: 16 }}>
+ *   <Text style={{ fontWeight: 'bold' }}>Title</Text>
+ *   <Text>Description text goes here</Text>
+ * </Surface>
+ * ```
+ *
+ * @example Nested Surfaces
+ * ```tsx
+ * <Surface style={{ padding: 16 }}>
+ *   <Text>Outer surface</Text>
+ *   <Surface elevation={1} style={{ padding: 12, marginTop: 8 }}>
+ *     <Text>Inner elevated surface</Text>
+ *   </Surface>
+ * </Surface>
+ * ```
+ *
+ * @example Full Screen
+ * ```tsx
+ * <Surface style={{ flex: 1 }}>
+ *   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+ *     <Text>Centered content</Text>
+ *   </View>
+ * </Surface>
+ * ```
+ *
+ * @example With Border
+ * ```tsx
+ * <Surface
+ *   style={{
+ *     borderWidth: 1,
+ *     borderColor: '#e0e0e0',
+ *     borderRadius: 8,
+ *     padding: 16
+ *   }}
+ * >
+ *   <Text>Bordered surface</Text>
+ * </Surface>
+ * ```
+ *
+ * @example List Container
+ * ```tsx
+ * <Surface>
+ *   {items.map(item => (
+ *     <View key={item.id} style={{ padding: 12 }}>
+ *       <Text>{item.title}</Text>
+ *       <Divider />
+ *     </View>
+ *   ))}
+ * </Surface>
+ * ```
+ */
+
+import type { SurfaceProps as HeroSurfaceProps } from "heroui-native";
+import { Surface as HeroSurface } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const SurfaceRoot = forwardRef<ViewRef, HeroSurfaceProps>((props, ref) => {
+	return <HeroSurface ref={ref} {...props} />;
+});
+SurfaceRoot.displayName = "Surface";
+
+export const Surface = SurfaceRoot;
+
+// Re-export types for convenience
+export type { HeroSurfaceProps as SurfaceProps };

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

@@ -0,0 +1,124 @@
+/**
+ * Switch Component
+ *
+ * A toggle switch component for boolean settings.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Switch>Enable notifications</Switch>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [isEnabled, setEnabled] = useState(false);
+ *
+ * <Switch
+ *   isSelected={isEnabled}
+ *   onValueChange={setEnabled}
+ * >
+ *   Dark mode
+ * </Switch>
+ * ```
+ *
+ * @example Default Selected
+ * ```tsx
+ * <Switch defaultSelected>
+ *   Auto-save enabled
+ * </Switch>
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <Switch color="default">Default</Switch>
+ * <Switch color="primary">Primary</Switch>
+ * <Switch color="secondary">Secondary</Switch>
+ * <Switch color="success">Success</Switch>
+ * <Switch color="warning">Warning</Switch>
+ * <Switch color="danger">Danger</Switch>
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <Switch size="sm">Small</Switch>
+ * <Switch size="md">Medium</Switch>
+ * <Switch size="lg">Large</Switch>
+ * ```
+ *
+ * @example Disabled State
+ * ```tsx
+ * <Switch isDisabled>
+ *   Disabled switch
+ * </Switch>
+ *
+ * <Switch isDisabled defaultSelected>
+ *   Disabled and selected
+ * </Switch>
+ * ```
+ *
+ * @example Readonly State
+ * ```tsx
+ * <Switch isReadOnly defaultSelected>
+ *   Read-only switch
+ * </Switch>
+ * ```
+ *
+ * @example With Description
+ * ```tsx
+ * <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+ *   <View>
+ *     <Text>Push Notifications</Text>
+ *     <Text style={{ color: 'gray' }}>Receive push notifications</Text>
+ *   </View>
+ *   <Switch isSelected={pushEnabled} onValueChange={setPushEnabled} />
+ * </View>
+ * ```
+ *
+ * @example Settings List
+ * ```tsx
+ * <View style={{ gap: 16 }}>
+ *   <Switch isSelected={settings.wifi} onValueChange={v => updateSetting('wifi', v)}>
+ *     Wi-Fi
+ *   </Switch>
+ *   <Switch isSelected={settings.bluetooth} onValueChange={v => updateSetting('bluetooth', v)}>
+ *     Bluetooth
+ *   </Switch>
+ *   <Switch isSelected={settings.airplane} onValueChange={v => updateSetting('airplane', v)}>
+ *     Airplane Mode
+ *   </Switch>
+ * </View>
+ * ```
+ *
+ * @example With Icons
+ * ```tsx
+ * <Switch
+ *   thumbIcon={isSelected => (isSelected ? <SunIcon /> : <MoonIcon />)}
+ * >
+ *   Theme
+ * </Switch>
+ * ```
+ *
+ * @example Start/End Content
+ * ```tsx
+ * <Switch
+ *   startContent={<SunIcon />}
+ *   endContent={<MoonIcon />}
+ * >
+ *   Theme Mode
+ * </Switch>
+ * ```
+ */
+
+import type { SwitchProps as HeroSwitchProps } from "heroui-native";
+import { Switch as HeroSwitch } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const SwitchRoot = forwardRef<ViewRef, HeroSwitchProps>((props, ref) => {
+	return <HeroSwitch ref={ref} {...props} />;
+});
+SwitchRoot.displayName = "Switch";
+
+export const Switch = SwitchRoot;
+
+// Re-export types for convenience
+export type { HeroSwitchProps as SwitchProps };

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

@@ -0,0 +1,154 @@
+/**
+ * Tabs Component
+ *
+ * A tabbed interface component for organizing content into switchable panels.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Tabs>
+ *   <Tab key="photos" title="Photos">
+ *     <Text>Photos content</Text>
+ *   </Tab>
+ *   <Tab key="videos" title="Videos">
+ *     <Text>Videos content</Text>
+ *   </Tab>
+ *   <Tab key="music" title="Music">
+ *     <Text>Music content</Text>
+ *   </Tab>
+ * </Tabs>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [selected, setSelected] = useState('photos');
+ *
+ * <Tabs
+ *   selectedKey={selected}
+ *   onSelectionChange={setSelected}
+ * >
+ *   <Tab key="photos" title="Photos">Photos</Tab>
+ *   <Tab key="videos" title="Videos">Videos</Tab>
+ * </Tabs>
+ * ```
+ *
+ * @example Default Selected
+ * ```tsx
+ * <Tabs defaultSelectedKey="videos">
+ *   <Tab key="photos" title="Photos">Photos</Tab>
+ *   <Tab key="videos" title="Videos">Videos</Tab>
+ * </Tabs>
+ * ```
+ *
+ * @example Variants
+ * ```tsx
+ * <Tabs variant="solid">Solid tabs</Tabs>
+ * <Tabs variant="bordered">Bordered tabs</Tabs>
+ * <Tabs variant="light">Light tabs</Tabs>
+ * <Tabs variant="underlined">Underlined tabs</Tabs>
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <Tabs color="default">Default</Tabs>
+ * <Tabs color="primary">Primary</Tabs>
+ * <Tabs color="secondary">Secondary</Tabs>
+ * <Tabs color="success">Success</Tabs>
+ * <Tabs color="warning">Warning</Tabs>
+ * <Tabs color="danger">Danger</Tabs>
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <Tabs size="sm">Small tabs</Tabs>
+ * <Tabs size="md">Medium tabs</Tabs>
+ * <Tabs size="lg">Large tabs</Tabs>
+ * ```
+ *
+ * @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>
+ * ```
+ *
+ * @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>
+ * ```
+ *
+ * @example With Icons
+ * ```tsx
+ * <Tabs>
+ *   <Tab
+ *     key="photos"
+ *     title={
+ *       <View style={{ flexDirection: 'row', gap: 4 }}>
+ *         <PhotoIcon />
+ *         <Text>Photos</Text>
+ *       </View>
+ *     }
+ *   >
+ *     Photos content
+ *   </Tab>
+ *   <Tab
+ *     key="videos"
+ *     title={
+ *       <View style={{ flexDirection: 'row', gap: 4 }}>
+ *         <VideoIcon />
+ *         <Text>Videos</Text>
+ *       </View>
+ *     }
+ *   >
+ *     Videos content
+ *   </Tab>
+ * </Tabs>
+ * ```
+ *
+ * @example Radius
+ * ```tsx
+ * <Tabs radius="none">No radius</Tabs>
+ * <Tabs radius="sm">Small radius</Tabs>
+ * <Tabs radius="md">Medium radius</Tabs>
+ * <Tabs radius="lg">Large radius</Tabs>
+ * <Tabs radius="full">Full radius</Tabs>
+ * ```
+ *
+ * @example Placement
+ * ```tsx
+ * <Tabs placement="top">Top placement</Tabs>
+ * <Tabs placement="bottom">Bottom placement</Tabs>
+ * <Tabs placement="start">Start placement</Tabs>
+ * <Tabs placement="end">End placement</Tabs>
+ * ```
+ */
+
+import type { TabProps as HeroTabProps, TabsProps as HeroTabsProps } from "heroui-native";
+import { Tab as HeroTab, Tabs as HeroTabs } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+// Tabs component
+const TabsRoot = forwardRef<ViewRef, HeroTabsProps>((props, ref) => {
+	return <HeroTabs ref={ref} {...props} />;
+});
+TabsRoot.displayName = "Tabs";
+
+// Tab component
+const TabComponent = forwardRef<ViewRef, HeroTabProps>((props, ref) => {
+	return <HeroTab ref={ref} {...props} />;
+});
+TabComponent.displayName = "Tab";
+
+export const Tabs = TabsRoot;
+export const Tab = TabComponent;
+
+// Re-export types for convenience
+export type {
+	HeroTabsProps as TabsProps,
+	HeroTabProps as TabProps,
+};

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

@@ -0,0 +1,106 @@
+/**
+ * TextField Component
+ *
+ * A flexible text input component with label, description, and validation support.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <TextField>
+ *   <TextField.Label>Email</TextField.Label>
+ *   <TextField.Input placeholder="Enter your email" />
+ *   <TextField.Description>We'll never share your email</TextField.Description>
+ * </TextField>
+ * ```
+ *
+ * @example Required Field
+ * ```tsx
+ * <TextField isRequired>
+ *   <TextField.Label>Username</TextField.Label>
+ *   <TextField.Input placeholder="Choose a username" />
+ * </TextField>
+ * ```
+ *
+ * @example With Validation
+ * ```tsx
+ * <TextField isRequired isInvalid={hasError}>
+ *   <TextField.Label>Email</TextField.Label>
+ *   <TextField.Input placeholder="Enter your email" />
+ *   <TextField.ErrorMessage>Please enter a valid email</TextField.ErrorMessage>
+ * </TextField>
+ * ```
+ *
+ * @example Multiline Input
+ * ```tsx
+ * <TextField>
+ *   <TextField.Label>Message</TextField.Label>
+ *   <TextField.Input placeholder="Type your message..." multiline numberOfLines={4} />
+ *   <TextField.Description>Maximum 500 characters</TextField.Description>
+ * </TextField>
+ * ```
+ *
+ * @example Disabled State
+ * ```tsx
+ * <TextField isDisabled>
+ *   <TextField.Label>Disabled Field</TextField.Label>
+ *   <TextField.Input placeholder="Cannot edit" value="Read only value" />
+ * </TextField>
+ * ```
+ */
+
+import type {
+	TextFieldDescriptionProps,
+	TextFieldErrorMessageProps,
+	TextFieldInputProps,
+	TextFieldLabelProps,
+	TextFieldRootProps,
+} from "heroui-native";
+import { TextField as HeroTextField } from "heroui-native";
+import { forwardRef } from "react";
+import type { TextInput as TextInputType, Text as TextRef, View as ViewRef } from "react-native";
+
+// Root TextField component
+const TextFieldRoot = forwardRef<ViewRef, TextFieldRootProps>((props, ref) => {
+	return <HeroTextField ref={ref} {...props} />;
+});
+TextFieldRoot.displayName = "TextField";
+
+// Label component
+const TextFieldLabel = forwardRef<TextRef, TextFieldLabelProps>((props, ref) => {
+	return <HeroTextField.Label ref={ref} {...props} />;
+});
+TextFieldLabel.displayName = "TextField.Label";
+
+// Input component
+const TextFieldInput = forwardRef<TextInputType, TextFieldInputProps>((props, ref) => {
+	return <HeroTextField.Input ref={ref} {...props} />;
+});
+TextFieldInput.displayName = "TextField.Input";
+
+// Description component
+const TextFieldDescription = forwardRef<TextRef, TextFieldDescriptionProps>((props, ref) => {
+	return <HeroTextField.Description ref={ref} {...props} />;
+});
+TextFieldDescription.displayName = "TextField.Description";
+
+// Error Message component
+const TextFieldErrorMessage = forwardRef<TextRef, TextFieldErrorMessageProps>((props, ref) => {
+	return <HeroTextField.ErrorMessage ref={ref} {...props} />;
+});
+TextFieldErrorMessage.displayName = "TextField.ErrorMessage";
+
+// Compound TextField component
+export const TextField = Object.assign(TextFieldRoot, {
+	Label: TextFieldLabel,
+	Input: TextFieldInput,
+	Description: TextFieldDescription,
+	ErrorMessage: TextFieldErrorMessage,
+});
+
+// Re-export types for convenience
+export type {
+	TextFieldRootProps as TextFieldProps,
+	TextFieldLabelProps,
+	TextFieldInputProps,
+	TextFieldDescriptionProps,
+	TextFieldErrorMessageProps,
+};

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

@@ -0,0 +1,129 @@
+/**
+ * Toast Component
+ *
+ * A notification component for displaying brief messages.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Toast>
+ *   This is a toast message
+ * </Toast>
+ * ```
+ *
+ * @example Variants
+ * ```tsx
+ * <Toast variant="solid">Solid toast</Toast>
+ * <Toast variant="bordered">Bordered toast</Toast>
+ * <Toast variant="flat">Flat toast</Toast>
+ * <Toast variant="faded">Faded toast</Toast>
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <Toast color="default">Default</Toast>
+ * <Toast color="primary">Primary</Toast>
+ * <Toast color="secondary">Secondary</Toast>
+ * <Toast color="success">Success</Toast>
+ * <Toast color="warning">Warning</Toast>
+ * <Toast color="danger">Danger</Toast>
+ * ```
+ *
+ * @example With Title and Description
+ * ```tsx
+ * <Toast
+ *   title="Success"
+ *   description="Your changes have been saved"
+ *   color="success"
+ * />
+ * ```
+ *
+ * @example With Close Button
+ * ```tsx
+ * <Toast
+ *   onClose={() => setVisible(false)}
+ * >
+ *   Dismissible toast
+ * </Toast>
+ * ```
+ *
+ * @example With Icon
+ * ```tsx
+ * <Toast
+ *   icon={<CheckIcon />}
+ *   color="success"
+ * >
+ *   Operation completed
+ * </Toast>
+ * ```
+ *
+ * @example Placement
+ * ```tsx
+ * <Toast placement="top">Top toast</Toast>
+ * <Toast placement="top-start">Top start</Toast>
+ * <Toast placement="top-end">Top end</Toast>
+ * <Toast placement="bottom">Bottom toast</Toast>
+ * <Toast placement="bottom-start">Bottom start</Toast>
+ * <Toast placement="bottom-end">Bottom end</Toast>
+ * ```
+ *
+ * @example Auto-dismiss
+ * ```tsx
+ * <Toast
+ *   timeout={3000}
+ *   onClose={handleClose}
+ * >
+ *   This will disappear in 3 seconds
+ * </Toast>
+ * ```
+ *
+ * @example Toast Provider Pattern
+ * ```tsx
+ * // In your provider
+ * const showToast = (message, options) => {
+ *   setToasts([...toasts, { id: Date.now(), message, ...options }]);
+ * };
+ *
+ * // Usage
+ * showToast('Item saved successfully', { color: 'success' });
+ * ```
+ *
+ * @example Promise Toast
+ * ```tsx
+ * const handleSubmit = async () => {
+ *   try {
+ *     await submitData();
+ *     showToast('Submitted successfully', { color: 'success' });
+ *   } catch (error) {
+ *     showToast('Failed to submit', { color: 'danger' });
+ *   }
+ * };
+ * ```
+ *
+ * @example With Action
+ * ```tsx
+ * <Toast
+ *   action={
+ *     <Button size="sm" variant="light" onPress={handleUndo}>
+ *       Undo
+ *     </Button>
+ *   }
+ * >
+ *   Item deleted
+ * </Toast>
+ * ```
+ */
+
+import type { ToastProps as HeroToastProps } from "heroui-native";
+import { Toast as HeroToast } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const ToastRoot = forwardRef<ViewRef, HeroToastProps>((props, ref) => {
+	return <HeroToast ref={ref} {...props} />;
+});
+ToastRoot.displayName = "Toast";
+
+export const Toast = ToastRoot;
+
+// Re-export types for convenience
+export type { HeroToastProps as ToastProps };

package/templates/src/contexts/.gitkeep

@@ -0,0 +1,2 @@
+# Add your React Context files here
+# Example: auth.context.ts, theme.context.ts