@mieweb/ui 0.8.0 → 0.9.0-dev.1

package/dist/chunk-IF3X2WZP.js

@@ -0,0 +1,705 @@
+import { cn } from './chunk-TQONQSJO.js';
+import { useAnchoredPosition } from './chunk-WSNMQQ4P.js';
+import * as React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+function getFileType(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (mimeType.includes("pdf") || mimeType.includes("document") || mimeType.includes("text")) {
+    return "document";
+  }
+  return "file";
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function validateFile(file, acceptedTypes, maxSize) {
+  if (acceptedTypes && acceptedTypes.length > 0) {
+    const isAccepted = acceptedTypes.some((type) => {
+      if (type.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(type.toLowerCase());
+      }
+      if (type.endsWith("/*")) {
+        return file.type.startsWith(type.replace("/*", "/"));
+      }
+      return file.type === type;
+    });
+    if (!isAccepted) {
+      return { valid: false, error: "File type not supported" };
+    }
+  }
+  if (maxSize && file.size > maxSize) {
+    return {
+      valid: false,
+      error: `File too large (max ${formatFileSize(maxSize)})`
+    };
+  }
+  return { valid: true };
+}
+function generateAttachmentId() {
+  return `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function AttachmentPreviewItem({
+  attachment,
+  onRemove,
+  onRetry,
+  disabled = false,
+  className
+}) {
+  const { file, previewUrl, type, state, progress } = attachment;
+  const isImage = type === "image";
+  const isVideo = type === "video";
+  const isUploading = state === "uploading";
+  const isFailed = state === "failed";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative overflow-hidden rounded-lg",
+        "bg-neutral-100 dark:bg-neutral-800",
+        "border border-neutral-200 dark:border-neutral-700",
+        isFailed && "border-red-500",
+        className
+      ),
+      children: [
+        (isImage || isVideo) && previewUrl ? /* @__PURE__ */ jsxs("div", { className: "relative h-20 w-20", children: [
+          isVideo ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              src: previewUrl,
+              "aria-label": file.name,
+              muted: true,
+              playsInline: true,
+              preload: "metadata",
+              className: cn(
+                "h-full w-full object-cover",
+                (isUploading || isFailed) && "opacity-50"
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: previewUrl,
+              alt: file.name,
+              className: cn(
+                "h-full w-full object-cover",
+                (isUploading || isFailed) && "opacity-50"
+              )
+            }
+          ),
+          isVideo && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "h-6 w-6 text-white drop-shadow",
+              fill: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+            }
+          ) })
+        ] }) : (
+          /* File preview */
+          /* @__PURE__ */ jsxs("div", { className: "flex h-20 w-20 flex-col items-center justify-center p-2", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "h-8 w-8 text-neutral-500",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "mt-1 max-w-full truncate px-1 text-xs text-neutral-600 dark:text-neutral-400", children: file.name.split(".").pop()?.toUpperCase() })
+          ] })
+        ),
+        isUploading && progress !== void 0 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "text-center text-white", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "mx-auto h-6 w-6 animate-spin",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "mt-1 text-xs", children: [
+            progress,
+            "%"
+          ] })
+        ] }) }),
+        isFailed && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "mx-auto h-6 w-6 text-red-400",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                }
+              )
+            }
+          ),
+          onRetry && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              disabled,
+              className: "mt-1 text-xs text-white underline hover:no-underline disabled:no-underline disabled:opacity-50",
+              children: "Retry"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            disabled,
+            className: cn(
+              "absolute -end-1 -top-1 z-10",
+              "rounded-full p-1",
+              "bg-neutral-900 text-white",
+              "opacity-0 group-hover:opacity-100",
+              "focus:ring-primary-500 focus:opacity-100 focus:ring-2 focus:outline-none",
+              "transition-opacity",
+              "disabled:cursor-not-allowed disabled:group-hover:opacity-0"
+            ),
+            "aria-label": `Remove ${file.name}`,
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "h-3 w-3",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute start-0 end-0 bottom-0",
+              "bg-black/70 px-1 py-0.5",
+              "opacity-0 group-hover:opacity-100",
+              "transition-opacity"
+            ),
+            children: /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-white", children: file.name })
+          }
+        )
+      ]
+    }
+  );
+}
+AttachmentPreviewItem.displayName = "AttachmentPreviewItem";
+var AttachmentPicker = React.forwardRef(
+  ({
+    onFilesSelected,
+    acceptedTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
+    maxFileSize = 25 * 1024 * 1024,
+    // 25MB
+    maxFiles = 10,
+    multiple = true,
+    disabled = false,
+    onError,
+    className,
+    children
+  }, ref) => {
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const handleClick = () => {
+      inputRef.current?.click();
+    };
+    const handleChange = (event) => {
+      const files = Array.from(event.target.files || []);
+      if (files.length === 0) return;
+      const validFiles = [];
+      for (const file of files.slice(0, maxFiles)) {
+        const validation = validateFile(file, acceptedTypes, maxFileSize);
+        if (validation.valid) {
+          validFiles.push(file);
+        } else if (onError) {
+          onError(`${file.name}: ${validation.error}`);
+        }
+      }
+      if (files.length > maxFiles && onError) {
+        onError(`Maximum ${maxFiles} files allowed`);
+      }
+      if (validFiles.length > 0) {
+        onFilesSelected(validFiles);
+      }
+      event.target.value = "";
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept: acceptedTypes.join(","),
+          multiple,
+          onChange: handleChange,
+          disabled,
+          className: "sr-only",
+          "aria-label": "Select files to attach"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClick,
+          disabled,
+          "data-slot": "attachment-picker-button",
+          className: cn(
+            "inline-flex items-center justify-center",
+            "rounded-full p-2",
+            "text-neutral-500 hover:text-neutral-700",
+            "dark:text-neutral-400 dark:hover:text-neutral-200",
+            "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+            "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "transition-colors",
+            className
+          ),
+          "aria-label": "Attach files",
+          children: children || /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "h-5 w-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+AttachmentPicker.displayName = "AttachmentPicker";
+function DragDropZone({
+  onFilesDropped,
+  acceptedTypes,
+  maxFileSize,
+  maxFiles = 10,
+  disabled = false,
+  onError,
+  overlayLabel = "Drop files here",
+  children,
+  className
+}) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragCounterRef = React.useRef(0);
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    dragCounterRef.current++;
+    if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragging(false);
+    }
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    setIsDragging(false);
+    dragCounterRef.current = 0;
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length === 0) return;
+    const validFiles = [];
+    for (const file of files.slice(0, maxFiles)) {
+      const validation = validateFile(file, acceptedTypes, maxFileSize);
+      if (validation.valid) {
+        validFiles.push(file);
+      } else if (onError) {
+        onError(`${file.name}: ${validation.error}`);
+      }
+    }
+    if (files.length > maxFiles && onError) {
+      onError(`Maximum ${maxFiles} files allowed`);
+    }
+    if (validFiles.length > 0) {
+      onFilesDropped(validFiles);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      className: cn("relative", className),
+      children: [
+        children,
+        isDragging && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 z-50",
+              "flex items-center justify-center",
+              "bg-primary-50/90 dark:bg-primary-900/90",
+              "border-primary-500 border-2 border-dashed",
+              "rounded-lg"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: "text-primary-800 mx-auto h-12 w-12",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-primary-700 dark:text-primary-300 mt-2 text-sm font-medium", children: overlayLabel })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+DragDropZone.displayName = "DragDropZone";
+function CameraButton({
+  onCapture,
+  useFrontCamera = false,
+  disabled = false,
+  className
+}) {
+  const inputRef = React.useRef(null);
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+  const handleChange = (event) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onCapture(file);
+    }
+    event.target.value = "";
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        capture: useFrontCamera ? "user" : "environment",
+        onChange: handleChange,
+        disabled,
+        className: "sr-only",
+        "aria-label": "Take a photo"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled,
+        className: cn(
+          "inline-flex items-center justify-center",
+          "rounded-full p-2",
+          "text-neutral-500 hover:text-neutral-700",
+          "dark:text-neutral-400 dark:hover:text-neutral-200",
+          "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+          "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "transition-colors",
+          className
+        ),
+        "aria-label": "Take a photo",
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "h-5 w-5",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+CameraButton.displayName = "CameraButton";
+function activeMentionQuery(value, caret) {
+  const upToCaret = value.slice(0, caret);
+  const match = /(^|\s)@([^\s@]*)$/.exec(upToCaret);
+  if (!match) return null;
+  const query = match[2];
+  return { query, start: caret - query.length - 1 };
+}
+function useMentionAutocomplete({
+  options,
+  value,
+  setValue,
+  textareaRef
+}) {
+  const enabled = !!options && options.length > 0;
+  const [mention, setMention] = React.useState(null);
+  const [highlight, setHighlight] = React.useState(0);
+  const listId = React.useId();
+  const optionId = React.useCallback(
+    (index) => `${listId}-option-${index}`,
+    [listId]
+  );
+  const suggestions = React.useMemo(() => {
+    if (!mention || !options) return [];
+    const q = mention.query.toLowerCase();
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [mention, options]);
+  const menuOpen = enabled && mention !== null && suggestions.length > 0;
+  const {
+    anchorRef,
+    floatingRef,
+    style: menuStyle
+  } = useAnchoredPosition({
+    open: menuOpen,
+    placement: "top-start",
+    maxHeight: 224
+  });
+  const clampedHighlight = menuOpen ? Math.min(highlight, suggestions.length - 1) : -1;
+  const activeOptionId = menuOpen ? optionId(clampedHighlight) : void 0;
+  const sync = React.useCallback(
+    (nextValue, caret) => {
+      if (!enabled) return;
+      setMention(activeMentionQuery(nextValue, caret));
+      setHighlight(0);
+    },
+    [enabled]
+  );
+  const insert = (option) => {
+    if (!mention) return;
+    const insertValue = option.value ?? option.label.split(" ")[0];
+    const before = value.slice(0, mention.start);
+    const after = value.slice(mention.start + 1 + mention.query.length);
+    const insertText = `@${insertValue} `;
+    setValue(before + insertText + after);
+    setMention(null);
+    const caret = before.length + insertText.length;
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (el) {
+        el.focus();
+        el.setSelectionRange(caret, caret);
+      }
+    });
+  };
+  const handleKeyDown = (event) => {
+    if (!menuOpen) return false;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setHighlight(
+        (h) => (Math.min(h, suggestions.length - 1) + 1) % suggestions.length
+      );
+      return true;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setHighlight(
+        (h) => (Math.min(h, suggestions.length - 1) - 1 + suggestions.length) % suggestions.length
+      );
+      return true;
+    }
+    if (event.key === "Enter" || event.key === "Tab") {
+      event.preventDefault();
+      const chosen = suggestions[clampedHighlight];
+      if (chosen) insert(chosen);
+      return true;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setMention(null);
+      return true;
+    }
+    return false;
+  };
+  const inputProps = enabled ? {
+    "aria-controls": menuOpen ? listId : void 0,
+    "aria-activedescendant": activeOptionId,
+    "aria-autocomplete": "list"
+  } : {};
+  return {
+    enabled,
+    menuOpen,
+    suggestions,
+    highlight: clampedHighlight,
+    listId,
+    optionId,
+    anchorRef,
+    floatingRef,
+    menuStyle,
+    sync,
+    insert,
+    setHighlight,
+    handleKeyDown,
+    inputProps
+  };
+}
+function MentionMenu({
+  mention,
+  label = "Mention",
+  dataSlot = "composer-mention-list"
+}) {
+  if (!mention.menuOpen) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: mention.floatingRef,
+        style: mention.menuStyle,
+        id: mention.listId,
+        role: "listbox",
+        "aria-label": label,
+        "data-slot": dataSlot,
+        className: "w-64 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800",
+        children: mention.suggestions.map((option, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: mention.optionId(i),
+            role: "option",
+            "aria-selected": i === mention.highlight,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              mention.insert(option);
+            },
+            onMouseEnter: () => mention.setHighlight(i),
+            className: cn(
+              "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
+              i === mention.highlight ? "bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100" : "text-neutral-700 dark:text-neutral-200"
+            ),
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label }),
+                option.description && /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs text-neutral-400", children: option.description })
+              ] }),
+              option.meta && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: option.meta })
+            ]
+          }
+        ) }, option.id))
+      }
+    ),
+    document.body
+  );
+}
+MentionMenu.displayName = "MentionMenu";
+
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, DragDropZone, MentionMenu, generateAttachmentId, getFileType, useMentionAutocomplete, validateFile };
+//# sourceMappingURL=chunk-IF3X2WZP.js.map
+//# sourceMappingURL=chunk-IF3X2WZP.js.map