@forgedevstack/bear 1.3.0 → 1.3.2

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

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

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

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

package/dist/components/RichEditor/components/ToolbarDropdown/ToolbarDropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),h=require("../../../../utils/cn.cjs"),i=require("../../RichEditor.const.cjs"),x=()=>r.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2","aria-hidden":"true",children:r.jsx("path",{d:"M6 9l6 6 6-6"})}),w=p=>{const{options:s,value:d,onChange:_,title:m,disabled:c,icon:l}=p,[u,t]=a.useState(!1),n=a.useRef(null);a.useEffect(()=>{const e=g=>{n.current&&!n.current.contains(g.target)&&t(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const o=s.find(e=>e.value===d),b=e=>{_(e.value),t(!1)};return r.jsxs("div",{ref:n,className:"Bear-RichEditor__dropdown relative",children:[r.jsxs("button",{type:"button",title:m,disabled:c,onClick:()=>t(!u),className:h.cn("Bear-RichEditor__dropdown-trigger",i.RICH_EDITOR_BUTTON_BASE_CLASSES,i.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center gap-1 min-w-[80px]",c&&`Bear-RichEditor__dropdown-trigger--disabled ${i.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:[l&&r.jsx("span",{className:"Bear-RichEditor__dropdown-icon",children:l}),r.jsx("span",{className:"Bear-RichEditor__dropdown-label text-xs truncate",children:(o==null?void 0:o.label)||"Normal"}),r.jsx(x,{})]}),u&&r.jsx("div",{className:"Bear-RichEditor__dropdown-menu absolute top-full left-0 mt-1 z-50 min-w-[140px] bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-lg py-1",children:s.map(e=>r.jsx("button",{type:"button",onClick:()=>b(e),className:h.cn("Bear-RichEditor__dropdown-option","w-full px-3 py-2 text-left text-sm transition-colors","hover:bg-gray-100 dark:hover:bg-zinc-700",e.value===d?"bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400":"text-gray-700 dark:text-gray-300"),children:e.preview||e.label},e.value))})]})};exports.ToolbarDropdown=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),h=require("../../../../utils/cn.cjs"),R=require("@forgedevstack/bear-icons"),w=require("../../../OverlayPortal/OverlayPortal.cjs"),v=require("../../../Tooltip/Tooltip.cjs"),f=require("../../../../hooks/useClickOutside.cjs");require("../../../../context/BearProvider.cjs");require("../../../../hooks/useBearComponent/useBearComponent.cjs");const s=require("../../../../constants/numbers.const.cjs"),E=require("../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs"),q=require("../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs");require("../../../FormControl/FormControl.context.cjs");const k=x=>{const{options:l,value:c,onChange:g,title:d,disabled:u,icon:p}=x,[o,t]=a.useState(!1),n=a.useRef(null),b=a.useRef(null),{style:y,ready:m}=E.useFixedAnchorPosition({anchorRef:n,open:o,minWidthPx:s.ONE_HUNDRED_FIFTY});f.useClickOutsideMultiple([n,b],()=>t(!1),{enabled:o});const i=l.find(e=>e.value===c),_=e=>{g(e.value),t(!1)};return r.jsxs("div",{className:"Bear-RichEditor__dropdown relative",children:[r.jsx(v.Tooltip,{content:d,delay:s.FOUR_HUNDRED,position:"top",children:r.jsxs("button",{ref:n,type:"button","aria-label":d,disabled:u,onClick:()=>t(!o),className:h.cn("Bear-RichEditor__dropdown-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-1 min-w-[80px]",u&&"Bear-RichEditor__dropdown-trigger--disabled opacity-50 cursor-not-allowed"),children:[p&&r.jsx("span",{className:"Bear-RichEditor__dropdown-icon",children:p}),r.jsx("span",{className:"Bear-RichEditor__dropdown-label text-xs truncate",children:(i==null?void 0:i.label)||"Normal"}),r.jsx(R.ChevronDownIcon,{size:s.TWELVE})]})}),r.jsx(w.OverlayPortal,{open:o,ready:m,style:y,zIndex:q.ANCHOR_DEFAULT_Z_INDEX,panelRef:b,className:"Bear-RichEditor__dropdown-menu min-w-[140px] bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-lg py-1",children:l.map(e=>r.jsx("button",{type:"button",onClick:()=>_(e),className:h.cn("Bear-RichEditor__dropdown-option","w-full px-3 py-2 text-left text-sm transition-colors","hover:bg-gray-100 dark:hover:bg-zinc-700",e.value===c?"bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400":"text-gray-700 dark:text-gray-300"),children:e.preview||e.label},e.value))})]})};exports.ToolbarDropdown=k;

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

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

package/dist/components/RichEditor/components/ToolbarDropdown/ToolbarDropdown.js

@@ -1,57 +1,80 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { useState as b, useRef as f, useEffect as w } from "react";
-import { cn as m } from "../../../../utils/cn.js";
-import { RICH_EDITOR_BUTTON_DISABLED_CLASSES as E, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as v, RICH_EDITOR_BUTTON_BASE_CLASSES as x } from "../../RichEditor.const.js";
-const R = () => /* @__PURE__ */ r("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M6 9l6 6 6-6" }) }), k = (p) => {
-  const { options: a, value: d, onChange: u, title: h, disabled: i, icon: l } = p, [s, t] = b(!1), o = f(null);
-  w(() => {
-    const e = (g) => {
-      o.current && !o.current.contains(g.target) && t(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []);
-  const n = a.find((e) => e.value === d), _ = (e) => {
-    u(e.value), t(!1);
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useState as _, useRef as h } from "react";
+import { cn as g } from "../../../../utils/cn.js";
+import { ChevronDownIcon as w } from "@forgedevstack/bear-icons";
+import { OverlayPortal as R } from "../../../OverlayPortal/OverlayPortal.js";
+import { Tooltip as v } from "../../../Tooltip/Tooltip.js";
+import { useClickOutsideMultiple as E } from "../../../../hooks/useClickOutside.js";
+import "../../../../context/BearProvider.js";
+import "../../../../hooks/useBearComponent/useBearComponent.js";
+import { ONE_HUNDRED_FIFTY as N, FOUR_HUNDRED as k, TWELVE as D } from "../../../../constants/numbers.const.js";
+import { useFixedAnchorPosition as B } from "../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
+import { ANCHOR_DEFAULT_Z_INDEX as z } from "../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js";
+import "../../../FormControl/FormControl.context.js";
+const M = (u) => {
+  const { options: n, value: l, onChange: b, title: d, disabled: s, icon: c } = u, [o, t] = _(!1), a = h(null), p = h(null), { style: f, ready: x } = B({
+    anchorRef: a,
+    open: o,
+    minWidthPx: N
+  });
+  E(
+    [a, p],
+    () => t(!1),
+    { enabled: o }
+  );
+  const i = n.find((r) => r.value === l), y = (r) => {
+    b(r.value), t(!1);
   };
-  return /* @__PURE__ */ c("div", { ref: o, className: "Bear-RichEditor__dropdown relative", children: [
-    /* @__PURE__ */ c(
+  return /* @__PURE__ */ m("div", { className: "Bear-RichEditor__dropdown relative", children: [
+    /* @__PURE__ */ e(v, { content: d, delay: k, position: "top", children: /* @__PURE__ */ m(
       "button",
       {
+        ref: a,
         type: "button",
-        title: h,
-        disabled: i,
-        onClick: () => t(!s),
-        className: m(
-          "Bear-RichEditor__dropdown-trigger",
-          x,
-          v,
+        "aria-label": d,
+        disabled: s,
+        onClick: () => t(!o),
+        className: g(
+          "Bear-RichEditor__dropdown-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-1 min-w-[80px]",
-          i && `Bear-RichEditor__dropdown-trigger--disabled ${E}`
+          s && "Bear-RichEditor__dropdown-trigger--disabled opacity-50 cursor-not-allowed"
         ),
         children: [
-          l && /* @__PURE__ */ r("span", { className: "Bear-RichEditor__dropdown-icon", children: l }),
-          /* @__PURE__ */ r("span", { className: "Bear-RichEditor__dropdown-label text-xs truncate", children: (n == null ? void 0 : n.label) || "Normal" }),
-          /* @__PURE__ */ r(R, {})
+          c && /* @__PURE__ */ e("span", { className: "Bear-RichEditor__dropdown-icon", children: c }),
+          /* @__PURE__ */ e("span", { className: "Bear-RichEditor__dropdown-label text-xs truncate", children: (i == null ? void 0 : i.label) || "Normal" }),
+          /* @__PURE__ */ e(w, { size: D })
         ]
       }
-    ),
-    s && /* @__PURE__ */ r("div", { className: "Bear-RichEditor__dropdown-menu absolute top-full left-0 mt-1 z-50 min-w-[140px] bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-lg py-1", children: a.map((e) => /* @__PURE__ */ r(
-      "button",
+    ) }),
+    /* @__PURE__ */ e(
+      R,
       {
-        type: "button",
-        onClick: () => _(e),
-        className: m(
-          "Bear-RichEditor__dropdown-option",
-          "w-full px-3 py-2 text-left text-sm transition-colors",
-          "hover:bg-gray-100 dark:hover:bg-zinc-700",
-          e.value === d ? "bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400" : "text-gray-700 dark:text-gray-300"
-        ),
-        children: e.preview || e.label
-      },
-      e.value
-    )) })
+        open: o,
+        ready: x,
+        style: f,
+        zIndex: z,
+        panelRef: p,
+        className: "Bear-RichEditor__dropdown-menu min-w-[140px] bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-lg py-1",
+        children: n.map((r) => /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => y(r),
+            className: g(
+              "Bear-RichEditor__dropdown-option",
+              "w-full px-3 py-2 text-left text-sm transition-colors",
+              "hover:bg-gray-100 dark:hover:bg-zinc-700",
+              r.value === l ? "bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400" : "text-gray-700 dark:text-gray-300"
+            ),
+            children: r.preview || r.label
+          },
+          r.value
+        ))
+      }
+    )
   ] });
 };
 export {
-  k as ToolbarDropdown
+  M as ToolbarDropdown
 };

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

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

package/dist/components/RichEditor/components/ToolbarMore/ToolbarMore.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),E=require("react-dom"),h=require("../../../../utils/cn.cjs"),l=require("../../RichEditor.const.cjs"),p=()=>e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"12",cy:"12",r:"1.5",fill:"currentColor"}),e.jsx("circle",{cx:"6",cy:"12",r:"1.5",fill:"currentColor"}),e.jsx("circle",{cx:"18",cy:"12",r:"1.5",fill:"currentColor"})]}),R=({children:_,disabled:u,isMobile:r})=>{const[o,a]=t.useState(!1),c=t.useRef(null),i=t.useRef(null),[d,g]=t.useState({top:0,left:0});t.useEffect(()=>{const n=m=>{var x;if(c.current&&!c.current.contains(m.target)){const s=m.target;(x=s.closest)!=null&&x.call(s,".Bear-RichEditor__more-menu")||a(!1)}};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[]),t.useEffect(()=>{if(o&&r&&i.current&&typeof document<"u"){const n=i.current.getBoundingClientRect();g({top:n.bottom+4,left:Math.max(8,n.right-220)})}},[o,r]);const f=e.jsx("div",{className:h.cn("Bear-RichEditor__more-menu p-2 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,280px)] max-h-[70vh] overflow-y-auto",r?"fixed z-[9999]":"absolute top-full right-0 mt-1 z-50"),style:r?{top:d.top,left:d.left}:void 0,children:e.jsx("div",{className:"flex flex-wrap items-center gap-0.5",children:_})});return e.jsxs("div",{ref:c,className:"Bear-RichEditor__more relative",children:[e.jsx("button",{ref:i,type:"button",title:"More options",disabled:u,onClick:()=>a(!o),className:h.cn("Bear-RichEditor__more-trigger",l.RICH_EDITOR_BUTTON_BASE_CLASSES,l.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center justify-center",o&&"bg-primary-500 text-white",u&&`Bear-RichEditor__more-trigger--disabled ${l.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:e.jsx(p,{})}),o&&(r&&typeof document<"u"?E.createPortal(f,document.body):f)]})};exports.ToolbarMore=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),x=require("../../../../utils/cn.cjs"),h=require("../../../OverlayPortal/OverlayPortal.cjs"),b=require("../../../Tooltip/Tooltip.cjs"),p=require("../../../../hooks/useClickOutside.cjs");require("../../../../context/BearProvider.cjs");require("../../../../hooks/useBearComponent/useBearComponent.cjs");const i=require("../../../../constants/numbers.const.cjs"),_=require("../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs"),g=require("../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs");require("../../../FormControl/FormControl.context.cjs");const a=require("../../RichEditor.const.cjs"),R=require("@forgedevstack/bear-icons"),y=l=>{const{children:d,disabled:n}=l,[r,s]=t.useState(!1),o=t.useRef(null),c=t.useRef(null),{style:u,ready:m}=_.useFixedAnchorPosition({anchorRef:o,open:r,minWidthPx:i.TWO_HUNDRED_TWENTY,placement:"bottom-end"});return p.useClickOutsideMultiple([o,c],()=>s(!1),{enabled:r}),e.jsxs("div",{className:"Bear-RichEditor__more relative",children:[e.jsx(b.Tooltip,{content:a.TITLE_MORE_OPTIONS,delay:i.FOUR_HUNDRED,position:"top",children:e.jsx("button",{ref:o,type:"button","aria-label":a.TITLE_MORE_OPTIONS,disabled:n,onClick:()=>s(!r),className:x.cn("Bear-RichEditor__more-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 justify-center",r&&"bg-primary-500 text-white",n&&"Bear-RichEditor__more-trigger--disabled opacity-50 cursor-not-allowed"),children:e.jsx(R.MoreHorizIcon,{size:i.SIXTEEN})})}),e.jsx(h.OverlayPortal,{open:r,ready:m,style:u,zIndex:g.ANCHOR_DEFAULT_Z_INDEX,panelRef:c,className:"Bear-RichEditor__more-menu p-2 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,280px)] max-h-[70vh] overflow-y-auto",children:e.jsx("div",{className:"flex flex-wrap items-center gap-0.5",children:d})})]})};exports.ToolbarMore=y;

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

