@expcat/tigercat-react 2.1.0 → 2.1.2

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

@@ -1,6 +1,9 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartSeries
 } from "./chunk-SDLMB34Y.mjs";
@@ -12,7 +15,7 @@ import {
 } from "./chunk-RQSQXQN6.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartGrid
 } from "./chunk-677VSTPW.mjs";
@@ -29,7 +32,6 @@ import {
   classNames,
   createLinearScale,
   getChartElementOpacity,
-  getChartInnerRect,
   getNumberExtent,
   getStableChartGradientPrefix,
   getScatterHoverShadow,
@@ -137,6 +139,7 @@ var ScatterChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -151,9 +154,11 @@ var ScatterChart = ({
     onSelectedIndexChange,
     callbacks: { onClick: onPointClick }
   });
-  const innerRect = useMemo(
-    () => getChartInnerRect(width, height, padding),
-    [width, height, padding]
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
   );
   const xValues = useMemo(() => data.map((item) => item.x), [data]);
   const yValues = useMemo(() => data.map((item) => item.y), [data]);
@@ -232,6 +237,7 @@ var ScatterChart = ({
       title,
       desc,
       className: classNames(className),
+      onResolvedSizeChange,
       children: [
         gradient && /* @__PURE__ */ jsx("defs", { children: palette.map((color, i) => /* @__PURE__ */ jsxs(
           "radialGradient",
@@ -330,20 +336,12 @@ var ScatterChart = ({
               `point-${index}`
             );
           }
-          return /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: getScatterPointPath(pointStyle, point.r),
-              transform: `translate(${point.cx},${point.cy})`,
-              ...sharedProps
-            },
-            `point-${index}`
-          );
+          return /* @__PURE__ */ jsx("g", { transform: `translate(${point.cx},${point.cy})`, children: /* @__PURE__ */ jsx("path", { d: getScatterPointPath(pointStyle, point.r), ...sharedProps }) }, `point-${index}`);
         }) })
       ]
     }
   );
