@expcat/tigercat-react 1.3.4 → 1.5.0

package/dist/{chunk-SY23FAXK.mjs → chunk-T6HNFCOW.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+
 // src/components/ImageCropper.tsx
 import {
   useState,
@@ -5,6 +9,7 @@ import {
   useEffect,
   useCallback,
   useMemo,
+  useId,
   useImperativeHandle,
   forwardRef
 } from "react";
@@ -21,7 +26,9 @@ import {
   getInitialCropRect,
   resizeCropRect,
   moveCropRect,
-  cropCanvas
+  cropCanvas,
+  getImageEditorLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ImageCropper = forwardRef(
@@ -33,11 +40,20 @@ var ImageCropper = forwardRef(
     outputType = "image/png",
     quality = 0.92,
     guides = true,
+    locale,
     className,
     style,
     onCropChange,
     onReady
   }, ref) => {
+    const reactId = useId();
+    const maskId = `tiger-crop-mask-${reactId.replace(/:/g, "")}`;
+    const config = useTigerConfig();
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(() => getImageEditorLabels(mergedLocale), [mergedLocale]);
     const containerRef = useRef(null);
     const imageRef = useRef(null);
     const [imageLoaded, setImageLoaded] = useState(false);
@@ -267,7 +283,7 @@ var ImageCropper = forwardRef(
           className: classNames(containerClasses, "flex items-center justify-center"),
           style: { ...style, minHeight: "200px" },
           role: "img",
-          "aria-label": "Loading image for cropping",
+          "aria-label": labels.loadingCropImageAriaLabel,
           children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin" })
         }
       );
@@ -283,7 +299,7 @@ var ImageCropper = forwardRef(
           height: `${displayHeight}px`
         },
         role: "application",
-        "aria-label": "Image cropper",
+        "aria-label": labels.cropperDialogAriaLabel,
         "aria-roledescription": "image cropper",
         children: [
           /* @__PURE__ */ jsx(
@@ -293,7 +309,7 @@ var ImageCropper = forwardRef(
               className: imageCropperImgClasses,
               style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
               draggable: false,
-              alt: "Image to crop"
+              alt: labels.imageToCropAriaLabel
             }
           ),
           /* @__PURE__ */ jsxs(
@@ -304,7 +320,7 @@ var ImageCropper = forwardRef(
               height: displayHeight,
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: "crop-mask", children: [
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
                   /* @__PURE__ */ jsx("rect", { width: displayWidth, height: displayHeight, fill: "white" }),
                   /* @__PURE__ */ jsx("rect", { x: cr.x, y: cr.y, width: cr.width, height: cr.height, fill: "black" })
                 ] }) }),
@@ -314,7 +330,7 @@ var ImageCropper = forwardRef(
                     width: displayWidth,
                     height: displayHeight,
                     fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
-                    mask: "url(#crop-mask)"
+                    mask: `url(#${maskId})`
                   }
                 )
               ]
@@ -344,7 +360,7 @@ var ImageCropper = forwardRef(
               },
               role: "button",
               tabIndex: 0,
-              "aria-label": "Move crop area",
+              "aria-label": labels.moveCropAreaAriaLabel,
               onMouseDown: (e) => handleMouseDown(e, "move"),
               onTouchStart: (e) => handleTouchStart(e, "move"),
               onKeyDown: handleMoveKeyDown
@@ -427,7 +443,7 @@ var ImageCropper = forwardRef(
                 style: pos,
                 role: "button",
                 tabIndex: 0,
-                "aria-label": `Resize crop area ${handle}`,
+                "aria-label": labels.resizeCropAreaAriaLabel.replace("{handle}", handle),
                 onMouseDown: (e) => handleMouseDown(e, "resize", handle),
                 onTouchStart: (e) => handleTouchStart(e, "resize", handle),
                 onKeyDown: (e) => handleResizeKeyDown(e, handle)

package/dist/{chunk-ZITBUGBH.mjs → chunk-TBMDIAZI.mjs}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-6QML6T3Y.mjs";
 import {
   ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
+} from "./chunk-ZG2W4HS5.mjs";
 import {
   ChartSeries
 } from "./chunk-SDLMB34Y.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-O6YIPNXX.mjs";
 import {
   ChartAxis
 } from "./chunk-RQSQXQN6.mjs";
@@ -49,12 +49,12 @@ var LineChart = ({
   series,
   xScale: xScaleProp,
   yScale: yScaleProp,
-  lineColor: _lineColor = "var(--tiger-primary,#2563eb)",
+  lineColor = "var(--tiger-primary,#2563eb)",
   strokeWidth = 2,
   curve = "linear",
   showPoints = true,
   pointSize = 4,
-  pointColor: _pointColor,
+  pointColor,
   showGrid = true,
   showAxis = true,
   showXAxis = true,
@@ -112,8 +112,13 @@ var LineChart = ({
     [width, height, padding]
   );
   const resolvedSeries = useMemo(
-    () => resolveSeriesData(series, data),
-    [series, data]
+    () => 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,
@@ -259,6 +264,16 @@ var LineChart = ({
     setHoveredPointInfo(null);
     onPointHover?.(null, null, null);
   }, [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]);
@@ -275,6 +290,7 @@ var LineChart = ({
     },
     [selectable, handleSeriesSelect]
   );
+  const pointClickable = selectable || !!onPointClick;
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -437,6 +453,8 @@ var LineChart = ({
               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",
                   {
@@ -446,17 +464,46 @@ var LineChart = ({
                     fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                     stroke: sd.pointHollow ? sd.pointColor : "none",
                     strokeWidth: sd.pointHollow ? 2 : 0,
-                    className: linePointTransitionClasses,
+                    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: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                    onMouseMove: handlePointMouseMove,
-                    onMouseLeave: handlePointMouseLeave,
-                    onClick: (e) => {
+                    onMouseEnter: hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                    onMouseMove: hoverable ? handlePointMouseMove : void 0,
+                    onMouseLeave: hoverable ? 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}`
                 );