@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/chunk-YER7IQF4.mjs

@@ -0,0 +1,429 @@
+import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartSeries } from './chunk-SDLMB34Y.mjs';
+import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { useMemo, useState, useCallback } from 'react';
+import { getChartInnerRect, getRadarAngles, getRadarPoints, polarToCartesian, createPolygonPath, getChartGridLineDasharray, DEFAULT_CHART_COLORS, classNames, chartGridLineClasses, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RadarChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  series,
+  maxValue,
+  startAngle = -Math.PI / 2,
+  levels = 5,
+  showLevelLabels = false,
+  showGrid = true,
+  showAxis = true,
+  showLabels = true,
+  labelOffset = 12,
+  labelFormatter,
+  levelLabelFormatter,
+  levelLabelOffset = 8,
+  colors,
+  gridLineStyle = "solid",
+  gridStrokeWidth = 1,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  showTooltip = true,
+  tooltipFormatter,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSeriesClick,
+  onSeriesHover,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendFormatter,
+  legendMarkerSize = 10,
+  legendGap = 8,
+  strokeColor = DEFAULT_CHART_COLORS[0],
+  strokeWidth = 2,
+  fillColor = DEFAULT_CHART_COLORS[0],
+  fillOpacity = 0.2,
+  showPoints = true,
+  pointSize = 3,
+  pointColor,
+  title,
+  desc,
+  className
+}) => {
+  const resolvedSeries = useMemo(() => {
+    if (series && series.length > 0) return series;
+    return [{ data: data ?? [] }];
+  }, [series, data]);
+  const {
+    resolvedHoveredIndex: _resolvedHoveredIndex,
+    resolvedSelectedIndex: _resolvedSelectedIndex,
+    activeIndex: resolvedActiveIndex,
+    tooltipPosition,
+    handleMouseEnter: handleHoverEnter,
+    handleMouseMove,
+    handleMouseLeave: handleHoverLeave,
+    handleClick: handleSelectIndex
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => resolvedSeries[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onSeriesHover?.(index, index !== null ? resolvedSeries[index] : null);
+    },
+    onSelectedIndexChange: (index) => {
+      onSelectedIndexChange?.(index);
+      if (index !== null) {
+        onSeriesClick?.(index, resolvedSeries[index]);
+      }
+    }
+  });
+  const [hoveredPoint, setHoveredPoint] = useState(null);
+  const handlePointEnter = useCallback(
+    (seriesIndex, pointIndex, event) => {
+      if (!hoverable) return;
+      setHoveredPoint({ seriesIndex, pointIndex });
+      handleHoverEnter(seriesIndex, event);
+    },
+    [hoverable, handleHoverEnter]
+  );
+  const handlePointMove = useCallback(
+    (event) => {
+      handleMouseMove(event);
+    },
+    [handleMouseMove]
+  );
+  const handlePointLeave = useCallback(() => {
+    setHoveredPoint(null);
+    handleHoverLeave();
+  }, [handleHoverLeave]);
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const radius = useMemo(
+    () => Math.max(0, Math.min(innerRect.width, innerRect.height) / 2),
+    [innerRect.width, innerRect.height]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const axisData = useMemo(() => {
+    if (series && series.length > 0) return series[0]?.data ?? [];
+    return data ?? [];
+  }, [series, data]);
+  const resolvedMaxValue = useMemo(() => {
+    if (typeof maxValue === "number") return Math.max(0, maxValue);
+    const values = resolvedSeries.flatMap((item) => item.data.map((datum) => datum.value));
+    const computedMax = values.length > 0 ? Math.max(...values) : 0;
+    return computedMax > 0 ? computedMax : 1;
+  }, [resolvedSeries, maxValue]);
+  const angles = useMemo(
+    () => getRadarAngles(axisData.length, startAngle),
+    [axisData.length, startAngle]
+  );
+  const seriesPoints = useMemo(
+    () => resolvedSeries.map((item) => ({
+      series: item,
+      points: getRadarPoints(item.data, {
+        cx,
+        cy,
+        radius,
+        startAngle,
+        maxValue: resolvedMaxValue
+      })
+    })),
+    [resolvedSeries, cx, cy, radius, startAngle, resolvedMaxValue]
+  );
+  const gridPaths = useMemo(() => {
+    if (!showGrid || angles.length === 0) return [];
+    const resolvedLevels = Math.max(1, Math.floor(levels));
+    return Array.from({ length: resolvedLevels }, (_, index) => {
+      const levelRadius = radius * ((index + 1) / resolvedLevels);
+      const ringPoints = angles.map((angle) => polarToCartesian(cx, cy, levelRadius, angle));
+      return createPolygonPath(ringPoints);
+    });
+  }, [showGrid, levels, angles, radius, cx, cy]);
+  const axisLines = useMemo(() => {
+    if (!showAxis || angles.length === 0) return [];
+    return angles.map((angle) => {
+      const end = polarToCartesian(cx, cy, radius, angle);
+      return {
+        x1: cx,
+        y1: cy,
+        x2: end.x,
+        y2: end.y
+      };
+    });
+  }, [showAxis, angles, cx, cy, radius]);
+  const labels = useMemo(() => {
+    if (!showLabels || angles.length === 0) return [];
+    const formatLabel = labelFormatter ?? ((datum) => datum.label ?? `${datum.value}`);
+    return axisData.map((datum, index) => {
+      const angle = angles[index];
+      const position = polarToCartesian(cx, cy, radius + labelOffset, angle);
+      return {
+        x: position.x,
+        y: position.y,
+        text: formatLabel(datum, index)
+      };
+    });
+  }, [showLabels, axisData, angles, cx, cy, radius, labelOffset, labelFormatter]);
+  const levelLabels = useMemo(() => {
+    if (!showLevelLabels || !showGrid || angles.length === 0) return [];
+    const resolvedLevels = Math.max(1, Math.floor(levels));
+    const formatLevel = levelLabelFormatter ?? ((value) => `${value}`);
+    return Array.from({ length: resolvedLevels }, (_, index) => {
+      const ratio = (index + 1) / resolvedLevels;
+      const value = resolvedMaxValue * ratio;
+      const position = polarToCartesian(cx, cy, radius * ratio + levelLabelOffset, startAngle);
+      return {
+        x: position.x,
+        y: position.y,
+        text: formatLevel(value, index)
+      };
+    });
+  }, [
+    showLevelLabels,
+    showGrid,
+    angles.length,
+    levels,
+    resolvedMaxValue,
+    cx,
+    cy,
+    radius,
+    levelLabelOffset,
+    startAngle,
+    levelLabelFormatter
+  ]);
+  const dasharray = getChartGridLineDasharray(gridLineStyle);
+  const palette = useMemo(
+    () => colors && colors.length > 0 ? colors : [...DEFAULT_CHART_COLORS],
+    [colors]
+  );
+  const formatTooltip = useMemo(
+    () => tooltipFormatter ?? ((datum, seriesIndex, index, series2) => {
+      const label = datum.label ?? `#${index + 1}`;
+      const value = datum.value;
+      const name = series2?.name ?? `Series ${seriesIndex + 1}`;
+      return `${name} \xB7 ${label}: ${value}`;
+    }),
+    [tooltipFormatter]
+  );
+  const tooltipContent = useMemo(() => {
+    if (!hoveredPoint) return "";
+    const { seriesIndex, pointIndex } = hoveredPoint;
+    const series2 = resolvedSeries[seriesIndex];
+    if (!series2) return "";
+    const datum = series2.data[pointIndex];
+    if (!datum) return "";
+    return formatTooltip(datum, seriesIndex, pointIndex, series2);
+  }, [hoveredPoint, resolvedSeries, formatTooltip]);
+  const resolvedLegendItems = useMemo(
+    () => resolvedSeries.map((item, index) => {
+      const color = item.color ?? palette[index % palette.length];
+      const label = legendFormatter ? legendFormatter(item, index) : item.name ?? `Series ${index + 1}`;
+      return {
+        index,
+        label,
+        color
+      };
+    }),
+    [resolvedSeries, palette, legendFormatter]
+  );
+  const legendContainerClasses = classNames(
+    "flex flex-wrap",
+    legendPosition === "right" ? "flex-col gap-2" : "flex-row gap-3"
+  );
+  const wrapperClasses = classNames(
+    "inline-flex",
+    legendPosition === "right" ? "flex-row items-start gap-4" : "flex-col gap-2"
+  );
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: [
+        gridPaths.map((path, index) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: path,
+            className: chartGridLineClasses,
+            fill: "none",
+            strokeWidth: gridStrokeWidth,
+            strokeDasharray: dasharray
+          },
+          `grid-${index}`
+        )),
+        axisLines.map((line, index) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: line.x1,
+            y1: line.y1,
+            x2: line.x2,
+            y2: line.y2,
+            className: chartGridLineClasses,
+            strokeWidth: gridStrokeWidth,
+            strokeDasharray: dasharray
+          },
+          `axis-${index}`
+        )),
+        seriesPoints.map((item, seriesIndex) => {
+          const seriesColor = item.series.color ?? palette[seriesIndex % palette.length];
+          const resolvedStrokeColor = item.series.strokeColor ?? seriesColor ?? strokeColor;
+          const resolvedFillColor = item.series.fillColor ?? seriesColor ?? fillColor;
+          const resolvedFillOpacity = item.series.fillOpacity ?? fillOpacity;
+          const resolvedStrokeWidth = item.series.strokeWidth ?? strokeWidth;
+          const resolvedShowPoints = item.series.showPoints ?? showPoints;
+          const resolvedPointSize = item.series.pointSize ?? pointSize;
+          const resolvedPointColor = item.series.pointColor ?? seriesColor ?? pointColor;
+          const areaPath = createPolygonPath(item.points.map((point) => ({ x: point.x, y: point.y })));
+          const resolvedOpacity = resolvedActiveIndex === null ? void 0 : seriesIndex === resolvedActiveIndex ? activeOpacity : inactiveOpacity;
+          return /* @__PURE__ */ jsxs(
+            ChartSeries,
+            {
+              data: item.series.data,
+              name: item.series.name,
+              type: "radar",
+              className: item.series.className,
+              opacity: resolvedOpacity,
+              style: hoverable || selectable ? { cursor: "pointer" } : void 0,
+              onMouseEnter: hoverable ? (e) => handleHoverEnter(seriesIndex, e) : void 0,
+              onMouseLeave: hoverable ? handleHoverLeave : void 0,
+              onClick: selectable ? () => handleSelectIndex(seriesIndex) : void 0,
+              tabIndex: selectable ? 0 : void 0,
+              onKeyDown: (event) => {
+                if (!selectable) return;
+                if (event.key !== "Enter" && event.key !== " ") return;
+                event.preventDefault();
+                handleSelectIndex(seriesIndex);
+              },
+              children: [
+                areaPath ? /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: areaPath,
+                    fill: resolvedFillColor,
+                    fillOpacity: resolvedFillOpacity,
+                    stroke: resolvedStrokeColor,
+                    strokeWidth: resolvedStrokeWidth,
+                    "data-radar-area": "true",
+                    "data-series-index": seriesIndex
+                  }
+                ) : null,
+                resolvedShowPoints ? item.points.map((point) => {
+                  return /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: point.x,
+                      cy: point.y,
+                      r: point.data.size ?? resolvedPointSize,
+                      fill: point.data.color ?? resolvedPointColor ?? resolvedStrokeColor,
+                      className: showTooltip && hoverable ? "cursor-pointer" : void 0,
+                      "data-radar-point": "true",
+                      "data-series-index": seriesIndex,
+                      "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}`
+                  );
+                }) : null
+              ]
+            },
+            `series-${seriesIndex}`
+          );
+        }),
+        labels.map((label, index) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: label.x,
+            y: label.y,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            children: label.text
+          },
+          `label-${index}`
+        )),
+        levelLabels.map((label, index) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: label.x,
+            y: label.y,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            "data-radar-level-label": "true",
+            children: label.text
+          },
+          `level-${index}`
+        ))
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: hoveredPoint !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  if (!showLegend) {
+    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ jsx("div", { className: legendContainerClasses, children: resolvedLegendItems.map((item) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: classNames(
+          "flex items-center gap-2 text-sm text-gray-600",
+          selectable ? "cursor-pointer" : "cursor-default"
+        ),
+        onClick: selectable ? () => handleSelectIndex(item.index) : void 0,
+        onMouseEnter: hoverable ? (e) => handleHoverEnter(item.index, e) : void 0,
+        onMouseLeave: hoverable ? handlePointLeave : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-block rounded-full",
+              style: {
+                width: `${legendMarkerSize}px`,
+                height: `${legendMarkerSize}px`,
+                backgroundColor: item.color
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { marginRight: `${legendGap}px` }, children: item.label })
+        ]
+      },
+      `legend-${item.index}`
+    )) }),
+    tooltip
+  ] });
+};
+var RadarChart_default = RadarChart;
+
+export { RadarChart, RadarChart_default };

