@urbint/cl 1.0.1

package/docs/pages/InstallationPage.tsx

@@ -0,0 +1,232 @@
+/**
+ * Installation Page
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { CodeBlock } from '../components/CodeBlock';
+import { colors, spacing, fontSize } from '../theme';
+
+export const InstallationPage = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Installation</Text>
+      <Text style={styles.subtitle}>
+        Get started with Urbint Component Library in your React Native project.
+      </Text>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Prerequisites</Text>
+        <Text style={styles.paragraph}>
+          Before installing Urbint CL, ensure you have the following:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>• React Native 0.81 or higher</Text>
+          <Text style={styles.listItem}>• Node.js 18 or higher</Text>
+          <Text style={styles.listItem}>• Expo SDK 54+ (if using Expo)</Text>
+        </View>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Step 1: Install the Package</Text>
+        <Text style={styles.paragraph}>
+          Install the component library and its peer dependencies:
+        </Text>
+        <CodeBlock 
+          language="bash"
+          code={`# Using npm
+npm install @urbint/component-library react-native-unistyles
+
+# Using yarn
+yarn add @urbint/component-library react-native-unistyles
+
+# Using pnpm
+pnpm add @urbint/component-library react-native-unistyles`}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Step 2: Configure Babel</Text>
+        <Text style={styles.paragraph}>
+          Add the Unistyles Babel plugin to your <Text style={styles.code}>babel.config.js</Text>:
+        </Text>
+        <CodeBlock 
+          language="javascript"
+          code={`// babel.config.js
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'react-native-unistyles/plugin',
+        {
+          root: 'src',
+        },
+      ],
+    ],
+  };
+};`}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Step 3: Setup Theme Provider</Text>
+        <Text style={styles.paragraph}>
+          Import and configure the theme in your app's entry point:
+        </Text>
+        <CodeBlock 
+          language="tsx"
+          code={`// App.tsx or index.tsx
+import '@urbint/component-library/styles';  // Import styles first
+import { ThemeProvider } from '@urbint/component-library';
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      {/* Your app content */}
+    </ThemeProvider>
+  );
+}`}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Step 4: Start Using Components</Text>
+        <Text style={styles.paragraph}>
+          Import and use components in your application:
+        </Text>
+        <CodeBlock 
+          language="tsx"
+          code={`import { 
+  Box, 
+  VStack, 
+  HStack, 
+  Text, 
+  Button,
+  Input,
+} from '@urbint/component-library';
+
+function MyComponent() {
+  return (
+    <Box p={16} bg="background.primary">
+      <VStack space={16}>
+        <Text variant="heading">Hello World</Text>
+        <Input 
+          label="Email" 
+          placeholder="Enter your email" 
+        />
+        <HStack space={8}>
+          <Button variant="primary">Submit</Button>
+          <Button variant="ghost">Cancel</Button>
+        </HStack>
+      </VStack>
+    </Box>
+  );
+}`}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>TypeScript Support</Text>
+        <Text style={styles.paragraph}>
+          Urbint CL is built with TypeScript and provides full type definitions. 
+          No additional setup is required for TypeScript projects.
+        </Text>
+        <CodeBlock 
+          language="tsx"
+          code={`// Types are automatically inferred
+import { Button, ButtonProps } from '@urbint/component-library';
+
+// Custom button with typed props
+const MyButton = (props: ButtonProps) => (
+  <Button {...props} variant="primary" />
+);`}
+        />
+      </View>
+
+      <View style={styles.infoBox}>
+        <Text style={styles.infoTitle}>💡 Tip</Text>
+        <Text style={styles.infoText}>
+          For the best development experience, restart Metro bundler after installing 
+          the library to ensure the Babel plugin is properly loaded.
+        </Text>
+        <CodeBlock 
+          language="bash"
+          code={`npx expo start --clear`}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing['2xl'],
+    maxWidth: 900,
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: colors.textPrimary,
+    marginBottom: spacing.md,
+  },
+  subtitle: {
+    fontSize: fontSize.xl,
+    color: colors.textSecondary,
+    lineHeight: 28,
+    marginBottom: spacing['2xl'],
+  },
+  section: {
+    marginBottom: spacing['2xl'],
+  },
+  sectionTitle: {
+    fontSize: fontSize['2xl'],
+    fontWeight: '600',
+    color: colors.textPrimary,
+    marginBottom: spacing.md,
+  },
+  paragraph: {
+    fontSize: fontSize.lg,
+    color: colors.textSecondary,
+    lineHeight: 26,
+    marginBottom: spacing.lg,
+  },
+  code: {
+    fontFamily: 'monospace',
+    backgroundColor: colors.bgTertiary,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  list: {
+    marginTop: spacing.md,
+    gap: spacing.sm,
+  },
+  listItem: {
+    fontSize: fontSize.lg,
+    color: colors.textSecondary,
+    marginLeft: spacing.md,
+  },
+  infoBox: {
+    backgroundColor: '#EFF6FF',
+    padding: spacing.lg,
+    borderRadius: 12,
+    borderLeftWidth: 4,
+    borderLeftColor: colors.info,
+  },
+  infoTitle: {
+    fontSize: fontSize.lg,
+    fontWeight: '600',
+    color: colors.info,
+    marginBottom: spacing.sm,
+  },
+  infoText: {
+    fontSize: fontSize.base,
+    color: colors.textSecondary,
+    lineHeight: 22,
+    marginBottom: spacing.md,
+  },
+});
+

package/docs/pages/IntroductionPage.tsx

@@ -0,0 +1,163 @@
+/**
+ * Introduction Page
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { colors, spacing, fontSize } from '../theme';
+
+export const IntroductionPage = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Welcome to Urbint Component Library</Text>
+      <Text style={styles.subtitle}>
+        Enterprise-ready React Native components built with Unistyles for B2B SAAS applications.
+      </Text>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Overview</Text>
+        <Text style={styles.paragraph}>
+          Urbint Component Library (Urbint CL) is a comprehensive collection of 40+ production-ready 
+          React Native components designed for enterprise B2B applications. Built with Unistyles 3.0, 
+          it provides a consistent design system that works seamlessly across iOS, Android, and Web platforms.
+        </Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Key Features</Text>
+        <View style={styles.featureGrid}>
+          {[
+            { icon: '📱', title: 'Cross-Platform', desc: 'iOS, Android, and Web support out of the box' },
+            { icon: '🎨', title: 'Themeable', desc: 'Light and dark modes with customizable design tokens' },
+            { icon: '📝', title: 'TypeScript', desc: '100% TypeScript with full type safety' },
+            { icon: '⚡', title: 'Performant', desc: 'Optimized for 60fps animations and interactions' },
+            { icon: '♿', title: 'Accessible', desc: 'WCAG 2.1 compliant with proper ARIA labels' },
+            { icon: '📦', title: '40+ Components', desc: 'Comprehensive set of UI primitives and patterns' },
+          ].map((feature, i) => (
+            <View key={i} style={styles.featureCard}>
+              <Text style={styles.featureIcon}>{feature.icon}</Text>
+              <Text style={styles.featureTitle}>{feature.title}</Text>
+              <Text style={styles.featureDesc}>{feature.desc}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Tech Stack</Text>
+        <View style={styles.techList}>
+          {[
+            { name: 'React Native', version: '0.81+' },
+            { name: 'Unistyles', version: '3.0+' },
+            { name: 'TypeScript', version: '5.0+' },
+            { name: 'Expo', version: '54+' },
+          ].map((tech, i) => (
+            <View key={i} style={styles.techItem}>
+              <Text style={styles.techName}>{tech.name}</Text>
+              <Text style={styles.techVersion}>{tech.version}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Getting Started</Text>
+        <Text style={styles.paragraph}>
+          Ready to start using Urbint CL? Head over to the{' '}
+          <Text style={styles.link}>Installation</Text> guide to add the library to your project, 
+          or check out the <Text style={styles.link}>Quick Start</Text> for a hands-on tutorial.
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing['2xl'],
+    maxWidth: 900,
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: colors.textPrimary,
+    marginBottom: spacing.md,
+  },
+  subtitle: {
+    fontSize: fontSize.xl,
+    color: colors.textSecondary,
+    lineHeight: 28,
+    marginBottom: spacing['2xl'],
+  },
+  section: {
+    marginBottom: spacing['2xl'],
+  },
+  sectionTitle: {
+    fontSize: fontSize['2xl'],
+    fontWeight: '600',
+    color: colors.textPrimary,
+    marginBottom: spacing.lg,
+  },
+  paragraph: {
+    fontSize: fontSize.lg,
+    color: colors.textSecondary,
+    lineHeight: 26,
+  },
+  link: {
+    color: colors.accent,
+    fontWeight: '500',
+  },
+  featureGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.lg,
+  },
+  featureCard: {
+    backgroundColor: colors.bgSecondary,
+    padding: spacing.lg,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: colors.borderLight,
+    minWidth: 250,
+    flex: 1,
+  },
+  featureIcon: {
+    fontSize: 28,
+    marginBottom: spacing.sm,
+  },
+  featureTitle: {
+    fontSize: fontSize.lg,
+    fontWeight: '600',
+    color: colors.textPrimary,
+    marginBottom: spacing.xs,
+  },
+  featureDesc: {
+    fontSize: fontSize.base,
+    color: colors.textTertiary,
+    lineHeight: 20,
+  },
+  techList: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.md,
+  },
+  techItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.bgTertiary,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+    borderRadius: 8,
+    gap: spacing.sm,
+  },
+  techName: {
+    fontSize: fontSize.base,
+    fontWeight: '500',
+    color: colors.textPrimary,
+  },
+  techVersion: {
+    fontSize: fontSize.sm,
+    color: colors.textTertiary,
+  },
+});
+

package/docs/pages/ThemingPage.tsx

@@ -0,0 +1,251 @@
+/**
+ * Theming Documentation Page
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { CodeBlock } from '../components/CodeBlock';
+import { colors, spacing, fontSize } from '../theme';
+
+export const ThemingPage = () => {
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Theming</Text>
+        <Text style={styles.subtitle}>
+          Learn how to customize the look and feel of Urbint CL to match your brand.
+        </Text>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Theme Structure</Text>
+          <Text style={styles.paragraph}>
+            The theme object contains all design tokens used throughout the library. 
+            It's organized into logical groups for easy customization:
+          </Text>
+          <CodeBlock 
+            language="tsx"
+            code={`const theme = {
+  colors: {
+    brand: { navy: '#0D2B3E', blue: '#00A0CC' },
+    text: { primary: '#1F2937', secondary: '#6B7280' },
+    background: { primary: '#FFFFFF', secondary: '#F9FAFB' },
+    border: { default: '#D1D5DB', active: '#00A0CC' },
+    feedback: { success: '#22C55E', error: '#EF4444' },
+    badge: { red: '#DC2626', green: '#16A34A', ... },
+  },
+  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  typography: {
+    h1: { fontSize: 32, fontWeight: '700' },
+    body: { fontSize: 16, fontWeight: '400' },
+    // ... more styles
+  },
+  borderRadius: { sm: 2, md: 4, lg: 8, xl: 12, full: 9999 },
+  elevation: { '5': {...}, '10': {...}, '20': {...} },
+};`}
+          />
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Creating a Custom Theme</Text>
+          <Text style={styles.paragraph}>
+            Create a custom theme by extending the default theme with your brand colors and styles:
+          </Text>
+          <CodeBlock 
+            language="tsx"
+            code={`// src/styles/customTheme.ts
+import { lightTheme, darkTheme } from '@urbint/component-library';
+
+export const myLightTheme = {
+  ...lightTheme,
+  colors: {
+    ...lightTheme.colors,
+    brand: {
+      primary: '#YOUR_PRIMARY',    // Replace with your brand color
+      secondary: '#YOUR_SECONDARY',
+    },
+  },
+};
+
+export const myDarkTheme = {
+  ...darkTheme,
+  colors: {
+    ...darkTheme.colors,
+    brand: {
+      primary: '#YOUR_PRIMARY_DARK',
+      secondary: '#YOUR_SECONDARY_DARK',
+    },
+  },
+};`}
+          />
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Configuring Unistyles</Text>
+          <Text style={styles.paragraph}>
+            Register your custom themes with Unistyles:
+          </Text>
+          <CodeBlock 
+            language="tsx"
+            code={`// src/styles/unistyles.ts
+import { StyleSheet } from 'react-native-unistyles';
+import { myLightTheme, myDarkTheme } from './customTheme';
+
+// Define breakpoints (optional)
+const breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+};
+
+// Configure Unistyles
+StyleSheet.configure({
+  themes: {
+    light: myLightTheme,
+    dark: myDarkTheme,
+  },
+  breakpoints,
+  settings: {
+    adaptiveThemes: true,  // Auto-switch based on system preference
+  },
+});
+
+// TypeScript: Extend module for theme types
+declare module 'react-native-unistyles' {
+  export interface UnistylesThemes {
+    light: typeof myLightTheme;
+    dark: typeof myDarkTheme;
+  }
+}`}
+          />
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Using the Theme in Components</Text>
+          <Text style={styles.paragraph}>
+            Access theme values in your components using the useUnistyles hook:
+          </Text>
+          <CodeBlock 
+            language="tsx"
+            code={`import { useUnistyles } from 'react-native-unistyles';
+
+function MyComponent() {
+  const { theme, breakpoint } = useUnistyles();
+  
+  return (
+    <View style={{ 
+      backgroundColor: theme.colors.background.primary,
+      padding: theme.spacing.lg,
+    }}>
+      <Text style={{ 
+        color: theme.colors.text.primary,
+        ...theme.typography.h2,
+      }}>
+        {breakpoint === 'xs' ? 'Mobile' : 'Desktop'}
+      </Text>
+    </View>
+  );
+}`}
+          />
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Switching Themes Programmatically</Text>
+          <Text style={styles.paragraph}>
+            Allow users to switch between themes in your app:
+          </Text>
+          <CodeBlock 
+            language="tsx"
+            code={`import { UnistylesRuntime } from 'react-native-unistyles';
+
+function ThemeSwitcher() {
+  const toggleTheme = () => {
+    const currentTheme = UnistylesRuntime.themeName;
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    
+    UnistylesRuntime.setTheme(newTheme);
+  };
+
+  return (
+    <Button onPress={toggleTheme}>
+      Toggle Theme
+    </Button>
+  );
+}`}
+          />
+        </View>
+
+        <View style={styles.tipBox}>
+          <Text style={styles.tipTitle}>💡 Best Practices</Text>
+          <View style={styles.tipList}>
+            <Text style={styles.tipItem}>• Keep color semantics consistent (primary, secondary, etc.)</Text>
+            <Text style={styles.tipItem}>• Test contrast ratios for accessibility (4.5:1 minimum)</Text>
+            <Text style={styles.tipItem}>• Use design tokens instead of hardcoded values</Text>
+            <Text style={styles.tipItem}>• Provide both light and dark theme variants</Text>
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    padding: spacing['2xl'],
+    maxWidth: 900,
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: colors.textPrimary,
+    marginBottom: spacing.md,
+  },
+  subtitle: {
+    fontSize: fontSize.xl,
+    color: colors.textSecondary,
+    lineHeight: 28,
+    marginBottom: spacing['2xl'],
+  },
+  section: {
+    marginBottom: spacing['2xl'],
+  },
+  sectionTitle: {
+    fontSize: fontSize['2xl'],
+    fontWeight: '600',
+    color: colors.textPrimary,
+    marginBottom: spacing.md,
+  },
+  paragraph: {
+    fontSize: fontSize.lg,
+    color: colors.textSecondary,
+    lineHeight: 26,
+    marginBottom: spacing.lg,
+  },
+  tipBox: {
+    backgroundColor: '#F0FDF4',
+    padding: spacing.lg,
+    borderRadius: 12,
+    borderLeftWidth: 4,
+    borderLeftColor: colors.success,
+    marginTop: spacing.xl,
+  },
+  tipTitle: {
+    fontSize: fontSize.lg,
+    fontWeight: '600',
+    color: colors.success,
+    marginBottom: spacing.md,
+  },
+  tipList: {
+    gap: spacing.sm,
+  },
+  tipItem: {
+    fontSize: fontSize.base,
+    color: colors.textSecondary,
+    lineHeight: 22,
+  },
+});
+

package/docs/pages/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Page Exports
+ */
+
+export { IntroductionPage } from './IntroductionPage';
+export { InstallationPage } from './InstallationPage';
+export { ColorsPage } from './ColorsPage';
+export { ThemingPage } from './ThemingPage';
+export { ComponentPage } from './ComponentPage';
+