@forgedevstack/bear 1.1.0 → 1.1.3

package/dist/components/RichEditor/RichEditor.js

@@ -1,173 +1,176 @@
-import { jsxs as Re, jsx as t } from "react/jsx-runtime";
-import { useRef as Te, useState as I, useEffect as y, useCallback as d } from "react";
-import { cn as R } from "../../utils/cn.js";
-import { getActiveFormats as be, queryCommandValue as _e, execCommand as u, insertLink as Ee, setTextColor as x, setHighlightColor as A, fileToDataUrl as S, insertImage as v } from "./helpers/formatHelpers.js";
-import { RICH_EDITOR_MIN_HEIGHT as ye, RICH_EDITOR_DEFAULT_TOOLBAR as Le, RICH_EDITOR_CONTENT_STYLES as He, RICH_EDITOR_BUTTON_CONFIG as B, RICH_EDITOR_MOBILE_TOOLBAR as Oe, RICH_EDITOR_TOOLBAR_CLASSES as ze, RICH_EDITOR_CONTENT_CLASSES as ke, RICH_EDITOR_ROOT_CLASSES as xe, RICH_EDITOR_DIVIDER_CLASSES as Ae, RICH_EDITOR_HEADING_OPTIONS as Se, RICH_EDITOR_MOBILE_MORE_ITEMS as ve, RICH_EDITOR_MOBILE_BREAKPOINT as Be } from "./RichEditor.const.js";
-import { useMediaQuery as De } from "../../hooks/useMediaQuery.js";
+import { jsxs as S, jsx as t } from "react/jsx-runtime";
+import { useRef as ye, useState as C, useEffect as x, useCallback as d } from "react";
+import { cn as p } from "../../utils/cn.js";
+import { getActiveFormats as Le, queryCommandValue as xe, execCommand as u, insertLink as He, setTextColor as B, setHighlightColor as D, fileToDataUrl as N, insertImage as F } from "./helpers/formatHelpers.js";
+import { RICH_EDITOR_MIN_HEIGHT as Oe, RICH_EDITOR_DEFAULT_TOOLBAR as ke, RICH_EDITOR_CONTENT_STYLES as ze, RICH_EDITOR_BUTTON_CONFIG as M, RICH_EDITOR_MOBILE_TOOLBAR as ve, RICH_EDITOR_TOOLBAR_CLASSES as Ae, RICH_EDITOR_CONTENT_CLASSES as Se, RICH_EDITOR_ROOT_CLASSES as Be, RICH_EDITOR_DIVIDER_CLASSES as De, RICH_EDITOR_HEADING_OPTIONS as Ne, RICH_EDITOR_MOBILE_MORE_ITEMS as Fe, RICH_EDITOR_MOBILE_BREAKPOINT as Me } from "./RichEditor.const.js";
+import { useMediaQuery as we } from "../../hooks/useMediaQuery.js";
 import { ToolbarButton as f } from "./components/ToolbarButton/ToolbarButton.js";