@@ -1,9 +1,7 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
 export interface ToolbarMoreProps {
     children: ReactNode;
     disabled?: boolean;
-    /** When true, render menu via portal for mobile (avoids clipping) */
     isMobile?: boolean;
 }
-export declare const ToolbarMore: FC<ToolbarMoreProps>;
-export default ToolbarMore;
+export declare const ToolbarMore: (props: ToolbarMoreProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/RichEditor/components/ToolbarMore/ToolbarMore.js

@@ -1,63 +1,61 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { useState as f, useRef as p, useEffect as h } from "react";
-import { createPortal as C } from "react-dom";
-import { cn as _ } from "../../../../utils/cn.js";
-import { RICH_EDITOR_BUTTON_DISABLED_CLASSES as R, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as v, RICH_EDITOR_BUTTON_BASE_CLASSES as w } from "../../RichEditor.const.js";
-const y = () => /* @__PURE__ */ g("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "1.5", fill: "currentColor" }),
-  /* @__PURE__ */ e("circle", { cx: "6", cy: "12", r: "1.5", fill: "currentColor" }),
-  /* @__PURE__ */ e("circle", { cx: "18", cy: "12", r: "1.5", fill: "currentColor" })
-] }), b = ({ children: x, disabled: l, isMobile: t }) => {
-  const [r, s] = f(!1), n = p(null), i = p(null), [d, E] = f({ top: 0, left: 0 });
-  h(() => {
-    const o = (a) => {
-      var u;
-      if (n.current && !n.current.contains(a.target)) {
-        const c = a.target;
-        (u = c.closest) != null && u.call(c, ".Bear-RichEditor__more-menu") || s(!1);
-      }
-    };
-    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
-  }, []), h(() => {
-    if (r && t && i.current && typeof document < "u") {
-      const o = i.current.getBoundingClientRect();
-      E({ top: o.bottom + 4, left: Math.max(8, o.right - 220) });
-    }
-  }, [r, t]);
-  const m = /* @__PURE__ */ e(
-    "div",
-    {
-      className: _(
-        "Bear-RichEditor__more-menu p-2 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,280px)] max-h-[70vh] overflow-y-auto",
-        t ? "fixed z-[9999]" : "absolute top-full right-0 mt-1 z-50"
-      ),
-      style: t ? { top: d.top, left: d.left } : void 0,
-      children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-0.5", children: x })
-    }
-  );
-  return /* @__PURE__ */ g("div", { ref: n, className: "Bear-RichEditor__more relative", children: [
-    /* @__PURE__ */ e(
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useState as f, useRef as a } from "react";
+import { cn as h } from "../../../../utils/cn.js";
+import { OverlayPortal as u } from "../../../OverlayPortal/OverlayPortal.js";
+import { Tooltip as g } from "../../../Tooltip/Tooltip.js";
+import { useClickOutsideMultiple as x } from "../../../../hooks/useClickOutside.js";
+import "../../../../context/BearProvider.js";
+import "../../../../hooks/useBearComponent/useBearComponent.js";
+import { TWO_HUNDRED_TWENTY as b, FOUR_HUNDRED as _, SIXTEEN as R } from "../../../../constants/numbers.const.js";
+import { useFixedAnchorPosition as y } from "../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
+import { ANCHOR_DEFAULT_Z_INDEX as E } from "../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js";
+import "../../../FormControl/FormControl.context.js";
+import { TITLE_MORE_OPTIONS as m } from "../../RichEditor.const.js";
+import { MoreHorizIcon as N } from "@forgedevstack/bear-icons";
+const A = (l) => {
+  const { children: s, disabled: t } = l, [r, i] = f(!1), o = a(null), n = a(null), { style: c, ready: d } = y({
+    anchorRef: o,
+    open: r,
+    minWidthPx: b,
+    placement: "bottom-end"
+  });
+  return x(
+    [o, n],
+    () => i(!1),
+    { enabled: r }
+  ), /* @__PURE__ */ p("div", { className: "Bear-RichEditor__more relative", children: [
+    /* @__PURE__ */ e(g, { content: m, delay: _, position: "top", children: /* @__PURE__ */ e(
       "button",
       {
-        ref: i,
+        ref: o,
         type: "button",
-        title: "More options",
-        disabled: l,
-        onClick: () => s(!r),
-        className: _(
-          "Bear-RichEditor__more-trigger",
-          w,
-          v,
+        "aria-label": m,
+        disabled: t,
+        onClick: () => i(!r),
+        className: h(
+          "Bear-RichEditor__more-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 justify-center",
           r && "bg-primary-500 text-white",
-          l && `Bear-RichEditor__more-trigger--disabled ${R}`
+          t && "Bear-RichEditor__more-trigger--disabled opacity-50 cursor-not-allowed"
         ),
-        children: /* @__PURE__ */ e(y, {})
+        children: /* @__PURE__ */ e(N, { size: R })
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        open: r,
+        ready: d,
+        style: c,
+        zIndex: E,
+        panelRef: n,
+        className: "Bear-RichEditor__more-menu p-2 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,280px)] max-h-[70vh] overflow-y-auto",
+        children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-0.5", children: s })
       }
-    ),
-    r && (t && typeof document < "u" ? C(m, document.body) : m)
+    )
   ] });
 };
 export {
-  b as ToolbarMore
+  A as ToolbarMore
 };

package/dist/components/RichEditor/components/ToolbarSignature/ToolbarSignature.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),p=require("../../../../utils/cn.cjs"),E=require("../../../../hooks/useClickOutside.cjs");require("../../../../context/BearProvider.cjs");require("../../../../hooks/useBearComponent/useBearComponent.cjs");const i=require("../../../../constants/numbers.const.cjs"),q=require("../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs"),y=require("../../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs");require("../../../FormControl/FormControl.context.cjs");const f=require("@forgedevstack/bear-icons"),m=require("../../../OverlayPortal/OverlayPortal.cjs"),T=require("../../../SignPad/SignPad.cjs"),j=require("../../../Tooltip/Tooltip.cjs"),d=require("../../../Button/Button.cjs"),h=require("../../RichEditor.const.cjs"),N=g=>{const{title:a,disabled:c,onInsert:b}=g,[r,t]=n.useState(!1),[o,l]=n.useState(null),s=n.useRef(null),u=n.useRef(null),{style:R,ready:_}=q.useFixedAnchorPosition({anchorRef:s,open:r,minWidthPx:i.FOUR_HUNDRED});E.useClickOutsideMultiple([s,u],()=>t(!1),{enabled:r});const x=()=>{o&&(b(o),l(null),t(!1))};return e.jsxs("div",{className:"Bear-RichEditor__signature relative",children:[e.jsx(j.Tooltip,{content:a,delay:i.FOUR_HUNDRED,position:"top",children:e.jsx("button",{ref:s,type:"button","aria-label":a,disabled:c,onClick:()=>t(!r),className:p.cn("Bear-RichEditor__button p-1.5 rounded transition-colors","text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-zinc-700",r&&"Bear-RichEditor__button--active bg-primary-500 text-white",c&&"Bear-RichEditor__button--disabled opacity-50 cursor-not-allowed"),children:e.jsx(f.EditIcon,{size:i.SIXTEEN})})}),e.jsxs(m.OverlayPortal,{open:r,ready:_,style:R,zIndex:y.ANCHOR_DEFAULT_Z_INDEX,panelRef:u,className:"Bear-RichEditor__signature-menu p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl",children:[e.jsx(T.SignPad,{height:i.TWO_HUNDRED,onChange:l,placeholder:"Sign here"}),e.jsxs("div",{className:"flex justify-end gap-2 mt-2",children:[e.jsx(d.Button,{size:"sm",variant:"ghost",onClick:()=>t(!1),children:h.TITLE_CANCEL}),e.jsx(d.Button,{size:"sm",variant:"primary",onClick:x,disabled:!o,children:h.TITLE_INSERT})]})]})]})};exports.ToolbarSignature=N;

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

@@ -0,0 +1,2 @@
+import { ToolbarSignatureProps } from './ToolbarSignature.types';
+export declare const ToolbarSignature: (props: ToolbarSignatureProps) => import("react/jsx-runtime").JSX.Element;