internhub-v2-mobile-ui-kit 0.0.7 → 0.0.9

package/README.md

@@ -1,11 +1,9 @@
 # InternHub v2 Mobile UI Kit
 
-This repository contains the official design system and UI components for the InternHub v2 Mobile Application. It provides a standardized set of React Native components and design tokens (colors, typography, spacing) to ensure consistency across the application ecosystem.
+Premium Design System and UI Components for the InternHub v2 Mobile Application. Provides standardized React Native components and design tokens (colors, typography, spacing) extracted from Figma to ensure visual consistency across the entire application ecosystem.
 
 ## Installation
 
-To integrate the UI kit into your project, install it via npm or yarn:
-
 ```bash
 npm install internhub-v2-mobile-ui-kit
 ```
@@ -20,25 +18,30 @@ Ensure the following peer dependencies are installed in your project root:
 ## Usage
 
 ### 1. Design Tokens
-The UI kit exposes a comprehensive set of design tokens tailored for the application's theme.
+The UI kit exposes a comprehensive set of design tokens tailored for the application's premium orange theme.
 
 ```tsx
-import { Colors, Spacing } from 'internhub-v2-mobile-ui-kit';
+import { Colors, Spacing, BorderRadius, FontSize, FontWeight, Shadow } from 'internhub-v2-mobile-ui-kit';
 
 const styles = StyleSheet.create({
   container: {
     backgroundColor: Colors.background,
     padding: Spacing.md,
+    borderRadius: BorderRadius.lg,
+  },
+  card: {
+    ...Shadow.card,
+    backgroundColor: Colors.surface,
   },
   primaryText: {
     color: Colors.primary,
-    fontWeight: '600',
+    fontSize: FontSize.lg,
+    fontWeight: FontWeight.bold,
   }
 });
 ```
 
 ### 2. Components
-Import components directly from the package. All components adhere to the project's design guidelines.
 
 #### Button
 Supported variants: `primary`, `secondary`, `outline`, `ghost`.
@@ -55,7 +58,7 @@ import { Button } from 'internhub-v2-mobile-ui-kit';
 ```
 
 #### Input Field
-Standard input field with integrated label and error handling.
+Standard input field with integrated label, error handling, and password toggle.
 
 ```tsx
 import { Input } from 'internhub-v2-mobile-ui-kit';
@@ -66,11 +69,18 @@ import { Input } from 'internhub-v2-mobile-ui-kit';
   value={name}
   onChangeText={setName}
   error={errors.name}
+  required
+/>
+
+<Input
+  label="Password"
+  isPassword
+  value={password}
+  onChangeText={setPassword}
 />
 ```
 
 #### Selection Controls (Checkbox & Switch)
-New in v0.0.4.
 
 ```tsx
 import { Checkbox, Switch } from 'internhub-v2-mobile-ui-kit';
