@teardown/cli 1.2.38 → 2.0.41

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

@@ -0,0 +1,95 @@
+/**
+ * Chip Component
+ *
+ * A compact element for displaying tags, statuses, or interactive elements.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Chip>Default Chip</Chip>
+ * ```
+ *
+ * @example Variants
+ * ```tsx
+ * <Chip variant="solid">Solid</Chip>
+ * <Chip variant="bordered">Bordered</Chip>
+ * <Chip variant="light">Light</Chip>
+ * <Chip variant="flat">Flat</Chip>
+ * <Chip variant="faded">Faded</Chip>
+ * <Chip variant="shadow">Shadow</Chip>
+ * <Chip variant="dot">Dot</Chip>
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <Chip color="default">Default</Chip>
+ * <Chip color="primary">Primary</Chip>
+ * <Chip color="secondary">Secondary</Chip>
+ * <Chip color="success">Success</Chip>
+ * <Chip color="warning">Warning</Chip>
+ * <Chip color="danger">Danger</Chip>
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <Chip size="sm">Small</Chip>
+ * <Chip size="md">Medium</Chip>
+ * <Chip size="lg">Large</Chip>
+ * ```
+ *
+ * @example With Close Button
+ * ```tsx
+ * <Chip onClose={() => console.log('Closed!')}>
+ *   Closable Chip
+ * </Chip>
+ * ```
+ *
+ * @example With Avatar
+ * ```tsx
+ * <Chip
+ *   avatar={<Avatar src="https://example.com/avatar.jpg" />}
+ * >
+ *   User Chip
+ * </Chip>
+ * ```
+ *
+ * @example With Start/End Content
+ * ```tsx
+ * <Chip startContent={<Icon name="star" />}>
+ *   Featured
+ * </Chip>
+ * <Chip endContent={<Icon name="check" />}>
+ *   Verified
+ * </Chip>
+ * ```
+ *
+ * @example Disabled State
+ * ```tsx
+ * <Chip isDisabled>
+ *   Disabled Chip
+ * </Chip>
+ * ```
+ *
+ * @example Radius
+ * ```tsx
+ * <Chip radius="none">None</Chip>
+ * <Chip radius="sm">Small</Chip>
+ * <Chip radius="md">Medium</Chip>
+ * <Chip radius="lg">Large</Chip>
+ * <Chip radius="full">Full</Chip>
+ * ```
+ */
+
+import type { ChipProps as HeroChipProps } from "heroui-native";
+import { Chip as HeroChip } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const ChipRoot = forwardRef<ViewRef, HeroChipProps>((props, ref) => {
+	return <HeroChip ref={ref} {...props} />;
+});
+ChipRoot.displayName = "Chip";
+
+export const Chip = ChipRoot;
+
+// Re-export types for convenience
+export type { HeroChipProps as ChipProps };

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

