@urbint/cl 1.0.1

package/docs/components/CodeBlock.tsx

@@ -0,0 +1,80 @@
+/**
+ * Code Block Component
+ */
+
+import React, { useState } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { colors, spacing, fontSize } from '../theme';
+
+type CodeBlockProps = {
+  code: string;
+  language?: string;
+};
+
+export const CodeBlock = ({ code, language = 'tsx' }: CodeBlockProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    // In a real app, you'd use Clipboard API
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.language}>{language}</Text>
+        <Pressable onPress={handleCopy} style={styles.copyButton}>
+          <Text style={styles.copyText}>{copied ? '✓ Copied' : 'Copy'}</Text>
+        </Pressable>
+      </View>
+      <View style={styles.codeContainer}>
+        <Text style={styles.code}>{code}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: colors.borderLight,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: colors.bgTertiary,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.borderLight,
+  },
+  language: {
+    fontSize: fontSize.sm,
+    color: colors.textTertiary,
+    fontWeight: '500',
+  },
+  copyButton: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+  },
+  copyText: {
+    fontSize: fontSize.sm,
+    color: colors.accent,
+    fontWeight: '500',
+  },
+  codeContainer: {
+    backgroundColor: colors.bgDark,
+    padding: spacing.lg,
+  },
+  code: {
+    fontFamily: 'monospace',
+    fontSize: fontSize.md,
+    color: '#E5E7EB',
+    lineHeight: 20,
+  },
+});
+

package/docs/components/PropTable.tsx

