{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radar-chart",
  "title": "Radar Chart",
  "description": "Multi-variable comparison chart for skills, metrics, and feature comparisons",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "@boldkit/utils",
    "@boldkit/chart"
  ],
  "files": [
    {
      "path": "registry/default/ui/radar-chart.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport {\n  Radar,\n  RadarChart as RechartsRadarChart,\n  PolarGrid,\n  PolarAngleAxis,\n  PolarRadiusAxis,\n} from 'recharts'\nimport { ChartContainer, type ChartContainerProps } from './chart'\nimport { ChartEmpty } from './chart'\nimport { ChartTooltip, ChartTooltipContent } from './chart'\nimport { ChartLegend, ChartLegendContent } from './chart'\nimport type { ChartConfig } from './chart'\n\nexport interface RadarChartData {\n  subject: string\n  [key: string]: number | string\n}\n\nexport interface RadarChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: RadarChartData[]\n  dataKeys: string[]\n  config: ChartConfig\n  variant?: 'default' | 'filled' | 'outlined'\n  /** Container border/shadow style — `variant` here is the chart geometry. */\n  containerVariant?: ChartContainerProps['variant']\n  showLegend?: boolean\n  showGrid?: boolean\n  showTooltip?: boolean\n  fillOpacity?: number\n  animated?: boolean\n  emptyState?: React.ReactNode\n}\n\nconst RadarChartComponent = React.forwardRef<HTMLDivElement, RadarChartProps>(\n  (\n    {\n      data,\n      dataKeys,\n      config,\n      variant = 'default',\n      containerVariant,\n      showLegend = true,\n      showGrid = true,\n      showTooltip = true,\n      fillOpacity = 0.6,\n      animated = true,\n      emptyState,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    if (!data || data.length === 0 || !dataKeys || dataKeys.length === 0) {\n      return <ChartEmpty ref={ref} message={emptyState} className={className} {...props} />\n    }\n\n    const getRadarProps = (index: number, key: string) => {\n      const baseColor = config[key]?.color || `hsl(var(--chart-${(index % 5) + 1}))`\n\n      switch (variant) {\n        case 'outlined':\n          return {\n            fill: 'transparent',\n            fillOpacity: 0,\n            stroke: baseColor,\n            strokeWidth: 3,\n          }\n        case 'filled':\n          return {\n            fill: baseColor,\n            fillOpacity: fillOpacity,\n            stroke: 'hsl(var(--foreground))',\n            strokeWidth: 3,\n          }\n        default:\n          return {\n            fill: baseColor,\n            fillOpacity: fillOpacity,\n            stroke: 'hsl(var(--foreground))',\n            strokeWidth: 3,\n          }\n      }\n    }\n\n    return (\n      <ChartContainer\n        ref={ref}\n        config={config}\n        variant={containerVariant}\n        className={cn('aspect-square max-h-[300px]', className)}\n        {...props}\n      >\n        <RechartsRadarChart cx=\"50%\" cy=\"50%\" outerRadius=\"80%\" data={data}>\n          {showGrid && (\n            <PolarGrid\n              stroke=\"hsl(var(--foreground))\"\n              strokeWidth={2}\n              strokeDasharray=\"none\"\n            />\n          )}\n          <PolarAngleAxis\n            dataKey=\"subject\"\n            tick={{\n              fill: 'hsl(var(--foreground))',\n              fontWeight: 700,\n              fontSize: 12,\n            }}\n            stroke=\"hsl(var(--foreground))\"\n            strokeWidth={2}\n          />\n          <PolarRadiusAxis\n            angle={90}\n            domain={[0, 'dataMax']}\n            tick={{\n              fill: 'hsl(var(--muted-foreground))',\n              fontSize: 10,\n            }}\n            axisLine={false}\n          />\n          {showTooltip && (\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent />}\n            />\n          )}\n          {dataKeys.map((key, index) => (\n            <Radar\n              key={key}\n              name={typeof config[key]?.label === 'string' ? config[key].label : key}\n              dataKey={key}\n              {...getRadarProps(index, key)}\n              isAnimationActive={animated}\n              animationDuration={400}\n              dot={{\n                r: 4,\n                fill: config[key]?.color || `hsl(var(--chart-${(index % 5) + 1}))`,\n                stroke: 'hsl(var(--foreground))',\n                strokeWidth: 2,\n              }}\n            />\n          ))}\n          {showLegend && (\n            <ChartLegend content={<ChartLegendContent />} />\n          )}\n        </RechartsRadarChart>\n      </ChartContainer>\n    )\n  }\n)\nRadarChartComponent.displayName = 'RadarChart'\n\nexport { RadarChartComponent as RadarChart }\n",
      "type": "registry:ui",
      "target": "components/ui/radar-chart.tsx"
    }
  ],
  "type": "registry:ui"
}