@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-R7YZ6FKP.mjs → chunk-XXU5VQV5.mjs}

@@ -1,54 +1,69 @@
-import {
-  useResponsiveChartSize
-} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-JZZPLKTW.mjs";
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
 import {
   ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
+} from "./chunk-ST4NN6XV.mjs";
 import {
   ChartTooltip
-} from "./chunk-YORCCCQX.mjs";
+} from "./chunk-IPI45RUK.mjs";
 import {
   ChartAxis
-} from "./chunk-RQSQXQN6.mjs";
+} from "./chunk-XZFHPHV5.mjs";
 import {
   ChartCanvas
-} from "./chunk-CUAXRBKO.mjs";
+} from "./chunk-OP77MPGN.mjs";
 import {
   ChartGrid
-} from "./chunk-677VSTPW.mjs";
+} from "./chunk-2PC625DX.mjs";
 import {
   ChartLegend
-} from "./chunk-F2ITBDUS.mjs";
+} from "./chunk-A4JRK5SM.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/AreaChart.tsx
 import { useId, useMemo, useState, useCallback } from "react";
 import {
   classNames,
-  createAreaPath,
   createLinearScale,
-  createLinePath,
   createPointScale,
-  getChartElementOpacity,
   getStableChartGradientPrefix,
   getNumberExtent,
   linePointTransitionClasses,
   stackSeriesData,
   resolveChartPalette,
   buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
   buildChartSeriesKeys,
   resolveMultiSeriesTooltipContent,
   resolveSeriesData,
-  defaultSeriesXYTooltipFormatter
+  defaultSeriesXYTooltipFormatter,
+  defaultChartSeriesName,
+  layoutAreaSeries,
+  getCartesianChartShellClasses,
+  findNearestSeriesPoint,
+  flattenChartPoints,
+  chartPointTabIndex,
+  nextChartPointRef,
+  isChartNavigationKey,
+  isNumericChartDomain,
+  CHART_SURFACE_FILL,
+  AREA_DRAW_CLASS,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_CARTESIAN_PADDING = { top: 24, right: 24, bottom: 52, left: 52 };
 var AreaChart = ({
   width = 320,
   height = 200,
-  padding = DEFAULT_CARTESIAN_PADDING,
+  padding = DEFAULT_CHART_PADDING,
   responsive = false,
   data,
   series,
@@ -89,7 +104,7 @@ var AreaChart = ({
   legendMarkerSize = 10,
   legendGap = 8,
   showTooltip = true,
-  gradient = true,
+  gradient = false,
   animated = false,
   pointHollow = false,
   strokeGradient = false,
@@ -106,6 +121,8 @@ var AreaChart = ({
   onPointClick,
   onPointHover
 }) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
   const [hoveredPointInfo, setHoveredPointInfo] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
   const gradientId = useId();
@@ -130,13 +147,13 @@ var AreaChart = ({
   );
   const {
     activeIndex,
+    resolvedSelectedIndex,
     handleMouseEnter: handleSeriesHoverEnter,
     handleMouseLeave: handleSeriesHoverLeave,
     handleClick: handleSeriesSelect,
     handleLegendClick,
     handleLegendHover,
-    handleLegendLeave,
-    wrapperClasses
+    handleLegendLeave
   } = useChartInteraction({
     hoverable,
     showTooltip,
@@ -151,23 +168,24 @@ var AreaChart = ({
       onHoveredIndexChange?.(index);
       onSeriesHover?.(index, index !== null ? resolvedSeries[index] : null);
     },
-    onSelectedIndexChange: (index) => {
-      onSelectedIndexChange?.(index);
-      if (index !== null) {
-        onSeriesClick?.(index, resolvedSeries[index]);
-      }
+    onSelectedIndexChange,
+    onClick: (index, series2) => {
+      if (series2) onSeriesClick?.(index, series2);
     }
   });
+  const stackedData = useMemo(
+    () => stacked ? stackSeriesData(resolvedSeries.map((s) => s.data)) : null,
+    [stacked, resolvedSeries]
+  );
   const allData = useMemo(() => resolvedSeries.flatMap((s) => s.data), [resolvedSeries]);
   const xValues = useMemo(() => allData.map((d) => d.x), [allData]);
   const yValues = useMemo(() => {
-    if (stacked) {
-      const stackedData = stackSeriesData(resolvedSeries.map((s) => s.data));
-      return stackedData.flatMap((s) => s.map((d) => d.y1));
+    if (stackedData) {
+      return stackedData.flatMap((series2) => series2.flatMap((item) => [item.y0, item.y1]));
     }
     return allData.map((d) => d.y);
-  }, [stacked, resolvedSeries, allData]);
-  const isXNumeric = useMemo(() => xValues.every((v) => typeof v === "number"), [xValues]);
+  }, [stackedData, allData]);
+  const isXNumeric = useMemo(() => isNumericChartDomain(xValues), [xValues]);
   const resolvedXScale = useMemo(() => {
     if (xScaleProp) return xScaleProp;
     if (isXNumeric) {
@@ -180,10 +198,9 @@ var AreaChart = ({
   }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
   const resolvedYScale = useMemo(() => {
     if (yScaleProp) return yScaleProp;
-    const extent = getNumberExtent(yValues, { includeZero });
+    const extent = getNumberExtent(yValues, { includeZero: includeZero || stacked });
     return createLinearScale(extent, [innerRect.height, 0]);
-  }, [yScaleProp, yValues, includeZero, innerRect.height]);
-  const baseline = useMemo(() => resolvedYScale.map(0), [resolvedYScale]);
+  }, [yScaleProp, yValues, includeZero, stacked, innerRect.height]);
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
@@ -192,65 +209,27 @@ var AreaChart = ({
     [resolvedSeries]
   );
   const seriesData = useMemo(() => {
-    const stackedData = stacked ? stackSeriesData(resolvedSeries.map((s) => s.data)) : null;
-    return resolvedSeries.map((s, seriesIndex) => {
-      const seriesKey = seriesKeys[seriesIndex];
-      const color = s.color ?? palette[seriesIndex % palette.length];
-      const seriesFillColor = s.fillColor ?? color;
-      const seriesFillOpacity = s.fillOpacity ?? fillOpacity;
-      let points;
-      let areaPath;
-      let linePath;
-      if (stacked && stackedData) {
-        const stackedSeries = stackedData[seriesIndex];
-        points = stackedSeries.map((sd, pointIndex) => ({
-          x: resolvedXScale.map(sd.original.x),
-          y: resolvedYScale.map(sd.y1),
-          datum: sd.original,
-          pointIndex
-        }));
-        const topPoints = points.map((p) => ({ x: p.x, y: p.y }));
-        const bottomPoints = stackedSeries.map((sd) => ({
-          x: resolvedXScale.map(sd.original.x),
-          y: resolvedYScale.map(sd.y0)
-        })).reverse();
-        const topPath = createLinePath(topPoints, curve);
-        const bottomPath = createLinePath(bottomPoints, curve).replace("M", "L");
-        areaPath = `${topPath} ${bottomPath} Z`;
-        linePath = topPath;
-      } else {
-        points = s.data.map((datum, pointIndex) => ({
-          x: resolvedXScale.map(datum.x),
-          y: resolvedYScale.map(datum.y),
-          datum,
-          pointIndex
-        }));
-        areaPath = createAreaPath(points, baseline, curve);
-        linePath = createLinePath(points, curve);
-      }
-      const opacity = getChartElementOpacity(seriesIndex, activeIndex, {
-        activeOpacity,
-        inactiveOpacity
-      });
-      return {
-        series: s,
-        seriesIndex,
-        seriesKey,
-        color,
-        fillColor: seriesFillColor,
-        fillOpacity: seriesFillOpacity,
-        areaPath,
-        linePath,
-        points,
-        opacity,
-        strokeWidth: s.strokeWidth ?? strokeWidth,
-        strokeDasharray: s.strokeDasharray,
-        showPoints: s.showPoints ?? showPoints,
-        pointSize: s.pointSize ?? pointSize,
-        pointColor: s.pointColor ?? color,
-        pointHollow: s.pointHollow ?? pointHollow
-      };
+    const laidOut = layoutAreaSeries(resolvedSeries, resolvedXScale, resolvedYScale, {
+      curve,
+      palette,
+      activeIndex,
+      showArea: true,
+      areaOpacity: fillOpacity,
+      strokeWidth,
+      showPoints,
+      pointSize,
+      pointColor,
+      pointHollow,
+      activeOpacity,
+      inactiveOpacity,
+      stacked,
+      fillOpacity,
+      stackedData: stackedData ?? void 0
     });
+    return laidOut.map((item, seriesIndex) => ({
+      ...item,
+      seriesKey: seriesKeys[seriesIndex]
+    }));
   }, [
     resolvedSeries,
     seriesKeys,
@@ -259,7 +238,7 @@ var AreaChart = ({
     resolvedYScale,
     curve,
     stacked,
-    baseline,
+    stackedData,
     activeIndex,
     activeOpacity,
     inactiveOpacity,
@@ -267,6 +246,7 @@ var AreaChart = ({
     strokeWidth,
     showPoints,
     pointSize,
+    pointColor,
     pointHollow
   ]);
   const legendItems = useMemo(
@@ -274,19 +254,27 @@ var AreaChart = ({
       data: resolvedSeries,
       palette,
       activeIndex,
-      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+      selectedIndex: resolvedSelectedIndex,
+      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? defaultChartSeriesName(i, labels.seriesName),
       getColor: (s, i) => s.color ?? palette[i % palette.length]
     }),
-    [resolvedSeries, legendFormatter, palette, activeIndex]
+    [
+      resolvedSeries,
+      legendFormatter,
+      palette,
+      activeIndex,
+      resolvedSelectedIndex,
+      labels.seriesName
+    ]
   );
   const tooltipContent = useMemo(
     () => resolveMultiSeriesTooltipContent(
       hoveredPointInfo,
       resolvedSeries,
       tooltipFormatter,
-      defaultSeriesXYTooltipFormatter
+      (datum, seriesIndex, pointIndex, s) => defaultSeriesXYTooltipFormatter(datum, seriesIndex, pointIndex, s, labels.seriesName)
     ),
-    [hoveredPointInfo, resolvedSeries, tooltipFormatter]
+    [hoveredPointInfo, resolvedSeries, tooltipFormatter, labels.seriesName]
   );
   const handlePointMouseEnter = useCallback(
     (seriesIndex, pointIndex, event) => {
@@ -309,13 +297,13 @@ var AreaChart = ({
   }, [hoverable, onPointHover]);
   const showPointTooltipFromElement = useCallback(
     (el, seriesIndex, pointIndex) => {
-      if (!hoverable) return;
+      if (!(showTooltip || hoverable)) return;
       const rect = el.getBoundingClientRect();
       setHoveredPointInfo({ seriesIndex, pointIndex });
       setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
       onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
     },
-    [hoverable, onPointHover, resolvedSeries]
+    [hoverable, showTooltip, onPointHover, resolvedSeries]
   );
   const handlePointClick = useCallback(
     (seriesIndex, pointIndex) => {
@@ -324,17 +312,9 @@ var AreaChart = ({
     },
     [onPointClick, resolvedSeries, handleSeriesSelect]
   );
-  const handleKeyDown = useCallback(
-    (event, seriesIndex) => {
-      if (!selectable) return;
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      handleSeriesSelect(seriesIndex);
-    },
-    [selectable, handleSeriesSelect]
-  );
-  const pointClickable = selectable || !!onPointClick;
+  const pointClickable = Boolean(onPointClick);
   const trackPointHover = showTooltip || hoverable;
+  const flatPoints = useMemo(() => flattenChartPoints(seriesData), [seriesData]);
   const reversedSeriesData = useMemo(() => [...seriesData].reverse(), [seriesData]);
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
@@ -345,22 +325,9 @@ var AreaChart = ({
       responsive,
       title,
       desc,
-      className: classNames(className),
       onResolvedSizeChange,
       children: [
-        (gradient || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
-          animated && /* @__PURE__ */ jsx("style", { children: `
-              .tiger-area-animated {
-                animation: tiger-area-draw var(--tiger-motion-duration-slow,1.2s) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)) forwards;
-              }
-              @keyframes tiger-area-draw {
-                from { stroke-dashoffset: 1; }
-                to { stroke-dashoffset: 0; }
-              }
-              @media (prefers-reduced-motion: reduce) {
-                .tiger-area-animated { animation-duration: 0ms; }
-              }
-            ` }),
+        (gradient || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
           gradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxs(
             "linearGradient",
             {
@@ -451,98 +418,149 @@ var AreaChart = ({
             label: yAxisLabel
           }
         ),
-        reversedSeriesData.map((sd) => /* @__PURE__ */ jsxs(
-          ChartSeries,
+        trackPointHover ? /* @__PURE__ */ jsx(
+          "rect",
           {
-            data: sd.series.data,
-            name: sd.series.name,
-            type: "area",
-            opacity: sd.opacity,
-            "data-series-key": sd.seriesKey,
-            className: classNames(
-              sd.series.className,
-              (hoverable || selectable) && "cursor-pointer",
-              "outline-none"
-            ),
-            onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
-            onMouseLeave: handleSeriesHoverLeave,
-            onClick: () => handleSeriesSelect(sd.seriesIndex),
-            tabIndex: selectable ? 0 : void 0,
-            onKeyDown: (e) => handleKeyDown(e, sd.seriesIndex),
-            children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: sd.areaPath,
-                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesKey})` : sd.fillColor,
-                  fillOpacity: gradient ? 1 : sd.fillOpacity,
-                  stroke: "none",
-                  className: "transition-opacity duration-300",
-                  "data-area-series": sd.seriesIndex,
-                  "data-series-key": sd.seriesKey
-                }
+            width: innerRect.width,
+            height: innerRect.height,
+            fill: "transparent",
+            "data-plot-hit": "",
+            onMouseMove: (event) => {
+              const target = event.currentTarget;
+              const rect = target.getBoundingClientRect();
+              const width2 = rect.width || innerRect.width;
+              const height2 = rect.height || innerRect.height;
+              if (width2 === 0 || height2 === 0) return;
+              const x = (event.clientX - rect.left) / width2 * innerRect.width;
+              const y = (event.clientY - rect.top) / height2 * innerRect.height;
+              const nearest = findNearestSeriesPoint(
+                seriesData.map((sd) => sd.points),
+                x,
+                y
+              );
+              if (!nearest) return;
+              setHoveredPointInfo(nearest);
+              setTooltipPosition({ x: event.clientX, y: event.clientY });
+            },
+            onMouseLeave: handlePointMouseLeave
+          }
+        ) : null,
+        reversedSeriesData.map((sd) => {
+          const canAnimateStroke = animated && !sd.strokeDasharray;
+          return /* @__PURE__ */ jsxs(
+            ChartSeries,
+            {
+              data: sd.series.data,
+              name: sd.series.name,
+              type: "area",
+              opacity: sd.opacity,
+              "data-series-key": sd.seriesKey,
+              className: classNames(
+                sd.series.className,
+                (hoverable || selectable) && "cursor-pointer",
+                "outline-none"
               ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: sd.linePath,
-                  fill: "none",
-                  stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
-                  strokeWidth: sd.strokeWidth,
-                  strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
-                  strokeDashoffset: animated ? "1" : void 0,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  pathLength: animated ? 1 : void 0,
-                  className: classNames(
-                    "transition-opacity [transition-duration:var(--tiger-motion-duration-base,200ms)]",
-                    animated && "tiger-area-animated"
-                  )
-                }
-              )
-            ]
-          },
-          sd.seriesKey
-        )),
+              onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
+              onMouseLeave: handleSeriesHoverLeave,
+              onClick: () => handleSeriesSelect(sd.seriesIndex),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: sd.areaPath,
+                    fill: gradient ? `url(#${gradientPrefix}-${sd.seriesKey})` : sd.fillColor,
+                    fillOpacity: gradient ? 1 : sd.fillOpacity,
+                    stroke: "none",
+                    className: "transition-opacity motion-reduce:transition-none [transition-duration:var(--tiger-motion-duration-base,200ms)]",
+                    "data-area-series": sd.seriesIndex,
+                    "data-series-key": sd.seriesKey
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: sd.linePath,
+                    fill: "none",
+                    stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
+                    strokeWidth: sd.strokeWidth,
+                    strokeDasharray: sd.strokeDasharray,
+                    strokeDashoffset: canAnimateStroke ? "1" : void 0,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    pathLength: canAnimateStroke ? 1 : void 0,
+                    className: classNames(
+                      canAnimateStroke ? AREA_DRAW_CLASS : "transition-opacity motion-reduce:transition-none [transition-duration:var(--tiger-motion-duration-base,200ms)]"
+                    )
+                  }
+                )
+              ]
+            },
+            sd.seriesKey
+          );
+        }),
         seriesData.map(
           (sd) => sd.showPoints && /* @__PURE__ */ jsx("g", { opacity: sd.opacity, "data-series-key": sd.seriesKey, children: sd.points.map((point) => {
             const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
             const hoverSize = sd.pointSize + 2;
-            const datum = resolvedSeries[sd.seriesIndex]?.data?.[point.pointIndex];
-            const pointInteractive = hoverable || pointClickable;
+            const datum = point.datum;
+            const pointInteractive = hoverable || selectable || pointClickable;
             return /* @__PURE__ */ jsx(
               "circle",
               {
                 cx: point.x,
                 cy: point.y,
                 r: isHovered ? hoverSize : sd.pointSize,
-                fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
+                fill: sd.pointHollow ? CHART_SURFACE_FILL : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                 stroke: sd.pointHollow ? sd.pointColor : "none",
                 strokeWidth: sd.pointHollow ? 2 : 0,
                 className: classNames(
-                  linePointTransitionClasses,
+                  animated ? linePointTransitionClasses : void 0,
                   pointInteractive && "cursor-pointer"
                 ),
                 style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
-                role: pointInteractive ? "button" : "img",
-                "aria-label": datum?.label ?? String(datum?.y ?? ""),
-                tabIndex: pointInteractive ? 0 : void 0,
+                role: pointInteractive ? "button" : void 0,
+                "aria-hidden": pointInteractive ? void 0 : true,
+                "aria-label": pointInteractive ? datum?.label ?? formatChartTemplate(labels.pointAriaLabel, {
+                  index: point.pointIndex + 1,
+                  x: String(datum?.x ?? ""),
+                  y: String(datum?.y ?? "")
+                }) : void 0,
+                tabIndex: pointInteractive ? chartPointTabIndex(
+                  sd.seriesIndex,
+                  point.pointIndex,
+                  hoveredPointInfo,
+                  flatPoints
+                ) : void 0,
                 "data-point-index": point.pointIndex,
                 "data-series-key": sd.seriesKey,
                 onMouseEnter: trackPointHover ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
                 onMouseMove: trackPointHover ? handlePointMouseMove : void 0,
                 onMouseLeave: trackPointHover ? handlePointMouseLeave : void 0,
-                onClick: pointClickable ? (e) => {
+                onClick: (e) => {
                   e.stopPropagation();
                   handlePointClick(sd.seriesIndex, point.pointIndex);
-                } : void 0,
-                onFocus: hoverable ? (e) => showPointTooltipFromElement(
+                },
+                onFocus: trackPointHover ? (e) => showPointTooltipFromElement(
                   e.currentTarget,
                   sd.seriesIndex,
                   point.pointIndex
                 ) : void 0,
-                onBlur: hoverable ? handlePointMouseLeave : void 0,
+                onBlur: trackPointHover ? handlePointMouseLeave : void 0,
                 onKeyDown: pointInteractive ? (e) => {
+                  if (isChartNavigationKey(e.key)) {
+                    e.preventDefault();
+                    const next = nextChartPointRef(
+                      { seriesIndex: sd.seriesIndex, pointIndex: point.pointIndex },
+                      e.key,
+                      flatPoints
+                    );
+                    if (!next) return;
+                    const node = e.currentTarget.ownerSVGElement?.querySelector(
+                      `[data-series-key="${seriesKeys[next.seriesIndex]}"][data-point-index="${next.pointIndex}"]`
+                    );
+                    if (node instanceof SVGElement) node.focus();
+                    return;
+                  }
                   if (e.key === "Enter" || e.key === " ") {
                     e.preventDefault();
                     e.stopPropagation();
@@ -555,7 +573,7 @@ var AreaChart = ({
                         point.pointIndex
                       );
                     }
-                  } else if (e.key === "Escape" && hoverable) {
+                  } else if (e.key === "Escape" && trackPointHover) {
                     handlePointMouseLeave();
                   }
                 } : void 0
@@ -576,29 +594,35 @@ var AreaChart = ({
       y: tooltipPosition.y
     }
   );
-  if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: classNames("relative", responsive ? "block w-full min-w-0" : "inline-block"), children: [
-      chart,
-      tooltip
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: classNames(wrapperClasses, responsive && "w-full min-w-0"), children: [
-    chart,
-    /* @__PURE__ */ jsx(
-      ChartLegend,
-      {
-        items: legendItems,
-        position: legendPosition,
-        markerSize: legendMarkerSize,
-        gap: legendGap,
-        interactive: hoverable || selectable,
-        onItemClick: handleLegendClick,
-        onItemHover: handleLegendHover,
-        onItemLeave: handleLegendLeave
-      }
-    ),
-    tooltip
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend,
+        legendPosition,
+        responsive,
+        className
+      }),
+      children: [
+        chart,
+        showLegend ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: legendItems,
+            orientation: chartLegendOrientationFromPosition(legendPosition),
+            markerSize: legendMarkerSize,
+            gap: legendGap,
+            interactive: hoverable || selectable,
+            ariaLabel: labels.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }
+        ) : null,
+        tooltip
+      ]
+    }
+  );
 };
 var AreaChart_default = AreaChart;