fma-ds

Glance

A quick piece of information that opens more context one click away — an account notice, a balance, a count of pending items.

OverlayoriginalMITexperimentalChangelogRegistry JSON

Overview

Glance wraps react-aria's DialogTrigger and shares a tone (default, info, success, warning, destructive) with its parts.

  • `GlanceTrigger`: the compact button — an icon plus GlanceText (a GlanceLabel caption over a GlanceValue), or icon-only with size="icon" and an aria-label.
  • `GlanceIndicator`: pins a dot or count to the trigger's corner.
  • `GlanceContent`: a popover holding a dialog (focus moves in, Escape closes, focus returns), laid out with GlanceHeader, GlanceMedia (an IconTile in the tone), GlanceTitle, GlanceDescription and GlanceFooter. Its children can be a function of { close }, to close it from an action.

Tone tints the trigger like Alert, with no motion — urgency comes from tone and wording.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/glance

    Files land in components/fma-ds/glance.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
class-variance-authority@^0.7.1cn@^0.5.0react-aria-components@^1.22.1