@expcat/tigercat-react 0.2.27 → 0.3.69

package/dist/chunk-MTL2QUM3.mjs

@@ -0,0 +1,107 @@
+import { Timeline } from './chunk-JVTAKNRO.mjs';
+import { Link } from './chunk-XZVQ3PJS.mjs';
+import { Loading } from './chunk-AVUXDQYO.mjs';
+import { Tag } from './chunk-TGKNEMD4.mjs';
+import { Text } from './chunk-LIV33O73.mjs';
+import { Card } from './chunk-3M2IG6IN.mjs';
+import { Avatar } from './chunk-FE7PEZTI.mjs';
+import { useMemo } from 'react';
+import { buildActivityGroups, classNames, toActivityTimelineItems, formatActivityTime } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var renderAction = (item, action, index) => {
+  const key = action.key ?? `${item.id}-action-${index}`;
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      size: "sm",
+      variant: "primary",
+      href: action.href,
+      target: action.target,
+      disabled: action.disabled,
+      onClick: () => action.onClick?.(item, action),
+      children: action.label
+    },
+    key
+  );
+};
+var ActivityFeed = ({
+  items = [],
+  groups,
+  groupBy,
+  groupOrder,
+  loading = false,
+  loadingText = "\u52A0\u8F7D\u4E2D...",
+  emptyText = "\u6682\u65E0\u52A8\u6001",
+  showAvatar = true,
+  showTime = true,
+  showGroupTitle = true,
+  renderItem,
+  renderGroupHeader,
+  className,
+  ...props
+}) => {
+  const resolvedGroups = useMemo(
+    () => buildActivityGroups(items, groups, groupBy, groupOrder),
+    [items, groups, groupBy, groupOrder]
+  );
+  const wrapperClasses = classNames(
+    "tiger-activity-feed",
+    "flex",
+    "flex-col",
+    "gap-6",
+    "w-full",
+    className
+  );
+  const renderDefaultItem = (item, index, group) => {
+    if (renderItem) return renderItem(item, index, group);
+    const titleText = item.title ?? (typeof item.content === "string" || typeof item.content === "number" ? String(item.content) : "");
+    const descriptionText = item.description;
+    const timeText = showTime ? formatActivityTime(item.time) : "";
+    const actionNodes = item.actions?.map(
+      (action, actionIndex) => renderAction(item, action, actionIndex)
+    );
+    return /* @__PURE__ */ jsx("div", { className: "tiger-activity-item", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 items-start", children: [
+      showAvatar && item.user ? /* @__PURE__ */ jsx(Avatar, { size: "sm", src: item.user.avatar, text: item.user.name, className: "shrink-0" }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+            titleText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", weight: "medium", className: "truncate", children: titleText }) : null,
+            item.status ? /* @__PURE__ */ jsx(Tag, { variant: item.status.variant ?? "default", size: "sm", className: "shrink-0", children: item.status.label }) : null
+          ] }),
+          timeText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "xs", color: "muted", className: "shrink-0 whitespace-nowrap", children: timeText }) : null
+        ] }),
+        descriptionText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", className: "mb-2 break-words", children: descriptionText }) : null,
+        actionNodes?.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: actionNodes }) : null
+      ] })
+    ] }) });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-activity-feed": true, children: /* @__PURE__ */ jsx(Card, { variant: "bordered", size: "sm", className: "tiger-activity-feed-loading", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Loading, { text: loadingText }) }) }) });
+  }
+  if (resolvedGroups.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-activity-feed": true, children: /* @__PURE__ */ jsx(Card, { variant: "bordered", size: "sm", className: "tiger-activity-feed-empty", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", children: emptyText }) }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-activity-feed": true, children: resolvedGroups.map((group, groupIndex) => {
+    const headerNode = renderGroupHeader?.(group);
+    const groupTitle = group.title;
+    const timelineItems = toActivityTimelineItems(group.items);
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      showGroupTitle && groupTitle ? headerNode ?? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", weight: "medium", color: "muted", children: groupTitle }) : null,
+      /* @__PURE__ */ jsx(
+        Timeline,
+        {
+          items: timelineItems,
+          renderItem: (timelineItem, index) => {
+            const activity = timelineItem.activity;
+            if (!activity) return null;
+            return renderDefaultItem(activity, index, group);
+          }
+        }
+      )
+    ] }, group.key ?? groupIndex);
+  }) });
+};
+var ActivityFeed_default = ActivityFeed;
+
+export { ActivityFeed, ActivityFeed_default };

