{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-gauge",
  "title": "Segmented Gauge",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/charts/segmented-gauge/SegmentedGauge.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nfunction heightToStyle(height: number | string): string {\n  return /^\\d+$/.test(String(height)) ? `${height}px` : String(height)\n}\n\n// ─────────────────────────────────────────────────────────────────────────\n// SegmentedGauge — pure SVG, no ECharts\n// ─────────────────────────────────────────────────────────────────────────\n\ninterface GaugeSegment {\n  /** Relative size of the segment. Segments are normalised by their sum. */\n  value: number\n  /** Optional override; defaults to chart-1..N from the registry palette. */\n  color?: string\n  /** Optional label, surfaced via the `children` for consumers that want to\n   *  render their own legend. */\n  label?: string\n}\n\nexport interface SegmentedGaugeProps {\n  segments: GaugeSegment[]\n  /** Container height (px when numeric, raw CSS when string). Default 200. */\n  height?: number | string\n  /** Stroke width of the arc in SVG units. Default 18. */\n  stroke?: number\n  /** Angular gap between segments, in degrees. Default 4. */\n  gap?: number\n  /** Optional fallback palette when `color` is omitted on a segment. */\n  colors?: string[]\n  /** Show a faint background track behind the arc. Default true. */\n  showTrack?: boolean\n  className?: string\n  /** Rendered into the dish centre (the Vue `center` slot). */\n  children?: React.ReactNode\n}\n\n// SVG geometry. The viewBox uses the centre + radius + stroke so the\n// canvas grows with the stroke width and the centre content can sit\n// underneath without overlapping the arc.\nconst SG_CX = 140\nconst SG_CY = 124\nconst SG_R = 100\n\nfunction sgPolar(angleDeg: number) {\n  const a = ((angleDeg - 90) * Math.PI) / 180\n  return [SG_CX + SG_R * Math.cos(a), SG_CY + SG_R * Math.sin(a)] as const\n}\n\nfunction sgArcPath(startA: number, endA: number) {\n  const [sx, sy] = sgPolar(startA)\n  const [ex, ey] = sgPolar(endA)\n  const largeArc = endA - startA > 180 ? 1 : 0\n  return `M ${sx.toFixed(2)} ${sy.toFixed(2)} A ${SG_R} ${SG_R} 0 ${largeArc} 1 ${ex.toFixed(2)} ${ey.toFixed(2)}`\n}\n\nexport const SegmentedGauge = React.forwardRef<HTMLDivElement, SegmentedGaugeProps>(\n  (\n    {\n      segments,\n      height = 200,\n      stroke = 18,\n      gap = 4,\n      colors = ['#3b82f6', '#0ea5e9', '#34d399', '#facc15', '#fb7185', '#a855f7'],\n      showTrack = true,\n      className,\n      children,\n    },\n    ref,\n  ) => {\n    const startAngle = 180\n    const sweep = 180\n\n    const arcs = React.useMemo(() => {\n      const total = segments.reduce((acc, s) => acc + s.value, 0) || 1\n      let cursor = startAngle\n      return segments.map((s, i) => {\n        const span = (s.value / total) * sweep\n        const isLast = i === segments.length - 1\n        const segEnd = cursor + span - (isLast ? 0 : gap)\n        const arc = { d: sgArcPath(cursor, segEnd), color: s.color ?? colors[i % colors.length] }\n        cursor = cursor + span\n        return arc\n      })\n    }, [segments, gap, colors])\n\n    const trackPath = sgArcPath(startAngle, startAngle + sweep)\n\n    return (\n      <div\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"segmented-gauge\"\n        tabIndex={0}\n        style={{ height: heightToStyle(height) }}\n        className={cn(\n          'focus-visible:ring-ring relative w-full focus-visible:ring-2 focus-visible:outline-none',\n          className,\n        )}\n      >\n        <svg\n          viewBox={`0 0 ${SG_CX * 2} ${SG_CY + stroke}`}\n          className=\"block h-full w-full\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          role=\"img\"\n        >\n          {showTrack && (\n            <path\n              d={trackPath}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={stroke}\n              strokeLinecap=\"round\"\n              className=\"text-muted/40\"\n              opacity=\"0.35\"\n            />\n          )}\n          {arcs.map((a, i) => (\n            <path key={i} d={a.d} fill=\"none\" stroke={a.color} strokeWidth={stroke} strokeLinecap=\"round\" />\n          ))}\n        </svg>\n        {children != null && (\n          <div className=\"pointer-events-none absolute inset-x-0 bottom-[8%] flex flex-col items-center\">\n            {children}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nSegmentedGauge.displayName = 'SegmentedGauge'\n",
      "type": "registry:ui",
      "target": "~/components/ui/charts/segmented-gauge/SegmentedGauge.tsx"
    },
    {
      "path": "packages/registry-react/components/charts/segmented-gauge/index.ts",
      "content": "export { SegmentedGauge, type SegmentedGaugeProps } from './SegmentedGauge'\n",
      "type": "registry:ui",
      "target": "~/components/ui/charts/segmented-gauge/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "React mirror of @uipkge/segmented-gauge.",
  "categories": [
    "chart"
  ]
}