@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-TVJZB7ZC.js → chunk-GOGLPCUH.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
-var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkXTV5JLLC_js = require('./chunk-XTV5JLLC.js');
+var chunkWV5XHYW6_js = require('./chunk-WV5XHYW6.js');
 var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
-var chunkM375I56K_js = require('./chunk-M375I56K.js');
-var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunk36ATCHP4_js = require('./chunk-36ATCHP4.js');
+var chunkUKLVOR4E_js = require('./chunk-UKLVOR4E.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -57,8 +57,11 @@ var RadarChart = ({
   showSplitArea = false,
   splitAreaOpacity = 0.06,
   splitAreaColors,
+  gradient = false,
+  strokeGradient = false,
+  pointGradient = false,
   pointBorderWidth = 2,
-  pointBorderColor = "#fff",
+  pointBorderColor = "var(--tiger-surface,#ffffff)",
   pointHoverSize,
   labelAutoAlign = true,
   title,
@@ -71,6 +74,10 @@ var RadarChart = ({
     }),
     [series, data]
   );
+  const seriesKeys = react.useMemo(
+    () => tigercatCore.buildChartSeriesKeys(resolvedSeries, { prefix: "radar-" }),
+    [resolvedSeries]
+  );
   const {
     resolvedHoveredIndex: _resolvedHoveredIndex,
     resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -84,7 +91,7 @@ var RadarChart = ({
     handleLegendHover,
     handleLegendLeave,
     wrapperClasses
-  } = chunkKQZ4F7FZ_js.useChartInteraction({
+  } = chunkXTV5JLLC_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -148,8 +155,9 @@ var RadarChart = ({
     [axisData.length, startAngle]
   );
   const seriesPoints = react.useMemo(
-    () => resolvedSeries.map((item) => ({
+    () => resolvedSeries.map((item, seriesIndex) => ({
       series: item,
+      seriesKey: seriesKeys[seriesIndex],
       points: tigercatCore.getRadarPoints(item.data, {
         cx,
         cy,
@@ -158,7 +166,7 @@ var RadarChart = ({
         maxValue: resolvedMaxValue
       })
     })),
-    [resolvedSeries, cx, cy, radius, startAngle, resolvedMaxValue]
+    [resolvedSeries, seriesKeys, cx, cy, radius, startAngle, resolvedMaxValue]
   );
   const gridPaths = react.useMemo(() => {
     if (!showGrid || angles.length === 0) return [];
@@ -246,6 +254,7 @@ var RadarChart = ({
   ]);
   const dasharray = tigercatCore.getChartGridLineDasharray(gridLineStyle);
   const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const gradientPrefix = react.useMemo(() => tigercatCore.getRadarGradientPrefix(), []);
   const tooltipContent = react.useMemo(
     () => tigercatCore.resolveMultiSeriesTooltipContent(
       hoveredPoint,
@@ -266,7 +275,7 @@ var RadarChart = ({
     [resolvedSeries, palette, resolvedActiveIndex, legendFormatter]
   );
   const chart = /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDUWAV47E_js.ChartCanvas,
+    chunkUKLVOR4E_js.ChartCanvas,
     {
       width,
       height,
@@ -275,6 +284,98 @@ var RadarChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
+        (gradient || strokeGradient || pointGradient) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          gradient && seriesPoints.map((item, seriesIndex) => {
+            const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+            const resolvedFillColor = item.series.fillColor ?? seriesColor ?? fillColor ?? palette[0];
+            const resolvedFillOpacity = item.series.fillOpacity ?? fillOpacity;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-${item.seriesKey}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: resolvedFillColor,
+                      stopOpacity: resolvedFillOpacity
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: resolvedFillColor, stopOpacity: 0.02 })
+                ]
+              },
+              `radar-grad-${item.seriesKey}`
+            );
+          }),
+          strokeGradient && seriesPoints.map((item, seriesIndex) => {
+            const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+            const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? strokeColor ?? palette[0];
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-stroke-${item.seriesKey}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: `color-mix(in oklab, ${resolvedStrokeColor} 100%, white 12%)`
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: resolvedStrokeColor }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      stopColor: `color-mix(in oklab, ${resolvedStrokeColor} 100%, black 8%)`
+                    }
+                  )
+                ]
+              },
+              `radar-stroke-grad-${item.seriesKey}`
+            );
+          }),
+          pointGradient && seriesPoints.map((item, seriesIndex) => {
+            const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+            const resolvedPointColor = item.series.pointColor ?? seriesColor ?? pointColor ?? palette[0];
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "radialGradient",
+              {
+                id: `${gradientPrefix}-point-${item.seriesKey}`,
+                cx: "0.5",
+                cy: "0.5",
+                r: "0.5",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: `color-mix(in oklab, ${resolvedPointColor} 100%, white 30%)`
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "70%", stopColor: resolvedPointColor }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      stopColor: `color-mix(in oklab, ${resolvedPointColor} 100%, black 12%)`
+                    }
+                  )
+                ]
+              },
+              `radar-point-grad-${item.seriesKey}`
+            );
+          })
+        ] }),
         splitAreaPaths.map((area, index) => {
           if (area.type === "circle-ring") {
             return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
@@ -376,6 +477,7 @@ var RadarChart = ({
           return /* @__PURE__ */ jsxRuntime.jsxs(
             chunkAX5XRD2Q_js.ChartSeries,
             {
+              "data-series-key": item.seriesKey,
               data: item.series.data,
               name: item.series.name,
               type: "radar",
@@ -397,15 +499,16 @@ var RadarChart = ({
                   "path",
                   {
                     d: areaPath,
-                    fill: resolvedFillColor,
-                    fillOpacity: resolvedFillOpacity,
-                    stroke: resolvedStrokeColor,
+                    fill: gradient ? `url(#${gradientPrefix}-${item.seriesKey})` : resolvedFillColor,
+                    fillOpacity: gradient ? 1 : resolvedFillOpacity,
+                    stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${item.seriesKey})` : resolvedStrokeColor,
                     strokeWidth: resolvedStrokeWidth,
                     strokeLinejoin: "round",
                     className: "transition-[fill-opacity,filter] duration-200 ease-out",
                     style: resolvedActiveIndex === seriesIndex ? { filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.15))" } : void 0,
                     "data-radar-area": "true",
-                    "data-series-index": seriesIndex
+                    "data-series-index": seriesIndex,
+                    "data-series-key": item.seriesKey
                   }
                 ) : null,
                 resolvedShowPoints ? item.points.map((point) => {
@@ -420,7 +523,7 @@ var RadarChart = ({
                       cx: point.x,
                       cy: point.y,
                       r: currentSize,
-                      fill: point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
+                      fill: pointGradient ? `url(#${gradientPrefix}-point-${item.seriesKey})` : point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
                       stroke: resolvedBorderColor,
                       strokeWidth: resolvedBorderWidth,
                       className: tigercatCore.classNames(
@@ -429,17 +532,18 @@ var RadarChart = ({
                       ),
                       "data-radar-point": "true",
                       "data-series-index": seriesIndex,
+                      "data-series-key": item.seriesKey,
                       "data-point-index": point.index,
                       onMouseEnter: showTooltip && hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
                       onMouseMove: showTooltip && hoverable ? handlePointMove : void 0,
                       onMouseLeave: showTooltip && hoverable ? handlePointLeave : void 0
                     },
-                    `point-${seriesIndex}-${point.index}`
+                    `point-${item.seriesKey}-${point.index}`
                   );
                 }) : null
               ]
             },
-            `series-${seriesIndex}`
+            item.seriesKey
           );
         }),
         labels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -471,7 +575,7 @@ var RadarChart = ({
     }
   );
   const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsxRuntime.jsx(
-    chunkM375I56K_js.ChartTooltip,
+    chunk36ATCHP4_js.ChartTooltip,
     {
       content: tooltipContent,
       visible: hoveredPoint !== null && tooltipContent !== "",
@@ -488,7 +592,7 @@ var RadarChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6PBNFLM7_js.ChartLegend,
+      chunkWV5XHYW6_js.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/chunk-GOQ6ZG7H.mjs

@@ -0,0 +1,56 @@
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { canAnimateStatisticValue, createStatisticNumberAnimation, formatStatisticValue, classNames, getStatisticTitleClasses, getStatisticValueClasses, statisticPrefixClasses, statisticSuffixClasses, statisticBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Statistic.tsx
+var Statistic = ({
+  title,
+  value,
+  precision,
+  prefix,
+  suffix,
+  groupSeparator = false,
+  animated = false,
+  animationDuration,
+  size = "md",
+  className
+}) => {
+  const initialValue = animated && canAnimateStatisticValue(value) ? 0 : value;
+  const [displayValue, setDisplayValue] = useState(initialValue);
+  const currentNumberRef = useRef(canAnimateStatisticValue(initialValue) ? initialValue : 0);
+  useEffect(() => {
+    if (!animated || !canAnimateStatisticValue(value)) {
+      setDisplayValue(value);
+      if (canAnimateStatisticValue(value)) currentNumberRef.current = value;
+      return void 0;
+    }
+    const controller = createStatisticNumberAnimation({
+      from: currentNumberRef.current,
+      to: value,
+      duration: animationDuration,
+      onUpdate: (next) => {
+        currentNumberRef.current = next;
+        setDisplayValue(next);
+      },
+      onComplete: () => {
+        currentNumberRef.current = value;
+        setDisplayValue(value);
+      }
+    });
+    return controller.stop;
+  }, [value, animated, animationDuration]);
+  const formatted = useMemo(
+    () => formatStatisticValue(displayValue, precision, groupSeparator),
+    [displayValue, precision, groupSeparator]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classNames(statisticBaseClasses, className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: getStatisticTitleClasses(size), children: title }),
+    /* @__PURE__ */ jsxs("div", { className: getStatisticValueClasses(size), children: [
+      prefix && /* @__PURE__ */ jsx("span", { className: statisticPrefixClasses, children: prefix }),
+      /* @__PURE__ */ jsx("span", { children: formatted }),
+      suffix && /* @__PURE__ */ jsx("span", { className: statisticSuffixClasses, children: suffix })
+    ] })
+  ] });
+};
+
+export { Statistic };

package/dist/{chunk-BCNKTT5C.js → chunk-GRXBGL6Q.js}

@@ -9,21 +9,23 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/components/Button.tsx
-var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
-var DefaultSpinner = /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    className: "animate-spin h-4 w-4",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: spinnerSvg.viewBox,
-    "aria-hidden": "true",
-    focusable: "false",
-    children: spinnerSvg.elements.map(
-      (el, index) => React__default.default.createElement(el.type, { key: index, ...el.attrs })
-    )
-  }
-);
+var createDefaultSpinner = () => {
+  const spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: "animate-spin h-4 w-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: spinnerSvg.elements.map(
+        (el, index) => React__default.default.createElement(el.type, { key: index, ...el.attrs })
+      )
+    }
+  );
+};
 var Button = ({
   variant = "primary",
   size = "md",
@@ -68,7 +70,7 @@ var Button = ({
       onClick: isDisabled ? void 0 : onClick,
       type: htmlType,
       children: [
-        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: loadingIcon ?? createDefaultSpinner() }),
         !loading && icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: icon }),
         children
       ]

