@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/{chunk-J5N5OQWB.mjs → chunk-SNE3E22Q.mjs}

@@ -1,15 +1,9 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
-import {
-  ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartAxis
 } from "./chunk-RQSQXQN6.mjs";
@@ -19,6 +13,12 @@ import {
 import {
   ChartGrid
 } from "./chunk-677VSTPW.mjs";
+import {
+  ChartLegend
+} from "./chunk-ZG2W4HS5.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
 
 // src/components/BarChart.tsx
 import { useId, useMemo } from "react";
@@ -302,6 +302,9 @@ var BarChart = ({
               } : null
             },
             tabIndex: selectable ? 0 : void 0,
+            role: selectable ? "button" : "img",
+            "aria-label": bar.datum.label ?? String(bar.datum.x),
+            "data-bar-index": bar.index,
             onMouseEnter: (e) => handleMouseEnter(bar.index, e),
             onMouseMove: handleMouseMove,
             onMouseLeave: handleMouseLeave,
@@ -336,7 +339,7 @@ var BarChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
+      open: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-NKKIJQMV.mjs → chunk-SPIPFOGD.mjs}

@@ -9,7 +9,8 @@ import {
   getSliderTooltipClasses,
   sliderGetPercentage,
   sliderGetValueFromPosition,
-  sliderGetKeyboardValue
+  sliderGetKeyboardValue,
+  sliderResolveMarks
 } from "@expcat/tigercat-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Thumb = memo(
