@klyftig/mobile-ui 1.0.2

package/src/components/progress/CircularProgress.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+import Svg, { Circle, G } from 'react-native-svg';
+import { useTheme } from '../../hooks/useTheme';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface CircularProgressProps {
+  size?: number;
+  strokeWidth?: number;
+  current: number;
+  target: number;
+  color?: string;
+  label?: string;
+  unit?: string;
+  showPercentage?: boolean;
+  showRemaining?: boolean;
+  subtitle?: string;
+  valueSize?: number;
+  subtitleSize?: number;
+  hideText?: boolean;
+}
+
+export const CircularProgress: React.FC<CircularProgressProps> = ({
+  size = 140,
+  strokeWidth = 12,
+  current,
+  target,
+  color,
+  label,
+  unit = '',
+  showPercentage = false,
+  showRemaining = false,
+  subtitle,
+  valueSize,
+  subtitleSize,
+  hideText = false,
+}) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  const resolvedColor = color ?? colors.text.primary;
+
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const circleRef = useRef<any>(null);
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const percentage = target > 0 ? Math.min((current / target) * 100, 100) : 0;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: percentage,
+      duration: 1000,
+      useNativeDriver: true,
+    }).start();
+
+    animatedValue.addListener((v) => {
+      if (circleRef.current) {
+        const strokeDashoffset = circumference - (circumference * v.value) / 100;
+        circleRef.current.setNativeProps({
+          strokeDashoffset,
+        });
+      }
+    });
+
+    return () => {
+      animatedValue.removeAllListeners();
+    };
+  }, [percentage]);
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <Svg width={size} height={size}>
+        <G rotation="-90" origin={`${size / 2}, ${size / 2}`}>
+          {/* Background circle */}
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke="rgba(0,0,0,0.08)"
+            strokeWidth={strokeWidth}
+            fill="transparent"
+          />
+          {/* Progress circle */}
+          <AnimatedCircle
+            ref={circleRef}
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={resolvedColor}
+            strokeWidth={strokeWidth}
+            strokeDasharray={circumference}
+            strokeDashoffset={circumference}
+            fill="transparent"
+            strokeLinecap="round"
+          />
+        </G>
+      </Svg>
+
+      {!hideText && (
+        <View style={styles.textContainer}>
+          {label && <Text style={styles.label}>{label}</Text>}
+          <Text style={[styles.value, valueSize ? { fontSize: valueSize } : undefined]}>
+            {showRemaining ? Math.max(0, Math.round(target - current)) : Math.round(current)}
+            {unit && <Text style={[styles.unit, valueSize ? { fontSize: valueSize * 0.58 } : undefined]}>{unit}</Text>}
+          </Text>
+          {subtitle ? (
+            <Text style={[styles.subtitle, subtitleSize ? { fontSize: subtitleSize } : undefined]}>{subtitle}</Text>
+          ) : target > 0 ? (
+            <Text style={styles.target}>
+              {showPercentage ? `${Math.round(percentage)}%` : `/ ${Math.round(target)}${unit}`}
+            </Text>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const createStyles = (colors: any) => StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: colors.text.secondary,
+    marginBottom: 4,
+  },
+  value: {
+    fontSize: 24,
+    fontWeight: '800',
+    color: colors.text.primary,
+  },
+  unit: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.text.secondary,
+  },
+  target: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: colors.text.tertiary,
+    marginTop: 2,
+  },
+  subtitle: {
+    fontSize: 11,
+    fontWeight: '600',
+    color: colors.text.tertiary,
+    marginTop: 2,
+  },
+});

