Reminders 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, Switch, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { type IconTone, Mount, RowIcon, SEPARATOR_INSET, World } from "../shared";

export interface Reminder {
  id: string;
  title: string;
  when: string;
  icon: IconName;
  tint?: IconTone;
  enabled?: boolean;
}

export interface RemindersScreenProps {
  reminders?: Reminder[];
  onToggle?: (id: string, on: boolean) => void;
  onBack?: () => void;
}

const DEFAULT_REMINDERS: Reminder[] = [
  { id: "r1", title: "Take medication", when: "Every day · 8:00 AM", icon: "bell", tint: "red", enabled: true },
  { id: "r2", title: "Water the plants", when: "Tue, Thu, Sat · 7:00 PM", icon: "wheat", tint: "green", enabled: true },
  { id: "r3", title: "Flight check-in", when: "Oct 2 · 8:15 PM", icon: "plane", tint: "blue", enabled: true },
  { id: "r4", title: "Submit expenses", when: "Last Friday of month", icon: "file-text", tint: "purple" },
  { id: "r5", title: "Call mom", when: "Sundays · 6:00 PM", icon: "phone", tint: "teal", enabled: true },
  { id: "r6", title: "Renew passport", when: "Oct 28", icon: "calendar", tint: "orange", enabled: true },
  { id: "r7", title: "Pick up dry cleaning", when: "Friday · after 5 PM", icon: "package", tint: "gray" },
  { id: "r8", title: "Book club — chapter 12", when: "Wednesday · 7:30 PM", icon: "book-open", tint: "blue", enabled: true },
  { id: "r9", title: "Charge e-bike", when: "Every Sunday night", icon: "zap", tint: "green" },
];

