@forgedevstack/bear 1.0.2 → 1.0.4-alpha

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

@@ -0,0 +1,57 @@
+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' | '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;
+    active?: boolean;
+    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;

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

@@ -0,0 +1,126 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { useState as k, useRef as y, useEffect as _ } from "react";
+import { cn as a } from "../../../../utils/cn.js";
+import { RICH_EDITOR_BUTTON_DISABLED_CLASSES as C, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as E, RICH_EDITOR_BUTTON_BASE_CLASSES as R, RICH_EDITOR_COLORS as v } from "../../RichEditor.const.js";
+import { FormatColorTextIcon as I, HighlightIcon as N } from "../../../Icon/icons/editor.js";
+import { CheckIcon as S } from "../../../Icon/icons/status.js";
+const L = (p) => {
+  const {
+    value: o,
+    onChange: b,
+    title: f,
+    disabled: n,
+    type: i = "text",
+    recentColors: l = [],
+    onApplyLast: m
+  } = p, [h, s] = k(!1), c = y(null);
+  _(() => {
+    const e = (g) => {
+      c.current && !c.current.contains(g.target) && s(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []);
+  const d = (e) => {
+    b(e), s(!1);
+  }, x = i === "text" ? I : N, u = l[0] || o;
+  return /* @__PURE__ */ r("div", { ref: c, className: "Bear-RichEditor__color-picker relative flex items-center", children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        title: f,
+        disabled: n,
+        onClick: () => s(!h),
+        className: a(
+          "Bear-RichEditor__color-trigger",
+          R,
+          E,
+          "flex items-center gap-0.5",
+          n && `Bear-RichEditor__color-trigger--disabled ${C}`
+        ),
+        children: [
+          /* @__PURE__ */ t(x, { size: 16 }),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: "w-3 h-1 rounded-sm mt-0.5",
+              style: { backgroundColor: o || (i === "text" ? "#000000" : "#fef08a") }
+            }
+          )
+        ]
+      }
+    ),
+    u && m && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        title: `Apply ${i === "text" ? "text" : "highlight"} color`,
+        disabled: n,
+        onClick: () => m(u),
+        className: a(
+          "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",
+          n && "opacity-50 cursor-not-allowed"
+        ),
+        children: /* @__PURE__ */ t(S, { size: 12 })
+      }
+    ),
+    h && /* @__PURE__ */ r(
+      "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: [
+          l.length > 0 && /* @__PURE__ */ r("div", { className: "mb-3", children: [
+            /* @__PURE__ */ t("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1.5", children: "Recent" }),
+            /* @__PURE__ */ t("div", { className: "flex gap-1", children: l.slice(0, 6).map((e, g) => /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => d(e),
+                className: a(
+                  "w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",
+                  o === e && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
+                ),
+                style: { backgroundColor: e },
+                title: e
+              },
+              `recent-${g}`
+            )) })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "grid grid-cols-8 gap-1", children: v.map((e) => /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: () => d(e),
+              className: a(
+                "Bear-RichEditor__color-swatch",
+                "w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",
+                o === e && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
+              ),
+              style: { backgroundColor: e },
+              title: e
+            },
+            e
+          )) }),
+          /* @__PURE__ */ r(
+            "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 ",
+                i === "text" ? "color" : "highlight"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  L as ToolbarColorPicker
+};

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),h=require("../../../../utils/cn.cjs"),s=require("../../RichEditor.const.cjs"),m=()=>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:a,value:d,onChange:_,title:b,disabled:c,icon:l}=p,[u,t]=i.useState(!1),n=i.useRef(null);i.useEffect(()=>{const e=x=>{n.current&&!n.current.contains(x.target)&&t(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const o=a.find(e=>e.value===d),g=e=>{_(e.value),t(!1)};return r.jsxs("div",{ref:n,className:"Bear-RichEditor__dropdown relative",children:[r.jsxs("button",{type:"button",title:b,disabled:c,onClick:()=>t(!u),className:h.cn("Bear-RichEditor__dropdown-trigger",s.RICH_EDITOR_BUTTON_BASE_CLASSES,s.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center gap-1 min-w-[80px]",c&&`Bear-RichEditor__dropdown-trigger--disabled ${s.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(m,{})]}),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:a.map(e=>r.jsx("button",{type:"button",onClick:()=>g(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-pink-50 dark:bg-pink-900/20 text-pink-600 dark:text-pink-400":"text-gray-700 dark:text-gray-300"),children:e.preview||e.label},e.value))})]})};exports.ToolbarDropdown=w;

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

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

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