package/src/components/progress/MacroBar.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useTheme } from '../../hooks/useTheme';
+
+interface MacroBarProps {
+  label: string;
+  current: number;
+  target: number;
+  color: string[];
+  icon?: string;
+  unit?: string;
+}
+
+export const MacroBar: React.FC<MacroBarProps> = ({
+  label,
+  current,
+  target,
+  color,
+  unit = 'g',
+}) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+
+  const animatedWidth = useRef(new Animated.Value(0)).current;
+  const percentage = target > 0 ? Math.min((current / target) * 100, 100) : 0;
+
+  useEffect(() => {
+    Animated.timing(animatedWidth, {
+      toValue: percentage,
+      duration: 800,
+      useNativeDriver: false,
+    }).start();
+  }, [percentage]);
+
+  const widthInterpolation = animatedWidth.interpolate({
+    inputRange: [0, 100],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.label}>{label}</Text>
+        <Text style={styles.value}>
+          {Math.round(current)}{unit} / {Math.round(target)}{unit}
+        </Text>
+      </View>
+
+      <View style={styles.barContainer}>
+        <View style={styles.barBackground}>
+          <Animated.View style={[styles.barFill, { width: widthInterpolation }]}>
+            <LinearGradient
+              colors={color as [string, string, ...string[]]}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              style={styles.gradient}
+            />
+          </Animated.View>
+        </View>
+        {percentage > 0 && (
+          <Text style={styles.percentage}>{Math.round(percentage)}%</Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (colors: any) => StyleSheet.create({
+  container: {
+    marginVertical: 8,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  label: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: colors.text.primary,
+  },
+  value: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.text.secondary,
+  },
+  barContainer: {
+    position: 'relative',
+  },
+  barBackground: {
+    height: 28,
+    backgroundColor: 'rgba(0,0,0,0.06)',
+    borderRadius: 14,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.04)',
+  },
+  barFill: {
+    height: '100%',
+    borderRadius: 14,
+    overflow: 'hidden',
+  },
+  gradient: {
+    flex: 1,
+  },
+  percentage: {
+    position: 'absolute',
+    right: 12,
+    top: 0,
+    bottom: 0,
+    fontSize: 13,
+    fontWeight: '700',
+    color: colors.text.primary,
+    textAlignVertical: 'center',
+    lineHeight: 28,
+  },
+});

package/src/hooks/useTheme.ts

@@ -0,0 +1,11 @@
+import { colors, shadows } from '../theme/colors';
+
+export function useTheme() {
+  return {
+    colors,
+    shadows,
+    isDark: false as const,
+    mode: 'light' as const,
+    setMode: (_mode: string) => {},  // no-op stub for ProfileScreen
+  };
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+// Theme
+export { colors, shadows } from './theme/colors';
+export { typography, fonts, fontFamily } from './theme/typography';
+export { spacing } from './theme/spacing';
+export { theme } from './theme/theme';
+export type { Theme } from './theme/theme';
+
+// Hooks
+export { useTheme } from './hooks/useTheme';
+
+// Utils
+export { GLASS_AVAILABLE } from './utils/glass';
+
+// Components
+export { AdaptiveGlassView } from './components/AdaptiveGlassView';
+export { ErrorBoundary } from './components/ErrorBoundary';
+export { FAB, FAB_SIZE } from './components/FAB';
+export { GlassButton } from './components/GlassButton';
+export { GlassCard } from './components/GlassCard';
+export { GlassContainer } from './components/GlassContainer';
+export { GlassHeaderBackground } from './components/GlassHeaderBackground';
+export { GlassInput } from './components/GlassInput';
+export { GlassListItem } from './components/GlassList';
+export { GlassStatsCard, GlassMacroCard, GlassNutrientRow } from './components/GlassStats';
+
+// Progress
+export { CircularProgress } from './components/progress/CircularProgress';
+export { CArcProgress } from './components/progress/CArcProgress';
+export { MacroBar } from './components/progress/MacroBar';

package/src/theme/colors.ts

@@ -0,0 +1,78 @@
+/**
+ * Cal AI-inspired clean, light-only color palette
+ * Warm off-white backgrounds, pure white cards, subtle shadows
+ */
+
+export const colors = {
+  background: {
+    primary: '#FFFFFF',       // Clean white background
+    card: '#FFFFFF',
+    secondary: '#F5F5F5',
+    tabBar: '#FFFFFF',
+    gradient: ['#FFFFFF', '#FFFFFF', '#FFFFFF'] as const, // backward compat
+  },
+  text: {
+    primary: '#1A1A1A',
+    secondary: '#6B6B6B',
+    tertiary: '#9B9B9B',
+    disabled: '#C5C5C5',
+  },
+  icon: {
+    primary: '#1A1A1A',
+    secondary: '#6B6B6B',
+    tertiary: '#9B9B9B',
+  },
+  border: {
+    light: 'rgba(0,0,0,0.06)',
+    medium: 'rgba(0,0,0,0.10)',
+    heavy: 'rgba(0,0,0,0.15)',
+  },
+  glass: {                      // backward compat aliases
+    background: '#FFFFFF',
+    backgroundLight: '#F7F7F4',
+    backgroundHeavy: '#FFFFFF',
+    tabBarFallback: '#FFFFFF',
+    fabFallback: '#1A1A1A',
+    headerFallback: 'rgba(255, 255, 255, 0.95)',
+  },
+  accent: {
+    blue: '#2196F3',
+    brand: '#1A1A1A',           // Black primary buttons (Cal AI style)
+    brandLight: '#4A4A4A',
+    success: '#4CAF50',
+    warning: '#FF9800',
+    error: '#F44336',
+    green: '#4CAF50',
+  },
+  macro: {
+    protein: '#E91E63',
+    carbs: '#2196F3',
+    fat: '#FF9800',
+    calories: '#4CAF50',
+  },
+  shadow: {
+    text: 'transparent',
+    textLight: 'transparent',
+    textHeavy: 'transparent',
+  },
+};
+
+export const shadows = {
+  card: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  cardElevated: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+    elevation: 5,
+  },
+  text: { color: 'transparent', offset: { width: 0, height: 0 }, radius: 0 },
+  textLight: { color: 'transparent', offset: { width: 0, height: 0 }, radius: 0 },
+  textHeavy: { color: 'transparent', offset: { width: 0, height: 0 }, radius: 0 },
+};

package/src/theme/spacing.ts

@@ -0,0 +1,13 @@
+/**
+ * Spacing system for consistent margins and padding
+ */
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  '2xl': 48,
+  '3xl': 64,
+};

