@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-DCKBVRLI.js

@@ -0,0 +1,547 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
+
+
+var _chunkWV5XHYW6js = require('./chunk-WV5XHYW6.js');
+
+
+var _chunkAX5XRD2Qjs = require('./chunk-AX5XRD2Q.js');
+
+
+var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
+
+
+var _chunkE5GD3H7Ljs = require('./chunk-E5GD3H7L.js');
+
+
+var _chunkUKLVOR4Ejs = require('./chunk-UKLVOR4E.js');
+
+
+var _chunk3QFHVAZTjs = require('./chunk-3QFHVAZT.js');
+
+// src/components/AreaChart.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var AreaChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  series,
+  xScale: xScaleProp,
+  yScale: yScaleProp,
+  areaColor: _areaColor = "var(--tiger-primary,#2563eb)",
+  strokeWidth = 2,
+  fillOpacity = 0.2,
+  curve = "linear",
+  showPoints = false,
+  pointSize = 4,
+  pointColor: _pointColor,
+  stacked = false,
+  showGrid = true,
+  showAxis = true,
+  showXAxis = true,
+  showYAxis = true,
+  includeZero = true,
+  xAxisLabel,
+  yAxisLabel,
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  xTickFormat,
+  yTickFormat,
+  gridLineStyle = "solid",
+  gridStrokeWidth = 1,
+  colors,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  gradient = true,
+  animated = false,
+  pointHollow = false,
+  strokeGradient = false,
+  pointGradient = false,
+  tooltipFormatter,
+  legendFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSeriesClick,
+  onSeriesHover,
+  onPointClick,
+  onPointHover
+}) => {
+  const [hoveredPointInfo, setHoveredPointInfo] = _react.useState.call(void 0, null);
+  const [tooltipPosition, setTooltipPosition] = _react.useState.call(void 0, { x: 0, y: 0 });
+  const gradientId = _react.useId.call(void 0, );
+  const gradientPrefix = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getStableChartGradientPrefix.call(void 0, "area", gradientId),
+    [gradientId]
+  );
+  const innerRect = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getChartInnerRect.call(void 0, width, height, padding),
+    [width, height, padding]
+  );
+  const resolvedSeries = _react.useMemo.call(void 0, 
+    () => _tigercatcore.resolveSeriesData.call(void 0, series, data),
+    [series, data]
+  );
+  const {
+    activeIndex,
+    handleMouseEnter: handleSeriesHoverEnter,
+    handleMouseLeave: handleSeriesHoverLeave,
+    handleClick: handleSeriesSelect,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = _chunkXTV5JLLCjs.useChartInteraction.call(void 0, {
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => resolvedSeries[index],
+    onHoveredIndexChange: (index) => {
+      _optionalChain([onHoveredIndexChange, 'optionalCall', _ => _(index)]);
+      _optionalChain([onSeriesHover, 'optionalCall', _2 => _2(index, index !== null ? resolvedSeries[index] : null)]);
+    },
+    onSelectedIndexChange: (index) => {
+      _optionalChain([onSelectedIndexChange, 'optionalCall', _3 => _3(index)]);
+      if (index !== null) {
+        _optionalChain([onSeriesClick, 'optionalCall', _4 => _4(index, resolvedSeries[index])]);
+      }
+    }
+  });
+  const allData = _react.useMemo.call(void 0, () => resolvedSeries.flatMap((s) => s.data), [resolvedSeries]);
+  const xValues = _react.useMemo.call(void 0, () => allData.map((d) => d.x), [allData]);
+  const yValues = _react.useMemo.call(void 0, () => {
+    if (stacked) {
+      const stackedData = _tigercatcore.stackSeriesData.call(void 0, resolvedSeries.map((s) => s.data));
+      return stackedData.flatMap((s) => s.map((d) => d.y1));
+    }
+    return allData.map((d) => d.y);
+  }, [stacked, resolvedSeries, allData]);
+  const isXNumeric = _react.useMemo.call(void 0, () => xValues.every((v) => typeof v === "number"), [xValues]);
+  const resolvedXScale = _react.useMemo.call(void 0, () => {
+    if (xScaleProp) return xScaleProp;
+    if (isXNumeric) {
+      const extent = _tigercatcore.getNumberExtent.call(void 0, xValues, { includeZero: false });
+      return _tigercatcore.createLinearScale.call(void 0, extent, [0, innerRect.width]);
+    } else {
+      const categories = [...new Set(xValues.map(String))];
+      return _tigercatcore.createPointScale.call(void 0, categories, [0, innerRect.width], { padding: 0 });
+    }
+  }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
+  const resolvedYScale = _react.useMemo.call(void 0, () => {
+    if (yScaleProp) return yScaleProp;
+    const extent = _tigercatcore.getNumberExtent.call(void 0, yValues, { includeZero });
+    return _tigercatcore.createLinearScale.call(void 0, extent, [innerRect.height, 0]);
+  }, [yScaleProp, yValues, includeZero, innerRect.height]);
+  const baseline = _react.useMemo.call(void 0, () => resolvedYScale.map(0), [resolvedYScale]);
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  const palette = _react.useMemo.call(void 0, () => _tigercatcore.resolveChartPalette.call(void 0, colors), [colors]);
+  const seriesKeys = _react.useMemo.call(void 0, 
+    () => _tigercatcore.buildChartSeriesKeys.call(void 0, resolvedSeries, { prefix: "area-" }),
+    [resolvedSeries]
+  );
+  const seriesData = _react.useMemo.call(void 0, () => {
+    const stackedData = stacked ? _tigercatcore.stackSeriesData.call(void 0, resolvedSeries.map((s) => s.data)) : null;
+    return resolvedSeries.map((s, seriesIndex) => {
+      const seriesKey = seriesKeys[seriesIndex];
+      const color = _nullishCoalesce(s.color, () => ( palette[seriesIndex % palette.length]));
+      const seriesFillColor = _nullishCoalesce(s.fillColor, () => ( color));
+      const seriesFillOpacity = _nullishCoalesce(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 = _tigercatcore.createLinePath.call(void 0, topPoints, curve);
+        const bottomPath = _tigercatcore.createLinePath.call(void 0, 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 = _tigercatcore.createAreaPath.call(void 0, points, baseline, curve);
+        linePath = _tigercatcore.createLinePath.call(void 0, points, curve);
+      }
+      const opacity = _tigercatcore.getChartElementOpacity.call(void 0, seriesIndex, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+      return {
+        series: s,
+        seriesIndex,
+        seriesKey,
+        color,
+        fillColor: seriesFillColor,
+        fillOpacity: seriesFillOpacity,
+        areaPath,
+        linePath,
+        points,
+        opacity,
+        strokeWidth: _nullishCoalesce(s.strokeWidth, () => ( strokeWidth)),
+        strokeDasharray: s.strokeDasharray,
+        showPoints: _nullishCoalesce(s.showPoints, () => ( showPoints)),
+        pointSize: _nullishCoalesce(s.pointSize, () => ( pointSize)),
+        pointColor: _nullishCoalesce(s.pointColor, () => ( color)),
+        pointHollow: _nullishCoalesce(s.pointHollow, () => ( pointHollow))
+      };
+    });
+  }, [
+    resolvedSeries,
+    seriesKeys,
+    palette,
+    resolvedXScale,
+    resolvedYScale,
+    curve,
+    stacked,
+    baseline,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity,
+    fillOpacity,
+    strokeWidth,
+    showPoints,
+    pointSize,
+    pointHollow
+  ]);
+  const legendItems = _react.useMemo.call(void 0, 
+    () => _tigercatcore.buildChartLegendItems.call(void 0, {
+      data: resolvedSeries,
+      palette,
+      activeIndex,
+      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : _nullishCoalesce(s.name, () => ( `Series ${i + 1}`)),
+      getColor: (s, i) => _nullishCoalesce(s.color, () => ( palette[i % palette.length]))
+    }),
+    [resolvedSeries, legendFormatter, palette, activeIndex]
+  );
+  const tooltipContent = _react.useMemo.call(void 0, 
+    () => _tigercatcore.resolveMultiSeriesTooltipContent.call(void 0, 
+      hoveredPointInfo,
+      resolvedSeries,
+      tooltipFormatter,
+      _tigercatcore.defaultSeriesXYTooltipFormatter
+    ),
+    [hoveredPointInfo, resolvedSeries, tooltipFormatter]
+  );
+  const handlePointMouseEnter = _react.useCallback.call(void 0, 
+    (seriesIndex, pointIndex, event) => {
+      setHoveredPointInfo({ seriesIndex, pointIndex });
+      setTooltipPosition({ x: event.clientX, y: event.clientY });
+      _optionalChain([onPointHover, 'optionalCall', _5 => _5(seriesIndex, pointIndex, _optionalChain([resolvedSeries, 'access', _6 => _6[seriesIndex], 'optionalAccess', _7 => _7.data, 'access', _8 => _8[pointIndex]]))]);
+    },
+    [onPointHover, resolvedSeries]
+  );
+  const handlePointMouseMove = _react.useCallback.call(void 0, (event) => {
+    setTooltipPosition({ x: event.clientX, y: event.clientY });
+  }, []);
+  const handlePointMouseLeave = _react.useCallback.call(void 0, () => {
+    setHoveredPointInfo(null);
+    _optionalChain([onPointHover, 'optionalCall', _9 => _9(null, null, null)]);
+  }, [onPointHover]);
+  const handlePointClick = _react.useCallback.call(void 0, 
+    (seriesIndex, pointIndex) => {
+      _optionalChain([onPointClick, 'optionalCall', _10 => _10(seriesIndex, pointIndex, _optionalChain([resolvedSeries, 'access', _11 => _11[seriesIndex], 'optionalAccess', _12 => _12.data, 'access', _13 => _13[pointIndex]]))]);
+      handleSeriesSelect(seriesIndex);
+    },
+    [onPointClick, resolvedSeries, handleSeriesSelect]
+  );
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (event, seriesIndex) => {
+      if (!selectable) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      handleSeriesSelect(seriesIndex);
+    },
+    [selectable, handleSeriesSelect]
+  );
+  const reversedSeriesData = _react.useMemo.call(void 0, () => [...seriesData].reverse(), [seriesData]);
+  const chart = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkUKLVOR4Ejs.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: _tigercatcore.classNames.call(void 0, className),
+      children: [
+        (gradient || animated || strokeGradient || pointGradient) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "defs", { children: [
+          animated && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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 && reversedSeriesData.map((sd) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-${sd.seriesKey}`,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: sd.fillColor, stopOpacity: sd.fillOpacity }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: sd.fillColor, stopOpacity: 0.02 })
+              ]
+            },
+            `area-grad-${sd.seriesKey}`
+          )),
+          pointGradient && reversedSeriesData.map((sd) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "radialGradient",
+            {
+              id: `${gradientPrefix}-point-${sd.seriesKey}`,
+              cx: "0.5",
+              cy: "0.5",
+              r: "0.5",
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 30%)` }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "70%", stopColor: sd.color }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "stop",
+                  {
+                    offset: "100%",
+                    stopColor: `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                  }
+                )
+              ]
+            },
+            `point-grad-${sd.seriesKey}`
+          )),
+          strokeGradient && reversedSeriesData.map((sd) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+              x1: "0",
+              y1: "0",
+              x2: "1",
+              y2: "0",
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 12%)` }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "50%", stopColor: sd.color }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: `color-mix(in oklab, ${sd.color} 100%, black 8%)` })
+              ]
+            },
+            `stroke-grad-${sd.seriesKey}`
+          ))
+        ] }),
+        showGrid && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunk3QFHVAZTjs.ChartGrid,
+          {
+            xScale: resolvedXScale,
+            yScale: resolvedYScale,
+            show: "both",
+            xTicks,
+            yTicks,
+            xTickValues,
+            yTickValues,
+            lineStyle: gridLineStyle,
+            strokeWidth: gridStrokeWidth
+          }
+        ),
+        shouldShowXAxis && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkE5GD3H7Ljs.ChartAxis,
+          {
+            scale: resolvedXScale,
+            orientation: "bottom",
+            y: innerRect.height,
+            ticks: xTicks,
+            tickValues: xTickValues,
+            tickFormat: xTickFormat,
+            label: xAxisLabel
+          }
+        ),
+        shouldShowYAxis && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkE5GD3H7Ljs.ChartAxis,
+          {
+            scale: resolvedYScale,
+            orientation: "left",
+            ticks: yTicks,
+            tickValues: yTickValues,
+            tickFormat: yTickFormat,
+            label: yAxisLabel
+          }
+        ),
+        reversedSeriesData.map((sd) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _chunkAX5XRD2Qjs.ChartSeries,
+          {
+            data: sd.series.data,
+            name: sd.series.name,
+            type: "area",
+            opacity: sd.opacity,
+            "data-series-key": sd.seriesKey,
+            className: _tigercatcore.classNames.call(void 0, 
+              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__ */ _jsxruntime.jsx.call(void 0, 
+                "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
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "path",
+                {
+                  d: sd.linePath,
+                  fill: "none",
+                  stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
+                  strokeWidth: sd.strokeWidth,
+                  strokeDasharray: animated ? _nullishCoalesce(sd.strokeDasharray, () => ( "1")) : sd.strokeDasharray,
+                  strokeDashoffset: animated ? "1" : void 0,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  pathLength: animated ? 1 : void 0,
+                  className: _tigercatcore.classNames.call(void 0, 
+                    "transition-opacity [transition-duration:var(--tiger-motion-duration-base,200ms)]",
+                    animated && "tiger-area-animated"
+                  )
+                }
+              )
+            ]
+          },
+          sd.seriesKey
+        )),
+        seriesData.map(
+          (sd) => sd.showPoints && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { opacity: sd.opacity, "data-series-key": sd.seriesKey, children: sd.points.map((point) => {
+            const isHovered = _optionalChain([hoveredPointInfo, 'optionalAccess', _14 => _14.seriesIndex]) === sd.seriesIndex && _optionalChain([hoveredPointInfo, 'optionalAccess', _15 => _15.pointIndex]) === point.pointIndex;
+            const hoverSize = sd.pointSize + 2;
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "circle",
+              {
+                cx: point.x,
+                cy: point.y,
+                r: isHovered ? hoverSize : sd.pointSize,
+                fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
+                stroke: sd.pointHollow ? sd.pointColor : "none",
+                strokeWidth: sd.pointHollow ? 2 : 0,
+                className: _tigercatcore.linePointTransitionClasses,
+                style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                "data-point-index": point.pointIndex,
+                "data-series-key": sd.seriesKey,
+                onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
+                onMouseMove: handlePointMouseMove,
+                onMouseLeave: handlePointMouseLeave,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handlePointClick(sd.seriesIndex, point.pointIndex);
+                }
+              },
+              `point-${sd.seriesKey}-${point.pointIndex}`
+            );
+          }) }, `points-${sd.seriesKey}`)
+        )
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkUVMQJOTXjs.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: hoveredPointInfo !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  if (!showLegend) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkWV5XHYW6js.ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var AreaChart_default = AreaChart;
+
+
+
+
+exports.AreaChart = AreaChart; exports.AreaChart_default = AreaChart_default;