-import { ToolbarDropdown as Ne } from "./components/ToolbarDropdown/ToolbarDropdown.js";
-import { ToolbarColorPicker as D } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
-import { ToolbarMore as Fe } from "./components/ToolbarMore/ToolbarMore.js";
-import { TextIcon as Me, InsertLinkIcon as N, InsertPhotoIcon as F, AlignLeftIcon as M, AlignCenterIcon as w, AlignRightIcon as U, AlignJustifyIcon as V, IndentIncreaseIcon as P, IndentDecreaseIcon as j, FormatClearIcon as J, TableIcon as we, CodeIcon as Ue, QuoteIcon as Ve, ListNumberedIcon as Pe, ListBulletIcon as je, Heading3Icon as Je, Heading2Icon as $e, Heading1Icon as qe, StrikethroughIcon as Ge, UnderlineIcon as Ke, ItalicIcon as Qe, BoldIcon as Ye } from "../Icon/icons/editor.js";
-const We = 6, ct = ($) => {
+import { ToolbarDropdown as Ue } from "./components/ToolbarDropdown/ToolbarDropdown.js";
+import { ToolbarColorPicker as w } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
+import { ToolbarMore as Ve } from "./components/ToolbarMore/ToolbarMore.js";
+import { TextIcon as Pe, InsertLinkIcon as U, InsertPhotoIcon as V, AlignLeftIcon as P, AlignCenterIcon as j, AlignRightIcon as J, AlignJustifyIcon as $, IndentIncreaseIcon as q, IndentDecreaseIcon as G, FormatClearIcon as K, TableIcon as je, CodeIcon as Je, QuoteIcon as $e, ListNumberedIcon as qe, ListBulletIcon as Ge, Heading3Icon as Ke, Heading2Icon as Qe, Heading1Icon as Ye, StrikethroughIcon as We, UnderlineIcon as Xe, ItalicIcon as Ze, BoldIcon as et } from "../Icon/icons/editor.js";
+const tt = 6, gt = (Q) => {
   const {
-    value: C,
-    defaultValue: L = "",
-    onChange: T,
-    placeholder: q = "Start typing...",
-    disabled: i = !1,
+    value: I,
+    defaultValue: H = "",
+    onChange: R,
+    placeholder: Y = "Start typing...",
+    disabled: r = !1,
     readOnly: o = !1,
-    minHeight: b = ye,
+    minHeight: T = Oe,
     maxHeight: m,
-    toolbar: G = Le,
-    className: K = "",
-    testId: Q,
-    id: Y,
-    allowImagePaste: H = !0,
-    ...W
-  } = $, a = Te(null), _ = De(`(max-width: ${Be}px)`), O = _ ? Oe : G, [X, Z] = I(/* @__PURE__ */ new Set()), [ee, z] = I("p"), [te, ne] = I("#000000"), [ie, oe] = I("#fef08a"), [re, le] = I([]), [ae, se] = I([]);
-  y(() => {
+    toolbar: W = ke,
+    className: X = "",
+    testId: Z,
+    id: ee,
+    allowImagePaste: O = !0,
+    showCharCount: _ = !1,
+    charCountMax: E,
+    ...te
+  } = Q, l = ye(null), y = we(`(max-width: ${Me}px)`), k = y ? ve : W, [ne, re] = C(/* @__PURE__ */ new Set()), [oe, z] = C("p"), [v, ie] = C(0), [ae, le] = C("#000000"), [se, ce] = C("#fef08a"), [de, ue] = C([]), [fe, ge] = C([]);
+  x(() => {
     const e = "bear-rich-editor-styles";
     if (!document.getElementById(e)) {
       const n = document.createElement("style");
-      n.id = e, n.textContent = He, document.head.appendChild(n);
+      n.id = e, n.textContent = ze, document.head.appendChild(n);
     }
-  }, []), y(() => {
-    a.current && C !== void 0 && a.current.innerHTML !== C && (a.current.innerHTML = C);
-  }, [C]), y(() => {
-    a.current && L && !C && (a.current.innerHTML = L);
+  }, []), x(() => {
+    l.current && I !== void 0 && l.current.innerHTML !== I && (l.current.innerHTML = I);
+  }, [I]), x(() => {
+    l.current && H && !I && (l.current.innerHTML = H);
   }, []);
   const h = d(() => {
-    Z(be());
-    const e = _e("formatBlock");
+    re(Le());
+    const e = xe("formatBlock");
     e && z(e.toLowerCase().replace(/[<>]/g, ""));
-  }, []), l = d(() => {
-    a.current && T && T(a.current.innerHTML), h();
-  }, [T, h]), ce = d((e) => {
+  }, []), a = d(() => {
+    var e;
+    l.current && (R && R(l.current.innerHTML), _ && ie(((e = l.current.textContent) == null ? void 0 : e.length) ?? 0)), h();
+  }, [R, h, _]), he = d((e) => {
     var s;
-    if (i || o) return;
-    (s = a.current) == null || s.focus();
-    const n = B[e];
+    if (r || o) return;
+    (s = l.current) == null || s.focus();
+    const n = M[e];
     if (!n) return;
     const c = "value" in n ? n.value : void 0;
-    c ? u(n.command, c) : u(n.command), h(), l();
-  }, [i, o, h, l]), de = d((e) => {
+    c ? u(n.command, c) : u(n.command), h(), a();
+  }, [r, o, h, a]), Ce = d((e) => {
     var n;
-    i || o || ((n = a.current) == null || n.focus(), u("formatBlock", e), z(e), l());
-  }, [i, o, l]), ue = d(() => {
+    r || o || ((n = l.current) == null || n.focus(), u("formatBlock", e), z(e), a());
+  }, [r, o, a]), Ie = d(() => {
     var s;
-    if (i || o) return;
+    if (r || o) return;
     const e = window.getSelection(), n = e && e.toString().length > 0, c = prompt("Enter URL:", n ? "" : "https://");
-    c && ((s = a.current) == null || s.focus(), Ee(c), l());
-  }, [i, o, l]), p = d((e, n) => {
+    c && ((s = l.current) == null || s.focus(), He(c), a());
+  }, [r, o, a]), b = d((e, n) => {
     if (!e) return;
-    (n === "text" ? le : se)((s) => {
-      const r = s.filter((g) => g !== e);
-      return [e, ...r].slice(0, We);
+    (n === "text" ? ue : ge)((s) => {
+      const i = s.filter((g) => g !== e);
+      return [e, ...i].slice(0, tt);
     });
-  }, []), fe = d((e) => {
+  }, []), me = d((e) => {
     var n;
-    i || o || ((n = a.current) == null || n.focus(), x(e), ne(e), p(e, "text"), l());
-  }, [i, o, l, p]), ge = d((e) => {
+    r || o || ((n = l.current) == null || n.focus(), B(e), le(e), b(e, "text"), a());
+  }, [r, o, a, b]), pe = d((e) => {
     var n;
-    i || o || ((n = a.current) == null || n.focus(), A(e), oe(e), p(e, "highlight"), l());
-  }, [i, o, l, p]), he = d((e) => {
+    r || o || ((n = l.current) == null || n.focus(), D(e), ce(e), b(e, "highlight"), a());
+  }, [r, o, a, b]), be = d((e) => {
     var n;
-    i || o || ((n = a.current) == null || n.focus(), x(e), l());
-  }, [i, o, l]), Ie = d((e) => {
+    r || o || ((n = l.current) == null || n.focus(), B(e), a());
+  }, [r, o, a]), Re = d((e) => {
     var n;
-    i || o || ((n = a.current) == null || n.focus(), A(e), l());
-  }, [i, o, l]), Ce = d(async (e) => {
+    r || o || ((n = l.current) == null || n.focus(), D(e), a());
+  }, [r, o, a]), Te = d(async (e) => {
     var c;
-    if (!H) return;
+    if (!O) return;
     const n = (c = e.clipboardData) == null ? void 0 : c.items;
     if (n)
       for (let s = 0; s < n.length; s++) {
-        const r = n[s];
-        if (r.type.startsWith("image/")) {
+        const i = n[s];
+        if (i.type.startsWith("image/")) {
           e.preventDefault();
-          const g = r.getAsFile();
+          const g = i.getAsFile();
           if (g) {
-            const E = await S(g);
-            v(E), l();
+            const L = await N(g);
+            F(L), a();
           }
           return;
         }
       }
-  }, [H, l]), me = d(() => {
-    if (i || o) return;
+  }, [O, a]), _e = d(() => {
+    if (r || o) return;
     const e = document.createElement("input");
     e.type = "file", e.accept = "image/*", e.onchange = async (n) => {
-      var s, r;
+      var s, i;
       const c = (s = n.target.files) == null ? void 0 : s[0];
       if (c) {
-        const g = await S(c);
-        (r = a.current) == null || r.focus(), v(g), l();
+        const g = await N(c);
+        (i = l.current) == null || i.focus(), F(g), a();
       }
     }, e.click();
-  }, [i, o, l]), pe = {
-    bold: /* @__PURE__ */ t(Ye, { size: 16 }),
-    italic: /* @__PURE__ */ t(Qe, { size: 16 }),
-    underline: /* @__PURE__ */ t(Ke, { size: 16 }),
-    strikethrough: /* @__PURE__ */ t(Ge, { size: 16 }),
-    heading1: /* @__PURE__ */ t(qe, { size: 16 }),
-    heading2: /* @__PURE__ */ t($e, { size: 16 }),
-    heading3: /* @__PURE__ */ t(Je, { size: 16 }),
-    bulletList: /* @__PURE__ */ t(je, { size: 16 }),
-    orderedList: /* @__PURE__ */ t(Pe, { size: 16 }),
-    blockquote: /* @__PURE__ */ t(Ve, { size: 16 }),
-    code: /* @__PURE__ */ t(Ue, { size: 16 }),
-    link: /* @__PURE__ */ t(N, { size: 16 }),
-    alignLeft: /* @__PURE__ */ t(M, { size: 16 }),
-    alignCenter: /* @__PURE__ */ t(w, { size: 16 }),
-    alignRight: /* @__PURE__ */ t(U, { size: 16 }),
-    alignJustify: /* @__PURE__ */ t(V, { size: 16 }),
-    image: /* @__PURE__ */ t(F, { size: 16 }),
-    indent: /* @__PURE__ */ t(P, { size: 16 }),
-    outdent: /* @__PURE__ */ t(j, { size: 16 }),
-    clearFormat: /* @__PURE__ */ t(J, { size: 16 }),
-    table: /* @__PURE__ */ t(we, { size: 16 })
-  }, k = (e, n) => {
+  }, [r, o, a]), Ee = {
+    bold: /* @__PURE__ */ t(et, { size: 16 }),
+    italic: /* @__PURE__ */ t(Ze, { size: 16 }),
+    underline: /* @__PURE__ */ t(Xe, { size: 16 }),
+    strikethrough: /* @__PURE__ */ t(We, { size: 16 }),
+    heading1: /* @__PURE__ */ t(Ye, { size: 16 }),
+    heading2: /* @__PURE__ */ t(Qe, { size: 16 }),
+    heading3: /* @__PURE__ */ t(Ke, { size: 16 }),
+    bulletList: /* @__PURE__ */ t(Ge, { size: 16 }),
+    orderedList: /* @__PURE__ */ t(qe, { size: 16 }),
+    blockquote: /* @__PURE__ */ t($e, { size: 16 }),
+    code: /* @__PURE__ */ t(Je, { size: 16 }),
+    link: /* @__PURE__ */ t(U, { size: 16 }),
+    alignLeft: /* @__PURE__ */ t(P, { size: 16 }),
+    alignCenter: /* @__PURE__ */ t(j, { size: 16 }),
+    alignRight: /* @__PURE__ */ t(J, { size: 16 }),
+    alignJustify: /* @__PURE__ */ t($, { size: 16 }),
+    image: /* @__PURE__ */ t(V, { size: 16 }),
+    indent: /* @__PURE__ */ t(q, { size: 16 }),
+    outdent: /* @__PURE__ */ t(G, { size: 16 }),
+    clearFormat: /* @__PURE__ */ t(K, { size: 16 }),
+    table: /* @__PURE__ */ t(je, { size: 16 })
+  }, A = (e, n) => {
     if (e === "divider")
-      return /* @__PURE__ */ t("div", { className: R("Bear-RichEditor__divider", Ae) }, `divider-${n}`);
+      return /* @__PURE__ */ t("div", { className: p("Bear-RichEditor__divider", De) }, `divider-${n}`);
     if (e === "headingDropdown")
       return /* @__PURE__ */ t(
-        Ne,
+        Ue,
         {
-          options: Se,
-          value: ee,
-          onChange: de,
+          options: Ne,
+          value: oe,
+          onChange: Ce,
           title: "Text Style",
-          disabled: i || o,
-          icon: /* @__PURE__ */ t(Me, { size: 16 })
+          disabled: r || o,
+          icon: /* @__PURE__ */ t(Pe, { size: 16 })
         },
         "heading-dropdown"
       );
     if (e === "textColor")
       return /* @__PURE__ */ t(
-        D,
+        w,
         {
-          value: te,
-          onChange: fe,
+          value: ae,
+          onChange: me,
           title: "Text Color",
-          disabled: i || o,
+          disabled: r || o,
           type: "text",
-          recentColors: re,
-          onApplyLast: he
+          recentColors: de,
+          onApplyLast: be
         },
         "text-color"
       );
     if (e === "highlightColor")
       return /* @__PURE__ */ t(
-        D,
+        w,
         {
-          value: ie,
-          onChange: ge,
+          value: se,
+          onChange: pe,
           title: "Highlight Color",
-          disabled: i || o,
+          disabled: r || o,
           type: "highlight",
-          recentColors: ae,
-          onApplyLast: Ie
+          recentColors: fe,
+          onApplyLast: Re
         },
         "highlight-color"
       );
@@ -175,10 +178,10 @@ const We = 6, ct = ($) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(N, { size: 16 }),
+          icon: /* @__PURE__ */ t(U, { size: 16 }),
           title: "Insert Link",
-          onClick: ue,
-          disabled: i || o
+          onClick: Ie,
+          disabled: r || o
         },
         "link"
       );
@@ -186,10 +189,10 @@ const We = 6, ct = ($) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(F, { size: 16 }),
+          icon: /* @__PURE__ */ t(V, { size: 16 }),
           title: "Insert Image",
-          onClick: me,
-          disabled: i || o
+          onClick: _e,
+          disabled: r || o
         },
         "image"
       );
@@ -197,13 +200,13 @@ const We = 6, ct = ($) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(M, { size: 16 }),
+          icon: /* @__PURE__ */ t(P, { size: 16 }),
           title: "Align Left",
           onClick: () => {
-            var r;
-            (r = a.current) == null || r.focus(), u("justifyLeft"), l();
+            var i;
+            (i = l.current) == null || i.focus(), u("justifyLeft"), a();
           },
-          disabled: i || o
+          disabled: r || o
         },
         "alignLeft"
       );
