Storage & data Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Glass, Icon, List, Text, type IconName } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import Svg, { Circle, G } from "react-native-svg";
import { Mount, Press, RowIcon, SEPARATOR_INSET, type IconTone } from "../shared";

export interface StorageCategory {
  id: string;
  label: string;
  /** Human-readable size, e.g. "4.2 GB". */
  size: string;
  /** 0–1 share of the usage bar. */
  share: number;
  icon: IconName;
  tone: IconTone;
}

export interface StorageDataScreenProps {
  total?: string;
  capacity?: string;
  categories?: StorageCategory[];
  onClearCache?: () => void;
  onManage?: (id: string) => void;
  onBack?: () => void;
}

const TONE_HEX: Record<IconTone, string> = {
  blue: "#3B82F6",
  green: "#22C55E",
  orange: "#F59E0B",
  red: "#EF4444",
  purple: "#8B5CF6",
  teal: "#14B8A6",
  gray: "#9CA3AF",
};

const DONUT_SIZE = 172;
const DONUT_STROKE = 22;

/** Category-share donut — Telegram Storage idiom: arcs around a center total,
 *  legend rows carry the same color as their arc. */
function StorageDonut({ categories, total, capacity }: { categories: StorageCategory[]; total: string; capacity: string }) {
  const r = (DONUT_SIZE - DONUT_STROKE) / 2;
  const circumference = 2 * Math.PI * r;
  let acc = 0;
  return (
    <View
      className="items-center justify-center"
      style={{ width: DONUT_SIZE, height: DONUT_SIZE }}
      accessibilityLabel={`${total} of ${capacity} used`}
      accessibilityRole="image"
    >
      <Svg width={DONUT_SIZE} height={DONUT_SIZE}>
        <Circle
          cx={DONUT_SIZE / 2}
          cy={DONUT_SIZE / 2}
          r={r}
          stroke="rgba(120,120,128,0.16)"
          strokeWidth={DONUT_STROKE}
          fill="none"
        />
        <G rotation="-90" origin={`${DONUT_SIZE / 2}, ${DONUT_SIZE / 2}`}>
          {categories.map((c) => {
            const arc = c.share * circumference;
            const offset = -acc * circumference;
            acc += c.share;
            return (
              <Circle
                key={c.id}
                cx={DONUT_SIZE / 2}
                cy={DONUT_SIZE / 2}
                r={r}
                stroke={TONE_HEX[c.tone]}
                strokeWidth={DONUT_STROKE}
                fill="none"
                strokeDasharray={`${arc} ${circumference - arc}`}
                strokeDashoffset={offset}
                strokeLinecap="butt"
              />
            );
          })}
        </G>
      </Svg>
      <View className="absolute items-center">
        <Text variant="h2" className="tracking-tight text-white">{total}</Text>
        <Text variant="small" className="text-white/55">used</Text>
      </View>
    </View>
  );
}

const DEFAULT_CATEGORIES: StorageCategory[] = [
  { id: "photos", label: "Photos", size: "4.2 GB", share: 0.34, icon: "image", tone: "blue" },
  { id: "videos", label: "Videos", size: "6.8 GB", share: 0.55, icon: "camera", tone: "purple" },
  { id: "documents", label: "Documents", size: "0.9 GB", share: 0.07, icon: "file-text", tone: "teal" },
  { id: "cache", label: "Cache", size: "0.5 GB", share: 0.04, icon: "refresh", tone: "gray" },
];

