internhub-v2-mobile-ui-kit 1.1.4 → 1.1.6

package/README.md

@@ -0,0 +1,49 @@
+# InternHub Mobile UI Kit
+
+React Native UI component library and design tokens for the InternHub mobile app. Use system default fonts; no custom font bundling required.
+
+## Installation
+
+```bash
+npm install internhub-v2-mobile-ui-kit
+```
+
+Peer dependencies: `react`, `react-native`. Optional: `react-native-linear-gradient`, `react-native-svg` for gradient and icon components.
+
+## Usage
+
+```ts
+import { Colors, Spacing, Button, Input, Card, Header } from 'internhub-v2-mobile-ui-kit';
+```
+
+### Design tokens
+
+- **Colors** – primary, background, text, borders, status (success, error, warning, info)
+- **Spacing** – xs, sm, md, lg, xl, xxl
+- **BorderRadius** – sm, md, lg, xl, xxl, full
+- **FontSize** – xs, sm, md, lg, xl, xxl, xxxl
+- **FontWeight** – regular, medium, semibold, bold
+- **Shadow** – card, modal presets
+
+### Components
+
+| Category | Components |
+|----------|------------|
+| Inputs & forms | Button, Input, Select, AdvancedSelect, Checkbox, Switch, OTPInput, PasswordChecker, DatePicker, TimePicker |
+| Feedback | Alert, Badge, Toast, Loading, EmptyState, Modal, BottomSheet, Skeleton |
+| Layout | Card, Header, Divider, Avatar, Icon, GradientBackground |
+| Icons | UploadIcon, TrashIcon, RetryIcon |
+
+### Example
+
+```tsx
+import { Button, Colors, Card } from 'internhub-v2-mobile-ui-kit';
+
+<Card style={{ margin: 16 }}>
+  <Button title="Submit" onPress={() => {}} variant="primary" />
+</Card>
+```
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "internhub-v2-mobile-ui-kit",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Premium UI Kit for InternHub Mobile App",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -17,10 +17,12 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-vector-icons": "*"
   },
   "dependencies": {
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-svg": "^14.1.0"
+    "react-native-svg": "^14.1.0",
+    "react-native-vector-icons": "^10.2.0"
   }
 }

package/src/Alert/Alert.tsx

@@ -1,21 +1,30 @@
-
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { Spacing, FontSize, BorderRadius, Colors } from '../tokens';
 
+const ALERT_ICON_SIZE = 20;
+
 interface AlertProps {
   type: 'success' | 'error' | 'warning' | 'info';
   message: string;
   subMessage?: string;
+  center?: boolean;
 }
 
-export const Alert = ({ type, message, subMessage }: AlertProps) => {
+const iconMap = {
+  success: { name: 'check-circle' as const, color: Colors.white },
+  error: { name: 'error' as const, color: Colors.white },
+  warning: { name: 'warning' as const, color: Colors.white },
+  info: { name: 'info' as const, color: Colors.white },
+};
+
+export const Alert = ({ type, message, subMessage, center }: AlertProps) => {
   const getStyles = () => {
     switch (type) {
       case 'success':
         return {
           container: styles.successContainer,
-          icon: '✓',
           iconStyle: styles.successIcon,
           messageStyle: styles.successMessage,
           subMessageStyle: styles.successSubMessage,
@@ -23,7 +32,6 @@ export const Alert = ({ type, message, subMessage }: AlertProps) => {
       case 'error':
         return {
           container: styles.errorContainer,
-          icon: '!',
           iconStyle: styles.errorIcon,
           messageStyle: styles.errorMessage,
           subMessageStyle: styles.errorSubMessage,
@@ -31,7 +39,6 @@ export const Alert = ({ type, message, subMessage }: AlertProps) => {
       case 'warning':
         return {
           container: styles.warningContainer,
-          icon: '!',
           iconStyle: styles.warningIcon,
           messageStyle: styles.warningMessage,
           subMessageStyle: styles.warningSubMessage,
@@ -40,7 +47,6 @@ export const Alert = ({ type, message, subMessage }: AlertProps) => {
       default:
         return {
           container: styles.infoContainer,
-          icon: 'i',
           iconStyle: styles.infoIcon,
           messageStyle: styles.infoMessage,
           subMessageStyle: styles.infoSubMessage,
@@ -49,11 +55,16 @@ export const Alert = ({ type, message, subMessage }: AlertProps) => {
   };
 
   const alertStyles = getStyles();
+  const icon = iconMap[type];
 
   return (
     <View style={[styles.container, alertStyles.container]}>
       <View style={[styles.iconContainer, alertStyles.iconStyle]}>
-        <Text style={styles.iconText}>{alertStyles.icon}</Text>
+        <MaterialIcons
+          name={icon.name}
+          size={ALERT_ICON_SIZE}
+          color={icon.color}
+        />
       </View>
       <View style={styles.textContainer}>
         <Text style={[styles.message, alertStyles.messageStyle]}>{message}</Text>
@@ -76,20 +87,18 @@ const styles = StyleSheet.create({
     marginBottom: Spacing.md,
     marginTop: Spacing.sm,
   },
+  containerCenter: {
+    alignItems: 'center',
+  },
   iconContainer: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: Spacing.sm,
     marginTop: 2,
   },
-  iconText: {
-    color: Colors.white,
-    fontSize: 12,
-    fontWeight: 'bold',
-  },
   textContainer: {
     flex: 1,
   },
@@ -97,11 +106,13 @@ const styles = StyleSheet.create({
     fontSize: FontSize.md,
     fontWeight: '500',
   },
+  messageCenter: {
+    textAlign: 'center',
+  },
   subMessage: {
     fontSize: FontSize.sm,
     marginTop: 4,
   },
-  // Success
   successContainer: {
     backgroundColor: Colors.successLight,
     borderWidth: 1,
@@ -116,7 +127,6 @@ const styles = StyleSheet.create({
   successSubMessage: {
     color: Colors.successDark,
   },
-  // Error - Pink/Red background like Figma
   errorContainer: {
     backgroundColor: Colors.errorPink,
     borderWidth: 1,
@@ -131,7 +141,6 @@ const styles = StyleSheet.create({
   errorSubMessage: {
     color: Colors.errorDark,
   },
-  // Warning
   warningContainer: {
     backgroundColor: Colors.warningLight,
     borderWidth: 1,
@@ -146,7 +155,6 @@ const styles = StyleSheet.create({
   warningSubMessage: {
     color: Colors.primaryDark,
   },
-  // Info
   infoContainer: {
     backgroundColor: Colors.infoLight,
     borderWidth: 1,

package/src/Card/Card.tsx

@@ -16,7 +16,6 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.white,
     borderRadius: 24,
     padding: 20,
-    // Premium shadow
     shadowColor: Colors.primary,
     shadowOffset: { width: 0, height: 10 },
     shadowOpacity: 0.1,