@@ -0,0 +1,57 @@
+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 p } 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 k = () => /* @__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" }) }), I = (u) => {
+  const { options: a, value: d, onChange: h, title: m, disabled: i, icon: l } = u, [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) => {
+    h(e.value), t(!1);
+  };
+  return /* @__PURE__ */ c("div", { ref: o, className: "Bear-RichEditor__dropdown relative", children: [
+    /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        title: m,
+        disabled: i,
+        onClick: () => t(!s),
+        className: p(
+          "Bear-RichEditor__dropdown-trigger",
+          x,
+          v,
+          "flex items-center gap-1 min-w-[80px]",
+          i && `Bear-RichEditor__dropdown-trigger--disabled ${E}`
+        ),
+        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(k, {})
+        ]
+      }
+    ),
+    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",
+      {
+        type: "button",
+        onClick: () => _(e),
+        className: p(
+          "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-pink-50 dark:bg-pink-900/20 text-pink-600 dark:text-pink-400" : "text-gray-700 dark:text-gray-300"
+        ),
+        children: e.preview || e.label
+      },
+      e.value
+    )) })
+  ] });
+};
+export {
+  I as ToolbarDropdown
+};

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),d=require("../../../../utils/cn.cjs"),o=require("../../RichEditor.const.cjs"),u=()=>e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),e.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]}),_=({children:l,disabled:i})=>{const[r,s]=n.useState(!1),t=n.useRef(null);return n.useEffect(()=>{const c=a=>{t.current&&!t.current.contains(a.target)&&s(!1)};return document.addEventListener("mousedown",c),()=>document.removeEventListener("mousedown",c)},[]),e.jsxs("div",{ref:t,className:"Bear-RichEditor__more relative",children:[e.jsx("button",{type:"button",title:"More options",disabled:i,onClick:()=>s(!r),className:d.cn("Bear-RichEditor__more-trigger",o.RICH_EDITOR_BUTTON_BASE_CLASSES,o.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center justify-center",r&&"bg-pink-500 text-white",i&&`Bear-RichEditor__more-trigger--disabled ${o.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:e.jsx(u,{})}),r&&e.jsx("div",{className:"Bear-RichEditor__more-menu absolute top-full right-0 mt-1 p-2 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl z-50 min-w-[200px]",children:e.jsx("div",{className:"flex flex-wrap items-center gap-0.5",children:l})})]})};exports.ToolbarMore=_;

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

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from 'react';
+export interface ToolbarMoreProps {
+    children: ReactNode;
+    disabled?: boolean;
+}
+export declare const ToolbarMore: FC<ToolbarMoreProps>;
+export default ToolbarMore;

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

@@ -0,0 +1,45 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useState as a, useRef as d, useEffect as m } from "react";
+import { cn as u } from "../../../../utils/cn.js";
+import { RICH_EDITOR_BUTTON_DISABLED_CLASSES as _, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as f, RICH_EDITOR_BUTTON_BASE_CLASSES as h } from "../../RichEditor.const.js";
+const E = () => /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ e("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ e("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+] }), S = ({ children: c, disabled: o }) => {
+  const [r, i] = a(!1), t = d(null);
+  return m(() => {
+    const n = (l) => {
+      t.current && !t.current.contains(l.target) && i(!1);
+    };
+    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
+  }, []), /* @__PURE__ */ s("div", { ref: t, className: "Bear-RichEditor__more relative", children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        title: "More options",
+        disabled: o,
+        onClick: () => i(!r),
+        className: u(
+          "Bear-RichEditor__more-trigger",
+          h,
+          f,
+          "flex items-center justify-center",
+          r && "bg-pink-500 text-white",
+          o && `Bear-RichEditor__more-trigger--disabled ${_}`
+        ),
+        children: /* @__PURE__ */ e(E, {})
+      }
+    ),
+    r && /* @__PURE__ */ e(
+      "div",
+      {
+        className: "Bear-RichEditor__more-menu absolute top-full right-0 mt-1 p-2 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl z-50 min-w-[200px]",
+        children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-0.5", children: c })
+      }
+    )
+  ] });
+};
+export {
+  S as ToolbarMore
+};

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

@@ -0,0 +1,2 @@
+export { ToolbarMore } from './ToolbarMore';
+export type { ToolbarMoreProps } from './ToolbarMore';

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

@@ -0,0 +1,4 @@
+export { ToolbarButton } from './ToolbarButton';
+export { ToolbarDropdown } from './ToolbarDropdown';
+export { ToolbarColorPicker } from './ToolbarColorPicker';
+export { ToolbarMore } from './ToolbarMore';

package/dist/components/RichEditor/helpers/formatHelpers.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(t,n)=>document.execCommand(t,!1,n),e=t=>document.queryCommandState(t),s=t=>document.queryCommandValue(t),d=t=>{if(!t)return!1;const n=t.startsWith("http://")||t.startsWith("https://")||t.startsWith("mailto:")?t:`https://${t}`;return r("createLink",n)},m=t=>t?r("foreColor",t):r("removeFormat"),l=t=>t?r("hiliteColor",t):r("removeFormat"),u=()=>{const t=new Set;return e("bold")&&t.add("bold"),e("italic")&&t.add("italic"),e("underline")&&t.add("underline"),e("strikeThrough")&&t.add("strikethrough"),e("insertUnorderedList")&&t.add("bulletList"),e("insertOrderedList")&&t.add("orderedList"),t},a=t=>r("insertHTML",t),c=(t,n)=>{const i=`<img src="${t}" alt="" style="max-width: 100%; height: auto;" />`;return a(i)},h=t=>new Promise((n,i)=>{const o=new FileReader;o.onload=()=>n(o.result),o.onerror=i,o.readAsDataURL(t)});exports.execCommand=r;exports.fileToDataUrl=h;exports.getActiveFormats=u;exports.insertHTML=a;exports.insertImage=c;exports.insertLink=d;exports.queryCommandState=e;exports.queryCommandValue=s;exports.setHighlightColor=l;exports.setTextColor=m;

package/dist/components/RichEditor/helpers/formatHelpers.d.ts

@@ -0,0 +1,57 @@
+import { ToolbarOption } from '../RichEditor.types';
+/**
+ * Execute a document command for rich text editing
+ */
+export declare const execCommand: (command: string, value?: string) => boolean;
+/**
+ * Query the state of a document command
+ */
+export declare const queryCommandState: (command: string) => boolean;
+/**
+ * Query the value of a document command
+ */
+export declare const queryCommandValue: (command: string) => string;
+/**
+ * Get current block format (p, h1, h2, etc.)
+ */
+export declare const getCurrentBlockFormat: () => string;
+/**
+ * Apply a format command based on toolbar option
+ */
+export declare const applyFormat: (format: ToolbarOption, editorRef?: React.RefObject<HTMLDivElement>) => boolean;
+/**
+ * Insert a link at current selection
+ */
+export declare const insertLink: (url: string) => boolean;
+/**
+ * Remove link from current selection
+ */
+export declare const removeLink: () => boolean;
+/**
+ * Set text color
+ */
+export declare const setTextColor: (color: string) => boolean;
+/**
+ * Set background/highlight color
+ */
+export declare const setHighlightColor: (color: string) => boolean;
+/**
+ * Get active formats from current selection
+ */
+export declare const getActiveFormats: () => Set<string>;
+/**
+ * Insert HTML at current cursor position
+ */
+export declare const insertHTML: (html: string) => boolean;
+/**
+ * Insert image at current cursor position
+ */
+export declare const insertImage: (src: string, alt?: string) => boolean;
+/**
+ * Convert file to base64 data URL
+ */
+export declare const fileToDataUrl: (file: File) => Promise<string>;
+/**
+ * Handle paste event to process images
+ */
+export declare const handlePasteImages: (event: ClipboardEvent) => Promise<string[]>;

package/dist/components/RichEditor/helpers/formatHelpers.js

@@ -0,0 +1,26 @@
+const n = (t, e) => document.execCommand(t, !1, e), r = (t) => document.queryCommandState(t), a = (t) => document.queryCommandValue(t), d = (t) => {
+  if (!t) return !1;
+  const e = t.startsWith("http://") || t.startsWith("https://") || t.startsWith("mailto:") ? t : `https://${t}`;
+  return n("createLink", e);
+}, m = (t) => t ? n("foreColor", t) : n("removeFormat"), u = (t) => t ? n("hiliteColor", t) : n("removeFormat"), c = () => {
+  const t = /* @__PURE__ */ new Set();
+  return r("bold") && t.add("bold"), r("italic") && t.add("italic"), r("underline") && t.add("underline"), r("strikeThrough") && t.add("strikethrough"), r("insertUnorderedList") && t.add("bulletList"), r("insertOrderedList") && t.add("orderedList"), t;
+}, s = (t) => n("insertHTML", t), l = (t, e) => {
+  const i = `<img src="${t}" alt="" style="max-width: 100%; height: auto;" />`;
+  return s(i);
+}, h = (t) => new Promise((e, i) => {
+  const o = new FileReader();
+  o.onload = () => e(o.result), o.onerror = i, o.readAsDataURL(t);
+});
+export {
+  n as execCommand,
+  h as fileToDataUrl,
+  c as getActiveFormats,
+  s as insertHTML,
+  l as insertImage,
+  d as insertLink,
+  r as queryCommandState,
+  a as queryCommandValue,
+  u as setHighlightColor,
+  m as setTextColor
+};

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

@@ -0,0 +1 @@
+export { execCommand, queryCommandState, queryCommandValue, getCurrentBlockFormat, applyFormat, insertLink, removeLink, setTextColor, setHighlightColor, getActiveFormats, insertHTML, insertImage, fileToDataUrl, handlePasteImages, } from './formatHelpers';

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

@@ -0,0 +1,4 @@
+export { RichEditor, default } from './RichEditor';
+export type { RichEditorProps, ToolbarOption, ToolbarButtonProps, DropdownOption, ToolbarDropdownProps } from './RichEditor.types';
+export * from './RichEditor.const';
+export * from './helpers';

package/dist/components/Sidebar/Sidebar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../utils/cn.cjs"),s=require("../Icon/index.cjs"),R=require("./components/SidebarItem/SidebarItem.cjs"),a=require("./Sidebar.const.cjs"),D=S=>{const{items:b,collapsed:r=!1,onCollapsedChange:n,width:_=a.SIDEBAR_WIDTH,collapsedWidth:I=a.SIDEBAR_COLLAPSED_WIDTH,header:o,footer:c,activeItemId:E,onItemClick:h,variant:t="default",position:l="left",className:u,style:A,testId:C,id:f}=S,x=r?I:_,B=l==="left"?"bear-border-r":"bear-border-l";return e.jsxs("aside",{id:f,"data-testid":C,className:i.cn("Bear-Sidebar",`Bear-Sidebar--${t}`,r&&"Bear-Sidebar--collapsed","bear-flex bear-flex-col bear-h-full bear-transition-all bear-duration-300",t==="default"&&B,a.SIDEBAR_VARIANT_STYLES[t],u),style:{width:x,...A},children:[o&&e.jsxs("div",{className:i.cn("Bear-Sidebar__header",a.SIDEBAR_HEADER_CLASSES),children:[!r&&o,n&&e.jsx("button",{type:"button",onClick:()=>n(!r),className:i.cn("Bear-Sidebar__toggle",a.SIDEBAR_TOGGLE_CLASSES),"aria-label":r?"Expand sidebar":"Collapse sidebar",children:r?l==="left"?e.jsx(s.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(s.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):l==="left"?e.jsx(s.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(s.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE})})]}),e.jsx("nav",{className:"Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1",children:b.map(d=>e.jsx(R.SidebarItem,{item:d,isActive:d.id===E,collapsed:r,onClick:h},d.id))}),c&&e.jsx("div",{className:i.cn("Bear-Sidebar__footer",a.SIDEBAR_FOOTER_CLASSES),children:r?null:c})]})};exports.Sidebar=D;

package/dist/components/Sidebar/Sidebar.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=256,r=64,a=16,b=12,S=14,E=18,t={default:"bear-bg-white dark:bear-bg-zinc-900 bear-border-zinc-200 dark:bear-border-zinc-700",bordered:"bear-bg-white dark:bear-bg-zinc-900 bear-border-2 bear-border-zinc-300 dark:bear-border-zinc-600 bear-rounded-xl bear-m-2",floating:"bear-bg-white/95 dark:bear-bg-zinc-900/95 bear-backdrop-blur-sm bear-shadow-2xl bear-rounded-xl bear-m-3"},_="bear-flex bear-items-center bear-gap-3 bear-py-2.5 bear-px-3 bear-rounded-lg bear-text-sm bear-transition-all bear-duration-200 bear-cursor-pointer",A="bear-bg-pink-500 bear-text-white bear-shadow-md",I="bear-text-zinc-600 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-900 dark:hover:bear-text-zinc-100",n="bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",o="bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-zinc-400 dark:bear-text-zinc-500",c="bear-px-3 bear-py-4 bear-border-b bear-border-zinc-100 dark:bear-border-zinc-800 bear-flex bear-items-center bear-justify-between",D="bear-px-3 bear-py-3 bear-border-t bear-border-zinc-100 dark:bear-border-zinc-800 bear-mt-auto",i="bear-p-1.5 bear-rounded-lg bear-text-zinc-400 dark:bear-text-zinc-500 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300 bear-transition-colors";exports.SIDEBAR_COLLAPSED_WIDTH=r;exports.SIDEBAR_DEPTH_INDENT=b;exports.SIDEBAR_FOOTER_CLASSES=D;exports.SIDEBAR_GROUP_TITLE_CLASSES=o;exports.SIDEBAR_HEADER_CLASSES=c;exports.SIDEBAR_ICON_SIZE=S;exports.SIDEBAR_ITEM_ACTIVE_CLASSES=A;exports.SIDEBAR_ITEM_BASE_CLASSES=_;exports.SIDEBAR_ITEM_DISABLED_CLASSES=n;exports.SIDEBAR_ITEM_INACTIVE_CLASSES=I;exports.SIDEBAR_PADDING_BASE=a;exports.SIDEBAR_TOGGLE_CLASSES=i;exports.SIDEBAR_TOGGLE_ICON_SIZE=E;exports.SIDEBAR_VARIANT_STYLES=t;exports.SIDEBAR_WIDTH=e;

package/dist/components/Sidebar/Sidebar.const.d.ts

@@ -0,0 +1,16 @@
+import { SidebarVariant } from './Sidebar.types';
+export declare const SIDEBAR_WIDTH = 256;
+export declare const SIDEBAR_COLLAPSED_WIDTH = 64;
+export declare const SIDEBAR_PADDING_BASE = 16;
+export declare const SIDEBAR_DEPTH_INDENT = 12;
+export declare const SIDEBAR_ICON_SIZE = 14;
+export declare const SIDEBAR_TOGGLE_ICON_SIZE = 18;
+export declare const SIDEBAR_VARIANT_STYLES: Record<SidebarVariant, string>;
+export declare const SIDEBAR_ITEM_BASE_CLASSES = "bear-flex bear-items-center bear-gap-3 bear-py-2.5 bear-px-3 bear-rounded-lg bear-text-sm bear-transition-all bear-duration-200 bear-cursor-pointer";
+export declare const SIDEBAR_ITEM_ACTIVE_CLASSES = "bear-bg-pink-500 bear-text-white bear-shadow-md";
+export declare const SIDEBAR_ITEM_INACTIVE_CLASSES = "bear-text-zinc-600 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-900 dark:hover:bear-text-zinc-100";
+export declare const SIDEBAR_ITEM_DISABLED_CLASSES = "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none";
+export declare const SIDEBAR_GROUP_TITLE_CLASSES = "bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-zinc-400 dark:bear-text-zinc-500";
+export declare const SIDEBAR_HEADER_CLASSES = "bear-px-3 bear-py-4 bear-border-b bear-border-zinc-100 dark:bear-border-zinc-800 bear-flex bear-items-center bear-justify-between";
+export declare const SIDEBAR_FOOTER_CLASSES = "bear-px-3 bear-py-3 bear-border-t bear-border-zinc-100 dark:bear-border-zinc-800 bear-mt-auto";
+export declare const SIDEBAR_TOGGLE_CLASSES = "bear-p-1.5 bear-rounded-lg bear-text-zinc-400 dark:bear-text-zinc-500 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300 bear-transition-colors";

package/dist/components/Sidebar/Sidebar.const.js

@@ -0,0 +1,22 @@
+const e = 256, r = 64, a = 16, b = 12, t = 14, n = 18, o = {
+  default: "bear-bg-white dark:bear-bg-zinc-900 bear-border-zinc-200 dark:bear-border-zinc-700",
+  bordered: "bear-bg-white dark:bear-bg-zinc-900 bear-border-2 bear-border-zinc-300 dark:bear-border-zinc-600 bear-rounded-xl bear-m-2",
+  floating: "bear-bg-white/95 dark:bear-bg-zinc-900/95 bear-backdrop-blur-sm bear-shadow-2xl bear-rounded-xl bear-m-3"
+}, c = "bear-flex bear-items-center bear-gap-3 bear-py-2.5 bear-px-3 bear-rounded-lg bear-text-sm bear-transition-all bear-duration-200 bear-cursor-pointer", S = "bear-bg-pink-500 bear-text-white bear-shadow-md", i = "bear-text-zinc-600 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-900 dark:hover:bear-text-zinc-100", d = "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none", E = "bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-zinc-400 dark:bear-text-zinc-500", _ = "bear-px-3 bear-py-4 bear-border-b bear-border-zinc-100 dark:bear-border-zinc-800 bear-flex bear-items-center bear-justify-between", A = "bear-px-3 bear-py-3 bear-border-t bear-border-zinc-100 dark:bear-border-zinc-800 bear-mt-auto", I = "bear-p-1.5 bear-rounded-lg bear-text-zinc-400 dark:bear-text-zinc-500 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300 bear-transition-colors";
+export {
+  r as SIDEBAR_COLLAPSED_WIDTH,
+  b as SIDEBAR_DEPTH_INDENT,
+  A as SIDEBAR_FOOTER_CLASSES,
+  E as SIDEBAR_GROUP_TITLE_CLASSES,
+  _ as SIDEBAR_HEADER_CLASSES,
+  t as SIDEBAR_ICON_SIZE,
+  S as SIDEBAR_ITEM_ACTIVE_CLASSES,
+  c as SIDEBAR_ITEM_BASE_CLASSES,
+  d as SIDEBAR_ITEM_DISABLED_CLASSES,
+  i as SIDEBAR_ITEM_INACTIVE_CLASSES,
+  a as SIDEBAR_PADDING_BASE,
+  I as SIDEBAR_TOGGLE_CLASSES,
+  n as SIDEBAR_TOGGLE_ICON_SIZE,
+  o as SIDEBAR_VARIANT_STYLES,
+  e as SIDEBAR_WIDTH
+};

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { SidebarProps } from './Sidebar.types';
+/**
+ * Sidebar - Collapsible navigation sidebar with nested items
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   items={items}
+ *   activeItemId={active}
+ *   onItemClick={(item) => setActive(item.id)}
+ *   header={<span>My App</span>}
+ * />
+ * ```
+ */
+export declare const Sidebar: FC<SidebarProps>;
+export default Sidebar;

package/dist/components/Sidebar/Sidebar.js

@@ -0,0 +1,70 @@
+import { jsxs as S, jsx as a } from "react/jsx-runtime";
+import { cn as r } from "../../utils/cn.js";
+import { ChevronRightIcon as b, ChevronLeftIcon as c } from "../Icon/index.js";
+import { SidebarItem as u } from "./components/SidebarItem/SidebarItem.js";
+import { SIDEBAR_WIDTH as v, SIDEBAR_COLLAPSED_WIDTH as L, SIDEBAR_TOGGLE_ICON_SIZE as i, SIDEBAR_TOGGLE_CLASSES as x, SIDEBAR_HEADER_CLASSES as N, SIDEBAR_FOOTER_CLASSES as T, SIDEBAR_VARIANT_STYLES as y } from "./Sidebar.const.js";
+const k = (_) => {
+  const {
+    items: f,
+    collapsed: e = !1,
+    onCollapsedChange: d,
+    width: m = v,
+    collapsedWidth: E = L,
+    header: s,
+    footer: n,
+    activeItemId: I,
+    onItemClick: p,
+    variant: t = "default",
+    position: l = "left",
+    className: h,
+    style: A,
+    testId: B,
+    id: C
+  } = _, D = e ? E : m, R = l === "left" ? "bear-border-r" : "bear-border-l";
+  return /* @__PURE__ */ S(
+    "aside",
+    {
+      id: C,
+      "data-testid": B,
+      className: r(
+        "Bear-Sidebar",
+        `Bear-Sidebar--${t}`,
+        e && "Bear-Sidebar--collapsed",
+        "bear-flex bear-flex-col bear-h-full bear-transition-all bear-duration-300",
+        t === "default" && R,
+        y[t],
+        h
+      ),
+      style: { width: D, ...A },
+      children: [
+        s && /* @__PURE__ */ S("div", { className: r("Bear-Sidebar__header", N), children: [
+          !e && s,
+          d && /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: () => d(!e),
+              className: r("Bear-Sidebar__toggle", x),
+              "aria-label": e ? "Expand sidebar" : "Collapse sidebar",
+              children: e ? l === "left" ? /* @__PURE__ */ a(b, { size: i }) : /* @__PURE__ */ a(c, { size: i }) : l === "left" ? /* @__PURE__ */ a(c, { size: i }) : /* @__PURE__ */ a(b, { size: i })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("nav", { className: "Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1", children: f.map((o) => /* @__PURE__ */ a(
+          u,
+          {
+            item: o,
+            isActive: o.id === I,
+            collapsed: e,
+            onClick: p
+          },
+          o.id
+        )) }),
+        n && /* @__PURE__ */ a("div", { className: r("Bear-Sidebar__footer", T), children: e ? null : n })
+      ]
+    }
+  );
+};
+export {
+  k as Sidebar
+};