@mieweb/ui 0.8.0 → 0.9.0

package/dist/{chunk-EPQPUFS6.cjs → chunk-NYJIXR4Y.cjs}

@@ -29,7 +29,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var alertVariants = classVarianceAuthority.cva(
   [
     "relative w-full rounded-lg border p-4",
-    "[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current",
+    "[&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-current",
     "[&>svg+div]:translate-y-[-3px]"
   ],
   {
@@ -66,8 +66,8 @@ var Alert = React__namespace.forwardRef(
         "data-slot": "alert",
         className: chunkS5RVSXDV_cjs.cn(
           alertVariants({ variant }),
-          React__namespace.isValidElement(icon) && "pl-11",
-          dismissible && "pr-10",
+          React__namespace.isValidElement(icon) && "ps-11",
+          dismissible && "pe-10",
           className
         ),
         ...props,
@@ -81,7 +81,7 @@ var Alert = React__namespace.forwardRef(
               "data-slot": "alert-dismiss",
               onClick: onDismiss,
               className: chunkS5RVSXDV_cjs.cn(
-                "absolute top-2 right-2 rounded-md p-1",
+                "absolute end-2 top-2 rounded-md p-1",
                 "opacity-70 hover:opacity-100",
                 "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
                 "transition-opacity"
@@ -122,5 +122,5 @@ exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
 exports.alertVariants = alertVariants;
-//# sourceMappingURL=chunk-EPQPUFS6.cjs.map
-//# sourceMappingURL=chunk-EPQPUFS6.cjs.map
+//# sourceMappingURL=chunk-NYJIXR4Y.cjs.map
+//# sourceMappingURL=chunk-NYJIXR4Y.cjs.map

package/dist/chunk-NYJIXR4Y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/Alert.tsx"],"names":["cva","React","jsxs","cn","jsx","X"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAM,aAAA,GAAgBA,0BAAA;AAAA,EACpB;AAAA,IACE,uCAAA;AAAA,IACA,qEAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,6CAAA;AAAA,QACT,IAAA,EAAM,qHAAA;AAAA,QACN,OAAA,EACE,yGAAA;AAAA,QACF,OAAA,EACE,+GAAA;AAAA,QACF,MAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AA2BA,IAAM,KAAA,GAAcC,gBAAA,CAAA,UAAA;AAAA,EAClB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,GAAe,eAAA;AAAA,IACf,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,OAAA;AAAA,QACV,SAAA,EAAWC,oBAAA;AAAA,UACT,aAAA,CAAc,EAAE,OAAA,EAAS,CAAA;AAAA,UACnBF,gBAAA,CAAA,cAAA,CAAe,IAAI,CAAA,IAAK,OAAA;AAAA,UAC9B,WAAA,IAAe,OAAA;AAAA,UACf;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAMA,gBAAA,CAAA,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA;AAAA,0BAC/BG,cAAA,CAAC,SAAK,QAAA,EAAS,CAAA;AAAA,UACd,WAAA,oBACCA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,WAAA,EAAU,eAAA;AAAA,cACV,OAAA,EAAS,SAAA;AAAA,cACT,SAAA,EAAWD,oBAAA;AAAA,gBACT,qCAAA;AAAA,gBACA,8BAAA;AAAA,gBACA,qGAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,YAAA,EAAY,YAAA;AAAA,cAEZ,QAAA,kBAAAC,cAAA,CAACC,aAAA,EAAA,EAAE,IAAA,EAAM,EAAA,EAAI,eAAY,MAAA,EAAO;AAAA;AAAA;AAClC;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;AAKpB,IAAM,UAAA,GAAmBJ,4BAGvB,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACpCG,cAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAA,EAAU,aAAA;AAAA,IACV,SAAA,EAAWD,oBAAA,CAAG,gDAAA,EAAkD,SAAS,CAAA;AAAA,IACxE,GAAG,KAAA;AAAA,IAEH;AAAA;AACH,CACD;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;AAKzB,IAAM,gBAAA,GAAyBF,4BAG7B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1BG,cAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAA,EAAU,mBAAA;AAAA,IACV,SAAA,EAAWD,oBAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AAED,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"chunk-NYJIXR4Y.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\nconst alertVariants = cva(\n  [\n    'relative w-full rounded-lg border p-4',\n    '[&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-current',\n    '[&>svg+div]:translate-y-[-3px]',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground border-border',\n        info: 'bg-primary-50 text-primary-900 border-primary-200 dark:bg-primary-950 dark:text-primary-100 dark:border-primary-800',\n        success:\n          'bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800',\n        warning:\n          'bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800',\n        danger:\n          'bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {\n  /** Icon to display in the alert */\n  icon?: React.ReactElement | null;\n  /** Whether the alert can be dismissed */\n  dismissible?: boolean;\n  /** Callback when the alert is dismissed */\n  onDismiss?: () => void;\n  /** Accessible label for the dismiss button */\n  dismissLabel?: string;\n}\n\n/**\n * An alert component for displaying important messages.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\">\n *   <AlertTitle>Success!</AlertTitle>\n *   <AlertDescription>Your changes have been saved.</AlertDescription>\n * </Alert>\n * ```\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant,\n      icon,\n      dismissible,\n      onDismiss,\n      dismissLabel = 'Dismiss alert',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-slot=\"alert\"\n        className={cn(\n          alertVariants({ variant }),\n          React.isValidElement(icon) && 'ps-11',\n          dismissible && 'pe-10',\n          className\n        )}\n        {...props}\n      >\n        {React.isValidElement(icon) && icon}\n        <div>{children}</div>\n        {dismissible && (\n          <button\n            type=\"button\"\n            data-slot=\"alert-dismiss\"\n            onClick={onDismiss}\n            className={cn(\n              'absolute end-2 top-2 rounded-md p-1',\n              'opacity-70 hover:opacity-100',\n              'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',\n              'transition-opacity'\n            )}\n            aria-label={dismissLabel}\n          >\n            <X size={16} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n\n/**\n * Title for an Alert component.\n */\nconst AlertTitle = React.forwardRef<\n  globalThis.HTMLHeadingElement,\n  React.HTMLAttributes<globalThis.HTMLHeadingElement>\n>(({ className, children, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn('mb-1 leading-none font-semibold tracking-tight', className)}\n    {...props}\n  >\n    {children}\n  </h5>\n));\n\nAlertTitle.displayName = 'AlertTitle';\n\n/**\n * Description text for an Alert component.\n */\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn('text-sm [&_p]:leading-relaxed', className)}\n    {...props}\n  />\n));\n\nAlertDescription.displayName = 'AlertDescription';\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };\n"]}

package/dist/{chunk-EKRT7K2K.js → chunk-O6GJ4IYS.js}

@@ -1,9 +1,9 @@
-import { useAnchoredPosition } from './chunk-BOOJDRJO.js';
 import { cn } from './chunk-TQONQSJO.js';
-import * as React2 from 'react';
+import { useAnchoredPosition } from './chunk-WSNMQQ4P.js';
+import * as React3 from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createPortal } from 'react-dom';
 import { cva } from 'class-variance-authority';
+import { createPortal } from 'react-dom';
 
 function getFileType(mimeType) {
   if (mimeType.startsWith("image/")) return "image";
@@ -49,6 +49,7 @@ function AttachmentPreviewItem({
   attachment,
   onRemove,
   onRetry,
+  disabled = false,
   className
 }) {
   const { file, previewUrl, type, state, progress } = attachment;
@@ -68,7 +69,20 @@ function AttachmentPreviewItem({
       ),
       children: [
         (isImage || isVideo) && previewUrl ? /* @__PURE__ */ jsxs("div", { className: "relative h-20 w-20", children: [
-          /* @__PURE__ */ jsx(
+          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,
@@ -111,7 +125,7 @@ function AttachmentPreviewItem({
                 )
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "mt-1 max-w-full truncate px-1 text-xs text-neutral-500", children: file.name.split(".").pop()?.toUpperCase() })
+            /* @__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: [
@@ -175,7 +189,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"
             }
           )
@@ -185,13 +200,15 @@ function AttachmentPreviewItem({
           {
             type: "button",
             onClick: onRemove,
+            disabled,
             className: 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__ */ jsx(
@@ -219,7 +236,7 @@ function AttachmentPreviewItem({
           "div",
           {
             className: 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"
@@ -232,7 +249,7 @@ function AttachmentPreviewItem({
   );
 }
 AttachmentPreviewItem.displayName = "AttachmentPreviewItem";
-var AttachmentPicker = React2.forwardRef(
+var AttachmentPicker = React3.forwardRef(
   ({
     onFilesSelected,
     acceptedTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
@@ -245,8 +262,8 @@ var AttachmentPicker = React2.forwardRef(
     className,
     children
   }, ref) => {
-    const inputRef = React2.useRef(null);
-    React2.useImperativeHandle(ref, () => inputRef.current);
+    const inputRef = React3.useRef(null);
+    React3.useImperativeHandle(ref, () => inputRef.current);
     const handleClick = () => {
       inputRef.current?.click();
     };
@@ -335,11 +352,12 @@ function DragDropZone({
   maxFiles = 10,
   disabled = false,
   onError,
+  overlayLabel = "Drop files here",
   children,
   className
 }) {
-  const [isDragging, setIsDragging] = React2.useState(false);
-  const dragCounterRef = React2.useRef(0);
+  const [isDragging, setIsDragging] = React3.useState(false);
+  const dragCounterRef = React3.useRef(0);
   const handleDragEnter = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -426,7 +444,7 @@ function DragDropZone({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx("p", { className: "text-primary-700 dark:text-primary-300 mt-2 text-sm font-medium", children: "Drop files here" })
+              /* @__PURE__ */ jsx("p", { className: "text-primary-700 dark:text-primary-300 mt-2 text-sm font-medium", children: overlayLabel })
             ] })
           }
         )
@@ -441,7 +459,7 @@ function CameraButton({
   disabled = false,
   className
 }) {
-  const inputRef = React2.useRef(null);
+  const inputRef = React3.useRef(null);
   const handleClick = () => {
     inputRef.current?.click();
   };
@@ -526,6 +544,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.useState(null);
+  const [highlight, setHighlight] = React3.useState(0);
+  const listId = React3.useId();
+  const optionId = React3.useCallback(
+    (index) => `${listId}-option-${index}`,
+    [listId]
+  );
+  const suggestions = React3.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 = React3.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";
 function isFileAccepted(file, accepted) {
   if (!accepted || accepted.length === 0) return true;
   const mime = file.type;
@@ -597,7 +771,7 @@ var sendButtonVariants = cva(
     }
   }
 );
-var SendButton = React2.forwardRef(
+var SendButton = React3.forwardRef(
   ({ className, variant, canSend, isLoading, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
@@ -662,7 +836,7 @@ var SendButton = React2.forwardRef(
   }
 );
 SendButton.displayName = "SendButton";
-var MessageComposer = React2.forwardRef(
+var MessageComposer = React3.forwardRef(
   ({
     onSend,
     onTypingStart,
@@ -688,11 +862,11 @@ var MessageComposer = React2.forwardRef(
     mentionOptions,
     className
   }, ref) => {
-    const textareaRef = React2.useRef(null);
-    const [internalContent, setInternalContent] = React2.useState("");
+    const textareaRef = React3.useRef(null);
+    const [internalContent, setInternalContent] = React3.useState("");
     const isControlled = controlledValue !== void 0;
     const content = isControlled ? controlledValue : internalContent;
-    const setContent = React2.useCallback(
+    const setContent = React3.useCallback(
       (val) => {
         if (isControlled) {
           const newVal = typeof val === "function" ? val(controlledValue) : val;
@@ -703,20 +877,20 @@ var MessageComposer = React2.forwardRef(
       },
       [isControlled, controlledValue, onValueChange]
     );
-    const [attachments, setAttachments] = React2.useState(
+    const [attachments, setAttachments] = React3.useState(
       []
     );
-    const [isTyping, setIsTyping] = React2.useState(false);
-    const typingTimeoutRef = React2.useRef(null);
-    React2.useImperativeHandle(ref, () => textareaRef.current);
-    React2.useEffect(() => {
+    const [isTyping, setIsTyping] = React3.useState(false);
+    const typingTimeoutRef = React3.useRef(null);
+    React3.useImperativeHandle(ref, () => textareaRef.current);
+    React3.useEffect(() => {
       const textarea = textareaRef.current;
       if (textarea) {
         textarea.style.height = "auto";
         textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
       }
     }, [content]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (content.length > 0 && !isTyping) {
         setIsTyping(true);
         onTypingStart?.();
@@ -736,63 +910,22 @@ var MessageComposer = React2.forwardRef(
         }
       };
     }, [content, isTyping, onTypingStart, onTypingStop]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (autoFocus) {
         textareaRef.current?.focus();
       }
     }, [autoFocus]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (replyTo) {
         textareaRef.current?.focus();
       }
     }, [replyTo]);
-    const mentionsEnabled = !!mentionOptions && mentionOptions.length > 0;
-    const [mention, setMention] = React2.useState(null);
-    const [mentionHighlight, setMentionHighlight] = React2.useState(0);
-    const mentionListId = React2.useId();
-    const mentionOptionId = (i) => `${mentionListId}-option-${i}`;
-    const mentionSuggestions = React2.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
-    } = 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.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();
@@ -814,31 +947,7 @@ var MessageComposer = React2.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) {
@@ -884,7 +993,7 @@ var MessageComposer = React2.forwardRef(
         return prev.filter((a) => a.id !== attachmentId);
       });
     };
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       const currentAttachments = attachments;
       return () => {
         currentAttachments.forEach((a) => {
@@ -918,7 +1027,7 @@ var MessageComposer = React2.forwardRef(
                   className: 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__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -1015,49 +1124,9 @@ var MessageComposer = React2.forwardRef(
                       {
                         "data-slot": "composer-input-wrapper",
                         className: "relative flex-1",
-                        ref: mentionAnchorRef,
+                        ref: mention.anchorRef,
                         children: [
-                          mentionMenuOpen && createPortal(
-                            /* @__PURE__ */ 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__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                                  "button",
-                                  {
-                                    type: "button",
-                                    id: mentionOptionId(i),
-                                    role: "option",
-                                    "aria-selected": i === clampedMentionHighlight,
-                                    onMouseDown: (e) => {
-                                      e.preventDefault();
-                                      insertMention(option);
-                                    },
-                                    onMouseEnter: () => setMentionHighlight(i),
-                                    className: 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__ */ 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: "ml-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
-                          ),
+                          /* @__PURE__ */ jsx(MentionMenu, { mention }),
                           /* @__PURE__ */ jsx(
                             "textarea",
                             {
@@ -1066,14 +1135,14 @@ var MessageComposer = React2.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,
@@ -1082,7 +1151,7 @@ var MessageComposer = React2.forwardRef(
                               rows: 1,
                               className: 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",
@@ -1093,18 +1162,14 @@ var MessageComposer = React2.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__ */ 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
                             }
                           ),
@@ -1113,7 +1178,7 @@ var MessageComposer = React2.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__ */ jsx(CharacterCounter, { current: content.length, max: maxLength })
                             }
                           )
@@ -1140,6 +1205,6 @@ var MessageComposer = React2.forwardRef(
 );
 MessageComposer.displayName = "MessageComposer";
 
-export { AttachmentPicker, AttachmentPreviewItem, CameraButton, CharacterCounter, DragDropZone, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, validateFile };
-//# sourceMappingURL=chunk-EKRT7K2K.js.map
-//# sourceMappingURL=chunk-EKRT7K2K.js.map
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, CharacterCounter, DragDropZone, MentionMenu, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, useMentionAutocomplete, validateFile };
+//# sourceMappingURL=chunk-O6GJ4IYS.js.map
+//# sourceMappingURL=chunk-O6GJ4IYS.js.map