@klyftig/mobile-ui 1.0.2

package/src/components/GlassCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import { AdaptiveGlassView } from './AdaptiveGlassView';
+import { useTheme } from '../hooks/useTheme';
+
+interface GlassCardProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  intensity?: number;
+  tint?: 'light' | 'dark' | 'default';
+  padding?: number;
+  useGlass?: boolean;
+}
+
+export const GlassCard: React.FC<GlassCardProps> = ({
+  children,
+  style,
+  padding = 16,
+  useGlass = false,
+}) => {
+  const { colors } = useTheme();
+
+  if (useGlass) {
+    return (
+      <AdaptiveGlassView
+        variant="regular"
+        style={[styles.card, { padding }, style]}
+        fallbackStyle={{ backgroundColor: colors.background.card, borderColor: colors.border.light }}
+      >
+        {children}
+      </AdaptiveGlassView>
+    );
+  }
+
+  return (
+    <View
+      style={[
+        styles.card,
+        { backgroundColor: colors.background.card, borderColor: colors.border.light },
+        { padding },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 20,
+    borderWidth: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+});

package/src/components/GlassContainer.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+
+interface GlassContainerProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  gradientColors?: string[];
+}
+
+export const GlassContainer: React.FC<GlassContainerProps> = ({
+  children,
+  style,
+}) => {
+  return (
+    <View style={[styles.container, style]}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+});

package/src/components/GlassHeaderBackground.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { AdaptiveGlassView } from './AdaptiveGlassView';
+import { colors } from '../theme/colors';
+
+interface GlassHeaderBackgroundProps {
+  /** Tint color for the glass material (e.g. 'rgba(0,0,0,0.3)' for dark headers) */
+  tintColor?: string;
+}
+
+/**
+ * Reusable header background using AdaptiveGlassView.
+ * Usage: `headerBackground: () => <GlassHeaderBackground />`
+ */
+export const GlassHeaderBackground: React.FC<GlassHeaderBackgroundProps> = ({
+  tintColor,
+}) => (
+  <AdaptiveGlassView
+    variant="regular"
+    tintColor={tintColor}
+    style={styles.fill}
+    fallbackStyle={{
+      backgroundColor: tintColor || colors.glass.headerFallback,
+    }}
+  />
+);
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});

package/src/components/GlassInput.tsx

@@ -0,0 +1,166 @@
+import React, { useState, useCallback, memo } from 'react';
+import { View, TextInput as RNTextInput, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { useTheme } from '../hooks/useTheme';
+
+interface GlassInputProps {
+  label: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  secureTextEntry?: boolean;
+  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad';
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  disabled?: boolean;
+  icon?: string;
+  showPasswordToggle?: boolean;
+  rightText?: string;
+  textContentType?: 'none' | 'password' | 'newPassword' | 'emailAddress' | 'username' | 'oneTimeCode';
+  autoComplete?: string;
+}
+
+const GlassInputComponent: React.FC<GlassInputProps> = ({
+  label,
+  value,
+  onChangeText,
+  placeholder,
+  secureTextEntry = false,
+  keyboardType = 'default',
+  autoCapitalize = 'sentences',
+  disabled = false,
+  icon,
+  showPasswordToggle = false,
+  rightText,
+  textContentType,
+  autoComplete,
+}) => {
+  const { colors } = useTheme();
+  const [isSecure, setIsSecure] = useState(secureTextEntry);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+  }, []);
+
+  const toggleSecure = useCallback(() => {
+    setIsSecure(prev => !prev);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.label, { color: colors.text.primary }]}>{label}</Text>
+      <View
+        style={[
+          styles.inputContainer,
+          isFocused && styles.inputContainerFocused,
+          disabled && styles.inputContainerDisabled,
+        ]}
+      >
+        <View style={styles.inputWrapper}>
+          {icon && (
+            <Icon name={icon} size={20} color="#9B9B9B" style={styles.leftIcon} />
+          )}
+          <RNTextInput
+            value={value}
+            onChangeText={onChangeText}
+            placeholder={placeholder}
+            placeholderTextColor="#C5C5C5"
+            secureTextEntry={isSecure}
+            keyboardType={keyboardType}
+            autoCapitalize={autoCapitalize}
+            editable={!disabled}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            textContentType={textContentType ?? (secureTextEntry ? 'oneTimeCode' : undefined)}
+            autoComplete={autoComplete as any}
+            accessibilityLabel={label}
+            accessibilityHint={placeholder ? `Enter ${label.toLowerCase()}` : undefined}
+            accessibilityState={{ disabled }}
+            style={[styles.input, icon && styles.inputWithLeftIcon, (rightText || showPasswordToggle) && styles.inputWithRightIcon]}
+          />
+          {rightText && (
+            <Text style={styles.rightText}>{rightText}</Text>
+          )}
+          {showPasswordToggle && (
+            <TouchableOpacity
+              onPress={toggleSecure}
+              style={styles.eyeIcon}
+              activeOpacity={0.7}
+              accessibilityRole="button"
+              accessibilityLabel={isSecure ? 'Show password' : 'Hide password'}
+            >
+              <Icon
+                name={isSecure ? 'eye-off' : 'eye'}
+                size={20}
+                color="#9B9B9B"
+              />
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export const GlassInput = memo(GlassInputComponent);
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 8,
+    marginLeft: 4,
+  },
+  inputContainer: {
+    borderRadius: 16,
+    borderWidth: 1,
+    backgroundColor: '#F5F5F2',
+    borderColor: 'rgba(0,0,0,0.08)',
+  },
+  inputContainerFocused: {
+    borderColor: '#1A1A1A',
+    backgroundColor: '#FFFFFF',
+  },
+  inputContainerDisabled: {
+    opacity: 0.6,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    height: 56,
+  },
+  leftIcon: {
+    marginRight: 12,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    height: '100%',
+    paddingVertical: 0,
+    color: '#1A1A1A',
+  },
+  inputWithLeftIcon: {
+    marginLeft: 0,
+  },
+  inputWithRightIcon: {
+    paddingRight: 8,
+  },
+  rightText: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginLeft: 8,
+    color: '#6B6B6B',
+  },
+  eyeIcon: {
+    padding: 8,
+    marginRight: -8,
+  },
+});

