Add StatusIndicator component (CUI-6)

[calebpanza]

Assignee: @calebpanza (caleb)

Summary

Adds the StatusIndicator primitive — a small round status dot in first-party semantic colors — per CUI-6.

StatusIndicator is a site-agnostic primitive (lives in app/ui/ alongside button, tooltip, separator). Color comes from the status prop (default | success | warning | destructive | info); size, ring, and position are driven entirely by className so the dot adapts to any context — avatars, filter chips, lists. Pass a one-off bg-* class for a custom hue.

Animation (review feedback)

• animation prop with two pre-configured motion states:
  • "pulse" — the dot fades in and out in place.
  • "radar" — the dot emits an expanding ring (a CSS ::before that inherits the dot's color and radius), like a sonar ping.
• Color transitions between statuses are animated via transition-colors on the dot, so changing status cross-fades the hue instead of snapping.
• Both motion states are disabled under prefers-reduced-motion. The animations are pure CSS (keyframes in app/app.css) — no JS/runtime cost, and the single-element API is preserved (radar uses a pseudo-element, so className still drives size/ring/position and one-off bg-* overrides).

Changes

• app/ui/status-indicator.tsx — the component; adds the animation prop (StatusAnimation = "pulse" | "radar") and transition-colors.
• app/app.css — added --success, --warning, --info theme tokens (light + dark) and their --color-* mappings (only --destructive existed before, so three of five statuses would have rendered invisibly). Also added the status-indicator-pulse / status-indicator-radar keyframes and reduced-motion guard.

Usage

<StatusIndicator status="success" />
<StatusIndicator status="warning" animation="pulse" />
<StatusIndicator status="info" animation="radar" className="size-3" />

Testing

• bun run lint — clean
• bun run typecheck — clean
• No test suite is configured in this repo.

Site-agnostic primitive; no showcase/registry gallery entry (those are reserved for published registry components under registry/bases/, matching how the other app/ui/ primitives are handled).

---

Tip: I will respond to comments that @ mention @cyrus-daymoon on this PR. You can also submit a review with all your feedback at once, and I will automatically wake up to address each comment.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
crescent-ui	Ready	Preview, Comment	Jun 29, 2026 3:00pm