@@ -87,18 +97,68 @@ import { Checkbox, Switch } from 'internhub-v2-mobile-ui-kit';
 />
 ```
 
+#### Badge
+Status indicators with preset color schemes.
+
+```tsx
+import { Badge } from 'internhub-v2-mobile-ui-kit';
+
+<Badge label="Approved" type="success" />
+<Badge label="Pending" type="warning" size="md" />
+<Badge label="Rejected" type="error" />
+```
+
+#### Avatar
+User avatar with image support and fallback initials.
+
+```tsx
+import { Avatar } from 'internhub-v2-mobile-ui-kit';
+
+<Avatar name="Nguyen Van A" size="lg" />
+<Avatar source={{ uri: 'https://...' }} size="md" />
+```
+
+#### Skeleton Loading
+Animated placeholder for loading states.
+
+```tsx
+import { Skeleton } from 'internhub-v2-mobile-ui-kit';
+
+<Skeleton width="60%" height={16} borderRadius={8} />
+<Skeleton width="100%" height={80} borderRadius={16} />
+```
+
 ## Component Library
 
-| Category | Components | Status |
-|----------|------------|--------|
-| **Inputs** | Button, Input, Select, Checkbox, Switch, OTPInput, DatePicker, TimePicker | Stable |
-| **Feedback** | Alert, Badge, Toast, Loading, EmptyState, Modal | Stable |
-| **Data Display** | Card, Avatar, Divider, Header | Stable |
-| **Layout** | GradientBackground | Stable |
+| Category | Components | Count | Status |
+|----------|------------|-------|--------|
+| **Inputs & Forms** | Button, Input, Select, Checkbox, Switch, OTPInput, PasswordChecker, DatePicker, TimePicker | 9 | Stable |
+| **Feedback & Status** | Alert, Badge, Toast, Loading, EmptyState, Modal, BottomSheet, Skeleton | 8 | Stable |
+| **Data Display** | Card, Avatar, Divider, Header, Icon | 5 | Stable |
+| **Layout** | GradientBackground | 1 | Stable |
+| **Design Tokens** | Colors, Spacing, BorderRadius, FontSize, FontWeight, Shadow | 6 | Stable |
+
+**Total: 23 components + 6 design token sets**
+
+## Changelog
+
+### v0.0.8 (2026-02-22)
+- Fix Quick Action icons matching Figma design
+- Standardize header spacing across all mini-app screens
+- Add iconCircle style definition
+- Optimize mini-app loading (direct import strategy)
+
+### v0.0.7
+- Add Skeleton, BottomSheet, Icon components
+- Add PasswordChecker component
+- Stabilize all component APIs
 
-## Versioning
+### v0.0.4
+- Add Checkbox, Switch, Select components
+- Add DatePicker, TimePicker components
 
-We use Semantic Versioning (SemVer) for versioning. For the versions available, see the tags on this repository.
+### v0.0.1
+- Initial release with Button, Input, Card, Avatar, Badge, Alert, Toast
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "internhub-v2-mobile-ui-kit",
-    "version": "0.0.7",
+    "version": "0.0.9",
     "description": "Premium UI Kit for InternHub Mobile App",
     "main": "src/index.ts",
     "types": "src/index.ts",

package/src/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { Colors, Spacing, FontSize, BorderRadius } from '../tokens';
 
@@ -20,7 +20,7 @@ export const Alert = ({ type, message, subMessage }: AlertProps) => {
             case 'error':
                 return {
                     container: styles.errorContainer,
-                    icon: '✕',
+                    icon: '!',
                     iconStyle: styles.errorIcon,
                 };
             case 'warning':

package/src/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { View, Image, Text, StyleSheet, ImageSourcePropType, ViewStyle } from 'react-native';
 import { Colors } from '../tokens';
 

package/src/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import { Colors } from '../tokens';
 

package/src/BottomSheet/BottomSheet.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { View, Modal, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
 import { Colors } from '../tokens';
 

package/src/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import {
   TouchableOpacity,
   Text,
@@ -69,7 +69,7 @@ export const Button = ({
       activeOpacity={0.85}>
       {loading ? (
         <ActivityIndicator
-          color={variant === 'outline' ? '#FF9800' : '#FFF'}
+          color={variant === 'outline' ? Colors.primary : Colors.textLight}
         />
       ) : (
         <Text style={[styles.text, getTextStyle()]}>{title}</Text>
@@ -88,8 +88,8 @@ const styles = StyleSheet.create({
     minHeight: 52,
   },
   buttonPrimary: {
-    backgroundColor: '#FF9800',
-    shadowColor: '#FF9800',
+    backgroundColor: Colors.primary,
+    shadowColor: Colors.primary,
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.3,
     shadowRadius: 8,
@@ -128,7 +128,7 @@ const styles = StyleSheet.create({
     color: '#757575',
   },
   textGhost: {
-    color: '#FF9800',
+    color: Colors.primary,
   },
   textDisabled: {
     color: '#9E9E9E',

package/src/Card/Card.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
 import { Colors, BorderRadius, Spacing } from '../tokens';
 

package/src/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
 import { Colors } from '../tokens';
 

package/src/Divider/Divider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
 import { Colors } from '../tokens';
 

package/src/EmptyState/EmptyState.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { View, Text, StyleSheet, Image, ImageSourcePropType, ViewStyle } from 'react-native';
 import { Colors } from '../tokens';
 
@@ -21,7 +21,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
                 {image ? (
                     <Image source={image} style={styles.image} resizeMode="contain" />
                 ) : (
-                    <Text style={styles.icon}>📋</Text>
+                    <Text style={styles.icon}>📋</Text>
                 )}
             </View>
             {title && <Text style={styles.title}>{title}</Text>}

package/src/GradientBackground/GradientBackground.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 

package/src/Header/Header.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
+import { Colors } from '../tokens';
+
+interface HeaderProps {
+    title: string;
+    onBack?: () => void;
+    rightElement?: React.ReactNode;
+    style?: ViewStyle;
+}
+
+export const Header: React.FC<HeaderProps> = ({ title, onBack, rightElement, style }) => {
+    return (
+        <View style={[styles.container, style]}>
+            <View style={styles.leftContainer}>
+                {onBack && (
+                    <TouchableOpacity onPress={onBack} style={styles.backButton}>
+                        <View style={styles.backIcon} />
+                    </TouchableOpacity>
+                )}
+            </View>
+            <Text style={styles.title} numberOfLines={1}>{title}</Text>
+            <View style={styles.rightContainer}>
+                {rightElement}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        height: 56,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        backgroundColor: Colors.white,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.divider,
+    },
+    leftContainer: {
+        width: 40,
+        height: 40,
+        justifyContent: 'center',
+    },
+    title: {
+        flex: 1,
+        textAlign: 'center',
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: Colors.textDark,
+    },
+    rightContainer: {
+        width: 40,
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+    },
+    backButton: {
+        padding: 8,
+    },
+    backIcon: {
+        width: 12,
+        height: 12,
+        borderLeftWidth: 2,
+        borderBottomWidth: 2,
+        borderColor: Colors.textDark,
+        transform: [{ rotate: '45deg' }],
+    },
+});

package/src/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { Image, ImageStyle, ImageSourcePropType } from 'react-native';
 import { Colors } from '../tokens';
 

package/src/Input/Input.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react';
 import {
     View,
     Text,

package/src/Loading/Loading.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View, ActivityIndicator, StyleSheet, ColorValue } from 'react-native';
+import { Colors } from '../tokens';
+
+interface LoadingProps {
+    color?: ColorValue;
+    size?: 'small' | 'large';
+    style?: any;
+}
+
+export const Loading: React.FC<LoadingProps> = ({ color = Colors.primary, size = 'large', style }) => {
+    return (
+        <View style={[styles.container, style]}>
+            <ActivityIndicator color={color} size={size} />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

package/src/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import {
     View,
     Text,

package/src/OTPInput/OTPInput.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { View, TextInput, StyleSheet } from 'react-native';
 import { Colors, Spacing, BorderRadius, FontSize } from '../tokens';
 

package/src/PasswordChecker/PasswordChecker.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { Colors, Spacing, FontSize } from '../tokens';
 
@@ -21,7 +21,7 @@ export const PasswordChecker = ({ requirements }: PasswordCheckerProps) => {
                             styles.checkbox,
                             req.isValid ? styles.checkboxValid : styles.checkboxInvalid,
                         ]}>
-                        {req.isValid && <Text style={styles.checkmark}>✓</Text>}
+                        {req.isValid && <Text style={styles.checkmark}>✓</Text>}
                     </View>
                     <Text
                         style={[

package/src/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, Modal, FlatList, ViewStyle } from 'react-native';
 import { Colors } from '../tokens';
 

package/src/Skeleton/Skeleton.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { View, Animated, StyleSheet, ViewStyle, DimensionValue } from 'react-native';
 import { Colors } from '../tokens';
 

package/src/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { TouchableOpacity, View, StyleSheet } from 'react-native';
 import { Colors } from '../tokens';
 

package/src/index.ts

@@ -1,4 +1,4 @@
-// Design Tokens
+// Design Tokens
 export * from './tokens';
 
 // Inputs & Forms

package/src/tokens.ts

@@ -1,13 +1,15 @@
-// Design Tokens - Extracted from Figma
+// Design Tokens - Extracted from Figma
 export const Colors = {
   // Brand - Premium Orange
-  primary: '#E18308', // Main Brand Color
-  primaryDark: '#B36605',
+  primary: '#C36F06', // Main Brand Color - Matched with Login Title
+  primaryDark: '#A35D05',
   primaryLight: '#FF9800',
   secondary: '#FF9800', // Brighter Orange for accents
+  secondaryDark: '#B86500', // Darker Orange for headers
 
   // Backgrounds - Soft Cream & Glass
   background: '#FFF9F0', // Cream Background
+  backgroundAlt: '#FFF8F0', // Slightly warmer cream
   surface: '#FFFFFF', // Pure White
   surfaceAlt: '#FFFBF5', // Soft Cream Surface
 
@@ -21,33 +23,52 @@ export const Colors = {
   textMuted: '#8A9499',
   textDisabled: '#BDBDBD',
 
-  // Borders
+  // Borders & Dividers
   border: '#FFE0B2',
   borderAlt: 'rgba(0, 0, 0, 0.08)',
   inputBorder: '#E0E0E0',
+  divider: '#F5F5F5', // Light divider line
+  attendanceBorder: '#CCCCCC', // Neutral border for calendar
 
   // Functionals
   success: '#4CAF50',
   successLight: '#E8F5E9',
+  successMint: '#99D8B1', // Mint green for attendance
   error: '#F44336',
+  errorDark: '#E1251B', // Darker red
   errorLight: '#FFEBEE',
+  errorPink: '#FFE4E1', // Light pink bg for error icons
   warning: '#FFC107',
   warningLight: '#FFF8E1',
   info: '#2196F3',
   infoLight: '#E3F2FD',
+  disabled: '#BDBDBD', // Disabled state
+  lateRed: '#FF3B30', // iOS-style red for late status
 
   // Special Effects (Glassmorphism)
   shadow: '#E18308', // Brand shadow
   shadowBlack: '#000000', // Natural shadow
   glassWhite: 'rgba(255, 255, 255, 0.9)',
+  glassWhiteWarm: 'rgba(255, 250, 240, 0.92)', // Warmer glass
   glassOrange: 'rgba(255, 237, 213, 0.6)',
   glassBorder: 'rgba(255, 255, 255, 0.8)',
+  orangeShadow: 'rgba(225, 131, 8, 0.4)', // Orange glow shadow
+  transparentCam: 'rgba(225, 131, 8, 0.05)', // Very subtle orange bg
 
-  // Utilities & Overlays
+  // Gradient & Glow
+  glowStart: '#FFE4C4', // Gradient start
+  glowMid: '#FFECD2', // Gradient mid
+
+  // Neutral & Utility
   overlay: 'rgba(0, 0, 0, 0.5)',
-  neutralBg: '#FFF3E0', // Was avatarBg
+  neutralBg: '#FFF3E0', // Neutral warm bg (avatar, etc.)
+  avatarBg: '#FFF3E0', // Avatar background (alias of neutralBg)
   white: '#FFFFFF',
   black: '#000000',
+  offWhite: '#F9F9F9', // Slightly off-white
+  lightGray: '#F5F5F5', // Light gray bg
+  placeholderGray: '#E9EEF1', // Placeholder/skeleton bg
+  mutedGray: '#A0B2C1', // Muted cool gray
   inputBackground: '#FFFFFF',
   cardBackground: '#FFFFFF',
   transparent: 'transparent',