@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/chunk-ONTRGV5T.js

@@ -0,0 +1,159 @@
+'use strict';
+
+var chunkUKGQ7256_js = require('./chunk-UKGQ7256.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var RichTextEditor = ({
+  value,
+  defaultValue = "",
+  placeholder,
+  mode: _mode = "html",
+  toolbar,
+  height = 300,
+  readOnly = false,
+  disabled = false,
+  onChange,
+  className,
+  engine,
+  ...restProps
+}) => {
+  const editorRef = react.useRef(null);
+  const engineRef = react.useRef(null);
+  const [currentContent, setInternalValue, isControlled] = chunkUKGQ7256_js.useControlledState(value, defaultValue);
+  const [activeFormats, setActiveFormats] = react.useState(/* @__PURE__ */ new Set());
+  const toolbarItems = toolbar ?? tigercatCore.defaultToolbar;
+  const empty = tigercatCore.isContentEmpty(currentContent);
+  const onChangeRef = react.useRef(onChange);
+  const setInternalValueRef = react.useRef(setInternalValue);
+  const isControlledRef = react.useRef(isControlled);
+  react.useEffect(() => {
+    onChangeRef.current = onChange;
+    setInternalValueRef.current = setInternalValue;
+    isControlledRef.current = isControlled;
+  }, [onChange, setInternalValue, isControlled]);
+  react.useEffect(() => {
+    if (!editorRef.current) return;
+    const factory = engine ?? tigercatCore.builtinRichTextEngine;
+    const instance = factory.create({
+      element: editorRef.current,
+      initialValue: isControlled ? value : defaultValue,
+      readOnly,
+      disabled,
+      placeholder,
+      toolbar: toolbarItems,
+      notifyChange(html) {
+        if (!isControlledRef.current) setInternalValueRef.current(html);
+        onChangeRef.current?.(html);
+      },
+      notifyActiveFormats(next) {
+        setActiveFormats(next);
+      }
+    });
+    engineRef.current = instance;
+    return () => {
+      instance.destroy();
+      engineRef.current = null;
+    };
+  }, [engine]);
+  react.useEffect(() => {
+    if (isControlled && engineRef.current && value !== void 0) {
+      engineRef.current.setValue(value);
+    }
+  }, [value, isControlled]);
+  react.useEffect(() => {
+    engineRef.current?.setReadOnly(readOnly, disabled);
+  }, [readOnly, disabled]);
+  const execButtonAction = react.useCallback(
+    (btn) => {
+      if (readOnly || disabled) return;
+      if (btn.action && editorRef.current) {
+        btn.action(editorRef.current);
+        return;
+      }
+      engineRef.current?.exec(btn.name);
+    },
+    [readOnly, disabled]
+  );
+  const handleKeydown = react.useCallback(
+    (e) => {
+      const match = tigercatCore.findHotkeyMatch(toolbarItems, e.nativeEvent);
+      if (match) {
+        e.preventDefault();
+        execButtonAction(match);
+      }
+    },
+    [toolbarItems, execButtonAction]
+  );
+  const containerClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getRichTextContainerClasses(disabled, className)),
+    [disabled, className]
+  );
+  const editorAreaClasses = react.useMemo(() => tigercatCore.getEditorAreaClasses(readOnly), [readOnly]);
+  const containerStyle = react.useMemo(() => {
+    const ht = tigercatCore.parseHeight(height);
+    if (!ht) return void 0;
+    return { height: ht };
+  }, [height]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClasses, style: containerStyle, ...restProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.richTextToolbarClasses, role: "toolbar", "aria-label": "Text formatting", children: toolbarItems.map((item, idx) => {
+      if (tigercatCore.isToolbarSeparator(item)) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tigercatCore.richTextToolbarSeparatorClasses,
+            role: "separator",
+            "aria-orientation": "vertical"
+          },
+          `sep-${idx}`
+        );
+      }
+      const btn = item;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: tigercatCore.getToolbarButtonClasses(activeFormats.has(btn.name)),
+          title: btn.tooltip ?? btn.label,
+          "aria-label": btn.label,
+          "aria-pressed": tigercatCore.isInlineFormat(btn.name) ? activeFormats.has(btn.name) : void 0,
+          disabled: disabled || readOnly,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => execButtonAction(btn),
+          children: btn.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: btn.icon } }) : btn.label
+        },
+        btn.name
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: editorRef,
+          className: editorAreaClasses,
+          role: "textbox",
+          "aria-multiline": true,
+          "aria-readonly": readOnly || void 0,
+          "aria-disabled": disabled || void 0,
+          "aria-placeholder": placeholder,
+          "data-placeholder": placeholder,
+          onKeyDown: handleKeydown,
+          suppressContentEditableWarning: true
+        }
+      ),
+      empty && placeholder && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `${tigercatCore.richTextPlaceholderClasses} absolute top-0 left-0 p-4 pointer-events-none text-sm`,
+          "aria-hidden": true,
+          children: placeholder
+        }
+      )
+    ] })
+  ] });
+};
+var RichTextEditor_default = RichTextEditor;
+
+exports.RichTextEditor = RichTextEditor;
+exports.RichTextEditor_default = RichTextEditor_default;

