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

package/dist/chunk-JHRFG5PG.js

@@ -1,412 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-
-var _chunkTDODFBBOjs = require('./chunk-TDODFBBO.js');
-
-// src/components/ImageAnnotation.tsx
-var _react = require('react');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var _jsxruntime = require('react/jsx-runtime');
-function ImageAnnotation({
-  locale,
-  src,
-  alt = "Image to annotate",
-  value,
-  defaultValue = [],
-  selectedId,
-  defaultSelectedId,
-  tool,
-  defaultTool = "select",
-  tools = _tigercatcore.defaultImageAnnotationTools,
-  disabled = false,
-  readonly = false,
-  minSize = 0.01,
-  strokeWidth = 2,
-  showLabels = true,
-  className,
-  style,
-  onChange,
-  onSelect,
-  onToolChange,
-  onReady
-}) {
-  const config = _chunkTDODFBBOjs.useTigerConfig.call(void 0, );
-  const mergedLocale = _react.useMemo.call(void 0, 
-    () => _tigercatcore.mergeTigerLocale.call(void 0, config.locale, locale),
-    [config.locale, locale]
-  );
-  const labels = _react.useMemo.call(void 0, () => _tigercatcore.getImageEditorLabels.call(void 0, mergedLocale), [mergedLocale]);
-  const toolLabels = _react.useMemo.call(void 0, 
-    () => ({
-      select: labels.selectToolText,
-      rectangle: labels.rectangleToolText,
-      ellipse: labels.ellipseToolText,
-      polygon: labels.polygonToolText,
-      freehand: labels.freehandToolText
-    }),
-    [labels]
-  );
-  const containerRef = _react.useRef.call(void 0, null);
-  const overlayRef = _react.useRef.call(void 0, null);
-  const idSeedRef = _react.useRef.call(void 0, 0);
-  const drawingRef = _react.useRef.call(void 0, null);
-  const [imageLoaded, setImageLoaded] = _react.useState.call(void 0, false);
-  const [displayWidth, setDisplayWidth] = _react.useState.call(void 0, 0);
-  const [displayHeight, setDisplayHeight] = _react.useState.call(void 0, 0);
-  const [innerAnnotations, setInnerAnnotations] = _react.useState.call(void 0, defaultValue);
-  const [innerSelectedId, setInnerSelectedId] = _react.useState.call(void 0, defaultSelectedId);
-  const [innerTool, setInnerTool] = _react.useState.call(void 0, defaultTool);
-  const [draft, setDraft] = _react.useState.call(void 0, null);
-  const annotations = _nullishCoalesce(value, () => ( innerAnnotations));
-  const activeSelectedId = _nullishCoalesce(selectedId, () => ( innerSelectedId));
-  const activeTool = _nullishCoalesce(tool, () => ( innerTool));
-  const canEdit = !disabled && !readonly;
-  _react.useEffect.call(void 0, () => {
-    setImageLoaded(false);
-    setDraft(null);
-    if (typeof window === "undefined" || typeof window.Image !== "function") return;
-    const img = new window.Image();
-    img.onload = () => {
-      const container = containerRef.current;
-      const naturalWidth = img.naturalWidth || 1;
-      const naturalHeight = img.naturalHeight || 1;
-      const containerWidth = _optionalChain([container, 'optionalAccess', _ => _.clientWidth]) || naturalWidth;
-      const containerHeight = _optionalChain([container, 'optionalAccess', _2 => _2.clientHeight]) || naturalHeight;
-      const ratio = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight, 1);
-      setDisplayWidth(naturalWidth * ratio);
-      setDisplayHeight(naturalHeight * ratio);
-      setImageLoaded(true);
-      _optionalChain([onReady, 'optionalCall', _3 => _3()]);
-    };
-    img.src = src;
-  }, [src, onReady]);
-  const commitAnnotations = _react.useCallback.call(void 0, 
-    (next, meta) => {
-      if (value === void 0) setInnerAnnotations(next);
-      _optionalChain([onChange, 'optionalCall', _4 => _4(next, meta)]);
-    },
-    [onChange, value]
-  );
-  const selectAnnotation = _react.useCallback.call(void 0, 
-    (annotation) => {
-      if (selectedId === void 0) setInnerSelectedId(_optionalChain([annotation, 'optionalAccess', _5 => _5.id]));
-      _optionalChain([onSelect, 'optionalCall', _6 => _6(annotation)]);
-    },
-    [onSelect, selectedId]
-  );
-  const setActiveTool = _react.useCallback.call(void 0, 
-    (nextTool) => {
-      setDraft(null);
-      drawingRef.current = null;
-      if (tool === void 0) setInnerTool(nextTool);
-      _optionalChain([onToolChange, 'optionalCall', _7 => _7(nextTool)]);
-    },
-    [onToolChange, tool]
-  );
-  const createId = _react.useCallback.call(void 0, (shape) => {
-    idSeedRef.current += 1;
-    return `${shape}-${idSeedRef.current}`;
-  }, []);
-  const getPointFromEvent = _react.useCallback.call(void 0, (event) => {
-    const bounds = _optionalChain([overlayRef, 'access', _8 => _8.current, 'optionalAccess', _9 => _9.getBoundingClientRect, 'call', _10 => _10()]);
-    if (!bounds) return { x: 0, y: 0 };
-    return _tigercatcore.getImageAnnotationPointFromClient.call(void 0, event.clientX, event.clientY, bounds);
-  }, []);
-  const commitAnnotation = _react.useCallback.call(void 0, 
-    (annotation) => {
-      const next = [...annotations, annotation];
-      commitAnnotations(next, { type: "add", annotation });
-      selectAnnotation(annotation);
-    },
-    [annotations, commitAnnotations, selectAnnotation]
-  );
-  const commitPolygon = _react.useCallback.call(void 0, () => {
-    const drawing = drawingRef.current;
-    if (!drawing || drawing.tool !== "polygon" || drawing.points.length < 3) return;
-    const annotation = _tigercatcore.createImageAnnotationPath.call(void 0, "polygon", createId("polygon"), drawing.points);
-    drawingRef.current = null;
-    setDraft(null);
-    commitAnnotation(annotation);
-  }, [commitAnnotation, createId]);
-  const handleStageMouseDown = _react.useCallback.call(void 0, 
-    (event) => {
-      if (!canEdit || activeTool === "select" || activeTool === "polygon") return;
-      const point = getPointFromEvent(event);
-      drawingRef.current = { tool: activeTool, start: point, points: [point] };
-      const handleMouseMove = (moveEvent) => {
-        const drawing = drawingRef.current;
-        if (!drawing) return;
-        const nextPoint = getPointFromEvent(moveEvent);
-        if (drawing.tool === "rectangle" || drawing.tool === "ellipse") {
-          setDraft(_tigercatcore.createImageAnnotationBox.call(void 0, drawing.tool, "draft", drawing.start, nextPoint));
-          return;
-        }
-        const nextPoints = [...drawing.points, nextPoint];
-        drawingRef.current = { ...drawing, points: nextPoints };
-        setDraft(_tigercatcore.createImageAnnotationPath.call(void 0, "freehand", "draft", nextPoints));
-      };
-      const handleMouseUp = (upEvent) => {
-        const drawing = drawingRef.current;
-        drawingRef.current = null;
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-        if (!drawing) return;
-        const end = getPointFromEvent(upEvent);
-        if (drawing.tool === "rectangle" || drawing.tool === "ellipse") {
-          const annotation = _tigercatcore.createImageAnnotationBox.call(void 0, 
-            drawing.tool,
-            createId(drawing.tool),
-            drawing.start,
-            end
-          );
-          setDraft(null);
-          if (_tigercatcore.shouldCommitImageAnnotationBox.call(void 0, annotation, minSize)) commitAnnotation(annotation);
-          return;
-        }
-        const points = [...drawing.points, end];
-        setDraft(null);
-        if (points.length >= 2)
-          commitAnnotation(_tigercatcore.createImageAnnotationPath.call(void 0, "freehand", createId("freehand"), points));
-      };
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    },
-    [activeTool, canEdit, commitAnnotation, createId, getPointFromEvent, minSize]
-  );
-  const handleStageClick = _react.useCallback.call(void 0, 
-    (event) => {
-      if (!canEdit || activeTool !== "polygon") return;
-      const point = getPointFromEvent(event);
-      const drawing = drawingRef.current;
-      const points = _optionalChain([drawing, 'optionalAccess', _11 => _11.tool]) === "polygon" ? [...drawing.points, point] : [point];
-      drawingRef.current = { tool: "polygon", start: points[0], points };
-      setDraft(_tigercatcore.createImageAnnotationPath.call(void 0, "polygon", "draft", points));
-    },
-    [activeTool, canEdit, getPointFromEvent]
-  );
-  const removeAnnotation = _react.useCallback.call(void 0, 
-    (annotation) => {
-      if (!canEdit) return;
-      const next = annotations.filter((item) => item.id !== annotation.id);
-      commitAnnotations(next, { type: "remove", annotation });
-      selectAnnotation(null);
-    },
-    [annotations, canEdit, commitAnnotations, selectAnnotation]
-  );
-  const removeSelectedAnnotation = _react.useCallback.call(void 0, () => {
-    if (!canEdit || !activeSelectedId) return;
-    const removed = annotations.find((annotation) => annotation.id === activeSelectedId);
-    if (removed) removeAnnotation(removed);
-  }, [activeSelectedId, annotations, canEdit, removeAnnotation]);
-  const handleKeyDown = _react.useCallback.call(void 0, 
-    (event) => {
-      if (event.key === "Escape") {
-        drawingRef.current = null;
-        setDraft(null);
-        return;
-      }
-      if (event.key === "Enter") {
-        commitPolygon();
-        return;
-      }
-      if (event.key === "Delete" || event.key === "Backspace") {
-        event.preventDefault();
-        removeSelectedAnnotation();
-      }
-    },
-    [commitPolygon, removeSelectedAnnotation]
-  );
-  const renderAnnotation = _react.useCallback.call(void 0, 
-    (annotation, isDraft = false) => {
-      const selected = !isDraft && annotation.id === activeSelectedId;
-      const stroke = _tigercatcore.getImageAnnotationStrokeColor.call(void 0, annotation);
-      const onKeyDown = (event) => {
-        if (isDraft) return;
-        if (_tigercatcore.isActivationKey.call(void 0, event)) {
-          event.preventDefault();
-          event.stopPropagation();
-          selectAnnotation(annotation);
-          return;
-        }
-        if (event.key === "Delete" || event.key === "Backspace") {
-          event.preventDefault();
-          event.stopPropagation();
-          removeAnnotation(annotation);
-        }
-      };
-      const commonProps = {
-        stroke,
-        strokeWidth: selected ? strokeWidth + 1 : strokeWidth,
-        fill: stroke,
-        fillOpacity: annotation.type === "freehand" ? 0 : selected ? 0.18 : 0.1,
-        role: "button",
-        tabIndex: isDraft ? -1 : 0,
-        "aria-label": _tigercatcore.getImageAnnotationShapeAriaLabel.call(void 0, annotation),
-        className: _tigercatcore.classNames.call(void 0, !isDraft && "cursor-pointer focus:outline-none"),
-        onKeyDown: isDraft ? void 0 : onKeyDown
-      };
-      const onClick = (event) => {
-        if (isDraft) return;
-        event.stopPropagation();
-        selectAnnotation(annotation);
-      };
-      if (annotation.type === "rectangle") {
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "rect",
-          {
-            ...commonProps,
-            x: annotation.x * displayWidth,
-            y: annotation.y * displayHeight,
-            width: annotation.width * displayWidth,
-            height: annotation.height * displayHeight,
-            onClick
-          },
-          annotation.id
-        );
-      }
-      if (annotation.type === "ellipse") {
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "ellipse",
-          {
-            ...commonProps,
-            cx: (annotation.x + annotation.width / 2) * displayWidth,
-            cy: (annotation.y + annotation.height / 2) * displayHeight,
-            rx: annotation.width * displayWidth / 2,
-            ry: annotation.height * displayHeight / 2,
-            onClick
-          },
-          annotation.id
-        );
-      }
-      const pathAnnotation = annotation;
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "path",
-        {
-          ...commonProps,
-          d: _tigercatcore.getImageAnnotationPathData.call(void 0, pathAnnotation, displayWidth, displayHeight),
-          fillOpacity: pathAnnotation.type === "polygon" ? commonProps.fillOpacity : 0,
-          onClick
-        },
-        annotation.id
-      );
-    },
-    [activeSelectedId, displayHeight, displayWidth, removeAnnotation, selectAnnotation, strokeWidth]
-  );
-  const renderedAnnotations = _react.useMemo.call(void 0, 
-    () => annotations.map((annotation) => renderAnnotation(annotation)),
-    [annotations, renderAnnotation]
-  );
-  const renderedLabels = showLabels ? annotations.filter((annotation) => annotation.label).map((annotation) => {
-    const center = _tigercatcore.getImageAnnotationCenter.call(void 0, annotation, displayWidth, displayHeight);
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "text",
-      {
-        x: center.x,
-        y: center.y,
-        textAnchor: "middle",
-        dominantBaseline: "middle",
-        className: _tigercatcore.imageAnnotationLabelClasses,
-        children: annotation.label
-      },
-      `${annotation.id}-label`
-    );
-  }) : null;
-  const containerClasses = _tigercatcore.classNames.call(void 0, _tigercatcore.imageAnnotationContainerClasses, className);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: containerClasses, style, onKeyDown: handleKeyDown, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.imageAnnotationToolbarClasses, "aria-label": labels.annotationToolbarAriaLabel, children: [
-      tools.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "button",
-        {
-          type: "button",
-          className: _tigercatcore.getImageAnnotationToolButtonClasses.call(void 0, activeTool === item),
-          disabled: disabled || readonly,
-          "aria-pressed": activeTool === item,
-          onClick: () => setActiveTool(item),
-          children: toolLabels[item]
-        },
-        item
-      )),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "button",
-        {
-          type: "button",
-          className: _tigercatcore.imageAnnotationDeleteButtonClasses,
-          disabled: !canEdit || !activeSelectedId,
-          onClick: removeSelectedAnnotation,
-          children: labels.deleteText
-        }
-      )
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
-      {
-        ref: containerRef,
-        className: _tigercatcore.imageAnnotationStageClasses,
-        style: { width: imageLoaded ? `${displayWidth}px` : void 0 },
-        role: imageLoaded ? "application" : "img",
-        "aria-label": imageLoaded ? labels.annotationEditorAriaLabel : labels.loadingAnnotationImageAriaLabel,
-        children: !imageLoaded ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-h-[200px] min-w-[240px] items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-[var(--tiger-border,#d1d5db)] border-t-[var(--tiger-primary,#2563eb)]" }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "img",
-            {
-              src,
-              alt,
-              className: _tigercatcore.imageAnnotationImageClasses,
-              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
-              draggable: false
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "svg",
-            {
-              ref: overlayRef,
-              className: _tigercatcore.classNames.call(void 0, 
-                _tigercatcore.imageAnnotationOverlayClasses,
-                (!canEdit || activeTool === "select") && _tigercatcore.imageAnnotationReadonlyOverlayClasses
-              ),
-              width: displayWidth,
-              height: displayHeight,
-              viewBox: `0 0 ${displayWidth} ${displayHeight}`,
-              "aria-label": labels.annotationCanvasAriaLabel,
-              onMouseDown: handleStageMouseDown,
-              onClick: handleStageClick,
-              onDoubleClick: commitPolygon,
-              children: [
-                renderedAnnotations,
-                draft ? renderAnnotation(draft, true) : null,
-                renderedLabels
-              ]
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-}
-ImageAnnotation.displayName = "ImageAnnotation";
-
-
-
-exports.ImageAnnotation = ImageAnnotation;

package/dist/chunk-JIFSUUGA.js

@@ -1,120 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-
-
-
-var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
-
-// src/utils/use-popup.ts
-var _react = require('react');
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-function usePopup(options) {
-  const {
-    open,
-    defaultOpen = false,
-    disabled = false,
-    trigger = "click",
-    placement = "top",
-    offset = 8,
-    multiTrigger = true,
-    onOpenChange
-  } = options;
-  const isControlled = open !== void 0;
-  const [internalVisible, setInternalVisible] = _react.useState.call(void 0, defaultOpen);
-  const currentVisible = isControlled ? open : internalVisible;
-  const containerRef = _react.useRef.call(void 0, null);
-  const triggerRef = _react.useRef.call(void 0, null);
-  const floatingRef = _react.useRef.call(void 0, null);
-  const {
-    x,
-    y,
-    placement: actualPlacement
-  } = _chunkSTTQ5LXXjs.useFloating.call(void 0, {
-    referenceRef: triggerRef,
-    floatingRef,
-    enabled: currentVisible,
-    placement,
-    offset
-  });
-  const setVisible = _react.useCallback.call(void 0, 
-    (next) => {
-      if (disabled && next) return;
-      if (!isControlled) setInternalVisible(next);
-      _optionalChain([onOpenChange, 'optionalCall', _ => _(next)]);
-    },
-    [disabled, isControlled, onOpenChange]
-  );
-  const restoreTriggerFocus = _react.useCallback.call(void 0, () => {
-    const trigger2 = triggerRef.current;
-    const target = _nullishCoalesce(_optionalChain([trigger2, 'optionalAccess', _2 => _2.querySelector, 'call', _3 => _3(
-      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
-    )]), () => ( trigger2));
-    window.setTimeout(() => {
-      _tigercatcore.restoreFocus.call(void 0, target, { preventScroll: true });
-    }, 0);
-  }, []);
-  const closeAndRestoreFocus = _react.useCallback.call(void 0, () => {
-    setVisible(false);
-    restoreTriggerFocus();
-  }, [restoreTriggerFocus, setVisible]);
-  const handleToggle = _react.useCallback.call(void 0, () => {
-    if (!disabled) setVisible(!currentVisible);
-  }, [disabled, currentVisible, setVisible]);
-  const handleShow = _react.useCallback.call(void 0, () => {
-    if (!disabled) setVisible(true);
-  }, [disabled, setVisible]);
-  const handleHide = _react.useCallback.call(void 0, () => {
-    if (!disabled) setVisible(false);
-  }, [disabled, setVisible]);
-  const effectiveTrigger = multiTrigger ? trigger : "click";
-  _chunkSTTQ5LXXjs.useClickOutside.call(void 0, {
-    enabled: currentVisible && effectiveTrigger === "click",
-    refs: [containerRef, floatingRef],
-    onOutsideClick: closeAndRestoreFocus,
-    defer: true
-  });
-  _chunkSTTQ5LXXjs.useEscapeKey.call(void 0, {
-    enabled: currentVisible && effectiveTrigger !== "manual",
-    onEscape: closeAndRestoreFocus
-  });
-  const floatingStyles = _react.useMemo.call(void 0, 
-    () => ({
-      position: "absolute",
-      left: x,
-      top: y,
-      transformOrigin: _tigercatcore.getTransformOrigin.call(void 0, actualPlacement),
-      zIndex: _tigercatcore.FLOATING_OVERLAY_Z_INDEX
-    }),
-    [x, y, actualPlacement]
-  );
-  const triggerHandlers = _react.useMemo.call(void 0, () => {
-    if (!multiTrigger) {
-      return { onClick: handleToggle };
-    }
-    return _tigercatcore.buildTriggerHandlerMap.call(void 0, 
-      effectiveTrigger,
-      { toggle: handleToggle, show: handleShow, hide: handleHide },
-      "react"
-    );
-  }, [multiTrigger, effectiveTrigger, handleToggle, handleShow, handleHide]);
-  return {
-    currentVisible,
-    setVisible,
-    containerRef,
-    triggerRef,
-    floatingRef,
-    x,
-    y,
-    actualPlacement,
-    floatingStyles,
-    triggerHandlers
-  };
-}
-
-
-
-exports.usePopup = usePopup;