{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-reference-label",
  "title": "Chart Reference Label",
  "description": "Recharts label for a reference line or dot.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@pestoui/style"
  ],
  "files": [
    {
      "path": "pestoui/components/chart-reference-label.tsx",
      "content": "import { cva } from \"class-variance-authority\"\n\n/* A recharts label renderer for a reference line or dot. Pass it as an element,\n   `label={<ChartReferenceLabel … />}`, and recharts injects the viewBox.\n\n   - text: the words written on a reference line, just above its left end.\n   - flag: a dark flag with a notch at the left end of a target line, and a dot\n           at each end of the dashed run. The flag paints over the start of the\n           line, so the dashes appear to leave from its point.\n   - pill: a card-coloured pill to the left of a reference dot — a muted label,\n           then the value in bold. Decorative, so it is hidden from assistive\n           tech; the chart's own summary carries the figure.\n\n   Text fills carry `!` for the same reason as ChartAxisTick: ChartContainer\n   recolours chart text with descendant selectors that a plain utility loses to. */\nconst chartReferenceLabelVariants = cva(\"\", {\n  variants: {\n    variant: {\n      text: \"\",\n      flag: \"fill-foreground\",\n      pill: \"fill-card stroke-border\",\n    },\n  },\n  defaultVariants: {\n    variant: \"text\",\n  },\n})\n\nconst chartReferenceLabelTextVariants = cva(\"\", {\n  variants: {\n    variant: {\n      text: \"\",\n      flag: \"\",\n      pill: \"\",\n    },\n    /* `label` and `value` are the pill's two runs; `text` is the text element\n       itself, which is also the one that carries the size. */\n    part: {\n      text: \"\",\n      label: \"\",\n      value: \"\",\n    },\n    /* Whether the size comes off the type scale. False when the caller passes\n       a raw size of its own, because a class would outrank that attribute. */\n    scale: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    { variant: \"text\", className: \"fill-muted-foreground!\" },\n    { variant: \"flag\", className: \"fill-background!\" },\n    { variant: \"pill\", part: \"label\", className: \"fill-muted-foreground!\" },\n    { variant: \"pill\", part: \"value\", className: \"fill-foreground! font-semibold\" },\n    { variant: \"text\", part: \"text\", scale: true, className: \"text-micro\" },\n    {\n      variant: [\"flag\", \"pill\"],\n      part: \"text\",\n      scale: true,\n      className: \"text-caption-sm\",\n    },\n  ],\n  defaultVariants: {\n    variant: \"text\",\n    part: \"text\",\n    scale: true,\n  },\n})\n\ntype ChartReferenceLabelVariant = \"text\" | \"flag\" | \"pill\"\n\ntype ChartReferenceLabelProps = {\n  /* Injected by recharts. */\n  viewBox?: { x?: number; y?: number; width?: number; height?: number }\n  variant?: ChartReferenceLabelVariant\n  /* The words, for text and flag. */\n  text?: React.ReactNode\n  /* The pill's muted leading run. */\n  label?: React.ReactNode\n  /* The pill's bold trailing run. */\n  value?: React.ReactNode\n  /* The flag's or pill's width in px. Flag defaults to 84, pill to 116. */\n  width?: number\n  /* A raw SVG font-size, for a chart whose labels sit off the type scale.\n     Leave it out and the label takes its step from the scale: 11px for text,\n     12px for flag and pill. */\n  fontSize?: number | string\n}\n\nconst FLAG_WIDTH = 84\nconst PILL_WIDTH = 116\nconst PILL_HEIGHT = 28\n\nfunction ChartReferenceLabel({\n  viewBox,\n  variant = \"text\",\n  text,\n  label,\n  value,\n  width,\n  fontSize,\n}: ChartReferenceLabelProps) {\n  /* One or the other, never both: the scale's class, or the caller's attribute. */\n  const scale = fontSize == null\n  const size = scale ? undefined : { fontSize }\n  const textClassName = chartReferenceLabelTextVariants({ variant, scale })\n\n  if (variant === \"pill\") {\n    if (!viewBox || viewBox.x == null || viewBox.y == null) return null\n    const pillWidth = width ?? PILL_WIDTH\n    const cx = viewBox.x + (viewBox.width ?? 0) / 2\n    const cy = viewBox.y + (viewBox.height ?? 0) / 2\n    const left = cx - 18 - pillWidth\n    const top = cy - PILL_HEIGHT / 2\n    return (\n      <g data-slot=\"chart-reference-label\" data-variant={variant} aria-hidden=\"true\">\n        <rect\n          data-slot=\"chart-reference-label-shape\"\n          x={left}\n          y={top}\n          width={pillWidth}\n          height={PILL_HEIGHT}\n          rx={PILL_HEIGHT / 2}\n          className={chartReferenceLabelVariants({ variant })}\n        />\n        <text\n          data-slot=\"chart-reference-label-text\"\n          x={left + 12}\n          y={cy}\n          dy=\"0.35em\"\n          {...size}\n          className={textClassName}\n        >\n          <tspan\n            className={chartReferenceLabelTextVariants({ variant, part: \"label\" })}\n          >\n            {label}\n          </tspan>\n          <tspan\n            dx={8}\n            className={chartReferenceLabelTextVariants({ variant, part: \"value\" })}\n          >\n            {value}\n          </tspan>\n        </text>\n      </g>\n    )\n  }\n\n  const x = viewBox?.x ?? 0\n  const y = viewBox?.y ?? 0\n\n  if (variant === \"flag\") {\n    const flagWidth = width ?? FLAG_WIDTH\n    const shape = chartReferenceLabelVariants({ variant })\n    return (\n      <g data-slot=\"chart-reference-label\" data-variant={variant}>\n        <rect\n          data-slot=\"chart-reference-label-shape\"\n          x={x}\n          y={y - 11}\n          width={flagWidth}\n          height={22}\n          rx={6}\n          className={shape}\n        />\n        <path\n          data-slot=\"chart-reference-label-shape\"\n          d={`M${x + flagWidth - 1} ${y - 6} L${x + flagWidth + 6} ${y} L${x + flagWidth - 1} ${y + 6} Z`}\n          className={shape}\n        />\n        <text\n          data-slot=\"chart-reference-label-text\"\n          x={x + flagWidth / 2}\n          y={y}\n          dy=\"0.35em\"\n          textAnchor=\"middle\"\n          fontWeight={500}\n          {...size}\n          className={textClassName}\n        >\n          {text}\n        </text>\n        <circle\n          data-slot=\"chart-reference-label-shape\"\n          cx={x + flagWidth + 12}\n          cy={y}\n          r={3}\n          className={shape}\n        />\n        <circle\n          data-slot=\"chart-reference-label-shape\"\n          cx={x + (viewBox?.width ?? 0) - 3}\n          cy={y}\n          r={3}\n          className={shape}\n        />\n      </g>\n    )\n  }\n\n  return (\n    <text\n      data-slot=\"chart-reference-label\"\n      data-variant={variant}\n      x={x}\n      y={y - 5}\n      fontWeight={500}\n      {...size}\n      className={textClassName}\n    >\n      {text}\n    </text>\n  )\n}\n\nexport {\n  ChartReferenceLabel,\n  chartReferenceLabelTextVariants,\n  chartReferenceLabelVariants,\n}\nexport type { ChartReferenceLabelProps, ChartReferenceLabelVariant }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}