{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gauge-arc",
  "title": "Gauge Arc",
  "description": "The credit-score dial: track, progressed arc and hairline needle. Needle, arc and ticks variants.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json",
    "http://localhost:5173/r/liquid-path.json"
  ],
  "files": [
    {
      "path": "src/components/ui/gauge-arc.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { arcPath, clamp } from \"@/lib/liquid-path\"\n\nconst gauge = cva(\"block overflow-visible\", {\n  variants: {\n    tone: {\n      ink: \"text-ink dark:text-white\",\n      current: \"text-current\",\n      volt: \"text-volt\",\n      flare: \"text-flare\",\n      chalk: \"text-white\",\n    },\n  },\n  defaultVariants: { tone: \"ink\" },\n})\n\nexport interface GaugeArcProps\n  extends React.ComponentProps<\"svg\">,\n    VariantProps<typeof gauge> {\n  value: number\n  min?: number\n  max?: number\n  /**\n   * `needle` is the credit-score dial from the reference: a full track, a\n   * progressed arc, and a hairline pointer. `arc` drops the pointer.\n   * `ticks` replaces the track with discrete marks.\n   */\n  variant?: \"needle\" | \"arc\" | \"ticks\"\n  /** Degrees of sweep. 180 is a half dial; 240 opens it into a horseshoe. */\n  sweep?: number\n  size?: number\n  thickness?: number\n  tickCount?: number\n  label?: string\n  children?: React.ReactNode\n}\n\nexport function GaugeArc({\n  value,\n  min = 0,\n  max = 100,\n  variant = \"needle\",\n  sweep = 180,\n  size = 160,\n  thickness = 2,\n  tickCount = 32,\n  tone,\n  label,\n  className,\n  children,\n  ...props\n}: GaugeArcProps) {\n  const t = clamp((value - min) / (max - min || 1), 0, 1)\n  const start = 270 - sweep / 2\n  const end = 270 + sweep / 2\n  const at = start + t * sweep\n\n  const cx = size / 2\n  const cy = size / 2\n  const r = size / 2 - thickness * 2\n\n  const rad = (d: number) => (d * Math.PI) / 180\n  const nx = cx + (r - thickness * 3) * Math.cos(rad(at))\n  const ny = cy + (r - thickness * 3) * Math.sin(rad(at))\n\n  return (\n    <div className=\"relative inline-grid place-items-center\">\n      <svg\n        viewBox={`0 0 ${size} ${size}`}\n        role=\"img\"\n        aria-label={label ?? `${value} of ${max}`}\n        className={cn(gauge({ tone }), className)}\n        width={size}\n        height={size}\n        {...props}\n      >\n        {variant === \"ticks\" ? (\n          Array.from({ length: tickCount }).map((_, i) => {\n            const a = start + (i / (tickCount - 1)) * sweep\n            const on = a <= at\n            const inner = r - (on ? 9 : 5)\n            return (\n              <line\n                key={i}\n                x1={cx + inner * Math.cos(rad(a))}\n                y1={cy + inner * Math.sin(rad(a))}\n                x2={cx + r * Math.cos(rad(a))}\n                y2={cy + r * Math.sin(rad(a))}\n                stroke=\"currentColor\"\n                strokeWidth={thickness}\n                strokeLinecap=\"round\"\n                opacity={on ? 1 : 0.2}\n              />\n            )\n          })\n        ) : (\n          <>\n            <path\n              d={arcPath(cx, cy, r, start, end)}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={thickness}\n              strokeLinecap=\"round\"\n              opacity={0.16}\n            />\n            <path\n              d={arcPath(cx, cy, r, start, at)}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={thickness}\n              strokeLinecap=\"round\"\n            />\n          </>\n        )}\n\n        {variant === \"needle\" ? (\n          <>\n            <line\n              x1={cx}\n              y1={cy}\n              x2={nx}\n              y2={ny}\n              stroke=\"currentColor\"\n              strokeWidth={thickness * 0.6}\n              strokeLinecap=\"round\"\n            />\n            <circle cx={cx} cy={cy} r={thickness * 1.4} fill=\"currentColor\" />\n          </>\n        ) : null}\n      </svg>\n      {children ? <div className=\"absolute inset-0 grid place-items-center\">{children}</div> : null}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}