package/dist/{chunk-XNMSECO4.mjs → chunk-GUHNLUZ3.mjs}

@@ -1,12 +1,12 @@
-import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
-import { ChartLegend } from './chunk-Z6F67MJE.mjs';
+import { useChartInteraction } from './chunk-6QML6T3Y.mjs';
+import { ChartLegend } from './chunk-UBP7HZSU.mjs';
 import { ChartSeries } from './chunk-SDLMB34Y.mjs';
-import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
 import { ChartAxis } from './chunk-RQSQXQN6.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
 import { ChartGrid } from './chunk-677VSTPW.mjs';
 import { useState, useMemo, useCallback } from 'react';
-import { getLineGradientPrefix, getChartInnerRect, resolveSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames } from '@expcat/tigercat-core';
+import { getLineGradientPrefix, getChartInnerRect, resolveSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, buildChartSeriesKeys, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames, linePointTransitionClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var LineChart = ({
@@ -54,6 +54,8 @@ var LineChart = ({
   areaOpacity = 0.15,
   pointHollow = false,
   animated = false,
+  strokeGradient = false,
+  pointGradient = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -128,8 +130,13 @@ var LineChart = ({
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const seriesKeys = useMemo(
+    () => buildChartSeriesKeys(resolvedSeries, { prefix: "line-" }),
+    [resolvedSeries]
+  );
   const seriesData = useMemo(
     () => resolvedSeries.map((s, seriesIndex) => {
+      const seriesKey = seriesKeys[seriesIndex];
       const color = s.color ?? palette[seriesIndex % palette.length];
       const points = s.data.map((datum, pointIndex) => ({
         x: resolvedXScale.map(datum.x),
@@ -147,6 +154,7 @@ var LineChart = ({
       return {
         series: s,
         seriesIndex,
+        seriesKey,
         color,
         linePath,
         areaPath,
@@ -164,6 +172,7 @@ var LineChart = ({
     }),
     [
       resolvedSeries,
+      seriesKeys,
       palette,
       resolvedXScale,
       resolvedYScale,
@@ -240,7 +249,7 @@ var LineChart = ({
       desc,
       className: classNames(className),
       children: [
-        (seriesData.some((sd) => sd.showArea) || animated) && /* @__PURE__ */ jsxs("defs", { children: [
+        (seriesData.some((sd) => sd.showArea) || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
           animated && /* @__PURE__ */ jsx("style", { children: `
               .tiger-line-animated {
                 animation: tiger-line-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
@@ -253,7 +262,7 @@ var LineChart = ({
           seriesData.filter((sd) => sd.showArea).map((sd) => /* @__PURE__ */ jsxs(
             "linearGradient",
             {
-              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              id: `${gradientPrefix}-${sd.seriesKey}`,
               x1: "0",
               y1: "0",
               x2: "0",
@@ -263,7 +272,44 @@ var LineChart = ({
                 /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: sd.color, stopOpacity: 0.02 })
               ]
             },
-            `area-grad-${sd.seriesIndex}`
+            `area-grad-${sd.seriesKey}`
+          )),
+          pointGradient && seriesData.map((sd) => /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              id: `${gradientPrefix}-point-${sd.seriesKey}`,
+              cx: "0.5",
+              cy: "0.5",
+              r: "0.5",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 30%)` }),
+                /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: sd.color }),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: "100%",
+                    stopColor: `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                  }
+                )
+              ]
+            },
+            `point-grad-${sd.seriesKey}`
+          )),
+          strokeGradient && seriesData.map((sd) => /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+              x1: "0",
+              y1: "0",
+              x2: "1",
+              y2: "0",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 12%)` }),
+                /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: sd.color }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: `color-mix(in oklab, ${sd.color} 100%, black 8%)` })
+              ]
+            },
+            `stroke-grad-${sd.seriesKey}`
           ))
         ] }),
         showGrid && /* @__PURE__ */ jsx(
@@ -310,6 +356,7 @@ var LineChart = ({
             name: sd.series.name,
             type: "line",
             opacity: sd.opacity,
+            "data-series-key": sd.seriesKey,
             className: classNames(sd.series.className, (hoverable || selectable) && "cursor-pointer"),
             onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
             onMouseLeave: handleSeriesHoverLeave,
@@ -321,10 +368,11 @@ var LineChart = ({
                 "path",
                 {
                   d: sd.areaPath,
-                  fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                  fill: `url(#${gradientPrefix}-${sd.seriesKey})`,
                   stroke: "none",
                   className: "transition-opacity duration-300",
-                  "data-area-series": sd.seriesIndex
+                  "data-area-series": sd.seriesIndex,
+                  "data-series-key": sd.seriesKey
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -332,7 +380,7 @@ var LineChart = ({
                 {
                   d: sd.linePath,
                   fill: "none",
-                  stroke: sd.color,
+                  stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                   strokeWidth: sd.strokeWidth,
                   strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
                   strokeDashoffset: animated ? "1" : void 0,
@@ -343,7 +391,8 @@ var LineChart = ({
                     "transition-opacity duration-200",
                     animated && "tiger-line-animated"
                   ),
-                  "data-line-series": sd.seriesIndex
+                  "data-line-series": sd.seriesIndex,
+                  "data-series-key": sd.seriesKey
                 }
               ),
               sd.showPoints && sd.points.map((point) => {
@@ -355,12 +404,13 @@ var LineChart = ({
                     cx: point.x,
                     cy: point.y,
                     r: isHovered ? hoverSize : sd.pointSize,
-                    fill: sd.pointHollow ? "white" : sd.pointColor,
+                    fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                     stroke: sd.pointHollow ? sd.pointColor : "none",
                     strokeWidth: sd.pointHollow ? 2 : 0,
-                    className: "transition-all duration-200 ease-out",
+                    className: 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,
@@ -369,12 +419,12 @@ var LineChart = ({
                       handlePointClick(sd.seriesIndex, point.pointIndex);
                     }
                   },
-                  `point-${sd.seriesIndex}-${point.pointIndex}`
+                  `point-${sd.seriesKey}-${point.pointIndex}`
                 );
               })
             ]
           },
-          `series-${sd.seriesIndex}`
+          sd.seriesKey
         ))
       ]
     }

package/dist/{chunk-B3MNIAM5.mjs → chunk-GYQJJUJP.mjs}

@@ -1,9 +1,8 @@
-import { Table } from './chunk-MB7CJ32C.mjs';
-import { Select } from './chunk-HZ5Z5Y2J.mjs';
-import { Pagination } from './chunk-NZLOLMT2.mjs';
+import { Table } from './chunk-CBWRSICK.mjs';
+import { Select } from './chunk-UJ5NMLZN.mjs';
 import { Input } from './chunk-WNLUUD5N.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
-import { useState, useEffect, useMemo } from 'react';
+import { Button } from './chunk-GKJNQUTW.mjs';
+import { useRef, useState, useEffect, useMemo } from 'react';
 import { classNames } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -20,6 +19,9 @@ var DataTableWithToolbar = ({
   tableClassName,
   ...tableProps
 }) => {
+  const previousPageSizeRef = useRef(
+    pagination && typeof pagination === "object" ? pagination.pageSize ?? pagination.defaultPageSize ?? 10 : void 0
+  );
   const [internalSearch, setInternalSearch] = useState(toolbar?.defaultSearchValue ?? "");
   const [internalFilters, setInternalFilters] = useState(
     () => {
@@ -37,6 +39,11 @@ var DataTableWithToolbar = ({
       setInternalSearch(toolbar.searchValue ?? "");
     }
   }, [toolbar?.searchValue]);
+  useEffect(() => {
+    if (pagination && typeof pagination === "object") {
+      previousPageSizeRef.current = pagination.pageSize ?? pagination.defaultPageSize ?? 10;
+    }
+  }, [pagination]);
   useEffect(() => {
     const filters = toolbar?.filters;
     if (!filters) return;
@@ -101,9 +108,16 @@ var DataTableWithToolbar = ({
     onBulkAction?.(action, keys);
     toolbar?.onBulkAction?.(action, keys);
   };
+  const handleTablePageChange = ({ current, pageSize }) => {
+    onPageChange?.(current, pageSize);
+    if (previousPageSizeRef.current !== void 0 && previousPageSizeRef.current !== pageSize) {
+      onPageSizeChange?.(current, pageSize);
+    }
+    previousPageSizeRef.current = pageSize;
+  };
   const renderToolbar = () => {
     if (!hasSearch && !hasFilters && !hasBulkActions) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3", role: "toolbar", "aria-label": "\u6570\u636E\u8868\u683C\u5DE5\u5177\u680F", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap flex-1 min-w-0", children: [
         hasSearch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]", children: [
           /* @__PURE__ */ jsx(
@@ -182,11 +196,17 @@ var DataTableWithToolbar = ({
       ] }) : null
     ] });
   };
-  const showPagination = pagination && typeof pagination === "object";
   return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, "data-tiger-data-table-with-toolbar": true, children: [
     renderToolbar(),
-    /* @__PURE__ */ jsx(Table, { ...tableProps, pagination: false, className: tableClassName }),
-    showPagination ? /* @__PURE__ */ jsx(Pagination, { ...pagination, onChange: onPageChange, onPageSizeChange }) : null
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        ...tableProps,
+        pagination,
+        className: tableClassName,
+        onPageChange: handleTablePageChange
+      }
+    )
   ] });
 };
 var DataTableWithToolbar_default = DataTableWithToolbar;

package/dist/{chunk-IWP22YTF.js → chunk-HCKV7ONR.js}

@@ -40,6 +40,7 @@ var Form = React.forwardRef(
     const [formValues, setFormValues] = React.useState(model);
     const fieldRulesRef = React__default.default.useRef({});
     const formValuesRef = React__default.default.useRef(model);
+    const errorsByField = React.useMemo(() => tigercatCore.createFormErrorMap(errors), [errors]);
     const [historyState, setHistoryState] = React.useState(() => tigercatCore.createFormHistory(model, maxHistorySize));
     React__default.default.useEffect(() => {
       setFormValues(model);
@@ -301,6 +302,7 @@ var Form = React.forwardRef(
         disabled,
         loading,
         errors,
+        errorsByField,
         registerFieldRules,
         validateField,
         clearValidate,
@@ -318,6 +320,7 @@ var Form = React.forwardRef(
         disabled,
         loading,
         errors,
+        errorsByField,
         registerFieldRules,
         validateField,
         clearValidate,