@klyftig/mobile-ui 1.0.2

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@klyftig/mobile-ui",
+  "version": "1.0.2",
+  "scripts": {
+    "pack-install": "npm pack && mv klyftig-ui-*.tgz /tmp/klyftig-ui-local.tgz && cd ../../mobile && npm install /tmp/klyftig-ui-local.tgz"
+  },
+  "description": "Klyftig shared UI components for React Native / Expo",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "react-native",
+    "expo",
+    "ui",
+    "components"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-native": ">=0.83.0",
+    "expo-glass-effect": "*",
+    "expo-linear-gradient": "*",
+    "@expo/vector-icons": "*",
+    "react-native-svg": "*",
+    "react-native-safe-area-context": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/AdaptiveGlassView.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, type ViewStyle, type StyleProp } from 'react-native';
+import { GlassView } from 'expo-glass-effect';
+import { GLASS_AVAILABLE } from '../utils/glass';
+
+interface AdaptiveGlassViewProps {
+  children?: React.ReactNode;
+  /** Glass material variant: 'regular' (default) or 'clear' (more transparent) */
+  variant?: 'regular' | 'clear';
+  /** Tint color applied to the glass material */
+  tintColor?: string;
+  /** Whether the glass responds to touch interactions */
+  interactive?: boolean;
+  /** Style applied when glass is NOT available (fallback) */
+  fallbackStyle?: StyleProp<ViewStyle>;
+  /** Style applied in both glass and fallback modes */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Single DRY wrapper for Liquid Glass on iOS 26+ with graceful fallback.
+ * This is the ONLY place glass/non-glass branching happens in the app.
+ */
+export const AdaptiveGlassView: React.FC<AdaptiveGlassViewProps> = ({
+  children,
+  variant = 'regular',
+  tintColor,
+  interactive = false,
+  fallbackStyle,
+  style,
+}) => {
+  if (GLASS_AVAILABLE) {
+    return (
+      <GlassView
+        glassEffectStyle={variant}
+        tintColor={tintColor}
+        isInteractive={interactive}
+        style={style}
+      >
+        {children}
+      </GlassView>
+    );
+  }
+
+  return <View style={[fallbackStyle, style]}>{children}</View>;
+};

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,92 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { colors } from '../theme/colors';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error('[ErrorBoundary] Uncaught error:', error);
+    console.error('[ErrorBoundary] Component stack:', errorInfo.componentStack);
+  }
+
+  private handleReset = (): void => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+
+    return (
+      <View style={styles.container}>
+        <Text style={styles.emoji}>!</Text>
+        <Text style={styles.title}>Something went wrong</Text>
+        <Text style={styles.message}>
+          An unexpected error occurred. Please try again.
+        </Text>
+        <TouchableOpacity style={styles.button} onPress={this.handleReset}>
+          <Text style={styles.buttonText}>Try Again</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5F4EF',
+    paddingHorizontal: 32,
+  },
+  emoji: {
+    fontSize: 48,
+    fontWeight: '700',
+    color: colors.accent.error,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '700',
+    color: colors.text.primary,
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: 15,
+    color: colors.text.secondary,
+    textAlign: 'center',
+    lineHeight: 22,
+    marginBottom: 32,
+  },
+  button: {
+    backgroundColor: colors.accent.brand,
+    paddingHorizontal: 32,
+    paddingVertical: 14,
+    borderRadius: 12,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+});

package/src/components/FAB.tsx

