## Weekly Bars (S—143)

A seven-day bar chart widget with a goal line, tap-to-inspect bars and an optional ghost of last week behind.

- URL: https://sundaeui.dev/components/weekly-bars
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/weekly-bars.json`
- Tags: weekly, goal, widget, bar-chart, activity, fitness

Bars rise in on mount; tapping one selects it and the header shows that day’s value against the goal. The goal line is dashed and labelled.
Compare overlays last week as outlined ghost bars so the difference reads without colours.

### Usage

```tsx
import { WeeklyBars } from '@/components/sundae/weekly-bars'

<WeeklyBars />
```

### Props

- `values` (`number[]`, required): Seven values, Monday first.
- `previous` (`number[]`): Last week’s values for comparison.
- `goal` (`number`): Goal line value.
- `unit` (`string`, default `'min'`): Unit label.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Habit, fitness, screen time and usage summaries.

### When not to use

- Long time series: use a line chart.

### Accessibility

- Bars are radio buttons labelled with day and value; the summary is announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next day