{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "donut-chart",
  "title": "Donut chart",
  "description": "ring + legend",
  "dependencies": [
    "react-native-svg@15.15.4"
  ],
  "registryDependencies": [
    "@kit-native/lib-palette-context",
    "@kit-native/lib-theme",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/donut-chart.tsx",
      "content": "import { Text } from '@/components/ui/text';\nimport { usePalette } from '@/lib/palette-context';\nimport { type ThemeColorName } from '@/lib/theme';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport Svg, { Circle } from 'react-native-svg';\n\nexport type DonutSlice = { label: string; value: number; /** Palette colour name; defaults cycle chart1..5. */ color?: ThemeColorName };\n\ntype Props = { data: DonutSlice[]; size?: number; strokeWidth?: number; children?: React.ReactNode; className?: string };\n\nconst PALETTE: ThemeColorName[] = ['chart1', 'chart2', 'chart3', 'chart4', 'chart5'];\n\n/** Ring chart. Put a total in the centre via children; pair with ChartLegend. */\nexport function DonutChart({ data, size = 160, strokeWidth = 22, children, className }: Props) {\n  const colors = usePalette();\n  const total = data.reduce((n, d) => n + d.value, 0) || 1;\n  const r = (size - strokeWidth) / 2;\n  const c = 2 * Math.PI * r;\n  const half = size / 2;\n  const offsets = data.reduce<number[]>((acc, d, i) => [...acc, (acc[i - 1] ?? 0) + (i > 0 ? data[i - 1].value : 0)], []).map((_, i) => data.slice(0, i).reduce((n, d) => n + d.value, 0));\n  return (\n    <View className={cn('items-center justify-center', className)} style={{ width: size, height: size }}>\n      <Svg width={size} height={size} style={{ position: 'absolute' }}>\n        <Circle cx={half} cy={half} r={r} stroke={colors.muted} strokeWidth={strokeWidth} fill=\"none\" />\n        {data.map((d, i) => {\n          const seg = (d.value / total) * c;\n          const rotation = -90 + (offsets[i] / total) * 360;\n          return (\n            <Circle key={`${d.label}-${i}`} cx={half} cy={half} r={r} stroke={colors[d.color ?? PALETTE[i % PALETTE.length]]} strokeWidth={strokeWidth} fill=\"none\" strokeDasharray={`${seg} ${c}`} transform={`rotate(${rotation} ${half} ${half})`} />\n          );\n        })}\n      </Svg>\n      {children}\n    </View>\n  );\n}\n\n/** Legend rows for a DonutChart (or any series). */\nexport function ChartLegend({ data, className }: { data: DonutSlice[]; className?: string }) {\n  const colors = usePalette();\n  const total = data.reduce((n, d) => n + d.value, 0) || 1;\n  return (\n    <View className={cn('gap-2', className)}>\n      {data.map((d, i) => (\n        <View key={`${d.label}-${i}`} className=\"flex-row items-center gap-2\">\n          <View className=\"size-2.5 rounded-full\" style={{ backgroundColor: colors[d.color ?? PALETTE[i % PALETTE.length]] }} />\n          <Text className=\"flex-1 text-sm\">{d.label}</Text>\n          <Text className=\"text-muted-foreground text-sm\">{Math.round((d.value / total) * 100)}%</Text>\n        </View>\n      ))}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/donut-chart.tsx"
    }
  ],
  "meta": {
    "exports": [
      "DonutChart",
      "ChartLegend"
    ],
    "api": "<DonutChart data size>{centre}</DonutChart> + <ChartLegend data />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:component"
}