@forgedevstack/bear 1.0.3 → 1.0.4

package/dist/components/RichEditor/RichEditor.js

@@ -1,144 +1,356 @@
-import { jsxs as S, jsx as r } from "react/jsx-runtime";
-import { useRef as U, useState as $, useEffect as L, useCallback as m } from "react";
-import { queryCommandState as d, execCommand as t, DEFAULT_TOOLBAR as N } from "./RichEditor.utils.js";
-import { LinkIcon as q, CodeIcon as E, BlockquoteIcon as F, OrderedListIcon as M, BulletListIcon as R, Heading2Icon as A, Heading1Icon as C, StrikethroughIcon as H, UnderlineIcon as j, ItalicIcon as O, BoldIcon as D } from "./RichEditor.icons.js";
-const K = ({ icon: n, title: u, active: s, onClick: k, disabled: i }) => /* @__PURE__ */ r(
-  "button",
-  {
-    type: "button",
-    title: u,
-    onClick: k,
-    disabled: i,
-    className: `
-      p-1.5 rounded transition-colors
-      ${s ? "bg-pink-500 text-white" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"}
-      ${i ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-    `,
-    children: n
-  }
-), G = ({
-  value: n,
-  defaultValue: u = "",
-  onChange: s,
-  placeholder: k = "Start typing...",
-  disabled: i = !1,
-  readOnly: b = !1,
-  minHeight: f = 150,
-  maxHeight: l,
-  toolbar: y = N,
-  className: I = "",
-  ...v
-}) => {
-  const o = U(null), [x, w] = $(/* @__PURE__ */ new Set());
-  L(() => {
-    o.current && n !== void 0 && o.current.innerHTML !== n && (o.current.innerHTML = n);
-  }, [n]), L(() => {
-    o.current && u && !n && (o.current.innerHTML = u);
+import { jsxs as me, jsx as t } from "react/jsx-runtime";
+import { useRef as pe, useState as C, useEffect as _, useCallback as d } from "react";
+import { cn as b } from "../../utils/cn.js";
+import { getActiveFormats as be, queryCommandValue as Re, execCommand as u, insertLink as Te, setTextColor as x, setHighlightColor as S, fileToDataUrl as v, insertImage as A } from "./helpers/formatHelpers.js";
+import { RICH_EDITOR_MIN_HEIGHT as ye, RICH_EDITOR_DEFAULT_TOOLBAR as _e, RICH_EDITOR_CONTENT_STYLES as Ee, RICH_EDITOR_BUTTON_CONFIG as O, RICH_EDITOR_TOOLBAR_CLASSES as Le, RICH_EDITOR_CONTENT_CLASSES as ze, RICH_EDITOR_ROOT_CLASSES as He, RICH_EDITOR_DIVIDER_CLASSES as ke, RICH_EDITOR_HEADING_OPTIONS as xe } from "./RichEditor.const.js";
+import { ToolbarButton as f } from "./components/ToolbarButton/ToolbarButton.js";
+import { ToolbarDropdown as Se } from "./components/ToolbarDropdown/ToolbarDropdown.js";
+import { ToolbarColorPicker as D } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
+import { ToolbarMore as ve } from "./components/ToolbarMore/ToolbarMore.js";
+import { TextIcon as Ae, InsertLinkIcon as B, InsertPhotoIcon as F, AlignLeftIcon as N, AlignCenterIcon as w, AlignRightIcon as U, AlignJustifyIcon as M, IndentIncreaseIcon as V, IndentDecreaseIcon as j, FormatClearIcon as J, TableIcon as Oe, CodeIcon as De, QuoteIcon as Be, ListNumberedIcon as Fe, ListBulletIcon as Ne, Heading3Icon as we, Heading2Icon as Ue, Heading1Icon as Me, StrikethroughIcon as Ve, UnderlineIcon as je, ItalicIcon as Je, BoldIcon as Pe } from "../Icon/icons/editor.js";
+const qe = 6, nt = (P) => {
+  const {
+    value: I,
+    defaultValue: E = "",
+    onChange: R,
+    placeholder: q = "Start typing...",
+    disabled: i = !1,
+    readOnly: o = !1,
+    minHeight: T = ye,
+    maxHeight: m,
+    toolbar: L = _e,
+    className: G = "",
+    testId: $,
+    id: Y,
+    allowImagePaste: z = !0,
+    ...K
+  } = P, a = pe(null), [Q, W] = C(/* @__PURE__ */ new Set()), [X, H] = C("p"), [Z, ee] = C("#000000"), [te, ne] = C("#fef08a"), [ie, oe] = C([]), [re, le] = C([]);
+  _(() => {
+    const e = "bear-rich-editor-styles";
+    if (!document.getElementById(e)) {
+      const n = document.createElement("style");
+      n.id = e, n.textContent = Ee, document.head.appendChild(n);
+    }
+  }, []), _(() => {
+    a.current && I !== void 0 && a.current.innerHTML !== I && (a.current.innerHTML = I);
+  }, [I]), _(() => {
+    a.current && E && !I && (a.current.innerHTML = E);
   }, []);
-  const c = m(() => {
-    const e = /* @__PURE__ */ new Set();
-    d("bold") && e.add("bold"), d("italic") && e.add("italic"), d("underline") && e.add("underline"), d("strikeThrough") && e.add("strikethrough"), d("insertUnorderedList") && e.add("bulletList"), d("insertOrderedList") && e.add("orderedList"), w(e);
-  }, []), g = m(() => {
-    o.current && s && s(o.current.innerHTML), c();
-  }, [s, c]), B = m((e) => {
-    var a;
-    if (!(i || b)) {
-      switch ((a = o.current) == null || a.focus(), e) {
-        case "bold":
-          t("bold");
-          break;
-        case "italic":
-          t("italic");
-          break;
-        case "underline":
-          t("underline");
-          break;
-        case "strikethrough":
-          t("strikeThrough");
-          break;
-        case "heading1":
-          t("formatBlock", "<h1>");
-          break;
-        case "heading2":
-          t("formatBlock", "<h2>");
-          break;
-        case "heading3":
-          t("formatBlock", "<h3>");
-          break;
-        case "bulletList":
-          t("insertUnorderedList");
-          break;
-        case "orderedList":
-          t("insertOrderedList");
-          break;
-        case "blockquote":
-          t("formatBlock", "<blockquote>");
-          break;
-        case "code":
-          t("formatBlock", "<pre>");
-          break;
-        case "link":
-          const p = prompt("Enter URL:");
-          p && t("createLink", p);
-          break;
+  const h = d(() => {
+    W(be());
+    const e = Re("formatBlock");
+    e && H(e.toLowerCase().replace(/[<>]/g, ""));
+  }, []), l = d(() => {
+    a.current && R && R(a.current.innerHTML), h();
+  }, [R, h]), ae = d((e) => {
+    var s;
+    if (i || o) return;
+    (s = a.current) == null || s.focus();
+    const n = O[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]), se = d((e) => {
+    var n;
+    i || o || ((n = a.current) == null || n.focus(), u("formatBlock", e), H(e), l());
+  }, [i, o, l]), ce = d(() => {
+    var s;
+    if (i || 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(), Te(c), l());
+  }, [i, o, l]), p = d((e, n) => {
+    if (!e) return;
+    (n === "text" ? oe : le)((s) => {
+      const r = s.filter((g) => g !== e);
+      return [e, ...r].slice(0, qe);
+    });
+  }, []), de = d((e) => {
+    var n;
+    i || o || ((n = a.current) == null || n.focus(), x(e), ee(e), p(e, "text"), l());
+  }, [i, o, l, p]), ue = d((e) => {
+    var n;
+    i || o || ((n = a.current) == null || n.focus(), S(e), ne(e), p(e, "highlight"), l());
+  }, [i, o, l, p]), fe = d((e) => {
+    var n;
+    i || o || ((n = a.current) == null || n.focus(), x(e), l());
+  }, [i, o, l]), ge = d((e) => {
+    var n;
+    i || o || ((n = a.current) == null || n.focus(), S(e), l());
+  }, [i, o, l]), he = d(async (e) => {
+    var c;
+    if (!z) 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/")) {
+          e.preventDefault();
+          const g = r.getAsFile();
+          if (g) {
+            const y = await v(g);
+            A(y), l();
+          }
+          return;
+        }
       }
-      c(), g();
-    }
-  }, [i, b, c, g]), T = (e, a) => {
+  }, [z, l]), Ce = d(() => {
+    if (i || o) return;
+    const e = document.createElement("input");
+    e.type = "file", e.accept = "image/*", e.onchange = async (n) => {
+      var s, r;
+      const c = (s = n.target.files) == null ? void 0 : s[0];
+      if (c) {
+        const g = await v(c);
+        (r = a.current) == null || r.focus(), A(g), l();
+      }
+    }, e.click();
+  }, [i, o, l]), Ie = {
+    bold: /* @__PURE__ */ t(Pe, { size: 16 }),
+    italic: /* @__PURE__ */ t(Je, { size: 16 }),
+    underline: /* @__PURE__ */ t(je, { size: 16 }),
+    strikethrough: /* @__PURE__ */ t(Ve, { size: 16 }),
+    heading1: /* @__PURE__ */ t(Me, { size: 16 }),
+    heading2: /* @__PURE__ */ t(Ue, { size: 16 }),
+    heading3: /* @__PURE__ */ t(we, { size: 16 }),
+    bulletList: /* @__PURE__ */ t(Ne, { size: 16 }),
+    orderedList: /* @__PURE__ */ t(Fe, { size: 16 }),
+    blockquote: /* @__PURE__ */ t(Be, { size: 16 }),
+    code: /* @__PURE__ */ t(De, { size: 16 }),
+    link: /* @__PURE__ */ t(B, { size: 16 }),
+    alignLeft: /* @__PURE__ */ t(N, { size: 16 }),
+    alignCenter: /* @__PURE__ */ t(w, { size: 16 }),
+    alignRight: /* @__PURE__ */ t(U, { size: 16 }),
+    alignJustify: /* @__PURE__ */ t(M, { size: 16 }),
+    image: /* @__PURE__ */ t(F, { size: 16 }),
+    indent: /* @__PURE__ */ t(V, { size: 16 }),
+    outdent: /* @__PURE__ */ t(j, { size: 16 }),
+    clearFormat: /* @__PURE__ */ t(J, { size: 16 }),
+    table: /* @__PURE__ */ t(Oe, { size: 16 })
+  }, k = (e, n) => {
     if (e === "divider")
-      return /* @__PURE__ */ r("div", { className: "w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" }, `divider-${a}`);
-    const h = {
-      bold: { icon: /* @__PURE__ */ r(D, {}), title: "Bold" },
-      italic: { icon: /* @__PURE__ */ r(O, {}), title: "Italic" },
-      underline: { icon: /* @__PURE__ */ r(j, {}), title: "Underline" },
-      strikethrough: { icon: /* @__PURE__ */ r(H, {}), title: "Strikethrough" },
-      heading1: { icon: /* @__PURE__ */ r(C, {}), title: "Heading 1" },
-      heading2: { icon: /* @__PURE__ */ r(A, {}), title: "Heading 2" },
-      bulletList: { icon: /* @__PURE__ */ r(R, {}), title: "Bullet List" },
-      orderedList: { icon: /* @__PURE__ */ r(M, {}), title: "Numbered List" },
-      blockquote: { icon: /* @__PURE__ */ r(F, {}), title: "Quote" },
-      code: { icon: /* @__PURE__ */ r(E, {}), title: "Code Block" },
-      link: { icon: /* @__PURE__ */ r(q, {}), title: "Insert Link" }
-    }[e];
-    return h ? /* @__PURE__ */ r(
-      K,
+      return /* @__PURE__ */ t("div", { className: b("Bear-RichEditor__divider", ke) }, `divider-${n}`);
+    if (e === "headingDropdown")
+      return /* @__PURE__ */ t(
+        Se,
+        {
+          options: xe,
+          value: X,
+          onChange: se,
+          title: "Text Style",
+          disabled: i || o,
+          icon: /* @__PURE__ */ t(Ae, { size: 16 })
+        },
+        "heading-dropdown"
+      );
+    if (e === "textColor")
+      return /* @__PURE__ */ t(
+        D,
+        {
+          value: Z,
+          onChange: de,
+          title: "Text Color",
+          disabled: i || o,
+          type: "text",
+          recentColors: ie,
+          onApplyLast: fe
+        },
+        "text-color"
+      );
+    if (e === "highlightColor")
+      return /* @__PURE__ */ t(
+        D,
+        {
+          value: te,
+          onChange: ue,
+          title: "Highlight Color",
+          disabled: i || o,
+          type: "highlight",
+          recentColors: re,
+          onApplyLast: ge
+        },
+        "highlight-color"
+      );
+    if (e === "link")
+      return /* @__PURE__ */ t(
+        f,
+        {
+          icon: /* @__PURE__ */ t(B, { size: 16 }),
+          title: "Insert Link",
+          onClick: ce,
+          disabled: i || o
+        },
+        "link"
+      );
+    if (e === "image")
+      return /* @__PURE__ */ t(
+        f,
+        {
+          icon: /* @__PURE__ */ t(F, { size: 16 }),
+          title: "Insert Image",
+          onClick: Ce,
+          disabled: i || o
+        },
+        "image"
+      );
+    if (e === "alignLeft")
+      return /* @__PURE__ */ t(
+        f,
+        {
+          icon: /* @__PURE__ */ t(N, { size: 16 }),
+          title: "Align Left",
+          onClick: () => {
+            var r;
+            (r = a.current) == null || r.focus(), u("justifyLeft"), l();
+          },
+          disabled: i || o
+        },
+        "alignLeft"
+      );
+    if (e === "alignCenter")
+      return /* @__PURE__ */ t(
+        f,
+        {
+          icon: /* @__PURE__ */ t(w, { size: 16 }),
+          title: "Align Center",
+          onClick: () => {
+            var r;
+            (r = a.current) == null || r.focus(), u("justifyCenter"), l();
+          },
+          disabled: i || o
+        },
+        "alignCenter"
+      );
+    if (e === "alignRight")
+      return /* @__PURE__ */ t(
+        f,
+        {
+          icon: /* @__PURE__ */ t(U, { size: 16 }),
+          title: "Align Right",
+          onClick: () => {
+            var r;
+            (r = a.current) == null || r.focus(), u("justifyRight"), l();
+          },
+          disabled: i || o
+        },
+        "alignRight"
+      );
+    if (e === "alignJustify")
+      return /* @__PURE__ */ t(
+        f,
+        {
+          icon: /* @__PURE__ */ t(M, { size: 16 }),
+          title: "Justify",
+          onClick: () => {
+            var r;
+            (r = a.current) == null || r.focus(), u("justifyFull"), l();
+          },
+          disabled: i || o
+        },
+        "alignJustify"
+      );
+    if (e === "indent")
+      return /* @__PURE__ */ t(
+        f,
+        {
+          icon: /* @__PURE__ */ t(V, { size: 16 }),
+          title: "Increase Indent",
+          onClick: () => {
+            var r;
+            (r = a.current) == null || r.focus(), u("indent"), l();
+          },
+          disabled: i || o
+        },
+        "indent"
+      );
+    if (e === "outdent")
+      return /* @__PURE__ */ t(
+        f,
+        {
+          icon: /* @__PURE__ */ t(j, { size: 16 }),
+          title: "Decrease Indent",
+          onClick: () => {
+            var r;
+            (r = a.current) == null || r.focus(), u("outdent"), l();
+          },
+          disabled: i || o
+        },
+        "outdent"
+      );
+    if (e === "clearFormat")
+      return /* @__PURE__ */ t(
+        f,
+        {
+          icon: /* @__PURE__ */ t(J, { size: 16 }),
+          title: "Clear Formatting",
+          onClick: () => {
+            var r;
+            (r = a.current) == null || r.focus(), u("removeFormat"), l();
+          },
+          disabled: i || o
+        },
+        "clearFormat"
+      );
+    if (e === "more")
+      return /* @__PURE__ */ t(ve, { disabled: i || o, children: [
+        "alignLeft",
+        "alignCenter",
+        "alignRight",
+        "alignJustify",
+        "indent",
+        "outdent",
+        "blockquote",
+        "code",
+        "clearFormat"
+      ].map((g, y) => k(g, y + 1e3)) }, "more");
+    const c = O[e], s = Ie[e];
+    return !c || !s ? null : /* @__PURE__ */ t(
+      f,
       {
-        icon: h.icon,
-        title: h.title,
-        active: x.has(e),
-        onClick: () => B(e),
-        disabled: i || b
+        icon: s,
+        title: c.title,
+        active: Q.has(e),
+        onClick: () => ae(e),
+        disabled: i || o
       },
       e
-    ) : null;
+    );
   };
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ me(
     "div",
     {
-      className: `bear-rich-editor rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden bg-white dark:bg-gray-900 ${I}`,
-      ...v,
+      id: Y,
+      "data-testid": $,
+      className: b(
+        "Bear-RichEditor",
+        He,
+        i && "Bear-RichEditor--disabled",
+        o && "Bear-RichEditor--readonly",
+        G
+      ),
+      ...K,
       children: [
-        y.length > 0 && /* @__PURE__ */ r("div", { className: "bear-rich-editor-toolbar flex flex-wrap items-center gap-0.5 p-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: y.map((e, a) => T(e, a)) }),
-        /* @__PURE__ */ r(
+        L.length > 0 && /* @__PURE__ */ t("div", { className: b("Bear-RichEditor__toolbar", Le), children: L.map((e, n) => k(e, n)) }),
+        /* @__PURE__ */ t(
           "div",
           {
-            ref: o,
-            contentEditable: !i && !b,
-            onInput: g,
-            onSelect: c,
-            onKeyUp: c,
-            onMouseUp: c,
-            "data-placeholder": k,
-            className: `
-          bear-rich-editor-content p-3 outline-none prose prose-sm dark:prose-invert max-w-none
-          text-gray-900 dark:text-white
-          [&:empty]:before:content-[attr(data-placeholder)] [&:empty]:before:text-gray-400 [&:empty]:before:pointer-events-none
-          ${i ? "opacity-50 cursor-not-allowed" : ""}
-        `,
+            ref: a,
+            contentEditable: !i && !o,
+            onInput: l,
+            onSelect: h,
+            onKeyUp: h,
+            onMouseUp: h,
+            onPaste: he,
+            "data-placeholder": q,
+            className: b(
+              "Bear-RichEditor__content",
+              ze,
+              "[&: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"
+            ),
             style: {
-              minHeight: typeof f == "number" ? `${f}px` : f,
-              maxHeight: l ? typeof l == "number" ? `${l}px` : l : void 0,
-              overflowY: l ? "auto" : void 0
+              minHeight: typeof T == "number" ? `${T}px` : T,
+              maxHeight: m ? typeof m == "number" ? `${m}px` : m : void 0,
+              overflowY: m ? "auto" : void 0
             }
           }
         )
@@ -147,5 +359,5 @@ const K = ({ icon: n, title: u, active: s, onClick: k, disabled: i }) => /* @__P
   );
 };
 export {
-  G as RichEditor
+  nt as RichEditor
 };

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

@@ -1,16 +1,31 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface RichEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Controlled HTML content */
     value?: string;
+    /** Initial HTML content (uncontrolled) */
     defaultValue?: string;
+    /** Called when content changes */
     onChange?: (value: string) => void;
+    /** Placeholder text when empty */
     placeholder?: string;
+    /** Completely disables the editor */
     disabled?: boolean;
+    /** Allows viewing but not editing */
     readOnly?: boolean;
+    /** Minimum editor height in pixels */
     minHeight?: string | number;
+    /** Maximum height (enables scroll) */
     maxHeight?: string | number;
+    /** Toolbar buttons to display */
     toolbar?: ToolbarOption[];
+    /** Test ID for testing purposes */
+    testId?: string;
+    /** Unique ID for accessibility */
+    id?: string;
+    /** Enable image paste support */
+    allowImagePaste?: boolean;
 }
-export type ToolbarOption = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'heading1' | 'heading2' | 'heading3' | 'bulletList' | 'orderedList' | 'blockquote' | 'code' | 'link' | 'divider';
+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 {
     icon: ReactNode;
     title: string;
@@ -18,3 +33,25 @@ export interface ToolbarButtonProps {
     onClick: () => void;
     disabled?: boolean;
 }
+export interface DropdownOption {
+    value: string;
+    label: string;
+    preview?: ReactNode;
+}
+export interface ToolbarDropdownProps {
+    options: DropdownOption[];
+    value: string;
+    onChange: (value: string) => void;
+    title: string;
+    disabled?: boolean;
+    icon?: ReactNode;
+}
+export interface ToolbarColorPickerProps {
+    value: string;
+    onChange: (color: string) => void;
+    title: string;
+    disabled?: boolean;
+    type?: 'text' | 'highlight';
+    recentColors?: string[];
+    onApplyLast?: (color: string) => void;
+}

package/dist/components/RichEditor/components/ToolbarButton/ToolbarButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),T=require("../../../../utils/cn.cjs"),t=require("../../RichEditor.const.cjs"),E=e=>{const{icon:i,title:_,active:n,onClick:r,disabled:o}=e;return c.jsx("button",{type:"button",title:_,onClick:r,disabled:o,className:T.cn("Bear-RichEditor__button",t.RICH_EDITOR_BUTTON_BASE_CLASSES,n?`Bear-RichEditor__button--active ${t.RICH_EDITOR_BUTTON_ACTIVE_CLASSES}`:t.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,o&&`Bear-RichEditor__button--disabled ${t.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:i})};exports.ToolbarButton=E;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ToolbarButtonProps } from '../../RichEditor.types';
+export declare const ToolbarButton: FC<ToolbarButtonProps>;
+export default ToolbarButton;

package/dist/components/RichEditor/components/ToolbarButton/ToolbarButton.js

@@ -0,0 +1,25 @@
+import { jsx as T } from "react/jsx-runtime";
+import { cn as S } from "../../../../utils/cn.js";
+import { RICH_EDITOR_BUTTON_DISABLED_CLASSES as e, RICH_EDITOR_BUTTON_ACTIVE_CLASSES as n, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as c, RICH_EDITOR_BUTTON_BASE_CLASSES as I } from "../../RichEditor.const.js";
+const B = (o) => {
+  const { icon: _, title: i, active: r, onClick: E, disabled: t } = o;
+  return /* @__PURE__ */ T(
+    "button",
+    {
+      type: "button",
+      title: i,
+      onClick: E,
+      disabled: t,
+      className: S(
+        "Bear-RichEditor__button",
+        I,
+        r ? `Bear-RichEditor__button--active ${n}` : c,
+        t && `Bear-RichEditor__button--disabled ${e}`
+      ),
+      children: _
+    }
+  );
+};
+export {
+  B as ToolbarButton
+};

package/dist/components/RichEditor/components/ToolbarButton/index.d.ts

@@ -0,0 +1 @@
+export { ToolbarButton, default } from './ToolbarButton';

package/dist/components/RichEditor/components/ToolbarColorPicker/ToolbarColorPicker.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("react"),s=require("../../../../utils/cn.cjs"),i=require("../../RichEditor.const.cjs"),m=require("../../../Icon/icons/editor.cjs"),_=require("../../../Icon/icons/status.cjs"),C=p=>{const{value:r,onChange:f,title:y,disabled:o,type:n="text",recentColors:a=[],onApplyLast:h}=p,[b,c]=g.useState(!1),l=g.useRef(null);g.useEffect(()=>{const e=u=>{l.current&&!l.current.contains(u.target)&&c(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const d=e=>{f(e),c(!1)},k=n==="text"?m.FormatColorTextIcon:m.HighlightIcon,x=a[0]||r;return t.jsxs("div",{ref:l,className:"Bear-RichEditor__color-picker relative flex items-center",children:[t.jsxs("button",{type:"button",title:y,disabled:o,onClick:()=>c(!b),className:s.cn("Bear-RichEditor__color-trigger",i.RICH_EDITOR_BUTTON_BASE_CLASSES,i.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center gap-0.5",o&&`Bear-RichEditor__color-trigger--disabled ${i.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:[t.jsx(k,{size:16}),t.jsx("span",{className:"w-3 h-1 rounded-sm mt-0.5",style:{backgroundColor:r||(n==="text"?"#000000":"#fef08a")}})]}),x&&h&&t.jsx("button",{type:"button",title:`Apply ${n==="text"?"text":"highlight"} color`,disabled:o,onClick:()=>h(x),className:s.cn("Bear-RichEditor__color-apply","p-0.5 rounded transition-colors","text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700",o&&"opacity-50 cursor-not-allowed"),children:t.jsx(_.CheckIcon,{size:12})}),b&&t.jsxs("div",{className:"Bear-RichEditor__color-menu absolute bottom-full left-0 mb-1 p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px]",style:{zIndex:9999},children:[a.length>0&&t.jsxs("div",{className:"mb-3",children:[t.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400 mb-1.5",children:"Recent"}),t.jsx("div",{className:"flex gap-1",children:a.slice(0,6).map((e,u)=>t.jsx("button",{type:"button",onClick:()=>d(e),className:s.cn("w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",r===e&&"ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:e},title:e},`recent-${u}`))})]}),t.jsx("div",{className:"grid grid-cols-8 gap-1",children:i.RICH_EDITOR_COLORS.map(e=>t.jsx("button",{type:"button",onClick:()=>d(e),className:s.cn("Bear-RichEditor__color-swatch","w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",r===e&&"ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:e},title:e},e))}),t.jsxs("button",{type:"button",onClick:()=>d(""),className:"w-full mt-2 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded transition-colors",children:["Remove ",n==="text"?"color":"highlight"]})]})]})};exports.ToolbarColorPicker=C;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ToolbarColorPickerProps } from '../../RichEditor.types';
+export declare const ToolbarColorPicker: FC<ToolbarColorPickerProps>;
+export default ToolbarColorPicker;