{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "recharts-tooltip",
  "dependencies": [
    "recharts"
  ],
  "files": [
    {
      "path": "src/registry/ui/recharts-tooltip.tsx",
      "content": "import { getPayloadConfigFromPayload, getColorsCount, useChart } from \"@/registry/ui/recharts-chart\";\nimport type { NameType, ValueType } from \"recharts/types/component/DefaultTooltipContent\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\n\ntype TooltipRoundness = \"sm\" | \"md\" | \"lg\" | \"xl\";\ntype TooltipVariant = \"default\" | \"frosted-glass\";\n\nconst roundnessMap: Record<TooltipRoundness, string> = {\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n};\n\nconst variantMap: Record<TooltipVariant, string> = {\n  default: \"bg-background\",\n  \"frosted-glass\": \"bg-background/70 backdrop-blur-sm\",\n};\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  nameKey,\n  labelKey,\n  selected,\n  roundness = \"lg\",\n  variant = \"default\",\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    nameKey?: string;\n    labelKey?: string;\n    selected?: string | null;\n    roundness?: TooltipRoundness;\n    variant?: TooltipVariant;\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<ValueType, NameType>,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\" ? (config[label]?.label ?? label) : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>{labelFormatter(value, payload)}</div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    // Empty tooltip - to prevent position getting 0.0 so it doesnt animate tooltip every time from 0.0 origin\n    return <span className=\"p-4\" />;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 grid min-w-32 items-start gap-1.5 border px-2.5 py-1.5 text-xs shadow-xl\",\n        roundnessMap[roundness],\n        variantMap[variant],\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            // For pie charts, item.name contains the sector name (e.g., \"chrome\")\n            // For radial charts, the name is in item.payload[nameKey]\n            // For other charts, item.name or item.dataKey contains the series name\n            const payloadName =\n              nameKey && item.payload\n                ? (item.payload as Record<string, unknown>)[nameKey]\n                : undefined;\n            const key = `${payloadName ?? item.name ?? item.dataKey ?? \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n            // Get colors count for this item to determine gradient vs solid\n            const colorsCount = itemConfig ? getColorsCount(itemConfig) : 1;\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\",\n                  selected != null && selected !== item.dataKey && \"opacity-30\",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\"shrink-0 rounded-[2px]\", {\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\n                            \"w-1\": indicator === \"line\",\n                            \"w-0 border-[1.5px] border-dashed bg-transparent!\":\n                              indicator === \"dashed\",\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\n                          })}\n                          style={getIndicatorColorStyle(key, colorsCount)}\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between gap-4 leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\",\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\nfunction getIndicatorColorStyle(dataKey: string, colorsCount: number): React.CSSProperties {\n  if (colorsCount <= 1) {\n    return { background: `var(--color-${dataKey}-0)` };\n  }\n\n  // Multiple colors: create linear gradient with evenly distributed stops\n  const stops = Array.from({ length: colorsCount }, (_, index) => {\n    const offset = (index / (colorsCount - 1)) * 100;\n    return `var(--color-${dataKey}-${index}) ${offset}%`;\n  }).join(\", \");\n\n  return { background: `linear-gradient(to right, ${stops})` };\n}\n\nconst ChartTooltip = ({\n  animationDuration = 200,\n  ...props\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip>) => (\n  <RechartsPrimitive.Tooltip animationDuration={animationDuration} {...props} />\n);\n\nexport { ChartTooltip, ChartTooltipContent };\nexport type { TooltipRoundness, TooltipVariant };\n",
      "type": "registry:component",
      "target": "components/evilcharts/ui/recharts-tooltip.tsx"
    }
  ],
  "type": "registry:component"
}