@expcat/tigercat-react 0.3.0 → 0.3.70

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

@@ -1,4 +1,4 @@
-import { DropdownContext } from './chunk-YGOTPK2W.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-IL2Y5RCX.mjs → chunk-2DW3WFZI.mjs}

@@ -5,8 +5,8 @@ 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 { 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-2EOXY2LP.mjs

@@ -0,0 +1,353 @@
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo } from 'react';
+import { getInitialCropRect, cropCanvas, classNames, imageCropperContainerClasses, CROP_HANDLES, imageCropperImgClasses, imageCropperMaskClasses, imageCropperSelectionClasses, imageCropperDragAreaClasses, imageCropperGuideClasses, getCropperHandleClasses, moveCropRect, resizeCropRect } from '@expcat/tigercat-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/ImageCropper.tsx
+var ImageCropper = forwardRef(
+  ({
+    src,
+    aspectRatio,
+    minWidth = 20,
+    minHeight = 20,
+    outputType = "image/png",
+    quality = 0.92,
+    guides = true,
+    className,
+    style,
+    onCropChange,
+    onReady
+  }, ref) => {
+    const containerRef = useRef(null);
+    const imageRef = useRef(null);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [displayWidth, setDisplayWidth] = useState(0);
+    const [displayHeight, setDisplayHeight] = useState(0);
+    const [cropRect, setCropRect] = useState({ x: 0, y: 0, width: 0, height: 0 });
+    const dragModeRef = useRef("none");
+    const activeHandleRef = useRef(null);
+    const dragStartPosRef = useRef({ x: 0, y: 0 });
+    const dragStartRectRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
+    const displayDimsRef = useRef({ w: 0, h: 0 });
+    useEffect(() => {
+      displayDimsRef.current = { w: displayWidth, h: displayHeight };
+    }, [displayWidth, displayHeight]);
+    useEffect(() => {
+      setImageLoaded(false);
+      const img = new window.Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        imageRef.current = img;
+        const container = containerRef.current;
+        const containerW = container ? container.clientWidth : img.naturalWidth;
+        const containerH = container ? container.clientHeight || 400 : img.naturalHeight;
+        const ratio = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight, 1);
+        const dw = img.naturalWidth * ratio;
+        const dh = img.naturalHeight * ratio;
+        setDisplayWidth(dw);
+        setDisplayHeight(dh);
+        displayDimsRef.current = { w: dw, h: dh };
+        const initial = getInitialCropRect(dw, dh, aspectRatio);
+        setCropRect(initial);
+        setImageLoaded(true);
+        onReady?.();
+      };
+      img.src = src;
+    }, [src, aspectRatio, onReady]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        getCropResult: () => {
+          return new Promise((resolve, reject) => {
+            if (!imageRef.current) {
+              reject(new Error("Image not loaded"));
+              return;
+            }
+            const { canvas, dataUrl } = cropCanvas(
+              imageRef.current,
+              cropRect,
+              displayWidth,
+              displayHeight,
+              outputType,
+              quality
+            );
+            canvas.toBlob(
+              (blob) => {
+                if (blob) {
+                  resolve({ canvas, blob, dataUrl, cropRect: { ...cropRect } });
+                } else {
+                  reject(new Error("Failed to create blob"));
+                }
+              },
+              outputType,
+              quality
+            );
+          });
+        }
+      }),
+      [cropRect, displayWidth, displayHeight, outputType, quality]
+    );
+    const handleMouseDown = useCallback(
+      (e, mode, handle) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragModeRef.current = mode;
+        activeHandleRef.current = handle || null;
+        dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+        dragStartRectRef.current = { ...cropRect };
+        const onMouseMove = (ev) => {
+          const dx = ev.clientX - dragStartPosRef.current.x;
+          const dy = ev.clientY - dragStartPosRef.current.y;
+          const dims = displayDimsRef.current;
+          let newRect;
+          if (dragModeRef.current === "move") {
+            newRect = moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = resizeCropRect(
+              dragStartRectRef.current,
+              activeHandleRef.current,
+              dx,
+              dy,
+              dims.w,
+              dims.h,
+              aspectRatio,
+              minWidth,
+              minHeight
+            );
+          }
+          setCropRect(newRect);
+          onCropChange?.(newRect);
+        };
+        const onMouseUp = () => {
+          dragModeRef.current = "none";
+          activeHandleRef.current = null;
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
+    );
+    const handleTouchStart = useCallback(
+      (e, mode, handle) => {
+        if (e.touches.length !== 1) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const touch = e.touches[0];
+        dragModeRef.current = mode;
+        activeHandleRef.current = handle || null;
+        dragStartPosRef.current = { x: touch.clientX, y: touch.clientY };
+        dragStartRectRef.current = { ...cropRect };
+        const onTouchMove = (ev) => {
+          if (ev.touches.length !== 1) return;
+          const t = ev.touches[0];
+          const dx = t.clientX - dragStartPosRef.current.x;
+          const dy = t.clientY - dragStartPosRef.current.y;
+          const dims = displayDimsRef.current;
+          let newRect;
+          if (dragModeRef.current === "move") {
+            newRect = moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = resizeCropRect(
+              dragStartRectRef.current,
+              activeHandleRef.current,
+              dx,
+              dy,
+              dims.w,
+              dims.h,
+              aspectRatio,
+              minWidth,
+              minHeight
+            );
+          }
+          setCropRect(newRect);
+          onCropChange?.(newRect);
+        };
+        const onTouchEnd = () => {
+          dragModeRef.current = "none";
+          activeHandleRef.current = null;
+          document.removeEventListener("touchmove", onTouchMove);
+          document.removeEventListener("touchend", onTouchEnd);
+        };
+        document.addEventListener("touchmove", onTouchMove, { passive: false });
+        document.addEventListener("touchend", onTouchEnd);
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
+    );
+    const containerClasses = useMemo(
+      () => classNames(imageCropperContainerClasses, className),
+      [className]
+    );
+    const cr = cropRect;
+    if (!imageLoaded) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: classNames(containerClasses, "flex items-center justify-center"),
+          style: { ...style, minHeight: "200px" },
+          role: "img",
+          "aria-label": "Loading image for cropping",
+          children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin" })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: containerClasses,
+        style: {
+          ...style,
+          width: `${displayWidth}px`,
+          height: `${displayHeight}px`
+        },
+        role: "application",
+        "aria-label": "Image cropper",
+        "aria-roledescription": "image cropper",
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              className: imageCropperImgClasses,
+              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
+              draggable: false,
+              alt: "Image to crop"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: imageCropperMaskClasses,
+              width: displayWidth,
+              height: displayHeight,
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: "crop-mask", 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" })
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: displayWidth,
+                    height: displayHeight,
+                    fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
+                    mask: "url(#crop-mask)"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: imageCropperSelectionClasses,
+              style: {
+                left: `${cr.x}px`,
+                top: `${cr.y}px`,
+                width: `${cr.width}px`,
+                height: `${cr.height}px`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: imageCropperDragAreaClasses,
+              style: {
+                left: `${cr.x}px`,
+                top: `${cr.y}px`,
+                width: `${cr.width}px`,
+                height: `${cr.height}px`
+              },
+              onMouseDown: (e) => handleMouseDown(e, "move"),
+              onTouchStart: (e) => handleTouchStart(e, "move")
+            }
+          ),
+          guides && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x}px`,
+                  top: `${cr.y + cr.height / 3}px`,
+                  width: `${cr.width}px`,
+                  height: 0,
+                  borderTopWidth: "1px",
+                  borderTopStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x}px`,
+                  top: `${cr.y + cr.height * 2 / 3}px`,
+                  width: `${cr.width}px`,
+                  height: 0,
+                  borderTopWidth: "1px",
+                  borderTopStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width * 2 / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            )
+          ] }),
+          CROP_HANDLES.map((handle) => {
+            const pos = {};
+            if (handle.includes("n")) pos.top = `${cr.y}px`;
+            if (handle.includes("s")) pos.top = `${cr.y + cr.height}px`;
+            if (handle === "e" || handle === "w") pos.top = `${cr.y + cr.height / 2}px`;
+            if (handle.includes("w")) pos.left = `${cr.x}px`;
+            if (handle.includes("e")) pos.left = `${cr.x + cr.width}px`;
+            if (handle === "n" || handle === "s") pos.left = `${cr.x + cr.width / 2}px`;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: getCropperHandleClasses(handle),
+                style: pos,
+                onMouseDown: (e) => handleMouseDown(e, "resize", handle),
+                onTouchStart: (e) => handleTouchStart(e, "resize", handle)
+              },
+              handle
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+ImageCropper.displayName = "ImageCropper";
+
+export { ImageCropper };

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 })
       ]
     }
   );