{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "echarts-tooltip",
  "dependencies": [
    "echarts"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-chart"
  ],
  "files": [
    {
      "path": "src/registry/ui/echarts-tooltip.tsx",
      "content": "import { indicatorBackground, type ResolvedColors } from \"@/registry/ui/echarts-chart\";\nimport type { TooltipComponentOption } from \"echarts/components\";\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Tooltip — the shared HTML shell/row primitives and the chart-agnostic option\n// fields. The tooltip DOM lives inside `[data-chart={id}]`, so the injected\n// `--color-*` vars and Tailwind classes resolve directly (no color read). Each\n// chart composes its own rows but shares the shell/styling and base option.\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport type TooltipVariant = \"default\" | \"frosted-glass\";\nexport type TooltipRoundness = \"sm\" | \"md\" | \"lg\" | \"xl\";\n// Tooltip anchoring: \"variable\" follows both axes (ECharts default, current\n// behavior); \"fixed\" tracks the pointer's X (centered) but stays pinned near\n// the top (fixed Y).\nexport type TooltipPosition = \"fixed\" | \"variable\";\n\nexport const roundnessClass: Record<TooltipRoundness, string> = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n};\n\nexport const tooltipVariantClass: Record<TooltipVariant, string> = {\n  default: \"bg-background\",\n  \"frosted-glass\": \"bg-background/50 backdrop-blur-md\",\n};\n\n// The standard series indicator swatch — a rounded square filled with the\n// series' solid var or multi-stop gradient (indicatorBackground). A chart drops\n// this into a tooltipRow's `indicatorHtml`.\nexport function tooltipIndicatorHtml(key: string, colorsCount: number): string {\n  return `<div class=\"h-2.5 w-2.5 shrink-0 rounded-[2px]\" style=\"background:${indicatorBackground(key, colorsCount)}\"></div>`;\n}\n\n// One tooltip row: indicator swatch + label/value pair. `dimmed` is a class\n// fragment (e.g. \" opacity-30\") appended to the row so the selection/hover dim\n// stays byte-identical to the inlined markup.\nexport function tooltipRow({\n  indicatorHtml,\n  labelText,\n  valueText,\n  dimmed,\n}: {\n  indicatorHtml: string;\n  labelText: string;\n  valueText: string;\n  dimmed: string;\n}): string {\n  return `<div class=\"flex w-full flex-wrap items-center gap-2${dimmed}\">\n          ${indicatorHtml}\n          <div class=\"flex flex-1 items-center justify-between gap-4 leading-none\">\n            <span class=\"text-muted-foreground\">${labelText}</span>\n            <span class=\"text-foreground font-mono font-medium tabular-nums\">${valueText}</span>\n          </div>\n        </div>`;\n}\n\n// The outer tooltip surface — border, padding, shadow, roundness + variant\n// classes — wrapping the axis label and the composed rows.\nexport function tooltipShell({\n  label,\n  body,\n  roundness,\n  variant,\n}: {\n  label: string;\n  body: string;\n  roundness: TooltipRoundness;\n  variant: TooltipVariant;\n}): string {\n  return `<div class=\"grid min-w-32 items-start gap-1.5 border border-border/50 px-2.5 py-1.5 text-xs shadow-xl ${roundnessClass[roundness]} ${tooltipVariantClass[variant]}\">\n      <div class=\"font-medium text-primary\">${label}</div>\n      <div class=\"grid gap-1.5\">${body}</div>\n    </div>`;\n}\n\n// Maps the TooltipPosition prop onto the ECharts tooltip `position` field.\n// \"variable\" → undefined (default follow-both-axes, current behavior); \"fixed\" →\n// a callback that centers the tooltip on the pointer's X but pins it near the\n// top (fixed Y).\nexport function resolveTooltipPosition(\n  position: TooltipPosition,\n): TooltipComponentOption[\"position\"] {\n  if (position === \"variable\") return undefined;\n  return (point, _params, _dom, _rect, size) => [point[0] - size.contentSize[0] / 2, 8];\n}\n\n// The chart-agnostic tooltip option fields (show, trigger, confine,\n// background/border/padding/extraCssText, axisPointer, position). The chart\n// supplies only `formatter` and spreads this in. `axisPointerColor` is the\n// pre-resolved cursor-line color, so this helper needs no live token read.\nexport function tooltipBaseOption(params: {\n  present: boolean;\n  cursor: boolean;\n  tokens: ResolvedColors[\"tokens\"];\n  position: TooltipPosition;\n  axisPointerColor: string;\n  strokeWidth: number;\n}): TooltipComponentOption {\n  const { present, cursor, position, axisPointerColor, strokeWidth } = params;\n\n  return {\n    show: present,\n    trigger: \"axis\",\n    confine: true,\n    backgroundColor: \"transparent\",\n    borderWidth: 0,\n    padding: 0,\n    extraCssText: \"box-shadow:none;\",\n    axisPointer: cursor\n      ? {\n          type: \"line\",\n          lineStyle: {\n            color: axisPointerColor,\n            width: strokeWidth,\n            type: [3, 3] as [number, number],\n          },\n        }\n      : { type: \"none\" },\n    position: resolveTooltipPosition(position),\n  };\n}\n",
      "type": "registry:component",
      "target": "components/evilcharts/ui/echarts-tooltip.tsx"
    }
  ],
  "type": "registry:component"
}