@zeeptech/zeepfly-react

ZeepFly design system — React component library. Dark glass-cockpit UI kit: deep navy, blue→cyan primary, Space Grotesk voice + IBM Plex Mono data, and "game feel by context" (reward moments get full juice; analysis surfaces stay calm).

Source of truth: ../zeepfly-design-system/ (skill assets extracted from the ZeepFly.dc.html prototype). Token values here are copied verbatim.

Install

npm install @zeeptech/zeepfly-react

Peer deps: react >= 18, react-dom >= 18.

Usage

import '@zeeptech/zeepfly-react/styles.css'; // tokens + fonts + keyframes — required once, app entry
import { Button, Card, StatCard, ProgressBar, Modal } from '@zeeptech/zeepfly-react';

export function Dashboard() {
  return (
    <Card>
      <StatCard label="FLIGHT HOURS" value="128.4" unit="h" delta="+6.2 this week" />
      <ProgressBar label="XP" value={82} valueLabel="82%" />
      <Button icon="flight_takeoff" pulse>Start flight</Button>
    </Card>
  );
}

styles.css carries the CSS custom properties (--gradient-primary, --radius-full, …), the zf* keyframes, the .msr icon helper, and the Google Fonts imports (Space Grotesk, IBM Plex Mono, Material Symbols Rounded). Components read tokens via var(...) — without the CSS import they render unstyled.

Individual token layers are also exported: @zeeptech/zeepfly-react/tokens/colors.css, etc.

Components

| Group | Components | |---|---| | forms | Button, Input, Switch, SegmentedControl, Chip | | display | Card, StatCard, Avatar, Badge, LandingScoreBadge, CurrencyPill, RewardChip | | feedback | ProgressBar, Toast, BurstRing, ShimmerText | | navigation | NavItem | | overlays | Modal |

Icon props (icon="flight") take Material Symbols Rounded glyph names.

Brand rules baked in

• Interactive elements are pills (999px); containers are soft rects (14–24px).
• Every number, ICAO, callsign and money value renders in IBM Plex Mono.
• Colored glows, not gray shadows. Slate-blue text ramp, never pure white/gray.
• ZC$ green, ZP$ purple, achievement gold, alerts red.
• Reserve pulse, BurstRing, ShimmerText and variant="celebration" for reward moments.

Development

npm install
npm run build      # tsup → dist/ (ESM + CJS + d.ts) + CSS copy
npm run typecheck
npm test           # vitest + testing-library (jsdom)

Caveats (inherited from the DS)

• Fonts load from Google CDN — self-host for offline/production hardening.
• No official logo; the "Z" tile in designs is a placeholder.