react-signature-canvas-component/dist/index.js

A responsive signature canvas component for React and Next.js applications.

"use client";
"use client";var U=Object.create;var b=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var G=(n,o)=>{for(var u in o)b(n,u,{get:o[u],enumerable:!0})},T=(n,o,u,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let g of F(o))!A.call(n,g)&&g!==u&&b(n,g,{get:()=>o[g],enumerable:!(p=z(o,g))||p.enumerable});return n};var K=(n,o,u)=>(u=n!=null?U(q(n)):{},T(o||!n||!n.__esModule?b(u,"default",{value:n,enumerable:!0}):u,n)),O=n=>T(b({},"__esModule",{value:!0}),n);var V={};G(V,{default:()=>Q});module.exports=O(V);var i=K(require("react")),d=require("lucide-react"),a=require("react/jsx-runtime"),I=i.default.forwardRef(({onSignatureChange:n,disabled:o=!1,controls:u=!0,title:p="Draw Your Signature",info:g=!0},R)=>{let l=(0,i.useRef)(null),[N,w]=(0,i.useState)(!1),[x,f]=(0,i.useState)(null),[S,P]=(0,i.useState)(!0),[h,W]=(0,i.useState)("#1f2937"),[m,v]=(0,i.useState)(3),[E,Y]=(0,i.useState)(!1),Z=["#1f2937","#9ca3af","#000000","#3b82f6","#059669","#dc2626","#7c2d12"],D=t=>{let r=l.current,e=r.getBoundingClientRect(),s=r.width/e.width,c=r.height/e.height;return{x:(t.clientX-e.left)*s,y:(t.clientY-e.top)*c}},M=t=>{let r=l.current,e=r.getBoundingClientRect(),s=r.width/e.width,c=r.height/e.height;return{x:(t.clientX-e.left)*s,y:(t.clientY-e.top)*c}},B=t=>{if(o)return;t.preventDefault(),w(!0);let r=D(t);f(r);let s=l.current.getContext("2d");s.beginPath(),s.arc(r.x,r.y,m/2,0,2*Math.PI),s.fillStyle=h,s.fill()},X=t=>{if(o)return;t.preventDefault(),w(!0);let r=t.touches[0],e=M(r);f(e);let c=l.current.getContext("2d");c.beginPath(),c.arc(e.x,e.y,m/2,0,2*Math.PI),c.fillStyle=h,c.fill()},$=t=>{if(!N||o)return;t.preventDefault();let e=l.current.getContext("2d"),s=D(t);e.beginPath(),e.moveTo(x.x,x.y),e.lineTo(s.x,s.y),e.strokeStyle=h,e.lineWidth=m,e.lineCap="round",e.lineJoin="round",e.stroke(),f(s)},L=t=>{if(!N||o)return;t.preventDefault();let e=l.current.getContext("2d"),s=t.touches[0],c=M(s);e.beginPath(),e.moveTo(x.x,x.y),e.lineTo(c.x,c.y),e.strokeStyle=h,e.lineWidth=m,e.lineCap="round",e.lineJoin="round",e.stroke(),f(c)},C=()=>{w(!1),f(null),j()},y=()=>{let t=l.current;if(!t)return!0;let s=t.getContext("2d").getImageData(0,0,t.width,t.height).data;for(let c=0;c<s.length;c+=4)if(s[c+3]>0)return!1;return!0},j=()=>{let t=y();P(t),n&&n(t)},k=()=>{let t=l.current;if(!t)return;t.getContext("2d").clearRect(0,0,t.width,t.height),P(!0),n&&n(!0)},H=()=>y()?null:l.current.toDataURL("image/png"),J=()=>new Promise(t=>{if(y()){t(null);return}l.current.toBlob(t,"image/png")});i.default.useImperativeHandle(R,()=>({getSignatureData:H,getSignatureBlob:J,checkIfEmpty:y,clearCanvas:k}));let _=t=>{let r=Math.max(1,Math.min(10,m+t));v(r)};return(0,i.useEffect)(()=>{o&&k()},[o]),(0,i.useEffect)(()=>{let t=l.current},[]),(0,a.jsxs)("div",{className:"space-y-4",children:[(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsx)("label",{className:"block text-sm font-medium text-gray-700",children:p}),(0,a.jsxs)("div",{className:"flex items-center space-x-2",children:[u&&(0,a.jsxs)("div",{className:"flex items-center space-x-1 bg-gray-100 rounded-lg p-1",children:[(0,a.jsxs)("button",{onClick:()=>v(3),disabled:o,className:"p-1 text-gray-600 hover:text-gray-800 disabled:opacity-50 disabled:cursor-not-allowed",title:"Set stroke width to 3px",children:[(0,a.jsx)(d.Pen,{className:"w-3 h-3"})," "]}),(0,a.jsxs)("button",{onClick:()=>v(4),disabled:o,className:"p-1 text-gray-600 hover:text-gray-800 disabled:opacity-50 disabled:cursor-not-allowed",title:"Set stroke width to 4px",children:[(0,a.jsx)(d.Pen,{className:"w-4 h-4"})," "]}),(0,a.jsxs)("button",{onClick:()=>v(5),disabled:o,className:"p-1 text-gray-600 hover:text-gray-800 disabled:opacity-50 disabled:cursor-not-allowed",title:"Set stroke width to 5px",children:[(0,a.jsx)(d.Pen,{className:"w-5 h-5"})," "]})]}),(0,a.jsx)("div",{className:"relative",children:(0,a.jsxs)("label",{htmlFor:"signature-color-picker",className:`flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors disabled:opacity-50 ${o?"cursor-not-allowed":"cursor-pointer"}`,title:"Choose color",children:[(0,a.jsx)(d.Palette,{className:"w-4 h-4 text-gray-600"}),(0,a.jsx)("div",{className:"w-4 h-4 rounded border-2 border-white shadow-sm",style:{backgroundColor:h}}),(0,a.jsx)("input",{type:"color",id:"signature-color-picker",value:h,onChange:t=>W(t.target.value),disabled:o,className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer"})]})})]})]}),(0,a.jsxs)("div",{className:`border-2 border-dashed rounded-lg p-4 transition-colors ${o?"border-gray-200 bg-gray-50":"border-gray-300 bg-gray-50"}`,children:[(0,a.jsx)("canvas",{ref:l,width:500,height:200,className:`w-full border border-gray-200 rounded bg-white touch-none ${o?"cursor-not-allowed opacity-50":"cursor-crosshair"}`,style:{maxWidth:"100%",height:"auto"},onMouseDown:B,onMouseMove:$,onMouseUp:C,onMouseLeave:C,onTouchStart:X,onTouchMove:L,onTouchEnd:C}),g&&(0,a.jsxs)("div",{className:"flex justify-between items-center mt-3",children:[(0,a.jsxs)("button",{onClick:k,disabled:o,className:"flex items-center space-x-2 px-3 py-2 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",children:[(0,a.jsx)(d.RotateCcw,{className:"w-4 h-4"}),(0,a.jsx)("span",{children:"Clear Signature"})]}),(0,a.jsx)("div",{className:`text-xs px-3 py-1 rounded-full ${S?"text-amber-700 bg-amber-100":"text-green-700 bg-green-100"}`,children:S?"Please sign above":"Signature ready"})]})]}),E&&(0,a.jsx)("div",{className:"fixed inset-0 z-5",onClick:()=>Y(!1)})]})});I.displayName="SignatureCanvas";var Q=I;
//# sourceMappingURL=index.js.map