@expcat/tigercat-react 0.3.0 → 0.3.69

package/dist/{chunk-ZUUG3WOL.js → chunk-F4Q5QMX2.js}

@@ -2,6 +2,7 @@
 
 var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
 var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
 var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
 var chunkM375I56K_js = require('./chunk-M375I56K.js');
 var react = require('react');
@@ -45,21 +46,31 @@ var RadarChart = ({
   legendFormatter,
   legendMarkerSize = 10,
   legendGap = 8,
-  strokeColor = tigercatCore.DEFAULT_CHART_COLORS[0],
+  strokeColor,
   strokeWidth = 2,
-  fillColor = tigercatCore.DEFAULT_CHART_COLORS[0],
+  fillColor,
   fillOpacity = 0.2,
   showPoints = true,
   pointSize = 3,
   pointColor,
+  gridShape = "polygon",
+  showSplitArea = false,
+  splitAreaOpacity = 0.06,
+  splitAreaColors,
+  pointBorderWidth = 2,
+  pointBorderColor = "#fff",
+  pointHoverSize,
+  labelAutoAlign = true,
   title,
   desc,
   className
 }) => {
-  const resolvedSeries = react.useMemo(() => {
-    if (series && series.length > 0) return series;
-    return [{ data: data ?? [] }];
-  }, [series, data]);
+  const resolvedSeries = react.useMemo(
+    () => tigercatCore.resolveSeriesData(series, data, {
+      data: []
+    }),
+    [series, data]
+  );
   const {
     resolvedHoveredIndex: _resolvedHoveredIndex,
     resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -68,7 +79,11 @@ var RadarChart = ({
     handleMouseEnter: handleHoverEnter,
     handleMouseMove,
     handleMouseLeave: handleHoverLeave,
-    handleClick: handleSelectIndex
+    handleClick: handleSelectIndex,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
   } = chunkKQZ4F7FZ_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
@@ -150,10 +165,30 @@ var RadarChart = ({
     const resolvedLevels = Math.max(1, Math.floor(levels));
     return Array.from({ length: resolvedLevels }, (_, index) => {
       const levelRadius = radius * ((index + 1) / resolvedLevels);
+      if (gridShape === "circle") {
+        return { type: "circle", cx, cy, r: levelRadius };
+      }
       const ringPoints = angles.map((angle) => tigercatCore.polarToCartesian(cx, cy, levelRadius, angle));
-      return tigercatCore.createPolygonPath(ringPoints);
+      return { type: "polygon", d: tigercatCore.createPolygonPath(ringPoints), cx, cy, r: levelRadius };
     });
-  }, [showGrid, levels, angles, radius, cx, cy]);
+  }, [showGrid, levels, angles, radius, cx, cy, gridShape]);
+  const splitAreaPaths = react.useMemo(() => {
+    if (!showSplitArea || angles.length === 0) return [];
+    const resolvedLevels = Math.max(1, Math.floor(levels));
+    const areaColors = splitAreaColors && splitAreaColors.length > 0 ? splitAreaColors : tigercatCore.RADAR_SPLIT_AREA_COLORS;
+    return Array.from({ length: resolvedLevels }, (_, index) => {
+      const outerIndex = resolvedLevels - 1 - index;
+      const outerRadius = radius * ((outerIndex + 1) / resolvedLevels);
+      const innerRadius = radius * (outerIndex / resolvedLevels);
+      const color = areaColors[outerIndex % areaColors.length];
+      if (gridShape === "circle") {
+        return { type: "circle-ring", cx, cy, outerRadius, innerRadius, color };
+      }
+      const outerPoints = angles.map((angle) => tigercatCore.polarToCartesian(cx, cy, outerRadius, angle));
+      const innerPoints = outerIndex > 0 ? angles.map((angle) => tigercatCore.polarToCartesian(cx, cy, innerRadius, angle)) : [];
+      return { type: "polygon-ring", outerPoints, innerPoints, color };
+    });
+  }, [showSplitArea, levels, angles, radius, cx, cy, gridShape, splitAreaColors, splitAreaOpacity]);
   const axisLines = react.useMemo(() => {
     if (!showAxis || angles.length === 0) return [];
     return angles.map((angle) => {
@@ -172,13 +207,16 @@ var RadarChart = ({
     return axisData.map((datum, index) => {
       const angle = angles[index];
       const position = tigercatCore.polarToCartesian(cx, cy, radius + labelOffset, angle);
+      const align = labelAutoAlign ? tigercatCore.getRadarLabelAlign(angle) : { textAnchor: "middle", dominantBaseline: "middle" };
       return {
         x: position.x,
         y: position.y,
-        text: formatLabel(datum, index)
+        text: formatLabel(datum, index),
+        textAnchor: align.textAnchor,
+        dominantBaseline: align.dominantBaseline
       };
     });
-  }, [showLabels, axisData, angles, cx, cy, radius, labelOffset, labelFormatter]);
+  }, [showLabels, axisData, angles, cx, cy, radius, labelOffset, labelFormatter, labelAutoAlign]);
   const levelLabels = react.useMemo(() => {
     if (!showLevelLabels || !showGrid || angles.length === 0) return [];
     const resolvedLevels = Math.max(1, Math.floor(levels));
@@ -207,47 +245,25 @@ var RadarChart = ({
     levelLabelFormatter
   ]);
   const dasharray = tigercatCore.getChartGridLineDasharray(gridLineStyle);
-  const palette = react.useMemo(
-    () => colors && colors.length > 0 ? colors : [...tigercatCore.DEFAULT_CHART_COLORS],
-    [colors]
+  const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const tooltipContent = react.useMemo(
+    () => tigercatCore.resolveMultiSeriesTooltipContent(
+      hoveredPoint,
+      resolvedSeries,
+      tooltipFormatter,
+      tigercatCore.defaultRadarTooltipFormatter
+    ),
+    [hoveredPoint, resolvedSeries, tooltipFormatter]
   );
-  const formatTooltip = react.useMemo(
-    () => tooltipFormatter ?? ((datum, seriesIndex, index, series2) => {
-      const label = datum.label ?? `#${index + 1}`;
-      const value = datum.value;
-      const name = series2?.name ?? `Series ${seriesIndex + 1}`;
-      return `${name} \xB7 ${label}: ${value}`;
+  const legendItems = react.useMemo(
+    () => tigercatCore.buildChartLegendItems({
+      data: resolvedSeries,
+      palette,
+      activeIndex: resolvedActiveIndex,
+      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+      getColor: (s, i) => s.color ?? palette[i % palette.length]
     }),
-    [tooltipFormatter]
-  );
-  const tooltipContent = react.useMemo(() => {
-    if (!hoveredPoint) return "";
-    const { seriesIndex, pointIndex } = hoveredPoint;
-    const series2 = resolvedSeries[seriesIndex];
-    if (!series2) return "";
-    const datum = series2.data[pointIndex];
-    if (!datum) return "";
-    return formatTooltip(datum, seriesIndex, pointIndex, series2);
-  }, [hoveredPoint, resolvedSeries, formatTooltip]);
-  const resolvedLegendItems = react.useMemo(
-    () => resolvedSeries.map((item, index) => {
-      const color = item.color ?? palette[index % palette.length];
-      const label = legendFormatter ? legendFormatter(item, index) : item.name ?? `Series ${index + 1}`;
-      return {
-        index,
-        label,
-        color
-      };
-    }),
-    [resolvedSeries, palette, legendFormatter]
-  );
-  const legendContainerClasses = tigercatCore.classNames(
-    "flex flex-wrap",
-    legendPosition === "right" ? "flex-col gap-2" : "flex-row gap-3"
-  );
-  const wrapperClasses = tigercatCore.classNames(
-    "inline-flex",
-    legendPosition === "right" ? "flex-row items-start gap-4" : "flex-col gap-2"
+    [resolvedSeries, palette, resolvedActiveIndex, legendFormatter]
   );
   const chart = /* @__PURE__ */ jsxRuntime.jsxs(
     chunkDUWAV47E_js.ChartCanvas,
@@ -259,17 +275,80 @@ var RadarChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
-        gridPaths.map((path, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: path,
-            className: tigercatCore.chartGridLineClasses,
-            fill: "none",
-            strokeWidth: gridStrokeWidth,
-            strokeDasharray: dasharray
-          },
-          `grid-${index}`
-        )),
+        splitAreaPaths.map((area, index) => {
+          if (area.type === "circle-ring") {
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: area.cx,
+                  cy: area.cy,
+                  r: area.outerRadius,
+                  fill: area.color,
+                  fillOpacity: splitAreaOpacity,
+                  stroke: "none",
+                  "data-radar-split-area": "true"
+                }
+              ),
+              area.innerRadius > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: area.cx,
+                  cy: area.cy,
+                  r: area.innerRadius,
+                  fill: "var(--tiger-bg,#fff)",
+                  stroke: "none"
+                }
+              ) : null
+            ] }, `split-${index}`);
+          }
+          const outerPath = tigercatCore.createPolygonPath(area.outerPoints);
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            outerPath ? /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: outerPath,
+                fill: area.color,
+                fillOpacity: splitAreaOpacity,
+                stroke: "none",
+                "data-radar-split-area": "true"
+              }
+            ) : null,
+            area.innerPoints.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: tigercatCore.createPolygonPath(area.innerPoints),
+                fill: "var(--tiger-bg,#fff)",
+                stroke: "none"
+              }
+            ) : null
+          ] }, `split-${index}`);
+        }),
+        gridPaths.map(
+          (grid, index) => grid.type === "circle" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: grid.cx,
+              cy: grid.cy,
+              r: grid.r,
+              className: tigercatCore.chartGridLineClasses,
+              fill: "none",
+              strokeWidth: gridStrokeWidth,
+              strokeDasharray: dasharray
+            },
+            `grid-${index}`
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: grid.d,
+              className: tigercatCore.chartGridLineClasses,
+              fill: "none",
+              strokeWidth: gridStrokeWidth,
+              strokeDasharray: dasharray
+            },
+            `grid-${index}`
+          )
+        ),
         axisLines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "line",
           {
@@ -285,8 +364,8 @@ var RadarChart = ({
         )),
         seriesPoints.map((item, seriesIndex) => {
           const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
-          const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? strokeColor;
-          const resolvedFillColor = item.series.fillColor ?? seriesColor ?? fillColor;
+          const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? strokeColor ?? palette[0];
+          const resolvedFillColor = item.series.fillColor ?? seriesColor ?? fillColor ?? palette[0];
           const resolvedFillOpacity = item.series.fillOpacity ?? fillOpacity;
           const resolvedStrokeWidth = item.series.strokeWidth ?? strokeWidth;
           const resolvedShowPoints = item.series.showPoints ?? showPoints;
@@ -322,19 +401,32 @@ var RadarChart = ({
                     fillOpacity: resolvedFillOpacity,
                     stroke: 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
                   }
                 ) : null,
                 resolvedShowPoints ? item.points.map((point) => {
+                  const isHoveredPoint = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === point.index;
+                  const hoverSize = pointHoverSize ?? resolvedPointSize + 2;
+                  const currentSize = isHoveredPoint ? hoverSize : point.data.size ?? resolvedPointSize;
+                  const resolvedBorderWidth = item.series.pointBorderWidth ?? pointBorderWidth;
+                  const resolvedBorderColor = item.series.pointBorderColor ?? pointBorderColor;
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     "circle",
                     {
                       cx: point.x,
                       cy: point.y,
-                      r: point.data.size ?? resolvedPointSize,
+                      r: currentSize,
                       fill: point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
-                      className: showTooltip && hoverable ? "cursor-pointer" : void 0,
+                      stroke: resolvedBorderColor,
+                      strokeWidth: resolvedBorderWidth,
+                      className: tigercatCore.classNames(
+                        showTooltip && hoverable ? "cursor-pointer" : void 0,
+                        "transition-[r] duration-150 ease-out"
+                      ),
                       "data-radar-point": "true",
                       "data-series-index": seriesIndex,
                       "data-point-index": point.index,
@@ -356,8 +448,8 @@ var RadarChart = ({
             x: label.x,
             y: label.y,
             className: tigercatCore.chartAxisTickTextClasses,
-            textAnchor: "middle",
-            dominantBaseline: "middle",
+            textAnchor: label.textAnchor,
+            dominantBaseline: label.dominantBaseline,
             children: label.text
           },
           `label-${index}`
@@ -395,34 +487,19 @@ var RadarChart = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: legendContainerClasses, children: resolvedLegendItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunk6PBNFLM7_js.ChartLegend,
       {
-        type: "button",
-        className: tigercatCore.classNames(
-          "flex items-center gap-2 text-sm text-gray-600",
-          selectable ? "cursor-pointer" : "cursor-default"
-        ),
-        onClick: selectable ? () => handleSelectIndex(item.index) : void 0,
-        onMouseEnter: hoverable ? (e) => handleHoverEnter(item.index, e) : void 0,
-        onMouseLeave: hoverable ? handlePointLeave : void 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "inline-block rounded-full",
-              style: {
-                width: `${legendMarkerSize}px`,
-                height: `${legendMarkerSize}px`,
-                backgroundColor: item.color
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: `${legendGap}px` }, children: item.label })
-        ]
-      },
-      `legend-${item.index}`
-    )) }),
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
     tooltip
   ] });
 };

