@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/{chunk-2WBPUW75.mjs → chunk-VE2YEFG2.mjs}

@@ -1,8 +1,33 @@
-import { usePopup } from './chunk-AMOH5AMN.mjs';
-import React, { useRef, useMemo } from 'react';
-import { createFloatingIdFactory, classNames, getPopconfirmContainerClasses, getPopconfirmTriggerClasses, getPopconfirmArrowClasses, getPopconfirmContentClasses, getPopconfirmTitleClasses, getPopconfirmDescriptionClasses, getPopconfirmIconClasses, getPopconfirmButtonsClasses, getPopconfirmCancelButtonClasses, getPopconfirmOkButtonClasses, mergeStyleValues, popconfirmIconStrokeWidth, popconfirmIconViewBox, getPopconfirmIconPath, popconfirmIconPathStrokeLinejoin, popconfirmIconPathStrokeLinecap } from '@expcat/tigercat-core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import {
+  usePopup
+} from "./chunk-4XOWNEZA.mjs";
+import {
+  renderBodyPortal
+} from "./chunk-SEWNVIHH.mjs";
 
+// src/components/Popconfirm.tsx
+import React, { useMemo, useRef } from "react";
+import {
+  classNames,
+  createFloatingIdFactory,
+  getPopconfirmIconPath,
+  getPopconfirmContainerClasses,
+  getPopconfirmTriggerClasses,
+  getPopconfirmContentClasses,
+  getPopconfirmTitleClasses,
+  getPopconfirmDescriptionClasses,
+  getPopconfirmIconClasses,
+  getPopconfirmArrowClasses,
+  getPopconfirmButtonsClasses,
+  getPopconfirmCancelButtonClasses,
+  getPopconfirmOkButtonClasses,
+  mergeStyleValues,
+  popconfirmIconPathStrokeLinecap,
+  popconfirmIconPathStrokeLinejoin,
+  popconfirmIconStrokeWidth,
+  popconfirmIconViewBox
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var createPopconfirmId = createFloatingIdFactory("popconfirm");
 var PopconfirmIcon = ({ type }) => /* @__PURE__ */ jsx(
   "svg",
@@ -112,6 +137,7 @@ var Popconfirm = ({
       if (React.isValidElement(target)) {
         const onChildClick = target.props.onClick;
         if (typeof onChildClick === "function") {
+          ;
           onChildClick(event);
         }
       }
@@ -149,44 +175,48 @@ var Popconfirm = ({
   })();
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style: mergedStyle, ...divProps, children: [
     /* @__PURE__ */ jsx("div", { ref: triggerRef, children: triggerNode }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: floatingRef,
-        className: contentWrapperClasses,
-        style: contentWrapperStyles,
-        hidden: !currentVisible,
-        "aria-hidden": !currentVisible,
-        children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx("div", { className: arrowClasses, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              id: popconfirmId,
-              role: "dialog",
-              "aria-modal": "false",
-              "aria-labelledby": titleId,
-              "aria-describedby": describedBy,
-              className: contentClasses,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-                  showIcon && /* @__PURE__ */ jsx("div", { className: iconClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopconfirmIcon, { type: icon }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
-                    (description || descriptionContent) && /* @__PURE__ */ jsx("div", { id: descriptionId, className: descriptionClasses, children: descriptionContent || description })
+    renderBodyPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: floatingRef,
+          className: contentWrapperClasses,
+          style: contentWrapperStyles,
+          hidden: !currentVisible,
+          "aria-hidden": !currentVisible,
+          children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx("div", { className: arrowClasses, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                id: popconfirmId,
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-labelledby": titleId,
+                "aria-describedby": describedBy,
+                className: contentClasses,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+                    showIcon && /* @__PURE__ */ jsx("div", { className: iconClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopconfirmIcon, { type: icon }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                      /* @__PURE__ */ jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
+                      (description || descriptionContent) && /* @__PURE__ */ jsx("div", { id: descriptionId, className: descriptionClasses, children: descriptionContent || description })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: buttonsClasses, children: [
+                    /* @__PURE__ */ jsx("button", { type: "button", className: cancelButtonClasses, onClick: handleCancel, children: cancelText }),
+                    /* @__PURE__ */ jsx("button", { type: "button", className: okButtonClasses, onClick: handleConfirm, children: okText })
                   ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: buttonsClasses, children: [
-                  /* @__PURE__ */ jsx("button", { type: "button", className: cancelButtonClasses, onClick: handleCancel, children: cancelText }),
-                  /* @__PURE__ */ jsx("button", { type: "button", className: okButtonClasses, onClick: handleConfirm, children: okText })
-                ] })
-              ]
-            }
-          )
-        ] })
-      }
+                ]
+              }
+            )
+          ] })
+        }
+      )
     )
   ] });
 };
 
