@teardown/cli 1.2.39 → 2.0.41

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

@@ -0,0 +1,88 @@
+/**
+ * PressableFeedback Component
+ *
+ * A pressable component with visual feedback animations.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <PressableFeedback onPress={() => console.log('Pressed!')}>
+ *   <Text>Press Me</Text>
+ * </PressableFeedback>
+ * ```
+ *
+ * @example Custom Feedback
+ * ```tsx
+ * <PressableFeedback
+ *   onPress={handlePress}
+ *   pressedOpacity={0.7}
+ * >
+ *   <Card>
+ *     <CardBody>
+ *       <Text>Pressable Card</Text>
+ *     </CardBody>
+ *   </Card>
+ * </PressableFeedback>
+ * ```
+ *
+ * @example Scale Effect
+ * ```tsx
+ * <PressableFeedback
+ *   onPress={handlePress}
+ *   pressedScale={0.95}
+ * >
+ *   <View style={styles.item}>
+ *     <Text>Scale on press</Text>
+ *   </View>
+ * </PressableFeedback>
+ * ```
+ *
+ * @example List Item
+ * ```tsx
+ * {items.map(item => (
+ *   <PressableFeedback
+ *     key={item.id}
+ *     onPress={() => handleItemPress(item)}
+ *   >
+ *     <View style={styles.listItem}>
+ *       <Text>{item.title}</Text>
+ *       <Icon name="chevron-right" />
+ *     </View>
+ *   </PressableFeedback>
+ * ))}
+ * ```
+ *
+ * @example Disabled State
+ * ```tsx
+ * <PressableFeedback
+ *   onPress={handlePress}
+ *   isDisabled
+ * >
+ *   <Text>Disabled</Text>
+ * </PressableFeedback>
+ * ```
+ *
+ * @example With Long Press
+ * ```tsx
+ * <PressableFeedback
+ *   onPress={handlePress}
+ *   onLongPress={handleLongPress}
+ * >
+ *   <Text>Press or long press</Text>
+ * </PressableFeedback>
+ * ```
+ */
+
+import type { PressableFeedbackProps as HeroPressableFeedbackProps } from "heroui-native";
+import { PressableFeedback as HeroPressableFeedback } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const PressableFeedbackRoot = forwardRef<ViewRef, HeroPressableFeedbackProps>((props, ref) => {
+	return <HeroPressableFeedback ref={ref} {...props} />;
+});
+PressableFeedbackRoot.displayName = "PressableFeedback";
+
+export const PressableFeedback = PressableFeedbackRoot;
+
+// Re-export types for convenience
+export type { HeroPressableFeedbackProps as PressableFeedbackProps };

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

