{"_id":"@ahmed_abbassi/ui","_rev":"3-fb899bf907eccabf7d4a6484e87819c1","name":"@ahmed_abbassi/ui","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@ahmed_abbassi/ui","version":"0.1.0","keywords":["react-native","expo","ui-components","react-native-components","expo-components","ui-library","design-system","mobile-ui","typescript"],"author":{"name":"Your Name","email":"your.email@example.com"},"license":"MIT","_id":"@ahmed_abbassi/ui@0.1.0","maintainers":[{"name":"ahmed_abbassi","email":"a.abbassipro@gmail.com"}],"homepage":"https://github.com/absi/ui#readme","bugs":{"url":"https://github.com/absi/ui/issues"},"dist":{"shasum":"35fcd344389df503574d19717439f15663edec7b","tarball":"https://registry.npmjs.org/@ahmed_abbassi/ui/-/ui-0.1.0.tgz","fileCount":52,"integrity":"sha512-9MgCay6oD5dZ2Ivvzke38Mal98EGz9oT/qba0QUh6WaYpEmTza/eATCib0miXv4bEPMgcPxbOL098AhicayVCQ==","signatures":[{"sig":"MEQCIAqK0ugckZoi9fkGxx1oh96BVW96cpTPPHuqfg1Vc3BuAiAFjoT9fU+mXIIC/8IuqlJngNFNtJTTTXUgpgUMvV/bcA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1085543},"jest":{"preset":"jest-expo","collectCoverage":true,"collectCoverageFrom":["**/*.{ts,tsx,js,jsx}","!**/coverage/**","!**/node_modules/**","!**/babel.config.js","!**/expo-env.d.ts","!**/.expo/**"]},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"e9b48aae9884d81773ae538d413c00be7351970e","scripts":{"ios":"expo run:ios","web":"expo start --web","lint":"expo lint","test":"jest --watchAll","build":"tsup","start":"expo start","android":"expo run:android","test:perf":"reassure --testMatch '<rootDir>/__performance__/**/*.perf.test.tsx'","testDebug":"jest -o --watch --coverage=false","testFinal":"jest","build:watch":"tsup --watch","reset-project":"node ./scripts/reset-project.js","prepublishOnly":"npm run build","updateSnapshots":"jest -u --coverage=false","test:perf:compare":"reassure --testMatch '<rootDir>/__performance__/**/*.perf.test.tsx'","test:perf:baseline":"reassure --baseline --testMatch '<rootDir>/__performance__/**/*.perf.test.tsx'"},"_npmUser":{"name":"ahmed_abbassi","email":"a.abbassipro@gmail.com"},"repository":{"url":"git+https://github.com/absi/ui.git","type":"git"},"_npmVersion":"11.4.2","description":"A comprehensive collection of production-ready React Native components for Expo applications","directories":{},"_nodeVersion":"22.13.1","dependencies":{"zustand":"^5.0.8","expo-blur":"^15.0.7","expo-image":"~3.0.9","expo-haptics":"~15.0.7","expo-symbols":"~1.0.7","expo-image-picker":"~17.0.8","@expo/vector-icons":"^15.0.2","@gorhom/bottom-sheet":"^5.2.6","expo-linear-gradient":"~15.0.7","@tanstack/react-query":"^5.90.2","react-native-worklets":"0.5.1","react-native-reanimated":"~4.1.1","@react-navigation/native":"^7.1.8","@react-navigation/elements":"^2.6.3","react-native-gesture-handler":"~2.28.0","@react-navigation/bottom-tabs":"^7.4.0","react-native-safe-area-context":"~5.6.0","react-native-keyboard-controller":"1.18.5"},"_hasShrinkwrap":false,"devDependencies":{"expo":"54.0.12","jest":"~29.7.0","tsup":"^8.5.0","react":"19.1.0","eslint":"^9.25.0","reassure":"^1.4.0","expo-font":"~14.0.8","jest-expo":"~54.0.12","react-dom":"19.1.0","typescript":"~5.9.2","@types/jest":"^30.0.0","@types/node":"^24.7.1","expo-router":"~6.0.10","@types/react":"~19.1.0","expo-linking":"~8.0.8","expo-updates":"~29.0.12","react-native":"0.81.4","expo-constants":"~18.0.9","expo-system-ui":"~6.0.7","expo-dev-client":"~6.0.13","expo-status-bar":"~3.0.8","expo-web-browser":"~15.0.8","react-native-web":"~0.21.0","expo-secure-store":"^15.0.7","eslint-config-expo":"~10.0.0","expo-splash-screen":"~31.0.10","@expo/metro-runtime":"~6.1.2","react-native-screens":"~4.16.0","react-native-worklets-core":"^1.6.2","@testing-library/react-native":"^13.3.3"},"peerDependencies":{"expo":">=50.0.0","react":">=18.0.0","react-native":">=0.70.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1760100086939_0.41294357809638016","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@ahmed_abbassi/ui","version":"0.2.0","keywords":["react-native","expo","ui-components","react-native-components","expo-components","ui-library","design-system","mobile-ui","typescript"],"author":{"name":"Your Name","email":"your.email@example.com"},"license":"MIT","_id":"@ahmed_abbassi/ui@0.2.0","maintainers":[{"name":"ahmed_abbassi","email":"a.abbassipro@gmail.com"}],"homepage":"https://github.com/absi/ui#readme","bugs":{"url":"https://github.com/absi/ui/issues"},"dist":{"shasum":"62a73872b2a7d29b6763766a0c4396f6d64dcaa0","tarball":"https://registry.npmjs.org/@ahmed_abbassi/ui/-/ui-0.2.0.tgz","fileCount":52,"integrity":"sha512-u/Q5W6lxArEeVuK+gwmzeWlEKhv9Aa85vvckcXqUC/zOx0EECViWdByaft+7hCr2T6ssgv2mEroUPOjTqyJBcg==","signatures":[{"sig":"MEUCIQCc8Pp00FJBEGDaz0sb8rnWFXkalYWJFarTXgOWlA6eYwIgBLhFLA/mu2NgxZSgVlitoUcdTdxA+IjK9Taa2wxHCjU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1098538},"jest":{"preset":"jest-expo","collectCoverage":true,"collectCoverageFrom":["**/*.{ts,tsx,js,jsx}","!**/coverage/**","!**/node_modules/**","!**/babel.config.js","!**/expo-env.d.ts","!**/.expo/**"]},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"e9b48aae9884d81773ae538d413c00be7351970e","scripts":{"ios":"expo run:ios","web":"expo start --web","lint":"expo lint","test":"jest --watchAll","build":"tsup","start":"expo start","android":"expo run:android","test:perf":"reassure --testMatch '<rootDir>/__performance__/**/*.perf.test.tsx'","testDebug":"jest -o --watch --coverage=false","testFinal":"jest","build:watch":"tsup --watch","reset-project":"node ./scripts/reset-project.js","prepublishOnly":"npm run build","updateSnapshots":"jest -u --coverage=false","test:perf:compare":"reassure --testMatch '<rootDir>/__performance__/**/*.perf.test.tsx'","test:perf:baseline":"reassure --baseline --testMatch '<rootDir>/__performance__/**/*.perf.test.tsx'"},"_npmUser":{"name":"ahmed_abbassi","email":"a.abbassipro@gmail.com"},"repository":{"url":"git+https://github.com/absi/ui.git","type":"git"},"_npmVersion":"11.4.2","description":"A comprehensive collection of production-ready React Native components for Expo applications","directories":{},"_nodeVersion":"22.13.1","dependencies":{"zustand":"^5.0.8","expo-blur":"^15.0.7","expo-image":"~3.0.9","expo-haptics":"~15.0.7","expo-symbols":"~1.0.7","expo-image-picker":"~17.0.8","@expo/vector-icons":"^15.0.2","@gorhom/bottom-sheet":"^5.2.6","expo-linear-gradient":"~15.0.7","@tanstack/react-query":"^5.90.2","react-native-worklets":"0.5.1","react-native-reanimated":"~4.1.1","@react-navigation/native":"^7.1.8","@react-navigation/elements":"^2.6.3","react-native-gesture-handler":"~2.28.0","@react-navigation/bottom-tabs":"^7.4.0","react-native-safe-area-context":"~5.6.0","react-native-keyboard-controller":"1.18.5"},"_hasShrinkwrap":false,"devDependencies":{"expo":"54.0.12","jest":"~29.7.0","tsup":"^8.5.0","react":"19.1.0","eslint":"^9.25.0","reassure":"^1.4.0","expo-font":"~14.0.8","jest-expo":"~54.0.12","react-dom":"19.1.0","typescript":"~5.9.2","@types/jest":"^30.0.0","@types/node":"^24.7.1","expo-router":"~6.0.10","@types/react":"~19.1.0","expo-linking":"~8.0.8","expo-updates":"~29.0.12","react-native":"0.81.4","expo-constants":"~18.0.9","expo-system-ui":"~6.0.7","expo-dev-client":"~6.0.13","expo-status-bar":"~3.0.8","expo-web-browser":"~15.0.8","react-native-web":"~0.21.0","expo-secure-store":"^15.0.7","eslint-config-expo":"~10.0.0","expo-splash-screen":"~31.0.10","@expo/metro-runtime":"~6.1.2","react-native-screens":"~4.16.0","react-native-worklets-core":"^1.6.2","@testing-library/react-native":"^13.3.3"},"peerDependencies":{"expo":">=50.0.0","react":">=18.0.0","react-native":">=0.70.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.2.0_1760100458789_0.37870839250081056","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@ahmed_abbassi/ui","version":"0.3.0","description":"A comprehensive collection of production-ready React Native components for Expo applications","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup","build:watch":"tsup --watch","prepublishOnly":"npm run build","start":"expo start","reset-project":"node ./scripts/reset-project.js","android":"expo run:android","ios":"expo run:ios","web":"expo start --web","lint":"expo lint","test":"jest --watchAll","testDebug":"jest -o --watch --coverage=false","testFinal":"jest","updateSnapshots":"jest -u --coverage=false","test:perf":"reassure --testMatch '<rootDir>/__performance__/**/*.perf.test.tsx'","test:perf:baseline":"reassure --baseline --testMatch '<rootDir>/__performance__/**/*.perf.test.tsx'","test:perf:compare":"reassure --testMatch '<rootDir>/__performance__/**/*.perf.test.tsx'"},"dependencies":{"@expo/vector-icons":"^15.0.2","@gorhom/bottom-sheet":"^5.2.6","@react-navigation/bottom-tabs":"^7.4.0","@react-navigation/elements":"^2.6.3","@react-navigation/native":"^7.1.8","@tanstack/react-query":"^5.90.2","expo-blur":"^15.0.7","expo-haptics":"~15.0.7","expo-image":"~3.0.9","expo-image-picker":"~17.0.8","expo-linear-gradient":"~15.0.7","expo-symbols":"~1.0.7","react-native-gesture-handler":"~2.28.0","react-native-keyboard-controller":"1.18.5","react-native-reanimated":"~4.1.1","react-native-safe-area-context":"~5.6.0","react-native-worklets":"0.5.1","zustand":"^5.0.8"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.70.0","expo":">=50.0.0"},"devDependencies":{"@expo/metro-runtime":"~6.1.2","@testing-library/react-native":"^13.3.3","@types/jest":"^30.0.0","@types/node":"^24.7.1","@types/react":"~19.1.0","eslint":"^9.25.0","eslint-config-expo":"~10.0.0","expo":"54.0.12","expo-constants":"~18.0.9","expo-dev-client":"~6.0.13","expo-font":"~14.0.8","expo-linking":"~8.0.8","expo-router":"~6.0.10","expo-secure-store":"^15.0.7","expo-splash-screen":"~31.0.10","expo-status-bar":"~3.0.8","expo-system-ui":"~6.0.7","expo-updates":"~29.0.12","expo-web-browser":"~15.0.8","jest":"~29.7.0","jest-expo":"~54.0.12","react":"19.1.0","react-dom":"19.1.0","react-native":"0.81.4","react-native-screens":"~4.16.0","react-native-web":"~0.21.0","react-native-worklets-core":"^1.6.2","reassure":"^1.4.0","tsup":"^8.5.0","typescript":"~5.9.2"},"keywords":["react-native","expo","ui-components","react-native-components","expo-components","ui-library","design-system","mobile-ui","typescript"],"author":{"name":"Your Name","email":"your.email@example.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/absi/ui.git"},"bugs":{"url":"https://github.com/absi/ui/issues"},"homepage":"https://github.com/absi/ui#readme","jest":{"preset":"jest-expo","collectCoverage":true,"collectCoverageFrom":["**/*.{ts,tsx,js,jsx}","!**/coverage/**","!**/node_modules/**","!**/babel.config.js","!**/expo-env.d.ts","!**/.expo/**"]},"_id":"@ahmed_abbassi/ui@0.3.0","gitHead":"e9b48aae9884d81773ae538d413c00be7351970e","_nodeVersion":"22.13.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-w3+0slkcMCRFh1jnzofgrf8v0dsJYf5VUPh+P64aHw9qnC9I1DiRPZAoKqHpSZAU104DsxrfX8Wiyumgbmew3A==","shasum":"0961e46286235c886df60741db5a560d00855f1c","tarball":"https://registry.npmjs.org/@ahmed_abbassi/ui/-/ui-0.3.0.tgz","fileCount":57,"unpackedSize":1282340,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCMGY/Ca3NcfUyF2Oc32ENG82k0/9whDTbO+3jE0zyGKwIgAkcyzocrcFGiHd3C3waL9o5iINcV7Jzn+5YJI7OOm1U="}]},"_npmUser":{"name":"ahmed_abbassi","email":"a.abbassipro@gmail.com"},"directories":{},"maintainers":[{"name":"ahmed_abbassi","email":"a.abbassipro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.3.0_1760100894167_0.28867094558074347"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-10T12:41:26.776Z","modified":"2025-10-10T12:54:54.621Z","0.1.0":"2025-10-10T12:41:27.148Z","0.2.0":"2025-10-10T12:47:38.999Z","0.3.0":"2025-10-10T12:54:54.426Z"},"bugs":{"url":"https://github.com/absi/ui/issues"},"author":{"name":"Your Name","email":"your.email@example.com"},"license":"MIT","homepage":"https://github.com/absi/ui#readme","keywords":["react-native","expo","ui-components","react-native-components","expo-components","ui-library","design-system","mobile-ui","typescript"],"repository":{"type":"git","url":"git+https://github.com/absi/ui.git"},"description":"A comprehensive collection of production-ready React Native components for Expo applications","maintainers":[{"name":"ahmed_abbassi","email":"a.abbassipro@gmail.com"}],"readme":"# @ahmed_abbassi/ui\n\nA comprehensive collection of production-ready, performant React Native components built for Expo applications. Fully typed with TypeScript and optimized for both iOS and Android.\n\n## Features\n\n- 🎨 **40+ Components** - Core, Forms, Feedback, Layout, Navigation, and more\n- 🔥 **Performance Optimized** - Built with React.memo, useMemo, and tested with Reassure\n- 📱 **Cross-Platform** - Works seamlessly on iOS, Android, and Web\n- 🎭 **Dark Mode Support** - Built-in theming system with light/dark modes\n- 🔒 **Type Safe** - 100% TypeScript with full type definitions\n- ♿️ **Accessible** - Follows React Native accessibility guidelines\n- 🧪 **Well Tested** - 158+ unit tests with 67 snapshots\n- 📦 **Tree Shakeable** - Import only what you need\n- 🎯 **Zero Config** - Works out of the box with Expo\n\n## Installation\n\n```bash\nnpm install @ahmed_abbassi/ui\n# or\nyarn add @ahmed_abbassi/ui\n```\n\n### Peer Dependencies\n\nThis package requires the following peer dependencies:\n\n```bash\nnpx expo install react react-native expo\n```\n\n### Additional Dependencies\n\nSome components require additional Expo packages:\n\n```bash\nnpx expo install @expo/vector-icons expo-blur expo-haptics expo-image expo-image-picker expo-linear-gradient expo-symbols\nnpx expo install react-native-gesture-handler react-native-reanimated react-native-safe-area-context\nnpx expo install @gorhom/bottom-sheet @react-navigation/native\n```\n\n## Quick Start\n\n### Basic Usage\n\n```tsx\nimport { ThemeProvider, Button, Chip, Avatar } from '@ahmed_abbassi/ui';\n\nexport default function App() {\n  return (\n    <ThemeProvider>\n      <Button\n        label=\"Click Me\"\n        variant=\"filled\"\n        onPress={() => console.log('Pressed!')}\n      />\n\n      <Chip\n        label=\"React Native\"\n        color=\"primary\"\n        selected\n      />\n\n      <Avatar\n        name=\"John Doe\"\n        size=\"lg\"\n        status=\"online\"\n      />\n    </ThemeProvider>\n  );\n}\n```\n\n### Custom Theme\n\n```tsx\nimport { ThemeProvider } from '@ahmed_abbassi/ui';\n\nconst customTheme = {\n  mode: 'light', // 'light' | 'dark' | 'auto'\n  lightTheme: {\n    primary: '#FF6B6B',\n    success: '#51CF66',\n    background: '#FFFFFF',\n    text: '#000000',\n  },\n  darkTheme: {\n    primary: '#FF8787',\n    success: '#69DB7C',\n    background: '#1A1B1E',\n    text: '#FFFFFF',\n  },\n};\n\nexport default function App() {\n  return (\n    <ThemeProvider config={customTheme}>\n      {/* Your app components */}\n    </ThemeProvider>\n  );\n}\n```\n\n## Components\n\n### Core Components\n\n- **Accordion** - Expandable content sections with smooth animations\n- **Avatar** - User profile pictures with status indicators and group support\n- **AvatarUpload** - Avatar with image picker functionality\n- **Badge** - Notification badges with customizable variants\n- **Card** - Versatile content container with header, footer, and cover image support\n- **Chip** - Compact elements for tags, filters, and selections\n- **Divider** - Visual separator with optional label and multiple styles\n- **ThemedText** - Text with automatic theme support\n- **ThemedView** - View with automatic theme support\n\n### Form Components\n\n- **Button** - Versatile button with multiple variants and sizes\n- **ButtonGroup** - Segmented control for multiple selections\n- **CustomCheckbox** - Stylized checkbox with animations\n- **RadioButton** - Single selection from multiple options\n- **Select** - Dropdown select with search and custom options\n- **TextInput** - Enhanced text input with validation\n- **AutocompleteInput** - Text input with autocomplete suggestions\n- **MaskedInput** - Input with custom masking patterns\n- **OTPInput** - One-time password input with auto-focus\n- **FAB** - Floating action button with haptic feedback\n- **SplitButton** - Button with dropdown menu\n\n### Feedback Components\n\n- **EmptyState** - Placeholder for empty content areas\n- **Loader** - Loading indicators with multiple styles\n- **Skeleton** - Placeholder loading animations\n- **Toast** - Toast notifications with auto-dismiss\n\n### Layout Components\n\n- **BodyView** - Safe area wrapper for content\n- **BodyScrollView** - Scrollable safe area wrapper\n\n### Navigation Components\n\n- **HapticTab** - Tab navigation with haptic feedback\n- **Tabs** - Simple customizable tabs with line, pill, and contained variants\n- **SwipeableTabs** - Swipeable tab navigation\n\n### Modal Components\n\n- **Modal** - Centered modal dialog with customizable sizes and positions\n- **AppBottomSheetModal** - Bottom sheet modal with gestures\n\n### Card Components\n\n- **SwipeableCards** - Tinder-style swipeable cards\n\n### Context Menu\n\n- **ContextMenu** - Long-press context menu\n\n### Icon Components\n\n- **HelloWave** - Animated wave icon\n- **IconSymbol** - SF Symbols / Material Icons wrapper\n\n## Theming & Customization\n\nThe library includes a powerful theming system that allows you to customize all colors to match your brand.\n\n### Theme Provider\n\nWrap your app with `ThemeProvider` to enable theming:\n\n```tsx\nimport { ThemeProvider } from '@ahmed_abbassi/ui';\n\nexport default function App() {\n  return (\n    <ThemeProvider>\n      {/* Your app */}\n    </ThemeProvider>\n  );\n}\n```\n\n### Custom Colors\n\nYou can customize any color in the theme:\n\n```tsx\nimport { ThemeProvider } from '@ahmed_abbassi/ui';\n\nconst myTheme = {\n  mode: 'auto', // 'light', 'dark', or 'auto' (follows system)\n\n  lightTheme: {\n    // Brand Colors\n    primary: '#6366F1',\n    primaryLight: '#818CF8',\n    primaryDark: '#4F46E5',\n\n    // Semantic Colors\n    success: '#10B981',\n    warning: '#F59E0B',\n    error: '#EF4444',\n    info: '#3B82F6',\n\n    // Text Colors\n    text: '#111827',\n    textSecondary: '#6B7280',\n    textTertiary: '#9CA3AF',\n\n    // Background Colors\n    background: '#FFFFFF',\n    backgroundSecondary: '#F9FAFB',\n    backgroundTertiary: '#F3F4F6',\n\n    // Border Colors\n    border: '#E5E7EB',\n    borderSecondary: '#D1D5DB',\n  },\n\n  darkTheme: {\n    // Customize dark mode colors\n    primary: '#818CF8',\n    text: '#F9FAFB',\n    background: '#111827',\n    // ... other colors\n  },\n};\n\nexport default function App() {\n  return (\n    <ThemeProvider config={myTheme}>\n      {/* Your app */}\n    </ThemeProvider>\n  );\n}\n```\n\n### Partial Theme Override\n\nYou only need to override the colors you want to change:\n\n```tsx\nconst myTheme = {\n  lightTheme: {\n    primary: '#FF6B6B',      // Only change primary color\n    success: '#51CF66',      // And success color\n    // All other colors use defaults\n  },\n};\n\n<ThemeProvider config={myTheme}>\n  {/* Your app */}\n</ThemeProvider>\n```\n\n### Available Theme Colors\n\nAll customizable theme colors:\n\n```typescript\ninterface Theme {\n  // Brand Colors\n  primary: string;\n  primaryLight: string;\n  primaryLighter: string;\n  primaryDark: string;\n  primaryFaded: string;\n\n  // Semantic Colors\n  success: string;\n  successLight: string;\n  successDark: string;\n  successBackground: string;\n\n  warning: string;\n  warningLight: string;\n  warningDark: string;\n  warningBackground: string;\n\n  error: string;\n  errorLight: string;\n  errorDark: string;\n  errorBackground: string;\n\n  info: string;\n  infoLight: string;\n  infoDark: string;\n  infoBackground: string;\n\n  // Text Colors\n  text: string;\n  textSecondary: string;\n  textTertiary: string;\n  textDisabled: string;\n  textInverse: string;\n\n  // Background Colors\n  background: string;\n  backgroundSecondary: string;\n  backgroundTertiary: string;\n  backgroundDisabled: string;\n\n  // Border Colors\n  border: string;\n  borderSecondary: string;\n  borderThird: string;\n\n  // System Colors\n  systemBlue: string;\n  systemRed: string;\n  systemGreen: string;\n  systemYellow: string;\n  systemOrange: string;\n  systemPurple: string;\n}\n```\n\n### Using Theme in Custom Components\n\nAccess theme colors in your own components:\n\n```tsx\nimport { useThemeColor, useTheme } from '@ahmed_abbassi/ui';\nimport { View, Text } from 'react-native';\n\nfunction MyComponent() {\n  // Get a specific color\n  const backgroundColor = useThemeColor({}, 'background');\n  const primaryColor = useThemeColor({}, 'primary');\n\n  // Or get the entire theme\n  const { theme, colorScheme } = useTheme();\n\n  return (\n    <View style={{ backgroundColor }}>\n      <Text style={{ color: primaryColor }}>\n        Current mode: {colorScheme}\n      </Text>\n    </View>\n  );\n}\n```\n\n### Force Light/Dark Mode\n\nOverride system theme mode:\n\n```tsx\n// Always use light mode\n<ThemeProvider config={{ mode: 'light' }}>\n  {/* Your app */}\n</ThemeProvider>\n\n// Always use dark mode\n<ThemeProvider config={{ mode: 'dark' }}>\n  {/* Your app */}\n</ThemeProvider>\n\n// Follow system (default)\n<ThemeProvider config={{ mode: 'auto' }}>\n  {/* Your app */}\n</ThemeProvider>\n```\n\n## Examples\n\n### Button Component\n\n```tsx\nimport { Button } from '@ahmed_abbassi/ui';\n\n<Button\n  label=\"Primary Button\"\n  variant=\"filled\"\n  color=\"primary\"\n  size=\"md\"\n  onPress={() => console.log('Pressed')}\n/>\n\n<Button\n  label=\"Outlined Button\"\n  variant=\"outline\"\n  color=\"success\"\n  loading={isLoading}\n/>\n\n<Button\n  label=\"Icon Button\"\n  variant=\"ghost\"\n  icon={<Icon name=\"heart\" />}\n  disabled={isDisabled}\n/>\n```\n\n### Chip Component\n\n```tsx\nimport { Chip } from '@ahmed_abbassi/ui';\n\n// Simple chip\n<Chip label=\"React Native\" />\n\n// Selected chip\n<Chip label=\"TypeScript\" selected color=\"primary\" />\n\n// Deletable chip\n<Chip\n  label=\"Removable\"\n  onDelete={() => handleDelete()}\n  variant=\"tonal\"\n/>\n\n// Chip with icon\n<Chip\n  label=\"Starred\"\n  icon={<Icon name=\"star\" />}\n  color=\"warning\"\n/>\n```\n\n### Avatar Component\n\n```tsx\nimport { Avatar, AvatarGroup } from '@ahmed_abbassi/ui';\n\n// Avatar with name\n<Avatar name=\"John Doe\" size=\"lg\" />\n\n// Avatar with image\n<Avatar\n  src=\"https://example.com/avatar.jpg\"\n  name=\"John Doe\"\n  status=\"online\"\n/>\n\n// Avatar group\n<AvatarGroup max={3}>\n  <Avatar name=\"User 1\" />\n  <Avatar name=\"User 2\" />\n  <Avatar name=\"User 3\" />\n  <Avatar name=\"User 4\" />\n</AvatarGroup>\n```\n\n### Accordion Component\n\n```tsx\nimport Accordion, { AccordionItem } from '@ahmed_abbassi/ui';\n\n<Accordion allowMultiple>\n  <AccordionItem title=\"Section 1\">\n    <Text>Content for section 1</Text>\n  </AccordionItem>\n\n  <AccordionItem\n    title=\"Section 2\"\n    icon={<Icon name=\"settings\" />}\n  >\n    <Text>Content for section 2</Text>\n  </AccordionItem>\n</Accordion>\n```\n\n### Card Component\n\n```tsx\nimport { Card, Button } from '@ahmed_abbassi/ui';\n\n// Simple card\n<Card\n  title=\"Card Title\"\n  subtitle=\"Card subtitle\"\n>\n  <Text>Card content goes here</Text>\n</Card>\n\n// Card with cover image\n<Card\n  coverImage={{ uri: 'https://example.com/image.jpg' }}\n  title=\"Beautiful Sunset\"\n  subtitle=\"Photo by John Doe\"\n  footer={\n    <>\n      <Button label=\"Like\" variant=\"ghost\" />\n      <Button label=\"Share\" variant=\"ghost\" />\n    </>\n  }\n>\n  <Text>Amazing sunset at the beach</Text>\n</Card>\n\n// Clickable card\n<Card\n  variant=\"outlined\"\n  title=\"Settings\"\n  headerImage={{ uri: 'https://example.com/avatar.jpg' }}\n  onPress={() => navigate('Settings')}\n/>\n```\n\n### Select Component\n\n```tsx\nimport { Select } from '@ahmed_abbassi/ui';\n\nconst options = [\n  { label: 'Option 1', value: '1' },\n  { label: 'Option 2', value: '2' },\n  { label: 'Option 3', value: '3', disabled: true },\n];\n\n<Select\n  label=\"Choose an option\"\n  options={options}\n  value={selectedValue}\n  onValueChange={setSelectedValue}\n  placeholder=\"Select...\"\n  searchable\n/>\n```\n\n### Modal Component\n\n```tsx\nimport { Modal, Button } from '@ahmed_abbassi/ui';\n\nconst [visible, setVisible] = useState(false);\n\n<Modal\n  visible={visible}\n  onClose={() => setVisible(false)}\n  title=\"Confirm Action\"\n  size=\"md\"\n  footer={\n    <>\n      <Button\n        label=\"Cancel\"\n        variant=\"outline\"\n        onPress={() => setVisible(false)}\n      />\n      <Button\n        label=\"Confirm\"\n        onPress={() => {\n          handleConfirm();\n          setVisible(false);\n        }}\n      />\n    </>\n  }\n>\n  <Text>Are you sure you want to continue?</Text>\n</Modal>\n```\n\n### Tabs Component\n\n```tsx\nimport { Tabs } from '@ahmed_abbassi/ui';\n\nconst tabs = [\n  { key: 'all', label: 'All' },\n  { key: 'active', label: 'Active', badge: 5 },\n  { key: 'completed', label: 'Completed' },\n];\n\n<Tabs\n  tabs={tabs}\n  activeTab={activeTab}\n  onTabChange={setActiveTab}\n  variant=\"line\"\n/>\n```\n\n### Divider Component\n\n```tsx\nimport { Divider } from '@ahmed_abbassi/ui';\n\n// Simple divider\n<Divider />\n\n// With label\n<Divider label=\"OR\" labelPosition=\"center\" />\n\n// Dashed divider\n<Divider variant=\"dashed\" />\n\n// Vertical divider\n<View style={{ flexDirection: 'row' }}>\n  <Text>Left</Text>\n  <Divider orientation=\"vertical\" />\n  <Text>Right</Text>\n</View>\n```\n\n## Performance\n\nAll components are optimized for performance:\n\n- React.memo for preventing unnecessary re-renders\n- useMemo/useCallback for expensive calculations\n- Optimized animations with react-native-reanimated\n- Tested with Reassure for performance regressions\n\nRun performance tests:\n\n```bash\nnpm run test:perf:baseline  # Create baseline\nnpm run test:perf:compare   # Compare against baseline\n```\n\n## Testing\n\nThe library includes comprehensive test coverage:\n\n```bash\nnpm test                # Run tests in watch mode\nnpm run testFinal       # Run all tests once\nnpm run updateSnapshots # Update snapshots\n```\n\n## Local Development\n\nTo test the package locally in another project:\n\n1. Build the package:\n   ```bash\n   npm run build\n   ```\n\n2. Link it locally:\n   ```bash\n   npm link\n   ```\n\n3. In your other project:\n   ```bash\n   npm link @ahmed_abbassi/ui\n   ```\n\n## Publishing to npm\n\nBefore publishing, make sure you:\n\n1. Update `\"author\"` in `package.json` with your name and email\n2. Ensure you're logged in to npm: `npm login`\n3. Build the package: `npm run build`\n\nThen publish:\n\n**For public package (free):**\n```bash\nnpm publish --access public\n```\n\n**For private package (requires paid npm account):**\n```bash\nnpm publish\n```\n\nNote: Scoped packages like `@ahmed_abbassi/ui` are private by default. Use `--access public` to make it publicly available for free.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT © Your Name\n\n## Support\n\n- 📦 [npm Package](https://www.npmjs.com/package/@ahmed_abbassi/ui)\n- 📝 [Documentation](https://github.com/absi/ui)\n- 🐛 [Issue Tracker](https://github.com/absi/ui/issues)\n","readmeFilename":"README.md"}