@forgedevstack/bear 1.2.9 → 1.3.1

package/dist/components/Select/Select.js

@@ -1,160 +1,144 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { useState as B, useRef as R, useCallback as G, useEffect as H } from "react";
-import { SELECT_DEFAULT_PLACEHOLDER as J, SELECT_SIZE_CLASSES as $, S_E_L_E_C_T_ROOT_CLASS as s, SELECT_MENU_Z_INDEX as K, SELECT_MENU_EDGE_PAD_PX as q, SELECT_MENU_OFFSET_PX as Q } from "./Select.const.js";
-import { ChevronDownIcon as Y, CheckIcon as ee } from "../Icon/index.js";
-import { Portal as re } from "../Portal/Portal.js";
-import { cn as b } from "../../utils/cn.js";
-import { resolveBearId as ae } from "../../utils/generateBearId.utils.js";
-import { useBearId as te } from "../../utils/useBearId.js";
-import { useClickOutsideMultiple as le } from "../../hooks/useClickOutside.js";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { useState as X, useRef as $, useCallback as Z } from "react";
+import { SELECT_DEFAULT_PLACEHOLDER as H, SELECT_MENU_OFFSET_PX as G, SELECT_SIZE_CLASSES as q, S_E_L_E_C_T_ROOT_CLASS as t, SELECT_MENU_Z_INDEX as J } from "./Select.const.js";
+import { ChevronDownIcon as K, CheckIcon as Q } from "../Icon/index.js";
+import { OverlayPortal as Y } from "../OverlayPortal/OverlayPortal.js";
+import { cn as d } from "../../utils/cn.js";
+import { resolveBearId as ee } from "../../utils/generateBearId.utils.js";
+import { useBearId as re } from "../../utils/useBearId.js";
+import { useClickOutsideMultiple as ae } from "../../hooks/useClickOutside.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
+import { useFixedAnchorPosition as le } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
+import { resolveOverlayEffects as te } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
 import { useFormControl as se } from "../../hooks/useFormControl/useFormControl.js";
