@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-DECUASRW.mjs → chunk-PTKQJPLM.mjs}

@@ -1,47 +1,55 @@
-import {
-  useResponsiveChartSize
-} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-JZZPLKTW.mjs";
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
 import {
   ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
+} from "./chunk-ST4NN6XV.mjs";
 import {
   ChartTooltip
-} from "./chunk-YORCCCQX.mjs";
+} from "./chunk-IPI45RUK.mjs";
 import {
   ChartAxis
-} from "./chunk-RQSQXQN6.mjs";
+} from "./chunk-XZFHPHV5.mjs";
 import {
   ChartCanvas
-} from "./chunk-CUAXRBKO.mjs";
+} from "./chunk-OP77MPGN.mjs";
 import {
   ChartGrid
-} from "./chunk-677VSTPW.mjs";
+} from "./chunk-2PC625DX.mjs";
 import {
   ChartLegend
-} from "./chunk-F2ITBDUS.mjs";
+} from "./chunk-A4JRK5SM.mjs";
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/ScatterChart.tsx
 import { useId, useMemo, useState, useEffect } from "react";
 import {
   classNames,
   createLinearScale,
-  getChartElementOpacity,
   getNumberExtent,
   getStableChartGradientPrefix,
   getScatterHoverShadow,
-  getScatterHoverSize,
-  getScatterPointPath,
   scatterPointTransitionClasses,
-  SCATTER_ENTRANCE_KEYFRAMES,
   SCATTER_ENTRANCE_CLASS,
+  layoutScatterPoints,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  CHART_SURFACE_FILL,
+  SCATTER_ENTRANCE_STAGGER_MS,
+  SCATTER_ENTRANCE_STAGGER_MAX_MS,
+  formatChartTemplate,
+  scatterPointDisplayLabel,
   resolveChartPalette,
   buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
   resolveChartTooltipContent,
   mergeTigerLocale,
   getChartLabels
@@ -50,7 +58,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var ScatterChart = ({
   width = 320,
   height = 200,
-  padding = 24,
+  padding = DEFAULT_CHART_PADDING,
   responsive = false,
   data,
   xScale,
@@ -62,7 +70,8 @@ var ScatterChart = ({
   gradient = false,
   animated = false,
   pointBorderWidth = 0,
-  pointBorderColor = "white",
+  pointBorderColor = CHART_SURFACE_FILL,
+  sizeScale = false,
   showGrid = true,
   showAxis = true,
   showXAxis = true,
@@ -128,6 +137,7 @@ var ScatterChart = ({
     tooltipPosition,
     resolvedHoveredIndex,
     activeIndex,
+    resolvedSelectedIndex,
     handleMouseEnter,
     handleMouseMove,
     handleMouseLeave,
@@ -135,8 +145,7 @@ var ScatterChart = ({
     handleKeyDown,
     handleLegendClick,
     handleLegendHover,
-    handleLegendLeave,
-    wrapperClasses
+    handleLegendLeave
   } = useChartInteraction({
     hoverable,
     showTooltip,
@@ -152,7 +161,9 @@ var ScatterChart = ({
       onPointHover?.(index, index !== null ? data[index] : null);
     },
     onSelectedIndexChange,
-    callbacks: { onClick: onPointClick }
+    onClick: (index, datum) => {
+      if (datum !== void 0) onPointClick?.(index, datum);
+    }
   });
   const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
     width,
@@ -174,25 +185,18 @@ var ScatterChart = ({
   }, [yScale, yValues, includeZero, innerRect.height]);
   const palette = useMemo(() => resolveChartPalette(colors, pointColor), [colors, pointColor]);
   const points = useMemo(
-    () => data.map((item, index) => {
-      const color = item.color ?? palette[index % palette.length];
-      const opacity = getChartElementOpacity(index, activeIndex, {
-        activeOpacity,
-        inactiveOpacity
-      });
-      const isHovered = resolvedHoveredIndex === index;
-      const baseSize = item.size ?? pointSize;
-      const r = isHovered ? getScatterHoverSize(baseSize) : baseSize;
-      return {
-        cx: resolvedXScale.map(item.x),
-        cy: resolvedYScale.map(item.y),
-        r,
-        baseSize,
-        color,
-        opacity: pointOpacity ?? opacity,
-        isHovered,
-        datum: item
-      };
+    () => layoutScatterPoints(data, resolvedXScale, resolvedYScale, {
+      pointSize,
+      pointStyle,
+      palette,
+      activeIndex,
+      hoveredIndex: resolvedHoveredIndex,
+      gradient,
+      gradientPrefix,
+      sizeScale,
+      pointOpacity,
+      activeOpacity,
+      inactiveOpacity
     }),
     [
       data,
@@ -204,7 +208,11 @@ var ScatterChart = ({
       resolvedXScale,
       resolvedYScale,
       pointSize,
-      pointOpacity
+      pointStyle,
+      pointOpacity,
+      gradient,
+      gradientPrefix,
+      sizeScale
     ]
   );
   const legendItems = useMemo(
@@ -212,21 +220,28 @@ var ScatterChart = ({
       data,
       palette,
       activeIndex,
-      getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : d.label ?? `(${d.x}, ${d.y})`,
+      selectedIndex: resolvedSelectedIndex,
+      getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : scatterPointDisplayLabel(d, i, labels.pointAriaLabel),
       getColor: (d, i) => d.color ?? palette[i % palette.length]
     }),
-    [data, legendFormatter, palette, activeIndex]
+    [data, legendFormatter, palette, activeIndex, resolvedSelectedIndex, labels.pointAriaLabel]
   );
   const tooltipContent = useMemo(
-    () => resolveChartTooltipContent(resolvedHoveredIndex, data, tooltipFormatter, (datum, index) => {
-      const label = datum.label ?? `Point ${index + 1}`;
-      return `${label}: (${datum.x}, ${datum.y})`;
-    }),
-    [resolvedHoveredIndex, data, tooltipFormatter]
+    () => resolveChartTooltipContent(
+      resolvedHoveredIndex,
+      data,
+      tooltipFormatter,
+      (datum, index) => formatChartTemplate(labels.pointAriaLabel, {
+        index: index + 1,
+        x: datum.x,
+        y: datum.y
+      })
+    ),
+    [resolvedHoveredIndex, data, tooltipFormatter, labels.pointAriaLabel]
   );
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
-  const interactive = hoverable || selectable;
+  const interactive = hoverable || selectable || Boolean(onPointClick);
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -236,25 +251,23 @@ var ScatterChart = ({
       responsive,
       title,
       desc,
-      className: classNames(className),
       onResolvedSizeChange,
       children: [
-        gradient && /* @__PURE__ */ jsx("defs", { children: palette.map((color, i) => /* @__PURE__ */ jsxs(
+        gradient && /* @__PURE__ */ jsx("defs", { children: points.map((point) => /* @__PURE__ */ jsxs(
           "radialGradient",
           {
-            id: `${gradientPrefix}-${i}`,
+            id: `${gradientPrefix}-${point.index}`,
             cx: "35%",
             cy: "35%",
             r: "65%",
             children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#fff", stopOpacity: 0.5 }),
-              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.95 }),
-              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 1 })
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: CHART_SURFACE_FILL, stopOpacity: 0.5 }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: point.color, stopOpacity: 0.95 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: point.color, stopOpacity: 1 })
             ]
           },
-          `grad-${i}`
+          `grad-${point.index}`
         )) }),
-        animated && mounted && /* @__PURE__ */ jsx("style", { children: SCATTER_ENTRANCE_KEYFRAMES }),
         showGrid && /* @__PURE__ */ jsx(
           ChartGrid,
           {
@@ -292,37 +305,51 @@ var ScatterChart = ({
             label: yAxisLabel
           }
         ),
-        /* @__PURE__ */ jsx(ChartSeries, { data, type: "scatter", children: points.map((point, index) => {
-          const paletteIdx = index % palette.length;
-          const fill = gradient ? `url(#${gradientPrefix}-${paletteIdx})` : point.color;
+        /* @__PURE__ */ jsx(ChartSeries, { data, type: "scatter", children: points.map((point, visualIndex) => {
           const filterStyle = point.isHovered ? getScatterHoverShadow(point.color) : void 0;
-          const animDelay = animated && mounted ? `${index * 60}ms` : void 0;
-          const styleObj = {
-            ...filterStyle ? { filter: filterStyle } : {},
-            ...animDelay ? {
-              animation: `${SCATTER_ENTRANCE_CLASS} var(--tiger-motion-duration-slow,500ms) var(--tiger-motion-ease-spring,cubic-bezier(.34,1.56,.64,1)) ${animDelay} both`
-            } : {}
-          };
+          const animDelay = animated && mounted ? `${Math.min(visualIndex * SCATTER_ENTRANCE_STAGGER_MS, SCATTER_ENTRANCE_STAGGER_MAX_MS)}ms` : void 0;
+          const visualActive = points.findIndex((item) => item.index === (activeIndex ?? 0));
           const sharedProps = {
-            fill,
+            fill: point.fill,
             opacity: point.opacity,
             stroke: pointBorderColor,
             strokeWidth: pointBorderWidth,
             className: classNames(
-              scatterPointTransitionClasses,
+              animated ? scatterPointTransitionClasses : void 0,
               animDelay && SCATTER_ENTRANCE_CLASS,
               interactive && "cursor-pointer"
             ),
-            style: Object.keys(styleObj).length > 0 ? styleObj : void 0,
-            tabIndex: selectable ? 0 : void 0,
-            role: selectable ? "button" : "img",
-            "aria-label": point.datum.label ?? labels.pointAriaLabel.replace("{index}", String(index + 1)).replace("{x}", String(point.datum.x)).replace("{y}", String(point.datum.y)),
-            "data-point-index": index,
-            onMouseEnter: (e) => handleMouseEnter(index, e),
+            style: {
+              ...filterStyle ? { filter: filterStyle } : {},
+              ...animDelay ? { animationDelay: animDelay } : {}
+            },
+            tabIndex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? 0 : visualActive) : void 0,
+            role: interactive ? "button" : void 0,
+            "aria-hidden": interactive ? void 0 : true,
+            "aria-label": interactive ? point.datum.label ?? formatChartTemplate(labels.pointAriaLabel, {
+              index: point.index + 1,
+              x: point.datum.x,
+              y: point.datum.y
+            }) : void 0,
+            "data-point-index": point.index,
+            onMouseEnter: (e) => handleMouseEnter(point.index, e),
             onMouseMove: handleMouseMove,
             onMouseLeave: handleMouseLeave,
-            onClick: () => handleClick(index),
-            onKeyDown: (e) => handleKeyDown(e, index)
+            onClick: () => handleClick(point.index),
+            onKeyDown: (e) => {
+              if (isChartNavigationKey(e.key)) {
+                e.preventDefault();
+                const nextVisual = nextChartRovingIndex(visualIndex, e.key, points.length);
+                const next = points[nextVisual];
+                const node = e.currentTarget.parentElement?.querySelector(
+                  `[data-point-index="${next.index}"]`
+                );
+                if (node instanceof SVGElement) node.focus();
+                handleMouseEnter(next.index, e);
+                return;
+              }
+              handleKeyDown(e, point.index);
+            }
           };
           if (pointStyle === "circle") {
             return /* @__PURE__ */ jsx(
@@ -333,10 +360,10 @@ var ScatterChart = ({
                 r: point.r,
                 ...sharedProps
               },
-              `point-${index}`
+              `point-${point.index}`
             );
           }
-          return /* @__PURE__ */ jsx("g", { transform: `translate(${point.cx},${point.cy})`, children: /* @__PURE__ */ jsx("path", { d: getScatterPointPath(pointStyle, point.r), ...sharedProps }) }, `point-${index}`);
+          return /* @__PURE__ */ jsx("g", { transform: `translate(${point.cx},${point.cy})`, children: /* @__PURE__ */ jsx("path", { d: point.d, ...sharedProps }) }, `point-${point.index}`);
         }) })
       ]
     }
@@ -350,30 +377,35 @@ var ScatterChart = ({
       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,
-        ariaLabel: labels.legendAriaLabel,
-        interactive,
-        onItemClick: handleLegendClick,
-        onItemHover: handleLegendHover,
-        onItemLeave: handleLegendLeave
-      }
-    ),
-    tooltip
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend,
+        legendPosition,
+        responsive,
+        className
+      }),
+      children: [
+        chart,
+        showLegend ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: legendItems,
+            orientation: chartLegendOrientationFromPosition(legendPosition),
+            markerSize: legendMarkerSize,
+            gap: legendGap,
+            ariaLabel: labels.legendAriaLabel,
+            interactive,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }
+        ) : null,
+        tooltip
+      ]
+    }
+  );
 };
 var ScatterChart_default = ScatterChart;
 

package/dist/chunk-PV237GAZ.mjs

@@ -0,0 +1,226 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Progress.tsx
+import React, { useLayoutEffect, useMemo } from "react";
+import {
+  calculateCirclePath,
+  classNames,
+  getCircleSize,
+  getProgressFillClasses,
+  getProgressLabels,
+  getProgressStrokeClasses,
+  getProgressTextColorClasses,
+  injectProgressStyles,
+  progressCircleBaseClasses,
+  progressCircleTextClasses,
+  progressCircleTrackStrokeClasses,
+  progressLineBaseClasses,
+  progressLineSizeClasses,
+  progressTextBaseClasses,
+  progressTextSizeClasses,
+  progressTrackBgClasses,
+  resolveProgressView
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Progress = React.memo(
+  ({
+    variant = "primary",
+    size = "md",
+    type = "line",
+    percentage = 0,
+    status = "normal",
+    showText,
+    text,
+    format,
+    striped = false,
+    stripedAnimation = false,
+    strokeWidth = 6,
+    width = "auto",
+    height,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    ...props
+  }) => {
+    const config = useTigerConfig();
+    const widgetName = getProgressLabels(config.locale).ariaLabel;
+    useLayoutEffect(() => {
+      injectProgressStyles();
+    }, []);
+    const view = useMemo(
+      () => resolveProgressView({
+        percentage,
+        variant,
+        status,
+        type,
+        showText,
+        text,
+        format,
+        striped,
+        stripedAnimation,
+        ariaLabel,
+        ariaLabelledby,
+        widgetName
+      }),
+      [
+        percentage,
+        variant,
+        status,
+        type,
+        showText,
+        text,
+        format,
+        striped,
+        stripedAnimation,
+        ariaLabel,
+        ariaLabelledby,
+        widgetName
+      ]
+    );
+    const ariaAttrs = {
+      role: "progressbar",
+      "aria-label": view.ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "aria-valuenow": view.valueNow,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": view.valueText
+    };
+    if (type === "circle") {
+      const {
+        width: svgWidth,
+        height: svgHeight,
+        radius,
+        cx,
+        cy,
+        strokeWidth: safeStroke
+      } = getCircleSize(size, strokeWidth);
+      const { strokeDasharray, strokeDashoffset } = calculateCirclePath(radius, view.percentage);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          className: classNames(
+            progressCircleBaseClasses,
+            view.paused && "tiger-progress-paused",
+            className
+          ),
+          style: {
+            ...style ?? {},
+            width: `${svgWidth}px`,
+            height: `${svgHeight}px`
+          },
+          ...ariaAttrs,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: svgWidth,
+                height: svgHeight,
+                viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx,
+                      cy,
+                      r: radius,
+                      fill: "none",
+                      stroke: "currentColor",
+                      className: progressCircleTrackStrokeClasses,
+                      strokeWidth: safeStroke
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx,
+                      cy,
+                      r: radius,
+                      fill: "none",
+                      stroke: "currentColor",
+                      className: classNames(
+                        "tiger-progress-fill",
+                        getProgressStrokeClasses(view.effectiveVariant)
+                      ),
+                      strokeWidth: safeStroke,
+                      strokeLinecap: view.percentage === 0 ? "butt" : "round",
+                      strokeDasharray,
+                      strokeDashoffset,
+                      style: {
+                        transform: "rotate(-90deg)",
+                        transformOrigin: "center"
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            view.shouldShowText && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames(
+                  progressCircleTextClasses,
+                  progressTextSizeClasses[size],
+                  "font-medium",
+                  getProgressTextColorClasses(view.effectiveVariant)
+                ),
+                children: view.displayText
+              }
+            )
+          ]
+        }
+      );
+    }
+    const containerStyle = width !== "auto" ? { width: typeof width === "number" ? `${width}px` : width } : {};
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        className: classNames(
+          "flex items-center w-full",
+          view.paused && "tiger-progress-paused",
+          className
+        ),
+        style: { ...style ?? {}, ...containerStyle },
+        ...ariaAttrs,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(
+                progressLineBaseClasses,
+                progressTrackBgClasses,
+                !height && progressLineSizeClasses[size]
+              ),
+              style: { flex: 1, ...height ? { height: `${height}px` } : {} },
+              children: /* @__PURE__ */ jsx("div", { className: getProgressFillClasses(view), style: { width: `${view.percentage}%` } })
+            }
+          ),
+          view.shouldShowText && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames(
+                progressTextBaseClasses,
+                progressTextSizeClasses[size],
+                getProgressTextColorClasses(view.effectiveVariant)
+              ),
+              children: view.displayText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+
+export {
+  Progress
+};