@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-QCRTRRBD.mjs

@@ -0,0 +1,556 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/ImageCropper.tsx
+import {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  useMemo,
+  useId,
+  useImperativeHandle,
+  forwardRef
+} from "react";
+import {
+  classNames,
+  CROP_HANDLES,
+  IMAGE_CROPPER_MASK_FILL,
+  constrainCropRect,
+  createCropperImageLoader,
+  createDocumentDragSession,
+  cropCanvas,
+  formatCropperResizeAriaLabel,
+  getCropperDisplaySize,
+  getCropperHandleClasses,
+  getCropperHandleName,
+  getCropperHandleStyle,
+  getImageEditorLabels,
+  getInitialCropRect,
+  imageCropperContainerClasses,
+  imageCropperSizeHostClasses,
+  planCropperDisplaySize,
+  resolveCropperAvailableSize,
+  imageCropperDragAreaClasses,
+  imageCropperFrameClasses,
+  imageCropperGuideClasses,
+  imageCropperImgClasses,
+  imageCropperMaskClasses,
+  imageCropperSelectionClasses,
+  imageErrorClasses,
+  imageErrorIconPath,
+  imageLoadingSpinnerClasses,
+  imageLoadingSpinnerPath,
+  injectImageCropperStyles,
+  mergeTigerLocale,
+  moveCropRect,
+  remapCropRect,
+  resizeCropRect
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function renderErrorIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "w-8 h-8",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: imageErrorIconPath })
+    }
+  );
+}
+function renderLoadingSpinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: imageLoadingSpinnerClasses,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: imageLoadingSpinnerPath })
+      ]
+    }
+  );
+}
+var ImageCropper = forwardRef(
+  ({
+    src,
+    cropRect: controlledCropRect,
+    defaultCropRect,
+    aspectRatio,
+    minWidth = 20,
+    minHeight = 20,
+    outputType = "image/png",
+    quality = 0.92,
+    guides = true,
+    locale,
+    className,
+    style,
+    onCropChange,
+    onReady,
+    onError,
+    ...rest
+  }, 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 loaderRef = useRef(createCropperImageLoader());
+    const dragSessionRef = useRef(null);
+    const displayDimsRef = useRef({ w: 0, h: 0 });
+    const naturalSizeRef = useRef({ w: 0, h: 0 });
+    const aspectRef = useRef(aspectRatio);
+    const defaultCropRectRef = useRef(defaultCropRect);
+    const onReadyRef = useRef(onReady);
+    const onErrorRef = useRef(onError);
+    const styleRef = useRef(style);
+    aspectRef.current = aspectRatio;
+    defaultCropRectRef.current = defaultCropRect;
+    onReadyRef.current = onReady;
+    onErrorRef.current = onError;
+    styleRef.current = style;
+    const [status, setStatus] = useState("loading");
+    const [displayWidth, setDisplayWidth] = useState(0);
+    const [displayHeight, setDisplayHeight] = useState(0);
+    const [cropRect, setCropRect] = useControlledState({
+      value: controlledCropRect,
+      defaultValue: defaultCropRect ?? { x: 0, y: 0, width: 0, height: 0 },
+      onChange: onCropChange,
+      postState: (rect) => constrainCropRect(
+        rect,
+        displayDimsRef.current.w || displayWidth,
+        displayDimsRef.current.h || displayHeight,
+        aspectRatio,
+        minWidth,
+        minHeight
+      )
+    });
+    useLayoutEffect(() => {
+      injectImageCropperStyles();
+    }, []);
+    useEffect(() => {
+      displayDimsRef.current = { w: displayWidth, h: displayHeight };
+    }, [displayWidth, displayHeight]);
+    useEffect(() => {
+      const loader = loaderRef.current;
+      setStatus("loading");
+      imageRef.current = null;
+      loader.load(src, {
+        onLoad: (img, naturalWidth, naturalHeight) => {
+          const container = containerRef.current;
+          const box = resolveCropperAvailableSize(
+            container?.clientWidth ?? 0,
+            container?.clientHeight ?? 0,
+            styleRef.current
+          );
+          const size = getCropperDisplaySize(naturalWidth, naturalHeight, box.width, box.height);
+          if (!size) {
+            setStatus("error");
+            onErrorRef.current?.(new Error("Image not loaded"));
+            return;
+          }
+          imageRef.current = img;
+          naturalSizeRef.current = { w: naturalWidth, h: naturalHeight };
+          displayDimsRef.current = { w: size.width, h: size.height };
+          setDisplayWidth(size.width);
+          setDisplayHeight(size.height);
+          const initial = defaultCropRectRef.current ?? getInitialCropRect(size.width, size.height, aspectRef.current, minWidth, minHeight);
+          setCropRect(initial);
+          setStatus("ready");
+          onReadyRef.current?.();
+        },
+        onError: () => {
+          imageRef.current = null;
+          setStatus("error");
+          onErrorRef.current?.(new Error("Image not loaded"));
+        }
+      });
+      return () => loader.dispose();
+    }, [src, minWidth, minHeight, setCropRect]);
+    const loadedAspectRef = useRef(aspectRatio);
+    useEffect(() => {
+      if (status !== "ready") {
+        loadedAspectRef.current = aspectRatio;
+        return;
+      }
+      if (Object.is(loadedAspectRef.current, aspectRatio)) return;
+      loadedAspectRef.current = aspectRatio;
+      const dims = displayDimsRef.current;
+      setCropRect(getInitialCropRect(dims.w, dims.h, aspectRatio, minWidth, minHeight));
+    }, [aspectRatio, minHeight, minWidth, setCropRect, status]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container || status !== "ready" || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        const natural = naturalSizeRef.current;
+        const box = resolveCropperAvailableSize(
+          container.clientWidth,
+          container.clientHeight,
+          styleRef.current
+        );
+        const current = displayDimsRef.current;
+        const next = planCropperDisplaySize(
+          natural.w,
+          natural.h,
+          box.width,
+          box.height,
+          current.w,
+          current.h
+        );
+        if (!next) return;
+        setCropRect(
+          (prev) => remapCropRect(
+            prev,
+            current.w,
+            current.h,
+            next.width,
+            next.height,
+            aspectRatio,
+            minWidth,
+            minHeight
+          )
+        );
+        displayDimsRef.current = { w: next.width, h: next.height };
+        setDisplayWidth(next.width);
+        setDisplayHeight(next.height);
+      });
+      observer.observe(container);
+      return () => observer.disconnect();
+    }, [aspectRatio, minHeight, minWidth, setCropRect, status]);
+    useEffect(
+      () => () => {
+        dragSessionRef.current?.dispose();
+        dragSessionRef.current = null;
+      },
+      []
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        getCropResult: () => {
+          return new Promise((resolve, reject) => {
+            if (status !== "ready" || !imageRef.current) {
+              reject(new Error("Image not loaded"));
+              return;
+            }
+            try {
+              const { canvas, dataUrl } = cropCanvas(
+                imageRef.current,
+                cropRect,
+                displayWidth,
+                displayHeight,
+                outputType,
+                quality
+              );
+              canvas.toBlob(
+                (blob) => {
+                  if (blob) {
+                    const extension = (outputType.split("/")[1] || "png").replace("jpeg", "jpg");
+                    const file = new File([blob], `crop.${extension}`, { type: blob.type });
+                    resolve({ canvas, blob, dataUrl, cropRect: { ...cropRect }, file });
+                  } else {
+                    reject(new Error("Failed to create blob"));
+                  }
+                },
+                outputType,
+                quality
+              );
+            } catch (error) {
+              reject(error);
+            }
+          });
+        }
+      }),
+      [cropRect, displayHeight, displayWidth, outputType, quality, status]
+    );
+    const startDrag = useCallback(
+      (event, mode, handle) => {
+        if (event.defaultPrevented) return;
+        if (event.button !== 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const startRect = { ...cropRect };
+        dragSessionRef.current?.dispose();
+        dragSessionRef.current = createDocumentDragSession({
+          startX: event.clientX,
+          startY: event.clientY,
+          ownerDocument: event.currentTarget.ownerDocument,
+          pointerId: event.pointerId,
+          pointerTarget: event.currentTarget,
+          onMove: ({ event: moveEvent, deltaX, deltaY }) => {
+            if (moveEvent.cancelable) moveEvent.preventDefault();
+            const dims = displayDimsRef.current;
+            const next = mode === "move" ? moveCropRect(startRect, deltaX, deltaY, dims.w, dims.h) : resizeCropRect(
+              startRect,
+              handle,
+              deltaX,
+              deltaY,
+              dims.w,
+              dims.h,
+              aspectRatio,
+              minWidth,
+              minHeight
+            );
+            setCropRect(next);
+          },
+          onEnd: () => {
+            dragSessionRef.current = null;
+          }
+        });
+      },
+      [aspectRatio, cropRect, minHeight, minWidth, setCropRect]
+    );
+    const handleMoveKeyDown = useCallback(
+      (event) => {
+        const step = event.shiftKey ? 10 : 1;
+        const deltas = {
+          ArrowLeft: { dx: -step, dy: 0 },
+          ArrowRight: { dx: step, dy: 0 },
+          ArrowUp: { dx: 0, dy: -step },
+          ArrowDown: { dx: 0, dy: step }
+        };
+        const delta = deltas[event.key];
+        if (!delta) return;
+        event.preventDefault();
+        setCropRect(
+          moveCropRect(
+            cropRect,
+            delta.dx,
+            delta.dy,
+            displayDimsRef.current.w,
+            displayDimsRef.current.h
+          )
+        );
+      },
+      [cropRect, setCropRect]
+    );
+    const containerClasses = classNames(imageCropperSizeHostClasses, className);
+    const rootStyle = { ...style };
+    if (status === "loading" || status === "error") {
+      if (rootStyle.minHeight == null) rootStyle.minHeight = 200;
+    }
+    if (status !== "ready") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rest,
+          ref: containerRef,
+          className: classNames(containerClasses, "items-center"),
+          style: rootStyle,
+          "data-image-cropper": "",
+          "data-image-cropper-status": status,
+          role: "img",
+          "aria-label": status === "error" ? labels.loadErrorAriaLabel : labels.loadingCropImageAriaLabel,
+          children: status === "error" ? /* @__PURE__ */ jsx("div", { className: imageErrorClasses, children: renderErrorIcon() }) : renderLoadingSpinner()
+        }
+      );
+    }
+    const cr = cropRect;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref: containerRef,
+        className: containerClasses,
+        style: rootStyle,
+        "data-image-cropper": "",
+        "data-image-cropper-status": "ready",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: imageCropperContainerClasses,
+            style: { width: displayWidth, height: displayHeight },
+            "data-image-cropper-stage": "",
+            role: "group",
+            "aria-label": labels.cropperDialogAriaLabel,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: imageCropperFrameClasses,
+                  style: { width: displayWidth, height: displayHeight },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src,
+                        className: imageCropperImgClasses,
+                        style: { width: displayWidth, height: displayHeight },
+                        draggable: false,
+                        alt: labels.imageToCropAriaLabel
+                      }
+                    ),
+                    /* @__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: 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" })
+                          ] }) }),
+                          /* @__PURE__ */ jsx(
+                            "rect",
+                            {
+                              width: displayWidth,
+                              height: displayHeight,
+                              fill: IMAGE_CROPPER_MASK_FILL,
+                              mask: `url(#${maskId})`
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: imageCropperSelectionClasses,
+                  style: {
+                    left: cr.x,
+                    top: cr.y,
+                    width: cr.width,
+                    height: cr.height
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: imageCropperDragAreaClasses,
+                  style: {
+                    left: cr.x,
+                    top: cr.y,
+                    width: cr.width,
+                    height: cr.height
+                  },
+                  "data-crop-move": "",
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": labels.moveCropAreaAriaLabel,
+                  onPointerDown: (event) => startDrag(event, "move"),
+                  onKeyDown: handleMoveKeyDown
+                }
+              ),
+              guides && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: imageCropperGuideClasses,
+                    "data-guide": "true",
+                    style: {
+                      left: cr.x,
+                      top: cr.y + cr.height / 3,
+                      width: cr.width,
+                      height: 0,
+                      borderTopWidth: 1,
+                      borderTopStyle: "dashed"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: imageCropperGuideClasses,
+                    "data-guide": "true",
+                    style: {
+                      left: cr.x,
+                      top: cr.y + cr.height * 2 / 3,
+                      width: cr.width,
+                      height: 0,
+                      borderTopWidth: 1,
+                      borderTopStyle: "dashed"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: imageCropperGuideClasses,
+                    "data-guide": "true",
+                    style: {
+                      left: cr.x + cr.width / 3,
+                      top: cr.y,
+                      width: 0,
+                      height: cr.height,
+                      borderLeftWidth: 1,
+                      borderLeftStyle: "dashed"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: imageCropperGuideClasses,
+                    "data-guide": "true",
+                    style: {
+                      left: cr.x + cr.width * 2 / 3,
+                      top: cr.y,
+                      width: 0,
+                      height: cr.height,
+                      borderLeftWidth: 1,
+                      borderLeftStyle: "dashed"
+                    }
+                  }
+                )
+              ] }),
+              CROP_HANDLES.map((handle) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: getCropperHandleClasses(handle),
+                  style: getCropperHandleStyle(handle, cr),
+                  "data-crop-handle": handle,
+                  role: "button",
+                  tabIndex: -1,
+                  "aria-label": formatCropperResizeAriaLabel(
+                    labels.resizeCropAreaAriaLabel,
+                    getCropperHandleName(handle, labels)
+                  ),
+                  onPointerDown: (event) => startDrag(event, "resize", handle)
+                },
+                handle
+              ))
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ImageCropper.displayName = "ImageCropper";
+
+export {
+  ImageCropper
+};

