@forgedevstack/bear 1.2.9 → 1.3.1

package/dist/components/RichEditor/RichEditor.js

@@ -1,372 +1,82 @@
-import { jsxs as S, jsx as t } from "react/jsx-runtime";
-import { useRef as Ee, useState as C, useEffect as x, useCallback as d } from "react";
-import { cn as p } from "../../utils/cn.js";
-import { getActiveFormats as ye, queryCommandValue as Le, execCommand as u, insertLink as xe, setTextColor as B, setHighlightColor as D, fileToDataUrl as N, insertImage as F } from "./helpers/formatHelpers.js";
-import { RICH_EDITOR_MIN_HEIGHT as He, RICH_EDITOR_DEFAULT_TOOLBAR as Oe, RICH_EDITOR_CONTENT_STYLES as ke, RICH_EDITOR_BUTTON_CONFIG as M, RICH_EDITOR_MOBILE_TOOLBAR as ze, RICH_EDITOR_TOOLBAR_CLASSES as ve, RICH_EDITOR_CONTENT_CLASSES as Ae, RICH_EDITOR_ROOT_CLASSES as Se, RICH_EDITOR_DIVIDER_CLASSES as Be, RICH_EDITOR_HEADING_OPTIONS as De, RICH_EDITOR_MOBILE_MORE_ITEMS as Ne, RICH_EDITOR_MOBILE_BREAKPOINT as Fe } from "./RichEditor.const.js";
-import { useMediaQuery as Me } from "../../hooks/useMediaQuery.js";
-import { ToolbarButton as f } from "./components/ToolbarButton/ToolbarButton.js";
-import { ToolbarDropdown as we } from "./components/ToolbarDropdown/ToolbarDropdown.js";
-import { ToolbarColorPicker as w } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
-import { ToolbarMore as Ue } from "./components/ToolbarMore/ToolbarMore.js";
-import { TextIcon as Ve, 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 Pe, CodeIcon as je, QuoteIcon as Je, ListNumberedIcon as $e, ListBulletIcon as qe, Heading3Icon as Ge, Heading2Icon as Ke, Heading1Icon as Qe, StrikethroughIcon as Ye, UnderlineIcon as We, ItalicIcon as Xe, BoldIcon as Ze } from "../Icon/icons/editor.js";
-const et = 6, ft = (Q) => {
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { cn as o } from "../../utils/cn.js";
+import "react";
+import { ONE_HUNDRED_FIFTY as I, ZERO as N } from "../../constants/numbers.const.js";
+import { EMPTY_STRING as b, PLACEHOLDER_START_TYPING as O, BOOLEAN_FALSE as d, BOOLEAN_TRUE as w } from "../../constants/generals.const.js";
+import { RICH_EDITOR_DEFAULT_TOOLBAR as A } from "./RichEditor.const.js";
+import { useRichEditor as B } from "./useRichEditor/useRichEditor.js";
+import { createToolbarItemRenderer as k } from "./helpers/toolbarItemRender.js";
+const S = (l) => {
   const {
-    value: I,
-    defaultValue: H = "",
-    onChange: R,
-    placeholder: Y = "Start typing...",
-    disabled: r = !1,
-    readOnly: o = !1,
-    minHeight: T = He,
-    maxHeight: m,
-    toolbar: W = Oe,
-    className: X = "",
-    testId: Z,
-    allowImagePaste: O = !0,
-    showCharCount: _ = !1,
-    charCountMax: E,
-    ...ee
-  } = Q, l = Ee(null), y = Me(`(max-width: ${Fe}px)`), k = y ? ze : W, [te, ne] = C(/* @__PURE__ */ new Set()), [re, z] = C("p"), [v, oe] = C(0), [ie, ae] = C("#000000"), [le, se] = C("#fef08a"), [ce, de] = C([]), [ue, fe] = C([]);
-  x(() => {
-    const e = "bear-rich-editor-styles";
-    if (!document.getElementById(e)) {
-      const n = document.createElement("style");
-      n.id = e, n.textContent = ke, document.head.appendChild(n);
-    }
-  }, []), 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(() => {
-    ne(ye());
-    const e = Le("formatBlock");
-    e && z(e.toLowerCase().replace(/[<>]/g, ""));
-  }, []), a = d(() => {
-    var e;
-    l.current && (R && R(l.current.innerHTML), _ && oe(((e = l.current.textContent) == null ? void 0 : e.length) ?? 0)), h();
-  }, [R, h, _]), ge = d((e) => {
-    var s;
-    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(), a();
-  }, [r, o, h, a]), he = d((e) => {
-    var n;
-    r || o || ((n = l.current) == null || n.focus(), u("formatBlock", e), z(e), a());
-  }, [r, o, a]), Ce = d(() => {
-    var s;
-    if (r || o) return;
-    const e = window.getSelection(), n = e && e.toString().length > 0, c = prompt("Enter URL:", n ? "" : "https://");
-    c && ((s = l.current) == null || s.focus(), xe(c), a());
-  }, [r, o, a]), b = d((e, n) => {
-    if (!e) return;
-    (n === "text" ? de : fe)((s) => {
-      const i = s.filter((g) => g !== e);
-      return [e, ...i].slice(0, et);
-    });
-  }, []), Ie = d((e) => {
-    var n;
-    r || o || ((n = l.current) == null || n.focus(), B(e), ae(e), b(e, "text"), a());
-  }, [r, o, a, b]), me = d((e) => {
-    var n;
-    r || o || ((n = l.current) == null || n.focus(), D(e), se(e), b(e, "highlight"), a());
-  }, [r, o, a, b]), pe = d((e) => {
-    var n;
-    r || o || ((n = l.current) == null || n.focus(), B(e), a());
-  }, [r, o, a]), be = d((e) => {
-    var n;
-    r || o || ((n = l.current) == null || n.focus(), D(e), a());
-  }, [r, o, a]), Re = d(async (e) => {
-    var c;
-    if (!O) return;
-    const n = (c = e.clipboardData) == null ? void 0 : c.items;
-    if (n)
-      for (let s = 0; s < n.length; s++) {
-        const i = n[s];
-        if (i.type.startsWith("image/")) {
-          e.preventDefault();
-          const g = i.getAsFile();
-          if (g) {
-            const L = await N(g);
-            F(L), a();
-          }
-          return;
-        }
-      }
-  }, [O, a]), Te = d(() => {
-    if (r || o) return;
-    const e = document.createElement("input");
-    e.type = "file", e.accept = "image/*", e.onchange = async (n) => {
-      var s, i;
-      const c = (s = n.target.files) == null ? void 0 : s[0];
-      if (c) {
-        const g = await N(c);
-        (i = l.current) == null || i.focus(), F(g), a();
-      }
-    }, e.click();
-  }, [r, o, a]), _e = {
-    bold: /* @__PURE__ */ t(Ze, { size: 16 }),
-    italic: /* @__PURE__ */ t(Xe, { size: 16 }),
-    underline: /* @__PURE__ */ t(We, { size: 16 }),
-    strikethrough: /* @__PURE__ */ t(Ye, { size: 16 }),
-    heading1: /* @__PURE__ */ t(Qe, { size: 16 }),
-    heading2: /* @__PURE__ */ t(Ke, { size: 16 }),
-    heading3: /* @__PURE__ */ t(Ge, { size: 16 }),
-    bulletList: /* @__PURE__ */ t(qe, { size: 16 }),
-    orderedList: /* @__PURE__ */ t($e, { size: 16 }),
-    blockquote: /* @__PURE__ */ t(Je, { 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(Pe, { size: 16 })
-  }, A = (e, n) => {
-    if (e === "divider")
-      return /* @__PURE__ */ t("div", { className: p("Bear-RichEditor__divider", Be) }, `divider-${n}`);
-    if (e === "headingDropdown")
-      return /* @__PURE__ */ t(
-        we,
-        {
-          options: De,
-          value: re,
-          onChange: he,
-          title: "Text Style",
-          disabled: r || o,
-          icon: /* @__PURE__ */ t(Ve, { size: 16 })
-        },
-        "heading-dropdown"
-      );
-    if (e === "textColor")
-      return /* @__PURE__ */ t(
-        w,
-        {
-          value: ie,
-          onChange: Ie,
-          title: "Text Color",
-          disabled: r || o,
-          type: "text",
-          recentColors: ce,
-          onApplyLast: pe
-        },
-        "text-color"
-      );
-    if (e === "highlightColor")
-      return /* @__PURE__ */ t(
-        w,
-        {
-          value: le,
-          onChange: me,
-          title: "Highlight Color",
-          disabled: r || o,
-          type: "highlight",
-          recentColors: ue,
-          onApplyLast: be
-        },
-        "highlight-color"
-      );
-    if (e === "link")
-      return /* @__PURE__ */ t(
-        f,
-        {
-          icon: /* @__PURE__ */ t(U, { size: 16 }),
-          title: "Insert Link",
-          onClick: Ce,
-          disabled: r || o
-        },
-        "link"
-      );
-    if (e === "image")
-      return /* @__PURE__ */ t(
-        f,
-        {
-          icon: /* @__PURE__ */ t(V, { size: 16 }),
-          title: "Insert Image",
-          onClick: Te,
-          disabled: r || o
-        },
-        "image"
-      );
-    if (e === "alignLeft")
-      return /* @__PURE__ */ t(
-        f,
-        {
-          icon: /* @__PURE__ */ t(P, { size: 16 }),
-          title: "Align Left",
-          onClick: () => {
-            var i;
-            (i = l.current) == null || i.focus(), u("justifyLeft"), a();
-          },
-          disabled: r || o
-        },
-        "alignLeft"
-      );
-    if (e === "alignCenter")
-      return /* @__PURE__ */ t(
-        f,
-        {
-          icon: /* @__PURE__ */ t(j, { size: 16 }),
-          title: "Align Center",
-          onClick: () => {
-            var i;
-            (i = l.current) == null || i.focus(), u("justifyCenter"), a();
-          },
-          disabled: r || o
-        },
-        "alignCenter"
-      );
-    if (e === "alignRight")
-      return /* @__PURE__ */ t(
-        f,
-        {
-          icon: /* @__PURE__ */ t(J, { size: 16 }),
-          title: "Align Right",
-          onClick: () => {
-            var i;
-            (i = l.current) == null || i.focus(), u("justifyRight"), a();
-          },
-          disabled: r || o
-        },
-        "alignRight"
-      );
-    if (e === "alignJustify")
-      return /* @__PURE__ */ t(
-        f,
-        {
-          icon: /* @__PURE__ */ t($, { size: 16 }),
-          title: "Justify",
-          onClick: () => {
-            var i;
-            (i = l.current) == null || i.focus(), u("justifyFull"), a();
-          },
-          disabled: r || o
-        },
-        "alignJustify"
-      );
-    if (e === "indent")
-      return /* @__PURE__ */ t(
-        f,
-        {
-          icon: /* @__PURE__ */ t(q, { size: 16 }),
-          title: "Increase Indent",
-          onClick: () => {
-            var i;
-            (i = l.current) == null || i.focus(), u("indent"), a();
-          },
-          disabled: r || o
-        },
-        "indent"
-      );
-    if (e === "outdent")
-      return /* @__PURE__ */ t(
-        f,
-        {
-          icon: /* @__PURE__ */ t(G, { size: 16 }),
-          title: "Decrease Indent",
-          onClick: () => {
-            var i;
-            (i = l.current) == null || i.focus(), u("outdent"), a();
-          },
-          disabled: r || o
-        },
-        "outdent"
-      );
-    if (e === "clearFormat")
-      return /* @__PURE__ */ t(
-        f,
-        {
-          icon: /* @__PURE__ */ t(K, { size: 16 }),
-          title: "Clear Formatting",
-          onClick: () => {
-            var i;
-            (i = l.current) == null || i.focus(), u("removeFormat"), a();
-          },
-          disabled: r || o
-        },
-        "clearFormat"
-      );
-    if (e === "more")
-      return /* @__PURE__ */ t(Ue, { disabled: r || o, isMobile: y, children: (y ? Ne : [
-        "alignLeft",
-        "alignCenter",
-        "alignRight",
-        "alignJustify",
-        "indent",
-        "outdent",
-        "blockquote",
-        "code",
-        "clearFormat"
-      ]).map((g, L) => A(g, L + 1e3)) }, "more");
-    const c = M[e], s = _e[e];
-    return !c || !s ? null : /* @__PURE__ */ t(
-      f,
-      {
-        icon: s,
-        title: c.title,
-        active: te.has(e),
-        onClick: () => ge(e),
-        disabled: r || o
-      },
-      e
-    );
-  };
-  return /* @__PURE__ */ S(
+    value: s,
+    defaultValue: m = b,
+    onChange: h,
+    placeholder: p = O,
+    disabled: r = d,
+    readOnly: a = d,
+    minHeight: g = I,
+    maxHeight: u,
+    toolbar: E = A,
+    className: x = b,
+    testId: R,
+    allowImagePaste: y = w,
+    showCharCount: i = d,
+    charCountMax: t,
+    ..._
+  } = l, e = B({
+    value: s,
+    defaultValue: m,
+    onChange: h,
+    disabled: r,
+    readOnly: a,
+    toolbar: E,
+    allowImagePaste: y,
+    showCharCount: i,
+    minHeight: g,
+    maxHeight: u
+  }), f = k({ ...e, disabled: r, readOnly: a });
+  return /* @__PURE__ */ n(
     "div",
     {
-      "data-testid": Z,
-      className: p(
-        "Bear-RichEditor",
-        Se,
+      "data-testid": R,
+      className: o(
+        "Bear-RichEditor rounded-lg border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm",
         r && "Bear-RichEditor--disabled",
-        o && "Bear-RichEditor--readonly",
-        X
+        a && "Bear-RichEditor--readonly",
+        x
       ),
-      ...ee,
+      ..._,
       children: [
-        k.length > 0 && /* @__PURE__ */ t("div", { className: p("Bear-RichEditor__toolbar", ve), children: k.map((e, n) => A(e, n)) }),
-        /* @__PURE__ */ t(
+        e.activeToolbar.length > N && /* @__PURE__ */ c("div", { className: "Bear-RichEditor__toolbar flex flex-wrap items-center gap-0.5 p-2 border-b border-gray-200 dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800 overflow-x-auto overflow-y-hidden", children: e.activeToolbar.map((T, v) => f(T, v)) }),
+        /* @__PURE__ */ c(
           "div",
           {
-            ref: l,
-            contentEditable: !r && !o,
-            onInput: a,
-            onSelect: h,
-            onKeyUp: h,
-            onMouseUp: h,
-            onPaste: Re,
-            "data-placeholder": Y,
-            className: p(
-              "Bear-RichEditor__content",
-              Ae,
+            ref: e.editorRef,
+            contentEditable: !r && !a,
+            onInput: e.handleInput,
+            onSelect: e.updateActiveFormats,
+            onKeyUp: e.updateActiveFormats,
+            onMouseUp: e.updateActiveFormats,
+            onPaste: e.handlePaste,
+            "data-placeholder": p,
+            className: o(
+              "Bear-RichEditor__content p-4 outline-none max-w-none text-gray-900 dark:text-gray-100 bg-white dark:bg-zinc-900 min-h-[100px]",
               "[&:empty]:before:bear-content-[attr(data-placeholder)] [&:empty]:before:bear-text-gray-400 [&:empty]:before:bear-pointer-events-none",
               r && "Bear-RichEditor__content--disabled bear-opacity-50 bear-cursor-not-allowed"
-            ),
-            style: {
-              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(
+        i && t != null && /* @__PURE__ */ n(
           "div",
           {
-            className: p(
+            className: o(
               "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"
+              e.charCount > t ? "bear-text-red-500" : "bear-text-gray-400 dark:bear-text-gray-500"
             ),
             children: [
-              v,
+              e.charCount,
               "/",
-              E
+              t
             ]
           }
         )
@@ -375,5 +85,5 @@ const et = 6, ft = (Q) => {
   );
 };
 export {
-  ft as RichEditor
+  S as RichEditor
 };

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

@@ -29,7 +29,7 @@ export interface RichEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
     /** 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 type ToolbarOption = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'headingDropdown' | 'bulletList' | 'orderedList' | 'blockquote' | 'code' | 'link' | 'image' | 'signature' | 'textColor' | 'highlightColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'indent' | 'outdent' | 'clearFormat' | 'table' | 'divider' | 'more';
 export interface ToolbarButtonProps {
     icon: ReactNode;
     title: string;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),T=require("../../../../utils/cn.cjs");require("react");const t=require("../../RichEditor.const.cjs"),u=o=>{const{icon:i,title:r,active:_,onClick:n,disabled:e}=o;return c.jsx("button",{type:"button",title:r,onClick:n,disabled:e,className:T.cn("Bear-RichEditor__button",t.RICH_EDITOR_BUTTON_BASE_CLASSES,_?`Bear-RichEditor__button--active ${t.RICH_EDITOR_BUTTON_ACTIVE_CLASSES}`:t.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,e&&`Bear-RichEditor__button--disabled ${t.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:i})};exports.ToolbarButton=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../../utils/cn.cjs");require("react");const s=require("../../../../constants/numbers.const.cjs"),l=require("../../../Tooltip/Tooltip.cjs"),u=r=>{const{icon:i,title:t,active:n,onClick:a,disabled:o}=r;return e.jsx(l.Tooltip,{content:t,delay:s.FOUR_HUNDRED,position:"top",children:e.jsx("button",{type:"button","aria-label":t,onClick:a,disabled:o,className:c.cn("Bear-RichEditor__button p-1.5 rounded transition-colors",n?"Bear-RichEditor__button--active bg-primary-500 text-white":"text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-zinc-700",o&&"Bear-RichEditor__button--disabled opacity-50 cursor-not-allowed"),children:i})})};exports.ToolbarButton=u;

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

@@ -1,4 +1,2 @@
-import { FC } from 'react';
 import { ToolbarButtonProps } from '../../RichEditor.types';
-export declare const ToolbarButton: FC<ToolbarButtonProps>;
-export default ToolbarButton;
+export declare const ToolbarButton: (props: ToolbarButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,26 @@
-import { jsx as T } from "react/jsx-runtime";
-import { cn as S } from "../../../../utils/cn.js";
+import { jsx as r } from "react/jsx-runtime";
+import { cn as c } from "../../../../utils/cn.js";
 import "react";
-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(
+import { FOUR_HUNDRED as d } from "../../../../constants/numbers.const.js";
+import { Tooltip as l } from "../../../Tooltip/Tooltip.js";
+const h = (i) => {
+  const { icon: e, title: t, active: a, onClick: n, disabled: o } = i;
+  return /* @__PURE__ */ r(l, { content: t, delay: d, position: "top", children: /* @__PURE__ */ r(
     "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}`
+      "aria-label": t,
+      onClick: n,
+      disabled: o,
+      className: c(
+        "Bear-RichEditor__button p-1.5 rounded transition-colors",
+        a ? "Bear-RichEditor__button--active bg-primary-500 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-zinc-700",
+        o && "Bear-RichEditor__button--disabled opacity-50 cursor-not-allowed"
       ),
-      children: _
+      children: e
     }
-  );
+  ) });
 };
 export {
-  b as ToolbarButton
+  h as ToolbarButton
 };

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),S=require("react-dom"),i=require("../../../../utils/cn.cjs"),d=require("../../RichEditor.const.cjs"),j=require("../../../../hooks/useMediaQuery.cjs"),k=require("../../../Icon/icons/editor.cjs"),I=require("../../../Icon/icons/status.cjs"),N=R=>{const{value:s,onChange:w,title:v,disabled:a,type:c="text",recentColors:u=[],onApplyLast:p}=R,[l,m]=r.useState(!1),[x,b]=r.useState({top:0,left:0}),g=r.useRef(null),h=r.useRef(null),o=j.useMediaQuery("(max-width: 640px)");r.useEffect(()=>{if(l&&o&&h.current&&typeof document<"u"){const e=h.current.getBoundingClientRect(),n=e.top,_=window.innerHeight-e.bottom;_>=240||_>=n?b({top:e.bottom+4,left:Math.max(8,Math.min(e.left,window.innerWidth-220))}):b({top:e.top-244,left:Math.max(8,Math.min(e.left,window.innerWidth-220))})}},[l,o]),r.useEffect(()=>{const e=n=>{g.current&&!g.current.contains(n.target)&&m(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const f=e=>{w(e),m(!1)},E=c==="text"?k.FormatColorTextIcon:k.HighlightIcon,y=u[0]||s,C=t.jsxs("div",{className:i.cn("Bear-RichEditor__color-menu p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px] max-w-[min(90vw,240px)]",o?"fixed z-[9999]":"absolute bottom-full left-0 mb-1"),style:o?{top:x.top,left:x.left}:void 0,children:[u.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 flex-wrap",children:u.slice(0,6).map((e,n)=>t.jsx("button",{type:"button",onClick:()=>f(e),className:i.cn("w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",s===e&&"ring-2 ring-primary-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:e},title:e},`recent-${n}`))})]}),t.jsx("div",{className:"grid grid-cols-8 gap-1",children:d.RICH_EDITOR_COLORS.map(e=>t.jsx("button",{type:"button",onClick:()=>f(e),className:i.cn("Bear-RichEditor__color-swatch w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",s===e&&"ring-2 ring-primary-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:e},title:e},e))}),t.jsxs("button",{type:"button",onClick:()=>f(""),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 touch-manipulation",children:["Remove ",c==="text"?"color":"highlight"]})]});return t.jsxs("div",{ref:g,className:"Bear-RichEditor__color-picker relative flex items-center",children:[t.jsxs("button",{ref:h,type:"button",title:v,disabled:a,onClick:()=>m(!l),className:i.cn("Bear-RichEditor__color-trigger",d.RICH_EDITOR_BUTTON_BASE_CLASSES,d.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center gap-0.5",a&&`Bear-RichEditor__color-trigger--disabled ${d.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:[t.jsx(E,{size:16}),t.jsx("span",{className:"w-3 h-1 rounded-sm mt-0.5",style:{backgroundColor:s||(c==="text"?"#000000":"#fef08a")}})]}),y&&p&&t.jsx("button",{type:"button",title:`Apply ${c==="text"?"text":"highlight"} color`,disabled:a,onClick:()=>p(y),className:i.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",a&&"opacity-50 cursor-not-allowed"),children:t.jsx(I.CheckIcon,{size:12})}),l&&(o&&typeof document<"u"?S.createPortal(C,document.body):C)]})};exports.ToolbarColorPicker=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),c=require("../../../../utils/cn.cjs"),N=require("../../../../hooks/useClickOutside.cjs");require("../../../../context/BearProvider.cjs");require("../../../../hooks/useBearComponent/useBearComponent.cjs");const t=require("../../../../constants/numbers.const.cjs"),o=require("../../../../constants/generals.const.cjs"),j=require("../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs"),q=require("../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs");require("../../../FormControl/FormControl.context.cjs");const p=require("../../../Icon/index.cjs"),L=require("../../../OverlayPortal/OverlayPortal.cjs"),R=require("../../../Tooltip/Tooltip.cjs"),P=require("../../RichEditor.const.cjs"),w=require("./ToolbarColorPicker.const.cjs"),z=O=>{const{value:n,onChange:E,title:x,disabled:i,type:s=o.COLOR_TYPE_TEXT,recentColors:l=[],onApplyLast:b}=O,[a,d]=h.useState(!1),u=h.useRef(null),y=h.useRef(null),{style:T,ready:C}=j.useFixedAnchorPosition({anchorRef:u,open:a,minWidthPx:t.TWO_HUNDRED_FORTY});N.useClickOutsideMultiple([u,y],()=>d(!1),{enabled:a});const g=r=>{E(r),d(!1)},f=s===o.COLOR_TYPE_TEXT?p.FormatColorTextIcon:p.HighlightIcon,_=l[t.ZERO]||n,k=s===o.COLOR_TYPE_TEXT?o.COLOR_BLACK:o.COLOR_HIGHLIGHT_YELLOW,m=s===o.COLOR_TYPE_TEXT?"Apply last text color":"Apply last highlight color";return e.jsxs("div",{className:"Bear-RichEditor__color-picker relative flex items-center",children:[e.jsx(R.Tooltip,{content:x,delay:t.FOUR_HUNDRED,position:"top",children:e.jsxs("button",{ref:u,type:"button","aria-label":x,disabled:i,onClick:()=>d(!a),className:c.cn("Bear-RichEditor__color-trigger p-1.5 rounded transition-colors","text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-zinc-700","flex items-center gap-0.5",i&&"Bear-RichEditor__color-trigger--disabled opacity-50 cursor-not-allowed"),children:[e.jsx(f,{size:t.SIXTEEN}),e.jsx("span",{className:"w-3 h-1 rounded-sm mt-0.5",style:{backgroundColor:n||k}})]})}),_&&b&&e.jsx(R.Tooltip,{content:m,delay:t.FOUR_HUNDRED,position:"top",children:e.jsx("button",{type:"button","aria-label":m,disabled:i,onClick:()=>b(_),className:c.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",i&&"opacity-50 cursor-not-allowed"),children:e.jsx(p.CheckIcon,{size:t.TWELVE})})}),e.jsxs(L.OverlayPortal,{open:a,ready:C,style:T,zIndex:q.ANCHOR_DEFAULT_Z_INDEX,panelRef:y,className:"Bear-RichEditor__color-menu p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px] max-w-[min(90vw,240px)]",children:[l.length>t.ZERO&&e.jsxs("div",{className:"mb-3",children:[e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400 mb-1.5",children:"Recent"}),e.jsx("div",{className:"flex gap-1 flex-wrap",children:l.slice(t.ZERO,w.COLOR_RECENT_MAX).map((r,v)=>e.jsx("button",{type:"button",onClick:()=>g(r),className:c.cn("w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",n===r&&"ring-2 ring-primary-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:r},title:r},`recent-${v}`))})]}),e.jsx("div",{className:"grid grid-cols-8 gap-1",children:P.RICH_EDITOR_COLORS.map(r=>e.jsx("button",{type:"button",onClick:()=>g(r),className:c.cn("Bear-RichEditor__color-swatch w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",n===r&&"ring-2 ring-primary-500 ring-offset-1 dark:ring-offset-zinc-800"),style:{backgroundColor:r},title:r},r))}),e.jsxs("button",{type:"button",onClick:()=>g(""),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 touch-manipulation",children:["Remove ",s===o.COLOR_TYPE_TEXT?"color":"highlight"]})]})]})};exports.ToolbarColorPicker=z;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../constants/numbers.const.cjs"),t=e.SIX;exports.COLOR_RECENT_MAX=t;

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

@@ -0,0 +1,7 @@
+export declare const COLOR_PICKER_MOBILE_QUERY = "(max-width: 640px)";
+export declare const COLOR_MENU_HEIGHT = 240;
+export declare const COLOR_MENU_HEIGHT_OFFSET = 244;
+export declare const COLOR_MENU_WIDTH = 220;
+export declare const COLOR_MENU_EDGE_PAD = 8;
+export declare const COLOR_MENU_GAP = 4;
+export declare const COLOR_RECENT_MAX = 6;

package/dist/components/RichEditor/components/ToolbarColorPicker/ToolbarColorPicker.const.js

@@ -0,0 +1,5 @@
+import { SIX as o } from "../../../../constants/numbers.const.js";
+const t = o;
+export {
+  t as COLOR_RECENT_MAX
+};

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

@@ -1,4 +1,2 @@
-import { FC } from 'react';
 import { ToolbarColorPickerProps } from '../../RichEditor.types';
-export declare const ToolbarColorPicker: FC<ToolbarColorPickerProps>;
-export default ToolbarColorPicker;
+export declare const ToolbarColorPicker: (props: ToolbarColorPickerProps) => import("react/jsx-runtime").JSX.Element;