@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/{chunk-R5XY4EQL.js → chunk-TQOWIDQT.js}

@@ -18,33 +18,26 @@ var AvatarGroup = ({
   ...props
 }) => {
   const contextValue = React.useMemo(
-    () => ({ size, itemClass: tigercatCore.avatarGroupItemClasses }),
+    () => ({ size, itemClass: tigercatCore.getAvatarGroupItemClasses() }),
     [size]
   );
   const childArray = React__default.default.Children.toArray(children);
-  const total = childArray.length;
-  const visibleCount = max != null && max < total ? max : total;
-  const overflow = total - visibleCount;
-  const visible = childArray.slice(0, visibleCount);
-  const overflowSizeClass = tigercatCore.avatarSizeClasses[size ?? "md"];
+  const { visibleItems, overflowCount } = tigercatCore.getVisibleGroupItems(childArray, max);
   return /* @__PURE__ */ jsxRuntime.jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: tigercatCore.classNames(tigercatCore.avatarGroupBaseClasses, className),
+      className: tigercatCore.getAvatarGroupClasses(className),
       role: "group",
       "aria-label": "Avatar group",
       ...props,
       children: [
-        visible,
-        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        visibleItems,
+        overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: tigercatCore.classNames(tigercatCore.avatarGroupOverflowClasses, overflowSizeClass),
-            "aria-label": `${overflow} more`,
-            children: [
-              "+",
-              overflow
-            ]
+            className: tigercatCore.getAvatarGroupOverflowClasses(size ?? "md"),
+            "aria-label": tigercatCore.getAvatarGroupOverflowLabel(overflowCount),
+            children: tigercatCore.getAvatarGroupOverflowText(overflowCount)
           }
         )
       ]

package/dist/{chunk-IPLK4AIE.mjs → chunk-TR4DGL3U.mjs}

@@ -1,5 +1,6 @@
-import { ImagePreview } from './chunk-HLJQZUIY.mjs';
+import { ImagePreview } from './chunk-WNX4TH7U.mjs';
 import { createContext, useState, useRef, useCallback, useMemo } from 'react';