@@ -0,0 +1,153 @@
+/**
+ * RadioGroup Component
+ *
+ * A group of radio buttons for single selection from multiple options.
+ *
+ * @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>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [selected, setSelected] = useState('option1');
+ *
+ * <RadioGroup
+ *   label="Choose one"
+ *   value={selected}
+ *   onValueChange={setSelected}
+ * >
+ *   <Radio value="option1">Option 1</Radio>
+ *   <Radio value="option2">Option 2</Radio>
+ * </RadioGroup>
+ * ```
+ *
+ * @example Default Value
+ * ```tsx
+ * <RadioGroup
+ *   label="Shipping Method"
+ *   defaultValue="standard"
+ * >
+ *   <Radio value="standard">Standard Shipping</Radio>
+ *   <Radio value="express">Express Shipping</Radio>
+ *   <Radio value="overnight">Overnight Shipping</Radio>
+ * </RadioGroup>
+ * ```
+ *
+ * @example Colors
+ * ```tsx
+ * <RadioGroup color="primary">
+ *   <Radio value="a">Primary</Radio>
+ * </RadioGroup>
+ * <RadioGroup color="secondary">
+ *   <Radio value="a">Secondary</Radio>
+ * </RadioGroup>
+ * <RadioGroup color="success">
+ *   <Radio value="a">Success</Radio>
+ * </RadioGroup>
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <RadioGroup size="sm">
+ *   <Radio value="a">Small</Radio>
+ * </RadioGroup>
+ * <RadioGroup size="md">
+ *   <Radio value="a">Medium</Radio>
+ * </RadioGroup>
+ * <RadioGroup size="lg">
+ *   <Radio value="a">Large</Radio>
+ * </RadioGroup>
+ * ```
+ *
+ * @example Horizontal Orientation
+ * ```tsx
+ * <RadioGroup
+ *   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>
+ * ```
+ *
+ * @example With Description
+ * ```tsx
+ * <RadioGroup
+ *   label="Plan"
+ *   description="Choose your subscription plan"
+ * >
+ *   <Radio value="free" description="Limited features">
+ *     Free
+ *   </Radio>
+ *   <Radio value="pro" description="All features included">
+ *     Pro
+ *   </Radio>
+ * </RadioGroup>
+ * ```
+ *
+ * @example Disabled
+ * ```tsx
+ * <RadioGroup label="Options" isDisabled>
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</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>
+ * ```
+ *
+ * @example Invalid State
+ * ```tsx
+ * <RadioGroup
+ *   label="Required Selection"
+ *   isRequired
+ *   isInvalid={!hasSelection}
+ *   errorMessage="Please select an option"
+ * >
+ *   <Radio value="a">Option A</Radio>
+ *   <Radio value="b">Option B</Radio>
+ * </RadioGroup>
+ * ```
+ */
+
+import type {
+	RadioGroupProps as HeroRadioGroupProps,
+	RadioProps as HeroRadioProps,
+} from "heroui-native";
+import { Radio as HeroRadio, RadioGroup as HeroRadioGroup } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+// Radio component
+const RadioRoot = forwardRef<ViewRef, HeroRadioProps>((props, ref) => {
+	return <HeroRadio ref={ref} {...props} />;
+});
+RadioRoot.displayName = "Radio";
+
+// Radio Group component
+const RadioGroupComponent = forwardRef<ViewRef, HeroRadioGroupProps>((props, ref) => {
+	return <HeroRadioGroup ref={ref} {...props} />;
+});
+RadioGroupComponent.displayName = "RadioGroup";
+
+export const Radio = RadioRoot;
+export const RadioGroup = RadioGroupComponent;
+
+// Re-export types for convenience
+export type {
+	HeroRadioProps as RadioProps,
+	HeroRadioGroupProps as RadioGroupProps,
+};

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

@@ -0,0 +1,108 @@
+/**
+ * ScrollShadow Component
+ *
+ * A scroll container that displays shadow indicators when content is scrollable.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <ScrollShadow style={{ height: 200 }}>
+ *   <Text>Scrollable content...</Text>
+ *   <Text>More content...</Text>
+ *   <Text>Even more content...</Text>
+ * </ScrollShadow>
+ * ```
+ *
+ * @example Horizontal Scroll
+ * ```tsx
+ * <ScrollShadow
+ *   orientation="horizontal"
+ *   style={{ width: '100%' }}
+ * >
+ *   <View style={{ flexDirection: 'row', gap: 8 }}>
+ *     {items.map(item => (
+ *       <Card key={item.id} style={{ width: 200 }}>
+ *         <Text>{item.title}</Text>
+ *       </Card>
+ *     ))}
+ *   </View>
+ * </ScrollShadow>
+ * ```
+ *
+ * @example Custom Shadow Size
+ * ```tsx
+ * <ScrollShadow
+ *   size={40}
+ *   style={{ height: 300 }}
+ * >
+ *   <Text>Content with larger shadows</Text>
+ * </ScrollShadow>
+ * ```
+ *
+ * @example Hide Scroll Indicator
+ * ```tsx
+ * <ScrollShadow
+ *   hideScrollBar
+ *   style={{ height: 200 }}
+ * >
+ *   <Text>No visible scrollbar</Text>
+ * </ScrollShadow>
+ * ```
+ *
+ * @example In a Card
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <Text>Long List</Text>
+ *   </CardHeader>
+ *   <ScrollShadow style={{ maxHeight: 300 }}>
+ *     <CardBody>
+ *       {items.map(item => (
+ *         <Text key={item.id}>{item.title}</Text>
+ *       ))}
+ *     </CardBody>
+ *   </ScrollShadow>
+ * </Card>
+ * ```
+ *
+ * @example With Offset
+ * ```tsx
+ * <ScrollShadow
+ *   offset={20}
+ *   style={{ height: 200 }}
+ * >
+ *   <Text>Content with offset shadow</Text>
+ * </ScrollShadow>
+ * ```
+ *
+ * @example Visibility Control
+ * ```tsx
+ * <ScrollShadow
+ *   visibility="top"
+ *   style={{ height: 200 }}
+ * >
+ *   <Text>Only top shadow visible</Text>
+ * </ScrollShadow>
+ *
+ * <ScrollShadow
+ *   visibility="bottom"
+ *   style={{ height: 200 }}
+ * >
+ *   <Text>Only bottom shadow visible</Text>
+ * </ScrollShadow>
+ * ```
+ */
+
+import type { ScrollShadowProps as HeroScrollShadowProps } from "heroui-native";
+import { ScrollShadow as HeroScrollShadow } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const ScrollShadowRoot = forwardRef<ViewRef, HeroScrollShadowProps>((props, ref) => {
+	return <HeroScrollShadow ref={ref} {...props} />;
+});
+ScrollShadowRoot.displayName = "ScrollShadow";
+
+export const ScrollShadow = ScrollShadowRoot;
+
+// Re-export types for convenience
+export type { HeroScrollShadowProps as ScrollShadowProps };

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