@@ -0,0 +1,134 @@
+/**
+ * Dialog Component
+ *
+ * A modal dialog component for displaying important content and actions.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * const [isOpen, setOpen] = useState(false);
+ *
+ * <Button onPress={() => setOpen(true)}>Open Dialog</Button>
+ *
+ * <Dialog isOpen={isOpen} onClose={() => setOpen(false)}>
+ *   <DialogHeader>
+ *     <Text>Dialog Title</Text>
+ *   </DialogHeader>
+ *   <DialogBody>
+ *     <Text>Dialog content goes here</Text>
+ *   </DialogBody>
+ *   <DialogFooter>
+ *     <Button onPress={() => setOpen(false)}>Close</Button>
+ *   </DialogFooter>
+ * </Dialog>
+ * ```
+ *
+ * @example Simple Alert
+ * ```tsx
+ * <Dialog isOpen={isOpen} onClose={handleClose}>
+ *   <DialogHeader>
+ *     <Text>Alert</Text>
+ *   </DialogHeader>
+ *   <DialogBody>
+ *     <Text>Are you sure you want to proceed?</Text>
+ *   </DialogBody>
+ *   <DialogFooter>
+ *     <Button variant="light" onPress={handleClose}>Cancel</Button>
+ *     <Button color="primary" onPress={handleConfirm}>Confirm</Button>
+ *   </DialogFooter>
+ * </Dialog>
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <Dialog size="xs">Extra Small</Dialog>
+ * <Dialog size="sm">Small</Dialog>
+ * <Dialog size="md">Medium</Dialog>
+ * <Dialog size="lg">Large</Dialog>
+ * <Dialog size="xl">Extra Large</Dialog>
+ * <Dialog size="full">Full Screen</Dialog>
+ * ```
+ *
+ * @example Placements
+ * ```tsx
+ * <Dialog placement="center">Centered Dialog</Dialog>
+ * <Dialog placement="top">Top Dialog</Dialog>
+ * <Dialog placement="bottom">Bottom Dialog</Dialog>
+ * ```
+ *
+ * @example Without Backdrop Close
+ * ```tsx
+ * <Dialog
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   isDismissable={false}
+ * >
+ *   <DialogBody>
+ *     <Text>Click outside won't close this dialog</Text>
+ *   </DialogBody>
+ * </Dialog>
+ * ```
+ *
+ * @example Scrollable Body
+ * ```tsx
+ * <Dialog scrollBehavior="inside">
+ *   <DialogHeader>
+ *     <Text>Long Content</Text>
+ *   </DialogHeader>
+ *   <DialogBody>
+ *     <Text>Long content that scrolls...</Text>
+ *   </DialogBody>
+ * </Dialog>
+ * ```
+ */
+
+import type {
+	DialogBodyProps as HeroDialogBodyProps,
+	DialogFooterProps as HeroDialogFooterProps,
+	DialogHeaderProps as HeroDialogHeaderProps,
+	DialogProps as HeroDialogProps,
+} from "heroui-native";
+import {
+	Dialog as HeroDialog,
+	DialogBody as HeroDialogBody,
+	DialogFooter as HeroDialogFooter,
+	DialogHeader as HeroDialogHeader,
+} from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+// Dialog Root component
+const DialogRoot = forwardRef<ViewRef, HeroDialogProps>((props, ref) => {
+	return <HeroDialog ref={ref} {...props} />;
+});
+DialogRoot.displayName = "Dialog";
+
+// Dialog Header component
+const DialogHeaderComponent = forwardRef<ViewRef, HeroDialogHeaderProps>((props, ref) => {
+	return <HeroDialogHeader ref={ref} {...props} />;
+});
+DialogHeaderComponent.displayName = "DialogHeader";
+
+// Dialog Body component
+const DialogBodyComponent = forwardRef<ViewRef, HeroDialogBodyProps>((props, ref) => {
+	return <HeroDialogBody ref={ref} {...props} />;
+});
+DialogBodyComponent.displayName = "DialogBody";
+
+// Dialog Footer component
+const DialogFooterComponent = forwardRef<ViewRef, HeroDialogFooterProps>((props, ref) => {
+	return <HeroDialogFooter ref={ref} {...props} />;
+});
+DialogFooterComponent.displayName = "DialogFooter";
+
+export const Dialog = DialogRoot;
+export const DialogHeader = DialogHeaderComponent;
+export const DialogBody = DialogBodyComponent;
+export const DialogFooter = DialogFooterComponent;
+
+// Re-export types for convenience
+export type {
+	HeroDialogProps as DialogProps,
+	HeroDialogHeaderProps as DialogHeaderProps,
+	HeroDialogBodyProps as DialogBodyProps,
+	HeroDialogFooterProps as DialogFooterProps,
+};

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

@@ -0,0 +1,67 @@
+/**
+ * Divider Component
+ *
+ * A visual separator for content sections.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Text>Section 1</Text>
+ * <Divider />
+ * <Text>Section 2</Text>
+ * ```
+ *
+ * @example Orientations
+ * ```tsx
+ * // Horizontal (default)
+ * <Divider orientation="horizontal" />
+ *
+ * // Vertical
+ * <View style={{ flexDirection: 'row', height: 50 }}>
+ *   <Text>Left</Text>
+ *   <Divider orientation="vertical" />
+ *   <Text>Right</Text>
+ * </View>
+ * ```
+ *
+ * @example In a Card
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <Text>Title</Text>
+ *   </CardHeader>
+ *   <Divider />
+ *   <CardBody>
+ *     <Text>Content</Text>
+ *   </CardBody>
+ *   <Divider />
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ *
+ * @example In a List
+ * ```tsx
+ * {items.map((item, index) => (
+ *   <Fragment key={item.id}>
+ *     <ListItem>{item.title}</ListItem>
+ *     {index < items.length - 1 && <Divider />}
+ *   </Fragment>
+ * ))}
+ * ```
+ */
+
+import type { DividerProps as HeroDividerProps } from "heroui-native";
+import { Divider as HeroDivider } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const DividerRoot = forwardRef<ViewRef, HeroDividerProps>((props, ref) => {
+	return <HeroDivider ref={ref} {...props} />;
+});
+DividerRoot.displayName = "Divider";
+
+export const Divider = DividerRoot;
+
+// Re-export types for convenience
+export type { HeroDividerProps as DividerProps };

package/templates/src/components/ui/error-view.tsx