@@ -0,0 +1,209 @@
+import React, { useState, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+} from 'react-native';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { AdaptiveGlassView } from './AdaptiveGlassView';
+import { GLASS_AVAILABLE } from '../utils/glass';
+import { colors } from '../theme/colors';
+
+interface FABAction {
+  icon: string;
+  label: string;
+  onPress: () => void;
+  color?: string;
+}
+
+interface FABProps {
+  actions: FABAction[];
+  /** Override main button icon (e.g. 'camera' when input is focused) */
+  overrideIcon?: string;
+  /** If set, tapping the main button calls this directly instead of toggling the menu */
+  overrideOnPress?: () => void;
+}
+
+export const FAB_SIZE = 50;
+const SUB_BUTTON_SIZE = 44;
+const SUB_BUTTON_SPACING = 58;
+
+// Fallback colors for sub-buttons when no color is specified
+const ACTION_COLORS = ['#10b981', '#f59e0b', '#0ea5e9', '#8b5cf6', '#ec4899'];
+
+export const FAB: React.FC<FABProps> = ({ actions, overrideIcon, overrideOnPress }) => {
+  const insets = useSafeAreaInsets();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const expandAnim = useRef(new Animated.Value(0)).current;
+
+  const toggle = useCallback(() => {
+    const toValue = isExpanded ? 0 : 1;
+    Animated.spring(expandAnim, {
+      toValue,
+      tension: 60,
+      friction: 8,
+      useNativeDriver: true,
+    }).start();
+    setIsExpanded(!isExpanded);
+  }, [isExpanded, expandAnim]);
+
+  const handleAction = useCallback((action: FABAction) => {
+    toggle();
+    setTimeout(action.onPress, 200);
+  }, [toggle]);
+
+  const subButtonOpacity = expandAnim.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0, 0.5, 1],
+  });
+
+  const subButtonScale = expandAnim.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0.3, 0.8, 1],
+  });
+
+  const fabBottom = Math.max(insets.bottom, 16) + 8;
+
+  return (
+    <>
+      {/* Backdrop */}
+      {isExpanded && (
+        <TouchableOpacity
+          style={styles.backdrop}
+          activeOpacity={1}
+          onPress={toggle}
+          accessibilityLabel="Close menu"
+          accessibilityRole="button"
+        />
+      )}
+
+      {/* Sub-action buttons — fly upward from FAB */}
+      {isExpanded && actions.map((action, index) => {
+        const translateY = expandAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, -(SUB_BUTTON_SPACING * (index + 1))],
+        });
+
+        return (
+          <Animated.View
+            key={index}
+            style={[
+              styles.subButtonRow,
+              {
+                bottom: fabBottom + (FAB_SIZE - SUB_BUTTON_SIZE) / 2,
+                right: 16 + (FAB_SIZE - SUB_BUTTON_SIZE) / 2,
+                transform: [{ translateY }, { scale: subButtonScale }],
+                opacity: subButtonOpacity,
+              },
+            ]}
+          >
+            <TouchableOpacity
+              style={styles.labelPill}
+              onPress={() => handleAction(action)}
+              activeOpacity={0.7}
+              accessibilityRole="button"
+              accessibilityLabel={action.label}
+            >
+              <Text style={styles.labelText}>{action.label}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.subButton, { backgroundColor: action.color ?? ACTION_COLORS[index % ACTION_COLORS.length] }]}
+              onPress={() => handleAction(action)}
+              activeOpacity={0.8}
+              accessibilityRole="button"
+              accessibilityLabel={action.label}
+            >
+              <Icon name={action.icon as any} size={22} color="#fff" />
+            </TouchableOpacity>
+          </Animated.View>
+        );
+      })}
+
+      {/* Main FAB button */}
+      <AdaptiveGlassView
+        variant="clear"
+        interactive={true}
+        style={[styles.fabGlass, { bottom: fabBottom, right: 16 }]}
+        fallbackStyle={styles.fabFallback}
+      >
+        <TouchableOpacity
+          style={styles.fabTouchable}
+          onPress={overrideOnPress ?? toggle}
+          activeOpacity={0.85}
+          accessibilityRole="button"
+          accessibilityLabel={overrideOnPress ? 'Capture food' : (isExpanded ? 'Close actions menu' : 'Open actions menu')}
+          accessibilityState={{ expanded: overrideOnPress ? undefined : isExpanded }}
+        >
+          <Icon
+            name={overrideIcon ?? (isExpanded ? 'close' : 'plus')}
+            size={24}
+            color={GLASS_AVAILABLE ? '#1A1A1A' : '#FFFFFF'}
+          />
+        </TouchableOpacity>
+      </AdaptiveGlassView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  fabGlass: {
+    position: 'absolute',
+    width: FAB_SIZE,
+    height: FAB_SIZE,
+    borderRadius: FAB_SIZE / 2,
+    zIndex: 100,
+  },
+  fabFallback: {
+    backgroundColor: colors.glass.fabFallback,
+    elevation: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+  },
+  fabTouchable: {
+    width: '100%',
+    height: '100%',
+    borderRadius: FAB_SIZE / 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    zIndex: 99,
+  },
+  subButtonRow: {
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    zIndex: 100,
+  },
+  labelPill: {
+    backgroundColor: 'rgba(0,0,0,0.75)',
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    borderRadius: 8,
+    marginRight: 10,
+  },
+  labelText: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  subButton: {
+    width: SUB_BUTTON_SIZE,
+    height: SUB_BUTTON_SIZE,
+    borderRadius: SUB_BUTTON_SIZE / 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+});

package/src/components/GlassButton.tsx