@@ -0,0 +1,165 @@
+/**
+ * Select Component
+ *
+ * A dropdown select component for choosing from a list of options.
+ *
+ * @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>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [value, setValue] = useState(new Set(['us']));
+ *
+ * <Select
+ *   label="Country"
+ *   selectedKeys={value}
+ *   onSelectionChange={setValue}
+ * >
+ *   <SelectItem key="us">United States</SelectItem>
+ *   <SelectItem key="uk">United Kingdom</SelectItem>
+ * </Select>
+ * ```
+ *
+ * @example With Placeholder
+ * ```tsx
+ * <Select
+ *   label="Status"
+ *   placeholder="Select a status"
+ * >
+ *   <SelectItem key="active">Active</SelectItem>
+ *   <SelectItem key="inactive">Inactive</SelectItem>
+ *   <SelectItem key="pending">Pending</SelectItem>
+ * </Select>
+ * ```
+ *
+ * @example With Description
+ * ```tsx
+ * <Select
+ *   label="Plan"
+ *   description="Choose your subscription plan"
+ * >
+ *   <SelectItem key="free" description="Basic features">
+ *     Free
+ *   </SelectItem>
+ *   <SelectItem key="pro" description="All features">
+ *     Pro
+ *   </SelectItem>
+ * </Select>
+ * ```
+ *
+ * @example Required
+ * ```tsx
+ * <Select
+ *   label="Category"
+ *   isRequired
+ * >
+ *   <SelectItem key="tech">Technology</SelectItem>
+ *   <SelectItem key="health">Health</SelectItem>
+ * </Select>
+ * ```
+ *
+ * @example Disabled
+ * ```tsx
+ * <Select
+ *   label="Disabled Select"
+ *   isDisabled
+ * >
+ *   <SelectItem key="a">Option A</SelectItem>
+ * </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>
+ * ```
+ *
+ * @example Invalid State
+ * ```tsx
+ * <Select
+ *   label="Required Field"
+ *   isInvalid
+ *   errorMessage="Please select an option"
+ * >
+ *   <SelectItem key="a">Option A</SelectItem>
+ *   <SelectItem key="b">Option B</SelectItem>
+ * </Select>
+ * ```
+ *
+ * @example Variants
+ * ```tsx
+ * <Select variant="flat" label="Flat">...</Select>
+ * <Select variant="bordered" label="Bordered">...</Select>
+ * <Select variant="faded" label="Faded">...</Select>
+ * <Select variant="underlined" label="Underlined">...</Select>
+ * ```
+ *
+ * @example Sizes
+ * ```tsx
+ * <Select size="sm" label="Small">...</Select>
+ * <Select size="md" label="Medium">...</Select>
+ * <Select size="lg" label="Large">...</Select>
+ * ```
+ *
+ * @example With Start Content
+ * ```tsx
+ * <Select
+ *   label="Select Country"
+ *   startContent={<GlobeIcon />}
+ * >
+ *   <SelectItem key="us" startContent={<UsFlag />}>
+ *     United States
+ *   </SelectItem>
+ * </Select>
+ * ```
+ *
+ * @example Multiple Selection
+ * ```tsx
+ * <Select
+ *   label="Tags"
+ *   selectionMode="multiple"
+ * >
+ *   <SelectItem key="react">React</SelectItem>
+ *   <SelectItem key="vue">Vue</SelectItem>
+ *   <SelectItem key="angular">Angular</SelectItem>
+ * </Select>
+ * ```
+ */
+
+import type {
+	SelectItemProps as HeroSelectItemProps,
+	SelectProps as HeroSelectProps,
+} from "heroui-native";
+import { Select as HeroSelect, SelectItem as HeroSelectItem } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+// Select component
+const SelectRoot = forwardRef<ViewRef, HeroSelectProps>((props, ref) => {
+	return <HeroSelect ref={ref} {...props} />;
+});
+SelectRoot.displayName = "Select";
+
+// Select Item component
+const SelectItemComponent = forwardRef<ViewRef, HeroSelectItemProps>((props, ref) => {
+	return <HeroSelectItem ref={ref} {...props} />;
+});
+SelectItemComponent.displayName = "SelectItem";
+
+export const Select = SelectRoot;
+export const SelectItem = SelectItemComponent;
+
+// Re-export types for convenience
+export type {
+	HeroSelectProps as SelectProps,
+	HeroSelectItemProps as SelectItemProps,
+};

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

