Nutrition Home

import { useState } from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Avatar, Icon, Text, type IconName } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, Press, ROW_STAGGER } from "../shared";

export interface NutritionHomeScreenProps {
  onNext?: () => void;
}

const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const MACROS: { label: string; value: string; color: string; pct: `${number}%` }[] = [
  { label: "Proteins", value: "80/112 g", color: "#3B82F6", pct: "72%" },
  { label: "Carbs", value: "160/225 g", color: "#F59E0B", pct: "71%" },
  { label: "Fats", value: "35/50 g", color: "#FB923C", pct: "70%" },
];
const MEALS = ["🍳", "🥗", "🥪"];

function NavItem({ icon, label, active }: { icon: IconName; label: string; active?: boolean }) {
  const haptics = useHaptic();
  return (
    <Press
      onPress={() => haptics.light()}
      className={cn("items-center gap-0.5 rounded-full px-4 py-1.5", active && "bg-white/[0.12]")}
    >
      <Icon name={icon} size="md" color={active ? "#FFFFFF" : "#8A8A93"} />
      <Text className={active ? "text-[11px] font-semibold text-white" : "text-[11px] text-[#8A8A93]"}>
        {label}
      </Text>
    </Press>
  );
}

export function NutritionHomeScreen({ onNext }: NutritionHomeScreenProps) {
  const haptics = useHaptic();
  const [range, setRange] = useState(0);
  const [cups, setCups] = useState(2);
  return (
    <View className="flex-1 bg-[#111114]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        <ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="pb-40">
          <Mount className="flex-row items-center gap-3 px-6 pt-2" delay={40}>
            <Avatar size="md" fallback="G" source={{ uri: "https://i.pravatar.cc/150?img=53" }} />
            <View>
              <View className="flex-row items-center gap-1.5">
                <Text className="text-[12px] text-white/60">Good Morning</Text>
                <Icon name="sun" size="sm" color="#F59E0B" />
              </View>
              <Text className="text-[17px] font-semibold text-white">Gabriel .K</Text>
            </View>
          </Mount>
          <Mount delay={90} className="mx-6 mt-4 flex-row rounded-full bg-white/[0.07] p-1">
            {["Today", "Weekly"].map((t, i) => (
              <Press
                key={t}
                onPress={() => {
                  haptics.light();
                  setRange(i);
                }}
                className={cn("h-9 flex-1 items-center justify-center rounded-full", i === range && "bg-white/[0.12]")}
              >
                <Text className={i === range ? "text-[14px] font-semibold text-white" : "text-[14px] text-white/45"}>
                  {t}
                </Text>
              </Press>
            ))}
          </Mount>
          <Mount delay={140} className="mx-6 mt-4 rounded-[24px] bg-white/[0.07] p-4">
            <View className="flex-row items-center justify-between">
              <View className="flex-row items-baseline gap-1">
                <Text className="text-[17px] font-semibold font-bold text-white">12</Text>
                <Text className="text-[12px] text-white/55">day streak</Text>
              </View>
              <Text className="text-[15px]">🔥</Text>
            </View>
            <View className="mt-3 flex-row justify-between">
              {DAYS.map((d, i) => (
                <View key={d} className="items-center gap-1.5">
                  <Text className="text-[11px] text-white/45">{d}</Text>
                  {i < 2 ? (
                    <Text className="text-[15px]">🔥</Text>
                  ) : (
                    <Text className={i === 2 ? "text-[12px] font-bold text-white" : "text-[12px] text-white/45"}>
                      {10 + i - 2}
                    </Text>
                  )}
                </View>
              ))}
            </View>
          </Mount>
          <Mount delay={200} className="mt-5 flex-row items-start justify-between px-6">
            <View>
              <Text className="text-[12px] text-white/55">Calories eaten</Text>
              <View className="flex-row items-baseline gap-1">
                <Text className="text-[30px] font-bold leading-[38px] text-[30px] text-white">2400</Text>
                <Text className="text-[12px] text-white/45">/3200kcal</Text>
              </View>
            </View>
            <View className="items-center gap-2">
              <Press
                accessibilityRole="button" accessibilityLabel="Add food"
                onPress={() => { haptics.light(); onNext?.(); }}
                className="h-11 w-11 items-center justify-center rounded-full border-[3px] border-white/25"
              >
                <Icon name="plus" size="md" color="#FFFFFF" />
              </Press>
              <Text className="text-[17px] font-semibold font-bold text-[26px] text-white">A</Text>
              <Text className="text-[11px] -mt-2 text-white/50">Score</Text>
            </View>
          </Mount>
          <Mount delay={250} className="mt-3 flex-row items-start justify-between px-6">
            <View className="flex-row gap-1.5">
              {MEALS.map((m, i) => (
                <View key={i} className="h-14 w-14 items-center justify-center rounded-[14px] bg-white/[0.08]">
                  <Text className="text-[17px] font-semibold">{m}</Text>
                </View>
              ))}
            </View>
          </Mount>
          <View className="mt-4 flex-row gap-4 px-6">
            {MACROS.map((m, i) => (
              <Mount key={m.label} delay={300 + i * ROW_STAGGER} className="flex-1">
                <Text className="text-[12px] font-medium text-white">{m.label}</Text>
                <View className="mt-2 h-1.5 overflow-hidden rounded-full bg-white/[0.1]">
                  <View className="h-full rounded-full" style={{ backgroundColor: m.color, width: m.pct }} />
                </View>
                <Text className="text-[11px] mt-1 text-white/45">{m.value}</Text>
              </Mount>
            ))}
          </View>
          <Mount delay={380} className="mx-6 mt-5 rounded-[28px] bg-[#F4F5F9] px-5 pb-7 pt-5">
            <View className="flex-row items-center justify-between">
              <View>
                <Text className="text-[12px] text-[#6B6B70]">Water</Text>
                <View className="flex-row items-baseline gap-1">
                  <Text className="text-[26px] font-bold text-[#1C1C1E]">{cups * 90}</Text>
                  <Text className="text-[12px] text-[#9C9CA6]">/2500ml</Text>
                </View>
              </View>
              <Press
                accessibilityRole="button" accessibilityLabel="Add water"
                onPress={() => {
                  haptics.light();
                  setCups((c) => Math.min(8, c + 1));
                }}
                className="h-11 w-11 items-center justify-center rounded-full bg-[#1C1C1E]"
              >
                <Icon name="plus" size="md" color="#FFFFFF" />
              </Press>
            </View>
            <View className="mt-4 flex-row justify-between">
              {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
                <Press
                  key={i}
                  accessibilityRole="button"
                  accessibilityLabel={`Cup ${i + 1}`}
                  onPress={() => {
                    haptics.selection();
                    setCups(i + 1 === cups ? i : i + 1);
                  }}
                >
                  <Icon name="droplet" size="xl" color={i < cups ? "#3B82F6" : "#DFDFE4"} />
                </Press>
              ))}
            </View>
          </Mount>
        </ScrollView>
        <View className="absolute inset-x-8 bottom-9">
          <View className="flex-row items-center justify-around rounded-full border border-white/[0.1] bg-[#17171B]/90 px-2 py-2.5">
            <NavItem icon="home" label="Home" active />
            <NavItem icon="calendar" label="Schedule" />
            <NavItem icon="list" label="Analytics" />
            <NavItem icon="utensils" label="Recipe" />
          </View>
        </View>
      </SafeAreaView>
    </View>
  );
}

