@mieweb/ui 0.8.0 → 0.9.0

package/dist/{chunk-26DPQUSB.cjs → chunk-5BVFVXHN.cjs}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkMYFZYUPR_cjs = require('./chunk-MYFZYUPR.cjs');
 var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
-var React2 = require('react');
+var chunkAOHJILLU_cjs = require('./chunk-AOHJILLU.cjs');
+var React3 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var reactDom = require('react-dom');
 var classVarianceAuthority = require('class-variance-authority');
+var reactDom = require('react-dom');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 function getFileType(mimeType) {
   if (mimeType.startsWith("image/")) return "image";
@@ -71,6 +71,7 @@ function AttachmentPreviewItem({
   attachment,
   onRemove,
   onRetry,
+  disabled = false,
   className
 }) {
   const { file, previewUrl, type, state, progress } = attachment;
@@ -90,7 +91,20 @@ function AttachmentPreviewItem({
       ),
       children: [
         (isImage || isVideo) && previewUrl ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-20 w-20", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          isVideo ? /* @__PURE__ */ jsxRuntime.jsx(
+            "video",
+            {
+              src: previewUrl,
+              "aria-label": file.name,
+              muted: true,
+              playsInline: true,
+              preload: "metadata",
+              className: chunkS5RVSXDV_cjs.cn(
+                "h-full w-full object-cover",
+                (isUploading || isFailed) && "opacity-50"
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
             "img",
             {
               src: previewUrl,
@@ -133,7 +147,7 @@ function AttachmentPreviewItem({
                 )
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 max-w-full truncate px-1 text-xs text-neutral-500", children: file.name.split(".").pop()?.toUpperCase() })
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-white", children: [
@@ -197,7 +211,8 @@ function AttachmentPreviewItem({
             {
               type: "button",
               onClick: onRetry,
-              className: "mt-1 text-xs text-white underline hover:no-underline",
+              disabled,
+              className: "mt-1 text-xs text-white underline hover:no-underline disabled:no-underline disabled:opacity-50",
               children: "Retry"
             }
           )
@@ -207,13 +222,15 @@ function AttachmentPreviewItem({
           {
             type: "button",
             onClick: onRemove,
+            disabled,
             className: chunkS5RVSXDV_cjs.cn(
-              "absolute -top-1 -right-1 z-10",
+              "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"
+              "transition-opacity",
+              "disabled:cursor-not-allowed disabled:group-hover:opacity-0"
             ),
             "aria-label": `Remove ${file.name}`,
             children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -241,7 +258,7 @@ function AttachmentPreviewItem({
           "div",
           {
             className: chunkS5RVSXDV_cjs.cn(
-              "absolute right-0 bottom-0 left-0",
+              "absolute start-0 end-0 bottom-0",
               "bg-black/70 px-1 py-0.5",
               "opacity-0 group-hover:opacity-100",
               "transition-opacity"
@@ -254,7 +271,7 @@ function AttachmentPreviewItem({
   );
 }
 AttachmentPreviewItem.displayName = "AttachmentPreviewItem";
-var AttachmentPicker = React2__namespace.forwardRef(
+var AttachmentPicker = React3__namespace.forwardRef(
   ({
     onFilesSelected,
     acceptedTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
@@ -267,8 +284,8 @@ var AttachmentPicker = React2__namespace.forwardRef(
     className,
     children
   }, ref) => {
-    const inputRef = React2__namespace.useRef(null);
-    React2__namespace.useImperativeHandle(ref, () => inputRef.current);
+    const inputRef = React3__namespace.useRef(null);
+    React3__namespace.useImperativeHandle(ref, () => inputRef.current);
     const handleClick = () => {
       inputRef.current?.click();
     };
@@ -357,11 +374,12 @@ function DragDropZone({
   maxFiles = 10,
   disabled = false,
   onError,
+  overlayLabel = "Drop files here",
   children,
   className
 }) {
-  const [isDragging, setIsDragging] = React2__namespace.useState(false);
-  const dragCounterRef = React2__namespace.useRef(0);
+  const [isDragging, setIsDragging] = React3__namespace.useState(false);
+  const dragCounterRef = React3__namespace.useRef(0);
   const handleDragEnter = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -448,7 +466,7 @@ function DragDropZone({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-primary-700 dark:text-primary-300 mt-2 text-sm font-medium", children: "Drop files here" })
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-primary-700 dark:text-primary-300 mt-2 text-sm font-medium", children: overlayLabel })
             ] })
           }
         )
@@ -463,7 +481,7 @@ function CameraButton({
   disabled = false,
   className
 }) {
-  const inputRef = React2__namespace.useRef(null);
+  const inputRef = React3__namespace.useRef(null);
   const handleClick = () => {
     inputRef.current?.click();
   };
@@ -548,6 +566,162 @@ function activeMentionQuery(value, caret) {
   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] = React3__namespace.useState(null);
+  const [highlight, setHighlight] = React3__namespace.useState(0);
+  const listId = React3__namespace.useId();
+  const optionId = React3__namespace.useCallback(
+    (index) => `${listId}-option-${index}`,
+    [listId]
+  );
+  const suggestions = React3__namespace.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
+  } = chunkAOHJILLU_cjs.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 = React3__namespace.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 reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: option.label }),
+                option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ms-1 text-xs text-neutral-400", children: option.description })
+              ] }),
+              option.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-400", children: option.meta })
+            ]
+          }
+        ) }, option.id))
+      }
+    ),
+    document.body
+  );
+}
+MentionMenu.displayName = "MentionMenu";
 function isFileAccepted(file, accepted) {
   if (!accepted || accepted.length === 0) return true;
   const mime = file.type;
@@ -619,7 +793,7 @@ var sendButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SendButton = React2__namespace.forwardRef(
+var SendButton = React3__namespace.forwardRef(
   ({ className, variant, canSend, isLoading, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -684,7 +858,7 @@ var SendButton = React2__namespace.forwardRef(
   }
 );
 SendButton.displayName = "SendButton";
-var MessageComposer = React2__namespace.forwardRef(
+var MessageComposer = React3__namespace.forwardRef(
   ({
     onSend,
     onTypingStart,
@@ -710,11 +884,11 @@ var MessageComposer = React2__namespace.forwardRef(
     mentionOptions,
     className
   }, ref) => {
-    const textareaRef = React2__namespace.useRef(null);
-    const [internalContent, setInternalContent] = React2__namespace.useState("");
+    const textareaRef = React3__namespace.useRef(null);
+    const [internalContent, setInternalContent] = React3__namespace.useState("");
     const isControlled = controlledValue !== void 0;
     const content = isControlled ? controlledValue : internalContent;
-    const setContent = React2__namespace.useCallback(
+    const setContent = React3__namespace.useCallback(
       (val) => {
         if (isControlled) {
           const newVal = typeof val === "function" ? val(controlledValue) : val;
@@ -725,20 +899,20 @@ var MessageComposer = React2__namespace.forwardRef(
       },
       [isControlled, controlledValue, onValueChange]
     );
-    const [attachments, setAttachments] = React2__namespace.useState(
+    const [attachments, setAttachments] = React3__namespace.useState(
       []
     );
-    const [isTyping, setIsTyping] = React2__namespace.useState(false);
-    const typingTimeoutRef = React2__namespace.useRef(null);
-    React2__namespace.useImperativeHandle(ref, () => textareaRef.current);
-    React2__namespace.useEffect(() => {
+    const [isTyping, setIsTyping] = React3__namespace.useState(false);
+    const typingTimeoutRef = React3__namespace.useRef(null);
+    React3__namespace.useImperativeHandle(ref, () => textareaRef.current);
+    React3__namespace.useEffect(() => {
       const textarea = textareaRef.current;
       if (textarea) {
         textarea.style.height = "auto";
         textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
       }
     }, [content]);
-    React2__namespace.useEffect(() => {
+    React3__namespace.useEffect(() => {
       if (content.length > 0 && !isTyping) {
         setIsTyping(true);
         onTypingStart?.();
@@ -758,63 +932,22 @@ var MessageComposer = React2__namespace.forwardRef(
         }
       };
     }, [content, isTyping, onTypingStart, onTypingStop]);
-    React2__namespace.useEffect(() => {
+    React3__namespace.useEffect(() => {
       if (autoFocus) {
         textareaRef.current?.focus();
       }
     }, [autoFocus]);
-    React2__namespace.useEffect(() => {
+    React3__namespace.useEffect(() => {
       if (replyTo) {
         textareaRef.current?.focus();
       }
     }, [replyTo]);
-    const mentionsEnabled = !!mentionOptions && mentionOptions.length > 0;
-    const [mention, setMention] = React2__namespace.useState(null);
-    const [mentionHighlight, setMentionHighlight] = React2__namespace.useState(0);
-    const mentionListId = React2__namespace.useId();
-    const mentionOptionId = (i) => `${mentionListId}-option-${i}`;
-    const mentionSuggestions = React2__namespace.useMemo(() => {
-      if (!mention || !mentionOptions) return [];
-      const q = mention.query.toLowerCase();
-      return mentionOptions.filter((o) => o.label.toLowerCase().includes(q));
-    }, [mention, mentionOptions]);
-    const mentionMenuOpen = mentionsEnabled && mention !== null && mentionSuggestions.length > 0;
-    const {
-      anchorRef: mentionAnchorRef,
-      floatingRef: mentionFloatingRef,
-      style: mentionStyle
-    } = chunkMYFZYUPR_cjs.useAnchoredPosition({
-      open: mentionMenuOpen,
-      placement: "top-start",
-      maxHeight: 224
+    const mention = useMentionAutocomplete({
+      options: mentionOptions,
+      value: content,
+      setValue: setContent,
+      textareaRef
     });
-    const clampedMentionHighlight = mentionMenuOpen ? Math.min(mentionHighlight, mentionSuggestions.length - 1) : -1;
-    const activeMentionOptionId = mentionMenuOpen ? mentionOptionId(clampedMentionHighlight) : void 0;
-    const syncMention = React2__namespace.useCallback(
-      (value, caret) => {
-        if (!mentionsEnabled) return;
-        setMention(activeMentionQuery(value, caret));
-        setMentionHighlight(0);
-      },
-      [mentionsEnabled]
-    );
-    const insertMention = (option) => {
-      if (!mention) return;
-      const insertValue = option.value ?? option.label.split(" ")[0];
-      const before = content.slice(0, mention.start);
-      const after = content.slice(mention.start + 1 + mention.query.length);
-      const insert = `@${insertValue} `;
-      setContent(before + insert + after);
-      setMention(null);
-      const caret = before.length + insert.length;
-      requestAnimationFrame(() => {
-        const el = textareaRef.current;
-        if (el) {
-          el.focus();
-          el.setSelectionRange(caret, caret);
-        }
-      });
-    };
     const canSend = (content.trim().length > 0 || attachments.length > 0) && content.length <= maxLength && !disabled && !isSending;
     const handleSubmit = async (event) => {
       event.preventDefault();
@@ -836,31 +969,7 @@ var MessageComposer = React2__namespace.forwardRef(
       }
     };
     const handleKeyDown = (event) => {
-      if (mentionMenuOpen) {
-        if (event.key === "ArrowDown") {
-          event.preventDefault();
-          setMentionHighlight((h) => (h + 1) % mentionSuggestions.length);
-          return;
-        }
-        if (event.key === "ArrowUp") {
-          event.preventDefault();
-          setMentionHighlight(
-            (h) => (h - 1 + mentionSuggestions.length) % mentionSuggestions.length
-          );
-          return;
-        }
-        if (event.key === "Enter" || event.key === "Tab") {
-          event.preventDefault();
-          const chosen = mentionSuggestions[mentionHighlight] ?? mentionSuggestions[0];
-          if (chosen) insertMention(chosen);
-          return;
-        }
-        if (event.key === "Escape") {
-          event.preventDefault();
-          setMention(null);
-          return;
-        }
-      }
+      if (mention.handleKeyDown(event)) return;
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
         if (canSend) {
@@ -906,7 +1015,7 @@ var MessageComposer = React2__namespace.forwardRef(
         return prev.filter((a) => a.id !== attachmentId);
       });
     };
-    React2__namespace.useEffect(() => {
+    React3__namespace.useEffect(() => {
       const currentAttachments = attachments;
       return () => {
         currentAttachments.forEach((a) => {
@@ -940,7 +1049,7 @@ var MessageComposer = React2__namespace.forwardRef(
                   className: chunkS5RVSXDV_cjs.cn(
                     "flex items-center gap-2 px-4 py-2",
                     "bg-neutral-50 dark:bg-neutral-800/50",
-                    "border-primary-500 border-l-4"
+                    "border-primary-500 border-s-4"
                   ),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -1037,49 +1146,9 @@ var MessageComposer = React2__namespace.forwardRef(
                       {
                         "data-slot": "composer-input-wrapper",
                         className: "relative flex-1",
-                        ref: mentionAnchorRef,
+                        ref: mention.anchorRef,
                         children: [
-                          mentionMenuOpen && reactDom.createPortal(
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "ul",
-                              {
-                                ref: mentionFloatingRef,
-                                style: mentionStyle,
-                                id: mentionListId,
-                                role: "listbox",
-                                "aria-label": "Mention",
-                                "data-slot": "composer-mention-list",
-                                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: mentionSuggestions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                                  "button",
-                                  {
-                                    type: "button",
-                                    id: mentionOptionId(i),
-                                    role: "option",
-                                    "aria-selected": i === clampedMentionHighlight,
-                                    onMouseDown: (e) => {
-                                      e.preventDefault();
-                                      insertMention(option);
-                                    },
-                                    onMouseEnter: () => setMentionHighlight(i),
-                                    className: chunkS5RVSXDV_cjs.cn(
-                                      "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
-                                      i === clampedMentionHighlight ? "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__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: option.label }),
-                                        option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-xs text-neutral-400", children: option.description })
-                                      ] }),
-                                      option.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-400", children: option.meta })
-                                    ]
-                                  }
-                                ) }, option.id))
-                              }
-                            ),
-                            document.body
-                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(MentionMenu, { mention }),
                           /* @__PURE__ */ jsxRuntime.jsx(
                             "textarea",
                             {
@@ -1088,14 +1157,14 @@ var MessageComposer = React2__namespace.forwardRef(
                               value: content,
                               onChange: (e) => {
                                 setContent(e.target.value);
-                                syncMention(
+                                mention.sync(
                                   e.target.value,
                                   e.target.selectionStart ?? e.target.value.length
                                 );
                               },
                               onClick: (e) => {
                                 const el = e.currentTarget;
-                                syncMention(el.value, el.selectionStart ?? el.value.length);
+                                mention.sync(el.value, el.selectionStart ?? el.value.length);
                               },
                               onKeyDown: handleKeyDown,
                               onPaste: handlePaste,
@@ -1104,7 +1173,7 @@ var MessageComposer = React2__namespace.forwardRef(
                               rows: 1,
                               className: chunkS5RVSXDV_cjs.cn(
                                 "w-full resize-none rounded-2xl py-2.5",
-                                inputTrailing ? "pr-10 pl-4" : "px-4",
+                                inputTrailing ? "ps-4 pe-10" : "px-4",
                                 "bg-neutral-100 dark:bg-neutral-800",
                                 "text-neutral-900 dark:text-neutral-100",
                                 "placeholder:text-neutral-400 dark:placeholder:text-neutral-500",
@@ -1115,18 +1184,14 @@ var MessageComposer = React2__namespace.forwardRef(
                               ),
                               "aria-label": "Message",
                               "aria-describedby": showCharacterCount ? "char-count" : void 0,
-                              ...mentionsEnabled ? {
-                                "aria-controls": mentionMenuOpen ? mentionListId : void 0,
-                                "aria-activedescendant": activeMentionOptionId,
-                                "aria-autocomplete": "list"
-                              } : {}
+                              ...mention.inputProps
                             }
                           ),
                           inputTrailing && /* @__PURE__ */ jsxRuntime.jsx(
                             "div",
                             {
                               "data-slot": "composer-input-trailing",
-                              className: "pointer-events-none absolute top-0 right-1 flex h-[44px] items-center [&>*]:pointer-events-auto",
+                              className: "pointer-events-none absolute end-1 top-0 flex h-[44px] items-center [&>*]:pointer-events-auto",
                               children: inputTrailing
                             }
                           ),
@@ -1135,7 +1200,7 @@ var MessageComposer = React2__namespace.forwardRef(
                             {
                               "data-slot": "composer-char-count",
                               id: "char-count",
-                              className: "absolute right-3 bottom-1.5",
+                              className: "absolute end-3 bottom-1.5",
                               children: /* @__PURE__ */ jsxRuntime.jsx(CharacterCounter, { current: content.length, max: maxLength })
                             }
                           )
@@ -1167,11 +1232,13 @@ exports.AttachmentPreviewItem = AttachmentPreviewItem;
 exports.CameraButton = CameraButton;
 exports.CharacterCounter = CharacterCounter;
 exports.DragDropZone = DragDropZone;
+exports.MentionMenu = MentionMenu;
 exports.MessageComposer = MessageComposer;
 exports.SendButton = SendButton;
 exports.generateAttachmentId = generateAttachmentId;
 exports.getFileType = getFileType;
 exports.sendButtonVariants = sendButtonVariants;
+exports.useMentionAutocomplete = useMentionAutocomplete;
 exports.validateFile = validateFile;
-//# sourceMappingURL=chunk-26DPQUSB.cjs.map
-//# sourceMappingURL=chunk-26DPQUSB.cjs.map
+//# sourceMappingURL=chunk-5BVFVXHN.cjs.map
+//# sourceMappingURL=chunk-5BVFVXHN.cjs.map