internhub-v2-mobile-ui-kit 0.0.1

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "internhub-v2-mobile-ui-kit",
+    "version": "0.0.1",
+    "description": "Premium UI Kit for InternHub Mobile App",
+    "main": "src/index.ts",
+    "types": "src/index.ts",
+    "scripts": {
+        "lint": "eslint .",
+        "test": "jest"
+    },
+    "keywords": [
+        "react-native",
+        "ui-kit",
+        "internhub"
+    ],
+    "author": "Nguyen Thanh Nhan",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+    },
+    "dependencies": {
+        "react-native-linear-gradient": "^2.8.3",
+        "react-native-svg": "^14.1.0"
+    }
+}

package/src/Alert/Alert.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { Colors, Spacing, FontSize, BorderRadius } from '../tokens';
+
+interface AlertProps {
+    type: 'success' | 'error' | 'warning' | 'info';
+    message: string;
+    subMessage?: string;
+}
+
+export const Alert = ({ type, message, subMessage }: AlertProps) => {
+    const getStyles = () => {
+        switch (type) {
+            case 'success':
+                return {
+                    container: styles.successContainer,
+                    icon: '✓',
+                    iconStyle: styles.successIcon,
+                };
+            case 'error':
+                return {
+                    container: styles.errorContainer,
+                    icon: '✕',
+                    iconStyle: styles.errorIcon,
+                };
+            case 'warning':
+                return {
+                    container: styles.warningContainer,
+                    icon: '!',
+                    iconStyle: styles.warningIcon,
+                };
+            case 'info':
+            default:
+                return {
+                    container: styles.infoContainer,
+                    icon: 'i',
+                    iconStyle: styles.infoIcon,
+                };
+        }
+    };
+
+    const alertStyles = getStyles();
+
+    return (
+        <View style={[styles.container, alertStyles.container]}>
+            <View style={[styles.iconContainer, alertStyles.iconStyle]}>
+                <Text style={styles.iconText}>{alertStyles.icon}</Text>
+            </View>
+            <View style={styles.textContainer}>
+                <Text style={styles.message}>{message}</Text>
+                {subMessage && <Text style={styles.subMessage}>{subMessage}</Text>}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        padding: Spacing.md,
+        borderRadius: BorderRadius.md,
+        marginBottom: Spacing.md,
+        marginTop: Spacing.sm,
+    },
+    iconContainer: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: Spacing.sm,
+        marginTop: 2,
+    },
+    iconText: {
+        color: '#FFF',
+        fontSize: 12,
+        fontWeight: 'bold',
+    },
+    textContainer: {
+        flex: 1,
+    },
+    message: {
+        fontSize: FontSize.md,
+        color: '#D32F2F',
+        fontWeight: '500',
+    },
+    subMessage: {
+        fontSize: FontSize.sm,
+        color: '#D32F2F',
+        marginTop: 4,
+    },
+    // Error - Pink/Red background like Figma
+    errorContainer: {
+        backgroundColor: '#FFEBEE',
+        borderWidth: 1,
+        borderColor: '#FFCDD2',
+    },
+    errorIcon: {
+        backgroundColor: '#D32F2F',
+    },
+    // Success
+    successContainer: {
+        backgroundColor: '#E8F5E9',
+        borderWidth: 1,
+        borderColor: '#C8E6C9',
+    },
+    successIcon: {
+        backgroundColor: '#4CAF50',
+    },
+    // Warning
+    warningContainer: {
+        backgroundColor: '#FFF8E1',
+        borderWidth: 1,
+        borderColor: '#FFECB3',
+    },
+    warningIcon: {
+        backgroundColor: '#FF9800',
+    },
+    // Info
+    infoContainer: {
+        backgroundColor: '#E3F2FD',
+        borderWidth: 1,
+        borderColor: '#BBDEFB',
+    },
+    infoIcon: {
+        backgroundColor: '#2196F3',
+    },
+});