Recreate the "Nutrition Home" screen in React Native using LumioUI.

Goal: Nutrition Home screen. Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx lumioui add health-nutrition-home
```

Or pull just the components: `npx lumioui add avatar glass icon text`

Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×1

### `glass` — iOS 26 liquid-glass surface — real glass via expo-glass-effect (Expo Go) or @callstack/liquid-glass (dev builds), SVG refraction + specular rim on web, frosted fallback elsewhere; GlassContainer melts adjacent panes into one blob
- imported but not rendered directly — likely used through a sibling or as a utility

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×5

### `text` — Themed type scale from caption to display.
- `<Text>` ×21

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/health/nutrition-home.tsx` exporting NutritionHomeScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

The LumioUI source for this screen — reproduce it faithfully:

```tsx
import { useState } from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Avatar, Icon, Text, type IconName } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, Press, ROW_STAGGER } from "../shared";

export interface NutritionHomeScreenProps {
  onNext?: () => void;
}

const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const MACROS: { label: string; value: string; color: string; pct: `${number}%` }[] = [
  { label: "Proteins", value: "80/112 g", color: "#3B82F6", pct: "72%" },
  { label: "Carbs", value: "160/225 g", color: "#F59E0B", pct: "71%" },
  { label: "Fats", value: "35/50 g", color: "#FB923C", pct: "70%" },
];
const MEALS = ["🍳", "🥗", "🥪"];

function NavItem({ icon, label, active }: { icon: IconName; label: string; active?: boolean }) {
  const haptics = useHaptic();
  return (
    <Press
      onPress={() => haptics.light()}
      className={cn("items-center gap-0.5 rounded-full px-4 py-1.5", active && "bg-white/[0.12]")}
    >
      <Icon name={icon} size="md" color={active ? "#FFFFFF" : "#8A8A93"} />
      <Text className={active ? "text-[11px] font-semibold text-white" : "text-[11px] text-[#8A8A93]"}>
        {label}
      </Text>
    </Press>
  );
}

export function NutritionHomeScreen({ onNext }: NutritionHomeScreenProps) {
  const haptics = useHaptic();
  const [range, setRange] = useState(0);
  const [cups, setCups] = useState(2);
  return (
    <View className="flex-1 bg-[#111114]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        <ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="pb-40">
          <Mount className="flex-row items-center gap-3 px-6 pt-2" delay={40}>
            <Avatar size="md" fallback="G" source={{ uri: "https://i.pravatar.cc/150?img=53" }} />
            <View>
              <View className="flex-row items-center gap-1.5">
                <Text className="text-[12px] text-white/60">Good Morning</Text>
                <Icon name="sun" size="sm" color="#F59E0B" />
              </View>
              <Text className="text-[17px] font-semibold text-white">Gabriel .K</Text>
            </View>
          </Mount>
          <Mount delay={90} className="mx-6 mt-4 flex-row rounded-full bg-white/[0.07] p-1">
            {["Today", "Weekly"].map((t, i) => (
              <Press
                key={t}
                onPress={() => {
                  haptics.light();
                  setRange(i);
                }}
                className={cn("h-9 flex-1 items-center justify-center rounded-full", i === range && "bg-white/[0.12]")}
              >
                <Text className={i === range ? "text-[14px] font-semibold text-white" : "text-[14px] text-white/45"}>
                  {t}
                </Text>
              </Press>
            ))}
          </Mount>
          <Mount delay={140} className="mx-6 mt-4 rounded-[24px] bg-white/[0.07] p-4">
            <View className="flex-row items-center justify-between">
              <View className="flex-row items-baseline gap-1">
                <Text className="text-[17px] font-semibold font-bold text-white">12</Text>
                <Text className="text-[12px] text-white/55">day streak</Text>
              </View>
              <Text className="text-[15px]">🔥</Text>
            </View>
            <View className="mt-3 flex-row justify-between">
              {DAYS.map((d, i) => (
                <View key={d} className="items-center gap-1.5">
                  <Text className="text-[11px] text-white/45">{d}</Text>
                  {i < 2 ? (
                    <Text className="text-[15px]">🔥</Text>
                  ) : (
                    <Text className={i === 2 ? "text-[12px] font-bold text-white" : "text-[12px] text-white/45"}>
                      {10 + i - 2}
                    </Text>
                  )}
                </View>
              ))}
            </View>
          </Mount>
          <Mount delay={200} className="mt-5 flex-row items-start justify-between px-6">
            <View>
              <Text className="text-[12px] text-white/55">Calories eaten</Text>
              <View className="flex-row items-baseline gap-1">
                <Text className="text-[30px] font-bold leading-[38px] text-[30px] text-white">2400</Text>
                <Text className="text-[12px] text-white/45">/3200kcal</Text>
              </View>
            </View>
            <View className="items-center gap-2">
              <Press
                accessibilityRole="button" accessibilityLabel="Add food"
                onPress={() => { haptics.light(); onNext?.(); }}
                className="h-11 w-11 items-center justify-center rounded-full border-[3px] border-white/25"
              >
                <Icon name="plus" size="md" color="#FFFFFF" />
              </Press>
              <Text className="text-[17px] font-semibold font-bold text-[26px] text-white">A</Text>
              <Text className="text-[11px] -mt-2 text-white/50">Score</Text>
            </View>
          </Mount>
          <Mount delay={250} className="mt-3 flex-row items-start justify-between px-6">
            <View className="flex-row gap-1.5">
              {MEALS.map((m, i) => (
                <View key={i} className="h-14 w-14 items-center justify-center rounded-[14px] bg-white/[0.08]">
                  <Text className="text-[17px] font-semibold">{m}</Text>
                </View>
              ))}
            </View>
          </Mount>
          <View className="mt-4 flex-row gap-4 px-6">
            {MACROS.map((m, i) => (
              <Mount key={m.label} delay={300 + i * ROW_STAGGER} className="flex-1">
                <Text className="text-[12px] font-medium text-white">{m.label}</Text>
                <View className="mt-2 h-1.5 overflow-hidden rounded-full bg-white/[0.1]">
                  <View className="h-full rounded-full" style={{ backgroundColor: m.color, width: m.pct }} />
                </View>
                <Text className="text-[11px] mt-1 text-white/45">{m.value}</Text>
              </Mount>
            ))}
          </View>
          <Mount delay={380} className="mx-6 mt-5 rounded-[28px] bg-[#F4F5F9] px-5 pb-7 pt-5">
            <View className="flex-row items-center justify-between">
              <View>
                <Text className="text-[12px] text-[#6B6B70]">Water</Text>
                <View className="flex-row items-baseline gap-1">
                  <Text className="text-[26px] font-bold text-[#1C1C1E]">{cups * 90}</Text>
                  <Text className="text-[12px] text-[#9C9CA6]">/2500ml</Text>
                </View>
              </View>
              <Press
                accessibilityRole="button" accessibilityLabel="Add water"
                onPress={() => {
                  haptics.light();
                  setCups((c) => Math.min(8, c + 1));
                }}
                className="h-11 w-11 items-center justify-center rounded-full bg-[#1C1C1E]"
              >
                <Icon name="plus" size="md" color="#FFFFFF" />
              </Press>
            </View>
            <View className="mt-4 flex-row justify-between">
              {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
                <Press
                  key={i}
                  accessibilityRole="button"
                  accessibilityLabel={`Cup ${i + 1}`}
                  onPress={() => {
                    haptics.selection();
                    setCups(i + 1 === cups ? i : i + 1);
                  }}
                >
                  <Icon name="droplet" size="xl" color={i < cups ? "#3B82F6" : "#DFDFE4"} />
                </Press>
              ))}
            </View>
          </Mount>
        </ScrollView>
        <View className="absolute inset-x-8 bottom-9">
          <View className="flex-row items-center justify-around rounded-full border border-white/[0.1] bg-[#17171B]/90 px-2 py-2.5">
            <NavItem icon="home" label="Home" active />
            <NavItem icon="calendar" label="Schedule" />
            <NavItem icon="list" label="Analytics" />
            <NavItem icon="utensils" label="Recipe" />
          </View>
        </View>
      </SafeAreaView>
    </View>
  );
}
```

Screen: https://lumioui.dev/screens/health-nutrition-home