package/dist/chunk-MWH6FCSE.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+
+function usePopup(options) {
+  const {
+    visible,
+    defaultVisible = false,
+    disabled = false,
+    trigger = "click",
+    placement = "top",
+    offset = 8,
+    multiTrigger = true,
+    onVisibleChange
+  } = options;
+  const isControlled = visible !== void 0;
+  const [internalVisible, setInternalVisible] = react.useState(defaultVisible);
+  const currentVisible = isControlled ? visible : internalVisible;
+  const containerRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const floatingRef = react.useRef(null);
+  const {
+    x,
+    y,
+    placement: actualPlacement
+  } = chunkZYPEO2KY_js.useFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement,
+    offset
+  });
+  const setVisible = react.useCallback(
+    (next) => {
+      if (disabled && next) return;
+      if (!isControlled) setInternalVisible(next);
+      onVisibleChange?.(next);
+    },
+    [disabled, isControlled, onVisibleChange]
+  );
+  const handleToggle = react.useCallback(() => {
+    if (!disabled) setVisible(!currentVisible);
+  }, [disabled, currentVisible, setVisible]);
+  const handleShow = react.useCallback(() => {
+    if (!disabled) setVisible(true);
+  }, [disabled, setVisible]);
+  const handleHide = react.useCallback(() => {
+    if (!disabled) setVisible(false);
+  }, [disabled, setVisible]);
+  const effectiveTrigger = multiTrigger ? trigger : "click";
+  chunkZYPEO2KY_js.useClickOutside({
+    enabled: currentVisible && effectiveTrigger === "click",
+    refs: [containerRef],
+    onOutsideClick: () => setVisible(false),
+    defer: true
+  });
+  chunkZYPEO2KY_js.useEscapeKey({
+    enabled: currentVisible && effectiveTrigger !== "manual",
+    onEscape: () => setVisible(false)
+  });
+  const floatingStyles = react.useMemo(
+    () => ({
+      position: "absolute",
+      left: x,
+      top: y,
+      transformOrigin: tigercatCore.getTransformOrigin(actualPlacement),
+      zIndex: 1e3
+    }),
+    [x, y, actualPlacement]
+  );
+  const triggerHandlers = react.useMemo(() => {
+    if (!multiTrigger) {
+      return { onClick: handleToggle };
+    }
+    return tigercatCore.buildTriggerHandlerMap(
+      effectiveTrigger,
+      { toggle: handleToggle, show: handleShow, hide: handleHide },
+      "react"
+    );
+  }, [multiTrigger, effectiveTrigger, handleToggle, handleShow, handleHide]);
+  return {
+    currentVisible,
+    setVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    x,
+    y,
+    actualPlacement,
+    floatingStyles,
+    triggerHandlers
+  };
+}
+
+exports.usePopup = usePopup;

package/dist/{chunk-5QKBBGIA.mjs → chunk-N4EMXCRQ.mjs}

@@ -1,9 +1,10 @@
 import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartLegend } from './chunk-Z6F67MJE.mjs';
 import { ChartSeries } from './chunk-SDLMB34Y.mjs';
 import { ChartTooltip } from './chunk-LVC43YX2.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
 import { useMemo, useState, useCallback } from 'react';
