@mieweb/ui 0.9.0-dev.0 → 0.9.0-dev.2

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

@@ -1,8 +1,7 @@
 import { cn } from './chunk-TQONQSJO.js';
 import { useAnchoredPosition } from './chunk-WSNMQQ4P.js';
-import * as React3 from 'react';
+import * as React from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { cva } from 'class-variance-authority';
 import { createPortal } from 'react-dom';
 
 function getFileType(mimeType) {
@@ -249,7 +248,7 @@ function AttachmentPreviewItem({
   );
 }
 AttachmentPreviewItem.displayName = "AttachmentPreviewItem";
-var AttachmentPicker = React3.forwardRef(
+var AttachmentPicker = React.forwardRef(
   ({
     onFilesSelected,
     acceptedTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
@@ -262,8 +261,8 @@ var AttachmentPicker = React3.forwardRef(
     className,
     children
   }, ref) => {
-    const inputRef = React3.useRef(null);
-    React3.useImperativeHandle(ref, () => inputRef.current);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
     const handleClick = () => {
       inputRef.current?.click();
     };
@@ -356,8 +355,8 @@ function DragDropZone({
   children,
   className
 }) {
-  const [isDragging, setIsDragging] = React3.useState(false);
-  const dragCounterRef = React3.useRef(0);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragCounterRef = React.useRef(0);
   const handleDragEnter = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -459,7 +458,7 @@ function CameraButton({
   disabled = false,
   className
 }) {
-  const inputRef = React3.useRef(null);
+  const inputRef = React.useRef(null);
   const handleClick = () => {
     inputRef.current?.click();
   };
@@ -551,14 +550,14 @@ function useMentionAutocomplete({
   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(
+  const [mention, setMention] = React.useState(null);
+  const [highlight, setHighlight] = React.useState(0);
+  const listId = React.useId();
+  const optionId = React.useCallback(
     (index) => `${listId}-option-${index}`,
     [listId]
   );
-  const suggestions = React3.useMemo(() => {
+  const suggestions = React.useMemo(() => {
     if (!mention || !options) return [];
     const q = mention.query.toLowerCase();
     return options.filter((o) => o.label.toLowerCase().includes(q));
@@ -575,7 +574,7 @@ function useMentionAutocomplete({
   });
   const clampedHighlight = menuOpen ? Math.min(highlight, suggestions.length - 1) : -1;
   const activeOptionId = menuOpen ? optionId(clampedHighlight) : void 0;
-  const sync = React3.useCallback(
+  const sync = React.useCallback(
     (nextValue, caret) => {
       if (!enabled) return;
       setMention(activeMentionQuery(nextValue, caret));
@@ -700,511 +699,7 @@ function MentionMenu({
   );
 }
 MentionMenu.displayName = "MentionMenu";
-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 = React3.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 = React3.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 = React3.useRef(null);
-    const [internalContent, setInternalContent] = React3.useState("");
-    const isControlled = controlledValue !== void 0;
-    const content = isControlled ? controlledValue : internalContent;
-    const setContent = React3.useCallback(
-      (val) => {
-        if (isControlled) {
-          const newVal = typeof val === "function" ? val(controlledValue) : val;
-          onValueChange?.(newVal);
-        } else {
-          setInternalContent(val);
-        }
-      },
-      [isControlled, controlledValue, onValueChange]
-    );
-    const [attachments, setAttachments] = React3.useState(
-      []
-    );
-    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]);
-    React3.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]);
-    React3.useEffect(() => {
-      if (autoFocus) {
-        textareaRef.current?.focus();
-      }
-    }, [autoFocus]);
-    React3.useEffect(() => {
-      if (replyTo) {
-        textareaRef.current?.focus();
-      }
-    }, [replyTo]);
-    const mention = useMentionAutocomplete({
-      options: mentionOptions,
-      value: content,
-      setValue: setContent,
-      textareaRef
-    });
-    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 (mention.handleKeyDown(event)) 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);
-      });
-    };
-    React3.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-s-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: mention.anchorRef,
-                        children: [
-                          /* @__PURE__ */ jsx(MentionMenu, { mention }),
-                          /* @__PURE__ */ jsx(
-                            "textarea",
-                            {
-                              ref: textareaRef,
-                              "data-slot": "composer-input",
-                              value: content,
-                              onChange: (e) => {
-                                setContent(e.target.value);
-                                mention.sync(
-                                  e.target.value,
-                                  e.target.selectionStart ?? e.target.value.length
-                                );
-                              },
-                              onClick: (e) => {
-                                const el = e.currentTarget;
-                                mention.sync(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 ? "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",
-                                "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,
-                              ...mention.inputProps
-                            }
-                          ),
-                          inputTrailing && /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              "data-slot": "composer-input-trailing",
-                              className: "pointer-events-none absolute end-1 top-0 flex h-[44px] items-center [&>*]:pointer-events-auto",
-                              children: inputTrailing
-                            }
-                          ),
-                          showCharacterCount && /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              "data-slot": "composer-char-count",
-                              id: "char-count",
-                              className: "absolute end-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, MentionMenu, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, useMentionAutocomplete, validateFile };
-//# sourceMappingURL=chunk-O6GJ4IYS.js.map
-//# sourceMappingURL=chunk-O6GJ4IYS.js.map
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, DragDropZone, MentionMenu, generateAttachmentId, getFileType, useMentionAutocomplete, validateFile };
+//# sourceMappingURL=chunk-IF3X2WZP.js.map
+//# sourceMappingURL=chunk-IF3X2WZP.js.map