@devalok/shilp-sutra 0.6.2 → 0.8.0

package/dist/composed/rich-text-editor.js

@@ -1,225 +1,396 @@
 "use client";
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import * as n from "react";
-import { useEditor as x, EditorContent as h } from "@tiptap/react";
-import u from "@tiptap/starter-kit";
-import f from "@tiptap/extension-placeholder";
-import { cn as d } from "../ui/lib/utils.js";
-import { IconBold as _, IconItalic as g, IconStrikethrough as v, IconH2 as y, IconH3 as k, IconList as w, IconListNumbers as N, IconCode as A, IconArrowBackUp as I, IconArrowForwardUp as C } from "@tabler/icons-react";
-function s({
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import * as c from "react";
+import { useEditor as S, EditorContent as H } from "@tiptap/react";
+import B from "@tiptap/starter-kit";
+import G from "@tiptap/extension-placeholder";
+import P from "@tiptap/extension-underline";
+import M from "@tiptap/extension-highlight";
+import j from "@tiptap/extension-task-list";
+import D from "@tiptap/extension-task-item";
+import z from "@tiptap/extension-text-align";
+import q from "@tiptap/extension-link";
+import U from "@tiptap/extension-image";
+import O from "@tiptap/extension-mention";
+import { FileAttachment as K } from "./extensions/file-attachment.js";
+import { createSuggestionRenderer as J } from "./extensions/mention-suggestion.js";
+import { EmojiSuggestion as Q } from "./extensions/emoji-suggestion.js";
+import { useColorMode as X } from "../hooks/use-color-mode.js";
+import { cn as k } from "../ui/lib/utils.js";
+import { IconBold as Y, IconItalic as Z, IconUnderline as $, IconStrikethrough as F, IconHighlight as ee, IconH2 as te, IconH3 as ie, IconBlockquote as se, IconList as re, IconListNumbers as oe, IconListCheck as ne, IconCode as ce, IconPhoto as le, IconPaperclip as ae, IconLineDashed as de, IconAlignLeft as ue, IconAlignCenter as me, IconAlignRight as fe, IconMoodSmile as he, IconArrowBackUp as ge, IconArrowForwardUp as pe, IconLink as ke } from "@tabler/icons-react";
+const V = [
+  "prose prose-sm max-w-none",
+  "font-body text-ds-md leading-relaxed text-text-primary",
+  "[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-text-primary",
+  "[&_h3]:text-ds-base [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-text-primary",
+  "[&_p]:mb-ds-02b [&_p]:text-text-secondary",
+  "[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal",
+  "[&_li]:text-text-secondary",
+  "[&_code]:rounded [&_code]:bg-layer-02 [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-interactive",
+  "[&_pre]:rounded-ds-lg [&_pre]:bg-layer-02 [&_pre]:p-ds-04",
+  "[&_strong]:font-semibold [&_strong]:text-text-primary",
+  "[&_blockquote]:border-l-[3px] [&_blockquote]:border-interactive/30 [&_blockquote]:pl-ds-04 [&_blockquote]:italic [&_blockquote]:text-text-placeholder",
+  "[&_mark]:rounded-sm [&_mark]:bg-warning/20 [&_mark]:px-[2px]",
+  '[&_ul[data-type="taskList"]]:ml-0 [&_ul[data-type="taskList"]]:list-none [&_li[data-type="taskItem"]]:flex [&_li[data-type="taskItem"]]:items-start [&_li[data-type="taskItem"]]:gap-ds-02',
+  "[&_hr]:my-ds-04 [&_hr]:border-border",
+  "[&_a]:text-interactive [&_a]:underline [&_a]:decoration-interactive/40 hover:[&_a]:decoration-interactive",
+  "[&_img]:max-w-full [&_img]:rounded-ds-md [&_img]:my-ds-03",
+  "[&_.mention]:rounded-ds-sm [&_.mention]:bg-interactive/10 [&_.mention]:px-ds-02 [&_.mention]:py-[1px] [&_.mention]:font-medium [&_.mention]:text-interactive"
+];
+function r({
   onClick: t,
-  isActive: o = !1,
-  disabled: l = !1,
-  title: i,
-  children: c
+  isActive: n = !1,
+  disabled: a = !1,
+  title: l,
+  children: d
 }) {
   return /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       onClick: t,
-      disabled: l,
-      title: i,
-      className: d(
+      disabled: a,
+      title: l,
+      "aria-pressed": n,
+      className: k(
         "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md transition-colors",
         "hover:bg-field",
         "disabled:pointer-events-none disabled:opacity-[0.38]",
-        o ? "bg-field text-interactive" : "text-text-placeholder"
+        n ? "bg-field text-interactive" : "text-text-placeholder"
       ),
-      children: c
+      children: d
     }
   );
 }
-function R({ editor: t }) {
-  return /* @__PURE__ */ m("div", { className: "flex flex-wrap items-center gap-ds-01 border-b border-border px-ds-04 py-ds-02b", children: [
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleBold().run(),
-        isActive: t.isActive("bold"),
-        title: "Bold",
-        children: /* @__PURE__ */ e(_, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleItalic().run(),
-        isActive: t.isActive("italic"),
-        title: "Italic",
-        children: /* @__PURE__ */ e(g, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleStrike().run(),
-        isActive: t.isActive("strike"),
-        title: "Strikethrough",
-        children: /* @__PURE__ */ e(v, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-border" }),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleHeading({ level: 2 }).run(),
-        isActive: t.isActive("heading", { level: 2 }),
-        title: "Heading 2",
-        children: /* @__PURE__ */ e(y, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleHeading({ level: 3 }).run(),
-        isActive: t.isActive("heading", { level: 3 }),
-        title: "Heading 3",
-        children: /* @__PURE__ */ e(k, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-border" }),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleBulletList().run(),
-        isActive: t.isActive("bulletList"),
-        title: "Bullet list",
-        children: /* @__PURE__ */ e(w, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleOrderedList().run(),
-        isActive: t.isActive("orderedList"),
-        title: "Ordered list",
-        children: /* @__PURE__ */ e(N, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().toggleCodeBlock().run(),
-        isActive: t.isActive("codeBlock"),
-        title: "Code block",
-        children: /* @__PURE__ */ e(A, { className: "h-ico-sm w-ico-sm", stroke: 2.5 })
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-border" }),
-    /* @__PURE__ */ e(
-      s,
-      {
-        onClick: () => t.chain().focus().undo().run(),
-        disabled: !t.can().undo(),
-        title: "Undo",
-        children: /* @__PURE__ */ e(I, { className: "h-ico-sm w-ico-sm", stroke: 2 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
+function be({ editor: t }) {
+  const [n, a] = c.useState(!1), [l, d] = c.useState(""), u = c.useRef(null), x = () => {
+    if (t.isActive("link")) {
+      t.chain().focus().unsetLink().run();
+      return;
+    }
+    const m = t.getAttributes("link").href || "";
+    d(m), a(!0), setTimeout(() => {
+      var A;
+      return (A = u.current) == null ? void 0 : A.focus();
+    }, 0);
+  }, h = (m) => {
+    m.preventDefault(), l.trim() && t.chain().focus().setLink({ href: l.trim() }).run(), a(!1), d("");
+  }, g = (m) => {
+    m.key === "Escape" && (a(!1), d(""), t.commands.focus());
+  };
+  return /* @__PURE__ */ b("div", { className: "relative", children: [
+    /* @__PURE__ */ e(r, { onClick: x, isActive: t.isActive("link"), title: "Link", children: /* @__PURE__ */ e(ke, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    n && /* @__PURE__ */ b(
+      "form",
       {
-        onClick: () => t.chain().focus().redo().run(),
-        disabled: !t.can().redo(),
-        title: "Redo",
-        children: /* @__PURE__ */ e(C, { className: "h-ico-sm w-ico-sm", stroke: 2 })
+        onSubmit: h,
+        "aria-label": "Edit link URL",
+        className: "absolute left-0 top-full z-popover mt-ds-01 flex items-center gap-ds-02 rounded-ds-md border border-border bg-layer-01 p-ds-02 shadow-02",
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: u,
+              type: "url",
+              value: l,
+              onChange: (m) => d(m.target.value),
+              onKeyDown: g,
+              placeholder: "https://...",
+              className: "h-ds-sm w-[240px] rounded-ds-sm border border-border bg-layer-01 px-ds-03 text-ds-sm text-text-primary focus:border-interactive focus:outline-none"
+            }
+          ),
+          /* @__PURE__ */ e("button", { type: "submit", className: "h-ds-sm rounded-ds-sm bg-interactive px-ds-03 text-ds-sm text-text-on-color hover:bg-interactive/90", children: "Apply" })
+        ]
       }
     )
   ] });
 }
-const T = n.forwardRef(
+function p() {
+  return /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-border" });
+}
+function xe({ editor: t, onImageClick: n, onFileClick: a, onEmojiClick: l }) {
+  return /* @__PURE__ */ b("div", { className: "flex flex-wrap items-center gap-ds-01 border-b border-border px-ds-04 py-ds-02b", children: [
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleBold().run(), isActive: t.isActive("bold"), title: "Bold", children: /* @__PURE__ */ e(Y, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleItalic().run(), isActive: t.isActive("italic"), title: "Italic", children: /* @__PURE__ */ e(Z, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleUnderline().run(), isActive: t.isActive("underline"), title: "Underline", children: /* @__PURE__ */ e($, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleStrike().run(), isActive: t.isActive("strike"), title: "Strikethrough", children: /* @__PURE__ */ e(F, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleHighlight().run(), isActive: t.isActive("highlight"), title: "Highlight", children: /* @__PURE__ */ e(ee, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleHeading({ level: 2 }).run(), isActive: t.isActive("heading", { level: 2 }), title: "Heading 2", children: /* @__PURE__ */ e(te, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleHeading({ level: 3 }).run(), isActive: t.isActive("heading", { level: 3 }), title: "Heading 3", children: /* @__PURE__ */ e(ie, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleBlockquote().run(), isActive: t.isActive("blockquote"), title: "Blockquote", children: /* @__PURE__ */ e(se, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleBulletList().run(), isActive: t.isActive("bulletList"), title: "Bullet list", children: /* @__PURE__ */ e(re, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleOrderedList().run(), isActive: t.isActive("orderedList"), title: "Ordered list", children: /* @__PURE__ */ e(oe, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleTaskList().run(), isActive: t.isActive("taskList"), title: "Task list", children: /* @__PURE__ */ e(ne, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().toggleCodeBlock().run(), isActive: t.isActive("codeBlock"), title: "Code block", children: /* @__PURE__ */ e(ce, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(be, { editor: t }),
+    n && /* @__PURE__ */ e(r, { onClick: n, title: "Insert image", children: /* @__PURE__ */ e(le, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    a && /* @__PURE__ */ e(r, { onClick: a, title: "Attach file", children: /* @__PURE__ */ e(ae, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ e(de, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().setTextAlign("left").run(), isActive: t.isActive({ textAlign: "left" }), title: "Align left", children: /* @__PURE__ */ e(ue, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().setTextAlign("center").run(), isActive: t.isActive({ textAlign: "center" }), title: "Align center", children: /* @__PURE__ */ e(me, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().setTextAlign("right").run(), isActive: t.isActive({ textAlign: "right" }), title: "Align right", children: /* @__PURE__ */ e(fe, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(p, {}),
+    l && /* @__PURE__ */ e(r, { onClick: l, title: "Emoji", children: /* @__PURE__ */ e(he, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().undo().run(), disabled: !t.can().undo(), title: "Undo", children: /* @__PURE__ */ e(ge, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    /* @__PURE__ */ e(r, { onClick: () => t.chain().focus().redo().run(), disabled: !t.can().redo(), title: "Redo", children: /* @__PURE__ */ e(pe, { className: "h-ico-sm w-ico-sm", stroke: 2 }) })
+  ] });
+}
+const ve = c.lazy(() => import("../node_modules/.pnpm/@emoji-mart_react@1.1.1_emoji-mart@5.6.0_react@19.2.4/node_modules/@emoji-mart/react/dist/module.js"));
+function we({ onSelect: t }) {
+  const [n, a] = c.useState(null), { colorMode: l } = X();
+  c.useEffect(() => {
+    import("../node_modules/.pnpm/@emoji-mart_data@1.2.1/node_modules/@emoji-mart/data/sets/15/native.json.js").then((u) => a(u.default));
+  }, []);
+  const d = /* @__PURE__ */ e("div", { className: "flex h-[350px] w-[352px] items-center justify-center rounded-ds-lg border border-border bg-layer-01 shadow-02", children: /* @__PURE__ */ e("span", { className: "text-ds-sm text-text-placeholder", children: "Loading..." }) });
+  return n ? /* @__PURE__ */ e(c.Suspense, { fallback: d, children: /* @__PURE__ */ e(
+    ve,
+    {
+      data: n,
+      onEmojiSelect: (u) => t(u.native),
+      theme: l === "dark" ? "dark" : "light",
+      previewPosition: "none",
+      skinTonePosition: "none"
+    }
+  ) }) : d;
+}
+const _e = c.forwardRef(
   function({
-    content: o = "",
-    placeholder: l = "Start writing...",
-    onChange: i,
-    className: c,
-    editable: a = !0
-  }, p) {
-    const r = x({
+    content: n = "",
+    placeholder: a = "Start writing...",
+    onChange: l,
+    className: d,
+    editable: u = !0,
+    onImageUpload: x,
+    onFileUpload: h,
+    mentions: g,
+    onMentionSearch: m,
+    onMentionSelect: A
+  }, W) {
+    const y = c.useRef(null), [I, v] = c.useState(!1), N = c.useRef(null), T = c.useRef(null), R = c.useRef(null), C = async (i) => {
+      const o = y.current;
+      if (o)
+        if (x) {
+          const s = await x(i);
+          s && /^https?:\/\//i.test(s) && o.chain().focus().setImage({ src: s }).run();
+        } else {
+          const s = new FileReader();
+          s.onload = () => {
+            o.chain().focus().setImage({ src: s.result }).run();
+          }, s.readAsDataURL(i);
+        }
+    }, L = async (i) => {
+      const o = y.current;
+      if (!o || !h) return;
+      const s = await h(i);
+      o.chain().focus().insertContent({
+        type: "fileAttachment",
+        attrs: { url: s.url, name: s.name, size: s.size }
+      }).run();
+    }, f = S({
       extensions: [
-        u.configure({
+        B.configure({
           heading: { levels: [2, 3] }
         }),
-        f.configure({
-          placeholder: l,
+        G.configure({
+          placeholder: a,
           emptyEditorClass: "before:content-[attr(data-placeholder)] before:text-text-placeholder before:float-left before:h-0 before:pointer-events-none"
-        })
+        }),
+        P,
+        M.configure({ multicolor: !1 }),
+        j,
+        D.configure({ nested: !0 }),
+        z.configure({ types: ["heading", "paragraph"] }),
+        q.configure({
+          openOnClick: !1,
+          protocols: ["http", "https", "mailto"],
+          validate: (i) => /^(https?:\/\/|mailto:)/i.test(i),
+          HTMLAttributes: {
+            rel: "noopener noreferrer",
+            target: "_blank"
+          }
+        }),
+        U.configure({
+          allowBase64: !0,
+          HTMLAttributes: {
+            class: "max-w-full rounded-ds-md"
+          }
+        }),
+        K,
+        ...g || m ? [
+          O.configure({
+            HTMLAttributes: { class: "mention" },
+            suggestion: {
+              items: async ({ query: i }) => m ? await m(i) : g ? g.filter((o) => o.label.toLowerCase().includes(i.toLowerCase())).slice(0, 8) : [],
+              render: J()
+            }
+          })
+        ] : [],
+        Q
       ],
-      content: o,
-      editable: a,
+      content: n,
+      editable: u,
       editorProps: {
+        handleDrop: (i, o, s, w) => {
+          var E;
+          if (w || !((E = o.dataTransfer) != null && E.files.length)) return !1;
+          const _ = o.dataTransfer.files[0];
+          return _ ? _.type.startsWith("image/") ? (C(_), !0) : h ? (L(_), !0) : !1 : !1;
+        },
+        handlePaste: (i, o) => {
+          var w;
+          const s = (w = o.clipboardData) == null ? void 0 : w.files[0];
+          return s ? s.type.startsWith("image/") ? (C(s), !0) : h ? (L(s), !0) : !1 : !1;
+        },
         attributes: {
-          class: d(
-            "prose prose-sm max-w-none focus:outline-none",
-            "min-h-[120px] px-ds-04 py-ds-04",
-            "font-body text-ds-md leading-relaxed text-text-primary",
-            "[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-text-primary",
-            "[&_h3]:text-ds-base [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-text-primary",
-            "[&_p]:mb-ds-02b [&_p]:text-text-secondary",
-            "[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal",
-            "[&_li]:text-text-secondary",
-            "[&_code]:rounded [&_code]:bg-layer-02 [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-interactive",
-            "[&_pre]:rounded-ds-lg [&_pre]:bg-layer-02 [&_pre]:p-ds-04",
-            "[&_strong]:font-semibold [&_strong]:text-text-primary"
+          class: k(
+            ...V,
+            "focus:outline-none",
+            "min-h-[120px] px-ds-04 py-ds-04"
           )
         }
       },
-      onUpdate: ({ editor: b }) => {
-        i == null || i(b.getHTML());
+      onUpdate: ({ editor: i }) => {
+        l == null || l(i.getHTML());
       }
     });
-    return n.useEffect(() => {
-      r && o !== r.getHTML() && r.commands.setContent(o, !1);
-    }, [r, o]), r ? /* @__PURE__ */ m(
-      "div",
-      {
-        ref: p,
-        className: d(
-          "overflow-hidden rounded-ds-lg border border-border bg-layer-01",
-          "transition-colors focus-within:border-border-strong",
-          c
-        ),
-        children: [
-          a && /* @__PURE__ */ e(R, { editor: r }),
-          /* @__PURE__ */ e(h, { editor: r })
-        ]
-      }
-    ) : null;
+    return c.useEffect(() => {
+      y.current = f;
+    }, [f]), c.useEffect(() => {
+      if (!I) return;
+      const i = (o) => {
+        N.current && !N.current.contains(o.target) && v(!1);
+      };
+      return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+    }, [I]), c.useEffect(() => {
+      f && n !== f.getHTML() && f.commands.setContent(n, !1);
+    }, [f, n]), f ? /* @__PURE__ */ b("div", { ref: W, className: k("relative", d), children: [
+      I && /* @__PURE__ */ e(
+        "div",
+        {
+          ref: N,
+          className: "absolute bottom-full right-0 z-popover mb-ds-02",
+          onKeyDown: (i) => {
+            i.key === "Escape" && (i.stopPropagation(), v(!1));
+          },
+          children: /* @__PURE__ */ e(
+            we,
+            {
+              onSelect: (i) => {
+                f.chain().focus().insertContent(i).run(), v(!1);
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ b(
+        "div",
+        {
+          className: k(
+            "overflow-hidden rounded-ds-lg border border-border bg-layer-01",
+            "transition-colors focus-within:border-border-strong"
+          ),
+          children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: T,
+                type: "file",
+                accept: "image/*",
+                "aria-label": "Upload image",
+                className: "hidden",
+                onChange: (i) => {
+                  var s;
+                  const o = (s = i.target.files) == null ? void 0 : s[0];
+                  o && C(o), i.target.value = "";
+                }
+              }
+            ),
+            h && /* @__PURE__ */ e(
+              "input",
+              {
+                ref: R,
+                type: "file",
+                "aria-label": "Upload file",
+                className: "hidden",
+                onChange: (i) => {
+                  var s;
+                  const o = (s = i.target.files) == null ? void 0 : s[0];
+                  o && L(o), i.target.value = "";
+                }
+              }
+            ),
+            u && /* @__PURE__ */ e(
+              xe,
+              {
+                editor: f,
+                onImageClick: () => {
+                  var i;
+                  return (i = T.current) == null ? void 0 : i.click();
+                },
+                onFileClick: h ? () => {
+                  var i;
+                  return (i = R.current) == null ? void 0 : i.click();
+                } : void 0,
+                onEmojiClick: () => v((i) => !i)
+              }
+            ),
+            /* @__PURE__ */ e(H, { editor: f })
+          ]
+        }
+      )
+    ] }) : null;
   }
 );
-T.displayName = "RichTextEditor";
-const B = n.forwardRef(
-  function({ content: o, className: l }, i) {
-    const c = x({
+_e.displayName = "RichTextEditor";
+const Ae = c.forwardRef(
+  function({ content: n, className: a }, l) {
+    const d = S({
       extensions: [
-        u.configure({
+        B.configure({
           heading: { levels: [2, 3] }
+        }),
+        P,
+        M.configure({ multicolor: !1 }),
+        j,
+        D.configure({ nested: !0 }),
+        z.configure({ types: ["heading", "paragraph"] }),
+        q.configure({
+          openOnClick: !0,
+          protocols: ["http", "https", "mailto"],
+          validate: (u) => /^(https?:\/\/|mailto:)/i.test(u),
+          HTMLAttributes: {
+            rel: "noopener noreferrer",
+            target: "_blank"
+          }
+        }),
+        U.configure({
+          allowBase64: !0,
+          HTMLAttributes: {
+            class: "max-w-full rounded-ds-md"
+          }
+        }),
+        K,
+        O.configure({
+          HTMLAttributes: { class: "mention" }
         })
       ],
-      content: o,
+      content: n,
       editable: !1,
       editorProps: {
         attributes: {
-          class: d(
-            "prose prose-sm max-w-none",
-            "font-body text-ds-md leading-relaxed text-text-primary",
-            "[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-text-primary",
-            "[&_h3]:text-ds-base [&_h3]:font-semibold [&_h3]:mb-ds-02b [&_h3]:mt-ds-04 [&_h3]:text-text-primary",
-            "[&_p]:mb-ds-02b [&_p]:text-text-secondary",
-            "[&_ul]:ml-ds-05 [&_ul]:list-disc [&_ol]:ml-ds-05 [&_ol]:list-decimal",
-            "[&_li]:text-text-secondary",
-            "[&_code]:rounded [&_code]:bg-layer-02 [&_code]:px-ds-02b [&_code]:py-ds-01 [&_code]:text-ds-md [&_code]:text-interactive",
-            "[&_pre]:rounded-ds-lg [&_pre]:bg-layer-02 [&_pre]:p-ds-04",
-            "[&_strong]:font-semibold [&_strong]:text-text-primary"
-          )
+          class: k(...V)
         }
       }
     });
-    return c ? /* @__PURE__ */ e("div", { ref: i, className: l, children: /* @__PURE__ */ e(h, { editor: c }) }) : null;
+    return d ? /* @__PURE__ */ e("div", { ref: l, className: a, children: /* @__PURE__ */ e(H, { editor: d }) }) : null;
   }
 );
-B.displayName = "RichTextViewer";
+Ae.displayName = "RichTextViewer";
 export {
-  T as RichTextEditor,
-  B as RichTextViewer
+  _e as RichTextEditor,
+  Ae as RichTextViewer
 };

package/dist/composed/status-badge.d.ts

@@ -5,10 +5,20 @@ declare const statusBadgeVariants: (props?: ({
     color?: "error" | "warning" | "success" | "neutral" | "info" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'>, VariantProps<typeof statusBadgeVariants> {
+interface StatusBadgeBaseProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {
     label?: string;
     hideDot?: boolean;
+    size?: VariantProps<typeof statusBadgeVariants>['size'];
 }
+interface StatusBadgeWithStatus extends StatusBadgeBaseProps {
+    status?: VariantProps<typeof statusBadgeVariants>['status'];
+    color?: never;
+}
+interface StatusBadgeWithColor extends StatusBadgeBaseProps {
+    status?: never;
+    color: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+}
+export type StatusBadgeProps = StatusBadgeWithStatus | StatusBadgeWithColor;
 declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export { StatusBadge, statusBadgeVariants };
 //# sourceMappingURL=status-badge.d.ts.map

package/dist/composed/status-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/composed/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,mBAAmB;;;;8EA8BxB,CAAA;AAqBD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACvE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,WAAW,0FAwChB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/composed/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,mBAAmB;;;;8EA8BxB,CAAA;AAqBD,UAAU,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACtG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;CACxD;AAED,UAAU,qBAAsB,SAAQ,oBAAoB;IAC1D,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;CAC5D;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAE3E,QAAA,MAAM,WAAW,0FA2DhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}