@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/chunk-SQGFNVYT.js

@@ -0,0 +1,222 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Anchor.tsx
+var AnchorContext = React.createContext(null);
+function useAnchorContext() {
+  return React.useContext(AnchorContext);
+}
+var AnchorLink = ({
+  href,
+  title,
+  target,
+  className,
+  children,
+  ...props
+}) => {
+  const anchorContext = useAnchorContext();
+  const register = anchorContext?.registerLink;
+  const unregister = anchorContext?.unregisterLink;
+  React.useEffect(() => {
+    if (href) {
+      register?.(href);
+    }
+    return () => {
+      unregister?.(href);
+    };
+  }, [href, register, unregister]);
+  const handleClick = (event) => {
+    event.preventDefault();
+    anchorContext?.handleLinkClick(href, event);
+  };
+  const linkClasses = React.useMemo(() => {
+    const isActive = anchorContext?.activeLink === href;
+    return tigercatCore.classNames(tigercatCore.getAnchorLinkClasses(isActive, className));
+  }, [anchorContext?.activeLink, href, className]);
+  const hasNestedLinks = React__default.default.Children.toArray(children).some(
+    (child) => React__default.default.isValidElement(child) && child.type === AnchorLink
+  );
+  if (hasNestedLinks) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "anchor-link-wrapper", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href,
+          target,
+          className: linkClasses,
+          "data-anchor-href": href,
+          onClick: handleClick,
+          ...props,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 mt-1 space-y-1", children })
+    ] });
+  }
+  const content = children ?? title;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      target,
+      className: linkClasses,
+      "data-anchor-href": href,
+      onClick: handleClick,
+      ...props,
+      children: content
+    }
+  );
+};
+var Anchor = ({
+  affix = true,
+  bounds: _bounds = 5,
+  offsetTop = 0,
+  showInkInFixed = false,
+  targetOffset,
+  getCurrentAnchor,
+  getContainer = () => window,
+  direction = "vertical",
+  className,
+  style,
+  onClick,
+  onChange,
+  children
+}) => {
+  const [activeLink, setActiveLink] = React.useState("");
+  const [links, setLinks] = React.useState([]);
+  const anchorRef = React.useRef(null);
+  const inkRef = React.useRef(null);
+  const isScrollingRef = React.useRef(false);
+  const scrollTimeoutRef = React.useRef(null);
+  const getContainerRef = React.useRef(getContainer);
+  getContainerRef.current = getContainer;
+  const getCurrentAnchorRef = React.useRef(getCurrentAnchor);
+  getCurrentAnchorRef.current = getCurrentAnchor;
+  const onChangeRef = React.useRef(onChange);
+  onChangeRef.current = onChange;
+  const scrollOffset = React.useMemo(() => targetOffset ?? offsetTop, [targetOffset, offsetTop]);
+  const registerLink = React.useCallback((href) => {
+    setLinks((prevLinks) => {
+      if (href && !prevLinks.includes(href)) {
+        return [...prevLinks, href];
+      }
+      return prevLinks;
+    });
+  }, []);
+  const unregisterLink = React.useCallback((href) => {
+    setLinks((prevLinks) => prevLinks.filter((l) => l !== href));
+  }, []);
+  const scrollTo = React.useCallback(
+    (href) => {
+      const container = getContainerRef.current();
+      tigercatCore.scrollToAnchor(href, container, scrollOffset);
+    },
+    [scrollOffset]
+  );
+  const handleLinkClick = React.useCallback(
+    (href, event) => {
+      onClick?.(event, href);
+      isScrollingRef.current = true;
+      setActiveLink(href);
+      scrollTo(href);
+      if (scrollTimeoutRef.current !== null) clearTimeout(scrollTimeoutRef.current);
+      scrollTimeoutRef.current = setTimeout(() => {
+        isScrollingRef.current = false;
+        scrollTimeoutRef.current = null;
+      }, 500);
+    },
+    [onClick, scrollTo]
+  );
+  React.useEffect(() => {
+    let stop = null;
+    const timeoutId = setTimeout(() => {
+      const container = getContainerRef.current();
+      const root = container === window ? null : container;
+      stop = tigercatCore.createAnchorObserver(links, {
+        offsetTop: scrollOffset,
+        root,
+        onChange: (newActiveLink) => {
+          if (isScrollingRef.current) return;
+          const finalActiveLink = getCurrentAnchorRef.current ? getCurrentAnchorRef.current(newActiveLink) : newActiveLink;
+          setActiveLink((prev) => {
+            if (finalActiveLink !== prev) {
+              onChangeRef.current?.(finalActiveLink);
+              return finalActiveLink;
+            }
+            return prev;
+          });
+        }
+      });
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      stop?.();
+      if (scrollTimeoutRef.current !== null) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [links, scrollOffset]);
+  React.useEffect(() => {
+    if (!inkRef.current || !anchorRef.current || !activeLink) {
+      return;
+    }
+    const activeLinkElement = anchorRef.current.querySelector(
+      `[data-anchor-href="${activeLink}"]`
+    );
+    if (!activeLinkElement) {
+      return;
+    }
+    const anchorRect = anchorRef.current.getBoundingClientRect();
+    const linkRect = activeLinkElement.getBoundingClientRect();
+    if (direction === "vertical") {
+      inkRef.current.style.top = `${linkRect.top - anchorRect.top}px`;
+      inkRef.current.style.height = `${linkRect.height}px`;
+    } else {
+      inkRef.current.style.left = `${linkRect.left - anchorRect.left}px`;
+      inkRef.current.style.width = `${linkRect.width}px`;
+    }
+  }, [activeLink, direction]);
+  const wrapperClasses = React.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getAnchorWrapperClasses(affix, className)),
+    [affix, className]
+  );
+  const inkContainerClasses = React.useMemo(() => tigercatCore.getAnchorInkContainerClasses(direction), [direction]);
+  const inkActiveClasses = React.useMemo(() => tigercatCore.getAnchorInkActiveClasses(direction), [direction]);
+  const linkListClasses = React.useMemo(() => tigercatCore.getAnchorLinkListClasses(direction), [direction]);
+  const showInk = React.useMemo(() => !affix || showInkInFixed, [affix, showInkInFixed]);
+  const wrapperStyle = React.useMemo(() => {
+    const baseStyle = {};
+    if (affix && offsetTop > 0) {
+      baseStyle.top = `${offsetTop}px`;
+    }
+    return { ...baseStyle, ...style };
+  }, [affix, offsetTop, style]);
+  const contextValue = React.useMemo(
+    () => ({
+      activeLink,
+      direction,
+      registerLink,
+      unregisterLink,
+      handleLinkClick,
+      scrollTo
+    }),
+    [activeLink, direction, registerLink, unregisterLink, handleLinkClick, scrollTo]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AnchorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: anchorRef, className: wrapperClasses, style: wrapperStyle, children: [
+    showInk && /* @__PURE__ */ jsxRuntime.jsx("div", { className: inkContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: inkRef, className: inkActiveClasses }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: linkListClasses, children })
+  ] }) });
+};
+var Anchor_default = Anchor;
+
+exports.Anchor = Anchor;
+exports.AnchorLink = AnchorLink;
+exports.Anchor_default = Anchor_default;
+exports.useAnchorContext = useAnchorContext;

