@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-TEVEXDY2.mjs

@@ -1,570 +0,0 @@
-import {
-  useResponsiveChartSize
-} from "./chunk-5JETWHLJ.mjs";
-import {
-  useChartInteraction
-} from "./chunk-JZZPLKTW.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
-import {
-  ChartTooltip
-} from "./chunk-YORCCCQX.mjs";
-import {
-  ChartAxis
-} from "./chunk-RQSQXQN6.mjs";
-import {
-  ChartCanvas
-} from "./chunk-CUAXRBKO.mjs";
-import {
-  ChartGrid
-} from "./chunk-677VSTPW.mjs";
-import {
-  ChartLegend
-} from "./chunk-F2ITBDUS.mjs";
-
-// src/components/LineChart.tsx
-import { useId, useMemo, useState, useCallback } from "react";
-import {
-  classNames,
-  createAreaPath,
-  createLinearScale,
-  createLinePath,
-  createPointScale,
-  getChartElementOpacity,
-  getStableChartGradientPrefix,
-  getNumberExtent,
-  linePointTransitionClasses,
-  resolveChartPalette,
-  buildChartLegendItems,
-  buildChartSeriesKeys,
-  resolveMultiSeriesTooltipContent,
-  resolveSeriesData,
-  defaultSeriesXYTooltipFormatter
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_CARTESIAN_PADDING = { top: 24, right: 24, bottom: 52, left: 52 };
-var LineChart = ({
-  width = 320,
-  height = 200,
-  padding = DEFAULT_CARTESIAN_PADDING,
-  responsive = false,
-  data,
-  series,
-  xScale: xScaleProp,
-  yScale: yScaleProp,
-  lineColor = "var(--tiger-primary,#2563eb)",
-  strokeWidth = 2,
-  curve = "linear",
-  showPoints = true,
-  pointSize = 4,
-  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,
-  showArea = false,
-  areaOpacity = 0.15,
-  pointHollow = false,
-  animated = false,
-  strokeGradient = false,
-  pointGradient = false,
-  tooltipFormatter,
-  legendFormatter,
-  title,
-  desc,
-  className,
-  onHoveredIndexChange,
-  onSelectedIndexChange,
-  onSeriesClick,
-  onSeriesHover,
-  onPointClick,
-  onPointHover
-}) => {
-  const [hoveredPointInfo, setHoveredPointInfo] = useState(null);
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-  const gradientId = useId();
-  const gradientPrefix = useMemo(
-    () => getStableChartGradientPrefix("line", gradientId),
-    [gradientId]
-  );
-  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
-    width,
-    height,
-    padding,
-    responsive
-  );
-  const resolvedSeries = useMemo(
-    () => resolveSeriesData(series, data, {
-      // Single-series colors (`lineColor`/`pointColor`) seed the synthesized
-      // series so they take effect when only `data` is provided.
-      color: lineColor,
-      pointColor
-    }),
-    [series, data, lineColor, pointColor]
-  );
-  const {
-    activeIndex,
-    handleMouseEnter: handleSeriesHoverEnter,
-    handleMouseLeave: handleSeriesHoverLeave,
-    handleClick: handleSeriesSelect,
-    handleLegendClick,
-    handleLegendHover,
-    handleLegendLeave,
-    wrapperClasses
-  } = useChartInteraction({
-    hoverable,
-    showTooltip,
-    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 = useMemo(() => resolvedSeries.flatMap((s) => s.data), [resolvedSeries]);
-  const xValues = useMemo(() => allData.map((d) => d.x), [allData]);
-  const yValues = useMemo(() => allData.map((d) => d.y), [allData]);
-  const isXNumeric = useMemo(() => xValues.every((v) => typeof v === "number"), [xValues]);
-  const resolvedXScale = useMemo(() => {
-    if (xScaleProp) return xScaleProp;
-    if (isXNumeric) {
-      const extent = getNumberExtent(xValues, { includeZero: false });
-      return createLinearScale(extent, [0, innerRect.width]);
-    } else {
-      const categories = [...new Set(xValues.map(String))];
-      return createPointScale(categories, [0, innerRect.width], { padding: 0 });
-    }
-  }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
-  const resolvedYScale = useMemo(() => {
-    if (yScaleProp) return yScaleProp;
-    const extent = getNumberExtent(yValues, { includeZero });
-    return createLinearScale(extent, [innerRect.height, 0]);
-  }, [yScaleProp, yValues, includeZero, innerRect.height]);
-  const shouldShowXAxis = showAxis && showXAxis;
-  const shouldShowYAxis = showAxis && showYAxis;
-  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
-  const seriesKeys = useMemo(
-    () => buildChartSeriesKeys(resolvedSeries, { prefix: "line-" }),
-    [resolvedSeries]
-  );
-  const seriesData = useMemo(
-    () => resolvedSeries.map((s, seriesIndex) => {
-      const seriesKey = seriesKeys[seriesIndex];
-      const color = s.color ?? palette[seriesIndex % palette.length];
-      const points = s.data.map((datum, pointIndex) => ({
-        x: resolvedXScale.map(datum.x),
-        y: resolvedYScale.map(datum.y),
-        datum,
-        pointIndex
-      }));
-      const linePath = createLinePath(points, curve);
-      const seriesShowArea = s.showArea ?? showArea;
-      const areaPath = seriesShowArea ? createAreaPath(points, innerRect.height, curve) : "";
-      const opacity = getChartElementOpacity(seriesIndex, activeIndex, {
-        activeOpacity,
-        inactiveOpacity
-      });
-      return {
-        series: s,
-        seriesIndex,
-        seriesKey,
-        color,
-        linePath,
-        areaPath,
-        showArea: seriesShowArea,
-        areaOpacity: s.areaOpacity ?? areaOpacity,
-        points,
-        opacity,
-        strokeWidth: s.strokeWidth ?? strokeWidth,
-        strokeDasharray: s.strokeDasharray,
-        showPoints: s.showPoints ?? showPoints,
-        pointSize: s.pointSize ?? pointSize,
-        pointColor: s.pointColor ?? color,
-        pointHollow: s.pointHollow ?? pointHollow
-      };
-    }),
-    [
-      resolvedSeries,
-      seriesKeys,
-      palette,
-      resolvedXScale,
-      resolvedYScale,
-      curve,
-      activeIndex,
-      activeOpacity,
-      inactiveOpacity,
-      strokeWidth,
-      showPoints,
-      pointSize,
-      showArea,
-      areaOpacity,
-      pointHollow,
-      innerRect.height
-    ]
-  );
-  const legendItems = useMemo(
-    () => buildChartLegendItems({
-      data: resolvedSeries,
-      palette,
-      activeIndex,
-      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
-      getColor: (s, i) => s.color ?? palette[i % palette.length]
-    }),
-    [resolvedSeries, legendFormatter, palette, activeIndex]
-  );
-  const tooltipContent = useMemo(
-    () => resolveMultiSeriesTooltipContent(
-      hoveredPointInfo,
-      resolvedSeries,
-      tooltipFormatter,
-      defaultSeriesXYTooltipFormatter
-    ),
-    [hoveredPointInfo, resolvedSeries, tooltipFormatter]
-  );
-  const handlePointMouseEnter = useCallback(
-    (seriesIndex, pointIndex, event) => {
-      setHoveredPointInfo({ seriesIndex, pointIndex });
-      setTooltipPosition({ x: event.clientX, y: event.clientY });
-      if (hoverable) {
-        onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
-      }
-    },
-    [hoverable, onPointHover, resolvedSeries]
-  );
-  const handlePointMouseMove = useCallback((event) => {
-    setTooltipPosition({ x: event.clientX, y: event.clientY });
-  }, []);
-  const handlePointMouseLeave = useCallback(() => {
-    setHoveredPointInfo(null);
-    if (hoverable) {
-      onPointHover?.(null, null, null);
-    }
-  }, [hoverable, onPointHover]);
-  const showPointTooltipFromElement = useCallback(
-    (el, seriesIndex, pointIndex) => {
-      if (!hoverable) return;
-      const rect = el.getBoundingClientRect();
-      setHoveredPointInfo({ seriesIndex, pointIndex });
-      setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
-      onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
-    },
-    [hoverable, onPointHover, resolvedSeries]
-  );
-  const handlePointClick = useCallback(
-    (seriesIndex, pointIndex) => {
-      onPointClick?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
-      handleSeriesSelect(seriesIndex);
-    },
-    [onPointClick, resolvedSeries, handleSeriesSelect]
-  );
-  const handleKeyDown = useCallback(
-    (event, seriesIndex) => {
-      if (!selectable) return;
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      handleSeriesSelect(seriesIndex);
-    },
-    [selectable, handleSeriesSelect]
-  );
-  const pointClickable = selectable || !!onPointClick;
-  const trackPointHover = showTooltip || hoverable;
-  const chart = /* @__PURE__ */ jsxs(
-    ChartCanvas,
-    {
-      width,
-      height,
-      padding,
-      responsive,
-      title,
-      desc,
-      className: classNames(className),
-      onResolvedSizeChange,
-      children: [
-        (seriesData.some((sd) => sd.showArea) || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
-          animated && /* @__PURE__ */ jsx("style", { children: `
-              .tiger-line-animated {
-                animation: tiger-line-draw var(--tiger-motion-duration-slow,1.2s) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)) forwards;
-              }
-              @keyframes tiger-line-draw {
-                from { stroke-dashoffset: 1; }
-                to { stroke-dashoffset: 0; }
-              }
-              @media (prefers-reduced-motion: reduce) {
-                .tiger-line-animated { animation-duration: 0ms; }
-              }
-            ` }),
-          seriesData.filter((sd) => sd.showArea).map((sd) => /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: `${gradientPrefix}-${sd.seriesKey}`,
-              x1: "0",
-              y1: "0",
-              x2: "0",
-              y2: "1",
-              children: [
-                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: sd.color, stopOpacity: sd.areaOpacity }),
-                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: sd.color, stopOpacity: 0.02 })
-              ]
-            },
-            `area-grad-${sd.seriesKey}`
-          )),
-          pointGradient && seriesData.map((sd) => /* @__PURE__ */ jsxs(
-            "radialGradient",
-            {
-              id: `${gradientPrefix}-point-${sd.seriesKey}`,
-              cx: "0.5",
-              cy: "0.5",
-              r: "0.5",
-              children: [
-                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 30%)` }),
-                /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: sd.color }),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: "100%",
-                    stopColor: `color-mix(in oklab, ${sd.color} 100%, black 12%)`
-                  }
-                )
-              ]
-            },
-            `point-grad-${sd.seriesKey}`
-          )),
-          strokeGradient && seriesData.map((sd) => /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
-              x1: "0",
-              y1: "0",
-              x2: "1",
-              y2: "0",
-              children: [
-                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 12%)` }),
-                /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: sd.color }),
-                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: `color-mix(in oklab, ${sd.color} 100%, black 8%)` })
-              ]
-            },
-            `stroke-grad-${sd.seriesKey}`
-          ))
-        ] }),
-        showGrid && /* @__PURE__ */ jsx(
-          ChartGrid,
-          {
-            xScale: resolvedXScale,
-            yScale: resolvedYScale,
-            show: "both",
-            xTicks,
-            yTicks,
-            xTickValues,
-            yTickValues,
-            lineStyle: gridLineStyle,
-            strokeWidth: gridStrokeWidth
-          }
-        ),
-        shouldShowXAxis && /* @__PURE__ */ jsx(
-          ChartAxis,
-          {
-            scale: resolvedXScale,
-            orientation: "bottom",
-            y: innerRect.height,
-            ticks: xTicks,
-            tickValues: xTickValues,
-            tickFormat: xTickFormat,
-            label: xAxisLabel
-          }
-        ),
-        shouldShowYAxis && /* @__PURE__ */ jsx(
-          ChartAxis,
-          {
-            scale: resolvedYScale,
-            orientation: "left",
-            ticks: yTicks,
-            tickValues: yTickValues,
-            tickFormat: yTickFormat,
-            label: yAxisLabel
-          }
-        ),
-        seriesData.map((sd) => /* @__PURE__ */ jsxs(
-          ChartSeries,
-          {
-            data: sd.series.data,
-            name: sd.series.name,
-            type: "line",
-            opacity: sd.opacity,
-            "data-series-key": sd.seriesKey,
-            className: 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: [
-              sd.showArea && sd.areaPath && /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: sd.areaPath,
-                  fill: `url(#${gradientPrefix}-${sd.seriesKey})`,
-                  stroke: "none",
-                  className: "transition-opacity duration-300",
-                  "data-area-series": sd.seriesIndex,
-                  "data-series-key": sd.seriesKey
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: sd.linePath,
-                  fill: "none",
-                  stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
-                  strokeWidth: sd.strokeWidth,
-                  strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
-                  strokeDashoffset: animated ? "1" : void 0,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  pathLength: animated ? 1 : void 0,
-                  className: classNames(
-                    "transition-opacity [transition-duration:var(--tiger-motion-duration-base,200ms)]",
-                    animated && "tiger-line-animated"
-                  ),
-                  "data-line-series": sd.seriesIndex,
-                  "data-series-key": sd.seriesKey
-                }
-              ),
-              sd.showPoints && sd.points.map((point) => {
-                const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
-                const hoverSize = sd.pointSize + 2;
-                const datum = resolvedSeries[sd.seriesIndex]?.data?.[point.pointIndex];
-                const pointInteractive = hoverable || pointClickable;
-                return /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: point.x,
-                    cy: point.y,
-                    r: isHovered ? hoverSize : sd.pointSize,
-                    fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
-                    stroke: sd.pointHollow ? sd.pointColor : "none",
-                    strokeWidth: sd.pointHollow ? 2 : 0,
-                    className: classNames(
-                      linePointTransitionClasses,
-                      pointInteractive && "cursor-pointer"
-                    ),
-                    style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
-                    role: pointInteractive ? "button" : "img",
-                    "aria-label": datum?.label ?? String(datum?.y ?? ""),
-                    tabIndex: pointInteractive ? 0 : void 0,
-                    "data-point-index": point.pointIndex,
-                    "data-series-key": sd.seriesKey,
-                    onMouseEnter: trackPointHover ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
-                    onMouseMove: trackPointHover ? handlePointMouseMove : void 0,
-                    onMouseLeave: trackPointHover ? handlePointMouseLeave : void 0,
-                    onClick: pointClickable ? (e) => {
-                      e.stopPropagation();
-                      handlePointClick(sd.seriesIndex, point.pointIndex);
-                    } : void 0,
-                    onFocus: hoverable ? (e) => showPointTooltipFromElement(
-                      e.currentTarget,
-                      sd.seriesIndex,
-                      point.pointIndex
-                    ) : void 0,
-                    onBlur: hoverable ? handlePointMouseLeave : void 0,
-                    onKeyDown: pointInteractive ? (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        if (pointClickable) {
-                          handlePointClick(sd.seriesIndex, point.pointIndex);
-                        } else {
-                          showPointTooltipFromElement(
-                            e.currentTarget,
-                            sd.seriesIndex,
-                            point.pointIndex
-                          );
-                        }
-                      } else if (e.key === "Escape" && hoverable) {
-                        handlePointMouseLeave();
-                      }
-                    } : void 0
-                  },
-                  `point-${sd.seriesKey}-${point.pointIndex}`
-                );
-              })
-            ]
-          },
-          sd.seriesKey
-        ))
-      ]
-    }
-  );
-  const tooltip = showTooltip && /* @__PURE__ */ jsx(
-    ChartTooltip,
-    {
-      content: tooltipContent,
-      open: hoveredPointInfo !== null && tooltipContent !== "",
-      x: tooltipPosition.x,
-      y: tooltipPosition.y
-    }
-  );
-  if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: classNames("relative", responsive ? "block w-full min-w-0" : "inline-block"), children: [
-      chart,
-      tooltip
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: classNames(wrapperClasses, responsive && "w-full min-w-0"), children: [
-    chart,
-    /* @__PURE__ */ jsx(
-      ChartLegend,
-      {
-        items: legendItems,
-        position: legendPosition,
-        markerSize: legendMarkerSize,
-        gap: legendGap,
-        interactive: hoverable || selectable,
-        onItemClick: handleLegendClick,
-        onItemHover: handleLegendHover,
-        onItemLeave: handleLegendLeave
-      }
-    ),
-    tooltip
-  ] });
-};
-var LineChart_default = LineChart;
-
-export {
-  LineChart,
-  LineChart_default
-};

package/dist/chunk-TGXBCKOU.mjs

@@ -1,35 +0,0 @@
-// src/utils/global-locale.ts
-var nextGlobalTigerLocaleId = 0;
-var globalTigerLocaleStack = [];
-function createGlobalTigerLocaleHandle(locale) {
-  const entry = {
-    id: ++nextGlobalTigerLocaleId,
-    locale
-  };
-  globalTigerLocaleStack.push(entry);
-  return {
-    update(nextLocale) {
-      entry.locale = nextLocale;
-    },
-    dispose() {
-      const index = globalTigerLocaleStack.findIndex((item) => item.id === entry.id);
-      if (index !== -1) {
-        globalTigerLocaleStack.splice(index, 1);
-      }
-    }
-  };
-}
-function getGlobalTigerLocale() {
-  for (let index = globalTigerLocaleStack.length - 1; index >= 0; index -= 1) {
-    const locale = globalTigerLocaleStack[index]?.locale;
-    if (locale) {
-      return locale;
-    }
-  }
-  return void 0;
-}
-
-export {
-  createGlobalTigerLocaleHandle,
-  getGlobalTigerLocale
-};