@tribepad/themis 1.0.0 → 1.0.2

package/dist/chunk-D6CBOECS.mjs

@@ -1,1757 +0,0 @@
-import { tooltipContentVariants } from './chunk-DZ556D2F.mjs';
-import { cn } from './chunk-E2KQFV3O.mjs';
-import { BaseComponentPropsSchema } from './chunk-5SVLJN2C.mjs';
-import { createContext, forwardRef, useRef, useId, memo, useState, useMemo, useCallback, useEffect, useContext } from 'react';
-import { cva } from 'class-variance-authority';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { VisuallyHidden, useFocusRing } from 'react-aria';
-import { z } from 'zod';
-
-var chartVariants = cva(
-  // Base classes
-  "relative w-full overflow-hidden rounded-lg border",
-  {
-    variants: {
-      variant: {
-        default: "border-[var(--border)] bg-[var(--content-background)]",
-        muted: "border-[var(--accent-background)] bg-[var(--accent-background)]/50"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var dataPointVariants = cva(
-  // Base classes
-  "cursor-pointer focus-visible:outline-none",
-  {
-    variants: {
-      type: {
-        bar: "",
-        // Fill color set dynamically per series
-        line: "stroke-2"
-        // Stroke color set dynamically per series
-      },
-      state: {
-        default: "",
-        focused: "",
-        // Focus ring provides visual feedback, no scale needed for data points
-        selected: "opacity-80"
-      }
-    },
-    defaultVariants: {
-      type: "bar",
-      state: "default"
-    }
-  }
-);
-cva(
-  // Base classes
-  "pointer-events-none",
-  {
-    variants: {
-      visible: {
-        true: "opacity-100",
-        false: "opacity-0"
-      }
-    },
-    defaultVariants: {
-      visible: false
-    }
-  }
-);
-var legendVariants = cva(
-  // Base classes - horizontal flex layout below chart
-  "flex flex-wrap items-center justify-center gap-4 px-4 py-2",
-  {
-    variants: {
-      visible: {
-        true: "",
-        false: "hidden"
-      }
-    },
-    defaultVariants: {
-      visible: true
-    }
-  }
-);
-
-// src/elements/Chart/chart.constants.ts
-var CHART_ASPECT_RATIO = 9 / 16;
-var CHART_PADDING = {
-  top: 20,
-  // Space for title overflow
-  right: 20,
-  // Space for y-axis label
-  bottom: 60,
-  // Space for x-axis labels + legend
-  left: 60
-  // Space for y-axis labels
-};
-var MIN_CHART_WIDTH = 300;
-var MIN_CHART_HEIGHT = 169;
-var BAR_GROUP_PADDING = 0.2;
-var BAR_PADDING = 0.1;
-var MIN_BAR_WIDTH = 20;
-var BAR_RADIUS = 4;
-var LINE_STROKE_WIDTH = 2;
-var POINT_RADIUS = 6;
-var LINE_PATTERNS = {
-  solid: "none",
-  dashed: "8 4",
-  // 8px dash, 4px gap
-  dotted: "2 4"
-  // 2px dot, 4px gap
-};
-var GRID_COLOR = "var(--border)";
-var GRID_STROKE_WIDTH = 1;
-var GRID_STROKE_OPACITY = 0.7;
-var AXIS_COLOR = "var(--border)";
-var AXIS_STROKE_WIDTH = 1;
-var AXIS_TICK_SIZE = 6;
-var AXIS_LABEL_FONT_SIZE = 12;
-var MIN_TOUCH_TARGET = 44;
-var FOCUS_RING_OFFSET = 4;
-var FOCUS_RING_WIDTH = 2;
-var DEFAULT_SERIES_COLORS = [
-  "var(--chart-1, hsl(221 83% 53%))",
-  // Series 0 - Blue
-  "var(--chart-2, hsl(142 71% 45%))",
-  // Series 1 - Green
-  "var(--chart-3, hsl(38 92% 50%))",
-  // Series 2 - Orange
-  "var(--chart-4, hsl(262 83% 58%))",
-  // Series 3 - Purple
-  "var(--chart-5, hsl(0 84% 60%))"
-  // Series 4 - Red
-];
-function niceNum(range, round) {
-  const exponent = Math.floor(Math.log10(range));
-  const fraction = range / Math.pow(10, exponent);
-  let niceFraction;
-  if (round) {
-    if (fraction < 1.5) niceFraction = 1;
-    else if (fraction < 3) niceFraction = 2;
-    else if (fraction < 7) niceFraction = 5;
-    else niceFraction = 10;
-  } else {
-    if (fraction <= 1) niceFraction = 1;
-    else if (fraction <= 2) niceFraction = 2;
-    else if (fraction <= 5) niceFraction = 5;
-    else niceFraction = 10;
-  }
-  return niceFraction * Math.pow(10, exponent);
-}
-function calculateYAxisTicks(minValue, maxValue, tickCount = 5) {
-  if (minValue === maxValue) {
-    if (minValue === 0) {
-      return [0, 25, 50, 75, 100];
-    }
-    minValue = minValue * 0.9;
-    maxValue = maxValue * 1.1;
-  }
-  const range = niceNum(maxValue - minValue, false);
-  const tickSpacing = niceNum(range / (tickCount - 1), true);
-  const niceMin = Math.floor(minValue / tickSpacing) * tickSpacing;
-  const niceMax = Math.ceil(maxValue / tickSpacing) * tickSpacing;
-  const ticks = [];
-  for (let tick = niceMin; tick <= niceMax; tick += tickSpacing) {
-    ticks.push(tick);
-  }
-  return ticks;
-}
-function calculateBarLayout(plotWidth, labelCount, seriesCount, plotX = 0) {
-  const groupWidth = plotWidth / labelCount;
-  const availableWidth = groupWidth * (1 - BAR_GROUP_PADDING);
-  const barWidth = Math.max(
-    MIN_BAR_WIDTH,
-    availableWidth / seriesCount * (1 - BAR_PADDING)
-  );
-  const getBarX = (labelIdx, seriesIdx) => {
-    const groupCenter = plotX + groupWidth * labelIdx + groupWidth / 2;
-    const totalBarsWidth = seriesCount * barWidth + (seriesCount - 1) * (BAR_PADDING * barWidth);
-    const barsStart = groupCenter - totalBarsWidth / 2;
-    return barsStart + seriesIdx * (barWidth + BAR_PADDING * barWidth);
-  };
-  return { barWidth, groupWidth, getBarX };
-}
-
-// src/elements/Chart/useChartDimensions.ts
-function useChartDimensions(containerRef) {
-  const [dimensions, setDimensions] = useState({
-    width: MIN_CHART_WIDTH,
-    height: MIN_CHART_HEIGHT,
-    padding: CHART_PADDING,
-    plotArea: {
-      x: CHART_PADDING.left,
-      y: CHART_PADDING.top,
-      width: MIN_CHART_WIDTH - CHART_PADDING.left - CHART_PADDING.right,
-      height: MIN_CHART_HEIGHT - CHART_PADDING.top - CHART_PADDING.bottom
-    }
-  });
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const updateDimensions = (width) => {
-      const constrainedWidth = Math.max(width, MIN_CHART_WIDTH);
-      const height = Math.max(
-        constrainedWidth * CHART_ASPECT_RATIO,
-        MIN_CHART_HEIGHT
-      );
-      const plotArea = {
-        x: CHART_PADDING.left,
-        y: CHART_PADDING.top,
-        width: constrainedWidth - CHART_PADDING.left - CHART_PADDING.right,
-        height: height - CHART_PADDING.top - CHART_PADDING.bottom
-      };
-      setDimensions({
-        width: constrainedWidth,
-        height,
-        padding: CHART_PADDING,
-        plotArea
-      });
-    };
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      updateDimensions(entry.contentRect.width);
-    });
-    updateDimensions(container.getBoundingClientRect().width);
-    observer.observe(container);
-    return () => {
-      observer.disconnect();
-    };
-  }, [containerRef]);
-  return dimensions;
-}
-function useRovingTabIndex2D(options) {
-  const {
-    rows,
-    cols,
-    initialRow = 0,
-    initialCol = 0,
-    wrap = false,
-    onFocusChange
-  } = options;
-  const [focusedRow, setFocusedRow] = useState(initialRow);
-  const [focusedCol, setFocusedCol] = useState(initialCol);
-  const getColCount = useCallback(
-    (row) => {
-      return typeof cols === "function" ? cols(row) : cols;
-    },
-    [cols]
-  );
-  const notifyFocusChange = useCallback(
-    (row, col) => {
-      onFocusChange?.(row, col);
-    },
-    [onFocusChange]
-  );
-  const moveRight = useCallback(() => {
-    setFocusedCol((currentCol) => {
-      const maxCol = getColCount(focusedRow) - 1;
-      let newCol = currentCol + 1;
-      if (newCol > maxCol) {
-        newCol = wrap ? 0 : maxCol;
-      }
-      if (newCol !== currentCol) {
-        notifyFocusChange(focusedRow, newCol);
-      }
-      return newCol;
-    });
-  }, [focusedRow, getColCount, wrap, notifyFocusChange]);
-  const moveLeft = useCallback(() => {
-    setFocusedCol((currentCol) => {
-      let newCol = currentCol - 1;
-      const maxCol = getColCount(focusedRow) - 1;
-      if (newCol < 0) {
-        newCol = wrap ? maxCol : 0;
-      }
-      if (newCol !== currentCol) {
-        notifyFocusChange(focusedRow, newCol);
-      }
-      return newCol;
-    });
-  }, [focusedRow, getColCount, wrap, notifyFocusChange]);
-  const moveDown = useCallback(() => {
-    setFocusedRow((currentRow) => {
-      let newRow = currentRow + 1;
-      if (newRow >= rows) {
-        newRow = wrap ? 0 : rows - 1;
-      }
-      if (newRow !== currentRow) {
-        const newMaxCol = getColCount(newRow) - 1;
-        setFocusedCol((col) => {
-          const constrainedCol = Math.min(col, newMaxCol);
-          notifyFocusChange(newRow, constrainedCol);
-          return constrainedCol;
-        });
-      }
-      return newRow;
-    });
-  }, [rows, getColCount, wrap, notifyFocusChange]);
-  const moveUp = useCallback(() => {
-    setFocusedRow((currentRow) => {
-      let newRow = currentRow - 1;
-      if (newRow < 0) {
-        newRow = wrap ? rows - 1 : 0;
-      }
-      if (newRow !== currentRow) {
-        const newMaxCol = getColCount(newRow) - 1;
-        setFocusedCol((col) => {
-          const constrainedCol = Math.min(col, newMaxCol);
-          notifyFocusChange(newRow, constrainedCol);
-          return constrainedCol;
-        });
-      }
-      return newRow;
-    });
-  }, [rows, getColCount, wrap, notifyFocusChange]);
-  const moveToStart = useCallback(() => {
-    setFocusedCol(0);
-    notifyFocusChange(focusedRow, 0);
-  }, [focusedRow, notifyFocusChange]);
-  const moveToEnd = useCallback(() => {
-    const maxCol = getColCount(focusedRow) - 1;
-    setFocusedCol(maxCol);
-    notifyFocusChange(focusedRow, maxCol);
-  }, [focusedRow, getColCount, notifyFocusChange]);
-  const setFocus = useCallback(
-    (row, col) => {
-      const constrainedRow = Math.max(0, Math.min(row, rows - 1));
-      const maxCol = getColCount(constrainedRow) - 1;
-      const constrainedCol = Math.max(0, Math.min(col, maxCol));
-      setFocusedRow(constrainedRow);
-      setFocusedCol(constrainedCol);
-      notifyFocusChange(constrainedRow, constrainedCol);
-    },
-    [rows, getColCount, notifyFocusChange]
-  );
-  const getTabIndex = useCallback(
-    (row, col) => {
-      return row === focusedRow && col === focusedCol ? 0 : -1;
-    },
-    [focusedRow, focusedCol]
-  );
-  return useMemo(
-    () => ({
-      focusedRow,
-      focusedCol,
-      moveRight,
-      moveLeft,
-      moveDown,
-      moveUp,
-      moveToStart,
-      moveToEnd,
-      setFocus,
-      getTabIndex
-    }),
-    [
-      focusedRow,
-      focusedCol,
-      moveRight,
-      moveLeft,
-      moveDown,
-      moveUp,
-      moveToStart,
-      moveToEnd,
-      setFocus,
-      getTabIndex
-    ]
-  );
-}
-var ChartContext = createContext(null);
-function useChartContext() {
-  const context = useContext(ChartContext);
-  if (!context) {
-    throw new Error("useChartContext must be used within a ChartProvider");
-  }
-  return context;
-}
-function getAllLabels(data) {
-  const labelSet = /* @__PURE__ */ new Set();
-  data.forEach((series) => {
-    series.data.forEach((point) => {
-      labelSet.add(point.label);
-    });
-  });
-  return Array.from(labelSet);
-}
-function calculateScales(data, dimensions, startAtZero) {
-  const allLabels = getAllLabels(data);
-  const { plotArea } = dimensions;
-  let dataMin = Infinity;
-  let dataMax = -Infinity;
-  data.forEach((series) => {
-    series.data.forEach((point) => {
-      dataMin = Math.min(dataMin, point.value);
-      dataMax = Math.max(dataMax, point.value);
-    });
-  });
-  if (!isFinite(dataMin) || !isFinite(dataMax)) {
-    dataMin = 0;
-    dataMax = 100;
-  }
-  const yMin = startAtZero ? Math.min(0, dataMin) : dataMin;
-  const yTicks = calculateYAxisTicks(yMin, dataMax);
-  const yMax = yTicks[yTicks.length - 1] || dataMax;
-  const adjustedYMin = yTicks[0] || yMin;
-  const xScale = (labelIndex) => {
-    if (allLabels.length <= 1) return plotArea.x + plotArea.width / 2;
-    const step = plotArea.width / allLabels.length;
-    return plotArea.x + step * labelIndex + step / 2;
-  };
-  const yRange = yMax - adjustedYMin || 1;
-  const yScale = (value) => {
-    const normalized = (value - adjustedYMin) / yRange;
-    return plotArea.y + plotArea.height * (1 - normalized);
-  };
-  return {
-    allLabels,
-    xScale,
-    yScale,
-    yMin: adjustedYMin,
-    yMax,
-    yTicks
-  };
-}
-function ChartProvider({
-  children,
-  containerRef,
-  data,
-  type,
-  title,
-  description,
-  xAxisLabel,
-  yAxisLabel,
-  showTooltip,
-  showGrid,
-  showLegend,
-  announceTrends,
-  trendUpFormat,
-  trendDownFormat,
-  startAtZero,
-  reducedMotion = true,
-  onPointFocus: onPointFocusProp,
-  onPointSelect: onPointSelectProp
-}) {
-  const [selectedPoint, setSelectedPoint] = useState(null);
-  const [announcement, setAnnouncement] = useState("");
-  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-  const [tooltipPoint, setTooltipPoint] = useState(null);
-  const [currentTrend, setCurrentTrend] = useState(null);
-  const [currentTrendDirection, setCurrentTrendDirection] = useState(null);
-  const dimensions = useChartDimensions(containerRef);
-  const scales = useMemo(
-    () => calculateScales(data, dimensions, startAtZero),
-    [data, dimensions, startAtZero]
-  );
-  void useMemo(
-    () => Math.max(...data.map((s) => s.data.length)),
-    [data]
-  );
-  const formatTrendText = useCallback(
-    (percent, isUp) => {
-      const format = isUp ? trendUpFormat : trendDownFormat;
-      return format.replace("{percent}", String(percent));
-    },
-    [trendUpFormat, trendDownFormat]
-  );
-  const getTrendInfo = (seriesIndex, pointIndex) => {
-    if (!announceTrends || pointIndex <= 0) return null;
-    const series = data[seriesIndex];
-    if (!series) return null;
-    const currentPoint = series.data[pointIndex];
-    const previousPoint = series.data[pointIndex - 1];
-    if (!currentPoint || !previousPoint || previousPoint.value === 0) {
-      return null;
-    }
-    const change = (currentPoint.value - previousPoint.value) / Math.abs(previousPoint.value) * 100;
-    const isUp = change >= 0;
-    const percent = Math.abs(Math.round(change));
-    return {
-      text: formatTrendText(percent, isUp),
-      direction: isUp ? "up" : "down"
-    };
-  };
-  const roving = useRovingTabIndex2D({
-    rows: data.length,
-    cols: (row) => data[row]?.data.length || 0,
-    onFocusChange: (seriesIndex, pointIndex) => {
-      const series = data[seriesIndex];
-      const point = series?.data[pointIndex];
-      if (!series || !point) return;
-      const trendInfo = getTrendInfo(seriesIndex, pointIndex);
-      setCurrentTrend(trendInfo?.text ?? null);
-      setCurrentTrendDirection(trendInfo?.direction ?? null);
-      const position = `${pointIndex + 1} of ${series.data.length}`;
-      const seriesInfo = data.length > 1 ? `${series.name}: ` : "";
-      const formattedValue = formatValue(point.value);
-      const announcementTrend = trendInfo ? `, ${trendInfo.text}` : "";
-      setAnnouncement(
-        `${seriesInfo}${point.label}, ${formattedValue}${announcementTrend}. ${position}.`
-      );
-      if (showTooltip) {
-        setIsTooltipVisible(true);
-        setTooltipPoint({ series: seriesIndex, point: pointIndex });
-      }
-      onPointFocusProp?.(point, seriesIndex, pointIndex);
-    }
-  });
-  const formatValue = useCallback((value2) => {
-    const locale = typeof navigator !== "undefined" ? navigator.language : "en-US";
-    return new Intl.NumberFormat(locale).format(value2);
-  }, []);
-  const calculateTrendForPoint = useCallback(
-    (seriesIndex, pointIndex) => {
-      if (!announceTrends) return null;
-      if (pointIndex <= 0) return null;
-      const series = data[seriesIndex];
-      if (!series) return null;
-      const currentPoint = series.data[pointIndex];
-      const previousPoint = series.data[pointIndex - 1];
-      if (!currentPoint || !previousPoint || previousPoint.value === 0) {
-        return null;
-      }
-      const change = (currentPoint.value - previousPoint.value) / Math.abs(previousPoint.value) * 100;
-      const isUp = change >= 0;
-      const percent = Math.abs(Math.round(change));
-      return {
-        text: formatTrendText(percent, isUp),
-        direction: isUp ? "up" : "down"
-      };
-    },
-    [data, announceTrends, formatTrendText]
-  );
-  const getSeriesColor = useCallback((seriesIndex) => {
-    return DEFAULT_SERIES_COLORS[seriesIndex % DEFAULT_SERIES_COLORS.length] ?? "var(--chart-1)";
-  }, []);
-  const getPointCoordinates = useCallback(
-    (seriesIndex, pointIndex) => {
-      const series = data[seriesIndex];
-      const point = series?.data[pointIndex];
-      if (!series || !point) return null;
-      const labelIndex = scales.allLabels.indexOf(point.label);
-      if (labelIndex === -1) return null;
-      return {
-        x: scales.xScale(labelIndex),
-        y: scales.yScale(point.value)
-      };
-    },
-    [data, scales]
-  );
-  const setFocus = useCallback(
-    (series, point) => {
-      roving.setFocus(series, point);
-    },
-    [roving]
-  );
-  const selectPoint = useCallback(
-    (series, point) => {
-      setSelectedPoint({ series, point });
-      const seriesData = data[series];
-      const pointData = seriesData?.data[point];
-      if (seriesData && pointData) {
-        onPointSelectProp?.(pointData, series, point);
-      }
-    },
-    [data, onPointSelectProp]
-  );
-  const clearSelection = useCallback(() => {
-    setSelectedPoint(null);
-  }, []);
-  const announce = useCallback((message) => {
-    setAnnouncement(message);
-  }, []);
-  const showTooltipAt = useCallback(
-    (series, point) => {
-      if (showTooltip) {
-        setIsTooltipVisible(true);
-        setTooltipPoint({ series, point });
-        const trendResult = calculateTrendForPoint(series, point);
-        setCurrentTrend(trendResult?.text ?? null);
-        setCurrentTrendDirection(trendResult?.direction ?? null);
-      }
-    },
-    [showTooltip, calculateTrendForPoint]
-  );
-  const hideTooltip = useCallback(() => {
-    setIsTooltipVisible(false);
-    setTooltipPoint(null);
-  }, []);
-  const value = useMemo(
-    () => ({
-      // State
-      focusedSeries: roving.focusedRow,
-      focusedPoint: roving.focusedCol,
-      selectedPoint,
-      announcement,
-      isTooltipVisible,
-      tooltipPoint,
-      currentTrend,
-      currentTrendDirection,
-      // Computed
-      dimensions,
-      scales,
-      // Props passthrough
-      data,
-      type,
-      title,
-      description,
-      xAxisLabel,
-      yAxisLabel,
-      showTooltip,
-      showGrid,
-      showLegend,
-      announceTrends,
-      trendUpFormat,
-      trendDownFormat,
-      startAtZero,
-      reducedMotion,
-      // Actions
-      setFocus,
-      selectPoint,
-      clearSelection,
-      announce,
-      showTooltipAt,
-      hideTooltip,
-      // Helpers
-      getTabIndex: roving.getTabIndex,
-      formatValue,
-      getSeriesColor,
-      getPointCoordinates
-    }),
-    [
-      roving.focusedRow,
-      roving.focusedCol,
-      roving.getTabIndex,
-      selectedPoint,
-      announcement,
-      isTooltipVisible,
-      tooltipPoint,
-      currentTrend,
-      currentTrendDirection,
-      dimensions,
-      scales,
-      data,
-      type,
-      title,
-      description,
-      xAxisLabel,
-      yAxisLabel,
-      showTooltip,
-      showGrid,
-      showLegend,
-      announceTrends,
-      trendUpFormat,
-      trendDownFormat,
-      startAtZero,
-      reducedMotion,
-      setFocus,
-      selectPoint,
-      clearSelection,
-      announce,
-      showTooltipAt,
-      hideTooltip,
-      formatValue,
-      getSeriesColor,
-      getPointCoordinates
-    ]
-  );
-  return /* @__PURE__ */ jsx(ChartContext.Provider, { value, children });
-}
-function ChartGrid({
-  yTicks,
-  yScale,
-  plotX,
-  plotWidth,
-  visible
-}) {
-  if (!visible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("g", { className: "chart-grid", "aria-hidden": "true", "data-testid": "chart-grid", children: yTicks.map((tick) => {
-    const y = yScale(tick);
-    return /* @__PURE__ */ jsx(
-      "line",
-      {
-        x1: plotX,
-        y1: y,
-        x2: plotX + plotWidth,
-        y2: y,
-        stroke: GRID_COLOR,
-        strokeWidth: GRID_STROKE_WIDTH,
-        strokeOpacity: GRID_STROKE_OPACITY
-      },
-      tick
-    );
-  }) });
-}
-ChartGrid.displayName = "ChartGrid";
-function ChartAxis({
-  allLabels,
-  yTicks,
-  xScale,
-  yScale,
-  plotArea,
-  xAxisLabel,
-  yAxisLabel,
-  formatValue
-}) {
-  const { x: plotX, y: plotY, width: plotWidth, height: plotHeight } = plotArea;
-  return /* @__PURE__ */ jsxs("g", { className: "chart-axis", "aria-hidden": "true", "data-testid": "chart-axis", children: [
-    /* @__PURE__ */ jsx(
-      "line",
-      {
-        x1: plotX,
-        y1: plotY + plotHeight,
-        x2: plotX + plotWidth,
-        y2: plotY + plotHeight,
-        stroke: AXIS_COLOR,
-        strokeWidth: AXIS_STROKE_WIDTH
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "line",
-      {
-        x1: plotX,
-        y1: plotY,
-        x2: plotX,
-        y2: plotY + plotHeight,
-        stroke: AXIS_COLOR,
-        strokeWidth: AXIS_STROKE_WIDTH
-      }
-    ),
-    allLabels.map((label, index) => {
-      const x = xScale(index);
-      const y = plotY + plotHeight;
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: x,
-            y1: y,
-            x2: x,
-            y2: y + AXIS_TICK_SIZE,
-            stroke: AXIS_COLOR,
-            strokeWidth: AXIS_STROKE_WIDTH
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x,
-            y: y + AXIS_TICK_SIZE + AXIS_LABEL_FONT_SIZE,
-            textAnchor: "middle",
-            fontSize: AXIS_LABEL_FONT_SIZE,
-            fill: "currentColor",
-            className: "text-[var(--content-foreground)]",
-            children: label
-          }
-        )
-      ] }, label);
-    }),
-    yTicks.map((tick) => {
-      const x = plotX;
-      const y = yScale(tick);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: x - AXIS_TICK_SIZE,
-            y1: y,
-            x2: x,
-            y2: y,
-            stroke: AXIS_COLOR,
-            strokeWidth: AXIS_STROKE_WIDTH
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: x - AXIS_TICK_SIZE - 4,
-            y,
-            textAnchor: "end",
-            dominantBaseline: "middle",
-            fontSize: AXIS_LABEL_FONT_SIZE,
-            fill: "currentColor",
-            className: "text-[var(--content-foreground)]",
-            children: formatValue(tick)
-          }
-        )
-      ] }, tick);
-    }),
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: plotX + plotWidth / 2,
-        y: plotY + plotHeight + 45,
-        textAnchor: "middle",
-        fontSize: AXIS_LABEL_FONT_SIZE,
-        fill: "currentColor",
-        className: "text-[var(--content-foreground)] font-medium",
-        children: xAxisLabel
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: 15,
-        y: plotY + plotHeight / 2,
-        textAnchor: "middle",
-        fontSize: AXIS_LABEL_FONT_SIZE,
-        fill: "currentColor",
-        className: "text-[var(--content-foreground)] font-medium",
-        transform: `rotate(-90, 15, ${plotY + plotHeight / 2})`,
-        children: yAxisLabel
-      }
-    )
-  ] });
-}
-ChartAxis.displayName = "ChartAxis";
-function ChartDataPoint({
-  type,
-  x,
-  y,
-  width = POINT_RADIUS * 2,
-  height = POINT_RADIUS * 2,
-  color,
-  seriesIndex,
-  pointIndex,
-  tabIndex,
-  label,
-  isSelected = false,
-  onFocus,
-  onBlur,
-  onHover,
-  onHoverEnd,
-  onKeyDown
-}) {
-  const ref = useRef(null);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  useEffect(() => {
-    if (tabIndex === 0 && ref.current) {
-      const activeElement = document.activeElement;
-      const isChartFocused = activeElement?.closest('[role="graphics-document"]') !== null;
-      if (isChartFocused) {
-        ref.current.focus();
-      }
-    }
-  }, [tabIndex]);
-  const hitAreaSize = Math.max(MIN_TOUCH_TARGET, width, height);
-  const hitX = type === "bar" ? x - (hitAreaSize - width) / 2 : x - hitAreaSize / 2;
-  const hitY = type === "bar" ? y - (hitAreaSize - height) / 2 : y - hitAreaSize / 2;
-  const handleFocus = (event) => {
-    focusProps.onFocus?.(event);
-    onFocus?.(seriesIndex, pointIndex);
-  };
-  const handleBlur = (event) => {
-    focusProps.onBlur?.(event);
-    onBlur?.();
-  };
-  const handleMouseEnter = (_event) => {
-    onHover?.(seriesIndex, pointIndex);
-  };
-  const handleMouseLeave = (_event) => {
-    onHoverEnd?.();
-  };
-  const state = isSelected ? "selected" : isFocusVisible ? "focused" : "default";
-  return /* @__PURE__ */ jsxs(
-    "g",
-    {
-      ref,
-      role: "listitem",
-      tabIndex,
-      "aria-label": label,
-      className: dataPointVariants({ type, state }),
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onKeyDown,
-      "data-testid": `chart-point-${seriesIndex}-${pointIndex}`,
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: hitX,
-            y: hitY,
-            width: hitAreaSize,
-            height: hitAreaSize,
-            fill: "transparent",
-            className: "cursor-pointer"
-          }
-        ),
-        type === "bar" ? /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x,
-            y,
-            width,
-            height,
-            rx: BAR_RADIUS,
-            ry: BAR_RADIUS,
-            fill: color,
-            className: "chart-bar"
-          }
-        ) : /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: x,
-            cy: y,
-            r: POINT_RADIUS,
-            fill: color,
-            className: "chart-point"
-          }
-        ),
-        isFocusVisible && (type === "bar" ? /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: x - FOCUS_RING_OFFSET,
-            y: y - FOCUS_RING_OFFSET,
-            width: width + FOCUS_RING_OFFSET * 2,
-            height: height + FOCUS_RING_OFFSET * 2,
-            rx: BAR_RADIUS + FOCUS_RING_OFFSET,
-            ry: BAR_RADIUS + FOCUS_RING_OFFSET,
-            fill: "none",
-            stroke: "var(--ring)",
-            strokeWidth: FOCUS_RING_WIDTH,
-            className: "chart-focus-ring"
-          }
-        ) : /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: x,
-            cy: y,
-            r: POINT_RADIUS + FOCUS_RING_OFFSET,
-            fill: "none",
-            stroke: "var(--ring)",
-            strokeWidth: FOCUS_RING_WIDTH,
-            className: "chart-focus-ring"
-          }
-        ))
-      ]
-    }
-  );
-}
-ChartDataPoint.displayName = "ChartDataPoint";
-function ChartBarSeries({
-  series,
-  seriesIndex,
-  totalSeries,
-  dimensions,
-  scales,
-  color,
-  getTabIndex,
-  selectedPoint,
-  onPointFocus,
-  onPointBlur,
-  onPointHover,
-  onPointHoverEnd,
-  onKeyDown,
-  formatValue
-}) {
-  const { plotArea } = dimensions;
-  const { allLabels, xScale: _xScale, yScale, yMin } = scales;
-  const { barWidth, getBarX } = calculateBarLayout(
-    plotArea.width,
-    allLabels.length,
-    totalSeries,
-    plotArea.x
-  );
-  const baselineY = yScale(Math.max(0, yMin));
-  return /* @__PURE__ */ jsx(
-    "g",
-    {
-      className: "chart-bar-series",
-      role: "list",
-      "aria-label": `${series.name} series`,
-      "data-testid": `chart-series-${seriesIndex}`,
-      children: series.data.map((point, pointIndex) => {
-        const labelIndex = allLabels.indexOf(point.label);
-        if (labelIndex === -1) return null;
-        const barX = getBarX(labelIndex, seriesIndex);
-        const barY = yScale(point.value);
-        const barHeight = Math.abs(baselineY - barY);
-        const finalBarY = point.value >= 0 ? barY : baselineY;
-        const isSelected = selectedPoint?.series === seriesIndex && selectedPoint?.point === pointIndex;
-        const accessibleLabel = `${series.name}: ${point.label}, ${formatValue(point.value)}`;
-        return /* @__PURE__ */ jsx(
-          ChartDataPoint,
-          {
-            type: "bar",
-            x: barX,
-            y: finalBarY,
-            width: barWidth,
-            height: barHeight,
-            color,
-            seriesIndex,
-            pointIndex,
-            tabIndex: getTabIndex(seriesIndex, pointIndex),
-            label: accessibleLabel,
-            isSelected,
-            onFocus: onPointFocus,
-            onBlur: onPointBlur,
-            onHover: onPointHover,
-            onHoverEnd: onPointHoverEnd,
-            onKeyDown
-          },
-          `${point.label}-${pointIndex}`
-        );
-      })
-    }
-  );
-}
-ChartBarSeries.displayName = "ChartBarSeries";
-function ChartLineSeries({
-  series,
-  seriesIndex,
-  scales,
-  color,
-  pattern,
-  getTabIndex,
-  selectedPoint,
-  onPointFocus,
-  onPointBlur,
-  onPointHover,
-  onPointHoverEnd,
-  onKeyDown,
-  formatValue
-}) {
-  const { allLabels, xScale, yScale } = scales;
-  const points = useMemo(() => {
-    return series.data.map((point, pointIndex) => {
-      const labelIndex = allLabels.indexOf(point.label);
-      if (labelIndex === -1) return null;
-      return {
-        x: xScale(labelIndex),
-        y: yScale(point.value),
-        point,
-        pointIndex,
-        labelIndex
-      };
-    }).filter((p) => p !== null).sort((a, b) => a.labelIndex - b.labelIndex);
-  }, [series.data, allLabels, xScale, yScale]);
-  const pathD = useMemo(() => {
-    if (points.length === 0) return "";
-    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-  }, [points]);
-  const strokeDasharray = LINE_PATTERNS[pattern] === "none" ? void 0 : LINE_PATTERNS[pattern];
-  return /* @__PURE__ */ jsxs(
-    "g",
-    {
-      className: "chart-line-series",
-      role: "list",
-      "aria-label": `${series.name} series`,
-      "data-testid": `chart-series-${seriesIndex}`,
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: pathD,
-            fill: "none",
-            stroke: color,
-            strokeWidth: LINE_STROKE_WIDTH,
-            strokeDasharray,
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            className: "chart-line",
-            "aria-hidden": "true"
-          }
-        ),
-        points.map(({ x, y, point, pointIndex }) => {
-          const isSelected = selectedPoint?.series === seriesIndex && selectedPoint?.point === pointIndex;
-          const accessibleLabel = `${series.name}: ${point.label}, ${formatValue(point.value)}`;
-          return /* @__PURE__ */ jsx(
-            ChartDataPoint,
-            {
-              type: "line",
-              x,
-              y,
-              color,
-              seriesIndex,
-              pointIndex,
-              tabIndex: getTabIndex(seriesIndex, pointIndex),
-              label: accessibleLabel,
-              isSelected,
-              onFocus: onPointFocus,
-              onBlur: onPointBlur,
-              onHover: onPointHover,
-              onHoverEnd: onPointHoverEnd,
-              onKeyDown
-            },
-            `${point.label}-${pointIndex}`
-          );
-        })
-      ]
-    }
-  );
-}
-ChartLineSeries.displayName = "ChartLineSeries";
-function ChartSVG({
-  type,
-  data,
-  dimensions,
-  scales,
-  titleId,
-  descId,
-  showGrid,
-  xAxisLabel,
-  yAxisLabel,
-  getSeriesColor,
-  getTabIndex,
-  selectedPoint,
-  formatValue,
-  onKeyDown,
-  onPointFocus,
-  onPointBlur,
-  onPointHover,
-  onPointHoverEnd
-}) {
-  const { width, height, plotArea } = dimensions;
-  const { allLabels, xScale, yScale, yTicks } = scales;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      role: "graphics-document",
-      "aria-roledescription": `${type} chart`,
-      "aria-labelledby": titleId,
-      "aria-describedby": descId,
-      viewBox: `0 0 ${width} ${height}`,
-      className: "h-full w-full",
-      style: { maxHeight: height },
-      "data-testid": "chart-svg",
-      children: [
-        /* @__PURE__ */ jsx(
-          ChartGrid,
-          {
-            yTicks,
-            yScale,
-            plotX: plotArea.x,
-            plotWidth: plotArea.width,
-            visible: showGrid
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ChartAxis,
-          {
-            allLabels,
-            yTicks,
-            xScale,
-            yScale,
-            plotArea,
-            xAxisLabel,
-            yAxisLabel,
-            formatValue
-          }
-        ),
-        data.map((series, seriesIndex) => {
-          const color = series.color || getSeriesColor(seriesIndex);
-          const pattern = series.pattern || "solid";
-          if (type === "bar") {
-            return /* @__PURE__ */ jsx(
-              ChartBarSeries,
-              {
-                series,
-                seriesIndex,
-                totalSeries: data.length,
-                dimensions,
-                scales,
-                color,
-                getTabIndex,
-                selectedPoint,
-                onPointFocus,
-                onPointBlur,
-                onPointHover,
-                onPointHoverEnd,
-                onKeyDown,
-                formatValue
-              },
-              series.name
-            );
-          }
-          return /* @__PURE__ */ jsx(
-            ChartLineSeries,
-            {
-              series,
-              seriesIndex,
-              scales,
-              color,
-              pattern,
-              getTabIndex,
-              selectedPoint,
-              onPointFocus,
-              onPointBlur,
-              onPointHover,
-              onPointHoverEnd,
-              onKeyDown,
-              formatValue
-            },
-            series.name
-          );
-        })
-      ]
-    }
-  );
-}
-ChartSVG.displayName = "ChartSVG";
-var TOOLTIP_GAP = 8;
-function ChartTooltip({
-  visible,
-  x,
-  y,
-  seriesName,
-  label,
-  value,
-  chartWidth,
-  chartHeight,
-  trend,
-  trendDirection
-}) {
-  const tooltipRef = useRef(null);
-  const [position, setPosition] = useState({ left: 0, top: 0 });
-  const [side, setSide] = useState("top");
-  useEffect(() => {
-    if (!visible || !tooltipRef.current) return;
-    const tooltip = tooltipRef.current;
-    const tooltipRect = tooltip.getBoundingClientRect();
-    const tooltipWidth = tooltipRect.width || 120;
-    const tooltipHeight = tooltipRect.height || 50;
-    let left = x - tooltipWidth / 2;
-    let top = y - tooltipHeight - TOOLTIP_GAP;
-    let newSide = "top";
-    if (top < 0) {
-      top = y + TOOLTIP_GAP + 16;
-      newSide = "bottom";
-    }
-    if (left < 0) {
-      left = 0;
-    }
-    if (left + tooltipWidth > chartWidth) {
-      left = chartWidth - tooltipWidth;
-    }
-    setPosition({ left, top });
-    setSide(newSide);
-  }, [visible, x, y, chartWidth]);
-  if (!visible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: tooltipRef,
-      "aria-hidden": "true",
-      className: tooltipContentVariants({ side }),
-      style: {
-        position: "absolute",
-        left: position.left,
-        top: position.top,
-        pointerEvents: "none"
-      },
-      "data-testid": "chart-tooltip",
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "font-medium", children: seriesName }),
-        /* @__PURE__ */ jsxs("div", { className: "opacity-80", children: [
-          label,
-          ": ",
-          /* @__PURE__ */ jsx("span", { className: "font-semibold", children: value })
-        ] }),
-        trend && /* @__PURE__ */ jsxs("div", { className: "text-xs opacity-70 mt-1 flex items-center gap-1", children: [
-          trendDirection === "up" ? /* @__PURE__ */ jsx(
-            "svg",
-            {
-              "aria-hidden": "true",
-              className: "h-3 w-3 text-green-500",
-              viewBox: "0 0 20 20",
-              fill: "currentColor",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  d: "M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z",
-                  clipRule: "evenodd"
-                }
-              )
-            }
-          ) : trendDirection === "down" ? /* @__PURE__ */ jsx(
-            "svg",
-            {
-              "aria-hidden": "true",
-              className: "h-3 w-3 text-red-500",
-              viewBox: "0 0 20 20",
-              fill: "currentColor",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  d: "M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z",
-                  clipRule: "evenodd"
-                }
-              )
-            }
-          ) : null,
-          /* @__PURE__ */ jsx("span", { children: trend })
-        ] })
-      ]
-    }
-  );
-}
-ChartTooltip.displayName = "ChartTooltip";
-function ChartLegend({
-  data,
-  visible,
-  type,
-  getSeriesColor
-}) {
-  if (!visible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: legendVariants({ visible }),
-      role: "list",
-      "aria-label": "Chart legend",
-      "data-testid": "chart-legend",
-      children: data.map((series, index) => {
-        const color = series.color || getSeriesColor(index);
-        const pattern = series.pattern || "solid";
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            role: "listitem",
-            className: "flex items-center gap-2",
-            children: [
-              type === "bar" ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "h-3 w-3 rounded-sm",
-                  style: { backgroundColor: color },
-                  "data-testid": `legend-color-${index}`,
-                  "aria-hidden": "true"
-                }
-              ) : /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  width: "24",
-                  height: "12",
-                  "aria-hidden": "true",
-                  "data-testid": `legend-color-${index}`,
-                  children: /* @__PURE__ */ jsx(
-                    "line",
-                    {
-                      x1: "0",
-                      y1: "6",
-                      x2: "24",
-                      y2: "6",
-                      stroke: color,
-                      strokeWidth: "2",
-                      strokeDasharray: LINE_PATTERNS[pattern] === "none" ? void 0 : LINE_PATTERNS[pattern]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--content-foreground)]", children: series.name })
-            ]
-          },
-          series.name
-        );
-      })
-    }
-  );
-}
-ChartLegend.displayName = "ChartLegend";
-function ChartAnnouncer({
-  announcement
-}) {
-  return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "status",
-      "aria-live": "polite",
-      "aria-atomic": "true",
-      "data-testid": "chart-announcer",
-      children: announcement
-    }
-  ) });
-}
-ChartAnnouncer.displayName = "ChartAnnouncer";
-function ChartDataTable({
-  data,
-  title,
-  xAxisLabel,
-  yAxisLabel,
-  formatValue,
-  allLabels
-}) {
-  const isSingleSeries = data.length === 1;
-  return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsxs("table", { "data-testid": "chart-data-table", children: [
-    /* @__PURE__ */ jsxs("caption", { children: [
-      title,
-      " data table"
-    ] }),
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("th", { scope: "col", children: xAxisLabel }),
-      isSingleSeries ? /* @__PURE__ */ jsx("th", { scope: "col", children: yAxisLabel }) : data.map((series) => /* @__PURE__ */ jsxs("th", { scope: "col", children: [
-        series.name,
-        " (",
-        yAxisLabel,
-        ")"
-      ] }, series.name))
-    ] }) }),
-    /* @__PURE__ */ jsx("tbody", { children: allLabels.map((label) => /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("th", { scope: "row", children: label }),
-      data.map((series) => {
-        const point = series.data.find((p) => p.label === label);
-        return /* @__PURE__ */ jsx("td", { children: point ? formatValue(point.value) : "\u2014" }, series.name);
-      })
-    ] }, label)) })
-  ] }) });
-}
-ChartDataTable.displayName = "ChartDataTable";
-function useChartKeyboard(options) {
-  const { roving, onSelect, onClear, disabled = false } = options;
-  const onKeyDown = useCallback(
-    (event) => {
-      if (disabled) return;
-      switch (event.key) {
-        case "ArrowRight":
-          event.preventDefault();
-          roving.moveRight();
-          break;
-        case "ArrowLeft":
-          event.preventDefault();
-          roving.moveLeft();
-          break;
-        case "ArrowDown":
-          event.preventDefault();
-          roving.moveDown();
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          roving.moveUp();
-          break;
-        case "Home":
-          event.preventDefault();
-          roving.moveToStart();
-          break;
-        case "End":
-          event.preventDefault();
-          roving.moveToEnd();
-          break;
-        case "Enter":
-        case " ":
-          event.preventDefault();
-          onSelect?.();
-          break;
-        case "Escape":
-          event.preventDefault();
-          onClear?.();
-          break;
-      }
-    },
-    [roving, onSelect, onClear, disabled]
-  );
-  return { onKeyDown };
-}
-function ChartInner({ chartId }) {
-  const ctx = useChartContext();
-  const {
-    data,
-    type,
-    title,
-    xAxisLabel,
-    yAxisLabel,
-    showTooltip,
-    showGrid,
-    showLegend,
-    dimensions,
-    scales,
-    announcement,
-    isTooltipVisible,
-    tooltipPoint,
-    currentTrend,
-    currentTrendDirection,
-    selectedPoint,
-    getTabIndex,
-    formatValue,
-    getSeriesColor,
-    getPointCoordinates,
-    setFocus,
-    selectPoint,
-    clearSelection,
-    showTooltipAt,
-    hideTooltip
-  } = ctx;
-  const titleId = `${chartId}-title`;
-  const descId = `${chartId}-desc`;
-  const roving = useRovingTabIndex2D({
-    rows: data.length,
-    cols: (row) => data[row]?.data.length || 0,
-    onFocusChange: (seriesIndex, pointIndex) => {
-      setFocus(seriesIndex, pointIndex);
-    }
-  });
-  const { onKeyDown } = useChartKeyboard({
-    roving,
-    onSelect: () => {
-      selectPoint(roving.focusedRow, roving.focusedCol);
-    },
-    onClear: () => {
-      clearSelection();
-    }
-  });
-  const handlePointFocus = useCallback(
-    (seriesIndex, pointIndex) => {
-      roving.setFocus(seriesIndex, pointIndex);
-      showTooltipAt(seriesIndex, pointIndex);
-    },
-    [roving, showTooltipAt]
-  );
-  const handlePointBlur = useCallback(() => {
-  }, []);
-  const handlePointHover = useCallback(
-    (seriesIndex, pointIndex) => {
-      showTooltipAt(seriesIndex, pointIndex);
-    },
-    [showTooltipAt]
-  );
-  const handlePointHoverEnd = useCallback(() => {
-    hideTooltip();
-  }, [hideTooltip]);
-  const tooltipPosition = useMemo(() => {
-    if (!tooltipPoint) return { x: 0, y: 0 };
-    const coords = getPointCoordinates(tooltipPoint.series, tooltipPoint.point);
-    return coords || { x: 0, y: 0 };
-  }, [tooltipPoint, getPointCoordinates]);
-  const tooltipSeries = useMemo(
-    () => tooltipPoint ? data[tooltipPoint.series] : null,
-    [tooltipPoint, data]
-  );
-  const tooltipPointData = useMemo(
-    () => tooltipPoint ? tooltipSeries?.data[tooltipPoint.point] : null,
-    [tooltipPoint, tooltipSeries]
-  );
-  const shouldShowLegend = useMemo(
-    () => showLegend ?? data.length > 1,
-    [showLegend, data.length]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ChartAnnouncer, { announcement }),
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "relative z-0", children: /* @__PURE__ */ jsx(
-        ChartSVG,
-        {
-          type,
-          data,
-          dimensions,
-          scales,
-          titleId,
-          descId,
-          showGrid,
-          xAxisLabel,
-          yAxisLabel,
-          getSeriesColor,
-          getTabIndex,
-          selectedPoint,
-          formatValue,
-          onKeyDown,
-          onPointFocus: handlePointFocus,
-          onPointBlur: handlePointBlur,
-          onPointHover: handlePointHover,
-          onPointHoverEnd: handlePointHoverEnd
-        }
-      ) }),
-      showTooltip && tooltipPointData && tooltipSeries && /* @__PURE__ */ jsx(
-        ChartTooltip,
-        {
-          visible: isTooltipVisible,
-          x: tooltipPosition.x,
-          y: tooltipPosition.y,
-          seriesName: tooltipSeries.name,
-          label: tooltipPointData.label,
-          value: formatValue(tooltipPointData.value),
-          chartWidth: dimensions.width,
-          chartHeight: dimensions.height,
-          trend: currentTrend,
-          trendDirection: currentTrendDirection
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      ChartLegend,
-      {
-        data,
-        visible: shouldShowLegend,
-        type,
-        getSeriesColor
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ChartDataTable,
-      {
-        data,
-        title,
-        xAxisLabel,
-        yAxisLabel,
-        formatValue,
-        allLabels: scales.allLabels
-      }
-    )
-  ] });
-}
-var ChartComponent = forwardRef(
-  ({
-    data,
-    type,
-    title,
-    description,
-    xAxisLabel,
-    yAxisLabel,
-    variant = "default",
-    className,
-    showTooltip = true,
-    showGrid = true,
-    showLegend,
-    announceTrends = false,
-    trendUpFormat = "up {percent}% from previous",
-    trendDownFormat = "down {percent}% from previous",
-    startAtZero = true,
-    reducedMotion,
-    onPointFocus,
-    onPointSelect,
-    id,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    "aria-describedby": ariaDescribedby,
-    "data-testid": dataTestId,
-    ...rest
-  }, ref) => {
-    const containerRef = useRef(null);
-    const generatedId = useId();
-    const chartId = id || `chart-${generatedId}`;
-    const titleId = `${chartId}-title`;
-    const descId = `${chartId}-desc`;
-    const shouldShowLegend = showLegend ?? data.length > 1;
-    return /* @__PURE__ */ jsxs(
-      "figure",
-      {
-        ref: (node) => {
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-          containerRef.current = node;
-        },
-        id: chartId,
-        role: "figure",
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledby || titleId,
-        "aria-describedby": ariaDescribedby || descId,
-        "data-testid": dataTestId,
-        className: cn(chartVariants({ variant }), "p-4", className),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs("figcaption", { className: "sr-only", children: [
-            /* @__PURE__ */ jsx("span", { id: titleId, children: title }),
-            /* @__PURE__ */ jsx("span", { id: descId, children: description })
-          ] }),
-          /* @__PURE__ */ jsx(
-            ChartProvider,
-            {
-              containerRef,
-              data,
-              type,
-              title,
-              description,
-              xAxisLabel,
-              yAxisLabel,
-              showTooltip,
-              showGrid,
-              showLegend: shouldShowLegend,
-              announceTrends,
-              trendUpFormat,
-              trendDownFormat,
-              startAtZero,
-              reducedMotion,
-              onPointFocus,
-              onPointSelect,
-              children: /* @__PURE__ */ jsx(ChartInner, { chartId })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-ChartComponent.displayName = "Chart";
-var Chart = memo(ChartComponent);
-Chart.displayName = "Chart";
-var DataPointSchema = z.object({
-  /** X-axis label (e.g., "January", "Q1 2024") */
-  label: z.string().min(1, "Label is required"),
-  /** Y-axis value */
-  value: z.number(),
-  /** Extended description for screen readers */
-  description: z.string().optional()
-});
-var LinePatternSchema = z.enum(["solid", "dashed", "dotted"]);
-var DataSeriesSchema = z.object({
-  /** Series name for legend and announcements */
-  name: z.string().min(1, "Series name is required"),
-  /** CSS color (defaults to --chart-1 through --chart-5) */
-  color: z.string().optional(),
-  /** Line pattern for accessibility (defaults to solid) */
-  pattern: LinePatternSchema.optional().default("solid"),
-  /** Data points in this series */
-  data: z.array(DataPointSchema).min(1, "At least one data point required")
-});
-var ChartTypeSchema = z.enum(["bar", "line"]);
-var ChartVariantSchema = z.enum(["default", "muted"]);
-var ChartPropsSchema = BaseComponentPropsSchema.extend({
-  // Required props
-  /** Chart data - maximum 5 series (Decision 11) */
-  data: z.array(DataSeriesSchema).min(1, "At least one data series required").max(5, "Maximum 5 series allowed"),
-  /** Chart type: bar or line */
-  type: ChartTypeSchema,
-  /** Chart title (displayed and used for accessibility) */
-  title: z.string().min(1, "Title is required"),
-  /** Chart description (displayed and used for accessibility) */
-  description: z.string().min(1, "Description is required"),
-  /** X-axis label */
-  xAxisLabel: z.string().min(1, "X-axis label is required"),
-  /** Y-axis label */
-  yAxisLabel: z.string().min(1, "Y-axis label is required"),
-  // Optional - Styling
-  /** Visual variant */
-  variant: ChartVariantSchema.optional().default("default"),
-  // Optional - Features
-  /** Show tooltip on focus/hover (default: true) */
-  showTooltip: z.boolean().optional().default(true),
-  /** Show grid lines (default: true) */
-  showGrid: z.boolean().optional().default(true),
-  /** Show legend (auto: shown when >1 series) */
-  showLegend: z.boolean().optional(),
-  /** Announce trend percentages (default: false) */
-  announceTrends: z.boolean().optional().default(false),
-  /** ICU format string for upward trend (use {percent} placeholder) */
-  trendUpFormat: z.string().optional().default("up {percent}% from previous"),
-  /** ICU format string for downward trend (use {percent} placeholder) */
-  trendDownFormat: z.string().optional().default("down {percent}% from previous"),
-  /** Y-axis starts at zero (default: true) - Decision 6 */
-  startAtZero: z.boolean().optional().default(true),
-  // Optional - Accessibility
-  /** Override reduced motion preference */
-  reducedMotion: z.boolean().optional(),
-  // Optional - Events (use z.unknown() since Zod can't validate function types at runtime)
-  /** Called when a data point receives focus */
-  onPointFocus: z.unknown().optional(),
-  /** Called when a data point is selected (Enter/Space) */
-  onPointSelect: z.unknown().optional()
-});
-
-export { Chart, ChartPropsSchema, ChartTypeSchema, ChartVariantSchema, DataPointSchema, DataSeriesSchema, LinePatternSchema, chartVariants, dataPointVariants };
-//# sourceMappingURL=chunk-D6CBOECS.mjs.map
-//# sourceMappingURL=chunk-D6CBOECS.mjs.map