@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-JKYB5QAP.js

@@ -0,0 +1,1070 @@
+import { Textarea } from './chunk-U6EOAIPK.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-YP2ATSXP.js';
+import { Button } from './chunk-ONQCNOLU.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Paperclip, Smile, Send, MoreHorizontal, Edit2, Trash2, CornerDownRight, X, MessageCircle } from 'lucide-react';
+import { useId, useRef, useState, useMemo, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/workflow/CommentSystem/CommentSystem.types.ts
+var defaultReactions = [
+  { emoji: "\u{1F44D}", label: "Curtir", shortcode: "thumbsup" },
+  { emoji: "\u2764\uFE0F", label: "Amei", shortcode: "heart" },
+  { emoji: "\u{1F604}", label: "Haha", shortcode: "smile" },
+  { emoji: "\u{1F389}", label: "Celebrar", shortcode: "tada" },
+  { emoji: "\u{1F914}", label: "Pensativo", shortcode: "thinking" },
+  { emoji: "\u{1F440}", label: "Olhando", shortcode: "eyes" }
+];
+var commentSystemVariants = cva(
+  "relative w-full transition-all duration-300",
+  {
+    variants: {
+      variant: {
+        default: "",
+        threaded: "",
+        inline: "border rounded-lg shadow-sm",
+        compact: ""
+      },
+      layout: {
+        list: "flex flex-col gap-4",
+        chat: "flex flex-col gap-2",
+        timeline: "flex flex-col"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      layout: "list"
+    }
+  }
+);
+var commentItemVariants = cva(
+  "relative transition-all duration-200",
+  {
+    variants: {
+      layout: {
+        list: "rounded-lg border bg-card p-4",
+        chat: "rounded-2xl px-4 py-2 max-w-[85%]",
+        timeline: "relative pl-8 pb-6 border-l-2 border-muted-foreground/20 ml-4"
+      },
+      isOwn: {
+        true: "",
+        false: ""
+      },
+      isPinned: {
+        true: "ring-1 ring-primary/30 bg-primary/5",
+        false: ""
+      },
+      isDeleted: {
+        true: "opacity-60",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        layout: "chat",
+        isOwn: true,
+        className: "ml-auto bg-primary text-primary-foreground"
+      },
+      {
+        layout: "chat",
+        isOwn: false,
+        className: "mr-auto bg-muted"
+      }
+    ],
+    defaultVariants: {
+      layout: "list",
+      isOwn: false,
+      isPinned: false,
+      isDeleted: false
+    }
+  }
+);
+var commentHeaderVariants = cva(
+  "flex items-center gap-3",
+  {
+    variants: {
+      layout: {
+        list: "",
+        chat: "",
+        timeline: ""
+      }
+    },
+    defaultVariants: {
+      layout: "list"
+    }
+  }
+);
+var commentContentVariants = cva(
+  "text-sm",
+  {
+    variants: {
+      layout: {
+        list: "mt-2",
+        chat: "",
+        timeline: "mt-2"
+      }
+    },
+    defaultVariants: {
+      layout: "list"
+    }
+  }
+);
+var commentActionsVariants = cva(
+  "flex items-center gap-2 text-xs",
+  {
+    variants: {
+      layout: {
+        list: "mt-3 pt-3 border-t border-muted",
+        chat: "mt-1",
+        timeline: "mt-2"
+      }
+    },
+    defaultVariants: {
+      layout: "list"
+    }
+  }
+);
+var commentRepliesVariants = cva(
+  "relative",
+  {
+    variants: {
+      layout: {
+        list: "pl-8 mt-4 space-y-4",
+        chat: "pl-6 mt-2 space-y-2",
+        timeline: "pl-4 mt-2 space-y-2"
+      }
+    },
+    defaultVariants: {
+      layout: "list"
+    }
+  }
+);
+var commentThreadLineVariants = cva(
+  "absolute left-4 top-0 bottom-0 w-0.5 bg-muted-foreground/20",
+  {
+    variants: {
+      layout: {
+        list: "",
+        chat: "left-3",
+        timeline: "left-0"
+      }
+    },
+    defaultVariants: {
+      layout: "list"
+    }
+  }
+);
+var commentMentionVariants = cva(
+  "inline-flex items-center rounded px-1 font-medium cursor-pointer hover:underline",
+  {
+    variants: {
+      style: {
+        default: "bg-primary/10 text-primary",
+        subtle: "text-primary"
+      }
+    },
+    defaultVariants: {
+      style: "default"
+    }
+  }
+);
+var commentReactionVariants = cva(
+  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs cursor-pointer transition-colors",
+  {
+    variants: {
+      hasReacted: {
+        true: "bg-primary/10 border-primary/30 text-primary",
+        false: "bg-muted border-transparent text-muted-foreground hover:bg-muted-foreground/10"
+      }
+    },
+    defaultVariants: {
+      hasReacted: false
+    }
+  }
+);
+var commentInputContainerVariants = cva(
+  "relative rounded-md border bg-background transition-all duration-200",
+  {
+    variants: {
+      isFocused: {
+        true: "ring-2 ring-ring ring-offset-2",
+        false: ""
+      },
+      isSubmitting: {
+        true: "opacity-70 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      isFocused: false,
+      isSubmitting: false
+    }
+  }
+);
+var mentionSuggestionsVariants = cva(
+  "absolute z-50 min-w-52 overflow-hidden rounded-md border bg-popover p-1 shadow-md",
+  {
+    variants: {
+      position: {
+        above: "bottom-full mb-1",
+        below: "top-full mt-1"
+      }
+    },
+    defaultVariants: {
+      position: "below"
+    }
+  }
+);
+var mentionSuggestionItemVariants = cva(
+  "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer transition-colors",
+  {
+    variants: {
+      isSelected: {
+        true: "bg-accent text-accent-foreground",
+        false: "hover:bg-accent hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      isSelected: false
+    }
+  }
+);
+var commentEmptyStateVariants = cva(
+  "flex flex-col items-center justify-center text-center p-8",
+  {
+    variants: {
+      variant: {
+        default: "",
+        compact: "p-4"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var commentTimelineMarkerVariants = cva(
+  "absolute -left-2 top-0 flex h-4 w-4 items-center justify-center rounded-full border-2 bg-background",
+  {
+    variants: {
+      status: {
+        default: "border-muted-foreground/50",
+        active: "border-primary bg-primary"
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+);
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+function formatRelativeTime(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1e3);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffSecs < 60) return "agora";
+  if (diffMins < 60) return `${String(diffMins)}m atr\xE1s`;
+  if (diffHours < 24) return `${String(diffHours)}h atr\xE1s`;
+  if (diffDays < 7) return `${String(diffDays)}d atr\xE1s`;
+  return date.toLocaleDateString();
+}
+function parseContent(content, mentionableUsers, onMentionClick) {
+  if (!content) return null;
+  const mentionPattern = /@(\w+)/g;
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+  while ((match = mentionPattern.exec(content)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(content.slice(lastIndex, match.index));
+    }
+    const mentionName = match[1];
+    const user = mentionableUsers?.find(
+      (u) => u.name.toLowerCase().replaceAll(/\s+/g, "") === mentionName?.toLowerCase()
+    );
+    parts.push(
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: commentMentionVariants(),
+          role: "button",
+          tabIndex: 0,
+          onClick: () => {
+          },
+          onKeyDown: (e) => {
+            if ((e.key === "Enter" || e.key === " ") && user) ;
+          },
+          children: [
+            "@",
+            mentionName
+          ]
+        },
+        match.index
+      )
+    );
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < content.length) {
+    parts.push(content.slice(lastIndex));
+  }
+  return parts.length > 0 ? parts : content;
+}
+function CommentInput({
+  placeholder = "Escreva um coment\xE1rio...",
+  allowMentions = true,
+  allowAttachments = false,
+  mentionableUsers = [],
+  parentId,
+  initialContent = "",
+  submitLabel = "Enviar",
+  cancelLabel = "Cancelar",
+  isEditing = false,
+  isSubmitting = false,
+  showCancel = false,
+  onSubmit,
+  onCancel,
+  onMention,
+  className,
+  ...props
+}) {
+  const inputId = useId();
+  const textareaRef = useRef(null);
+  const [content, setContent] = useState(initialContent);
+  const [isFocused, setIsFocused] = useState(false);
+  const [showMentions, setShowMentions] = useState(false);
+  const [mentionSearch, setMentionSearch] = useState("");
+  const [selectedMentionIndex, setSelectedMentionIndex] = useState(0);
+  const filteredUsers = useMemo(() => {
+    if (!mentionSearch) return mentionableUsers.slice(0, 5);
+    return mentionableUsers.filter((u) => u.name.toLowerCase().includes(mentionSearch.toLowerCase())).slice(0, 5);
+  }, [mentionableUsers, mentionSearch]);
+  const handleSubmit = useCallback(() => {
+    if (!content.trim() || isSubmitting) return;
+    const mentionPattern = /@(\w+)/g;
+    const mentions = [];
+    let match;
+    while ((match = mentionPattern.exec(content)) !== null) {
+      const matchName = match[1] ?? "";
+      const user = mentionableUsers.find(
+        (u) => u.name.toLowerCase().replaceAll(/\s+/g, "") === matchName.toLowerCase()
+      );
+      if (user && !mentions.includes(user.id)) {
+        mentions.push(user.id);
+      }
+    }
+    onSubmit?.({
+      content: content.trim(),
+      parentId,
+      mentions
+    });
+    if (!isEditing) {
+      setContent("");
+    }
+  }, [content, isSubmitting, isEditing, parentId, mentionableUsers, onSubmit]);
+  const handleKeyDown = (e) => {
+    if (showMentions) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedMentionIndex(
+          (prev) => Math.min(prev + 1, filteredUsers.length - 1)
+        );
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedMentionIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        const selectedUser = filteredUsers[selectedMentionIndex];
+        if (selectedUser) {
+          insertMention(selectedUser);
+        }
+      } else if (e.key === "Escape") {
+        setShowMentions(false);
+      }
+    } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const handleChange = (value) => {
+    setContent(value);
+    if (allowMentions) {
+      const cursorPos = textareaRef.current?.selectionStart ?? 0;
+      const textBeforeCursor = value.slice(0, cursorPos);
+      const atMatch = /@(\w*)$/.exec(textBeforeCursor);
+      if (atMatch) {
+        setShowMentions(true);
+        setMentionSearch(atMatch[1] ?? "");
+        setSelectedMentionIndex(0);
+      } else {
+        setShowMentions(false);
+        setMentionSearch("");
+      }
+    }
+  };
+  const insertMention = (user) => {
+    const cursorPos = textareaRef.current?.selectionStart ?? 0;
+    const textBeforeCursor = content.slice(0, cursorPos);
+    const textAfterCursor = content.slice(cursorPos);
+    const atMatch = /@(\w*)$/.exec(textBeforeCursor);
+    if (atMatch) {
+      const newTextBefore = textBeforeCursor.slice(0, atMatch.index);
+      const mention = `@${user.name.replaceAll(/\s+/g, "")} `;
+      setContent(newTextBefore + mention + textAfterCursor);
+      setShowMentions(false);
+      setMentionSearch("");
+      onMention?.({ userId: user.id });
+      setTimeout(() => {
+        textareaRef.current?.focus();
+        const newCursorPos = newTextBefore.length + mention.length;
+        textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+      }, 0);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        commentInputContainerVariants({ isFocused, isSubmitting }),
+        className
+      ),
+      "data-slot": "comment-input",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref: textareaRef,
+              "aria-describedby": `${inputId}-help`,
+              "aria-label": isEditing ? "Editar coment\xE1rio" : "Novo coment\xE1rio",
+              className: "min-h-20 resize-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0",
+              disabled: isSubmitting,
+              id: inputId,
+              placeholder,
+              value: content,
+              onBlur: () => {
+                setIsFocused(false);
+              },
+              onChange: (e) => {
+                handleChange(e.target.value);
+              },
+              onFocus: () => {
+                setIsFocused(true);
+              },
+              onKeyDown: handleKeyDown
+            }
+          ),
+          showMentions && filteredUsers.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: mentionSuggestionsVariants({ position: "below" }),
+              "data-slot": "comment-mention-suggestions",
+              role: "listbox",
+              children: filteredUsers.map((user, index) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: mentionSuggestionItemVariants({
+                    isSelected: index === selectedMentionIndex
+                  }),
+                  "aria-selected": index === selectedMentionIndex,
+                  role: "option",
+                  type: "button",
+                  onClick: () => {
+                    insertMention(user);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(Avatar, { size: "xs", children: [
+                      user.avatar ? /* @__PURE__ */ jsx(AvatarImage, { alt: user.name, src: user.avatar }) : null,
+                      /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(user.name) })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { children: user.name }),
+                    user.role && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: user.role })
+                  ]
+                },
+                user.id
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t p-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            allowMentions && /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Mencionar algu\xE9m",
+                disabled: isSubmitting,
+                size: "sm",
+                type: "button",
+                variant: "ghost",
+                onClick: () => {
+                  const newContent = content + "@";
+                  setContent(newContent);
+                  handleChange(newContent);
+                  textareaRef.current?.focus();
+                },
+                children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "@" })
+              }
+            ),
+            allowAttachments && /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Anexar arquivo",
+                disabled: isSubmitting,
+                size: "sm",
+                type: "button",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "Adicionar emoji",
+                disabled: isSubmitting,
+                size: "sm",
+                type: "button",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx(Smile, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            showCancel && /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: isSubmitting,
+                size: "sm",
+                type: "button",
+                variant: "ghost",
+                onClick: onCancel,
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                disabled: !content.trim() || isSubmitting,
+                size: "sm",
+                type: "button",
+                onClick: handleSubmit,
+                children: [
+                  /* @__PURE__ */ jsx(Send, { className: "mr-1 h-4 w-4" }),
+                  submitLabel
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", id: `${inputId}-help`, children: "Pressione Ctrl+Enter para enviar. Use @ para mencionar algu\xE9m." })
+      ]
+    }
+  );
+}
+function CommentReactions({
+  commentId,
+  reactions = [],
+  availableReactions = defaultReactions,
+  readOnly = false,
+  onReact
+}) {
+  const [showPicker, setShowPicker] = useState(false);
+  const handleReact = (emoji) => {
+    onReact?.({ commentId, reaction: emoji });
+    setShowPicker(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", "data-slot": "comment-reactions", children: [
+    reactions.map((reaction) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: commentReactionVariants({
+          hasReacted: reaction.hasReacted
+        }),
+        disabled: readOnly,
+        title: `${String(reaction.count)} ${reaction.count === 1 ? "pessoa" : "pessoas"}`,
+        type: "button",
+        onClick: () => {
+          handleReact(reaction.emoji);
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: reaction.emoji }),
+          /* @__PURE__ */ jsx("span", { children: reaction.count })
+        ]
+      },
+      reaction.emoji
+    )),
+    !readOnly && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "inline-flex h-6 w-6 items-center justify-center rounded-full border border-dashed border-muted-foreground/30 text-muted-foreground transition-colors hover:border-muted-foreground hover:text-foreground",
+          title: "Adicionar rea\xE7\xE3o",
+          type: "button",
+          onClick: () => {
+            setShowPicker(!showPicker);
+          },
+          children: /* @__PURE__ */ jsx(Smile, { className: "h-3 w-3" })
+        }
+      ),
+      showPicker && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute bottom-full left-0 z-50 mb-1 flex gap-1 rounded-lg border bg-popover p-2 shadow-lg",
+          role: "listbox",
+          children: availableReactions.map((reaction) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rounded p-1 text-lg transition-colors hover:bg-accent",
+              role: "option",
+              title: reaction.label,
+              type: "button",
+              onClick: () => {
+                handleReact(reaction.emoji);
+              },
+              children: reaction.emoji
+            },
+            reaction.shortcode
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+function CommentItem({
+  comment,
+  confirmDelete,
+  currentUser,
+  depth = 0,
+  maxDepth = 3,
+  layout = "list",
+  allowReplies = true,
+  allowReactions = true,
+  allowEditing = true,
+  allowDeleting = true,
+  allowMentions = true,
+  reactions = defaultReactions,
+  mentionableUsers = [],
+  readOnly = false,
+  onReply,
+  onEdit,
+  onDelete,
+  onReact,
+  className,
+  ...props
+}) {
+  const commentId = useId();
+  const [isReplying, setIsReplying] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [showActions, setShowActions] = useState(false);
+  const isOwn = currentUser?.id === comment.author.id;
+  const canReply = allowReplies && depth < maxDepth && !readOnly;
+  const canEdit = allowEditing && isOwn && !readOnly && !comment.isDeleted;
+  const canDelete = allowDeleting && isOwn && !readOnly && !comment.isDeleted;
+  const handleReply = (payload) => {
+    onReply?.({ ...payload, parentId: comment.id });
+    setIsReplying(false);
+  };
+  const handleEdit = (payload) => {
+    onEdit?.({ id: comment.id, content: payload.content });
+    setIsEditing(false);
+  };
+  const handleDelete = () => {
+    const shouldDelete = confirmDelete ? confirmDelete(comment) : window.confirm("Tem certeza que deseja excluir este coment\xE1rio?");
+    if (shouldDelete) {
+      onDelete?.({ id: comment.id });
+    }
+  };
+  if (comment.isDeleted) {
+    return /* @__PURE__ */ jsx(
+      "article",
+      {
+        "data-deleted": true,
+        "aria-label": "Coment\xE1rio exclu\xEDdo",
+        className: cn(commentItemVariants({ layout, isDeleted: true }), className),
+        "data-slot": "comment-item",
+        ...props,
+        children: /* @__PURE__ */ jsx("p", { className: "text-sm italic text-muted-foreground", children: "Este coment\xE1rio foi exclu\xEDdo." })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        commentItemVariants({ layout, isOwn, isPinned: comment.isPinned }),
+        className
+      ),
+      "aria-describedby": `${commentId}-content`,
+      "aria-label": `Coment\xE1rio de ${comment.author.name}`,
+      "data-slot": "comment-item",
+      ...props,
+      children: [
+        layout === "timeline" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: commentTimelineMarkerVariants({ status: "default" }),
+            "data-slot": "comment-timeline-marker"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: commentHeaderVariants({ layout }), "data-slot": "comment-header", children: [
+          layout !== "chat" && /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+            comment.author.avatar ? /* @__PURE__ */ jsx(AvatarImage, { alt: comment.author.name, src: comment.author.avatar }) : null,
+            /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(comment.author.name) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: comment.author.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatRelativeTime(comment.createdAt) }),
+            comment.isEdited && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "(editado)" }),
+            comment.isPinned && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-primary", children: "Fixado" })
+          ] }),
+          (canEdit || canDelete) && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-expanded": showActions,
+                "aria-haspopup": "true",
+                "aria-label": "Mais a\xE7\xF5es",
+                size: "sm",
+                variant: "ghost",
+                onClick: () => {
+                  setShowActions(!showActions);
+                },
+                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+              }
+            ),
+            showActions && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "absolute right-0 top-full z-10 mt-1 min-w-28 rounded-md border bg-popover p-1 shadow-md",
+                role: "menu",
+                children: [
+                  canEdit && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent",
+                      role: "menuitem",
+                      type: "button",
+                      onClick: () => {
+                        setIsEditing(true);
+                        setShowActions(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Edit2, { className: "h-3.5 w-3.5" }),
+                        "Editar"
+                      ]
+                    }
+                  ),
+                  canDelete && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-accent",
+                      role: "menuitem",
+                      type: "button",
+                      onClick: () => {
+                        handleDelete();
+                        setShowActions(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" }),
+                        "Excluir"
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] }),
+        isEditing ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+          CommentInput,
+          {
+            isEditing: true,
+            showCancel: true,
+            allowMentions,
+            cancelLabel: "Cancelar",
+            initialContent: comment.content,
+            mentionableUsers,
+            placeholder: "Editar coment\xE1rio...",
+            submitLabel: "Salvar",
+            onCancel: () => {
+              setIsEditing(false);
+            },
+            onSubmit: handleEdit
+          }
+        ) }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: commentContentVariants({ layout }),
+            "data-slot": "comment-content",
+            id: `${commentId}-content`,
+            children: /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: parseContent(comment.content, mentionableUsers) })
+          }
+        ),
+        comment.attachments && comment.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", "data-slot": "comment-attachments", children: comment.attachments.map((attachment) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            className: "flex items-center gap-1 rounded border bg-muted/50 px-2 py-1 text-xs hover:bg-muted",
+            href: attachment.url,
+            rel: "noopener noreferrer",
+            target: "_blank",
+            children: [
+              /* @__PURE__ */ jsx(Paperclip, { className: "h-3 w-3" }),
+              attachment.name
+            ]
+          },
+          attachment.id
+        )) }),
+        allowReactions && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+          CommentReactions,
+          {
+            availableReactions: reactions,
+            commentId: comment.id,
+            reactions: comment.reactions,
+            readOnly,
+            onReact
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: commentActionsVariants({ layout }), "data-slot": "comment-actions", children: canReply && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => {
+              setIsReplying(!isReplying);
+            },
+            children: [
+              /* @__PURE__ */ jsx(CornerDownRight, { className: "mr-1 h-3 w-3" }),
+              "Responder"
+            ]
+          }
+        ) }),
+        isReplying && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+          CommentInput,
+          {
+            showCancel: true,
+            allowMentions,
+            mentionableUsers,
+            parentId: comment.id,
+            placeholder: `Responder a ${comment.author.name}...`,
+            onCancel: () => {
+              setIsReplying(false);
+            },
+            onSubmit: handleReply
+          }
+        ) }),
+        comment.replies && comment.replies.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              commentRepliesVariants({ layout }),
+              "relative"
+            ),
+            "data-slot": "comment-replies",
+            children: [
+              layout === "list" && /* @__PURE__ */ jsx("div", { className: commentThreadLineVariants({ layout }) }),
+              comment.replies.map((reply) => /* @__PURE__ */ jsx(
+                CommentItem,
+                {
+                  allowDeleting,
+                  allowEditing,
+                  allowMentions,
+                  allowReactions,
+                  allowReplies,
+                  comment: reply,
+                  confirmDelete,
+                  currentUser,
+                  depth: depth + 1,
+                  layout,
+                  maxDepth,
+                  mentionableUsers,
+                  reactions,
+                  readOnly,
+                  onDelete,
+                  onEdit,
+                  onReact,
+                  onReply
+                },
+                reply.id
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CommentSystem({
+  comments,
+  variant = "default",
+  layout = "list",
+  confirmDelete,
+  currentUser,
+  allowReplies = true,
+  allowReactions = true,
+  allowEditing = true,
+  allowDeleting = true,
+  allowMentions = true,
+  allowAttachments = false,
+  maxDepth = 3,
+  mentionableUsers = [],
+  reactions = defaultReactions,
+  placeholder = "Escreva um coment\xE1rio...",
+  readOnly = false,
+  isLoading = false,
+  error,
+  onSubmit,
+  onEdit,
+  onDelete,
+  onReact,
+  onMention,
+  onLoadMore,
+  className,
+  "aria-label": ariaLabel = "Sistema de coment\xE1rios",
+  ...props
+}) {
+  const systemId = useId();
+  const handleReply = (payload) => {
+    onSubmit?.(payload);
+  };
+  const hasComments = comments.length > 0;
+  const showInput = !readOnly && currentUser;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-loading": true,
+        "aria-busy": "true",
+        "aria-label": ariaLabel,
+        className: cn(commentSystemVariants({ variant, layout }), className),
+        "data-slot": "comment-system",
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "animate-pulse rounded-lg border bg-card p-4",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-muted" }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "h-4 w-24 rounded bg-muted" }),
+                  /* @__PURE__ */ jsx("div", { className: "h-3 w-16 rounded bg-muted" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-4 w-full rounded bg-muted" }),
+                /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 rounded bg-muted" })
+              ] })
+            ]
+          },
+          i
+        )) })
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-error": true,
+        "aria-label": ariaLabel,
+        className: cn(commentSystemVariants({ variant, layout }), className),
+        "data-slot": "comment-system",
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-destructive/50 bg-destructive/5 p-4 text-center", children: [
+          /* @__PURE__ */ jsx(X, { className: "mx-auto h-8 w-8 text-destructive" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-destructive", children: error }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "mt-3",
+              size: "sm",
+              variant: "outline",
+              onClick: () => onLoadMore?.({}),
+              children: "Tentar novamente"
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(commentSystemVariants({ variant, layout }), className),
+      "data-slot": "comment-system",
+      "data-variant": variant,
+      id: systemId,
+      ...props,
+      children: [
+        showInput && /* @__PURE__ */ jsx("div", { className: "mb-4", "data-slot": "comment-system-input", children: /* @__PURE__ */ jsx(
+          CommentInput,
+          {
+            allowAttachments,
+            allowMentions,
+            mentionableUsers,
+            placeholder,
+            onMention,
+            onSubmit
+          }
+        ) }),
+        hasComments ? /* @__PURE__ */ jsx("div", { "data-slot": "comment-system-list", role: "feed", children: comments.map((comment) => /* @__PURE__ */ jsx(
+          CommentItem,
+          {
+            allowDeleting,
+            allowEditing,
+            allowMentions,
+            allowReactions,
+            allowReplies,
+            comment,
+            confirmDelete,
+            currentUser,
+            layout: layout ?? "list",
+            maxDepth,
+            mentionableUsers,
+            reactions,
+            readOnly,
+            onDelete,
+            onEdit,
+            onReact,
+            onReply: handleReply
+          },
+          comment.id
+        )) }) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: commentEmptyStateVariants({
+              variant: variant === "compact" ? "compact" : "default"
+            }),
+            "data-slot": "comment-system-empty",
+            children: [
+              /* @__PURE__ */ jsx(MessageCircle, { className: "h-12 w-12 text-muted-foreground/50" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Nenhum coment\xE1rio ainda." }),
+              !readOnly && currentUser && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Seja o primeiro a comentar!" })
+            ]
+          }
+        ),
+        onLoadMore && hasComments && /* @__PURE__ */ jsx("div", { className: "mt-4 text-center", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: () => {
+              onLoadMore({ before: comments[comments.length - 1]?.id });
+            },
+            children: "Carregar mais coment\xE1rios"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export { CommentInput, CommentItem, CommentReactions, CommentSystem, commentActionsVariants, commentContentVariants, commentEmptyStateVariants, commentHeaderVariants, commentInputContainerVariants, commentItemVariants, commentMentionVariants, commentReactionVariants, commentRepliesVariants, commentSystemVariants, commentThreadLineVariants, commentTimelineMarkerVariants, defaultReactions, mentionSuggestionItemVariants, mentionSuggestionsVariants };
+//# sourceMappingURL=chunk-JKYB5QAP.js.map
+//# sourceMappingURL=chunk-JKYB5QAP.js.map