package/src/theme/theme.ts

@@ -0,0 +1,46 @@
+/**
+ * Main theme object combining all theme modules
+ */
+
+import { colors, shadows } from './colors';
+import { typography } from './typography';
+import { spacing } from './spacing';
+
+export const theme = {
+  colors,
+  shadows,
+  typography,
+  spacing,
+
+  // Border radius
+  borderRadius: {
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    full: 9999,
+  },
+
+  // Common dimensions
+  dimensions: {
+    headerHeight: 60,
+    tabBarHeight: 60,
+    buttonHeight: 48,
+    inputHeight: 48,
+    iconSize: {
+      sm: 16,
+      md: 24,
+      lg: 32,
+      xl: 48,
+    },
+  },
+
+  // Animation durations
+  animation: {
+    fast: 150,
+    normal: 250,
+    slow: 400,
+  },
+};
+
+export type Theme = typeof theme;

package/src/theme/typography.ts

@@ -0,0 +1,56 @@
+/**
+ * Typography system — Plus Jakarta Sans
+ */
+
+/** Font family names (must match the loaded .ttf file names) */
+export const fonts = {
+  regular: 'PlusJakartaSans_400Regular',
+  medium: 'PlusJakartaSans_500Medium',
+  semiBold: 'PlusJakartaSans_600SemiBold',
+  bold: 'PlusJakartaSans_700Bold',
+} as const;
+
+/** Maps a numeric fontWeight string to the correct fontFamily */
+export function fontFamily(weight?: string): string {
+  switch (weight) {
+    case '700':
+    case '800':
+      return fonts.bold;
+    case '600':
+      return fonts.semiBold;
+    case '500':
+      return fonts.medium;
+    default:
+      return fonts.regular;
+  }
+}
+
+export const typography = {
+  // Font sizes
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36,
+  },
+
+  // Font weights
+  fontWeight: {
+    regular: '400' as const,
+    medium: '500' as const,
+    semibold: '600' as const,
+    bold: '700' as const,
+    extrabold: '800' as const,
+  },
+
+  // Line heights
+  lineHeight: {
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75,
+  },
+};

package/src/utils/glass.ts

@@ -0,0 +1,12 @@
+import { Platform } from 'react-native';
+import { isGlassEffectAPIAvailable } from 'expo-glass-effect';
+
+const GLASS_DISABLED = process.env.EXPO_PUBLIC_DISABLE_GLASS === '1';
+
+/**
+ * Whether the native glass effect API is available on this device.
+ * Computed once at module load — no per-render checks needed.
+ * True only on iOS 26+ where Liquid Glass is supported.
+ */
+export const GLASS_AVAILABLE =
+  !GLASS_DISABLED && Platform.OS === 'ios' && isGlassEffectAPIAvailable();