{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-axis-tick",
  "title": "Chart Axis Tick",
  "description": "Recharts axis tick that highlights one value and mutes the rest.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@pestoui/style"
  ],
  "files": [
    {
      "path": "pestoui/components/chart-axis-tick.tsx",
      "content": "import { cva } from \"class-variance-authority\"\n\n/* A custom recharts axis tick that singles out one value — today, the active\n   day, the current week — and leaves the rest muted. Pass it as an element,\n   `tick={<ChartAxisTick … />}`, and recharts injects x, y and payload.\n\n   Three ways to single a value out:\n   - weight: bare text, the active label in foreground ink and semibold.\n   - wash:   the active label on a 14% wash of --selected. Its ink stays\n             foreground, because a coloured label on its own tint misses AA.\n   - pill:   the active label reversed out of a solid foreground pill.\n\n   Every fill carries `!`. ChartContainer has a descendant rule written to paint\n   every axis tick muted (`.recharts-cartesian-axis-tick text`). Where that rule\n   matches it outranks a plain utility on the element, and important is the\n   one class-based way past it. In recharts 3.8 the selector no longer reaches\n   the label, so today the `!` is a guard rather than a fix; it stays so these\n   fills do not change the day that rule is retargeted.\n\n   The size comes off the type scale as a class rather than as a font-size\n   attribute: 12px for weight and wash, 11px for the pill, whose label has to\n   sit inside a 24px shape. */\nconst chartAxisTickLabelVariants = cva(\"\", {\n  variants: {\n    emphasis: {\n      weight: \"text-caption-sm\",\n      wash: \"text-caption-sm\",\n      pill: \"text-micro\",\n    },\n    active: {\n      true: \"font-semibold\",\n      false: \"font-normal\",\n    },\n  },\n  compoundVariants: [\n    { emphasis: [\"weight\", \"wash\"], active: true, className: \"fill-foreground!\" },\n    {\n      emphasis: [\"weight\", \"wash\"],\n      active: false,\n      className: \"fill-muted-foreground!\",\n    },\n    { emphasis: \"pill\", active: true, className: \"fill-background!\" },\n    { emphasis: \"pill\", active: false, className: \"fill-muted-foreground!\" },\n  ],\n  defaultVariants: {\n    emphasis: \"weight\",\n    active: false,\n  },\n})\n\n/* The shape behind an active label. `weight` draws none. */\nconst chartAxisTickMarkVariants = cva(\"\", {\n  variants: {\n    emphasis: {\n      weight: \"\",\n      wash: \"fill-selected\",\n      pill: \"fill-foreground\",\n    },\n  },\n  defaultVariants: {\n    emphasis: \"weight\",\n  },\n})\n\ntype ChartAxisTickEmphasis = \"weight\" | \"wash\" | \"pill\"\n\ntype ChartAxisTickProps = {\n  /* Injected by recharts. */\n  x?: number | string\n  y?: number | string\n  payload?: { value?: number | string }\n  emphasis?: ChartAxisTickEmphasis\n  /* The tick is active when String(payload.value) === String(activeValue). */\n  activeValue?: number | string\n  /* Decides activity from the raw tick value; wins over activeValue. */\n  isActive?: (value: number | string) => boolean\n  /* The label for a raw tick value. Defaults to String(value). */\n  format?: (value: number | string) => React.ReactNode\n}\n\nfunction ChartAxisTick({\n  x,\n  y,\n  payload,\n  emphasis = \"weight\",\n  activeValue,\n  isActive,\n  format,\n}: ChartAxisTickProps) {\n  const value = payload?.value ?? \"\"\n  const active = isActive\n    ? isActive(value)\n    : activeValue !== undefined && String(value) === String(activeValue)\n  const label = format ? format(value) : String(value)\n  const labelClassName = chartAxisTickLabelVariants({ emphasis, active })\n\n  if (emphasis === \"weight\") {\n    return (\n      <text\n        data-slot=\"chart-axis-tick\"\n        data-emphasis={emphasis}\n        data-active={active}\n        x={x}\n        y={y}\n        dy={12}\n        textAnchor=\"middle\"\n        className={labelClassName}\n      >\n        {label}\n      </text>\n    )\n  }\n\n  const pill = emphasis === \"pill\"\n  return (\n    <g\n      data-slot=\"chart-axis-tick\"\n      data-emphasis={emphasis}\n      data-active={active}\n      transform={`translate(${Number(x ?? 0)},${Number(y ?? 0)})`}\n    >\n      {active ? (\n        pill ? (\n          <rect\n            data-slot=\"chart-axis-tick-mark\"\n            x={-12}\n            y={0}\n            width={24}\n            height={18}\n            rx={9}\n            className={chartAxisTickMarkVariants({ emphasis })}\n          />\n        ) : (\n          <rect\n            data-slot=\"chart-axis-tick-mark\"\n            x={-19}\n            y={2}\n            width={38}\n            height={22}\n            rx={6}\n            fillOpacity={0.14}\n            className={chartAxisTickMarkVariants({ emphasis })}\n          />\n        )\n      ) : null}\n      <text\n        data-slot=\"chart-axis-tick-label\"\n        x={0}\n        y={pill ? 9 : 13}\n        dy=\"0.35em\"\n        textAnchor=\"middle\"\n        className={labelClassName}\n      >\n        {label}\n      </text>\n    </g>\n  )\n}\n\nexport { ChartAxisTick, chartAxisTickLabelVariants, chartAxisTickMarkVariants }\nexport type { ChartAxisTickEmphasis, ChartAxisTickProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}