@hanzo/ui 4.8.5 → 4.9.0

package/dist/charts/index.mjs

@@ -0,0 +1,901 @@
+import { cn } from '../chunk-TH2UKMCO.mjs';
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Area, BarChart as BarChart$1, Bar, LineChart as LineChart$1, Line, PieChart as PieChart$1, Pie, Cell, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart, RadialBar } from 'recharts';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var THEMES = { light: "", dark: ".dark" };
+var ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+var ChartContainer = React.forwardRef(({ id, className, children, config, brand = "hanzo", ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config, brand }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-chart": chartId,
+      "data-brand": brand,
+      ref,
+      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-none [&_.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[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+});
+ChartContainer.displayName = "Chart";
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme || config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+var ChartTooltipContent = React.forwardRef(
+  ({
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey
+  }, ref) => {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+      const [item] = payload;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+      if (labelFormatter) {
+        return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      }
+      if (!value) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey
+    ]);
+    if (!active || !payload?.length) {
+      return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        ),
+        children: [
+          !nestLabel ? tooltipLabel : null,
+          /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                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"
+                ),
+                children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                        {
+                          "h-2.5 w-2.5": indicator === "dot",
+                          "w-1": indicator === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                          "my-0.5": nestLabel && indicator === "dashed"
+                        }
+                      ),
+                      style: {
+                        "--color-bg": indicatorColor,
+                        "--color-border": indicatorColor
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                          nestLabel ? tooltipLabel : null,
+                          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                        ] }),
+                        item.value && /* @__PURE__ */ jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              item.dataKey
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+var ChartLegend = RechartsPrimitive.Legend;
+var ChartLegendContent = React.forwardRef(
+  ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+    if (!payload?.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        ),
+        children: payload.filter((item) => item.type !== "none").map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              ),
+              children: [
+                itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-2 w-2 shrink-0 rounded-[2px]",
+                    style: {
+                      backgroundColor: item.color
+                    }
+                  }
+                ),
+                itemConfig?.label
+              ]
+            },
+            item.value
+          );
+        })
+      }
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegend";
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+var AreaChart = React.forwardRef(
+  ({
+    data,
+    config,
+    dataKey,
+    xAxisKey = "name",
+    yAxisKey,
+    margin = { left: 12, right: 12 },
+    showGrid = true,
+    showXAxis = true,
+    showYAxis = false,
+    showTooltip = true,
+    gradient = false,
+    stacked = false,
+    strokeWidth = 2,
+    fillOpacity = 0.4,
+    type = "natural",
+    className,
+    ...props
+  }, ref) => {
+    const chartDataKeys = React.useMemo(() => {
+      if (Array.isArray(dataKey)) return dataKey;
+      return [dataKey];
+    }, [dataKey]);
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(
+      AreaChart$1,
+      {
+        data,
+        margin,
+        accessibilityLayer: true,
+        children: [
+          showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+          showXAxis && /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xAxisKey,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              tickFormatter: (value) => value?.toString().slice(0, 3)
+            }
+          ),
+          showYAxis && yAxisKey && /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              dataKey: yAxisKey,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8
+            }
+          ),
+          showTooltip && /* @__PURE__ */ jsx(
+            ChartTooltip,
+            {
+              cursor: false,
+              content: /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: "line" })
+            }
+          ),
+          chartDataKeys.map((key, index) => /* @__PURE__ */ jsx(
+            Area,
+            {
+              dataKey: key,
+              type,
+              fill: `var(--color-${key})`,
+              fillOpacity,
+              stroke: `var(--color-${key})`,
+              strokeWidth,
+              stackId: stacked ? "a" : void 0
+            },
+            key
+          )),
+          gradient && /* @__PURE__ */ jsx("defs", { children: chartDataKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-${key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: `var(--color-${key})`, stopOpacity: 0.8 }),
+            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: `var(--color-${key})`, stopOpacity: 0.1 })
+          ] }, key)) })
+        ]
+      }
+    ) }) });
+  }
+);
+AreaChart.displayName = "AreaChart";
+var BarChart = React.forwardRef(
+  ({
+    data,
+    config,
+    dataKey,
+    xAxisKey = "name",
+    yAxisKey,
+    margin = { left: 12, right: 12 },
+    showGrid = true,
+    showXAxis = true,
+    showYAxis = false,
+    showTooltip = true,
+    horizontal = false,
+    stacked = false,
+    radius = 8,
+    barGap = 4,
+    barCategoryGap = "10%",
+    className,
+    ...props
+  }, ref) => {
+    const chartDataKeys = React.useMemo(() => {
+      if (Array.isArray(dataKey)) return dataKey;
+      return [dataKey];
+    }, [dataKey]);
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(
+      BarChart$1,
+      {
+        data,
+        margin,
+        accessibilityLayer: true,
+        layout: horizontal ? "horizontal" : "vertical",
+        barGap,
+        barCategoryGap,
+        children: [
+          showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: !horizontal }),
+          showXAxis && /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              type: horizontal ? "number" : "category",
+              dataKey: horizontal ? void 0 : xAxisKey,
+              tickLine: false,
+              tickMargin: 10,
+              axisLine: false,
+              tickFormatter: horizontal ? void 0 : (value) => value?.toString().slice(0, 3)
+            }
+          ),
+          showYAxis && /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              type: horizontal ? "category" : "number",
+              dataKey: horizontal ? xAxisKey : yAxisKey,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              tickFormatter: horizontal ? (value) => value?.toString().slice(0, 3) : void 0
+            }
+          ),
+          showTooltip && /* @__PURE__ */ jsx(
+            ChartTooltip,
+            {
+              cursor: false,
+              content: /* @__PURE__ */ jsx(ChartTooltipContent, { hideLabel: !stacked })
+            }
+          ),
+          chartDataKeys.map((key, index) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: key,
+              fill: `var(--color-${key})`,
+              radius,
+              stackId: stacked ? "a" : void 0
+            },
+            key
+          ))
+        ]
+      }
+    ) }) });
+  }
+);
+BarChart.displayName = "BarChart";
+var LineChart = React.forwardRef(
+  ({
+    data,
+    config,
+    dataKey,
+    xAxisKey = "name",
+    yAxisKey,
+    margin = { left: 12, right: 12 },
+    showGrid = true,
+    showXAxis = true,
+    showYAxis = false,
+    showTooltip = true,
+    showDots = false,
+    strokeWidth = 2,
+    type = "monotone",
+    connectNulls = false,
+    activeDot = true,
+    className,
+    ...props
+  }, ref) => {
+    const chartDataKeys = React.useMemo(() => {
+      if (Array.isArray(dataKey)) return dataKey;
+      return [dataKey];
+    }, [dataKey]);
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(
+      LineChart$1,
+      {
+        data,
+        margin,
+        accessibilityLayer: true,
+        children: [
+          showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+          showXAxis && /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xAxisKey,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              tickFormatter: (value) => value?.toString().slice(0, 3)
+            }
+          ),
+          showYAxis && yAxisKey && /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              dataKey: yAxisKey,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8
+            }
+          ),
+          showTooltip && /* @__PURE__ */ jsx(
+            ChartTooltip,
+            {
+              cursor: false,
+              content: /* @__PURE__ */ jsx(ChartTooltipContent, {})
+            }
+          ),
+          chartDataKeys.map((key, index) => /* @__PURE__ */ jsx(
+            Line,
+            {
+              dataKey: key,
+              type,
+              stroke: `var(--color-${key})`,
+              strokeWidth,
+              dot: showDots ? { fill: `var(--color-${key})`, strokeWidth: 2 } : false,
+              activeDot: activeDot ? { r: 6, fill: `var(--color-${key})` } : false,
+              connectNulls
+            },
+            key
+          ))
+        ]
+      }
+    ) }) });
+  }
+);
+LineChart.displayName = "LineChart";
+var PieChart = React.forwardRef(
+  ({
+    data,
+    config,
+    dataKey,
+    nameKey = "name",
+    cx = "50%",
+    cy = "50%",
+    innerRadius = 0,
+    outerRadius = 80,
+    showTooltip = true,
+    showLegend = false,
+    startAngle = 90,
+    endAngle = 450,
+    paddingAngle = 0,
+    stroke = "transparent",
+    strokeWidth = 1,
+    className,
+    ...props
+  }, ref) => {
+    const enhancedData = React.useMemo(() => {
+      return data.map((item, index) => {
+        const itemKey = item[nameKey] || index.toString();
+        const configItem = config[itemKey];
+        return {
+          ...item,
+          fill: item.fill || configItem?.color || `var(--color-${itemKey})` || `hsl(var(--chart-${index % 5 + 1}))`
+        };
+      });
+    }, [data, config, nameKey]);
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(PieChart$1, { accessibilityLayer: true, children: [
+      showTooltip && /* @__PURE__ */ jsx(
+        ChartTooltip,
+        {
+          cursor: false,
+          content: /* @__PURE__ */ jsx(ChartTooltipContent, { hideLabel: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Pie,
+        {
+          data: enhancedData,
+          dataKey,
+          nameKey,
+          cx,
+          cy,
+          innerRadius,
+          outerRadius,
+          startAngle,
+          endAngle,
+          paddingAngle,
+          stroke,
+          strokeWidth,
+          children: enhancedData.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: entry.fill }, `cell-${index}`))
+        }
+      ),
+      showLegend && /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          content: /* @__PURE__ */ jsx(ChartLegendContent, { nameKey }),
+          verticalAlign: "bottom"
+        }
+      )
+    ] }) }) });
+  }
+);
+PieChart.displayName = "PieChart";
+var DonutChart = React.forwardRef(
+  ({ innerRadius = 60, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(PieChart, { ref, innerRadius, ...props });
+  }
+);
+DonutChart.displayName = "DonutChart";
+var RadarChart = React.forwardRef(
+  ({
+    data,
+    config,
+    dataKey,
+    angleKey = "name",
+    radiusKey,
+    cx = "50%",
+    cy = "50%",
+    outerRadius = "80%",
+    showTooltip = true,
+    showLegend = false,
+    showGrid = true,
+    showAngleAxis = true,
+    showRadiusAxis = false,
+    fillOpacity = 0.6,
+    strokeWidth = 2,
+    gridType = "polygon",
+    tick = true,
+    tickCount = 5,
+    className,
+    ...props
+  }, ref) => {
+    const chartDataKeys = React.useMemo(() => {
+      if (Array.isArray(dataKey)) return dataKey;
+      return [dataKey];
+    }, [dataKey]);
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(
+      RadarChart$1,
+      {
+        data,
+        cx,
+        cy,
+        outerRadius,
+        accessibilityLayer: true,
+        children: [
+          showGrid && /* @__PURE__ */ jsx(
+            PolarGrid,
+            {
+              gridType,
+              radialLines: gridType === "polygon"
+            }
+          ),
+          showAngleAxis && /* @__PURE__ */ jsx(
+            PolarAngleAxis,
+            {
+              dataKey: angleKey,
+              tick,
+              tickFormatter: (value) => value?.toString().slice(0, 3)
+            }
+          ),
+          showRadiusAxis && /* @__PURE__ */ jsx(
+            PolarRadiusAxis,
+            {
+              dataKey: radiusKey,
+              tick,
+              tickCount,
+              angle: 90,
+              domain: [0, "dataMax"]
+            }
+          ),
+          showTooltip && /* @__PURE__ */ jsx(
+            ChartTooltip,
+            {
+              cursor: false,
+              content: /* @__PURE__ */ jsx(ChartTooltipContent, {})
+            }
+          ),
+          chartDataKeys.map((key, index) => /* @__PURE__ */ jsx(
+            Radar,
+            {
+              dataKey: key,
+              stroke: `var(--color-${key})`,
+              fill: `var(--color-${key})`,
+              fillOpacity,
+              strokeWidth,
+              dot: {
+                r: 4,
+                fill: `var(--color-${key})`,
+                strokeWidth: 2,
+                stroke: "var(--background)"
+              }
+            },
+            key
+          )),
+          showLegend && /* @__PURE__ */ jsx(
+            ChartLegend,
+            {
+              content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
+              verticalAlign: "bottom"
+            }
+          )
+        ]
+      }
+    ) }) });
+  }
+);
+RadarChart.displayName = "RadarChart";
+var RadialChart = React.forwardRef(
+  ({
+    data,
+    config,
+    dataKey,
+    nameKey = "name",
+    cx = "50%",
+    cy = "50%",
+    innerRadius = "30%",
+    outerRadius = "80%",
+    startAngle = 90,
+    endAngle = -270,
+    showTooltip = true,
+    showLegend = false,
+    showBackground = true,
+    cornerRadius = 4,
+    stackId,
+    label = false,
+    className,
+    ...props
+  }, ref) => {
+    const chartDataKeys = React.useMemo(() => {
+      if (Array.isArray(dataKey)) return dataKey;
+      return [dataKey];
+    }, [dataKey]);
+    const enhancedData = React.useMemo(() => {
+      return data.map((item, index) => {
+        const itemKey = item[nameKey] || index.toString();
+        const configItem = config[itemKey];
+        return {
+          ...item,
+          fill: item.fill || configItem?.color || `var(--color-${itemKey})` || `hsl(var(--chart-${index % 5 + 1}))`
+        };
+      });
+    }, [data, config, nameKey]);
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(
+      RadialBarChart,
+      {
+        data: enhancedData,
+        cx,
+        cy,
+        innerRadius,
+        outerRadius,
+        startAngle,
+        endAngle,
+        accessibilityLayer: true,
+        children: [
+          /* @__PURE__ */ jsx(
+            PolarAngleAxis,
+            {
+              type: "number",
+              domain: [0, 100],
+              angleAxisId: 0,
+              tick: false
+            }
+          ),
+          showTooltip && /* @__PURE__ */ jsx(
+            ChartTooltip,
+            {
+              cursor: false,
+              content: /* @__PURE__ */ jsx(ChartTooltipContent, { hideLabel: true })
+            }
+          ),
+          chartDataKeys.map((key, index) => /* @__PURE__ */ jsx(
+            RadialBar,
+            {
+              dataKey: key,
+              stackId,
+              cornerRadius,
+              fill: `var(--color-${key})`,
+              className: "stroke-transparent stroke-2",
+              background: showBackground ? { fill: "var(--muted)" } : false,
+              label
+            },
+            key
+          )),
+          showLegend && /* @__PURE__ */ jsx(
+            ChartLegend,
+            {
+              content: /* @__PURE__ */ jsx(ChartLegendContent, { nameKey }),
+              verticalAlign: "bottom"
+            }
+          )
+        ]
+      }
+    ) }) });
+  }
+);
+RadialChart.displayName = "RadialChart";
+
+// src/charts/chart-config.tsx
+var chartColorPalettes = {
+  hanzo: {
+    light: [
+      "oklch(0.65 0.18 35)",
+      // Neutral warm
+      "oklch(0.55 0.15 165)",
+      // Neutral cool
+      "oklch(0.45 0.12 195)",
+      // Neutral blue
+      "oklch(0.7 0.18 55)",
+      // Neutral yellow
+      "oklch(0.65 0.22 40)",
+      // Neutral orange
+      "oklch(0.5 0.1 220)",
+      // Neutral indigo
+      "oklch(0.6 0.15 280)",
+      // Neutral purple
+      "oklch(0.55 0.2 340)"
+      // Neutral pink
+    ],
+    dark: [
+      "oklch(0.5 0.17 220)",
+      // Cool blue
+      "oklch(0.45 0.15 160)",
+      // Cool green
+      "oklch(0.55 0.2 30)",
+      // Warm orange
+      "oklch(0.6 0.16 280)",
+      // Cool purple
+      "oklch(0.55 0.18 340)",
+      // Cool pink
+      "oklch(0.5 0.15 100)",
+      // Neutral green
+      "oklch(0.45 0.18 60)",
+      // Warm yellow
+      "oklch(0.6 0.12 200)"
+      // Cool cyan
+    ]
+  },
+  lux: {
+    light: [
+      "oklch(0.15 0 0)",
+      // Deep black
+      "oklch(0.35 0 0)",
+      // Dark gray
+      "oklch(0.55 0 0)",
+      // Medium gray
+      "oklch(0.75 0 0)",
+      // Light gray
+      "oklch(0.25 0 0)",
+      // Charcoal
+      "oklch(0.45 0 0)",
+      // Medium-dark gray
+      "oklch(0.85 0 0)",
+      // Very light gray
+      "oklch(0.65 0 0)"
+      // Medium-light gray
+    ],
+    dark: [
+      "oklch(0.985 0 0)",
+      // Pure white
+      "oklch(0.75 0 0)",
+      // Light gray
+      "oklch(0.55 0 0)",
+      // Medium gray
+      "oklch(0.35 0 0)",
+      // Dark gray
+      "oklch(0.85 0 0)",
+      // Very light gray
+      "oklch(0.65 0 0)",
+      // Medium-light gray
+      "oklch(0.25 0 0)",
+      // Charcoal
+      "oklch(0.45 0 0)"
+      // Medium-dark gray
+    ]
+  },
+  zoo: {
+    light: [
+      "oklch(0.6 0.35 0)",
+      // Red
+      "oklch(0.65 0.35 120)",
+      // Green
+      "oklch(0.55 0.35 240)",
+      // Blue
+      "oklch(0.7 0.35 180)",
+      // Cyan
+      "oklch(0.65 0.35 300)",
+      // Magenta
+      "oklch(0.75 0.35 60)",
+      // Yellow
+      "oklch(0.6 0.35 30)",
+      // Orange
+      "oklch(0.55 0.35 270)"
+      // Violet
+    ],
+    dark: [
+      "oklch(0.7 0.4 0)",
+      // Bright red
+      "oklch(0.75 0.4 120)",
+      // Bright green
+      "oklch(0.65 0.4 240)",
+      // Bright blue
+      "oklch(0.8 0.4 180)",
+      // Bright cyan
+      "oklch(0.75 0.4 300)",
+      // Bright magenta
+      "oklch(0.85 0.4 60)",
+      // Bright yellow
+      "oklch(0.7 0.4 30)",
+      // Bright orange
+      "oklch(0.65 0.4 270)"
+      // Bright violet
+    ]
+  }
+};
+function createBrandChartConfig(brand = "hanzo", mode = "light", variables = []) {
+  const palette = chartColorPalettes[brand][mode];
+  const config = {};
+  for (let i = 1; i <= 8; i++) {
+    config[`chart-${i}`] = {
+      color: palette[i - 1] || palette[0]
+    };
+  }
+  variables.forEach((variable, index) => {
+    config[variable] = {
+      color: palette[index % palette.length]
+    };
+  });
+  return config;
+}
+function getChartColor(key, brand = "hanzo", mode = "light", index = 0) {
+  const palette = chartColorPalettes[brand][mode];
+  return palette[index % palette.length];
+}
+var hanzoChartConfig = createBrandChartConfig("hanzo");
+var luxChartConfig = createBrandChartConfig("lux");
+var zooChartConfig = createBrandChartConfig("zoo");
+function createEnhancedChartConfig(brand = "hanzo", variables = []) {
+  const lightPalette = chartColorPalettes[brand].light;
+  const darkPalette = chartColorPalettes[brand].dark;
+  const config = {};
+  for (let i = 1; i <= 8; i++) {
+    config[`chart-${i}`] = {
+      theme: {
+        light: lightPalette[i - 1] || lightPalette[0],
+        dark: darkPalette[i - 1] || darkPalette[0]
+      }
+    };
+  }
+  variables.forEach((variable, index) => {
+    config[variable] = {
+      theme: {
+        light: lightPalette[index % lightPalette.length],
+        dark: darkPalette[index % darkPalette.length]
+      }
+    };
+  });
+  return config;
+}
+var enhancedHanzoChartConfig = createEnhancedChartConfig("hanzo");
+var enhancedLuxChartConfig = createEnhancedChartConfig("lux");
+var enhancedZooChartConfig = createEnhancedChartConfig("zoo");
+
+export { AreaChart, BarChart, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, DonutChart, LineChart, PieChart, RadarChart, RadialChart, chartColorPalettes, createBrandChartConfig, createEnhancedChartConfig, enhancedHanzoChartConfig, enhancedLuxChartConfig, enhancedZooChartConfig, getChartColor, hanzoChartConfig, luxChartConfig, zooChartConfig };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map