Add new Tamagui Expo project with custom theme

tamagui-expo-app/.gitignore

@@ -0,0 +1,43 @@
+# Node
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# Expo
+.expo/
+.expo-shared/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# Debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# Typescript
+*.tsbuildinfo
+
+# Misc
+.DS_Store
+*.pem
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~

tamagui-expo-app/App.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import { StatusBar } from 'expo-status-bar'
+import { NavigationContainer } from '@react-navigation/native'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { TamaguiProvider, Theme, YStack, Text } from 'tamagui'
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'
+import tamaguiConfig from './src/theme/theme'
+import { HomePage } from './src/screens/HomePage'
+import { DemoPage } from './src/screens/DemoPage'
+
+const Tab = createBottomTabNavigator()
+
+export default function App() {
+  const [isDark, setIsDark] = useState(true)
+
+  return (
+    <SafeAreaProvider>
+      <TamaguiProvider config={tamaguiConfig}>
+        <Theme name={isDark ? 'dark' : 'light'}>
+          <SafeAreaView style={{ flex: 1 }}>
+            <YStack flex={1} backgroundColor="$bg">
+              <StatusBar style={isDark ? 'light' : 'dark'} />
+
+              <NavigationContainer
+                theme={{
+                  dark: isDark,
+                  colors: {
+                    primary: '#00B4DB',
+                    background: isDark ? '#0b1f32' : '#f6f8fb',
+                    card: isDark ? '#0b1f32' : '#ffffff',
+                    text: isDark ? '#e6f6ff' : '#101828',
+                    border: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)',
+                    notification: '#00B4DB',
+                  },
+                }}
+              >
+                <Tab.Navigator
+                  screenOptions={{
+                    headerShown: false,
+                    tabBarStyle: {
+                      backgroundColor: isDark ? '#0b1f32' : '#ffffff',
+                      borderTopColor: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)',
+                      borderTopWidth: 1,
+                      paddingBottom: 8,
+                      paddingTop: 8,
+                      height: 60,
+                    },
+                    tabBarActiveTintColor: '#00B4DB',
+                    tabBarInactiveTintColor: isDark ? 'rgba(230,246,255,0.5)' : 'rgba(16,24,40,0.5)',
+                    tabBarLabelStyle: {
+                      fontSize: 12,
+                      fontWeight: '600',
+                    },
+                  }}
+                >
+                  <Tab.Screen
+                    name="Home"
+                    options={{
+                      tabBarIcon: ({ color, size }) => (
+                        <YStack
+                          width={size}
+                          height={size}
+                          borderRadius="$round"
+                          backgroundColor={color}
+                          opacity={0.2}
+                        />
+                      ),
+                    }}
+                  >
+                    {() => (
+                      <HomePage
+                        isDark={isDark}
+                        onToggleTheme={setIsDark}
+                        onNavigateToDemo={() => {}}
+                      />
+                    )}
+                  </Tab.Screen>
+
+                  <Tab.Screen
+                    name="Components"
+                    component={DemoPage}
+                    options={{
+                      tabBarIcon: ({ color, size }) => (
+                        <YStack
+                          width={size}
+                          height={size}
+                          borderRadius="$4"
+                          backgroundColor={color}
+                          opacity={0.2}
+                        />
+                      ),
+                    }}
+                  />
+                </Tab.Navigator>
+              </NavigationContainer>
+            </YStack>
+          </SafeAreaView>
+        </Theme>
+      </TamaguiProvider>
+    </SafeAreaProvider>
+  )
+}

tamagui-expo-app/README.md