package/dist/{chunk-RFPXIDAK.js → chunk-SR5OHSI7.js}

@@ -25,8 +25,14 @@ var Splitter = ({
   children
 }) => {
   const containerRef = React.useRef(null);
+  const dragSessionRef = React.useRef(null);
   const [paneSizes, setPaneSizes] = React.useState([]);
   const draggingRef = React.useRef(null);
+  const cleanupDragSession = React.useCallback(() => {
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = null;
+  }, []);
+  React.useEffect(() => cleanupDragSession, [cleanupDragSession]);
   React.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -56,38 +62,41 @@ var Splitter = ({
     (index, e) => {
       if (disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       draggingRef.current = {
         index,
         startPos: direction === "horizontal" ? e.clientX : e.clientY,
         startSizes: [...paneSizes]
       };
       onResizeStart?.({ index, sizes: [...paneSizes] });
-      const onMouseMove = (ev) => {
-        const drag = draggingRef.current;
-        if (!drag) return;
-        const currentPos = direction === "horizontal" ? ev.clientX : ev.clientY;
-        const delta = currentPos - drag.startPos;
-        const newSizes = tigercatCore.resizePanes(drag.startSizes, drag.index, delta, mins, maxes);
-        if (newSizes) {
-          setPaneSizes(newSizes);
-          onSizesChange?.(newSizes);
-          onResize?.({ index: drag.index, sizes: newSizes });
-        }
-      };
-      const onMouseUp = (ev) => {
-        const drag = draggingRef.current;
-        if (drag) {
-          const currentPos = direction === "horizontal" ? ev.clientX : ev.clientY;
+      dragSessionRef.current = tigercatCore.createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (!drag) return;
+          const currentPos = direction === "horizontal" ? currentX : currentY;
           const delta = currentPos - drag.startPos;
-          const finalSizes = tigercatCore.resizePanes(drag.startSizes, drag.index, delta, mins, maxes) ?? drag.startSizes;
-          onResizeEnd?.({ index: drag.index, sizes: finalSizes });
+          const newSizes = tigercatCore.resizePanes(drag.startSizes, drag.index, delta, mins, maxes);
+          if (newSizes) {
+            setPaneSizes(newSizes);
+            onSizesChange?.(newSizes);
+            onResize?.({ index: drag.index, sizes: newSizes });
+          }
+        },
+        onEnd: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (drag) {
+            const currentPos = direction === "horizontal" ? currentX : currentY;
+            const delta = currentPos - drag.startPos;
+            const finalSizes = tigercatCore.resizePanes(drag.startSizes, drag.index, delta, mins, maxes) ?? drag.startSizes;
+            onResizeEnd?.({ index: drag.index, sizes: finalSizes });
+          }
+          draggingRef.current = null;
+          dragSessionRef.current = null;
         }
-        draggingRef.current = null;
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-      };
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      });
     },
     [
       disabled,
@@ -95,6 +104,7 @@ var Splitter = ({
       paneSizes,
       mins,
       maxes,
+      cleanupDragSession,
       onResizeStart,
       onResize,
       onResizeEnd,

package/dist/{chunk-GBTKAKUD.mjs → chunk-SRNBEFJO.mjs}

@@ -1,5 +1,5 @@
 import { useId, useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import { getCascaderDisplayLabel, getCascaderColumns, flattenCascaderOptions, filterCascaderOptions, classNames, getCascaderTriggerClasses, isCascaderOptionExpandable, cascaderBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, cascaderSearchInputClasses, cascaderEmptyStateClasses, cascaderSearchResultClasses, cascaderColumnClasses, getCascaderOptionClasses, cascaderDropdownClasses } from '@expcat/tigercat-core';
+import { getCascaderDisplayLabel, getCascaderColumns, flattenCascaderOptions, filterCascaderOptions, classNames, getCascaderTriggerClasses, isCascaderOptionExpandable, getPickerTriggerKeyAction, cascaderBaseClasses, getPickerComboboxAria, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, cascaderSearchInputClasses, cascaderEmptyStateClasses, getPickerListboxAria, getPickerOptionAria, cascaderSearchResultClasses, cascaderColumnClasses, getCascaderOptionClasses, cascaderDropdownClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Cascader.tsx
@@ -126,20 +126,15 @@ var Cascader = (props) => {
   );
   const handleTriggerKeyDown = useCallback(
     (e) => {
-      switch (e.key) {
-        case "Enter":
-        case " ":
-          e.preventDefault();
-          toggleOpen();
-          break;
-        case "Escape":
-          e.preventDefault();
-          setIsOpen(false);
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (!isOpen) setIsOpen(true);
-          break;
+      const action = getPickerTriggerKeyAction(e.key, isOpen);
+      if (action === "none") return;
+      e.preventDefault();
+      if (action === "toggle") {
+        toggleOpen();
+      } else if (action === "open") {
+        setIsOpen(true);
+      } else if (action === "close") {
+        setIsOpen(false);
       }
     },
     [toggleOpen, isOpen]
@@ -154,10 +149,7 @@ var Cascader = (props) => {
         type: "button",
         className: triggerClasses,
         disabled,
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-controls": isOpen ? listboxId : void 0,
+        ...getPickerComboboxAria({ expanded: isOpen, listboxId }),
         onClick: toggleOpen,
         onKeyDown: handleTriggerKeyDown,
         children: [
@@ -227,16 +219,17 @@ var Cascader = (props) => {
           ),
           isSearchMode ? (
             // Search results
-            searchResults.length === 0 ? /* @__PURE__ */ jsx("div", { className: cascaderEmptyStateClasses, children: notFoundText }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto", role: "listbox", id: listboxId, children: searchResults.map((item) => /* @__PURE__ */ jsx(
+            searchResults.length === 0 ? /* @__PURE__ */ jsx("div", { className: cascaderEmptyStateClasses, children: notFoundText }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto", ...getPickerListboxAria({ id: listboxId }), children: searchResults.map((item) => /* @__PURE__ */ jsx(
               "div",
               {
                 className: classNames(
                   cascaderSearchResultClasses,
                   item.disabled && "opacity-50 cursor-not-allowed"
                 ),
-                role: "option",
-                "aria-selected": value?.join(",") === item.valuePath.join(","),
-                "aria-disabled": item.disabled,
+                ...getPickerOptionAria({
+                  selected: value?.join(",") === item.valuePath.join(","),
+                  disabled: item.disabled
+                }),
                 onClick: () => handleSearchResultClick(item.valuePath, item.disabled),
                 children: item.label
               },
@@ -248,8 +241,10 @@ var Cascader = (props) => {
               "div",
               {
                 className: cascaderColumnClasses,
-                role: "listbox",
-                id: colIndex === 0 ? listboxId : void 0,
+                ...getPickerListboxAria({
+                  id: colIndex === 0 ? listboxId : void 0,
+                  label: `Level ${colIndex + 1}`
+                }),
                 "aria-label": `Level ${colIndex + 1}`,
                 children: col.options.map((option) => {
                   const isSelected = col.selectedValue === option.value;
@@ -258,9 +253,10 @@ var Cascader = (props) => {
                     "div",
                     {
                       className: getCascaderOptionClasses(isSelected, !!option.disabled, size),
-                      role: "option",
-                      "aria-selected": isSelected,
-                      "aria-disabled": option.disabled,
+                      ...getPickerOptionAria({
+                        selected: isSelected,
+                        disabled: !!option.disabled
+                      }),
                       onClick: () => handleOptionClick(option, colIndex),
                       onMouseEnter: () => handleOptionHover(option, colIndex),
                       children: [

package/dist/{chunk-SQK2CPSV.mjs → chunk-SXNHXUUF.mjs}

@@ -1,11 +1,14 @@
 import { useState, useRef, useMemo, useCallback } from 'react';
-import { getFixedVirtualRange, classNames, virtualListInnerClasses, virtualListContainerClasses } from '@expcat/tigercat-core';
+import { variableSizeStrategy, dynamicSizeStrategy, fixedSizeStrategy, classNames, virtualListInnerClasses, virtualListContainerClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/VirtualList.tsx
 var VirtualList = ({
   itemCount = 0,
   itemHeight = 40,
+  estimatedItemHeight,
+  getItemHeight,
+  sizeStrategy: customStrategy,
   height = 400,
   overscan = 5,
   className,
@@ -14,9 +17,15 @@ var VirtualList = ({
 }) => {
   const [scrollTop, setScrollTop] = useState(0);
   const containerRef = useRef(null);
+  const strategy = useMemo(() => {
+    if (customStrategy) return customStrategy;
+    if (getItemHeight) return variableSizeStrategy(getItemHeight, itemCount);
+    if (estimatedItemHeight !== void 0) return dynamicSizeStrategy(estimatedItemHeight, itemCount);
+    return fixedSizeStrategy(itemHeight);
+  }, [customStrategy, getItemHeight, estimatedItemHeight, itemHeight, itemCount]);
   const range = useMemo(
-    () => getFixedVirtualRange(scrollTop, height, itemHeight, itemCount, overscan),
-    [scrollTop, height, itemHeight, itemCount, overscan]
+    () => strategy.getRange(scrollTop, height, itemCount, overscan),
+    [scrollTop, height, itemCount, overscan, strategy]
   );
   const handleScroll = useCallback(() => {
     if (containerRef.current) {
@@ -25,13 +34,15 @@ var VirtualList = ({
       onScroll?.(st);
     }
   }, [onScroll]);
-  const { startIndex, endIndex, offsetTop, totalHeight } = range;
+  const { startIndex, endIndex, totalHeight } = range;
   const items = [];
   for (let i = startIndex; i <= endIndex; i++) {
+    const itemH = strategy.getItemHeight(i);
     items.push(
-      /* @__PURE__ */ jsx("div", { style: { height: `${itemHeight}px`, width: "100%" }, children: renderItem({ index: i }) }, i)
+      /* @__PURE__ */ jsx("div", { style: { height: `${itemH}px`, width: "100%" }, children: renderItem({ index: i }) }, i)
     );
   }
+  const offsetTop = startIndex >= 0 ? strategy.getItemOffset(startIndex) : 0;
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/{chunk-OE6WTZES.js → chunk-TLJD4GFY.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
-var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkXTV5JLLC_js = require('./chunk-XTV5JLLC.js');
+var chunkWV5XHYW6_js = require('./chunk-WV5XHYW6.js');
 var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
-var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var chunk36ATCHP4_js = require('./chunk-36ATCHP4.js');
 var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
-var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunkUKLVOR4E_js = require('./chunk-UKLVOR4E.js');
 var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -56,6 +56,8 @@ var LineChart = ({
   areaOpacity = 0.15,
   pointHollow = false,
   animated = false,
+  strokeGradient = false,
+  pointGradient = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -88,7 +90,7 @@ var LineChart = ({
     handleLegendHover,
     handleLegendLeave,
     wrapperClasses
-  } = chunkKQZ4F7FZ_js.useChartInteraction({
+  } = chunkXTV5JLLC_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -130,8 +132,13 @@ var LineChart = ({
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
   const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const seriesKeys = react.useMemo(
+    () => tigercatCore.buildChartSeriesKeys(resolvedSeries, { prefix: "line-" }),
+    [resolvedSeries]
+  );
   const seriesData = react.useMemo(
     () => resolvedSeries.map((s, seriesIndex) => {
+      const seriesKey = seriesKeys[seriesIndex];
       const color = s.color ?? palette[seriesIndex % palette.length];
       const points = s.data.map((datum, pointIndex) => ({
         x: resolvedXScale.map(datum.x),
@@ -149,6 +156,7 @@ var LineChart = ({
       return {
         series: s,
         seriesIndex,
+        seriesKey,
         color,
         linePath,
         areaPath,
@@ -166,6 +174,7 @@ var LineChart = ({
     }),
     [
       resolvedSeries,
+      seriesKeys,
       palette,
       resolvedXScale,
       resolvedYScale,
@@ -233,7 +242,7 @@ var LineChart = ({
     [selectable, handleSeriesSelect]
   );
   const chart = /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDUWAV47E_js.ChartCanvas,
+    chunkUKLVOR4E_js.ChartCanvas,
     {
       width,
       height,
@@ -242,7 +251,7 @@ var LineChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
-        (seriesData.some((sd) => sd.showArea) || animated) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+        (seriesData.some((sd) => sd.showArea) || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
           animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
               .tiger-line-animated {
                 animation: tiger-line-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
@@ -255,7 +264,7 @@ var LineChart = ({
           seriesData.filter((sd) => sd.showArea).map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
             "linearGradient",
             {
-              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              id: `${gradientPrefix}-${sd.seriesKey}`,
               x1: "0",
               y1: "0",
               x2: "0",
@@ -265,7 +274,44 @@ var LineChart = ({
                 /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: sd.color, stopOpacity: 0.02 })
               ]
             },
-            `area-grad-${sd.seriesIndex}`
+            `area-grad-${sd.seriesKey}`
+          )),
+          pointGradient && seriesData.map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "radialGradient",
+            {
+              id: `${gradientPrefix}-point-${sd.seriesKey}`,
+              cx: "0.5",
+              cy: "0.5",
+              r: "0.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 30%)` }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "70%", stopColor: sd.color }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "stop",
+                  {
+                    offset: "100%",
+                    stopColor: `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                  }
+                )
+              ]
+            },
+            `point-grad-${sd.seriesKey}`
+          )),
+          strokeGradient && seriesData.map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+              x1: "0",
+              y1: "0",
+              x2: "1",
+              y2: "0",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 12%)` }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: sd.color }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: `color-mix(in oklab, ${sd.color} 100%, black 8%)` })
+              ]
+            },
+            `stroke-grad-${sd.seriesKey}`
           ))
         ] }),
         showGrid && /* @__PURE__ */ jsxRuntime.jsx(
@@ -312,6 +358,7 @@ var LineChart = ({
             name: sd.series.name,
             type: "line",
             opacity: sd.opacity,
+            "data-series-key": sd.seriesKey,
             className: tigercatCore.classNames(sd.series.className, (hoverable || selectable) && "cursor-pointer"),
             onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
             onMouseLeave: handleSeriesHoverLeave,
@@ -323,10 +370,11 @@ var LineChart = ({
                 "path",
                 {
                   d: sd.areaPath,
-                  fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                  fill: `url(#${gradientPrefix}-${sd.seriesKey})`,
                   stroke: "none",
                   className: "transition-opacity duration-300",
-                  "data-area-series": sd.seriesIndex
+                  "data-area-series": sd.seriesIndex,
+                  "data-series-key": sd.seriesKey
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -334,7 +382,7 @@ var LineChart = ({
                 {
                   d: sd.linePath,
                   fill: "none",
-                  stroke: sd.color,
+                  stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                   strokeWidth: sd.strokeWidth,
                   strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
                   strokeDashoffset: animated ? "1" : void 0,
@@ -345,7 +393,8 @@ var LineChart = ({
                     "transition-opacity duration-200",
                     animated && "tiger-line-animated"
                   ),
-                  "data-line-series": sd.seriesIndex
+                  "data-line-series": sd.seriesIndex,
+                  "data-series-key": sd.seriesKey
                 }
               ),
               sd.showPoints && sd.points.map((point) => {
@@ -357,12 +406,13 @@ var LineChart = ({
                     cx: point.x,
                     cy: point.y,
                     r: isHovered ? hoverSize : sd.pointSize,
-                    fill: sd.pointHollow ? "white" : sd.pointColor,
+                    fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                     stroke: sd.pointHollow ? sd.pointColor : "none",
                     strokeWidth: sd.pointHollow ? 2 : 0,
-                    className: "transition-all duration-200 ease-out",
+                    className: tigercatCore.linePointTransitionClasses,
                     style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
                     "data-point-index": point.pointIndex,
+                    "data-series-key": sd.seriesKey,
                     onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
                     onMouseMove: handlePointMouseMove,
                     onMouseLeave: handlePointMouseLeave,
@@ -371,18 +421,18 @@ var LineChart = ({
                       handlePointClick(sd.seriesIndex, point.pointIndex);
                     }
                   },
-                  `point-${sd.seriesIndex}-${point.pointIndex}`
+                  `point-${sd.seriesKey}-${point.pointIndex}`
                 );
               })
             ]
           },
-          `series-${sd.seriesIndex}`
+          sd.seriesKey
         ))
       ]
     }
   );
   const tooltip = showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-    chunkM375I56K_js.ChartTooltip,
+    chunk36ATCHP4_js.ChartTooltip,
     {
       content: tooltipContent,
       visible: hoveredPointInfo !== null && tooltipContent !== "",
@@ -399,7 +449,7 @@ var LineChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6PBNFLM7_js.ChartLegend,
+      chunkWV5XHYW6_js.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,