@@ -0,0 +1,279 @@
+import React, { useRef } from 'react';
+import { TouchableOpacity, Text, View, StyleSheet, ActivityIndicator, Animated } from 'react-native';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+
+interface GlassButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'text' | 'danger';
+  loading?: boolean;
+  disabled?: boolean;
+  icon?: string;
+  fullWidth?: boolean;
+  size?: 'normal' | 'compact';
+}
+
+export const GlassButton: React.FC<GlassButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+  loading = false,
+  disabled = false,
+  icon,
+  fullWidth = true,
+  size = 'normal',
+}) => {
+  const isDisabled = disabled || loading;
+  const isCompact = size === 'compact';
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  const handlePressIn = () => {
+    Animated.spring(scaleAnim, {
+      toValue: 0.97,
+      speed: 50,
+      bounciness: 4,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      speed: 50,
+      bounciness: 4,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  if (variant === 'text') {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={isDisabled}
+        accessibilityRole="button"
+        accessibilityLabel={title}
+        accessibilityState={{ disabled: isDisabled }}
+        style={[
+          styles.textButton,
+          !fullWidth && styles.textButtonNotFull,
+          isCompact && styles.textButtonCompact,
+        ]}
+      >
+        <Text style={[styles.textButtonText, isCompact && styles.textButtonTextCompact]}>{title}</Text>
+      </TouchableOpacity>
+    );
+  }
+
+  if (variant === 'primary') {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={isDisabled}
+        activeOpacity={1}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        accessibilityRole="button"
+        accessibilityLabel={title}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
+        style={[!fullWidth && styles.buttonNotFull]}
+      >
+        <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+          <View
+            style={[
+              styles.primaryButton,
+              isDisabled && styles.primaryButtonDisabled,
+              isCompact && styles.primaryButtonCompact,
+            ]}
+          >
+            {loading ? (
+              <ActivityIndicator color="#FFFFFF" size={isCompact ? 'small' : 'large'} />
+            ) : (
+              <>
+                {icon && <Icon name={icon} size={isCompact ? 16 : 20} color="#FFFFFF" style={styles.buttonIcon} />}
+                <Text style={[styles.primaryButtonText, isCompact && styles.primaryButtonTextCompact]}>{title}</Text>
+              </>
+            )}
+          </View>
+        </Animated.View>
+      </TouchableOpacity>
+    );
+  }
+
+  if (variant === 'danger') {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={isDisabled}
+        activeOpacity={1}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        accessibilityRole="button"
+        accessibilityLabel={title}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
+        style={[!fullWidth && styles.buttonNotFull]}
+      >
+        <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+          <View
+            style={[
+              styles.dangerButton,
+              isDisabled && styles.primaryButtonDisabled,
+              isCompact && styles.primaryButtonCompact,
+            ]}
+          >
+            {loading ? (
+              <ActivityIndicator color="#fff" size={isCompact ? 'small' : 'large'} />
+            ) : (
+              <>
+                {icon && <Icon name={icon} size={isCompact ? 16 : 20} color="#fff" style={styles.buttonIcon} />}
+                <Text style={[styles.dangerButtonText, isCompact && styles.primaryButtonTextCompact]}>{title}</Text>
+              </>
+            )}
+          </View>
+        </Animated.View>
+      </TouchableOpacity>
+    );
+  }
+
+  // Secondary variant
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isDisabled}
+      activeOpacity={1}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="button"
+      accessibilityLabel={title}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      style={[!fullWidth && styles.buttonNotFull]}
+    >
+      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+        <View
+          style={[
+            styles.secondaryButton,
+            isDisabled && styles.primaryButtonDisabled,
+            isCompact && styles.secondaryButtonCompact,
+          ]}
+        >
+          {loading ? (
+            <ActivityIndicator color="#1A1A1A" size={isCompact ? 'small' : 'large'} />
+          ) : (
+            <>
+              {icon && <Icon name={icon} size={isCompact ? 16 : 20} color="#1A1A1A" style={styles.buttonIcon} />}
+              <Text style={[styles.secondaryButtonText, isCompact && styles.secondaryButtonTextCompact]}>{title}</Text>
+            </>
+          )}
+        </View>
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  primaryButton: {
+    height: 56,
+    borderRadius: 28,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#1A1A1A',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.15)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 6,
+  },
+  primaryButtonCompact: {
+    height: 40,
+    borderRadius: 10,
+    paddingHorizontal: 20,
+  },
+  primaryButtonDisabled: {
+    opacity: 0.5,
+  },
+  primaryButtonText: {
+    fontSize: 16,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+    color: '#FFFFFF',
+  },
+  primaryButtonTextCompact: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  dangerButton: {
+    height: 56,
+    borderRadius: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F44336',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  dangerButtonText: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#fff',
+    letterSpacing: 0.5,
+  },
+  secondaryButton: {
+    height: 56,
+    borderRadius: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.85)',
+    borderWidth: 1.5,
+    borderColor: 'rgba(0,0,0,0.10)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  secondaryButtonCompact: {
+    height: 40,
+    borderRadius: 10,
+    paddingHorizontal: 20,
+  },
+  secondaryButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: 0.5,
+    color: '#1A1A1A',
+  },
+  secondaryButtonTextCompact: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  buttonNotFull: {
+    alignSelf: 'center',
+  },
+  buttonIcon: {
+    marginRight: 8,
+  },
+  textButton: {
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  textButtonCompact: {
+    paddingVertical: 8,
+  },
+  textButtonNotFull: {
+    alignSelf: 'center',
+  },
+  textButtonText: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#6B6B6B',
+  },
+  textButtonTextCompact: {
+    fontSize: 14,
+  },
+});