gridsmith-ui 0.4.0 → 0.6.0

package/dist/charts.js

@@ -0,0 +1,1028 @@
+import { Skeleton } from './chunk-OUYJXVLQ.js';
+import { cn, GLASS_SURFACE } from './chunk-IUBWNDUK.js';
+import { createContext, forwardRef, useId, useContext, useSyncExternalStore, useState, useLayoutEffect } from 'react';
+import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text } from 'recharts';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var CHART_TOKENS = [
+  "--ds-chart-1",
+  "--ds-chart-2",
+  "--ds-chart-3",
+  "--ds-chart-4",
+  "--ds-chart-5",
+  "--ds-chart-6"
+];
+var CHART_TOKENS_SOFT = [
+  "--ds-chart-1-soft",
+  "--ds-chart-2-soft",
+  "--ds-chart-3-soft",
+  "--ds-chart-4-soft",
+  "--ds-chart-5-soft",
+  "--ds-chart-6-soft"
+];
+var FALLBACK_COLORS = {
+  "--ds-chart-1": "#6366f1",
+  "--ds-chart-2": "#d97706",
+  "--ds-chart-3": "#059669",
+  "--ds-chart-4": "#dc2626",
+  "--ds-chart-5": "#0891b2",
+  "--ds-chart-6": "#7c3aed",
+  "--ds-chart-1-soft": "rgba(99, 102, 241, 0.3)",
+  "--ds-chart-2-soft": "rgba(217, 119, 6, 0.3)",
+  "--ds-chart-3-soft": "rgba(5, 150, 105, 0.3)",
+  "--ds-chart-4-soft": "rgba(220, 38, 38, 0.3)",
+  "--ds-chart-5-soft": "rgba(8, 145, 178, 0.3)",
+  "--ds-chart-6-soft": "rgba(124, 58, 237, 0.3)",
+  "--ds-bg-surface": "#ffffff",
+  "--ds-border-subtle": "#e5e7eb",
+  "--ds-text-primary": "#111827",
+  "--ds-text-secondary": "#6b7280",
+  "--ds-text-muted": "#9ca3af"
+};
+var modeVersion = 0;
+var subscribers = /* @__PURE__ */ new Set();
+var observerAttached = false;
+function attachObserver() {
+  if (observerAttached || typeof document === "undefined") return;
+  observerAttached = true;
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      if (m.attributeName === "data-mode") {
+        modeVersion++;
+        for (const sub of subscribers) sub();
+        break;
+      }
+    }
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-mode"]
+  });
+}
+function subscribe(cb) {
+  attachObserver();
+  subscribers.add(cb);
+  return () => {
+    subscribers.delete(cb);
+  };
+}
+function getSnapshot() {
+  return modeVersion;
+}
+function getServerSnapshot() {
+  return 0;
+}
+function resolveToken(token) {
+  if (typeof document === "undefined") return FALLBACK_COLORS[token] ?? "#6366f1";
+  const val = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+  return val || FALLBACK_COLORS[token] || "#6366f1";
+}
+function useChartColors(count, soft = false) {
+  const version = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const [colors, setColors] = useState(() => fallbackColors(count, soft));
+  useLayoutEffect(() => {
+    setColors(resolveColors(count, soft));
+  }, [count, soft, version]);
+  return colors;
+}
+function fallbackColors(count, soft) {
+  const tokens = soft ? CHART_TOKENS_SOFT : CHART_TOKENS;
+  const result = [];
+  for (let i = 0; i < count; i++) {
+    const token = tokens[i % tokens.length];
+    result.push(FALLBACK_COLORS[token] ?? "#6366f1");
+  }
+  return result;
+}
+function resolveColors(count, soft) {
+  const tokens = soft ? CHART_TOKENS_SOFT : CHART_TOKENS;
+  const result = [];
+  for (let i = 0; i < count; i++) {
+    const token = tokens[i % tokens.length];
+    result.push(resolveToken(token));
+  }
+  return result;
+}
+function useResolvedToken(token) {
+  const version = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const [value, setValue] = useState(() => FALLBACK_COLORS[token] ?? "#6366f1");
+  useLayoutEffect(() => {
+    setValue(resolveToken(token));
+  }, [token, version]);
+  return value;
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  useLayoutEffect(() => {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e) => setReduced(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return reduced;
+}
+var useChartAnimation = (animated) => {
+  const reduced = useReducedMotion();
+  return animated !== false && !reduced;
+};
+function ChartTooltipContent({ active, payload, label }) {
+  const bgSurface = useResolvedToken("--ds-bg-surface");
+  const borderSubtle = useResolvedToken("--ds-border-subtle");
+  const textPrimary = useResolvedToken("--ds-text-primary");
+  const textSecondary = useResolvedToken("--ds-text-secondary");
+  if (!active || !payload?.length) return null;
+  const showLabel = label != null && label !== "" && typeof label !== "number";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-[var(--ds-radius-md)] shadow-[var(--ds-shadow-popover)] font-[family-name:var(--ds-font-sans)] text-sm",
+      style: {
+        backgroundColor: bgSurface,
+        border: `var(--ds-border-width) solid ${borderSubtle}`,
+        padding: "var(--ds-space-2) var(--ds-space-3)"
+      },
+      children: [
+        showLabel && /* @__PURE__ */ jsx("p", { className: "font-medium mb-ds-1", style: { color: textPrimary }, children: label }),
+        payload.map((entry, i) => {
+          const dotColor = entry.payload?.fill || entry.color || textSecondary;
+          const displayName = typeof entry.payload?.name === "string" && entry.payload.name || entry.name;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", style: { marginTop: i > 0 ? 2 : 0 }, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "shrink-0 rounded-[var(--ds-radius-full)]",
+                style: { width: 8, height: 8, backgroundColor: dotColor }
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { style: { color: textSecondary }, children: [
+              displayName,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: textPrimary }, children: typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value })
+          ] }, i);
+        })
+      ]
+    }
+  );
+}
+function ChartLegendContent({ payload }) {
+  const textSecondary = useResolvedToken("--ds-text-secondary");
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-y-ds-1 gap-x-ds-4 font-[family-name:var(--ds-font-sans)] text-sm", children: payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "shrink-0 rounded-[var(--ds-radius-full)]",
+        style: { width: 8, height: 8, backgroundColor: entry.color }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { style: { color: textSecondary }, children: entry.value })
+  ] }, i)) });
+}
+function useGridStroke() {
+  return useResolvedToken("--ds-border-subtle");
+}
+function useAxisStyle() {
+  const textMuted = useResolvedToken("--ds-text-muted");
+  return {
+    tick: {
+      fontSize: "var(--ds-font-size-xs)",
+      fontFamily: "var(--ds-font-sans)",
+      fill: textMuted
+    }
+  };
+}
+function useRadius() {
+  const val = useResolvedToken("--ds-radius-md");
+  const parsed = parseInt(val, 10);
+  return isNaN(parsed) ? 6 : parsed;
+}
+function xAxisTick(props) {
+  const { x, y, payload, width, visibleTicksCount, ...rest } = props;
+  const tickWidth = width && visibleTicksCount ? Math.floor(width / visibleTicksCount) : 100;
+  return /* @__PURE__ */ jsx(Text, { ...rest, x, y, width: tickWidth, textAnchor: "middle", verticalAnchor: "start", maxLines: 2, children: payload.value });
+}
+function yAxisTick(props) {
+  const { x, y, payload, ...rest } = props;
+  return /* @__PURE__ */ jsx(Text, { ...rest, x, y, textAnchor: "end", verticalAnchor: "middle", width: 200, maxLines: 2, children: payload.value });
+}
+var ChartContainerContext = createContext(false);
+function useInsideChartContainer() {
+  return useContext(ChartContainerContext);
+}
+var HEIGHT_MAP = {
+  sm: "var(--ds-chart-height-sm)",
+  md: "var(--ds-chart-height-md)",
+  lg: "var(--ds-chart-height-lg)"
+};
+var ChartWrapper = forwardRef(function ChartWrapper2({ height = "md", className, children, "aria-label": ariaLabel }, ref) {
+  const insideContainer = useInsideChartContainer();
+  if (insideContainer) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("h-full w-full", className), ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children });
+  }
+  const heightValue = typeof height === "number" ? `${height}px` : HEIGHT_MAP[height];
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: { height: heightValue }, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children });
+});
+var BarChart = forwardRef(function BarChart2({
+  data,
+  bars,
+  xAxisKey,
+  height = "md",
+  stacked = false,
+  horizontal = false,
+  showGrid = true,
+  showTooltip = true,
+  showLegend,
+  xAxisLabel,
+  yAxisLabel,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const solidColors = useChartColors(bars.length, false);
+  const softColors = useChartColors(bars.length, true);
+  const gridStroke = useGridStroke();
+  const axisStyle = useAxisStyle();
+  const isAnimated = useChartAnimation(animated);
+  const radius = useRadius();
+  const legendVisible = showLegend ?? bars.length >= 2;
+  const layout = horizontal ? "vertical" : "horizontal";
+  function getBarRadius(index) {
+    if (!stacked) {
+      return horizontal ? [0, radius, radius, 0] : [radius, radius, 0, 0];
+    }
+    const isTopmost = index === bars.length - 1;
+    if (!isTopmost) return [0, 0, 0, 0];
+    return horizontal ? [0, radius, radius, 0] : [radius, radius, 0, 0];
+  }
+  const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+    BarChart$1,
+    {
+      data,
+      layout,
+      margin: { top: 4, right: 4, bottom: 4, left: 4 },
+      accessibilityLayer: true,
+      children: [
+        showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke, vertical: !horizontal, horizontal: true }),
+        horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              type: "number",
+              ...axisStyle.tick,
+              axisLine: false,
+              tickLine: false,
+              label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              dataKey: xAxisKey,
+              type: "category",
+              width: "auto",
+              ...axisStyle.tick,
+              axisLine: false,
+              tickLine: false,
+              tick: yAxisTick
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xAxisKey,
+              ...axisStyle.tick,
+              axisLine: false,
+              tickLine: false,
+              tick: xAxisTick,
+              height: "auto",
+              label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              width: "auto",
+              ...axisStyle.tick,
+              axisLine: false,
+              tickLine: false,
+              label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft", style: axisLabelStyle } : void 0
+            }
+          )
+        ] }),
+        showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: { fill: "var(--ds-bg-muted)", opacity: 0.5 } }),
+        legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
+        bars.map((bar, i) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: bar.dataKey,
+            name: bar.label ?? bar.dataKey,
+            fill: bar.soft ? softColors[i] : solidColors[i],
+            radius: getBarRadius(i),
+            stackId: stacked ? "stack" : void 0,
+            isAnimationActive: isAnimated
+          },
+          bar.dataKey
+        ))
+      ]
+    }
+  ) }) });
+});
+var LineChart = forwardRef(function LineChart2({
+  data,
+  lines,
+  xAxisKey,
+  height = "md",
+  curved = true,
+  showDots = false,
+  showGrid = true,
+  showTooltip = true,
+  showLegend,
+  xAxisLabel,
+  yAxisLabel,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const colors = useChartColors(lines.length, false);
+  const gridStroke = useGridStroke();
+  const axisStyle = useAxisStyle();
+  const isAnimated = useChartAnimation(animated);
+  const legendVisible = showLegend ?? lines.length >= 2;
+  const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 4, right: 4, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xAxisKey,
+        ...axisStyle.tick,
+        axisLine: false,
+        tickLine: false,
+        tick: xAxisTick,
+        height: "auto",
+        label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        width: "auto",
+        ...axisStyle.tick,
+        axisLine: false,
+        tickLine: false,
+        label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft", style: axisLabelStyle } : void 0
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
+    lines.map((line, i) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: curved ? "monotone" : "linear",
+        dataKey: line.dataKey,
+        name: line.label ?? line.dataKey,
+        stroke: colors[i],
+        strokeWidth: 2,
+        strokeDasharray: line.dashed ? "5 5" : void 0,
+        dot: showDots,
+        activeDot: { r: 5, strokeWidth: 2 },
+        isAnimationActive: isAnimated
+      },
+      line.dataKey
+    ))
+  ] }) }) });
+});
+var AreaChart = forwardRef(function AreaChart2({
+  data,
+  areas,
+  xAxisKey,
+  height = "md",
+  stacked = false,
+  curved = true,
+  showGrid = true,
+  showTooltip = true,
+  showLegend,
+  gradient = true,
+  xAxisLabel,
+  yAxisLabel,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const instanceId = useId();
+  const solidColors = useChartColors(areas.length, false);
+  const softColors = useChartColors(areas.length, true);
+  const gridStroke = useGridStroke();
+  const axisStyle = useAxisStyle();
+  const isAnimated = useChartAnimation(animated);
+  const legendVisible = showLegend ?? areas.length >= 2;
+  const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 4, right: 4, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx("defs", { children: areas.map((area, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-${instanceId}-${area.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: softColors[i], stopOpacity: 1 }),
+      /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: softColors[i], stopOpacity: 0.1 })
+    ] }, area.dataKey)) }),
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xAxisKey,
+        ...axisStyle.tick,
+        axisLine: false,
+        tickLine: false,
+        tick: xAxisTick,
+        height: "auto",
+        label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        width: "auto",
+        ...axisStyle.tick,
+        axisLine: false,
+        tickLine: false,
+        label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft", style: axisLabelStyle } : void 0
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
+    areas.map((area, i) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: curved ? "monotone" : "linear",
+        dataKey: area.dataKey,
+        name: area.label ?? area.dataKey,
+        stroke: solidColors[i],
+        strokeWidth: 2,
+        fill: gradient ? `url(#gradient-${instanceId}-${area.dataKey})` : softColors[i],
+        stackId: stacked ? "stack" : void 0,
+        isAnimationActive: isAnimated
+      },
+      area.dataKey
+    ))
+  ] }) }) });
+});
+var PieChart = forwardRef(function PieChart2({
+  data,
+  height = "md",
+  donut = false,
+  showTooltip = true,
+  showLegend = true,
+  showLabels = false,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const colors = useChartColors(data.length, false);
+  const isAnimated = useChartAnimation(animated);
+  const renderLabel = showLabels ? ({ percent }) => `${((percent ?? 0) * 100).toFixed(0)}%` : false;
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart$1, { accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data,
+        dataKey: "value",
+        nameKey: "name",
+        cx: "50%",
+        cy: "50%",
+        outerRadius: "75%",
+        innerRadius: donut ? "55%" : 0,
+        label: renderLabel,
+        labelLine: showLabels,
+        isAnimationActive: isAnimated,
+        fontSize: "var(--ds-font-size-xs)",
+        fontFamily: "var(--ds-font-sans)",
+        children: data.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: colors[i % colors.length] }, i))
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    showLegend && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } })
+  ] }) }) });
+});
+var CompositeChart = forwardRef(function CompositeChart2({
+  data,
+  bars,
+  lines,
+  xAxisKey,
+  height = "md",
+  dualAxis = true,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  xAxisLabel,
+  yAxisLabel,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const barSoftColors = useChartColors(bars.length, true);
+  const lineColors = useChartColors(lines.length, false);
+  const gridStroke = useGridStroke();
+  const axisStyle = useAxisStyle();
+  const isAnimated = useChartAnimation(animated);
+  const radius = useRadius();
+  const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data, margin: { top: 4, right: 4, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xAxisKey,
+        ...axisStyle.tick,
+        axisLine: false,
+        tickLine: false,
+        tick: xAxisTick,
+        height: "auto",
+        label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        yAxisId: "left",
+        width: "auto",
+        ...axisStyle.tick,
+        axisLine: false,
+        tickLine: false,
+        label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft", style: axisLabelStyle } : void 0
+      }
+    ),
+    dualAxis && /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false }),
+    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    showLegend && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
+    bars.map((bar, i) => /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: bar.dataKey,
+        name: bar.label ?? bar.dataKey,
+        fill: barSoftColors[i],
+        radius: [radius, radius, 0, 0],
+        yAxisId: "left",
+        isAnimationActive: isAnimated
+      },
+      bar.dataKey
+    )),
+    lines.map((line, i) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: "monotone",
+        dataKey: line.dataKey,
+        name: line.label ?? line.dataKey,
+        stroke: lineColors[i],
+        strokeWidth: 2,
+        strokeDasharray: line.dashed ? "5 5" : void 0,
+        dot: false,
+        yAxisId: dualAxis ? "right" : "left",
+        isAnimationActive: isAnimated
+      },
+      line.dataKey
+    ))
+  ] }) }) });
+});
+var ScatterChart = forwardRef(function ScatterChart2({
+  data,
+  xLabel,
+  yLabel,
+  height = "md",
+  showGrid = true,
+  showTooltip = true,
+  showLegend,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const colors = useChartColors(data.length, false);
+  const gridStroke = useGridStroke();
+  const axisStyle = useAxisStyle();
+  const isAnimated = useChartAnimation(animated);
+  const legendVisible = showLegend ?? data.length >= 2;
+  const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+    ScatterChart$1,
+    {
+      margin: { top: 8, right: 8, bottom: xLabel ? 20 : 4, left: yLabel ? 20 : 4 },
+      accessibilityLayer: true,
+      children: [
+        showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            type: "number",
+            dataKey: "x",
+            name: xLabel ?? "x",
+            ...axisStyle.tick,
+            axisLine: false,
+            tickLine: false,
+            label: xLabel ? { value: xLabel, position: "bottom", offset: 0, style: { ...axisLabelStyle, textAnchor: "middle" } } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            type: "number",
+            dataKey: "y",
+            name: yLabel ?? "y",
+            width: "auto",
+            ...axisStyle.tick,
+            axisLine: false,
+            tickLine: false,
+            label: yLabel ? { value: yLabel, angle: -90, position: "left", offset: 0, style: { ...axisLabelStyle, textAnchor: "middle" } } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(ZAxis, { type: "number", dataKey: "z", range: [40, 400] }),
+        showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+        legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
+        data.map((series, i) => /* @__PURE__ */ jsx(
+          Scatter,
+          {
+            name: series.name,
+            data: series.points,
+            fill: colors[i],
+            isAnimationActive: isAnimated
+          },
+          series.name
+        ))
+      ]
+    }
+  ) }) });
+});
+var RadarChart = forwardRef(function RadarChart2({
+  data,
+  dataKeys,
+  axisKey,
+  height = "md",
+  filled = true,
+  showDots = true,
+  showTooltip = true,
+  showLegend,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const solidColors = useChartColors(dataKeys.length, false);
+  const softColors = useChartColors(dataKeys.length, true);
+  const isAnimated = useChartAnimation(animated);
+  const legendVisible = showLegend ?? dataKeys.length >= 2;
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "75%", accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--ds-border-subtle)" }),
+    /* @__PURE__ */ jsx(
+      PolarAngleAxis,
+      {
+        dataKey: axisKey,
+        tick: { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: "var(--ds-text-muted)" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PolarRadiusAxis,
+      {
+        tick: { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: "var(--ds-text-muted)" },
+        axisLine: false
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    legendVisible && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } }),
+    dataKeys.map((dk, i) => /* @__PURE__ */ jsx(
+      Radar,
+      {
+        name: dk.label ?? dk.key,
+        dataKey: dk.key,
+        stroke: solidColors[i],
+        fill: filled ? softColors[i] : "transparent",
+        strokeWidth: 2,
+        dot: showDots ? { r: 3, fill: solidColors[i] } : false,
+        isAnimationActive: isAnimated
+      },
+      dk.key
+    ))
+  ] }) }) });
+});
+var RadialBarChart = forwardRef(function RadialBarChart2({
+  data,
+  height = "md",
+  showTooltip = true,
+  showLegend = true,
+  showLabels = false,
+  startAngle = 90,
+  endAngle = -270,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const colors = useChartColors(data.length, false);
+  const isAnimated = useChartAnimation(animated);
+  const chartData = data.map((d, i) => ({
+    ...d,
+    fill: colors[i % colors.length]
+  }));
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+    RadialBarChart$1,
+    {
+      data: chartData,
+      cx: "50%",
+      cy: "50%",
+      innerRadius: "20%",
+      outerRadius: "90%",
+      startAngle,
+      endAngle,
+      accessibilityLayer: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          RadialBar,
+          {
+            dataKey: "value",
+            background: { fill: "var(--ds-bg-muted)" },
+            label: showLabels ? { position: "insideStart", fill: "var(--ds-text-primary)", fontSize: "var(--ds-font-size-xs)" } : false,
+            isAnimationActive: isAnimated
+          }
+        ),
+        showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+        showLegend && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } })
+      ]
+    }
+  ) }) });
+});
+var FunnelChart = forwardRef(function FunnelChart2({
+  data,
+  height = "md",
+  showTooltip = true,
+  showLegend = true,
+  showLabels = true,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const colors = useChartColors(data.length, false);
+  const isAnimated = useChartAnimation(animated);
+  const chartData = data.map((d, i) => ({
+    ...d,
+    fill: colors[i % colors.length]
+  }));
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(FunnelChart$1, { accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx(Funnel, { dataKey: "value", data: chartData, isAnimationActive: isAnimated, children: showLabels && /* @__PURE__ */ jsx(
+      LabelList,
+      {
+        dataKey: "name",
+        position: "right",
+        fill: "var(--ds-text-primary)",
+        fontSize: "var(--ds-font-size-sm)",
+        fontFamily: "var(--ds-font-sans)"
+      }
+    ) }),
+    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    showLegend && /* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), wrapperStyle: { paddingTop: "var(--ds-space-3)" } })
+  ] }) }) });
+});
+function contrastColor(hex) {
+  const c = hex.replace("#", "");
+  if (c.length < 6) return "#ffffff";
+  const r = parseInt(c.substring(0, 2), 16);
+  const g = parseInt(c.substring(2, 4), 16);
+  const b = parseInt(c.substring(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.55 ? "#1f2937" : "#ffffff";
+}
+function TreemapContent({ x = 0, y = 0, width = 0, height: h = 0, name, depth, colors, radius, index = 0 }) {
+  const fill = colors[index % colors.length];
+  const showLabel = width > 40 && h > 20;
+  const labelColor = contrastColor(fill);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height: h,
+        fill,
+        stroke: "var(--ds-bg-surface)",
+        strokeWidth: 2,
+        rx: depth === 1 ? radius : 0,
+        style: { opacity: depth === 1 ? 1 : 0.85 }
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: y + h / 2,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: labelColor,
+        stroke: "none",
+        fontSize: "var(--ds-font-size-xs)",
+        fontFamily: "var(--ds-font-sans)",
+        style: { pointerEvents: "none" },
+        children: name
+      }
+    )
+  ] });
+}
+function addFillToNodes(nodes, colors, counter = { i: 0 }) {
+  return nodes.map((node) => {
+    if (node.children) {
+      return { ...node, children: addFillToNodes(node.children, colors, counter) };
+    }
+    const fill = colors[counter.i % colors.length];
+    counter.i++;
+    return { ...node, fill };
+  });
+}
+var TreemapChart = forwardRef(function TreemapChart2({
+  data,
+  height = "md",
+  showTooltip = true,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const colors = useChartColors(6, false);
+  const isAnimated = useChartAnimation(animated);
+  const radius = useRadius();
+  const chartData = addFillToNodes(data, colors);
+  if (!data?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
+    Treemap,
+    {
+      data: chartData,
+      dataKey: "value",
+      nameKey: "name",
+      aspectRatio: 4 / 3,
+      stroke: "var(--ds-bg-surface)",
+      isAnimationActive: isAnimated,
+      content: /* @__PURE__ */ jsx(TreemapContent, { colors, radius }),
+      children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
+    }
+  ) }) });
+});
+var SankeyChart = forwardRef(function SankeyChart2({
+  data,
+  height = "md",
+  showTooltip = true,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const colors = useChartColors(data.nodes.length, false);
+  const linkStroke = useResolvedToken("--ds-border-subtle");
+  const nodesWithColor = data.nodes.map((node, i) => ({
+    ...node,
+    fill: colors[i % colors.length]
+  }));
+  const sankeyData = {
+    nodes: nodesWithColor,
+    links: data.links
+  };
+  if (!data?.nodes?.length) return null;
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
+    Sankey,
+    {
+      data: sankeyData,
+      nodeWidth: 10,
+      nodePadding: 24,
+      margin: { top: 8, right: 8, bottom: 8, left: 8 },
+      link: { stroke: linkStroke, strokeOpacity: 0.4 },
+      children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
+    }
+  ) }) });
+});
+var Sparkline = forwardRef(function Sparkline2({
+  data,
+  variant = "line",
+  color = 1,
+  height = 40,
+  width = "100%",
+  showTooltip = false,
+  curved = true,
+  animated,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const instanceId = useId();
+  const isAnimated = useChartAnimation(animated);
+  const insideContainer = useInsideChartContainer();
+  const tokenName = `--ds-chart-${color}`;
+  const softTokenName = `--ds-chart-${color}-soft`;
+  const chartColor = useResolvedToken(tokenName);
+  const softColor = useResolvedToken(softTokenName);
+  const chartData = data.map((value, i) => ({ value, index: i }));
+  const containerStyle = insideContainer ? { width: "100%", height: "100%" } : { width: typeof width === "number" ? `${width}px` : width, height: `${height}px` };
+  if (!data?.length) return null;
+  if (variant === "bar") {
+    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart$1, { data: chartData, margin: { top: 0, right: 0, bottom: 0, left: 0 }, children: [
+      /* @__PURE__ */ jsx(XAxis, { dataKey: "index", hide: true }),
+      /* @__PURE__ */ jsx(YAxis, { hide: true }),
+      showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: false }),
+      /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: "value",
+          fill: chartColor,
+          radius: [2, 2, 0, 0],
+          isAnimationActive: isAnimated
+        }
+      )
+    ] }) }) });
+  }
+  if (variant === "area") {
+    const gradientId = `sparkline-gradient-${instanceId}-${color}`;
+    return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: softColor, stopOpacity: 1 }),
+        /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: softColor, stopOpacity: 0.1 })
+      ] }) }),
+      /* @__PURE__ */ jsx(XAxis, { dataKey: "index", hide: true }),
+      /* @__PURE__ */ jsx(YAxis, { hide: true, domain: ["dataMin - 1", "dataMax + 1"] }),
+      showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: false }),
+      /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: curved ? "monotone" : "linear",
+          dataKey: "value",
+          stroke: chartColor,
+          strokeWidth: 1.5,
+          fill: `url(#${gradientId})`,
+          dot: false,
+          activeDot: showTooltip ? { r: 3, fill: chartColor } : false,
+          isAnimationActive: isAnimated
+        }
+      )
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { ref, style: containerStyle, className, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: [
+    /* @__PURE__ */ jsx(XAxis, { dataKey: "index", hide: true }),
+    /* @__PURE__ */ jsx(YAxis, { hide: true, domain: ["dataMin - 1", "dataMax + 1"] }),
+    showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: false }),
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: curved ? "monotone" : "linear",
+        dataKey: "value",
+        stroke: chartColor,
+        strokeWidth: 1.5,
+        dot: false,
+        activeDot: showTooltip ? { r: 3, fill: chartColor } : false,
+        isAnimationActive: isAnimated
+      }
+    )
+  ] }) }) });
+});
+var HEIGHT_MAP2 = {
+  sm: "var(--ds-chart-height-sm)",
+  md: "var(--ds-chart-height-md)",
+  lg: "var(--ds-chart-height-lg)"
+};
+function ChartContainer({
+  height = "md",
+  title,
+  loading = false,
+  emptyState,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-[var(--ds-radius-md)]",
+        "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+        GLASS_SURFACE,
+        "p-ds-4",
+        className
+      ),
+      children: [
+        title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)] mb-ds-4", children: title }),
+        /* @__PURE__ */ jsx("div", { style: { height: HEIGHT_MAP2[height] }, className: "relative", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end h-full gap-ds-2 px-ds-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-end h-full gap-ds-1", children: [65, 40, 80, 55, 72, 45, 60].map((h, i) => /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              variant: "custom",
+              className: "flex-1",
+              height: `${h}%`
+            },
+            i
+          )) }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 1, className: "w-full" })
+        ] }) : children ? /* @__PURE__ */ jsx(ChartContainerContext.Provider, { value: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children }) }) : emptyState ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex items-center justify-center", children: emptyState }) : null })
+      ]
+    }
+  );
+}
+
+export { AreaChart, BarChart, ChartContainer, CompositeChart, FunnelChart, LineChart, PieChart, RadarChart, RadialBarChart, SankeyChart, ScatterChart, Sparkline, TreemapChart, useChartColors };
+//# sourceMappingURL=charts.js.map
+//# sourceMappingURL=charts.js.map