package/src/Button/Button.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+} from 'react-native';
+import { Colors, Spacing, FontSize } from '../tokens';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  disabled?: boolean;
+  loading?: boolean;
+  style?: ViewStyle;
+}
+
+export const Button = ({
+  title,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  style,
+}: ButtonProps) => {
+  const getButtonStyle = () => {
+    if (disabled) {
+      return styles.buttonDisabled;
+    }
+    switch (variant) {
+      case 'primary':
+        return styles.buttonPrimary;
+      case 'secondary':
+        return styles.buttonSecondary;
+      case 'outline':
+        return styles.buttonOutline;
+      case 'ghost':
+        return styles.buttonGhost;
+      default:
+        return styles.buttonPrimary;
+    }
+  };
+
+  const getTextStyle = () => {
+    if (disabled) {
+      return styles.textDisabled;
+    }
+    switch (variant) {
+      case 'primary':
+        return styles.textPrimary;
+      case 'secondary':
+        return styles.textSecondary;
+      case 'outline':
+        return styles.textOutline;
+      case 'ghost':
+        return styles.textGhost;
+      default:
+        return styles.textPrimary;
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[styles.button, getButtonStyle(), style]}
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.85}>
+      {loading ? (
+        <ActivityIndicator
+          color={variant === 'outline' ? '#FF9800' : '#FFF'}
+        />
+      ) : (
+        <Text style={[styles.text, getTextStyle()]}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: Spacing.md + 2,
+    paddingHorizontal: Spacing.xl,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 52,
+  },
+  buttonPrimary: {
+    backgroundColor: '#FF9800',
+    shadowColor: '#FF9800',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  buttonSecondary: {
+    backgroundColor: '#4CAF50',
+    shadowColor: '#4CAF50',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  buttonOutline: {
+    backgroundColor: '#F5F5F5',
+    borderWidth: 0,
+  },
+  buttonGhost: {
+    backgroundColor: 'transparent',
+  },
+  buttonDisabled: {
+    backgroundColor: '#E0E0E0',
+  },
+  text: {
+    fontSize: FontSize.lg,
+    fontWeight: '600',
+    letterSpacing: 0.5,
+  },
+  textPrimary: {
+    color: '#FFF',
+  },
+  textSecondary: {
+    color: '#FFF',
+  },
+  textOutline: {
+    color: '#757575',
+  },
+  textGhost: {
+    color: '#FF9800',
+  },
+  textDisabled: {
+    color: '#9E9E9E',
+  },
+});

package/src/Card/Card.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import { Colors, BorderRadius, Spacing } from '../tokens';
+
+interface CardProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+
+export const Card = ({ children, style }: CardProps) => {
+    return <View style={[styles.card, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+    card: {
+        backgroundColor: Colors.cardBackground,
+        borderRadius: 30,
+        padding: Spacing.xl,
+        marginHorizontal: Spacing.lg,
+        // Premium shadow
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 10 },
+        shadowOpacity: 0.15,
+        shadowRadius: 20,
+        elevation: 10,
+    },
+});

package/src/GradientBackground/GradientBackground.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+interface GradientBackgroundProps {
+    children: React.ReactNode;
+}
+
+export const GradientBackground = ({ children }: GradientBackgroundProps) => {
+    return (
+        <LinearGradient
+            colors={['#FFE4C4', '#FFECD2', '#FFF5EB', '#FFFFFF', '#FFFFFF']}
+            locations={[0, 0.25, 0.45, 0.7, 1]}
+            start={{ x: 0.5, y: 0 }}
+            end={{ x: 0.5, y: 1 }}
+            style={styles.container}
+        >
+            <View style={styles.content}>{children}</View>
+        </LinearGradient>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        zIndex: 10,
+    },
+});

package/src/Input/Input.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    StyleSheet,
+    TouchableOpacity,
+    TextInputProps,
+} from 'react-native';
+import { Colors, Spacing, FontSize, BorderRadius } from '../tokens';
+
+interface InputProps extends TextInputProps {
+    label?: string;
+    required?: boolean;
+    error?: string;
+    isPassword?: boolean;
+}
+
+export const Input = ({
+    label,
+    required,
+    error,
+    isPassword,
+    style,
+    ...props
+}: InputProps) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+
+    return (
+        <View style={styles.container}>
+            {label && (
+                <Text style={styles.label}>
+                    {label}
+                    {required && <Text style={styles.required}> *</Text>}
+                </Text>
+            )}
+
+            <View
+                style={[
+                    styles.inputContainer,
+                    isFocused && styles.inputFocused,
+                    error && styles.inputError,
+                ]}>
+                <TextInput
+                    style={[styles.input, style]}
+                    placeholderTextColor="#BDBDBD"
+                    secureTextEntry={isPassword && !showPassword}
+                    onFocus={() => setIsFocused(true)}
+                    onBlur={() => setIsFocused(false)}
+                    {...props}
+                />
+
+                {isPassword && (
+                    <TouchableOpacity
+                        onPress={() => setShowPassword(!showPassword)}
+                        style={styles.eyeButton}>
+                        {showPassword ? (
+                            // Eye open icon
+                            <View style={styles.eyeIconContainer}>
+                                <View style={styles.eyeShape} />
+                                <View style={styles.eyePupil} />
+                            </View>
+                        ) : (
+                            // Lock icon
+                            <View style={styles.lockIconContainer}>
+                                <View style={styles.lockShackle} />
+                                <View style={styles.lockBody}>
+                                    <View style={styles.lockKeyhole} />
+                                </View>
+                            </View>
+                        )}
+                    </TouchableOpacity>
+                )}
+            </View>
+
+            {error && <Text style={styles.errorText}>{error}</Text>}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        marginBottom: Spacing.lg,
+    },
+    label: {
+        fontSize: FontSize.md,
+        color: '#424242',
+        marginBottom: Spacing.sm,
+        fontWeight: '500',
+    },
+    required: {
+        color: '#FF5252',
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1.5,
+        borderColor: '#E0E0E0',
+        borderRadius: 12,
+        backgroundColor: '#FAFAFA',
+        paddingHorizontal: Spacing.md,
+    },
+    inputFocused: {
+        borderColor: '#FF9800',
+        backgroundColor: '#FFF',
+        shadowColor: '#FF9800',
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0.2,
+        shadowRadius: 8,
+        elevation: 3,
+    },
+    inputError: {
+        borderColor: '#FF5252',
+    },
+    input: {
+        flex: 1,
+        fontSize: FontSize.md,
+        color: '#212121',
+        paddingVertical: Spacing.md,
+    },
+    eyeButton: {
+        padding: Spacing.xs,
+    },
+    // Lock icon
+    lockIconContainer: {
+        width: 20,
+        height: 22,
+        alignItems: 'center',
+    },
+    lockShackle: {
+        width: 12,
+        height: 8,
+        borderWidth: 2,
+        borderColor: '#FF9800',
+        borderBottomWidth: 0,
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6,
+    },
+    lockBody: {
+        width: 16,
+        height: 12,
+        backgroundColor: '#FF9800',
+        borderRadius: 3,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    lockKeyhole: {
+        width: 4,
+        height: 4,
+        backgroundColor: '#FFF',
+        borderRadius: 2,
+    },
+    // Eye icon
+    eyeIconContainer: {
+        width: 22,
+        height: 14,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    eyeShape: {
+        width: 20,
+        height: 12,
+        borderWidth: 2,
+        borderColor: '#FF9800',
+        borderRadius: 10,
+    },
+    eyePupil: {
+        position: 'absolute',
+        width: 6,
+        height: 6,
+        backgroundColor: '#FF9800',
+        borderRadius: 3,
+    },
+    errorText: {
+        fontSize: FontSize.sm,
+        color: '#FF5252',
+        marginTop: Spacing.xs,
+    },
+});