-import { getChartInnerRect, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, getChartGridLineDasharray, DEFAULT_CHART_COLORS, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { resolveSeriesData, getChartInnerRect, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, RADAR_SPLIT_AREA_COLORS, getRadarLabelAlign, getChartGridLineDasharray, resolveChartPalette, resolveMultiSeriesTooltipContent, defaultRadarTooltipFormatter, buildChartLegendItems, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var RadarChart = ({
@@ -43,21 +44,31 @@ var RadarChart = ({
   legendFormatter,
   legendMarkerSize = 10,
   legendGap = 8,
-  strokeColor = DEFAULT_CHART_COLORS[0],
+  strokeColor,
   strokeWidth = 2,
-  fillColor = 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 = useMemo(() => {
-    if (series && series.length > 0) return series;
-    return [{ data: data ?? [] }];
-  }, [series, data]);
+  const resolvedSeries = useMemo(
+    () => resolveSeriesData(series, data, {
+      data: []
+    }),
+    [series, data]
+  );
   const {
     resolvedHoveredIndex: _resolvedHoveredIndex,
     resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -66,7 +77,11 @@ var RadarChart = ({
     handleMouseEnter: handleHoverEnter,
     handleMouseMove,
     handleMouseLeave: handleHoverLeave,
-    handleClick: handleSelectIndex
+    handleClick: handleSelectIndex,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
   } = useChartInteraction({
     hoverable,
     hoveredIndexProp,
@@ -148,10 +163,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) => polarToCartesian(cx, cy, levelRadius, angle));
-      return createPolygonPath(ringPoints);
+      return { type: "polygon", d: createPolygonPath(ringPoints), cx, cy, r: levelRadius };
+    });
+  }, [showGrid, levels, angles, radius, cx, cy, gridShape]);
+  const splitAreaPaths = useMemo(() => {
+    if (!showSplitArea || angles.length === 0) return [];
+    const resolvedLevels = Math.max(1, Math.floor(levels));
+    const areaColors = splitAreaColors && splitAreaColors.length > 0 ? splitAreaColors : 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) => polarToCartesian(cx, cy, outerRadius, angle));
+      const innerPoints = outerIndex > 0 ? angles.map((angle) => polarToCartesian(cx, cy, innerRadius, angle)) : [];
+      return { type: "polygon-ring", outerPoints, innerPoints, color };
     });
-  }, [showGrid, levels, angles, radius, cx, cy]);
+  }, [showSplitArea, levels, angles, radius, cx, cy, gridShape, splitAreaColors, splitAreaOpacity]);
   const axisLines = useMemo(() => {
     if (!showAxis || angles.length === 0) return [];
     return angles.map((angle) => {
@@ -170,13 +205,16 @@ var RadarChart = ({
     return axisData.map((datum, index) => {
       const angle = angles[index];
       const position = polarToCartesian(cx, cy, radius + labelOffset, angle);
+      const align = labelAutoAlign ? 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 = useMemo(() => {
     if (!showLevelLabels || !showGrid || angles.length === 0) return [];
     const resolvedLevels = Math.max(1, Math.floor(levels));
@@ -205,47 +243,25 @@ var RadarChart = ({
     levelLabelFormatter
   ]);
   const dasharray = getChartGridLineDasharray(gridLineStyle);
-  const palette = useMemo(
-    () => colors && colors.length > 0 ? colors : [...DEFAULT_CHART_COLORS],
-    [colors]
-  );
-  const formatTooltip = 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}`;
-    }),
-    [tooltipFormatter]
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const tooltipContent = useMemo(
+    () => resolveMultiSeriesTooltipContent(
+      hoveredPoint,
+      resolvedSeries,
+      tooltipFormatter,
+      defaultRadarTooltipFormatter
+    ),
+    [hoveredPoint, resolvedSeries, tooltipFormatter]
   );
-  const tooltipContent = 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 = 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
-      };
+  const legendItems = useMemo(
+    () => 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]
     }),
-    [resolvedSeries, palette, legendFormatter]
-  );
-  const legendContainerClasses = classNames(
-    "flex flex-wrap",
-    legendPosition === "right" ? "flex-col gap-2" : "flex-row gap-3"
-  );
-  const wrapperClasses = classNames(
-    "inline-flex",
-    legendPosition === "right" ? "flex-row items-start gap-4" : "flex-col gap-2"
+    [resolvedSeries, palette, resolvedActiveIndex, legendFormatter]
   );
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
@@ -257,17 +273,80 @@ var RadarChart = ({
       desc,
       className: classNames(className),
       children: [
-        gridPaths.map((path, index) => /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: path,
-            className: chartGridLineClasses,
-            fill: "none",
-            strokeWidth: gridStrokeWidth,
-            strokeDasharray: dasharray
-          },
-          `grid-${index}`
-        )),
+        splitAreaPaths.map((area, index) => {
+          if (area.type === "circle-ring") {
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ 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__ */ jsx(
+                "circle",
+                {
+                  cx: area.cx,
+                  cy: area.cy,
+                  r: area.innerRadius,
+                  fill: "var(--tiger-bg,#fff)",
+                  stroke: "none"
+                }
+              ) : null
+            ] }, `split-${index}`);
+          }
+          const outerPath = createPolygonPath(area.outerPoints);
+          return /* @__PURE__ */ jsxs("g", { children: [
+            outerPath ? /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: outerPath,
+                fill: area.color,
+                fillOpacity: splitAreaOpacity,
+                stroke: "none",
+                "data-radar-split-area": "true"
+              }
+            ) : null,
+            area.innerPoints.length > 0 ? /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: createPolygonPath(area.innerPoints),
+                fill: "var(--tiger-bg,#fff)",
+                stroke: "none"
+              }
+            ) : null
+          ] }, `split-${index}`);
+        }),
+        gridPaths.map(
+          (grid, index) => grid.type === "circle" ? /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: grid.cx,
+              cy: grid.cy,
+              r: grid.r,
+              className: chartGridLineClasses,
+              fill: "none",
+              strokeWidth: gridStrokeWidth,
+              strokeDasharray: dasharray
+            },
+            `grid-${index}`
+          ) : /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: grid.d,
+              className: chartGridLineClasses,
+              fill: "none",
+              strokeWidth: gridStrokeWidth,
+              strokeDasharray: dasharray
+            },
+            `grid-${index}`
+          )
+        ),
         axisLines.map((line, index) => /* @__PURE__ */ jsx(
           "line",
           {
@@ -283,8 +362,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;
@@ -320,19 +399,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__ */ 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: 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,
@@ -354,8 +446,8 @@ var RadarChart = ({
             x: label.x,
             y: label.y,
             className: chartAxisTickTextClasses,
-            textAnchor: "middle",
-            dominantBaseline: "middle",
+            textAnchor: label.textAnchor,
+            dominantBaseline: label.dominantBaseline,
             children: label.text
           },
           `label-${index}`
@@ -393,34 +485,19 @@ var RadarChart = ({
   }
   return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
     chart,
-    /* @__PURE__ */ jsx("div", { className: legendContainerClasses, children: resolvedLegendItems.map((item) => /* @__PURE__ */ jsxs(
-      "button",
+    /* @__PURE__ */ jsx(
+      ChartLegend,
       {
-        type: "button",
-        className: 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__ */ jsx(
-            "span",
-            {
-              className: "inline-block rounded-full",
-              style: {
-                width: `${legendMarkerSize}px`,
-                height: `${legendMarkerSize}px`,
-                backgroundColor: item.color
-              }
-            }
-          ),
-          /* @__PURE__ */ 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
   ] });
 };