elseware-ui 2.31.8 → 2.31.9

package/dist/index.mjs

@@ -17483,7 +17483,7 @@ function CommentComposer({
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
     /* @__PURE__ */ jsx(Avatar, { src: avatar, size: "md" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [
       /* @__PURE__ */ jsx(
         "textarea",
         {
@@ -17492,7 +17492,7 @@ function CommentComposer({
           placeholder,
           onFocus: () => setFocused(true),
           onChange: (e) => setValue(e.target.value),
-          className: "\n            w-full\n            min-h-[56px]\n            resize-none\n            bg-transparent\n            border-b\n            border-gray-300\n            dark:border-neutral-700\n            outline-none\n            pb-2\n            text-sm\n          "
+          className: "min-h-[56px] w-full resize-none border-b border-gray-300 bg-transparent pb-2 text-sm outline-none dark:border-neutral-700"
         }
       ),
       (focused || value.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -17532,56 +17532,44 @@ function CommentActions({
   const liked = comment.liked ?? false;
   const disliked = comment.disliked ?? false;
   const canReply = comment.permissions?.canReply ?? true;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "\n        flex\n        items-center\n        gap-5\n        text-sm\n        text-gray-500\n        dark:text-gray-400\n      ",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: onLike,
-            className: `
-          inline-flex
-          items-center
-          gap-1
-          transition-colors
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5 text-sm text-gray-500 dark:text-gray-400", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onLike,
+        className: `
+          inline-flex items-center gap-1 transition-colors
           ${liked ? "text-blue-500" : "hover:text-gray-900 dark:hover:text-gray-100"}
         `,
-            children: [
-              liked ? /* @__PURE__ */ jsx(BiSolidLike, { size: 18 }) : /* @__PURE__ */ jsx(BiLike, { size: 18 }),
-              /* @__PURE__ */ jsx("span", { children: likes })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: onDislike,
-            className: `
-          inline-flex
-          items-center
-          gap-1
-          transition-colors
+        children: [
+          liked ? /* @__PURE__ */ jsx(BiSolidLike, { size: 18 }) : /* @__PURE__ */ jsx(BiLike, { size: 18 }),
+          /* @__PURE__ */ jsx("span", { children: likes })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onDislike,
+        className: `
+          inline-flex items-center gap-1 transition-colors
           ${disliked ? "text-red-500" : "hover:text-gray-900 dark:hover:text-gray-100"}
         `,
-            children: [
-              disliked ? /* @__PURE__ */ jsx(BiSolidDislike, { size: 18 }) : /* @__PURE__ */ jsx(BiDislike, { size: 18 }),
-              /* @__PURE__ */ jsx("span", { children: dislikes })
-            ]
-          }
-        ),
-        canReply && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onReply,
-            className: "\n            font-medium\n            transition-colors\n            hover:text-gray-900\n            dark:hover:text-gray-100\n          ",
-            children: "Reply"
-          }
-        )
-      ]
-    }
-  );
+        children: [
+          disliked ? /* @__PURE__ */ jsx(BiSolidDislike, { size: 18 }) : /* @__PURE__ */ jsx(BiDislike, { size: 18 }),
+          /* @__PURE__ */ jsx("span", { children: dislikes })
+        ]
+      }
+    ),
+    canReply && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onReply,
+        className: "font-medium transition-colors hover:text-gray-900 dark:hover:text-gray-100",
+        children: "Reply"
+      }
+    )
+  ] });
 }
 var CommentActions_default = CommentActions;
 function CommentContent({ comment }) {
@@ -17674,63 +17662,57 @@ function CommentMenu({
       {
         type: "button",
         onClick: () => setOpen(!open),
-        className: "\n          text-gray-500\n          hover:text-gray-900\n          dark:hover:text-gray-100\n          transition-colors\n        ",
+        className: "text-gray-500 transition-colors hover:text-gray-900 dark:hover:text-gray-100",
         children: /* @__PURE__ */ jsx(BiDotsVerticalRounded, { size: 18 })
       }
     ),
-    open && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "\n            absolute\n            right-0\n            top-full\n            mt-2\n            min-w-[180px]\n            overflow-hidden\n            rounded-xl\n            border\n            border-gray-200\n            dark:border-neutral-800\n            bg-white\n            dark:bg-neutral-900\n            shadow-xl\n            z-50\n          ",
-        children: [
-          canEdit && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setOpen(false);
-                onEdit?.();
-              },
-              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
-              children: [
-                /* @__PURE__ */ jsx(BiEdit, {}),
-                "Edit"
-              ]
-            }
-          ),
-          canDelete && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setOpen(false);
-                onDelete?.();
-              },
-              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                text-red-500\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
-              children: [
-                /* @__PURE__ */ jsx(BiTrash, {}),
-                "Delete"
-              ]
-            }
-          ),
-          canReport && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setOpen(false);
-                onReport?.();
-              },
-              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
-              children: [
-                /* @__PURE__ */ jsx(BiFlag, {}),
-                "Report"
-              ]
-            }
-          )
-        ]
-      }
-    )
+    open && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: [
+      canEdit && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            onEdit?.();
+          },
+          className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+          children: [
+            /* @__PURE__ */ jsx(BiEdit, {}),
+            "Edit"
+          ]
+        }
+      ),
+      canDelete && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            onDelete?.();
+          },
+          className: "flex w-full items-center gap-2 px-4 py-3 text-sm text-red-500 hover:bg-gray-100 dark:hover:bg-neutral-800",
+          children: [
+            /* @__PURE__ */ jsx(BiTrash, {}),
+            "Delete"
+          ]
+        }
+      ),
+      canReport && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            onReport?.();
+          },
+          className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+          children: [
+            /* @__PURE__ */ jsx(BiFlag, {}),
+            "Report"
+          ]
+        }
+      )
+    ] })
   ] });
 }
 var CommentMenu_default = CommentMenu;
