@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/{chunk-4QJZT6QK.js → chunk-DUZM2SKR.js}

@@ -1,10 +1,10 @@
 'use strict';
 
+var chunkX7WESYRG_js = require('./chunk-X7WESYRG.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Tree.tsx
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var ExpandIcon = ({
   expanded,
@@ -72,7 +72,10 @@ var Tree = ({
   onNodeCollapse,
   className,
   draggable: isDraggable = false,
-  onDrop
+  onDrop,
+  virtual = false,
+  height = 400,
+  itemHeight = 32
 }) => {
   const itemRefs = react.useRef(/* @__PURE__ */ new Map());
   const dragNodeKeyRef = react.useRef(null);
@@ -394,7 +397,7 @@ var Tree = ({
       handleCheck
     ]
   );
-  const renderTreeNode = (node, level) => {
+  const renderTreeRow = (node, level) => {
     const hasChildren = !!(node.children && node.children.length > 0);
     const isExpanded = computedExpandedKeys.has(node.key);
     const isSelected = computedSelectedKeys.has(node.key);
@@ -413,105 +416,115 @@ var Tree = ({
     for (let i = 0; i < level; i++) {
       indent.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIndentClasses }, i));
     }
-    const nodeContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      indent,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: isExpandable ? "cursor-pointer" : "",
-          onClick: (e) => {
-            e.stopPropagation();
-            if (isExpandable) {
-              setActiveKey(node.key);
-              handleExpand(node.key);
-            }
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { expanded: isExpanded, hasChildren: isExpandable })
-        }
-      ),
-      checkable && /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "checkbox",
-          "aria-label": `Select ${node.label}`,
-          className: tigercatCore.treeNodeCheckboxClasses,
-          checked: isChecked,
-          ref: (input) => {
-            if (input) {
-              input.indeterminate = isHalfChecked;
-            }
-          },
-          disabled: node.disabled,
-          onClick: (e) => {
-            e.stopPropagation();
-          },
-          onChange: (e) => {
-            handleCheck(node.key, e.target.checked);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: tigercatCore.getTreeNodeClasses(isSelected, !!node.disabled, blockNode),
+        ref: (el) => {
+          itemRefs.current.set(node.key, el);
+        },
+        role: "treeitem",
+        "aria-level": level + 1,
+        "aria-disabled": node.disabled || void 0,
+        "aria-selected": effectiveSelectable ? isSelected : void 0,
+        "aria-expanded": isExpandable ? isExpanded : void 0,
+        "aria-checked": checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
+        tabIndex: isFocusable ? 0 : -1,
+        draggable: isDraggable && !node.disabled ? true : void 0,
+        onDragStart: isDraggable && !node.disabled ? (e) => {
+          e.stopPropagation();
+          dragNodeKeyRef.current = node.key;
+        } : void 0,
+        onDragOver: isDraggable ? (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        } : void 0,
+        onDrop: isDraggable ? (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (dragNodeKeyRef.current !== null && dragNodeKeyRef.current !== node.key) {
+            onDrop?.({ dragKey: dragNodeKeyRef.current, dropKey: node.key });
           }
-        }
-      ),
-      showIcon && node.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIconClasses, children: node.icon }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: tigercatCore.classNames(
-            tigercatCore.treeNodeLabelClasses,
-            isFiltered && isMatched ? "font-semibold text-[var(--tiger-primary,#2563eb)]" : ""
+          dragNodeKeyRef.current = null;
+        } : void 0,
+        onDragEnd: isDraggable ? () => {
+          dragNodeKeyRef.current = null;
+        } : void 0,
+        onFocus: () => {
+          if (!node.disabled) setActiveKey(node.key);
+        },
+        onKeyDown: (e) => handleKeyDown(e, node, isExpanded, isChecked),
+        onClick: (e) => {
+          setActiveKey(node.key);
+          if (!node.disabled) onNodeClick?.(node, e);
+          if (effectiveSelectable && !node.disabled) {
+            handleSelect(node.key, e);
+          }
+        },
+        children: [
+          indent,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: isExpandable ? "cursor-pointer" : "",
+              onClick: (e) => {
+                e.stopPropagation();
+                if (isExpandable) {
+                  setActiveKey(node.key);
+                  handleExpand(node.key);
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { expanded: isExpanded, hasChildren: isExpandable })
+            }
           ),
-          children: node.label
-        }
-      ),
-      isLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {})
-    ] });
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.treeNodeWrapperClasses, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: tigercatCore.getTreeNodeClasses(isSelected, !!node.disabled, blockNode),
-          ref: (el) => {
-            itemRefs.current.set(node.key, el);
-          },
-          role: "treeitem",
-          "aria-level": level + 1,
-          "aria-disabled": node.disabled || void 0,
-          "aria-selected": effectiveSelectable ? isSelected : void 0,
-          "aria-expanded": isExpandable ? isExpanded : void 0,
-          "aria-checked": checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
-          tabIndex: isFocusable ? 0 : -1,
-          draggable: isDraggable && !node.disabled ? true : void 0,
-          onDragStart: isDraggable && !node.disabled ? (e) => {
-            e.stopPropagation();
-            dragNodeKeyRef.current = node.key;
-          } : void 0,
-          onDragOver: isDraggable ? (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          } : void 0,
-          onDrop: isDraggable ? (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (dragNodeKeyRef.current !== null && dragNodeKeyRef.current !== node.key) {
-              onDrop?.({ dragKey: dragNodeKeyRef.current, dropKey: node.key });
+          checkable && /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": `Select ${node.label}`,
+              className: tigercatCore.treeNodeCheckboxClasses,
+              checked: isChecked,
+              ref: (input) => {
+                if (input) {
+                  input.indeterminate = isHalfChecked;
+                }
+              },
+              disabled: node.disabled,
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              onChange: (e) => {
+                handleCheck(node.key, e.target.checked);
+              }
             }
-            dragNodeKeyRef.current = null;
-          } : void 0,
-          onDragEnd: isDraggable ? () => {
-            dragNodeKeyRef.current = null;
-          } : void 0,
-          onFocus: () => {
-            if (!node.disabled) setActiveKey(node.key);
-          },
-          onKeyDown: (e) => handleKeyDown(e, node, isExpanded, isChecked),
-          onClick: (e) => {
-            setActiveKey(node.key);
-            if (!node.disabled) onNodeClick?.(node, e);
-            if (effectiveSelectable && !node.disabled) {
-              handleSelect(node.key, e);
+          ),
+          showIcon && node.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIconClasses, children: node.icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: tigercatCore.classNames(
+                tigercatCore.treeNodeLabelClasses,
+                isFiltered && isMatched ? "font-semibold text-[var(--tiger-primary,#2563eb)]" : ""
+              ),
+              children: node.label
             }
