File Manager Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Icon, type IconName, List, SearchInput, Text } from "@lumioui/ui";
import { type IconTone, Mount, Press, RowIcon, SEPARATOR_INSET, World } from "../shared";

export interface FileItem {
  id: string;
  name: string;
  meta: string;
  icon: IconName;
  tint?: IconTone;
}

export interface FileManagerScreenProps {
  folder?: string;
  files?: FileItem[];
  onFilePress?: (id: string) => void;
  onBack?: () => void;
}

const DEFAULT_FILES: FileItem[] = [
  { id: "f1", name: "LumioUI proposal.pdf", meta: "2.4 MB · Today", icon: "file-text", tint: "blue" },
  { id: "f2", name: "Lisbon photos", meta: "128 items", icon: "image", tint: "green" },
  { id: "f3", name: "Invoice-2418.pdf", meta: "84 KB · Sep 20", icon: "file-text", tint: "orange" },
  { id: "f4", name: "Design tokens.fig", meta: "12 MB · Sep 18", icon: "grid", tint: "purple" },
  { id: "f5", name: "Voice memo 09-23.m4a", meta: "3:24 · Sep 17", icon: "music", tint: "red" },
];

/** File manager — search + file rows with type icons + sizes. */
export function FileManagerScreen({
  folder = "Documents",
  files = DEFAULT_FILES,
  onFilePress,
  onBack,
}: FileManagerScreenProps) {
  const insets = useSafeAreaInsets();
  const [query, setQuery] = React.useState("");

  const visible = query.trim()
    ? files.filter((f) => f.name.toLowerCase().includes(query.toLowerCase()))
    : files;

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View className="flex-row items-center gap-2 px-4 pb-1 pt-2">
        <Button
          variant="ghost"
          size="icon"
          haptic="light"
          onPress={() => onBack?.()}
          accessibilityLabel="Go back"
          className="-ml-2 h-10 w-10"
        >
          <Icon name="chevron-left" size="md" color="foreground" />
        </Button>
        <Text variant="h2" accessibilityRole="header">
          {folder}
        </Text>
        {/* Storage pressure — file managers surface the disk. */}
        <Text variant="muted" className="text-xs">
          128 GB · 74 GB free
        </Text>
      </View>

      <View className="px-4 pb-1">
        <SearchInput
          glass
          value={query}
          onChangeText={setQuery}
          placeholder="Search files"
          accessibilityLabel="Search files"
        />
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24, flexGrow: 1 }}
      >
        {/* Folder tiles — the places under this folder, iOS Files' grid
            idiom: folders are tiles, files are rows. */}
        <Mount className="flex-row gap-3 px-4 pb-2 pt-2">
          {[
            { name: "Lisbon photos", meta: "128 items", icon: "image", tint: "green" },
            { name: "Invoices", meta: "24 items", icon: "file-text", tint: "orange" },
            { name: "Voice memos", meta: "9 items", icon: "music", tint: "red" },
          ].map((f) => (
            <Press
              key={f.name}
              haptic="light"
              pressedScale={0.97}
              onPress={() => {}}
              accessibilityRole="button"
              accessibilityLabel={`Open folder ${f.name}, ${f.meta}`}
              className="flex-1 gap-2 overflow-hidden rounded-2xl bg-white p-4 dark:bg-[#1A1A20]"
            >
              <RowIcon name={f.icon as IconName} tone={f.tint as IconTone} />
              <View>
                <Text className="text-sm font-semibold" numberOfLines={1}>
                  {f.name}
                </Text>
                <Text variant="muted" className="text-xs">
                  {f.meta}
                </Text>
              </View>
            </Press>
          ))}
        </Mount>

        <Text
          variant="muted"
          className="px-6 pb-1 pt-2 text-xs font-semibold uppercase tracking-wider"
          accessibilityRole="header"
        >
          Files
        </Text>
        <Mount delay={60} className="mx-4 overflow-hidden rounded-2xl bg-white dark:bg-[#1A1A20]">
          {visible.map((f, i) => (
            <React.Fragment key={f.id}>
              {i > 0 && <List.Separator className={SEPARATOR_INSET} />}
              <List.Item
                title={f.name}
                subtitle={f.meta}
                leading={<RowIcon name={f.icon} tone={f.tint ?? "gray"} />}
                showChevron
                haptic="light"
                onPress={() => onFilePress?.(f.id)}
                className="py-2.5"
              />
            </React.Fragment>
          ))}
        </Mount>

        {/* Storage summary — bottom-anchored like the iOS Files footer. */}
        <View className="flex-1" />
        <Mount delay={120} className="mx-4 mt-6 gap-2 overflow-hidden rounded-2xl bg-white p-5 dark:bg-[#1A1A20]">
          <View className="flex-row items-center justify-between">
            <Text className="text-sm font-semibold">Storage</Text>
            <Text className="text-xs text-muted-foreground">14.7 GB of 64 GB used</Text>
          </View>
          <View className="h-1.5 overflow-hidden rounded-full bg-muted">
            <View className="h-full w-[23%] rounded-full bg-[#65A30D]" />
          </View>
        </Mount>
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
FileManagerScreen.displayName = "FileManagerScreen";

Recreate the "File Manager Screen" screen in React Native using LumioUI.

