@net-advantage/nabs-ui-signature 0.1.0

package/README.md

@@ -0,0 +1,13 @@
+# nabs-ui-signature
+
+Reusable signature pad control for the Nabs UI library.
+
+## Usage
+
+```jsx
+import { Signature } from "nabs-ui-signature";
+
+export function Example() {
+  return <Signature label="Draw your signature" />;
+}
+```

package/dist/nabs-ui-signature.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");var n=e((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),r=e((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,"ref",{enumerable:!1,value:null}):Object.defineProperty(e,"ref",{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),i=e(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=n():t.exports=r()}))();function a(e,t){let n=t.getBoundingClientRect();return{x:e.clientX-n.left,y:e.clientY-n.top}}function o(e,t){if(t.length!==0){e.beginPath(),e.moveTo(t[0].x,t[0].y);for(let n=1;n<t.length;n+=1)e.lineTo(t[n].x,t[n].y);e.stroke()}}function s(e,t,n){e.fillStyle=n,e.fillRect(0,0,t.width,t.height)}function c({label:e=`Signature`,helperText:n=`Use your mouse to draw your signature.`,value:r=``,disabled:c=!1,className:l=``,labelClassName:u=``,helperTextClassName:d=``,padClassName:f=``,canvasClassName:p=``,id:m,width:h=720,height:g=240,backgroundColor:_=`#ffffff`,penColor:v=`#0f172a`,penWidth:y=2.5,onChange:b,onBeginStroke:x,onEndStroke:S,onClear:C}){let w=(0,t.useId)(),T=m??`nabs-ui-signature-${w.replace(/:/g,``)}`,E=(0,t.useRef)(null),D=(0,t.useRef)(null),O=(0,t.useRef)(!1),k=(0,t.useRef)([]),[A,j]=(0,t.useState)(!r),M=[`nabs-ui-signature`,c?`nabs-ui-signature--disabled`:``,l].filter(Boolean).join(` `),N=[`nabs-ui-signature__label`,u].filter(Boolean).join(` `),P=[`nabs-ui-signature__helper`,d].filter(Boolean).join(` `),F=[`nabs-ui-signature__pad`,f].filter(Boolean).join(` `),I=[`nabs-ui-signature__canvas`,p].filter(Boolean).join(` `);(0,t.useEffect)(()=>{let e=E.current;if(!e)return;let t=e.getContext(`2d`);if(!t)return;let n=window.devicePixelRatio||1,i=Math.round(h),a=Math.round(g);if(e.width=Math.round(i*n),e.height=Math.round(a*n),e.style.width=`${i}px`,e.style.height=`${a}px`,D.current=t,t.lineCap=`round`,t.lineJoin=`round`,t.lineWidth=y*n,t.strokeStyle=v,t.scale(n,n),s(t,e,_),r){let e=new Image;e.onload=()=>{t.clearRect(0,0,i,a),t.fillStyle=_,t.fillRect(0,0,i,a),t.drawImage(e,0,0,i,a),j(!1)},e.src=r}return()=>{D.current=null}},[_,v,y,r,h,g]);let L=e=>{b?.(e.toDataURL(`image/png`))},R=e=>{if(c||O.current)return;let t=E.current,n=D.current;!t||!n||(`pointerId`in e&&typeof e.pointerId==`number`&&t.setPointerCapture&&t.setPointerCapture(e.pointerId),O.current=!0,k.current=[a(e,t)],n.beginPath(),n.moveTo(k.current[0].x,k.current[0].y),x?.())},z=e=>{if(c||!O.current)return;let t=E.current,n=D.current;if(!t||!n)return;let r=a(e,t);k.current.push(r),n.lineTo(r.x,r.y),n.stroke(),j(!1)},B=e=>{let t=E.current,n=D.current;if(!(!t||!n||!O.current)){if(e&&`pointerId`in e&&typeof e.pointerId==`number`&&t.releasePointerCapture)try{t.releasePointerCapture(e.pointerId)}catch{}O.current=!1,o(n,k.current),k.current=[],L(t),S?.()}};return(0,i.jsxs)(`div`,{className:M,children:[(0,i.jsx)(`div`,{className:N,id:`${T}-label`,children:e}),n?(0,i.jsx)(`div`,{className:P,children:n}):null,(0,i.jsxs)(`div`,{className:F,children:[(0,i.jsx)(`canvas`,{id:T,ref:E,className:I,role:`img`,"aria-labelledby":`${T}-label`,"aria-label":e,onPointerDown:R,onPointerMove:z,onPointerUp:B,onPointerCancel:B,onPointerLeave:B,onMouseDown:R,onMouseMove:z,onMouseUp:B,onMouseLeave:B}),(0,i.jsx)(`div`,{className:`nabs-ui-signature__placeholder`,"aria-hidden":`true`,children:A?`Draw here`:null})]}),(0,i.jsx)(`div`,{className:`nabs-ui-signature__actions`,children:(0,i.jsx)(`button`,{type:`button`,className:`nabs-ui-signature__clearButton`,onClick:()=>{let e=E.current,t=D.current;!e||!t||(t.clearRect(0,0,e.width,e.height),s(t,e,_),j(!0),b?.(``),C?.())},disabled:c||A,children:`Clear`})})]})}exports.Signature=c;