@@ -211,13 +214,13 @@ const We = 6, ct = ($) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(w, { size: 16 }),
+          icon: /* @__PURE__ */ t(j, { size: 16 }),
           title: "Align Center",
           onClick: () => {
-            var r;
-            (r = a.current) == null || r.focus(), u("justifyCenter"), l();
+            var i;
+            (i = l.current) == null || i.focus(), u("justifyCenter"), a();
           },
-          disabled: i || o
+          disabled: r || o
         },
         "alignCenter"
       );
@@ -225,13 +228,13 @@ const We = 6, ct = ($) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(U, { size: 16 }),
+          icon: /* @__PURE__ */ t(J, { size: 16 }),
           title: "Align Right",
           onClick: () => {
-            var r;
-            (r = a.current) == null || r.focus(), u("justifyRight"), l();
+            var i;
+            (i = l.current) == null || i.focus(), u("justifyRight"), a();
           },
-          disabled: i || o
+          disabled: r || o
         },
         "alignRight"
       );
@@ -239,13 +242,13 @@ const We = 6, ct = ($) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(V, { size: 16 }),
+          icon: /* @__PURE__ */ t($, { size: 16 }),
           title: "Justify",
           onClick: () => {
-            var r;
-            (r = a.current) == null || r.focus(), u("justifyFull"), l();
+            var i;
+            (i = l.current) == null || i.focus(), u("justifyFull"), a();
           },
