@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/chunk-EJLJYOO7.js

@@ -0,0 +1,367 @@
+'use strict';
+
+var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
+var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
+var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
+var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
+var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var LineChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  series,
+  xScale: xScaleProp,
+  yScale: yScaleProp,
+  lineColor: _lineColor = "var(--tiger-primary,#2563eb)",
+  strokeWidth = 2,
+  curve = "linear",
+  showPoints = true,
+  pointSize = 4,
+  pointColor: _pointColor,
+  showGrid = true,
+  showAxis = true,
+  showXAxis = true,
+  showYAxis = true,
+  includeZero = false,
+  xAxisLabel,
+  yAxisLabel,
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  xTickFormat,
+  yTickFormat,
+  gridLineStyle = "solid",
+  gridStrokeWidth = 1,
+  colors,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  tooltipFormatter,
+  legendFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSeriesClick,
+  onSeriesHover,
+  onPointClick,
+  onPointHover
+}) => {
+  const [hoveredPointInfo, setHoveredPointInfo] = react.useState(null);
+  const [tooltipPosition, setTooltipPosition] = react.useState({ x: 0, y: 0 });
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const resolvedSeries = react.useMemo(() => {
+    if (series && series.length > 0) return series;
+    if (data && data.length > 0) return [{ data }];
+    return [];
+  }, [series, data]);
+  const {
+    activeIndex,
+    handleMouseEnter: handleSeriesHoverEnter,
+    handleMouseLeave: handleSeriesHoverLeave,
+    handleClick: handleSeriesSelect,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = chunkKQZ4F7FZ_js.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 allData = react.useMemo(() => resolvedSeries.flatMap((s) => s.data), [resolvedSeries]);
+  const xValues = react.useMemo(() => allData.map((d) => d.x), [allData]);
+  const yValues = react.useMemo(() => allData.map((d) => d.y), [allData]);
+  const isXNumeric = react.useMemo(() => xValues.every((v) => typeof v === "number"), [xValues]);
+  const resolvedXScale = react.useMemo(() => {
+    if (xScaleProp) return xScaleProp;
+    if (isXNumeric) {
+      const extent = tigercatCore.getNumberExtent(xValues, { includeZero: false });
+      return tigercatCore.createLinearScale(extent, [0, innerRect.width]);
+    } else {
+      const categories = [...new Set(xValues.map(String))];
+      return tigercatCore.createPointScale(categories, [0, innerRect.width], { padding: 0.1 });
+    }
+  }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
+  const resolvedYScale = react.useMemo(() => {
+    if (yScaleProp) return yScaleProp;
+    const extent = tigercatCore.getNumberExtent(yValues, { includeZero });
+    return tigercatCore.createLinearScale(extent, [innerRect.height, 0]);
+  }, [yScaleProp, yValues, includeZero, innerRect.height]);
+  const resolvedShowXAxis = showAxis && showXAxis;
+  const resolvedShowYAxis = showAxis && showYAxis;
+  const palette = react.useMemo(
+    () => colors && colors.length > 0 ? colors : [...tigercatCore.DEFAULT_CHART_COLORS],
+    [colors]
+  );
+  const seriesData = react.useMemo(
+    () => resolvedSeries.map((s, seriesIndex) => {
+      const color = s.color ?? palette[seriesIndex % palette.length];
+      const points = s.data.map((datum, pointIndex) => ({
+        x: resolvedXScale.map(datum.x),
+        y: resolvedYScale.map(datum.y),
+        datum,
+        pointIndex
+      }));
+      const linePath = tigercatCore.createLinePath(points, curve);
+      const opacity = tigercatCore.getChartElementOpacity(seriesIndex, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+      return {
+        series: s,
+        seriesIndex,
+        color,
+        linePath,
+        points,
+        opacity,
+        strokeWidth: s.strokeWidth ?? strokeWidth,
+        strokeDasharray: s.strokeDasharray,
+        showPoints: s.showPoints ?? showPoints,
+        pointSize: s.pointSize ?? pointSize,
+        pointColor: s.pointColor ?? color
+      };
+    }),
+    [
+      resolvedSeries,
+      palette,
+      resolvedXScale,
+      resolvedYScale,
+      curve,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity,
+      strokeWidth,
+      showPoints,
+      pointSize
+    ]
+  );
+  const legendItems = react.useMemo(
+    () => resolvedSeries.map((s, index) => ({
+      index,
+      label: legendFormatter ? legendFormatter(s, index) : s.name ?? `Series ${index + 1}`,
+      color: s.color ?? palette[index % palette.length],
+      active: activeIndex === null || activeIndex === index
+    })),
+    [resolvedSeries, legendFormatter, palette, activeIndex]
+  );
+  const formatTooltip = react.useCallback(
+    (datum, seriesIndex, _pointIndex, s) => {
+      if (tooltipFormatter) return tooltipFormatter(datum, seriesIndex, _pointIndex, s);
+      const seriesName = s?.name ?? `Series ${seriesIndex + 1}`;
+      const label = datum.label ?? String(datum.x);
+      return `${seriesName} \xB7 ${label}: ${datum.y}`;
+    },
+    [tooltipFormatter]
+  );
+  const tooltipContent = react.useMemo(() => {
+    if (!hoveredPointInfo) return "";
+    const { seriesIndex, pointIndex } = hoveredPointInfo;
+    const s = resolvedSeries[seriesIndex];
+    const datum = s?.data[pointIndex];
+    return datum ? formatTooltip(datum, seriesIndex, pointIndex, s) : "";
+  }, [hoveredPointInfo, resolvedSeries, formatTooltip]);
+  const handlePointMouseEnter = react.useCallback(
+    (seriesIndex, pointIndex, event) => {
+      setHoveredPointInfo({ seriesIndex, pointIndex });
+      setTooltipPosition({ x: event.clientX, y: event.clientY });
+      onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+    },
+    [onPointHover, resolvedSeries]
+  );
+  const handlePointMouseMove = react.useCallback((event) => {
+    setTooltipPosition({ x: event.clientX, y: event.clientY });
+  }, []);
+  const handlePointMouseLeave = react.useCallback(() => {
+    setHoveredPointInfo(null);
+    onPointHover?.(null, null, null);
+  }, [onPointHover]);
+  const handlePointClick = react.useCallback(
+    (seriesIndex, pointIndex) => {
+      onPointClick?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+      handleSeriesSelect(seriesIndex);
+    },
+    [onPointClick, resolvedSeries, handleSeriesSelect]
+  );
+  const handleKeyDown = react.useCallback(
+    (event, seriesIndex) => {
+      if (!selectable) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      handleSeriesSelect(seriesIndex);
+    },
+    [selectable, handleSeriesSelect]
+  );
+  const chart = /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkDUWAV47E_js.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: tigercatCore.classNames(className),
+      children: [
+        showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+          chunk3QFHVAZT_js.ChartGrid,
+          {
+            xScale: resolvedXScale,
+            yScale: resolvedYScale,
+            show: "both",
+            xTicks,
+            yTicks,
+            xTickValues,
+            yTickValues,
+            lineStyle: gridLineStyle,
+            strokeWidth: gridStrokeWidth
+          }
+        ),
+        resolvedShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE5GD3H7L_js.ChartAxis,
+          {
+            scale: resolvedXScale,
+            orientation: "bottom",
+            y: innerRect.height,
+            ticks: xTicks,
+            tickValues: xTickValues,
+            tickFormat: xTickFormat,
+            label: xAxisLabel
+          }
+        ),
+        resolvedShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE5GD3H7L_js.ChartAxis,
+          {
+            scale: resolvedYScale,
+            orientation: "left",
+            ticks: yTicks,
+            tickValues: yTickValues,
+            tickFormat: yTickFormat,
+            label: yAxisLabel
+          }
+        ),
+        seriesData.map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+          chunkAX5XRD2Q_js.ChartSeries,
+          {
+            data: sd.series.data,
+            name: sd.series.name,
+            type: "line",
+            opacity: sd.opacity,
+            className: tigercatCore.classNames(sd.series.className, (hoverable || selectable) && "cursor-pointer"),
+            onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
+            onMouseLeave: handleSeriesHoverLeave,
+            onClick: () => handleSeriesSelect(sd.seriesIndex),
+            tabIndex: selectable ? 0 : void 0,
+            onKeyDown: (e) => handleKeyDown(e, sd.seriesIndex),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: sd.linePath,
+                  fill: "none",
+                  stroke: sd.color,
+                  strokeWidth: sd.strokeWidth,
+                  strokeDasharray: sd.strokeDasharray,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "transition-opacity duration-150",
+                  "data-line-series": sd.seriesIndex
+                }
+              ),
+              sd.showPoints && sd.points.map((point) => /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: point.x,
+                  cy: point.y,
+                  r: sd.pointSize,
+                  fill: sd.pointColor,
+                  className: "transition-all duration-150",
+                  "data-point-index": point.pointIndex,
+                  onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
+                  onMouseMove: handlePointMouseMove,
+                  onMouseLeave: handlePointMouseLeave,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handlePointClick(sd.seriesIndex, point.pointIndex);
+                  }
+                },
+                `point-${sd.seriesIndex}-${point.pointIndex}`
+              ))
+            ]
+          },
+          `series-${sd.seriesIndex}`
+        ))
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+    chunkM375I56K_js.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: hoveredPointInfo !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  if (!showLegend) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunk6PBNFLM7_js.ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var LineChart_default = LineChart;
+
+exports.LineChart = LineChart;
+exports.LineChart_default = LineChart_default;

