@klyftig/mobile-ui 1.0.4 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "scripts": {
     "pack-install": "npm pack && mv klyftig-ui-*.tgz /tmp/klyftig-ui-local.tgz && cd ../../mobile && npm install /tmp/klyftig-ui-local.tgz"
   },
@@ -18,6 +18,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
+    "expo": "*",
     "react": ">=19.0.0",
     "react-native": ">=0.83.0",
     "expo-glass-effect": "*",
@@ -29,7 +30,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
+  "devDependencies": {
     "expo": "~55.0.11",
     "react": "19.2.0",
     "react-native": "0.83.4"

package/src/components/EmptyState.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { useTheme } from '../hooks/useTheme';
+
+export interface EmptyStateProps {
+  /** MaterialCommunityIcons name. Defaults to "inbox-outline". */
+  icon?: string;
+  iconSize?: number;
+  iconColor?: string;
+  title: string;
+  description?: string;
+  /** Render an action button (or any node) below the description. */
+  action?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Large-icon empty state used on list/feed screens with no data.
+ * Centered in its parent; pass a flex-1 wrapper to vertically center on a full screen.
+ */
+export function EmptyState({
+  icon = 'inbox-outline',
+  iconSize = 64,
+  iconColor,
+  title,
+  description,
+  action,
+  style,
+}: EmptyStateProps) {
+  const { colors } = useTheme();
+  const resolvedIconColor = iconColor ?? colors.icon.tertiary;
+  return (
+    <View style={[styles.container, style]}>
+      <Icon name={icon as any} size={iconSize} color={resolvedIconColor} />
+      <Text style={[styles.title, { color: colors.text.primary }]}>{title}</Text>
+      {description && (
+        <Text style={[styles.description, { color: colors.text.tertiary }]}>
+          {description}
+        </Text>
+      )}
+      {action && <View style={styles.action}>{action}</View>}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 40,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginTop: 16,
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 14,
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  action: {
+    marginTop: 20,
+  },
+});

package/src/components/ErrorState.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+
+export interface ErrorStateProps {
+  title?: string;
+  description?: string;
+  retryLabel?: string;
+  onRetry?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Centered error view with optional retry button.
+ * Use inside a flex-1 wrapper to vertically center on a full screen.
+ */
+export function ErrorState({
+  title = 'Something went wrong',
+  description,
+  retryLabel = 'Try Again',
+  onRetry,
+  style,
+}: ErrorStateProps) {
+  const { colors } = useTheme();
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={[styles.title, { color: colors.text.primary }]}>{title}</Text>
+      {description && (
+        <Text style={[styles.description, { color: colors.text.secondary }]}>
+          {description}
+        </Text>
+      )}
+      {onRetry && (
+        <TouchableOpacity
+          onPress={onRetry}
+          accessibilityRole="button"
+          accessibilityLabel={retryLabel}
+          style={[styles.retryButton, { backgroundColor: colors.text.primary }]}
+        >
+          <Text style={styles.retryText}>{retryLabel}</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 40,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 14,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  retryButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  retryText: {
+    color: '#FFFFFF',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+});

package/src/components/LoadingState.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Text, ActivityIndicator, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+
+export interface LoadingStateProps {
+  message?: string;
+  size?: 'small' | 'large';
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Centered ActivityIndicator + optional message. Default uses the brand text color.
+ */
+export function LoadingState({
+  message,
+  size = 'large',
+  color,
+  style,
+}: LoadingStateProps) {
+  const { colors } = useTheme();
+  const resolvedColor = color ?? colors.text.primary;
+  return (
+    <View style={[styles.container, style]}>
+      <ActivityIndicator size={size} color={resolvedColor} />
+      {message && (
+        <Text style={[styles.message, { color: colors.text.secondary }]}>{message}</Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 40,
+  },
+  message: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginTop: 12,
+    textAlign: 'center',
+  },
+});

package/src/components/RadioOption.tsx

@@ -0,0 +1,190 @@
+import React, { createContext, useContext } from 'react';
+import {
+  TouchableOpacity,
+  View,
+  Text,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+
+type RadioGroupContextValue<T> = {
+  value: T | undefined;
+  onChange: (value: T) => void;
+};
+
+const RadioGroupContext = createContext<RadioGroupContextValue<unknown> | null>(null);
+
+export interface RadioGroupProps<T> {
+  value: T | undefined;
+  onChange: (value: T) => void;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+export function RadioGroup<T>({ value, onChange, children, style, accessibilityLabel }: RadioGroupProps<T>) {
+  return (
+    <RadioGroupContext.Provider value={{ value, onChange: onChange as (v: unknown) => void }}>
+      <View
+        accessibilityRole="radiogroup"
+        accessibilityLabel={accessibilityLabel}
+        style={style}
+      >
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export interface RadioOptionProps<T = string> {
+  /** The value this option represents — used for selection matching when inside a RadioGroup. */
+  value?: T;
+  /** Explicit selected flag. Ignored if rendered inside a RadioGroup with a matching `value`. */
+  selected?: boolean;
+  /** Callback when the option is tapped. Ignored if rendered inside a RadioGroup (the group's onChange fires). */
+  onPress?: () => void;
+  /** Primary label text. Either `label` or `children` is required. */
+  label?: string;
+  /** Secondary description text shown under the label. */
+  description?: string;
+  /** Render custom content to the right of the radio circle instead of label/description. */
+  children?: React.ReactNode;
+  /** `"sm"` for a compact inline row (gender pickers); `"md"` for a card-style row (activity level). */
+  variant?: 'sm' | 'md';
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+}
+
+/**
+ * A tap-anywhere radio row: the circle is purely visual (pointerEvents: none)
+ * and the entire row is a single TouchableOpacity. Safe inside ScrollViews
+ * and dialogs — no competing gesture responders.
+ *
+ * Use inside <RadioGroup value={x} onChange={setX}> for controlled selection,
+ * or pass `selected` + `onPress` directly for standalone use.
+ */
+export function RadioOption<T = string>({
+  value,
+  selected,
+  onPress,
+  label,
+  description,
+  children,
+  variant = 'sm',
+  style,
+  labelStyle,
+  disabled = false,
+}: RadioOptionProps<T>) {
+  const { colors } = useTheme();
+  const group = useContext(RadioGroupContext) as RadioGroupContextValue<T> | null;
+
+  const isSelected = group && value !== undefined ? group.value === value : !!selected;
+  const handlePress = () => {
+    if (disabled) return;
+    if (group && value !== undefined) {
+      group.onChange(value);
+    } else {
+      onPress?.();
+    }
+  };
+
+  const isCard = variant === 'md';
+  const ringColor = isSelected ? colors.text.primary : colors.text.tertiary;
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      disabled={disabled}
+      activeOpacity={0.7}
+      accessibilityRole="radio"
+      accessibilityState={{ selected: isSelected, disabled }}
+      accessibilityLabel={label}
+      style={[
+        isCard ? styles.cardRow : styles.inlineRow,
+        disabled && styles.disabled,
+        style,
+      ]}
+    >
+      {/* Radio circle — fully non-interactive; outer TouchableOpacity handles taps. */}
+      <View pointerEvents="none" style={[styles.ring, { borderColor: ringColor }]}>
+        {isSelected && <View style={[styles.dot, { backgroundColor: colors.text.primary }]} />}
+      </View>
+
+      {children ?? (
+        <View style={styles.textContainer}>
+          {label && (
+            <Text
+              style={[
+                isCard ? styles.cardLabel : styles.inlineLabel,
+                { color: colors.text.primary },
+                labelStyle,
+              ]}
+            >
+              {label}
+            </Text>
+          )}
+          {description && (
+            <Text style={[styles.description, { color: colors.text.secondary }]}>
+              {description}
+            </Text>
+          )}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  inlineRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 4,
+  },
+  cardRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    borderRadius: 12,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.4)',
+  },
+  ring: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+  },
+  textContainer: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  inlineLabel: {
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  cardLabel: {
+    fontSize: 15,
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  description: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/src/components/ScreenHeader.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '../hooks/useTheme';
+
+export interface ScreenHeaderProps {
+  title: string;
+  subtitle?: string;
+  /** Left icon name (MaterialCommunityIcons). Defaults to "home-outline". */
+  leftIcon?: string;
+  /** Accessibility label for the left button. Defaults to "Go to Dashboard". */
+  leftAccessibilityLabel?: string;
+  onLeftPress?: () => void;
+  /** Right-side content (optional action, e.g. a settings button). Reserves space for symmetry when absent. */
+  right?: React.ReactNode;
+  /** Render below the title row — e.g. a tab bar or period toggle that should stay pinned with the header. */
+  below?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Fixed-position screen header matching the Kaelo glass design system.
+ * Renders safe-area top inset + home icon + centered title/subtitle + optional right slot.
+ * Place as a sibling of (not inside) your ScrollView so it stays pinned while body scrolls.
+ */
+export function ScreenHeader({
+  title,
+  subtitle,
+  leftIcon = 'home-outline',
+  leftAccessibilityLabel = 'Go to Dashboard',
+  onLeftPress,
+  right,
+  below,
+  style,
+}: ScreenHeaderProps) {
+  const insets = useSafeAreaInsets();
+  const { colors } = useTheme();
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top + 16 }, style]}>
+      <View style={styles.row}>
+        <View style={styles.side}>
+          {onLeftPress && (
+            <TouchableOpacity
+              onPress={onLeftPress}
+              accessibilityLabel={leftAccessibilityLabel}
+              accessibilityRole="button"
+              hitSlop={8}
+            >
+              <Icon name={leftIcon as any} size={26} color={colors.icon.primary} />
+            </TouchableOpacity>
+          )}
+        </View>
+        <View style={styles.center}>
+          <Text
+            style={[styles.title, { color: colors.text.primary }]}
+            numberOfLines={1}
+          >
+            {title}
+          </Text>
+          {subtitle && (
+            <Text
+              style={[styles.subtitle, { color: colors.text.tertiary }]}
+              numberOfLines={1}
+            >
+              {subtitle}
+            </Text>
+          )}
+        </View>
+        <View style={styles.side}>{right}</View>
+      </View>
+      {below}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+    paddingBottom: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  side: {
+    width: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 13,
+    fontWeight: '500',
+    marginTop: 2,
+  },
+});

package/src/components/SectionHeader.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, StyleSheet, StyleProp, TextStyle } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+
+export interface SectionHeaderProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+/**
+ * Small uppercase section label used above lists of settings or cards.
+ * Matches the existing Profile / LogFood section headers.
+ */
+export function SectionHeader({ children, style }: SectionHeaderProps) {
+  const { colors } = useTheme();
+  return (
+    <Text style={[styles.title, { color: colors.text.secondary }, style]}>
+      {children}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 13,
+    fontWeight: '700',
+    marginBottom: 12,
+    marginLeft: 4,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+});

package/src/components/SegmentedToggle.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+
+export interface SegmentedToggleOption<T extends string> {
+  value: T;
+  label: string;
+  accessibilityLabel?: string;
+}
+
+export interface SegmentedToggleProps<T extends string> {
+  options: SegmentedToggleOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  /** `"pill"` = rounded pill row (tabs); `"chip"` = subtle inset toggle (filters). */
+  variant?: 'pill' | 'chip';
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Horizontal pill toggle used for Week/Month, Insights/History, etc.
+ * Replaces the ad-hoc tabBar/periodToggle rows in ProgressScreen and InsightsScreen.
+ */
+export function SegmentedToggle<T extends string>({
+  options,
+  value,
+  onChange,
+  variant = 'pill',
+  style,
+}: SegmentedToggleProps<T>) {
+  const { colors } = useTheme();
+  const isChip = variant === 'chip';
+
+  const containerBg = isChip ? colors.glass.backgroundLight : '#F0EFEA';
+  const activeBg = isChip ? colors.glass.backgroundHeavy : '#FFFFFF';
+
+  return (
+    <View
+      accessibilityRole="tablist"
+      style={[
+        styles.container,
+        { backgroundColor: containerBg },
+        isChip && styles.containerChip,
+        style,
+      ]}
+    >
+      {options.map((opt) => {
+        const active = opt.value === value;
+        return (
+          <TouchableOpacity
+            key={opt.value}
+            onPress={() => onChange(opt.value)}
+            accessibilityRole="tab"
+            accessibilityLabel={opt.accessibilityLabel ?? opt.label}
+            accessibilityState={{ selected: active }}
+            style={[
+              styles.segment,
+              active && { backgroundColor: activeBg },
+              active && styles.segmentActiveShadow,
+            ]}
+          >
+            <Text
+              style={[
+                styles.label,
+                {
+                  color: active ? colors.text.primary : colors.text.tertiary,
+                },
+              ]}
+            >
+              {opt.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderRadius: 12,
+    padding: 4,
+  },
+  containerChip: {
+    borderRadius: 10,
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: 10,
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  segmentActiveShadow: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 3,
+    elevation: 1,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/index.ts

@@ -22,6 +22,20 @@ export { GlassHeaderBackground } from './components/GlassHeaderBackground';
 export { GlassInput } from './components/GlassInput';
 export { GlassListItem } from './components/GlassList';
 export { GlassStatsCard, GlassMacroCard, GlassNutrientRow } from './components/GlassStats';
+export { RadioOption, RadioGroup } from './components/RadioOption';
+export type { RadioOptionProps, RadioGroupProps } from './components/RadioOption';
+export { ScreenHeader } from './components/ScreenHeader';
+export type { ScreenHeaderProps } from './components/ScreenHeader';
+export { SectionHeader } from './components/SectionHeader';
+export type { SectionHeaderProps } from './components/SectionHeader';
+export { SegmentedToggle } from './components/SegmentedToggle';
+export type { SegmentedToggleProps, SegmentedToggleOption } from './components/SegmentedToggle';
+export { EmptyState } from './components/EmptyState';
+export type { EmptyStateProps } from './components/EmptyState';
+export { ErrorState } from './components/ErrorState';
+export type { ErrorStateProps } from './components/ErrorState';
+export { LoadingState } from './components/LoadingState';
+export type { LoadingStateProps } from './components/LoadingState';
 
 // Progress
 export { CircularProgress } from './components/progress/CircularProgress';