package/src/Modal/Modal.tsx

@@ -0,0 +1,304 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    Modal as RNModal,
+    TouchableOpacity,
+    Dimensions,
+} from 'react-native';
+import { Spacing, FontSize, BorderRadius } from '../tokens';
+
+const { width } = Dimensions.get('window');
+
+interface ModalProps {
+    visible: boolean;
+    type: 'success' | 'error' | 'warning' | 'info';
+    title: string;
+    message: string;
+    buttonText: string;
+    onPress: () => void;
+    secondaryButtonText?: string;
+    onSecondaryPress?: () => void;
+}
+
+// Custom drawn icon components
+const ErrorIcon = () => (
+    <View style={iconStyles.container}>
+        {/* Sparkles */}
+        <View style={[iconStyles.sparkle, { top: 5, left: 15 }]}>
+            <Text style={iconStyles.sparkleText}>✦</Text>
+        </View>
+        <View style={[iconStyles.sparkle, { top: 10, right: 10 }]}>
+            <Text style={iconStyles.sparkleText}>✦</Text>
+        </View>
+        <View style={[iconStyles.sparkle, { bottom: 20, left: 5 }]}>
+            <Text style={[iconStyles.sparkleText, { fontSize: 10 }]}>✕</Text>
+        </View>
+        <View style={[iconStyles.sparkle, { bottom: 10, right: 15 }]}>
+            <Text style={iconStyles.sparkleText}>✦</Text>
+        </View>
+
+        {/* Face */}
+        <View style={iconStyles.errorFace}>
+            {/* X eyes */}
+            <View style={iconStyles.eyeRow}>
+                <Text style={iconStyles.xEye}>✕</Text>
+                <Text style={iconStyles.xEye}>✕</Text>
+            </View>
+            {/* Sad mouth */}
+            <View style={iconStyles.sadMouth} />
+        </View>
+
+        {/* Badge */}
+        <View style={iconStyles.errorBadge}>
+            <Text style={iconStyles.badgeX}>✕</Text>
+        </View>
+    </View>
+);
+
+const SuccessIcon = () => (
+    <View style={iconStyles.container}>
+        {/* Sparkles */}
+        <View style={[iconStyles.sparkle, { top: 5, left: 15 }]}>
+            <Text style={[iconStyles.sparkleText, { color: '#81C784' }]}>✦</Text>
+        </View>
+        <View style={[iconStyles.sparkle, { top: 10, right: 10 }]}>
+            <Text style={[iconStyles.sparkleText, { color: '#81C784' }]}>✦</Text>
+        </View>
+        <View style={[iconStyles.sparkle, { bottom: 20, left: 5 }]}>
+            <Text style={[iconStyles.sparkleText, { color: '#81C784', fontSize: 10 }]}>★</Text>
+        </View>
+        <View style={[iconStyles.sparkle, { bottom: 10, right: 15 }]}>
+            <Text style={[iconStyles.sparkleText, { color: '#81C784' }]}>✦</Text>
+        </View>
+
+        {/* Face */}
+        <View style={iconStyles.successFace}>
+            {/* Happy eyes */}
+            <View style={iconStyles.eyeRow}>
+                <View style={iconStyles.happyEye} />
+                <View style={iconStyles.happyEye} />
+            </View>
+            {/* Happy mouth */}
+            <View style={iconStyles.happyMouth} />
+        </View>
+
+        {/* Badge */}
+        <View style={iconStyles.successBadge}>
+            <Text style={iconStyles.badgeCheck}>✓</Text>
+        </View>
+    </View>
+);
+
+export const Modal = ({
+    visible,
+    type,
+    title,
+    message,
+    buttonText,
+    onPress,
+    secondaryButtonText,
+    onSecondaryPress,
+}: ModalProps) => {
+    const getTitleColor = () => {
+        switch (type) {
+            case 'success':
+                return '#4CAF50';
+            case 'error':
+            case 'warning':
+                return '#E57373';
+            case 'info':
+            default:
+                return '#64B5F6';
+        }
+    };
+
+    return (
+        <RNModal
+            visible={visible}
+            transparent
+            animationType="fade"
+            statusBarTranslucent>
+            <View style={styles.overlay}>
+                <View style={styles.modalContainer}>
+                    {/* Icon */}
+                    {type === 'error' || type === 'warning' ? <ErrorIcon /> : <SuccessIcon />}
+
+                    {/* Title */}
+                    <Text style={[styles.title, { color: getTitleColor() }]}>{title}</Text>
+
+                    {/* Message with link */}
+                    <Text style={styles.message}>
+                        {message.split('Quên mật khẩu')[0]}
+                        {message.includes('Quên mật khẩu') && onSecondaryPress && (
+                            <Text style={styles.link} onPress={onSecondaryPress}>
+                                Quên mật khẩu
+                            </Text>
+                        )}
+                    </Text>
+
+                    {/* Primary Button */}
+                    <TouchableOpacity
+                        style={styles.primaryButton}
+                        onPress={onPress}
+                        activeOpacity={0.8}>
+                        <Text style={styles.primaryButtonText}>{buttonText}</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </RNModal>
+    );
+};
+
+const iconStyles = StyleSheet.create({
+    container: {
+        width: 100,
+        height: 100,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: Spacing.md,
+    },
+    sparkle: {
+        position: 'absolute',
+    },
+    sparkleText: {
+        fontSize: 14,
+        color: '#F8A5A5',
+    },
+    // Error face
+    errorFace: {
+        width: 70,
+        height: 70,
+        borderRadius: 35,
+        backgroundColor: '#F8A5A5',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    eyeRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: 40,
+        marginBottom: 5,
+    },
+    xEye: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#C75050',
+    },
+    sadMouth: {
+        width: 25,
+        height: 12,
+        borderTopWidth: 3,
+        borderTopColor: '#C75050',
+        borderRadius: 20,
+        marginTop: 5,
+    },
+    errorBadge: {
+        position: 'absolute',
+        bottom: 10,
+        right: 15,
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: '#EF5350',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    badgeX: {
+        color: '#FFF',
+        fontSize: 14,
+        fontWeight: 'bold',
+    },
+    // Success face
+    successFace: {
+        width: 70,
+        height: 70,
+        borderRadius: 35,
+        backgroundColor: '#81C784',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    happyEye: {
+        width: 8,
+        height: 4,
+        borderBottomWidth: 3,
+        borderBottomColor: '#2E7D32',
+        borderRadius: 10,
+    },
+    happyMouth: {
+        width: 25,
+        height: 12,
+        borderBottomWidth: 3,
+        borderBottomColor: '#2E7D32',
+        borderRadius: 20,
+        marginTop: 8,
+    },
+    successBadge: {
+        position: 'absolute',
+        bottom: 10,
+        right: 15,
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: '#4CAF50',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    badgeCheck: {
+        color: '#FFF',
+        fontSize: 14,
+        fontWeight: 'bold',
+    },
+});
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: Spacing.lg,
+    },
+    modalContainer: {
+        width: width - Spacing.xl * 2,
+        backgroundColor: '#FFF',
+        borderRadius: BorderRadius.xl,
+        padding: Spacing.xl,
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 10 },
+        shadowOpacity: 0.2,
+        shadowRadius: 20,
+        elevation: 10,
+    },
+    title: {
+        fontSize: FontSize.xl,
+        fontWeight: '700',
+        textAlign: 'center',
+        marginBottom: Spacing.md,
+    },
+    message: {
+        fontSize: FontSize.md,
+        color: '#666',
+        textAlign: 'center',
+        lineHeight: 22,
+        marginBottom: Spacing.xl,
+    },
+    link: {
+        color: '#FF9800',
+        fontWeight: '600',
+    },
+    primaryButton: {
+        width: '100%',
+        backgroundColor: '#FF9800',
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.lg,
+        alignItems: 'center',
+    },
+    primaryButtonText: {
+        color: '#FFF',
+        fontSize: FontSize.lg,
+        fontWeight: '600',
+    },
+});

