{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hud-graph",
  "title": "HUD graph",
  "description": "HUD graph is a production-ready hud component from BJORK UI, packaged for shadcn registries.",
  "dependencies": [
    "clsx",
    "recharts",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/bjork-ui/hud/graph.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\nimport { AreaChart, Area, YAxis, ResponsiveContainer } from \"recharts\";\n\ninterface HudAreaChartProps {\n  showYAxis: boolean;\n  data: { time: string; value: number }[];\n  gradientColor?: string;\n  borderColor?: string;\n  dotColor?: string;\n  dotSize?: number;\n  dotOpacity?: number;\n  scale?: number;\n}\n\nexport function HudAreaChart({\n  showYAxis = false,\n  data = [],\n  gradientColor = \"#ffffff\",\n  borderColor = \"#ffffff\",\n  dotColor = \"#ffffff\",\n  dotSize = 0.8,\n  dotOpacity = 0.1,\n  scale = 1,\n}: HudAreaChartProps) {\n  const [hoveredData, setHoveredData] = useState<{\n    time: string;\n    value: number;\n  } | null>(null);\n\n  const handleMouseMove = (state: { activePayload?: Array<{ payload: { time: string; value: number } }> }) => {\n    if (state && state.activePayload && state.activePayload.length > 0) {\n      setHoveredData({\n        time: state.activePayload[0].payload.time,\n        value: state.activePayload[0].payload.value,\n      });\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setHoveredData(null);\n  };\n\n  return (\n    <div \n      className=\"relative w-96 h-80\"\n      style={{\n        transform: `scale(${scale})`,\n        transformOrigin: \"center center\",\n      }}\n    >\n      {/* SVG Frame Overlay */}\n      <div className=\"absolute inset-0 z-10 pointer-events-none\">\n        <svg \n          width=\"100%\" \n          height=\"100%\" \n          viewBox=\"0 0 152 149\" \n          fill=\"none\" \n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"w-full h-full\"\n          preserveAspectRatio=\"xMidYMid meet\"\n        >\n          <defs>\n            {/* Dotted grid pattern */}\n            <pattern id=\"dotGrid\" x=\"0\" y=\"0\" width=\"16.89\" height=\"14.8\" patternUnits=\"userSpaceOnUse\">\n              <circle cx=\"8.445\" cy=\"7.45\" r={dotSize} fill={dotColor} opacity={dotOpacity} />\n            </pattern>\n            \n            {/* Clipping path for the chart area */}\n            <clipPath id=\"chartClip\">\n              <path d=\"M1 1h149.894v131.772L135.145 147.521H1V1z\" />\n            </clipPath>\n          </defs>\n          \n          {/* Grid background */}\n          <rect x=\"1\" y=\"1\" width=\"150.894\" height=\"146.521\" fill=\"url(#dotGrid)\" />\n          \n          {/* Frame border */}\n          <path \n            d=\"M136.145 148.521H0V0H151.894V132.772L136.145 148.521ZM1 147.521H135.73L150.894 132.358V1H1V147.521Z\" \n            fill={borderColor}\n          />\n        </svg>\n      </div>\n\n      {/* Graph Container with clipping */}\n      <div \n        className=\"absolute inset-y-4 -left-3 right-7 bottom-0 z-0\"\n        style={{\n          clipPath: \"polygon(0.6% 0.7%, 99.3% 0.7%, 99.3% 89.2%, 89.5% 99%, 0.6% 99%)\"\n        }}\n      >\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <AreaChart\n            data={data}\n            margin={{ top: 10, right: 1, left: -18, bottom: 0 }}\n            onMouseMove={handleMouseMove}\n            onMouseLeave={handleMouseLeave}\n          >\n            <defs>\n              {/* Radial gradient to eliminate baseline visibility */}\n              <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={gradientColor} stopOpacity={0.4} />\n                <stop offset=\"20%\" stopColor={gradientColor} stopOpacity={0.25} />\n                <stop offset=\"40%\" stopColor={gradientColor} stopOpacity={0.15} />\n                <stop offset=\"70%\" stopColor={gradientColor} stopOpacity={0.05} />\n                <stop offset=\"90%\" stopColor={gradientColor} stopOpacity={0.01} />\n                <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity={0} />\n              </linearGradient>\n            </defs>\n\n            {/* Y Axis */}\n            <YAxis\n              axisLine={false}\n              tickLine={false}\n              tick={{ fill: gradientColor, fontSize: 10 }}\n              className={cn(showYAxis ? \"opacity-100\" : \"opacity-0\")}\n            />\n\n            {/* Area with baseline-friendly gradient */}\n            <Area\n              type=\"monotone\"\n              dataKey=\"value\"\n              stroke={borderColor}\n              strokeWidth={1.5}\n              fill=\"url(#gradient)\"\n              fillOpacity={0.8}\n            />\n          </AreaChart>\n        </ResponsiveContainer>\n      </div>\n\n      {/* Bottom Left Data Display */}\n      {hoveredData && (\n        <div className=\"absolute bottom-4 left-10 text-primary font-mono text-xs z-20\">\n          {hoveredData.time} : {hoveredData.value}\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/hud/graph.tsx"
    },
    {
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib",
      "target": "@lib/utils.ts"
    }
  ],
  "cssVars": {
    "light": {
      "bjork-bg": "#f7f3ea",
      "bjork-surface": "#fffcf6",
      "bjork-surface-muted": "rgba(250, 246, 237, 0.94)",
      "bjork-surface-hover": "#f5efe3",
      "bjork-surface-active": "#efe7d8",
      "bjork-panel": "#f8f2e7",
      "bjork-menu": "rgba(255, 252, 246, 0.98)",
      "bjork-field": "rgba(255, 252, 246, 0.96)",
      "bjork-field-muted": "rgba(248, 242, 231, 0.82)",
      "bjork-field-inset": "rgba(239, 231, 216, 0.72)",
      "bjork-error-bg": "#fff0e8",
      "bjork-text": "#171717",
      "bjork-text-strong": "rgba(23, 23, 23, 0.9)",
      "bjork-text-medium": "rgba(23, 23, 23, 0.72)",
      "bjork-text-muted": "rgba(23, 23, 23, 0.52)",
      "bjork-text-soft": "rgba(23, 23, 23, 0.36)",
      "bjork-text-faint": "rgba(23, 23, 23, 0.22)",
      "bjork-inverted-text": "#fff8f0",
      "bjork-border": "#eee6db",
      "bjork-border-muted": "#f5ede2",
      "bjork-border-strong": "#e1d7c8",
      "bjork-thumb": "#a49b8e",
      "bjork-track": "#ded6ca",
      "bjork-accent": "#ec7d43",
      "bjork-accent-hover": "#f0935f",
      "bjork-accent-soft": "rgba(236, 125, 67, 0.1)",
      "bjork-accent-muted": "rgba(236, 125, 67, 0.2)",
      "bjork-accent-badge": "rgba(236, 125, 67, 0.16)",
      "bjork-accent-badge-foreground": "#8d421d",
      "bjork-accent-foreground": "#3f2112",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)",
      "bjork-ring-offset": "#f7f3ea"
    },
    "dark": {
      "bjork-bg": "#111111",
      "bjork-surface": "#121212",
      "bjork-surface-muted": "rgba(22, 22, 22, 0.92)",
      "bjork-surface-hover": "#161616",
      "bjork-surface-active": "#202020",
      "bjork-panel": "#0d0d0d",
      "bjork-menu": "rgba(18, 18, 18, 0.98)",
      "bjork-field": "rgba(18, 18, 18, 0.95)",
      "bjork-field-muted": "rgba(18, 18, 18, 0.55)",
      "bjork-field-inset": "rgba(9, 9, 9, 0.75)",
      "bjork-error-bg": "#130d0a",
      "bjork-text": "#ededed",
      "bjork-text-strong": "rgba(237, 237, 237, 0.9)",
      "bjork-text-medium": "rgba(237, 237, 237, 0.72)",
      "bjork-text-muted": "rgba(237, 237, 237, 0.52)",
      "bjork-text-soft": "rgba(237, 237, 237, 0.36)",
      "bjork-text-faint": "rgba(237, 237, 237, 0.22)",
      "bjork-inverted-text": "#080808",
      "bjork-border": "#232323",
      "bjork-border-muted": "#1c1c1c",
      "bjork-border-strong": "#343434",
      "bjork-thumb": "#626262",
      "bjork-track": "#090909",
      "bjork-accent": "#ec5c13",
      "bjork-accent-hover": "#f07832",
      "bjork-accent-soft": "rgba(236, 92, 19, 0.12)",
      "bjork-accent-muted": "rgba(236, 92, 19, 0.24)",
      "bjork-accent-badge": "#ec5c13",
      "bjork-accent-badge-foreground": "#fff2ea",
      "bjork-accent-foreground": "#fff2ea",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)",
      "bjork-ring-offset": "#080808"
    }
  },
  "css": {
    ".bjork-range": {
      "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)"
    },
    ".bjork-range::-webkit-slider-thumb": {
      "appearance": "none",
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-range::-moz-range-thumb": {
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-layered-button-accent, .bjork-layered-button-raised": {
      "position": "relative",
      "isolation": "isolate",
      "appearance": "none",
      "overflow": "hidden",
      "border": "0",
      "border-radius": "13px",
      "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
      "transition": "filter 150ms ease-out, box-shadow 150ms ease-out"
    },
    ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": {
      "position": "absolute",
      "inset": "0",
      "pointer-events": "none",
      "content": "\"\"",
      "border": "1.5px solid transparent",
      "border-radius": "inherit",
      "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box",
      "mix-blend-mode": "overlay",
      "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "-webkit-mask-clip": "padding-box, border-box",
      "mask-clip": "padding-box, border-box",
      "-webkit-mask-origin": "padding-box, border-box",
      "mask-origin": "padding-box, border-box",
      "-webkit-mask-composite": "xor",
      "mask-composite": "exclude"
    },
    ".bjork-layered-button-accent": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000040",
      "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)"
    },
    ".bjork-layered-button-raised": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))"
    },
    ".dark .bjork-layered-button-raised": {
      "color": "oklch(0.2574 0.0056 265)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))"
    },
    "@media (hover: hover)": {
      ".bjork-layered-button-accent:hover": {
        "filter": "brightness(1.08) saturate(1.04)"
      },
      ".bjork-layered-button-raised:hover": {
        "filter": "brightness(1.08) contrast(0.9)"
      }
    }
  },
  "meta": {
    "collection": "HUD",
    "registryUrl": "https://ui.isaiahbjork.com/hud-graph.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/hud-graph.json"
  },
  "type": "registry:component"
}