@expcat/tigercat-react 0.3.69 → 0.4.0

package/dist/chunk-PJCY45UP.mjs

@@ -0,0 +1,536 @@
+import { useTigerConfig } from './chunk-VEGBO77D.mjs';
+import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { classNames, taskBoardCardClasses, taskBoardCardDraggingClasses, isWipExceeded, taskBoardColumnClasses, taskBoardColumnDropTargetClasses, taskBoardColumnDraggingClasses, taskBoardDropIndicatorClasses, resolveLocaleText, taskBoardEmptyClasses, taskBoardColumnHeaderClasses, taskBoardWipExceededClasses, taskBoardColumnBodyClasses, taskBoardAddCardClasses, mergeTigerLocale, getTaskBoardLabels, createTouchDragTracker, moveCard, reorderColumns, setDragData, createCardDragData, getDropIndex, parseDragData, createColumnDragData, getColumnDropIndex, findColumnFromPoint, taskBoardBaseClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var CardItem = React.memo(
+  ({
+    card,
+    column,
+    isDragging,
+    isKbGrabbed,
+    draggable,
+    dragHintText,
+    renderCard,
+    onDragStart,
+    onDragEnd,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onKeyDown
+  }) => {
+    const cardClasses = classNames(
+      taskBoardCardClasses,
+      isDragging && taskBoardCardDraggingClasses,
+      isKbGrabbed && "ring-2 ring-[var(--tiger-primary,#2563eb)]"
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cardClasses,
+        draggable,
+        tabIndex: 0,
+        role: "listitem",
+        "aria-roledescription": dragHintText,
+        "aria-grabbed": isKbGrabbed ? "true" : void 0,
+        "data-tiger-taskboard-card": "",
+        "data-tiger-taskboard-card-id": String(card.id),
+        onDragStart: (e) => onDragStart(e, card, column),
+        onDragEnd,
+        onTouchStart: (e) => onTouchStart(e, card, column),
+        onTouchMove,
+        onTouchEnd,
+        onKeyDown: (e) => onKeyDown(e, card, column),
+        children: renderCard ? renderCard(card, column.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-sm text-[var(--tiger-text,#1f2937)]", children: card.title }),
+          card.description && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2", children: card.description })
+        ] })
+      }
+    );
+  },
+  (prev, next) => prev.card.id === next.card.id && prev.isDragging === next.isDragging && prev.isKbGrabbed === next.isKbGrabbed && prev.draggable === next.draggable && prev.card === next.card
+);
+CardItem.displayName = "TaskBoardCardItem";
+var ColumnItem = React.memo(
+  ({
+    column,
+    colIndex,
+    isDropTarget,
+    isColDragging,
+    dropIdx,
+    draggable,
+    columnDraggable,
+    labels,
+    renderCardProp,
+    renderColumnHeader,
+    renderColumnFooter,
+    renderEmptyColumn,
+    onCardAdd,
+    dragType,
+    onCardDragStart,
+    onCardDragOver,
+    onCardDrop,
+    onDragEnd,
+    onDragLeave,
+    onColumnDragStart,
+    onColumnDragOver,
+    onColumnDrop,
+    onCardTouchStart,
+    onCardTouchMove,
+    onCardTouchEnd,
+    onColumnTouchStart,
+    onColumnTouchMove,
+    onColumnTouchEnd,
+    onCardKeyDown,
+    dragStateId,
+    kbDragStateId
+  }) => {
+    const wipOver = isWipExceeded(column);
+    const colClasses = classNames(
+      taskBoardColumnClasses,
+      isDropTarget && taskBoardColumnDropTargetClasses,
+      isColDragging && taskBoardColumnDraggingClasses
+    );
+    let cardsContent;
+    if (column.cards.length > 0) {
+      const nodes = [];
+      column.cards.forEach((card, i) => {
+        if (isDropTarget && dropIdx === i) {
+          nodes.push(/* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, `drop-${i}`));
+        }
+        const isDragging = dragStateId === card.id;
+        const isKbGrabbed = kbDragStateId === card.id;
+        nodes.push(
+          /* @__PURE__ */ jsx(
+            CardItem,
+            {
+              card,
+              column,
+              isDragging,
+              isKbGrabbed,
+              draggable,
+              dragHintText: labels.dragHintText,
+              renderCard: renderCardProp,
+              onDragStart: onCardDragStart,
+              onDragEnd,
+              onTouchStart: onCardTouchStart,
+              onTouchMove: onCardTouchMove,
+              onTouchEnd: onCardTouchEnd,
+              onKeyDown: onCardKeyDown
+            },
+            String(card.id)
+          )
+        );
+      });
+      if (isDropTarget && dropIdx >= column.cards.length) {
+        nodes.push(/* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, "drop-end"));
+      }
+      cardsContent = nodes;
+    } else {
+      cardsContent = isDropTarget ? /* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, "drop-empty") : renderEmptyColumn ? renderEmptyColumn(column) : /* @__PURE__ */ jsx("div", { className: taskBoardEmptyClasses, children: resolveLocaleText(labels.emptyColumnText) });
+    }
+    const wipTitle = column.wipLimit != null ? resolveLocaleText(labels.wipLimitText.replace("{limit}", String(column.wipLimit))) : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: colClasses,
+        "data-tiger-taskboard-column": "",
+        "data-tiger-taskboard-column-id": String(column.id),
+        onDragOver: dragType === "column" ? onColumnDragOver : void 0,
+        onDrop: dragType === "column" ? onColumnDrop : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: taskBoardColumnHeaderClasses,
+              draggable: columnDraggable,
+              onDragStart: (e) => onColumnDragStart(e, column, colIndex),
+              onDragEnd,
+              onTouchStart: (e) => onColumnTouchStart(e, column, colIndex),
+              onTouchMove: onColumnTouchMove,
+              onTouchEnd: onColumnTouchEnd,
+              style: columnDraggable ? { cursor: "grab" } : void 0,
+              children: renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { className: wipOver ? taskBoardWipExceededClasses : void 0, children: [
+                  column.title,
+                  column.wipLimit != null ? /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs font-normal opacity-70", title: wipTitle, children: [
+                    "(",
+                    column.cards.length,
+                    "/",
+                    column.wipLimit,
+                    ")"
+                  ] }) : /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs font-normal opacity-50", children: column.cards.length })
+                ] }),
+                column.description && /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-[var(--tiger-text-muted,#6b7280)] truncate max-w-[120px]", children: column.description })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: taskBoardColumnBodyClasses,
+              role: "list",
+              "aria-label": column.title,
+              onDragOver: (e) => onCardDragOver(e, column),
+              onDrop: (e) => onCardDrop(e, column),
+              onDragLeave,
+              children: cardsContent
+            }
+          ),
+          renderColumnFooter ? renderColumnFooter(column) : onCardAdd ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: classNames(
+                "border-t border-[var(--tiger-border,#e5e7eb)]",
+                taskBoardAddCardClasses
+              ),
+              onClick: () => onCardAdd(column.id),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: "+" }),
+                /* @__PURE__ */ jsx("span", { children: resolveLocaleText(labels.addCardText) })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  },
+  (prev, next) => prev.column === next.column && prev.colIndex === next.colIndex && prev.isDropTarget === next.isDropTarget && prev.isColDragging === next.isColDragging && prev.dropIdx === next.dropIdx && prev.draggable === next.draggable && prev.columnDraggable === next.columnDraggable && prev.dragType === next.dragType && prev.dragStateId === next.dragStateId && prev.kbDragStateId === next.kbDragStateId && prev.onCardAdd === next.onCardAdd
+);
+ColumnItem.displayName = "TaskBoardColumnItem";
+var TaskBoard = ({
+  columns: controlledColumns,
+  defaultColumns = [],
+  draggable = true,
+  columnDraggable = true,
+  enforceWipLimit = false,
+  beforeCardMove,
+  beforeColumnMove,
+  onCardMove,
+  onColumnMove,
+  onColumnsChange,
+  onCardAdd,
+  renderCard: renderCardProp,
+  renderColumnHeader,
+  renderColumnFooter,
+  renderEmptyColumn,
+  locale,
+  className,
+  style,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getTaskBoardLabels(mergedLocale), [mergedLocale]);
+  const [innerColumns, setInnerColumns] = useState(defaultColumns);
+  useEffect(() => {
+    if (controlledColumns !== void 0) setInnerColumns(controlledColumns);
+  }, [controlledColumns]);
+  const currentColumns = controlledColumns ?? innerColumns;
+  const columnsRef = useRef(currentColumns);
+  columnsRef.current = currentColumns;
+  const updateColumns = useCallback(
+    (next) => {
+      setInnerColumns(next);
+      onColumnsChange?.(next);
+    },
+    [onColumnsChange]
+  );
+  const [dragState, setDragState] = useState(null);
+  const [dropTargetColumnId, setDropTargetColumnId] = useState(null);
+  const [dropIdx, setDropIdx] = useState(-1);
+  const [kbDragState, setKbDragState] = useState(null);
+  const boardRef = useRef(null);
+  const touchTrackerRef = useRef(null);
+  const touchRafRef = useRef(0);
+  const beforeCardMoveRef = useRef(beforeCardMove);
+  beforeCardMoveRef.current = beforeCardMove;
+  const beforeColumnMoveRef = useRef(beforeColumnMove);
+  beforeColumnMoveRef.current = beforeColumnMove;
+  const onCardMoveRef = useRef(onCardMove);
+  onCardMoveRef.current = onCardMove;
+  const onColumnMoveRef = useRef(onColumnMove);
+  onColumnMoveRef.current = onColumnMove;
+  const enforceWipLimitRef = useRef(enforceWipLimit);
+  enforceWipLimitRef.current = enforceWipLimit;
+  useEffect(() => {
+    if (typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0)) {
+      touchTrackerRef.current = createTouchDragTracker();
+    }
+    return () => cancelAnimationFrame(touchRafRef.current);
+  }, []);
+  const resetDrag = useCallback(() => {
+    setDragState(null);
+    setDropTargetColumnId(null);
+    setDropIdx(-1);
+  }, []);
+  const applyCardMove = useCallback(
+    async (cardId, fromColumnId, toColumnId, toIdx) => {
+      const result = moveCard(columnsRef.current, cardId, fromColumnId, toColumnId, toIdx, {
+        enforceWipLimit: enforceWipLimitRef.current
+      });
+      if (!result) return;
+      if (beforeCardMoveRef.current) {
+        const ok = await beforeCardMoveRef.current(result.event);
+        if (!ok) return;
+      }
+      updateColumns(result.columns);
+      onCardMoveRef.current?.(result.event);
+    },
+    [updateColumns]
+  );
+  const applyColumnMove = useCallback(
+    async (fromIdx, toIdx) => {
+      const cols = columnsRef.current;
+      const result = reorderColumns(cols, fromIdx, Math.min(toIdx, cols.length - 1));
+      if (!result) return;
+      if (beforeColumnMoveRef.current) {
+        const ok = await beforeColumnMoveRef.current(result.event);
+        if (!ok) return;
+      }
+      updateColumns(result.columns);
+      onColumnMoveRef.current?.(result.event);
+    },
+    [updateColumns]
+  );
+  const handleCardDragStart = useCallback(
+    (e, card, column) => {
+      if (!draggable) return;
+      const idx = column.cards.findIndex((c) => c.id === card.id);
+      setDragData(e.dataTransfer, createCardDragData(card.id, column.id, idx));
+      setDragState({ type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx });
+    },
+    [draggable]
+  );
+  const handleCardDragOver = useCallback(
+    (e, column) => {
+      e.preventDefault();
+      if (!dragState || dragState.type !== "card") return;
+      setDropTargetColumnId(column.id);
+      const target = e.currentTarget;
+      const cardEls = target.querySelectorAll("[data-tiger-taskboard-card]");
+      const rects = [];
+      cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+      setDropIdx(getDropIndex(e.clientY, rects));
+    },
+    [dragState]
+  );
+  const handleCardDrop = useCallback(
+    (e, column) => {
+      e.preventDefault();
+      const data = parseDragData(e.dataTransfer);
+      if (!data || data.type !== "card") return;
+      applyCardMove(
+        data.cardId,
+        data.columnId,
+        column.id,
+        dropIdx >= 0 ? dropIdx : column.cards.length
+      );
+      resetDrag();
+    },
+    [dropIdx, applyCardMove, resetDrag]
+  );
+  const handleColumnDragStart = useCallback(
+    (e, column, index) => {
+      if (!columnDraggable) return;
+      setDragData(e.dataTransfer, createColumnDragData(column.id, index));
+      setDragState({ type: "column", id: column.id, fromIndex: index });
+    },
+    [columnDraggable]
+  );
+  const handleColumnDragOver = useCallback(
+    (e) => {
+      if (!dragState || dragState.type !== "column") return;
+      e.preventDefault();
+    },
+    [dragState]
+  );
+  const handleColumnDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = parseDragData(e.dataTransfer);
+      if (!data || data.type !== "column") return;
+      const colEls = boardRef.current?.querySelectorAll("[data-tiger-taskboard-column]");
+      if (!colEls) return;
+      const rects = [];
+      colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+      const toIdx = getColumnDropIndex(e.clientX, rects);
+      applyColumnMove(data.index, toIdx);
+      resetDrag();
+    },
+    [applyColumnMove, resetDrag]
+  );
+  const handleDragEnd = useCallback(() => resetDrag(), [resetDrag]);
+  const handleDragLeave = useCallback(
+    (e) => {
+      const related = e.relatedTarget;
+      if (!related || !e.currentTarget.contains(related)) {
+        if (dragState?.type === "card") {
+          setDropTargetColumnId(null);
+          setDropIdx(-1);
+        }
+      }
+    },
+    [dragState]
+  );
+  const handleTouchStart = useCallback(
+    (e, card, column) => {
+      if (!draggable || !touchTrackerRef.current) return;
+      const idx = column.cards.findIndex((c) => c.id === card.id);
+      touchTrackerRef.current.onTouchStart(e.nativeEvent, e.currentTarget);
+      setDragState({ type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx });
+    },
+    [draggable]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (!touchTrackerRef.current || !dragState) return;
+      touchTrackerRef.current.onTouchMove(e.nativeEvent);
+      cancelAnimationFrame(touchRafRef.current);
+      touchRafRef.current = requestAnimationFrame(() => {
+        const st = touchTrackerRef.current.getState();
+        if (dragState?.type === "card") {
+          const colEl = findColumnFromPoint(st.currentX, st.currentY, boardRef.current);
+          if (colEl) {
+            const colId = colEl.getAttribute("data-tiger-taskboard-column-id");
+            setDropTargetColumnId(colId ?? null);
+            const cardEls = colEl.querySelectorAll("[data-tiger-taskboard-card]");
+            const rects = [];
+            cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+            setDropIdx(getDropIndex(st.currentY, rects));
+          }
+        }
+      });
+    },
+    [dragState]
+  );
+  const handleTouchEnd = useCallback(() => {
+    if (!touchTrackerRef.current || !dragState) return;
+    touchTrackerRef.current.onTouchEnd();
+    if (dragState.type === "card" && dropTargetColumnId != null) {
+      applyCardMove(
+        dragState.id,
+        dragState.fromColumnId,
+        dropTargetColumnId,
+        dropIdx >= 0 ? dropIdx : 0
+      );
+    }
+    resetDrag();
+  }, [dragState, dropIdx, dropTargetColumnId, applyCardMove, resetDrag]);
+  const handleColumnTouchStart = useCallback(
+    (e, column, index) => {
+      if (!columnDraggable || !touchTrackerRef.current) return;
+      touchTrackerRef.current.onTouchStart(e.nativeEvent, e.currentTarget);
+      setDragState({ type: "column", id: column.id, fromIndex: index });
+    },
+    [columnDraggable]
+  );
+  const handleColumnTouchMove = useCallback(
+    (e) => {
+      if (!touchTrackerRef.current || !dragState || dragState.type !== "column") return;
+      touchTrackerRef.current.onTouchMove(e.nativeEvent);
+    },
+    [dragState]
+  );
+  const handleColumnTouchEnd = useCallback(() => {
+    if (!touchTrackerRef.current || !dragState || dragState.type !== "column") return;
+    const st = touchTrackerRef.current.onTouchEnd();
+    const colEls = boardRef.current?.querySelectorAll("[data-tiger-taskboard-column]");
+    if (!colEls) {
+      resetDrag();
+      return;
+    }
+    const rects = [];
+    colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+    const toIdx = getColumnDropIndex(st.currentX, rects);
+    applyColumnMove(dragState.fromIndex, Math.min(toIdx, columnsRef.current.length - 1));
+    resetDrag();
+  }, [dragState, applyColumnMove, resetDrag]);
+  const handleCardKeyDown = useCallback(
+    (e, card, column) => {
+      if (!draggable) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (!kbDragState) {
+          const idx = column.cards.findIndex((c) => c.id === card.id);
+          setKbDragState({ type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx });
+        } else {
+          const cardIdx = column.cards.findIndex((c) => c.id === card.id);
+          if (kbDragState.fromColumnId !== void 0) {
+            applyCardMove(kbDragState.id, kbDragState.fromColumnId, column.id, cardIdx);
+          }
+          setKbDragState(null);
+        }
+        return;
+      }
+      if (e.key === "Escape" && kbDragState) {
+        e.preventDefault();
+        setKbDragState(null);
+      }
+    },
+    [draggable, kbDragState, applyCardMove]
+  );
+  const wrapperClasses = useMemo(() => classNames(taskBoardBaseClasses, className), [className]);
+  const dragType = dragState?.type ?? null;
+  const dragStateId = dragState?.type === "card" ? dragState.id : null;
+  const kbDragStateId = kbDragState?.id ?? null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: boardRef,
+      className: wrapperClasses,
+      style,
+      role: "region",
+      "aria-label": resolveLocaleText(labels.boardAriaLabel),
+      "data-tiger-task-board": "",
+      ...rest,
+      children: currentColumns.map((col, i) => {
+        const isDropTarget = dragState?.type === "card" && dropTargetColumnId === col.id;
+        const isColDragging = dragState?.type === "column" && dragState.id === col.id;
+        return /* @__PURE__ */ jsx(
+          ColumnItem,
+          {
+            column: col,
+            colIndex: i,
+            isDropTarget,
+            isColDragging,
+            dropIdx: isDropTarget ? dropIdx : -1,
+            draggable,
+            columnDraggable,
+            labels,
+            renderCardProp,
+            renderColumnHeader,
+            renderColumnFooter,
+            renderEmptyColumn,
+            onCardAdd,
+            dragType,
+            onCardDragStart: handleCardDragStart,
+            onCardDragOver: handleCardDragOver,
+            onCardDrop: handleCardDrop,
+            onDragEnd: handleDragEnd,
+            onDragLeave: handleDragLeave,
+            onColumnDragStart: handleColumnDragStart,
+            onColumnDragOver: handleColumnDragOver,
+            onColumnDrop: handleColumnDrop,
+            onCardTouchStart: handleTouchStart,
+            onCardTouchMove: handleTouchMove,
+            onCardTouchEnd: handleTouchEnd,
+            onColumnTouchStart: handleColumnTouchStart,
+            onColumnTouchMove: handleColumnTouchMove,
+            onColumnTouchEnd: handleColumnTouchEnd,
+            onCardKeyDown: handleCardKeyDown,
+            dragStateId,
+            kbDragStateId
+          },
+          String(col.id)
+        );
+      })
+    }
+  );
+};
+var TaskBoard_default = TaskBoard;
+
+export { TaskBoard, TaskBoard_default };

