bruv-ui 0.2.0

package/dist/sankey-chart.js

@@ -0,0 +1,1179 @@
+// 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);
+}
+
+// src/components/charts/chart-tooltip.tsx
+import * as RechartsPrimitive2 from "recharts";
+import * as React from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } 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 = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx2("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx2("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey
+  ]);
+  if (!active || !payload?.length) {
+    return /* @__PURE__ */ jsx2("span", { className: "p-4" });
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsx2("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__ */ jsx2(
+            "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__ */ jsxs2(Fragment, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx2(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx2(
+                  "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__ */ jsxs2(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between gap-4 leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs2("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx2("span", { className: "text-bruv-secondary", children: itemConfig?.label ?? item.name })
+                      ] }),
+                      item.value != null && /* @__PURE__ */ jsx2("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__ */ jsx2(RechartsPrimitive2.Tooltip, { animationDuration, ...props });
+
+// src/components/charts/chart-background.tsx
+import { ZIndexLayer } from "recharts";
+import { useId as useId2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DotsPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "20",
+    height: "20",
+    patternUnits: "userSpaceOnUse",
+    children: /* @__PURE__ */ jsx3(
+      "circle",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        cx: "2",
+        cy: "2",
+        r: "1",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var GridPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "20",
+    height: "20",
+    patternUnits: "userSpaceOnUse",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        d: "M 20 0 L 0 0 0 20",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "0.5"
+      }
+    )
+  }
+);
+var CrossHatchPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "20",
+    height: "20",
+    patternUnits: "userSpaceOnUse",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "text-bruv-chart-grid/60 text-bruv-chart-grid/50",
+        d: "M 0 0 L 20 20 M 20 0 L 0 20",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "0.5"
+      }
+    )
+  }
+);
+var DiagonalLinesPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "6",
+    height: "6",
+    patternUnits: "userSpaceOnUse",
+    patternTransform: "rotate(45)",
+    children: /* @__PURE__ */ jsx3(
+      "line",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "6",
+        stroke: "currentColor",
+        strokeWidth: "0.5"
+      }
+    )
+  }
+);
+var PlusPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "16",
+    height: "16",
+    patternUnits: "userSpaceOnUse",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        d: "M 8 4 L 8 12 M 4 8 L 12 8",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "0.5",
+        strokeLinecap: "round"
+      }
+    )
+  }
+);
+var FallingTrianglesPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "18",
+    height: "36",
+    patternUnits: "userSpaceOnUse",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        d: "M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z",
+        transform: "scale(0.5)",
+        fill: "currentColor",
+        fillOpacity: "0.4"
+      }
+    )
+  }
+);
+var FourPointedStarPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "16",
+    height: "16",
+    patternUnits: "userSpaceOnUse",
+    children: /* @__PURE__ */ jsx3(
+      "polygon",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        fillRule: "evenodd",
+        points: "5 3 8 4 5 5 4 8 3 5 0 4 3 3 4 0 5 3",
+        fill: "currentColor",
+        fillOpacity: "0.4"
+      }
+    )
+  }
+);
+var TinyCheckersPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "8",
+    height: "8",
+    patternUnits: "userSpaceOnUse",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        fillRule: "evenodd",
+        d: "M0 0h4v4H0V0zm4 4h4v4H4V4z",
+        fill: "currentColor",
+        fillOpacity: "0.2"
+      }
+    )
+  }
+);
+var OverlappingCirclesPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "40",
+    height: "40",
+    patternUnits: "userSpaceOnUse",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        fillRule: "evenodd",
+        d: "M25 25c0-2.762 2.238-5 5-5s5 2.238 5 5-2.238 5-5 5c0 2.762-2.238 5-5 5s-5-2.238-5-5 2.238-5 5-5zM5 5c0-2.762 2.238-5 5-5s5 2.238 5 5-2.238 5-5 5c0 2.762-2.238 5-5 5S0 12.762 0 10s2.238-5 5-5zm5 4c2.209 0 4-1.791 4-4s-1.791-4-4-4-4 1.791-4 4 1.791 4 4 4zm20 20c2.209 0 4-1.791 4-4s-1.791-4-4-4-4 1.791-4 4 1.791 4 4 4z",
+        fill: "currentColor",
+        fillOpacity: "0.4"
+      }
+    )
+  }
+);
+var WiggleLinesPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "52",
+    height: "26",
+    patternUnits: "userSpaceOnUse",
+    patternTransform: "scale(0.6)",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        d: "M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z",
+        fill: "currentColor",
+        fillOpacity: "0.4"
+      }
+    )
+  }
+);
+var BubblesPattern = ({ id }) => /* @__PURE__ */ jsx3(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "100",
+    height: "100",
+    patternUnits: "userSpaceOnUse",
+    patternTransform: "scale(0.6667)",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "text-bruv-chart-grid text-bruv-chart-grid",
+        d: "M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z",
+        fill: "currentColor",
+        fillOpacity: "0.4",
+        fillRule: "evenodd"
+      }
+    )
+  }
+);
+var PATTERN_MAP = {
+  dots: DotsPattern,
+  grid: GridPattern,
+  plus: PlusPattern,
+  bubbles: BubblesPattern,
+  "cross-hatch": CrossHatchPattern,
+  "diagonal-lines": DiagonalLinesPattern,
+  "falling-triangles": FallingTrianglesPattern,
+  "4-pointed-star": FourPointedStarPattern,
+  "tiny-checkers": TinyCheckersPattern,
+  "overlapping-circles": OverlappingCirclesPattern,
+  "wiggle-lines": WiggleLinesPattern
+};
+function ChartBackground({ variant }) {
+  const baseId = useId2().replace(/:/g, "");
+  const patternId = `${baseId}-bg-${variant}`;
+  const maskId = `${baseId}-bg-edge-fade`;
+  const filterId = `${baseId}-bg-blur`;
+  const PatternComponent = PATTERN_MAP[variant];
+  return /* @__PURE__ */ jsxs3(ZIndexLayer, { zIndex: -1, children: [
+    /* @__PURE__ */ jsxs3("defs", { children: [
+      /* @__PURE__ */ jsx3(PatternComponent, { id: patternId }),
+      /* @__PURE__ */ jsx3("filter", { id: filterId, children: /* @__PURE__ */ jsx3("feGaussianBlur", { stdDeviation: "25" }) }),
+      /* @__PURE__ */ jsx3("mask", { id: maskId, maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx3(
+        "rect",
+        {
+          x: "8%",
+          y: "20%",
+          width: "85%",
+          height: "60%",
+          fill: "white",
+          filter: `url(#${filterId})`
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        width: "100%",
+        height: "100%",
+        fill: `url(#${patternId})`,
+        mask: `url(#${maskId})`
+      }
+    )
+  ] });
+}
+
+// src/components/charts/sankey-chart.tsx
+import {
+  Children,
+  createContext as createContext2,
+  isValidElement,
+  use,
+  useCallback,
+  useId as useId3,
+  useMemo as useMemo2,
+  useState
+} from "react";
+import {
+  Sankey as RechartsSankey,
+  Layer
+} from "recharts";
+import { motion } from "motion/react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var LOADING_ANIMATION_DURATION = 2e3;
+var DEFAULT_NODE_WIDTH = 10;
+var DEFAULT_NODE_PADDING = 10;
+var DEFAULT_LINK_CURVATURE = 0.5;
+var DEFAULT_ITERATIONS = 32;
+var SankeyChartContext = createContext2(null);
+function useSankeyChart() {
+  const context = use(SankeyChartContext);
+  if (!context) {
+    throw new Error(
+      "Sankey chart parts (<Node />, <Link />, <Tooltip />, \u2026) must be used within <SankeyChart />"
+    );
+  }
+  return context;
+}
+function SankeyChart({
+  data,
+  config,
+  children,
+  className,
+  sankeyProps,
+  nodeWidth = DEFAULT_NODE_WIDTH,
+  nodePadding = DEFAULT_NODE_PADDING,
+  linkCurvature = DEFAULT_LINK_CURVATURE,
+  iterations = DEFAULT_ITERATIONS,
+  sort = true,
+  align = "justify",
+  verticalAlign = "justify",
+  backgroundVariant,
+  defaultSelectedNode = null,
+  onSelectionChange,
+  isLoading = false
+}) {
+  const chartId = useId3().replace(/:/g, "");
+  const [selectedNode, setSelectedNode] = useState(
+    defaultSelectedNode
+  );
+  const selectNode = useCallback(
+    (nodeName) => {
+      setSelectedNode(nodeName);
+      if (!onSelectionChange) return;
+      if (nodeName === null) {
+        onSelectionChange(null);
+        return;
+      }
+      onSelectionChange({
+        dataKey: nodeName,
+        value: getNodeValue(data, nodeName)
+      });
+    },
+    [onSelectionChange, data]
+  );
+  const contextValue = useMemo2(
+    () => ({ data, config, chartId, isLoading, selectedNode, selectNode }),
+    [data, config, chartId, isLoading, selectedNode, selectNode]
+  );
+  return /* @__PURE__ */ jsx4(SankeyChartContext, { value: contextValue, children: /* @__PURE__ */ jsxs4(Chart, { className, config, children: [
+    /* @__PURE__ */ jsx4(LoadingIndicator, { isLoading }),
+    backgroundVariant && /* @__PURE__ */ jsx4(ChartBackground, { variant: backgroundVariant }),
+    !isLoading && /* @__PURE__ */ jsxs4(
+      RechartsSankey,
+      {
+        id: chartId,
+        data,
+        nodeWidth,
+        nodePadding,
+        linkCurvature,
+        iterations,
+        sort,
+        align,
+        verticalAlign,
+        ...resolveSankeyRenderers(children),
+        ...sankeyProps,
+        children: [
+          children,
+          /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsx4(NodeColorGradients, { config, chartId }) })
+        ]
+      }
+    ),
+    isLoading && /* @__PURE__ */ jsx4(
+      "svg",
+      {
+        viewBox: "0 0 500 250",
+        preserveAspectRatio: "xMidYMid meet",
+        width: "100%",
+        height: "100%",
+        className: "absolute inset-0",
+        children: /* @__PURE__ */ jsx4(LoadingSankey, {})
+      }
+    )
+  ] }) });
+}
+var Node = () => null;
+var NodeLabel = () => null;
+var Link = () => null;
+function Tooltip2({ variant, roundness, defaultIndex }) {
+  const { isLoading } = useSankeyChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx4(
+    ChartTooltip,
+    {
+      defaultIndex,
+      content: /* @__PURE__ */ jsx4(
+        ChartTooltipContent,
+        {
+          nameKey: "name",
+          hideLabel: true,
+          roundness,
+          variant
+        }
+      )
+    }
+  );
+}
+var getNodeValue = (data, nodeName) => {
+  const nodeIndex = data.nodes.findIndex((node) => node.name === nodeName);
+  if (nodeIndex === -1) return 0;
+  const outgoing = data.links.filter((link) => link.source === nodeIndex).reduce((sum, link) => sum + link.value, 0);
+  const incoming = data.links.filter((link) => link.target === nodeIndex).reduce((sum, link) => sum + link.value, 0);
+  return outgoing > 0 ? outgoing : incoming;
+};
+var resolveSankeyRenderers = (children) => {
+  let nodeProps = null;
+  let linkProps = null;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === Node) {
+      nodeProps = child.props;
+    }
+    if (child.type === Link) {
+      linkProps = child.props;
+    }
+  });
+  return {
+    node: (props) => /* @__PURE__ */ jsx4(SankeyNode, { ...props, nodeConfig: nodeProps }),
+    link: (props) => /* @__PURE__ */ jsx4(SankeyLink, { ...props, linkConfig: linkProps })
+  };
+};
+var resolveNodeLabel = (children) => {
+  let label = null;
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === NodeLabel) {
+      label = child.props;
+    }
+  });
+  return label;
+};
+var SankeyNode = ({
+  x,
+  y,
+  width,
+  height,
+  payload,
+  nodeConfig
+}) => {
+  const { config, chartId, data, selectedNode, selectNode } = useSankeyChart();
+  const radius = nodeConfig?.radius ?? 0;
+  const isClickable = nodeConfig?.isClickable ?? false;
+  const label = resolveNodeLabel(nodeConfig?.children);
+  const nodeName = payload.name;
+  const nodeValue = payload.value;
+  const nodeIcon = payload.icon;
+  const isHighlighted = isNodeConnected(data, selectedNode, nodeName);
+  const hasConfigColor = nodeName in config;
+  const configLabel = config[nodeName]?.label ?? nodeName;
+  const dimmed = isClickable && !isHighlighted;
+  const valueFormatter = label?.valueFormatter ?? ((value) => value.toLocaleString());
+  const showValues = label?.showValues ?? false;
+  const labelX = x + width / 2;
+  const labelY = showValues ? y + height / 2 - 8 : y + height / 2;
+  const valueY = y + height / 2 + 8;
+  const outsideLabelX = x + width + 8;
+  const outsideLabelY = y + height / 2;
+  return /* @__PURE__ */ jsxs4(Layer, { children: [
+    /* @__PURE__ */ jsx4(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: radius,
+        ry: radius,
+        fill: hasConfigColor ? `url(#${chartId}-sankey-colors-${nodeName})` : "currentColor",
+        fillOpacity: dimmed ? 0.3 : 0.9,
+        className: "transition-opacity duration-200",
+        style: isClickable ? { cursor: "pointer" } : void 0,
+        onClick: () => {
+          if (!isClickable) return;
+          selectNode(selectedNode === nodeName ? null : nodeName);
+        }
+      }
+    ),
+    label?.position === "inside" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
+        "rect",
+        {
+          x: x + 1,
+          y: y + 1,
+          width: width - 2,
+          height: height - 2,
+          rx: Math.max(0, radius - 1),
+          ry: Math.max(0, radius - 1),
+          opacity: dimmed ? 0.3 : 1,
+          className: "fill-white/50 transition-opacity duration-200 dark:fill-black/60",
+          style: { pointerEvents: "none" }
+        }
+      ),
+      nodeIcon && /* @__PURE__ */ jsx4(
+        "foreignObject",
+        {
+          x: labelX - 8,
+          y: labelY - 30,
+          width: 16,
+          height: 16,
+          opacity: dimmed ? 0.3 : 1,
+          className: "transition-opacity duration-200",
+          style: { pointerEvents: "none" },
+          children: /* @__PURE__ */ jsx4("div", { className: "text-bruv-primary/80 flex items-center justify-center dark:text-white/80", children: nodeIcon })
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "text",
+        {
+          x: labelX,
+          y: nodeIcon ? labelY - 4 : labelY,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          className: "fill-foreground text-[10px] font-medium transition-opacity duration-200 dark:fill-white",
+          opacity: dimmed ? 0.3 : 1,
+          style: { pointerEvents: "none" },
+          children: configLabel
+        }
+      ),
+      showValues && /* @__PURE__ */ jsx4(
+        "text",
+        {
+          x: labelX,
+          y: valueY,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          className: "fill-foreground/60 font-mono text-xs font-medium tabular-nums transition-opacity duration-200 dark:fill-white",
+          opacity: dimmed ? 0.3 : 0.6,
+          style: { pointerEvents: "none" },
+          children: valueFormatter(nodeValue)
+        }
+      )
+    ] }),
+    label?.position === "outside" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
+        "text",
+        {
+          x: outsideLabelX,
+          y: outsideLabelY - (showValues ? 8 : 0),
+          textAnchor: "start",
+          dominantBaseline: "middle",
+          className: "fill-foreground text-xs",
+          style: { pointerEvents: "none" },
+          children: configLabel
+        }
+      ),
+      showValues && /* @__PURE__ */ jsx4(
+        "text",
+        {
+          x: outsideLabelX,
+          y: outsideLabelY + 8,
+          textAnchor: "start",
+          dominantBaseline: "middle",
+          opacity: 0.5,
+          className: "fill-foreground font-mono text-xs tabular-nums dark:fill-white",
+          style: { pointerEvents: "none" },
+          children: valueFormatter(nodeValue)
+        }
+      )
+    ] })
+  ] });
+};
+var SankeyLink = ({
+  sourceX,
+  targetX,
+  sourceY,
+  targetY,
+  sourceControlX,
+  targetControlX,
+  linkWidth,
+  index,
+  payload,
+  linkConfig
+}) => {
+  const { config, chartId, selectedNode } = useSankeyChart();
+  const variant = linkConfig?.variant ?? "gradient";
+  const verticalPadding = linkConfig?.verticalPadding ?? 0;
+  const sourceName = payload.source.name;
+  const targetName = payload.target.name;
+  const isConnected = selectedNode === null || selectedNode === sourceName || selectedNode === targetName;
+  const paddedLinkWidth = Math.max(1, linkWidth - verticalPadding);
+  const halfWidth = paddedLinkWidth / 2;
+  const linkAreaPath = `M${sourceX},${sourceY - halfWidth}
+    C${sourceControlX},${sourceY - halfWidth} ${targetControlX},${targetY - halfWidth} ${targetX},${targetY - halfWidth}
+    L${targetX},${targetY + halfWidth}
+    C${targetControlX},${targetY + halfWidth} ${sourceControlX},${sourceY + halfWidth} ${sourceX},${sourceY + halfWidth}
+    Z`;
+  return /* @__PURE__ */ jsxs4(Layer, { children: [
+    /* @__PURE__ */ jsxs4("defs", { children: [
+      variant === "gradient" && /* @__PURE__ */ jsx4(
+        LinkGradient,
+        {
+          chartId,
+          index,
+          config,
+          sourceName,
+          targetName
+        }
+      ),
+      /* @__PURE__ */ jsx4(LinkStrokeGradient, { chartId, index })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        d: linkAreaPath,
+        fill: getLinkFill(
+          variant,
+          chartId,
+          index,
+          config,
+          sourceName,
+          targetName
+        ),
+        fillOpacity: isConnected ? 0.4 : 0.1,
+        stroke: selectedNode !== null && isConnected ? `url(#${chartId}-link-stroke-${index})` : "none",
+        strokeWidth: 1,
+        strokeOpacity: 0.3,
+        className: "transition-opacity duration-200"
+      }
+    )
+  ] });
+};
+var isNodeConnected = (data, selectedNode, nodeName) => {
+  if (selectedNode === null || selectedNode === nodeName) return true;
+  const selectedIdx = data.nodes.findIndex((node) => node.name === selectedNode);
+  const nodeIdx = data.nodes.findIndex((node) => node.name === nodeName);
+  return data.links.some(
+    (link) => link.source === selectedIdx && link.target === nodeIdx || link.source === nodeIdx && link.target === selectedIdx
+  );
+};
+var getLinkFill = (variant, chartId, index, config, sourceName, targetName) => {
+  switch (variant) {
+    case "gradient":
+      return `url(#${chartId}-link-gradient-${index})`;
+    case "source":
+      return sourceName in config ? `url(#${chartId}-sankey-colors-${sourceName})` : "currentColor";
+    case "target":
+      return targetName in config ? `url(#${chartId}-sankey-colors-${targetName})` : "currentColor";
+    case "solid":
+    default:
+      return "currentColor";
+  }
+};
+var NodeColorGradients = ({
+  config,
+  chartId
+}) => {
+  return /* @__PURE__ */ jsx4(Fragment2, { children: Object.entries(config).map(([dataKey, nodeConfig]) => {
+    const colorsCount = getColorsCount(nodeConfig);
+    return /* @__PURE__ */ jsx4(
+      "linearGradient",
+      {
+        id: `${chartId}-sankey-colors-${dataKey}`,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: colorsCount === 1 ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: `var(--color-${dataKey}-0)` }),
+          /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: `var(--color-${dataKey}-0)` })
+        ] }) : Array.from({ length: colorsCount }, (_, index) => {
+          const offset = `${index / (colorsCount - 1) * 100}%`;
+          return /* @__PURE__ */ jsx4(
+            "stop",
+            {
+              offset,
+              stopColor: `var(--color-${dataKey}-${index}, var(--color-${dataKey}-0))`
+            },
+            offset
+          );
+        })
+      },
+      `${chartId}-sankey-colors-${dataKey}`
+    );
+  }) });
+};
+var LinkGradient = ({
+  chartId,
+  index,
+  config,
+  sourceName,
+  targetName
+}) => {
+  const sourceColor = sourceName in config ? `var(--color-${sourceName}-0)` : "currentColor";
+  const targetColor = targetName in config ? `var(--color-${targetName}-0)` : "currentColor";
+  return /* @__PURE__ */ jsxs4(
+    "linearGradient",
+    {
+      id: `${chartId}-link-gradient-${index}`,
+      x1: "0%",
+      y1: "0%",
+      x2: "100%",
+      y2: "0%",
+      children: [
+        /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: sourceColor, stopOpacity: 0.2 }),
+        /* @__PURE__ */ jsx4("stop", { offset: "50%", stopColor: sourceColor, stopOpacity: 0.5 }),
+        /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: targetColor, stopOpacity: 0.2 })
+      ]
+    }
+  );
+};
+var LinkStrokeGradient = ({
+  chartId,
+  index
+}) => {
+  return /* @__PURE__ */ jsxs4(
+    "linearGradient",
+    {
+      id: `${chartId}-link-stroke-${index}`,
+      x1: "0%",
+      y1: "0%",
+      x2: "100%",
+      y2: "0%",
+      children: [
+        /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: "var(--primary)", stopOpacity: 0 }),
+        /* @__PURE__ */ jsx4("stop", { offset: "15%", stopColor: "var(--primary)", stopOpacity: 0.8 }),
+        /* @__PURE__ */ jsx4("stop", { offset: "50%", stopColor: "var(--primary)", stopOpacity: 1 }),
+        /* @__PURE__ */ jsx4("stop", { offset: "85%", stopColor: "var(--primary)", stopOpacity: 0.8 }),
+        /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: "var(--primary)", stopOpacity: 0 })
+      ]
+    }
+  );
+};
+var LoadingSankey = () => {
+  const nodes = [
+    { x: 30, y: 25, width: 12, height: 65, delay: 0 },
+    { x: 30, y: 110, width: 12, height: 50, delay: 0.3 },
+    { x: 30, y: 180, width: 12, height: 45, delay: 0.15 },
+    { x: 244, y: 20, width: 12, height: 55, delay: 0.45 },
+    { x: 244, y: 95, width: 12, height: 75, delay: 0.6 },
+    { x: 244, y: 190, width: 12, height: 40, delay: 0.25 },
+    { x: 458, y: 35, width: 12, height: 80, delay: 0.5 },
+    { x: 458, y: 135, width: 12, height: 90, delay: 0.1 }
+  ];
+  const links = [
+    { from: 0, to: 3, width: 26, delay: 0.2 },
+    { from: 0, to: 4, width: 18, delay: 0.7 },
+    { from: 1, to: 4, width: 24, delay: 0.4 },
+    { from: 1, to: 5, width: 12, delay: 0.9 },
+    { from: 2, to: 4, width: 16, delay: 0.1 },
+    { from: 2, to: 5, width: 14, delay: 0.55 },
+    { from: 3, to: 6, width: 22, delay: 0.35 },
+    { from: 3, to: 7, width: 18, delay: 0.8 },
+    { from: 4, to: 6, width: 28, delay: 0.05 },
+    { from: 4, to: 7, width: 32, delay: 0.65 },
+    { from: 5, to: 7, width: 16, delay: 0.45 }
+  ];
+  const getLinkPath = (fromIdx, toIdx) => {
+    const from = nodes[fromIdx];
+    const to = nodes[toIdx];
+    const startX = from.x + from.width;
+    const startY = from.y + from.height / 2;
+    const endX = to.x;
+    const endY = to.y + to.height / 2;
+    const controlX1 = startX + (endX - startX) * 0.4;
+    const controlX2 = startX + (endX - startX) * 0.6;
+    return `M${startX},${startY} C${controlX1},${startY} ${controlX2},${endY} ${endX},${endY}`;
+  };
+  const baseDuration = LOADING_ANIMATION_DURATION / 1e3;
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    links.map((link, i) => /* @__PURE__ */ jsx4(
+      motion.path,
+      {
+        d: getLinkPath(link.from, link.to),
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: link.width,
+        initial: { opacity: 0.04 },
+        animate: { opacity: [0.04, 0.14, 0.04] },
+        transition: {
+          duration: baseDuration * (0.8 + i % 3 * 0.2),
+          delay: link.delay,
+          repeat: Infinity,
+          ease: "easeInOut"
+        }
+      },
+      `loading-link-${link.from}-${link.to}`
+    )),
+    nodes.map((node, i) => /* @__PURE__ */ jsx4(
+      motion.rect,
+      {
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height,
+        rx: 2,
+        fill: "currentColor",
+        initial: { opacity: 0.15 },
+        animate: { opacity: [0.15, 0.4, 0.15] },
+        transition: {
+          duration: baseDuration * (0.9 + i % 4 * 0.1),
+          delay: node.delay,
+          repeat: Infinity,
+          ease: "easeInOut"
+        }
+      },
+      `loading-node-${node.x}-${node.y}`
+    ))
+  ] });
+};
+export {
+  Link,
+  Node,
+  NodeLabel,
+  SankeyChart,
+  Tooltip2 as Tooltip
+};
+//# sourceMappingURL=sankey-chart.js.map