Overview Selector

Installation

pnpm dlx shadcn@latest add @ffg/overview-selector

Usage

import { OverviewSelector } from "@/components/ui/overview-selector";

<OverviewSelector
  scope={scope}
  selectedCircles={selectedCircles}
  onScopeChange={setScope}
  onCirclesChange={setSelectedCircles}
  circles={GIVING_CIRCLES}
/>

A controlled scope selector that drives scope = "you" | "circle" | "factory". Three chips:

• Your impact / Factory impact — toggle-group chips; selecting one closes the dropdown and clears the circle selection
• Giving circles — opens a multi-select dropdown of the user's circles; picking a circle activates the circle scope, clearing the last one falls back to you so the view never shows an empty state

The chip label swaps between Giving circles and N selected. The dropdown closes on click-outside or Escape.

Dark mode: the active chip maps to the --primary token pair so it inverts correctly; chip and menu borders use the faint border token, hover uses the strong divider, and the menu surface uses the card token so it stays legible against either background.