@mieweb/ui 0.8.0 → 0.9.0-dev.1

package/dist/chunk-EKRT7K2K.js

@@ -1,1145 +0,0 @@
-import { useAnchoredPosition } from './chunk-BOOJDRJO.js';
-import { cn } from './chunk-TQONQSJO.js';
-import * as React2 from 'react';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createPortal } from 'react-dom';
-import { cva } from 'class-variance-authority';
-
-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,
-  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: [
-          /* @__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-500", 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,
-              className: "mt-1 text-xs text-white underline hover:no-underline",
-              children: "Retry"
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onRemove,
-            className: cn(
-              "absolute -top-1 -right-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"
-            ),
-            "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 right-0 bottom-0 left-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 = React2.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 = React2.useRef(null);
-    React2.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,
-  children,
-  className
-}) {
-  const [isDragging, setIsDragging] = React2.useState(false);
-  const dragCounterRef = React2.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: "Drop files here" })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
-DragDropZone.displayName = "DragDropZone";
-function CameraButton({
-  onCapture,
-  useFrontCamera = false,
-  disabled = false,
-  className
-}) {
-  const inputRef = React2.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 isFileAccepted(file, accepted) {
-  if (!accepted || accepted.length === 0) return true;
-  const mime = file.type;
-  const name = file.name.toLowerCase();
-  return accepted.some((token) => {
-    if (token.startsWith(".")) return name.endsWith(token.toLowerCase());
-    if (token.endsWith("/*")) return mime.startsWith(token.slice(0, -1));
-    if (token.includes("/")) return mime === token;
-    return false;
-  });
-}
-function CharacterCounter({
-  current,
-  max,
-  showWarningAt = 0.9,
-  className
-}) {
-  const percentage = current / max;
-  const isWarning = percentage >= showWarningAt && percentage < 1;
-  const isOver = current > max;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: cn(
-        "text-xs tabular-nums",
-        isOver ? "font-medium text-red-700 dark:text-red-400" : isWarning ? "text-amber-700 dark:text-amber-400" : "text-neutral-600 dark:text-neutral-400",
-        className
-      ),
-      "aria-live": "polite",
-      "aria-label": `${current} of ${max} characters`,
-      children: [
-        current,
-        "/",
-        max
-      ]
-    }
-  );
-}
-CharacterCounter.displayName = "CharacterCounter";
-var sendButtonVariants = cva(
-  [
-    "inline-flex items-center justify-center",
-    "rounded-full p-3 self-start",
-    "transition-all duration-200",
-    "focus:outline-none focus:ring-2 focus:ring-primary-500",
-    "disabled:opacity-50 disabled:cursor-not-allowed"
-  ],
-  {
-    variants: {
-      variant: {
-        primary: [
-          "bg-primary-800 text-white",
-          "hover:bg-primary-900",
-          "active:scale-95"
-        ],
-        subtle: [
-          "bg-transparent text-primary-800",
-          "hover:bg-primary-50 dark:hover:bg-primary-900/20"
-        ]
-      },
-      canSend: {
-        true: "",
-        false: "opacity-50 cursor-not-allowed"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      canSend: false
-    }
-  }
-);
-var SendButton = React2.forwardRef(
-  ({ className, variant, canSend, isLoading, disabled, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        type: "submit",
-        disabled: disabled || !canSend || isLoading,
-        "data-slot": "composer-send-button",
-        className: cn(sendButtonVariants({ variant, canSend }), className),
-        "aria-label": isLoading ? "Sending message" : "Send message",
-        ...props,
-        children: isLoading ? /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            "aria-hidden": "true",
-            className: "h-5 w-5 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__ */ 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: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-SendButton.displayName = "SendButton";
-var MessageComposer = React2.forwardRef(
-  ({
-    onSend,
-    onTypingStart,
-    onTypingStop,
-    value: controlledValue,
-    onValueChange,
-    placeholder = "Type a message...",
-    maxLength = 1600,
-    showCharacterCount = false,
-    disabled = false,
-    isSending = false,
-    showAttachmentPicker = true,
-    showCameraButton = false,
-    acceptedFileTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
-    maxFileSize = 25 * 1024 * 1024,
-    maxAttachments = 10,
-    onError,
-    autoFocus = false,
-    replyTo = null,
-    onCancelReply,
-    variant = "default",
-    inputTrailing,
-    mentionOptions,
-    className
-  }, ref) => {
-    const textareaRef = React2.useRef(null);
-    const [internalContent, setInternalContent] = React2.useState("");
-    const isControlled = controlledValue !== void 0;
-    const content = isControlled ? controlledValue : internalContent;
-    const setContent = React2.useCallback(
-      (val) => {
-        if (isControlled) {
-          const newVal = typeof val === "function" ? val(controlledValue) : val;
-          onValueChange?.(newVal);
-        } else {
-          setInternalContent(val);
-        }
-      },
-      [isControlled, controlledValue, onValueChange]
-    );
-    const [attachments, setAttachments] = React2.useState(
-      []
-    );
-    const [isTyping, setIsTyping] = React2.useState(false);
-    const typingTimeoutRef = React2.useRef(null);
-    React2.useImperativeHandle(ref, () => textareaRef.current);
-    React2.useEffect(() => {
-      const textarea = textareaRef.current;
-      if (textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
-      }
-    }, [content]);
-    React2.useEffect(() => {
-      if (content.length > 0 && !isTyping) {
-        setIsTyping(true);
-        onTypingStart?.();
-      }
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current);
-      }
-      typingTimeoutRef.current = setTimeout(() => {
-        if (isTyping) {
-          setIsTyping(false);
-          onTypingStop?.();
-        }
-      }, 2e3);
-      return () => {
-        if (typingTimeoutRef.current) {
-          clearTimeout(typingTimeoutRef.current);
-        }
-      };
-    }, [content, isTyping, onTypingStart, onTypingStop]);
-    React2.useEffect(() => {
-      if (autoFocus) {
-        textareaRef.current?.focus();
-      }
-    }, [autoFocus]);
-    React2.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 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();
-      if (!canSend) return;
-      const message = {
-        content: content.trim(),
-        attachments: attachments.map((a) => a.file),
-        replyToId: replyTo?.id
-      };
-      setContent("");
-      setAttachments([]);
-      setIsTyping(false);
-      onTypingStop?.();
-      try {
-        await onSend(message);
-      } catch {
-        setContent(message.content);
-        onError?.("Failed to send message");
-      }
-    };
-    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 (event.key === "Enter" && !event.shiftKey) {
-        event.preventDefault();
-        if (canSend) {
-          handleSubmit(event);
-        }
-      }
-    };
-    const handleFilesSelected = (files) => {
-      const remainingSlots = maxAttachments - attachments.length;
-      const filesToAdd = files.slice(0, remainingSlots);
-      if (files.length > remainingSlots) {
-        onError?.(`Maximum ${maxAttachments} attachments allowed`);
-      }
-      const newAttachments = filesToAdd.map((file) => {
-        const type = getFileType(file.type);
-        let previewUrl;
-        if (type === "image" || type === "video") {
-          previewUrl = URL.createObjectURL(file);
-        }
-        return {
-          id: generateAttachmentId(),
-          file,
-          previewUrl,
-          type,
-          state: "pending"
-        };
-      });
-      setAttachments((prev) => [...prev, ...newAttachments]);
-    };
-    const handlePaste = (event) => {
-      if (!showAttachmentPicker || disabled) return;
-      const pasted = Array.from(event.clipboardData.items).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((f) => f !== null).filter((f) => isFileAccepted(f, acceptedFileTypes));
-      if (pasted.length === 0) return;
-      event.preventDefault();
-      handleFilesSelected(pasted);
-    };
-    const handleRemoveAttachment = (attachmentId) => {
-      setAttachments((prev) => {
-        const attachment = prev.find((a) => a.id === attachmentId);
-        if (attachment?.previewUrl) {
-          URL.revokeObjectURL(attachment.previewUrl);
-        }
-        return prev.filter((a) => a.id !== attachmentId);
-      });
-    };
-    React2.useEffect(() => {
-      const currentAttachments = attachments;
-      return () => {
-        currentAttachments.forEach((a) => {
-          if (a.previewUrl) {
-            URL.revokeObjectURL(a.previewUrl);
-          }
-        });
-      };
-    }, [attachments]);
-    return /* @__PURE__ */ jsx(
-      DragDropZone,
-      {
-        onFilesDropped: handleFilesSelected,
-        acceptedTypes: acceptedFileTypes,
-        maxFileSize,
-        maxFiles: maxAttachments - attachments.length,
-        disabled: disabled || attachments.length >= maxAttachments,
-        onError,
-        className: cn("w-full", className),
-        children: /* @__PURE__ */ jsxs(
-          "form",
-          {
-            onSubmit: handleSubmit,
-            "data-slot": "message-composer",
-            className: "w-full",
-            children: [
-              replyTo && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-slot": "composer-reply-preview",
-                  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"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsxs("span", { className: "text-primary-800 dark:text-primary-400 text-xs font-medium", children: [
-                        "Replying to ",
-                        replyTo.senderName
-                      ] }),
-                      /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-neutral-600 dark:text-neutral-300", children: replyTo.content })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: onCancelReply,
-                        className: cn(
-                          "shrink-0 rounded p-1",
-                          "text-neutral-500 hover:text-neutral-700",
-                          "dark:text-neutral-400 dark:hover:text-neutral-200",
-                          "focus:ring-primary-500 focus:ring-2 focus:outline-none"
-                        ),
-                        "aria-label": "Cancel reply",
-                        children: /* @__PURE__ */ jsx(
-                          "svg",
-                          {
-                            "aria-hidden": "true",
-                            className: "h-4 w-4",
-                            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"
-                              }
-                            )
-                          }
-                        )
-                      }
-                    )
-                  ]
-                }
-              ),
-              attachments.length > 0 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-slot": "composer-attachments",
-                  className: cn(
-                    "flex flex-wrap gap-2 p-3",
-                    "border-t border-neutral-200 dark:border-neutral-700"
-                  ),
-                  children: attachments.map((attachment) => /* @__PURE__ */ jsx(
-                    AttachmentPreviewItem,
-                    {
-                      attachment,
-                      onRemove: () => handleRemoveAttachment(attachment.id)
-                    },
-                    attachment.id
-                  ))
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "data-slot": "composer-input-area",
-                  className: cn(
-                    "flex items-center gap-2 p-3",
-                    "bg-white dark:bg-neutral-900",
-                    variant === "default" && "border-t border-neutral-200 dark:border-neutral-700"
-                  ),
-                  children: [
-                    showAttachmentPicker && /* @__PURE__ */ jsx(
-                      AttachmentPicker,
-                      {
-                        onFilesSelected: handleFilesSelected,
-                        acceptedTypes: acceptedFileTypes,
-                        maxFileSize,
-                        maxFiles: maxAttachments - attachments.length,
-                        disabled: disabled || attachments.length >= maxAttachments,
-                        onError
-                      }
-                    ),
-                    showCameraButton && /* @__PURE__ */ jsx(
-                      CameraButton,
-                      {
-                        onCapture: (file) => handleFilesSelected([file]),
-                        disabled: disabled || attachments.length >= maxAttachments
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        "data-slot": "composer-input-wrapper",
-                        className: "relative flex-1",
-                        ref: mentionAnchorRef,
-                        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(
-                            "textarea",
-                            {
-                              ref: textareaRef,
-                              "data-slot": "composer-input",
-                              value: content,
-                              onChange: (e) => {
-                                setContent(e.target.value);
-                                syncMention(
-                                  e.target.value,
-                                  e.target.selectionStart ?? e.target.value.length
-                                );
-                              },
-                              onClick: (e) => {
-                                const el = e.currentTarget;
-                                syncMention(el.value, el.selectionStart ?? el.value.length);
-                              },
-                              onKeyDown: handleKeyDown,
-                              onPaste: handlePaste,
-                              placeholder,
-                              disabled: disabled || isSending,
-                              rows: 1,
-                              className: cn(
-                                "w-full resize-none rounded-2xl py-2.5",
-                                inputTrailing ? "pr-10 pl-4" : "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",
-                                "focus:ring-primary-500 focus:ring-2 focus:outline-none",
-                                "disabled:cursor-not-allowed disabled:opacity-50",
-                                "transition-colors",
-                                "max-h-[150px]"
-                              ),
-                              "aria-label": "Message",
-                              "aria-describedby": showCharacterCount ? "char-count" : void 0,
-                              ...mentionsEnabled ? {
-                                "aria-controls": mentionMenuOpen ? mentionListId : void 0,
-                                "aria-activedescendant": activeMentionOptionId,
-                                "aria-autocomplete": "list"
-                              } : {}
-                            }
-                          ),
-                          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",
-                              children: inputTrailing
-                            }
-                          ),
-                          showCharacterCount && /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              "data-slot": "composer-char-count",
-                              id: "char-count",
-                              className: "absolute right-3 bottom-1.5",
-                              children: /* @__PURE__ */ jsx(CharacterCounter, { current: content.length, max: maxLength })
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      SendButton,
-                      {
-                        canSend,
-                        isLoading: isSending,
-                        disabled
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-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