+import { registerImageGroupItem, unregisterImageGroupItem, getImageGroupClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var ImageGroupContext = createContext(null);
@@ -13,12 +14,12 @@ var ImageGroup = ({
   const [previewIndex, setPreviewIndex] = useState(0);
   const imagesRef = useRef([]);
   const register = useCallback((src) => {
-    const idx = imagesRef.current.length;
-    imagesRef.current = [...imagesRef.current, src];
-    return idx;
+    const result = registerImageGroupItem(imagesRef.current, src);
+    imagesRef.current = result.items;
+    return result.index;
   }, []);
   const unregister = useCallback((src) => {
-    imagesRef.current = imagesRef.current.filter((s) => s !== src);
+    imagesRef.current = unregisterImageGroupItem(imagesRef.current, src);
   }, []);
   const openPreview = useCallback(
     (index) => {
@@ -33,7 +34,7 @@ var ImageGroup = ({
     () => ({ register, unregister, openPreview }),
     [register, unregister, openPreview]
   );
-  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: className || "tiger-image-group", role: "group", children: [
+  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: getImageGroupClasses(className), role: "group", children: [
     children,
     preview && /* @__PURE__ */ jsx(
       ImagePreview,

package/dist/{chunk-QAO5KANE.mjs → chunk-TULQETJ5.mjs}

@@ -1,5 +1,5 @@
 import { createContext, useMemo } from 'react';
-import { classNames, getAlignClasses, getJustifyClasses, getGutterStyles } from '@expcat/tigercat-core';
+import { classNames, getRowGutterClasses, getAlignClasses, getJustifyClasses, getRowGutterStyleVars } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Row.tsx
@@ -19,14 +19,15 @@ var Row = ({
       "flex",
       "w-full",
       wrap && "flex-wrap",
+      getRowGutterClasses(gutter),
       getAlignClasses(align),
       getJustifyClasses(justify),
       className
     ),
-    [wrap, align, justify, className]
+    [gutter, wrap, align, justify, className]
   );
   const mergedStyle = useMemo(
-    () => ({ ...getGutterStyles(gutter).rowStyle, ...style }),
+    () => ({ ...getRowGutterStyleVars(gutter), ...style }),
     [gutter, style]
   );
   const contextValue = useMemo(() => ({ gutter }), [gutter]);

package/dist/{chunk-4APNERYR.js → chunk-U356F7GU.js}

@@ -61,9 +61,7 @@ var AutoComplete = (props) => {
   function openDropdown() {
     if (disabled) return;
     setIsOpen(true);
-    if (defaultActiveFirstOption && filteredOptions.length > 0) {
-      setActiveIndex(0);
-    }
+    setActiveIndex(tigercatCore.getInitialPickerActiveIndex(filteredOptions, defaultActiveFirstOption));
   }
   function closeDropdown() {
     setIsOpen(false);
@@ -79,7 +77,7 @@ var AutoComplete = (props) => {
     }
     if (defaultActiveFirstOption) {
       const newFiltered = tigercatCore.filterAutoCompleteOptions(options, val, filterOption);
-      setActiveIndex(newFiltered.length > 0 ? 0 : -1);
+      setActiveIndex(tigercatCore.getInitialPickerActiveIndex(newFiltered, true));
     }
   }
   function handleSelect(option) {
@@ -105,24 +103,11 @@ var AutoComplete = (props) => {
     }
     switch (e.key) {
       case "ArrowDown":
-        e.preventDefault();
-        if (filteredOptions.length > 0) {
-          setActiveIndex((prev) => {
-            let next = prev + 1;
-            while (next < filteredOptions.length && filteredOptions[next].disabled) next++;
-            return next < filteredOptions.length ? next : prev;
-          });
-        }
-        break;
       case "ArrowUp":
+      case "Home":
+      case "End":
         e.preventDefault();
-        if (filteredOptions.length > 0) {
-          setActiveIndex((prev) => {
-            let p = prev - 1;
-            while (p >= 0 && filteredOptions[p].disabled) p--;
-            return p >= 0 ? p : prev;
-          });
-        }
+        setActiveIndex((prev) => tigercatCore.getPickerNavigationIndex(filteredOptions, prev, e.key));
         break;
       case "Enter":
         e.preventDefault();
@@ -157,11 +142,7 @@ var AutoComplete = (props) => {
         value: inputValue,
         placeholder,
         disabled,
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-controls": isOpen ? listboxId : void 0,
-        "aria-activedescendant": isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
+        ...tigercatCore.getPickerComboboxAria({ expanded: isOpen, listboxId, activeIndex }),
         autoComplete: "off",
         onChange: handleInput,
         onFocus: openDropdown,
@@ -187,13 +168,14 @@ var AutoComplete = (props) => {
         )
       }
     ),
-    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { id: listboxId, role: "listbox", className: tigercatCore.autoCompleteDropdownClasses, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...tigercatCore.getPickerListboxAria({ id: listboxId }), className: tigercatCore.autoCompleteDropdownClasses, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        id: `${listboxId}-option-${index}`,
-        role: "option",
-        "aria-selected": String(option.value) === String(value),
-        "aria-disabled": option.disabled,
+        id: tigercatCore.getPickerOptionId(listboxId, index),
+        ...tigercatCore.getPickerOptionAria({
+          selected: String(option.value) === String(value),
+          disabled: !!option.disabled
+        }),
         className: tigercatCore.getAutoCompleteOptionClasses(
           String(option.value) === String(value),
           !!option.disabled,

package/dist/{chunk-AGR3FM3V.js → chunk-UB6SHKPR.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var chunkKNBNE74O_js = require('./chunk-KNBNE74O.js');
+var chunkACQLSECT_js = require('./chunk-ACQLSECT.js');
 var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
 var ImageGroupContext = react.createContext(null);
@@ -15,12 +16,12 @@ var ImageGroup = ({
   const [previewIndex, setPreviewIndex] = react.useState(0);
   const imagesRef = react.useRef([]);
   const register = react.useCallback((src) => {
-    const idx = imagesRef.current.length;
-    imagesRef.current = [...imagesRef.current, src];
-    return idx;
+    const result = tigercatCore.registerImageGroupItem(imagesRef.current, src);
+    imagesRef.current = result.items;
+    return result.index;
   }, []);
   const unregister = react.useCallback((src) => {
-    imagesRef.current = imagesRef.current.filter((s) => s !== src);
+    imagesRef.current = tigercatCore.unregisterImageGroupItem(imagesRef.current, src);
   }, []);
   const openPreview = react.useCallback(
     (index) => {
@@ -35,10 +36,10 @@ var ImageGroup = ({
     () => ({ register, unregister, openPreview }),
     [register, unregister, openPreview]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className || "tiger-image-group", role: "group", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.getImageGroupClasses(className), role: "group", children: [
     children,
     preview && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKNBNE74O_js.ImagePreview,
+      chunkACQLSECT_js.ImagePreview,
       {
         open: previewVisible,
         images: imagesRef.current,

package/dist/{chunk-Z6F67MJE.mjs → chunk-UBP7HZSU.mjs}

@@ -54,9 +54,9 @@ var ChartLegend = ({
           {
             type: interactive ? "button" : void 0,
             className: classNames(
-              "flex items-center gap-2 text-sm",
+              "flex items-center gap-2 text-sm rounded-[var(--tiger-chart-legend-row-radius,0)]",
               "text-[color:var(--tiger-text-secondary,#6b7280)]",
-              interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] transition-colors" : "cursor-default",
+              interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] hover:bg-[var(--tiger-chart-legend-row-hover-bg,transparent)] transition-colors" : "cursor-default",
               item.active === false ? "opacity-50" : void 0
             ),
             role: "listitem",
@@ -72,7 +72,8 @@ var ChartLegend = ({
                   style: {
                     width: `${markerSize}px`,
                     height: `${markerSize}px`,
-                    backgroundColor: item.color
+                    background: `var(--tiger-chart-legend-marker-image, ${item.color})`,
+                    "--tiger-chart-legend-marker-color": item.color
                   },
                   "aria-hidden": "true",
                   "data-legend-marker": "true"

package/dist/{chunk-HZ5Z5Y2J.mjs → chunk-UJ5NMLZN.mjs}

@@ -1,5 +1,5 @@
 import { useId, useState, useRef, useMemo, useEffect } from 'react';
-import { filterOptions, flattenSelectOptions, getSelectTriggerClasses, classNames, selectBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, selectDropdownBaseClasses, selectSearchInputClasses, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses, checkSolidIcon20PathD } from '@expcat/tigercat-core';
+import { filterOptions, flattenSelectOptions, findFirstEnabledIndex, getSelectTriggerClasses, classNames, selectBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, selectDropdownBaseClasses, selectSearchInputClasses, findNextEnabledIndex, findLastEnabledIndex, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses, checkSolidIcon20PathD } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Select.tsx
@@ -83,27 +83,9 @@ var Select = (props) => {
     return props.value === option.value;
   };
   const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
-  const findFirstEnabledIndex = () => flatFilteredOptions.findIndex((opt) => !opt.disabled);
-  const findLastEnabledIndex = () => {
-    for (let i = flatFilteredOptions.length - 1; i >= 0; i--) {
-      if (!flatFilteredOptions[i]?.disabled) {
-        return i;
-      }
-    }
-    return -1;
-  };
-  const findNextEnabledIndex = (current, direction) => {
-    if (flatFilteredOptions.length === 0) {
-      return -1;
-    }
-    const start = current < 0 ? direction === 1 ? 0 : flatFilteredOptions.length - 1 : current + direction;
-    for (let i = start; i >= 0 && i < flatFilteredOptions.length; i += direction) {
-      if (!flatFilteredOptions[i]?.disabled) {
-        return i;
-      }
-    }
-    return current;
-  };
+  const findFirstEnabledIndex$1 = () => findFirstEnabledIndex(flatFilteredOptions);
+  const findLastEnabledIndex$1 = () => findLastEnabledIndex(flatFilteredOptions);
+  const findNextEnabledIndex$1 = (current, direction) => findNextEnabledIndex(flatFilteredOptions, current, direction);
   const focusOptionAt = (index) => {
     if (index < 0) {
       return;
@@ -181,7 +163,7 @@ var Select = (props) => {
           setIsOpen(true);
           return;
         }
-        const next = findNextEnabledIndex(activeIndex, 1);
+        const next = findNextEnabledIndex$1(activeIndex, 1);
         setActiveAndFocus(next);
         return;
       }
@@ -191,7 +173,7 @@ var Select = (props) => {
           setIsOpen(true);
           return;
         }
-        const next = findNextEnabledIndex(activeIndex, -1);
+        const next = findNextEnabledIndex$1(activeIndex, -1);
         setActiveAndFocus(next);
         return;
       }
@@ -220,25 +202,25 @@ var Select = (props) => {
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
-        const next = findNextEnabledIndex(activeIndex, 1);
+        const next = findNextEnabledIndex$1(activeIndex, 1);
         setActiveAndFocus(next);
         return;
       }
       case "ArrowUp": {
         event.preventDefault();
-        const next = findNextEnabledIndex(activeIndex, -1);
+        const next = findNextEnabledIndex$1(activeIndex, -1);
         setActiveAndFocus(next);
         return;
       }
       case "Home": {
         event.preventDefault();
-        const next = findFirstEnabledIndex();
+        const next = findFirstEnabledIndex$1();
         setActiveAndFocus(next);
         return;
       }
       case "End": {
         event.preventDefault();
-        const next = findLastEnabledIndex();
+        const next = findLastEnabledIndex$1();
         setActiveAndFocus(next);
         return;
       }
@@ -271,14 +253,14 @@ var Select = (props) => {
       case "ArrowDown": {
         event.preventDefault();
         event.stopPropagation();
-        const next = activeIndex >= 0 ? activeIndex : findFirstEnabledIndex();
+        const next = activeIndex >= 0 ? activeIndex : findFirstEnabledIndex$1();
         setActiveAndFocus(next);
         return;
       }
       case "ArrowUp": {
         event.preventDefault();
         event.stopPropagation();
-        const next = activeIndex >= 0 ? activeIndex : findLastEnabledIndex();
+        const next = activeIndex >= 0 ? activeIndex : findLastEnabledIndex$1();
         setActiveAndFocus(next);
         return;
       }
@@ -328,7 +310,7 @@ var Select = (props) => {
       }
       return flatFilteredOptions.findIndex((opt) => opt.value === value && !opt.disabled);
     })();
-    const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex();
+    const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex$1();
     setActiveIndex(nextActive);
     if (!searchable) {
       focusOptionAt(nextActive);

package/dist/chunk-UKLVOR4E.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ChartCanvas.tsx
+var ChartCanvas = ({
+  width = 320,
+  height = 200,
+  responsive = false,
+  padding = 24,
+  className,
+  title,
+  desc,
+  children,
+  ...props
+}) => {
+  const svgRef = react.useRef(null);
+  const [observedSize, setObservedSize] = react.useState(null);
+  const resizeControllerRef = react.useRef(
+    tigercatCore.createChartResizeObserverController({
+      onSizeChange: setObservedSize
+    })
+  );
+  const resolvedSize = react.useMemo(
+    () => tigercatCore.resolveResponsiveChartSize({ width, height }, responsive ? observedSize : null),
+    [width, height, responsive, observedSize]
+  );
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(resolvedSize.width, resolvedSize.height, padding),
+    [resolvedSize.width, resolvedSize.height, padding]
+  );
+  const svgClasses = react.useMemo(() => tigercatCore.classNames(tigercatCore.chartCanvasBaseClasses, className), [className]);
+  react.useEffect(() => {
+    const controller = resizeControllerRef.current;
+    if (!responsive) {
+      controller.disconnect();
+      setObservedSize(null);
+      return void 0;
+    }
+    const target = svgRef.current?.parentElement;
+    if (!target) return void 0;
+    controller.observe(target);
+    return () => controller.disconnect();
+  }, [responsive]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ...props,
+      ref: svgRef,
+      width: resolvedSize.width,
+      height: resolvedSize.height,
+      viewBox: `0 0 ${resolvedSize.width} ${resolvedSize.height}`,
+      className: svgClasses,
+      children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
+        desc ? /* @__PURE__ */ jsxRuntime.jsx("desc", { children: desc }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${innerRect.x}, ${innerRect.y})`, children })
+      ]
+    }
+  );
+};
+var ChartCanvas_default = ChartCanvas;
+
+exports.ChartCanvas = ChartCanvas;
+exports.ChartCanvas_default = ChartCanvas_default;

package/dist/{chunk-CKFE2B36.js → chunk-ULODU52Q.js}

@@ -1,9 +1,8 @@
 'use strict';
 
-var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
-var chunkBCNKTT5C_js = require('./chunk-BCNKTT5C.js');
+var chunkGRXBGL6Q_js = require('./chunk-GRXBGL6Q.js');
+var chunkPGBKMW4Q_js = require('./chunk-PGBKMW4Q.js');
 var React = require('react');
-var reactDom = require('react-dom');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -86,7 +85,7 @@ var Modal = ({
   }, [onOk, onOpenChange]);
   const handleMaskClick = React.useCallback(
     (event) => {
-      if (maskClosable && event.target === event.currentTarget) {
+      if (tigercatCore.shouldCloseOnMaskClick(event, maskClosable)) {
         handleClose();
       }
     },
@@ -135,17 +134,9 @@ var Modal = ({
     }
     tigercatCore.restoreFocus(previousActiveElementRef.current);
   }, [open]);
-  chunkZYPEO2KY_js.useEscapeKey({ enabled: open, onEscape: handleClose });
-  const handleKeyDown = React.useCallback((event) => {
-    if (event.key === "Tab" && dialogRef.current) {
-      const focusables = tigercatCore.getFocusableElements(dialogRef.current);
-      const result = tigercatCore.getFocusTrapNavigation(event.nativeEvent, focusables, document.activeElement);
-      if (result.shouldHandle && result.next) {
-        event.preventDefault();
-        result.next.focus();
-      }
-    }
-  }, []);
+  chunkPGBKMW4Q_js.useEscapeKey({ enabled: open, onEscape: handleClose });
+  chunkPGBKMW4Q_js.useBodyScrollLock({ enabled: open });
+  chunkPGBKMW4Q_js.useFocusTrap({ enabled: open, containerRef: dialogRef });
   const CloseIcon = /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -200,7 +191,6 @@ var Modal = ({
             "aria-labelledby": ariaLabelledby,
             tabIndex: -1,
             ref: dialogRef,
-            onKeyDown: handleKeyDown,
             "data-tiger-modal": "",
             children: [
               (title || titleContent || closable) && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -227,8 +217,8 @@ var Modal = ({
               ),
               children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.modalBodyClasses, children }),
               footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.modalFooterClasses, "data-tiger-modal-footer": "", children: footer }) : showDefaultFooter ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.modalFooterClasses, "data-tiger-modal-footer": "", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(chunkBCNKTT5C_js.Button, { variant: "secondary", onClick: handleClose, children: resolvedCancelText }),
-                /* @__PURE__ */ jsxRuntime.jsx(chunkBCNKTT5C_js.Button, { onClick: handleOk, children: resolvedOkText })
+                /* @__PURE__ */ jsxRuntime.jsx(chunkGRXBGL6Q_js.Button, { variant: "secondary", onClick: handleClose, children: resolvedCancelText }),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkGRXBGL6Q_js.Button, { onClick: handleOk, children: resolvedOkText })
               ] }) : null
             ]
           }
@@ -236,7 +226,7 @@ var Modal = ({
       ]
     }
   );
-  return reactDom.createPortal(modalContent, document.body);
+  return chunkPGBKMW4Q_js.renderBodyPortal(modalContent);
 };
 
 exports.Modal = Modal;

package/dist/{chunk-QQDKQLHJ.mjs → chunk-UPO4LLNK.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, getPieArcs, resolveChartPalette, buildChartLegendItems, resolveChartTooltipContent, classNames, createPieArcPath, getChartElementOpacity, computePieHoverOffset, PIE_EMPHASIS_SHADOW, PIE_BASE_SHADOW, computePieLabelLine, polarToCartesian, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { getChartInnerRect, getPieArcs, resolveChartPalette, getPieGradientPrefix, 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';
 
 var PieChart = ({
@@ -21,9 +21,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 +99,7 @@ var PieChart = ({
     [data, startAngle, endAngle, padAngle]
   );
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const gradientPrefix = useMemo(() => getPieGradientPrefix(), []);
   const cx = innerRect.width / 2;
   const cy = innerRect.height / 2;
   const labelRadius = resolvedInnerRadius + (resolvedOuterRadius - resolvedInnerRadius) / 2;
@@ -132,50 +134,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 0.2s ease-out, filter 0.3s 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(