@@ -0,0 +1,162 @@
+# Tamagui Expo App
+
+A beautiful React Native app built with Expo and Tamagui, featuring a stunning teal → blue gradient theme and a comprehensive UI component library.
+
+## Features
+
+- **Tamagui UI Framework**: Fast, performant UI components with zero-runtime styling
+- **Custom Theme System**: Beautiful gradient theme with teal → blue palette
+- **Complete Component Library**: Buttons, inputs, cards, sliders, switches, and more
+- **Tab Navigation**: Smooth navigation between Home and Components showcase
+- **Dark/Light Mode**: Seamless theme switching support
+- **Gradient Components**: Stunning gradient cards and buttons
+- **TypeScript**: Full type safety and IntelliSense
+- **Expo**: Easy development and deployment across iOS, Android, and Web
+- **High-End Design**: Clean, professional UI with attention to detail
+
+## Theme Colors
+
+- **Primary A**: `#00B4DB` (Teal)
+- **Primary B**: `#0083B0` (Deep Blue)
+- **Hover States**: Lighter gradient variations
+- **Press States**: Darker gradient variations
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v18 or newer)
+- npm or yarn
+- Expo CLI (optional, but recommended)
+
+### Installation
+
+1. Install dependencies:
+```bash
+cd tamagui-expo-app
+npm install
+```
+
+2. Start the development server:
+```bash
+npm start
+```
+
+3. Run on your platform:
+```bash
+npm run ios     # Run on iOS simulator
+npm run android # Run on Android emulator
+npm run web     # Run on web browser
+```
+
+## Project Structure
+
+```
+tamagui-expo-app/
+├── src/
+│   ├── components/
+│   │   ├── CubeButton.tsx       # Gradient button with interactive states
+│   │   ├── StyledCard.tsx       # Card component with variants
+│   │   ├── StyledInput.tsx      # Form input with validation
+│   │   └── GradientCard.tsx     # Gradient background card
+│   ├── screens/
+│   │   ├── HomePage.tsx         # Home screen with theme toggle
+│   │   └── DemoPage.tsx         # Complete UI showcase
+│   └── theme/
+│       └── theme.ts             # Tamagui theme configuration
+├── App.tsx                      # Main app with navigation
+├── package.json
+├── tsconfig.json
+├── babel.config.js
+└── app.json
+```
+
+## UI Components
+
+### CubeButton
+Interactive gradient button with hover and press states:
+```tsx
+<CubeButton
+  title="Click Me"
+  onPress={() => console.log('Pressed!')}
+  disabled={false}
+/>
+```
+
+### StyledCard
+Versatile card component with multiple variants:
+```tsx
+<StyledCard variant="elevated">
+  <Text>Card content</Text>
+</StyledCard>
+```
+Variants: `default`, `elevated`, `outlined`
+
+### GradientCard
+Beautiful gradient background card:
+```tsx
+<GradientCard variant="base">
+  <Text color="white">Gradient content</Text>
+</GradientCard>
+```
+Variants: `base`, `hover`, `press`
+
+### StyledInput
+Form input with labels and validation:
+```tsx
+<StyledInput
+  label="Email"
+  placeholder="Enter email"
+  value={email}
+  onChangeText={setEmail}
+  error="Invalid email"
+/>
+```
+
+## Screens
+
+### HomePage
+- Interactive counter demo
+- Theme toggle (dark/light mode)
+- Quick stats showcase
+- Feature list
+- Navigation to component library
+
+### DemoPage (Components Showcase)
+A comprehensive showcase featuring:
+- **Gradient Cards**: Multiple gradient card examples
+- **Buttons**: Primary, outlined, text, and disabled states
+- **Form Inputs**: Text, password, multiline, and validation states
+- **Switches & Controls**: Toggle switches with descriptions
+- **Sliders & Progress**: Interactive sliders and progress bars
+- **Avatars & Badges**: User avatars and status indicators
+- **Card Variants**: Different card styles and elevations
+- **Statistics Grid**: Beautiful stat displays
+- **Typography**: Complete type scale showcase
+
+## Theme System
+
+The theme is configured in `src/theme/theme.ts` and includes:
+- **Color Tokens**: Complete color palette with gradient variations
+- **Spacing**: Consistent spacing scale (0-48px)
+- **Sizing**: Component size tokens
+- **Radius**: Border radius tokens (0-999)
+- **Typography**: Font families, sizes, and weights
+- **Shorthands**: px, py, mx, my for faster development
+- **Theme Variants**: Dark and light mode support
+
+## Customization
+
+To customize the theme, edit `src/theme/theme.ts`:
+
+```typescript
+const colors = {
+  primaryA: '#00B4DB', // Change these colors
+  primaryB: '#0083B0',
+  // ...
+}
+```
+
+## License
+
+MIT

tamagui-expo-app/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "Tamagui Expo App",
+    "slug": "tamagui-expo-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#0b1f32"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.tamagui.expoapp"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#0b1f32"
+      },
+      "package": "com.tamagui.expoapp"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+    }
+  }
+}

tamagui-expo-app/assets/.gitkeep

@@ -0,0 +1,2 @@
+# Placeholder for assets
+# Add icon.png, splash.png, adaptive-icon.png, and favicon.png here

tamagui-expo-app/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        '@tamagui/babel-plugin',
+        {
+          components: ['tamagui'],
+          config: './src/theme/theme.ts',
+          logTimings: true,
+        },
+      ],
+      'react-native-reanimated/plugin',
+    ],
+  };
+};