/** Storage & data — usage bar broken down by category, cache management. */
export function StorageDataScreen({
  total = "12.4 GB",
  capacity = "128 GB",
  categories = DEFAULT_CATEGORIES,
  onClearCache,
  onManage,
  onBack,
}: StorageDataScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();

  return (
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      {/* Floating chrome — back disc + centered title pill. */}
      <View className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }} pointerEvents="box-none">
        <View className="flex-row items-center gap-2">
          <Glass
            effect="regular"
            className="h-11 w-11 items-center justify-center rounded-full"
          >
            <Press
              onPress={() => {
                haptics.light();
                onBack?.();
              }}
              accessibilityLabel="Go back"
              accessibilityRole="button"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="chevron-left" size="md" color="foreground" />
            </Press>
          </Glass>
        </View>
        <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
          <Glass
            effect="regular"
            className="h-11 flex-row items-center justify-center rounded-full px-5"
          >
            <Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
              Storage & data
            </Text>
          </Glass>
        </View>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 32 }}
      >
        {/* Usage donut inside the ink hero — arcs pop on the dark surface. */}
        <Mount className="mx-4 items-center rounded-3xl bg-[#1B1B26] px-6 py-6">
          <StorageDonut categories={categories} total={total} capacity={capacity} />
          <Text variant="small" className="mt-3 text-white/55">
            {total} of {capacity} used
          </Text>
          {/* Insight line — the donut answers "what's eating it", not just "how much". */}
          <Text className="mt-1 text-xs text-white/40">
            Photos &amp; media take the most space — down 12% this month
          </Text>
        </Mount>

        <List inset>
          <List.Section title="Storage">
            {categories.map((c, ii) => (
              <React.Fragment key={c.id}>
                {ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
                <List.Item
                  title={c.label}
                  leading={<RowIcon name={c.icon} tone={c.tone} />}
                  trailing={
                    <View className="flex-row items-center gap-2">
                      <View
                        className="h-2.5 w-2.5 rounded-full"
                        style={{ backgroundColor: TONE_HEX[c.tone] }}
                        accessibilityElementsHidden
                        importantForAccessibility="no"
                      />
                      <Text variant="small" className="w-14 text-right tabular-nums text-muted-foreground">
                        {c.size}
                      </Text>
                    </View>
                  }
                  showChevron={false}
                  haptic="light"
                  onPress={() => onManage?.(c.id)}
                />
              </React.Fragment>
            ))}
          </List.Section>

          <List.Section title="Manage">
            <List.Item
              title="Clear cache"
              subtitle="Frees 0.5 GB — photos and documents stay"
              leading={<RowIcon name="trash" tone="red" />}
              haptic="medium"
              onPress={() => {
                haptics.warning();
                onClearCache?.();
              }}
            />
            <List.Separator className={SEPARATOR_INSET} />
            <List.Item
              title="Auto-remove downloads"
              subtitle="Offline files expire after 30 days"
              leading={<RowIcon name="clock" tone="orange" />}
              showChevron
              haptic="light"
            />
            <List.Separator className={SEPARATOR_INSET} />
            <List.Item
              title="Review large files"
              subtitle="5 items over 100 MB"
              leading={<RowIcon name="package" tone="purple" />}
              showChevron
              haptic="light"
            />
          </List.Section>
        </List>
      </ScrollView>
    </SafeAreaView>
  );
}
StorageDataScreen.displayName = "StorageDataScreen";

Recreate the "Storage & data Screen" screen in React Native using LumioUI.

Goal: Storage usage bar with per-category breakdown and cache clearing. 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 core-storage-data
```

Or pull just the components: `npx lumioui add button icon list text`

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

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

## Components — how, where, when

### `button` — Tactile pill button with press spring, ink wash and async loading.
- 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>` ×1

### `list` — Settings-style rows with separators and press feedback.
- `<List>` ×1

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

## 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/core/storage-data.tsx` exporting StorageDataScreen. 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 * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Glass, Icon, List, Text, type IconName } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import Svg, { Circle, G } from "react-native-svg";
import { Mount, Press, RowIcon, SEPARATOR_INSET, type IconTone } from "../shared";

export interface StorageCategory {
  id: string;
  label: string;
  /** Human-readable size, e.g. "4.2 GB". */
  size: string;
  /** 0–1 share of the usage bar. */
  share: number;
  icon: IconName;
  tone: IconTone;
}

export interface StorageDataScreenProps {
  total?: string;
  capacity?: string;
  categories?: StorageCategory[];
  onClearCache?: () => void;
  onManage?: (id: string) => void;
  onBack?: () => void;
}

const TONE_HEX: Record<IconTone, string> = {
  blue: "#3B82F6",
  green: "#22C55E",
  orange: "#F59E0B",
  red: "#EF4444",
  purple: "#8B5CF6",
  teal: "#14B8A6",
  gray: "#9CA3AF",
};

const DONUT_SIZE = 172;
const DONUT_STROKE = 22;

/** Category-share donut — Telegram Storage idiom: arcs around a center total,
 *  legend rows carry the same color as their arc. */
function StorageDonut({ categories, total, capacity }: { categories: StorageCategory[]; total: string; capacity: string }) {
  const r = (DONUT_SIZE - DONUT_STROKE) / 2;
  const circumference = 2 * Math.PI * r;
  let acc = 0;
  return (
    <View
      className="items-center justify-center"
      style={{ width: DONUT_SIZE, height: DONUT_SIZE }}
      accessibilityLabel={`${total} of ${capacity} used`}
      accessibilityRole="image"
    >
      <Svg width={DONUT_SIZE} height={DONUT_SIZE}>
        <Circle
          cx={DONUT_SIZE / 2}
          cy={DONUT_SIZE / 2}
          r={r}
          stroke="rgba(120,120,128,0.16)"
          strokeWidth={DONUT_STROKE}
          fill="none"
        />
        <G rotation="-90" origin={`${DONUT_SIZE / 2}, ${DONUT_SIZE / 2}`}>
          {categories.map((c) => {
            const arc = c.share * circumference;
            const offset = -acc * circumference;
            acc += c.share;
            return (
              <Circle
                key={c.id}
                cx={DONUT_SIZE / 2}
                cy={DONUT_SIZE / 2}
                r={r}
                stroke={TONE_HEX[c.tone]}
                strokeWidth={DONUT_STROKE}
                fill="none"
                strokeDasharray={`${arc} ${circumference - arc}`}
                strokeDashoffset={offset}
                strokeLinecap="butt"
              />
            );
          })}
        </G>
      </Svg>
      <View className="absolute items-center">
        <Text variant="h2" className="tracking-tight text-white">{total}</Text>
        <Text variant="small" className="text-white/55">used</Text>
      </View>
    </View>
  );
}

