@gv-tech/design-system 2.4.0 → 2.5.0

package/apps/native-playground/src/app/App.tsx

@@ -0,0 +1,842 @@
+import '../global.css';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertTitle,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  Skeleton,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Text,
+  Textarea,
+  ThemeProvider,
+  ThemeToggle,
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@gv-tech/ui-native';
+import { Bell, Bold, Italic, Underline } from 'lucide-react-native';
+import * as React from 'react';
+import { Alert as RNAlert, ScrollView, View } from 'react-native';
+
+// ─── Section Header ──────────────────────────────────────────────────────────
+function SectionHeader({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <View className="mb-4">
+      <Text variant="h2" className="font-bold text-foreground">
+        {title}
+      </Text>
+      {subtitle && (
+        <Text variant="caption" className="text-muted-foreground mt-1">
+          {subtitle}
+        </Text>
+      )}
+      <Separator className="mt-3" />
+    </View>
+  );
+}
+
+// ─── Forms Screen ─────────────────────────────────────────────────────────────
+function FormsScreen() {
+  const [name, setName] = React.useState('');
+  const [bio, setBio] = React.useState('');
+  const [checked, setChecked] = React.useState(false);
+  const [switchOn, setSwitchOn] = React.useState(false);
+  const [radioValue, setRadioValue] = React.useState('option-one');
+  const [selectValue, setSelectValue] = React.useState('');
+  const [toggleActive, setToggleActive] = React.useState(false);
+  const [toggleGroup, setToggleGroup] = React.useState<string[]>([]);
+
+  return (
+    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
+      <SectionHeader title="Forms" subtitle="Input, Checkbox, Switch, RadioGroup, Select, Textarea, Toggle" />
+
+      {/* Input */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Input</CardTitle>
+          <CardDescription>Text input with label</CardDescription>
+        </CardHeader>
+        <CardContent className="gap-3">
+          <View className="gap-2">
+            <Label nativeID="name-input">Full Name</Label>
+            <Input placeholder="Enter your name" value={name} onChangeText={setName} aria-labelledby="name-input" />
+          </View>
+          {name.length > 0 && (
+            <Text variant="caption" className="text-muted-foreground">
+              Hello, {name}!
+            </Text>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Textarea */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Textarea</CardTitle>
+          <CardDescription>Multi-line text input</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Textarea
+            placeholder="Tell us about yourself..."
+            value={bio}
+            onChangeText={setBio}
+            numberOfLines={4}
+            className="min-h-[100px]"
+          />
+          <Text variant="caption" className="text-muted-foreground mt-2">
+            {bio.length} characters
+          </Text>
+        </CardContent>
+      </Card>
+
+      {/* Checkbox & Switch */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Checkbox & Switch</CardTitle>
+        </CardHeader>
+        <CardContent className="gap-4">
+          <View className="flex-row items-center gap-3">
+            <Checkbox checked={checked} onCheckedChange={setChecked} id="terms" />
+            <Label onPress={() => setChecked(!checked)}>Accept terms and conditions</Label>
+          </View>
+          <View className="flex-row items-center justify-between">
+            <Label>Email notifications</Label>
+            <Switch checked={switchOn} onCheckedChange={setSwitchOn} />
+          </View>
+        </CardContent>
+      </Card>
+
+      {/* RadioGroup */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Radio Group</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <RadioGroup value={radioValue} onValueChange={setRadioValue} className="gap-3">
+            {[
+              { value: 'option-one', label: 'Option One' },
+              { value: 'option-two', label: 'Option Two' },
+              { value: 'option-three', label: 'Option Three' },
+            ].map((opt) => (
+              <View key={opt.value} className="flex-row items-center gap-3">
+                <RadioGroupItem value={opt.value} id={opt.value} />
+                <Label onPress={() => setRadioValue(opt.value)}>{opt.label}</Label>
+              </View>
+            ))}
+          </RadioGroup>
+          <Text variant="caption" className="text-muted-foreground mt-3">
+            Selected: {radioValue}
+          </Text>
+        </CardContent>
+      </Card>
+
+      {/* Select */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Select</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Select
+            value={selectValue ? { value: selectValue, label: selectValue } : undefined}
+            onValueChange={(opt) => setSelectValue(opt?.value ?? '')}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Choose a framework…" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="react-native" label="React Native" />
+              <SelectItem value="expo" label="Expo" />
+              <SelectItem value="flutter" label="Flutter" />
+              <SelectItem value="swiftui" label="SwiftUI" />
+            </SelectContent>
+          </Select>
+        </CardContent>
+      </Card>
+
+      {/* Toggle */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Toggle & Toggle Group</CardTitle>
+        </CardHeader>
+        <CardContent className="gap-4">
+          <View className="flex-row items-center gap-3">
+            <Toggle pressed={toggleActive} onPressedChange={setToggleActive}>
+              <Bell size={16} className="text-foreground" />
+            </Toggle>
+            <Text variant="body" className="text-muted-foreground">
+              {toggleActive ? 'Notifications on' : 'Notifications off'}
+            </Text>
+          </View>
+          <View>
+            <Text variant="caption" className="text-muted-foreground mb-2">
+              Text formatting
+            </Text>
+            <ToggleGroup
+              type="multiple"
+              value={toggleGroup}
+              onValueChange={setToggleGroup}
+              className="justify-start gap-1"
+            >
+              <ToggleGroupItem value="bold">
+                <Bold size={16} className="text-foreground" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="italic">
+                <Italic size={16} className="text-foreground" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="underline">
+                <Underline size={16} className="text-foreground" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </View>
+        </CardContent>
+      </Card>
+
+      {/* Button variants */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Button</CardTitle>
+          <CardDescription>All variants and sizes</CardDescription>
+        </CardHeader>
+        <CardContent className="gap-3">
+          <View className="flex-row flex-wrap gap-2">
+            {(['default', 'secondary', 'destructive', 'outline', 'ghost'] as const).map((variant) => (
+              <Button key={variant} variant={variant} onPress={() => RNAlert.alert('Button', `Pressed: ${variant}`)}>
+                <Text>{variant.charAt(0).toUpperCase() + variant.slice(1)}</Text>
+              </Button>
+            ))}
+          </View>
+          <View className="flex-row gap-2">
+            <Button size="sm" className="flex-1">
+              <Text>Small</Text>
+            </Button>
+            <Button size="default" className="flex-1">
+              <Text>Default</Text>
+            </Button>
+            <Button size="lg" className="flex-1">
+              <Text>Large</Text>
+            </Button>
+          </View>
+        </CardContent>
+      </Card>
+    </ScrollView>
+  );
+}
+
+// ─── Display Screen ────────────────────────────────────────────────────────────
+function DisplayScreen() {
+  return (
+    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
+      <SectionHeader title="Data Display" subtitle="Text, Badge, Avatar, Card, Accordion, Table, Skeleton" />
+
+      {/* Typography */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Typography</CardTitle>
+        </CardHeader>
+        <CardContent className="gap-2">
+          {(['h1', 'h2', 'h3', 'h4', 'body', 'caption'] as const).map((variant) => (
+            <Text key={variant} variant={variant} className="text-foreground">
+              {variant.toUpperCase()} — The quick brown fox
+            </Text>
+          ))}
+        </CardContent>
+      </Card>
+
+      {/* Badges */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Badge</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <View className="flex-row flex-wrap gap-2">
+            {(['default', 'secondary', 'destructive', 'outline'] as const).map((variant) => (
+              <Badge key={variant} variant={variant}>
+                <Text>{variant}</Text>
+              </Badge>
+            ))}
+          </View>
+        </CardContent>
+      </Card>
+
+      {/* Avatar */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Avatar</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <View className="flex-row gap-3 items-center">
+            <Avatar alt="GV Tech">
+              <AvatarImage source={{ uri: 'https://github.com/eng618.png' }} />
+              <AvatarFallback>
+                <Text>GV</Text>
+              </AvatarFallback>
+            </Avatar>
+            <Avatar alt="Fallback">
+              <AvatarImage source={{ uri: 'https://invalid-url-to-show-fallback' }} />
+              <AvatarFallback>
+                <Text>FB</Text>
+              </AvatarFallback>
+            </Avatar>
+            <View className="gap-1">
+              <Text variant="body" className="font-semibold text-foreground">
+                Eric Garcia
+              </Text>
+              <Text variant="caption" className="text-muted-foreground">
+                @eng618
+              </Text>
+            </View>
+          </View>
+        </CardContent>
+      </Card>
+
+      {/* Accordion */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Accordion</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Accordion type="single" collapsible defaultValue="item-1">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>
+                <Text className="text-foreground font-medium">Is it accessible?</Text>
+              </AccordionTrigger>
+              <AccordionContent>
+                <Text className="text-muted-foreground">
+                  Yes. It follows the WAI-ARIA design pattern and uses rn-primitives for native accessibility.
+                </Text>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+              <AccordionTrigger>
+                <Text className="text-foreground font-medium">Is it animated?</Text>
+              </AccordionTrigger>
+              <AccordionContent>
+                <Text className="text-muted-foreground">
+                  Yes. Uses react-native-reanimated for smooth height and chevron animations.
+                </Text>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3">
+              <AccordionTrigger>
+                <Text className="text-foreground font-medium">Can I customize it?</Text>
+              </AccordionTrigger>
+              <AccordionContent>
+                <Text className="text-muted-foreground">
+                  Absolutely. Use className and NativeWind to apply any styles.
+                </Text>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </CardContent>
+      </Card>
+
+      {/* Table */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Table</CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 overflow-hidden">
+          <Table>
+            <TableCaption>GV Tech Component Status</TableCaption>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Component</TableHead>
+                <TableHead>Web</TableHead>
+                <TableHead>Native</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {[
+                { name: 'Button', web: '✅', native: '✅' },
+                { name: 'Card', web: '✅', native: '✅' },
+                { name: 'Input', web: '✅', native: '✅' },
+                { name: 'Dialog', web: '✅', native: '✅' },
+                { name: 'Carousel', web: '✅', native: '🚫' },
+              ].map((row) => (
+                <TableRow key={row.name}>
+                  <TableCell>
+                    <Text className="text-foreground">{row.name}</Text>
+                  </TableCell>
+                  <TableCell>
+                    <Text>{row.web}</Text>
+                  </TableCell>
+                  <TableCell>
+                    <Text>{row.native}</Text>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* Skeleton */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Skeleton</CardTitle>
+          <CardDescription>Animated loading placeholders</CardDescription>
+        </CardHeader>
+        <CardContent className="gap-3">
+          <View className="flex-row items-center gap-4">
+            <Skeleton className="h-12 w-12 rounded-full" />
+            <View className="gap-2 flex-1">
+              <Skeleton className="h-4 w-[80%]" />
+              <Skeleton className="h-4 w-[60%]" />
+            </View>
+          </View>
+          <Skeleton className="h-24 w-full rounded-lg" />
+        </CardContent>
+      </Card>
+
+      {/* Tabs */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Tabs</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="account">
+            <TabsList className="flex-row w-full">
+              <TabsTrigger value="account" className="flex-1">
+                <Text>Account</Text>
+              </TabsTrigger>
+              <TabsTrigger value="password" className="flex-1">
+                <Text>Password</Text>
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="account" className="mt-4">
+              <Text className="text-muted-foreground">
+                Update your account settings here. Changes take effect immediately.
+              </Text>
+            </TabsContent>
+            <TabsContent value="password" className="mt-4">
+              <Text className="text-muted-foreground">
+                Change your password here. You'll be logged out after saving.
+              </Text>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </ScrollView>
+  );
+}
+
+// ─── Feedback Screen ───────────────────────────────────────────────────────────
+function FeedbackScreen() {
+  return (
+    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
+      <SectionHeader title="Feedback" subtitle="Alert, AlertDialog, Dialog, Sheet, Tooltip, Toast, Collapsible" />
+
+      {/* Alert variants */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Alert</CardTitle>
+        </CardHeader>
+        <CardContent className="gap-3">
+          <Alert>
+            <AlertTitle>Default Alert</AlertTitle>
+            <AlertDescription>This is a default informational alert message.</AlertDescription>
+          </Alert>
+          <Alert variant="destructive">
+            <AlertTitle>Destructive Alert</AlertTitle>
+            <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+          </Alert>
+          <Alert variant="warning">
+            <AlertTitle>Warning</AlertTitle>
+            <AlertDescription>Your session expires in 5 minutes.</AlertDescription>
+          </Alert>
+          <Alert variant="info">
+            <AlertTitle>Info</AlertTitle>
+            <AlertDescription>A new version is available. Update now.</AlertDescription>
+          </Alert>
+        </CardContent>
+      </Card>
+
+      {/* AlertDialog */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Alert Dialog</CardTitle>
+          <CardDescription>A modal that requires a response</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive">
+                <Text>Delete Account</Text>
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete your account and remove all your data.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>
+                  <Text>Cancel</Text>
+                </AlertDialogCancel>
+                <AlertDialogAction>
+                  <Text>Continue</Text>
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </CardContent>
+      </Card>
+
+      {/* Dialog */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Dialog</CardTitle>
+          <CardDescription>Standard modal dialog</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="outline">
+                <Text>Open Dialog</Text>
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Edit Profile</DialogTitle>
+                <DialogDescription>Make changes to your profile here. Click save when done.</DialogDescription>
+              </DialogHeader>
+              <View className="gap-3 py-2">
+                <View className="gap-2">
+                  <Label nativeID="dialog-name">Name</Label>
+                  <Input placeholder="Your name" aria-labelledby="dialog-name" />
+                </View>
+              </View>
+              <DialogFooter>
+                <Button>
+                  <Text>Save changes</Text>
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </CardContent>
+      </Card>
+
+      {/* Sheet */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Sheet</CardTitle>
+          <CardDescription>Slides in from the side</CardDescription>
+        </CardHeader>
+        <CardContent className="flex-row gap-2 flex-wrap">
+          {(['bottom', 'right', 'left'] as const).map((side) => (
+            <Sheet key={side}>
+              <SheetTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <Text className="capitalize">{side}</Text>
+                </Button>
+              </SheetTrigger>
+              <SheetContent side={side}>
+                <SheetHeader>
+                  <SheetTitle>Sheet ({side})</SheetTitle>
+                  <SheetDescription>This sheet slides in from the {side}.</SheetDescription>
+                </SheetHeader>
+                <View className="flex-1 py-4">
+                  <Text className="text-muted-foreground">Add your content here.</Text>
+                </View>
+                <SheetFooter>
+                  <Button>
+                    <Text>Save</Text>
+                  </Button>
+                </SheetFooter>
+              </SheetContent>
+            </Sheet>
+          ))}
+        </CardContent>
+      </Card>
+
+      {/* Tooltip */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Tooltip</CardTitle>
+          <CardDescription>Long-press to reveal</CardDescription>
+        </CardHeader>
+        <CardContent className="flex-row gap-3 flex-wrap">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <Text>Hover me</Text>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <Text>Long-press on native to see this tooltip</Text>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </CardContent>
+      </Card>
+
+      {/* Collapsible */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Collapsible</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Collapsible>
+            <CollapsibleTrigger asChild>
+              <Button variant="outline" className="w-full">
+                <Text>Toggle content</Text>
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <View className="mt-3 gap-2">
+                <Text className="text-muted-foreground text-sm">
+                  This content is revealed when the collapsible is open. It can contain any child components.
+                </Text>
+              </View>
+            </CollapsibleContent>
+          </Collapsible>
+        </CardContent>
+      </Card>
+    </ScrollView>
+  );
+}
+
+// ─── Layout Screen ─────────────────────────────────────────────────────────────
+function LayoutScreen() {
+  return (
+    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
+      <SectionHeader title="Layout & Theme" subtitle="Card, Separator, ThemeToggle" />
+
+      {/* Theme Toggle */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Theme Toggle</CardTitle>
+          <CardDescription>Switch between light, dark, and system</CardDescription>
+        </CardHeader>
+        <CardContent className="flex-row items-center justify-between">
+          <Text className="text-foreground">Current theme</Text>
+          <ThemeToggle />
+        </CardContent>
+      </Card>
+
+      {/* Card Variants */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Card</CardTitle>
+          <CardDescription>Full card with header, content, and footer</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text className="text-muted-foreground text-sm">
+            Cards are the primary surface for grouping related content. They support header, content, description, and
+            footer sub-components.
+          </Text>
+        </CardContent>
+        <CardFooter className="flex-row gap-3">
+          <Button variant="outline" className="flex-1">
+            <Text>Cancel</Text>
+          </Button>
+          <Button className="flex-1">
+            <Text>Confirm</Text>
+          </Button>
+        </CardFooter>
+      </Card>
+
+      {/* Separator */}
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Separator</CardTitle>
+        </CardHeader>
+        <CardContent className="gap-3">
+          <Text className="text-foreground">Above separator</Text>
+          <Separator />
+          <Text className="text-foreground">Below separator</Text>
+          <View className="flex-row items-center gap-3">
+            <Text className="text-muted-foreground">Left</Text>
+            <Separator orientation="vertical" className="h-4" />
+            <Text className="text-muted-foreground">Center</Text>
+            <Separator orientation="vertical" className="h-4" />
+            <Text className="text-muted-foreground">Right</Text>
+          </View>
+        </CardContent>
+      </Card>
+
+      {/* Component Count */}
+      <Card className="mb-4 bg-primary/5">
+        <CardContent className="pt-6">
+          <View className="items-center gap-3">
+            <Text variant="h1" className="text-primary font-bold text-center">
+              27+
+            </Text>
+            <Text variant="body" className="text-center text-foreground font-medium">
+              Real Native Components
+            </Text>
+            <Text variant="caption" className="text-center text-muted-foreground">
+              All built with NativeWind + RN Primitives + Reanimated, sharing contracts with the web library.
+            </Text>
+            <View className="flex-row gap-2 flex-wrap justify-center mt-2">
+              {[
+                'Button',
+                'Card',
+                'Input',
+                'Checkbox',
+                'Switch',
+                'RadioGroup',
+                'Select',
+                'Tabs',
+                'Accordion',
+                'Alert',
+                'Dialog',
+                'Sheet',
+                'Toast',
+                'Tooltip',
+                'Badge',
+                'Avatar',
+                'Skeleton',
+                'Table',
+                'Text',
+                'Textarea',
+                'Toggle',
+                'ToggleGroup',
+                'Separator',
+                'Collapsible',
+                'Label',
+                'AlertDialog',
+                'ThemeToggle',
+              ].map((name) => (
+                <Badge key={name} variant="secondary">
+                  <Text className="text-xs">{name}</Text>
+                </Badge>
+              ))}
+            </View>
+          </View>
+        </CardContent>
+      </Card>
+    </ScrollView>
+  );
+}
+
+// ─── Root App ─────────────────────────────────────────────────────────────────
+export const App = () => {
+  return (
+    <ThemeProvider>
+      <TooltipProvider>
+        <View className="flex-1 bg-background">
+          {/* Header */}
+          <View className="pt-12 pb-3 px-4 border-b border-border bg-background">
+            <View className="flex-row items-center justify-between">
+              <View className="flex-row items-center gap-2">
+                <Text variant="h3" className="font-bold text-foreground">
+                  GV Native
+                </Text>
+                <Badge variant="outline">
+                  <Text className="text-xs">Alpha</Text>
+                </Badge>
+              </View>
+              <ThemeToggle />
+            </View>
+            <Text variant="caption" className="text-muted-foreground mt-1">
+              Component showcase for @gv-tech/ui-native
+            </Text>
+          </View>
+
+          {/* Main Tabs */}
+          <Tabs defaultValue="forms" className="flex-1">
+            <View className="border-b border-border bg-background px-4">
+              <TabsList className="flex-row bg-transparent p-0 h-12">
+                {(['forms', 'display', 'feedback', 'layout'] as const).map((tab) => (
+                  <TabsTrigger
+                    key={tab}
+                    value={tab}
+                    className="flex-1 capitalize rounded-none border-b-2 border-transparent data-[state=active]:border-primary bg-transparent"
+                  >
+                    <Text className="capitalize text-sm">{tab}</Text>
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </View>
+
+            <TabsContent value="forms" className="flex-1 mt-0">
+              <FormsScreen />
+            </TabsContent>
+            <TabsContent value="display" className="flex-1 mt-0">
+              <DisplayScreen />
+            </TabsContent>
+            <TabsContent value="feedback" className="flex-1 mt-0">
+              <FeedbackScreen />
+            </TabsContent>
+            <TabsContent value="layout" className="flex-1 mt-0">
+              <LayoutScreen />
+            </TabsContent>
+          </Tabs>
+        </View>
+      </TooltipProvider>
+    </ThemeProvider>
+  );
+};
+
+export default App;