@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-FXX3GD35.mjs → chunk-DAMJCFFS.mjs}

@@ -1,10 +1,10 @@
-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 { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
 import { useMemo, useState, useCallback } from 'react';
-import { resolveSeriesData, getChartInnerRect, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, RADAR_SPLIT_AREA_COLORS, getRadarLabelAlign, getChartGridLineDasharray, resolveChartPalette, resolveMultiSeriesTooltipContent, defaultRadarTooltipFormatter, buildChartLegendItems, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { resolveSeriesData, buildChartSeriesKeys, getChartInnerRect, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, RADAR_SPLIT_AREA_COLORS, getRadarLabelAlign, getChartGridLineDasharray, resolveChartPalette, getRadarGradientPrefix, resolveMultiSeriesTooltipContent, defaultRadarTooltipFormatter, buildChartLegendItems, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var RadarChart = ({
@@ -55,8 +55,11 @@ var RadarChart = ({
   showSplitArea = false,
   splitAreaOpacity = 0.06,
   splitAreaColors,
+  gradient = false,
+  strokeGradient = false,
+  pointGradient = false,
   pointBorderWidth = 2,
-  pointBorderColor = "#fff",
+  pointBorderColor = "var(--tiger-surface,#ffffff)",
   pointHoverSize,
   labelAutoAlign = true,
   title,
@@ -69,6 +72,10 @@ var RadarChart = ({
     }),
     [series, data]
   );
+  const seriesKeys = useMemo(
+    () => buildChartSeriesKeys(resolvedSeries, { prefix: "radar-" }),
+    [resolvedSeries]
+  );
   const {
     resolvedHoveredIndex: _resolvedHoveredIndex,
     resolvedSelectedIndex: _resolvedSelectedIndex,
@@ -146,8 +153,9 @@ var RadarChart = ({
     [axisData.length, startAngle]
   );
   const seriesPoints = useMemo(
-    () => resolvedSeries.map((item) => ({
+    () => resolvedSeries.map((item, seriesIndex) => ({
       series: item,
+      seriesKey: seriesKeys[seriesIndex],
       points: getRadarPoints(item.data, {
         cx,
         cy,
@@ -156,7 +164,7 @@ var RadarChart = ({
         maxValue: resolvedMaxValue
       })
     })),
-    [resolvedSeries, cx, cy, radius, startAngle, resolvedMaxValue]
+    [resolvedSeries, seriesKeys, cx, cy, radius, startAngle, resolvedMaxValue]
   );
   const gridPaths = useMemo(() => {
     if (!showGrid || angles.length === 0) return [];
@@ -244,6 +252,7 @@ var RadarChart = ({
   ]);
   const dasharray = getChartGridLineDasharray(gridLineStyle);
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const gradientPrefix = useMemo(() => getRadarGradientPrefix(), []);
   const tooltipContent = useMemo(
     () => resolveMultiSeriesTooltipContent(
       hoveredPoint,
@@ -273,6 +282,98 @@ var RadarChart = ({
       desc,
       className: classNames(className),
       children: [
+        (gradient || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
+          gradient && seriesPoints.map((item, seriesIndex) => {
+            const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+            const resolvedFillColor = item.series.fillColor ?? seriesColor ?? fillColor ?? palette[0];
+            const resolvedFillOpacity = item.series.fillOpacity ?? fillOpacity;
+            return /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-${item.seriesKey}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: resolvedFillColor,
+                      stopOpacity: resolvedFillOpacity
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: resolvedFillColor, stopOpacity: 0.02 })
+                ]
+              },
+              `radar-grad-${item.seriesKey}`
+            );
+          }),
+          strokeGradient && seriesPoints.map((item, seriesIndex) => {
+            const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+            const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? strokeColor ?? palette[0];
+            return /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-stroke-${item.seriesKey}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: `color-mix(in oklab, ${resolvedStrokeColor} 100%, white 12%)`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: resolvedStrokeColor }),
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      stopColor: `color-mix(in oklab, ${resolvedStrokeColor} 100%, black 8%)`
+                    }
+                  )
+                ]
+              },
+              `radar-stroke-grad-${item.seriesKey}`
+            );
+          }),
+          pointGradient && seriesPoints.map((item, seriesIndex) => {
+            const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+            const resolvedPointColor = item.series.pointColor ?? seriesColor ?? pointColor ?? palette[0];
+            return /* @__PURE__ */ jsxs(
+              "radialGradient",
+              {
+                id: `${gradientPrefix}-point-${item.seriesKey}`,
+                cx: "0.5",
+                cy: "0.5",
+                r: "0.5",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      stopColor: `color-mix(in oklab, ${resolvedPointColor} 100%, white 30%)`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: resolvedPointColor }),
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      stopColor: `color-mix(in oklab, ${resolvedPointColor} 100%, black 12%)`
+                    }
+                  )
+                ]
+              },
+              `radar-point-grad-${item.seriesKey}`
+            );
+          })
+        ] }),
         splitAreaPaths.map((area, index) => {
           if (area.type === "circle-ring") {
             return /* @__PURE__ */ jsxs("g", { children: [
@@ -374,6 +475,7 @@ var RadarChart = ({
           return /* @__PURE__ */ jsxs(
             ChartSeries,
             {
+              "data-series-key": item.seriesKey,
               data: item.series.data,
               name: item.series.name,
               type: "radar",
@@ -395,15 +497,16 @@ var RadarChart = ({
                   "path",
                   {
                     d: areaPath,
-                    fill: resolvedFillColor,
-                    fillOpacity: resolvedFillOpacity,
-                    stroke: resolvedStrokeColor,
+                    fill: gradient ? `url(#${gradientPrefix}-${item.seriesKey})` : resolvedFillColor,
+                    fillOpacity: gradient ? 1 : resolvedFillOpacity,
+                    stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${item.seriesKey})` : resolvedStrokeColor,
                     strokeWidth: resolvedStrokeWidth,
                     strokeLinejoin: "round",
                     className: "transition-[fill-opacity,filter] duration-200 ease-out",
                     style: resolvedActiveIndex === seriesIndex ? { filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.15))" } : void 0,
                     "data-radar-area": "true",
-                    "data-series-index": seriesIndex
+                    "data-series-index": seriesIndex,
+                    "data-series-key": item.seriesKey
                   }
                 ) : null,
                 resolvedShowPoints ? item.points.map((point) => {
@@ -418,7 +521,7 @@ var RadarChart = ({
                       cx: point.x,
                       cy: point.y,
                       r: currentSize,
-                      fill: point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
+                      fill: pointGradient ? `url(#${gradientPrefix}-point-${item.seriesKey})` : point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
                       stroke: resolvedBorderColor,
                       strokeWidth: resolvedBorderWidth,
                       className: classNames(
@@ -427,17 +530,18 @@ var RadarChart = ({
                       ),
                       "data-radar-point": "true",
                       "data-series-index": seriesIndex,
+                      "data-series-key": item.seriesKey,
                       "data-point-index": point.index,
                       onMouseEnter: showTooltip && hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
                       onMouseMove: showTooltip && hoverable ? handlePointMove : void 0,
                       onMouseLeave: showTooltip && hoverable ? handlePointLeave : void 0
                     },
-                    `point-${seriesIndex}-${point.index}`
+                    `point-${item.seriesKey}-${point.index}`
                   );
                 }) : null
               ]
             },
-            `series-${seriesIndex}`
+            item.seriesKey
           );
         }),
         labels.map((label, index) => /* @__PURE__ */ jsx(

package/dist/{chunk-WK5QJO57.js → chunk-DBGPINKE.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');
@@ -23,9 +23,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,
@@ -60,7 +61,7 @@ var PieChart = ({
     handleLegendHover,
     handleLegendLeave,
     wrapperClasses
-  } = chunkKQZ4F7FZ_js.useChartInteraction({
+  } = chunkXTV5JLLC_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -100,6 +101,7 @@ var PieChart = ({
     [data, startAngle, endAngle, padAngle]
   );
   const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const gradientPrefix = react.useMemo(() => tigercatCore.getPieGradientPrefix(), []);
   const cx = innerRect.width / 2;
   const cy = innerRect.height / 2;
   const labelRadius = resolvedInnerRadius + (resolvedOuterRadius - resolvedInnerRadius) / 2;
@@ -125,7 +127,7 @@ var PieChart = ({
   );
   const interactive = hoverable || selectable;
   const chart = /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDUWAV47E_js.ChartCanvas,
+    chunkUKLVOR4E_js.ChartCanvas,
     {
       width,
       height,
@@ -134,50 +136,70 @@ var PieChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("g", { "data-series-type": "pie", children: arcs.map((arc) => {
-          const color = arc.data.color ?? palette[arc.index % palette.length];
-          const path = tigercatCore.createPieArcPath({
-            cx,
-            cy,
-            innerRadius: resolvedInnerRadius,
-            outerRadius: resolvedOuterRadius,
-            startAngle: arc.startAngle,
-            endAngle: arc.endAngle
-          });
-          const isEmphasized = activeIndex === arc.index;
-          const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex, {
-            activeOpacity,
-            inactiveOpacity
-          });
-          const { dx, dy } = interactive && isEmphasized && hoverOffset > 0 ? tigercatCore.computePieHoverOffset(arc.startAngle, arc.endAngle, hoverOffset) : { dx: 0, dy: 0 };
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: path,
-              fill: color,
-              opacity,
-              stroke: borderColor,
-              strokeWidth: borderWidth,
-              strokeLinejoin: "round",
-              className: tigercatCore.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 ? tigercatCore.PIE_EMPHASIS_SHADOW : tigercatCore.PIE_BASE_SHADOW : void 0
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-series-type": "pie", children: [
+          gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: arcs.map((arc) => {
+            const color = arc.data.color ?? palette[arc.index % palette.length];
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-${arc.index}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+                  /* @__PURE__ */ jsxRuntime.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 = tigercatCore.createPieArcPath({
+              cx,
+              cy,
+              innerRadius: resolvedInnerRadius,
+              outerRadius: resolvedOuterRadius,
+              startAngle: arc.startAngle,
+              endAngle: arc.endAngle
+            });
+            const isEmphasized = activeIndex === arc.index;
+            const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex, {
+              activeOpacity,
+              inactiveOpacity
+            });
+            const { dx, dy } = interactive && isEmphasized && hoverOffset > 0 ? tigercatCore.computePieHoverOffset(arc.startAngle, arc.endAngle, hoverOffset) : { dx: 0, dy: 0 };
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: path,
+                fill: gradient ? `url(#${gradientPrefix}-${arc.index})` : color,
+                opacity,
+                stroke: borderColor,
+                strokeWidth: borderWidth,
+                strokeLinejoin: "round",
+                className: tigercatCore.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 ? tigercatCore.PIE_EMPHASIS_SHADOW : tigercatCore.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 = tigercatCore.computePieLabelLine(
@@ -234,7 +256,7 @@ var PieChart = ({
     }
   );
   const tooltip = showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-    chunkM375I56K_js.ChartTooltip,
+    chunk36ATCHP4_js.ChartTooltip,
     {
       content: tooltipContent,
       visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
@@ -251,7 +273,7 @@ var PieChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6PBNFLM7_js.ChartLegend,
+      chunkWV5XHYW6_js.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/chunk-DKNVSQSV.mjs

@@ -0,0 +1,64 @@
+import { useRef, useState, useMemo, useEffect } from 'react';
+import { createChartResizeObserverController, resolveResponsiveChartSize, getChartInnerRect, classNames, chartCanvasBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ChartCanvas.tsx
+var ChartCanvas = ({
+  width = 320,
+  height = 200,
+  responsive = false,
+  padding = 24,
+  className,
+  title,
+  desc,
+  children,
+  ...props
+}) => {
+  const svgRef = useRef(null);
+  const [observedSize, setObservedSize] = useState(null);
+  const resizeControllerRef = useRef(
+    createChartResizeObserverController({
+      onSizeChange: setObservedSize
+    })
+  );
+  const resolvedSize = useMemo(
+    () => resolveResponsiveChartSize({ width, height }, responsive ? observedSize : null),
+    [width, height, responsive, observedSize]
+  );
+  const innerRect = useMemo(
+    () => getChartInnerRect(resolvedSize.width, resolvedSize.height, padding),
+    [resolvedSize.width, resolvedSize.height, padding]
+  );
+  const svgClasses = useMemo(() => classNames(chartCanvasBaseClasses, className), [className]);
+  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__ */ jsxs(
+    "svg",
+    {
+      ...props,
+      ref: svgRef,
+      width: resolvedSize.width,
+      height: resolvedSize.height,
+      viewBox: `0 0 ${resolvedSize.width} ${resolvedSize.height}`,
+      className: svgClasses,
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        desc ? /* @__PURE__ */ jsx("desc", { children: desc }) : null,
+        /* @__PURE__ */ jsx("g", { transform: `translate(${innerRect.x}, ${innerRect.y})`, children })
+      ]
+    }
+  );
+};
+var ChartCanvas_default = ChartCanvas;
+
+export { ChartCanvas, ChartCanvas_default };

package/dist/{chunk-CDT3P2ZN.js → chunk-DSLKTIPD.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkAJQPGAYL_js = require('./chunk-AJQPGAYL.js');
+var chunkJFOSDCCG_js = require('./chunk-JFOSDCCG.js');
+var chunkPGBKMW4Q_js = require('./chunk-PGBKMW4Q.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -29,7 +30,7 @@ var Popover = ({
   const popoverId = popoverIdRef.current;
   const titleId = `${popoverId}-title`;
   const contentId = `${popoverId}-content`;
-  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = chunkAJQPGAYL_js.usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
+  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = chunkJFOSDCCG_js.usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
   const containerClasses = react.useMemo(
     () => tigercatCore.classNames(tigercatCore.getPopoverContainerClasses(), className),
     [className]
@@ -51,21 +52,23 @@ var Popover = ({
         children
       }
     ),
-    currentVisible && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        id: popoverId,
-        role: "dialog",
-        "aria-modal": "false",
-        "aria-labelledby": hasTitle ? titleId : void 0,
-        "aria-describedby": hasContent ? contentId : void 0,
-        className: contentClasses,
-        children: [
-          hasTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: tigercatCore.POPOVER_TITLE_CLASSES, children: titleContent || title }),
-          hasContent && /* @__PURE__ */ jsxRuntime.jsx("div", { id: contentId, className: tigercatCore.POPOVER_TEXT_CLASSES, children: contentContent || content })
-        ]
-      }
-    ) })
+    currentVisible && chunkPGBKMW4Q_js.renderBodyPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          id: popoverId,
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-labelledby": hasTitle ? titleId : void 0,
+          "aria-describedby": hasContent ? contentId : void 0,
+          className: contentClasses,
+          children: [
+            hasTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: tigercatCore.POPOVER_TITLE_CLASSES, children: titleContent || title }),
+            hasContent && /* @__PURE__ */ jsxRuntime.jsx("div", { id: contentId, className: tigercatCore.POPOVER_TEXT_CLASSES, children: contentContent || content })
+          ]
+        }
+      ) })
+    )
   ] });
 };