-          },
-          children: nodeContent
-        }
-      ),
+          ),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {})
+        ]
+      }
+    );
+  };
+  const renderTreeNode = (node, level) => {
+    const hasChildren = !!(node.children && node.children.length > 0);
+    const isExpanded = computedExpandedKeys.has(node.key);
+    const isFiltered = filteredNodeKeys.size > 0;
+    const isMatched = filteredNodeKeys.has(node.key);
+    const isVisible = !isFiltered || isMatched;
+    if (!isVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.treeNodeWrapperClasses, children: [
+      renderTreeRow(node, level),
       hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.treeNodeChildrenClasses, showLine && tigercatCore.treeLineClasses), children: node.children.map((child) => renderTreeNode(child, level + 1)) })
     ] }, node.key);
   };
@@ -544,7 +557,19 @@ var Tree = ({
             onChange: (e) => setInternalSearchValue(e.target.value)
           }
         ),
-        treeData.map((node) => renderTreeNode(node, 0))
+        virtual ? /* @__PURE__ */ jsxRuntime.jsx(
+          chunkX7WESYRG_js.VirtualList,
+          {
+            itemCount: visibleItems.length,
+            itemHeight,
+            height,
+            renderItem: ({ index }) => {
+              const item = visibleItems[index];
+              if (!item) return null;
+              return renderTreeRow(item.node, item.level - 1);
+            }
+          }
+        ) : treeData.map((node) => renderTreeNode(node, 0))
       ]
     }
   );

package/dist/{chunk-7BVXG3Z5.mjs → chunk-DVL53XDJ.mjs}

@@ -1,4 +1,4 @@
-import { TaskBoard } from './chunk-DBNAL6G6.mjs';
+import { TaskBoard } from './chunk-5OMSQ5PV.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var Kanban = ({