@@ -0,0 +1,93 @@
+/**
+ * Props Table Component
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { PropDoc } from '../types';
+import { colors, spacing, fontSize } from '../theme';
+
+type PropTableProps = {
+  props: PropDoc[];
+};
+
+export const PropTable = ({ props }: PropTableProps) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={[styles.headerCell, { flex: 1.2 }]}>Prop</Text>
+        <Text style={[styles.headerCell, { flex: 2 }]}>Type</Text>
+        <Text style={[styles.headerCell, { flex: 0.8 }]}>Default</Text>
+        <Text style={[styles.headerCell, { flex: 2 }]}>Description</Text>
+      </View>
+      {props.map((prop, index) => (
+        <View 
+          key={prop.name} 
+          style={[styles.row, index === props.length - 1 && styles.lastRow]}
+        >
+          <View style={{ flex: 1.2, flexDirection: 'row' }}>
+            <Text style={styles.propName}>{prop.name}</Text>
+            {prop.required && <Text style={styles.required}>*</Text>}
+          </View>
+          <Text style={[styles.propType, { flex: 2 }]}>{prop.type}</Text>
+          <Text style={[styles.cell, { flex: 0.8 }]}>{prop.default || '-'}</Text>
+          <Text style={[styles.cell, { flex: 2 }]}>{prop.description}</Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.borderLight,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    backgroundColor: colors.bgTertiary,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.borderLight,
+  },
+  headerCell: {
+    fontSize: fontSize.sm,
+    fontWeight: '600',
+    color: colors.textTertiary,
+    textTransform: 'uppercase',
+  },
+  row: {
+    flexDirection: 'row',
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.borderLight,
+    backgroundColor: colors.bgSecondary,
+  },
+  lastRow: {
+    borderBottomWidth: 0,
+  },
+  cell: {
+    fontSize: fontSize.md,
+    color: colors.textTertiary,
+  },
+  propName: {
+    fontFamily: 'monospace',
+    fontSize: fontSize.md,
+    fontWeight: '500',
+    color: colors.textPrimary,
+  },
+  propType: {
+    fontFamily: 'monospace',
+    fontSize: fontSize.sm,
+    color: colors.purple,
+  },
+  required: {
+    color: colors.error,
+    marginLeft: 2,
+  },
+});
+

package/docs/components/Sidebar.tsx

@@ -0,0 +1,199 @@
+/**
+ * Sidebar Navigation Component
+ */
+
+import React from 'react';
+import { View, Text, Pressable, ScrollView, StyleSheet } from 'react-native';
+import { NAV_ITEMS } from '../navigation';
+import { colors, spacing, fontSize } from '../theme';
+
+type SidebarProps = {
+  activePage: string;
+  onNavigate: (pageId: string) => void;
+  expandedSections: string[];
+  onToggleSection: (sectionId: string) => void;
+};
+
+export const Sidebar = ({ 
+  activePage, 
+  onNavigate, 
+  expandedSections,
+  onToggleSection,
+}: SidebarProps) => {
+  return (
+    <View style={styles.container}>
+      {/* Logo */}
+      <View style={styles.logoContainer}>
+        <View style={styles.logoIcon}>
+          <Text style={styles.logoText}>U</Text>
+        </View>
+        <View>
+          <Text style={styles.logoTitle}>Urbint CL</Text>
+          <Text style={styles.logoVersion}>v1.0.0</Text>
+        </View>
+      </View>
+
+      {/* Navigation */}
+      <ScrollView style={styles.nav} showsVerticalScrollIndicator={false}>
+        {NAV_ITEMS.map((section) => {
+          const isExpanded = expandedSections.includes(section.id);
+          
+          return (
+            <View key={section.id} style={styles.section}>
+              <Pressable 
+                style={styles.sectionHeader}
+                onPress={() => onToggleSection(section.id)}
+              >
+                <View style={styles.sectionLeft}>
+                  <Text style={styles.sectionIcon}>{section.icon}</Text>
+                  <Text style={styles.sectionTitle}>{section.title}</Text>
+                </View>
+                <Text style={styles.chevron}>{isExpanded ? '▼' : '▶'}</Text>
+              </Pressable>
+
+              {isExpanded && section.children && (
+                <View style={styles.sectionItems}>
+                  {section.children.map((item) => {
+                    const isActive = activePage === item.id;
+                    return (
+                      <Pressable
+                        key={item.id}
+                        style={[styles.navItem, isActive && styles.navItemActive]}
+                        onPress={() => onNavigate(item.id)}
+                      >
+                        <View style={[styles.navIndicator, isActive && styles.navIndicatorActive]} />
+                        <Text style={[styles.navItemText, isActive && styles.navItemTextActive]}>
+                          {item.title}
+                        </Text>
+                      </Pressable>
+                    );
+                  })}
+                </View>
+              )}
+            </View>
+          );
+        })}
+      </ScrollView>
+
+      {/* Footer */}
+      <View style={styles.footer}>
+        <Text style={styles.footerText}>Built with Unistyles</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 260,
+    backgroundColor: colors.bgSecondary,
+    borderRightWidth: 1,
+    borderRightColor: colors.borderLight,
+    height: '100%',
+  },
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: spacing.lg,
+    paddingVertical: spacing.xl,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.borderLight,
+    gap: spacing.md,
+  },
+  logoIcon: {
+    width: 40,
+    height: 40,
+    backgroundColor: colors.navy,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logoText: {
+    color: colors.textInverse,
+    fontSize: fontSize.xl,
+    fontWeight: '700',
+  },
+  logoTitle: {
+    fontSize: fontSize.lg,
+    fontWeight: '700',
+    color: colors.textPrimary,
+  },
+  logoVersion: {
+    fontSize: fontSize.sm,
+    color: colors.textTertiary,
+  },
+  nav: {
+    flex: 1,
+    padding: spacing.md,
+  },
+  section: {
+    marginBottom: spacing.sm,
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.sm,
+  },
+  sectionLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  sectionIcon: {
+    fontSize: fontSize.base,
+  },
+  sectionTitle: {
+    fontSize: fontSize.base,
+    fontWeight: '600',
+    color: colors.textPrimary,
+  },
+  chevron: {
+    fontSize: fontSize.xs,
+    color: colors.textTertiary,
+  },
+  sectionItems: {
+    marginLeft: spacing.xl,
+    marginTop: spacing.xs,
+  },
+  navItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.sm,
+    borderRadius: 6,
+    gap: spacing.sm,
+  },
+  navItemActive: {
+    backgroundColor: colors.bgTertiary,
+  },
+  navIndicator: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: 'transparent',
+  },
+  navIndicatorActive: {
+    backgroundColor: colors.accent,
+  },
+  navItemText: {
+    fontSize: fontSize.base,
+    color: colors.textSecondary,
+  },
+  navItemTextActive: {
+    color: colors.accent,
+    fontWeight: '500',
+  },
+  footer: {
+    padding: spacing.lg,
+    borderTopWidth: 1,
+    borderTopColor: colors.borderLight,
+  },
+  footerText: {
+    fontSize: fontSize.sm,
+    color: colors.textDisabled,
+    textAlign: 'center',
+  },
+});
+