@@ -0,0 +1,97 @@
+/**
+ * SkeletonGroup Component
+ *
+ * A container for grouping multiple skeletons with coordinated loading states.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <SkeletonGroup isLoaded={!isLoading}>
+ *   <Skeleton style={{ width: 200, height: 20 }} />
+ *   <Skeleton style={{ width: 150, height: 20 }} />
+ *   <Skeleton style={{ width: 180, height: 20 }} />
+ * </SkeletonGroup>
+ * ```
+ *
+ * @example User Profile
+ * ```tsx
+ * <SkeletonGroup isLoaded={!isLoading}>
+ *   <View style={{ alignItems: 'center', gap: 12 }}>
+ *     <Skeleton style={{ width: 80, height: 80, borderRadius: 40 }} />
+ *     <Skeleton style={{ width: 120, height: 24 }} />
+ *     <Skeleton style={{ width: 200, height: 16 }} />
+ *   </View>
+ * </SkeletonGroup>
+ * ```
+ *
+ * @example Card Loading State
+ * ```tsx
+ * <Card>
+ *   <CardBody>
+ *     <SkeletonGroup isLoaded={!isLoading}>
+ *       <View style={{ flexDirection: 'row', gap: 12 }}>
+ *         <Skeleton style={{ width: 48, height: 48, borderRadius: 24 }} />
+ *         <View style={{ flex: 1, gap: 8 }}>
+ *           <Skeleton style={{ width: '80%', height: 16 }} />
+ *           <Skeleton style={{ width: '60%', height: 14 }} />
+ *         </View>
+ *       </View>
+ *     </SkeletonGroup>
+ *   </CardBody>
+ * </Card>
+ * ```
+ *
+ * @example List Loading State
+ * ```tsx
+ * <SkeletonGroup isLoaded={!isLoading}>
+ *   {[1, 2, 3, 4, 5].map(i => (
+ *     <View key={i} style={{ padding: 12 }}>
+ *       <Skeleton style={{ width: '100%', height: 60 }} />
+ *     </View>
+ *   ))}
+ * </SkeletonGroup>
+ * ```
+ *
+ * @example Staggered Animation
+ * ```tsx
+ * <SkeletonGroup
+ *   isLoaded={!isLoading}
+ *   disableAnimation={false}
+ * >
+ *   <Skeleton style={{ width: '90%', height: 16 }} />
+ *   <Skeleton style={{ width: '75%', height: 16, marginTop: 8 }} />
+ *   <Skeleton style={{ width: '85%', height: 16, marginTop: 8 }} />
+ * </SkeletonGroup>
+ * ```
+ *
+ * @example With Real Content
+ * ```tsx
+ * <SkeletonGroup isLoaded={data !== undefined}>
+ *   {data ? (
+ *     <View>
+ *       <Text>{data.title}</Text>
+ *       <Text>{data.description}</Text>
+ *     </View>
+ *   ) : (
+ *     <View>
+ *       <Skeleton style={{ width: 200, height: 24 }} />
+ *       <Skeleton style={{ width: 300, height: 16, marginTop: 8 }} />
+ *     </View>
+ *   )}
+ * </SkeletonGroup>
+ * ```
+ */
+
+import type { SkeletonGroupProps as HeroSkeletonGroupProps } from "heroui-native";
+import { SkeletonGroup as HeroSkeletonGroup } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const SkeletonGroupRoot = forwardRef<ViewRef, HeroSkeletonGroupProps>((props, ref) => {
+	return <HeroSkeletonGroup ref={ref} {...props} />;
+});
+SkeletonGroupRoot.displayName = "SkeletonGroup";
+
+export const SkeletonGroup = SkeletonGroupRoot;
+
+// Re-export types for convenience
+export type { HeroSkeletonGroupProps as SkeletonGroupProps };

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

