{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "recharts-background",
"dependencies": [
"recharts"
],
"files": [
{
"path": "src/registry/ui/recharts-background.tsx",
"content": "\"use client\";\n\nimport { ZIndexLayer } from \"recharts\";\nimport { useId } from \"react\";\n\n// ── Background Variant Types ─────────────────────────────────────────────────\n// To add a new variant:\n// 1. Add its name to the BackgroundVariant union type below\n// 2. Create a pattern component with PatternProps\n// 3. Register it in PATTERN_MAP\n\nexport type BackgroundVariant =\n | \"dots\"\n | \"grid\"\n | \"cross-hatch\"\n | \"diagonal-lines\"\n | \"plus\"\n | \"falling-triangles\"\n | \"4-pointed-star\"\n | \"tiny-checkers\"\n | \"overlapping-circles\"\n | \"wiggle-lines\"\n | \"bubbles\";\n\n// ── Pattern Components ───────────────────────────────────────────────────────\n\ntype PatternProps = { id: string };\n\nconst DotsPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst GridPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst CrossHatchPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst DiagonalLinesPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst PlusPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst FallingTrianglesPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst FourPointedStarPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst TinyCheckersPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst OverlappingCirclesPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst WiggleLinesPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\nconst BubblesPattern = ({ id }: PatternProps) => (\n \n \n \n);\n\n// ── Pattern Registry ─────────────────────────────────────────────────────────\n// Map variant names to pattern components\n\nconst PATTERN_MAP: Record> = {\n dots: DotsPattern,\n grid: GridPattern,\n plus: PlusPattern,\n bubbles: BubblesPattern,\n \"cross-hatch\": CrossHatchPattern,\n \"diagonal-lines\": DiagonalLinesPattern,\n \"falling-triangles\": FallingTrianglesPattern,\n \"4-pointed-star\": FourPointedStarPattern,\n \"tiny-checkers\": TinyCheckersPattern,\n \"overlapping-circles\": OverlappingCirclesPattern,\n \"wiggle-lines\": WiggleLinesPattern,\n};\n\n// ── Main Component ───────────────────────────────────────────────────────────\n// Usage: Place inside any Recharts chart component.\n// ZIndexLayer with zIndex={-1} ensures the background renders behind all chart content.\n\ninterface ChartBackgroundProps {\n variant: BackgroundVariant;\n}\n\nexport function ChartBackground({ variant }: ChartBackgroundProps) {\n const baseId = useId().replace(/:/g, \"\");\n const patternId = `${baseId}-bg-${variant}`;\n const maskId = `${baseId}-bg-edge-fade`;\n const filterId = `${baseId}-bg-blur`;\n const PatternComponent = PATTERN_MAP[variant];\n\n return (\n \n \n \n {/* Gaussian blur filter for soft edge fade */}\n \n \n \n {/* Mask: a slightly inset white rect with blur creates smooth transparent edges */}\n \n \n \n \n \n \n );\n}\n",
"type": "registry:component",
"target": "components/evilcharts/ui/recharts-background.tsx"
}
],
"type": "registry:component"
}