{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "category-distribution-chart",
  "title": "Category Distribution Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/charts/category-distribution-chart/CategoryDistributionChart.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface DistributionSlice {\n    label: string\n    /** Share of the whole; auto-normalised when the sum is not 100. */\n    percentage: number\n    value?: string | number\n    color?: string\n  }\n\n  export interface CategoryDistributionChartProps extends HTMLAttributes<HTMLDivElement> {\n    primaryValue: string | number\n    primaryLabel?: string\n    trend?: { value: string; direction: 'up' | 'down' }\n    categories: DistributionSlice[]\n    height?: number | string\n    showLegend?: boolean\n    colors?: string[]\n    /** Accessible name announced for the chart image. Defaults to \"Chart\". */\n    ariaLabel?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    class: className,\n    primaryValue,\n    primaryLabel,\n    trend,\n    categories,\n    height = 220,\n    showLegend = true,\n    colors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'],\n    ariaLabel,\n    ...restProps\n  }: CategoryDistributionChartProps = $props()\n\n  const heightStyle = $derived(/^\\d+$/.test(String(height)) ? `${height}px` : String(height))\n  const total = $derived(categories.reduce((s, c) => s + c.percentage, 0) || 1)\n  const slices = $derived(\n    categories.map((c, i) => ({\n      ...c,\n      share: (c.percentage / total) * 100,\n      color: c.color ?? colors[i % colors.length]!,\n    })),\n  )\n</script>\n\n<div\n  data-uipkge\n  data-slot=\"category-distribution-chart\"\n  role=\"img\"\n  aria-label={ariaLabel || 'Chart'}\n  style=\"height: {heightStyle};\"\n  class={cn('flex w-full flex-col justify-center', className)}\n  {...restProps}\n>\n  <div class=\"flex items-baseline gap-2\">\n    <span class=\"text-foreground text-3xl font-bold tabular-nums\">{primaryValue}</span>\n    {#if trend}\n      <span\n        class=\"text-xs font-semibold tabular-nums\"\n        style=\"color: {trend.direction === 'up' ? 'var(--chart-2)' : 'var(--destructive)'};\"\n      >\n        {trend.direction === 'up' ? '+' : '−'}{trend.value}\n      </span>\n    {/if}\n    {#if primaryLabel}\n      <span class=\"text-muted-foreground text-xs\">{primaryLabel}</span>\n    {/if}\n  </div>\n  <div class=\"mt-3 flex h-3 w-full overflow-hidden rounded-full\" role=\"presentation\">\n    {#each slices as s (s.label)}\n      <div\n        class=\"h-full\"\n        style=\"width: {s.share}%; background: {s.color};\"\n        title={`${s.label} — ${Math.round(s.share)}%`}\n      ></div>\n    {/each}\n  </div>\n  {#if showLegend}\n    <ul class=\"mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs\">\n      {#each slices as s (s.label)}\n        <li class=\"flex min-w-0 items-center gap-2\">\n          <span class=\"size-2.5 shrink-0 rounded-[3px]\" style=\"background: {s.color};\"></span>\n          <span class=\"text-foreground truncate font-medium\">{s.label}</span>\n          <span class=\"text-muted-foreground ml-auto shrink-0 tabular-nums\">{s.value ?? `${Math.round(s.share)}%`}</span>\n        </li>\n      {/each}\n    </ul>\n  {/if}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/charts/category-distribution-chart/CategoryDistributionChart.svelte"
    },
    {
      "path": "packages/registry-svelte/components/charts/category-distribution-chart/index.ts",
      "content": "export {\n  default as CategoryDistributionChart,\n  type CategoryDistributionChartProps,\n  type DistributionSlice,\n} from './CategoryDistributionChart.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/charts/category-distribution-chart/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Category distribution as dependency-free markup. Primary KPI with trend pill, proportional stacked bar, and legend. Shares auto-normalise. Picks up chart tokens via CSS variables.",
  "categories": [
    "chart"
  ]
}