{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-kpi-01",
  "registryDependencies": [
    "https://dashboardblocks.com/r/animated-number.json",
    "https://dashboardblocks.com/r/kpi.json",
    "https://dashboardblocks.com/r/progress-bar.json",
    "https://dashboardblocks.com/r/trend.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/kpi/progress-kpi-01.tsx",
      "content": "'use client'\n\nimport { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'\nimport { ValueFormatter } from '@/registry/components/dashboardblocks/chart'\nimport { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'\nimport { ProgressBar } from '@/registry/components/dashboardblocks/progress-bar'\nimport { Trend } from '@/registry/components/dashboardblocks/trend'\n\nimport { CardDescription } from '@/components/ui/card'\n\ninterface ProgressKPI1Props {\n  trend: number\n  percentage: number\n  title: string\n  value: number\n  formatter?: ValueFormatter\n}\n\nconst exampleProps: ProgressKPI1Props = {\n  trend: 7.5,\n  percentage: 55,\n  title: 'Revenue',\n  value: 87500,\n  formatter: (value) => `$${value.toLocaleString()}`,\n}\n\nconst ProgressKPI1 = (props: ProgressKPI1Props) => {\n  const { trend, percentage, title, value, formatter } = props\n  return (\n    <KPI>\n      <KPIContent className='space-y-1'>\n        <div className='flex items-center justify-between'>\n          <CardDescription>{title}</CardDescription>\n          <Trend trend={trend} variant='badge' />\n        </div>\n        <KPIValue value={value} formatter={formatter} animated />\n        <div className='mt-4 space-y-1 text-sm text-muted-foreground'>\n          <div className='flex items-center justify-between'>\n            <span>\n              <span className='font-semibold text-foreground'>\n                <AnimatedNumber\n                  value={percentage}\n                  formatter={(value) => `${value.toLocaleString()}%`}\n                />\n              </span>{' '}\n              of monthly target\n            </span>\n            <span className='font-semibold text-foreground'>$100k</span>\n          </div>\n          <ProgressBar percentage={percentage} />\n        </div>\n      </KPIContent>\n    </KPI>\n  )\n}\n\nexport { ProgressKPI1, exampleProps as progressKpi1ExampleProps, type ProgressKPI1Props }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}