@@ -17748,7 +17730,7 @@ function CommentRepliesToggle({
     {
       type: "button",
       onClick: onToggle,
-      className: "\n        inline-flex\n        items-center\n        gap-1\n        w-fit\n        text-sm\n        font-medium\n        text-blue-500\n        hover:text-blue-400\n        transition-colors\n      ",
+      className: "inline-flex w-fit items-center gap-1 text-sm font-medium text-blue-500 transition-colors hover:text-blue-400",
       children: [
         collapsed ? /* @__PURE__ */ jsx(BiChevronDown, { size: 18 }) : /* @__PURE__ */ jsx(BiChevronUp, { size: 18 }),
         /* @__PURE__ */ jsx("span", { children: label })
@@ -17760,7 +17742,10 @@ var CommentRepliesToggle_default = CommentRepliesToggle;
 function ReplyComposer({
   avatar,
   username,
+  placeholder,
+  submitLabel = "Reply",
   loading,
+  disabled,
   onSubmit
 }) {
   return /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
@@ -17768,20 +17753,18 @@ function ReplyComposer({
     {
       avatar,
       loading,
-      submitLabel: "Reply",
-      placeholder: `Reply to @${username}`,
+      disabled,
+      submitLabel,
+      placeholder: placeholder ?? `Reply to @${username}`,
       onSubmit
     }
   ) });
 }
 var ReplyComposer_default = ReplyComposer;
-
-// src/compositions/comment-thread/constants/comment.constants.ts
-var MAX_COMMENT_DEPTH = 5;
-var COMMENT_INDENTATION = 24;
 function CommentItem({
   comment,
   depth = 0,
+  config,
   components,
   onLike,
   onDislike,
@@ -17792,7 +17775,7 @@ function CommentItem({
 }) {
   const [collapsed, setCollapsed] = useState(false);
   const [isReplying, setIsReplying] = useState(false);
-  const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
+  const resolvedDepth = Math.min(depth, config.maxDepth);
   const {
     Header: HeaderComponent = CommentHeader_default,
     Content: ContentComponent = CommentContent_default,
@@ -17811,7 +17794,7 @@ function CommentItem({
     {
       className: "flex flex-col gap-4",
       style: {
-        paddingLeft: resolvedDepth * COMMENT_INDENTATION
+        paddingLeft: resolvedDepth * config.indentation
       },
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [
@@ -17847,6 +17830,8 @@ function CommentItem({
             {
               avatar: comment.author?.avatar,
               username: comment.author?.username,
+              placeholder: `Reply to @${comment.author?.username}`,
+              submitLabel: "Reply",
               onSubmit: handleReply
             }
           ),
@@ -17871,6 +17856,7 @@ function CommentItem({
               {
                 comments: comment.replies,
                 depth: depth + 1,
+                config,
                 components,
                 onLike,
                 onDislike,
@@ -17890,6 +17876,7 @@ var CommentItem_default = CommentItem;
 function CommentList({
   comments,
   depth = 0,
+  config,
   components,
   onLike,
   onDislike,
@@ -17906,6 +17893,7 @@ function CommentList({
     {
       comment,
       depth,
+      config,
       components,
       onLike,
       onDislike,
@@ -17971,18 +17959,30 @@ function insertReply(comments, parentId, reply) {
     };
   });
 }
+
+// src/compositions/comment-thread/constants/comment.constants.ts
+var DEFAULT_COMMENT_THREAD_CONFIG = {
+  maxDepth: 5,
+  indentation: 24,
+  dateFormat: "relative"
+};
 function CommentThread({
   currentUser,
   dataSource,
   loading = false,
   components,
+  config,
   onEdit,
   onDelete,
   onReport
 }) {
   const [comments, setComments] = useState([]);
   const [isLoadingComments, setIsLoadingComments] = useState(true);
-  const ComposerComponent = components?.ReplyComposer ?? CommentComposer_default;
+  const ComposerComponent = components?.Composer ?? CommentComposer_default;
+  const resolvedConfig = {
+    ...DEFAULT_COMMENT_THREAD_CONFIG,
+    ...config
+  };
   useEffect(() => {
     async function loadComments() {
       try {
@@ -18060,6 +18060,8 @@ function CommentThread({
       ComposerComponent,
       {
         avatar: currentUser.avatar,
+        placeholder: "Add a comment...",
+        submitLabel: "Comment",
         onSubmit: handleCreateComment
       }
     ),
@@ -18068,6 +18070,7 @@ function CommentThread({
       {
         comments,
         components,
+        config: resolvedConfig,
         onLike: handleLike,
         onDislike: handleDislike,
         onReply: handleReply,