{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-kpi-03",
  "registryDependencies": [
    "https://dashboardblocks.com/r/animated-number.json",
    "https://dashboardblocks.com/r/kpi.json",
    "https://dashboardblocks.com/r/ring.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/kpi/progress-kpi-03.tsx",
      "content": "'use client'\n\nimport { AnimatedNumber } from '@/registry/components/dashboardblocks/animated-number'\nimport { KPI, KPIContent, KPIValue } from '@/registry/components/dashboardblocks/kpi'\nimport { Ring } from '@/registry/components/dashboardblocks/ring'\n\nimport { CardDescription, CardTitle } from '@/components/ui/card'\n\ninterface ProgressKPI3Props {\n  current: number\n  goal: number\n  title: string\n  unit: string\n}\n\nconst exampleProps: ProgressKPI3Props = {\n  current: 7500,\n  goal: 10000,\n  title: 'Monthly Goal',\n  unit: 'sales',\n}\n\nconst ProgressKPI3 = (props: ProgressKPI3Props) => {\n  const { current, goal, title, unit } = props\n  const percentage = Math.min(100, Math.max(0, (current / goal) * 100))\n\n  return (\n    <KPI>\n      <KPIContent>\n        <div className='grid grid-cols-2 gap-4'>\n          <div className='flex items-center justify-between'>\n            <div className='space-y-4'>\n              <CardTitle>{title}</CardTitle>\n              <div className='space-y-1'>\n                <KPIValue className='text-2xl' value={current} animated />\n                <CardDescription>\n                  of {goal.toLocaleString()} {unit}\n                </CardDescription>\n              </div>\n            </div>\n          </div>\n          <div className='flex items-center justify-center'>\n            <Ring\n              className='h-24 w-24 sm:h-36 sm:w-36 shrink-0'\n              percentage={percentage}\n              ringColor='var(--color-chart-1)'\n            >\n              <AnimatedNumber\n                className='text-lg font-bold'\n                value={percentage}\n                formatter={(value) => `${value.toLocaleString()}%`}\n              />\n            </Ring>\n          </div>\n        </div>\n      </KPIContent>\n    </KPI>\n  )\n}\n\nexport { ProgressKPI3, exampleProps as progressKpi3ExampleProps, type ProgressKPI3Props }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}