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

package/package.json

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

package/src/Avatar/Avatar.tsx

@@ -38,7 +38,7 @@ export const Avatar: React.FC<AvatarProps> = ({ source, name, size = 'md', style
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: Colors.avatarBg,
+        backgroundColor: Colors.neutralBg,
         justifyContent: 'center',
         alignItems: 'center',
         overflow: 'hidden',

package/src/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, Modal, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
+import { Colors } from '../tokens';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+interface BottomSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    height?: number;
+}
+
+export const BottomSheet: React.FC<BottomSheetProps> = ({ visible, onClose, children, height = SCREEN_HEIGHT * 0.4 }) => {
+    return (
+        <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+            <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={onClose} />
+            <View style={[styles.sheet, { height }]}>
+                <View style={styles.handle} />
+                {children}
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: { flex: 1, backgroundColor: Colors.overlay },
+    sheet: {
+        backgroundColor: Colors.surface,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        padding: 16,
+        bottom: 0,
+        position: 'absolute',
+        width: '100%',
+        shadowColor: Colors.shadowBlack,
+        shadowOffset: { width: 0, height: -2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 10,
+        elevation: 20
+    },
+    handle: {
+        width: 40,
+        height: 4,
+        backgroundColor: Colors.border,
+        borderRadius: 2,
+        alignSelf: 'center',
+        marginBottom: 16
+    }
+});

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
+import { Colors } from '../tokens';
+
+interface CheckboxProps {
+    label?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({ label, checked, onChange }) => (
+    <TouchableOpacity style={styles.container} onPress={() => onChange(!checked)} activeOpacity={0.7}>
+        <View style={[styles.box, checked && styles.checked]}>
+            {checked && <View style={styles.inner} />}
+        </View>
+        {label && <Text style={styles.label}>{label}</Text>}
+    </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', alignItems: 'center', marginVertical: 8 },
+    box: { width: 20, height: 20, borderWidth: 2, borderColor: Colors.primary, borderRadius: 4, justifyContent: 'center', alignItems: 'center', marginRight: 10 },
+    checked: { backgroundColor: Colors.primary },
+    inner: { width: 10, height: 10, backgroundColor: Colors.white, borderRadius: 1 },
+    label: { fontSize: 15, color: Colors.textPrimary },
+});

package/src/Icon/Icon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Image, ImageStyle, ImageSourcePropType } from 'react-native';
+import { Colors } from '../tokens';
+
+interface IconProps {
+    source: ImageSourcePropType;
+    size?: number;
+    color?: string;
+    style?: ImageStyle;
+}
+
+export const Icon: React.FC<IconProps> = ({ source, size = 24, color, style }) => (
+    <Image
+        source={source}
+        style={[
+            { width: size, height: size },
+            color ? { tintColor: color } : undefined,
+            style
+        ]}
+        resizeMode="contain"
+    />
+);

package/src/Skeleton/Skeleton.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet, ViewStyle, DimensionValue } from 'react-native';
+import { Colors } from '../tokens';
+
+interface SkeletonProps {
+    width?: DimensionValue;
+    height?: number;
+    borderRadius?: number;
+    style?: ViewStyle;
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+    width = '100%',
+    height = 20,
+    borderRadius = 4,
+    style
+}) => {
+    const opacity = useRef(new Animated.Value(0.3)).current;
+
+    useEffect(() => {
+        Animated.loop(
+            Animated.sequence([
+                Animated.timing(opacity, { toValue: 0.7, duration: 800, useNativeDriver: true }),
+                Animated.timing(opacity, { toValue: 0.3, duration: 800, useNativeDriver: true })
+            ])
+        ).start();
+    }, []);
+
+    return (
+        <Animated.View
+            style={[
+                styles.skeleton,
+                { width, height, borderRadius, opacity },
+                style
+            ]}
+        />
+    );
+};
+
+const styles = StyleSheet.create({
+    skeleton: {
+        backgroundColor: Colors.border,
+    }
+});

package/src/Switch/Switch.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TouchableOpacity, View, StyleSheet } from 'react-native';
+import { Colors } from '../tokens';
+
+interface SwitchProps {
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+}
+
+export const Switch: React.FC<SwitchProps> = ({ value, onValueChange }) => (
+    <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={() => onValueChange(!value)}
+        style={[styles.track, { backgroundColor: value ? Colors.success : Colors.borderAlt }]}
+    >
+        <View style={[styles.thumb, { transform: [{ translateX: value ? 20 : 2 }] }]} />
+    </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+    track: { width: 44, height: 24, borderRadius: 12, justifyContent: 'center' },
+    thumb: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        backgroundColor: Colors.white,
+        shadowColor: Colors.shadowBlack,
+        shadowOpacity: 0.2,
+        shadowRadius: 2,
+        elevation: 2
+    },
+});

package/src/tokens.ts

@@ -37,13 +37,15 @@ export const Colors = {
   infoLight: '#E3F2FD',
 
   // Special Effects (Glassmorphism)
-  shadow: '#E18308',
+  shadow: '#E18308', // Brand shadow
+  shadowBlack: '#000000', // Natural shadow
   glassWhite: 'rgba(255, 255, 255, 0.9)',
-  glassOrange: 'rgba(255, 237, 213, 0.6)', // Orange 100 with opacity
+  glassOrange: 'rgba(255, 237, 213, 0.6)',
   glassBorder: 'rgba(255, 255, 255, 0.8)',
-  avatarBg: '#FFF3E0',
 
-  // Legacy/Utilities
+  // Utilities & Overlays
+  overlay: 'rgba(0, 0, 0, 0.5)',
+  neutralBg: '#FFF3E0', // Was avatarBg
   white: '#FFFFFF',
   black: '#000000',
   inputBackground: '#FFFFFF',