@@ -0,0 +1,87 @@
+/**
+ * Skeleton Component
+ *
+ * A placeholder loading component that mimics content shapes.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * <Skeleton style={{ width: 200, height: 20 }} />
+ * ```
+ *
+ * @example Content Placeholder
+ * ```tsx
+ * {isLoading ? (
+ *   <Skeleton style={{ width: '100%', height: 40 }} />
+ * ) : (
+ *   <Text>{data.title}</Text>
+ * )}
+ * ```
+ *
+ * @example Card Skeleton
+ * ```tsx
+ * <Card>
+ *   <CardBody>
+ *     <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>
+ * ```
+ *
+ * @example List Skeleton
+ * ```tsx
+ * {[1, 2, 3].map(i => (
+ *   <View key={i} style={{ flexDirection: 'row', gap: 12, padding: 8 }}>
+ *     <Skeleton style={{ width: 48, height: 48, borderRadius: 24 }} />
+ *     <View style={{ flex: 1 }}>
+ *       <Skeleton style={{ width: '70%', height: 16 }} />
+ *       <Skeleton style={{ width: '50%', height: 14, marginTop: 4 }} />
+ *     </View>
+ *   </View>
+ * ))}
+ * ```
+ *
+ * @example Profile Skeleton
+ * ```tsx
+ * <View style={{ alignItems: 'center', gap: 12 }}>
+ *   <Skeleton style={{ width: 80, height: 80, borderRadius: 40 }} />
+ *   <Skeleton style={{ width: 120, height: 20 }} />
+ *   <Skeleton style={{ width: 200, height: 14 }} />
+ * </View>
+ * ```
+ *
+ * @example Without Animation
+ * ```tsx
+ * <Skeleton
+ *   isLoaded={!isLoading}
+ *   style={{ width: 200, height: 20 }}
+ * >
+ *   <Text>Content when loaded</Text>
+ * </Skeleton>
+ * ```
+ *
+ * @example Custom Animation
+ * ```tsx
+ * <Skeleton
+ *   disableAnimation={false}
+ *   style={{ width: 200, height: 20 }}
+ * />
+ * ```
+ */
+
+import type { SkeletonProps as HeroSkeletonProps } from "heroui-native";
+import { Skeleton as HeroSkeleton } from "heroui-native";
+import { forwardRef } from "react";
+import type { View as ViewRef } from "react-native";
+
+const SkeletonRoot = forwardRef<ViewRef, HeroSkeletonProps>((props, ref) => {
+	return <HeroSkeleton ref={ref} {...props} />;
+});
+SkeletonRoot.displayName = "Skeleton";
+
+export const Skeleton = SkeletonRoot;
+
+// Re-export types for convenience
+export type { HeroSkeletonProps as SkeletonProps };