@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-6E7FPBRR.mjs → chunk-ME5BLIFX.mjs}

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { classNames, imageViewerBackdropClasses, imageViewerCounterClasses, imageViewerCloseBtnClasses, imageViewerIcons, imageViewerNavBtnClasses, imageViewerImgClasses, imageViewerToolbarClasses, imageViewerToolbarBtnClasses, clampZoom, normalizeRotation } from '@expcat/tigercat-core';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createDefaultTransform, createPanState, createPinchState, classNames, imageViewerBackdropClasses, imageViewerCounterClasses, imageViewerCloseBtnClasses, imageViewerIcons, imageViewerNavBtnClasses, getImageTransformStyle, imageViewerImgClasses, movePinch, movePan, startPinch, startPan, applyWheelZoom, imageViewerToolbarClasses, imageViewerToolbarBtnClasses, clampZoom, normalizeRotation } from '@expcat/tigercat-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/components/ImageViewer.tsx
@@ -35,28 +35,32 @@ var ImageViewer = ({
   onIndexChange
 }) => {
   const [index, setIndex] = useState(currentIndex);
-  const [zoom, setZoom] = useState(1);
-  const [rotation, setRotation] = useState(0);
+  const [transform, setTransform] = useState(createDefaultTransform);
+  const panRef = useRef(createPanState());
+  const pinchRef = useRef(createPinchState());
   useEffect(() => {
     setIndex(currentIndex);
   }, [currentIndex]);
+  const resetTransform = useCallback(() => {
+    setTransform(createDefaultTransform());
+    panRef.current = createPanState();
+    pinchRef.current = createPinchState();
+  }, []);
   const handleClose = useCallback(() => {
     onClose?.();
   }, [onClose]);
   const handlePrev = useCallback(() => {
     const newIndex = (index - 1 + images.length) % images.length;
     setIndex(newIndex);
-    setZoom(1);
-    setRotation(0);
+    resetTransform();
     onIndexChange?.(newIndex);
-  }, [index, images.length, onIndexChange]);
+  }, [index, images.length, onIndexChange, resetTransform]);
   const handleNext = useCallback(() => {
     const newIndex = (index + 1) % images.length;
     setIndex(newIndex);
-    setZoom(1);
-    setRotation(0);
+    resetTransform();
     onIndexChange?.(newIndex);
-  }, [index, images.length, onIndexChange]);
+  }, [index, images.length, onIndexChange, resetTransform]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -134,8 +138,61 @@ var ImageViewer = ({
             className: imageViewerImgClasses,
             src: images[index],
             alt: `Image ${index + 1}`,
-            style: { transform: `scale(${zoom}) rotate(${rotation}deg)` },
-            draggable: false
+            style: { transform: getImageTransformStyle(transform), touchAction: "none" },
+            draggable: false,
+            onWheel: (e) => {
+              if (!zoomable) return;
+              e.preventDefault();
+              const newScale = applyWheelZoom(transform.scale, e.deltaY, { minZoom, maxZoom });
+              setTransform((t) => ({ ...t, scale: newScale }));
+            },
+            onMouseDown: (e) => {
+              if (e.button !== 0) return;
+              e.preventDefault();
+              panRef.current = startPan(e.clientX, e.clientY, transform.translateX, transform.translateY);
+            },
+            onMouseMove: (e) => {
+              if (!panRef.current.isPanning) return;
+              const result = movePan(panRef.current, e.clientX, e.clientY);
+              setTransform((t) => ({ ...t, ...result }));
+            },
+            onMouseUp: () => {
+              panRef.current = createPanState();
+            },
+            onMouseLeave: () => {
+              panRef.current = createPanState();
+            },
+            onTouchStart: (e) => {
+              if (e.touches.length === 2 && zoomable) {
+                e.preventDefault();
+                pinchRef.current = startPinch(e.touches[0], e.touches[1], transform.scale);
+              } else if (e.touches.length === 1) {
+                panRef.current = startPan(
+                  e.touches[0].clientX,
+                  e.touches[0].clientY,
+                  transform.translateX,
+                  transform.translateY
+                );
+              }
+            },
+            onTouchMove: (e) => {
+              if (e.touches.length === 2 && pinchRef.current.isPinching) {
+                e.preventDefault();
+                const newScale = movePinch(pinchRef.current, e.touches[0], e.touches[1], minZoom, maxZoom);
+                setTransform((t) => ({ ...t, scale: newScale }));
+              } else if (e.touches.length === 1 && panRef.current.isPanning) {
+                const result = movePan(panRef.current, e.touches[0].clientX, e.touches[0].clientY);
+                setTransform((t) => ({ ...t, ...result }));
+              }
+            },
+            onTouchEnd: () => {
+              pinchRef.current = createPinchState();
+              panRef.current = createPanState();
+            },
+            onTouchCancel: () => {
+              pinchRef.current = createPinchState();
+              panRef.current = createPanState();
+            }
           }
         ),
         (zoomable || rotatable) && /* @__PURE__ */ jsxs("div", { className: imageViewerToolbarClasses, children: [
@@ -144,7 +201,7 @@ var ImageViewer = ({
               "button",
               {
                 className: imageViewerToolbarBtnClasses,
-                onClick: () => setZoom(clampZoom(zoom - 0.25, minZoom, maxZoom)),
+                onClick: () => setTransform((t) => ({ ...t, scale: clampZoom(t.scale - 0.25, minZoom, maxZoom) })),
                 "aria-label": "Zoom out",
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomOut, label: "Zoom out" })
@@ -154,7 +211,7 @@ var ImageViewer = ({
               "button",
               {
                 className: imageViewerToolbarBtnClasses,
-                onClick: () => setZoom(clampZoom(zoom + 0.25, minZoom, maxZoom)),
+                onClick: () => setTransform((t) => ({ ...t, scale: clampZoom(t.scale + 0.25, minZoom, maxZoom) })),
                 "aria-label": "Zoom in",
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.zoomIn, label: "Zoom in" })
@@ -166,7 +223,7 @@ var ImageViewer = ({
               "button",
               {
                 className: imageViewerToolbarBtnClasses,
-                onClick: () => setRotation(normalizeRotation(rotation - 90)),
+                onClick: () => setTransform((t) => ({ ...t, rotation: normalizeRotation(t.rotation - 90) })),
                 "aria-label": "Rotate left",
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateLeft, label: "Rotate left" })
@@ -176,7 +233,7 @@ var ImageViewer = ({
               "button",
               {
                 className: imageViewerToolbarBtnClasses,
-                onClick: () => setRotation(normalizeRotation(rotation + 90)),
+                onClick: () => setTransform((t) => ({ ...t, rotation: normalizeRotation(t.rotation + 90) })),
                 "aria-label": "Rotate right",
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { pathD: imageViewerIcons.rotateRight, label: "Rotate right" })

package/dist/{chunk-ZDL3GE3Q.mjs → chunk-MO3V34YL.mjs}

@@ -1,12 +1,12 @@
-import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
-import { ChartLegend } from './chunk-Z6F67MJE.mjs';
+import { useChartInteraction } from './chunk-6QML6T3Y.mjs';
+import { ChartLegend } from './chunk-UBP7HZSU.mjs';
 import { ChartSeries } from './chunk-SDLMB34Y.mjs';
-import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
 import { ChartAxis } from './chunk-RQSQXQN6.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
 import { ChartGrid } from './chunk-677VSTPW.mjs';
 import { useState, useMemo, useCallback } from 'react';
-import { getAreaGradientPrefix, getChartInnerRect, resolveSeriesData, stackSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames } from '@expcat/tigercat-core';
+import { getAreaGradientPrefix, getChartInnerRect, resolveSeriesData, stackSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, buildChartSeriesKeys, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames, linePointTransitionClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var AreaChart = ({
@@ -52,9 +52,11 @@ var AreaChart = ({
   legendMarkerSize = 10,
   legendGap = 8,
   showTooltip = true,
-  gradient = false,
+  gradient = true,
   animated = false,
   pointHollow = false,
+  strokeGradient = false,
+  pointGradient = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -136,9 +138,14 @@ var AreaChart = ({
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const seriesKeys = useMemo(
+    () => buildChartSeriesKeys(resolvedSeries, { prefix: "area-" }),
+    [resolvedSeries]
+  );
   const seriesData = useMemo(() => {
     const stackedData = stacked ? stackSeriesData(resolvedSeries.map((s) => s.data)) : null;
     return resolvedSeries.map((s, seriesIndex) => {
+      const seriesKey = seriesKeys[seriesIndex];
       const color = s.color ?? palette[seriesIndex % palette.length];
       const seriesFillColor = s.fillColor ?? color;
       const seriesFillOpacity = s.fillOpacity ?? fillOpacity;
@@ -179,6 +186,7 @@ var AreaChart = ({
       return {
         series: s,
         seriesIndex,
+        seriesKey,
         color,
         fillColor: seriesFillColor,
         fillOpacity: seriesFillOpacity,
@@ -196,6 +204,7 @@ var AreaChart = ({
     });
   }, [
     resolvedSeries,
+    seriesKeys,
     palette,
     resolvedXScale,
     resolvedYScale,
@@ -272,7 +281,7 @@ var AreaChart = ({
       desc,
       className: classNames(className),
       children: [
-        (gradient || animated) && /* @__PURE__ */ jsxs("defs", { children: [
+        (gradient || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
           animated && /* @__PURE__ */ jsx("style", { children: `
               .tiger-area-animated {
                 animation: tiger-area-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
@@ -285,7 +294,7 @@ var AreaChart = ({
           gradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxs(
             "linearGradient",
             {
-              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              id: `${gradientPrefix}-${sd.seriesKey}`,
               x1: "0",
               y1: "0",
               x2: "0",
@@ -295,7 +304,44 @@ var AreaChart = ({
                 /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: sd.fillColor, stopOpacity: 0.02 })
               ]
             },
-            `area-grad-${sd.seriesIndex}`
+            `area-grad-${sd.seriesKey}`
+          )),
+          pointGradient && reversedSeriesData.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 && reversedSeriesData.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(
@@ -342,6 +388,7 @@ var AreaChart = ({
             name: sd.series.name,
             type: "area",
             opacity: sd.opacity,
+            "data-series-key": sd.seriesKey,
             className: classNames(
               sd.series.className,
               (hoverable || selectable) && "cursor-pointer",
@@ -357,11 +404,12 @@ var AreaChart = ({
                 "path",
                 {
                   d: sd.areaPath,
-                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesIndex})` : sd.fillColor,
+                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesKey})` : sd.fillColor,
                   fillOpacity: gradient ? 1 : sd.fillOpacity,
                   stroke: "none",
                   className: "transition-opacity duration-300",
-                  "data-area-series": sd.seriesIndex
+                  "data-area-series": sd.seriesIndex,
+                  "data-series-key": sd.seriesKey
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -369,7 +417,7 @@ var AreaChart = ({
                 {
                   d: sd.linePath,
                   fill: "none",
-                  stroke: sd.color,
+                  stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                   strokeWidth: sd.strokeWidth,
                   strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
                   strokeDashoffset: animated ? "1" : void 0,
@@ -384,10 +432,10 @@ var AreaChart = ({
               )
             ]
           },
-          `series-${sd.seriesIndex}`
+          sd.seriesKey
         )),
         seriesData.map(
-          (sd) => sd.showPoints && /* @__PURE__ */ jsx("g", { opacity: sd.opacity, children: sd.points.map((point) => {
+          (sd) => sd.showPoints && /* @__PURE__ */ jsx("g", { opacity: sd.opacity, "data-series-key": sd.seriesKey, children: sd.points.map((point) => {
             const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
             const hoverSize = sd.pointSize + 2;
             return /* @__PURE__ */ jsx(
@@ -396,12 +444,13 @@ var AreaChart = ({
                 cx: point.x,
                 cy: point.y,
                 r: isHovered ? hoverSize : sd.pointSize,
-                fill: sd.pointHollow ? "white" : sd.pointColor,
+                fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                 stroke: sd.pointHollow ? sd.pointColor : "none",
                 strokeWidth: sd.pointHollow ? 2 : 0,
-                className: "transition-all duration-200 ease-out",
+                className: linePointTransitionClasses,
                 style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
                 "data-point-index": point.pointIndex,
+                "data-series-key": sd.seriesKey,
                 onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
                 onMouseMove: handlePointMouseMove,
                 onMouseLeave: handlePointMouseLeave,
@@ -410,9 +459,9 @@ var AreaChart = ({
                   handlePointClick(sd.seriesIndex, point.pointIndex);
                 }
               },
-              `point-${sd.seriesIndex}-${point.pointIndex}`
+              `point-${sd.seriesKey}-${point.pointIndex}`
             );
-          }) }, `points-${sd.seriesIndex}`)
+          }) }, `points-${sd.seriesKey}`)
         )
       ]
     }