package/dist/chunk-DKNVSQSV.mjs

@@ -0,0 +1,72 @@
+// src/components/ChartCanvas.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  chartCanvasBaseClasses,
+  classNames,
+  createChartResizeObserverController,
+  getChartInnerRect,
+  resolveResponsiveChartSize
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartCanvas = ({
+  width = 320,
+  height = 200,
+  responsive = false,
+  padding = 24,
+  className,
+  title,
+  desc,
+  children,
+  ...props
+}) => {
+  const svgRef = useRef(null);
+  const [observedSize, setObservedSize] = useState(null);
+  const resizeControllerRef = useRef(
+    createChartResizeObserverController({
+      onSizeChange: setObservedSize
+    })
+  );
+  const resolvedSize = useMemo(
+    () => resolveResponsiveChartSize({ width, height }, responsive ? observedSize : null),
+    [width, height, responsive, observedSize]
+  );
+  const innerRect = useMemo(
+    () => getChartInnerRect(resolvedSize.width, resolvedSize.height, padding),
+    [resolvedSize.width, resolvedSize.height, padding]
+  );
+  const svgClasses = useMemo(() => classNames(chartCanvasBaseClasses, className), [className]);
+  useEffect(() => {
+    const controller = resizeControllerRef.current;
+    if (!responsive) {
+      controller.disconnect();
+      setObservedSize(null);
+      return void 0;
+    }
+    const target = svgRef.current?.parentElement;
+    if (!target) return void 0;
+    controller.observe(target);
+    return () => controller.disconnect();
+  }, [responsive]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...props,
+      ref: svgRef,
+      width: resolvedSize.width,
+      height: resolvedSize.height,
+      viewBox: `0 0 ${resolvedSize.width} ${resolvedSize.height}`,
+      className: svgClasses,
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        desc ? /* @__PURE__ */ jsx("desc", { children: desc }) : null,
+        /* @__PURE__ */ jsx("g", { transform: `translate(${innerRect.x}, ${innerRect.y})`, children })
+      ]
+    }
+  );
+};
+var ChartCanvas_default = ChartCanvas;
+
+export {
+  ChartCanvas,
+  ChartCanvas_default
+};

package/dist/chunk-DKT2EYVM.mjs

@@ -1,7 +1,10 @@
-import { useControlledState } from './chunk-UQMPEMY7.mjs';
-import { createContext, useContext } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import {
+  useControlledState
+} from "./chunk-UQMPEMY7.mjs";
 
+// src/components/CheckboxGroup.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
 var CheckboxGroupContextProvider = createContext(null);
 var useCheckboxGroup = () => {
   return useContext(CheckboxGroupContextProvider);
@@ -40,4 +43,7 @@ var CheckboxGroup = ({
   return /* @__PURE__ */ jsx(CheckboxGroupContextProvider.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ...props, className, children }) });
 };
 
-export { CheckboxGroup, useCheckboxGroup };
+export {
+  useCheckboxGroup,
+  CheckboxGroup
+};