const DEFAULT_CATEGORIES: StorageCategory[] = [
  { id: "photos", label: "Photos", size: "4.2 GB", share: 0.34, icon: "image", tone: "blue" },
  { id: "videos", label: "Videos", size: "6.8 GB", share: 0.55, icon: "camera", tone: "purple" },
  { id: "documents", label: "Documents", size: "0.9 GB", share: 0.07, icon: "file-text", tone: "teal" },
  { id: "cache", label: "Cache", size: "0.5 GB", share: 0.04, icon: "refresh", tone: "gray" },
];

/** Storage & data — usage bar broken down by category, cache management. */
export function StorageDataScreen({
  total = "12.4 GB",
  capacity = "128 GB",
  categories = DEFAULT_CATEGORIES,
  onClearCache,
  onManage,
  onBack,
}: StorageDataScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();

  return (
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      {/* Floating chrome — back disc + centered title pill. */}
      <View className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }} pointerEvents="box-none">
        <View className="flex-row items-center gap-2">
          <Glass
            effect="regular"
            className="h-11 w-11 items-center justify-center rounded-full"
          >
            <Press
              onPress={() => {
                haptics.light();
                onBack?.();
              }}
              accessibilityLabel="Go back"
              accessibilityRole="button"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="chevron-left" size="md" color="foreground" />
            </Press>
          </Glass>
        </View>
        <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
          <Glass
            effect="regular"
            className="h-11 flex-row items-center justify-center rounded-full px-5"
          >
            <Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
              Storage & data
            </Text>
          </Glass>
        </View>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 32 }}
      >
        {/* Usage donut inside the ink hero — arcs pop on the dark surface. */}
        <Mount className="mx-4 items-center rounded-3xl bg-[#1B1B26] px-6 py-6">
          <StorageDonut categories={categories} total={total} capacity={capacity} />
          <Text variant="small" className="mt-3 text-white/55">
            {total} of {capacity} used
          </Text>
          {/* Insight line — the donut answers "what's eating it", not just "how much". */}
          <Text className="mt-1 text-xs text-white/40">
            Photos &amp; media take the most space — down 12% this month
          </Text>
        </Mount>

        <List inset>
          <List.Section title="Storage">
            {categories.map((c, ii) => (
              <React.Fragment key={c.id}>
                {ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
                <List.Item
                  title={c.label}
                  leading={<RowIcon name={c.icon} tone={c.tone} />}
                  trailing={
                    <View className="flex-row items-center gap-2">
                      <View
                        className="h-2.5 w-2.5 rounded-full"
                        style={{ backgroundColor: TONE_HEX[c.tone] }}
                        accessibilityElementsHidden
                        importantForAccessibility="no"
                      />
                      <Text variant="small" className="w-14 text-right tabular-nums text-muted-foreground">
                        {c.size}
                      </Text>
                    </View>
                  }
                  showChevron={false}
                  haptic="light"
                  onPress={() => onManage?.(c.id)}
                />
              </React.Fragment>
            ))}
          </List.Section>

          <List.Section title="Manage">
            <List.Item
              title="Clear cache"
              subtitle="Frees 0.5 GB — photos and documents stay"
              leading={<RowIcon name="trash" tone="red" />}
              haptic="medium"
              onPress={() => {
                haptics.warning();
                onClearCache?.();
              }}
            />
            <List.Separator className={SEPARATOR_INSET} />
            <List.Item
              title="Auto-remove downloads"
              subtitle="Offline files expire after 30 days"
              leading={<RowIcon name="clock" tone="orange" />}
              showChevron
              haptic="light"
            />
            <List.Separator className={SEPARATOR_INSET} />
            <List.Item
              title="Review large files"
              subtitle="5 items over 100 MB"
              leading={<RowIcon name="package" tone="purple" />}
              showChevron
              haptic="light"
            />
          </List.Section>
        </List>
      </ScrollView>
    </SafeAreaView>
  );
}
StorageDataScreen.displayName = "StorageDataScreen";
```

Screen: https://lumioui.dev/screens/core-storage-data