@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-X7JAYXPY.js

@@ -0,0 +1,239 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
+
+
+var _chunkWV5XHYW6js = require('./chunk-WV5XHYW6.js');
+
+
+var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
+
+
+var _chunkUKLVOR4Ejs = require('./chunk-UKLVOR4E.js');
+
+// src/components/TreeMapChart.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var TreeMapChart = ({
+  width = 400,
+  height = 300,
+  padding = 8,
+  data,
+  gap = 2,
+  showLabels = true,
+  minLabelSize = 10,
+  colors,
+  gradient = false,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  tooltipFormatter: _tooltipFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onNodeClick,
+  onNodeHover
+}) => {
+  const innerRect = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getChartInnerRect.call(void 0, width, height, padding),
+    [width, height, padding]
+  );
+  const palette = _react.useMemo.call(void 0, () => _tigercatcore.resolveChartPalette.call(void 0, colors), [colors]);
+  const gradientId = _react.useId.call(void 0, );
+  const gradientPrefix = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getStableChartGradientPrefix.call(void 0, "treemap", gradientId),
+    [gradientId]
+  );
+  const nodes = _react.useMemo.call(void 0, 
+    () => _tigercatcore.computeTreeMapNodes.call(void 0, data, {
+      width: innerRect.width,
+      height: innerRect.height,
+      gap,
+      colors: palette
+    }),
+    [data, innerRect.width, innerRect.height, gap, palette]
+  );
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = _chunkXTV5JLLCjs.useChartInteraction.call(void 0, {
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => {
+      const node = nodes[index];
+      return node ? { label: node.label, value: node.value } : {};
+    },
+    onHoveredIndexChange: (index) => {
+      _optionalChain([onHoveredIndexChange, 'optionalCall', _ => _(index)]);
+      const node = index !== null ? nodes[index] : null;
+      _optionalChain([onNodeHover, 'optionalCall', _2 => _2(
+        index,
+        node ? { label: node.label, value: node.value } : null
+      )]);
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onNodeClick }
+  });
+  const total = _react.useMemo.call(void 0, () => nodes.reduce((s, n) => s + n.value, 0), [nodes]);
+  const legendItems = _react.useMemo.call(void 0, 
+    () => _tigercatcore.buildChartLegendItems.call(void 0, {
+      data: nodes,
+      palette,
+      activeIndex,
+      getLabel: (d) => d.label,
+      getColor: (d) => d.color
+    }),
+    [nodes, palette, activeIndex]
+  );
+  const tooltipContent = _react.useMemo.call(void 0, 
+    () => _tigercatcore.resolveChartTooltipContent.call(void 0, resolvedHoveredIndex, nodes, void 0, (node) => {
+      const pct = total > 0 ? (node.value / total * 100).toFixed(1) : "0";
+      return `${node.label}: ${node.value} (${pct}%)`;
+    }),
+    [resolvedHoveredIndex, nodes, total]
+  );
+  const interactive = hoverable || selectable;
+  const chart = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkUKLVOR4Ejs.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: _tigercatcore.classNames.call(void 0, className),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { "data-series-type": "treemap", children: [
+        gradient && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: nodes.map((node) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${node.index}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: node.color, stopOpacity: 1 }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: node.color, stopOpacity: 0.7 })
+            ]
+          },
+          `grad-${node.index}`
+        )) }),
+        nodes.map((node) => {
+          const opacity = _tigercatcore.getChartElementOpacity.call(void 0, node.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react2.default.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "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: _tigercatcore.classNames.call(void 0, interactive && "cursor-pointer"),
+                style: {
+                  transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,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__ */ _jsxruntime.jsx.call(void 0, 
+              "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__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkUVMQJOTXjs.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  if (!showLegend) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkWV5XHYW6js.ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+
+
+
+exports.TreeMapChart = TreeMapChart;

package/dist/chunk-X7XFQCDD.mjs

@@ -0,0 +1,168 @@
+import {
+  Timeline
+} from "./chunk-JVTAKNRO.mjs";
+import {
+  Loading
+} from "./chunk-FNJDBFKM.mjs";
+import {
+  Link
+} from "./chunk-XZVQ3PJS.mjs";
+import {
+  Tag
+} from "./chunk-TGKNEMD4.mjs";
+import {
+  Text
+} from "./chunk-HLS4CHWX.mjs";
+import {
+  Card
+} from "./chunk-P6E3DILH.mjs";
+import {
+  Avatar
+} from "./chunk-FE7PEZTI.mjs";
+
+// src/components/ActivityFeed.tsx
+import { useMemo } from "react";
+import {
+  classNames,
+  buildActivityGroups,
+  formatActivityTime,
+  toActivityTimelineItems,
+  activityItemClasses,
+  activityItemLayoutClasses,
+  activityItemBodyClasses,
+  activityItemHeaderClasses,
+  activityItemTitleGroupClasses,
+  activityItemDescriptionClasses,
+  activityItemActionsClasses
+} 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: activityItemClasses, children: /* @__PURE__ */ jsxs("div", { className: activityItemLayoutClasses, 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: activityItemBodyClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: activityItemHeaderClasses, children: [
+          /* @__PURE__ */ jsxs("div", { className: activityItemTitleGroupClasses, 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: activityItemDescriptionClasses, children: descriptionText }) : null,
+        actionNodes?.length ? /* @__PURE__ */ jsx("div", { className: activityItemActionsClasses, children: actionNodes }) : null
+      ] })
+    ] }) });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: wrapperClasses,
+        role: "feed",
+        "aria-label": "\u52A8\u6001",
+        "aria-busy": true,
+        ...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,
+        role: "feed",
+        "aria-label": "\u52A8\u6001",
+        ...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,
+      role: "feed",
+      "aria-label": "\u52A8\u6001",
+      ...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-YPHOVEVU.mjs → chunk-XATXFVKR.mjs}