-export { Popconfirm };
+export {
+  Popconfirm
+};

package/dist/chunk-VE3SYUMH.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Row.tsx
+var _react = require('react');
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var RowContext = _react.createContext.call(void 0, {});
+var Row = ({
+  gutter = 0,
+  align = "top",
+  justify = "start",
+  wrap = true,
+  children,
+  className,
+  style,
+  ...divProps
+}) => {
+  const rowClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, 
+      "flex",
+      "w-full",
+      wrap && "flex-wrap",
+      _tigercatcore.getRowGutterClasses.call(void 0, gutter),
+      _tigercatcore.getAlignClasses.call(void 0, align),
+      _tigercatcore.getJustifyClasses.call(void 0, justify),
+      className
+    ),
+    [gutter, wrap, align, justify, className]
+  );
+  const mergedStyle = _react.useMemo.call(void 0, 
+    () => ({ ..._tigercatcore.getRowGutterStyleVars.call(void 0, gutter), ...style }),
+    [gutter, style]
+  );
+  const contextValue = _react.useMemo.call(void 0, () => ({ gutter }), [gutter]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RowContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: rowClasses, style: mergedStyle, ...divProps, children }) });
+};
+
+
+
+
+exports.RowContext = RowContext; exports.Row = Row;

package/dist/chunk-VHGCWZ6V.mjs