package/dist/{chunk-XT43B7ZI.mjs → chunk-QIGZOYBF.mjs}

@@ -1,12 +1,17 @@
+import {
+  getGlobalTigerLocale,
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
 // src/components/LoadingBarContainer.tsx
 import {
-  DEFAULT_LOADING_BAR_ARIA_LABEL,
   DEFAULT_LOADING_BAR_COLOR,
   DEFAULT_LOADING_BAR_HEIGHT,
   getLoadingBarContainerClasses,
   getLoadingBarFillClasses,
   getLoadingBarFillStyle,
-  LOADING_BAR_CONTAINER_ID
+  getLoadingBarProgressValue,
+  getLoadingLabel
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
 var LoadingBarContainer = ({
@@ -19,15 +24,33 @@ var LoadingBarContainer = ({
   ariaLabel,
   ...rest
 }) => {
+  const config = useTigerConfig();
+  const locale = config.locale ?? getGlobalTigerLocale();
   const isBusy = status === "loading";
-  const resolvedAriaLabel = ariaLabel?.trim() || DEFAULT_LOADING_BAR_ARIA_LABEL;
+  const resolvedAriaLabel = getLoadingLabel(locale, ariaLabel);
+  const valueNow = getLoadingBarProgressValue(percentage);
+  const {
+    "aria-label": _ariaLabel,
+    "aria-live": _ariaLive,
+    "aria-atomic": _ariaAtomic,
+    "aria-busy": _ariaBusy,
+    "aria-valuenow": _ariaValueNow,
+    "aria-valuemin": _ariaValueMin,
+    "aria-valuemax": _ariaValueMax,
+    ...domRest
+  } = rest;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ...rest,
-      id: LOADING_BAR_CONTAINER_ID,
+      ...domRest,
       className: getLoadingBarContainerClasses(className),
       style: { ...style, height: `${height}px` },
+      role: "progressbar",
+      "aria-label": resolvedAriaLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": valueNow,
+      "aria-busy": isBusy || void 0,
       "data-tiger-loading-bar-container": "",
       "data-tiger-loading-bar-status": status,
       children: /* @__PURE__ */ jsx(
@@ -35,14 +58,6 @@ var LoadingBarContainer = ({
         {
           className: getLoadingBarFillClasses(status, color),
           style: getLoadingBarFillStyle(percentage, height),
-          role: "progressbar",
-          "aria-label": resolvedAriaLabel,
-          "aria-valuemin": 0,
-          "aria-valuemax": 100,
-          "aria-valuenow": Math.round(percentage),
-          "aria-busy": isBusy || void 0,
-          "aria-live": "polite",
-          "aria-atomic": "true",
           "data-tiger-loading-bar": "",
           "data-tiger-loading-bar-status": status
         }