bruv-ui 0.2.0

package/dist/composed-chart.js

@@ -0,0 +1,2338 @@
+// src/components/charts/chart.tsx
+import * as RechartsPrimitive from "recharts";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ "text-cui": ["sm", "base", "lg", "xl"] }],
+      "text-color": [
+        {
+          "text-cui": [
+            "primary",
+            "secondary",
+            "tertiary",
+            "inverse",
+            "accent",
+            "accent-on",
+            "danger",
+            "danger-on",
+            "warn",
+            "warn-on",
+            "success",
+            "success-on"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/charts/chart.tsx
+import {
+  forwardRef,
+  useId,
+  createContext,
+  useContext
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var THEMES = { light: "", dark: '[data-theme="dark"]' };
+var VALID_THEME_KEYS = Object.keys(THEMES);
+var DEFAULT_PALETTE = [
+  "var(--color-bruv-chart-1)",
+  "var(--color-bruv-chart-2)",
+  "var(--color-bruv-chart-3)",
+  "var(--color-bruv-chart-4)",
+  "var(--color-bruv-chart-5)",
+  "var(--color-bruv-chart-6)"
+];
+var ChartContext = createContext(null);
+function useChart() {
+  const context = useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <Chart />");
+  }
+  return context;
+}
+function validateChartConfigColors(config) {
+  for (const [key, value] of Object.entries(config)) {
+    if (value.colors) {
+      const hasValidThemeKey = VALID_THEME_KEYS.some(
+        (themeKey) => value.colors?.[themeKey] !== void 0
+      );
+      if (!hasValidThemeKey) {
+        throw new Error(
+          `[BruvCharts] Invalid chart config for "${key}": colors object must have at least one theme key (${VALID_THEME_KEYS.join(", ")}).`
+        );
+      }
+    }
+  }
+}
+function applyDefaultChartColors(config) {
+  const entries = Object.entries(config);
+  return Object.fromEntries(
+    entries.map(([key, item], index) => {
+      if (item.colors || item.color) {
+        if (item.color && !item.colors) {
+          return [
+            key,
+            {
+              ...item,
+              colors: {
+                light: [item.color],
+                dark: [item.color]
+              }
+            }
+          ];
+        }
+        return [key, item];
+      }
+      const paletteColor = DEFAULT_PALETTE[index % DEFAULT_PALETTE.length] ?? DEFAULT_PALETTE[0];
+      return [
+        key,
+        {
+          ...item,
+          colors: {
+            light: [paletteColor],
+            dark: [paletteColor]
+          }
+        }
+      ];
+    })
+  );
+}
+var Chart = forwardRef(function Chart2({
+  id,
+  config,
+  initialDimension = { width: 320, height: 200 },
+  className,
+  children,
+  footer,
+  ...props
+}, ref) {
+  const uniqueId = useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+  const resolvedConfig = applyDefaultChartColors(config);
+  validateChartConfigColors(resolvedConfig);
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config: resolvedConfig }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "bruv-chart relative flex min-h-0 w-full flex-1 flex-col justify-center text-bruv-sm text-bruv-secondary",
+        "[&_.recharts-cartesian-axis-tick_text]:fill-bruv-chart-axis [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-bruv-chart-grid/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-bruv-chart-cursor [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-bruv-chart-grid [&_.recharts-radial-bar-background-sector]:fill-bruv-subtle [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-bruv-subtle [&_.recharts-reference-line_[stroke='#ccc']]:stroke-bruv-chart-grid [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        !footer && "aspect-video",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config: resolvedConfig }),
+        /* @__PURE__ */ jsx(
+          RechartsPrimitive.ResponsiveContainer,
+          {
+            className: "min-h-0 w-full flex-1",
+            initialDimension,
+            children
+          }
+        ),
+        footer
+      ]
+    }
+  ) });
+});
+function LoadingIndicator({ isLoading }) {
+  if (!isLoading) return null;
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "border-bruv-neutral bg-bruv-base-2 text-bruv-sm text-bruv-primary rounded-bruv-md flex items-center justify-center gap-2 border px-2 py-0.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-bruv-neutral border-t-bruv-accent size-3 animate-spin rounded-full border" }),
+    /* @__PURE__ */ jsx("span", { children: "Loading" })
+  ] }) });
+}
+function distributeColors(colorsArray, maxCount) {
+  const availableCount = colorsArray.length;
+  if (availableCount >= maxCount) {
+    return colorsArray.slice(0, maxCount);
+  }
+  const result = [];
+  const baseSlots = Math.floor(maxCount / availableCount);
+  const extraSlots = maxCount % availableCount;
+  for (let colorIdx = 0; colorIdx < availableCount; colorIdx++) {
+    const isExtraColor = colorIdx >= availableCount - extraSlots;
+    const slotsForThisColor = baseSlots + (isExtraColor ? 1 : 0);
+    for (let j = 0; j < slotsForThisColor; j++) {
+      const color = colorsArray[colorIdx];
+      if (color) result.push(color);
+    }
+  }
+  return result;
+}
+function ChartStyle({
+  id,
+  config
+}) {
+  const colorConfig = Object.entries(config).filter(([, item]) => item.colors);
+  if (!colorConfig.length) return null;
+  const generateCssVars = (theme) => colorConfig.flatMap(([key, itemConfig]) => {
+    const colorsArray = itemConfig.colors?.[theme];
+    if (!colorsArray?.length) return [];
+    const maxCount = getColorsCount(itemConfig);
+    const distributedColors = distributeColors(colorsArray, maxCount);
+    return distributedColors.map(
+      (color, index) => `  --color-${key}-${index}: ${color};`
+    );
+  }).filter(Boolean).join("\n");
+  const css = Object.entries(THEMES).map(
+    ([theme, prefix]) => `${prefix} [data-chart=${id}] {
+${generateCssVars(theme)}
+}`
+  ).join("\n");
+  return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: css } });
+}
+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];
+}
+function getColorsCount(config) {
+  if (!config.colors) return 1;
+  const counts = VALID_THEME_KEYS.map(
+    (theme) => config.colors?.[theme]?.length ?? 0
+  );
+  return Math.max(...counts, 1);
+}
+var getLoadingData = (points = 10, min = 0, max = 70) => {
+  const range = max - min;
+  return Array.from({ length: points }, () => ({
+    loading: Math.floor(Math.random() * range) + min
+  }));
+};
+
+// src/components/charts/chart-brush.tsx
+import {
+  motion,
+  useMotionValue,
+  useMotionValueEvent,
+  useSpring,
+  useTransform
+} from "motion/react";
+import {
+  ResponsiveContainer as ResponsiveContainer2,
+  AreaChart,
+  Area,
+  LineChart,
+  Line,
+  BarChart,
+  Bar
+} from "recharts";
+import { useCallback, useEffect } from "react";
+import * as React from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SPRING_CONFIG = { stiffness: 300, damping: 35, mass: 0.8 };
+function useBrushDrag({
+  range,
+  totalPoints,
+  containerRef,
+  commit
+}) {
+  const dragRef = React.useRef(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const toIndexDelta = useCallback(
+    (px) => {
+      if (!containerRef.current || totalPoints <= 1) return 0;
+      return Math.round(
+        px / containerRef.current.getBoundingClientRect().width * (totalPoints - 1)
+      );
+    },
+    [totalPoints, containerRef]
+  );
+  const onPointerDown = useCallback(
+    (e, type) => {
+      e.preventDefault();
+      e.target.setPointerCapture(e.pointerId);
+      dragRef.current = { type, originX: e.clientX, originRange: { ...range } };
+      setIsDragging(true);
+    },
+    [range]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      const d = dragRef.current;
+      if (!d) return;
+      const delta = toIndexDelta(e.clientX - d.originX);
+      const { type, originRange: o } = d;
+      if (type === "left") {
+        commit(
+          { startIndex: o.startIndex + delta, endIndex: o.endIndex },
+          "left"
+        );
+      } else if (type === "right") {
+        commit(
+          { startIndex: o.startIndex, endIndex: o.endIndex + delta },
+          "right"
+        );
+      } else {
+        const span = o.endIndex - o.startIndex;
+        let s = o.startIndex + delta;
+        let e2 = s + span;
+        if (s < 0) {
+          s = 0;
+          e2 = span;
+        }
+        if (e2 > totalPoints - 1) {
+          e2 = totalPoints - 1;
+          s = Math.max(0, e2 - span);
+        }
+        commit({ startIndex: s, endIndex: e2 }, "middle");
+      }
+    },
+    [toIndexDelta, totalPoints, commit]
+  );
+  const onPointerUp = useCallback((e) => {
+    ;
+    e.target.releasePointerCapture(e.pointerId);
+    dragRef.current = null;
+    setIsDragging(false);
+  }, []);
+  const bind = useCallback(
+    (type) => ({
+      onPointerDown: (e) => onPointerDown(e, type),
+      onPointerMove,
+      onPointerUp
+    }),
+    [onPointerDown, onPointerMove, onPointerUp]
+  );
+  return { isDragging, bind };
+}
+function Brush({
+  data,
+  chartConfig,
+  dataKeys,
+  xDataKey,
+  variant = "area",
+  height = 56,
+  className,
+  stacked = false,
+  strokeVariant = "solid",
+  connectNulls = false,
+  barRadius,
+  startIndex: controlledStart,
+  endIndex: controlledEnd,
+  defaultStartIndex = 0,
+  defaultEndIndex,
+  onChange,
+  formatLabel,
+  curveType = "monotone",
+  minSpan = 2,
+  showLabels = true,
+  skipStyle = false
+}) {
+  const containerRef = React.useRef(null);
+  const keys = React.useMemo(
+    () => dataKeys ?? Object.keys(chartConfig),
+    [dataKeys, chartConfig]
+  );
+  const totalPoints = data.length;
+  const chartId = React.useId().replace(/:/g, "");
+  const isControlled = controlledStart !== void 0 && controlledEnd !== void 0;
+  const [internalRange, setInternalRange] = React.useState(() => ({
+    startIndex: Math.max(0, Math.min(defaultStartIndex, totalPoints - 1)),
+    endIndex: Math.max(
+      0,
+      Math.min(defaultEndIndex ?? totalPoints - 1, totalPoints - 1)
+    )
+  }));
+  const lastCommittedRef = React.useRef(internalRange);
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalRange((prev) => {
+        const adjusted = {
+          startIndex: Math.min(prev.startIndex, Math.max(0, totalPoints - 1)),
+          endIndex: Math.min(prev.endIndex, Math.max(0, totalPoints - 1))
+        };
+        lastCommittedRef.current = adjusted;
+        return adjusted;
+      });
+    }
+  }, [totalPoints, isControlled]);
+  const clampRange = useCallback(
+    (range2, mode) => {
+      let { startIndex, endIndex } = range2;
+      const maxIndex = Math.max(0, totalPoints - 1);
+      startIndex = Math.max(0, Math.min(startIndex, maxIndex));
+      endIndex = Math.max(0, Math.min(endIndex, maxIndex));
+      if (mode === "left") {
+        const maxStart = Math.max(0, endIndex - minSpan);
+        startIndex = Math.min(startIndex, maxStart);
+        return { startIndex, endIndex };
+      }
+      if (mode === "right") {
+        const minEnd = Math.min(maxIndex, startIndex + minSpan);
+        endIndex = Math.max(endIndex, minEnd);
+        return { startIndex, endIndex };
+      }
+      if (endIndex - startIndex < minSpan) {
+        endIndex = Math.min(startIndex + minSpan, maxIndex);
+        if (endIndex - startIndex < minSpan) {
+          startIndex = Math.max(0, endIndex - minSpan);
+        }
+      }
+      return { startIndex, endIndex };
+    },
+    [totalPoints, minSpan]
+  );
+  const commit = useCallback(
+    (next, mode) => {
+      const clamped = clampRange(next, mode);
+      const last = lastCommittedRef.current;
+      if (last.startIndex === clamped.startIndex && last.endIndex === clamped.endIndex) {
+        return;
+      }
+      lastCommittedRef.current = clamped;
+      setInternalRange(clamped);
+      React.startTransition(() => {
+        onChange?.(clamped);
+      });
+    },
+    [clampRange, onChange]
+  );
+  const { isDragging, bind } = useBrushDrag({
+    range: internalRange,
+    totalPoints,
+    containerRef,
+    commit
+  });
+  const range = internalRange;
+  useEffect(() => {
+    if (isControlled && !isDragging) {
+      const syncedRange = {
+        startIndex: controlledStart,
+        endIndex: controlledEnd
+      };
+      setInternalRange(syncedRange);
+      lastCommittedRef.current = syncedRange;
+    }
+  }, [isControlled, controlledStart, controlledEnd, isDragging]);
+  const leftPct = totalPoints > 1 ? range.startIndex / (totalPoints - 1) * 100 : 0;
+  const rightPct = totalPoints > 1 ? range.endIndex / (totalPoints - 1) * 100 : 100;
+  const leftTarget = useMotionValue(leftPct);
+  const rightTarget = useMotionValue(rightPct);
+  if (leftTarget.get() !== leftPct) leftTarget.set(leftPct);
+  if (rightTarget.get() !== rightPct) rightTarget.set(rightPct);
+  const leftSpring = useSpring(leftTarget, SPRING_CONFIG);
+  const rightSpring = useSpring(rightTarget, SPRING_CONFIG);
+  const leftPosition = useTransform(leftSpring, (v) => `${v}%`);
+  const rightPosition = useTransform(rightSpring, (v) => `${v}%`);
+  const leftOverlayWidth = useTransform(leftSpring, (v) => `${v}%`);
+  const rightOverlayWidth = useTransform(
+    rightSpring,
+    (v) => `${Math.max(0, 100 - v)}%`
+  );
+  const selectedWidth = useMotionValue(`${Math.max(0, rightPct - leftPct)}%`);
+  const updateSelectedWidth = useCallback(() => {
+    selectedWidth.set(`${Math.max(0, rightSpring.get() - leftSpring.get())}%`);
+  }, [leftSpring, rightSpring, selectedWidth]);
+  useMotionValueEvent(leftSpring, "change", updateSelectedWidth);
+  useMotionValueEvent(rightSpring, "change", updateSelectedWidth);
+  const getLabel = useCallback(
+    (idx) => {
+      if (!xDataKey) return String(idx);
+      const v = data[idx]?.[xDataKey];
+      return formatLabel ? formatLabel(v, idx) : String(v ?? idx);
+    },
+    [data, xDataKey, formatLabel]
+  );
+  if (totalPoints === 0) return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: containerRef,
+      "data-chart": skipStyle ? void 0 : chartId,
+      className: cn("group relative select-none", className),
+      style: { height },
+      children: [
+        !skipStyle && /* @__PURE__ */ jsx2(ChartStyle, { id: chartId, config: chartConfig }),
+        /* @__PURE__ */ jsx2("div", { className: "rounded-bruv-md absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx2(
+          MiniChart,
+          {
+            data,
+            keys,
+            chartConfig,
+            variant,
+            curveType,
+            chartId,
+            stacked,
+            strokeVariant: strokeVariant === "animated-dashed" ? "dashed" : strokeVariant,
+            connectNulls,
+            barRadius
+          }
+        ) }),
+        /* @__PURE__ */ jsx2(
+          motion.div,
+          {
+            className: "bg-bruv-base-2/70 pointer-events-none absolute inset-y-0 left-0 rounded-l-md backdrop-blur-[2px]",
+            style: { width: leftOverlayWidth }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          motion.div,
+          {
+            className: "bg-bruv-base-2/70 pointer-events-none absolute inset-y-0 right-0 rounded-r-md backdrop-blur-[2px]",
+            style: { width: rightOverlayWidth }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          motion.div,
+          {
+            className: "rounded-bruv-sm absolute inset-y-0 cursor-grab touch-none border active:cursor-grabbing",
+            style: { left: leftPosition, width: selectedWidth },
+            ...bind("middle")
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          BrushHandle,
+          {
+            side: "left",
+            position: leftPosition,
+            label: showLabels ? getLabel(range.startIndex) : void 0,
+            bind: bind("left")
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          BrushHandle,
+          {
+            side: "right",
+            position: rightPosition,
+            label: showLabels ? getLabel(range.endIndex) : void 0,
+            bind: bind("right")
+          }
+        )
+      ]
+    }
+  );
+}
+function BrushHandle({
+  side,
+  position,
+  label,
+  bind
+}) {
+  const isLeft = side === "left";
+  return /* @__PURE__ */ jsxs2(motion.div, { className: "absolute inset-y-0 z-10", style: { left: position }, children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(
+          "group absolute inset-y-0 flex w-3 cursor-ew-resize touch-none items-center justify-center after:absolute after:inset-y-0 after:-left-4 after:w-11 after:content-['']",
+          isLeft ? "" : "-translate-x-full"
+        ),
+        ...bind,
+        children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              "bg-muted-foreground group-hover:bg-foreground relative flex h-4 w-1.5 items-center justify-center rounded-bruv-md transition-colors",
+              isLeft ? "-left-[5.5px]" : "-right-[5.5px]"
+            ),
+            children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-[2px]", children: [
+              /* @__PURE__ */ jsx2("div", { className: "bg-bruv-base-2/70 h-[2px] w-[2px] rounded-full" }),
+              /* @__PURE__ */ jsx2("div", { className: "bg-bruv-base-2/70 h-[2px] w-[2px] rounded-full" }),
+              /* @__PURE__ */ jsx2("div", { className: "bg-bruv-base-2/70 h-[2px] w-[2px] rounded-full" })
+            ] })
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(
+          "bg-foreground text-bruv-base-1 pointer-events-none absolute -bottom-3 -translate-y-1/2 rounded-[3px] px-1 py-px text-[8px] leading-tight font-medium whitespace-nowrap opacity-0 group-hover:opacity-100",
+          isLeft ? "left-1.5" : "right-1.5"
+        ),
+        children: label
+      }
+    )
+  ] });
+}
+function MiniChart({
+  data,
+  keys,
+  chartConfig,
+  variant,
+  curveType,
+  chartId,
+  stacked,
+  strokeVariant = "solid",
+  connectNulls = false,
+  barRadius
+}) {
+  const gradients = React.useMemo(
+    () => Object.entries(chartConfig).filter(([key]) => keys.includes(key)).map(([dataKey, config]) => ({
+      dataKey,
+      colorsCount: getColorsCount(config)
+    })),
+    [chartConfig, keys]
+  );
+  const dashArray = strokeVariant === "dashed" || strokeVariant === "animated-dashed" ? "4 4" : void 0;
+  const defsContent = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    variant === "area" && /* @__PURE__ */ jsxs2(
+      "linearGradient",
+      {
+        id: `${chartId}-zm-vertical-fade`,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: [
+          /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: "white", stopOpacity: 0.15 }),
+          /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })
+        ]
+      }
+    ),
+    gradients.map(({ dataKey, colorsCount }) => {
+      const colorStops = colorsCount === 1 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: `var(--color-${dataKey}-0)` }),
+        /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: `var(--color-${dataKey}-0)` })
+      ] }) : Array.from({ length: colorsCount }, (_, i) => /* @__PURE__ */ jsx2(
+        "stop",
+        {
+          offset: `${i / (colorsCount - 1) * 100}%`,
+          stopColor: `var(--color-${dataKey}-${i}, var(--color-${dataKey}-0))`
+        },
+        i
+      ));
+      return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          "linearGradient",
+          {
+            id: `${chartId}-zm-${dataKey}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: colorStops
+          }
+        ),
+        variant === "area" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2("mask", { id: `${chartId}-zm-fill-mask-${dataKey}`, children: /* @__PURE__ */ jsx2(
+            "rect",
+            {
+              width: "100%",
+              height: "100%",
+              fill: `url(#${chartId}-zm-vertical-fade)`
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(
+            "pattern",
+            {
+              id: `${chartId}-zm-fill-${dataKey}`,
+              patternUnits: "userSpaceOnUse",
+              width: "100%",
+              height: "100%",
+              children: /* @__PURE__ */ jsx2(
+                "rect",
+                {
+                  width: "100%",
+                  height: "100%",
+                  fill: `url(#${chartId}-zm-${dataKey})`,
+                  mask: `url(#${chartId}-zm-fill-mask-${dataKey})`
+                }
+              )
+            }
+          )
+        ] })
+      ] }, dataKey);
+    })
+  ] });
+  if (variant === "line") {
+    return /* @__PURE__ */ jsx2(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs2(
+      LineChart,
+      {
+        data,
+        margin: { top: 4, right: 0, bottom: 0, left: 0 },
+        children: [
+          /* @__PURE__ */ jsx2("defs", { children: defsContent }),
+          keys.map((dk) => /* @__PURE__ */ jsx2(
+            Line,
+            {
+              type: curveType,
+              dataKey: dk,
+              stroke: `url(#${chartId}-zm-${dk})`,
+              strokeWidth: 1,
+              strokeOpacity: 0.5,
+              strokeDasharray: dashArray,
+              connectNulls,
+              dot: false,
+              activeDot: false,
+              isAnimationActive: false
+            },
+            dk
+          ))
+        ]
+      }
+    ) });
+  }
+  if (variant === "bar") {
+    const r = barRadius ?? 3;
+    return /* @__PURE__ */ jsx2(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs2(
+      BarChart,
+      {
+        data,
+        margin: { top: 2, right: 0, bottom: 0, left: 0 },
+        barGap: 2,
+        barSize: 14,
+        children: [
+          /* @__PURE__ */ jsx2("defs", { children: defsContent }),
+          keys.map((dk) => /* @__PURE__ */ jsx2(
+            Bar,
+            {
+              dataKey: dk,
+              fill: `url(#${chartId}-zm-${dk})`,
+              fillOpacity: 0.35,
+              stackId: stacked ? "zm-stack" : void 0,
+              isAnimationActive: false,
+              radius: [r, r, r, r]
+            },
+            dk
+          ))
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx2(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs2(AreaChart, { data, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
+    /* @__PURE__ */ jsx2("defs", { children: defsContent }),
+    keys.map((dk) => /* @__PURE__ */ jsx2(
+      Area,
+      {
+        type: curveType,
+        dataKey: dk,
+        stroke: `url(#${chartId}-zm-${dk})`,
+        fill: `url(#${chartId}-zm-fill-${dk})`,
+        strokeWidth: 1,
+        strokeOpacity: 0.5,
+        strokeDasharray: dashArray,
+        connectNulls,
+        fillOpacity: 1,
+        stackId: stacked ? "zm-stack" : void 0,
+        dot: false,
+        activeDot: false,
+        isAnimationActive: false
+      },
+      dk
+    ))
+  ] }) });
+}
+function useBrush({
+  data,
+  defaultStartIndex = 0,
+  defaultEndIndex
+}) {
+  const [range, setRange] = React.useState({
+    startIndex: defaultStartIndex,
+    endIndex: defaultEndIndex ?? Math.max(0, data.length - 1)
+  });
+  const deferredRange = React.useDeferredValue(range);
+  useEffect(() => {
+    setRange({
+      startIndex: 0,
+      endIndex: Math.max(0, data.length - 1)
+    });
+  }, [data.length]);
+  const visibleData = React.useMemo(
+    () => data.slice(deferredRange.startIndex, deferredRange.endIndex + 1),
+    [data, deferredRange.startIndex, deferredRange.endIndex]
+  );
+  return {
+    range,
+    visibleData,
+    brushProps: {
+      startIndex: range.startIndex,
+      endIndex: range.endIndex,
+      onChange: setRange
+    }
+  };
+}
+
+// src/components/charts/chart-legend.tsx
+import * as RechartsPrimitive2 from "recharts";
+import "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  nameKey,
+  payload,
+  verticalAlign,
+  align = "right",
+  selected,
+  onSelectChange,
+  isClickable,
+  variant = "rounded-square"
+}) {
+  const { config } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-4 select-none",
+        align === "left" && "justify-start",
+        align === "center" && "justify-center",
+        align === "right" && "justify-end",
+        verticalAlign === "top" ? "pb-4" : "pt-4",
+        className
+      ),
+      children: payload.filter((item) => item.type !== "none").map((item) => {
+        const payloadName = nameKey && item.payload ? item.payload[nameKey] : void 0;
+        const key = `${payloadName ?? item.value ?? item.dataKey ?? "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const isSelected = selected === null || selected === key;
+        const colorsCount = itemConfig ? getColorsCount(itemConfig) : 1;
+        return /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: cn(
+              "[&>svg]:text-bruv-secondary flex items-center gap-1.5 transition-opacity [&>svg]:h-3 [&>svg]:w-3",
+              !isSelected && "opacity-30",
+              isClickable && "cursor-pointer"
+            ),
+            onClick: () => {
+              if (!isClickable) return;
+              onSelectChange?.(selected === key ? null : key);
+            },
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx3(itemConfig.icon, {}) : /* @__PURE__ */ jsx3(
+                LegendIndicator,
+                {
+                  variant,
+                  dataKey: key,
+                  colorsCount
+                }
+              ),
+              itemConfig?.label
+            ]
+          },
+          key
+        );
+      })
+    }
+  );
+}
+function LegendIndicator({
+  variant,
+  dataKey,
+  colorsCount
+}) {
+  const fillStyle = getLegendFillStyle(dataKey, colorsCount);
+  const outlineStyle = getLegendOutlineStyle(dataKey, colorsCount);
+  switch (variant) {
+    case "square":
+      return /* @__PURE__ */ jsx3("div", { className: "h-2 w-2 shrink-0", style: fillStyle });
+    case "circle":
+      return /* @__PURE__ */ jsx3("div", { className: "h-2 w-2 shrink-0 rounded-full", style: fillStyle });
+    case "circle-outline":
+      return /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "h-2.5 w-2.5 shrink-0 rounded-full p-[1.5px]",
+          style: outlineStyle
+        }
+      );
+    case "vertical-bar":
+      return /* @__PURE__ */ jsx3("div", { className: "h-3 w-1 shrink-0 rounded-[2px]", style: fillStyle });
+    case "horizontal-bar":
+      return /* @__PURE__ */ jsx3("div", { className: "h-1 w-3 shrink-0 rounded-[2px]", style: fillStyle });
+    case "rounded-square-outline":
+      return /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "h-2.5 w-2.5 shrink-0 rounded-[3px] p-[1.5px]",
+          style: outlineStyle
+        }
+      );
+    case "rounded-square":
+    default:
+      return /* @__PURE__ */ jsx3("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: fillStyle });
+  }
+}
+function getLegendFillStyle(dataKey, colorsCount) {
+  if (colorsCount <= 1) {
+    return { backgroundColor: `var(--color-${dataKey}-0)` };
+  }
+  const stops = Array.from({ length: colorsCount }, (_, i) => {
+    const offset = i / (colorsCount - 1) * 100;
+    return `var(--color-${dataKey}-${i}) ${offset}%`;
+  }).join(", ");
+  return { background: `linear-gradient(to right, ${stops})` };
+}
+function getLegendOutlineStyle(dataKey, colorsCount) {
+  const maskStyle = {
+    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor",
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    maskComposite: "exclude"
+  };
+  if (colorsCount <= 1) {
+    return {
+      backgroundColor: `var(--color-${dataKey}-0)`,
+      ...maskStyle
+    };
+  }
+  const stops = Array.from({ length: colorsCount }, (_, i) => {
+    const offset = i / (colorsCount - 1) * 100;
+    return `var(--color-${dataKey}-${i}) ${offset}%`;
+  }).join(", ");
+  return {
+    background: `linear-gradient(to right, ${stops})`,
+    ...maskStyle
+  };
+}
+var ChartLegend = RechartsPrimitive2.Legend;
+
+// src/components/charts/chart-tooltip.tsx
+import * as RechartsPrimitive3 from "recharts";
+import * as React3 from "react";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var roundnessMap = {
+  sm: "rounded-bruv-sm",
+  md: "rounded-bruv-md",
+  lg: "rounded-bruv-lg",
+  xl: "rounded-bruv-xl"
+};
+var variantMap = {
+  default: "bg-bruv-base-2",
+  "frosted-glass": "bg-bruv-base-2/70 backdrop-blur-sm"
+};
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  nameKey,
+  labelKey,
+  selected,
+  roundness = "lg",
+  variant = "default"
+}) {
+  const { config } = useChart();
+  const tooltipLabel = React3.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__ */ jsx4("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx4("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey
+  ]);
+  if (!active || !payload?.length) {
+    return /* @__PURE__ */ jsx4("span", { className: "p-4" });
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "border-bruv-neutral/50 grid min-w-32 items-start gap-1.5 border px-2.5 py-1.5 text-xs shadow-xl",
+        roundnessMap[roundness],
+        variantMap[variant],
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx4("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+          const payloadName = nameKey && item.payload ? item.payload[nameKey] : void 0;
+          const key = `${payloadName ?? item.name ?? item.dataKey ?? "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const colorsCount = itemConfig ? getColorsCount(itemConfig) : 1;
+          return /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: cn(
+                "[&>svg]:text-bruv-secondary flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center",
+                selected != null && selected !== item.dataKey && "opacity-30"
+              ),
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx4(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: cn("shrink-0 rounded-[2px]", {
+                      "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: getIndicatorColorStyle(key, colorsCount)
+                  }
+                ),
+                /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between gap-4 leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs4("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx4("span", { className: "text-bruv-secondary", children: itemConfig?.label ?? item.name })
+                      ] }),
+                      item.value != null && /* @__PURE__ */ jsx4("span", { className: "text-bruv-primary font-mono font-medium tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
+                    ]
+                  }
+                )
+              ] })
+            },
+            index
+          );
+        }) })
+      ]
+    }
+  );
+}
+function getIndicatorColorStyle(dataKey, colorsCount) {
+  if (colorsCount <= 1) {
+    return { background: `var(--color-${dataKey}-0)` };
+  }
+  const stops = Array.from({ length: colorsCount }, (_, index) => {
+    const offset = index / (colorsCount - 1) * 100;
+    return `var(--color-${dataKey}-${index}) ${offset}%`;
+  }).join(", ");
+  return { background: `linear-gradient(to right, ${stops})` };
+}
+var ChartTooltip = ({
+  animationDuration = 200,
+  ...props
+}) => /* @__PURE__ */ jsx4(RechartsPrimitive3.Tooltip, { animationDuration, ...props });
+
+// src/components/charts/chart-dot.tsx
+import * as React4 from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChartDot = React4.memo(function ChartDot2({
+  cx,
+  cy,
+  dataKey,
+  chartId,
+  className,
+  fillOpacity = 1,
+  type = "default",
+  maskId
+}) {
+  const dotId = React4.useId().replace(/:/g, "");
+  const gradientUrl = `url(#${chartId}-colors-${String(dataKey)})`;
+  if (cx === void 0 || cy === void 0) return null;
+  switch (type) {
+    case "border":
+      return /* @__PURE__ */ jsx5(
+        PrimaryBorderDot,
+        {
+          cx,
+          cy,
+          dotId,
+          fillOpacity,
+          gradientUrl,
+          className,
+          maskId
+        }
+      );
+    case "colored-border":
+      return /* @__PURE__ */ jsx5(
+        ColoredBorderDot,
+        {
+          cx,
+          cy,
+          dotId,
+          fillOpacity,
+          gradientUrl,
+          className,
+          maskId
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx5(
+        DefaultDot,
+        {
+          cx,
+          cy,
+          dotId,
+          fillOpacity,
+          gradientUrl,
+          className,
+          maskId
+        }
+      );
+  }
+});
+var DefaultDot = React4.memo(
+  ({
+    cx,
+    cy,
+    dotId,
+    fillOpacity,
+    gradientUrl,
+    className,
+    maskId
+  }) => {
+    const r = 3;
+    return /* @__PURE__ */ jsxs5("g", { className, mask: maskId ? `url(#${maskId})` : void 0, children: [
+      /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5("clipPath", { id: `dot-clip-${dotId}`, children: /* @__PURE__ */ jsx5("circle", { cx, cy, r }) }) }),
+      /* @__PURE__ */ jsx5(
+        "rect",
+        {
+          x: "0",
+          y: cy - r,
+          width: "100%",
+          height: r * 2,
+          fill: gradientUrl,
+          fillOpacity,
+          clipPath: `url(#dot-clip-${dotId})`
+        }
+      )
+    ] });
+  }
+);
+DefaultDot.displayName = "DefaultDot";
+var PrimaryBorderDot = React4.memo(
+  ({
+    cx,
+    cy,
+    dotId,
+    fillOpacity,
+    gradientUrl,
+    className,
+    maskId
+  }) => {
+    const r = 6;
+    const strokeWidth = 5;
+    return /* @__PURE__ */ jsxs5(
+      "g",
+      {
+        className: cn(className, "text-bruv-base-1"),
+        mask: maskId ? `url(#${maskId})` : void 0,
+        children: [
+          /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5("clipPath", { id: `dot-clip-${dotId}`, children: /* @__PURE__ */ jsx5("circle", { cx, cy, r }) }) }),
+          /* @__PURE__ */ jsx5("circle", { cx, cy, r, fill: "currentColor" }),
+          /* @__PURE__ */ jsx5(
+            "rect",
+            {
+              x: "0",
+              y: cy - (r - strokeWidth / 2),
+              width: "100%",
+              height: (r - strokeWidth / 2) * 2,
+              fill: gradientUrl,
+              fillOpacity,
+              clipPath: `url(#dot-clip-inner-${dotId})`
+            }
+          ),
+          /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5("clipPath", { id: `dot-clip-inner-${dotId}`, children: /* @__PURE__ */ jsx5("circle", { cx, cy, r: r - strokeWidth / 2 }) }) })
+        ]
+      }
+    );
+  }
+);
+PrimaryBorderDot.displayName = "PrimaryBorderDot";
+var ColoredBorderDot = React4.memo(
+  ({
+    cx,
+    cy,
+    dotId,
+    fillOpacity,
+    gradientUrl,
+    className,
+    maskId
+  }) => {
+    const r = 3;
+    const strokeWidth = 1;
+    return /* @__PURE__ */ jsxs5(
+      "g",
+      {
+        className: cn(className, "text-bruv-base-1"),
+        mask: maskId ? `url(#${maskId})` : void 0,
+        children: [
+          /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5("clipPath", { id: `dot-clip-${dotId}`, children: /* @__PURE__ */ jsx5("circle", { cx, cy, r: r + strokeWidth / 2 }) }) }),
+          /* @__PURE__ */ jsx5(
+            "rect",
+            {
+              x: "0",
+              y: cy - r - strokeWidth / 2,
+              width: "100%",
+              height: (r + strokeWidth / 2) * 2,
+              fill: gradientUrl,
+              fillOpacity,
+              clipPath: `url(#dot-clip-${dotId})`
+            }
+          ),
+          /* @__PURE__ */ jsx5("circle", { cx, cy, r: r - strokeWidth / 2, fill: "currentColor" })
+        ]
+      }
+    );
+  }
+);
+ColoredBorderDot.displayName = "ColoredBorderDot";
+
+// src/components/charts/composed-chart.tsx
+import {
+  Children,
+  createContext as createContext2,
+  isValidElement,
+  use,
+  useCallback as useCallback2,
+  useId as useId4,
+  useMemo as useMemo3,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import {
+  Bar as RechartsBar,
+  CartesianGrid,
+  ComposedChart as RechartsComposedChart,
+  Line as RechartsLine,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis
+} from "recharts";
+import { motion as motion2, useReducedMotion } from "motion/react";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var STROKE_WIDTH = 2;
+var DEFAULT_BAR_RADIUS = 4;
+var LOADING_DATA_KEY = "loading";
+var LOADING_ANIMATION_DURATION = 2e3;
+var REVEAL_DURATION = 1;
+var REVEAL_EASE = [0, 0.7, 0.5, 1];
+var BAR_GROW_DURATION = 0.5;
+var BAR_STAGGER = 0.05;
+var ComposedChartContext = createContext2(
+  null
+);
+function useComposedChart() {
+  const context = use(ComposedChartContext);
+  if (!context) {
+    throw new Error(
+      "Composed chart parts (<Bar />, <Line />, <XAxis />, \u2026) must be used within <ComposedChart />"
+    );
+  }
+  return context;
+}
+function ComposedChart({
+  config,
+  data,
+  children,
+  className,
+  chartProps,
+  curveType = "linear",
+  animationType = "left-to-right",
+  barGap,
+  barCategoryGap,
+  defaultSelectedDataKey = null,
+  onSelectionChange,
+  isLoading = false,
+  loadingBars,
+  showBrush = false,
+  xDataKey,
+  brushHeight,
+  brushFormatLabel,
+  onBrushChange
+}) {
+  const chartId = useId4().replace(/:/g, "");
+  const [introStartedAt] = useState2(() => Date.now());
+  const [selectedDataKey, setSelectedDataKey] = useState2(
+    defaultSelectedDataKey
+  );
+  const [hoveredIndex, setHoveredIndex] = useState2(null);
+  const { loadingData, onShimmerExit } = useLoadingData(isLoading, loadingBars);
+  const { visibleData, brushProps } = useBrush({ data });
+  const displayData = showBrush && !isLoading ? visibleData : data;
+  const selectDataKey = useCallback2(
+    (newSelectedDataKey) => {
+      setSelectedDataKey(newSelectedDataKey);
+      onSelectionChange?.(newSelectedDataKey);
+    },
+    [onSelectionChange]
+  );
+  const contextValue = useMemo3(
+    () => ({
+      config,
+      curveType,
+      animationType,
+      introStartedAt,
+      dataLength: displayData.length,
+      isLoading,
+      hoveredIndex,
+      selectedDataKey,
+      selectDataKey
+    }),
+    [
+      config,
+      curveType,
+      animationType,
+      introStartedAt,
+      displayData.length,
+      isLoading,
+      hoveredIndex,
+      selectedDataKey,
+      selectDataKey
+    ]
+  );
+  return /* @__PURE__ */ jsx6(ComposedChartContext, { value: contextValue, children: /* @__PURE__ */ jsxs6(
+    Chart,
+    {
+      className,
+      config,
+      footer: showBrush && !isLoading && /* @__PURE__ */ jsx6(
+        Brush,
+        {
+          data,
+          chartConfig: config,
+          xDataKey,
+          variant: "area",
+          curveType,
+          height: brushHeight,
+          formatLabel: brushFormatLabel,
+          skipStyle: true,
+          className: "mt-1",
+          ...brushProps,
+          onChange: (range) => {
+            brushProps.onChange(range);
+            onBrushChange?.(range);
+          }
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx6(LoadingIndicator, { isLoading }),
+        /* @__PURE__ */ jsxs6(
+          RechartsComposedChart,
+          {
+            id: chartId,
+            accessibilityLayer: true,
+            data: isLoading ? loadingData : displayData,
+            barGap,
+            barCategoryGap,
+            onMouseLeave: () => setHoveredIndex(null),
+            ...chartProps,
+            children: [
+              children,
+              isLoading && /* @__PURE__ */ jsx6(
+                LoadingBar,
+                {
+                  chartId,
+                  barRadius: DEFAULT_BAR_RADIUS,
+                  onShimmerExit
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function Bar2({
+  dataKey,
+  variant = "default",
+  radius = DEFAULT_BAR_RADIUS,
+  animationType,
+  isClickable = false,
+  enableHoverHighlight = false,
+  barProps
+}) {
+  const {
+    config,
+    animationType: defaultAnimation,
+    introStartedAt,
+    dataLength,
+    isLoading,
+    hoveredIndex,
+    selectedDataKey,
+    selectDataKey
+  } = useComposedChart();
+  const id = useId4().replace(/:/g, "");
+  const shouldReduceMotion = useReducedMotion();
+  if (isLoading) return null;
+  const isSelected = selectedDataKey === null || selectedDataKey === dataKey;
+  const revealType = shouldReduceMotion ? "none" : animationType ?? defaultAnimation;
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx6(
+      RechartsBar,
+      {
+        dataKey,
+        fill: `url(#${id}-bar-colors)`,
+        radius,
+        isAnimationActive: false,
+        style: isClickable || enableHoverHighlight ? { cursor: "pointer" } : void 0,
+        shape: (props) => {
+          const barShapeProps = props;
+          const index = typeof barShapeProps.index === "number" ? barShapeProps.index : -1;
+          return /* @__PURE__ */ jsx6(
+            CustomBar,
+            {
+              ...barShapeProps,
+              id,
+              variant,
+              barRadius: radius,
+              fillOpacity: getBarOpacity({
+                isClickable,
+                isSelected,
+                selectedDataKey,
+                enableHoverHighlight,
+                hoveredIndex,
+                index
+              }),
+              isClickable,
+              enableHoverHighlight,
+              animationType: revealType,
+              dataLength,
+              introStartedAt,
+              onClick: () => {
+                if (!isClickable) return;
+                selectDataKey(selectedDataKey === dataKey ? null : dataKey);
+              }
+            }
+          );
+        },
+        ...barProps
+      }
+    ),
+    /* @__PURE__ */ jsxs6("defs", { children: [
+      /* @__PURE__ */ jsx6(VerticalColorGradient, { id, dataKey, config }),
+      variant === "duotone" && /* @__PURE__ */ jsx6(DuotonePattern, { id, dataKey, config }),
+      variant === "duotone-reverse" && /* @__PURE__ */ jsx6(DuotoneReversePattern, { id, dataKey, config }),
+      variant === "gradient" && /* @__PURE__ */ jsx6(GradientPattern, { id, dataKey }),
+      variant === "stripped" && /* @__PURE__ */ jsx6(StrippedPattern, { id, dataKey })
+    ] })
+  ] });
+}
+function Line2({
+  dataKey,
+  strokeVariant = "solid",
+  curveType,
+  animationType,
+  connectNulls = false,
+  isClickable = false,
+  children,
+  lineProps
+}) {
+  const {
+    config,
+    curveType: defaultCurve,
+    animationType: defaultAnimation,
+    isLoading,
+    selectedDataKey,
+    selectDataKey
+  } = useComposedChart();
+  const id = useId4().replace(/:/g, "");
+  const shouldReduceMotion = useReducedMotion();
+  if (isLoading) return null;
+  const resolvedCurve = curveType ?? defaultCurve;
+  const revealType = shouldReduceMotion ? "none" : animationType ?? defaultAnimation;
+  const maskId = revealType === "none" ? void 0 : `${id}-reveal-mask`;
+  const opacity = getOpacity(selectedDataKey, dataKey);
+  const hasSelection = selectedDataKey !== null;
+  const { dot, activeDot } = resolveDots(
+    children,
+    id,
+    dataKey,
+    opacity.dot,
+    maskId
+  );
+  const isAnimatedDashed = strokeVariant === "animated-dashed";
+  const isDashed = strokeVariant === "dashed" || isAnimatedDashed;
+  const handleLineClick = () => {
+    if (!isClickable) return;
+    selectDataKey(selectedDataKey === dataKey ? null : dataKey);
+  };
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    isClickable && /* @__PURE__ */ jsx6(
+      RechartsLine,
+      {
+        type: resolvedCurve,
+        dataKey,
+        connectNulls,
+        stroke: "transparent",
+        strokeWidth: 20,
+        dot: false,
+        activeDot: false,
+        isAnimationActive: false,
+        legendType: "none",
+        tooltipType: "none",
+        style: { cursor: "pointer" },
+        onClick: handleLineClick
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      RechartsLine,
+      {
+        type: resolvedCurve,
+        dataKey,
+        connectNulls,
+        strokeOpacity: opacity.stroke,
+        stroke: `url(#${id}-line-colors-${dataKey})`,
+        dot,
+        activeDot,
+        strokeWidth: STROKE_WIDTH,
+        strokeDasharray: isDashed ? "5 5" : void 0,
+        isAnimationActive: false,
+        style: {
+          ...maskId ? { mask: `url(#${maskId})` } : {},
+          ...isClickable ? { cursor: "pointer", pointerEvents: "none" } : {}
+        },
+        ...lineProps,
+        children: isAnimatedDashed && !hasSelection && /* @__PURE__ */ jsx6(AnimatedDashedStroke, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs6("defs", { children: [
+      revealType !== "none" && /* @__PURE__ */ jsx6(RevealMask, { id, type: revealType }),
+      /* @__PURE__ */ jsx6(HorizontalColorGradient, { id, dataKey, config })
+    ] })
+  ] });
+}
+var Dot = () => null;
+var ActiveDot = () => null;
+function XAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  ...props
+}) {
+  const { isLoading } = useComposedChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx6(
+    RechartsXAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      ...props
+    }
+  );
+}
+function YAxis({
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  width = "auto",
+  ...props
+}) {
+  const { isLoading } = useComposedChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx6(
+    RechartsYAxis,
+    {
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      width,
+      ...props
+    }
+  );
+}
+function Grid({
+  vertical = false,
+  strokeDasharray = "3 3",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    CartesianGrid,
+    {
+      vertical,
+      strokeDasharray,
+      ...props
+    }
+  );
+}
+function Tooltip2({
+  variant,
+  roundness,
+  defaultIndex,
+  cursor = true
+}) {
+  const { isLoading, selectedDataKey } = useComposedChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx6(
+    ChartTooltip,
+    {
+      defaultIndex,
+      cursor: cursor ? { strokeDasharray: "3 3", strokeWidth: STROKE_WIDTH } : false,
+      content: /* @__PURE__ */ jsx6(
+        ChartTooltipContent,
+        {
+          selected: selectedDataKey,
+          roundness,
+          variant
+        }
+      )
+    }
+  );
+}
+function Legend2({
+  variant,
+  align = "right",
+  verticalAlign = "top",
+  isClickable = false
+}) {
+  const { selectedDataKey, selectDataKey } = useComposedChart();
+  return /* @__PURE__ */ jsx6(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx6(
+        ChartLegendContent,
+        {
+          selected: selectedDataKey,
+          onSelectChange: selectDataKey,
+          isClickable,
+          variant
+        }
+      )
+    }
+  );
+}
+var getOpacity = (selectedDataKey, dataKey) => {
+  if (selectedDataKey === null) {
+    return { stroke: 1, dot: 1 };
+  }
+  return selectedDataKey === dataKey ? { stroke: 1, dot: 1 } : { stroke: 0.3, dot: 0.3 };
+};
+var getBarOpacity = ({
+  isClickable,
+  isSelected,
+  selectedDataKey,
+  enableHoverHighlight,
+  hoveredIndex,
+  index
+}) => {
+  const clickOpacity = isClickable && selectedDataKey !== null ? isSelected ? 1 : 0.3 : 1;
+  if (enableHoverHighlight && hoveredIndex !== null) {
+    return hoveredIndex === index ? clickOpacity : clickOpacity * 0.3;
+  }
+  return clickOpacity;
+};
+var resolveDots = (children, id, dataKey, dotOpacity, maskId) => {
+  let dot = false;
+  let activeDot = false;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === Dot) {
+      const { variant } = child.props;
+      dot = /* @__PURE__ */ jsx6(
+        ChartDot,
+        {
+          type: variant,
+          dataKey,
+          chartId: `${id}-line`,
+          fillOpacity: dotOpacity,
+          maskId
+        }
+      );
+    }
+    if (child.type === ActiveDot) {
+      const { variant } = child.props;
+      activeDot = /* @__PURE__ */ jsx6(
+        ChartDot,
+        {
+          type: variant,
+          dataKey,
+          chartId: `${id}-line`,
+          fillOpacity: dotOpacity
+        }
+      );
+    }
+  });
+  return { dot, activeDot };
+};
+var CustomBar = ({
+  x = 0,
+  y = 0,
+  width = 0,
+  height = 0,
+  fillOpacity = 1,
+  background,
+  index = -1,
+  id,
+  variant,
+  barRadius,
+  isClickable,
+  enableHoverHighlight,
+  animationType = "none",
+  dataLength = 0,
+  introStartedAt = 0,
+  onClick
+}) => {
+  const cursorStyle = isClickable || enableHoverHighlight ? { cursor: "pointer" } : void 0;
+  const hitAreaX = background?.x ?? x;
+  const hitAreaY = background?.y ?? y;
+  const hitAreaWidth = background?.width ?? width;
+  const hitAreaHeight = background?.height ?? height;
+  const grow = getBarGrowAnimation(animationType, index, dataLength, introStartedAt) ?? {};
+  const getFill = () => {
+    switch (variant) {
+      case "duotone":
+        return `url(#${id}-duotone)`;
+      case "duotone-reverse":
+        return `url(#${id}-duotone-reverse)`;
+      case "gradient":
+        return `url(#${id}-gradient)`;
+      case "stripped":
+        return `url(#${id}-stripped)`;
+      default:
+        return `url(#${id}-bar-colors)`;
+    }
+  };
+  const hitArea = enableHoverHighlight ? /* @__PURE__ */ jsx6(
+    "rect",
+    {
+      x: hitAreaX,
+      y: hitAreaY,
+      width: hitAreaWidth,
+      height: hitAreaHeight,
+      fill: "transparent"
+    }
+  ) : null;
+  if (variant === "stripped") {
+    return /* @__PURE__ */ jsxs6("g", { style: cursorStyle, onClick, children: [
+      /* @__PURE__ */ jsxs6(
+        motion2.g,
+        {
+          ...grow,
+          opacity: fillOpacity,
+          className: "transition-opacity duration-200",
+          children: [
+            /* @__PURE__ */ jsx6("rect", { x, y, width, height, fill: getFill() }),
+            /* @__PURE__ */ jsx6(
+              "rect",
+              {
+                x,
+                y,
+                width,
+                height: 2,
+                fill: `url(#${id}-bar-colors)`
+              }
+            )
+          ]
+        }
+      ),
+      hitArea
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("g", { style: cursorStyle, onClick, children: [
+    /* @__PURE__ */ jsx6(motion2.g, { ...grow, children: /* @__PURE__ */ jsx6(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: barRadius,
+        ry: barRadius,
+        fill: getFill(),
+        opacity: fillOpacity,
+        className: "transition-opacity duration-200"
+      }
+    ) }),
+    hitArea
+  ] });
+};
+var getBarGrowAnimation = (animationType, index, dataLength, introStartedAt) => {
+  if (animationType === "none" || index < 0 || dataLength <= 0) return null;
+  const lastIndex = dataLength - 1;
+  const center = lastIndex / 2;
+  let step;
+  switch (animationType) {
+    case "right-to-left":
+      step = lastIndex - index;
+      break;
+    case "center-out":
+      step = Math.abs(index - center);
+      break;
+    case "edges-in":
+      step = center - Math.abs(index - center);
+      break;
+    default:
+      step = index;
+  }
+  const startMs = step * BAR_STAGGER * 1e3;
+  const durationMs = BAR_GROW_DURATION * 1e3;
+  const endMs = startMs + durationMs;
+  const elapsed = Date.now() - introStartedAt;
+  if (elapsed >= endMs) return null;
+  const from = elapsed <= startMs ? 0 : (elapsed - startMs) / durationMs;
+  return {
+    initial: { scaleY: from },
+    animate: { scaleY: 1 },
+    transition: {
+      duration: (endMs - Math.max(elapsed, startMs)) / 1e3,
+      ease: REVEAL_EASE,
+      delay: Math.max(0, startMs - elapsed) / 1e3
+    },
+    style: { originY: 1 }
+  };
+};
+var SINGLE_REVEAL_ORIGIN = {
+  "left-to-right": 0,
+  "right-to-left": 1,
+  "center-out": 0.5
+};
+var RevealMask = ({
+  id,
+  type
+}) => {
+  const reveal = {
+    initial: { scaleX: 0 },
+    animate: { scaleX: 1 },
+    transition: { duration: REVEAL_DURATION, ease: REVEAL_EASE }
+  };
+  return /* @__PURE__ */ jsx6(
+    "mask",
+    {
+      id: `${id}-reveal-mask`,
+      maskUnits: "userSpaceOnUse",
+      maskContentUnits: "userSpaceOnUse",
+      x: "0",
+      y: "0",
+      width: "100%",
+      height: "100%",
+      children: type === "edges-in" ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        /* @__PURE__ */ jsx6(
+          motion2.rect,
+          {
+            ...reveal,
+            x: "0",
+            y: "0",
+            width: "50%",
+            height: "100%",
+            fill: "white",
+            style: { originX: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          motion2.rect,
+          {
+            ...reveal,
+            x: "50%",
+            y: "0",
+            width: "50%",
+            height: "100%",
+            fill: "white",
+            style: { originX: 1 }
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx6(
+        motion2.rect,
+        {
+          ...reveal,
+          x: "0",
+          y: "0",
+          width: "100%",
+          height: "100%",
+          fill: "white",
+          style: { originX: SINGLE_REVEAL_ORIGIN[type] }
+        }
+      )
+    }
+  );
+};
+var AnimatedDashedStroke = () => {
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx6(
+      "animate",
+      {
+        attributeName: "stroke-dasharray",
+        values: "5 5; 0 5; 5 5",
+        dur: "1s",
+        repeatCount: "indefinite",
+        keyTimes: "0;0.5;1"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "animate",
+      {
+        attributeName: "stroke-dashoffset",
+        values: "0; -10",
+        dur: "1s",
+        repeatCount: "indefinite",
+        keyTimes: "0;1"
+      }
+    )
+  ] });
+};
+var VerticalColorGradient = ({
+  id,
+  dataKey,
+  config
+}) => {
+  const colorsCount = getColorsCount(config[dataKey] ?? {});
+  return /* @__PURE__ */ jsx6("linearGradient", { id: `${id}-bar-colors`, x1: "0", y1: "0", x2: "0", y2: "1", children: colorsCount === 1 ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx6("stop", { offset: "0%", stopColor: `var(--color-${dataKey}-0)` }),
+    /* @__PURE__ */ jsx6("stop", { offset: "100%", stopColor: `var(--color-${dataKey}-0)` })
+  ] }) : Array.from({ length: colorsCount }, (_, index) => {
+    const offset = `${index / (colorsCount - 1) * 100}%`;
+    return /* @__PURE__ */ jsx6(
+      "stop",
+      {
+        offset,
+        stopColor: `var(--color-${dataKey}-${index}, var(--color-${dataKey}-0))`
+      },
+      offset
+    );
+  }) });
+};
+var HorizontalColorGradient = ({
+  id,
+  dataKey,
+  config
+}) => {
+  const colorsCount = getColorsCount(config[dataKey] ?? {});
+  return /* @__PURE__ */ jsx6(
+    "linearGradient",
+    {
+      id: `${id}-line-colors-${dataKey}`,
+      x1: "0",
+      y1: "0",
+      x2: "1",
+      y2: "0",
+      children: colorsCount === 1 ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        /* @__PURE__ */ jsx6("stop", { offset: "0%", stopColor: `var(--color-${dataKey}-0)` }),
+        /* @__PURE__ */ jsx6("stop", { offset: "100%", stopColor: `var(--color-${dataKey}-0)` })
+      ] }) : Array.from({ length: colorsCount }, (_, index) => {
+        const offset = `${index / (colorsCount - 1) * 100}%`;
+        return /* @__PURE__ */ jsx6(
+          "stop",
+          {
+            offset,
+            stopColor: `var(--color-${dataKey}-${index}, var(--color-${dataKey}-0))`
+          },
+          offset
+        );
+      })
+    }
+  );
+};
+var DuotonePattern = ({
+  id,
+  dataKey,
+  config
+}) => {
+  const colorsCount = getColorsCount(config[dataKey] ?? {});
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsxs6(
+      "linearGradient",
+      {
+        id: `${id}-duotone-mask-gradient`,
+        gradientUnits: "objectBoundingBox",
+        x1: "0",
+        y1: "0",
+        x2: "1",
+        y2: "0",
+        children: [
+          /* @__PURE__ */ jsx6("stop", { offset: "50%", stopColor: "white", stopOpacity: 0.4 }),
+          /* @__PURE__ */ jsx6("stop", { offset: "50%", stopColor: "white", stopOpacity: 1 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "linearGradient",
+      {
+        id: `${id}-duotone-colors`,
+        gradientUnits: "objectBoundingBox",
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: colorsCount === 1 ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+          /* @__PURE__ */ jsx6("stop", { offset: "0%", stopColor: `var(--color-${dataKey}-0)` }),
+          /* @__PURE__ */ jsx6("stop", { offset: "100%", stopColor: `var(--color-${dataKey}-0)` })
+        ] }) : Array.from({ length: colorsCount }, (_, index) => {
+          const offset = `${index / (colorsCount - 1) * 100}%`;
+          return /* @__PURE__ */ jsx6(
+            "stop",
+            {
+              offset,
+              stopColor: `var(--color-${dataKey}-${index}, var(--color-${dataKey}-0))`
+            },
+            offset
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx6("mask", { id: `${id}-duotone-mask`, maskContentUnits: "objectBoundingBox", children: /* @__PURE__ */ jsx6(
+      "rect",
+      {
+        x: "0",
+        y: "0",
+        width: "1",
+        height: "1",
+        fill: `url(#${id}-duotone-mask-gradient)`
+      }
+    ) }),
+    /* @__PURE__ */ jsx6(
+      "pattern",
+      {
+        id: `${id}-duotone`,
+        patternUnits: "objectBoundingBox",
+        patternContentUnits: "objectBoundingBox",
+        width: "1",
+        height: "1",
+        children: /* @__PURE__ */ jsx6(
+          "rect",
+          {
+            x: "0",
+            y: "0",
+            width: "1",
+            height: "1",
+            fill: `url(#${id}-duotone-colors)`,
+            mask: `url(#${id}-duotone-mask)`
+          }
+        )
+      }
+    )
+  ] });
+};
+var DuotoneReversePattern = ({
+  id,
+  dataKey,
+  config
+}) => {
+  const colorsCount = getColorsCount(config[dataKey] ?? {});
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsxs6(
+      "linearGradient",
+      {
+        id: `${id}-duotone-reverse-mask-gradient`,
+        gradientUnits: "objectBoundingBox",
+        x1: "0",
+        y1: "0",
+        x2: "1",
+        y2: "0",
+        children: [
+          /* @__PURE__ */ jsx6("stop", { offset: "50%", stopColor: "white", stopOpacity: 1 }),
+          /* @__PURE__ */ jsx6("stop", { offset: "50%", stopColor: "white", stopOpacity: 0.4 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "linearGradient",
+      {
+        id: `${id}-duotone-reverse-colors`,
+        gradientUnits: "objectBoundingBox",
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: colorsCount === 1 ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+          /* @__PURE__ */ jsx6("stop", { offset: "0%", stopColor: `var(--color-${dataKey}-0)` }),
+          /* @__PURE__ */ jsx6("stop", { offset: "100%", stopColor: `var(--color-${dataKey}-0)` })
+        ] }) : Array.from({ length: colorsCount }, (_, index) => {
+          const offset = `${index / (colorsCount - 1) * 100}%`;
+          return /* @__PURE__ */ jsx6(
+            "stop",
+            {
+              offset,
+              stopColor: `var(--color-${dataKey}-${index}, var(--color-${dataKey}-0))`
+            },
+            offset
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "mask",
+      {
+        id: `${id}-duotone-reverse-mask`,
+        maskContentUnits: "objectBoundingBox",
+        children: /* @__PURE__ */ jsx6(
+          "rect",
+          {
+            x: "0",
+            y: "0",
+            width: "1",
+            height: "1",
+            fill: `url(#${id}-duotone-reverse-mask-gradient)`
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "pattern",
+      {
+        id: `${id}-duotone-reverse`,
+        patternUnits: "objectBoundingBox",
+        patternContentUnits: "objectBoundingBox",
+        width: "1",
+        height: "1",
+        children: /* @__PURE__ */ jsx6(
+          "rect",
+          {
+            x: "0",
+            y: "0",
+            width: "1",
+            height: "1",
+            fill: `url(#${id}-duotone-reverse-colors)`,
+            mask: `url(#${id}-duotone-reverse-mask)`
+          }
+        )
+      }
+    )
+  ] });
+};
+var GradientPattern = ({ id }) => {
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsxs6(
+      "linearGradient",
+      {
+        id: `${id}-gradient-mask-gradient`,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: [
+          /* @__PURE__ */ jsx6("stop", { offset: "20%", stopColor: "white", stopOpacity: 1 }),
+          /* @__PURE__ */ jsx6("stop", { offset: "90%", stopColor: "white", stopOpacity: 0 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6("mask", { id: `${id}-gradient-mask`, children: /* @__PURE__ */ jsx6(
+      "rect",
+      {
+        width: "100%",
+        height: "100%",
+        fill: `url(#${id}-gradient-mask-gradient)`
+      }
+    ) }),
+    /* @__PURE__ */ jsx6(
+      "pattern",
+      {
+        id: `${id}-gradient`,
+        patternUnits: "userSpaceOnUse",
+        width: "100%",
+        height: "100%",
+        children: /* @__PURE__ */ jsx6(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${id}-bar-colors)`,
+            mask: `url(#${id}-gradient-mask)`
+          }
+        )
+      }
+    )
+  ] });
+};
+var StrippedPattern = ({ id }) => {
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsxs6(
+      "linearGradient",
+      {
+        id: `${id}-stripped-mask-gradient`,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: [
+          /* @__PURE__ */ jsx6("stop", { offset: "0%", stopColor: "white", stopOpacity: 0.4 }),
+          /* @__PURE__ */ jsx6("stop", { offset: "100%", stopColor: "white", stopOpacity: 0.1 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6("mask", { id: `${id}-stripped-mask`, children: /* @__PURE__ */ jsx6(
+      "rect",
+      {
+        width: "100%",
+        height: "100%",
+        fill: `url(#${id}-stripped-mask-gradient)`
+      }
+    ) }),
+    /* @__PURE__ */ jsx6(
+      "pattern",
+      {
+        id: `${id}-stripped`,
+        patternUnits: "userSpaceOnUse",
+        width: "100%",
+        height: "100%",
+        children: /* @__PURE__ */ jsx6(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${id}-bar-colors)`,
+            mask: `url(#${id}-stripped-mask)`
+          }
+        )
+      }
+    )
+  ] });
+};
+var generateEasedGradientStops = (steps = 17, minOpacity = 0.05, maxOpacity = 0.9) => {
+  return Array.from({ length: steps }, (_, i) => {
+    const t = i / (steps - 1);
+    const eased = Math.sin(t * Math.PI) ** 2;
+    const opacity = minOpacity + eased * (maxOpacity - minOpacity);
+    return {
+      offset: `${(t * 100).toFixed(0)}%`,
+      opacity: Number(opacity.toFixed(3))
+    };
+  });
+};
+function useLoadingData(isLoading, loadingBars = 12) {
+  const [loadingDataKey, setLoadingDataKey] = useState2(false);
+  const onShimmerExit = useCallback2(() => {
+    if (isLoading) {
+      setLoadingDataKey((prev) => !prev);
+    }
+  }, [isLoading]);
+  const loadingData = useMemo3(
+    () => getLoadingData(loadingBars, 20, 80),
+    [loadingBars, loadingDataKey]
+  );
+  return { loadingData, onShimmerExit };
+}
+var LoadingBar = ({
+  chartId,
+  barRadius,
+  onShimmerExit
+}) => {
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx6(
+      RechartsBar,
+      {
+        dataKey: LOADING_DATA_KEY,
+        fill: "currentColor",
+        fillOpacity: 0.15,
+        radius: barRadius,
+        isAnimationActive: false,
+        legendType: "none",
+        style: { mask: `url(#${chartId}-loading-mask)` }
+      }
+    ),
+    /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6(LoadingPattern, { chartId, onShimmerExit }) })
+  ] });
+};
+var LoadingPattern = ({
+  chartId,
+  onShimmerExit
+}) => {
+  const gradientStops = generateEasedGradientStops();
+  const patternWidth = 3;
+  const startX = -1;
+  const endX = 2;
+  const lastXRef = useRef2(startX);
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx6(
+      "linearGradient",
+      {
+        id: `${chartId}-loading-gradient`,
+        x1: "0",
+        y1: "0",
+        x2: "1",
+        y2: "0",
+        children: gradientStops.map(({ offset, opacity }) => /* @__PURE__ */ jsx6(
+          "stop",
+          {
+            offset,
+            stopColor: "white",
+            stopOpacity: opacity
+          },
+          offset
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "pattern",
+      {
+        id: `${chartId}-loading-pattern`,
+        patternUnits: "objectBoundingBox",
+        patternContentUnits: "objectBoundingBox",
+        patternTransform: "rotate(25)",
+        width: patternWidth,
+        height: "1",
+        x: "0",
+        y: "0",
+        children: /* @__PURE__ */ jsx6(
+          motion2.rect,
+          {
+            y: "0",
+            width: "1",
+            height: "1",
+            fill: `url(#${chartId}-loading-gradient)`,
+            initial: { x: startX },
+            animate: { x: endX },
+            transition: {
+              duration: LOADING_ANIMATION_DURATION / 1e3,
+              ease: "linear",
+              repeat: Infinity,
+              repeatType: "loop"
+            },
+            onUpdate: (latest) => {
+              const xValue = typeof latest.x === "number" ? latest.x : startX;
+              const lastX = lastXRef.current;
+              if (xValue >= 1 && lastX < 1) {
+                onShimmerExit();
+              }
+              lastXRef.current = xValue;
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx6("mask", { id: `${chartId}-loading-mask`, maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx6(
+      "rect",
+      {
+        width: "100%",
+        height: "100%",
+        fill: `url(#${chartId}-loading-pattern)`
+      }
+    ) })
+  ] });
+};
+export {
+  ActiveDot,
+  Bar2 as Bar,
+  ComposedChart,
+  Dot,
+  Grid,
+  Legend2 as Legend,
+  Line2 as Line,
+  Tooltip2 as Tooltip,
+  XAxis,
+  YAxis,
+  useLoadingData
+};
+//# sourceMappingURL=composed-chart.js.map