@@ -0,0 +1,82 @@
+/**
+ * ErrorView Component
+ *
+ * A component for displaying error states with optional retry functionality.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <ErrorView
+ *   title="Something went wrong"
+ *   description="Please try again later"
+ * />
+ * ```
+ *
+ * @example With Retry Button
+ * ```tsx
+ * <ErrorView
+ *   title="Failed to load data"
+ *   description="Unable to fetch the requested information"
+ *   onRetry={() => refetch()}
+ *   retryText="Try Again"
+ * />
+ * ```
+ *
+ * @example Custom Icon
+ * ```tsx
+ * <ErrorView
+ *   title="Network Error"
+ *   description="Check your internet connection"
+ *   icon={<WifiOffIcon />}
+ *   onRetry={handleRetry}
+ * />
+ * ```
+ *
+ * @example In Error Boundary
+ * ```tsx
+ * function ErrorFallback({ error, resetErrorBoundary }) {
+ *   return (
+ *     <ErrorView
+ *       title="Application Error"
+ *       description={error.message}
+ *       onRetry={resetErrorBoundary}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example Empty State
+ * ```tsx
+ * <ErrorView
+ *   title="No results found"
+ *   description="Try adjusting your search criteria"
+ *   icon={<SearchIcon />}
+ * />
+ * ```
+ *
+ * @example Full Screen Error
+ * ```tsx
+ * <View style={{ flex: 1 }}>
+ *   <ErrorView
+ *     title="Page Not Found"
+ *     description="The page you're looking for doesn't exist"
+ *     onRetry={() => navigation.goBack()}
+ *     retryText="Go Back"
+ *   />
+ * </View>
+ * ```
+ */
+
+import type { ErrorViewProps as HeroErrorViewProps } from "heroui-native";
+import { ErrorView as HeroErrorView } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const ErrorViewRoot = forwardRef<ViewRef, HeroErrorViewProps>((props, ref) => {
+	return <HeroErrorView ref={ref} {...props} />;
+});
+ErrorViewRoot.displayName = "ErrorView";
+
+export const ErrorView = ErrorViewRoot;
+
+// Re-export types for convenience
+export type { HeroErrorViewProps as ErrorViewProps };

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

@@ -0,0 +1,101 @@
+/**
+ * FormField Component
+ *
+ * A wrapper component for form controls that provides label, description, and error message support.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <FormField label="Email" description="Enter your email address">
+ *   <Input placeholder="email@example.com" />
+ * </FormField>
+ * ```
+ *
+ * @example Required Field
+ * ```tsx
+ * <FormField
+ *   label="Username"
+ *   isRequired
+ * >
+ *   <Input placeholder="Choose a username" />
+ * </FormField>
+ * ```
+ *
+ * @example With Error Message
+ * ```tsx
+ * <FormField
+ *   label="Password"
+ *   isInvalid
+ *   errorMessage="Password must be at least 8 characters"
+ * >
+ *   <Input type="password" />
+ * </FormField>
+ * ```
+ *
+ * @example With Description
+ * ```tsx
+ * <FormField
+ *   label="Bio"
+ *   description="Tell us about yourself (max 200 characters)"
+ * >
+ *   <TextArea placeholder="Write your bio..." />
+ * </FormField>
+ * ```
+ *
+ * @example Disabled State
+ * ```tsx
+ * <FormField
+ *   label="Read Only Field"
+ *   isDisabled
+ * >
+ *   <Input value="Cannot be edited" />
+ * </FormField>
+ * ```
+ *
+ * @example With Checkbox
+ * ```tsx
+ * <FormField
+ *   label="Preferences"
+ *   description="Select all that apply"
+ * >
+ *   <CheckboxGroup>
+ *     <Checkbox value="notifications">Email notifications</Checkbox>
+ *     <Checkbox value="updates">Product updates</Checkbox>
+ *   </CheckboxGroup>
+ * </FormField>
+ * ```
+ *
+ * @example Full Form Example
+ * ```tsx
+ * <View style={{ gap: 16 }}>
+ *   <FormField label="Full Name" isRequired>
+ *     <Input placeholder="John Doe" />
+ *   </FormField>
+ *
+ *   <FormField
+ *     label="Email"
+ *     isRequired
+ *     isInvalid={!isValidEmail}
+ *     errorMessage="Please enter a valid email"
+ *   >
+ *     <Input placeholder="john@example.com" />
+ *   </FormField>
+ *
+ *   <Button type="submit">Submit</Button>
+ * </View>
+ * ```
+ */
+
+import type { FormFieldProps as HeroFormFieldProps } from "heroui-native";
+import { FormField as HeroFormField } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const FormFieldRoot = forwardRef<ViewRef, HeroFormFieldProps>((props, ref) => {
+	return <HeroFormField ref={ref} {...props} />;
+});
+FormFieldRoot.displayName = "FormField";
+
+export const FormField = FormFieldRoot;
+
+// Re-export types for convenience
+export type { HeroFormFieldProps as FormFieldProps };

package/templates/src/components/ui/index.ts