package/src/components/GlassList.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { useTheme } from '../hooks/useTheme';
+
+interface GlassListItemProps {
+  title: string;
+  description?: string;
+  leftIcon?: string;
+  rightIcon?: string;
+  onPress?: () => void;
+  style?: any;
+}
+
+export const GlassListItem: React.FC<GlassListItemProps> = ({
+  title,
+  description,
+  leftIcon,
+  rightIcon,
+  onPress,
+  style,
+}) => {
+  const { colors } = useTheme();
+
+  const content = (
+    <View
+      style={[
+        styles.listItem,
+        { backgroundColor: colors.background.card, borderColor: colors.border.light },
+        style,
+      ]}
+    >
+      <View style={styles.listItemContent}>
+        {leftIcon && (
+          <Icon name={leftIcon} size={24} color={colors.icon.primary} style={styles.leftIcon} />
+        )}
+        <View style={styles.textContainer}>
+          <Text style={[styles.title, { color: colors.text.primary }]}>{title}</Text>
+          {description && <Text style={[styles.description, { color: colors.text.secondary }]}>{description}</Text>}
+        </View>
+        {rightIcon && (
+          <Icon name={rightIcon} size={20} color={colors.icon.tertiary} style={styles.rightIcon} />
+        )}
+      </View>
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        activeOpacity={0.8}
+        accessibilityRole="button"
+        accessibilityLabel={description ? `${title}, ${description}` : title}
+      >
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return content;
+};
+
+const styles = StyleSheet.create({
+  listItem: {
+    borderRadius: 16,
+    borderWidth: 1,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  listItemContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  leftIcon: {
+    marginRight: 16,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  description: {
+    fontSize: 14,
+  },
+  rightIcon: {
+    marginLeft: 12,
+  },
+});

package/src/components/GlassStats.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { AdaptiveGlassView } from './AdaptiveGlassView';
+import { useTheme } from '../hooks/useTheme';
+
+interface GlassStatsCardProps {
+  icon: string;
+  title: string;
+  value: string;
+  subtitle?: string;
+  gradientColors?: string[];
+  progress?: number; // 0-100
+  useGlass?: boolean;
+}
+
+export const GlassStatsCard: React.FC<GlassStatsCardProps> = ({
+  icon,
+  title,
+  value,
+  subtitle,
+  gradientColors = ['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.1)'],
+  progress,
+  useGlass = false,
+}) => {
+  const { colors } = useTheme();
+
+  const cardChildren = (
+    <>
+      <Icon name={icon} size={32} color={colors.icon.primary} style={styles.icon} />
+      <Text style={[styles.title, { color: colors.text.secondary }]}>{title}</Text>
+      <Text style={[styles.value, { color: colors.text.primary }]}>{value}</Text>
+      {subtitle && <Text style={[styles.subtitle, { color: colors.text.secondary }]}>{subtitle}</Text>}
+      {progress !== undefined && (
+        <View style={styles.progressContainer}>
+          <View style={[styles.progressBar, { width: `${Math.min(progress, 100)}%` }]} />
+        </View>
+      )}
+    </>
+  );
+
+  return (
+    <View style={styles.card}>
+      {useGlass ? (
+        <AdaptiveGlassView
+          variant="regular"
+          style={styles.gradient}
+          fallbackStyle={{ backgroundColor: '#FFFFFF' }}
+        >
+          {cardChildren}
+        </AdaptiveGlassView>
+      ) : (
+        <LinearGradient
+          colors={gradientColors as [string, string, ...string[]]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.gradient}
+        >
+          {cardChildren}
+        </LinearGradient>
+      )}
+    </View>
+  );
+};
+
+interface GlassMacroCardProps {
+  icon: string;
+  label: string;
+  value: string;
+  gradientColors: string[];
+}
+
+export const GlassMacroCard: React.FC<GlassMacroCardProps> = ({
+  icon,
+  label,
+  value,
+  gradientColors,
+}) => {
+  const { colors } = useTheme();
+
+  return (
+    <View style={[styles.macroCard, { borderColor: colors.border.light }]}>
+      <LinearGradient
+        colors={gradientColors as [string, string, ...string[]]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={styles.macroGradient}
+      >
+        <Icon name={icon} size={28} color={colors.icon.primary} />
+        <Text style={[styles.macroLabel, { color: colors.text.secondary }]}>{label}</Text>
+        <Text style={[styles.macroValue, { color: colors.text.primary }]}>{value}</Text>
+      </LinearGradient>
+    </View>
+  );
+};
+
+interface GlassNutrientRowProps {
+  icon: string;
+  label: string;
+  value: string;
+  iconColor?: string;
+}
+
+export const GlassNutrientRow: React.FC<GlassNutrientRowProps> = ({
+  icon,
+  label,
+  value,
+  iconColor = '#6B6B6B',
+}) => {
+  const { colors } = useTheme();
+
+  return (
+    <View style={[styles.nutrientRow, { borderBottomColor: colors.border.light }]}>
+      <View style={styles.nutrientLeft}>
+        <Icon name={icon} size={22} color={iconColor} style={styles.nutrientIcon} />
+        <Text style={[styles.nutrientLabel, { color: colors.text.primary }]}>{label}</Text>
+      </View>
+      <Text style={[styles.nutrientValue, { color: colors.text.primary }]}>{value}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.06)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 8,
+    elevation: 3,
+    marginBottom: 16,
+  },
+  gradient: {
+    padding: 20,
+  },
+  icon: {
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  value: {
+    fontSize: 36,
+    fontWeight: '800',
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 14,
+    marginBottom: 12,
+  },
+  progressContainer: {
+    height: 8,
+    borderRadius: 4,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(0,0,0,0.06)',
+  },
+  progressBar: {
+    height: '100%',
+    borderRadius: 4,
+    backgroundColor: 'rgba(0,0,0,0.2)',
+  },
+  macroCard: {
+    flex: 1,
+    borderRadius: 16,
+    overflow: 'hidden',
+    borderWidth: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  macroGradient: {
+    padding: 16,
+    alignItems: 'center',
+  },
+  macroLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    marginTop: 8,
+  },
+  macroValue: {
+    fontSize: 22,
+    fontWeight: '700',
+    marginTop: 4,
+  },
+  nutrientRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+  },
+  nutrientLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  nutrientIcon: {
+    marginRight: 12,
+  },
+  nutrientLabel: {
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  nutrientValue: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});

package/src/components/progress/CArcProgress.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+import Svg, { Circle, G } from 'react-native-svg';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface CArcProgressProps {
+  size?: number;
+  strokeWidth?: number;
+  current: number;
+  target: number;
+  color?: string;
+}
+
+/**
+ * C-shaped arc progress (270-degree arc with gap at bottom-left).
+ * Used as the main calorie ring on the dashboard.
+ */
+export const CArcProgress: React.FC<CArcProgressProps> = ({
+  size = 120,
+  strokeWidth = 10,
+  current,
+  target,
+  color = '#1A1A1A',
+}) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const circleRef = useRef<any>(null);
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  // 270 degrees = 75% of full circle
+  const arcLength = circumference * 0.75;
+  const percentage = target > 0 ? Math.min((current / target) * 100, 100) : 0;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: percentage,
+      duration: 1000,
+      useNativeDriver: true,
+    }).start();
+
+    const listener = animatedValue.addListener((v) => {
+      if (circleRef.current) {
+        const progressLength = (arcLength * v.value) / 100;
+        const dashOffset = arcLength - progressLength;
+        circleRef.current.setNativeProps({ strokeDashoffset: dashOffset });
+      }
+    });
+
+    return () => {
+      animatedValue.removeListener(listener);
+    };
+  }, [percentage]);
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <Svg width={size} height={size}>
+        {/* Rotate so the gap is at bottom-left: start from 135deg (7.5 o'clock) */}
+        <G rotation="135" origin={`${size / 2}, ${size / 2}`}>
+          {/* Background arc */}
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke="rgba(0,0,0,0.08)"
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            strokeDasharray={`${arcLength} ${circumference - arcLength}`}
+            strokeLinecap="round"
+          />
+          {/* Progress arc — hidden when current=0 to avoid round-cap artifact */}
+          {current > 0 && (
+            <AnimatedCircle
+              ref={circleRef}
+              cx={size / 2}
+              cy={size / 2}
+              r={radius}
+              stroke={color}
+              strokeWidth={strokeWidth}
+              fill="transparent"
+              strokeDasharray={`${arcLength} ${circumference}`}
+              strokeDashoffset={arcLength}
+              strokeLinecap="round"
+            />
+          )}
+        </G>
+      </Svg>
+      {/* Center icon */}
+      <View style={styles.centerIcon}>
+        <Icon name="fire" size={size * 0.22} color="#FF6B35" />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  centerIcon: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});