-const xe = (A) => {
+const ge = (N) => {
   const {
-    options: p,
-    value: t,
-    onChange: i,
-    placeholder: h = J,
-    label: u,
-    error: x,
-    disabled: F = !1,
-    required: j = !1,
-    size: L = "md",
+    options: v,
+    value: l,
+    onChange: s,
+    placeholder: p = H,
+    label: c,
+    error: y,
+    disabled: B = !1,
+    required: D = !1,
+    size: S = "md",
     fullWidth: k = !1,
-    displayEmpty: w = !1,
+    displayEmpty: h = !1,
     renderValue: I,
-    native: f = !1,
-    className: C,
-    id: z,
-    testId: P
-  } = A, U = te("Select"), m = ae(z, U), r = se(), [l, g] = B(!1), [y, X] = B({
-    top: 0,
-    left: 0,
-    width: 0
-  }), E = R(null), T = R(null), d = F || !!(r != null && r.disabled), _ = j || !!(r != null && r.required), o = !!x || !!(r != null && r.error), v = typeof x == "string" ? x : void 0, N = p.find((e) => e.value === t), S = t === void 0 || t === "", D = S || w && S, V = G(() => g(!1), []);
-  le([E, T], V, {
-    enabled: l && !f && !d
+    native: u = !1,
+    className: L,
+    id: F,
+    testId: O
+  } = N, { openEffect: P, closeEffect: A } = te(N), j = re("Select"), f = ee(F, j), r = se(), [b, x] = X(!1), g = $(null), C = $(null), { style: M, ready: U } = le({
+    anchorRef: g,
+    open: b && !u,
+    offsetPx: G,
+    matchWidth: !0
+  }), o = B || !!(r != null && r.disabled), _ = D || !!(r != null && r.required), i = !!y || !!(r != null && r.error), m = typeof y == "string" ? y : void 0, E = v.find((e) => e.value === l), w = l === void 0 || l === "", R = w || h && w, z = Z(() => x(!1), []);
+  ae([g, C], z, {
+    enabled: b && !u && !o
   });
-  const W = (e) => {
-    i == null || i(e), g(!1);
-  };
-  H(() => {
-    if (!l || f) return;
-    const e = () => {
-      var O;
-      const n = (O = E.current) == null ? void 0 : O.getBoundingClientRect();
-      n && X({
-        top: n.bottom + Q,
-        left: Math.max(
-          q,
-          Math.min(n.left, window.innerWidth - n.width - q)
-        ),
-        width: n.width
-      });
-    };
-    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
-      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
-    };
-  }, [l, f]);
-  const Z = I && !S ? I(t) : D || !N ? h : N.label, M = {
+  const V = (e) => {
+    s == null || s(e), x(!1);
+  }, W = I && !w ? I(l) : R || !E ? p : E.label, T = {
     backgroundColor: "var(--bear-bg-primary)",
-    borderColor: o ? void 0 : "var(--bear-border-default)",
-    color: N && !D ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
+    borderColor: i ? void 0 : "var(--bear-border-default)",
+    color: E && !R ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
   };
-  return f ? /* @__PURE__ */ c(
+  return u ? /* @__PURE__ */ n(
     "div",
     {
-      id: m,
-      "data-testid": P,
-      className: b(
-        s,
+      id: f,
+      "data-testid": O,
+      className: d(
+        t,
         "bear-relative bear-flex bear-flex-col bear-gap-1.5",
         k && "bear-w-full"
       ),
       children: [
-        u && /* @__PURE__ */ a(
+        c && /* @__PURE__ */ a(
           "label",
           {
-            htmlFor: `${m}-native`,
+            htmlFor: `${f}-native`,
             className: "bear-text-sm bear-font-medium",
             style: { color: "var(--bear-text-secondary)" },
-            children: u
+            children: c
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ n(
           "select",
           {
-            id: `${m}-native`,
-            disabled: d,
+            id: `${f}-native`,
+            disabled: o,
             required: _,
-            value: t ?? "",
-            onChange: (e) => i == null ? void 0 : i(e.target.value),
-            className: b(
-              `${s}__native`,
+            value: l ?? "",
+            onChange: (e) => s == null ? void 0 : s(e.target.value),
+            className: d(
+              `${t}__native`,
               "bear-w-full bear-rounded-lg bear-border 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)]",
-              o ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500",
-              d && "bear-opacity-50 bear-cursor-not-allowed",
-              $[L],
-              C
+              i ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500",
+              o && "bear-opacity-50 bear-cursor-not-allowed",
+              q[S],
+              L
             ),
-            style: M,
-            "aria-invalid": o || void 0,
+            style: T,
+            "aria-invalid": i || void 0,
             "aria-required": _ || void 0,
             "aria-describedby": r == null ? void 0 : r.helperId,
             children: [
-              (w || h) && /* @__PURE__ */ a("option", { value: "", disabled: !w, children: h }),
-              p.map((e) => /* @__PURE__ */ a("option", { value: e.value, disabled: e.disabled, children: e.label }, e.value))
+              (h || p) && /* @__PURE__ */ a("option", { value: "", disabled: !h, children: p }),
+              v.map((e) => /* @__PURE__ */ a("option", { value: e.value, disabled: e.disabled, children: e.label }, e.value))
             ]
           }
         ),
-        v && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: v })
+        m && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: m })
       ]
     }
-  ) : /* @__PURE__ */ c(
+  ) : /* @__PURE__ */ n(
     "div",
     {
-      ref: E,
-      id: m,
-      "data-testid": P,
-      className: b(
-        s,
+      ref: g,
+      id: f,
+      "data-testid": O,
+      className: d(
+        t,
         "bear-relative bear-flex bear-flex-col bear-gap-1.5",
         k && "bear-w-full"
       ),
       children: [
-        u && /* @__PURE__ */ a("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: u }),
-        /* @__PURE__ */ c(
+        c && /* @__PURE__ */ a("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: c }),
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            disabled: d,
-            onClick: () => !d && g(!l),
-            className: b(
-              `${s}__trigger`,
+            disabled: o,
+            onClick: () => !o && x(!b),
+            className: d(
+              `${t}__trigger`,
               "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)]",
-              o ? "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",
-              $[L],
-              C
+              i ? "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",
+              o && "bear-opacity-50 bear-cursor-not-allowed",
+              q[S],
+              L
             ),
-            style: M,
+            style: T,
             "aria-haspopup": "listbox",
-            "aria-expanded": l,
-            "aria-invalid": o || void 0,
+            "aria-expanded": b,
+            "aria-invalid": i || void 0,
             "aria-required": _ || void 0,
             "aria-describedby": r == null ? void 0 : r.helperId,
             children: [
-              /* @__PURE__ */ a("span", { className: `${s}__value`, children: Z }),
+              /* @__PURE__ */ a("span", { className: `${t}__value`, children: W }),
               /* @__PURE__ */ a(
-                Y,
+                K,
                 {
-                  className: b(
+                  className: d(
                     "bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",
-                    l && "bear-rotate-180"
+                    b && "bear-rotate-180"
                   ),
                   style: { color: "var(--bear-text-muted)" }
                 }
@@ -162,51 +146,53 @@ const xe = (A) => {
             ]
           }
         ),
-        l && /* @__PURE__ */ a(re, { children: /* @__PURE__ */ a(
-          "div",
+        /* @__PURE__ */ a(
+          Y,
           {
-            ref: T,
-            className: `${s}__menu bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,
+            open: b && !u,
+            ready: U,
             style: {
+              ...M,
               backgroundColor: "var(--bear-bg-primary)",
-              borderColor: "var(--bear-border-default)",
-              top: y.top,
-              left: y.left,
-              width: y.width,
-              zIndex: K
+              borderColor: "var(--bear-border-default)"
             },
-            role: "listbox",
-            children: /* @__PURE__ */ a("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: p.map((e) => /* @__PURE__ */ c(
+            zIndex: J,
+            openEffect: P,
+            closeEffect: A,
+            panelRef: C,
+            className: `${t}__menu bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,
+            attributes: { role: "listbox" },
+            children: /* @__PURE__ */ a("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: v.map((e) => /* @__PURE__ */ n(
               "button",
               {
                 type: "button",
                 disabled: e.disabled,
-                onClick: () => !e.disabled && W(e.value),
+                onClick: () => !e.disabled && V(e.value),
                 role: "option",
-                "aria-selected": e.value === t,
-                className: b(
-                  `${s}__option`,
+                "aria-selected": e.value === l,
+                className: d(
+                  `${t}__option`,
                   "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 === t && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
-                  !e.disabled && e.value !== t && "hover:bear-bg-[var(--bear-bg-tertiary)]"
+                  e.value === l && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
+                  !e.disabled && e.value !== l && "hover:bear-bg-[var(--bear-bg-tertiary)]"
                 ),
-                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === t ? void 0 : { color: "var(--bear-text-secondary)" },
+                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === l ? void 0 : { color: "var(--bear-text-secondary)" },
                 children: [
                   e.label,
-                  e.value === t && /* @__PURE__ */ a(ee, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
+                  e.value === l && /* @__PURE__ */ a(Q, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
                 ]
               },
               e.value
             )) })
           }
-        ) }),
-        v && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: v })
+        ),
+        m && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: m })
       ]
     }
   );
 };
 export {
-  xe as Select
+  ge as Select
 };

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

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
+import { OverlayEffectProps } from '../../hooks/useFixedAnchorPosition';
 export interface SelectOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
-export interface SelectProps {
+export interface SelectProps extends OverlayEffectProps {
     testId?: string;
     id?: string;
     /** Select options */

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

package/dist/components/SignPad/SignPad.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=200,e=2,S="Sign here",A="image/png",r=.92,a="#1f2937",b="#f3f4f6",t="#ffffff",D="#18181b",P="bear-inline-flex bear-flex-col bear-gap-2",E="bear-relative bear-rounded-lg bear-border-2 bear-border-dashed bear-border-gray-300 dark:bear-border-zinc-600",I="hover:bear-border-primary-400 dark:hover:bear-border-primary-500",o="bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center bear-text-gray-400 dark:bear-text-zinc-500 bear-text-sm bear-pointer-events-none",G="bear-absolute bear-bottom-8 bear-left-4 bear-right-4 bear-border-b bear-border-gray-300 dark:bear-border-zinc-600",T="bear-absolute bear-bottom-6 bear-left-4 bear-text-gray-400 dark:bear-text-zinc-500 bear-text-lg bear-font-bold",N="bear-flex bear-gap-2 bear-justify-end";exports.SIGN_PAD_ACTIONS_CLASSES=N;exports.SIGN_PAD_BG_DARK=D;exports.SIGN_PAD_BG_LIGHT=t;exports.SIGN_PAD_CANVAS_WRAPPER_CLASSES=E;exports.SIGN_PAD_CANVAS_WRAPPER_HOVER=I;exports.SIGN_PAD_DEFAULT_HEIGHT=_;exports.SIGN_PAD_DEFAULT_OUTPUT_FORMAT=A;exports.SIGN_PAD_DEFAULT_OUTPUT_QUALITY=r;exports.SIGN_PAD_DEFAULT_PLACEHOLDER=S;exports.SIGN_PAD_DEFAULT_STROKE_WIDTH=e;exports.SIGN_PAD_LINE_CLASSES=G;exports.SIGN_PAD_PLACEHOLDER_CLASSES=o;exports.SIGN_PAD_ROOT_CLASSES=P;exports.SIGN_PAD_STROKE_DARK=b;exports.SIGN_PAD_STROKE_LIGHT=a;exports.SIGN_PAD_X_MARK_CLASSES=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=200,S=2,A="Sign here",e="image/png",r=.92,I="#1f2937",D="#f3f4f6",P="#ffffff",t="#18181b",a="bear-inline-flex bear-flex-col bear-gap-2",E="bear-relative bear-rounded-lg bear-border-2 bear-border-dashed bear-border-gray-300 dark:bear-border-zinc-600",N="hover:bear-border-primary-400 dark:hover:bear-border-primary-500",b="bear-absolute bear-inset-0 bear-z-[1] bear-flex bear-items-center bear-justify-center bear-text-gray-400 dark:bear-text-zinc-500 bear-text-sm bear-pointer-events-none",L="bear-absolute bear-bottom-8 bear-left-4 bear-right-4 bear-z-[1] bear-border-b bear-border-gray-300 dark:bear-border-zinc-600 bear-pointer-events-none",n="bear-absolute bear-bottom-6 bear-left-4 bear-z-[1] bear-text-gray-400 dark:bear-text-zinc-500 bear-text-lg bear-font-bold bear-pointer-events-none",o="bear-flex bear-gap-2 bear-justify-end",G="bear-pointer-events-none",T="rgba(0,0,0,0)",R=0,s=1,O="dark",c="bear-dark",C={pointerEvents:"none"},U=2,d=Math.PI*2;exports.SIGN_PAD_ACTIONS_CLASSES=o;exports.SIGN_PAD_BEAR_DARK_CLASS=c;exports.SIGN_PAD_BG_DARK=t;exports.SIGN_PAD_BG_LIGHT=P;exports.SIGN_PAD_CANVAS_WRAPPER_CLASSES=E;exports.SIGN_PAD_CANVAS_WRAPPER_HOVER=N;exports.SIGN_PAD_DEFAULT_HEIGHT=_;exports.SIGN_PAD_DEFAULT_OUTPUT_FORMAT=e;exports.SIGN_PAD_DEFAULT_OUTPUT_QUALITY=r;exports.SIGN_PAD_DEFAULT_PLACEHOLDER=A;exports.SIGN_PAD_DEFAULT_STROKE_WIDTH=S;exports.SIGN_PAD_EMPTY_SIZE=R;exports.SIGN_PAD_FULL_CIRCLE_RADIANS=d;exports.SIGN_PAD_HTML_DARK_CLASS=O;exports.SIGN_PAD_LINE_CLASSES=L;exports.SIGN_PAD_OVERLAY_POINTER_CLASS=G;exports.SIGN_PAD_OVERLAY_STYLE=C;exports.SIGN_PAD_PLACEHOLDER_CLASSES=b;exports.SIGN_PAD_ROOT_CLASSES=a;exports.SIGN_PAD_STROKE_DARK=D;exports.SIGN_PAD_STROKE_LIGHT=I;exports.SIGN_PAD_STROKE_RADIUS_DIVISOR=U;exports.SIGN_PAD_TRANSPARENT_FILL=T;exports.SIGN_PAD_UNIT_SCALE=s;exports.SIGN_PAD_X_MARK_CLASSES=n;

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

@@ -13,7 +13,18 @@ export declare const SIGN_PAD_BG_DARK = "#18181b";
 export declare const SIGN_PAD_ROOT_CLASSES = "bear-inline-flex bear-flex-col bear-gap-2";
 export declare const SIGN_PAD_CANVAS_WRAPPER_CLASSES = "bear-relative bear-rounded-lg bear-border-2 bear-border-dashed bear-border-gray-300 dark:bear-border-zinc-600";
 export declare const SIGN_PAD_CANVAS_WRAPPER_HOVER = "hover:bear-border-primary-400 dark:hover:bear-border-primary-500";
-export declare const SIGN_PAD_PLACEHOLDER_CLASSES = "bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center bear-text-gray-400 dark:bear-text-zinc-500 bear-text-sm bear-pointer-events-none";
-export declare const SIGN_PAD_LINE_CLASSES = "bear-absolute bear-bottom-8 bear-left-4 bear-right-4 bear-border-b bear-border-gray-300 dark:bear-border-zinc-600";
-export declare const SIGN_PAD_X_MARK_CLASSES = "bear-absolute bear-bottom-6 bear-left-4 bear-text-gray-400 dark:bear-text-zinc-500 bear-text-lg bear-font-bold";
+export declare const SIGN_PAD_PLACEHOLDER_CLASSES = "bear-absolute bear-inset-0 bear-z-[1] bear-flex bear-items-center bear-justify-center bear-text-gray-400 dark:bear-text-zinc-500 bear-text-sm bear-pointer-events-none";
+export declare const SIGN_PAD_LINE_CLASSES = "bear-absolute bear-bottom-8 bear-left-4 bear-right-4 bear-z-[1] bear-border-b bear-border-gray-300 dark:bear-border-zinc-600 bear-pointer-events-none";
+export declare const SIGN_PAD_X_MARK_CLASSES = "bear-absolute bear-bottom-6 bear-left-4 bear-z-[1] bear-text-gray-400 dark:bear-text-zinc-500 bear-text-lg bear-font-bold bear-pointer-events-none";
 export declare const SIGN_PAD_ACTIONS_CLASSES = "bear-flex bear-gap-2 bear-justify-end";
+export declare const SIGN_PAD_OVERLAY_POINTER_CLASS = "bear-pointer-events-none";
+export declare const SIGN_PAD_TRANSPARENT_FILL = "rgba(0,0,0,0)";
+export declare const SIGN_PAD_EMPTY_SIZE = 0;
+export declare const SIGN_PAD_UNIT_SCALE = 1;
+export declare const SIGN_PAD_HTML_DARK_CLASS = "dark";
+export declare const SIGN_PAD_BEAR_DARK_CLASS = "bear-dark";
+export declare const SIGN_PAD_OVERLAY_STYLE: {
+    pointerEvents: "none";
+};
+export declare const SIGN_PAD_STROKE_RADIUS_DIVISOR = 2;
+export declare const SIGN_PAD_FULL_CIRCLE_RADIANS: number;

package/dist/components/SignPad/SignPad.const.js

@@ -1,19 +1,28 @@
-const e = 200, r = 2, a = "Sign here", b = "image/png", _ = 0.92, t = "#1f2937", o = "#f3f4f6", A = "#ffffff", S = "#18181b", n = "bear-inline-flex bear-flex-col bear-gap-2", s = "bear-relative bear-rounded-lg bear-border-2 bear-border-dashed bear-border-gray-300 dark:bear-border-zinc-600", D = "hover:bear-border-primary-400 dark:hover:bear-border-primary-500", P = "bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center bear-text-gray-400 dark:bear-text-zinc-500 bear-text-sm bear-pointer-events-none", c = "bear-absolute bear-bottom-8 bear-left-4 bear-right-4 bear-border-b bear-border-gray-300 dark:bear-border-zinc-600", E = "bear-absolute bear-bottom-6 bear-left-4 bear-text-gray-400 dark:bear-text-zinc-500 bear-text-lg bear-font-bold", I = "bear-flex bear-gap-2 bear-justify-end";
+const e = 200, r = 2, _ = "Sign here", a = "image/png", t = 0.92, A = "#1f2937", S = "#f3f4f6", b = "#ffffff", n = "#18181b", o = "bear-inline-flex bear-flex-col bear-gap-2", I = "bear-relative bear-rounded-lg bear-border-2 bear-border-dashed bear-border-gray-300 dark:bear-border-zinc-600", D = "hover:bear-border-primary-400 dark:hover:bear-border-primary-500", s = "bear-absolute bear-inset-0 bear-z-[1] bear-flex bear-items-center bear-justify-center bear-text-gray-400 dark:bear-text-zinc-500 bear-text-sm bear-pointer-events-none", P = "bear-absolute bear-bottom-8 bear-left-4 bear-right-4 bear-z-[1] bear-border-b bear-border-gray-300 dark:bear-border-zinc-600 bear-pointer-events-none", E = "bear-absolute bear-bottom-6 bear-left-4 bear-z-[1] bear-text-gray-400 dark:bear-text-zinc-500 bear-text-lg bear-font-bold bear-pointer-events-none", N = "bear-flex bear-gap-2 bear-justify-end", c = "bear-pointer-events-none", L = "rgba(0,0,0,0)", G = 0, R = 1, T = "dark", d = "bear-dark", i = { pointerEvents: "none" }, f = 2, C = Math.PI * 2;
 export {
-  I as SIGN_PAD_ACTIONS_CLASSES,
-  S as SIGN_PAD_BG_DARK,
-  A as SIGN_PAD_BG_LIGHT,
-  s as SIGN_PAD_CANVAS_WRAPPER_CLASSES,
+  N as SIGN_PAD_ACTIONS_CLASSES,
+  d as SIGN_PAD_BEAR_DARK_CLASS,
+  n as SIGN_PAD_BG_DARK,
+  b as SIGN_PAD_BG_LIGHT,
+  I as SIGN_PAD_CANVAS_WRAPPER_CLASSES,
   D as SIGN_PAD_CANVAS_WRAPPER_HOVER,
   e as SIGN_PAD_DEFAULT_HEIGHT,
-  b as SIGN_PAD_DEFAULT_OUTPUT_FORMAT,
-  _ as SIGN_PAD_DEFAULT_OUTPUT_QUALITY,
-  a as SIGN_PAD_DEFAULT_PLACEHOLDER,
+  a as SIGN_PAD_DEFAULT_OUTPUT_FORMAT,
+  t as SIGN_PAD_DEFAULT_OUTPUT_QUALITY,
+  _ as SIGN_PAD_DEFAULT_PLACEHOLDER,
   r as SIGN_PAD_DEFAULT_STROKE_WIDTH,
-  c as SIGN_PAD_LINE_CLASSES,
-  P as SIGN_PAD_PLACEHOLDER_CLASSES,
-  n as SIGN_PAD_ROOT_CLASSES,
-  o as SIGN_PAD_STROKE_DARK,
-  t as SIGN_PAD_STROKE_LIGHT,
+  G as SIGN_PAD_EMPTY_SIZE,
+  C as SIGN_PAD_FULL_CIRCLE_RADIANS,
+  T as SIGN_PAD_HTML_DARK_CLASS,
+  P as SIGN_PAD_LINE_CLASSES,
+  c as SIGN_PAD_OVERLAY_POINTER_CLASS,
+  i as SIGN_PAD_OVERLAY_STYLE,
+  s as SIGN_PAD_PLACEHOLDER_CLASSES,
+  o as SIGN_PAD_ROOT_CLASSES,
+  S as SIGN_PAD_STROKE_DARK,
+  A as SIGN_PAD_STROKE_LIGHT,
+  f as SIGN_PAD_STROKE_RADIUS_DIVISOR,
+  L as SIGN_PAD_TRANSPARENT_FILL,
+  R as SIGN_PAD_UNIT_SCALE,
   E as SIGN_PAD_X_MARK_CLASSES
 };