package/dist/chunk-QFYS5QIZ.mjs

@@ -0,0 +1,142 @@
+import { Modal } from './chunk-JNLX47UL.mjs';
+import { ImageCropper } from './chunk-2EOXY2LP.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, uploadPlusIconPath } from '@expcat/tigercat-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var CropUpload = ({
+  accept = "image/*",
+  disabled = false,
+  maxSize,
+  cropperProps,
+  modalTitle = "\u88C1\u526A\u56FE\u7247",
+  modalWidth = 520,
+  className,
+  children,
+  onCropComplete,
+  onError
+}) => {
+  const fileInputRef = useRef(null);
+  const cropperRef = useRef(null);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [imageSrc, setImageSrc] = useState("");
+  const [cropping, setCropping] = useState(false);
+  const handleTriggerClick = useCallback(() => {
+    if (disabled) return;
+    fileInputRef.current?.click();
+  }, [disabled]);
+  const handleFileChange = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (maxSize && file.size > maxSize) {
+        onError?.(new Error(`File size exceeds maximum of ${maxSize} bytes`));
+        e.target.value = "";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        setImageSrc(ev.target?.result);
+        setModalVisible(true);
+      };
+      reader.readAsDataURL(file);
+      e.target.value = "";
+    },
+    [maxSize, onError]
+  );
+  const handleConfirm = useCallback(async () => {
+    if (!cropperRef.current) return;
+    setCropping(true);
+    try {
+      const result = await cropperRef.current.getCropResult();
+      onCropComplete?.(result);
+      setModalVisible(false);
+    } catch (err) {
+      onError?.(err);
+    } finally {
+      setCropping(false);
+    }
+  }, [onCropComplete, onError]);
+  const handleCancel = useCallback(() => {
+    setModalVisible(false);
+    setImageSrc("");
+  }, []);
+  const triggerClasses = useMemo(
+    () => classNames(disabled ? cropUploadTriggerDisabledClasses : cropUploadTriggerClasses, className),
+    [disabled, className]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTriggerClick();
+      }
+    },
+    [handleTriggerClick]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "tiger-crop-upload inline-block", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: triggerClasses,
+        onClick: handleTriggerClick,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": "Select image to crop and upload",
+        "aria-disabled": disabled ? "true" : void 0,
+        onKeyDown: handleKeyDown,
+        children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-5 h-5",
+              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: "2",
+                  d: uploadPlusIconPath
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "\u9009\u62E9\u56FE\u7247" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: modalVisible,
+        size: "lg",
+        title: modalTitle,
+        closable: true,
+        maskClosable: false,
+        onClose: handleCancel,
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "\u53D6\u6D88" }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, loading: cropping, children: "\u786E\u8BA4\u88C1\u526A" })
+        ] }),
+        children: imageSrc && /* @__PURE__ */ jsx(ImageCropper, { ref: cropperRef, src: imageSrc, ...cropperProps })
+      }
+    )
+  ] });
+};
+
+export { CropUpload };