package/dist/{chunk-V2HVHLBY.mjs → chunk-FE7PEZTI.mjs}

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { getInitials, classNames, avatarBaseClasses, avatarSizeClasses, avatarShapeClasses, avatarDefaultBgColor, avatarDefaultTextColor, avatarImageClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
@@ -23,47 +23,27 @@ var Avatar = ({
   const ariaHiddenProp = props["aria-hidden"];
   const computedLabel = ariaLabelProp ?? (alt.trim() ? alt : void 0) ?? (text?.trim() || void 0);
   const isDecorative = ariaHiddenProp === true || !computedLabel && !ariaLabelledbyProp;
-  const avatarClasses = classNames(
-    avatarBaseClasses,
-    avatarSizeClasses[size],
-    avatarShapeClasses[shape],
-    !hasImage && bgColor,
-    !hasImage && textColor,
-    className
+  const avatarClasses = useMemo(
+    () => classNames(
+      avatarBaseClasses,
+      avatarSizeClasses[size],
+      avatarShapeClasses[shape],
+      !hasImage && bgColor,
+      !hasImage && textColor,
+      className
+    ),
+    [size, shape, hasImage, bgColor, textColor, className]
   );
   if (hasImage) {
-    return /* @__PURE__ */ jsx(
-      "span",
+    return /* @__PURE__ */ jsx("span", { ...props, className: avatarClasses, "aria-hidden": isDecorative ? true : ariaHiddenProp, children: /* @__PURE__ */ jsx(
+      "img",
       {
-        ...props,
-        className: avatarClasses,
-        "aria-hidden": isDecorative ? true : props["aria-hidden"],
-        children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src,
-            alt,
-            className: avatarImageClasses,
-            onError: () => setImageError(true)
-          }
-        )
+        src,
+        alt,
+        className: avatarImageClasses,
+        onError: () => setImageError(true)
       }
-    );
-  }
-  if (displayText) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ...props,
-        className: avatarClasses,
-        ...isDecorative ? { "aria-hidden": true } : {
-          role: "img",
-          "aria-label": computedLabel,
-          "aria-labelledby": ariaLabelledbyProp
-        },
-        children: displayText
-      }
-    );
+    ) });
   }
   return /* @__PURE__ */ jsx(
     "span",
@@ -75,7 +55,7 @@ var Avatar = ({
         "aria-label": computedLabel,
         "aria-labelledby": ariaLabelledbyProp
       },
-      children
+      children: displayText || children
     }
   );
 };