package/dist/{chunk-FQ6UHRAO.js → chunk-GQMYCYZ4.js}

@@ -366,16 +366,9 @@ var Select = (props) => {
             {
               className: "w-5 h-5 text-[var(--tiger-select-check-icon,var(--tiger-primary,#2563eb))]",
               xmlns: "http://www.w3.org/2000/svg",
-              viewBox: "0 0 20 20",
+              viewBox: tigercatCore.icon20ViewBox,
               fill: "currentColor",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-                  clipRule: "evenodd"
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: tigercatCore.checkSolidIcon20PathD, clipRule: "evenodd" })
             }
           )
         ] })
@@ -434,16 +427,9 @@ var Select = (props) => {
               {
                 className: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]",
                 xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 20 20",
+                viewBox: tigercatCore.icon20ViewBox,
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
-                    clipRule: "evenodd"
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: tigercatCore.closeSolidIcon20PathD, clipRule: "evenodd" })
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.classNames("inline-flex", isOpen && "rotate-180"), children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -451,16 +437,9 @@ var Select = (props) => {
               {
                 className: "w-5 h-5 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
                 xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 20 20",
+                viewBox: tigercatCore.icon20ViewBox,
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
-                    clipRule: "evenodd"
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: tigercatCore.chevronDownSolidIcon20PathD, clipRule: "evenodd" })
               }
             ) })
           ] })

