@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-PD6Q36OO.mjs

@@ -1,471 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/ImageCropper.tsx
-import {
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-  useMemo,
-  useId,
-  useImperativeHandle,
-  forwardRef
-} from "react";
-import {
-  classNames,
-  imageCropperContainerClasses,
-  imageCropperImgClasses,
-  imageCropperMaskClasses,
-  imageCropperSelectionClasses,
-  imageCropperGuideClasses,
-  imageCropperDragAreaClasses,
-  getCropperHandleClasses,
-  CROP_HANDLES,
-  getInitialCropRect,
-  resizeCropRect,
-  moveCropRect,
-  cropCanvas,
-  getImageEditorLabels,
-  mergeTigerLocale
-} from "@expcat/tigercat-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var isPositiveFinite = (value) => Number.isFinite(value) && value > 0;
-var ImageCropper = forwardRef(
-  ({
-    src,
-    aspectRatio,
-    minWidth = 20,
-    minHeight = 20,
-    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);
-    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);
-      imageRef.current = null;
-      const img = new window.Image();
-      img.crossOrigin = "anonymous";
-      img.onload = () => {
-        const naturalWidth = img.naturalWidth;
-        const naturalHeight = img.naturalHeight;
-        if (!isPositiveFinite(naturalWidth) || !isPositiveFinite(naturalHeight)) return;
-        const container = containerRef.current;
-        const measuredWidth = container?.clientWidth ?? 0;
-        const measuredHeight = container?.clientHeight ?? 0;
-        const containerW = isPositiveFinite(measuredWidth) ? measuredWidth : naturalWidth;
-        const containerH = isPositiveFinite(measuredHeight) ? measuredHeight : 400;
-        const ratio = Math.min(containerW / naturalWidth, containerH / naturalHeight, 1);
-        const dw = naturalWidth * ratio;
-        const dh = naturalHeight * ratio;
-        if (!isPositiveFinite(ratio) || !isPositiveFinite(dw) || !isPositiveFinite(dh)) return;
-        imageRef.current = img;
-        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 updateCropRect = useCallback(
-      (nextRect) => {
-        setCropRect(nextRect);
-        onCropChange?.(nextRect);
-      },
-      [onCropChange]
-    );
-    const handleMoveKeyDown = useCallback(
-      (e) => {
-        const step = e.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[e.key];
-        if (!delta) return;
-        e.preventDefault();
-        updateCropRect(
-          moveCropRect(
-            cropRect,
-            delta.dx,
-            delta.dy,
-            displayDimsRef.current.w,
-            displayDimsRef.current.h
-          )
-        );
-      },
-      [cropRect, updateCropRect]
-    );
-    const handleResizeKeyDown = useCallback(
-      (e, handle) => {
-        const step = e.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[e.key];
-        if (!delta) return;
-        e.preventDefault();
-        updateCropRect(
-          resizeCropRect(
-            cropRect,
-            handle,
-            delta.dx,
-            delta.dy,
-            displayDimsRef.current.w,
-            displayDimsRef.current.h,
-            aspectRatio,
-            minWidth,
-            minHeight
-          )
-        );
-      },
-      [cropRect, aspectRatio, minWidth, minHeight, updateCropRect]
-    );
-    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": labels.loadingCropImageAriaLabel,
-          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": labels.cropperDialogAriaLabel,
-        "aria-roledescription": "image cropper",
-        children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src,
-              className: imageCropperImgClasses,
-              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
-              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: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
-                    mask: `url(#${maskId})`
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__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`
-              },
-              role: "button",
-              tabIndex: 0,
-              "aria-label": labels.moveCropAreaAriaLabel,
-              onMouseDown: (e) => handleMouseDown(e, "move"),
-              onTouchStart: (e) => handleTouchStart(e, "move"),
-              onKeyDown: handleMoveKeyDown
-            }
-          ),
-          guides && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: imageCropperGuideClasses,
-                "data-guide": "true",
-                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,
-                "data-guide": "true",
-                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,
-                "data-guide": "true",
-                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,
-                "data-guide": "true",
-                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,
-                role: "button",
-                tabIndex: 0,
-                "aria-label": labels.resizeCropAreaAriaLabel.replace("{handle}", handle),
-                onMouseDown: (e) => handleMouseDown(e, "resize", handle),
-                onTouchStart: (e) => handleTouchStart(e, "resize", handle),
-                onKeyDown: (e) => handleResizeKeyDown(e, handle)
-              },
-              handle
-            );
-          })
-        ]
-      }
-    );
-  }
-);
-ImageCropper.displayName = "ImageCropper";
-
-export {
-  ImageCropper
-};

package/dist/chunk-PMQJ6AYT.mjs

@@ -1,100 +0,0 @@
-import {
-  useInputGroupContext
-} from "./chunk-34VGG7AK.mjs";
-import {
-  useControlledState
-} from "./chunk-MEFARVQI.mjs";
-
-// src/components/Textarea.tsx
-import { forwardRef, useLayoutEffect, useMemo, useRef } from "react";
-import {
-  autoResizeTextarea,
-  classNames,
-  getInputClasses
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Textarea = forwardRef(
-  ({
-    size,
-    disabled = false,
-    readonly = false,
-    required = false,
-    placeholder = "",
-    rows = 3,
-    autoResize = false,
-    maxRows,
-    minRows,
-    maxLength,
-    minLength,
-    showCount = false,
-    value,
-    defaultValue,
-    onInput,
-    onChange,
-    onFocus,
-    onBlur,
-    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) => {
-      textareaRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    };
-    useLayoutEffect(() => {
-      if (!autoResize || !textareaRef.current) return;
-      autoResizeTextarea(textareaRef.current, { minRows, maxRows });
-    }, [autoResize, currentValue, minRows, maxRows]);
-    const textareaClasses = useMemo(
-      () => classNames(
-        "block",
-        getInputClasses({ size: effectiveSize }),
-        autoResize ? "resize-none" : "resize-y",
-        className
-      ),
-      [effectiveSize, autoResize, className]
-    );
-    const handleInput = (event) => {
-      setValue(event.currentTarget.value);
-      onInput?.(event);
-    };
-    const handleChange = (event) => {
-      onChange?.(event);
-    };
-    const currentLength = currentValue?.length ?? 0;
-    const textarea = /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref: setRefs,
-        className: textareaClasses,
-        value: currentValue,
-        disabled,
-        readOnly: readonly,
-        required,
-        placeholder,
-        rows,
-        maxLength,
-        minLength,
-        onInput: handleInput,
-        onChange: handleChange,
-        onFocus,
-        onBlur,
-        ...props
-      }
-    );
-    if (!showCount) return textarea;
-    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-      textarea,
-      /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-gray-500 text-right", children: maxLength ? `${currentLength}/${maxLength}` : currentLength })
-    ] });
-  }
-);
-Textarea.displayName = "Textarea";
-
-export {
-  Textarea
-};