Goal: Files browser with search 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 productivity-file-manager
```

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

Native packages:
- @lumioui/ui@latest
- react-native-safe-area-context@*
- @lumioui/core@latest
- 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

### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×1

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

### `list` — Settings-style rows with separators and press feedback.
- imported but not rendered directly — likely used through a sibling or as a utility

### `search-input` — Search field with clear button, debounce, focus halo — plus a glass capsule mode that floats over content like iOS 26
- `<SearchInput>` ×1

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

## 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/productivity/file-manager.tsx` exporting FileManagerScreen. 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 { Button, Icon, type IconName, List, SearchInput, Text } from "@lumioui/ui";
import { type IconTone, Mount, Press, RowIcon, SEPARATOR_INSET, World } from "../shared";

export interface FileItem {
  id: string;
  name: string;
  meta: string;
  icon: IconName;
  tint?: IconTone;
}

export interface FileManagerScreenProps {
  folder?: string;
  files?: FileItem[];
  onFilePress?: (id: string) => void;
  onBack?: () => void;
}

const DEFAULT_FILES: FileItem[] = [
  { id: "f1", name: "LumioUI proposal.pdf", meta: "2.4 MB · Today", icon: "file-text", tint: "blue" },
  { id: "f2", name: "Lisbon photos", meta: "128 items", icon: "image", tint: "green" },
  { id: "f3", name: "Invoice-2418.pdf", meta: "84 KB · Sep 20", icon: "file-text", tint: "orange" },
  { id: "f4", name: "Design tokens.fig", meta: "12 MB · Sep 18", icon: "grid", tint: "purple" },
  { id: "f5", name: "Voice memo 09-23.m4a", meta: "3:24 · Sep 17", icon: "music", tint: "red" },
];

/** File manager — search + file rows with type icons + sizes. */
export function FileManagerScreen({
  folder = "Documents",
  files = DEFAULT_FILES,
  onFilePress,
  onBack,
}: FileManagerScreenProps) {
  const insets = useSafeAreaInsets();
  const [query, setQuery] = React.useState("");

  const visible = query.trim()
    ? files.filter((f) => f.name.toLowerCase().includes(query.toLowerCase()))
    : files;

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View className="flex-row items-center gap-2 px-4 pb-1 pt-2">
        <Button
          variant="ghost"
          size="icon"
          haptic="light"
          onPress={() => onBack?.()}
          accessibilityLabel="Go back"
          className="-ml-2 h-10 w-10"
        >
          <Icon name="chevron-left" size="md" color="foreground" />
        </Button>
        <Text variant="h2" accessibilityRole="header">
          {folder}
        </Text>
        {/* Storage pressure — file managers surface the disk. */}
        <Text variant="muted" className="text-xs">
          128 GB · 74 GB free
        </Text>
      </View>

      <View className="px-4 pb-1">
        <SearchInput
          glass
          value={query}
          onChangeText={setQuery}
          placeholder="Search files"
          accessibilityLabel="Search files"
        />
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24, flexGrow: 1 }}
      >
        {/* Folder tiles — the places under this folder, iOS Files' grid
            idiom: folders are tiles, files are rows. */}
        <Mount className="flex-row gap-3 px-4 pb-2 pt-2">
          {[
            { name: "Lisbon photos", meta: "128 items", icon: "image", tint: "green" },
            { name: "Invoices", meta: "24 items", icon: "file-text", tint: "orange" },
            { name: "Voice memos", meta: "9 items", icon: "music", tint: "red" },
          ].map((f) => (
            <Press
              key={f.name}
              haptic="light"
              pressedScale={0.97}
              onPress={() => {}}
              accessibilityRole="button"
              accessibilityLabel={`Open folder ${f.name}, ${f.meta}`}
              className="flex-1 gap-2 overflow-hidden rounded-2xl bg-white p-4 dark:bg-[#1A1A20]"
            >
              <RowIcon name={f.icon as IconName} tone={f.tint as IconTone} />
              <View>
                <Text className="text-sm font-semibold" numberOfLines={1}>
                  {f.name}
                </Text>
                <Text variant="muted" className="text-xs">
                  {f.meta}
                </Text>
              </View>
            </Press>
          ))}
        </Mount>

        <Text
          variant="muted"
          className="px-6 pb-1 pt-2 text-xs font-semibold uppercase tracking-wider"
          accessibilityRole="header"
        >
          Files
        </Text>
        <Mount delay={60} className="mx-4 overflow-hidden rounded-2xl bg-white dark:bg-[#1A1A20]">
          {visible.map((f, i) => (
            <React.Fragment key={f.id}>
              {i > 0 && <List.Separator className={SEPARATOR_INSET} />}
              <List.Item
                title={f.name}
                subtitle={f.meta}
                leading={<RowIcon name={f.icon} tone={f.tint ?? "gray"} />}
                showChevron
                haptic="light"
                onPress={() => onFilePress?.(f.id)}
                className="py-2.5"
              />
            </React.Fragment>
          ))}
        </Mount>

        {/* Storage summary — bottom-anchored like the iOS Files footer. */}
        <View className="flex-1" />
        <Mount delay={120} className="mx-4 mt-6 gap-2 overflow-hidden rounded-2xl bg-white p-5 dark:bg-[#1A1A20]">
          <View className="flex-row items-center justify-between">
            <Text className="text-sm font-semibold">Storage</Text>
            <Text className="text-xs text-muted-foreground">14.7 GB of 64 GB used</Text>
          </View>
          <View className="h-1.5 overflow-hidden rounded-full bg-muted">
            <View className="h-full w-[23%] rounded-full bg-[#65A30D]" />
          </View>
        </Mount>
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
FileManagerScreen.displayName = "FileManagerScreen";
```

Screen: https://lumioui.dev/screens/productivity-file-manager