{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart",
  "type": "registry:block",
  "title": "Chart",
  "description": "Chart with Crafter styling. Explore the live example and use the source in your project.",
  "dependencies": [
    "cn@^0.2.6",
    "recharts@3.8.0"
  ],
  "files": [
    {
      "path": "components/ui/chart.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { cn } from \"cn\";\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\nexport type ChartConfig = Record<string, {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n} & ({\n    color?: string;\n    theme?: never;\n} | {\n    color?: never;\n    theme: Record<keyof typeof THEMES, string>;\n})>;\ntype ChartContextProps = {\n    config: ChartConfig;\n};\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\nfunction useChart() {\n    const context = React.useContext(ChartContext);\n    if (!context) {\n        throw new Error(\"useChart must be used within a <ChartContainer />\");\n    }\n    return context;\n}\nfunction ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }: React.ComponentProps<\"div\"> & {\n    config: ChartConfig;\n    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>[\"children\"];\n    initialDimension?: {\n        width: number;\n        height: number;\n    };\n}) {\n    const uniqueId = React.useId();\n    const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n    return (<ChartContext.Provider value={{ config }}>\n      <div data-slot=\"chart\" data-chart={chartId} className={cn(\"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\", className)} {...props}>\n        <ChartStyle id={chartId} config={config}/>\n        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>);\n}\nconst ChartStyle = ({ id, config }: {\n    id: string;\n    config: ChartConfig;\n}) => {\n    const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);\n    if (!colorConfig.length) {\n        return null;\n    }\n    return (<style dangerouslySetInnerHTML={{\n            __html: Object.entries(THEMES)\n                .map(([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n                .map(([key, itemConfig]) => {\n                const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n                    itemConfig.color;\n                return color ? `  --color-${key}: ${color};` : null;\n            })\n                .join(\"\\n\")}\n}\n`)\n                .join(\"\\n\"),\n        }}/>);\n};\nconst ChartTooltip = RechartsPrimitive.Tooltip;\nfunction ChartTooltipContent({ active, payload, className, indicator = \"dot\", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    nameKey?: string;\n    labelKey?: string;\n} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, \"accessibilityLayer\">) {\n    const { config } = useChart();\n    const tooltipLabel = React.useMemo(() => {\n        if (hideLabel || !payload?.length) {\n            return null;\n        }\n        const [item] = payload;\n        const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n        const value = !labelKey && typeof label === \"string\"\n            ? (config[label]?.label ?? label)\n            : itemConfig?.label;\n        if (labelFormatter) {\n            return (<div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>);\n        }\n        if (!value) {\n            return null;\n        }\n        return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n    }, [\n        label,\n        labelFormatter,\n        payload,\n        hideLabel,\n        labelClassName,\n        config,\n        labelKey,\n    ]);\n    if (!active || !payload?.length) {\n        return null;\n    }\n    const nestLabel = payload.length === 1 && indicator !== \"dot\";\n    return (<div className={cn(\"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\", className)}>\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n            .filter((item) => item.type !== \"none\")\n            .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n            return (<div key={index} className={cn(\"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\", indicator === \"dot\" && \"items-center\")}>\n                {formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (<>\n                    {itemConfig?.icon ? (<itemConfig.icon />) : (!hideIndicator && (<div className={cn(\"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\", {\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\n                            \"w-1\": indicator === \"line\",\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\": indicator === \"dashed\",\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\n                        })} style={{\n                            \"--color-bg\": indicatorColor,\n                            \"--color-border\": indicatorColor,\n                        } as React.CSSProperties}/>))}\n                    <div className={cn(\"flex flex-1 justify-between leading-none\", nestLabel ? \"items-end\" : \"items-center\")}>\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 && (<span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>)}\n                    </div>\n                  </>)}\n              </div>);\n        })}\n      </div>\n    </div>);\n}\nconst ChartLegend = RechartsPrimitive.Legend;\nfunction ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey, }: React.ComponentProps<\"div\"> & {\n    hideIcon?: boolean;\n    nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n    const { config } = useChart();\n    if (!payload?.length) {\n        return null;\n    }\n    return (<div className={cn(\"flex items-center justify-center gap-4\", verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\", className)}>\n      {payload\n            .filter((item) => item.type !== \"none\")\n            .map((item, index) => {\n            const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            return (<div key={index} className={cn(\"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\")}>\n              {itemConfig?.icon && !hideIcon ? (<itemConfig.icon />) : (<div className=\"h-2 w-2 shrink-0 rounded-[2px]\" style={{\n                        backgroundColor: item.color,\n                    }}/>)}\n              {itemConfig?.label}\n            </div>);\n        })}\n    </div>);\n}\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n    if (typeof payload !== \"object\" || payload === null) {\n        return undefined;\n    }\n    const payloadPayload = \"payload\" in payload &&\n        typeof payload.payload === \"object\" &&\n        payload.payload !== null\n        ? payload.payload\n        : undefined;\n    let configLabelKey: string = key;\n    if (key in payload &&\n        typeof payload[key as keyof typeof payload] === \"string\") {\n        configLabelKey = payload[key as keyof typeof payload] as string;\n    }\n    else if (payloadPayload &&\n        key in payloadPayload &&\n        typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\") {\n        configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n    }\n    return configLabelKey in config ? config[configLabelKey] : config[key];\n}\nexport { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, };\n"
    }
  ],
  "cssVars": {
    "light": {
      "background": "#ffffff",
      "foreground": "#141414",
      "card": "#ffffff",
      "card-foreground": "#141414",
      "popover": "#ffffff",
      "popover-foreground": "#141414",
      "secondary": "#f5f5f5",
      "secondary-foreground": "#141414",
      "muted": "#f5f5f5",
      "muted-foreground": "#6b6b6b",
      "accent": "#f0f0f0",
      "accent-foreground": "#141414",
      "border": "#e6e6e6",
      "input": "#cccccc",
      "destructive": "#b91c1c",
      "syntax-text": "#242424",
      "syntax-keyword": "#754399",
      "syntax-string": "#326348",
      "syntax-function": "#315d89",
      "syntax-number": "#86551f",
      "syntax-comment": "#6b6b6b",
      "syntax-punctuation": "#616161",
      "syntax-type": "#7c464c",
      "syntax-background": "#f8f8f8",
      "sidebar": "#f5f5f5",
      "sidebar-foreground": "#141414",
      "sidebar-primary": "#141414",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#f0f0f0",
      "sidebar-accent-foreground": "#141414",
      "sidebar-border": "#e6e6e6",
      "sidebar-ring": "#141414",
      "chart-1": "#141414",
      "chart-2": "#525252",
      "chart-3": "#737373",
      "chart-4": "#a3a3a3",
      "chart-5": "#d4d4d4",
      "primary": "#141414",
      "primary-foreground": "#ffffff",
      "ring": "#141414",
      "radius": "0rem",
      "font-sans": "ui-sans-serif, system-ui, sans-serif",
      "control-height": "2rem"
    },
    "dark": {
      "background": "#141414",
      "foreground": "#fafafa",
      "card": "#1c1c1c",
      "card-foreground": "#fafafa",
      "popover": "#1c1c1c",
      "popover-foreground": "#fafafa",
      "secondary": "#262626",
      "secondary-foreground": "#fafafa",
      "muted": "#262626",
      "muted-foreground": "#a3a3a3",
      "accent": "#303030",
      "accent-foreground": "#fafafa",
      "border": "#404040",
      "input": "#404040",
      "destructive": "#ff9d9d",
      "syntax-text": "#ededed",
      "syntax-keyword": "#c6a3df",
      "syntax-string": "#98c4a4",
      "syntax-function": "#9cbedf",
      "syntax-number": "#d7b27d",
      "syntax-comment": "#a3a3a3",
      "syntax-punctuation": "#b0b0b0",
      "syntax-type": "#dda2aa",
      "syntax-background": "#1b1b1b",
      "sidebar": "#262626",
      "sidebar-foreground": "#fafafa",
      "sidebar-primary": "#fafafa",
      "sidebar-primary-foreground": "#141414",
      "sidebar-accent": "#303030",
      "sidebar-accent-foreground": "#fafafa",
      "sidebar-border": "#404040",
      "sidebar-ring": "#fafafa",
      "chart-1": "#fafafa",
      "chart-2": "#d4d4d4",
      "chart-3": "#a3a3a3",
      "chart-4": "#737373",
      "chart-5": "#525252",
      "primary": "#fafafa",
      "primary-foreground": "#141414",
      "ring": "#fafafa",
      "radius": "0rem",
      "font-sans": "ui-sans-serif, system-ui, sans-serif",
      "control-height": "2rem"
    }
  }
}