@mieweb/ui 0.9.0-dev.4 → 0.9.0-dev.6

package/dist/chunk-IF3X2WZP.js

@@ -1,705 +0,0 @@
-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