package/dist/{chunk-NI2WNZRT.js → chunk-YESS6YKC.js}

@@ -4,7 +4,6 @@ var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Space.tsx
-var baseClasses = "inline-flex";
 var Space = ({
   direction = "horizontal",
   size = "md",
@@ -22,7 +21,7 @@ var Space = ({
     {
       ...props,
       className: tigercatCore.classNames(
-        baseClasses,
+        tigercatCore.SPACE_BASE_CLASS,
         tigercatCore.getSpaceDirectionClass(direction),
         tigercatCore.getSpaceAlignClass(align),
         gapSize.class,

package/dist/chunk-Z6F67MJE.mjs

@@ -0,0 +1,92 @@
+import { useMemo, useCallback } from 'react';
+import { classNames } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ChartLegend.tsx
+var ChartLegend = ({
+  items,
+  position = "bottom",
+  markerSize = 10,
+  gap = 8,
+  interactive = false,
+  className,
+  onItemClick,
+  onItemHover,
+  onItemLeave
+}) => {
+  const containerClasses = useMemo(
+    () => classNames(
+      "flex flex-wrap",
+      position === "right" || position === "left" ? "flex-col gap-2" : "flex-row gap-3",
+      className
+    ),
+    [position, className]
+  );
+  const handleClick = useCallback(
+    (item) => {
+      if (!interactive) return;
+      onItemClick?.(item.index, item);
+    },
+    [interactive, onItemClick]
+  );
+  const handleHover = useCallback(
+    (item) => {
+      if (!interactive) return;
+      onItemHover?.(item.index, item);
+    },
+    [interactive, onItemHover]
+  );
+  const handleLeave = useCallback(() => {
+    if (!interactive) return;
+    onItemLeave?.();
+  }, [interactive, onItemLeave]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      role: "list",
+      "aria-label": "Chart legend",
+      "data-chart-legend": "true",
+      children: items.map((item) => {
+        const ItemComponent = interactive ? "button" : "div";
+        return /* @__PURE__ */ jsxs(
+          ItemComponent,
+          {
+            type: interactive ? "button" : void 0,
+            className: classNames(
+              "flex items-center gap-2 text-sm",
+              "text-[color:var(--tiger-text-secondary,#6b7280)]",
+              interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] transition-colors" : "cursor-default",
+              item.active === false ? "opacity-50" : void 0
+            ),
+            role: "listitem",
+            "data-legend-item": "true",
+            onClick: interactive ? () => handleClick(item) : void 0,
+            onMouseEnter: interactive ? () => handleHover(item) : void 0,
+            onMouseLeave: interactive ? handleLeave : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "inline-block rounded-full shrink-0",
+                  style: {
+                    width: `${markerSize}px`,
+                    height: `${markerSize}px`,
+                    backgroundColor: item.color
+                  },
+                  "aria-hidden": "true",
+                  "data-legend-marker": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { marginRight: `${gap}px` }, children: item.label })
+            ]
+          },
+          `legend-${item.index}`
+        );
+      })
+    }
+  );
+};
+var ChartLegend_default = ChartLegend;
+
+export { ChartLegend, ChartLegend_default };

package/dist/{chunk-QORSSZX4.js → chunk-ZPFZMXA6.js}

@@ -1,10 +1,10 @@
 'use strict';
 
+var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Popover.tsx
 var popoverIdCounter = 0;
 var createPopoverId = () => `tiger-popover-${++popoverIdCounter}`;
 var Popover = ({
@@ -16,6 +16,7 @@ var Popover = ({
   placement = "top",
   disabled = false,
   width,
+  offset = 8,
   className,
   style,
   children,
@@ -28,6 +29,8 @@ var Popover = ({
   const [internalVisible, setInternalVisible] = react.useState(defaultVisible);
   const currentVisible = isControlled ? visible : internalVisible;
   const containerRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const floatingRef = react.useRef(null);
   const popoverIdRef = react.useRef(null);
   if (!popoverIdRef.current) {
     popoverIdRef.current = createPopoverId();
@@ -35,6 +38,17 @@ var Popover = ({
   const popoverId = popoverIdRef.current;
   const titleId = `${popoverId}-title`;
   const contentId = `${popoverId}-content`;
+  const {
+    x,
+    y,
+    placement: actualPlacement
+  } = chunkZYPEO2KY_js.useFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement,
+    offset
+  });
   const setVisible = react.useCallback(
     (nextVisible) => {
       if (disabled && nextVisible) return;
@@ -65,37 +79,28 @@ var Popover = ({
     if (disabled || trigger !== "focus") return;
     setVisible(false);
   };
-  react.useEffect(() => {
-    if (!currentVisible || trigger !== "click") return;
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      if (!target) return;
-      if (containerRef.current?.contains(target)) return;
-      setVisible(false);
-    };
-    const timeoutId = setTimeout(() => {
-      document.addEventListener("click", handleClickOutside);
-    }, 0);
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [currentVisible, trigger, setVisible]);
-  react.useEffect(() => {
-    if (!currentVisible || trigger === "manual") return;
-    const handleKeyDown = (event) => {
-      if (event.key !== "Escape") return;
-      setVisible(false);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [currentVisible, trigger, setVisible]);
+  chunkZYPEO2KY_js.useClickOutside({
+    enabled: currentVisible && trigger === "click",
+    refs: [containerRef],
+    onOutsideClick: () => setVisible(false),
+    defer: true
+  });
+  chunkZYPEO2KY_js.useEscapeKey({
+    enabled: currentVisible && trigger !== "manual",
+    onEscape: () => setVisible(false)
+  });
   const containerClasses = tigercatCore.classNames(tigercatCore.getPopoverContainerClasses(), className);
   const triggerClasses = tigercatCore.getPopoverTriggerClasses(disabled);
-  const contentWrapperClasses = tigercatCore.getDropdownMenuWrapperClasses(currentVisible, placement);
   const contentClasses = tigercatCore.getPopoverContentClasses(width);
   const titleClasses = tigercatCore.getPopoverTitleClasses();
   const contentTextClasses = tigercatCore.getPopoverContentTextClasses();
+  const floatingStyles = {
+    position: "absolute",
+    left: x,
+    top: y,
+    transformOrigin: tigercatCore.getTransformOrigin(actualPlacement),
+    zIndex: 1e3
+  };
   const triggerHandlers = {};
   if (trigger === "click") {
     triggerHandlers.onClick = handleTriggerClick;
@@ -116,6 +121,7 @@ var Popover = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref: triggerRef,
         className: triggerClasses,
         "aria-haspopup": "dialog",
         "aria-disabled": disabled ? "true" : void 0,
@@ -123,7 +129,7 @@ var Popover = ({
         children
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentWrapperClasses, hidden: !currentVisible, "aria-hidden": !currentVisible, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    currentVisible && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         id: popoverId,