@@ -0,0 +1,367 @@
+// src/components/ImageAnnotation.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  createImageAnnotationBox,
+  createImageAnnotationPath,
+  defaultImageAnnotationTools,
+  getImageAnnotationCenter,
+  getImageAnnotationPathData,
+  getImageAnnotationPointFromClient,
+  getImageAnnotationShapeAriaLabel,
+  getImageAnnotationStrokeColor,
+  getImageAnnotationToolButtonClasses,
+  getImageAnnotationToolLabel,
+  imageAnnotationContainerClasses,
+  imageAnnotationDeleteButtonClasses,
+  imageAnnotationImageClasses,
+  imageAnnotationLabelClasses,
+  imageAnnotationOverlayClasses,
+  imageAnnotationReadonlyOverlayClasses,
+  imageAnnotationStageClasses,
+  imageAnnotationToolbarClasses,
+  shouldCommitImageAnnotationBox
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ImageAnnotation({
+  src,
+  alt = "Image to annotate",
+  value,
+  defaultValue = [],
+  selectedId,
+  defaultSelectedId,
+  tool,
+  defaultTool = "select",
+  tools = defaultImageAnnotationTools,
+  disabled = false,
+  readonly = false,
+  minSize = 0.01,
+  strokeWidth = 2,
+  showLabels = true,
+  className,
+  style,
+  onChange,
+  onSelect,
+  onToolChange,
+  onReady
+}) {
+  const containerRef = useRef(null);
+  const overlayRef = useRef(null);
+  const idSeedRef = useRef(0);
+  const drawingRef = useRef(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [displayWidth, setDisplayWidth] = useState(0);
+  const [displayHeight, setDisplayHeight] = useState(0);
+  const [innerAnnotations, setInnerAnnotations] = useState(defaultValue);
+  const [innerSelectedId, setInnerSelectedId] = useState(defaultSelectedId);
+  const [innerTool, setInnerTool] = useState(defaultTool);
+  const [draft, setDraft] = useState(null);
+  const annotations = value ?? innerAnnotations;
+  const activeSelectedId = selectedId ?? innerSelectedId;
+  const activeTool = tool ?? innerTool;
+  const canEdit = !disabled && !readonly;
+  useEffect(() => {
+    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 = container?.clientWidth || naturalWidth;
+      const containerHeight = container?.clientHeight || naturalHeight;
+      const ratio = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight, 1);
+      setDisplayWidth(naturalWidth * ratio);
+      setDisplayHeight(naturalHeight * ratio);
+      setImageLoaded(true);
+      onReady?.();
+    };
+    img.src = src;
+  }, [src, onReady]);
+  const commitAnnotations = useCallback(
+    (next, meta) => {
+      if (value === void 0) setInnerAnnotations(next);
+      onChange?.(next, meta);
+    },
+    [onChange, value]
+  );
+  const selectAnnotation = useCallback(
+    (annotation) => {
+      if (selectedId === void 0) setInnerSelectedId(annotation?.id);
+      onSelect?.(annotation);
+    },
+    [onSelect, selectedId]
+  );
+  const setActiveTool = useCallback(
+    (nextTool) => {
+      setDraft(null);
+      drawingRef.current = null;
+      if (tool === void 0) setInnerTool(nextTool);
+      onToolChange?.(nextTool);
+    },
+    [onToolChange, tool]
+  );
+  const createId = useCallback((shape) => {
+    idSeedRef.current += 1;
+    return `${shape}-${idSeedRef.current}`;
+  }, []);
+  const getPointFromEvent = useCallback((event) => {
+    const bounds = overlayRef.current?.getBoundingClientRect();
+    if (!bounds) return { x: 0, y: 0 };
+    return getImageAnnotationPointFromClient(event.clientX, event.clientY, bounds);
+  }, []);
+  const commitAnnotation = useCallback(
+    (annotation) => {
+      const next = [...annotations, annotation];
+      commitAnnotations(next, { type: "add", annotation });
+      selectAnnotation(annotation);
+    },
+    [annotations, commitAnnotations, selectAnnotation]
+  );
+  const commitPolygon = useCallback(() => {
+    const drawing = drawingRef.current;
+    if (!drawing || drawing.tool !== "polygon" || drawing.points.length < 3) return;
+    const annotation = createImageAnnotationPath("polygon", createId("polygon"), drawing.points);
+    drawingRef.current = null;
+    setDraft(null);
+    commitAnnotation(annotation);
+  }, [commitAnnotation, createId]);
+  const handleStageMouseDown = useCallback(
+    (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(createImageAnnotationBox(drawing.tool, "draft", drawing.start, nextPoint));
+          return;
+        }
+        const nextPoints = [...drawing.points, nextPoint];
+        drawingRef.current = { ...drawing, points: nextPoints };
+        setDraft(createImageAnnotationPath("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 = createImageAnnotationBox(
+            drawing.tool,
+            createId(drawing.tool),
+            drawing.start,
+            end
+          );
+          setDraft(null);
+          if (shouldCommitImageAnnotationBox(annotation, minSize)) commitAnnotation(annotation);
+          return;
+        }
+        const points = [...drawing.points, end];
+        setDraft(null);
+        if (points.length >= 2)
+          commitAnnotation(createImageAnnotationPath("freehand", createId("freehand"), points));
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [activeTool, canEdit, commitAnnotation, createId, getPointFromEvent, minSize]
+  );
+  const handleStageClick = useCallback(
+    (event) => {
+      if (!canEdit || activeTool !== "polygon") return;
+      const point = getPointFromEvent(event);
+      const drawing = drawingRef.current;
+      const points = drawing?.tool === "polygon" ? [...drawing.points, point] : [point];
+      drawingRef.current = { tool: "polygon", start: points[0], points };
+      setDraft(createImageAnnotationPath("polygon", "draft", points));
+    },
+    [activeTool, canEdit, getPointFromEvent]
+  );
+  const removeSelectedAnnotation = useCallback(() => {
+    if (!canEdit || !activeSelectedId) return;
+    const removed = annotations.find((annotation) => annotation.id === activeSelectedId);
+    const next = annotations.filter((annotation) => annotation.id !== activeSelectedId);
+    commitAnnotations(next, { type: "remove", annotation: removed });
+    selectAnnotation(null);
+  }, [activeSelectedId, annotations, canEdit, commitAnnotations, selectAnnotation]);
+  const handleKeyDown = useCallback(
+    (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 = useCallback(
+    (annotation, isDraft = false) => {
+      const selected = !isDraft && annotation.id === activeSelectedId;
+      const stroke = getImageAnnotationStrokeColor(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": getImageAnnotationShapeAriaLabel(annotation),
+        className: classNames(!isDraft && "cursor-pointer focus:outline-none")
+      };
+      const onClick = (event) => {
+        if (isDraft) return;
+        event.stopPropagation();
+        selectAnnotation(annotation);
+      };
+      if (annotation.type === "rectangle") {
+        return /* @__PURE__ */ jsx(
+          "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__ */ jsx(
+          "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__ */ jsx(
+        "path",
+        {
+          ...commonProps,
+          d: getImageAnnotationPathData(pathAnnotation, displayWidth, displayHeight),
+          fillOpacity: pathAnnotation.type === "polygon" ? commonProps.fillOpacity : 0,
+          onClick
+        },
+        annotation.id
+      );
+    },
+    [activeSelectedId, displayHeight, displayWidth, selectAnnotation, strokeWidth]
+  );
+  const renderedAnnotations = useMemo(
+    () => annotations.map((annotation) => renderAnnotation(annotation)),
+    [annotations, renderAnnotation]
+  );
+  const renderedLabels = showLabels ? annotations.filter((annotation) => annotation.label).map((annotation) => {
+    const center = getImageAnnotationCenter(annotation, displayWidth, displayHeight);
+    return /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: center.x,
+        y: center.y,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        className: imageAnnotationLabelClasses,
+        children: annotation.label
+      },
+      `${annotation.id}-label`
+    );
+  }) : null;
+  const containerClasses = classNames(imageAnnotationContainerClasses, className);
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, style, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs("div", { className: imageAnnotationToolbarClasses, "aria-label": "Annotation tools", children: [
+      tools.map((item) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getImageAnnotationToolButtonClasses(activeTool === item),
+          disabled: disabled || readonly,
+          "aria-pressed": activeTool === item,
+          onClick: () => setActiveTool(item),
+          children: getImageAnnotationToolLabel(item)
+        },
+        item
+      )),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: imageAnnotationDeleteButtonClasses,
+          disabled: !canEdit || !activeSelectedId,
+          onClick: removeSelectedAnnotation,
+          children: "Delete"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: imageAnnotationStageClasses,
+        style: { width: imageLoaded ? `${displayWidth}px` : void 0 },
+        role: imageLoaded ? "application" : "img",
+        "aria-label": imageLoaded ? "Image annotation editor" : "Loading image for annotation",
+        children: !imageLoaded ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] min-w-[240px] items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-[var(--tiger-border,#d1d5db)] border-t-[var(--tiger-primary,#2563eb)]" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt,
+              className: imageAnnotationImageClasses,
+              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
+              draggable: false
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              ref: overlayRef,
+              className: classNames(
+                imageAnnotationOverlayClasses,
+                (!canEdit || activeTool === "select") && imageAnnotationReadonlyOverlayClasses
+              ),
+              width: displayWidth,
+              height: displayHeight,
+              viewBox: `0 0 ${displayWidth} ${displayHeight}`,
+              "aria-label": "Image annotation canvas",
+              onMouseDown: handleStageMouseDown,
+              onClick: handleStageClick,
+              onDoubleClick: commitPolygon,
+              children: [
+                renderedAnnotations,
+                draft ? renderAnnotation(draft, true) : null,
+                renderedLabels
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+ImageAnnotation.displayName = "ImageAnnotation";
+
+export {
+  ImageAnnotation
+};

package/dist/chunk-VJJ76I7U.js

@@ -1,9 +1,9 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Header.tsx
 
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Header.tsx
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
 var Header = ({
   className,
   height = "64px",
@@ -11,9 +11,11 @@ var Header = ({
   children,
   ...props
 }) => {
-  const headerClasses = tigercatCore.classNames(tigercatCore.layoutHeaderClasses, className);
+  const headerClasses = _tigercatcore.classNames.call(void 0, _tigercatcore.layoutHeaderClasses, className);
   const headerStyle = { ...style, height };
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: headerClasses, style: headerStyle, ...props, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "header", { className: headerClasses, style: headerStyle, ...props, children });
 };
 
+
+
 exports.Header = Header;