@expcat/tigercat-react 2.0.19 → 2.1.1

package/dist/{chunk-DPWRXXXW.mjs → chunk-OJ6SHHOZ.mjs}

@@ -1,12 +1,12 @@
 import {
   ImageGroupContext
-} from "./chunk-HSBN5MLS.mjs";
+} from "./chunk-3LACOSJQ.mjs";
 import {
   ImagePreview
-} from "./chunk-ZCGIZOMT.mjs";
+} from "./chunk-V7HJ5HLC.mjs";
 import {
   usePopup
-} from "./chunk-ZG56T75O.mjs";
+} from "./chunk-WTHWLCRL.mjs";
 import {
   renderOverlayPortal
 } from "./chunk-HKAZXG74.mjs";

package/dist/chunk-OKYMTHFQ.mjs

@@ -0,0 +1,279 @@
+// src/components/ImageCompare.tsx
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import {
+  getImageCompareAfterClasses,
+  getImageCompareBeforeClasses,
+  getImageCompareClipStyle,
+  getImageCompareHandleClasses,
+  getImageCompareHandleStyle,
+  getImageCompareImgClasses,
+  getImageCompareKeyboardPosition,
+  getImageCompareKnobClasses,
+  getImageCompareLineClasses,
+  getImageComparePointerClientPoint,
+  getImageComparePositionFromPointer,
+  getImageCompareRootClasses,
+  getImageCompareRootStyle,
+  isImageCompareInteractiveTarget,
+  isImageCompareVertical,
+  resolveImageCompareAriaLabel,
+  resolveImageCompareFit,
+  resolveImageCompareOrientation,
+  resolveImageComparePosition,
+  resolveImageCompareStep
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function renderPaneContent(slot, src, alt, fit) {
+  if (slot != null) return slot;
+  if (!src) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className: getImageCompareImgClasses(resolveImageCompareFit(fit)),
+      draggable: false
+    }
+  );
+}
+var ImageCompare = forwardRef(
+  ({
+    beforeSrc,
+    afterSrc,
+    beforeAlt = "",
+    afterAlt = "",
+    fit,
+    position: controlledPosition,
+    defaultPosition,
+    orientation,
+    step,
+    disabled = false,
+    width,
+    height,
+    ariaLabel,
+    className,
+    style,
+    before,
+    after,
+    onChange,
+    onMouseDown,
+    onTouchStart,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const {
+      "aria-label": ariaLabelAttr,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      ...domProps
+    } = rest;
+    const resolvedOrientation = resolveImageCompareOrientation(orientation);
+    const resolvedStep = resolveImageCompareStep(step);
+    const [uncontrolledPosition, setUncontrolledPosition] = useState(
+      () => resolveImageComparePosition(controlledPosition ?? defaultPosition, step)
+    );
+    const [dragging, setDragging] = useState(false);
+    const rootRef = useRef(null);
+    const handleRef = useRef(null);
+    const draggingRef = useRef(false);
+    const isControlled = controlledPosition !== void 0;
+    const current = resolveImageComparePosition(
+      isControlled ? controlledPosition : uncontrolledPosition,
+      step
+    );
+    const vertical = isImageCompareVertical(resolvedOrientation);
+    const resolvedAriaLabel = resolveImageCompareAriaLabel(
+      typeof ariaLabelAttr === "string" ? ariaLabelAttr : ariaLabel
+    );
+    const setRootRef = useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const commit = useCallback(
+      (next) => {
+        const resolved = resolveImageComparePosition(next, step);
+        if (!isControlled) setUncontrolledPosition(resolved);
+        onChange?.(resolved);
+      },
+      [isControlled, onChange, step]
+    );
+    const positionFromEvent = useCallback(
+      (event) => {
+        const root = rootRef.current;
+        const source = "nativeEvent" in event ? event.nativeEvent : event;
+        const point = getImageComparePointerClientPoint(source);
+        if (!root || !point) return null;
+        return getImageComparePositionFromPointer({
+          clientX: point.clientX,
+          clientY: point.clientY,
+          rect: root.getBoundingClientRect(),
+          orientation: resolvedOrientation,
+          step: resolvedStep
+        });
+      },
+      [resolvedOrientation, resolvedStep]
+    );
+    const handleMove = useCallback(
+      (event) => {
+        if (disabled || !draggingRef.current) return;
+        const next = positionFromEvent(event);
+        if (next === null) return;
+        commit(next);
+      },
+      [commit, disabled, positionFromEvent]
+    );
+    const handleEnd = useCallback(() => {
+      draggingRef.current = false;
+      setDragging(false);
+    }, []);
+    useEffect(() => {
+      if (!dragging) return;
+      document.addEventListener("mousemove", handleMove);
+      document.addEventListener("mouseup", handleEnd);
+      document.addEventListener("touchmove", handleMove);
+      document.addEventListener("touchend", handleEnd);
+      return () => {
+        document.removeEventListener("mousemove", handleMove);
+        document.removeEventListener("mouseup", handleEnd);
+        document.removeEventListener("touchmove", handleMove);
+        document.removeEventListener("touchend", handleEnd);
+      };
+    }, [dragging, handleEnd, handleMove]);
+    const startDrag = useCallback(
+      (event) => {
+        if (disabled) return;
+        if ("button" in event && event.button !== 0) return;
+        if (isImageCompareInteractiveTarget(event.target, handleRef.current)) return;
+        event.preventDefault();
+        draggingRef.current = true;
+        setDragging(true);
+        const next = positionFromEvent(event);
+        if (next !== null) commit(next);
+        handleRef.current?.focus();
+      },
+      [commit, disabled, positionFromEvent]
+    );
+    const handleMouseDown = useCallback(
+      (event) => {
+        startDrag(event);
+        onMouseDown?.(event);
+      },
+      [onMouseDown, startDrag]
+    );
+    const handleTouchStart = useCallback(
+      (event) => {
+        startDrag(event);
+        onTouchStart?.(event);
+      },
+      [onTouchStart, startDrag]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (disabled) {
+          onKeyDown?.(event);
+          return;
+        }
+        const next = getImageCompareKeyboardPosition(event.key, current, resolvedStep);
+        if (next !== null) {
+          event.preventDefault();
+          commit(next);
+        }
+        onKeyDown?.(event);
+      },
+      [commit, current, disabled, onKeyDown, resolvedStep]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...domProps,
+        ref: setRootRef,
+        "data-image-compare": "",
+        "data-image-compare-orientation": resolvedOrientation,
+        "data-image-compare-position": String(current),
+        "data-image-compare-disabled": disabled ? "true" : "false",
+        "data-image-compare-dragging": dragging ? "true" : "false",
+        className: getImageCompareRootClasses({
+          orientation: resolvedOrientation,
+          disabled,
+          className
+        }),
+        style: {
+          ...getImageCompareRootStyle({
+            position: current,
+            step: resolvedStep,
+            width,
+            height
+          }),
+          ...style
+        },
+        onMouseDown: handleMouseDown,
+        onTouchStart: handleTouchStart,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: getImageCompareAfterClasses(), "data-image-compare-after": "", children: renderPaneContent(after, afterSrc, afterAlt, fit) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getImageCompareBeforeClasses(),
+              style: getImageCompareClipStyle(current, resolvedOrientation, resolvedStep),
+              "data-image-compare-before": "",
+              children: renderPaneContent(before, beforeSrc, beforeAlt, fit)
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: handleRef,
+              className: getImageCompareHandleClasses({
+                orientation: resolvedOrientation,
+                disabled
+              }),
+              style: getImageCompareHandleStyle(current, resolvedOrientation, resolvedStep),
+              "data-image-compare-handle": "",
+              role: "slider",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": resolvedAriaLabel,
+              "aria-labelledby": ariaLabelledby,
+              "aria-describedby": ariaDescribedby,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": current,
+              "aria-valuetext": `${current}%`,
+              "aria-orientation": vertical ? "vertical" : "horizontal",
+              "aria-disabled": disabled,
+              onKeyDown: handleKeyDown,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: getImageCompareLineClasses(resolvedOrientation),
+                    "data-image-compare-line": "",
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: getImageCompareKnobClasses(),
+                    "data-image-compare-knob": "",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageCompare.displayName = "ImageCompare";
+var ImageCompare_default = ImageCompare;
+
+export {
+  ImageCompare,
+  ImageCompare_default
+};

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

@@ -66,28 +66,30 @@ var Textarea = forwardRef(
       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: [
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: setRefs,
-          className: textareaClasses,
-          value: currentValue,
-          disabled,
-          readOnly: readonly,
-          required,
-          placeholder,
-          rows,
-          maxLength,
-          minLength,
-          onInput: handleInput,
-          onChange: handleChange,
-          onFocus,
-          onBlur,
-          ...props
-        }
-      ),
-      showCount && /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-gray-500 text-right", children: maxLength ? `${currentLength}/${maxLength}` : currentLength })
+      textarea,
+      /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-gray-500 text-right", children: maxLength ? `${currentLength}/${maxLength}` : currentLength })
     ] });
   }
 );