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

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

@@ -2,9 +2,8 @@
 
 var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
 var chunkAOHJILLU_cjs = require('./chunk-AOHJILLU.cjs');
-var React3 = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var classVarianceAuthority = require('class-variance-authority');
 var reactDom = require('react-dom');
 
 function _interopNamespace(e) {
@@ -25,7 +24,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function getFileType(mimeType) {
   if (mimeType.startsWith("image/")) return "image";
@@ -271,7 +270,7 @@ function AttachmentPreviewItem({
   );
 }
 AttachmentPreviewItem.displayName = "AttachmentPreviewItem";
-var AttachmentPicker = React3__namespace.forwardRef(
+var AttachmentPicker = React__namespace.forwardRef(
   ({
     onFilesSelected,
     acceptedTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
@@ -284,8 +283,8 @@ var AttachmentPicker = React3__namespace.forwardRef(
     className,
     children
   }, ref) => {
-    const inputRef = React3__namespace.useRef(null);
-    React3__namespace.useImperativeHandle(ref, () => inputRef.current);
+    const inputRef = React__namespace.useRef(null);
+    React__namespace.useImperativeHandle(ref, () => inputRef.current);
     const handleClick = () => {
       inputRef.current?.click();
     };
@@ -378,8 +377,8 @@ function DragDropZone({
   children,
   className
 }) {
-  const [isDragging, setIsDragging] = React3__namespace.useState(false);
-  const dragCounterRef = React3__namespace.useRef(0);
+  const [isDragging, setIsDragging] = React__namespace.useState(false);
+  const dragCounterRef = React__namespace.useRef(0);
   const handleDragEnter = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -481,7 +480,7 @@ function CameraButton({
   disabled = false,
   className
 }) {
-  const inputRef = React3__namespace.useRef(null);
+  const inputRef = React__namespace.useRef(null);
   const handleClick = () => {
     inputRef.current?.click();
   };
@@ -573,14 +572,14 @@ function useMentionAutocomplete({
   textareaRef
 }) {
   const enabled = !!options && options.length > 0;
-  const [mention, setMention] = React3__namespace.useState(null);
-  const [highlight, setHighlight] = React3__namespace.useState(0);
-  const listId = React3__namespace.useId();
-  const optionId = React3__namespace.useCallback(
+  const [mention, setMention] = React__namespace.useState(null);
+  const [highlight, setHighlight] = React__namespace.useState(0);
+  const listId = React__namespace.useId();
+  const optionId = React__namespace.useCallback(
     (index) => `${listId}-option-${index}`,
     [listId]
   );
-  const suggestions = React3__namespace.useMemo(() => {
+  const suggestions = React__namespace.useMemo(() => {
     if (!mention || !options) return [];
     const q = mention.query.toLowerCase();
     return options.filter((o) => o.label.toLowerCase().includes(q));
@@ -597,7 +596,7 @@ function useMentionAutocomplete({
   });
   const clampedHighlight = menuOpen ? Math.min(highlight, suggestions.length - 1) : -1;
   const activeOptionId = menuOpen ? optionId(clampedHighlight) : void 0;
-  const sync = React3__namespace.useCallback(
+  const sync = React__namespace.useCallback(
     (nextValue, caret) => {
       if (!enabled) return;
       setMention(activeMentionQuery(nextValue, caret));
@@ -722,523 +721,15 @@ 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__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: chunkS5RVSXDV_cjs.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 = classVarianceAuthority.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__namespace.forwardRef(
-  ({ className, variant, canSend, isLoading, disabled, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ref,
-        type: "submit",
-        disabled: disabled || !canSend || isLoading,
-        "data-slot": "composer-send-button",
-        className: chunkS5RVSXDV_cjs.cn(sendButtonVariants({ variant, canSend }), className),
-        "aria-label": isLoading ? "Sending message" : "Send message",
-        ...props,
-        children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            "aria-hidden": "true",
-            className: "h-5 w-5 animate-spin",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  className: "opacity-25",
-                  cx: "12",
-                  cy: "12",
-                  r: "10",
-                  stroke: "currentColor",
-                  strokeWidth: "4"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  className: "opacity-75",
-                  fill: "currentColor",
-                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                }
-              )
-            ]
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            "aria-hidden": "true",
-            className: "h-5 w-5",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            children: /* @__PURE__ */ jsxRuntime.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__namespace.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__namespace.useRef(null);
-    const [internalContent, setInternalContent] = React3__namespace.useState("");
-    const isControlled = controlledValue !== void 0;
-    const content = isControlled ? controlledValue : internalContent;
-    const setContent = React3__namespace.useCallback(
-      (val) => {
-        if (isControlled) {
-          const newVal = typeof val === "function" ? val(controlledValue) : val;
-          onValueChange?.(newVal);
-        } else {
-          setInternalContent(val);
-        }
-      },
-      [isControlled, controlledValue, onValueChange]
-    );
-    const [attachments, setAttachments] = React3__namespace.useState(
-      []
-    );
-    const [isTyping, setIsTyping] = React3__namespace.useState(false);
-    const typingTimeoutRef = React3__namespace.useRef(null);
-    React3__namespace.useImperativeHandle(ref, () => textareaRef.current);
-    React3__namespace.useEffect(() => {
-      const textarea = textareaRef.current;
-      if (textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
-      }
-    }, [content]);
-    React3__namespace.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__namespace.useEffect(() => {
-      if (autoFocus) {
-        textareaRef.current?.focus();
-      }
-    }, [autoFocus]);
-    React3__namespace.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__namespace.useEffect(() => {
-      const currentAttachments = attachments;
-      return () => {
-        currentAttachments.forEach((a) => {
-          if (a.previewUrl) {
-            URL.revokeObjectURL(a.previewUrl);
-          }
-        });
-      };
-    }, [attachments]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      DragDropZone,
-      {
-        onFilesDropped: handleFilesSelected,
-        acceptedTypes: acceptedFileTypes,
-        maxFileSize,
-        maxFiles: maxAttachments - attachments.length,
-        disabled: disabled || attachments.length >= maxAttachments,
-        onError,
-        className: chunkS5RVSXDV_cjs.cn("w-full", className),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "form",
-          {
-            onSubmit: handleSubmit,
-            "data-slot": "message-composer",
-            className: "w-full",
-            children: [
-              replyTo && /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  "data-slot": "composer-reply-preview",
-                  className: chunkS5RVSXDV_cjs.cn(
-                    "flex items-center gap-2 px-4 py-2",
-                    "bg-neutral-50 dark:bg-neutral-800/50",
-                    "border-primary-500 border-s-4"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-primary-800 dark:text-primary-400 text-xs font-medium", children: [
-                        "Replying to ",
-                        replyTo.senderName
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm text-neutral-600 dark:text-neutral-300", children: replyTo.content })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: onCancelReply,
-                        className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
-                          "svg",
-                          {
-                            "aria-hidden": "true",
-                            className: "h-4 w-4",
-                            fill: "none",
-                            viewBox: "0 0 24 24",
-                            stroke: "currentColor",
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              "path",
-                              {
-                                strokeLinecap: "round",
-                                strokeLinejoin: "round",
-                                strokeWidth: 2,
-                                d: "M6 18L18 6M6 6l12 12"
-                              }
-                            )
-                          }
-                        )
-                      }
-                    )
-                  ]
-                }
-              ),
-              attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  "data-slot": "composer-attachments",
-                  className: chunkS5RVSXDV_cjs.cn(
-                    "flex flex-wrap gap-2 p-3",
-                    "border-t border-neutral-200 dark:border-neutral-700"
-                  ),
-                  children: attachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(
-                    AttachmentPreviewItem,
-                    {
-                      attachment,
-                      onRemove: () => handleRemoveAttachment(attachment.id)
-                    },
-                    attachment.id
-                  ))
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  "data-slot": "composer-input-area",
-                  className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
-                      AttachmentPicker,
-                      {
-                        onFilesSelected: handleFilesSelected,
-                        acceptedTypes: acceptedFileTypes,
-                        maxFileSize,
-                        maxFiles: maxAttachments - attachments.length,
-                        disabled: disabled || attachments.length >= maxAttachments,
-                        onError
-                      }
-                    ),
-                    showCameraButton && /* @__PURE__ */ jsxRuntime.jsx(
-                      CameraButton,
-                      {
-                        onCapture: (file) => handleFilesSelected([file]),
-                        disabled: disabled || attachments.length >= maxAttachments
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        "data-slot": "composer-input-wrapper",
-                        className: "relative flex-1",
-                        ref: mention.anchorRef,
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(MentionMenu, { mention }),
-                          /* @__PURE__ */ jsxRuntime.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: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                            "div",
-                            {
-                              "data-slot": "composer-char-count",
-                              id: "char-count",
-                              className: "absolute end-3 bottom-1.5",
-                              children: /* @__PURE__ */ jsxRuntime.jsx(CharacterCounter, { current: content.length, max: maxLength })
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      SendButton,
-                      {
-                        canSend,
-                        isLoading: isSending,
-                        disabled
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-MessageComposer.displayName = "MessageComposer";
 
 exports.AttachmentPicker = AttachmentPicker;
 exports.AttachmentPreviewItem = AttachmentPreviewItem;
 exports.CameraButton = CameraButton;
-exports.CharacterCounter = CharacterCounter;
 exports.DragDropZone = DragDropZone;
 exports.MentionMenu = MentionMenu;
-exports.MessageComposer = MessageComposer;
-exports.SendButton = SendButton;
 exports.generateAttachmentId = generateAttachmentId;
 exports.getFileType = getFileType;
-exports.sendButtonVariants = sendButtonVariants;
 exports.useMentionAutocomplete = useMentionAutocomplete;
 exports.validateFile = validateFile;
-//# sourceMappingURL=chunk-5BVFVXHN.cjs.map
-//# sourceMappingURL=chunk-5BVFVXHN.cjs.map
+//# sourceMappingURL=chunk-5VXRKOPR.cjs.map
+//# sourceMappingURL=chunk-5VXRKOPR.cjs.map