package/dist/chunk-FLYJVZED.mjs

@@ -0,0 +1,30 @@
+import { icon24StrokeWidth, icon24ViewBox, icon24PathStrokeLinejoin, icon24PathStrokeLinecap, classNames } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/shared/icons.tsx
+var StatusIcon = ({ path, className, ...svgProps }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: icon24ViewBox,
+    stroke: "currentColor",
+    strokeWidth: icon24StrokeWidth,
+    ...svgProps,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: icon24PathStrokeLinecap,
+        strokeLinejoin: icon24PathStrokeLinejoin,
+        d: path
+      }
+    )
+  }
+);
+var StatusIconWithLoading = ({ path, className, isLoading = false, spinnerClass = "" }) => {
+  const merged = classNames(className, isLoading && spinnerClass);
+  return /* @__PURE__ */ jsx(StatusIcon, { path, className: merged });
+};
+
+export { StatusIcon, StatusIconWithLoading };

package/dist/chunk-FMF2G6BJ.js

@@ -0,0 +1,179 @@
+'use strict';
+
+var chunkW4TFISRK_js = require('./chunk-W4TFISRK.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DONUT_PALETTE = [
+  "#5470c6",
+  "#91cc75",
+  "#fac858",
+  "#ee6666",
+  "#73c0de",
+  "#3ba272",
+  "#fc8452",
+  "#9a60b4",
+  "#ea7ccc"
+];
+var DonutChart = ({
+  width = 320,
+  height = 240,
+  padding = 24,
+  data,
+  innerRadius,
+  innerRadiusRatio = 0.62,
+  outerRadius,
+  startAngle = 0,
+  endAngle = Math.PI * 2,
+  padAngle = 0.04,
+  colors,
+  showLabels = false,
+  labelFormatter,
+  labelPosition = "inside",
+  borderWidth = 0,
+  borderColor = "#ffffff",
+  hoverOffset = 10,
+  shadow = true,
+  // Interaction props
+  hoverable = false,
+  hoveredIndex,
+  activeOpacity = 1,
+  inactiveOpacity = 0.3,
+  selectable = false,
+  selectedIndex,
+  // Legend props
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  // Tooltip props
+  showTooltip = true,
+  tooltipFormatter,
+  // Accessibility
+  title,
+  desc,
+  className,
+  // DonutChart-specific
+  centerValue,
+  centerLabel,
+  animated = false,
+  // Callbacks
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSliceClick,
+  onSliceHover
+}) => {
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const pad = react.useMemo(() => tigercatCore.normalizeChartPadding(padding), [padding]);
+  const resolvedOuterRadius = react.useMemo(() => {
+    if (typeof outerRadius === "number") return Math.max(0, outerRadius);
+    return Math.max(0, Math.min(innerRect.width, innerRect.height) / 2);
+  }, [outerRadius, innerRect.width, innerRect.height]);
+  const resolvedInnerRadius = react.useMemo(() => {
+    if (typeof innerRadius === "number") {
+      return Math.min(Math.max(0, innerRadius), resolvedOuterRadius);
+    }
+    const ratio = Math.min(Math.max(innerRadiusRatio ?? 0.62, 0), 1);
+    return resolvedOuterRadius * ratio;
+  }, [innerRadius, innerRadiusRatio, resolvedOuterRadius]);
+  const resolvedColors = react.useMemo(
+    () => colors && colors.length > 0 ? colors : DONUT_PALETTE,
+    [colors]
+  );
+  const donutTooltipFormatter = react.useMemo(() => {
+    if (tooltipFormatter) return tooltipFormatter;
+    const total = data.reduce((s, d) => s + d.value, 0);
+    return (datum, index) => {
+      const pct = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
+      const label = datum.label ?? `#${index + 1}`;
+      return `${label}: ${datum.value} (${pct}%)`;
+    };
+  }, [tooltipFormatter, data]);
+  const hasCenterContent = centerValue !== void 0 || centerLabel !== void 0;
+  const centerX = pad.left + innerRect.width / 2;
+  const centerY = pad.top + innerRect.height / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block relative", "data-donut-chart": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunkW4TFISRK_js.PieChart,
+      {
+        width,
+        height,
+        padding,
+        data,
+        innerRadius: resolvedInnerRadius,
+        outerRadius,
+        startAngle,
+        endAngle,
+        padAngle,
+        colors: resolvedColors,
+        showLabels,
+        labelFormatter,
+        labelPosition,
+        borderWidth,
+        borderColor,
+        hoverOffset,
+        shadow,
+        hoverable,
+        hoveredIndex,
+        activeOpacity,
+        inactiveOpacity,
+        selectable,
+        selectedIndex,
+        showLegend,
+        legendPosition,
+        legendMarkerSize,
+        legendGap,
+        showTooltip,
+        tooltipFormatter: donutTooltipFormatter,
+        title,
+        desc,
+        className: tigercatCore.classNames(className),
+        onHoveredIndexChange,
+        onSelectedIndexChange,
+        onSliceClick,
+        onSliceHover
+      }
+    ),
+    hasCenterContent && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-donut-center": "true",
+        style: {
+          position: "absolute",
+          left: `${centerX}px`,
+          top: `${centerY}px`,
+          transform: "translate(-50%, -50%)",
+          textAlign: "center",
+          pointerEvents: "none",
+          lineHeight: "1.3"
+        },
+        children: [
+          centerValue !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "text-xl font-semibold text-[color:var(--tiger-text,#1f2937)]",
+              style: { lineHeight: "1.2" },
+              children: `${centerValue}`
+            }
+          ),
+          centerLabel !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "text-xs text-[color:var(--tiger-text-secondary,#6b7280)]",
+              style: { marginTop: "2px" },
+              children: centerLabel
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var DonutChart_default = DonutChart;
+
+exports.DonutChart = DonutChart;
+exports.DonutChart_default = DonutChart_default;