/** Reminders — toggleable alarm-style rows with schedule lines. */
export function RemindersScreen({
  reminders = DEFAULT_REMINDERS,
  onToggle,
  onBack,
}: RemindersScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [onSet, setOnSet] = React.useState<Set<string>>(
    () => new Set(reminders.filter((r) => r.enabled).map((r) => r.id)),
  );

  const next = reminders.find((r) => onSet.has(r.id));

  const toggle = (id: string) => {
    const next = !onSet.has(id);
    haptics.selection();
    setOnSet((s) => {
      const ns = new Set(s);
      if (next) ns.add(id);
      else ns.delete(id);
      return ns;
    });
    onToggle?.(id, next);
  };

  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>
        </View>

      <Mount>
        <Text variant="h2" accessibilityRole="header" className="px-6 pb-1 tracking-tight">
          Reminders
        </Text>
        {/* Due-today line — reminders lead with what's burning. */}
        <Text variant="muted" className="px-6 pb-1 text-xs">
          3 due today · 1 overdue
        </Text>
      </Mount>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
      >
        {/* Next-up hero — the soonest armed reminder gets the stage; the
            toggle list below manages the rest. */}
        {next ? (
          <Mount className="mx-4 mb-3 flex-row items-center gap-3 rounded-3xl bg-[#1B1B26] p-4">
            <View className="h-11 w-11 items-center justify-center rounded-2xl bg-[#BEF04C]/15">
              <Icon name={next.icon} size="md" color="#BEF04C" />
            </View>
            <View className="flex-1">
              <Text className="text-[10px] font-semibold uppercase tracking-widest text-white/70">
                Up next
              </Text>
              <Text className="font-semibold text-white">{next.title}</Text>
              <Text className="text-xs text-white/70">{next.when}</Text>
            </View>
            <Text className="text-2xl font-bold tabular-nums text-white/90">
              {onSet.size}
              <Text className="text-xs font-medium text-white/60"> armed</Text>
            </Text>
          </Mount>
        ) : null}

        <Mount delay={60} className="mx-4 overflow-hidden rounded-3xl bg-white dark:bg-[#1A1A20]">
          {reminders.map((r, i) => {
            const on = onSet.has(r.id);
            return (
              <React.Fragment key={r.id}>
                {i > 0 && <List.Separator className={SEPARATOR_INSET} />}
                <List.Item
                  title={r.title}
                  titleClassName={on ? undefined : "text-muted-foreground"}
                  subtitle={r.when}
                  leading={<RowIcon name={r.icon} tone={r.tint ?? "gray"} />}
                  trailing={
                    <Switch
                      checked={on}
                      onCheckedChange={() => toggle(r.id)}
                      accessibilityLabel={`Remind me: ${r.title}`}
                    />
                  }
                  className="py-3"
                />
              </React.Fragment>
            );
          })}
        </Mount>

        {/* New reminder — quiet affordance at the foot. */}
        <Mount delay={60} className="mx-4 mt-3">
          <Button
            variant="secondary"
            haptic="light"
            onPress={() => haptics.light()}
            accessibilityLabel="New reminder"
            className="h-11 w-full"
          >
            <Icon name="plus" size="sm" color="foreground" />
            <Text className="ml-1.5">New reminder</Text>
          </Button>
        </Mount>
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
RemindersScreen.displayName = "RemindersScreen";

Recreate the "Reminders Screen" screen in React Native using LumioUI.

Goal: Toggleable reminder alarms 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-reminders
```

Or pull just the components: `npx lumioui add button icon list switch 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

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

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

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

### `switch` — iOS-size toggle with spring thumb and haptics.
- `<Switch>` ×1

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

## 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/reminders.tsx` exporting RemindersScreen. 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, Switch, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { type IconTone, Mount, RowIcon, SEPARATOR_INSET, World } from "../shared";

export interface Reminder {
  id: string;
  title: string;
  when: string;
  icon: IconName;
  tint?: IconTone;
  enabled?: boolean;
}

export interface RemindersScreenProps {
  reminders?: Reminder[];
  onToggle?: (id: string, on: boolean) => void;
  onBack?: () => void;
}

const DEFAULT_REMINDERS: Reminder[] = [
  { id: "r1", title: "Take medication", when: "Every day · 8:00 AM", icon: "bell", tint: "red", enabled: true },
  { id: "r2", title: "Water the plants", when: "Tue, Thu, Sat · 7:00 PM", icon: "wheat", tint: "green", enabled: true },
  { id: "r3", title: "Flight check-in", when: "Oct 2 · 8:15 PM", icon: "plane", tint: "blue", enabled: true },
  { id: "r4", title: "Submit expenses", when: "Last Friday of month", icon: "file-text", tint: "purple" },
  { id: "r5", title: "Call mom", when: "Sundays · 6:00 PM", icon: "phone", tint: "teal", enabled: true },
  { id: "r6", title: "Renew passport", when: "Oct 28", icon: "calendar", tint: "orange", enabled: true },
  { id: "r7", title: "Pick up dry cleaning", when: "Friday · after 5 PM", icon: "package", tint: "gray" },
  { id: "r8", title: "Book club — chapter 12", when: "Wednesday · 7:30 PM", icon: "book-open", tint: "blue", enabled: true },
  { id: "r9", title: "Charge e-bike", when: "Every Sunday night", icon: "zap", tint: "green" },
];

/** Reminders — toggleable alarm-style rows with schedule lines. */
export function RemindersScreen({
  reminders = DEFAULT_REMINDERS,
  onToggle,
  onBack,
}: RemindersScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [onSet, setOnSet] = React.useState<Set<string>>(
    () => new Set(reminders.filter((r) => r.enabled).map((r) => r.id)),
  );

  const next = reminders.find((r) => onSet.has(r.id));

  const toggle = (id: string) => {
    const next = !onSet.has(id);
    haptics.selection();
    setOnSet((s) => {
      const ns = new Set(s);
      if (next) ns.add(id);
      else ns.delete(id);
      return ns;
    });
    onToggle?.(id, next);
  };

  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>
        </View>

      <Mount>
        <Text variant="h2" accessibilityRole="header" className="px-6 pb-1 tracking-tight">
          Reminders
        </Text>
        {/* Due-today line — reminders lead with what's burning. */}
        <Text variant="muted" className="px-6 pb-1 text-xs">
          3 due today · 1 overdue
        </Text>
      </Mount>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
      >
        {/* Next-up hero — the soonest armed reminder gets the stage; the
            toggle list below manages the rest. */}
        {next ? (
          <Mount className="mx-4 mb-3 flex-row items-center gap-3 rounded-3xl bg-[#1B1B26] p-4">
            <View className="h-11 w-11 items-center justify-center rounded-2xl bg-[#BEF04C]/15">
              <Icon name={next.icon} size="md" color="#BEF04C" />
            </View>
            <View className="flex-1">
              <Text className="text-[10px] font-semibold uppercase tracking-widest text-white/70">
                Up next
              </Text>
              <Text className="font-semibold text-white">{next.title}</Text>
              <Text className="text-xs text-white/70">{next.when}</Text>
            </View>
            <Text className="text-2xl font-bold tabular-nums text-white/90">
              {onSet.size}
              <Text className="text-xs font-medium text-white/60"> armed</Text>
            </Text>
          </Mount>
        ) : null}

        <Mount delay={60} className="mx-4 overflow-hidden rounded-3xl bg-white dark:bg-[#1A1A20]">
          {reminders.map((r, i) => {
            const on = onSet.has(r.id);
            return (
              <React.Fragment key={r.id}>
                {i > 0 && <List.Separator className={SEPARATOR_INSET} />}
                <List.Item
                  title={r.title}
                  titleClassName={on ? undefined : "text-muted-foreground"}
                  subtitle={r.when}
                  leading={<RowIcon name={r.icon} tone={r.tint ?? "gray"} />}
                  trailing={
                    <Switch
                      checked={on}
                      onCheckedChange={() => toggle(r.id)}
                      accessibilityLabel={`Remind me: ${r.title}`}
                    />
                  }
                  className="py-3"
                />
              </React.Fragment>
            );
          })}
        </Mount>

        {/* New reminder — quiet affordance at the foot. */}
        <Mount delay={60} className="mx-4 mt-3">
          <Button
            variant="secondary"
            haptic="light"
            onPress={() => haptics.light()}
            accessibilityLabel="New reminder"
            className="h-11 w-full"
          >
            <Icon name="plus" size="sm" color="foreground" />
            <Text className="ml-1.5">New reminder</Text>
          </Button>
        </Mount>
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
RemindersScreen.displayName = "RemindersScreen";
```

Screen: https://lumioui.dev/screens/productivity-reminders