package/src/OTPInput/OTPInput.tsx

@@ -0,0 +1,84 @@
+import React, { useRef, useState } from 'react';
+import { View, TextInput, StyleSheet } from 'react-native';
+import { Colors, Spacing, BorderRadius, FontSize } from '../tokens';
+
+interface OTPInputProps {
+    length?: number;
+    value: string;
+    onChange: (value: string) => void;
+    error?: boolean;
+}
+
+export const OTPInput = ({
+    length = 6,
+    value,
+    onChange,
+    error = false,
+}: OTPInputProps) => {
+    const inputRefs = useRef<(TextInput | null)[]>([]);
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+    const handleChange = (text: string, index: number) => {
+        const newValue = value.split('');
+        newValue[index] = text;
+
+        // Move to next input
+        if (text && index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+        }
+
+        onChange(newValue.join(''));
+    };
+
+    const handleKeyPress = (key: string, index: number) => {
+        if (key === 'Backspace' && !value[index] && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        }
+    };
+
+    const getBorderColor = (index: number) => {
+        if (error) return '#FF5252'; // Error red
+        if (focusedIndex === index) return '#FF9800'; // Focus orange
+        if (value[index]) return Colors.success;
+        return Colors.border;
+    };
+
+    return (
+        <View style={styles.container}>
+            {Array.from({ length }, (_, index) => (
+                <TextInput
+                    key={index}
+                    ref={ref => (inputRefs.current[index] = ref)}
+                    style={[styles.input, { borderColor: getBorderColor(index) }]}
+                    value={value[index] || ''}
+                    onChangeText={text => handleChange(text.slice(-1), index)}
+                    onKeyPress={({ nativeEvent }) => handleKeyPress(nativeEvent.key, index)}
+                    onFocus={() => setFocusedIndex(index)}
+                    onBlur={() => setFocusedIndex(null)}
+                    keyboardType="number-pad"
+                    maxLength={1}
+                    textAlign="center"
+                />
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: Spacing.sm,
+    },
+    input: {
+        width: 45,
+        height: 52,
+        borderWidth: 1,
+        borderRadius: BorderRadius.sm,
+        fontSize: FontSize.xxl,
+        fontWeight: '600',
+        color: Colors.textPrimary,
+        backgroundColor: Colors.white,
+    },
+});

package/src/PasswordChecker/PasswordChecker.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { Colors, Spacing, FontSize } from '../tokens';
+
+interface PasswordRequirement {
+    label: string;
+    isValid: boolean;
+}
+
+interface PasswordCheckerProps {
+    requirements: PasswordRequirement[];
+}
+
+export const PasswordChecker = ({ requirements }: PasswordCheckerProps) => {
+    return (
+        <View style={styles.container}>
+            {requirements.map((req, index) => (
+                <View key={index} style={styles.row}>
+                    <View
+                        style={[
+                            styles.checkbox,
+                            req.isValid ? styles.checkboxValid : styles.checkboxInvalid,
+                        ]}>
+                        {req.isValid && <Text style={styles.checkmark}>✓</Text>}
+                    </View>
+                    <Text
+                        style={[
+                            styles.label,
+                            req.isValid ? styles.labelValid : styles.labelInvalid,
+                        ]}>
+                        {req.label}
+                    </Text>
+                </View>
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: Colors.successLight,
+        borderRadius: 8,
+        padding: Spacing.md,
+        marginBottom: Spacing.md,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: Spacing.xs,
+    },
+    checkbox: {
+        width: 18,
+        height: 18,
+        borderRadius: 9,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: Spacing.sm,
+    },
+    checkboxValid: {
+        backgroundColor: Colors.success,
+    },
+    checkboxInvalid: {
+        backgroundColor: Colors.textDisabled,
+    },
+    checkmark: {
+        color: Colors.white,
+        fontSize: 12,
+        fontWeight: 'bold',
+    },
+    label: {
+        fontSize: FontSize.sm,
+        flex: 1,
+    },
+    labelValid: {
+        color: Colors.success,
+    },
+    labelInvalid: {
+        color: Colors.textSecondary,
+    },
+});

package/src/index.ts

@@ -0,0 +1,12 @@
+// Design Tokens
+export * from './tokens';
+
+// Components
+export { Button } from './Button/Button';
+export { Input } from './Input/Input';
+export { Card } from './Card/Card';
+export { OTPInput } from './OTPInput/OTPInput';
+export { Alert } from './Alert/Alert';
+export { GradientBackground } from './GradientBackground/GradientBackground';
+export { Modal } from './Modal/Modal';
+export { PasswordChecker } from './PasswordChecker/PasswordChecker';

package/src/tokens.ts

@@ -0,0 +1,104 @@
+// Design Tokens - Extracted from Figma
+export const Colors = {
+  // Brand - Premium Orange
+  primary: '#E18308', // Main Brand Color
+  primaryDark: '#B36605',
+  primaryLight: '#FF9800',
+  secondary: '#FF9800', // Brighter Orange for accents
+
+  // Backgrounds - Soft Cream & Glass
+  background: '#FFF9F0', // Cream Background
+  surface: '#FFFFFF', // Pure White
+  surfaceAlt: '#FFFBF5', // Soft Cream Surface
+
+  // Text
+  textPrimary: '#333333',
+  textSecondary: '#666666',
+  textTertiary: '#888888',
+  textAccent: '#E18308',
+  textDark: '#5D4037',
+  textLight: '#FFFFFF',
+  textMuted: '#8A9499',
+  textDisabled: '#BDBDBD',
+
+  // Borders
+  border: '#FFE0B2',
+  borderAlt: 'rgba(0, 0, 0, 0.08)',
+  inputBorder: '#E0E0E0',
+
+  // Functionals
+  success: '#4CAF50',
+  successLight: '#E8F5E9',
+  error: '#F44336',
+  errorLight: '#FFEBEE',
+  warning: '#FFC107',
+  warningLight: '#FFF8E1',
+  info: '#2196F3',
+  infoLight: '#E3F2FD',
+
+  // Special Effects (Glassmorphism)
+  shadow: '#E18308',
+  glassWhite: 'rgba(255, 255, 255, 0.9)',
+  glassOrange: 'rgba(255, 237, 213, 0.6)', // Orange 100 with opacity
+  glassBorder: 'rgba(255, 255, 255, 0.8)',
+  avatarBg: '#FFF3E0',
+
+  // Legacy/Utilities
+  white: '#FFFFFF',
+  black: '#000000',
+  inputBackground: '#FFFFFF',
+  cardBackground: '#FFFFFF',
+  transparent: 'transparent',
+};
+
+export const Spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+};
+
+export const BorderRadius = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  xxl: 24,
+  full: 9999,
+};
+
+export const FontSize = {
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16,
+  xl: 18,
+  xxl: 24,
+  xxxl: 32,
+};
+
+export const FontWeight = {
+  regular: '400' as const,
+  medium: '500' as const,
+  semibold: '600' as const,
+  bold: '700' as const,
+};
+
+export const Shadow = {
+  card: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  modal: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+};