@forgedevstack/bear 1.2.3 → 1.2.5

package/dist/components/RichEditor/RichEditor.js

@@ -1,15 +1,15 @@
 import { jsxs as S, jsx as t } from "react/jsx-runtime";
-import { useRef as ye, useState as C, useEffect as x, useCallback as d } from "react";
+import { useRef as Ee, useState as C, useEffect as x, useCallback as d } from "react";
 import { cn as p } from "../../utils/cn.js";
-import { getActiveFormats as Le, queryCommandValue as xe, execCommand as u, insertLink as He, setTextColor as B, setHighlightColor as D, fileToDataUrl as N, insertImage as F } from "./helpers/formatHelpers.js";
-import { RICH_EDITOR_MIN_HEIGHT as Oe, RICH_EDITOR_DEFAULT_TOOLBAR as ke, RICH_EDITOR_CONTENT_STYLES as ze, RICH_EDITOR_BUTTON_CONFIG as M, RICH_EDITOR_MOBILE_TOOLBAR as ve, RICH_EDITOR_TOOLBAR_CLASSES as Ae, RICH_EDITOR_CONTENT_CLASSES as Se, RICH_EDITOR_ROOT_CLASSES as Be, RICH_EDITOR_DIVIDER_CLASSES as De, RICH_EDITOR_HEADING_OPTIONS as Ne, RICH_EDITOR_MOBILE_MORE_ITEMS as Fe, RICH_EDITOR_MOBILE_BREAKPOINT as Me } from "./RichEditor.const.js";
-import { useMediaQuery as we } from "../../hooks/useMediaQuery.js";
+import { getActiveFormats as ye, queryCommandValue as Le, execCommand as u, insertLink as xe, setTextColor as B, setHighlightColor as D, fileToDataUrl as N, insertImage as F } from "./helpers/formatHelpers.js";
+import { RICH_EDITOR_MIN_HEIGHT as He, RICH_EDITOR_DEFAULT_TOOLBAR as Oe, RICH_EDITOR_CONTENT_STYLES as ke, RICH_EDITOR_BUTTON_CONFIG as M, RICH_EDITOR_MOBILE_TOOLBAR as ze, RICH_EDITOR_TOOLBAR_CLASSES as ve, RICH_EDITOR_CONTENT_CLASSES as Ae, RICH_EDITOR_ROOT_CLASSES as Se, RICH_EDITOR_DIVIDER_CLASSES as Be, RICH_EDITOR_HEADING_OPTIONS as De, RICH_EDITOR_MOBILE_MORE_ITEMS as Ne, RICH_EDITOR_MOBILE_BREAKPOINT as Fe } from "./RichEditor.const.js";
+import { useMediaQuery as Me } from "../../hooks/useMediaQuery.js";
 import { ToolbarButton as f } from "./components/ToolbarButton/ToolbarButton.js";
-import { ToolbarDropdown as Ue } from "./components/ToolbarDropdown/ToolbarDropdown.js";
+import { ToolbarDropdown as we } from "./components/ToolbarDropdown/ToolbarDropdown.js";
 import { ToolbarColorPicker as w } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
