@urbint/cl 1.0.1

package/App.tsx

@@ -0,0 +1,422 @@
+/**
+ * Urbint Component Library - Documentation Website
+ */
+
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  Pressable,
+} from 'react-native';
+
+import {
+  Sidebar,
+  IntroductionPage,
+  InstallationPage,
+  ColorsPage,
+  ThemingPage,
+  ComponentPage,
+  colors,
+  spacing,
+} from './docs';
+
+export default function App() {
+  const [activePage, setActivePage] = useState('introduction');
+  const [expandedSections, setExpandedSections] = useState(['getting-started', 'components']);
+
+  const handleNavigate = (pageId: string) => {
+    setActivePage(pageId);
+  };
+
+  const handleToggleSection = (sectionId: string) => {
+    setExpandedSections(prev => 
+      prev.includes(sectionId)
+        ? prev.filter(id => id !== sectionId)
+        : [...prev, sectionId]
+    );
+  };
+
+  const renderContent = () => {
+    switch (activePage) {
+      // Getting Started
+      case 'introduction':
+        return <IntroductionPage />;
+      case 'installation':
+        return <InstallationPage />;
+      case 'quick-start':
+        return <QuickStartPage />;
+      
+      // Design System
+      case 'colors':
+        return <ColorsPage />;
+      case 'typography':
+        return <TypographyPage />;
+      case 'spacing':
+        return <SpacingPage />;
+      case 'elevation':
+        return <ElevationPage />;
+      
+      // Customization
+      case 'theming':
+        return <ThemingPage />;
+      case 'dark-mode':
+        return <DarkModePage />;
+      case 'custom-tokens':
+        return <CustomTokensPage />;
+      
+      // Individual Components (new flat navigation)
+      default:
+        if (activePage.startsWith('component-')) {
+          const componentName = activePage.replace('component-', '');
+          return <ComponentPage componentId={componentName} />;
+        }
+        return <IntroductionPage />;
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.layout}>
+        {/* Sidebar */}
+        <Sidebar
+          activePage={activePage}
+          onNavigate={handleNavigate}
+          expandedSections={expandedSections}
+          onToggleSection={handleToggleSection}
+        />
+
+        {/* Main Content */}
+        <ScrollView 
+          style={styles.main} 
+          contentContainerStyle={styles.mainContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {renderContent()}
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+// Placeholder pages
+const QuickStartPage = () => (
+  <View style={styles.page}>
+    <Text style={styles.pageTitle}>Quick Start</Text>
+    <Text style={styles.pageSubtitle}>Get up and running in 5 minutes</Text>
+    
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>1. Create a new Expo project</Text>
+      <View style={styles.codeBlock}>
+        <Text style={styles.code}>npx create-expo-app my-app{'\n'}cd my-app</Text>
+      </View>
+    </View>
+
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>2. Install dependencies</Text>
+      <View style={styles.codeBlock}>
+        <Text style={styles.code}>npm install @urbint/component-library react-native-unistyles</Text>
+      </View>
+    </View>
+
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>3. Import and use components</Text>
+      <View style={styles.codeBlock}>
+        <Text style={styles.code}>{`import { Button, Text } from '@urbint/component-library';
+
+<Button variant="primary">Get Started</Button>`}</Text>
+      </View>
+    </View>
+  </View>
+);
+
+const TypographyPage = () => (
+  <View style={styles.page}>
+    <Text style={styles.pageTitle}>Typography</Text>
+    <Text style={styles.pageSubtitle}>Typography scale and font styles for consistent text rendering</Text>
+    
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Type Scale</Text>
+      <View style={styles.typeList}>
+        <View style={styles.typeItem}>
+          <Text style={{ fontSize: 32, fontWeight: '700' }}>H1 Heading</Text>
+          <Text style={styles.typeLabel}>32px / Bold</Text>
+        </View>
+        <View style={styles.typeItem}>
+          <Text style={{ fontSize: 24, fontWeight: '600' }}>H2 Heading</Text>
+          <Text style={styles.typeLabel}>24px / SemiBold</Text>
+        </View>
+        <View style={styles.typeItem}>
+          <Text style={{ fontSize: 20, fontWeight: '600' }}>H3 Heading</Text>
+          <Text style={styles.typeLabel}>20px / SemiBold</Text>
+        </View>
+        <View style={styles.typeItem}>
+          <Text style={{ fontSize: 18, fontWeight: '600' }}>H4 Heading</Text>
+          <Text style={styles.typeLabel}>18px / SemiBold</Text>
+        </View>
+        <View style={styles.typeItem}>
+          <Text style={{ fontSize: 16 }}>Body Text</Text>
+          <Text style={styles.typeLabel}>16px / Regular</Text>
+        </View>
+        <View style={styles.typeItem}>
+          <Text style={{ fontSize: 14 }}>Label Text</Text>
+          <Text style={styles.typeLabel}>14px / Regular</Text>
+        </View>
+        <View style={styles.typeItem}>
+          <Text style={{ fontSize: 13, color: '#6B7280' }}>Caption Text</Text>
+          <Text style={styles.typeLabel}>13px / Regular</Text>
+        </View>
+        <View style={styles.typeItem}>
+          <Text style={{ fontSize: 12, color: '#9CA3AF' }}>Small Text</Text>
+          <Text style={styles.typeLabel}>12px / Regular</Text>
+        </View>
+      </View>
+    </View>
+  </View>
+);
+
+const SpacingPage = () => (
+  <View style={styles.page}>
+    <Text style={styles.pageTitle}>Spacing</Text>
+    <Text style={styles.pageSubtitle}>Consistent spacing scale for margins, padding, and gaps</Text>
+    
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Spacing Scale</Text>
+      <View style={styles.spacingList}>
+        {[
+          { name: 'xs', value: 4 },
+          { name: 'sm', value: 8 },
+          { name: 'md', value: 12 },
+          { name: 'lg', value: 16 },
+          { name: 'xl', value: 24 },
+          { name: '2xl', value: 32 },
+          { name: '3xl', value: 48 },
+          { name: '4xl', value: 64 },
+        ].map(item => (
+          <View key={item.name} style={styles.spacingItem}>
+            <View style={[styles.spacingBox, { width: item.value, height: item.value }]} />
+            <Text style={styles.spacingName}>{item.name}</Text>
+            <Text style={styles.spacingValue}>{item.value}px</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  </View>
+);
+
+const ElevationPage = () => (
+  <View style={styles.page}>
+    <Text style={styles.pageTitle}>Elevation</Text>
+    <Text style={styles.pageSubtitle}>Shadow levels for creating visual hierarchy</Text>
+    
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Elevation Scale</Text>
+      <View style={styles.elevationList}>
+        {[5, 10, 20, 30, 40].map(level => (
+          <View 
+            key={level} 
+            style={[
+              styles.elevationBox,
+              {
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: level / 10 },
+                shadowOpacity: 0.1 + (level / 100),
+                shadowRadius: level / 5,
+                elevation: level / 5,
+              }
+            ]}
+          >
+            <Text style={styles.elevationLabel}>Elevation {level}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  </View>
+);
+
+const DarkModePage = () => (
+  <View style={styles.page}>
+    <Text style={styles.pageTitle}>Dark Mode</Text>
+    <Text style={styles.pageSubtitle}>Implementing dark mode in your application</Text>
+    
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Automatic Theme Detection</Text>
+      <Text style={styles.paragraph}>
+        Urbint CL supports automatic theme switching based on system preferences. 
+        Enable adaptive themes in your Unistyles configuration:
+      </Text>
+      <View style={styles.codeBlock}>
+        <Text style={styles.code}>{`StyleSheet.configure({
+  themes: { light: lightTheme, dark: darkTheme },
+  settings: {
+    adaptiveThemes: true,  // Auto-switch based on OS
+  },
+});`}</Text>
+      </View>
+    </View>
+
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Manual Theme Toggle</Text>
+      <View style={styles.codeBlock}>
+        <Text style={styles.code}>{`import { UnistylesRuntime } from 'react-native-unistyles';
+
+const toggleTheme = () => {
+  const current = UnistylesRuntime.themeName;
+  UnistylesRuntime.setTheme(current === 'light' ? 'dark' : 'light');
+};`}</Text>
+      </View>
+    </View>
+  </View>
+);
+
+const CustomTokensPage = () => (
+  <View style={styles.page}>
+    <Text style={styles.pageTitle}>Custom Tokens</Text>
+    <Text style={styles.pageSubtitle}>Extending and customizing design tokens</Text>
+    
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Adding Custom Colors</Text>
+      <View style={styles.codeBlock}>
+        <Text style={styles.code}>{`const customTheme = {
+  ...baseTheme,
+  colors: {
+    ...baseTheme.colors,
+    custom: {
+      brandPink: '#EC4899',
+      brandTeal: '#14B8A6',
+    },
+  },
+};`}</Text>
+      </View>
+    </View>
+
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>Custom Spacing</Text>
+      <View style={styles.codeBlock}>
+        <Text style={styles.code}>{`const customSpacing = {
+  ...baseTheme.spacing,
+  '5xl': 80,
+  '6xl': 96,
+};`}</Text>
+      </View>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.bgPrimary,
+  },
+  layout: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  main: {
+    flex: 1,
+    backgroundColor: colors.bgPrimary,
+  },
+  mainContent: {
+    minHeight: '100%',
+  },
+  page: {
+    padding: spacing['2xl'],
+    maxWidth: 900,
+  },
+  pageTitle: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: colors.textPrimary,
+    marginBottom: spacing.md,
+  },
+  pageSubtitle: {
+    fontSize: 18,
+    color: colors.textSecondary,
+    lineHeight: 28,
+    marginBottom: spacing['2xl'],
+  },
+  section: {
+    marginBottom: spacing['2xl'],
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: colors.textPrimary,
+    marginBottom: spacing.lg,
+  },
+  paragraph: {
+    fontSize: 16,
+    color: colors.textSecondary,
+    lineHeight: 26,
+    marginBottom: spacing.lg,
+  },
+  codeBlock: {
+    backgroundColor: colors.bgDark,
+    padding: spacing.lg,
+    borderRadius: 8,
+  },
+  code: {
+    fontFamily: 'monospace',
+    fontSize: 13,
+    color: '#E5E7EB',
+    lineHeight: 20,
+  },
+  typeList: {
+    gap: spacing.lg,
+  },
+  typeItem: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: spacing.lg,
+    paddingVertical: spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.borderLight,
+  },
+  typeLabel: {
+    fontSize: 13,
+    color: colors.textTertiary,
+    marginLeft: 'auto',
+  },
+  spacingList: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing['2xl'],
+  },
+  spacingItem: {
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  spacingBox: {
+    backgroundColor: colors.accent,
+    borderRadius: 4,
+  },
+  spacingName: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: colors.textPrimary,
+  },
+  spacingValue: {
+    fontSize: 12,
+    color: colors.textTertiary,
+  },
+  elevationList: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing['2xl'],
+  },
+  elevationBox: {
+    width: 120,
+    height: 80,
+    backgroundColor: colors.bgSecondary,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  elevationLabel: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: colors.textSecondary,
+  },
+});

package/README.md

@@ -0,0 +1,229 @@
+# Urbint Component Library
+
+An enterprise-ready React Native component library built with [Unistyles 3.0](https://unistyl.es) for consistent styling across all platforms.
+
+## Features
+
+- 🎨 **40+ Production-Ready Components** - Comprehensive set of UI components
+- 🎭 **Light & Dark Theme Support** - Automatic theme switching with system preferences
+- 📱 **Cross-Platform** - Works on iOS, Android, and Web
+- 🔧 **TypeScript First** - Full TypeScript support with excellent DX
+- 📖 **Storybook Integration** - Visual component documentation
+- 🎯 **Enterprise Design System** - Based on Urbint design tokens
+
+## Installation
+
+```bash
+npm install @urbint/cl react-native-unistyles
+# or
+yarn add @urbint/cl react-native-unistyles
+
+# For local development, you can link:
+npm link ../path-to-urbint-cl
+```
+
+## Quick Start
+
+```tsx
+import React from 'react';
+// Import styles first (required for Unistyles)
+import '@urbint/cl/styles';
+
+import { Button, Card, Text, VStack, ToastProvider, useToast } from '@urbint/cl';
+
+function App() {
+  const toast = useToast();
+
+  return (
+    <ToastProvider>
+      <VStack space="lg" p="lg">
+        <Card>
+          <Text>Welcome to Urbint Component Library!</Text>
+        </Card>
+        <Button onPress={() => toast.show({ title: 'Hello!', status: 'success' })}>
+          Show Toast
+        </Button>
+      </VStack>
+    </ToastProvider>
+  );
+}
+```
+
+## Components
+
+### Layout
+- `Box` - Fundamental layout component
+- `Center` - Centers children horizontally and vertically
+- `HStack` - Horizontal stack layout
+- `VStack` - Vertical stack layout
+- `Grid` / `GridItem` - CSS-like grid layout
+- `Divider` - Visual separator
+
+### Typography
+- `Text` - Body text with variants (body, caption, label, small)
+- `Heading` - Headings (h1, h2, h3, h4)
+- `Link` - Styled link component
+
+### Form Controls
+- `Input` - Text input with variants
+- `Textarea` - Multi-line text input
+- `Checkbox` / `CheckboxGroup` - Checkbox controls
+- `Radio` / `RadioGroup` - Radio button controls
+- `Select` - Dropdown selection
+- `Switch` - Toggle switch
+- `Slider` - Range slider
+- `FormControl` - Form wrapper with label/error states
+
+### Feedback
+- `Alert` - Status messages
+- `Toast` / `ToastProvider` - Non-blocking notifications
+- `Progress` - Linear and circular progress indicators
+- `Spinner` - Loading spinner
+- `Skeleton` / `SkeletonText` - Loading placeholders
+
+### Overlays
+- `Modal` - Dialog overlay
+- `Drawer` - Slide-in panel
+- `AlertDialog` - Confirmation dialog
+- `ActionSheet` - Bottom action sheet
+- `Popover` - Floating content panel
+- `Menu` - Dropdown menu
+- `Tooltip` - Informational popup
+
+### Data Display
+- `Avatar` / `AvatarGroup` - User profile pictures
+- `Badge` - Status indicators
+- `Card` - Content container
+- `Table` - Data table
+- `Image` - Enhanced image component
+- `Icon` - Vector icon component
+
+### Actions
+- `Button` - Primary action component
+- `Pressable` - Enhanced pressable
+- `Fab` - Floating Action Button
+- `Accordion` - Expandable sections
+
+### Utilities
+- `Portal` / `PortalProvider` - Portal rendering
+
+## Design Tokens
+
+The library uses design tokens based on the Urbint Design System:
+
+### Colors
+```typescript
+// Brand
+brand.navy: '#003F53'
+brand.blue: '#00A0CC'
+
+// Feedback
+feedback.info.content: '#3C87DD'
+feedback.success.content: '#2BA329'
+feedback.warning.content: '#D69600'
+feedback.error.content: '#E7183E'
+
+// Badges
+badge.red: '#CF3D3D'
+badge.orange: '#B75E0B'
+badge.yellow: '#E8BA30'
+badge.blue: '#3E70D4'
+badge.green: '#238914'
+```
+
+### Typography
+- **H1 PageHeading**: 26px, Regular (400)
+- **H2 SectionHeading**: 22px, Semi-Bold (600)
+- **H3 SectionSubheading**: 20px, Semi-Bold (600)
+- **H4 Subheading**: 18px, Semi-Bold (600)
+- **Body**: 16px, Regular (400)
+- **Caption**: 13px, Regular (400)
+
+### Spacing
+```typescript
+spacing['0.5x']: 2    // 0.125rem
+spacing.base: 4       // 0.25rem
+spacing['2x']: 8      // 0.5rem
+spacing['3x']: 12     // 0.75rem
+spacing['4x']: 16     // 1rem
+spacing['6x']: 24     // 1.5rem
+spacing['8x']: 32     // 2rem
+spacing['12x']: 48    // 3rem
+spacing['18x']: 72    // 4.5rem
+```
+
+### Elevation
+- **5**: Slight shadow (borders alternative)
+- **10**: Small elements (buttons, tooltips)
+- **20**: Medium elements (cards, nav-bars)
+- **30**: Overlay panels and toasts
+- **40**: Modals
+
+## Theming
+
+The library supports light and dark themes that automatically adapt to system preferences:
+
+```typescript
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+
+function MyComponent() {
+  const { theme } = useUnistyles();
+  
+  return (
+    <View style={{ backgroundColor: theme.colors.background.primary }}>
+      <Text style={{ color: theme.colors.text.primary }}>
+        Themed content
+      </Text>
+    </View>
+  );
+}
+```
+
+## Storybook
+
+Run Storybook to explore all components:
+
+```bash
+npm run storybook
+# or
+npm run storybook:ios
+npm run storybook:android
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm start
+
+# Run on iOS
+npm run ios
+
+# Run on Android
+npm run android
+
+# Type check
+npm run typecheck
+```
+
+## Requirements
+
+- React Native 0.81+
+- Expo SDK 54+
+- Node.js 20+
+
+## AI/LLM Documentation
+
+For AI assistants and LLMs, we provide comprehensive documentation in a single file:
+
+- **[llms.txt](./llms.txt)** - Complete API reference, examples, and usage patterns optimized for LLM consumption
+
+This file contains all component APIs, props, examples, design tokens, theming guide, and best practices in a structured format that AI assistants can use to help developers.
+
+## License
+
+MIT © Urbint
+

package/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "urbint-cl",
+    "slug": "urbint-cl",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "entryPoint": "./index.ts",
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.amankadam.urbintcl"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false,
+      "package": "com.amankadam.urbintcl"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: ['babel-preset-expo'],
+    // Temporarily disabled Unistyles plugin for debugging
+    // plugins: [
+    //   [
+    //     'react-native-unistyles/plugin',
+    //     {
+    //       root: 'src',
+    //     },
+    //   ],
+    // ],
+  };
+};