# Activity Rings

Three goal rings in ink tones. Hover isolates one ring and its legend, and closing all three shows a success Badge.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/activity-rings
```

## Usage

```tsx
import { ActivityRings } from '@/components/fetaui/activity-rings'

export function Example() {
  return (
    <ActivityRings
      date="Thursday, Oct 29"
      rings={[
        { label: 'Move', value: 479, goal: 800, unit: 'cal', unitName: 'calories' },
        { label: 'Exercise', value: 42, goal: 30, unit: 'min', unitName: 'minutes' },
        { label: 'Stand', value: 6, goal: 12, unit: 'hr', unitName: 'hours' },
      ]}
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| rings | ActivityRing[] | Move, Exercise, Stand |
| title | ReactNode | Activity |
| date | ReactNode |  |
| active | number or null |  |
| defaultActive | number or null | null |
| onActiveChange | (active) => void |  |
| animated | boolean | true |

## When to use

- For daily goals that fill up, like movement, focus or habits.
- When three numbers matter together and each has a target.

## When not to use

- For values with no goal: use a chart.
- For more than three goals: the rings stop reading.

## Accessibility

- The rings carry a text summary like Move 479 of 800 calories.
- Legend rows are buttons with aria-pressed.
- Every value is also shown as text, so nothing relies on the tone of a ring.

## Motion

- Rings sweep from 12 o’clock in 800 ms, 80 ms apart, the first time they scroll into view.
- A ring past its goal draws a second lap on top, then settles.
- Hover fades the other rings to 25% in 150 ms and lifts the legend row to 5% ink.
- The success Badge pops in when every ring closes.
- With reduced motion, rings appear at their value.