@tribepad/themis 1.0.1 → 1.0.2

package/dist/elements/Chart/index.mjs

@@ -1,1834 +1,3 @@
 "use client";
-import { createContext, forwardRef, useRef, useId, memo, useState, useMemo, useCallback, useEffect, useContext } from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { cva } from 'class-variance-authority';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { VisuallyHidden, useFocusRing } from 'react-aria';
-import 'react-aria-components';
-import { z } from 'zod';
-
-// src/elements/Chart/Chart.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-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 tooltipContentVariants = cva(
-  // Base styles
-  [
-    "z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md",
-    // Inverted colors for high contrast (7:1 ratio)
-    "bg-[var(--content-foreground)] text-[var(--content-background)]",
-    // Entry animation base
-    "animate-in fade-in-0",
-    // Exit animation
-    "data-[exiting]:animate-out data-[exiting]:fade-out-0"
-  ],
-  {
-    variants: {
-      side: {
-        top: [
-          "motion-safe:slide-in-from-bottom-2",
-          "data-[exiting]:motion-safe:slide-out-to-bottom-2"
-        ],
-        bottom: [
-          "motion-safe:slide-in-from-top-2",
-          "data-[exiting]:motion-safe:slide-out-to-top-2"
-        ],
-        left: [
-          "motion-safe:slide-in-from-right-2",
-          "data-[exiting]:motion-safe:slide-out-to-right-2"
-        ],
-        right: [
-          "motion-safe:slide-in-from-left-2",
-          "data-[exiting]:motion-safe:slide-out-to-left-2"
-        ]
-      }
-    },
-    defaultVariants: {
-      side: "top"
-    }
-  }
-);
-cva(
-  // Base arrow styles
-  "fill-[var(--content-foreground)]",
-  {
-    variants: {
-      side: {
-        top: "rotate-180",
-        bottom: "rotate-0",
-        left: "rotate-90",
-        right: "-rotate-90"
-      }
-    },
-    defaultVariants: {
-      side: "top"
-    }
-  }
-);
-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 BaseComponentPropsSchema = z.object({
-  // Styling
-  className: z.string().optional(),
-  // React
-  children: z.any().optional(),
-  // ReactNode not directly supported by Zod
-  id: z.string().optional(),
-  // Accessibility (WCAG 2.2 AA requirements)
-  "aria-label": z.string().optional(),
-  "aria-labelledby": z.string().optional(),
-  "aria-describedby": z.string().optional(),
-  "aria-live": z.enum(["off", "polite", "assertive"]).optional(),
-  "aria-hidden": z.boolean().optional(),
-  // Testing & Development
-  "data-testid": z.string().optional()
-});
-
-// src/elements/Chart/Chart.types.ts
-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=index.mjs.map
+import {createContext,forwardRef,useRef,useId,memo,useState,useMemo,useCallback,useEffect,useContext}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {VisuallyHidden,useFocusRing}from'react-aria';import'react-aria-components';import {z}from'zod';function se(...o){return twMerge(clsx(o))}var we=cva("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"}}),Ee=cva("cursor-pointer focus-visible:outline-none",{variants:{type:{bar:"",line:"stroke-2"},state:{default:"",focused:"",selected:"opacity-80"}},defaultVariants:{type:"bar",state:"default"}});cva("pointer-events-none",{variants:{visible:{true:"opacity-100",false:"opacity-0"}},defaultVariants:{visible:false}});var Je=cva("flex flex-wrap items-center justify-center gap-4 px-4 py-2",{variants:{visible:{true:"",false:"hidden"}},defaultVariants:{visible:true}});var M={top:20,right:20,bottom:60,left:60},ve=300,ye=169,Mt=.2,Ae=.1,Vt=20,le=4,je=2,ce=6;var te={solid:"none",dashed:"8 4",dotted:"2 4"};var et="var(--border)",tt=1,ot=.7,ue="var(--border)",de=1,me=6,oe=12,nt=44,X=4,Le=2,Ne=["var(--chart-1, hsl(221 83% 53%))","var(--chart-2, hsl(142 71% 45%))","var(--chart-3, hsl(38 92% 50%))","var(--chart-4, hsl(262 83% 58%))","var(--chart-5, hsl(0 84% 60%))"];function Qe(o,t){let e=Math.floor(Math.log10(o)),a=o/Math.pow(10,e),n;return t?a<1.5?n=1:a<3?n=2:a<7?n=5:n=10:a<=1?n=1:a<=2?n=2:a<=5?n=5:n=10,n*Math.pow(10,e)}function rt(o,t,e=5){if(o===t){if(o===0)return [0,25,50,75,100];o=o*.9,t=t*1.1;}let a=Qe(t-o,false),n=Qe(a/(e-1),true),s=Math.floor(o/n)*n,r=Math.ceil(t/n)*n,i=[];for(let l=s;l<=r;l+=n)i.push(l);return i}function at(o,t,e,a=0){let n=o/t,s=n*(1-Mt),r=Math.max(Vt,s/e*(1-Ae));return {barWidth:r,groupWidth:n,getBarX:(l,p)=>{let h=a+n*l+n/2,u=e*r+(e-1)*(Ae*r);return h-u/2+p*(r+Ae*r)}}}function it(o){let[t,e]=useState({width:ve,height:ye,padding:M,plotArea:{x:M.left,y:M.top,width:ve-M.left-M.right,height:ye-M.top-M.bottom}});return useEffect(()=>{let a=o.current;if(!a)return;let n=r=>{let i=Math.max(r,ve),l=Math.max(i*.5625,ye),p={x:M.left,y:M.top,width:i-M.left-M.right,height:l-M.top-M.bottom};e({width:i,height:l,padding:M,plotArea:p});},s=new ResizeObserver(r=>{let i=r[0];i&&n(i.contentRect.width);});return n(a.getBoundingClientRect().width),s.observe(a),()=>{s.disconnect();}},[o]),t}function Ce(o){let{rows:t,cols:e,initialRow:a=0,initialCol:n=0,wrap:s=false,onFocusChange:r}=o,[i,l]=useState(a),[p,h]=useState(n),u=useCallback(d=>typeof e=="function"?e(d):e,[e]),b=useCallback((d,c)=>{r?.(d,c);},[r]),C=useCallback(()=>{h(d=>{let c=u(i)-1,g=d+1;return g>c&&(g=s?0:c),g!==d&&b(i,g),g});},[i,u,s,b]),m=useCallback(()=>{h(d=>{let c=d-1,g=u(i)-1;return c<0&&(c=s?g:0),c!==d&&b(i,c),c});},[i,u,s,b]),x=useCallback(()=>{l(d=>{let c=d+1;if(c>=t&&(c=s?0:t-1),c!==d){let g=u(c)-1;h(I=>{let y=Math.min(I,g);return b(c,y),y});}return c});},[t,u,s,b]),R=useCallback(()=>{l(d=>{let c=d-1;if(c<0&&(c=s?t-1:0),c!==d){let g=u(c)-1;h(I=>{let y=Math.min(I,g);return b(c,y),y});}return c});},[t,u,s,b]),D=useCallback(()=>{h(0),b(i,0);},[i,b]),A=useCallback(()=>{let d=u(i)-1;h(d),b(i,d);},[i,u,b]),f=useCallback((d,c)=>{let g=Math.max(0,Math.min(d,t-1)),I=u(g)-1,y=Math.max(0,Math.min(c,I));l(g),h(y),b(g,y);},[t,u,b]),S=useCallback((d,c)=>d===i&&c===p?0:-1,[i,p]);return useMemo(()=>({focusedRow:i,focusedCol:p,moveRight:C,moveLeft:m,moveDown:x,moveUp:R,moveToStart:D,moveToEnd:A,setFocus:f,getTabIndex:S}),[i,p,C,m,x,R,D,A,f,S])}var lt=createContext(null);function ct(){let o=useContext(lt);if(!o)throw new Error("useChartContext must be used within a ChartProvider");return o}function Kt(o){let t=new Set;return o.forEach(e=>{e.data.forEach(a=>{t.add(a.label);});}),Array.from(t)}function $t(o,t,e){let a=Kt(o),{plotArea:n}=t,s=1/0,r=-1/0;o.forEach(m=>{m.data.forEach(x=>{s=Math.min(s,x.value),r=Math.max(r,x.value);});}),(!isFinite(s)||!isFinite(r))&&(s=0,r=100);let i=e?Math.min(0,s):s,l=rt(i,r),p=l[l.length-1]||r,h=l[0]||i,u=m=>{if(a.length<=1)return n.x+n.width/2;let x=n.width/a.length;return n.x+x*m+x/2},b=p-h||1;return {allLabels:a,xScale:u,yScale:m=>{let x=(m-h)/b;return n.y+n.height*(1-x)},yMin:h,yMax:p,yTicks:l}}function ut({children:o,containerRef:t,data:e,type:a,title:n,description:s,xAxisLabel:r,yAxisLabel:i,showTooltip:l,showGrid:p,showLegend:h,announceTrends:u,trendUpFormat:b,trendDownFormat:C,startAtZero:m,reducedMotion:x=true,onPointFocus:R,onPointSelect:D}){let[A,f]=useState(null),[S,d]=useState(""),[c,g]=useState(false),[I,y]=useState(null),[_,E]=useState(null),[k,V]=useState(null),G=it(t),O=useMemo(()=>$t(e,G,m),[e,G,m]);useMemo(()=>Math.max(...e.map(v=>v.data.length)),[e]);let re=useCallback((v,T)=>(T?b:C).replace("{percent}",String(v)),[b,C]),De=(v,T)=>{if(!u||T<=0)return null;let w=e[v];if(!w)return null;let L=w.data[T],N=w.data[T-1];if(!L||!N||N.value===0)return null;let Z=(L.value-N.value)/Math.abs(N.value)*100,J=Z>=0,ie=Math.abs(Math.round(Z));return {text:re(ie,J),direction:J?"up":"down"}},B=Ce({rows:e.length,cols:v=>e[v]?.data.length||0,onFocusChange:(v,T)=>{let w=e[v],L=w?.data[T];if(!w||!L)return;let N=De(v,T);E(N?.text??null),V(N?.direction??null);let Z=`${T+1} of ${w.data.length}`,J=e.length>1?`${w.name}: `:"",ie=z(L.value),Lt=N?`, ${N.text}`:"";d(`${J}${L.label}, ${ie}${Lt}. ${Z}.`),l&&(g(true),y({series:v,point:T})),R?.(L,v,T);}}),ae=useMemo(()=>{let v=typeof navigator<"u"?navigator.language:"en-US";return new Intl.NumberFormat(v)},[]),z=useCallback(v=>ae.format(v),[ae]),ee=useCallback((v,T)=>{if(!u||T<=0)return null;let w=e[v];if(!w)return null;let L=w.data[T],N=w.data[T-1];if(!L||!N||N.value===0)return null;let Z=(L.value-N.value)/Math.abs(N.value)*100,J=Z>=0,ie=Math.abs(Math.round(Z));return {text:re(ie,J),direction:J?"up":"down"}},[e,u,re]),ge=useCallback(v=>Ne[v%Ne.length]??"var(--chart-1)",[]),F=useCallback((v,T)=>{let w=e[v],L=w?.data[T];if(!w||!L)return null;let N=O.allLabels.indexOf(L.label);return N===-1?null:{x:O.xScale(N),y:O.yScale(L.value)}},[e,O]),U=useCallback((v,T)=>{B.setFocus(v,T);},[B]),ze=useCallback((v,T)=>{f({series:v,point:T});let w=e[v],L=w?.data[T];w&&L&&D?.(L,v,T);},[e,D]),Xe=useCallback(()=>{f(null);},[]),Ye=useCallback(v=>{d(v);},[]),qe=useCallback((v,T)=>{if(l){g(true),y({series:v,point:T});let w=ee(v,T);E(w?.text??null),V(w?.direction??null);}},[l,ee]),Ze=useCallback(()=>{g(false),y(null);},[]),At=useMemo(()=>({focusedSeries:B.focusedRow,focusedPoint:B.focusedCol,selectedPoint:A,announcement:S,isTooltipVisible:c,tooltipPoint:I,currentTrend:_,currentTrendDirection:k,dimensions:G,scales:O,data:e,type:a,title:n,description:s,xAxisLabel:r,yAxisLabel:i,showTooltip:l,showGrid:p,showLegend:h,announceTrends:u,trendUpFormat:b,trendDownFormat:C,startAtZero:m,reducedMotion:x,setFocus:U,selectPoint:ze,clearSelection:Xe,announce:Ye,showTooltipAt:qe,hideTooltip:Ze,getTabIndex:B.getTabIndex,formatValue:z,getSeriesColor:ge,getPointCoordinates:F}),[B.focusedRow,B.focusedCol,B.getTabIndex,A,S,c,I,_,k,G,O,e,a,n,s,r,i,l,p,h,u,b,C,m,x,U,ze,Xe,Ye,qe,Ze,z,ge,F]);return jsx(lt.Provider,{value:At,children:o})}function _e({yTicks:o,yScale:t,plotX:e,plotWidth:a,visible:n}){return n?jsx("g",{className:"chart-grid","aria-hidden":"true","data-testid":"chart-grid",children:o.map(s=>{let r=t(s);return jsx("line",{x1:e,y1:r,x2:e+a,y2:r,stroke:et,strokeWidth:tt,strokeOpacity:ot},s)})}):null}_e.displayName="ChartGrid";function Ve({allLabels:o,yTicks:t,xScale:e,yScale:a,plotArea:n,xAxisLabel:s,yAxisLabel:r,formatValue:i}){let{x:l,y:p,width:h,height:u}=n;return jsxs("g",{className:"chart-axis","aria-hidden":"true","data-testid":"chart-axis",children:[jsx("line",{x1:l,y1:p+u,x2:l+h,y2:p+u,stroke:ue,strokeWidth:de}),jsx("line",{x1:l,y1:p,x2:l,y2:p+u,stroke:ue,strokeWidth:de}),o.map((b,C)=>{let m=e(C),x=p+u;return jsxs("g",{children:[jsx("line",{x1:m,y1:x,x2:m,y2:x+me,stroke:ue,strokeWidth:de}),jsx("text",{x:m,y:x+me+oe,textAnchor:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)]",children:b})]},b)}),t.map(b=>{let C=l,m=a(b);return jsxs("g",{children:[jsx("line",{x1:C-me,y1:m,x2:C,y2:m,stroke:ue,strokeWidth:de}),jsx("text",{x:C-me-4,y:m,textAnchor:"end",dominantBaseline:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)]",children:i(b)})]},b)}),jsx("text",{x:l+h/2,y:p+u+45,textAnchor:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)] font-medium",children:s}),jsx("text",{x:15,y:p+u/2,textAnchor:"middle",fontSize:oe,fill:"currentColor",className:"text-[var(--content-foreground)] font-medium",transform:`rotate(-90, 15, ${p+u/2})`,children:r})]})}Ve.displayName="ChartAxis";function be({type:o,x:t,y:e,width:a=ce*2,height:n=ce*2,color:s,seriesIndex:r,pointIndex:i,tabIndex:l,label:p,isSelected:h=false,onFocus:u,onBlur:b,onHover:C,onHoverEnd:m,onKeyDown:x}){let R=useRef(null),{isFocusVisible:D,focusProps:A}=useFocusRing();useEffect(()=>{l===0&&R.current&&document.activeElement?.closest('[role="graphics-document"]')!==null&&R.current.focus();},[l]);let f=Math.max(nt,a,n),S=o==="bar"?t-(f-a)/2:t-f/2,d=o==="bar"?e-(f-n)/2:e-f/2,c=E=>{A.onFocus?.(E),u?.(r,i);},g=E=>{A.onBlur?.(E),b?.();},I=E=>{C?.(r,i);},y=E=>{m?.();};return jsxs("g",{ref:R,role:"listitem",tabIndex:l,"aria-label":p,className:Ee({type:o,state:h?"selected":D?"focused":"default"}),onFocus:c,onBlur:g,onMouseEnter:I,onMouseLeave:y,onKeyDown:x,"data-testid":`chart-point-${r}-${i}`,children:[jsx("rect",{x:S,y:d,width:f,height:f,fill:"transparent",className:"cursor-pointer"}),o==="bar"?jsx("rect",{x:t,y:e,width:a,height:n,rx:le,ry:le,fill:s,className:"chart-bar"}):jsx("circle",{cx:t,cy:e,r:ce,fill:s,className:"chart-point"}),D&&(o==="bar"?jsx("rect",{x:t-X,y:e-X,width:a+X*2,height:n+X*2,rx:le+X,ry:le+X,fill:"none",stroke:"var(--ring)",strokeWidth:Le,className:"chart-focus-ring"}):jsx("circle",{cx:t,cy:e,r:ce+X,fill:"none",stroke:"var(--ring)",strokeWidth:Le,className:"chart-focus-ring"}))]})}be.displayName="ChartDataPoint";function ke({series:o,seriesIndex:t,totalSeries:e,dimensions:a,scales:n,color:s,getTabIndex:r,selectedPoint:i,onPointFocus:l,onPointBlur:p,onPointHover:h,onPointHoverEnd:u,onKeyDown:b,formatValue:C}){let{plotArea:m}=a,{allLabels:x,xScale:R,yScale:D,yMin:A}=n,{barWidth:f,getBarX:S}=at(m.width,x.length,e,m.x),d=D(Math.max(0,A));return jsx("g",{className:"chart-bar-series",role:"list","aria-label":`${o.name} series`,"data-testid":`chart-series-${t}`,children:o.data.map((c,g)=>{let I=x.indexOf(c.label);if(I===-1)return null;let y=S(I,t),_=D(c.value),E=Math.abs(d-_),k=c.value>=0?_:d,V=i?.series===t&&i?.point===g,G=`${o.name}: ${c.label}, ${C(c.value)}`;return jsx(be,{type:"bar",x:y,y:k,width:f,height:E,color:s,seriesIndex:t,pointIndex:g,tabIndex:r(t,g),label:G,isSelected:V,onFocus:l,onBlur:p,onHover:h,onHoverEnd:u,onKeyDown:b},`${c.label}-${g}`)})})}ke.displayName="ChartBarSeries";function Oe({series:o,seriesIndex:t,scales:e,color:a,pattern:n,getTabIndex:s,selectedPoint:r,onPointFocus:i,onPointBlur:l,onPointHover:p,onPointHoverEnd:h,onKeyDown:u,formatValue:b}){let{allLabels:C,xScale:m,yScale:x}=e,R=useMemo(()=>o.data.map((f,S)=>{let d=C.indexOf(f.label);return d===-1?null:{x:m(d),y:x(f.value),point:f,pointIndex:S,labelIndex:d}}).filter(f=>f!==null).sort((f,S)=>f.labelIndex-S.labelIndex),[o.data,C,m,x]),D=useMemo(()=>R.length===0?"":R.map((f,S)=>`${S===0?"M":"L"} ${f.x} ${f.y}`).join(" "),[R]),A=te[n]==="none"?void 0:te[n];return jsxs("g",{className:"chart-line-series",role:"list","aria-label":`${o.name} series`,"data-testid":`chart-series-${t}`,children:[jsx("path",{d:D,fill:"none",stroke:a,strokeWidth:je,strokeDasharray:A,strokeLinecap:"round",strokeLinejoin:"round",className:"chart-line","aria-hidden":"true"}),R.map(({x:f,y:S,point:d,pointIndex:c})=>{let g=r?.series===t&&r?.point===c,I=`${o.name}: ${d.label}, ${b(d.value)}`;return jsx(be,{type:"line",x:f,y:S,color:a,seriesIndex:t,pointIndex:c,tabIndex:s(t,c),label:I,isSelected:g,onFocus:i,onBlur:l,onHover:p,onHoverEnd:h,onKeyDown:u},`${d.label}-${c}`)})]})}Oe.displayName="ChartLineSeries";function Fe({type:o,data:t,dimensions:e,scales:a,titleId:n,descId:s,showGrid:r,xAxisLabel:i,yAxisLabel:l,getSeriesColor:p,getTabIndex:h,selectedPoint:u,formatValue:b,onKeyDown:C,onPointFocus:m,onPointBlur:x,onPointHover:R,onPointHoverEnd:D}){let{width:A,height:f,plotArea:S}=e,{allLabels:d,xScale:c,yScale:g,yTicks:I}=a;return jsxs("svg",{role:"graphics-document","aria-roledescription":`${o} chart`,"aria-labelledby":n,"aria-describedby":s,viewBox:`0 0 ${A} ${f}`,className:"h-full w-full",style:{maxHeight:f},"data-testid":"chart-svg",children:[jsx(_e,{yTicks:I,yScale:g,plotX:S.x,plotWidth:S.width,visible:r}),jsx(Ve,{allLabels:d,yTicks:I,xScale:c,yScale:g,plotArea:S,xAxisLabel:i,yAxisLabel:l,formatValue:b}),t.map((y,_)=>{let E=y.color||p(_),k=y.pattern||"solid";return o==="bar"?jsx(ke,{series:y,seriesIndex:_,totalSeries:t.length,dimensions:e,scales:a,color:E,getTabIndex:h,selectedPoint:u,onPointFocus:m,onPointBlur:x,onPointHover:R,onPointHoverEnd:D,onKeyDown:C,formatValue:b},y.name):jsx(Oe,{series:y,seriesIndex:_,scales:a,color:E,pattern:k,getTabIndex:h,selectedPoint:u,onPointFocus:m,onPointBlur:x,onPointHover:R,onPointHoverEnd:D,onKeyDown:C,formatValue:b},y.name)})]})}Fe.displayName="ChartSVG";var Ge=cva(["z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md","bg-[var(--content-foreground)] text-[var(--content-background)]","animate-in fade-in-0","data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:["motion-safe:slide-in-from-bottom-2","data-[exiting]:motion-safe:slide-out-to-bottom-2"],bottom:["motion-safe:slide-in-from-top-2","data-[exiting]:motion-safe:slide-out-to-top-2"],left:["motion-safe:slide-in-from-right-2","data-[exiting]:motion-safe:slide-out-to-right-2"],right:["motion-safe:slide-in-from-left-2","data-[exiting]:motion-safe:slide-out-to-left-2"]}},defaultVariants:{side:"top"}});cva("fill-[var(--content-foreground)]",{variants:{side:{top:"rotate-180",bottom:"rotate-0",left:"rotate-90",right:"-rotate-90"}},defaultVariants:{side:"top"}});var vt=8;function Ke({visible:o,x:t,y:e,seriesName:a,label:n,value:s,chartWidth:r,chartHeight:i,trend:l,trendDirection:p}){let h=useRef(null),[u,b]=useState({left:0,top:0}),[C,m]=useState("top");return useEffect(()=>{if(!o||!h.current)return;let R=h.current.getBoundingClientRect(),D=R.width||120,A=R.height||50,f=t-D/2,S=e-A-vt,d="top";S<0&&(S=e+vt+16,d="bottom"),f<0&&(f=0),f+D>r&&(f=r-D),b({left:f,top:S}),m(d);},[o,t,e,r]),o?jsxs("div",{ref:h,"aria-hidden":"true",className:Ge({side:C}),style:{position:"absolute",left:u.left,top:u.top,pointerEvents:"none"},"data-testid":"chart-tooltip",children:[jsx("div",{className:"font-medium",children:a}),jsxs("div",{className:"opacity-80",children:[n,": ",jsx("span",{className:"font-semibold",children:s})]}),l&&jsxs("div",{className:"text-xs opacity-70 mt-1 flex items-center gap-1",children:[p==="up"?jsx("svg",{"aria-hidden":"true",className:"h-3 w-3 text-green-500",viewBox:"0 0 20 20",fill:"currentColor",children: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"})}):p==="down"?jsx("svg",{"aria-hidden":"true",className:"h-3 w-3 text-red-500",viewBox:"0 0 20 20",fill:"currentColor",children: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,jsx("span",{children:l})]})]}):null}Ke.displayName="ChartTooltip";function $e({data:o,visible:t,type:e,getSeriesColor:a}){return t?jsx("div",{className:Je({visible:t}),role:"list","aria-label":"Chart legend","data-testid":"chart-legend",children:o.map((n,s)=>{let r=n.color||a(s),i=n.pattern||"solid";return jsxs("div",{role:"listitem",className:"flex items-center gap-2",children:[e==="bar"?jsx("div",{className:"h-3 w-3 rounded-sm",style:{backgroundColor:r},"data-testid":`legend-color-${s}`,"aria-hidden":"true"}):jsx("svg",{width:"24",height:"12","aria-hidden":"true","data-testid":`legend-color-${s}`,children:jsx("line",{x1:"0",y1:"6",x2:"24",y2:"6",stroke:r,strokeWidth:"2",strokeDasharray:te[i]==="none"?void 0:te[i]})}),jsx("span",{className:"text-sm text-[var(--content-foreground)]",children:n.name})]},n.name)})}):null}$e.displayName="ChartLegend";function We({announcement:o}){return jsx(VisuallyHidden,{children:jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true","data-testid":"chart-announcer",children:o})})}We.displayName="ChartAnnouncer";function Ue({data:o,title:t,xAxisLabel:e,yAxisLabel:a,formatValue:n,allLabels:s}){let r=o.length===1;return jsx(VisuallyHidden,{children:jsxs("table",{"data-testid":"chart-data-table",children:[jsxs("caption",{children:[t," data table"]}),jsx("thead",{children:jsxs("tr",{children:[jsx("th",{scope:"col",children:e}),r?jsx("th",{scope:"col",children:a}):o.map(i=>jsxs("th",{scope:"col",children:[i.name," (",a,")"]},i.name))]})}),jsx("tbody",{children:s.map(i=>jsxs("tr",{children:[jsx("th",{scope:"row",children:i}),o.map(l=>{let p=l.data.find(h=>h.label===i);return jsx("td",{children:p?n(p.value):"\u2014"},l.name)})]},i))})]})})}Ue.displayName="ChartDataTable";function Ct(o){let{roving:t,onSelect:e,onClear:a,disabled:n=false}=o;return {onKeyDown:useCallback(r=>{if(!n)switch(r.key){case "ArrowRight":r.preventDefault(),t.moveRight();break;case "ArrowLeft":r.preventDefault(),t.moveLeft();break;case "ArrowDown":r.preventDefault(),t.moveDown();break;case "ArrowUp":r.preventDefault(),t.moveUp();break;case "Home":r.preventDefault(),t.moveToStart();break;case "End":r.preventDefault(),t.moveToEnd();break;case "Enter":case " ":r.preventDefault(),e?.();break;case "Escape":r.preventDefault(),a?.();break;}},[t,e,a,n])}}function go({chartId:o}){let t=ct(),{data:e,type:a,title:n,xAxisLabel:s,yAxisLabel:r,showTooltip:i,showGrid:l,showLegend:p,dimensions:h,scales:u,announcement:b,isTooltipVisible:C,tooltipPoint:m,currentTrend:x,currentTrendDirection:R,selectedPoint:D,getTabIndex:A,formatValue:f,getSeriesColor:S,getPointCoordinates:d,setFocus:c,selectPoint:g,clearSelection:I,showTooltipAt:y,hideTooltip:_}=t,E=`${o}-title`,k=`${o}-desc`,V=Ce({rows:e.length,cols:F=>e[F]?.data.length||0,onFocusChange:(F,U)=>{c(F,U);}}),{onKeyDown:G}=Ct({roving:V,onSelect:()=>{g(V.focusedRow,V.focusedCol);},onClear:()=>{I();}}),O=useCallback((F,U)=>{V.setFocus(F,U),y(F,U);},[V,y]),re=useCallback(()=>{},[]),De=useCallback((F,U)=>{y(F,U);},[y]),B=useCallback(()=>{_();},[_]),ae=useMemo(()=>m?d(m.series,m.point)||{x:0,y:0}:{x:0,y:0},[m,d]),z=useMemo(()=>m?e[m.series]:null,[m,e]),ee=useMemo(()=>m?z?.data[m.point]:null,[m,z]),ge=useMemo(()=>p??e.length>1,[p,e.length]);return jsxs(Fragment,{children:[jsx(We,{announcement:b}),jsxs("div",{className:"relative",children:[jsx("div",{className:"relative z-0",children:jsx(Fe,{type:a,data:e,dimensions:h,scales:u,titleId:E,descId:k,showGrid:l,xAxisLabel:s,yAxisLabel:r,getSeriesColor:S,getTabIndex:A,selectedPoint:D,formatValue:f,onKeyDown:G,onPointFocus:O,onPointBlur:re,onPointHover:De,onPointHoverEnd:B})}),i&&ee&&z&&jsx(Ke,{visible:C,x:ae.x,y:ae.y,seriesName:z.name,label:ee.label,value:f(ee.value),chartWidth:h.width,chartHeight:h.height,trend:x,trendDirection:R})]}),jsx($e,{data:e,visible:ge,type:a,getSeriesColor:S}),jsx(Ue,{data:e,title:n,xAxisLabel:s,yAxisLabel:r,formatValue:f,allLabels:u.allLabels})]})}var St=forwardRef(({data:o,type:t,title:e,description:a,xAxisLabel:n,yAxisLabel:s,variant:r="default",className:i,showTooltip:l=true,showGrid:p=true,showLegend:h,announceTrends:u=false,trendUpFormat:b="up {percent}% from previous",trendDownFormat:C="down {percent}% from previous",startAtZero:m=true,reducedMotion:x,onPointFocus:R,onPointSelect:D,id:A,"aria-label":f,"aria-labelledby":S,"aria-describedby":d,"data-testid":c,...g},I)=>{let y=useRef(null),_=useId(),E=A||`chart-${_}`,k=`${E}-title`,V=`${E}-desc`,G=h??o.length>1;return jsxs("figure",{ref:O=>{typeof I=="function"?I(O):I&&(I.current=O),y.current=O;},id:E,role:"figure","aria-label":f,"aria-labelledby":S||k,"aria-describedby":d||V,"data-testid":c,className:se(we({variant:r}),"p-4",i),...g,children:[jsxs("figcaption",{className:"sr-only",children:[jsx("span",{id:k,children:e}),jsx("span",{id:V,children:a})]}),jsx(ut,{containerRef:y,data:o,type:t,title:e,description:a,xAxisLabel:n,yAxisLabel:s,showTooltip:l,showGrid:p,showLegend:G,announceTrends:u,trendUpFormat:b,trendDownFormat:C,startAtZero:m,reducedMotion:x,onPointFocus:R,onPointSelect:D,children:jsx(go,{chartId:E})})]})});St.displayName="Chart";var Tt=memo(St);Tt.displayName="Chart";var Pt=z.object({className:z.string().optional(),children:z.any().optional(),id:z.string().optional(),"aria-label":z.string().optional(),"aria-labelledby":z.string().optional(),"aria-describedby":z.string().optional(),"aria-live":z.enum(["off","polite","assertive"]).optional(),"aria-hidden":z.boolean().optional(),"data-testid":z.string().optional()});var It=z.object({label:z.string().min(1,"Label is required"),value:z.number(),description:z.string().optional()}),Rt=z.enum(["solid","dashed","dotted"]),Dt=z.object({name:z.string().min(1,"Series name is required"),color:z.string().optional(),pattern:Rt.optional().default("solid"),data:z.array(It).min(1,"At least one data point required")}),wt=z.enum(["bar","line"]),Et=z.enum(["default","muted"]),vo=Pt.extend({data:z.array(Dt).min(1,"At least one data series required").max(5,"Maximum 5 series allowed"),type:wt,title:z.string().min(1,"Title is required"),description:z.string().min(1,"Description is required"),xAxisLabel:z.string().min(1,"X-axis label is required"),yAxisLabel:z.string().min(1,"Y-axis label is required"),variant:Et.optional().default("default"),showTooltip:z.boolean().optional().default(true),showGrid:z.boolean().optional().default(true),showLegend:z.boolean().optional(),announceTrends:z.boolean().optional().default(false),trendUpFormat:z.string().optional().default("up {percent}% from previous"),trendDownFormat:z.string().optional().default("down {percent}% from previous"),startAtZero:z.boolean().optional().default(true),reducedMotion:z.boolean().optional(),onPointFocus:z.unknown().optional(),onPointSelect:z.unknown().optional()});export{Tt as Chart,vo as ChartPropsSchema,wt as ChartTypeSchema,Et as ChartVariantSchema,It as DataPointSchema,Dt as DataSeriesSchema,Rt as LinePatternSchema,we as chartVariants,Ee as dataPointVariants};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map