package/dist/{chunk-G6FSHN2I.mjs → chunk-GW4EWT2K.mjs}

@@ -1,8 +1,8 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { classNames, getTooltipContainerClasses, getTooltipTriggerClasses, getDropdownMenuWrapperClasses, getTooltipContentClasses } from '@expcat/tigercat-core';
+import { useFloating, useClickOutside, useEscapeKey } from './chunk-WLIFEALE.mjs';
+import { useState, useRef, useCallback } from 'react';
+import { classNames, getTooltipContainerClasses, getTooltipTriggerClasses, getTooltipContentClasses, getTransformOrigin } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/Tooltip.tsx
 var tooltipIdCounter = 0;
 var createTooltipId = () => `tiger-tooltip-${++tooltipIdCounter}`;
 var Tooltip = ({
@@ -12,6 +12,7 @@ var Tooltip = ({
   trigger = "hover",
   placement = "top",
   disabled = false,
+  offset = 8,
   className,
   style,
   children,
@@ -23,6 +24,8 @@ var Tooltip = ({
   const [internalVisible, setInternalVisible] = useState(defaultVisible);
   const currentVisible = isControlled ? visible : internalVisible;
   const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
   const tooltipIdRef = useRef(null);
   if (!tooltipIdRef.current) {
     tooltipIdRef.current = createTooltipId();
@@ -30,6 +33,17 @@ var Tooltip = ({
   const tooltipId = tooltipIdRef.current;
   const tooltipContent = contentContent ?? content;
   const describedBy = tooltipContent != null ? tooltipId : void 0;
+  const {
+    x,
+    y,
+    placement: actualPlacement
+  } = useFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement,
+    offset
+  });
   const setVisible = useCallback(
     (newVisible) => {
       if (disabled && newVisible) return;
@@ -60,35 +74,26 @@ var Tooltip = ({
     if (disabled || trigger !== "focus") return;
     setVisible(false);
   };
-  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]);
-  useEffect(() => {
-    if (!currentVisible) return;
-    const handleKeyDown = (event) => {
-      if (event.key !== "Escape") return;
-      setVisible(false);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [currentVisible, setVisible]);
+  useClickOutside({
+    enabled: currentVisible && trigger === "click",
+    refs: [containerRef],
+    onOutsideClick: () => setVisible(false),
+    defer: true
+  });
+  useEscapeKey({
+    enabled: currentVisible,
+    onEscape: () => setVisible(false)
+  });
   const containerClasses = classNames(getTooltipContainerClasses(), className);
   const triggerClasses = getTooltipTriggerClasses(disabled);
-  const contentWrapperClasses = getDropdownMenuWrapperClasses(currentVisible, placement);
   const contentClasses = getTooltipContentClasses();
+  const floatingStyles = {
+    position: "absolute",
+    left: x,
+    top: y,
+    transformOrigin: getTransformOrigin(actualPlacement),
+    zIndex: 1e3
+  };
   const triggerHandlers = {};
   if (trigger === "click") {
     triggerHandlers.onClick = handleTriggerClick;
@@ -103,8 +108,17 @@ var Tooltip = ({
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
-    /* @__PURE__ */ jsx("div", { className: triggerClasses, "aria-describedby": describedBy, ...triggerHandlers, children }),
-    /* @__PURE__ */ jsx("div", { className: contentWrapperClasses, hidden: !currentVisible, "aria-hidden": !currentVisible, children: /* @__PURE__ */ jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: tooltipContent }) })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: triggerClasses,
+        "aria-describedby": describedBy,
+        ...triggerHandlers,
+        children
+      }
+    ),
+    currentVisible && /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: tooltipContent }) })
   ] });
 };
 

package/dist/{chunk-AQQRWISY.js → chunk-GXTBCX3M.js}

@@ -93,7 +93,7 @@ var StepsItem = ({
   const contentClasses = tigercatCore.getStepContentClasses(stepsContext.direction, stepsContext.simple);
   const titleClasses = tigercatCore.getStepTitleClasses(stepStatus, stepsContext.size, isClickable);
   const descriptionClasses = tigercatCore.getStepDescriptionClasses(stepStatus, stepsContext.size);
-  const handleClick = (event) => {
+  const handleClick = (_event) => {
     if (!isClickable) {
       return;
     }