Dynamic Action

Installation

pnpm dlx shadcn@latest add @ffg/dynamic-action

Usage

import { DynamicAction } from "@/components/ui/dynamic-action";

<DynamicAction
  enabled
  confirmedAmount={250000}
  onAmountConfirm={(amount) => save(amount)}
/>

The annual-giving card from the dashboard hero. The amount steps through fixed stops via the carousel (◂ / ▸), or a custom value can be typed and applied with Update. Each confirmed amount is reported up through onAmountConfirm.

• carousel — steps between fixed giving stops; at the min/max boundary the matching nav reads as disabled and toasts a hint to use the custom field
• decrease guard — the first decrease click arms the control and toasts a nudge; a second click within 3s actually steps down
• custom amount — typed value applied with Update or the Enter key

Props:

• enabled — when false, renders nothing (defaults to true)
• onAmountConfirm — called with the confirmed amount on every commit
• confirmedAmount — the externally tracked confirmed amount

Dark mode: the card and inputs use transparent fills over border-border; the value and labels map to the foreground / muted-foreground pair and the Update button maps to --primary, so the whole card inverts correctly in dark mode.