@forgedevstack/bear 1.0.3 → 1.0.4

package/dist/components/Rating/Rating.js

@@ -1,99 +1,141 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { useState as y, useCallback as S, useMemo as A } from "react";
-import { cn as R } from "../../utils/cn.js";
-const q = {
-  xs: 14,
-  sm: 18,
-  md: 24,
-  lg: 30,
-  xl: 36
-}, I = "#fbbf24", J = "#d1d5db", V = ({
-  value: h,
-  defaultValue: $ = 0,
-  max: c = 5,
-  size: B = "md",
-  readOnly: s = !1,
-  disabled: e = !1,
-  precision: v = 1,
-  color: k = I,
-  emptyColor: x = J,
-  filledIcon: E,
-  emptyIcon: g,
-  halfIcon: w,
-  highlightOnHover: a = !0,
-  showLabel: C = !1,
-  formatLabel: z,
-  onChange: l,
-  className: G,
-  testId: N,
-  ...T
-}) => {
-  const [j, D] = y($), [M, F] = y(null), f = h !== void 0, L = f ? h : j, u = M !== null && !s && !e ? M : L, p = q[B], H = S((t) => {
-    s || e || (f || D(t), l == null || l(t));
-  }, [f, l, s, e]), P = S((t) => {
-    s || e || !a || F(t);
-  }, [s, e, a]), U = S(() => {
-    s || e || !a || F(null);
-  }, [s, e, a]), b = A(() => ({ FilledStar: ({ size: o, color: i }) => /* @__PURE__ */ r("svg", { width: o, height: o, viewBox: "0 0 24 24", fill: i, stroke: "none", children: /* @__PURE__ */ r("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }), EmptyStar: ({ size: o, color: i }) => /* @__PURE__ */ r("svg", { width: o, height: o, viewBox: "0 0 24 24", fill: "none", stroke: i, strokeWidth: "2", children: /* @__PURE__ */ r("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }), HalfStar: ({ size: o, color: i, emptyColor: _ }) => /* @__PURE__ */ d("svg", { width: o, height: o, viewBox: "0 0 24 24", children: [
-    /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ d("linearGradient", { id: "halfGrad", children: [
-      /* @__PURE__ */ r("stop", { offset: "50%", stopColor: i }),
-      /* @__PURE__ */ r("stop", { offset: "50%", stopColor: _, stopOpacity: "0" })
-    ] }) }),
-    /* @__PURE__ */ r(
-      "polygon",
+import { jsx as n, jsxs as L, Fragment as K } from "react/jsx-runtime";
+import { forwardRef as Q, useState as U, useCallback as v, useMemo as w } from "react";
+import { cn as d } from "../../utils/cn.js";
+import { RATING_DEFAULT_LABELS as O, RATING_DEFAULT_MAX as y, RATING_STAR_READONLY_CLASSES as H, RATING_STAR_DISABLED_CLASSES as b, RATING_STAR_BASE_CLASSES as tt, RATING_SIZE_CLASSES as et, RATING_DEFAULT_COLOR as rt, RATING_DEFAULT_EMPTY_COLOR as st, RATING_BASE_CLASSES as nt } from "./Rating.const.js";
+const at = ({ size: a, filled: S, half: h, color: u, emptyColor: s }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: a,
+    height: a,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: h ? /* @__PURE__ */ L(K, { children: [
+      /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ L("linearGradient", { id: `half-${a}`, children: [
+        /* @__PURE__ */ n("stop", { offset: "50%", stopColor: u }),
+        /* @__PURE__ */ n("stop", { offset: "50%", stopColor: s })
+      ] }) }),
+      /* @__PURE__ */ n(
+        "path",
+        {
+          d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+          fill: `url(#half-${a})`,
+          stroke: u,
+          strokeWidth: "1"
+        }
+      )
+    ] }) : /* @__PURE__ */ n(
+      "path",
       {
-        points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2",
-        fill: "url(#halfGrad)",
-        stroke: _,
-        strokeWidth: "2"
+        d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+        fill: S ? u : s,
+        stroke: S ? u : s,
+        strokeWidth: "1"
       }
     )
-  ] }) }), []), W = (t) => {
-    const n = u - t, m = n >= 1, o = v === 0.5 && n >= 0.5 && n < 1, i = n < (v === 0.5 ? 0.5 : 1);
-    return E && m ? E : w && o ? w : g && i ? g : m ? /* @__PURE__ */ r(b.FilledStar, { size: p, color: k }) : o ? /* @__PURE__ */ r(b.HalfStar, { size: p, color: k, emptyColor: x }) : /* @__PURE__ */ r(b.EmptyStar, { size: p, color: x });
-  }, Y = A(
-    () => Array.from({ length: c }, (t, n) => n + 1),
-    [c]
-  ), Z = z ? z(u) : `${u} out of ${c}`;
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      className: R(
-        "bear-inline-flex bear-items-center bear-gap-1",
-        e && "bear-opacity-50 bear-cursor-not-allowed",
-        G
-      ),
-      role: "radiogroup",
-      "aria-label": "Rating",
-      "data-testid": N,
-      onMouseLeave: U,
-      ...T,
-      children: [
-        Y.map((t) => /* @__PURE__ */ r(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            "aria-checked": L >= t,
-            "aria-label": `${t} star${t > 1 ? "s" : ""}`,
-            className: R(
-              "bear-p-0.5 bear-rounded bear-transition-transform bear-bg-transparent bear-border-none",
-              !s && !e && "hover:bear-scale-110 bear-cursor-pointer",
-              s && "bear-cursor-default",
-              e && "bear-cursor-not-allowed"
-            ),
-            onClick: () => H(t),
-            onMouseEnter: () => P(t),
-            disabled: e || s,
-            children: W(t - 1)
+  }
+), it = Q(
+  ({
+    value: a,
+    defaultValue: S = 0,
+    max: h = y,
+    size: u = "md",
+    onChange: s,
+    allowHalf: i = !1,
+    allowClear: M = !0,
+    disabled: c = !1,
+    readOnly: o = !1,
+    filledIcon: T,
+    emptyIcon: g,
+    halfIcon: m,
+    color: k = rt,
+    emptyColor: G = st,
+    showValue: x = !1,
+    labelFormatter: p,
+    labels: _ = O,
+    testId: X,
+    className: j,
+    ...W
+  }, Y) => {
+    const [$, z] = U(S), [I, E] = U(null), A = a !== void 0 ? a : $, l = I !== null ? I : A, N = et[u], B = v(
+      (t, e = !1) => {
+        if (c || o) return;
+        const r = e && i ? t + 0.5 : t + 1, f = M && r === A ? 0 : r;
+        z(f), s == null || s(f);
+      },
+      [c, o, i, M, A, s]
+    ), C = v(
+      (t, e) => {
+        if (c || o) return;
+        const r = e.currentTarget.getBoundingClientRect(), f = e.clientX - r.left < r.width / 2;
+        E(i && f ? t + 0.5 : t + 1);
+      },
+      [c, o, i]
+    ), D = v(() => {
+      E(null);
+    }, []), P = (t) => l >= t + 1 ? "filled" : l >= t + 0.5 && i ? "half" : "empty", V = w(() => {
+      if (p) return p(l);
+      const t = Math.ceil(l) - 1;
+      return _[t] || "";
+    }, [l, p, _]), Z = w(() => Array.from({ length: h }).map((t, e) => {
+      const r = P(e), f = d(
+        tt,
+        c && b,
+        o && H,
+        !c && !o && "hover:scale-110"
+      ), q = () => r === "filled" && T ? T : r === "half" && m ? m : r === "empty" && g ? g : /* @__PURE__ */ n(
+        at,
+        {
+          size: N.icon,
+          filled: r === "filled",
+          half: r === "half",
+          color: k,
+          emptyColor: G
+        }
+      );
+      return /* @__PURE__ */ n(
+        "span",
+        {
+          className: f,
+          onClick: (R) => {
+            const F = R.currentTarget.getBoundingClientRect(), J = R.clientX - F.left < F.width / 2;
+            B(e, J);
           },
-          t
-        )),
-        C && /* @__PURE__ */ r("span", { className: "bear-ml-2 bear-text-sm bear-text-gray-600 dark:bear-text-gray-400", children: Z })
-      ]
-    }
-  );
-};
+          onMouseMove: (R) => C(e, R),
+          onMouseLeave: D,
+          role: "radio",
+          "aria-checked": A >= e + 1,
+          "aria-label": _[e],
+          children: q()
+        },
+        e
+      );
+    }), [h, l, c, o, T, g, m, N, k, G, B, C, D, A, _, i]);
+    return /* @__PURE__ */ L(
+      "div",
+      {
+        ref: Y,
+        className: d(nt, j),
+        role: "radiogroup",
+        "aria-label": "Rating",
+        "data-testid": X,
+        ...W,
+        children: [
+          Z,
+          x && /* @__PURE__ */ L("span", { className: d("Bear-Rating__value ml-2 text-gray-600 dark:text-gray-400", N.text), children: [
+            l.toFixed(i ? 1 : 0),
+            V && /* @__PURE__ */ L("span", { className: "ml-1 text-gray-400 dark:text-gray-500", children: [
+              "(",
+              V,
+              ")"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+it.displayName = "Rating";
 export {
-  V as Rating
+  it as Rating
 };

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

@@ -1,38 +1,40 @@
-import { HTMLAttributes } from 'react';
-import { BearSize } from '../../types';
+import { HTMLAttributes, ReactNode } from 'react';
+export type RatingSize = 'sm' | 'md' | 'lg';
 export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /** Current rating value */
+    /** Current value (0-max) */
     value?: number;
-    /** Default rating value (uncontrolled) */
+    /** Default value (uncontrolled) */
     defaultValue?: number;
     /** Maximum rating value */
     max?: number;
-    /** Rating size */
-    size?: BearSize;
-    /** Whether rating is read-only */
-    readOnly?: boolean;
-    /** Whether rating is disabled */
+    /** Size of rating icons */
+    size?: RatingSize;
+    /** Called when value changes */
+    onChange?: (value: number) => void;
+    /** Allow half values */
+    allowHalf?: boolean;
+    /** Allow clearing the rating */
+    allowClear?: boolean;
+    /** Disabled state */
     disabled?: boolean;
-    /** Precision for half stars (1 or 0.5) */
-    precision?: 1 | 0.5;
+    /** Read-only state */
+    readOnly?: boolean;
+    /** Custom filled icon */
+    filledIcon?: ReactNode;
+    /** Custom empty icon */
+    emptyIcon?: ReactNode;
+    /** Custom half-filled icon */
+    halfIcon?: ReactNode;
     /** Color of filled stars */
     color?: string;
-    /** Empty star color */
+    /** Color of empty stars */
     emptyColor?: string;
-    /** Custom filled icon */
-    filledIcon?: React.ReactNode;
-    /** Custom empty icon */
-    emptyIcon?: React.ReactNode;
-    /** Custom half icon */
-    halfIcon?: React.ReactNode;
-    /** Whether to highlight on hover */
-    highlightOnHover?: boolean;
-    /** Change handler */
-    onChange?: (value: number) => void;
-    /** Show rating label */
-    showLabel?: boolean;
+    /** Show value text */
+    showValue?: boolean;
     /** Custom label formatter */
-    formatLabel?: (value: number) => string;
+    labelFormatter?: (value: number) => string;
     /** Test ID */
     testId?: string;
+    /** Accessibility labels for each rating */
+    labels?: string[];
 }

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

@@ -1,2 +1,2 @@
-export { Rating, default } from './Rating';
-export type { RatingProps } from './Rating.types';
+export { Rating } from './Rating';
+export type { RatingProps, RatingSize } from './Rating.types';

package/dist/components/RichEditor/RichEditor.cjs

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

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

@@ -0,0 +1,141 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=150,a=["headingDropdown","divider","bold","italic","underline","strikethrough","divider","textColor","highlightColor","divider","alignLeft","alignCenter","alignRight","alignJustify","divider","bulletList","orderedList","divider","indent","outdent","divider","blockquote","code","link","image","divider","clearFormat"],o="Bear-RichEditor rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden bg-white dark:bg-zinc-900 shadow-sm",r="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",i="p-4 outline-none max-w-none text-gray-900 dark:text-gray-100 bg-white dark:bg-zinc-900 min-h-[100px]",n="w-px h-5 bg-gray-300 dark:bg-zinc-600 mx-1",d="p-1.5 rounded transition-colors",l="bg-pink-500 text-white",c="text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-zinc-700",m="opacity-50 cursor-not-allowed",_=[{value:"p",label:"Paragraph",preview:e.jsx("span",{className:"bear-text-sm bear-font-normal",children:"Normal text"})},{value:"h1",label:"Heading 1",preview:e.jsx("span",{className:"bear-text-2xl bear-font-bold",children:"Heading 1"})},{value:"h2",label:"Heading 2",preview:e.jsx("span",{className:"bear-text-xl bear-font-bold",children:"Heading 2"})},{value:"h3",label:"Heading 3",preview:e.jsx("span",{className:"bear-text-lg bear-font-semibold",children:"Heading 3"})},{value:"h4",label:"Heading 4",preview:e.jsx("span",{className:"bear-text-base bear-font-semibold",children:"Heading 4"})},{value:"h5",label:"Heading 5",preview:e.jsx("span",{className:"bear-text-sm bear-font-semibold",children:"Heading 5"})},{value:"h6",label:"Heading 6",preview:e.jsx("span",{className:"bear-text-xs bear-font-semibold bear-uppercase",children:"Heading 6"})}],g={bold:{title:"Bold (Ctrl+B)",command:"bold"},italic:{title:"Italic (Ctrl+I)",command:"italic"},underline:{title:"Underline (Ctrl+U)",command:"underline"},strikethrough:{title:"Strikethrough",command:"strikeThrough"},heading1:{title:"Heading 1",command:"formatBlock",value:"h1"},heading2:{title:"Heading 2",command:"formatBlock",value:"h2"},heading3:{title:"Heading 3",command:"formatBlock",value:"h3"},heading4:{title:"Heading 4",command:"formatBlock",value:"h4"},heading5:{title:"Heading 5",command:"formatBlock",value:"h5"},heading6:{title:"Heading 6",command:"formatBlock",value:"h6"},paragraph:{title:"Paragraph",command:"formatBlock",value:"p"},bulletList:{title:"Bullet List",command:"insertUnorderedList"},orderedList:{title:"Numbered List",command:"insertOrderedList"},blockquote:{title:"Quote",command:"formatBlock",value:"blockquote"},code:{title:"Code Block",command:"formatBlock",value:"pre"},link:{title:"Insert Link",command:"createLink"},image:{title:"Insert Image",command:"insertImage"},textColor:{title:"Text Color",command:"foreColor"},highlightColor:{title:"Highlight Color",command:"hiliteColor"},alignLeft:{title:"Align Left",command:"justifyLeft"},alignCenter:{title:"Align Center",command:"justifyCenter"},alignRight:{title:"Align Right",command:"justifyRight"},alignJustify:{title:"Justify",command:"justifyFull"},indent:{title:"Increase Indent",command:"indent"},outdent:{title:"Decrease Indent",command:"outdent"},clearFormat:{title:"Clear Formatting",command:"removeFormat"},table:{title:"Insert Table",command:"insertTable"}},s=["#000000","#374151","#6b7280","#9ca3af","#d1d5db","#ffffff","#991b1b","#dc2626","#ef4444","#f87171","#fca5a5","#fee2e2","#9a3412","#ea580c","#f97316","#fb923c","#fdba74","#fed7aa","#854d0e","#ca8a04","#eab308","#facc15","#fde047","#fef08a","#166534","#16a34a","#22c55e","#4ade80","#86efac","#bbf7d0","#1e40af","#2563eb","#3b82f6","#60a5fa","#93c5fd","#bfdbfe","#6b21a8","#9333ea","#a855f7","#c084fc","#d8b4fe","#e9d5ff","#9d174d","#db2777","#ec4899","#f472b6","#f9a8d4","#fbcfe8"],h=`
+  .Bear-RichEditor__content {
+    line-height: 1.6;
+  }
+  .Bear-RichEditor__content h1 { 
+    font-size: 2rem; 
+    font-weight: bold; 
+    margin: 0.67em 0; 
+    line-height: 1.2;
+  }
+  .Bear-RichEditor__content h2 { 
+    font-size: 1.5rem; 
+    font-weight: bold; 
+    margin: 0.83em 0; 
+    line-height: 1.3;
+  }
+  .Bear-RichEditor__content h3 { 
+    font-size: 1.25rem; 
+    font-weight: 600; 
+    margin: 1em 0; 
+    line-height: 1.4;
+  }
+  .Bear-RichEditor__content h4 { 
+    font-size: 1.125rem; 
+    font-weight: 600; 
+    margin: 1.33em 0;
+  }
+  .Bear-RichEditor__content h5 { 
+    font-size: 1rem; 
+    font-weight: 600; 
+    margin: 1.67em 0;
+  }
+  .Bear-RichEditor__content h6 { 
+    font-size: 0.875rem; 
+    font-weight: 600; 
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin: 2em 0;
+  }
+  .Bear-RichEditor__content p { 
+    margin: 0.5em 0; 
+  }
+  .Bear-RichEditor__content ul { 
+    list-style-type: disc !important; 
+    padding-left: 1.5em !important; 
+    margin: 0.5em 0 !important; 
+    display: block !important;
+  }
+  .Bear-RichEditor__content ol { 
+    list-style-type: decimal !important; 
+    padding-left: 1.5em !important; 
+    margin: 0.5em 0 !important;
+    display: block !important;
+  }
+  .Bear-RichEditor__content li { 
+    margin: 0.25em 0 !important;
+    display: list-item !important;
+  }
+  .Bear-RichEditor__content blockquote { 
+    border-left: 4px solid #ec4899; 
+    padding-left: 1em; 
+    margin: 1em 0; 
+    color: #6b7280; 
+    font-style: italic;
+    background: rgba(236, 72, 153, 0.05);
+    padding: 0.5em 1em;
+    border-radius: 0 0.375rem 0.375rem 0;
+  }
+  .Bear-RichEditor__content pre { 
+    background: #f3f4f6; 
+    color: #374151;
+    padding: 1em; 
+    border-radius: 0.5rem; 
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; 
+    font-size: 0.875em;
+    overflow-x: auto; 
+    margin: 1em 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    border: 1px solid #e5e7eb;
+  }
+  .Bear-RichEditor__content code {
+    background: #f3f4f6;
+    color: #374151;
+    padding: 0.125em 0.25em;
+    border-radius: 0.25rem;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    font-size: 0.875em;
+  }
+  .Bear-RichEditor__content a { 
+    color: #ec4899; 
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .Bear-RichEditor__content a:hover {
+    color: #db2777;
+  }
+  .Bear-RichEditor__content img { 
+    max-width: 100%; 
+    height: auto; 
+    border-radius: 0.5rem; 
+    margin: 1em 0;
+    display: block;
+  }
+  .Bear-RichEditor__content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+  }
+  .Bear-RichEditor__content th,
+  .Bear-RichEditor__content td {
+    border: 1px solid #d1d5db;
+    padding: 0.5em;
+    text-align: left;
+  }
+  .Bear-RichEditor__content th {
+    background: #f3f4f6;
+    font-weight: 600;
+  }
+  /* Dark mode styles */
+  .dark .Bear-RichEditor__content pre {
+    background: #1f2937;
+    color: #e5e7eb;
+    border-color: #374151;
+  }
+  .dark .Bear-RichEditor__content code {
+    background: #374151;
+    color: #e5e7eb;
+  }
+  .dark .Bear-RichEditor__content blockquote {
+    color: #9ca3af;
+    background: rgba(236, 72, 153, 0.1);
+  }
+  .dark .Bear-RichEditor__content th {
+    background: #374151;
+  }
+  .dark .Bear-RichEditor__content th,
+  .dark .Bear-RichEditor__content td {
+    border-color: #4b5563;
+  }
+`;exports.RICH_EDITOR_BUTTON_ACTIVE_CLASSES=l;exports.RICH_EDITOR_BUTTON_BASE_CLASSES=d;exports.RICH_EDITOR_BUTTON_CONFIG=g;exports.RICH_EDITOR_BUTTON_DISABLED_CLASSES=m;exports.RICH_EDITOR_BUTTON_INACTIVE_CLASSES=c;exports.RICH_EDITOR_COLORS=s;exports.RICH_EDITOR_CONTENT_CLASSES=i;exports.RICH_EDITOR_CONTENT_STYLES=h;exports.RICH_EDITOR_DEFAULT_TOOLBAR=a;exports.RICH_EDITOR_DIVIDER_CLASSES=n;exports.RICH_EDITOR_HEADING_OPTIONS=_;exports.RICH_EDITOR_MIN_HEIGHT=t;exports.RICH_EDITOR_ROOT_CLASSES=o;exports.RICH_EDITOR_TOOLBAR_CLASSES=r;

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

@@ -0,0 +1,137 @@
+import { ToolbarOption, DropdownOption } from './RichEditor.types';
+export declare const RICH_EDITOR_MIN_HEIGHT = 150;
+export declare const RICH_EDITOR_DEFAULT_TOOLBAR: ToolbarOption[];
+export declare const RICH_EDITOR_COMPACT_TOOLBAR: ToolbarOption[];
+export declare const RICH_EDITOR_SIMPLE_TOOLBAR: ToolbarOption[];
+export declare const RICH_EDITOR_ROOT_CLASSES = "Bear-RichEditor rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden bg-white dark:bg-zinc-900 shadow-sm";
+export declare const RICH_EDITOR_TOOLBAR_CLASSES = "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";
+export declare const RICH_EDITOR_CONTENT_CLASSES = "p-4 outline-none max-w-none text-gray-900 dark:text-gray-100 bg-white dark:bg-zinc-900 min-h-[100px]";
+export declare const RICH_EDITOR_DIVIDER_CLASSES = "w-px h-5 bg-gray-300 dark:bg-zinc-600 mx-1";
+export declare const RICH_EDITOR_BUTTON_BASE_CLASSES = "p-1.5 rounded transition-colors";
+export declare const RICH_EDITOR_BUTTON_ACTIVE_CLASSES = "bg-pink-500 text-white";
+export declare const RICH_EDITOR_BUTTON_INACTIVE_CLASSES = "text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-zinc-700";
+export declare const RICH_EDITOR_BUTTON_DISABLED_CLASSES = "opacity-50 cursor-not-allowed";
+export declare const RICH_EDITOR_COLOR_PICKER_Z_INDEX = 9999;
+export declare const RICH_EDITOR_HEADING_OPTIONS: DropdownOption[];
+export declare const RICH_EDITOR_BUTTON_CONFIG: {
+    readonly bold: {
+        readonly title: "Bold (Ctrl+B)";
+        readonly command: "bold";
+    };
+    readonly italic: {
+        readonly title: "Italic (Ctrl+I)";
+        readonly command: "italic";
+    };
+    readonly underline: {
+        readonly title: "Underline (Ctrl+U)";
+        readonly command: "underline";
+    };
+    readonly strikethrough: {
+        readonly title: "Strikethrough";
+        readonly command: "strikeThrough";
+    };
+    readonly heading1: {
+        readonly title: "Heading 1";
+        readonly command: "formatBlock";
+        readonly value: "h1";
+    };
+    readonly heading2: {
+        readonly title: "Heading 2";
+        readonly command: "formatBlock";
+        readonly value: "h2";
+    };
+    readonly heading3: {
+        readonly title: "Heading 3";
+        readonly command: "formatBlock";
+        readonly value: "h3";
+    };
+    readonly heading4: {
+        readonly title: "Heading 4";
+        readonly command: "formatBlock";
+        readonly value: "h4";
+    };
+    readonly heading5: {
+        readonly title: "Heading 5";
+        readonly command: "formatBlock";
+        readonly value: "h5";
+    };
+    readonly heading6: {
+        readonly title: "Heading 6";
+        readonly command: "formatBlock";
+        readonly value: "h6";
+    };
+    readonly paragraph: {
+        readonly title: "Paragraph";
+        readonly command: "formatBlock";
+        readonly value: "p";
+    };
+    readonly bulletList: {
+        readonly title: "Bullet List";
+        readonly command: "insertUnorderedList";
+    };
+    readonly orderedList: {
+        readonly title: "Numbered List";
+        readonly command: "insertOrderedList";
+    };
+    readonly blockquote: {
+        readonly title: "Quote";
+        readonly command: "formatBlock";
+        readonly value: "blockquote";
+    };
+    readonly code: {
+        readonly title: "Code Block";
+        readonly command: "formatBlock";
+        readonly value: "pre";
+    };
+    readonly link: {
+        readonly title: "Insert Link";
+        readonly command: "createLink";
+    };
+    readonly image: {
+        readonly title: "Insert Image";
+        readonly command: "insertImage";
+    };
+    readonly textColor: {
+        readonly title: "Text Color";
+        readonly command: "foreColor";
+    };
+    readonly highlightColor: {
+        readonly title: "Highlight Color";
+        readonly command: "hiliteColor";
+    };
+    readonly alignLeft: {
+        readonly title: "Align Left";
+        readonly command: "justifyLeft";
+    };
+    readonly alignCenter: {
+        readonly title: "Align Center";
+        readonly command: "justifyCenter";
+    };
+    readonly alignRight: {
+        readonly title: "Align Right";
+        readonly command: "justifyRight";
+    };
+    readonly alignJustify: {
+        readonly title: "Justify";
+        readonly command: "justifyFull";
+    };
+    readonly indent: {
+        readonly title: "Increase Indent";
+        readonly command: "indent";
+    };
+    readonly outdent: {
+        readonly title: "Decrease Indent";
+        readonly command: "outdent";
+    };
+    readonly clearFormat: {
+        readonly title: "Clear Formatting";
+        readonly command: "removeFormat";
+    };
+    readonly table: {
+        readonly title: "Insert Table";
+        readonly command: "insertTable";
+    };
+};
+export declare const FORMAT_BLOCK_MAP: Record<string, string>;
+export declare const RICH_EDITOR_COLORS: string[];
+export declare const RICH_EDITOR_CONTENT_STYLES = "\n  .Bear-RichEditor__content {\n    line-height: 1.6;\n  }\n  .Bear-RichEditor__content h1 { \n    font-size: 2rem; \n    font-weight: bold; \n    margin: 0.67em 0; \n    line-height: 1.2;\n  }\n  .Bear-RichEditor__content h2 { \n    font-size: 1.5rem; \n    font-weight: bold; \n    margin: 0.83em 0; \n    line-height: 1.3;\n  }\n  .Bear-RichEditor__content h3 { \n    font-size: 1.25rem; \n    font-weight: 600; \n    margin: 1em 0; \n    line-height: 1.4;\n  }\n  .Bear-RichEditor__content h4 { \n    font-size: 1.125rem; \n    font-weight: 600; \n    margin: 1.33em 0;\n  }\n  .Bear-RichEditor__content h5 { \n    font-size: 1rem; \n    font-weight: 600; \n    margin: 1.67em 0;\n  }\n  .Bear-RichEditor__content h6 { \n    font-size: 0.875rem; \n    font-weight: 600; \n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    margin: 2em 0;\n  }\n  .Bear-RichEditor__content p { \n    margin: 0.5em 0; \n  }\n  .Bear-RichEditor__content ul { \n    list-style-type: disc !important; \n    padding-left: 1.5em !important; \n    margin: 0.5em 0 !important; \n    display: block !important;\n  }\n  .Bear-RichEditor__content ol { \n    list-style-type: decimal !important; \n    padding-left: 1.5em !important; \n    margin: 0.5em 0 !important;\n    display: block !important;\n  }\n  .Bear-RichEditor__content li { \n    margin: 0.25em 0 !important;\n    display: list-item !important;\n  }\n  .Bear-RichEditor__content blockquote { \n    border-left: 4px solid #ec4899; \n    padding-left: 1em; \n    margin: 1em 0; \n    color: #6b7280; \n    font-style: italic;\n    background: rgba(236, 72, 153, 0.05);\n    padding: 0.5em 1em;\n    border-radius: 0 0.375rem 0.375rem 0;\n  }\n  .Bear-RichEditor__content pre { \n    background: #f3f4f6; \n    color: #374151;\n    padding: 1em; \n    border-radius: 0.5rem; \n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace; \n    font-size: 0.875em;\n    overflow-x: auto; \n    margin: 1em 0;\n    white-space: pre-wrap;\n    word-break: break-word;\n    border: 1px solid #e5e7eb;\n  }\n  .Bear-RichEditor__content code {\n    background: #f3f4f6;\n    color: #374151;\n    padding: 0.125em 0.25em;\n    border-radius: 0.25rem;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n    font-size: 0.875em;\n  }\n  .Bear-RichEditor__content a { \n    color: #ec4899; \n    text-decoration: underline;\n    cursor: pointer;\n  }\n  .Bear-RichEditor__content a:hover {\n    color: #db2777;\n  }\n  .Bear-RichEditor__content img { \n    max-width: 100%; \n    height: auto; \n    border-radius: 0.5rem; \n    margin: 1em 0;\n    display: block;\n  }\n  .Bear-RichEditor__content table {\n    border-collapse: collapse;\n    width: 100%;\n    margin: 1em 0;\n  }\n  .Bear-RichEditor__content th,\n  .Bear-RichEditor__content td {\n    border: 1px solid #d1d5db;\n    padding: 0.5em;\n    text-align: left;\n  }\n  .Bear-RichEditor__content th {\n    background: #f3f4f6;\n    font-weight: 600;\n  }\n  /* Dark mode styles */\n  .dark .Bear-RichEditor__content pre {\n    background: #1f2937;\n    color: #e5e7eb;\n    border-color: #374151;\n  }\n  .dark .Bear-RichEditor__content code {\n    background: #374151;\n    color: #e5e7eb;\n  }\n  .dark .Bear-RichEditor__content blockquote {\n    color: #9ca3af;\n    background: rgba(236, 72, 153, 0.1);\n  }\n  .dark .Bear-RichEditor__content th {\n    background: #374151;\n  }\n  .dark .Bear-RichEditor__content th,\n  .dark .Bear-RichEditor__content td {\n    border-color: #4b5563;\n  }\n";