KpiTile

KPI summary tile — eyebrow label, large value, optional delta badge, optional sparkline.

import { KpiTile } from 'achery-ui'

<KpiTile
  label="Total Income"
  value="$4,200"
  delta="+$340 vs last month"
  deltaTone="positive"
  sparkData={[3200, 3500, 3800, 4200]}
  onClick={() => navigate('/income')}
/>

Prop	Type	Default	Notes
label	string	—	Eyebrow text above value
value	string	—	Pre-formatted value string
delta	string	—	Delta label shown as a Badge
deltaTone	'positive' | 'negative' | 'neutral'	'neutral'	Badge and Sparkline colour
sparkData	number[]	—	Passed to Sparkline
onClick	() => void	—	Makes tile a clickable <button>
className	string	—