@@ -0,0 +1,100 @@
+/**
+ * UI Components Barrel Export (HeroUI Native)
+ *
+ * All components are wrappers around HeroUI Native components,
+ * allowing for future customization and modifications.
+ */
+
+// Accordion
+export { Accordion, AccordionItem, type AccordionProps, type AccordionItemProps } from "./accordion";
+
+// Avatar
+export { Avatar, type AvatarProps } from "./avatar";
+
+// Button
+export { Button, type ButtonProps } from "./button";
+
+// Card
+export {
+	Card,
+	CardHeader,
+	CardBody,
+	CardFooter,
+	type CardProps,
+	type CardHeaderProps,
+	type CardBodyProps,
+	type CardFooterProps,
+} from "./card";
+
+// Checkbox
+export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps } from "./checkbox";
+
+// Chip
+export { Chip, type ChipProps } from "./chip";
+
+// Dialog
+export {
+	Dialog,
+	DialogHeader,
+	DialogBody,
+	DialogFooter,
+	type DialogProps,
+	type DialogHeaderProps,
+	type DialogBodyProps,
+	type DialogFooterProps,
+} from "./dialog";
+
+// Divider
+export { Divider, type DividerProps } from "./divider";
+
+// Error View
+export { ErrorView, type ErrorViewProps } from "./error-view";
+
+// Form Field
+export { FormField, type FormFieldProps } from "./form-field";
+
+// Popover
+export { Popover, type PopoverProps } from "./popover";
+
+// Pressable Feedback
+export { PressableFeedback, type PressableFeedbackProps } from "./pressable-feedback";
+
+// Radio Group
+export { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from "./radio-group";
+
+// Scroll Shadow
+export { ScrollShadow, type ScrollShadowProps } from "./scroll-shadow";
+
+// Select
+export { Select, SelectItem, type SelectProps, type SelectItemProps } from "./select";
+
+// Skeleton
+export { Skeleton, type SkeletonProps } from "./skeleton";
+
+// Skeleton Group
+export { SkeletonGroup, type SkeletonGroupProps } from "./skeleton-group";
+
+// Spinner
+export { Spinner, type SpinnerProps } from "./spinner";
+
+// Surface
+export { Surface, type SurfaceProps } from "./surface";
+
+// Switch
+export { Switch, type SwitchProps } from "./switch";
+
+// Tabs
+export { Tabs, Tab, type TabsProps, type TabProps } from "./tabs";
+
+// Text Field
+export {
+	TextField,
+	type TextFieldProps,
+	type TextFieldLabelProps,
+	type TextFieldInputProps,
+	type TextFieldDescriptionProps,
+	type TextFieldErrorMessageProps,
+} from "./text-field";
+
+// Toast
+export { Toast, type ToastProps } from "./toast";

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

@@ -0,0 +1,92 @@
+/**
+ * Popover Component
+ *
+ * A floating panel for displaying additional content on demand.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Popover>
+ *   <Popover.Trigger>
+ *     <Button>Open Popover</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <Text>Popover content</Text>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [isOpen, setOpen] = useState(false);
+ *
+ * <Popover isOpen={isOpen} onOpenChange={setOpen}>
+ *   <Popover.Trigger>
+ *     <Button>Toggle Popover</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <Text>Controlled popover content</Text>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ *
+ * @example Placements
+ * ```tsx
+ * <Popover placement="top">Top</Popover>
+ * <Popover placement="bottom">Bottom</Popover>
+ * <Popover placement="left">Left</Popover>
+ * <Popover placement="right">Right</Popover>
+ * <Popover placement="top-start">Top Start</Popover>
+ * <Popover placement="top-end">Top End</Popover>
+ * ```
+ *
+ * @example With Offset
+ * ```tsx
+ * <Popover offset={10}>
+ *   <Popover.Trigger>
+ *     <Button>With Offset</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <Text>Content with offset</Text>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ *
+ * @example Custom Backdrop
+ * ```tsx
+ * <Popover backdrop="blur">
+ *   <Popover.Trigger>
+ *     <Button>Blur Backdrop</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <Text>Content with blur backdrop</Text>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ *
+ * @example With Arrow
+ * ```tsx
+ * <Popover showArrow>
+ *   <Popover.Trigger>
+ *     <Button>With Arrow</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <Text>Content with arrow</Text>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ */
+
+import type { PopoverProps as HeroPopoverProps } from "heroui-native";
+import { Popover as HeroPopover } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const PopoverRoot = forwardRef<ViewRef, HeroPopoverProps>((props, ref) => {
+	return <HeroPopover ref={ref} {...props} />;
+});
+PopoverRoot.displayName = "Popover";
+
+export const Popover = PopoverRoot;
+
+// Re-export types for convenience
+export type { HeroPopoverProps as PopoverProps };