@@ -1,8 +1,14 @@
-import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import { extractMentionQuery, classNames, getMentionsInputClasses, mentionsDropdownClasses, getMentionsOptionClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
 // src/components/Mentions.tsx
+import { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { classNames } from "@expcat/tigercat-core";
+import {
+  getMentionsInputClasses,
+  mentionsDropdownClasses,
+  getMentionsOptionClasses,
+  extractMentionQuery,
+  positionMentionsDropdown
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Mentions = ({
   value = "",
   prefix: triggerPrefix = "@",
@@ -20,6 +26,7 @@ var Mentions = ({
   const [query, setQuery] = useState("");
   const mentionStartRef = useRef(-1);
   const textareaRef = useRef(null);
+  const dropdownRef = useRef(null);
   const containerRef = useRef(null);
   const filteredOptions = useMemo(() => {
     if (!query) return options;
@@ -85,6 +92,11 @@ var Mentions = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen || filteredOptions.length === 0) return;
+    if (!textareaRef.current || !dropdownRef.current) return;
+    void positionMentionsDropdown(textareaRef.current, dropdownRef.current);
+  }, [isOpen, filteredOptions.length, size, rows, value]);
   const wrapperClass = classNames("relative", className);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: wrapperClass, children: [
     /* @__PURE__ */ jsx(
@@ -100,7 +112,7 @@ var Mentions = ({
         onKeyDown: handleKeydown
       }
     ),
-    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: mentionsDropdownClasses, role: "listbox", children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx("div", { ref: dropdownRef, className: mentionsDropdownClasses, role: "listbox", children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
       "div",
       {
         className: getMentionsOptionClasses(i === activeIndex, !!opt.disabled),
@@ -115,4 +127,7 @@ var Mentions = ({
 };
 var Mentions_default = Mentions;
 
-export { Mentions, Mentions_default };
+export {
+  Mentions,
+  Mentions_default
+};

package/dist/{chunk-QQDKQLHJ.mjs → chunk-XBM76P27.mjs}

@@ -1,11 +1,36 @@
-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 { useMemo } from 'react';
-import { getChartInnerRect, getPieArcs, resolveChartPalette, buildChartLegendItems, resolveChartTooltipContent, classNames, createPieArcPath, getChartElementOpacity, computePieHoverOffset, PIE_EMPHASIS_SHADOW, PIE_BASE_SHADOW, computePieLabelLine, polarToCartesian, chartAxisTickTextClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  useChartInteraction
+} from "./chunk-6QML6T3Y.mjs";
+import {
+  ChartLegend
+} from "./chunk-UBP7HZSU.mjs";
+import {
+  ChartTooltip
+} from "./chunk-NASC6XHN.mjs";
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
 
+// src/components/PieChart.tsx
+import { useId, useMemo } from "react";
+import {
+  chartAxisTickTextClasses,
+  classNames,
+  computePieHoverOffset,
+  computePieLabelLine,
+  createPieArcPath,
+  getChartElementOpacity,
+  getChartInnerRect,
+  getPieArcs,
+  getStableChartGradientPrefix,
+  PIE_BASE_SHADOW,
+  PIE_EMPHASIS_SHADOW,
+  polarToCartesian,
+  resolveChartPalette,
+  buildChartLegendItems,
+  resolveChartTooltipContent
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var PieChart = ({
   width = 320,
   height = 200,
@@ -21,9 +46,10 @@ var PieChart = ({
   labelFormatter,
   labelPosition = "inside",
   borderWidth = 2,
-  borderColor = "#ffffff",
+  borderColor = "var(--tiger-surface,#ffffff)",
   hoverOffset = 8,
   shadow = false,
+  gradient = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -98,6 +124,11 @@ var PieChart = ({
     [data, startAngle, endAngle, padAngle]
   );
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("pie", gradientId),
+    [gradientId]
+  );
   const cx = innerRect.width / 2;
   const cy = innerRect.height / 2;
   const labelRadius = resolvedInnerRadius + (resolvedOuterRadius - resolvedInnerRadius) / 2;
@@ -132,50 +163,70 @@ var PieChart = ({
       desc,
       className: classNames(className),
       children: [
-        /* @__PURE__ */ jsx("g", { "data-series-type": "pie", children: arcs.map((arc) => {
-          const color = arc.data.color ?? palette[arc.index % palette.length];
-          const path = createPieArcPath({
-            cx,
-            cy,
-            innerRadius: resolvedInnerRadius,
-            outerRadius: resolvedOuterRadius,
-            startAngle: arc.startAngle,
-            endAngle: arc.endAngle
-          });
-          const isEmphasized = activeIndex === arc.index;
-          const opacity = getChartElementOpacity(arc.index, activeIndex, {
-            activeOpacity,
-            inactiveOpacity
-          });
-          const { dx, dy } = interactive && isEmphasized && hoverOffset > 0 ? computePieHoverOffset(arc.startAngle, arc.endAngle, hoverOffset) : { dx: 0, dy: 0 };
-          return /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: path,
-              fill: color,
-              opacity,
-              stroke: borderColor,
-              strokeWidth: borderWidth,
-              strokeLinejoin: "round",
-              className: classNames(interactive && "cursor-pointer"),
-              style: {
-                transform: isEmphasized ? `translate(${dx}px, ${dy}px) scale(1.04)` : `translate(${dx}px, ${dy}px)`,
-                transformOrigin: `${cx}px ${cy}px`,
-                transition: "transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease-out, filter 0.3s ease-out",
-                filter: shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
+        /* @__PURE__ */ jsxs("g", { "data-series-type": "pie", children: [
+          gradient && /* @__PURE__ */ jsx("defs", { children: arcs.map((arc) => {
+            const color = arc.data.color ?? palette[arc.index % palette.length];
+            return /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-${arc.index}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.7 })
+                ]
               },
-              tabIndex: selectable ? 0 : void 0,
-              "data-pie-slice": "true",
-              "data-index": arc.index,
-              onMouseEnter: (e) => handleMouseEnter(arc.index, e),
-              onMouseMove: handleMouseMove,
-              onMouseLeave: handleMouseLeave,
-              onClick: () => handleClick(arc.index),
-              onKeyDown: (e) => handleKeyDown(e, arc.index)
-            },
-            `slice-${arc.index}`
-          );
-        }) }),
+              `pie-grad-${arc.index}`
+            );
+          }) }),
+          arcs.map((arc) => {
+            const color = arc.data.color ?? palette[arc.index % palette.length];
+            const path = createPieArcPath({
+              cx,
+              cy,
+              innerRadius: resolvedInnerRadius,
+              outerRadius: resolvedOuterRadius,
+              startAngle: arc.startAngle,
+              endAngle: arc.endAngle
+            });
+            const isEmphasized = activeIndex === arc.index;
+            const opacity = getChartElementOpacity(arc.index, activeIndex, {
+              activeOpacity,
+              inactiveOpacity
+            });
+            const { dx, dy } = interactive && isEmphasized && hoverOffset > 0 ? computePieHoverOffset(arc.startAngle, arc.endAngle, hoverOffset) : { dx: 0, dy: 0 };
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: path,
+                fill: gradient ? `url(#${gradientPrefix}-${arc.index})` : color,
+                opacity,
+                stroke: borderColor,
+                strokeWidth: borderWidth,
+                strokeLinejoin: "round",
+                className: classNames(interactive && "cursor-pointer"),
+                style: {
+                  transform: isEmphasized ? `translate(${dx}px, ${dy}px) scale(1.04)` : `translate(${dx}px, ${dy}px)`,
+                  transformOrigin: `${cx}px ${cy}px`,
+                  transition: "transform var(--tiger-motion-duration-relaxed,0.3s) var(--tiger-motion-ease-spring,cubic-bezier(0.4,0,0.2,1)), opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-relaxed,0.3s) var(--tiger-motion-ease-decelerate,ease-out)",
+                  filter: shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
+                },
+                tabIndex: selectable ? 0 : void 0,
+                "data-pie-slice": "true",
+                "data-index": arc.index,
+                onMouseEnter: (e) => handleMouseEnter(arc.index, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(arc.index),
+                onKeyDown: (e) => handleKeyDown(e, arc.index)
+              },
+              `slice-${arc.index}`
+            );
+          })
+        ] }),
         showLabels && labelPosition === "outside" && arcs.map((arc) => {
           const color = arc.data.color ?? palette[arc.index % palette.length];
           const line = computePieLabelLine(
@@ -266,4 +317,7 @@ var PieChart = ({
 };
 var PieChart_default = PieChart;
 
-export { PieChart, PieChart_default };
+export {
+  PieChart,
+  PieChart_default
+};