@sesionario/blocks 1.27.0 → 1.28.0

package/dist/charts.cjs

@@ -0,0 +1,1904 @@
+"use client";
+'use strict';
+
+var responsive = require('@visx/responsive');
+var react$1 = require('motion/react');
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var NumberFlow = require('@number-flow/react');
+var jsxRuntime = require('react/jsx-runtime');
+var d3Shape = require('d3-shape');
+var group = require('@visx/group');
+var shape = require('@visx/shape');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var NumberFlow__default = /*#__PURE__*/_interopDefault(NumberFlow);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var defaultChartStatFlowFormat = {
+  notation: "standard",
+  maximumFractionDigits: 0
+};
+function formatStatValue(value, formatOptions, prefix, suffix) {
+  const formatted = new Intl.NumberFormat(void 0, formatOptions).format(
+    value
+  );
+  return `${prefix ?? ""}${formatted}${suffix ?? ""}`;
+}
+function useNumberFlowElementReady() {
+  const [ready, setReady] = react.useState(
+    () => typeof customElements !== "undefined" && Boolean(customElements.get("number-flow-react"))
+  );
+  react.useEffect(() => {
+    if (ready) {
+      return;
+    }
+    let cancelled = false;
+    customElements.whenDefined("number-flow-react").then(() => {
+      if (!cancelled) {
+        setReady(true);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [ready]);
+  return ready;
+}
+function ChartStatFlow({
+  value,
+  label,
+  formatOptions = defaultChartStatFlowFormat,
+  prefix,
+  suffix,
+  valueClassName = "text-2xl font-bold",
+  labelClassName = "text-xs",
+  icon
+}) {
+  const numberFlowReady = useNumberFlowElementReady();
+  const staticValue = react.useMemo(
+    () => formatStatValue(value, formatOptions, prefix, suffix),
+    [value, formatOptions, prefix, suffix]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-muted/50", children: icon }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-foreground tabular-nums", valueClassName), children: numberFlowReady ? /* @__PURE__ */ jsxRuntime.jsx(
+      NumberFlow__default.default,
+      {
+        format: formatOptions,
+        isolate: true,
+        prefix,
+        suffix,
+        value,
+        willChange: true
+      }
+    ) : staticValue }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mt-0.5 text-chart-label", labelClassName), children: label })
+  ] });
+}
+ChartStatFlow.displayName = "ChartStatFlow";
+
+// src/components/charts/chart-center-typography.ts
+var chartCenterContainerClassName = "@container/chart-center size-full min-w-0";
+var chartCenterValueClassName = "font-bold tabular-nums leading-none text-[clamp(0.75rem,22cqw,1.875rem)]";
+var chartCenterLabelClassName = "max-w-full truncate leading-tight text-[clamp(0.625rem,9cqw,0.75rem)]";
+var labelAlignClass = {
+  start: "items-start text-left",
+  center: "items-center text-center",
+  end: "items-end text-right"
+};
+function GaugeLabelShell({
+  centerValue,
+  defaultLabel = "Total",
+  prefix,
+  suffix,
+  formatOptions = defaultChartStatFlowFormat,
+  align = "center",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        chartCenterContainerClassName,
+        "flex min-w-0 flex-col",
+        labelAlignClass[align],
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ChartStatFlow,
+        {
+          formatOptions,
+          label: defaultLabel,
+          labelClassName: cn(
+            chartCenterLabelClassName,
+            "text-[length:var(--chart-foreground-muted)]"
+          ),
+          prefix,
+          suffix,
+          value: centerValue,
+          valueClassName: cn(
+            chartCenterValueClassName,
+            "text-[length:var(--chart-foreground)]"
+          )
+        }
+      )
+    }
+  );
+}
+var crossAxisSelf = {
+  start: "self-start",
+  center: "self-center",
+  end: "self-end"
+};
+var crossAxisAlign = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end"
+};
+var inlineAxisAlign = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end"
+};
+function GaugeLabelLayout({
+  placement,
+  align,
+  label,
+  children,
+  className
+}) {
+  if (!label) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full min-w-0", className), children });
+  }
+  if (placement === "top") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-full min-w-0 flex-col gap-3",
+          crossAxisAlign[align],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: crossAxisSelf[align], children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-0", children })
+        ]
+      }
+    );
+  }
+  if (placement === "bottom") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-full min-w-0 flex-col gap-3",
+          crossAxisAlign[align],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-0", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: crossAxisSelf[align], children: label })
+        ]
+      }
+    );
+  }
+  if (placement === "left") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex w-full min-w-0 items-center gap-4",
+          inlineAxisAlign[align],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full min-w-0 items-center gap-4",
+        inlineAxisAlign[align],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: label })
+      ]
+    }
+  );
+}
+var DEFAULT_ACTIVE_GRADIENT = [
+  "#bef264",
+  "#10b981"
+];
+var DEFAULT_ACTIVE_FILL_OPACITY = 1;
+var DEFAULT_INACTIVE_FILL_OPACITY = 0.8;
+var DEFAULT_LINEAR_GAUGE_HEIGHT = 24;
+function isDefsComponent(child) {
+  const typeLabel = child.type?.displayName || child.type?.name || "";
+  return typeLabel.includes("Gradient") || typeLabel.includes("Pattern") || typeLabel === "LinearGradient" || typeLabel === "RadialGradient" || typeLabel === "Lines" || typeLabel === "PatternLines" || typeLabel === "Circles" || typeLabel === "Hexagons" || typeLabel === "Waves";
+}
+function collectGaugeDefsElements(nodes) {
+  const out = [];
+  react.Children.forEach(nodes, (child) => {
+    if (!react.isValidElement(child)) {
+      return;
+    }
+    if (child.type === react.Fragment) {
+      out.push(
+        ...collectGaugeDefsElements(
+          child.props.children
+        )
+      );
+      return;
+    }
+    if (isDefsComponent(child)) {
+      out.push(child);
+    }
+  });
+  return out;
+}
+function interpolateGaugeHex(color1, color2, factor) {
+  const hex = (c) => Number.parseInt(c, 16);
+  const r1 = hex(color1.slice(1, 3));
+  const g1 = hex(color1.slice(3, 5));
+  const b1 = hex(color1.slice(5, 7));
+  const r2 = hex(color2.slice(1, 3));
+  const g2 = hex(color2.slice(3, 5));
+  const b2 = hex(color2.slice(5, 7));
+  const r = Math.round(r1 + (r2 - r1) * factor);
+  const g = Math.round(g1 + (g2 - g1) * factor);
+  const b = Math.round(b1 + (b2 - b1) * factor);
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+function createNotchPath(points, cornerRadiusPx, verticalDepth) {
+  const { x1, y1, x2, y2, x3, y3, x4, y4 } = points;
+  const lerp = (a, b, t) => a + (b - a) * t;
+  const dist = (ax, ay, bx, by) => Math.hypot(bx - ax, by - ay);
+  const d12 = dist(x1, y1, x2, y2);
+  const d23 = dist(x2, y2, x3, y3);
+  const d34 = dist(x3, y3, x4, y4);
+  const d41 = dist(x4, y4, x1, y1);
+  if (cornerRadiusPx <= 0) {
+    return `M ${x1} ${y1} L ${x2} ${y2} L ${x3} ${y3} L ${x4} ${y4} Z`;
+  }
+  const minEdge = Math.min(d12, d23, d34, d41);
+  const cr = Math.min(
+    cornerRadiusPx,
+    verticalDepth * 0.48,
+    d12 * 0.49,
+    d23 * 0.49,
+    d34 * 0.49,
+    d41 * 0.49,
+    minEdge * 0.49
+  );
+  const r1 = Math.min(cr / d12, 0.49);
+  const r2 = Math.min(cr / d23, 0.49);
+  const r3 = Math.min(cr / d34, 0.49);
+  const r4 = Math.min(cr / d41, 0.49);
+  const p1a = { x: lerp(x1, x4, r4), y: lerp(y1, y4, r4) };
+  const p1b = { x: lerp(x1, x2, r1), y: lerp(y1, y2, r1) };
+  const p2a = { x: lerp(x2, x1, r1), y: lerp(y2, y1, r1) };
+  const p2b = { x: lerp(x2, x3, r2), y: lerp(y2, y3, r2) };
+  const p3a = { x: lerp(x3, x2, r2), y: lerp(y3, y2, r2) };
+  const p3b = { x: lerp(x3, x4, r3), y: lerp(y3, y4, r3) };
+  const p4a = { x: lerp(x4, x3, r3), y: lerp(y4, y3, r3) };
+  const p4b = { x: lerp(x4, x1, r4), y: lerp(y4, y1, r4) };
+  return `M ${p1a.x} ${p1a.y} Q ${x1} ${y1} ${p1b.x} ${p1b.y} L ${p2a.x} ${p2a.y} Q ${x2} ${y2} ${p2b.x} ${p2b.y} L ${p3a.x} ${p3a.y} Q ${x3} ${y3} ${p3b.x} ${p3b.y} L ${p4a.x} ${p4a.y} Q ${x4} ${y4} ${p4b.x} ${p4b.y} Z`;
+}
+function resolveGaugeBgFill(options) {
+  const {
+    notchIndex,
+    totalNotches,
+    hasCustomInactive,
+    inactiveFill,
+    useThemePaletteGradient,
+    useGradient,
+    inactiveGrad0,
+    inactiveGrad1,
+    arcTrackFill,
+    linearTrackFill,
+    linearMode
+  } = options;
+  if (hasCustomInactive) {
+    return inactiveFill;
+  }
+  if (useThemePaletteGradient) {
+    return linearMode ? "var(--chart-1)" : arcTrackFill;
+  }
+  if (useGradient) {
+    const denom = totalNotches > 1 ? totalNotches - 1 : 1;
+    return interpolateGaugeHex(
+      inactiveGrad0,
+      inactiveGrad1,
+      notchIndex / denom
+    );
+  }
+  return linearMode ? linearTrackFill : arcTrackFill;
+}
+function resolveGaugeActiveFill(options) {
+  const {
+    notch,
+    hasCustomActive,
+    activeFill,
+    useThemePaletteGradient,
+    themeActiveGradientId,
+    useGradient,
+    activeFillSolid
+  } = options;
+  if (hasCustomActive) {
+    return activeFill;
+  }
+  if (useThemePaletteGradient) {
+    return `url(#${themeActiveGradientId})`;
+  }
+  if (useGradient) {
+    return notch.gradientColor;
+  }
+  return activeFillSolid;
+}
+var pieCssVars = {
+  // Default slice colors from chart palette
+  slice1: "var(--chart-1)",
+  slice2: "var(--chart-2)",
+  slice3: "var(--chart-3)",
+  slice4: "var(--chart-4)",
+  slice5: "var(--chart-5)"
+};
+var defaultPieColors = [
+  pieCssVars.slice1,
+  pieCssVars.slice2,
+  pieCssVars.slice3,
+  pieCssVars.slice4,
+  pieCssVars.slice5
+];
+var PieStableContext = react.createContext(null);
+var PieHoverContext = react.createContext(null);
+function PieProvider({
+  children,
+  value
+}) {
+  const stable = react.useMemo(
+    () => ({
+      data: value.data,
+      arcs: value.arcs,
+      size: value.size,
+      center: value.center,
+      outerRadius: value.outerRadius,
+      innerRadius: value.innerRadius,
+      padAngle: value.padAngle,
+      cornerRadius: value.cornerRadius,
+      hoverOffset: value.hoverOffset,
+      animationKey: value.animationKey,
+      isLoaded: value.isLoaded,
+      enterTransition: value.enterTransition,
+      enterStaggerScale: value.enterStaggerScale,
+      containerRef: value.containerRef,
+      totalValue: value.totalValue,
+      getColor: value.getColor,
+      getFill: value.getFill,
+      geometryScrubbing: value.geometryScrubbing,
+      scrubSlicePaths: value.scrubSlicePaths
+    }),
+    [
+      value.data,
+      value.arcs,
+      value.size,
+      value.center,
+      value.outerRadius,
+      value.innerRadius,
+      value.padAngle,
+      value.cornerRadius,
+      value.hoverOffset,
+      value.animationKey,
+      value.isLoaded,
+      value.enterTransition,
+      value.enterStaggerScale,
+      value.containerRef,
+      value.totalValue,
+      value.getColor,
+      value.getFill,
+      value.geometryScrubbing,
+      value.scrubSlicePaths
+    ]
+  );
+  const hover = react.useMemo(
+    () => ({
+      hoveredIndex: value.hoveredIndex,
+      setHoveredIndex: value.setHoveredIndex
+    }),
+    [value.hoveredIndex, value.setHoveredIndex]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PieStableContext.Provider, { value: stable, children: /* @__PURE__ */ jsxRuntime.jsx(PieHoverContext.Provider, { value: hover, children }) });
+}
+function usePieStable() {
+  const context = react.useContext(PieStableContext);
+  if (!context) {
+    throw new Error(
+      "usePieStable must be used within a PieProvider. Make sure your component is wrapped in <PieChart>."
+    );
+  }
+  return context;
+}
+function usePieHover() {
+  const context = react.useContext(PieHoverContext);
+  if (!context) {
+    throw new Error(
+      "usePieHover must be used within a PieProvider. Make sure your component is wrapped in <PieChart>."
+    );
+  }
+  return context;
+}
+function PieCenter({
+  defaultLabel = "Total",
+  formatOptions = defaultChartStatFlowFormat,
+  children,
+  className = "",
+  valueClassName = chartCenterValueClassName,
+  labelClassName = chartCenterLabelClassName,
+  prefix,
+  suffix
+}) {
+  const { data, totalValue, innerRadius, geometryScrubbing } = usePieStable();
+  const { hoveredIndex } = usePieHover();
+  const effectiveHoveredIndex = geometryScrubbing ? null : hoveredIndex;
+  const hoveredData = effectiveHoveredIndex === null ? null : data[effectiveHoveredIndex];
+  const displayValue = hoveredData ? hoveredData.value : totalValue;
+  const displayLabel = hoveredData ? hoveredData.label : defaultLabel;
+  const centerSize = innerRadius * 2 - 16;
+  if (innerRadius <= 0) {
+    return null;
+  }
+  if (children && hoveredData) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          chartCenterContainerClassName,
+          "flex items-center justify-center",
+          className
+        ),
+        style: { width: centerSize, height: centerSize },
+        children: children({
+          value: displayValue,
+          label: displayLabel,
+          isHovered: effectiveHoveredIndex !== null,
+          data: hoveredData
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        chartCenterContainerClassName,
+        "flex flex-col items-center justify-center text-center",
+        className
+      ),
+      style: { width: centerSize, height: centerSize },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ChartStatFlow,
+        {
+          formatOptions,
+          label: displayLabel,
+          labelClassName,
+          prefix,
+          suffix,
+          value: displayValue,
+          valueClassName
+        }
+      )
+    }
+  );
+}
+PieCenter.displayName = "PieCenter";
+var SHELL_HOVER_OFFSET = 10;
+function PieCenterShell({
+  centerValue,
+  contextSize,
+  innerRadiusPx,
+  animateEntrance = true,
+  ...pieCenterProps
+}) {
+  const containerRef = react.useRef(null);
+  const introStartedRef = react.useRef(false);
+  const [flowTotal, setFlowTotal] = react.useState(
+    () => animateEntrance ? 0 : centerValue
+  );
+  react.useEffect(() => {
+    if (!animateEntrance) {
+      setFlowTotal(centerValue);
+      return;
+    }
+    if (!introStartedRef.current) {
+      introStartedRef.current = true;
+      setFlowTotal(0);
+      let innerRaf = 0;
+      const outerRaf = requestAnimationFrame(() => {
+        innerRaf = requestAnimationFrame(() => setFlowTotal(centerValue));
+      });
+      return () => {
+        cancelAnimationFrame(outerRaf);
+        cancelAnimationFrame(innerRaf);
+        introStartedRef.current = false;
+      };
+    }
+    setFlowTotal(centerValue);
+  }, [animateEntrance, centerValue]);
+  const data = react.useMemo(
+    () => [{ label: "_pieCenterShell", value: Math.max(flowTotal, 0) }],
+    [flowTotal]
+  );
+  const totalValue = flowTotal;
+  const arcs = react.useMemo(() => {
+    const v = data[0]?.value ?? 0;
+    if (v > 0) {
+      const pieGenerator = d3Shape.pie().value((d) => d.value).startAngle(-Math.PI / 2).endAngle(3 * Math.PI / 2).padAngle(0).sort(null);
+      const computed = pieGenerator(data);
+      return computed.map((arc, index) => ({
+        data: arc.data,
+        index,
+        startAngle: arc.startAngle,
+        endAngle: arc.endAngle,
+        padAngle: arc.padAngle,
+        value: arc.value
+      }));
+    }
+    const d0 = data[0];
+    if (!d0) {
+      return [];
+    }
+    return [
+      {
+        data: d0,
+        index: 0,
+        startAngle: -Math.PI / 2,
+        endAngle: 3 * Math.PI / 2,
+        padAngle: 0,
+        value: 0
+      }
+    ];
+  }, [data]);
+  const getColor = react.useCallback((index) => {
+    return defaultPieColors[index % defaultPieColors.length];
+  }, []);
+  const getFill = react.useCallback(
+    (index) => {
+      const item = data[index];
+      if (item?.fill) {
+        return item.fill;
+      }
+      return getColor(index);
+    },
+    [data, getColor]
+  );
+  const center = contextSize / 2;
+  const outerRadius = center - SHELL_HOVER_OFFSET;
+  const contextValue = react.useMemo(
+    () => ({
+      data,
+      arcs,
+      size: contextSize,
+      center,
+      outerRadius,
+      innerRadius: innerRadiusPx,
+      padAngle: 0,
+      cornerRadius: 0,
+      hoverOffset: SHELL_HOVER_OFFSET,
+      hoveredIndex: null,
+      setHoveredIndex: () => void 0,
+      animationKey: 0,
+      isLoaded: true,
+      enterStaggerScale: 1,
+      containerRef,
+      totalValue,
+      getColor,
+      getFill,
+      geometryScrubbing: false,
+      scrubSlicePaths: null
+    }),
+    [
+      data,
+      arcs,
+      contextSize,
+      center,
+      outerRadius,
+      innerRadiusPx,
+      totalValue,
+      getColor,
+      getFill
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PieProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(PieCenter, { ...pieCenterProps }) });
+}
+PieCenterShell.displayName = "PieCenterShell";
+var DEFAULT_NOTCH_ENTER_TRANSITION = {
+  type: "spring",
+  stiffness: 300,
+  damping: 20
+};
+function GaugeNotchSvg({
+  notches,
+  width,
+  height,
+  notchCornerRadius,
+  cornerDepth,
+  geometryScrubbing,
+  notchTransition,
+  stagger,
+  defsChildren,
+  useThemePaletteGradient,
+  themeActiveGradientId,
+  resolvedInactiveFillOpacity,
+  resolvedActiveFillOpacity,
+  resolveBgFill,
+  resolveActiveFill
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "block w-full overflow-visible",
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      width,
+      children: [
+        defsChildren.length > 0 || useThemePaletteGradient ? /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          useThemePaletteGradient ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "linearGradient",
+            {
+              id: themeActiveGradientId,
+              x1: "0%",
+              x2: "100%",
+              y1: "0%",
+              y2: "0%",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--chart-1)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--chart-5)" })
+              ]
+            }
+          ) : null,
+          defsChildren
+        ] }) : null,
+        notches.map((notch) => {
+          const pathD = createNotchPath(
+            notch.points,
+            notchCornerRadius,
+            cornerDepth
+          );
+          if (geometryScrubbing) {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: pathD,
+                fill: resolveBgFill(notch.index),
+                fillOpacity: resolvedInactiveFillOpacity
+              },
+              `bg-${notch.index}`
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.motion.path,
+            {
+              animate: { opacity: 1, scale: 1 },
+              d: pathD,
+              fill: resolveBgFill(notch.index),
+              fillOpacity: resolvedInactiveFillOpacity,
+              initial: { opacity: 0, scale: 0 },
+              style: {
+                transformOrigin: `${notch.xCenter}px ${notch.yCenter}px`
+              },
+              transition: {
+                ...notchTransition,
+                delay: notch.index * 0.015 * stagger
+              }
+            },
+            `bg-${notch.index}`
+          );
+        }),
+        notches.filter((n) => n.isActive).map((notch) => {
+          const pathD = createNotchPath(
+            notch.points,
+            notchCornerRadius,
+            cornerDepth
+          );
+          if (geometryScrubbing) {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: pathD,
+                fill: resolveActiveFill(notch),
+                fillOpacity: resolvedActiveFillOpacity
+              },
+              `active-${notch.index}`
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.motion.path,
+            {
+              animate: { opacity: 1, scale: 1 },
+              d: pathD,
+              fill: resolveActiveFill(notch),
+              fillOpacity: resolvedActiveFillOpacity,
+              initial: { opacity: 0, scale: 0 },
+              style: {
+                transformOrigin: `${notch.xCenter}px ${notch.yCenter}px`
+              },
+              transition: {
+                ...notchTransition,
+                delay: (0.3 + notch.index * 0.02) * stagger
+              }
+            },
+            `active-${notch.index}`
+          );
+        })
+      ]
+    }
+  );
+}
+function useGaugeFillState(props) {
+  const {
+    useGradient = false,
+    activeGradient,
+    inactiveGradient,
+    inactiveFill,
+    activeFill,
+    inactiveFillOpacity,
+    activeFillOpacity,
+    children,
+    totalNotches = 40
+  } = props;
+  const themeActiveGradientId = `gauge-theme-active-${react.useId().replace(/:/g, "")}`;
+  const defsChildren = react.useMemo(
+    () => collectGaugeDefsElements(children),
+    [children]
+  );
+  const hasCustomInactive = inactiveFill !== void 0 && inactiveFill.length > 0;
+  const hasCustomActive = activeFill !== void 0 && activeFill.length > 0;
+  const activeGrad0 = activeGradient?.[0] ?? DEFAULT_ACTIVE_GRADIENT[0];
+  const activeGrad1 = activeGradient?.[1] ?? DEFAULT_ACTIVE_GRADIENT[1];
+  const inactiveGrad0 = inactiveGradient?.[0] ?? activeGrad0;
+  const inactiveGrad1 = inactiveGradient?.[1] ?? activeGrad1;
+  const useThemePaletteGradient = useGradient && activeGradient === void 0;
+  return {
+    themeActiveGradientId,
+    defsChildren,
+    hasCustomInactive,
+    hasCustomActive,
+    activeGrad0,
+    activeGrad1,
+    inactiveGrad0,
+    inactiveGrad1,
+    useThemePaletteGradient,
+    resolvedActiveFillOpacity: activeFillOpacity ?? DEFAULT_ACTIVE_FILL_OPACITY,
+    resolvedInactiveFillOpacity: inactiveFillOpacity ?? DEFAULT_INACTIVE_FILL_OPACITY,
+    totalNotches
+  };
+}
+function GaugeArcInner(props) {
+  const {
+    value,
+    totalNotches = 40,
+    spacing = 25,
+    notchCornerRadius = 0,
+    uniformWidth = false,
+    width,
+    height,
+    startAngle = 135,
+    endAngle = 405,
+    useGradient = false,
+    centerValue,
+    defaultLabel = "Total",
+    prefix,
+    suffix,
+    formatOptions = defaultChartStatFlowFormat,
+    inactiveFill,
+    activeFill,
+    notchLengthPercent = 100,
+    enterTransition,
+    enterStaggerScale = 1
+  } = props;
+  const prefersReducedMotion = react$1.useReducedMotion();
+  const fillState = useGaugeFillState(props);
+  const notchTransition = prefersReducedMotion ? { duration: 0 } : enterTransition ?? DEFAULT_NOTCH_ENTER_TRANSITION;
+  const stagger = Math.max(0.25, Math.min(2.5, enterStaggerScale));
+  const size = Math.min(width, height);
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const outerRadius = size * 0.42;
+  const innerRadiusBase = size * 0.28;
+  const defaultRadialDepth = outerRadius - innerRadiusBase;
+  const depthFactor = Math.min(100, Math.max(5, notchLengthPercent)) / 100;
+  const notchLength = defaultRadialDepth * depthFactor;
+  const innerRadius = outerRadius - notchLength;
+  const activeNotches = Math.round(value / 100 * totalNotches);
+  const totalAngle = endAngle - startAngle;
+  const availableAngle = totalAngle * (1 - spacing / 100);
+  const notchAngle = totalNotches > 0 ? availableAngle / totalNotches : 0;
+  const gapDen = totalNotches - 1 > 0 ? totalNotches - 1 : 1;
+  const gapAngle = totalAngle * (spacing / 100) / gapDen;
+  const notches = react.useMemo(() => {
+    return Array.from({ length: totalNotches }, (_, i) => {
+      const angle = startAngle + i * (notchAngle + gapAngle) + notchAngle / 2;
+      const radians = angle * Math.PI / 180;
+      const arcNotchWidth = notchAngle * 0.8;
+      const halfWidth = arcNotchWidth * Math.PI / 180 / 2;
+      const x1 = centerX + Math.cos(radians - halfWidth) * outerRadius;
+      const y1 = centerY + Math.sin(radians - halfWidth) * outerRadius;
+      const x2 = centerX + Math.cos(radians + halfWidth) * outerRadius;
+      const y2 = centerY + Math.sin(radians + halfWidth) * outerRadius;
+      let x3;
+      let y3;
+      let x4;
+      let y4;
+      if (uniformWidth) {
+        const perpX = Math.cos(radians);
+        const perpY = Math.sin(radians);
+        x3 = x2 - perpX * notchLength;
+        y3 = y2 - perpY * notchLength;
+        x4 = x1 - perpX * notchLength;
+        y4 = y1 - perpY * notchLength;
+      } else {
+        x3 = centerX + Math.cos(radians + halfWidth) * innerRadius;
+        y3 = centerY + Math.sin(radians + halfWidth) * innerRadius;
+        x4 = centerX + Math.cos(radians - halfWidth) * innerRadius;
+        y4 = centerY + Math.sin(radians - halfWidth) * innerRadius;
+      }
+      const denom = totalNotches > 1 ? totalNotches - 1 : 1;
+      const gradientColor = useGradient && !fillState.useThemePaletteGradient ? interpolateGaugeHex(
+        fillState.activeGrad0,
+        fillState.activeGrad1,
+        i / denom
+      ) : "var(--chart-1)";
+      return {
+        index: i,
+        points: { x1, y1, x2, y2, x3, y3, x4, y4 },
+        isActive: i < activeNotches,
+        gradientColor,
+        xCenter: centerX,
+        yCenter: centerY
+      };
+    });
+  }, [
+    totalNotches,
+    notchAngle,
+    gapAngle,
+    centerX,
+    centerY,
+    outerRadius,
+    innerRadius,
+    activeNotches,
+    startAngle,
+    uniformWidth,
+    notchLength,
+    useGradient,
+    fillState.useThemePaletteGradient,
+    fillState.activeGrad0,
+    fillState.activeGrad1
+  ]);
+  const resolveBgFill = (notchIndex) => resolveGaugeBgFill({
+    notchIndex,
+    totalNotches,
+    hasCustomInactive: fillState.hasCustomInactive,
+    inactiveFill,
+    useThemePaletteGradient: fillState.useThemePaletteGradient,
+    useGradient,
+    inactiveGrad0: fillState.inactiveGrad0,
+    inactiveGrad1: fillState.inactiveGrad1,
+    arcTrackFill: "var(--border)",
+    linearTrackFill: "var(--chart-background)",
+    linearMode: false
+  });
+  const resolveActiveFill = (notch) => resolveGaugeActiveFill({
+    notch,
+    hasCustomActive: fillState.hasCustomActive,
+    activeFill,
+    useThemePaletteGradient: fillState.useThemePaletteGradient,
+    themeActiveGradientId: fillState.themeActiveGradientId,
+    useGradient,
+    activeFillSolid: "var(--chart-1)"
+  });
+  const showCenter = centerValue != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", style: { height, width }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GaugeNotchSvg,
+      {
+        cornerDepth: notchLength,
+        defsChildren: fillState.defsChildren,
+        geometryScrubbing: false,
+        height,
+        notchCornerRadius,
+        notches,
+        notchTransition,
+        resolveActiveFill,
+        resolveBgFill,
+        resolvedActiveFillOpacity: fillState.resolvedActiveFillOpacity,
+        resolvedInactiveFillOpacity: fillState.resolvedInactiveFillOpacity,
+        stagger,
+        themeActiveGradientId: fillState.themeActiveGradientId,
+        useThemePaletteGradient: fillState.useThemePaletteGradient,
+        width
+      }
+    ),
+    showCenter ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center",
+        style: { paddingTop: size * 0.08 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          PieCenterShell,
+          {
+            centerValue,
+            contextSize: size,
+            defaultLabel,
+            formatOptions,
+            innerRadiusPx: Math.max(size * 0.2, 52),
+            prefix,
+            suffix
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function GaugeLinearInner(props) {
+  const {
+    value,
+    totalNotches = 40,
+    spacing = 25,
+    notchCornerRadius = 0,
+    uniformWidth = true,
+    width,
+    height,
+    useGradient = false,
+    centerValue,
+    defaultLabel = "Total",
+    prefix,
+    suffix,
+    formatOptions = defaultChartStatFlowFormat,
+    labelPlacement = "top",
+    labelAlign = "start",
+    inactiveFill,
+    activeFill,
+    notchLengthPercent = 100,
+    notchWidthPercent = 80,
+    enterTransition,
+    enterStaggerScale = 1,
+    geometryScrubbing = false
+  } = props;
+  const prefersReducedMotion = react$1.useReducedMotion();
+  const fillState = useGaugeFillState(props);
+  const notchTransition = prefersReducedMotion ? { duration: 0 } : enterTransition ?? DEFAULT_NOTCH_ENTER_TRANSITION;
+  const stagger = Math.max(0.25, Math.min(2.5, enterStaggerScale));
+  const centerY = height / 2;
+  const depthFactor = Math.min(100, Math.max(5, notchLengthPercent)) / 100;
+  const outerOffset = height / 2 * depthFactor;
+  const taperRatio = 28 / 42;
+  const innerOffset = uniformWidth ? outerOffset : outerOffset * taperRatio;
+  const notchDepth = uniformWidth ? outerOffset * 2 : outerOffset - innerOffset;
+  const cornerVerticalDepth = uniformWidth ? notchDepth : outerOffset * 2;
+  const widthFactor = Math.min(100, Math.max(10, notchWidthPercent)) / 100;
+  const activeNotches = Math.round(value / 100 * totalNotches);
+  const availableWidth = width * (1 - spacing / 100);
+  const slotWidth = totalNotches > 0 ? availableWidth / totalNotches : 0;
+  const gapDen = totalNotches - 1 > 0 ? totalNotches - 1 : 1;
+  const gapWidth = width * (spacing / 100) / gapDen;
+  const notches = react.useMemo(() => {
+    return Array.from({ length: totalNotches }, (_, i) => {
+      const xCenter = i * (slotWidth + gapWidth) + slotWidth / 2;
+      const halfWidth = slotWidth * widthFactor / 2;
+      let x1;
+      let y1;
+      let x2;
+      let y2;
+      let x3;
+      let y3;
+      let x4;
+      let y4;
+      if (uniformWidth) {
+        const halfHeight = notchDepth / 2;
+        x1 = xCenter - halfWidth;
+        y1 = centerY - halfHeight;
+        x2 = xCenter + halfWidth;
+        y2 = centerY - halfHeight;
+        x3 = xCenter + halfWidth;
+        y3 = centerY + halfHeight;
+        x4 = xCenter - halfWidth;
+        y4 = centerY + halfHeight;
+      } else {
+        x1 = xCenter - halfWidth;
+        y1 = centerY - outerOffset;
+        x2 = xCenter + halfWidth;
+        y2 = centerY - outerOffset;
+        const innerHalfWidth = halfWidth * (innerOffset / outerOffset);
+        x3 = xCenter + innerHalfWidth;
+        y3 = centerY + outerOffset;
+        x4 = xCenter - innerHalfWidth;
+        y4 = centerY + outerOffset;
+      }
+      const denom = totalNotches > 1 ? totalNotches - 1 : 1;
+      const gradientColor = useGradient && !fillState.useThemePaletteGradient ? interpolateGaugeHex(
+        fillState.activeGrad0,
+        fillState.activeGrad1,
+        i / denom
+      ) : "var(--chart-1)";
+      return {
+        index: i,
+        points: { x1, y1, x2, y2, x3, y3, x4, y4 },
+        isActive: i < activeNotches,
+        gradientColor,
+        xCenter,
+        yCenter: centerY
+      };
+    });
+  }, [
+    totalNotches,
+    slotWidth,
+    gapWidth,
+    centerY,
+    outerOffset,
+    innerOffset,
+    activeNotches,
+    uniformWidth,
+    notchDepth,
+    widthFactor,
+    useGradient,
+    fillState.useThemePaletteGradient,
+    fillState.activeGrad0,
+    fillState.activeGrad1
+  ]);
+  const resolveBgFill = (notchIndex) => resolveGaugeBgFill({
+    notchIndex,
+    totalNotches,
+    hasCustomInactive: fillState.hasCustomInactive,
+    inactiveFill,
+    useThemePaletteGradient: fillState.useThemePaletteGradient,
+    useGradient,
+    inactiveGrad0: fillState.inactiveGrad0,
+    inactiveGrad1: fillState.inactiveGrad1,
+    arcTrackFill: "var(--border)",
+    linearTrackFill: "var(--chart-background)",
+    linearMode: true
+  });
+  const resolveActiveFill = (notch) => resolveGaugeActiveFill({
+    notch,
+    hasCustomActive: fillState.hasCustomActive,
+    activeFill,
+    useThemePaletteGradient: fillState.useThemePaletteGradient,
+    themeActiveGradientId: fillState.themeActiveGradientId,
+    useGradient,
+    activeFillSolid: "var(--chart-1)"
+  });
+  const label = centerValue == null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+    GaugeLabelShell,
+    {
+      align: labelAlign,
+      centerValue,
+      defaultLabel,
+      formatOptions,
+      prefix,
+      suffix
+    }
+  );
+  const track = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full", style: { height, width }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    GaugeNotchSvg,
+    {
+      cornerDepth: cornerVerticalDepth,
+      defsChildren: fillState.defsChildren,
+      geometryScrubbing,
+      height,
+      notchCornerRadius,
+      notches,
+      notchTransition,
+      resolveActiveFill,
+      resolveBgFill,
+      resolvedActiveFillOpacity: fillState.resolvedActiveFillOpacity,
+      resolvedInactiveFillOpacity: fillState.resolvedInactiveFillOpacity,
+      stagger,
+      themeActiveGradientId: fillState.themeActiveGradientId,
+      useThemePaletteGradient: fillState.useThemePaletteGradient,
+      width
+    }
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    GaugeLabelLayout,
+    {
+      align: labelAlign,
+      label,
+      placement: labelPlacement,
+      children: track
+    }
+  );
+}
+function GaugeInner(props) {
+  if (props.orientation === "linear") {
+    return /* @__PURE__ */ jsxRuntime.jsx(GaugeLinearInner, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(GaugeArcInner, { ...props });
+}
+function Gauge({
+  width: widthProp,
+  height: heightProp,
+  className,
+  minWidth,
+  orientation = "arc",
+  linearHeight,
+  ...props
+}) {
+  const isLinear = orientation === "linear";
+  const resolvedMinWidth = minWidth ?? (isLinear ? 200 : 300);
+  const resolvedLinearHeight = linearHeight ?? DEFAULT_LINEAR_GAUGE_HEIGHT;
+  if (isLinear) {
+    if (widthProp != null) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn("relative w-full max-w-full", className),
+          style: { width: widthProp },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            GaugeInner,
+            {
+              height: heightProp ?? resolvedLinearHeight,
+              orientation: "linear",
+              width: widthProp,
+              ...props
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative w-full min-w-0 max-w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-0", style: { minWidth: resolvedMinWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(responsive.ParentSize, { debounceTime: 10, children: ({ width }) => width > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      GaugeInner,
+      {
+        height: resolvedLinearHeight,
+        orientation: "linear",
+        width,
+        ...props
+      }
+    ) : null }) }) });
+  }
+  if (widthProp != null && heightProp != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative inline-flex max-w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      GaugeInner,
+      {
+        height: heightProp,
+        orientation: "arc",
+        width: widthProp,
+        ...props
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("relative w-full max-w-full", className),
+      style: { minWidth: resolvedMinWidth },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto aspect-[21/16] w-full max-w-[560px]", children: /* @__PURE__ */ jsxRuntime.jsx(responsive.ParentSize, { debounceTime: 10, children: ({ width, height }) => width > 0 && height > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        GaugeInner,
+        {
+          height,
+          orientation: "arc",
+          width,
+          ...props
+        }
+      ) : null }) })
+    }
+  );
+}
+Gauge.displayName = "Gauge";
+var ringCssVars = {
+  background: "var(--chart-background)",
+  foreground: "var(--chart-foreground)",
+  foregroundMuted: "var(--chart-foreground-muted)",
+  label: "var(--chart-label)",
+  ringBackground: "var(--border)",
+  // Default ring colors from chart palette
+  ring1: "var(--chart-1)",
+  ring2: "var(--chart-2)",
+  ring3: "var(--chart-3)",
+  ring4: "var(--chart-4)",
+  ring5: "var(--chart-5)"
+};
+var defaultRingColors = [
+  ringCssVars.ring1,
+  ringCssVars.ring2,
+  ringCssVars.ring3,
+  ringCssVars.ring4,
+  ringCssVars.ring5
+];
+var RingStableContext = react.createContext(null);
+var RingHoverContext = react.createContext(null);
+function RingProvider({
+  children,
+  value
+}) {
+  const stable = react.useMemo(
+    () => ({
+      data: value.data,
+      size: value.size,
+      center: value.center,
+      strokeWidth: value.strokeWidth,
+      ringGap: value.ringGap,
+      baseInnerRadius: value.baseInnerRadius,
+      animationKey: value.animationKey,
+      isLoaded: value.isLoaded,
+      enterTransition: value.enterTransition,
+      enterStaggerScale: value.enterStaggerScale,
+      containerRef: value.containerRef,
+      totalValue: value.totalValue,
+      getColor: value.getColor,
+      getRingRadii: value.getRingRadii,
+      startAngle: value.startAngle,
+      endAngle: value.endAngle,
+      geometryScrubbing: value.geometryScrubbing
+    }),
+    [
+      value.data,
+      value.size,
+      value.center,
+      value.strokeWidth,
+      value.ringGap,
+      value.baseInnerRadius,
+      value.animationKey,
+      value.isLoaded,
+      value.enterTransition,
+      value.enterStaggerScale,
+      value.containerRef,
+      value.totalValue,
+      value.getColor,
+      value.getRingRadii,
+      value.startAngle,
+      value.endAngle,
+      value.geometryScrubbing
+    ]
+  );
+  const hover = react.useMemo(
+    () => ({
+      hoveredIndex: value.hoveredIndex,
+      setHoveredIndex: value.setHoveredIndex
+    }),
+    [value.hoveredIndex, value.setHoveredIndex]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(RingStableContext.Provider, { value: stable, children: /* @__PURE__ */ jsxRuntime.jsx(RingHoverContext.Provider, { value: hover, children }) });
+}
+function useRingStable() {
+  const context = react.useContext(RingStableContext);
+  if (!context) {
+    throw new Error(
+      "useRingStable must be used within a RingProvider. Make sure your component is wrapped in <RingChart>."
+    );
+  }
+  return context;
+}
+function useRingHover() {
+  const context = react.useContext(RingHoverContext);
+  if (!context) {
+    throw new Error(
+      "useRingHover must be used within a RingProvider. Make sure your component is wrapped in <RingChart>."
+    );
+  }
+  return context;
+}
+function useRing() {
+  return { ...useRingStable(), ...useRingHover() };
+}
+function generateRingArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius) {
+  const generator = shape.arc({
+    innerRadius,
+    outerRadius,
+    cornerRadius
+  });
+  return generator({ startAngle, endAngle }) || "";
+}
+function isRing(child) {
+  return react.isValidElement(child) && typeof child.type === "function" && (child.type.displayName === "Ring" || child.type.name === "Ring");
+}
+function isRingCenter(child) {
+  return react.isValidElement(child) && typeof child.type === "function" && (child.type.displayName === "RingCenter" || child.type.name === "RingCenter");
+}
+function RingChartInner(props) {
+  const size = Math.min(props.width, props.height);
+  if (size < 10) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(RingChartCore, { ...props });
+}
+var RingChartCore = react.memo(function RingChartCore2({
+  width,
+  height,
+  data,
+  strokeWidth: strokeWidthProp,
+  ringGap: ringGapProp,
+  baseInnerRadius: baseInnerRadiusProp,
+  children,
+  containerRef,
+  hoveredIndexProp,
+  onHoverChange,
+  startAngle,
+  endAngle,
+  enterTransition,
+  enterStaggerScale,
+  geometryScrubbing
+}) {
+  const [internalHoveredIndex, setInternalHoveredIndex] = react.useState(null);
+  const [animationKey] = react.useState(0);
+  const [isLoaded, setIsLoaded] = react.useState(false);
+  const isControlled = hoveredIndexProp !== void 0;
+  const hoveredIndex = isControlled ? hoveredIndexProp : internalHoveredIndex;
+  const setHoveredIndex = react.useCallback(
+    (index) => {
+      if (isControlled) {
+        onHoverChange?.(index);
+      } else {
+        setInternalHoveredIndex(index);
+      }
+    },
+    [isControlled, onHoverChange]
+  );
+  const size = Math.min(width, height);
+  const center = size / 2;
+  const ringCount = data.length;
+  const padding = 8;
+  const availableRadius = center - padding;
+  const designOuterRadius = baseInnerRadiusProp + (ringCount - 1) * (strokeWidthProp + ringGapProp) + strokeWidthProp;
+  const scale = Math.min(1, availableRadius / designOuterRadius);
+  const strokeWidth = strokeWidthProp * scale;
+  const ringGap = ringGapProp * scale;
+  const baseInnerRadius = baseInnerRadiusProp * scale;
+  const totalValue = react.useMemo(
+    () => data.reduce((sum, d) => sum + d.value, 0),
+    [data]
+  );
+  const getColor = react.useCallback(
+    (index) => {
+      const item = data[index];
+      if (item?.color) {
+        return item.color;
+      }
+      return defaultRingColors[index % defaultRingColors.length];
+    },
+    [data]
+  );
+  const getRingRadii = react.useCallback(
+    (index) => {
+      const innerRadius = baseInnerRadius + index * (strokeWidth + ringGap);
+      const outerRadius = innerRadius + strokeWidth;
+      return { innerRadius, outerRadius };
+    },
+    [baseInnerRadius, strokeWidth, ringGap]
+  );
+  const arcRange = endAngle - startAngle;
+  const scrubRingLayers = react.useMemo(() => {
+    if (!geometryScrubbing) {
+      return null;
+    }
+    return data.map((ringData, index) => {
+      const { innerRadius, outerRadius } = getRingRadii(index);
+      const cornerRadius = (outerRadius - innerRadius) / 2;
+      const progress = ringData.value / ringData.maxValue;
+      const progressEndAngle = startAngle + arcRange * progress;
+      return {
+        bgPath: generateRingArcPath(
+          innerRadius,
+          outerRadius,
+          startAngle,
+          endAngle,
+          cornerRadius
+        ),
+        progressPath: progressEndAngle <= startAngle + 0.01 ? "" : generateRingArcPath(
+          innerRadius,
+          outerRadius,
+          startAngle,
+          progressEndAngle,
+          cornerRadius
+        ),
+        color: getColor(index)
+      };
+    });
+  }, [
+    geometryScrubbing,
+    data,
+    getRingRadii,
+    getColor,
+    startAngle,
+    endAngle,
+    arcRange
+  ]);
+  const effectiveIsLoaded = geometryScrubbing || isLoaded;
+  react.useEffect(() => {
+    if (geometryScrubbing) {
+      return;
+    }
+    setIsLoaded(false);
+    const timer = setTimeout(() => {
+      setIsLoaded(true);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [enterTransition, enterStaggerScale, geometryScrubbing]);
+  const { svgChildren, centerChildren } = react.useMemo(() => {
+    const svgNodes = [];
+    const centerNodes = [];
+    react.Children.forEach(children, (child) => {
+      if (isRingCenter(child)) {
+        centerNodes.push(child);
+      } else if (geometryScrubbing && isRing(child)) {
+        return;
+      } else {
+        svgNodes.push(child);
+      }
+    });
+    return { svgChildren: svgNodes, centerChildren: centerNodes };
+  }, [children, geometryScrubbing]);
+  const contextValue = react.useMemo(
+    () => ({
+      data,
+      size,
+      center,
+      strokeWidth,
+      ringGap,
+      baseInnerRadius,
+      hoveredIndex,
+      setHoveredIndex,
+      animationKey,
+      isLoaded: effectiveIsLoaded,
+      enterTransition,
+      enterStaggerScale,
+      containerRef,
+      totalValue,
+      getColor,
+      getRingRadii,
+      startAngle,
+      endAngle,
+      geometryScrubbing
+    }),
+    [
+      data,
+      size,
+      center,
+      strokeWidth,
+      ringGap,
+      baseInnerRadius,
+      hoveredIndex,
+      setHoveredIndex,
+      animationKey,
+      effectiveIsLoaded,
+      enterTransition,
+      enterStaggerScale,
+      containerRef,
+      totalValue,
+      getColor,
+      getRingRadii,
+      startAngle,
+      endAngle,
+      geometryScrubbing
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(RingProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "grid",
+      style: {
+        gridTemplateColumns: "1fr",
+        gridTemplateRows: "1fr",
+        width: size,
+        height: size
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            height: size,
+            style: { gridArea: "1 / 1", contain: "layout style paint" },
+            width: size,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(group.Group, { left: center, top: center, children: [
+              scrubRingLayers ? scrubRingLayers.map((layer, index) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: layer.bgPath, fill: ringCssVars.ringBackground }),
+                layer.progressPath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: layer.progressPath, fill: layer.color }) : null
+              ] }, data[index]?.label ?? index)) : null,
+              svgChildren
+            ] })
+          }
+        ),
+        centerChildren.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-none flex items-center justify-center",
+            style: { gridArea: "1 / 1" },
+            children: centerChildren
+          }
+        )
+      ]
+    }
+  ) });
+}, ringChartCorePropsEqual);
+function ringChartCorePropsEqual(prev, next) {
+  return prev.width === next.width && prev.height === next.height && prev.data === next.data && prev.strokeWidth === next.strokeWidth && prev.ringGap === next.ringGap && prev.baseInnerRadius === next.baseInnerRadius && prev.hoveredIndexProp === next.hoveredIndexProp && prev.onHoverChange === next.onHoverChange && prev.startAngle === next.startAngle && prev.endAngle === next.endAngle && prev.enterTransition === next.enterTransition && prev.enterStaggerScale === next.enterStaggerScale && prev.geometryScrubbing === next.geometryScrubbing && prev.children === next.children;
+}
+function RingChart({
+  data,
+  size: fixedSize,
+  strokeWidth = 12,
+  ringGap = 6,
+  baseInnerRadius = 60,
+  className = "",
+  hoveredIndex,
+  onHoverChange,
+  startAngle = -Math.PI / 2,
+  endAngle = 3 * Math.PI / 2,
+  enterTransition,
+  enterStaggerScale = 1,
+  geometryScrubbing = false,
+  children
+}) {
+  const containerRef = react.useRef(null);
+  if (fixedSize) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("relative flex items-center justify-center", className),
+        ref: containerRef,
+        style: { width: fixedSize, height: fixedSize },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          RingChartInner,
+          {
+            baseInnerRadius,
+            containerRef,
+            data,
+            endAngle,
+            enterStaggerScale,
+            enterTransition,
+            geometryScrubbing,
+            height: fixedSize,
+            hoveredIndexProp: hoveredIndex,
+            onHoverChange,
+            ringGap,
+            startAngle,
+            strokeWidth,
+            width: fixedSize,
+            children
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("relative aspect-square w-full", className),
+      ref: containerRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx(responsive.ParentSize, { debounceTime: 10, children: ({ width, height }) => /* @__PURE__ */ jsxRuntime.jsx(
+        RingChartInner,
+        {
+          baseInnerRadius,
+          containerRef,
+          data,
+          endAngle,
+          enterStaggerScale,
+          enterTransition,
+          geometryScrubbing,
+          height,
+          hoveredIndexProp: hoveredIndex,
+          onHoverChange,
+          ringGap,
+          startAngle,
+          strokeWidth,
+          width,
+          children
+        }
+      ) })
+    }
+  );
+}
+function useEnterComplete(mountProgress) {
+  const [complete, setComplete] = react.useState(() => mountProgress.get() >= 1);
+  react.useEffect(() => {
+    if (mountProgress.get() >= 1) {
+      setComplete(true);
+      return;
+    }
+    return mountProgress.on("change", (value) => {
+      if (value >= 1) {
+        setComplete(true);
+      }
+    });
+  }, [mountProgress]);
+  return complete;
+}
+
+// src/components/charts/animation.ts
+var DEFAULT_ANIMATION_DURATION_MS = 1100;
+var DEFAULT_CHART_ENTER_TRANSITION = {
+  type: "tween",
+  duration: DEFAULT_ANIMATION_DURATION_MS / 1e3,
+  ease: [0.85, 0, 0.15, 1]
+};
+
+// src/components/charts/use-mount-progress.ts
+function useMountProgress(enterTransition, delaySeconds, replayKey) {
+  const progress = react$1.useMotionValue(0);
+  const transitionRef = react.useRef(enterTransition);
+  transitionRef.current = enterTransition;
+  react.useEffect(() => {
+    progress.set(0);
+    const controls = react$1.animate(progress, 1, {
+      ...transitionRef.current ?? DEFAULT_CHART_ENTER_TRANSITION,
+      delay: delaySeconds
+    });
+    return () => controls.stop();
+  }, [delaySeconds, replayKey, progress]);
+  return progress;
+}
+function generateArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius) {
+  const generator = shape.arc({
+    innerRadius,
+    outerRadius,
+    cornerRadius
+  });
+  return generator({ startAngle, endAngle }) || "";
+}
+function ringHoverScale(isHovered, isPushedOut) {
+  if (isHovered) {
+    return 1.03;
+  }
+  if (isPushedOut) {
+    return 1.02;
+  }
+  return 1;
+}
+function RingProgressPath({
+  progressComplete,
+  progressPath,
+  animatedProgressPath,
+  color
+}) {
+  if (progressComplete) {
+    if (!progressPath) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("path", { d: progressPath, fill: color });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.motion.path, { d: animatedProgressPath, fill: color });
+}
+var Ring = react.memo(function Ring2({
+  index,
+  color: colorProp,
+  animate: animate2 = true,
+  showGlow = true,
+  lineCap = "round"
+}) {
+  const {
+    data,
+    getColor,
+    getRingRadii,
+    startAngle,
+    endAngle,
+    enterTransition,
+    enterStaggerScale,
+    animationKey
+  } = useRingStable();
+  const { hoveredIndex, setHoveredIndex } = useRingHover();
+  const expandDelay = index * 0.08 * enterStaggerScale;
+  const expandProgress = useMountProgress(
+    enterTransition,
+    expandDelay,
+    `${animationKey}-expand-${index}`
+  );
+  const expandComplete = useEnterComplete(expandProgress);
+  const progressDelay = (0.6 + index * 0.1) * enterStaggerScale;
+  const progressMount = useMountProgress(
+    enterTransition,
+    progressDelay,
+    `${animationKey}-progress-${index}`
+  );
+  const progressComplete = useEnterComplete(progressMount);
+  const ringData = data[index];
+  const progress = ringData ? ringData.value / ringData.maxValue : 0;
+  const arcRange = endAngle - startAngle;
+  const animatedProgressPath = react$1.useTransform(progressMount, (v) => {
+    if (!ringData) {
+      return "";
+    }
+    const currentEndAngle = startAngle + arcRange * progress * v;
+    if (currentEndAngle <= startAngle + 0.01) {
+      return "";
+    }
+    const radii = getRingRadii(index);
+    const corner = lineCap === "round" ? (radii.outerRadius - radii.innerRadius) / 2 : 0;
+    return generateArcPath(
+      radii.innerRadius,
+      radii.outerRadius,
+      startAngle,
+      currentEndAngle,
+      corner
+    );
+  });
+  const enterScale = react$1.useTransform(expandProgress, [0, 1], [0, 1]);
+  const handleMouseEnter = react.useCallback(
+    () => setHoveredIndex(index),
+    [index, setHoveredIndex]
+  );
+  const handleMouseLeave = react.useCallback(
+    () => setHoveredIndex(null),
+    [setHoveredIndex]
+  );
+  if (!ringData) {
+    return null;
+  }
+  const { innerRadius, outerRadius } = getRingRadii(index);
+  const color = colorProp || getColor(index);
+  const isHovered = hoveredIndex === index;
+  const isFaded = hoveredIndex !== null && hoveredIndex !== index;
+  const isPushedOut = hoveredIndex !== null && hoveredIndex < index;
+  const cornerRadius = lineCap === "round" ? (outerRadius - innerRadius) / 2 : 0;
+  const bgPath = generateArcPath(
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    cornerRadius
+  );
+  const progressEndAngle = startAngle + arcRange * progress;
+  const progressPath = progressEndAngle <= startAngle + 0.01 ? "" : generateArcPath(
+    innerRadius,
+    outerRadius,
+    startAngle,
+    progressEndAngle,
+    cornerRadius
+  );
+  const hoverScale = ringHoverScale(isHovered, isPushedOut);
+  const layerOpacity = isFaded ? 0.35 : 1;
+  const enterDone = !animate2 || expandComplete && progressComplete;
+  const groupStyle = {
+    cursor: "pointer",
+    transformOrigin: "0px 0px",
+    filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${color})` : "none"
+  };
+  if (enterDone) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      react$1.motion.g,
+      {
+        animate: { scale: hoverScale, opacity: layerOpacity },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        style: groupStyle,
+        transition: {
+          scale: { type: "spring", stiffness: 400, damping: 25 },
+          opacity: { duration: 0.15 }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }),
+          progressPath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: progressPath, fill: color }) : null
+        ]
+      }
+    );
+  }
+  if (!expandComplete) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.g,
+      {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        style: {
+          ...groupStyle,
+          scale: enterScale,
+          opacity: layerOpacity
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: bgPath, fill: ringCssVars.ringBackground })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.motion.g,
+    {
+      animate: { scale: hoverScale, opacity: layerOpacity },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style: groupStyle,
+      transition: {
+        scale: { type: "spring", stiffness: 400, damping: 25 },
+        opacity: { duration: 0.15 }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RingProgressPath,
+          {
+            animatedProgressPath,
+            color,
+            progressComplete,
+            progressPath
+          }
+        )
+      ]
+    }
+  );
+});
+Ring.displayName = "Ring";
+function RingCenter({
+  defaultLabel = "Total",
+  formatOptions = defaultChartStatFlowFormat,
+  children,
+  className = "",
+  valueClassName = chartCenterValueClassName,
+  labelClassName = chartCenterLabelClassName,
+  prefix,
+  suffix
+}) {
+  const { data, totalValue, baseInnerRadius } = useRingStable();
+  const { hoveredIndex } = useRingHover();
+  const hoveredData = hoveredIndex === null ? null : data[hoveredIndex];
+  const displayValue = hoveredData ? hoveredData.value : totalValue;
+  const displayLabel = hoveredData ? hoveredData.label : defaultLabel;
+  const centerSize = baseInnerRadius * 2 - 16;
+  if (children && hoveredData) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          chartCenterContainerClassName,
+          "flex items-center justify-center",
+          className
+        ),
+        style: { width: centerSize, height: centerSize },
+        children: children({
+          value: displayValue,
+          label: displayLabel,
+          isHovered: hoveredIndex !== null,
+          data: hoveredData
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        chartCenterContainerClassName,
+        "flex flex-col items-center justify-center text-center",
+        className
+      ),
+      style: { width: centerSize, height: centerSize },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ChartStatFlow,
+        {
+          formatOptions,
+          label: displayLabel,
+          labelClassName,
+          prefix,
+          suffix,
+          value: displayValue,
+          valueClassName
+        }
+      )
+    }
+  );
+}
+RingCenter.displayName = "RingCenter";
+
+exports.ChartStatFlow = ChartStatFlow;
+exports.Gauge = Gauge;
+exports.Ring = Ring;
+exports.RingCenter = RingCenter;
+exports.RingChart = RingChart;
+exports.RingProvider = RingProvider;
+exports.defaultChartStatFlowFormat = defaultChartStatFlowFormat;
+exports.defaultRingColors = defaultRingColors;
+exports.ringCssVars = ringCssVars;
+exports.useRing = useRing;
+exports.useRingHover = useRingHover;
+exports.useRingStable = useRingStable;
+//# sourceMappingURL=charts.cjs.map
+//# sourceMappingURL=charts.cjs.map