package/dist/nabs-ui-signature.css

@@ -0,0 +1,2 @@
+.nabs-ui-signature{color:#0f172a;font:inherit;gap:.75rem;min-width:0;display:grid}.nabs-ui-signature__label{font-size:.95rem;font-weight:700;line-height:1.2}.nabs-ui-signature__helper{color:#475569;font-size:.88rem;line-height:1.35}.nabs-ui-signature__pad{box-sizing:border-box;background:linear-gradient(#fff 0%,#f8fafc 100%);border:1.5px solid #cbd5e1;border-radius:1rem;position:relative;overflow:hidden}.nabs-ui-signature__canvas{touch-action:none;width:100%;display:block}.nabs-ui-signature__placeholder{color:#94a3b8;pointer-events:none;justify-content:center;align-items:center;font-size:.9rem;display:flex;position:absolute;inset:0}.nabs-ui-signature__actions{justify-content:flex-start;display:flex}.nabs-ui-signature__clearButton{color:#fff;cursor:pointer;font:inherit;background:#0f172a;border:0;border-radius:999px;padding:.7rem 1rem;font-weight:700}.nabs-ui-signature__clearButton:hover:not(:disabled){background:#1e293b}.nabs-ui-signature__clearButton:disabled{cursor:not-allowed;opacity:.55}.nabs-ui-signature--disabled{cursor:not-allowed;opacity:.7}
+/*$vite$:1*/

package/dist/nabs-ui-signature.js

@@ -0,0 +1,302 @@
+import { useEffect as e, useId as t, useRef as n, useState as r } from "react";
+//#region \0rolldown/runtime.js
+var i = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), a = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), o = /* @__PURE__ */ i(((e) => {
+	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+	function r(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.Fragment = n, e.jsx = r, e.jsxs = r;
+})), s = /* @__PURE__ */ i(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		function t(e) {
+			if (e == null) return null;
+			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
+			if (typeof e == "string") return e;
+			switch (e) {
+				case v: return "Fragment";
+				case b: return "Profiler";
+				case y: return "StrictMode";
+				case w: return "Suspense";
+				case T: return "SuspenseList";
+				case O: return "Activity";
+			}
+			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
+				case _: return "Portal";
+				case S: return e.displayName || "Context";
+				case x: return (e._context.displayName || "Context") + ".Consumer";
+				case C:
+					var n = e.render;
+					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
+				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case D:
+					n = e._payload, e = e._init;
+					try {
+						return t(e(n));
+					} catch {}
+			}
+			return null;
+		}
+		function n(e) {
+			return "" + e;
+		}
+		function r(e) {
+			try {
+				n(e);
+				var t = !1;
+			} catch {
+				t = !0;
+			}
+			if (t) {
+				t = console;
+				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
+			}
+		}
+		function i(e) {
+			if (e === v) return "<>";
+			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
+			try {
+				var n = t(e);
+				return n ? "<" + n + ">" : "<...>";
+			} catch {
+				return "<...>";
+			}
+		}
+		function o() {
+			var e = A.A;
+			return e === null ? null : e.getOwner();
+		}
+		function s() {
+			return Error("react-stack-top-frame");
+		}
+		function c(e) {
+			if (j.call(e, "key")) {
+				var t = Object.getOwnPropertyDescriptor(e, "key").get;
+				if (t && t.isReactWarning) return !1;
+			}
+			return e.key !== void 0;
+		}
+		function l(e, t) {
+			function n() {
+				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+			}
+			n.isReactWarning = !0, Object.defineProperty(e, "key", {
+				get: n,
+				configurable: !0
+			});
+		}
+		function u() {
+			var e = t(this.type);
+			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+		}
+		function d(e, t, n, r, i, a) {
+			var o = n.ref;
+			return e = {
+				$$typeof: g,
+				type: e,
+				key: t,
+				props: n,
+				_owner: r
+			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				value: null
+			}) : Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				get: u
+			}), e._store = {}, Object.defineProperty(e._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			}), Object.defineProperty(e, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			}), Object.defineProperty(e, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: i
+			}), Object.defineProperty(e, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: a
+			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+		}
+		function f(e, n, i, a, s, u) {
+			var f = n.children;
+			if (f !== void 0) if (a) if (M(f)) {
+				for (a = 0; a < f.length; a++) p(f[a]);
+				Object.freeze && Object.freeze(f);
+			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+			else p(f);
+			if (j.call(n, "key")) {
+				f = t(e);
+				var m = Object.keys(n).filter(function(e) {
+					return e !== "key";
+				});
+				a = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + a] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", a, f, m, f), R[f + a] = !0);
+			}
+			if (f = null, i !== void 0 && (r(i), f = "" + i), c(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
+			else i = n;
+			return f && l(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, o(), s, u);
+		}
+		function p(e) {
+			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+		}
+		function m(e) {
+			return typeof e == "object" && !!e && e.$$typeof === g;
+		}
+		var h = a("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		h = { react_stack_bottom_frame: function(e) {
+			return e();
+		} };
+		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, s)(), L = N(i(s)), R = {};
+		e.Fragment = v, e.jsx = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
+		}, e.jsxs = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
+		};
+	})();
+})), c = (/* @__PURE__ */ i(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = o() : t.exports = s();
+})))();
+function l(e, t) {
+	let n = t.getBoundingClientRect();
+	return {
+		x: e.clientX - n.left,
+		y: e.clientY - n.top
+	};
+}
+function u(e, t) {
+	if (t.length !== 0) {
+		e.beginPath(), e.moveTo(t[0].x, t[0].y);
+		for (let n = 1; n < t.length; n += 1) e.lineTo(t[n].x, t[n].y);
+		e.stroke();
+	}
+}
+function d(e, t, n) {
+	e.fillStyle = n, e.fillRect(0, 0, t.width, t.height);
+}
+function f({ label: i = "Signature", helperText: a = "Use your mouse to draw your signature.", value: o = "", disabled: s = !1, className: f = "", labelClassName: p = "", helperTextClassName: m = "", padClassName: h = "", canvasClassName: g = "", id: _, width: v = 720, height: y = 240, backgroundColor: b = "#ffffff", penColor: x = "#0f172a", penWidth: S = 2.5, onChange: C, onBeginStroke: w, onEndStroke: T, onClear: E }) {
+	let D = t(), O = _ ?? `nabs-ui-signature-${D.replace(/:/g, "")}`, k = n(null), A = n(null), j = n(!1), M = n([]), [N, P] = r(!o), F = [
+		"nabs-ui-signature",
+		s ? "nabs-ui-signature--disabled" : "",
+		f
+	].filter(Boolean).join(" "), I = ["nabs-ui-signature__label", p].filter(Boolean).join(" "), L = ["nabs-ui-signature__helper", m].filter(Boolean).join(" "), R = ["nabs-ui-signature__pad", h].filter(Boolean).join(" "), z = ["nabs-ui-signature__canvas", g].filter(Boolean).join(" ");
+	e(() => {
+		let e = k.current;
+		if (!e) return;
+		let t = e.getContext("2d");
+		if (!t) return;
+		let n = window.devicePixelRatio || 1, r = Math.round(v), i = Math.round(y);
+		if (e.width = Math.round(r * n), e.height = Math.round(i * n), e.style.width = `${r}px`, e.style.height = `${i}px`, A.current = t, t.lineCap = "round", t.lineJoin = "round", t.lineWidth = S * n, t.strokeStyle = x, t.scale(n, n), d(t, e, b), o) {
+			let e = new Image();
+			e.onload = () => {
+				t.clearRect(0, 0, r, i), t.fillStyle = b, t.fillRect(0, 0, r, i), t.drawImage(e, 0, 0, r, i), P(!1);
+			}, e.src = o;
+		}
+		return () => {
+			A.current = null;
+		};
+	}, [
+		b,
+		x,
+		S,
+		o,
+		v,
+		y
+	]);
+	let B = (e) => {
+		C?.(e.toDataURL("image/png"));
+	}, V = (e) => {
+		if (s || j.current) return;
+		let t = k.current, n = A.current;
+		!t || !n || ("pointerId" in e && typeof e.pointerId == "number" && t.setPointerCapture && t.setPointerCapture(e.pointerId), j.current = !0, M.current = [l(e, t)], n.beginPath(), n.moveTo(M.current[0].x, M.current[0].y), w?.());
+	}, H = (e) => {
+		if (s || !j.current) return;
+		let t = k.current, n = A.current;
+		if (!t || !n) return;
+		let r = l(e, t);
+		M.current.push(r), n.lineTo(r.x, r.y), n.stroke(), P(!1);
+	}, U = (e) => {
+		let t = k.current, n = A.current;
+		if (!(!t || !n || !j.current)) {
+			if (e && "pointerId" in e && typeof e.pointerId == "number" && t.releasePointerCapture) try {
+				t.releasePointerCapture(e.pointerId);
+			} catch {}
+			j.current = !1, u(n, M.current), M.current = [], B(t), T?.();
+		}
+	};
+	return /* @__PURE__ */ (0, c.jsxs)("div", {
+		className: F,
+		children: [
+			/* @__PURE__ */ (0, c.jsx)("div", {
+				className: I,
+				id: `${O}-label`,
+				children: i
+			}),
+			a ? /* @__PURE__ */ (0, c.jsx)("div", {
+				className: L,
+				children: a
+			}) : null,
+			/* @__PURE__ */ (0, c.jsxs)("div", {
+				className: R,
+				children: [/* @__PURE__ */ (0, c.jsx)("canvas", {
+					id: O,
+					ref: k,
+					className: z,
+					role: "img",
+					"aria-labelledby": `${O}-label`,
+					"aria-label": i,
+					onPointerDown: V,
+					onPointerMove: H,
+					onPointerUp: U,
+					onPointerCancel: U,
+					onPointerLeave: U,
+					onMouseDown: V,
+					onMouseMove: H,
+					onMouseUp: U,
+					onMouseLeave: U
+				}), /* @__PURE__ */ (0, c.jsx)("div", {
+					className: "nabs-ui-signature__placeholder",
+					"aria-hidden": "true",
+					children: N ? "Draw here" : null
+				})]
+			}),
+			/* @__PURE__ */ (0, c.jsx)("div", {
+				className: "nabs-ui-signature__actions",
+				children: /* @__PURE__ */ (0, c.jsx)("button", {
+					type: "button",
+					className: "nabs-ui-signature__clearButton",
+					onClick: () => {
+						let e = k.current, t = A.current;
+						!e || !t || (t.clearRect(0, 0, e.width, e.height), d(t, e, b), P(!0), C?.(""), E?.());
+					},
+					disabled: s || N,
+					children: "Clear"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { f as Signature };

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@net-advantage/nabs-ui-signature",
+  "version": "0.1.0",
+  "description": "Reusable signature pad control for the Nabs UI library.",
+  "type": "module",
+  "main": "./dist/nabs-ui-signature.cjs",
+  "module": "./dist/nabs-ui-signature.js",
+  "exports": {
+    ".": {
+      "import": "./dist/nabs-ui-signature.js",
+      "require": "./dist/nabs-ui-signature.cjs"
+    },
+    "./Signature": "./src/Signature.tsx",
+    "./style.css": "./dist/nabs-ui-signature.css"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1",
+    "react-dom": "^19.2.6",
+    "vite": "^8.0.12"
+  }
+}