-  const tooltip = showTooltip && hoverable && /* @__PURE__ */ jsx(
+  const tooltip = showTooltip && /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,

package/dist/{chunk-XMTEMBQV.mjs → chunk-EAAWB3CK.mjs}

@@ -113,24 +113,27 @@ var Affix = ({
       style: { display: "block", width: 0, height: 0, pointerEvents: "none" }
     }
   );
-  if (state.affixed) {
+  const content = /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children });
+  const placeholder = state.affixed ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: originalRectRef.current?.width ?? 0,
+        height: originalRectRef.current?.height ?? 0
+      }
+    }
+  ) : null;
+  if (offsetBottom !== void 0) {
     return /* @__PURE__ */ jsxs("div", { children: [
-      sentinel,
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: originalRectRef.current?.width ?? 0,
-            height: originalRectRef.current?.height ?? 0
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+      placeholder,
+      content,
+      sentinel
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { children: [
     sentinel,
-    /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+    placeholder,
+    content
   ] });
 };
 

package/dist/{chunk-IR7VA6AO.mjs → chunk-EG7EMDKK.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-YI6YWH66.mjs";
+} from "./chunk-RE5ZLA5D.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";

package/dist/{chunk-HOYBHB7B.mjs → chunk-FNK2VWPP.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-ZG56T75O.mjs";
+} from "./chunk-WTHWLCRL.mjs";
 import {
   renderOverlayPortal
 } from "./chunk-HKAZXG74.mjs";

package/dist/{chunk-RJPNBYK5.mjs → chunk-FQS24AUH.mjs}

@@ -26,9 +26,10 @@ import {
   tourFooterClasses,
   tourIndicatorClasses,
   tourCloseButtonClasses,
+  tourMaskClasses,
   getTourTargetRect,
   getTourPopoverPosition,
-  getTourSpotlightStyle,
+  getTourMaskHoleStyle,
   getActiveTourSteps,
   getCurrentActiveTourStep,
   getActiveTourStepPosition,
@@ -169,8 +170,16 @@ var Tour = ({
     };
   }
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    showMask && targetRect && /* @__PURE__ */ jsx("div", { style: getTourSpotlightStyle(targetRect), "aria-hidden": "true" }),
-    showMask && !targetRect && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[1000] bg-black/45", "aria-hidden": "true", onClick: close }),
+    showMask && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: tourMaskClasses,
+        "data-tiger-tour-mask": "",
+        "aria-hidden": "true",
+        style: targetRect ? getTourMaskHoleStyle(targetRect) : void 0,
+        onClick: close
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/{chunk-LADKKOJT.mjs → chunk-GBEDWXLL.mjs}

@@ -1,3 +1,7 @@
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+
 // src/components/Stepper.tsx
 import { useEffect, useRef } from "react";
 import {
@@ -13,7 +17,8 @@ import {
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Stepper = ({
-  value = 0,
+  value,
+  defaultValue,
   min = -Infinity,
   max = Infinity,
   step = 1,
@@ -25,16 +30,17 @@ var Stepper = ({
   decrementAriaLabel = "Decrease",
   onChange
 }) => {
+  const [currentValue, setCurrentValue] = useControlledState(value, defaultValue ?? 0, onChange);
   const repeatControllerRef = useRef(createRafRepeatActionController());
-  const repeatValueRef = useRef(value);
+  const repeatValueRef = useRef(currentValue);
   const suppressNextClickRef = useRef(false);
   useEffect(() => () => repeatControllerRef.current.stop(), []);
   function setValue(v) {
     const clamped = clampStepperValue(v, min, max, precision);
-    onChange?.(clamped);
+    setCurrentValue(clamped);
     return clamped;
   }
-  function stepBy(direction, baseValue = value) {
+  function stepBy(direction, baseValue = currentValue) {
     return setValue(direction === "up" ? baseValue + step : baseValue - step);
   }
   function handleStepClick(direction) {
@@ -48,10 +54,10 @@ var Stepper = ({
     return (event) => {
       event.preventDefault();
       if (disabled) return;
-      if (direction === "down" && value <= min) return;
-      if (direction === "up" && value >= max) return;
+      if (direction === "down" && currentValue <= min) return;
+      if (direction === "up" && currentValue >= max) return;
       suppressNextClickRef.current = true;
-      repeatValueRef.current = value;
+      repeatValueRef.current = currentValue;
       repeatControllerRef.current.start(() => {
         const baseValue = repeatValueRef.current;
         const nextValue = stepBy(direction, baseValue);
@@ -65,8 +71,8 @@ var Stepper = ({
   function stopStepRepeat() {
     repeatControllerRef.current.stop();
   }
-  const atMin = value <= min;
-  const atMax = value >= max;
+  const atMin = currentValue <= min;
+  const atMax = currentValue >= max;
   const icon = (d) => /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: stepperIconViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d, fillRule: "evenodd", clipRule: "evenodd" }) });
   return /* @__PURE__ */ jsxs("div", { className: classNames(stepperBaseClasses, className), role: "group", "aria-label": "Stepper", children: [
     /* @__PURE__ */ jsx(
@@ -89,7 +95,7 @@ var Stepper = ({
       {
         type: "text",
         className: getStepperInputClasses(size),
-        value: precision !== void 0 ? value.toFixed(precision) : String(value),
+        value: precision !== void 0 ? currentValue.toFixed(precision) : String(currentValue),
         disabled,
         "aria-label": "Value",
         onChange: (e) => {

package/dist/{chunk-2ENQZECC.mjs → chunk-HAXRHSCN.mjs}

@@ -15,6 +15,7 @@ import {
   getAutoCompleteInputClasses,
   getAutoCompleteOptionClasses,
   filterAutoCompleteOptions,
+  resolveAutoCompleteDisplayValue,
   getInitialPickerActiveIndex,
   getPickerComboboxAria,
   getPickerListboxAria,
@@ -87,7 +88,7 @@ var AutoComplete = (props) => {
   const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
   const [isOpen, setIsOpen] = useState(false);
   const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(
-    String(searchValue ?? value ?? defaultSearchValue ?? "")
+    searchValue ?? resolveAutoCompleteDisplayValue(value, options, defaultSearchValue)
   );
   const inputValue = searchValue ?? uncontrolledSearchValue;
   const [activeIndex, setActiveIndex] = useState(-1);
@@ -111,8 +112,8 @@ var AutoComplete = (props) => {
     if (searchValue !== void 0) {
       return;
     }
-    setUncontrolledSearchValue(String(value ?? defaultSearchValue ?? ""));
-  }, [defaultSearchValue, searchValue, value]);
+    setUncontrolledSearchValue(resolveAutoCompleteDisplayValue(value, options, defaultSearchValue));
+  }, [defaultSearchValue, options, searchValue, value]);
   const filteredOptions = useMemo(
     () => filterAutoCompleteOptions(options, inputValue, filterOption),
     [options, inputValue, filterOption]

package/dist/{chunk-K4GIKSZE.mjs → chunk-I2BENK5X.mjs}

@@ -19,6 +19,7 @@ import {
   getLoadingDotsWrapperClasses,
   getLoadingTextClasses,
   getSpinnerSVG,
+  DEFAULT_LOADING_BACKGROUND,
   loadingContainerBaseClasses,
   loadingFullscreenBaseClasses,
   loadingColorClasses,
@@ -32,7 +33,7 @@ var Loading = ({
   text,
   fullscreen = false,
   delay = 0,
-  background = "rgba(255, 255, 255, 0.9)",
+  background = DEFAULT_LOADING_BACKGROUND,
   customColor,
   lockScroll = true,
   className,

package/dist/{chunk-DNOPEJ5I.mjs → chunk-JZZPLKTW.mjs}

@@ -8,6 +8,7 @@ import {
 function useChartInteraction(options) {
   const {
     hoverable,
+    showTooltip = true,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -50,17 +51,18 @@ function useChartInteraction(options) {
   );
   const handleMouseEnter = useCallback(
     (index, event) => {
-      if (!hoverable) return;
+      if (!hoverable && !showTooltip) return;
       if (hoveredIndexProp === void 0) {
         setLocalHoveredIndex(index);
       }
       setTooltipPosition({ x: event.clientX, y: event.clientY });
+      if (!hoverable) return;
       onHoveredIndexChange?.(index);
       if (callbacks?.onHover && getData) {
         callbacks.onHover(index, getData(index) ?? null);
       }
     },
-    [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
+    [hoverable, showTooltip, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
   );
   const handleMouseMove = useCallback(
     (event) => {
@@ -70,13 +72,14 @@ function useChartInteraction(options) {
   );
   const handleMouseLeave = useCallback(() => {
     tooltipScheduler.cancel();
-    if (!hoverable) return;
+    if (!hoverable && !showTooltip) return;
     if (hoveredIndexProp === void 0) {
       setLocalHoveredIndex(null);
     }
+    if (!hoverable) return;
     onHoveredIndexChange?.(null);
     callbacks?.onHover?.(null, null);
-  }, [hoverable, tooltipScheduler, hoveredIndexProp, onHoveredIndexChange, callbacks]);
+  }, [hoverable, showTooltip, tooltipScheduler, hoveredIndexProp, onHoveredIndexChange, callbacks]);
   const handleClick = useCallback(
     (index) => {
       if (!selectable) return;

package/dist/{chunk-7KCQMXJA.mjs → chunk-KDURW5AS.mjs}

@@ -1,12 +1,12 @@
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartLegend
 } from "./chunk-F2ITBDUS.mjs";
@@ -70,6 +70,7 @@ var FunnelChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -191,7 +192,7 @@ var FunnelChart = ({
       ]
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,

package/dist/{chunk-TFMEHUVZ.mjs → chunk-KKN7KLTB.mjs}

@@ -18,7 +18,6 @@ var QRCode = ({
   size = 128,
   color = "#000000",
   bgColor = "#ffffff",
-  level: _level = "M",
   status = "active",
   onRefresh,
   className,

package/dist/{chunk-PFL4HNWM.mjs → chunk-M6ZPTGBV.mjs}

@@ -10,7 +10,6 @@ import {
   getPageRange,
   validateCurrentPage,
   getPageNumbers,
-  defaultTotalText,
   formatPaginationTotal,
   getPaginationContainerClasses,
   getPaginationButtonBaseClasses,
@@ -179,7 +178,7 @@ var Pagination = ({
   const nextDisabled = validatedCurrentPage >= totalPages || disabled;
   const elements = [];
   if (showTotal) {
-    const totalTextFn = totalText || (labelsOverride?.totalText || mergedLocale?.pagination?.totalText ? (value, range) => formatPaginationTotal(labels.totalText, value, range, localeCode) : defaultTotalText);
+    const totalTextFn = totalText || ((value, range) => formatPaginationTotal(labels.totalText, value, range, localeCode));
     elements.push(
       /* @__PURE__ */ jsx("span", { className: getTotalTextClasses(size), children: totalTextFn(total, pageRange) }, "total")
     );

package/dist/{chunk-PXRZ6CKY.mjs → chunk-MJVSZ2UJ.mjs}

@@ -3,38 +3,47 @@ import {
 } from "./chunk-Y5X3G2LD.mjs";
 import {
   Input
-} from "./chunk-F6WV53BS.mjs";
+} from "./chunk-3LDDXHW2.mjs";
 import {
   Empty
 } from "./chunk-W7BC4I2Y.mjs";
 import {
   Textarea
-} from "./chunk-UYJJLHVA.mjs";
+} from "./chunk-PMQJ6AYT.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";
 import {
   Avatar
 } from "./chunk-OO562MFD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/ChatWindow.tsx
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   classNames,
   getChatMessageStatusInfo,
+  buildChatMessageStatusInfo,
   getChatStatusBarClasses,
-  formatChatTime
+  formatChatTime,
+  getChatWindowLabels,
+  mergeTigerLocale,
+  resolveLocaleText
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ChatWindow = ({
   messages = [],
   value,
   defaultValue = "",
-  placeholder = "\u8BF7\u8F93\u5165\u6D88\u606F",
+  placeholder,
   disabled = false,
   maxLength,
-  emptyText = "\u6682\u65E0\u6D88\u606F",
-  sendText = "\u53D1\u9001",
+  emptyText,
+  sendText,
+  locale,
+  labels: labelsOverride,
   messageListAriaLabel,
   inputAriaLabel,
   sendAriaLabel,
@@ -59,6 +68,19 @@ var ChatWindow = ({
   className,
   ...props
 }) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getChatWindowLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const statusMap = useMemo(() => buildChatMessageStatusInfo(labels), [labels]);
+  const resolvedPlaceholder = resolveLocaleText(labels.placeholder, placeholder);
+  const resolvedEmptyText = resolveLocaleText(labels.emptyText, emptyText);
+  const resolvedSendText = resolveLocaleText(labels.sendText, sendText);
   const [innerValue, setInnerValue] = useState(value ?? defaultValue);
   useEffect(() => {
     if (value !== void 0) {
@@ -112,7 +134,7 @@ var ChatWindow = ({
   const renderMessageItem = useCallback(
     (message, index) => {
       const isSelf = message.direction === "self";
-      const statusInfo = message.status ? getChatMessageStatusInfo(message.status) : void 0;
+      const statusInfo = message.status ? getChatMessageStatusInfo(message.status, statusMap) : void 0;
       const timeText = showTime ? formatChatTime(message.time) : "";
       return /* @__PURE__ */ jsxs(
         "div",
@@ -163,7 +185,7 @@ var ChatWindow = ({
         message.id ?? index
       );
     },
-    [renderMessage, showAvatar, showName, showTime]
+    [renderMessage, showAvatar, showName, showTime, statusMap]
   );
   const messageListRef = useRef(null);
   useEffect(() => {
@@ -185,7 +207,7 @@ var ChatWindow = ({
         role: "log",
         "aria-live": "polite",
         "aria-relevant": "additions text",
-        "aria-label": messageListAriaLabel ?? "\u6D88\u606F\u5217\u8868",
+        "aria-label": messageListAriaLabel ?? "Message list",
         children: /* @__PURE__ */ jsx(
           VirtualList,
           {
@@ -204,8 +226,8 @@ var ChatWindow = ({
         role: "log",
         "aria-live": "polite",
         "aria-relevant": "additions text",
-        "aria-label": messageListAriaLabel ?? "\u6D88\u606F\u5217\u8868",
-        children: messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Empty, { description: emptyText }) }) : messages.map(renderMessageItem)
+        "aria-label": messageListAriaLabel ?? "Message list",
+        children: messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Empty, { description: resolvedEmptyText }) }) : messages.map(renderMessageItem)
       }
     ),
     statusText && /* @__PURE__ */ jsx("div", { className: getChatStatusBarClasses(statusVariant), children: statusText }),
@@ -214,10 +236,10 @@ var ChatWindow = ({
         Input,
         {
           value: inputValue,
-          placeholder,
+          placeholder: resolvedPlaceholder,
           disabled,
           maxLength,
-          "aria-label": inputAriaLabel ?? placeholder ?? "\u6D88\u606F\u8F93\u5165",
+          "aria-label": inputAriaLabel ?? resolvedPlaceholder,
           onChange: (event) => handleValueChange(event.currentTarget.value),
           onKeyDown: handleKeyDown
         }
@@ -225,16 +247,24 @@ var ChatWindow = ({
         Textarea,
         {
           value: inputValue,
-          placeholder,
+          placeholder: resolvedPlaceholder,
           disabled,
           maxLength,
           rows: inputRows,
-          "aria-label": inputAriaLabel ?? placeholder ?? "\u6D88\u606F\u8F93\u5165",
+          "aria-label": inputAriaLabel ?? resolvedPlaceholder,
           onChange: (event) => handleValueChange(event.currentTarget.value),
           onKeyDown: handleKeyDown
         }
       ) }),
-      /* @__PURE__ */ jsx(Button, { disabled: !canSend, onClick: handleSend, "aria-label": sendAriaLabel ?? sendText, children: sendText })
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: !canSend,
+          onClick: handleSend,
+          "aria-label": sendAriaLabel ?? resolvedSendText,
+          children: resolvedSendText
+        }
+      )
     ] })
   ] });
 };

package/dist/{chunk-LZKBDQE4.mjs → chunk-MYI3FPG4.mjs}

@@ -1,12 +1,12 @@
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartLegend
 } from "./chunk-F2ITBDUS.mjs";
@@ -16,6 +16,7 @@ import { useId, useMemo } from "react";
 import {
   classNames,
   computeSunburstArcs,
+  getSunburstLabelPoint,
   getChartElementOpacity,
   getChartInnerRect,
   getStableChartGradientPrefix,
@@ -30,7 +31,7 @@ var SunburstChart = ({
   padding = 24,
   data,
   innerRadiusRatio = 0,
-  showLabels: _showLabels = true,
+  showLabels = true,
   colors,
   gradient = false,
   hoverable = false,
@@ -97,6 +98,7 @@ var SunburstChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -189,11 +191,28 @@ var SunburstChart = ({
             },
             `arc-${arc.index}`
           );
+        }),
+        showLabels && arcs.map((arc) => {
+          const { x, y } = getSunburstLabelPoint(arc, cx, cy);
+          return /* @__PURE__ */ jsx(
+            "text",
+            {
+              x,
+              y,
+              className: "fill-white text-xs",
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              style: { pointerEvents: "none" },
+              "aria-hidden": "true",
+              children: arc.label
+            },
+            `label-${arc.index}`
+          );
         })
       ] })
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,