@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Chart/index.mjs

@@ -1,6 +1,1834 @@
-export { Chart, ChartPropsSchema, ChartTypeSchema, ChartVariantSchema, DataPointSchema, DataSeriesSchema, LinePatternSchema, chartVariants, dataPointVariants } from '../../chunk-D6CBOECS.mjs';
-import '../../chunk-DZ556D2F.mjs';
-import '../../chunk-E2KQFV3O.mjs';
-import '../../chunk-5SVLJN2C.mjs';
+"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
 //# sourceMappingURL=index.mjs.map