@jfrader/ui 0.5.0 → 0.6.0

package/dist/signature-pad-khL2yhQI.js

@@ -0,0 +1,646 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-DgVO3NaB.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as c } from "./button-C6OV0C7J.js";
+import { t as l } from "./radio-group-DItMf2YM.js";
+import { useEffect as u, useId as ee, useImperativeHandle as te, useLayoutEffect as d, useRef as f, useState as ne } from "react";
+import { vars as p } from "@jfrader/tokens/vars";
+import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+import { base as g } from "@jfrader/tokens";
+import { useMergeRefs as re } from "@floating-ui/react";
+//#region src/components/signature-pad/signature-pad.tsx
+var _ = 600, v = 260, ie = 4096, y = 1e5, ae = 1e3, oe = 2, se = 3, ce = 60, le = 8e3, ue = 500, de = [], b = (e) => s(e) && e !== "", x = {
+	fine: 2,
+	medium: 4,
+	bold: 7
+}, S = {
+	black: g.color.signatureInkBlack,
+	blue: g.color.signatureInkBlue,
+	violet: g.color.signatureInkViolet
+}, fe = {
+	black: "--ui-color-text",
+	blue: "--ui-color-info",
+	violet: "--ui-color-accent"
+}, C = class extends Error {
+	code;
+	constructor(e, t) {
+		super(t), this.code = e, this.name = "SignatureExportError";
+	}
+}, w = 0;
+function pe() {
+	let e = /* @__PURE__ */ new Uint32Array(2);
+	return globalThis.crypto?.getRandomValues?.(e), [++w, ...e].map((e) => e.toString(36)).join("-");
+}
+function me(e) {
+	let t = 0;
+	if (!Array.isArray(e) || e.length > ae) return !1;
+	for (let n of e) {
+		if (!n || typeof n.id != "string" || !Object.hasOwn(x, n.width) || !Object.hasOwn(S, n.color) || !Number.isFinite(n.startTime) || n.startTime < 0 || !Array.isArray(n.points) || !n.points.length) return !1;
+		let e = 0;
+		for (let r of n.points) {
+			if (++t > y || !r || !Number.isFinite(r.x) || !Number.isFinite(r.y) || r.x < 0 || r.x > _ || r.y < 0 || r.y > v || !Number.isFinite(r.time) || r.time < e || r.pressure !== null && (!Number.isFinite(r.pressure) || r.pressure < 0 || r.pressure > 1)) return !1;
+			e = r.time;
+		}
+	}
+	return !0;
+}
+function T(e) {
+	if (!me(e)) throw new C("invalid", "Invalid signature strokes.");
+}
+var E = (e, t, n) => Math.min(n, Math.max(t, e));
+function D(e) {
+	if (me(e)) return e;
+	let t = [], n = 0;
+	for (let r of Array.isArray(e) ? e.slice(0, ae) : []) {
+		if (n >= y) break;
+		if (!r || !Object.hasOwn(x, r.width) || !Object.hasOwn(S, r.color) || !Array.isArray(r.points)) continue;
+		let e = 0, i = [];
+		for (let t of r.points) {
+			if (n >= y) break;
+			n++, t && Number.isFinite(t.x) && Number.isFinite(t.y) && (Number.isFinite(t.time) && (e = Math.max(e, t.time)), i.push({
+				x: E(t.x, 0, _),
+				y: E(t.y, 0, v),
+				pressure: Number.isFinite(t.pressure) ? E(t.pressure, 0, 1) : null,
+				time: e
+			}));
+		}
+		i.length && t.push({
+			...r,
+			startTime: Number.isFinite(r.startTime) ? Math.max(0, r.startTime) : 0,
+			points: i
+		});
+	}
+	return t;
+}
+var he = (e) => e.reduce((e, t) => e + t.points.length, 0), O = (e, t) => ({
+	x: (e.x + t.x) / 2,
+	y: (e.y + t.y) / 2,
+	time: (e.time + t.time) / 2,
+	pressure: e.pressure === null || t.pressure === null ? null : (e.pressure + t.pressure) / 2
+}), k = (e, t) => x[t] * (e.pressure === null ? 1 : .25 + e.pressure * .75);
+function A(e) {
+	let t = [];
+	for (let n = 1; n < e.points.length; n++) {
+		let r = e.points[n - 1], i = e.points[n], a = n === 1 ? r : O(e.points[n - 2], r), o = n === e.points.length - 1 ? i : O(r, i);
+		t.push({
+			from: a,
+			control: r,
+			to: o,
+			width: (k(r, e.width) + k(i, e.width)) / 2
+		});
+	}
+	return t;
+}
+function ge(e, t, n) {
+	for (let r of t) {
+		if (e.strokeStyle = e.fillStyle = n[r.color], e.lineCap = e.lineJoin = "round", r.points.length === 1) {
+			let t = r.points[0];
+			e.beginPath(), e.arc(t.x, t.y, k(t, r.width) / 2, 0, Math.PI * 2), e.fill();
+		}
+		for (let t of A(r)) e.lineWidth = t.width, e.beginPath(), e.moveTo(t.from.x, t.from.y), e.quadraticCurveTo(t.control.x, t.control.y, t.to.x, t.to.y), e.stroke();
+	}
+}
+function j(e, t) {
+	if (T(e), !e.length) throw new C("empty", "Cannot export an empty signature.");
+	let n = 0, r = 0, i = _, a = v;
+	if (t.crop !== !1) {
+		n = Infinity, r = Infinity, i = -Infinity, a = -Infinity;
+		for (let t of e) for (let e of t.points) {
+			let o = x[t.width] / 2 + oe;
+			n = Math.min(n, e.x - o), r = Math.min(r, e.y - o), i = Math.max(i, e.x + o), a = Math.max(a, e.y + o);
+		}
+	}
+	let o = t.scale ?? se, s = i - n, c = a - r;
+	if (!Number.isFinite(o) || o <= 0 || Math.ceil(s * o) > ie || Math.ceil(c * o) > ie) throw new C("size", "Signature export exceeds the dimension budget.");
+	return {
+		left: n,
+		top: r,
+		width: s,
+		height: c,
+		scale: o
+	};
+}
+function _e(e, t = {}) {
+	let n = j(e, t);
+	if (typeof document > "u") throw new C("encoder", "Canvas rendering is unavailable.");
+	let r = document.createElement("canvas");
+	r.width = Math.ceil(n.width * n.scale), r.height = Math.ceil(n.height * n.scale);
+	let i = r.getContext("2d");
+	if (!i) throw new C("encoder", "Canvas rendering is unavailable.");
+	return i.scale(n.scale, n.scale), i.translate(-n.left, -n.top), ge(i, e, S), r;
+}
+function ve(e, t = {}) {
+	return new Promise((n, r) => {
+		try {
+			_e(e, t).toBlob((e) => e ? n(e) : r(new C("encoder", "PNG encoding failed.")), "image/png");
+		} catch (e) {
+			r(e);
+		}
+	});
+}
+function ye(e, t = {}) {
+	let n = j(e, t), r = e.map((e) => {
+		let t = S[e.color];
+		if (e.points.length === 1) {
+			let n = e.points[0];
+			return `<circle cx="${n.x}" cy="${n.y}" r="${k(n, e.width) / 2}" fill="${t}"/>`;
+		}
+		return A(e).map((e) => `<path d="M ${e.from.x} ${e.from.y} Q ${e.control.x} ${e.control.y} ${e.to.x} ${e.to.y}" fill="none" stroke="${t}" stroke-width="${e.width}" stroke-linecap="round" stroke-linejoin="round"/>`).join("");
+	}).join("");
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${n.left} ${n.top} ${n.width} ${n.height}" width="${Math.ceil(n.width * n.scale)}" height="${Math.ceil(n.height * n.scale)}">${r}</svg>`;
+}
+var be = e({
+	display: "grid",
+	gap: p.space[3],
+	minInlineSize: 0,
+	color: p.color.text,
+	fontFamily: p.font.sans,
+	fontSize: p.textSize.sm
+}), xe = e({
+	position: "relative",
+	minInlineSize: 0
+}), Se = e({
+	display: "block",
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	aspectRatio: `${_} / ${v}`,
+	backgroundColor: p.color.surface,
+	color: p.color.text,
+	border: `1px solid ${p.color.borderControl}`,
+	borderRadius: p.radius.lg,
+	touchAction: "none",
+	"&:focus-visible": t,
+	"&[aria-disabled=\"true\"], &[data-readonly]": { touchAction: "auto" },
+	[n]: {
+		borderColor: "CanvasText",
+		color: "CanvasText"
+	}
+}), Ce = e({
+	position: "absolute",
+	insetInline: p.space[4],
+	insetBlockEnd: p.space[8],
+	borderBlockEnd: `1px solid ${p.color.borderStrong}`,
+	pointerEvents: "none",
+	color: p.color.textMuted,
+	display: "flex",
+	justifyContent: "space-between",
+	gap: p.space[2],
+	fontSize: p.textSize.xs,
+	transitionProperty: "opacity",
+	transitionDuration: p.motion.duration.base,
+	[r]: { transitionDuration: "0s" }
+}), we = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: p.space[3]
+}), Te = e({ fontWeight: p.fontWeight.medium }), Ee = e({ color: p.color.textMuted }), De = e({ color: p.color.dangerText }), M = (e, t) => e === t || JSON.stringify(e) === JSON.stringify(t);
+function N({ ref: e, apiRef: t, value: n, defaultValue: r = de, onValueChange: s, color: p, defaultColor: g = "black", onColorChange: ie, width: oe, defaultWidth: se = "medium", onWidthChange: C, label: w, description: T, error: E, signer: O, hint: k, disabled: A = !1, readOnly: j = !1, required: N = !1, replay: Oe = !0, download: ke = !1, fileName: Ae = "signature", historyLimit: je = ce, messages: P, icons: Me, exportOptions: F, slotProps: I, className: Ne, sx: Pe, dir: Fe, style: Ie, onPointerDown: Le, onPointerMove: Re, onPointerUp: ze, onPointerCancel: Be, onLostPointerCapture: Ve, onKeyDown: He, "aria-labelledby": Ue, "aria-describedby": We, ...L }) {
+	let R = ee(), z = f(null), Ge = re([z, e]), Ke = f(r), [B = de, qe] = a(n, Ke.current, s), [Je = "black", Ye] = a(p, g, ie), [Xe = "medium", Ze] = a(oe, se, C), V = f({
+		present: B,
+		past: [],
+		future: []
+	}), H = f(null), U = f(null), W = f(null), Qe = f(null), [$e, et] = ne({
+		text: "",
+		revision: 0
+	});
+	function G(e) {
+		et((t) => ({
+			text: e,
+			revision: t.revision + 1
+		}));
+	}
+	let [tt, nt] = ne(!1), [, rt] = ne(0), K = A || j, it = Number.isFinite(je) && je > 0 ? Math.floor(je) : ce;
+	function q(e = U.current ? [...V.current.present, U.current.stroke] : V.current.present) {
+		let t = z.current;
+		if (!t) return;
+		let n = t.getBoundingClientRect();
+		if (n.width <= 0 || n.height <= 0 || t.clientWidth <= 0 || t.clientHeight <= 0) return;
+		let r = t.ownerDocument.defaultView, i = r.devicePixelRatio || 1, a = Math.max(1, Math.round(t.clientWidth * i)), o = Math.max(1, Math.round(t.clientHeight * i));
+		(t.width !== a || t.height !== o) && (t.width = a, t.height = o);
+		let s = t.getContext("2d");
+		if (!s) return;
+		s.setTransform(1, 0, 0, 1, 0, 0), s.clearRect(0, 0, t.width, t.height), s.setTransform(t.width / _, 0, 0, t.height / v, 0, 0);
+		let c = r.getComputedStyle(t), l = r.matchMedia("(forced-colors: active)").matches, u = Object.fromEntries(Object.entries(fe).map(([e, t]) => [e, l ? c.color : c.getPropertyValue(t).trim()]));
+		ge(s, D(e), u);
+	}
+	function J() {
+		W.current !== null && z.current?.ownerDocument.defaultView?.cancelAnimationFrame(W.current), W.current = null, nt(!1), q();
+	}
+	function Y() {
+		J(), G(P.replayComplete);
+	}
+	function X() {
+		let e = U.current?.pointerId;
+		U.current = null;
+		let t = z.current;
+		e !== void 0 && t?.hasPointerCapture(e) && t.releasePointerCapture(e), q();
+	}
+	function at(e, t, n) {
+		M(e, V.current.present) || (J(), X(), H.current = {
+			value: e,
+			history: t,
+			status: n
+		}, qe(e));
+	}
+	function ot() {
+		let e = V.current;
+		if (K || !e.past.length) return;
+		let t = e.past[e.past.length - 1];
+		at(t, {
+			present: t,
+			past: e.past.slice(0, -1),
+			future: [e.present, ...e.future].slice(0, it)
+		}, P.undone);
+	}
+	function st() {
+		let e = V.current;
+		if (K || !e.future.length) return;
+		let t = e.future[0];
+		at(t, {
+			present: t,
+			past: [...e.past, e.present].slice(-it),
+			future: e.future.slice(1)
+		}, P.redone);
+	}
+	function Z(e, t) {
+		let n = V.current;
+		at(e, {
+			present: e,
+			past: [...n.past, n.present].slice(-it),
+			future: []
+		}, t);
+	}
+	function ct() {
+		K || Z(de, P.cleared);
+	}
+	function lt() {
+		J(), X();
+		let e = D(V.current.present), t = z.current?.ownerDocument.defaultView;
+		if (A || !e.length || !t) return;
+		if (t.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			Y();
+			return;
+		}
+		let n = [], r = 0;
+		e.forEach((t, i) => {
+			let a = e[i - 1], o = a ? Math.min(ue, Math.max(0, t.startTime - a.startTime - a.points.at(-1).time)) : 0, s = t.points.at(-1).time;
+			n.push({
+				stroke: t,
+				offset: r + o
+			}), r += o + s;
+		});
+		let i = r > le ? le / r : 1, a = t.performance.now();
+		nt(!0);
+		let o = (e) => {
+			let s = (e - a) / i;
+			q(n.flatMap(({ stroke: e, offset: t }) => {
+				if (s < t) return [];
+				let n = e.points.filter((e) => e.time <= s - t);
+				return n.length ? [{
+					...e,
+					points: n
+				}] : [];
+			})), s >= r ? Y() : W.current = t.requestAnimationFrame(o);
+		};
+		W.current = t.requestAnimationFrame(o);
+	}
+	let Q = f(null);
+	u(() => {
+		process.env.NODE_ENV !== "production" && (me(B) ? Q.current = null : (Q.current === null || !M(Q.current, B)) && (Q.current = B, console.warn("SignaturePad: value contains malformed strokes; invalid samples are skipped when drawing and exports reject with an \"invalid\" SignatureExportError.")));
+	}, [B]), d(() => {
+		M(B, V.current.present) || (X(), J(), H.current && M(B, H.current.value) ? (V.current = H.current.history, G(H.current.status)) : V.current = {
+			present: B,
+			past: [],
+			future: []
+		}, H.current = null, rt((e) => e + 1)), W.current === null && q(U.current ? [...V.current.present, U.current.stroke] : V.current.present);
+	}), d(() => {
+		K && (X(), J());
+	}, [K]);
+	let $ = f({
+		draw: q,
+		completeReplay: Y,
+		reset: () => {
+			K || Z(Ke.current, P.reset);
+		}
+	});
+	d(() => {
+		$.current = {
+			draw: q,
+			completeReplay: Y,
+			reset: () => {
+				K || Z(Ke.current, P.reset);
+			}
+		};
+	}), d(() => {
+		let e = z.current, t = e.ownerDocument.defaultView, n = () => {
+			W.current === null && $.current.draw();
+		}, r = new ResizeObserver(n);
+		r.observe(e);
+		let i = new MutationObserver(n);
+		for (let t = e.parentElement; t; t = t.parentElement) i.observe(t, {
+			attributes: !0,
+			attributeFilter: [
+				"data-theme",
+				"class",
+				"style"
+			]
+		});
+		let a = t.matchMedia("(forced-colors: active)");
+		a.addEventListener("change", n);
+		let o = t.matchMedia("(prefers-reduced-motion: reduce)"), s = () => {
+			o.matches && W.current !== null && $.current.completeReplay();
+		};
+		o.addEventListener("change", s);
+		let c = t.matchMedia(`(resolution: ${t.devicePixelRatio}dppx)`), l = () => {
+			n(), c.removeEventListener("change", l), c = t.matchMedia(`(resolution: ${t.devicePixelRatio}dppx)`), c.addEventListener("change", l);
+		};
+		c.addEventListener("change", l), t.addEventListener("resize", n);
+		let u = e.closest("form"), ee = (t) => {
+			queueMicrotask(() => {
+				!t.defaultPrevented && e.isConnected && $.current.reset();
+			});
+		};
+		return u?.addEventListener("reset", ee), () => {
+			r.disconnect(), i.disconnect(), a.removeEventListener("change", n), o.removeEventListener("change", s), c.removeEventListener("change", l), t.removeEventListener("resize", n), u?.removeEventListener("reset", ee), W.current !== null && t.cancelAnimationFrame(W.current), W.current = null, U.current = null;
+		};
+	}, []);
+	function ut(e) {
+		return z.current && G(P.exported), e;
+	}
+	function dt(e) {
+		if (K || e.key !== "Home" && e.key !== "End") return;
+		let t = e.currentTarget.querySelectorAll("input[type=\"radio\"]:not(:disabled)"), n = e.key === "Home" ? t[0] : t[t.length - 1];
+		n && (e.preventDefault(), n.focus(), n.click());
+	}
+	te(t, () => ({
+		focus: () => z.current?.focus(),
+		clear: ct,
+		undo: ot,
+		redo: st,
+		replay: lt,
+		stopReplay: J,
+		toDataURL: (e) => ut(_e(V.current.present, e ?? F).toDataURL("image/png")),
+		toBlob: (e) => ve(V.current.present, e ?? F).then(ut),
+		toSvg: (e) => ut(ye(V.current.present, e ?? F))
+	}));
+	function ft(e, t) {
+		let n = z.current, r = n.getBoundingClientRect(), i = n.clientWidth, a = n.clientHeight;
+		if (i <= 0 || a <= 0 || !Number.isFinite(e.clientX) || !Number.isFinite(e.clientY)) return;
+		let o = t.stroke.points, s = Math.max(o.at(-1)?.time ?? 0, Number.isFinite(e.timeStamp) ? e.timeStamp - t.started : 0), c = {
+			x: Math.max(0, Math.min(_, (e.clientX - r.left - n.clientLeft) / i * _)),
+			y: Math.max(0, Math.min(v, (e.clientY - r.top - n.clientTop) / a * v)),
+			pressure: e.pointerType === "pen" && Number.isFinite(e.pressure) ? Math.max(0, Math.min(1, e.pressure)) : null,
+			time: s
+		}, l = o.at(-1), u = y - he(D(V.current.present));
+		(!l || l.x !== c.x || l.y !== c.y) && o.length < u && o.push(c);
+	}
+	function pt(e) {
+		let t = U.current;
+		if (!t || e.pointerId !== t.pointerId) return;
+		let n = e.nativeEvent.getCoalescedEvents?.() ?? [];
+		for (let e of n) ft(e, t);
+		ft(e.nativeEvent, t), q([...V.current.present, t.stroke]);
+	}
+	async function mt(e) {
+		try {
+			let t = e === "png" ? await ve(V.current.present, F) : new Blob([ye(V.current.present, F)], { type: "image/svg+xml" }), n = z.current?.ownerDocument;
+			if (!n) return;
+			let r = URL.createObjectURL(t);
+			try {
+				let t = n.createElement("a");
+				t.href = r, t.download = `${Ae.replace(/[\\/\u0000-\u001f:*?"<>|]/g, "_") || "signature"}.${e}`, t.click(), G(P.exported);
+			} finally {
+				URL.revokeObjectURL(r);
+			}
+		} catch {
+			z.current && G(P.exportFailed);
+		}
+	}
+	let ht = V.current, gt = [
+		{
+			action: "undo",
+			disabled: K || !ht.past.length,
+			run: ot
+		},
+		{
+			action: "redo",
+			disabled: K || !ht.future.length,
+			run: st
+		},
+		...Oe ? [{
+			action: tt ? "stop" : "replay",
+			disabled: A || !B.length,
+			run: tt ? J : lt
+		}] : [],
+		{
+			action: "clear",
+			disabled: K || !B.length,
+			run: ct
+		},
+		...ke ? [{
+			action: "png",
+			disabled: A || !B.length,
+			run: () => {
+				mt("png");
+			}
+		}, {
+			action: "svg",
+			disabled: A || !B.length,
+			run: () => {
+				mt("svg");
+			}
+		}] : []
+	];
+	return /* @__PURE__ */ m(i, {
+		className: [Ne, I?.root?.className].filter(Boolean).join(" "),
+		styles: [be, I?.root?.css],
+		sx: Pe,
+		children: (e) => /* @__PURE__ */ h("div", {
+			"data-ui": "signature-pad",
+			"data-state": B.length ? "signed" : "empty",
+			className: e,
+			dir: Fe,
+			style: Ie,
+			children: [
+				b(w) && /* @__PURE__ */ m("span", {
+					id: `${R}-label`,
+					className: I?.label?.className,
+					css: [Te, I?.label?.css],
+					children: w
+				}),
+				/* @__PURE__ */ m("span", {
+					id: `${R}-state`,
+					css: o,
+					children: B.length ? P.signed : P.empty
+				}),
+				/* @__PURE__ */ m("span", {
+					id: `${R}-shortcuts`,
+					css: o,
+					children: P.shortcuts
+				}),
+				/* @__PURE__ */ h("div", {
+					css: xe,
+					children: [/* @__PURE__ */ m("canvas", {
+						...L,
+						ref: Ge,
+						role: "img",
+						tabIndex: A ? -1 : L.tabIndex ?? 0,
+						"aria-roledescription": P.roleDescription,
+						"aria-disabled": A || void 0,
+						"data-readonly": j || void 0,
+						"aria-invalid": b(E) ? !0 : L["aria-invalid"],
+						"aria-labelledby": [
+							Ue,
+							b(w) && `${R}-label`,
+							!L["aria-label"] && `${R}-state`
+						].filter(Boolean).join(" ") || void 0,
+						"aria-describedby": [
+							We,
+							`${R}-state`,
+							`${R}-shortcuts`,
+							N && `${R}-required`,
+							b(T) && `${R}-description`,
+							b(E) && `${R}-error`
+						].filter(Boolean).join(" "),
+						className: I?.canvas?.className,
+						css: [Se, I?.canvas?.css],
+						onPointerDown: (e) => {
+							if (Le?.(e), e.defaultPrevented || K || !e.isPrimary || e.button !== 0 || U.current || B.length >= ae || he(D(B)) >= y || e.currentTarget.clientWidth <= 0 || e.currentTarget.clientHeight <= 0) return;
+							J(), H.current = null;
+							let t = Number.isFinite(e.timeStamp) ? e.timeStamp : 0;
+							Qe.current ??= t;
+							let n = {
+								pointerId: e.pointerId,
+								started: t,
+								stroke: {
+									id: pe(),
+									points: [],
+									color: Je,
+									width: Xe,
+									startTime: Math.max(0, t - Qe.current)
+								}
+							};
+							U.current = n;
+							try {
+								e.currentTarget.setPointerCapture(e.pointerId);
+							} catch {
+								U.current = null;
+								return;
+							}
+							ft(e.nativeEvent, n), q([...ht.present, n.stroke]), e.preventDefault();
+						},
+						onPointerMove: (e) => {
+							Re?.(e), e.defaultPrevented || pt(e);
+						},
+						onPointerUp: (e) => {
+							if (ze?.(e), U.current?.pointerId !== e.pointerId) return;
+							if (e.defaultPrevented) {
+								X();
+								return;
+							}
+							pt(e);
+							let t = U.current.stroke;
+							X(), t.points.length && Z([...V.current.present, t], P.added);
+						},
+						onPointerCancel: (e) => {
+							Be?.(e), U.current?.pointerId === e.pointerId && X();
+						},
+						onLostPointerCapture: (e) => {
+							Ve?.(e), U.current?.pointerId === e.pointerId && X();
+						},
+						onKeyDown: (e) => {
+							if (He?.(e), e.defaultPrevented || e.target !== e.currentTarget) return;
+							let t = e.key.toLowerCase();
+							t === "escape" && (tt || U.current) ? (J(), X(), e.preventDefault(), e.stopPropagation()) : !K && (e.metaKey || e.ctrlKey) && (t === "z" || t === "y") ? (t === "y" || e.shiftKey ? st() : ot(), e.preventDefault()) : !K && (t === "delete" || t === "backspace") && (ct(), e.preventDefault());
+						},
+						children: P.fallback
+					}), (b(k) || b(O)) && /* @__PURE__ */ h("div", {
+						"aria-hidden": "true",
+						"data-ui": "signature-pad-guide",
+						className: I?.guide?.className,
+						css: [Ce, I?.guide?.css],
+						children: [!B.length && b(k) && /* @__PURE__ */ m("span", { children: k }), b(O) && /* @__PURE__ */ m("span", { children: O })]
+					})]
+				}),
+				/* @__PURE__ */ h("div", {
+					"data-ui": "signature-pad-toolbar",
+					className: I?.toolbar?.className,
+					css: [we, I?.toolbar?.css],
+					children: [
+						/* @__PURE__ */ m(l, {
+							"aria-label": P.ink,
+							orientation: "horizontal",
+							value: Je,
+							onValueChange: (e) => Ye(e),
+							disabled: K,
+							onKeyDown: dt,
+							children: Object.keys(S).map((e) => /* @__PURE__ */ m(l.Radio, {
+								value: e,
+								label: P.colors[e]
+							}, e))
+						}),
+						/* @__PURE__ */ m(l, {
+							"aria-label": P.nib,
+							orientation: "horizontal",
+							value: Xe,
+							onValueChange: (e) => Ze(e),
+							disabled: K,
+							onKeyDown: dt,
+							children: Object.keys(x).map((e) => /* @__PURE__ */ m(l.Radio, {
+								value: e,
+								label: P.widths[e]
+							}, e))
+						}),
+						gt.map(({ action: e, disabled: t, run: n }) => /* @__PURE__ */ h(c, {
+							size: "sm",
+							variant: "outline",
+							disabled: t,
+							onClick: n,
+							className: I?.action?.className,
+							css: I?.action?.css,
+							children: [b(Me?.[e]) && /* @__PURE__ */ m("span", {
+								"aria-hidden": "true",
+								children: Me?.[e]
+							}), P.actions[e]]
+						}, e))
+					]
+				}),
+				N && /* @__PURE__ */ m("span", {
+					id: `${R}-required`,
+					css: o,
+					children: P.required
+				}),
+				b(T) && /* @__PURE__ */ m("div", {
+					id: `${R}-description`,
+					className: I?.description?.className,
+					css: [Ee, I?.description?.css],
+					children: T
+				}),
+				b(E) && /* @__PURE__ */ m("div", {
+					id: `${R}-error`,
+					role: "alert",
+					className: I?.error?.className,
+					css: [De, I?.error?.css],
+					children: E
+				}),
+				/* @__PURE__ */ m("div", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					className: I?.status?.className,
+					css: [o, I?.status?.css],
+					children: $e.text && /* @__PURE__ */ m("span", { children: $e.text }, $e.revision)
+				})
+			]
+		})
+	});
+}
+N.displayName = "SignaturePad";
+//#endregion
+export { ye as i, N as n, ve as r, C as t };