package/docs/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Component Exports
+ */
+
+export { Sidebar } from './Sidebar';
+export { CodeBlock } from './CodeBlock';
+export { PropTable } from './PropTable';
+

package/docs/data/colorTokens.ts

@@ -0,0 +1,70 @@
+/**
+ * Color Token Documentation Data
+ */
+
+import { ColorGroup } from '../types';
+
+export const COLOR_GROUPS: ColorGroup[] = [
+  {
+    name: 'Brand',
+    description: 'Primary brand colors that define the Urbint visual identity',
+    colors: [
+      { name: 'Navy', value: '#0D2B3E', description: 'Primary dark brand color, used for headers and emphasis' },
+      { name: 'Blue', value: '#00A0CC', description: 'Primary action color, used for buttons and links' },
+    ],
+  },
+  {
+    name: 'Text',
+    description: 'Text colors for different hierarchy levels',
+    colors: [
+      { name: 'Default', value: '#1F2937', description: 'Primary text color for body content' },
+      { name: 'Secondary', value: '#6B7280', description: 'Secondary text for less emphasis' },
+      { name: 'Disabled', value: '#9CA3AF', description: 'Disabled or placeholder text' },
+      { name: 'On Dark', value: '#FFFFFF', description: 'Text on dark backgrounds' },
+    ],
+  },
+  {
+    name: 'Background',
+    description: 'Background colors for different surface levels',
+    colors: [
+      { name: 'Default', value: '#FFFFFF', description: 'Primary background color' },
+      { name: 'Secondary', value: '#F9FAFB', description: 'Subtle background for sections' },
+      { name: 'Tertiary', value: '#F3F4F6', description: 'Elevated surface background' },
+      { name: 'Inverse', value: '#111827', description: 'Dark background for contrast' },
+    ],
+  },
+  {
+    name: 'Border',
+    description: 'Border colors for component boundaries',
+    colors: [
+      { name: 'Disabled', value: '#E5E7EB', description: 'Subtle borders, dividers' },
+      { name: 'Default', value: '#D1D5DB', description: 'Standard component borders' },
+      { name: 'Hover', value: '#9CA3AF', description: 'Borders on hover state' },
+      { name: 'Active', value: '#00A0CC', description: 'Focus/active state borders' },
+    ],
+  },
+  {
+    name: 'Feedback',
+    description: 'Status and feedback colors',
+    colors: [
+      { name: 'Info', value: '#3B82F6', description: 'Informational messages' },
+      { name: 'Success', value: '#22C55E', description: 'Success states and confirmations' },
+      { name: 'Warning', value: '#F59E0B', description: 'Warning messages and caution' },
+      { name: 'Error', value: '#EF4444', description: 'Error states and destructive actions' },
+    ],
+  },
+  {
+    name: 'Badge',
+    description: 'Badge and tag colors for categorization',
+    colors: [
+      { name: 'Gray', value: '#6B7280', description: 'Default/neutral badges' },
+      { name: 'Red', value: '#DC2626', description: 'High priority or critical' },
+      { name: 'Orange', value: '#EA580C', description: 'Medium priority' },
+      { name: 'Yellow', value: '#CA8A04', description: 'Low priority or pending' },
+      { name: 'Green', value: '#16A34A', description: 'Active or completed' },
+      { name: 'Blue', value: '#2563EB', description: 'Informational' },
+      { name: 'Purple', value: '#7C3AED', description: 'New or special' },
+    ],
+  },
+];
+