package/dist/{chunk-H3NLKNR4.mjs → chunk-DVUND2QM.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 React, { useMemo } from 'react';
-import { getChartInnerRect, resolveChartPalette, computeTreeMapNodes, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+import { getChartInnerRect, resolveChartPalette, getTreeMapGradientPrefix, computeTreeMapNodes, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var TreeMapChart = ({
@@ -15,6 +15,7 @@ var TreeMapChart = ({
   showLabels = true,
   minLabelSize = 10,
   colors,
+  gradient = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -40,6 +41,7 @@ var TreeMapChart = ({
     [width, height, padding]
   );
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const gradientPrefix = useMemo(() => getTreeMapGradientPrefix(), []);
   const nodes = useMemo(
     () => computeTreeMapNodes(data, {
       width: innerRect.width,
@@ -112,47 +114,68 @@ var TreeMapChart = ({
       title,
       desc,
       className: classNames(className),
-      children: /* @__PURE__ */ jsx("g", { "data-series-type": "treemap", children: nodes.map((node) => {
-        const opacity = getChartElementOpacity(node.index, activeIndex, {
-          activeOpacity,
-          inactiveOpacity
-        });
-        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              x: node.x,
-              y: node.y,
-              width: node.w,
-              height: node.h,
-              rx: 2,
-              fill: node.color,
-              opacity,
-              className: classNames(interactive && "cursor-pointer"),
-              style: { transition: "opacity 0.2s ease-out" },
-              onMouseEnter: (e) => handleMouseEnter(node.index, e),
-              onMouseMove: handleMouseMove,
-              onMouseLeave: handleMouseLeave,
-              onClick: () => handleClick(node.index)
-            }
-          ),
-          showLabels && node.w > 30 && node.h > minLabelSize + 4 && /* @__PURE__ */ jsx(
-            "text",
-            {
-              x: node.x + node.w / 2,
-              y: node.y + node.h / 2,
-              className: "fill-white text-xs",
-              textAnchor: "middle",
-              dominantBaseline: "middle",
-              style: {
-                pointerEvents: "none",
-                fontSize: `${Math.min(12, node.h * 0.3)}px`
-              },
-              children: node.label
-            }
-          )
-        ] }, `node-${node.index}`);
-      }) })
+      children: /* @__PURE__ */ jsxs("g", { "data-series-type": "treemap", children: [
+        gradient && /* @__PURE__ */ jsx("defs", { children: nodes.map((node) => /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${node.index}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: node.color, stopOpacity: 1 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: node.color, stopOpacity: 0.7 })
+            ]
+          },
+          `grad-${node.index}`
+        )) }),
+        nodes.map((node) => {
+          const opacity = getChartElementOpacity(node.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: node.x,
+                y: node.y,
+                width: node.w,
+                height: node.h,
+                rx: 2,
+                fill: gradient ? `url(#${gradientPrefix}-${node.index})` : node.color,
+                opacity,
+                className: classNames(interactive && "cursor-pointer"),
+                style: {
+                  transition: "opacity 0.2s ease-out, filter 0.2s ease-out",
+                  rx: "var(--tiger-chart-block-radius, 2px)",
+                  filter: activeIndex === node.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
+                },
+                onMouseEnter: (e) => handleMouseEnter(node.index, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(node.index)
+              }
+            ),
+            showLabels && node.w > 30 && node.h > minLabelSize + 4 && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: node.x + node.w / 2,
+                y: node.y + node.h / 2,
+                className: "fill-white text-xs",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                style: {
+                  pointerEvents: "none",
+                  fontSize: `${Math.min(12, node.h * 0.3)}px`
+                },
+                children: node.label
+              }
+            )
+          ] }, `node-${node.index}`);
+        })
+      ] })
     }
   );
   const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(

package/dist/{chunk-TMQA74FM.js → chunk-EF5ZTNHX.js}

@@ -119,35 +119,40 @@ var Transfer = (props) => {
           onChange: (e) => onSearch(e.target.value)
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.transferPanelBodyClasses, role: "listbox", children: items.length > 0 ? items.map((item) => {
-        const isSelected = selectedKeys.has(item.key);
-        const isDisabled = disabled || !!item.disabled;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: tigercatCore.getTransferItemClasses(isSelected, isDisabled, size),
-            role: "option",
-            "aria-selected": isSelected,
-            "aria-disabled": isDisabled,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  className: tigercatCore.getTransferCheckboxClasses(size),
-                  checked: isSelected,
-                  disabled: isDisabled,
-                  onChange: () => {
-                    if (!isDisabled) toggleFn(item.key);
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label })
-            ]
-          },
-          String(item.key)
-        );
-      }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.transferEmptyClasses, children: notFoundText }) })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: tigercatCore.transferPanelBodyClasses,
+          ...tigercatCore.getPickerListboxAria({ label: `${title} items` }),
+          children: items.length > 0 ? items.map((item) => {
+            const isSelected = selectedKeys.has(item.key);
+            const isDisabled = disabled || !!item.disabled;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                className: tigercatCore.getTransferItemClasses(isSelected, isDisabled, size),
+                ...tigercatCore.getPickerOptionAria({ selected: isSelected, disabled: isDisabled }),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: tigercatCore.getTransferCheckboxClasses(size),
+                      checked: isSelected,
+                      disabled: isDisabled,
+                      onChange: () => {
+                        if (!isDisabled) toggleFn(item.key);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label })
+                ]
+              },
+              String(item.key)
+            );
+          }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.transferEmptyClasses, children: notFoundText })
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.classNames(tigercatCore.transferBaseClasses, className), ...divProps, children: [

package/dist/{chunk-RWZIWKZR.js → chunk-F7VY6ATM.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
-var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
-var chunkM375I56K_js = require('./chunk-M375I56K.js');
-var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunkXTV5JLLC_js = require('./chunk-XTV5JLLC.js');
+var chunkWV5XHYW6_js = require('./chunk-WV5XHYW6.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');
@@ -16,6 +16,7 @@ var SunburstChart = ({
   innerRadiusRatio = 0,
   showLabels: _showLabels = true,
   colors,
+  gradient = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -41,6 +42,7 @@ var SunburstChart = ({
     [width, height, padding]
   );
   const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const gradientPrefix = react.useMemo(() => tigercatCore.getSunburstGradientPrefix(), []);
   const outerRadius = react.useMemo(
     () => Math.min(innerRect.width, innerRect.height) / 2,
     [innerRect.width, innerRect.height]
@@ -73,7 +75,7 @@ var SunburstChart = ({
     handleLegendHover,
     handleLegendLeave,
     wrapperClasses
-  } = chunkKQZ4F7FZ_js.useChartInteraction({
+  } = chunkXTV5JLLC_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -115,7 +117,7 @@ var SunburstChart = ({
   );
   const interactive = hoverable || selectable;
   const chart = /* @__PURE__ */ jsxRuntime.jsx(
-    chunkDUWAV47E_js.ChartCanvas,
+    chunkUKLVOR4E_js.ChartCanvas,
     {
       width,
       height,
@@ -123,36 +125,56 @@ var SunburstChart = ({
       title,
       desc,
       className: tigercatCore.classNames(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("g", { "data-series-type": "sunburst", children: arcs.map((arc) => {
-        const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex, {
-          activeOpacity,
-          inactiveOpacity
-        });
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-series-type": "sunburst", children: [
+        gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: arcs.map((arc) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "linearGradient",
           {
-            d: arc.path,
-            fill: arc.color,
-            opacity,
-            stroke: "#ffffff",
-            strokeWidth: 1,
-            className: tigercatCore.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__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: arc.color, stopOpacity: "1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: arc.color, stopOpacity: "0.7" })
+            ]
           },
-          `arc-${arc.index}`
-        );
-      }) })
+          `grad-${arc.index}`
+        )) }),
+        arcs.map((arc) => {
+          const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: arc.path,
+              fill: gradient ? `url(#${gradientPrefix}-${arc.index})` : arc.color,
+              opacity,
+              stroke: "var(--tiger-surface,#ffffff)",
+              strokeWidth: 1,
+              className: tigercatCore.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__ */ jsxRuntime.jsx(
-    chunkM375I56K_js.ChartTooltip,
+    chunk36ATCHP4_js.ChartTooltip,
     {
       content: tooltipContent,
       visible: resolvedHoveredIndex !== null && tooltipContent !== "",
@@ -169,7 +191,7 @@ var SunburstChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6PBNFLM7_js.ChartLegend,
+      chunkWV5XHYW6_js.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,