@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-N66WEQ6M.js → chunk-CBYJXDW4.js}

@@ -108,12 +108,16 @@ var TreeSelect = (props) => {
     onChange?.(multiple ? [] : void 0);
   }
   function handleKeyDown(e) {
-    if (e.key === "Escape") {
-      e.preventDefault();
-      closeDropdown();
-    } else if ((e.key === "Enter" || e.key === " ") && !isOpen) {
-      e.preventDefault();
+    const action = tigercatCore.getPickerTriggerKeyAction(e.key, isOpen);
+    if (action === "none") return;
+    e.preventDefault();
+    if (action === "toggle") {
+      if (isOpen) closeDropdown();
+      else openDropdown();
+    } else if (action === "open") {
       openDropdown();
+    } else if (action === "close") {
+      closeDropdown();
     }
   }
   react.useEffect(() => {
@@ -132,10 +136,7 @@ var TreeSelect = (props) => {
       {
         type: "button",
         className: tigercatCore.getTreeSelectTriggerClasses(size, disabled, isOpen),
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-controls": isOpen ? listboxId : void 0,
+        ...tigercatCore.getPickerComboboxAria({ expanded: isOpen, listboxId }),
         disabled,
         onClick: toggleDropdown,
         onKeyDown: handleKeyDown,
@@ -180,7 +181,7 @@ var TreeSelect = (props) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listboxId, role: "listbox", className: tigercatCore.treeSelectDropdownClasses, children: [
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { ...tigercatCore.getPickerListboxAria({ id: listboxId }), className: tigercatCore.treeSelectDropdownClasses, children: [
       showSearch && /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -199,9 +200,7 @@ var TreeSelect = (props) => {
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            role: "option",
-            "aria-selected": selected,
-            "aria-disabled": node.disabled,
+            ...tigercatCore.getPickerOptionAria({ selected, disabled: !!node.disabled }),
             className: tigercatCore.getTreeSelectNodeClasses(selected, !!node.disabled, size),
             style: { paddingLeft: `${indent + 8}px` },
             onClick: (e) => {

package/dist/{chunk-2EOXY2LP.mjs → chunk-CCDZLSOL.mjs}

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo } from 'react';
-import { getInitialCropRect, cropCanvas, classNames, imageCropperContainerClasses, CROP_HANDLES, imageCropperImgClasses, imageCropperMaskClasses, imageCropperSelectionClasses, imageCropperDragAreaClasses, imageCropperGuideClasses, getCropperHandleClasses, moveCropRect, resizeCropRect } from '@expcat/tigercat-core';
+import { getInitialCropRect, cropCanvas, moveCropRect, resizeCropRect, classNames, imageCropperContainerClasses, CROP_HANDLES, imageCropperImgClasses, imageCropperMaskClasses, imageCropperSelectionClasses, imageCropperDragAreaClasses, imageCropperGuideClasses, getCropperHandleClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/ImageCropper.tsx
@@ -174,6 +174,65 @@ var ImageCropper = forwardRef(
       },
       [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
     );
+    const updateCropRect = useCallback(
+      (nextRect) => {
+        setCropRect(nextRect);
+        onCropChange?.(nextRect);
+      },
+      [onCropChange]
+    );
+    const handleMoveKeyDown = useCallback(
+      (e) => {
+        const step = e.shiftKey ? 10 : 1;
+        const deltas = {
+          ArrowLeft: { dx: -step, dy: 0 },
+          ArrowRight: { dx: step, dy: 0 },
+          ArrowUp: { dx: 0, dy: -step },
+          ArrowDown: { dx: 0, dy: step }
+        };
+        const delta = deltas[e.key];
+        if (!delta) return;
+        e.preventDefault();
+        updateCropRect(
+          moveCropRect(
+            cropRect,
+            delta.dx,
+            delta.dy,
+            displayDimsRef.current.w,
+            displayDimsRef.current.h
+          )
+        );
+      },
+      [cropRect, updateCropRect]
+    );
+    const handleResizeKeyDown = useCallback(
+      (e, handle) => {
+        const step = e.shiftKey ? 10 : 1;
+        const deltas = {
+          ArrowLeft: { dx: -step, dy: 0 },
+          ArrowRight: { dx: step, dy: 0 },
+          ArrowUp: { dx: 0, dy: -step },
+          ArrowDown: { dx: 0, dy: step }
+        };
+        const delta = deltas[e.key];
+        if (!delta) return;
+        e.preventDefault();
+        updateCropRect(
+          resizeCropRect(
+            cropRect,
+            handle,
+            delta.dx,
+            delta.dy,
+            displayDimsRef.current.w,
+            displayDimsRef.current.h,
+            aspectRatio,
+            minWidth,
+            minHeight
+          )
+        );
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, updateCropRect]
+    );
     const containerClasses = useMemo(
       () => classNames(imageCropperContainerClasses, className),
       [className]
@@ -262,8 +321,12 @@ var ImageCropper = forwardRef(
                 width: `${cr.width}px`,
                 height: `${cr.height}px`
               },
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "Move crop area",
               onMouseDown: (e) => handleMouseDown(e, "move"),
-              onTouchStart: (e) => handleTouchStart(e, "move")
+              onTouchStart: (e) => handleTouchStart(e, "move"),
+              onKeyDown: handleMoveKeyDown
             }
           ),
           guides && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -337,8 +400,12 @@ var ImageCropper = forwardRef(
               {
                 className: getCropperHandleClasses(handle),
                 style: pos,
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Resize crop area ${handle}`,
                 onMouseDown: (e) => handleMouseDown(e, "resize", handle),
-                onTouchStart: (e) => handleTouchStart(e, "resize", handle)
+                onTouchStart: (e) => handleTouchStart(e, "resize", handle),
+                onKeyDown: (e) => handleResizeKeyDown(e, handle)
               },
               handle
             );

package/dist/{chunk-4GV7UQJJ.js → chunk-CHPJPIW6.js}

@@ -23,48 +23,39 @@ var Watermark = ({
 }) => {
   const [base64, setBase64] = react.useState();
   const wrapperRef = react.useRef(null);
+  const renderControllerRef = react.useRef(null);
   const resolvedFont = react.useMemo(() => tigercatCore.resolveWatermarkFont(font), [font]);
-  const generate = react.useCallback(() => {
-    if (image) {
-      const img = new Image();
-      img.crossOrigin = "anonymous";
-      img.onload = () => {
-        const canvas = document.createElement("canvas");
-        const dpr = window.devicePixelRatio || 1;
-        canvas.width = width * dpr;
-        canvas.height = height * dpr;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-        ctx.scale(dpr, dpr);
-        ctx.translate(width / 2, height / 2);
-        ctx.rotate(rotate * Math.PI / 180);
-        ctx.translate(-width / 2, -height / 2);
-        ctx.drawImage(img, 0, 0, width, height);
-        setBase64(canvas.toDataURL());
-      };
-      img.src = image;
-    } else {
-      setBase64(
-        tigercatCore.renderWatermarkCanvas({
-          content,
-          width,
-          height,
-          rotate,
-          font: resolvedFont
-        })
-      );
-    }
-  }, [content, image, width, height, rotate, resolvedFont]);
   react.useEffect(() => {
-    generate();
-  }, [generate]);
+    const target = wrapperRef.current;
+    if (!target) return;
+    const controller = tigercatCore.createWatermarkRenderController({
+      getRenderOptions: () => ({
+        content,
+        image,
+        width,
+        height,
+        rotate,
+        font: resolvedFont
+      }),
+      onRender: setBase64
+    });
+    renderControllerRef.current = controller;
+    controller.observe(target);
+    controller.render();
+    return () => {
+      controller.disconnect();
+      if (renderControllerRef.current === controller) {
+        renderControllerRef.current = null;
+      }
+    };
+  }, [content, image, width, height, rotate, resolvedFont]);
   react.useEffect(() => {
     if (typeof MutationObserver === "undefined" || !wrapperRef.current) return;
     const observer = new MutationObserver((mutations) => {
       for (const m of mutations) {
         for (const node of Array.from(m.removedNodes)) {
           if (node.dataset?.watermark === "true") {
-            generate();
+            renderControllerRef.current?.render();
             return;
           }
         }
@@ -72,7 +63,7 @@ var Watermark = ({
     });
     observer.observe(wrapperRef.current, { childList: true });
     return () => observer.disconnect();
-  }, [generate]);
+  }, []);
   const overlayStyle = react.useMemo(
     () => tigercatCore.getWatermarkOverlayStyle({
       base64Url: base64,

package/dist/{chunk-ZD4BVRYG.mjs → chunk-CPQS3IFF.mjs}

@@ -1,4 +1,4 @@
-import { DropdownContext } from './chunk-2UQC3WOI.mjs';
+import { DropdownContext } from './chunk-C745DPLU.mjs';
 import { useContext } from 'react';
 import { classNames, getDropdownItemClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';

package/dist/chunk-CVXDKGNX.mjs

@@ -0,0 +1,312 @@
+import { useChartInteraction } from './chunk-6QML6T3Y.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
+import React, { useRef, useMemo, useEffect, useCallback } from 'react';
+import { getChartInnerRect, computeHeatmapCells, resolveChartTooltipContent, resolveHeatmapRenderMode, getChartElementOpacity, getHeatmapCellIndexAtPoint, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var HeatmapChart = ({
+  width = 400,
+  height = 300,
+  padding = 40,
+  data,
+  xLabels,
+  yLabels,
+  minColor = "#f0f9ff",
+  maxColor = "#2563eb",
+  colorSpace = "rgb",
+  cellRadius = 2,
+  cellGap = 1,
+  showValues = false,
+  valueFormatter,
+  renderMode = "auto",
+  canvasThreshold,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showTooltip = true,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onCellClick,
+  onCellHover
+}) => {
+  const canvasRef = useRef(null);
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onCellHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onCellClick }
+  });
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const cells = useMemo(
+    () => computeHeatmapCells(data, {
+      xLabels,
+      yLabels,
+      width: innerRect.width,
+      height: innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace
+    }),
+    [
+      data,
+      xLabels,
+      yLabels,
+      innerRect.width,
+      innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace
+    ]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, cells, void 0, (cell) => {
+      const val = valueFormatter ? valueFormatter(cell.value) : `${cell.value}`;
+      return `${cell.xLabel} \xD7 ${cell.yLabel}: ${val}`;
+    }),
+    [resolvedHoveredIndex, cells, valueFormatter]
+  );
+  const interactive = hoverable || selectable;
+  const rect = innerRect;
+  const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
+  const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
+  const resolvedRenderMode = resolveHeatmapRenderMode(cells.length, {
+    renderMode,
+    canvasThreshold
+  });
+  const shouldRenderCanvas = resolvedRenderMode === "canvas";
+  useEffect(() => {
+    if (!shouldRenderCanvas) return;
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+    context.clearRect(0, 0, rect.width, rect.height);
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.font = "10px sans-serif";
+    cells.forEach((cell, idx) => {
+      context.globalAlpha = getChartElementOpacity(idx, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      }) ?? 1;
+      context.fillStyle = cell.fill;
+      const radius = Math.max(0, Math.min(cellRadius, cell.w / 2, cell.h / 2));
+      if (radius > 0) {
+        context.beginPath();
+        context.moveTo(cell.x + radius, cell.y);
+        context.lineTo(cell.x + cell.w - radius, cell.y);
+        context.quadraticCurveTo(cell.x + cell.w, cell.y, cell.x + cell.w, cell.y + radius);
+        context.lineTo(cell.x + cell.w, cell.y + cell.h - radius);
+        context.quadraticCurveTo(
+          cell.x + cell.w,
+          cell.y + cell.h,
+          cell.x + cell.w - radius,
+          cell.y + cell.h
+        );
+        context.lineTo(cell.x + radius, cell.y + cell.h);
+        context.quadraticCurveTo(cell.x, cell.y + cell.h, cell.x, cell.y + cell.h - radius);
+        context.lineTo(cell.x, cell.y + radius);
+        context.quadraticCurveTo(cell.x, cell.y, cell.x + radius, cell.y);
+        context.closePath();
+        context.fill();
+      } else {
+        context.fillRect(cell.x, cell.y, cell.w, cell.h);
+      }
+      if (showValues) {
+        context.globalAlpha = 1;
+        context.fillStyle = "var(--tiger-text,#374151)";
+        context.fillText(
+          valueFormatter ? valueFormatter(cell.value) : `${cell.value}`,
+          cell.x + cell.w / 2,
+          cell.y + cell.h / 2
+        );
+      }
+    });
+    context.globalAlpha = 1;
+  }, [
+    shouldRenderCanvas,
+    cells,
+    rect.width,
+    rect.height,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity,
+    cellRadius,
+    showValues,
+    valueFormatter
+  ]);
+  const getCanvasPoint = useCallback((event) => {
+    const canvas = event.currentTarget;
+    const bounds = canvas.getBoundingClientRect();
+    const nativeEvent = event.nativeEvent;
+    const offsetX = typeof nativeEvent.offsetX === "number" && Number.isFinite(nativeEvent.offsetX) ? nativeEvent.offsetX : event.clientX - bounds.left;
+    const offsetY = typeof nativeEvent.offsetY === "number" && Number.isFinite(nativeEvent.offsetY) ? nativeEvent.offsetY : event.clientY - bounds.top;
+    const scaleX = bounds.width > 0 ? canvas.width / bounds.width : 1;
+    const scaleY = bounds.height > 0 ? canvas.height / bounds.height : 1;
+    return { x: offsetX * scaleX, y: offsetY * scaleY };
+  }, []);
+  const handleCanvasMouseMove = useCallback(
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      if (index === null) {
+        handleMouseLeave();
+        return;
+      }
+      handleMouseEnter(index, event);
+      handleMouseMove(event);
+    },
+    [cells, getCanvasPoint, handleMouseEnter, handleMouseLeave, handleMouseMove]
+  );
+  const handleCanvasClick = useCallback(
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      if (index !== null) {
+        handleClick(index);
+      }
+    },
+    [cells, getCanvasPoint, handleClick]
+  );
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: [
+        xLabels.map((lbl, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: i * (cellW + cellGap) + cellW / 2,
+            y: rect.height + 16,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            children: lbl
+          },
+          `x-${i}`
+        )),
+        yLabels.map((lbl, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: -8,
+            y: i * (cellH + cellGap) + cellH / 2,
+            className: chartAxisTickTextClasses,
+            textAnchor: "end",
+            dominantBaseline: "middle",
+            children: lbl
+          },
+          `y-${i}`
+        )),
+        !shouldRenderCanvas && cells.map((cell, idx) => {
+          const opacity = getChartElementOpacity(idx, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: cell.x,
+                y: cell.y,
+                width: cell.w,
+                height: cell.h,
+                rx: cellRadius,
+                fill: cell.fill,
+                opacity,
+                className: classNames(interactive && "cursor-pointer"),
+                style: {
+                  transition: "opacity 0.2s ease-out",
+                  rx: `var(--tiger-chart-block-radius, ${cellRadius}px)`
+                },
+                onMouseEnter: (e) => handleMouseEnter(idx, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(idx)
+              }
+            ),
+            showValues && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cell.x + cell.w / 2,
+                y: cell.y + cell.h / 2,
+                className: "fill-[color:var(--tiger-text,#374151)] text-[10px]",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                children: valueFormatter ? valueFormatter(cell.value) : `${cell.value}`
+              }
+            )
+          ] }, `cell-${idx}`);
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+    chart,
+    shouldRenderCanvas && /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        width: rect.width,
+        height: rect.height,
+        "data-heatmap-canvas": "true",
+        "data-heatmap-render-mode": resolvedRenderMode,
+        className: classNames(interactive && "cursor-pointer"),
+        style: {
+          position: "absolute",
+          left: `${rect.x}px`,
+          top: `${rect.y}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          pointerEvents: interactive ? "auto" : "none"
+        },
+        onMouseMove: interactive ? handleCanvasMouseMove : void 0,
+        onMouseLeave: interactive ? handleMouseLeave : void 0,
+        onClick: interactive ? handleCanvasClick : void 0
+      }
+    ),
+    tooltip
+  ] });
+};
+
+export { HeatmapChart };

package/dist/{chunk-YJ4W6DMX.mjs → chunk-D45GM4YH.mjs}

@@ -1,9 +1,9 @@
-import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
-import { ChartLegend } from './chunk-Z6F67MJE.mjs';
-import { ChartTooltip } from './chunk-LVC43YX2.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { useChartInteraction } from './chunk-6QML6T3Y.mjs';
+import { ChartLegend } from './chunk-UBP7HZSU.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
 import { useMemo } from 'react';
-import { getChartInnerRect, resolveChartPalette, computeSunburstArcs, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+import { getChartInnerRect, resolveChartPalette, getSunburstGradientPrefix, computeSunburstArcs, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var SunburstChart = ({
@@ -14,6 +14,7 @@ var SunburstChart = ({
   innerRadiusRatio = 0,
   showLabels: _showLabels = true,
   colors,
+  gradient = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -39,6 +40,7 @@ var SunburstChart = ({
     [width, height, padding]
   );
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const gradientPrefix = useMemo(() => getSunburstGradientPrefix(), []);
   const outerRadius = useMemo(
     () => Math.min(innerRect.width, innerRect.height) / 2,
     [innerRect.width, innerRect.height]
@@ -121,32 +123,52 @@ var SunburstChart = ({
       title,
       desc,
       className: classNames(className),
-      children: /* @__PURE__ */ jsx("g", { "data-series-type": "sunburst", children: arcs.map((arc) => {
-        const opacity = getChartElementOpacity(arc.index, activeIndex, {
-          activeOpacity,
-          inactiveOpacity
-        });
-        return /* @__PURE__ */ jsx(
-          "path",
+      children: /* @__PURE__ */ jsxs("g", { "data-series-type": "sunburst", children: [
+        gradient && /* @__PURE__ */ jsx("defs", { children: arcs.map((arc) => /* @__PURE__ */ jsxs(
+          "linearGradient",
           {
-            d: arc.path,
-            fill: arc.color,
-            opacity,
-            stroke: "#ffffff",
-            strokeWidth: 1,
-            className: classNames(interactive && "cursor-pointer"),
-            style: { transition: "opacity 0.2s ease-out" },
-            tabIndex: selectable ? 0 : void 0,
-            role: selectable ? "button" : "img",
-            "aria-label": arc.label,
-            onMouseEnter: (e) => handleMouseEnter(arc.index, e),
-            onMouseMove: handleMouseMove,
-            onMouseLeave: handleMouseLeave,
-            onClick: () => handleClick(arc.index)
+            id: `${gradientPrefix}-${arc.index}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: arc.color, stopOpacity: "1" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: arc.color, stopOpacity: "0.7" })
+            ]
           },
-          `arc-${arc.index}`
-        );
-      }) })
+          `grad-${arc.index}`
+        )) }),
+        arcs.map((arc) => {
+          const opacity = getChartElementOpacity(arc.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: arc.path,
+              fill: gradient ? `url(#${gradientPrefix}-${arc.index})` : arc.color,
+              opacity,
+              stroke: "var(--tiger-surface,#ffffff)",
+              strokeWidth: 1,
+              className: classNames(interactive && "cursor-pointer"),
+              style: {
+                transition: "opacity 0.2s ease-out, filter 0.2s ease-out",
+                filter: activeIndex === arc.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
+              },
+              tabIndex: selectable ? 0 : void 0,
+              role: selectable ? "button" : "img",
+              "aria-label": arc.label,
+              onMouseEnter: (e) => handleMouseEnter(arc.index, e),
+              onMouseMove: handleMouseMove,
+              onMouseLeave: handleMouseLeave,
+              onClick: () => handleClick(arc.index)
+            },
+            `arc-${arc.index}`
+          );
+        })
+      ] })
     }
   );
   const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(