@devalok/shilp-sutra 0.7.0 → 0.8.0

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

@@ -1,14 +1,14 @@
 "use client";
-import { jsxs as k, jsx as e } from "react/jsx-runtime";
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
 import * as c from "react";
-import { useEditor as E, EditorContent as H } from "@tiptap/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 z from "@tiptap/extension-task-item";
-import D from "@tiptap/extension-text-align";
+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";
@@ -16,8 +16,8 @@ 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 w } 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 ne, IconListCheck as oe, IconCode as ce, IconPhoto as le, IconPaperclip as ae, IconLineDashed as ue, IconAlignLeft as de, IconAlignCenter as me, IconAlignRight as fe, IconMoodSmile as he, IconArrowBackUp as ge, IconArrowForwardUp as pe, IconLink as ke } from "@tabler/icons-react";
+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",
@@ -37,12 +37,12 @@ const V = [
   "[&_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 s({
+function r({
   onClick: t,
-  isActive: o = !1,
+  isActive: n = !1,
   disabled: a = !1,
   title: l,
-  children: u
+  children: d
 }) {
   return /* @__PURE__ */ e(
     "button",
@@ -51,36 +51,36 @@ function s({
       onClick: t,
       disabled: a,
       title: l,
-      "aria-pressed": o,
-      className: w(
+      "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: u
+      children: d
     }
   );
 }
 function be({ editor: t }) {
-  const [o, a] = c.useState(!1), [l, u] = c.useState(""), f = c.useRef(null), b = () => {
+  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 d = t.getAttributes("link").href || "";
-    u(d), a(!0), setTimeout(() => {
-      var _;
-      return (_ = f.current) == null ? void 0 : _.focus();
+    const m = t.getAttributes("link").href || "";
+    d(m), a(!0), setTimeout(() => {
+      var A;
+      return (A = u.current) == null ? void 0 : A.focus();
     }, 0);
-  }, h = (d) => {
-    d.preventDefault(), l.trim() && t.chain().focus().setLink({ href: l.trim() }).run(), a(!1), u("");
-  }, g = (d) => {
-    d.key === "Escape" && (a(!1), u(""), t.commands.focus());
+  }, 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__ */ k("div", { className: "relative", children: [
-    /* @__PURE__ */ e(s, { onClick: b, isActive: t.isActive("link"), title: "Link", children: /* @__PURE__ */ e(ke, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
-    o && /* @__PURE__ */ k(
+  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",
       {
         onSubmit: h,
@@ -90,10 +90,10 @@ function be({ editor: t }) {
           /* @__PURE__ */ e(
             "input",
             {
-              ref: f,
+              ref: u,
               type: "url",
               value: l,
-              onChange: (d) => u(d.target.value),
+              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"
@@ -108,89 +108,89 @@ function be({ editor: t }) {
 function p() {
   return /* @__PURE__ */ e("div", { className: "mx-ds-02 h-[16px] w-px bg-border" });
 }
-function xe({ editor: t, onImageClick: o, onFileClick: a, onEmojiClick: l }) {
-  return /* @__PURE__ */ k("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(Y, { 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(Z, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
-    /* @__PURE__ */ e(s, { 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(s, { 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(s, { 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 }) }),
+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(s, { 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(s, { 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(s, { 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(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(s, { 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(s, { onClick: () => t.chain().focus().toggleOrderedList().run(), isActive: t.isActive("orderedList"), title: "Ordered list", children: /* @__PURE__ */ e(ne, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
-    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().toggleTaskList().run(), isActive: t.isActive("taskList"), title: "Task list", children: /* @__PURE__ */ e(oe, { 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(ce, { className: "h-ico-sm w-ico-sm", stroke: 2.5 }) }),
+    /* @__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 }),
-    o && /* @__PURE__ */ e(s, { onClick: o, title: "Insert image", children: /* @__PURE__ */ e(le, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
-    a && /* @__PURE__ */ e(s, { onClick: a, title: "Attach file", children: /* @__PURE__ */ e(ae, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
-    /* @__PURE__ */ e(s, { onClick: () => t.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ e(ue, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
+    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(s, { onClick: () => t.chain().focus().setTextAlign("left").run(), isActive: t.isActive({ textAlign: "left" }), title: "Align left", children: /* @__PURE__ */ e(de, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
-    /* @__PURE__ */ e(s, { 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(s, { 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(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(s, { onClick: l, title: "Emoji", children: /* @__PURE__ */ e(he, { className: "h-ico-sm w-ico-sm", stroke: 2 }) }),
-    /* @__PURE__ */ e(s, { 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(s, { 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 }) })
+    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("../_virtual/shilp-sutra.js"));
+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 [o, a] = c.useState(null), { colorMode: l } = X();
+  const [n, a] = c.useState(null), { colorMode: l } = X();
   c.useEffect(() => {
-    import("../_virtual/shilp-sutra2.js").then((f) => a(f.default));
+    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 u = /* @__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 o ? /* @__PURE__ */ e(c.Suspense, { fallback: u, children: /* @__PURE__ */ e(
+  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: o,
-      onEmojiSelect: (f) => t(f.native),
+      data: n,
+      onEmojiSelect: (u) => t(u.native),
       theme: l === "dark" ? "dark" : "light",
       previewPosition: "none",
       skinTonePosition: "none"
     }
-  ) }) : u;
+  ) }) : d;
 }
 const _e = c.forwardRef(
   function({
-    content: o = "",
+    content: n = "",
     placeholder: a = "Start writing...",
     onChange: l,
-    className: u,
-    editable: f = !0,
-    onImageUpload: b,
+    className: d,
+    editable: u = !0,
+    onImageUpload: x,
     onFileUpload: h,
     mentions: g,
-    onMentionSearch: d,
-    onMentionSelect: _
+    onMentionSearch: m,
+    onMentionSelect: A
   }, W) {
-    const A = c.useRef(null), [y, I] = c.useState(!1), N = c.useRef(null), T = c.useRef(null), R = c.useRef(null), C = async (i) => {
-      const r = A.current;
-      if (r)
-        if (b) {
-          const n = await b(i);
-          r.chain().focus().setImage({ src: n }).run();
+    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 n = new FileReader();
-          n.onload = () => {
-            r.chain().focus().setImage({ src: n.result }).run();
-          }, n.readAsDataURL(i);
+          const s = new FileReader();
+          s.onload = () => {
+            o.chain().focus().setImage({ src: s.result }).run();
+          }, s.readAsDataURL(i);
         }
     }, L = async (i) => {
-      const r = A.current;
-      if (!r || !h) return;
-      const n = await h(i);
-      r.chain().focus().insertContent({
+      const o = y.current;
+      if (!o || !h) return;
+      const s = await h(i);
+      o.chain().focus().insertContent({
         type: "fileAttachment",
-        attrs: { url: n.url, name: n.name, size: n.size }
+        attrs: { url: s.url, name: s.name, size: s.size }
       }).run();
-    }, m = E({
+    }, f = S({
       extensions: [
         B.configure({
           heading: { levels: [2, 3] }
@@ -202,10 +202,12 @@ const _e = c.forwardRef(
         P,
         M.configure({ multicolor: !1 }),
         j,
-        z.configure({ nested: !0 }),
-        D.configure({ types: ["heading", "paragraph"] }),
+        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"
@@ -218,33 +220,33 @@ const _e = c.forwardRef(
           }
         }),
         K,
-        ...g || d ? [
+        ...g || m ? [
           O.configure({
             HTMLAttributes: { class: "mention" },
             suggestion: {
-              items: async ({ query: i }) => d ? await d(i) : g ? g.filter((r) => r.label.toLowerCase().includes(i.toLowerCase())).slice(0, 8) : [],
+              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: f,
+      content: n,
+      editable: u,
       editorProps: {
-        handleDrop: (i, r, n, x) => {
-          var S;
-          if (x || !((S = r.dataTransfer) != null && S.files.length)) return !1;
-          const v = r.dataTransfer.files[0];
-          return v ? v.type.startsWith("image/") ? (C(v), !0) : h ? (L(v), !0) : !1 : !1;
+        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, r) => {
-          var x;
-          const n = (x = r.clipboardData) == null ? void 0 : x.files[0];
-          return n ? n.type.startsWith("image/") ? (C(n), !0) : h ? (L(n), !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: w(
+          class: k(
             ...V,
             "focus:outline-none",
             "min-h-[120px] px-ds-04 py-ds-04"
@@ -256,59 +258,75 @@ const _e = c.forwardRef(
       }
     });
     return c.useEffect(() => {
-      A.current = m;
-    }, [m]), c.useEffect(() => {
-      if (!y) return;
-      const i = (r) => {
-        N.current && !N.current.contains(r.target) && I(!1);
+      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);
-    }, [y]), c.useEffect(() => {
-      m && o !== m.getHTML() && m.commands.setContent(o, !1);
-    }, [m, o]), m ? /* @__PURE__ */ k(
-      "div",
-      {
-        ref: W,
-        className: w(
-          "overflow-hidden rounded-ds-lg border border-border bg-layer-01",
-          "transition-colors focus-within:border-border-strong",
-          u
-        ),
-        children: [
-          /* @__PURE__ */ e(
-            "input",
+    }, [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,
             {
-              ref: T,
-              type: "file",
-              accept: "image/*",
-              "aria-label": "Upload image",
-              className: "hidden",
-              onChange: (i) => {
-                var n;
-                const r = (n = i.target.files) == null ? void 0 : n[0];
-                r && C(r), i.target.value = "";
-              }
-            }
-          ),
-          h && /* @__PURE__ */ e(
-            "input",
-            {
-              ref: R,
-              type: "file",
-              "aria-label": "Upload file",
-              className: "hidden",
-              onChange: (i) => {
-                var n;
-                const r = (n = i.target.files) == null ? void 0 : n[0];
-                r && L(r), i.target.value = "";
+              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"
           ),
-          f && /* @__PURE__ */ k("div", { className: "relative", children: [
+          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: m,
+                editor: f,
                 onImageClick: () => {
                   var i;
                   return (i = T.current) == null ? void 0 : i.click();
@@ -317,28 +335,20 @@ const _e = c.forwardRef(
                   var i;
                   return (i = R.current) == null ? void 0 : i.click();
                 } : void 0,
-                onEmojiClick: () => I((i) => !i)
+                onEmojiClick: () => v((i) => !i)
               }
             ),
-            y && /* @__PURE__ */ e("div", { ref: N, className: "absolute right-0 top-full z-popover", children: /* @__PURE__ */ e(
-              we,
-              {
-                onSelect: (i) => {
-                  m.chain().focus().insertContent(i).run(), I(!1);
-                }
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ e(H, { editor: m })
-        ]
-      }
-    ) : null;
+            /* @__PURE__ */ e(H, { editor: f })
+          ]
+        }
+      )
+    ] }) : null;
   }
 );
 _e.displayName = "RichTextEditor";
 const Ae = c.forwardRef(
-  function({ content: o, className: a }, l) {
-    const u = E({
+  function({ content: n, className: a }, l) {
+    const d = S({
       extensions: [
         B.configure({
           heading: { levels: [2, 3] }
@@ -346,10 +356,12 @@ const Ae = c.forwardRef(
         P,
         M.configure({ multicolor: !1 }),
         j,
-        z.configure({ nested: !0 }),
-        D.configure({ types: ["heading", "paragraph"] }),
+        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"
@@ -366,15 +378,15 @@ const Ae = c.forwardRef(
           HTMLAttributes: { class: "mention" }
         })
       ],
-      content: o,
+      content: n,
       editable: !1,
       editorProps: {
         attributes: {
-          class: w(...V)
+          class: k(...V)
         }
       }
     });
-    return u ? /* @__PURE__ */ e("div", { ref: l, className: a, children: /* @__PURE__ */ e(H, { editor: u }) }) : null;
+    return d ? /* @__PURE__ */ e("div", { ref: l, className: a, children: /* @__PURE__ */ e(H, { editor: d }) }) : null;
   }
 );
 Ae.displayName = "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"}

package/dist/composed/status-badge.js

@@ -1,8 +1,8 @@
-import { jsxs as b, jsx as p } from "react/jsx-runtime";
-import * as f from "react";
-import { cva as m } from "class-variance-authority";
-import { cn as a } from "../ui/lib/utils.js";
-const y = m(
+import { jsxs as i, jsx as u } from "react/jsx-runtime";
+import * as m from "react";
+import { cva as y } from "class-variance-authority";
+import { cn as r } from "../ui/lib/utils.js";
+const g = y(
   "inline-flex items-center gap-ds-02b rounded-ds-full font-body",
   {
     variants: {
@@ -47,31 +47,59 @@ const y = m(
   error: "bg-error",
   info: "bg-info",
   neutral: "bg-icon-secondary"
-}, v = f.forwardRef(
-  ({ status: c, color: e, size: r, label: o, hideDot: n = !1, className: d, ...i }, u) => {
-    const t = e != null, s = t ? void 0 : c ?? "pending", g = t ? e : void 0, l = o ?? (t ? e.charAt(0).toUpperCase() + e.slice(1) : s.charAt(0).toUpperCase() + s.slice(1)), x = t ? h[e] : w[s];
-    return /* @__PURE__ */ b(
+}, v = m.forwardRef(
+  ({ status: l, color: e, size: s, label: a, hideDot: c = !1, className: n, ...d }, o) => {
+    if (e != null) {
+      const p = a ?? e.charAt(0).toUpperCase() + e.slice(1), f = h[e];
+      return /* @__PURE__ */ i(
+        "span",
+        {
+          ref: o,
+          className: r(
+            g({ color: e, size: s }),
+            n
+          ),
+          ...d,
+          children: [
+            !c && /* @__PURE__ */ u(
+              "span",
+              {
+                className: r(
+                  "shrink-0 rounded-ds-full",
+                  s === "sm" ? "h-ds-02b w-ds-02b" : "h-[8px] w-[8px]",
+                  f
+                ),
+                "aria-hidden": "true"
+              }
+            ),
+            p
+          ]
+        }
+      );
+    }
+    const t = l ?? "pending", x = a ?? t.charAt(0).toUpperCase() + t.slice(1), b = w[t];
+    return /* @__PURE__ */ i(
       "span",
       {
-        ref: u,
-        className: a(
-          y({ status: s, color: g, size: r }),
-          d
+        ref: o,
+        className: r(
+          g({ status: t, size: s }),
+          n
         ),
-        ...i,
+        ...d,
         children: [
-          !n && /* @__PURE__ */ p(
+          !c && /* @__PURE__ */ u(
             "span",
             {
-              className: a(
+              className: r(
                 "shrink-0 rounded-ds-full",
-                r === "sm" ? "h-ds-02b w-ds-02b" : "h-[8px] w-[8px]",
-                x
+                s === "sm" ? "h-ds-02b w-ds-02b" : "h-[8px] w-[8px]",
+                b
               ),
               "aria-hidden": "true"
             }
           ),
-          l
+          x
         ]
       }
     );
@@ -80,5 +108,5 @@ const y = m(
 v.displayName = "StatusBadge";
 export {
   v as StatusBadge,
-  y as statusBadgeVariants
+  g as statusBadgeVariants
 };