@jfrader/ui 0.3.0 → 0.5.0

package/dist/signature-pad-q2SAsrdD.js

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

package/dist/signature-pad.js

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

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

@@ -1,6 +1,6 @@
 'use client';
 import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
-import { n as r } from "./media-D_eA_I-e.js";
+import { r } from "./media-8yrN85VT.js";
 import { vars as i } from "@jfrader/tokens/vars";
 import { jsx as a } from "@emotion/react/jsx-runtime";
 //#region src/components/skeleton/skeleton.tsx

package/dist/skeleton.js

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