@@ -216,7 +217,8 @@ var Slider = ({
   const tooltipClasses = useMemo(() => getSliderTooltipClasses(size), [size]);
   const renderMarks = () => {
     if (!marks) return null;
-    const marksObj = typeof marks === "boolean" ? {} : marks;
+    const marksObj = sliderResolveMarks(marks, min, max);
+    if (Object.keys(marksObj).length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute w-full top-full mt-2", children: Object.entries(marksObj).map(([key, label]) => {
       const value = Number(key);
       const left = getPercentage(value);

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-M3MOSUZO.mjs → chunk-TJDZFN2Z.mjs}

@@ -14,6 +14,7 @@ import {
 // src/components/Modal.tsx
 import React, { useEffect, useMemo, useCallback, useRef, useId } from "react";
 import {
+  ANIMATION_DURATION_MS,
   captureActiveElement,
   classNames,
   focusFirst,
@@ -58,6 +59,7 @@ var Modal = ({
   footer,
   onOpenChange,
   onClose,
+  onAfterClose,
   onCancel,
   onOk,
   closeAriaLabel,
@@ -77,6 +79,7 @@ var Modal = ({
   );
   const [hasBeenOpened, setHasBeenOpened] = React.useState(open);
   const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
+  const prevOpenRef = useRef(open);
   useEffect(() => {
     if (open) {
       setHasBeenOpened(true);
@@ -106,20 +109,26 @@ var Modal = ({
     [isDraggable, dragOffset]
   );
   useEffect(() => {
-    onOpenChange?.(open);
-    if (!open && onClose) {
-      onClose();
+    if (prevOpenRef.current && !open) {
+      const timer = window.setTimeout(() => {
+        onAfterClose?.();
+      }, ANIMATION_DURATION_MS);
+      prevOpenRef.current = open;
+      return () => window.clearTimeout(timer);
     }
-  }, [open, onOpenChange, onClose]);
+    prevOpenRef.current = open;
+  }, [open, onAfterClose]);
   const shouldRender = destroyOnClose ? open : hasBeenOpened;
   const handleClose = useCallback(() => {
     onCancel?.();
     onOpenChange?.(false);
-  }, [onCancel, onOpenChange]);
+    onClose?.();
+  }, [onCancel, onOpenChange, onClose]);
   const handleOk = useCallback(() => {
     onOk?.();
     onOpenChange?.(false);
-  }, [onOk, onOpenChange]);
+    onClose?.();
+  }, [onOk, onOpenChange, onClose]);
   const handleMaskClick = useCallback(
     (event) => {
       if (shouldCloseOnMaskClick(event, maskClosable)) {

package/dist/{chunk-6QQBMZQ6.mjs → chunk-U2ZXZ2KQ.mjs}

@@ -8,7 +8,9 @@ import {
   clampDimensions,
   applyAspectRatio,
   defaultResizeHandles,
-  createDocumentDragSession
+  createDocumentDragSession,
+  getResizeKeyboardDelta,
+  getResizeHandleOrientation
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Resizable = ({
@@ -118,6 +120,54 @@ var Resizable = ({
       onResizeEnd
     ]
   );
+  const handleKeyDown = useCallback(
+    (handle, e) => {
+      if (disabled) return;
+      const delta = getResizeKeyboardDelta(e.key);
+      if (!delta) return;
+      e.preventDefault();
+      const startW = width ?? 0;
+      const startH = height ?? 0;
+      const { deltaWidth, deltaHeight } = calculateResizeDelta(
+        handle,
+        delta.deltaX,
+        delta.deltaY,
+        axis
+      );
+      let newW = startW + deltaWidth;
+      let newH = startH + deltaHeight;
+      if (lockAspectRatio) {
+        const ar = applyAspectRatio(newW, newH, startW, startH);
+        newW = ar.width;
+        newH = ar.height;
+      }
+      const clamped = clampDimensions(newW, newH, minWidth, minHeight, maxWidth, maxHeight);
+      setWidth(clamped.width);
+      setHeight(clamped.height);
+      const evt = {
+        width: clamped.width,
+        height: clamped.height,
+        handle,
+        deltaX: clamped.width - startW,
+        deltaY: clamped.height - startH
+      };
+      onResize?.(evt);
+      onResizeEnd?.(evt);
+    },
+    [
+      disabled,
+      width,
+      height,
+      axis,
+      lockAspectRatio,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      onResize,
+      onResizeEnd
+    ]
+  );
   const containerClasses = useMemo(
     () => classNames(resizableBaseClasses, "group/resizable", className),
     [className]
@@ -130,15 +180,29 @@ var Resizable = ({
   }, [width, height, style]);
   return /* @__PURE__ */ jsxs("div", { className: containerClasses, style: containerStyle, "data-resizable": "", children: [
     children,
-    handles.map((pos) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: getResizableHandleClasses(pos, draggingHandle === pos, disabled),
-        "data-handle": pos,
-        onMouseDown: (e) => handleMouseDown(pos, e)
-      },
-      pos
-    ))
+    handles.map((pos) => {
+      const usesHeight = pos === "top" || pos === "bottom";
+      const valueNow = Math.round((usesHeight ? height : width) ?? 0);
+      const valueMin = usesHeight ? minHeight : minWidth;
+      const valueMax = usesHeight ? maxHeight : maxWidth;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: getResizableHandleClasses(pos, draggingHandle === pos, disabled),
+          "data-handle": pos,
+          role: "separator",
+          "aria-label": `Resize ${pos}`,
+          "aria-orientation": getResizeHandleOrientation(pos),
+          "aria-valuenow": valueNow,
+          "aria-valuemin": valueMin,
+          "aria-valuemax": valueMax,
+          tabIndex: disabled ? -1 : 0,
+          onMouseDown: (e) => handleMouseDown(pos, e),
+          onKeyDown: (e) => handleKeyDown(pos, e)
+        },
+        pos
+      );
+    })
   ] });
 };
 var Resizable_default = Resizable;

package/dist/{chunk-DVEK5SO6.mjs → chunk-UYJJLHVA.mjs}

@@ -1,6 +1,9 @@
+import {
+  useInputGroupContext
+} from "./chunk-34VGG7AK.mjs";
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/Textarea.tsx
 import { forwardRef, useLayoutEffect, useMemo, useRef } from "react";
@@ -12,7 +15,7 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 var Textarea = forwardRef(
   ({
-    size = "md",
+    size,
     disabled = false,
     readonly = false,
     required = false,
@@ -33,6 +36,8 @@ var Textarea = forwardRef(
     className,
     ...props
   }, ref) => {
+    const inputGroup = useInputGroupContext();
+    const effectiveSize = size ?? inputGroup?.size ?? "md";
     const textareaRef = useRef(null);
     const [currentValue, setValue] = useControlledState(value, defaultValue || "");
     const setRefs = (node) => {
@@ -47,11 +52,11 @@ var Textarea = forwardRef(
     const textareaClasses = useMemo(
       () => classNames(
         "block",
-        getInputClasses({ size }),
+        getInputClasses({ size: effectiveSize }),
         autoResize ? "resize-none" : "resize-y",
         className
       ),
-      [size, autoResize, className]
+      [effectiveSize, autoResize, className]
     );
     const handleInput = (event) => {
       setValue(event.currentTarget.value);

package/dist/{chunk-PXO2F2CS.mjs → chunk-V23KR23W.mjs}

@@ -60,6 +60,34 @@ var Rate = ({
     setHoverValue(0);
     onHoverChange?.(0);
   }, [disabled, onHoverChange]);
+  const step = allowHalf ? 0.5 : 1;
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      let next = value;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = Math.min(count, value + step);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = Math.max(0, value - step);
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = count;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      if (next !== value) onChange?.(next);
+    },
+    [disabled, value, count, step, onChange]
+  );
   const starIcon = useMemo(
     () => /* @__PURE__ */ jsx("svg", { viewBox: starViewBox, fill: "currentColor", className: "w-full h-full", children: /* @__PURE__ */ jsx("path", { d: starPathD }) }),
     []
@@ -90,9 +118,7 @@ var Rate = ({
           "span",
           {
             className: getRateStarClasses(size, isChar, disabled),
-            role: "radio",
-            "aria-checked": full || half,
-            "aria-label": `${i + 1} star${i + 1 > 1 ? "s" : ""}`,
+            "aria-hidden": "true",
             onClick: (e) => handleClick(i, e),
             onMouseMove: (e) => handleMouseMove(i, e),
             onMouseLeave: handleMouseLeave,
@@ -117,7 +143,24 @@ var Rate = ({
     handleMouseMove,
     handleMouseLeave
   ]);
-  return /* @__PURE__ */ jsx("div", { className: classNames(rateBaseClasses, className), role: "radiogroup", "aria-label": "Rating", children: stars });
+  const valueText = `${value} star${value === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(rateBaseClasses, className),
+      role: "slider",
+      "aria-label": "Rating",
+      "aria-valuemin": 0,
+      "aria-valuemax": count,
+      "aria-valuenow": value,
+      "aria-valuetext": valueText,
+      "aria-disabled": disabled || void 0,
+      "aria-orientation": "horizontal",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: handleKeyDown,
+      children: stars
+    }
+  );
 };
 
 export {

package/dist/{chunk-56CTXEJS.mjs → chunk-VBGJQPPI.mjs}

@@ -1,12 +1,15 @@
 import {
   Modal
-} from "./chunk-M3MOSUZO.mjs";
+} from "./chunk-TJDZFN2Z.mjs";
 import {
   ImageCropper
-} from "./chunk-SY23FAXK.mjs";
+} from "./chunk-T6HNFCOW.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
 
 // src/components/CropUpload.tsx
 import { useState, useRef, useCallback, useMemo } from "react";
@@ -18,21 +21,30 @@ import {
   validateUploadFile,
   readFileAsDataUrl,
   getCropperResult,
-  isActivationKey
+  isActivationKey,
+  getImageEditorLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var CropUpload = ({
+  locale,
   accept = "image/*",
   disabled = false,
   maxSize,
   cropperProps,
-  modalTitle = "\u88C1\u526A\u56FE\u7247",
-  modalWidth: _modalWidth = 520,
+  modalTitle,
+  modalWidth = 520,
   className,
   children,
   onCropComplete,
   onError
 }) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getImageEditorLabels(mergedLocale), [mergedLocale]);
   const fileInputRef = useRef(null);
   const cropperRef = useRef(null);
   const [modalVisible, setModalVisible] = useState(false);
@@ -112,7 +124,7 @@ var CropUpload = ({
         onClick: handleTriggerClick,
         role: "button",
         tabIndex: disabled ? -1 : 0,
-        "aria-label": "Select image to crop and upload",
+        "aria-label": labels.selectImageAriaLabel,
         "aria-disabled": disabled ? "true" : void 0,
         onKeyDown: handleKeyDown,
         children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -135,7 +147,7 @@ var CropUpload = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx("span", { children: "\u9009\u62E9\u56FE\u7247" })
+          /* @__PURE__ */ jsx("span", { children: labels.selectImageText })
         ] })
       }
     ),
@@ -144,16 +156,17 @@ var CropUpload = ({
       {
         open: modalVisible,
         size: "lg",
-        title: modalTitle,
+        width: modalWidth,
+        title: modalTitle ?? labels.cropModalTitle,
         className: "tiger-crop-upload-modal",
         closable: true,
         maskClosable: false,
         onClose: handleCancel,
         footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "\u53D6\u6D88" }),
-          /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, loading: cropping, children: "\u786E\u8BA4\u88C1\u526A" })
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: labels.cropCancelText }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, loading: cropping, children: labels.cropConfirmText })
         ] }),
-        children: imageSrc && /* @__PURE__ */ jsx(ImageCropper, { ref: cropperRef, src: imageSrc, ...cropperProps })
+        children: imageSrc && /* @__PURE__ */ jsx(ImageCropper, { ref: cropperRef, src: imageSrc, locale, ...cropperProps })
       }
     )
   ] });

package/dist/{chunk-WTSG7QXK.mjs → chunk-VKIGZWRK.mjs}

@@ -71,14 +71,14 @@ var Drawer = ({
   bodyClassName,
   bodyPadding,
   destroyOnClose = false,
-  destroyOnCloseAfterLeave = false,
+  deferDestroyOnClose = false,
   fullscreenOnMobile = true,
   panelClassName,
   panelStyle,
   onClose,
   onOpenChange,
   onAfterEnter,
-  onAfterLeave,
+  onAfterClose,
   closeAriaLabel,
   locale,
   labels,
@@ -100,11 +100,11 @@ var Drawer = ({
       setDeferredRendered(true);
       return;
     }
-    if (destroyOnClose && !destroyOnCloseAfterLeave) {
+    if (destroyOnClose && !deferDestroyOnClose) {
       setDeferredRendered(false);
     }
-  }, [destroyOnClose, destroyOnCloseAfterLeave, open]);
-  const shouldRender = destroyOnClose ? destroyOnCloseAfterLeave ? deferredRendered : open : hasBeenOpened;
+  }, [destroyOnClose, deferDestroyOnClose, open]);
+  const shouldRender = destroyOnClose ? deferDestroyOnClose ? deferredRendered : open : hasBeenOpened;
   const handleClose = useCallback(() => {
     onOpenChange?.(false);
     onClose?.();
@@ -127,14 +127,14 @@ var Drawer = ({
       if (open) {
         onAfterEnter?.();
       } else {
-        onAfterLeave?.();
-        if (destroyOnClose && destroyOnCloseAfterLeave) {
+        onAfterClose?.();
+        if (destroyOnClose && deferDestroyOnClose) {
           setDeferredRendered(false);
         }
       }
     }, ANIMATION_DURATION_MS);
     return () => window.clearTimeout(timer);
-  }, [destroyOnClose, destroyOnCloseAfterLeave, open, onAfterEnter, onAfterLeave]);
+  }, [destroyOnClose, deferDestroyOnClose, open, onAfterEnter, onAfterClose]);
   const reactId = useId();
   const drawerId = useMemo(() => `tiger-drawer-${reactId}`, [reactId]);
   const titleId = `${drawerId}-title`;
@@ -231,13 +231,13 @@ var Drawer = ({
   if (!shouldRender) {
     return null;
   }
-  const isLeavingBeforeDestroy = destroyOnClose && destroyOnCloseAfterLeave && !open;
+  const isClosingBeforeDestroy = destroyOnClose && deferDestroyOnClose && !open;
   const drawerContent = /* @__PURE__ */ jsxs(
     "div",
     {
       className: containerClasses,
       style: { zIndex },
-      hidden: !open && !isLeavingBeforeDestroy,
+      hidden: !open && !isClosingBeforeDestroy,
       "aria-hidden": !open ? "true" : void 0,
       "data-tiger-drawer-root": "",
       children: [