@expcat/tigercat-react 0.2.27 → 0.3.69

package/dist/{chunk-6ZC7H22S.mjs → chunk-24U2DQRP.mjs}

@@ -1,4 +1,4 @@
-import { DropdownContext } from './chunk-7IKJBQQV.mjs';
+import { DropdownContext } from './chunk-WGRYO5HX.mjs';
 import { useContext } from 'react';
 import { classNames, getDropdownItemClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-324UKFG2.mjs → chunk-2DW3WFZI.mjs}

@@ -1,12 +1,12 @@
 import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
 import { ChartGrid } from './chunk-677VSTPW.mjs';
 import { ChartLegend } from './chunk-Z6F67MJE.mjs';
 import { ChartSeries } from './chunk-SDLMB34Y.mjs';
 import { ChartTooltip } from './chunk-LVC43YX2.mjs';
 import { ChartAxis } from './chunk-RQSQXQN6.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
-import { useMemo, useCallback } from 'react';
-import { getChartInnerRect, getNumberExtent, createLinearScale, DEFAULT_CHART_COLORS, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { getScatterGradientPrefix, getChartInnerRect, getNumberExtent, createLinearScale, resolveChartPalette, getChartElementOpacity, getScatterHoverSize, buildChartLegendItems, resolveChartTooltipContent, classNames, SCATTER_ENTRANCE_KEYFRAMES, getScatterHoverShadow, SCATTER_ENTRANCE_CLASS, scatterPointTransitionClasses, getScatterPointPath } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ScatterChart = ({
@@ -16,9 +16,14 @@ var ScatterChart = ({
   data,
   xScale,
   yScale,
-  pointSize = 4,
+  pointSize = 6,
   pointColor = "var(--tiger-primary,#2563eb)",
   pointOpacity,
+  pointStyle = "circle",
+  gradient = false,
+  animated = false,
+  pointBorderWidth = 0,
+  pointBorderColor = "white",
   showGrid = true,
   showAxis = true,
   showXAxis = true,
@@ -34,7 +39,7 @@ var ScatterChart = ({
   yTickFormat,
   gridLineStyle = "solid",
   gridStrokeWidth = 1,
-  // Interaction props
+  // Interaction
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   onHoveredIndexChange,
@@ -45,13 +50,13 @@ var ScatterChart = ({
   onSelectedIndexChange,
   onPointClick,
   onPointHover,
-  // Legend props
+  // Legend
   showLegend = false,
   legendPosition = "bottom",
   legendMarkerSize = 10,
   legendGap = 8,
   legendFormatter,
-  // Tooltip props
+  // Tooltip
   showTooltip = true,
   tooltipFormatter,
   // Other
@@ -60,6 +65,12 @@ var ScatterChart = ({
   desc,
   className
 }) => {
+  const gradientPrefixRef = useRef(getScatterGradientPrefix());
+  const gradientPrefix = gradientPrefixRef.current;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    if (animated) setMounted(true);
+  }, [animated]);
   const {
     tooltipPosition,
     resolvedHoveredIndex,
@@ -87,9 +98,7 @@ var ScatterChart = ({
       onPointHover?.(index, index !== null ? data[index] : null);
     },
     onSelectedIndexChange,
-    callbacks: {
-      onClick: onPointClick
-    }
+    callbacks: { onClick: onPointClick }
   });
   const innerRect = useMemo(
     () => getChartInnerRect(width, height, padding),
@@ -107,10 +116,7 @@ var ScatterChart = ({
     const extent = getNumberExtent(yValues, { includeZero });
     return createLinearScale(extent, [innerRect.height, 0]);
   }, [yScale, yValues, includeZero, innerRect.height]);
-  const palette = useMemo(
-    () => colors && colors.length > 0 ? colors : pointColor ? [pointColor] : [...DEFAULT_CHART_COLORS],
-    [colors, pointColor]
-  );
+  const palette = useMemo(() => resolveChartPalette(colors, pointColor), [colors, pointColor]);
   const points = useMemo(
     () => data.map((item, index) => {
       const color = item.color ?? palette[index % palette.length];
@@ -118,12 +124,17 @@ var ScatterChart = ({
         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: item.size ?? pointSize,
+        r,
+        baseSize,
         color,
         opacity: pointOpacity ?? opacity,
+        isHovered,
         datum: item
       };
     }),
@@ -133,6 +144,7 @@ var ScatterChart = ({
       activeIndex,
       activeOpacity,
       inactiveOpacity,
+      resolvedHoveredIndex,
       resolvedXScale,
       resolvedYScale,
       pointSize,
@@ -140,29 +152,25 @@ var ScatterChart = ({
     ]
   );
   const legendItems = useMemo(
-    () => data.map((item, index) => ({
-      index,
-      label: legendFormatter ? legendFormatter(item, index) : item.label ?? `(${item.x}, ${item.y})`,
-      color: item.color ?? palette[index % palette.length],
-      active: activeIndex === null || activeIndex === index
-    })),
+    () => buildChartLegendItems({
+      data,
+      palette,
+      activeIndex,
+      getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : d.label ?? `(${d.x}, ${d.y})`,
+      getColor: (d, i) => d.color ?? palette[i % palette.length]
+    }),
     [data, legendFormatter, palette, activeIndex]
   );
-  const formatTooltip = useCallback(
-    (datum, index) => {
-      if (tooltipFormatter) return tooltipFormatter(datum, index);
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, data, tooltipFormatter, (datum, index) => {
       const label = datum.label ?? `Point ${index + 1}`;
       return `${label}: (${datum.x}, ${datum.y})`;
-    },
-    [tooltipFormatter]
+    }),
+    [resolvedHoveredIndex, data, tooltipFormatter]
   );
-  const tooltipContent = useMemo(() => {
-    if (resolvedHoveredIndex === null) return "";
-    const datum = data[resolvedHoveredIndex];
-    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
-  }, [resolvedHoveredIndex, data, formatTooltip]);
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
+  const interactive = hoverable || selectable;
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -173,6 +181,22 @@ var ScatterChart = ({
       desc,
       className: classNames(className),
       children: [
+        gradient && /* @__PURE__ */ jsx("defs", { children: palette.map((color, i) => /* @__PURE__ */ jsxs(
+          "radialGradient",
+          {
+            id: `${gradientPrefix}-${i}`,
+            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 })
+            ]
+          },
+          `grad-${i}`
+        )) }),
+        animated && mounted && /* @__PURE__ */ jsx("style", { children: SCATTER_ENTRANCE_KEYFRAMES }),
         showGrid && /* @__PURE__ */ jsx(
           ChartGrid,
           {
@@ -210,18 +234,24 @@ var ScatterChart = ({
             label: yAxisLabel
           }
         ),
-        /* @__PURE__ */ jsx(ChartSeries, { data, type: "scatter", children: points.map((point, index) => /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: point.cx,
-            cy: point.cy,
-            r: point.r,
-            fill: point.color,
+        /* @__PURE__ */ jsx(ChartSeries, { data, type: "scatter", children: points.map((point, index) => {
+          const paletteIdx = index % palette.length;
+          const fill = gradient ? `url(#${gradientPrefix}-${paletteIdx})` : point.color;
+          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} 500ms cubic-bezier(.34,1.56,.64,1) ${animDelay} both`
+            } : {}
+          };
+          const sharedProps = {
+            fill,
             opacity: point.opacity,
-            className: classNames(
-              "transition-opacity duration-150",
-              (hoverable || selectable) && "cursor-pointer"
-            ),
+            stroke: pointBorderColor,
+            strokeWidth: pointBorderWidth,
+            className: classNames(scatterPointTransitionClasses, 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 ?? `Point ${index + 1}: (${point.datum.x}, ${point.datum.y})`,
@@ -231,9 +261,29 @@ var ScatterChart = ({
             onMouseLeave: handleMouseLeave,
             onClick: () => handleClick(index),
             onKeyDown: (e) => handleKeyDown(e, index)
-          },
-          `point-${index}`
-        )) })
+          };
+          if (pointStyle === "circle") {
+            return /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: point.cx,
+                cy: point.cy,
+                r: point.r,
+                ...sharedProps
+              },
+              `point-${index}`
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: getScatterPointPath(pointStyle, point.r),
+              transform: `translate(${point.cx},${point.cy})`,
+              ...sharedProps
+            },
+            `point-${index}`
+          );
+        }) })
       ]
     }
   );
@@ -261,7 +311,7 @@ var ScatterChart = ({
         position: legendPosition,
         markerSize: legendMarkerSize,
         gap: legendGap,
-        interactive: hoverable || selectable,
+        interactive,
         onItemClick: handleLegendClick,
         onItemHover: handleLegendHover,
         onItemLeave: handleLegendLeave

package/dist/{chunk-6MGEGOYJ.js → chunk-2GKTVAAB.js}

@@ -14,35 +14,41 @@ var Loading = ({
   delay = 0,
   background = "rgba(255, 255, 255, 0.9)",
   customColor,
-  className = "",
+  className,
   style,
   ...props
 }) => {
   react.useEffect(() => {
     tigercatCore.injectLoadingAnimationStyles();
   }, []);
-  const [visible, setVisible] = react.useState(delay === 0);
+  const [visible, setVisible] = react.useState(delay <= 0);
   react.useEffect(() => {
-    if (delay > 0) {
-      const timer = setTimeout(() => {
-        setVisible(true);
-      }, delay);
-      return () => clearTimeout(timer);
+    if (delay <= 0) {
+      setVisible(true);
+      return;
     }
+    setVisible(false);
+    const timer = setTimeout(() => setVisible(true), delay);
+    return () => clearTimeout(timer);
   }, [delay]);
-  const spinnerClasses = tigercatCore.getLoadingClasses(variant, size, color, customColor);
-  const textClasses = tigercatCore.getLoadingTextClasses(size, color, customColor);
-  const containerClasses = tigercatCore.classNames(
-    fullscreen ? tigercatCore.loadingFullscreenBaseClasses : tigercatCore.loadingContainerBaseClasses,
-    className
+  const containerClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      fullscreen ? tigercatCore.loadingFullscreenBaseClasses : tigercatCore.loadingContainerBaseClasses,
+      className
+    ),
+    [fullscreen, className]
+  );
+  const mergedStyle = react.useMemo(
+    () => ({
+      ...customColor ? { color: customColor } : null,
+      ...fullscreen ? { backgroundColor: background } : null,
+      ...style
+    }),
+    [customColor, fullscreen, background, style]
   );
-  const mergedStyle = {
-    ...customColor ? { color: customColor } : null,
-    ...fullscreen ? { backgroundColor: background } : null,
-    ...style
-  };
   const renderSpinner = () => {
     const svg = tigercatCore.getSpinnerSVG(variant);
+    const spinnerClasses = tigercatCore.getLoadingClasses(variant, size, color, customColor);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
@@ -99,7 +105,7 @@ var Loading = ({
       ...props,
       children: [
         renderIndicator(),
-        text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: textClasses, children: text })
+        text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getLoadingTextClasses(size, color, customColor), children: text })
       ]
     }
   );

package/dist/{chunk-5XKYWZZZ.mjs → chunk-3577FW3I.mjs}

@@ -5,41 +5,17 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 // src/components/Table.tsx
 var spinnerSvg = getSpinnerSVG("spinner");
 var SortIcon = ({ direction }) => {
-  if (direction === "asc") {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        className: getSortIconClasses(true),
-        width: "16",
-        height: "16",
-        viewBox: icon16ViewBox,
-        fill: "currentColor",
-        children: /* @__PURE__ */ jsx("path", { d: sortAscIcon16PathD })
-      }
-    );
-  }
-  if (direction === "desc") {
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        className: getSortIconClasses(true),
-        width: "16",
-        height: "16",
-        viewBox: icon16ViewBox,
-        fill: "currentColor",
-        children: /* @__PURE__ */ jsx("path", { d: sortDescIcon16PathD })
-      }
-    );
-  }
+  const active = direction !== null;
+  const pathD = direction === "asc" ? sortAscIcon16PathD : direction === "desc" ? sortDescIcon16PathD : sortBothIcon16PathD;
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      className: getSortIconClasses(false),
+      className: getSortIconClasses(active),
       width: "16",
       height: "16",
       viewBox: icon16ViewBox,
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx("path", { d: sortBothIcon16PathD })
+      children: /* @__PURE__ */ jsx("path", { d: pathD })
     }
   );
 };
@@ -87,6 +63,7 @@ function Table({
   rowClassName,
   stickyHeader = false,
   maxHeight,
+  tableLayout = "auto",
   onChange,
   onRowClick,
   onSelectionChange,
@@ -284,11 +261,7 @@ function Table({
   );
   const handlePageChange = useCallback(
     (page) => {
-      if (!isCurrentPageControlled) {
-        setUncontrolledCurrentPage(page);
-      } else {
-        setUncontrolledCurrentPage(page);
-      }
+      setUncontrolledCurrentPage(page);
       onPageChange?.({ current: page, pageSize: currentPageSize });
       onChange?.({
         sort: sortState,
@@ -299,20 +272,12 @@ function Table({
         }
       });
     },
-    [currentPageSize, sortState, filterState, isCurrentPageControlled, onPageChange, onChange]
+    [currentPageSize, sortState, filterState, onPageChange, onChange]
   );
   const handlePageSizeChange = useCallback(
     (pageSize) => {
-      if (!isPageSizeControlled) {
-        setUncontrolledCurrentPageSize(pageSize);
-      } else {
-        setUncontrolledCurrentPageSize(pageSize);
-      }
-      if (!isCurrentPageControlled) {
-        setUncontrolledCurrentPage(1);
-      } else {
-        setUncontrolledCurrentPage(1);
-      }
+      setUncontrolledCurrentPageSize(pageSize);
+      setUncontrolledCurrentPage(1);
       onPageChange?.({ current: 1, pageSize });
       onChange?.({
         sort: sortState,
@@ -323,7 +288,7 @@ function Table({
         }
       });
     },
-    [sortState, filterState, isPageSizeControlled, isCurrentPageControlled, onPageChange, onChange]
+    [sortState, filterState, onPageChange, onChange]
   );
   const handleRowClick = useCallback(
     (record, index) => {
@@ -420,7 +385,7 @@ function Table({
                 !!column.sortable,
                 column.headerClassName
               ),
-              (isFixedLeft || isFixedRight) && "bg-gray-50"
+              (isFixedLeft || isFixedRight) && "bg-[var(--tiger-surface-muted,#f9fafb)]"
             ),
             style,
             onClick: column.sortable ? () => handleSort(column.key) : void 0,
@@ -543,8 +508,11 @@ function Table({
                 width: typeof column.width === "number" ? `${column.width}px` : column.width
               } : void 0;
               const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
-              const stickyBgClass = striped && index % 2 === 0 ? "bg-gray-50/50" : "bg-white";
-              const stickyCellClass = isFixedLeft || isFixedRight ? classNames(stickyBgClass, hoverable && "group-hover:bg-gray-50") : void 0;
+              const stickyBgClass = striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
+              const stickyCellClass = isFixedLeft || isFixedRight ? classNames(
+                stickyBgClass,
+                hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+              ) : void 0;
               return /* @__PURE__ */ jsx(
                 "td",
                 {
@@ -644,47 +612,49 @@ function Table({
     } : void 0,
     [maxHeight]
   );
-  return /* @__PURE__ */ jsxs("div", { className: classNames("relative", className), children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: getTableWrapperClasses(bordered, maxHeight),
-        style: wrapperStyle,
-        "aria-busy": loading,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "table",
-            {
-              className: tableBaseClasses,
-              ...props,
-              style: fixedColumnsInfo.hasFixedColumns && fixedColumnsInfo.minTableWidth ? {
-                ...props.style,
-                minWidth: `${fixedColumnsInfo.minTableWidth}px`
-              } : props.style,
-              children: [
-                renderTableHeader(),
-                renderTableBody()
-              ]
-            }
-          ),
-          loading && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: tableLoadingOverlayClasses,
-              role: "status",
-              "aria-live": "polite",
-              "aria-label": "Loading",
-              children: [
-                /* @__PURE__ */ jsx(LoadingSpinner, {}),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    renderPagination()
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getTableWrapperClasses(bordered, maxHeight),
+      style: wrapperStyle,
+      "aria-busy": loading,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "table",
+          {
+            className: classNames(
+              tableBaseClasses,
+              tableLayout === "fixed" ? "table-fixed" : "table-auto",
+              className
+            ),
+            ...props,
+            style: fixedColumnsInfo.hasFixedColumns && fixedColumnsInfo.minTableWidth ? {
+              ...props.style,
+              minWidth: `${fixedColumnsInfo.minTableWidth}px`
+            } : props.style,
+            children: [
+              renderTableHeader(),
+              renderTableBody()
+            ]
+          }
+        ),
+        loading && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: tableLoadingOverlayClasses,
+            role: "status",
+            "aria-live": "polite",
+            "aria-label": "Loading",
+            children: [
+              /* @__PURE__ */ jsx(LoadingSpinner, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+            ]
+          }
+        ),
+        renderPagination()
+      ]
+    }
+  );
 }
 
 export { Table };