package/dist/{chunk-IVGKPD2L.mjs → chunk-OPHYFC5W.mjs}

@@ -1,6 +1,6 @@
-import { RowContext } from './chunk-QAO5KANE.mjs';
+import { RowContext } from './chunk-TULQETJ5.mjs';
 import { useContext, useMemo } from 'react';
-import { classNames, getSpanClasses, getOffsetClasses, getOrderClasses, getFlexClasses, getColMergedStyleVars, getGutterStyles } from '@expcat/tigercat-core';
+import { classNames, getSpanClasses, getOffsetClasses, getOrderClasses, getFlexClasses, getColGutterClasses, getColMergedStyleVars } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 var Col = ({
@@ -21,17 +21,17 @@ var Col = ({
       getOffsetClasses(offset),
       getOrderClasses(order),
       getFlexClasses(flex),
+      getColGutterClasses(gutter || 0),
       className
     ),
-    [isFlexSpanMode, span, offset, order, flex, className]
+    [gutter, isFlexSpanMode, span, offset, order, flex, className]
   );
   const mergedStyle = useMemo(
     () => ({
-      ...getGutterStyles(gutter || 0).colStyle,
       ...getColMergedStyleVars(isFlexSpanMode ? void 0 : span, offset, order, flex),
       ...style
     }),
-    [gutter, isFlexSpanMode, span, offset, order, flex, style]
+    [isFlexSpanMode, span, offset, order, flex, style]
   );
   return /* @__PURE__ */ jsx("div", { className: colClasses, style: mergedStyle, ...divProps, children });
 };

package/dist/{chunk-2LUDQBVY.mjs → chunk-OUARQFZ7.mjs}

@@ -1,9 +1,9 @@
-import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
-import { ChartLegend } from './chunk-Z6F67MJE.mjs';
+import { useChartInteraction } from './chunk-6QML6T3Y.mjs';
+import { ChartLegend } from './chunk-UBP7HZSU.mjs';
 import { ChartSeries } from './chunk-SDLMB34Y.mjs';
-import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
 import { ChartAxis } from './chunk-RQSQXQN6.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
 import { ChartGrid } from './chunk-677VSTPW.mjs';
 import { useRef, useState, useEffect, useMemo } from 'react';
 import { getScatterGradientPrefix, getChartInnerRect, getNumberExtent, createLinearScale, resolveChartPalette, getChartElementOpacity, getScatterHoverSize, buildChartLegendItems, resolveChartTooltipContent, classNames, SCATTER_ENTRANCE_KEYFRAMES, getScatterHoverShadow, SCATTER_ENTRANCE_CLASS, scatterPointTransitionClasses, getScatterPointPath } from '@expcat/tigercat-core';

package/dist/{chunk-DAR2BMMV.js → chunk-PFYK2V3E.js}

@@ -26,11 +26,18 @@ var Resizable = ({
   const [width, setWidth] = react.useState(defaultWidth);
   const [height, setHeight] = react.useState(defaultHeight);
   const [draggingHandle, setDraggingHandle] = react.useState(null);
+  const dragSessionRef = react.useRef(null);
   const dragRef = react.useRef(null);
+  const cleanupDragSession = react.useCallback(() => {
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = null;
+  }, []);
+  react.useEffect(() => cleanupDragSession, [cleanupDragSession]);
   const handleMouseDown = react.useCallback(
     (handle, e) => {
       if (disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       const sw = width ?? 0;
       const sh = height ?? 0;
       dragRef.current = {
@@ -42,11 +49,11 @@ var Resizable = ({
       };
       setDraggingHandle(handle);
       onResizeStart?.({ width: sw, height: sh, handle, deltaX: 0, deltaY: 0 });
-      const onMouseMove = (ev) => {
+      const calculateResize = (currentX, currentY) => {
         const drag = dragRef.current;
-        if (!drag) return;
-        const mouseDeltaX = ev.clientX - drag.startX;
-        const mouseDeltaY = ev.clientY - drag.startY;
+        if (!drag) return null;
+        const mouseDeltaX = currentX - drag.startX;
+        const mouseDeltaY = currentY - drag.startY;
         const { deltaWidth, deltaHeight } = tigercatCore.calculateResizeDelta(
           drag.handle,
           mouseDeltaX,
@@ -61,50 +68,33 @@ var Resizable = ({
           newH = ar.height;
         }
         const clamped = tigercatCore.clampDimensions(newW, newH, minWidth, minHeight, maxWidth, maxHeight);
-        setWidth(clamped.width);
-        setHeight(clamped.height);
-        onResize?.({
+        return {
           width: clamped.width,
           height: clamped.height,
           handle: drag.handle,
           deltaX: clamped.width - drag.startW,
           deltaY: clamped.height - drag.startH
-        });
+        };
       };
-      const onMouseUp = (ev) => {
-        const drag = dragRef.current;
-        if (drag) {
-          const mouseDeltaX = ev.clientX - drag.startX;
-          const mouseDeltaY = ev.clientY - drag.startY;
-          const { deltaWidth, deltaHeight } = tigercatCore.calculateResizeDelta(
-            drag.handle,
-            mouseDeltaX,
-            mouseDeltaY,
-            axis
-          );
-          let newW = drag.startW + deltaWidth;
-          let newH = drag.startH + deltaHeight;
-          if (lockAspectRatio) {
-            const ar = tigercatCore.applyAspectRatio(newW, newH, drag.startW, drag.startH);
-            newW = ar.width;
-            newH = ar.height;
-          }
-          const clamped = tigercatCore.clampDimensions(newW, newH, minWidth, minHeight, maxWidth, maxHeight);
-          onResizeEnd?.({
-            width: clamped.width,
-            height: clamped.height,
-            handle: drag.handle,
-            deltaX: clamped.width - drag.startW,
-            deltaY: clamped.height - drag.startH
-          });
+      dragSessionRef.current = tigercatCore.createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          const next = calculateResize(currentX, currentY);
+          if (!next) return;
+          setWidth(next.width);
+          setHeight(next.height);
+          onResize?.(next);
+        },
+        onEnd: ({ currentX, currentY }) => {
+          const next = calculateResize(currentX, currentY);
+          if (next) onResizeEnd?.(next);
+          dragRef.current = null;
+          dragSessionRef.current = null;
+          setDraggingHandle(null);
         }
-        dragRef.current = null;
-        setDraggingHandle(null);
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-      };
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      });
     },
     [
       disabled,
@@ -116,6 +106,7 @@ var Resizable = ({
       minHeight,
       maxWidth,
       maxHeight,
+      cleanupDragSession,
       onResizeStart,
       onResize,
       onResizeEnd

package/dist/{chunk-ZYPEO2KY.js → chunk-PGBKMW4Q.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var react = require('react');
+var reactDom = require('react-dom');
 var tigercatCore = require('@expcat/tigercat-core');
 
 // src/utils/overlay.ts
@@ -43,6 +44,32 @@ function useEscapeKey({ enabled, onEscape }) {
     return () => document.removeEventListener("keydown", handler);
   }, [enabled, onEscape]);
 }
+function useBodyScrollLock({ enabled }) {
+  react.useEffect(() => {
+    if (!enabled) return;
+    return tigercatCore.lockBodyScroll();
+  }, [enabled]);
+}
+function renderBodyPortal(node) {
+  if (typeof document === "undefined") return null;
+  return reactDom.createPortal(node, document.body);
+}
+function useFocusTrap({ enabled, containerRef }) {
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!enabled || !container) return;
+    const handler = (event) => {
+      const focusables = tigercatCore.getFocusableElements(container);
+      const activeElement = container.ownerDocument?.activeElement ?? document.activeElement;
+      const nav = tigercatCore.getFocusTrapNavigation(event, focusables, activeElement);
+      if (!nav.shouldHandle || !nav.next) return;
+      event.preventDefault();
+      nav.next.focus();
+    };
+    container.addEventListener("keydown", handler);
+    return () => container.removeEventListener("keydown", handler);
+  }, [enabled, containerRef]);
+}
 function useFloating(options) {
   const {
     referenceRef,
@@ -110,6 +137,9 @@ function useFloating(options) {
   };
 }
 
+exports.renderBodyPortal = renderBodyPortal;
+exports.useBodyScrollLock = useBodyScrollLock;
 exports.useClickOutside = useClickOutside;
 exports.useEscapeKey = useEscapeKey;
 exports.useFloating = useFloating;
+exports.useFocusTrap = useFocusTrap;

package/dist/{chunk-DXXYPVJJ.js → chunk-PR5ZPB6J.js}

@@ -446,7 +446,7 @@ var TimePicker = (allProps) => {
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: hour.toString().padStart(2, "0")
+                    children: tigercatCore.padTwo(hour)
                   },
                   hour
                 );
@@ -472,7 +472,7 @@ var TimePicker = (allProps) => {
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: minute.toString().padStart(2, "0")
+                    children: tigercatCore.padTwo(minute)
                   },
                   minute
                 );
@@ -496,7 +496,7 @@ var TimePicker = (allProps) => {
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: second.toString().padStart(2, "0")
+                    children: tigercatCore.padTwo(second)
                   },
                   second
                 );

package/dist/{chunk-QVZTZHCJ.mjs → chunk-PSYDHEXN.mjs}

@@ -1,5 +1,5 @@
-import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
-import { resizePanes, classNames, getSplitterContainerClasses, getPaneStyle, getSplitterGutterClasses, getSplitterGutterHandleClasses } from '@expcat/tigercat-core';
+import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { createDocumentDragSession, resizePanes, classNames, getSplitterContainerClasses, getPaneStyle, getSplitterGutterClasses, getSplitterGutterHandleClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Splitter.tsx
@@ -19,21 +19,36 @@ var Splitter = ({
   children
 }) => {
   const containerRef = useRef(null);
-  const [paneSizes, setPaneSizes] = useState(controlledSizes || []);
+  const dragSessionRef = useRef(null);
+  const [paneSizes, setPaneSizes] = useState([]);
   const draggingRef = useRef(null);
+  const cleanupDragSession = useCallback(() => {
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = null;
+  }, []);
+  useEffect(() => cleanupDragSession, [cleanupDragSession]);
   useEffect(() => {
-    if (controlledSizes) setPaneSizes(controlledSizes);
-  }, [controlledSizes]);
-  useEffect(() => {
-    if (controlledSizes && controlledSizes.length > 0) return;
     const el = containerRef.current;
     if (!el) return;
     const paneCount = React.Children.count(children);
     if (paneCount === 0) return;
     const totalGutter = (paneCount - 1) * gutterSize;
     const total = direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
-    const eachSize = total / paneCount;
-    setPaneSizes(Array.from({ length: paneCount }, () => eachSize));
+    if (controlledSizes && controlledSizes.length > 0) {
+      if (total > 0) {
+        const sum = controlledSizes.reduce((a, b) => a + b, 0);
+        if (sum > 0) {
+          setPaneSizes(controlledSizes.map((s) => s / sum * total));
+        }
+      } else {
+        setPaneSizes([...controlledSizes]);
+      }
+    } else {
+      if (total > 0) {
+        const eachSize = total / paneCount;
+        setPaneSizes(Array.from({ length: paneCount }, () => eachSize));
+      }
+    }
   }, [children, direction, gutterSize, controlledSizes]);
   const mins = useMemo(() => paneSizes.map(() => min), [paneSizes.length, min]);
   const maxes = useMemo(() => paneSizes.map(() => max), [paneSizes.length, max]);
@@ -41,38 +56,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 = 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 = 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 = resizePanes(drag.startSizes, drag.index, delta, mins, maxes) ?? drag.startSizes;
-          onResizeEnd?.({ index: drag.index, sizes: finalSizes });
+          const newSizes = 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 = 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,
@@ -80,6 +98,7 @@ var Splitter = ({
       paneSizes,
       mins,
       maxes,
+      cleanupDragSession,
       onResizeStart,
       onResize,
       onResizeEnd,

package/dist/{chunk-CMGI5WHZ.js → chunk-PTWCIG3Y.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkRYW4CV7U_js = require('./chunk-RYW4CV7U.js');
+var chunk6N6CWBPP_js = require('./chunk-6N6CWBPP.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -13,7 +13,7 @@ var DropdownItem = ({
   children,
   ...buttonProps
 }) => {
-  const context = react.useContext(chunkRYW4CV7U_js.DropdownContext);
+  const context = react.useContext(chunk6N6CWBPP_js.DropdownContext);
   const handleClick = (event) => {
     if (disabled) {
       event.preventDefault();

package/dist/{chunk-FHE4D56E.js → chunk-PVNHW3PY.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');
@@ -17,6 +17,7 @@ var FunnelChart = ({
   gap = 2,
   pinch = false,
   colors,
+  gradient = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -50,7 +51,7 @@ var FunnelChart = ({
     handleLegendHover,
     handleLegendLeave,
     wrapperClasses
-  } = chunkKQZ4F7FZ_js.useChartInteraction({
+  } = chunkXTV5JLLC_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -82,6 +83,7 @@ var FunnelChart = ({
     [data, innerRect.width, innerRect.height, gap, pinch, palette]
   );
   const total = react.useMemo(() => data.reduce((s, d) => s + d.value, 0), [data]);
+  const gradientPrefix = react.useMemo(() => tigercatCore.getFunnelGradientPrefix(), []);
   const legendItems = react.useMemo(
     () => tigercatCore.buildChartLegendItems({
       data,
@@ -102,7 +104,7 @@ var FunnelChart = ({
   );
   const interactive = hoverable || selectable;
   const chart = /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDUWAV47E_js.ChartCanvas,
+    chunkUKLVOR4E_js.ChartCanvas,
     {
       width,
       height,
@@ -111,6 +113,21 @@ var FunnelChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
+        gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: segments.map((seg) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${seg.index}`,
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: 1,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: seg.color, stopOpacity: 1 }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: seg.color, stopOpacity: 0.55 })
+            ]
+          },
+          `grad-${seg.index}`
+        )) }),
         /* @__PURE__ */ jsxRuntime.jsx("g", { "data-series-type": "funnel", children: segments.map((seg) => {
           const opacity = tigercatCore.getChartElementOpacity(seg.index, activeIndex, {
             activeOpacity,
@@ -120,7 +137,7 @@ var FunnelChart = ({
             "path",
             {
               d: seg.path,
-              fill: seg.color,
+              fill: gradient ? `url(#${gradientPrefix}-${seg.index})` : seg.color,
               opacity,
               className: tigercatCore.classNames(interactive && "cursor-pointer"),
               style: { transition: "opacity 0.2s ease-out" },
@@ -152,7 +169,7 @@ var FunnelChart = ({
     }
   );
   const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsxRuntime.jsx(
-    chunkM375I56K_js.ChartTooltip,
+    chunk36ATCHP4_js.ChartTooltip,
     {
       content: tooltipContent,
       visible: resolvedHoveredIndex !== null && tooltipContent !== "",
@@ -169,7 +186,7 @@ var FunnelChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6PBNFLM7_js.ChartLegend,
+      chunkWV5XHYW6_js.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,