package/dist/signature-pad.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as SignatureExportError, n as SignaturePad, r as signatureToPng, i as signatureToSvg } from "./signature-pad-q2SAsrdD.js";
+export { t as SignatureExportError, n as SignaturePad, r as signatureToPng, i as signatureToSvg } from "./signature-pad-khL2yhQI.js";

package/dist/{skeleton-XQQDkCHd.js → skeleton-LJsQsveI.js}

@@ -1,6 +1,7 @@
 'use client';
-import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
-import { r } from "./media-8yrN85VT.js";
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
 import { vars as i } from "@jfrader/tokens/vars";
 import { jsx as a } from "@emotion/react/jsx-runtime";
 //#region src/components/skeleton/skeleton.tsx
@@ -19,7 +20,7 @@ var o = e({
 	backgroundRepeat: "no-repeat",
 	animation: `${o} 1.6s ease-in-out infinite`,
 	"&:dir(rtl)": { animationDirection: "reverse" },
-	[r]: {
+	[n]: {
 		animation: "none",
 		backgroundImage: "none"
 	}
@@ -29,23 +30,23 @@ var o = e({
 	aspectRatio: "1",
 	borderRadius: i.radius.full
 });
-function l({ ref: e, width: t, height: r, circle: i = !1, radius: o, style: l, className: u, sx: d, ...f }) {
-	return /* @__PURE__ */ a(n, {
+function l({ ref: e, width: t, height: n, circle: i = !1, radius: o, style: l, className: u, sx: d, ...f }) {
+	return /* @__PURE__ */ a(r, {
 		className: u,
 		styles: [s, i && c],
 		sx: d,
-		children: (n) => /* @__PURE__ */ a("div", {
+		children: (r) => /* @__PURE__ */ a("div", {
 			...f,
 			ref: e,
 			"aria-hidden": "true",
 			"data-ui": "skeleton",
 			style: {
 				inlineSize: t,
-				blockSize: r,
+				blockSize: n,
 				borderRadius: i ? void 0 : o,
 				...l
 			},
-			className: n
+			className: r
 		})
 	});
 }

package/dist/skeleton.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Skeleton } from "./skeleton-XQQDkCHd.js";
+export { t as Skeleton } from "./skeleton-LJsQsveI.js";