-import { ToolbarMore as Ve } from "./components/ToolbarMore/ToolbarMore.js";
-import { TextIcon as Pe, InsertLinkIcon as U, InsertPhotoIcon as V, AlignLeftIcon as P, AlignCenterIcon as j, AlignRightIcon as J, AlignJustifyIcon as $, IndentIncreaseIcon as q, IndentDecreaseIcon as G, FormatClearIcon as K, TableIcon as je, CodeIcon as Je, QuoteIcon as $e, ListNumberedIcon as qe, ListBulletIcon as Ge, Heading3Icon as Ke, Heading2Icon as Qe, Heading1Icon as Ye, StrikethroughIcon as We, UnderlineIcon as Xe, ItalicIcon as Ze, BoldIcon as et } from "../Icon/icons/editor.js";
-const tt = 6, gt = (Q) => {
+import { ToolbarMore as Ue } from "./components/ToolbarMore/ToolbarMore.js";
+import { TextIcon as Ve, InsertLinkIcon as U, InsertPhotoIcon as V, AlignLeftIcon as P, AlignCenterIcon as j, AlignRightIcon as J, AlignJustifyIcon as $, IndentIncreaseIcon as q, IndentDecreaseIcon as G, FormatClearIcon as K, TableIcon as Pe, CodeIcon as je, QuoteIcon as Je, ListNumberedIcon as $e, ListBulletIcon as qe, Heading3Icon as Ge, Heading2Icon as Ke, Heading1Icon as Qe, StrikethroughIcon as Ye, UnderlineIcon as We, ItalicIcon as Xe, BoldIcon as Ze } from "../Icon/icons/editor.js";
+const et = 6, ft = (Q) => {
   const {
     value: I,
     defaultValue: H = "",
@@ -17,22 +17,21 @@ const tt = 6, gt = (Q) => {
     placeholder: Y = "Start typing...",
     disabled: r = !1,
     readOnly: o = !1,
-    minHeight: T = Oe,
+    minHeight: T = He,
     maxHeight: m,
-    toolbar: W = ke,
+    toolbar: W = Oe,
     className: X = "",
     testId: Z,
-    id: ee,
     allowImagePaste: O = !0,
     showCharCount: _ = !1,
     charCountMax: E,
-    ...te
-  } = Q, l = ye(null), y = we(`(max-width: ${Me}px)`), k = y ? ve : W, [ne, re] = C(/* @__PURE__ */ new Set()), [oe, z] = C("p"), [v, ie] = C(0), [ae, le] = C("#000000"), [se, ce] = C("#fef08a"), [de, ue] = C([]), [fe, ge] = C([]);
+    ...ee
+  } = Q, l = Ee(null), y = Me(`(max-width: ${Fe}px)`), k = y ? ze : W, [te, ne] = C(/* @__PURE__ */ new Set()), [re, z] = C("p"), [v, oe] = C(0), [ie, ae] = C("#000000"), [le, se] = C("#fef08a"), [ce, de] = C([]), [ue, fe] = C([]);
   x(() => {
     const e = "bear-rich-editor-styles";
     if (!document.getElementById(e)) {
       const n = document.createElement("style");
-      n.id = e, n.textContent = ze, document.head.appendChild(n);
+      n.id = e, n.textContent = ke, document.head.appendChild(n);
     }
   }, []), x(() => {
     l.current && I !== void 0 && l.current.innerHTML !== I && (l.current.innerHTML = I);
@@ -40,13 +39,13 @@ const tt = 6, gt = (Q) => {
     l.current && H && !I && (l.current.innerHTML = H);
   }, []);
   const h = d(() => {
-    re(Le());
-    const e = xe("formatBlock");
+    ne(ye());
+    const e = Le("formatBlock");
     e && z(e.toLowerCase().replace(/[<>]/g, ""));
   }, []), a = d(() => {
     var e;
-    l.current && (R && R(l.current.innerHTML), _ && ie(((e = l.current.textContent) == null ? void 0 : e.length) ?? 0)), h();
-  }, [R, h, _]), he = d((e) => {
+    l.current && (R && R(l.current.innerHTML), _ && oe(((e = l.current.textContent) == null ? void 0 : e.length) ?? 0)), h();
+  }, [R, h, _]), ge = d((e) => {
     var s;
     if (r || o) return;
     (s = l.current) == null || s.focus();
@@ -54,33 +53,33 @@ const tt = 6, gt = (Q) => {
     if (!n) return;
     const c = "value" in n ? n.value : void 0;
     c ? u(n.command, c) : u(n.command), h(), a();
-  }, [r, o, h, a]), Ce = d((e) => {
+  }, [r, o, h, a]), he = d((e) => {
     var n;
     r || o || ((n = l.current) == null || n.focus(), u("formatBlock", e), z(e), a());
-  }, [r, o, a]), Ie = d(() => {
+  }, [r, o, a]), Ce = d(() => {
     var s;
     if (r || o) return;
     const e = window.getSelection(), n = e && e.toString().length > 0, c = prompt("Enter URL:", n ? "" : "https://");
-    c && ((s = l.current) == null || s.focus(), He(c), a());
+    c && ((s = l.current) == null || s.focus(), xe(c), a());
   }, [r, o, a]), b = d((e, n) => {
     if (!e) return;
-    (n === "text" ? ue : ge)((s) => {
+    (n === "text" ? de : fe)((s) => {
       const i = s.filter((g) => g !== e);
-      return [e, ...i].slice(0, tt);
+      return [e, ...i].slice(0, et);
     });
-  }, []), me = d((e) => {
+  }, []), Ie = d((e) => {
     var n;
-    r || o || ((n = l.current) == null || n.focus(), B(e), le(e), b(e, "text"), a());
-  }, [r, o, a, b]), pe = d((e) => {
+    r || o || ((n = l.current) == null || n.focus(), B(e), ae(e), b(e, "text"), a());
+  }, [r, o, a, b]), me = d((e) => {
     var n;
-    r || o || ((n = l.current) == null || n.focus(), D(e), ce(e), b(e, "highlight"), a());
-  }, [r, o, a, b]), be = d((e) => {
+    r || o || ((n = l.current) == null || n.focus(), D(e), se(e), b(e, "highlight"), a());
+  }, [r, o, a, b]), pe = d((e) => {
     var n;
     r || o || ((n = l.current) == null || n.focus(), B(e), a());
-  }, [r, o, a]), Re = d((e) => {
+  }, [r, o, a]), be = d((e) => {
     var n;
     r || o || ((n = l.current) == null || n.focus(), D(e), a());
-  }, [r, o, a]), Te = d(async (e) => {
+  }, [r, o, a]), Re = d(async (e) => {
     var c;
     if (!O) return;
     const n = (c = e.clipboardData) == null ? void 0 : c.items;
@@ -97,7 +96,7 @@ const tt = 6, gt = (Q) => {
           return;
         }
       }
-  }, [O, a]), _e = d(() => {
+  }, [O, a]), Te = d(() => {
     if (r || o) return;
     const e = document.createElement("input");
     e.type = "file", e.accept = "image/*", e.onchange = async (n) => {
@@ -108,18 +107,18 @@ const tt = 6, gt = (Q) => {
         (i = l.current) == null || i.focus(), F(g), a();
       }
     }, e.click();
-  }, [r, o, a]), Ee = {
-    bold: /* @__PURE__ */ t(et, { size: 16 }),
-    italic: /* @__PURE__ */ t(Ze, { size: 16 }),
-    underline: /* @__PURE__ */ t(Xe, { size: 16 }),
-    strikethrough: /* @__PURE__ */ t(We, { size: 16 }),
-    heading1: /* @__PURE__ */ t(Ye, { size: 16 }),
-    heading2: /* @__PURE__ */ t(Qe, { size: 16 }),
-    heading3: /* @__PURE__ */ t(Ke, { size: 16 }),
-    bulletList: /* @__PURE__ */ t(Ge, { size: 16 }),
-    orderedList: /* @__PURE__ */ t(qe, { size: 16 }),
-    blockquote: /* @__PURE__ */ t($e, { size: 16 }),
-    code: /* @__PURE__ */ t(Je, { size: 16 }),
+  }, [r, o, a]), _e = {
+    bold: /* @__PURE__ */ t(Ze, { size: 16 }),
+    italic: /* @__PURE__ */ t(Xe, { size: 16 }),
+    underline: /* @__PURE__ */ t(We, { size: 16 }),
+    strikethrough: /* @__PURE__ */ t(Ye, { size: 16 }),
+    heading1: /* @__PURE__ */ t(Qe, { size: 16 }),
+    heading2: /* @__PURE__ */ t(Ke, { size: 16 }),
+    heading3: /* @__PURE__ */ t(Ge, { size: 16 }),
+    bulletList: /* @__PURE__ */ t(qe, { size: 16 }),
+    orderedList: /* @__PURE__ */ t($e, { size: 16 }),
+    blockquote: /* @__PURE__ */ t(Je, { size: 16 }),
+    code: /* @__PURE__ */ t(je, { size: 16 }),
     link: /* @__PURE__ */ t(U, { size: 16 }),
     alignLeft: /* @__PURE__ */ t(P, { size: 16 }),
     alignCenter: /* @__PURE__ */ t(j, { size: 16 }),
@@ -129,20 +128,20 @@ const tt = 6, gt = (Q) => {
     indent: /* @__PURE__ */ t(q, { size: 16 }),
     outdent: /* @__PURE__ */ t(G, { size: 16 }),
     clearFormat: /* @__PURE__ */ t(K, { size: 16 }),
-    table: /* @__PURE__ */ t(je, { size: 16 })
+    table: /* @__PURE__ */ t(Pe, { size: 16 })
   }, A = (e, n) => {
     if (e === "divider")
-      return /* @__PURE__ */ t("div", { className: p("Bear-RichEditor__divider", De) }, `divider-${n}`);
+      return /* @__PURE__ */ t("div", { className: p("Bear-RichEditor__divider", Be) }, `divider-${n}`);
     if (e === "headingDropdown")
       return /* @__PURE__ */ t(
-        Ue,
+        we,
         {
-          options: Ne,
-          value: oe,
-          onChange: Ce,
+          options: De,
+          value: re,
+          onChange: he,
           title: "Text Style",
           disabled: r || o,
-          icon: /* @__PURE__ */ t(Pe, { size: 16 })
+          icon: /* @__PURE__ */ t(Ve, { size: 16 })
         },
         "heading-dropdown"
       );
@@ -150,13 +149,13 @@ const tt = 6, gt = (Q) => {
       return /* @__PURE__ */ t(
         w,
         {
-          value: ae,
-          onChange: me,
+          value: ie,
+          onChange: Ie,
           title: "Text Color",
           disabled: r || o,
           type: "text",
-          recentColors: de,
-          onApplyLast: be
+          recentColors: ce,
+          onApplyLast: pe
         },
         "text-color"
       );
@@ -164,13 +163,13 @@ const tt = 6, gt = (Q) => {
       return /* @__PURE__ */ t(
         w,
         {
-          value: se,
-          onChange: pe,
+          value: le,
+          onChange: me,
           title: "Highlight Color",
           disabled: r || o,
           type: "highlight",
-          recentColors: fe,
-          onApplyLast: Re
+          recentColors: ue,
+          onApplyLast: be
         },
         "highlight-color"
       );
@@ -180,7 +179,7 @@ const tt = 6, gt = (Q) => {
         {
           icon: /* @__PURE__ */ t(U, { size: 16 }),
           title: "Insert Link",
-          onClick: Ie,
+          onClick: Ce,
           disabled: r || o
         },
         "link"
@@ -191,7 +190,7 @@ const tt = 6, gt = (Q) => {
         {
           icon: /* @__PURE__ */ t(V, { size: 16 }),
           title: "Insert Image",
-          onClick: _e,
+          onClick: Te,
           disabled: r || o
         },
         "image"
@@ -295,7 +294,7 @@ const tt = 6, gt = (Q) => {
         "clearFormat"
       );
     if (e === "more")
-      return /* @__PURE__ */ t(Ve, { disabled: r || o, isMobile: y, children: (y ? Fe : [
+      return /* @__PURE__ */ t(Ue, { disabled: r || o, isMobile: y, children: (y ? Ne : [
         "alignLeft",
         "alignCenter",
         "alignRight",
@@ -306,14 +305,14 @@ const tt = 6, gt = (Q) => {
         "code",
         "clearFormat"
       ]).map((g, L) => A(g, L + 1e3)) }, "more");
-    const c = M[e], s = Ee[e];
+    const c = M[e], s = _e[e];
     return !c || !s ? null : /* @__PURE__ */ t(
       f,
       {
         icon: s,
         title: c.title,
-        active: ne.has(e),
-        onClick: () => he(e),
+        active: te.has(e),
+        onClick: () => ge(e),
         disabled: r || o
       },
       e
@@ -322,18 +321,17 @@ const tt = 6, gt = (Q) => {
   return /* @__PURE__ */ S(
     "div",
     {
-      id: ee,
       "data-testid": Z,
       className: p(
         "Bear-RichEditor",
-        Be,
+        Se,
         r && "Bear-RichEditor--disabled",
         o && "Bear-RichEditor--readonly",
         X
       ),
-      ...te,
+      ...ee,
       children: [
-        k.length > 0 && /* @__PURE__ */ t("div", { className: p("Bear-RichEditor__toolbar", Ae), children: k.map((e, n) => A(e, n)) }),
+        k.length > 0 && /* @__PURE__ */ t("div", { className: p("Bear-RichEditor__toolbar", ve), children: k.map((e, n) => A(e, n)) }),
         /* @__PURE__ */ t(
           "div",
           {
@@ -343,11 +341,11 @@ const tt = 6, gt = (Q) => {
             onSelect: h,
             onKeyUp: h,
             onMouseUp: h,
-            onPaste: Te,
+            onPaste: Re,
             "data-placeholder": Y,
             className: p(
               "Bear-RichEditor__content",
-              Se,
+              Ae,
               "[&:empty]:before:bear-content-[attr(data-placeholder)] [&:empty]:before:bear-text-gray-400 [&:empty]:before:bear-pointer-events-none",
               r && "Bear-RichEditor__content--disabled bear-opacity-50 bear-cursor-not-allowed"
             ),
@@ -377,5 +375,5 @@ const tt = 6, gt = (Q) => {
   );
 };
 export {
-  gt as RichEditor
+  ft as RichEditor
 };

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

@@ -5,6 +5,7 @@ export interface RingProgressSection {
     tooltip?: string;
 }
 export interface RingProgressProps extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
     sections: RingProgressSection[];
     size?: number;
     thickness?: number;

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

@@ -0,0 +1 @@
+export declare const S_C_R_O_L_L_A_R_E_A_ROOT_CLASS = "Bear-ScrollArea";

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 export interface ScrollAreaProps {
+    testId?: string;
+    id?: string;
     children: ReactNode;
     className?: string;
     orientation?: 'vertical' | 'horizontal' | 'both';

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

@@ -0,0 +1 @@
+export declare const S_E_G_M_E_N_T_E_D_C_O_N_T_R_O_L_ROOT_CLASS = "Bear-SegmentedControl";

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

@@ -5,6 +5,8 @@ export interface SegmentedControlItem {
     disabled?: boolean;
 }
 export interface SegmentedControlProps {
+    testId?: string;
+    id?: string;
     items: SegmentedControlItem[];
     value?: string;
     defaultValue?: string;

package/dist/components/Select/Select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),o=require("../../utils/cn.cjs"),S=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const g=require("../Icon/index.cjs"),R=require("../Portal/Portal.cjs"),E={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},P=({options:x,value:s,onChange:n,placeholder:y="Select an option",label:m,error:d,disabled:i=!1,size:j="md",fullWidth:k=!1,className:p})=>{const[a,c]=t.useState(!1),[u,C]=t.useState({top:0,left:0,width:0}),f=t.useRef(null),v=t.useRef(null),w=!!d,l=x.find(e=>e.value===s),N=t.useCallback(()=>c(!1),[]);S.useClickOutsideMultiple([f,v],N,{enabled:a});const q=e=>{n==null||n(e),c(!1)};return t.useEffect(()=>{if(!a)return;const e=()=>{var h;const b=(h=f.current)==null?void 0:h.getBoundingClientRect();b&&C({top:b.bottom+4,left:Math.max(8,Math.min(b.left,window.innerWidth-b.width-8)),width:b.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[a]),r.jsxs("div",{ref:f,className:o.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",k&&"bear-w-full"),children:[m&&r.jsx("label",{className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:m}),r.jsxs("button",{type:"button",disabled:i,onClick:()=>!i&&c(!a),className:o.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",w?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",i&&"bear-opacity-50 bear-cursor-not-allowed",E[j],p),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:w?void 0:"var(--bear-border-default)",color:l?"var(--bear-text-primary)":"var(--bear-text-muted)"},children:[r.jsx("span",{children:(l==null?void 0:l.label)||y}),r.jsx(g.ChevronDownIcon,{className:o.cn("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",a&&"bear-rotate-180"),style:{color:"var(--bear-text-muted)"}})]}),a&&r.jsx(R.Portal,{children:r.jsx("div",{ref:v,className:"bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden",style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",top:u.top,left:u.left,width:u.width,zIndex:1e4},children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:x.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&q(e.value),className:o.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled&&"bear-cursor-not-allowed",e.value===s&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",!e.disabled&&e.value!==s&&"hover:bear-bg-[var(--bear-bg-tertiary)]"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.value===s?void 0:{color:"var(--bear-text-secondary)"},children:[e.label,e.value===s&&r.jsx(g.CheckIcon,{className:"bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})})}),d&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:d})]})};exports.Select=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),o=require("../../utils/cn.cjs"),S=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../FormControl/FormControl.context.cjs");const g=require("../Icon/index.cjs"),R=require("../Portal/Portal.cjs"),E={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},P=({options:x,value:s,onChange:n,placeholder:y="Select an option",label:m,error:i,disabled:d=!1,size:j="md",fullWidth:k=!1,className:p})=>{const[a,c]=t.useState(!1),[u,q]=t.useState({top:0,left:0,width:0}),f=t.useRef(null),v=t.useRef(null),w=!!i,l=x.find(e=>e.value===s),C=t.useCallback(()=>c(!1),[]);S.useClickOutsideMultiple([f,v],C,{enabled:a});const N=e=>{n==null||n(e),c(!1)};return t.useEffect(()=>{if(!a)return;const e=()=>{var h;const b=(h=f.current)==null?void 0:h.getBoundingClientRect();b&&q({top:b.bottom+4,left:Math.max(8,Math.min(b.left,window.innerWidth-b.width-8)),width:b.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[a]),r.jsxs("div",{ref:f,className:o.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",k&&"bear-w-full"),children:[m&&r.jsx("label",{className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:m}),r.jsxs("button",{type:"button",disabled:d,onClick:()=>!d&&c(!a),className:o.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",w?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",d&&"bear-opacity-50 bear-cursor-not-allowed",E[j],p),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:w?void 0:"var(--bear-border-default)",color:l?"var(--bear-text-primary)":"var(--bear-text-muted)"},children:[r.jsx("span",{children:(l==null?void 0:l.label)||y}),r.jsx(g.ChevronDownIcon,{className:o.cn("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",a&&"bear-rotate-180"),style:{color:"var(--bear-text-muted)"}})]}),a&&r.jsx(R.Portal,{children:r.jsx("div",{ref:v,className:"bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden",style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",top:u.top,left:u.left,width:u.width,zIndex:1e4},children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:x.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&N(e.value),className:o.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled&&"bear-cursor-not-allowed",e.value===s&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",!e.disabled&&e.value!==s&&"hover:bear-bg-[var(--bear-bg-tertiary)]"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.value===s?void 0:{color:"var(--bear-text-secondary)"},children:[e.label,e.value===s&&r.jsx(g.CheckIcon,{className:"bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})})}),i&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:i})]})};exports.Select=P;

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

@@ -0,0 +1 @@
+export declare const S_E_L_E_C_T_ROOT_CLASS = "Bear-Select";

package/dist/components/Select/Select.js

@@ -4,13 +4,14 @@ import { cn as o } from "../../utils/cn.js";
 import { useClickOutsideMultiple as M } from "../../hooks/useClickOutside.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
+import "../FormControl/FormControl.context.js";
 import { ChevronDownIcon as P, CheckIcon as R } from "../Icon/index.js";
 import { Portal as S } from "../Portal/Portal.js";
 const B = {
   sm: "bear-h-8 bear-text-sm bear-px-3",
   md: "bear-h-10 bear-text-base bear-px-4",
   lg: "bear-h-12 bear-text-lg bear-px-5"
-}, J = ({
+}, K = ({
   options: m,
   value: t,
   onChange: s,
@@ -122,5 +123,5 @@ const B = {
   );
 };
 export {
-  J as Select
+  K as Select
 };

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

@@ -1,9 +1,12 @@
+import { ReactNode } from 'react';
 export interface SelectOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
 export interface SelectProps {
+    testId?: string;
+    id?: string;
     /** Select options */
     options: SelectOption[];
     /** Current value */
@@ -22,6 +25,8 @@ export interface SelectProps {
     size?: 'sm' | 'md' | 'lg';
     /** Whether select is full width */
     fullWidth?: boolean;
-    /** Additional class names */
+    displayEmpty?: boolean;
+    renderValue?: (value: string) => ReactNode;
+    native?: boolean;
     className?: string;
 }

package/dist/components/Sidebar/Sidebar.cjs

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

package/dist/components/Sidebar/Sidebar.js

@@ -2,15 +2,15 @@ import { jsxs as b, jsx as a } from "react/jsx-runtime";
 import { cn as r } from "../../utils/cn.js";
 import "react";
 import { ChevronRightIcon as c, ChevronLeftIcon as S } from "../Icon/index.js";
-import { SidebarItem as N } from "./components/SidebarItem/SidebarItem.js";
-import { SIDEBAR_WIDTH as T, SIDEBAR_COLLAPSED_WIDTH as y, SIDEBAR_TOGGLE_ICON_SIZE as i, SIDEBAR_TOGGLE_CLASSES as H, SIDEBAR_HEADER_CLASSES as O, SIDEBAR_FOOTER_CLASSES as g, SIDEBAR_VARIANT_STYLES as w } from "./Sidebar.const.js";
-const F = (f) => {
+import { SidebarItem as x } from "./components/SidebarItem/SidebarItem.js";
+import { SIDEBAR_WIDTH as N, SIDEBAR_COLLAPSED_WIDTH as T, SIDEBAR_TOGGLE_ICON_SIZE as i, SIDEBAR_TOGGLE_CLASSES as y, SIDEBAR_HEADER_CLASSES as H, SIDEBAR_FOOTER_CLASSES as O, SIDEBAR_VARIANT_STYLES as g } from "./Sidebar.const.js";
+const V = (f) => {
   const {
     items: m,
     collapsed: e = !1,
     onCollapsedChange: d,
-    width: _ = T,
-    collapsedWidth: h = y,
+    width: _ = N,
+    collapsedWidth: h = T,
     header: s,
     footer: n,
     showHeader: p = !0,
@@ -22,13 +22,11 @@ const F = (f) => {
     position: t = "left",
     className: u,
     style: C,
-    testId: v,
-    id: D
-  } = f, R = e ? h : _, L = t === "left" ? "bear-border-r" : "bear-border-l", x = p && s;
+    testId: v
+  } = f, D = e ? h : _, R = t === "left" ? "bear-border-r" : "bear-border-l", L = p && s;
   return /* @__PURE__ */ b(
     "aside",
     {
-      id: D,
       "data-testid": v,
       className: r(
         "Bear-Sidebar",
@@ -36,27 +34,27 @@ const F = (f) => {
         e && "Bear-Sidebar--collapsed",
         "bear-flex bear-flex-col bear-h-full bear-transition-all bear-duration-300",
         B && "bear-min-h-full",
-        l === "default" && L,
-        w[l],
+        l === "default" && R,
+        g[l],
         u
       ),
-      style: { width: R, ...C },
+      style: { width: D, ...C },
       children: [
-        x && /* @__PURE__ */ b("div", { className: r("Bear-Sidebar__header", O), children: [
+        L && /* @__PURE__ */ b("div", { className: r("Bear-Sidebar__header", H), children: [
           !e && s,
           d && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               onClick: () => d(!e),
-              className: r("Bear-Sidebar__toggle", H),
+              className: r("Bear-Sidebar__toggle", y),
               "aria-label": e ? "Expand sidebar" : "Collapse sidebar",
               children: e ? t === "left" ? /* @__PURE__ */ a(c, { size: i }) : /* @__PURE__ */ a(S, { size: i }) : t === "left" ? /* @__PURE__ */ a(S, { size: i }) : /* @__PURE__ */ a(c, { 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 bear-min-h-0", children: m.map((o) => /* @__PURE__ */ a(
-          N,
+          x,
           {
             item: o,
             isActive: o.id === E,
@@ -66,11 +64,11 @@ const F = (f) => {
           },
           o.id
         )) }),
-        n && /* @__PURE__ */ a("div", { className: r("Bear-Sidebar__footer", g), children: e ? null : n })
+        n && /* @__PURE__ */ a("div", { className: r("Bear-Sidebar__footer", O), children: e ? null : n })
       ]
     }
   );
 };
 export {
-  F as Sidebar
+  V as Sidebar
 };

package/dist/components/SignPad/SignPad.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),r=require("react"),S=require("../../utils/cn.cjs"),y=require("../Button/Button.cjs"),s=require("./SignPad.const.cjs"),V=B=>{const{onChange:o,width:p,height:D=s.SIGN_PAD_DEFAULT_HEIGHT,strokeColor:O,strokeWidth:T=s.SIGN_PAD_DEFAULT_STROKE_WIDTH,backgroundColor:M,placeholder:U=s.SIGN_PAD_DEFAULT_PLACEHOLDER,disabled:a=!1,readOnly:c=!1,showClear:N=!0,showSave:m=!1,clearText:j="Clear",saveText:F="Save",outputFormat:P=s.SIGN_PAD_DEFAULT_OUTPUT_FORMAT,outputQuality:v=s.SIGN_PAD_DEFAULT_OUTPUT_QUALITY,className:H,testId:K,id:q,...W}=B,i=r.useRef(null),w=r.useRef(null),A=r.useRef(null),g=r.useRef(!1),[h,L]=r.useState(!1),[E,z]=r.useState(!1);r.useEffect(()=>{const e=()=>{z(document.documentElement.classList.contains("dark"))};e();const t=new MutationObserver(e);return t.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>t.disconnect()},[]);const k=O||(E?s.SIGN_PAD_STROKE_DARK:s.SIGN_PAD_STROKE_LIGHT),C=M||(E?s.SIGN_PAD_BG_DARK:s.SIGN_PAD_BG_LIGHT),_=r.useCallback(()=>{const e=i.current,t=e==null?void 0:e.getContext("2d");!e||!t||(t.fillStyle=C==="transparent"?"rgba(0,0,0,0)":C,t.fillRect(0,0,e.width,e.height))},[C]);r.useEffect(()=>{const e=i.current,t=w.current;if(!e||!t)return;const n=()=>{const d=t.getBoundingClientRect(),f=p??Math.round(d.width),G=D;(e.width!==f||e.height!==G)&&(e.width=f,e.height=G,_())};n();const l=new ResizeObserver(n);return l.observe(t),()=>l.disconnect()},[p,D,_]),r.useEffect(()=>{_()},[_,E]),r.useEffect(()=>{const e=i.current;if(!e||a||c)return;const t=n=>n.preventDefault();return e.addEventListener("touchstart",t,{passive:!1}),e.addEventListener("touchmove",t,{passive:!1}),()=>{e.removeEventListener("touchstart",t),e.removeEventListener("touchmove",t)}},[a,c]);const b=r.useCallback(e=>{const t=i.current;if(!t)return{x:0,y:0};const n=t.getBoundingClientRect(),l=t.width/n.width,d=t.height/n.height;if("touches"in e){const f=e.touches[0];return{x:(f.clientX-n.left)*l,y:(f.clientY-n.top)*d}}return{x:(e.clientX-n.left)*l,y:(e.clientY-n.top)*d}},[]),I=r.useCallback(e=>{if(a||c)return;const t=b(e);g.current=!0,A.current=t},[a,c,b]),x=r.useCallback(e=>{if(!g.current||a||c)return;const t=i.current,n=t==null?void 0:t.getContext("2d"),l=A.current;if(!t||!n||!l)return;const d=b(e);n.beginPath(),n.moveTo(l.x,l.y),n.lineTo(d.x,d.y),n.strokeStyle=k,n.lineWidth=T,n.lineCap="round",n.lineJoin="round",n.stroke(),A.current=d,L(!0)},[a,c,k,T,b]),R=r.useCallback(()=>{if(g.current){const e=i.current;if(e&&o){const t=e.toDataURL(P,v);o(t)}}g.current=!1,A.current=null},[o,P,v]),X=r.useCallback(()=>{const e=i.current,t=e==null?void 0:e.getContext("2d");!e||!t||(t.clearRect(0,0,e.width,e.height),_(),L(!1),o==null||o(null))},[_,o]),Y=r.useCallback(()=>{const e=i.current;if(!e||!h)return;const t=e.toDataURL(P,v);o==null||o(t)},[h,o,P,v]);return u.jsxs("div",{id:q,"data-testid":K,className:S.cn("Bear-SignPad bear-w-full",s.SIGN_PAD_ROOT_CLASSES,a&&"Bear-SignPad--disabled bear-opacity-50",c&&"Bear-SignPad--readonly",H),...W,children:[u.jsxs("div",{ref:w,className:S.cn("Bear-SignPad__canvas-wrapper bear-w-full bear-overflow-hidden","bear-touch-none",s.SIGN_PAD_CANVAS_WRAPPER_CLASSES,!a&&!c&&s.SIGN_PAD_CANVAS_WRAPPER_HOVER,a&&"bear-cursor-not-allowed",!a&&!c&&"bear-cursor-crosshair"),children:[u.jsx("canvas",{ref:i,className:"Bear-SignPad__canvas bear-block bear-rounded-lg bear-w-full bear-touch-none",style:{height:D},onMouseDown:I,onMouseMove:x,onMouseUp:R,onMouseLeave:R,onTouchStart:I,onTouchMove:x,onTouchEnd:R}),!h&&u.jsx("div",{className:S.cn("Bear-SignPad__placeholder",s.SIGN_PAD_PLACEHOLDER_CLASSES),children:U}),u.jsx("div",{className:S.cn("Bear-SignPad__line",s.SIGN_PAD_LINE_CLASSES)}),u.jsx("span",{className:S.cn("Bear-SignPad__x-mark",s.SIGN_PAD_X_MARK_CLASSES),children:"×"})]}),(N||m)&&u.jsxs("div",{className:S.cn("Bear-SignPad__actions",s.SIGN_PAD_ACTIONS_CLASSES),children:[N&&u.jsx(y.Button,{size:"sm",variant:"ghost",onClick:X,disabled:a||!h,children:j}),m&&u.jsx(y.Button,{size:"sm",variant:"primary",onClick:Y,disabled:a||!h,children:F})]})]})};exports.SignPad=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),r=require("react"),S=require("../../utils/cn.cjs"),y=require("../Button/Button.cjs"),s=require("./SignPad.const.cjs"),Y=B=>{const{onChange:o,width:p,height:D=s.SIGN_PAD_DEFAULT_HEIGHT,strokeColor:O,strokeWidth:T=s.SIGN_PAD_DEFAULT_STROKE_WIDTH,backgroundColor:M,placeholder:U=s.SIGN_PAD_DEFAULT_PLACEHOLDER,disabled:a=!1,readOnly:c=!1,showClear:N=!0,showSave:m=!1,clearText:j="Clear",saveText:F="Save",outputFormat:P=s.SIGN_PAD_DEFAULT_OUTPUT_FORMAT,outputQuality:v=s.SIGN_PAD_DEFAULT_OUTPUT_QUALITY,className:H,testId:K,...q}=B,i=r.useRef(null),w=r.useRef(null),A=r.useRef(null),g=r.useRef(!1),[h,L]=r.useState(!1),[E,W]=r.useState(!1);r.useEffect(()=>{const e=()=>{W(document.documentElement.classList.contains("dark"))};e();const t=new MutationObserver(e);return t.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>t.disconnect()},[]);const k=O||(E?s.SIGN_PAD_STROKE_DARK:s.SIGN_PAD_STROKE_LIGHT),C=M||(E?s.SIGN_PAD_BG_DARK:s.SIGN_PAD_BG_LIGHT),_=r.useCallback(()=>{const e=i.current,t=e==null?void 0:e.getContext("2d");!e||!t||(t.fillStyle=C==="transparent"?"rgba(0,0,0,0)":C,t.fillRect(0,0,e.width,e.height))},[C]);r.useEffect(()=>{const e=i.current,t=w.current;if(!e||!t)return;const n=()=>{const d=t.getBoundingClientRect(),f=p??Math.round(d.width),G=D;(e.width!==f||e.height!==G)&&(e.width=f,e.height=G,_())};n();const l=new ResizeObserver(n);return l.observe(t),()=>l.disconnect()},[p,D,_]),r.useEffect(()=>{_()},[_,E]),r.useEffect(()=>{const e=i.current;if(!e||a||c)return;const t=n=>n.preventDefault();return e.addEventListener("touchstart",t,{passive:!1}),e.addEventListener("touchmove",t,{passive:!1}),()=>{e.removeEventListener("touchstart",t),e.removeEventListener("touchmove",t)}},[a,c]);const b=r.useCallback(e=>{const t=i.current;if(!t)return{x:0,y:0};const n=t.getBoundingClientRect(),l=t.width/n.width,d=t.height/n.height;if("touches"in e){const f=e.touches[0];return{x:(f.clientX-n.left)*l,y:(f.clientY-n.top)*d}}return{x:(e.clientX-n.left)*l,y:(e.clientY-n.top)*d}},[]),I=r.useCallback(e=>{if(a||c)return;const t=b(e);g.current=!0,A.current=t},[a,c,b]),x=r.useCallback(e=>{if(!g.current||a||c)return;const t=i.current,n=t==null?void 0:t.getContext("2d"),l=A.current;if(!t||!n||!l)return;const d=b(e);n.beginPath(),n.moveTo(l.x,l.y),n.lineTo(d.x,d.y),n.strokeStyle=k,n.lineWidth=T,n.lineCap="round",n.lineJoin="round",n.stroke(),A.current=d,L(!0)},[a,c,k,T,b]),R=r.useCallback(()=>{if(g.current){const e=i.current;if(e&&o){const t=e.toDataURL(P,v);o(t)}}g.current=!1,A.current=null},[o,P,v]),z=r.useCallback(()=>{const e=i.current,t=e==null?void 0:e.getContext("2d");!e||!t||(t.clearRect(0,0,e.width,e.height),_(),L(!1),o==null||o(null))},[_,o]),X=r.useCallback(()=>{const e=i.current;if(!e||!h)return;const t=e.toDataURL(P,v);o==null||o(t)},[h,o,P,v]);return u.jsxs("div",{"data-testid":K,className:S.cn("Bear-SignPad bear-w-full",s.SIGN_PAD_ROOT_CLASSES,a&&"Bear-SignPad--disabled bear-opacity-50",c&&"Bear-SignPad--readonly",H),...q,children:[u.jsxs("div",{ref:w,className:S.cn("Bear-SignPad__canvas-wrapper bear-w-full bear-overflow-hidden","bear-touch-none",s.SIGN_PAD_CANVAS_WRAPPER_CLASSES,!a&&!c&&s.SIGN_PAD_CANVAS_WRAPPER_HOVER,a&&"bear-cursor-not-allowed",!a&&!c&&"bear-cursor-crosshair"),children:[u.jsx("canvas",{ref:i,className:"Bear-SignPad__canvas bear-block bear-rounded-lg bear-w-full bear-touch-none",style:{height:D},onMouseDown:I,onMouseMove:x,onMouseUp:R,onMouseLeave:R,onTouchStart:I,onTouchMove:x,onTouchEnd:R}),!h&&u.jsx("div",{className:S.cn("Bear-SignPad__placeholder",s.SIGN_PAD_PLACEHOLDER_CLASSES),children:U}),u.jsx("div",{className:S.cn("Bear-SignPad__line",s.SIGN_PAD_LINE_CLASSES)}),u.jsx("span",{className:S.cn("Bear-SignPad__x-mark",s.SIGN_PAD_X_MARK_CLASSES),children:"×"})]}),(N||m)&&u.jsxs("div",{className:S.cn("Bear-SignPad__actions",s.SIGN_PAD_ACTIONS_CLASSES),children:[N&&u.jsx(y.Button,{size:"sm",variant:"ghost",onClick:z,disabled:a||!h,children:j}),m&&u.jsx(y.Button,{size:"sm",variant:"primary",onClick:X,disabled:a||!h,children:F})]})]})};exports.SignPad=Y;