-          disabled: i || o
+          disabled: r || o
         },
         "alignJustify"
       );
@@ -253,13 +256,13 @@ const We = 6, ct = ($) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(P, { size: 16 }),
+          icon: /* @__PURE__ */ t(q, { size: 16 }),
           title: "Increase Indent",
           onClick: () => {
-            var r;
-            (r = a.current) == null || r.focus(), u("indent"), l();
+            var i;
+            (i = l.current) == null || i.focus(), u("indent"), a();
           },
-          disabled: i || o
+          disabled: r || o
         },
         "indent"
       );
@@ -267,13 +270,13 @@ const We = 6, ct = ($) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(j, { size: 16 }),
+          icon: /* @__PURE__ */ t(G, { size: 16 }),
           title: "Decrease Indent",
           onClick: () => {
-            var r;
-            (r = a.current) == null || r.focus(), u("outdent"), l();
+            var i;
+            (i = l.current) == null || i.focus(), u("outdent"), a();
           },
-          disabled: i || o
+          disabled: r || o
         },
         "outdent"
       );
@@ -281,18 +284,18 @@ const We = 6, ct = ($) => {
       return /* @__PURE__ */ t(
         f,
         {
-          icon: /* @__PURE__ */ t(J, { size: 16 }),
+          icon: /* @__PURE__ */ t(K, { size: 16 }),
           title: "Clear Formatting",
           onClick: () => {
-            var r;
-            (r = a.current) == null || r.focus(), u("removeFormat"), l();
+            var i;
+            (i = l.current) == null || i.focus(), u("removeFormat"), a();
           },
-          disabled: i || o
+          disabled: r || o
         },
         "clearFormat"
       );
     if (e === "more")
-      return /* @__PURE__ */ t(Fe, { disabled: i || o, isMobile: _, children: (_ ? ve : [
+      return /* @__PURE__ */ t(Ve, { disabled: r || o, isMobile: y, children: (y ? Fe : [
         "alignLeft",
         "alignCenter",
         "alignRight",
@@ -302,63 +305,77 @@ const We = 6, ct = ($) => {
         "blockquote",
         "code",
         "clearFormat"
-      ]).map((g, E) => k(g, E + 1e3)) }, "more");
-    const c = B[e], s = pe[e];
+      ]).map((g, L) => A(g, L + 1e3)) }, "more");
+    const c = M[e], s = Ee[e];
     return !c || !s ? null : /* @__PURE__ */ t(
       f,
       {
         icon: s,
         title: c.title,
-        active: X.has(e),
-        onClick: () => ce(e),
-        disabled: i || o
+        active: ne.has(e),
+        onClick: () => he(e),
+        disabled: r || o
       },
       e
     );
   };
-  return /* @__PURE__ */ Re(
+  return /* @__PURE__ */ S(
     "div",
     {
-      id: Y,
-      "data-testid": Q,
-      className: R(
+      id: ee,
+      "data-testid": Z,
+      className: p(
         "Bear-RichEditor",
-        xe,
-        i && "Bear-RichEditor--disabled",
+        Be,
+        r && "Bear-RichEditor--disabled",
         o && "Bear-RichEditor--readonly",
-        K
+        X
       ),
-      ...W,
+      ...te,
       children: [
-        O.length > 0 && /* @__PURE__ */ t("div", { className: R("Bear-RichEditor__toolbar", ze), children: O.map((e, n) => k(e, n)) }),
+        k.length > 0 && /* @__PURE__ */ t("div", { className: p("Bear-RichEditor__toolbar", Ae), children: k.map((e, n) => A(e, n)) }),
         /* @__PURE__ */ t(
           "div",
           {
-            ref: a,
-            contentEditable: !i && !o,
-            onInput: l,
+            ref: l,
+            contentEditable: !r && !o,
+            onInput: a,
             onSelect: h,
             onKeyUp: h,
             onMouseUp: h,
-            onPaste: Ce,
-            "data-placeholder": q,
-            className: R(
+            onPaste: Te,
+            "data-placeholder": Y,
+            className: p(
               "Bear-RichEditor__content",
-              ke,
+              Se,
               "[&:empty]:before:bear-content-[attr(data-placeholder)] [&:empty]:before:bear-text-gray-400 [&:empty]:before:bear-pointer-events-none",
-              i && "Bear-RichEditor__content--disabled bear-opacity-50 bear-cursor-not-allowed"
+              r && "Bear-RichEditor__content--disabled bear-opacity-50 bear-cursor-not-allowed"
             ),
             style: {
-              minHeight: typeof b == "number" ? `${b}px` : b,
+              minHeight: typeof T == "number" ? `${T}px` : T,
               maxHeight: m ? typeof m == "number" ? `${m}px` : m : void 0,
               overflowY: m ? "auto" : void 0
             }
           }
+        ),
+        _ && E != null && /* @__PURE__ */ S(
+          "div",
+          {
+            className: p(
+              "Bear-RichEditor__char-count bear-text-xs bear-tabular-nums bear-px-3 bear-py-1.5 bear-text-right bear-border-t bear-border-gray-200 dark:bear-border-gray-700",
+              v > E ? "bear-text-red-500" : "bear-text-gray-400 dark:bear-text-gray-500"
+            ),
+            children: [
+              v,
+              "/",
+              E
+            ]
+          }
         )
       ]
     }
   );
 };
 export {
-  ct as RichEditor
+  gt as RichEditor
 };

package/dist/components/RichEditor/RichEditor.types.d.ts

@@ -24,6 +24,10 @@ export interface RichEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
     id?: string;
     /** Enable image paste support */
     allowImagePaste?: boolean;
+    /** Show live character count (plain-text length, HTML tags excluded) */
+    showCharCount?: boolean;
+    /** Max chars for counter display */
+    charCountMax?: number;
 }
 export type ToolbarOption = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'headingDropdown' | 'bulletList' | 'orderedList' | 'blockquote' | 'code' | 'link' | 'image' | 'textColor' | 'highlightColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'indent' | 'outdent' | 'clearFormat' | 'table' | 'divider' | 'more';
 export interface ToolbarButtonProps {

package/dist/components/Typewriter/Typewriter.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),t=require("react"),R=require("../../utils/cn.cjs"),r=require("./Typewriter.const.cjs"),X=b=>{const{text:f,speed:i=r.DEFAULT_SPEED,startDelay:N=r.DEFAULT_START_DELAY,deleteDelay:x=r.DEFAULT_DELETE_DELAY,deleteSpeed:d=r.DEFAULT_DELETE_SPEED,loop:_=!1,cursor:I=!0,cursorChar:h=r.DEFAULT_CURSOR_CHAR,cursorBlinkSpeed:A=r.DEFAULT_CURSOR_BLINK_SPEED,onComplete:n,onWordComplete:o,as:g="span",className:U,style:j,testId:w}=b,u=Array.isArray(f)?f:[f],[F,m]=t.useState(""),[a,p]=t.useState(r.INITIAL_TEXT_INDEX),[l,S]=t.useState(r.INITIAL_CHAR_INDEX),[E,L]=t.useState(!1),[v,B]=t.useState(!0),e=t.useRef(),D=t.useRef(!1);t.useEffect(()=>{if(!I)return;const T=setInterval(()=>B(s=>!s),A);return()=>clearInterval(T)},[I,A]);const c=t.useCallback(()=>{const T=u[a];if(E)if(l>0)S(s=>s-1),m(T.slice(0,l-1)),e.current=setTimeout(c,d);else{L(!1);const s=a+1;s>=u.length?_?(p(r.INITIAL_TEXT_INDEX),e.current=setTimeout(c,i)):n==null||n():(p(s),e.current=setTimeout(c,i))}else if(l<T.length)m(T.slice(0,l+1)),S(s=>s+1),e.current=setTimeout(c,i);else{if(o==null||o(a),u.length===1&&!_){n==null||n();return}e.current=setTimeout(()=>{L(!0),c()},x)}},[u,a,l,E,i,d,x,_,n,o]);return t.useEffect(()=>{if(!D.current)return D.current=!0,e.current=setTimeout(c,N),()=>{e.current&&clearTimeout(e.current)}},[]),t.useEffect(()=>{if(D.current)return e.current&&clearTimeout(e.current),e.current=setTimeout(c,E?d:i),()=>{e.current&&clearTimeout(e.current)}},[E,a]),y.jsxs(g,{className:R.cn("Bear-Typewriter","bear-inline",U),style:j,"data-testid":w,"aria-label":u.join(", "),children:[y.jsx("span",{className:"Bear-Typewriter__text",children:F}),I&&y.jsx("span",{className:R.cn("Bear-Typewriter__cursor","bear-inline-block bear-ml-0.5","bear-text-[var(--bear-primary-500)]"),style:{opacity:v?1:0},"aria-hidden":"true",children:h})]})};exports.Typewriter=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),t=require("react"),X=require("../../utils/cn.cjs"),e=require("./Typewriter.const.cjs"),k=g=>{const{text:I,speed:T=e.DEFAULT_SPEED,startDelay:C=e.DEFAULT_START_DELAY,deleteDelay:N=e.DEFAULT_DELETE_DELAY,deleteSpeed:R=e.DEFAULT_DELETE_SPEED,loop:d=!1,cursor:f=!0,cursorChar:U=e.DEFAULT_CURSOR_CHAR,cursorBlinkSpeed:y=e.DEFAULT_CURSOR_BLINK_SPEED,onComplete:n,onWordComplete:o,as:j="span",className:w,style:F,testId:H}=g,a=t.useMemo(()=>Array.isArray(I)?I:[I],[I]),[v,L]=t.useState(""),[p,S]=t.useState(e.INITIAL_TEXT_INDEX),[m,E]=t.useState(e.INITIAL_CHAR_INDEX),[b,h]=t.useState(!1),[B,q]=t.useState(!0),s=t.useRef(),_=t.useRef(p),c=t.useRef(m),D=t.useRef(b);_.current=p,c.current=m,D.current=b,t.useEffect(()=>{if(!f)return;const l=setInterval(()=>q(i=>!i),y);return()=>clearInterval(l)},[f,y]);const u=t.useCallback(()=>{const l=_.current,i=c.current,P=D.current,A=a[l];if(P)if(i>0){const r=i-1;E(r),c.current=r,L(A.slice(0,r)),s.current=setTimeout(u,R)}else{h(!1),D.current=!1;const r=l+1;r>=a.length?d?(S(e.INITIAL_TEXT_INDEX),_.current=e.INITIAL_TEXT_INDEX,E(e.INITIAL_CHAR_INDEX),c.current=e.INITIAL_CHAR_INDEX,s.current=setTimeout(u,T)):n==null||n():(S(r),_.current=r,E(e.INITIAL_CHAR_INDEX),c.current=e.INITIAL_CHAR_INDEX,s.current=setTimeout(u,T))}else if(i<A.length){const r=i+1;L(A.slice(0,r)),E(r),c.current=r,s.current=setTimeout(u,T)}else{if(o==null||o(l),a.length===1&&!d){n==null||n();return}s.current=setTimeout(()=>{h(!0),D.current=!0,u()},N)}},[a,T,R,N,d,n,o]);return t.useEffect(()=>(s.current=setTimeout(u,C),()=>{s.current&&clearTimeout(s.current)}),[]),x.jsxs(j,{className:X.cn("Bear-Typewriter","bear-inline",w),style:F,"data-testid":H,"aria-label":a.join(", "),children:[x.jsx("span",{className:"Bear-Typewriter__text",children:v}),f&&x.jsx("span",{className:X.cn("Bear-Typewriter__cursor","bear-inline-block bear-ml-0.5","bear-text-[var(--bear-primary-500)]"),style:{opacity:B?1:0},"aria-hidden":"true",children:U})]})};exports.Typewriter=k;