{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "donut-chart",
  "title": "Donut Chart",
  "description": "Pie chart with center hole for KPI display, supports center content slot",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "@boldkit/utils",
    "@boldkit/chart"
  ],
  "files": [
    {
      "path": "registry/default/ui/donut-chart.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Pie, PieChart, Cell, Label } from 'recharts'\nimport { ChartContainer } from './chart'\nimport { ChartEmpty } from './chart'\nimport { ChartTooltip, ChartTooltipContent } from './chart'\nimport type { ChartConfig } from './chart'\n\nexport interface DonutChartData {\n  name: string\n  value: number\n  fill?: string\n}\n\nexport interface DonutChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: DonutChartData[]\n  config: ChartConfig\n  innerRadius?: string | number\n  outerRadius?: string | number\n  centerContent?: React.ReactNode\n  showLabels?: 'none' | 'inside' | 'outside'\n  variant?: 'default' | 'separated'\n  showTooltip?: boolean\n  animated?: boolean\n  emptyState?: React.ReactNode\n}\n\nconst DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(\n  (\n    {\n      data,\n      config,\n      innerRadius = '60%',\n      outerRadius = '80%',\n      centerContent,\n      showLabels = 'none',\n      variant = 'default',\n      showTooltip = true,\n      animated = true,\n      emptyState,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    if (!data || data.length === 0) {\n      return <ChartEmpty ref={ref} message={emptyState} className={className} {...props} />\n    }\n\n    const paddingAngle = variant === 'separated' ? 4 : 0\n\n    return (\n      <ChartContainer\n        ref={ref}\n        config={config}\n        className={cn('aspect-square max-h-[300px]', className)}\n        {...props}\n      >\n        <PieChart>\n          {showTooltip && (\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n          )}\n          <Pie\n            data={data}\n            dataKey=\"value\"\n            nameKey=\"name\"\n            cx=\"50%\"\n            cy=\"50%\"\n            innerRadius={innerRadius}\n            outerRadius={outerRadius}\n            paddingAngle={paddingAngle}\n            strokeWidth={3}\n            stroke=\"hsl(var(--foreground))\"\n            isAnimationActive={animated}\n            animationDuration={400}\n            label={\n              showLabels === 'outside'\n                ? ({ name, percent }: { name?: string; percent?: number }) => `${name ?? ''}: ${((percent ?? 0) * 100).toFixed(0)}%`\n                : showLabels === 'inside'\n                ? ({ percent }: { percent?: number }) => `${((percent ?? 0) * 100).toFixed(0)}%`\n                : false\n            }\n            labelLine={showLabels === 'outside'}\n          >\n            {data.map((entry, index) => (\n              <Cell\n                key={`cell-${index}`}\n                fill={entry.fill || `hsl(var(--chart-${(index % 5) + 1}))`}\n              />\n            ))}\n            {centerContent && (\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {\n                    const pieView = viewBox as { cx: number; cy: number; innerRadius?: number; outerRadius?: number }\n                    const ir = pieView.innerRadius ?? (typeof innerRadius === 'number' ? innerRadius : 60)\n                    const fwHalf = Math.max(40, ir * 0.85)\n                    const fhHalf = Math.max(25, ir * 0.55)\n                    return (\n                      <foreignObject\n                        x={(pieView.cx || 0) - fwHalf}\n                        y={(pieView.cy || 0) - fhHalf}\n                        width={fwHalf * 2}\n                        height={fhHalf * 2}\n                      >\n                        <div className=\"flex h-full w-full items-center justify-center\">\n                          {centerContent}\n                        </div>\n                      </foreignObject>\n                    )\n                  }\n                  return null\n                }}\n              />\n            )}\n          </Pie>\n        </PieChart>\n      </ChartContainer>\n    )\n  }\n)\nDonutChart.displayName = 'DonutChart'\n\n// Helper component for common center content pattern\nexport interface DonutChartCenterProps {\n  value: string | number\n  label?: string\n  className?: string\n}\n\nconst DonutChartCenter = React.forwardRef<HTMLDivElement, DonutChartCenterProps>(\n  ({ value, label, className }, ref) => {\n    return (\n      <div ref={ref} className={cn('text-center', className)}>\n        <div className=\"text-2xl font-black\">{value}</div>\n        {label && (\n          <div className=\"text-xs font-bold uppercase tracking-wide text-muted-foreground\">\n            {label}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nDonutChartCenter.displayName = 'DonutChartCenter'\n\nexport { DonutChart, DonutChartCenter }\n",
      "type": "registry:ui",
      "target": "components/ui/donut-chart.tsx"
    }
  ],
  "type": "registry:ui"
}