{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "recharts-dot",
  "dependencies": [
    "recharts"
  ],
  "files": [
    {
      "path": "src/registry/ui/recharts-dot.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\n\nexport type DotVariant = \"default\" | \"border\" | \"colored-border\";\n\ntype ChartDotProps = {\n  cx?: number;\n  cy?: number;\n  dataKey: string;\n  chartId: string;\n  className?: string;\n  fillOpacity?: number;\n  type?: DotVariant;\n  /** Optional SVG <mask> id — lets the dot share an area's intro reveal wipe. */\n  maskId?: string;\n};\n\nconst ChartDot = React.memo(function ChartDot({\n  cx,\n  cy,\n  dataKey,\n  chartId,\n  className,\n  fillOpacity = 1,\n  type = \"default\",\n  maskId,\n}: ChartDotProps) {\n  const dotId = React.useId().replace(/:/g, \"\");\n  const gradientUrl = `url(#${chartId}-colors-${String(dataKey)})`;\n\n  if (cx === undefined || cy === undefined) return null;\n\n  switch (type) {\n    case \"border\":\n      return (\n        <PrimaryBorderDot\n          cx={cx}\n          cy={cy}\n          dotId={dotId}\n          fillOpacity={fillOpacity}\n          gradientUrl={gradientUrl}\n          className={className}\n          maskId={maskId}\n        />\n      );\n    case \"colored-border\":\n      return (\n        <ColoredBorderDot\n          cx={cx}\n          cy={cy}\n          dotId={dotId}\n          fillOpacity={fillOpacity}\n          gradientUrl={gradientUrl}\n          className={className}\n          maskId={maskId}\n        />\n      );\n    default:\n      return (\n        <DefaultDot\n          cx={cx}\n          cy={cy}\n          dotId={dotId}\n          fillOpacity={fillOpacity}\n          gradientUrl={gradientUrl}\n          className={className}\n          maskId={maskId}\n        />\n      );\n  }\n});\n\ntype DotVariantProps = {\n  cx: number;\n  cy: number;\n  dotId: string;\n  fillOpacity: number;\n  gradientUrl: string;\n  className?: string;\n  maskId?: string;\n};\n\nconst DefaultDot = React.memo(\n  ({ cx, cy, dotId, fillOpacity, gradientUrl, className, maskId }: DotVariantProps) => {\n    const r = 3;\n    return (\n      <g className={className} mask={maskId ? `url(#${maskId})` : undefined}>\n        <defs>\n          <clipPath id={`dot-clip-${dotId}`}>\n            <circle cx={cx} cy={cy} r={r} />\n          </clipPath>\n        </defs>\n        {/* Full-width gradient rectangle clipped to dot shape */}\n        <rect\n          x=\"0\"\n          y={cy - r}\n          width=\"100%\"\n          height={r * 2}\n          fill={gradientUrl}\n          fillOpacity={fillOpacity}\n          clipPath={`url(#dot-clip-${dotId})`}\n        />\n      </g>\n    );\n  },\n);\n\nDefaultDot.displayName = \"DefaultDot\";\n\nconst PrimaryBorderDot = React.memo(\n  ({ cx, cy, dotId, fillOpacity, gradientUrl, className, maskId }: DotVariantProps) => {\n    const r = 6;\n    const strokeWidth = 5;\n    return (\n      <g className={cn(className, \"text-background\")} mask={maskId ? `url(#${maskId})` : undefined}>\n        <defs>\n          <clipPath id={`dot-clip-${dotId}`}>\n            <circle cx={cx} cy={cy} r={r} />\n          </clipPath>\n        </defs>\n        {/* Background stroke (border) */}\n        <circle cx={cx} cy={cy} r={r} fill=\"currentColor\" />\n        {/* Inner gradient circle clipped */}\n        <rect\n          x=\"0\"\n          y={cy - (r - strokeWidth / 2)}\n          width=\"100%\"\n          height={(r - strokeWidth / 2) * 2}\n          fill={gradientUrl}\n          fillOpacity={fillOpacity}\n          clipPath={`url(#dot-clip-inner-${dotId})`}\n        />\n        <defs>\n          <clipPath id={`dot-clip-inner-${dotId}`}>\n            <circle cx={cx} cy={cy} r={r - strokeWidth / 2} />\n          </clipPath>\n        </defs>\n      </g>\n    );\n  },\n);\n\nPrimaryBorderDot.displayName = \"PrimaryBorderDot\";\n\nconst ColoredBorderDot = React.memo(\n  ({ cx, cy, dotId, fillOpacity, gradientUrl, className, maskId }: DotVariantProps) => {\n    const r = 3;\n    const strokeWidth = 1;\n    return (\n      <g className={cn(className, \"text-background\")} mask={maskId ? `url(#${maskId})` : undefined}>\n        <defs>\n          <clipPath id={`dot-clip-${dotId}`}>\n            <circle cx={cx} cy={cy} r={r + strokeWidth / 2} />\n          </clipPath>\n        </defs>\n        {/* Gradient stroke (border) via clipped rect */}\n        <rect\n          x=\"0\"\n          y={cy - r - strokeWidth / 2}\n          width=\"100%\"\n          height={(r + strokeWidth / 2) * 2}\n          fill={gradientUrl}\n          fillOpacity={fillOpacity}\n          clipPath={`url(#dot-clip-${dotId})`}\n        />\n        {/* Inner solid fill */}\n        <circle cx={cx} cy={cy} r={r - strokeWidth / 2} fill=\"currentColor\" />\n      </g>\n    );\n  },\n);\n\nColoredBorderDot.displayName = \"ColoredBorderDot\";\n\nexport { ChartDot };\n",
      "type": "registry:component",
      "target": "components/evilcharts/ui/recharts-dot.tsx"
    }
  ],
  "type": "registry:component"
}