Ticket Wallet Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { EmptyState, Glass, Icon, Text } from "@lumioui/ui";
import { LumioMark, Mount, Press, World } from "../shared";
import { useHaptic } from "@lumioui/core";

export interface Ticket {
  id: string;
  event: string;
  date: string;
  kind: "upcoming" | "past";
  barcode?: number[];
}

export interface TicketWalletScreenProps {
  tickets?: Ticket[];
  onTicketPress?: (id: string) => void;
  onBack?: () => void;
}

const CODE = [
  2, 4, 1, 3, 5, 2, 4, 1, 3, 5, 2, 4, 1, 5, 3, 2, 4, 1, 3, 5, 2, 4, 1, 3, 5, 4, 2, 1, 3, 5,
];

const DEFAULT_TICKETS: Ticket[] = [
  { id: "t1", event: "Lumio Design Meetup", date: "Thu, Oct 2", kind: "upcoming", barcode: CODE },
  { id: "t2", event: "TP 268 SFO → LIS", date: "Oct 3 · Seat 14A", kind: "upcoming", barcode: CODE },
  { id: "t3", event: "Fado at Clube de Fado", date: "Sep 28 · used", kind: "past", barcode: CODE },
];

/** Ticket wallet — upcoming/past ticket cards with barcodes. */
export function TicketWalletScreen({
  tickets = DEFAULT_TICKETS,
  onTicketPress,
  onBack,
}: TicketWalletScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();

  const upcoming = tickets.filter((t) => t.kind === "upcoming");
  const past = tickets.filter((t) => t.kind === "past");

  const card = (t: Ticket) => (
    <Press
      key={t.id}
      haptic="light"
      onPress={() => onTicketPress?.(t.id)}
      accessibilityLabel={`Ticket: ${t.event}`}
      accessibilityRole="button"
      className={`mx-4 mb-3 overflow-hidden rounded-3xl bg-card p-0 ${
        t.kind === "past" ? "opacity-60" : ""
      }`}
    >
      {/* Stub — event + date. */}
      <View className="flex-row items-center justify-between p-4">
        <Mount className="items-start gap-0.5">
          <Text className="text-sm font-semibold">{t.event}</Text>
          <Text className="text-xs text-muted-foreground">{t.date}</Text>
        </Mount>
        <Mount delay={60} className="h-9 w-9 items-center justify-center rounded-xl bg-primary/10">
          <Icon name="tag" size="sm" color="primary" />
        </Mount>
      </View>

      {/* Perforation — the ticket convention, notches and all. */}
      <View className="relative">
        <View className="mx-4 border-t border-dashed border-border" />
        <View className="absolute -left-3 -top-3 h-6 w-6 rounded-full bg-background" />
        <View className="absolute -right-3 -top-3 h-6 w-6 rounded-full bg-background" />
      </View>

      {/* Barcode — the scannable stub. Scanners need dark-on-light, so the
          strip keeps a fixed light pad instead of theme-inverting. */}
      <View className="items-center px-4 py-3">
        <Mount delay={120} className="h-16 w-full flex-row items-stretch justify-center gap-[1px] rounded-lg bg-white px-2 py-2">
          {(t.barcode ?? CODE).map((w, i) => (
            <View key={i} className="bg-neutral-900" style={{ width: w }} />
          ))}
        </Mount>
      </View>
    </Press>
  );

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
        <View className="flex-row items-center justify-between">
          <Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
            <Press
              haptic="light"
              onPress={() => onBack?.()}
              accessibilityRole="button"
              accessibilityLabel="Go back"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="chevron-left" size="md" color="foreground" />
            </Press>
          </Glass>
          <Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
            <Press
              haptic="light"
              onPress={() => haptics.light()}
              accessibilityRole="button"
              accessibilityLabel="Add ticket"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="plus" size="md" color="foreground" />
            </Press>
          </Glass>
        </View>
        <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
          <View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
            <Glass effect="regular" className="absolute inset-0 rounded-full" />
            <LumioMark size={18} />
            <Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
              Tickets
            </Text>
          </View>
        </View>
      </View>

      <Mount className="mt-14 pb-1 pt-1">
        <Text variant="muted" className="px-6 pb-1 text-xs">
          {upcoming.length} upcoming · next is this Friday
        </Text>
      </Mount>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
      >
        {upcoming.length > 0 && (
          <>
            <View className="px-4 pb-1 pt-2">
              <Text variant="h4">Upcoming</Text>
            </View>
            {upcoming.map(card)}
          </>
        )}
        {past.length > 0 && (
          <>
            <View className="px-4 pb-1 pt-3">
              <Text variant="h4">Past</Text>
            </View>
            {past.map(card)}
          </>
        )}
        {tickets.length === 0 && (
          <EmptyState
            icon={<Icon name="tag" size="lg" color="mutedForeground" />}
            title="No tickets yet"
            description="Tickets you save show up here."
            className="mt-10"
          />
        )}
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
TicketWalletScreen.displayName = "TicketWalletScreen";

Recreate the "Ticket Wallet Screen" screen in React Native using LumioUI.

Goal: Ticket cards with barcodes 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 misc-ticket-wallet
```

Or pull just the components: `npx lumioui add button empty-state 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

### `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

### `empty-state` — Illustrated placeholder with title, copy and action slot.
- `<EmptyState>` ×1

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

### `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/misc/ticket-wallet.tsx` exporting TicketWalletScreen. 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 { EmptyState, Glass, Icon, Text } from "@lumioui/ui";
import { LumioMark, Mount, Press, World } from "../shared";
import { useHaptic } from "@lumioui/core";

export interface Ticket {
  id: string;
  event: string;
  date: string;
  kind: "upcoming" | "past";
  barcode?: number[];
}

export interface TicketWalletScreenProps {
  tickets?: Ticket[];
  onTicketPress?: (id: string) => void;
  onBack?: () => void;
}

const CODE = [
  2, 4, 1, 3, 5, 2, 4, 1, 3, 5, 2, 4, 1, 5, 3, 2, 4, 1, 3, 5, 2, 4, 1, 3, 5, 4, 2, 1, 3, 5,
];

const DEFAULT_TICKETS: Ticket[] = [
  { id: "t1", event: "Lumio Design Meetup", date: "Thu, Oct 2", kind: "upcoming", barcode: CODE },
  { id: "t2", event: "TP 268 SFO → LIS", date: "Oct 3 · Seat 14A", kind: "upcoming", barcode: CODE },
  { id: "t3", event: "Fado at Clube de Fado", date: "Sep 28 · used", kind: "past", barcode: CODE },
];

/** Ticket wallet — upcoming/past ticket cards with barcodes. */
export function TicketWalletScreen({
  tickets = DEFAULT_TICKETS,
  onTicketPress,
  onBack,
}: TicketWalletScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();

  const upcoming = tickets.filter((t) => t.kind === "upcoming");
  const past = tickets.filter((t) => t.kind === "past");

  const card = (t: Ticket) => (
    <Press
      key={t.id}
      haptic="light"
      onPress={() => onTicketPress?.(t.id)}
      accessibilityLabel={`Ticket: ${t.event}`}
      accessibilityRole="button"
      className={`mx-4 mb-3 overflow-hidden rounded-3xl bg-card p-0 ${
        t.kind === "past" ? "opacity-60" : ""
      }`}
    >
      {/* Stub — event + date. */}
      <View className="flex-row items-center justify-between p-4">
        <Mount className="items-start gap-0.5">
          <Text className="text-sm font-semibold">{t.event}</Text>
          <Text className="text-xs text-muted-foreground">{t.date}</Text>
        </Mount>
        <Mount delay={60} className="h-9 w-9 items-center justify-center rounded-xl bg-primary/10">
          <Icon name="tag" size="sm" color="primary" />
        </Mount>
      </View>

      {/* Perforation — the ticket convention, notches and all. */}
      <View className="relative">
        <View className="mx-4 border-t border-dashed border-border" />
        <View className="absolute -left-3 -top-3 h-6 w-6 rounded-full bg-background" />
        <View className="absolute -right-3 -top-3 h-6 w-6 rounded-full bg-background" />
      </View>

      {/* Barcode — the scannable stub. Scanners need dark-on-light, so the
          strip keeps a fixed light pad instead of theme-inverting. */}
      <View className="items-center px-4 py-3">
        <Mount delay={120} className="h-16 w-full flex-row items-stretch justify-center gap-[1px] rounded-lg bg-white px-2 py-2">
          {(t.barcode ?? CODE).map((w, i) => (
            <View key={i} className="bg-neutral-900" style={{ width: w }} />
          ))}
        </Mount>
      </View>
    </Press>
  );

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
        <View className="flex-row items-center justify-between">
          <Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
            <Press
              haptic="light"
              onPress={() => onBack?.()}
              accessibilityRole="button"
              accessibilityLabel="Go back"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="chevron-left" size="md" color="foreground" />
            </Press>
          </Glass>
          <Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
            <Press
              haptic="light"
              onPress={() => haptics.light()}
              accessibilityRole="button"
              accessibilityLabel="Add ticket"
              className="h-9 w-9 items-center justify-center"
            >
              <Icon name="plus" size="md" color="foreground" />
            </Press>
          </Glass>
        </View>
        <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
          <View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
            <Glass effect="regular" className="absolute inset-0 rounded-full" />
            <LumioMark size={18} />
            <Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
              Tickets
            </Text>
          </View>
        </View>
      </View>

      <Mount className="mt-14 pb-1 pt-1">
        <Text variant="muted" className="px-6 pb-1 text-xs">
          {upcoming.length} upcoming · next is this Friday
        </Text>
      </Mount>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
      >
        {upcoming.length > 0 && (
          <>
            <View className="px-4 pb-1 pt-2">
              <Text variant="h4">Upcoming</Text>
            </View>
            {upcoming.map(card)}
          </>
        )}
        {past.length > 0 && (
          <>
            <View className="px-4 pb-1 pt-3">
              <Text variant="h4">Past</Text>
            </View>
            {past.map(card)}
          </>
        )}
        {tickets.length === 0 && (
          <EmptyState
            icon={<Icon name="tag" size="lg" color="mutedForeground" />}
            title="No tickets yet"
            description="Tickets you save show up here."
            className="mt-10"
          />
        )}
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
TicketWalletScreen.displayName = "TicketWalletScreen";
```

Screen: https://lumioui.dev/screens/misc-ticket-wallet