@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-session-manager/index.es.js

@@ -0,0 +1,400 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertTriangle as n, ChevronDown as r, ChevronUp as i, Clock as a, Globe as o, Loader2 as s, LogOut as c, MapPin as l, Monitor as u, Shield as d, ShieldCheck as f, Smartphone as p, Tablet as m, X as h } from "lucide-react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/waka-session-manager/index.tsx
+var y = {
+	desktop: u,
+	mobile: p,
+	tablet: m,
+	unknown: o
+}, b = {
+	desktop: "Desktop",
+	mobile: "Mobile",
+	tablet: "Tablet",
+	unknown: "Unknown Device"
+};
+function x(e) {
+	let t = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), n = Math.floor(t / 1e3), r = Math.floor(n / 60), i = Math.floor(r / 60), a = Math.floor(i / 24);
+	return n < 60 ? "Just now" : r < 60 ? `${r} minute${r === 1 ? "" : "s"} ago` : i < 24 ? `${i} hour${i === 1 ? "" : "s"} ago` : a < 7 ? `${a} day${a === 1 ? "" : "s"} ago` : e.toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric",
+		year: a > 365 ? "numeric" : void 0
+	});
+}
+function S(e) {
+	return e.toLocaleString(void 0, {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function C(e) {
+	if (!e) return null;
+	let t = [
+		e.city,
+		e.region,
+		e.country
+	].filter(Boolean);
+	return t.length > 0 ? t.join(", ") : null;
+}
+function w(e) {
+	let t = [];
+	return e.browser && t.push(e.browserVersion ? `${e.browser} ${e.browserVersion}` : e.browser), e.os && t.push(e.osVersion ? `${e.os} ${e.osVersion}` : e.os), t.length > 0 ? t.join(" on ") : b[e.type];
+}
+function T({ isOpen: t, onClose: r, onConfirm: i, title: a, description: o, isLoading: c = !1, variant: l = "danger" }) {
+	return t ? /* @__PURE__ */ v("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		children: [/* @__PURE__ */ _("div", {
+			className: "absolute inset-0 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200",
+			onClick: r
+		}), /* @__PURE__ */ v("div", {
+			className: "relative z-10 w-full max-w-md mx-4 bg-background rounded-lg shadow-xl border animate-in zoom-in-95 fade-in duration-200",
+			children: [/* @__PURE__ */ v("div", {
+				className: "p-6",
+				children: [
+					/* @__PURE__ */ _("div", {
+						className: e("mx-auto mb-4 h-12 w-12 rounded-full flex items-center justify-center", l === "danger" ? "bg-destructive/10" : "bg-yellow-500/10"),
+						children: /* @__PURE__ */ _(n, { className: e("h-6 w-6", l === "danger" ? "text-destructive" : "text-yellow-500") })
+					}),
+					/* @__PURE__ */ _("h3", {
+						className: "text-lg font-semibold text-center mb-2",
+						children: a
+					}),
+					/* @__PURE__ */ _("p", {
+						className: "text-sm text-muted-foreground text-center mb-6",
+						children: o
+					}),
+					/* @__PURE__ */ v("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ _("button", {
+							type: "button",
+							onClick: r,
+							disabled: c,
+							className: e("flex-1 px-4 py-2 rounded-md border font-medium text-sm", "bg-background hover:bg-muted transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed"),
+							children: "Cancel"
+						}), /* @__PURE__ */ _("button", {
+							type: "button",
+							onClick: i,
+							disabled: c,
+							className: e("flex-1 px-4 py-2 rounded-md font-medium text-sm", "transition-colors flex items-center justify-center gap-2", "disabled:opacity-50 disabled:cursor-not-allowed", l === "danger" ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-yellow-500 text-white hover:bg-yellow-600"),
+							children: c ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(s, { className: "h-4 w-4 animate-spin" }), /* @__PURE__ */ _("span", { children: "Revoking..." })] }) : "Confirm"
+						})]
+					})
+				]
+			}), /* @__PURE__ */ _("button", {
+				type: "button",
+				onClick: r,
+				className: "absolute top-4 right-4 p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+				children: /* @__PURE__ */ _(h, { className: "h-4 w-4" })
+			})]
+		})]
+	}) : null;
+}
+function E({ session: t, showIpAddress: n, timeFormat: p, onRevoke: m, isRevoking: h, expanded: g, onToggleExpand: T }) {
+	let E = y[t.device.type], D = C(t.location), O = w(t.device), k = p === "relative" ? x(t.lastActive) : S(t.lastActive);
+	return /* @__PURE__ */ _("div", {
+		className: e("group relative rounded-lg border p-4 transition-all duration-200", t.isCurrent ? "bg-primary/5 border-primary/30 ring-1 ring-primary/20" : "bg-card hover:bg-accent/50 hover:border-accent", h && "opacity-50 pointer-events-none"),
+		children: /* @__PURE__ */ v("div", {
+			className: "flex items-start gap-4",
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: e("flex-shrink-0 h-10 w-10 rounded-lg flex items-center justify-center", t.isCurrent ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"),
+					children: /* @__PURE__ */ _(E, { className: "h-5 w-5" })
+				}),
+				/* @__PURE__ */ v("div", {
+					className: "flex-1 min-w-0",
+					children: [
+						/* @__PURE__ */ v("div", {
+							className: "flex items-center gap-2 mb-1",
+							children: [
+								/* @__PURE__ */ _("span", {
+									className: "font-medium text-sm truncate",
+									children: t.device.name || b[t.device.type]
+								}),
+								t.status && /* @__PURE__ */ _("span", {
+									className: e("h-2 w-2 rounded-full flex-shrink-0", {
+										active: "bg-green-500",
+										idle: "bg-yellow-500",
+										expired: "bg-red-500"
+									}[t.status]),
+									title: `Status: ${t.status}`
+								}),
+								t.isCurrent && /* @__PURE__ */ v("span", {
+									className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary",
+									children: [/* @__PURE__ */ _(f, { className: "h-3 w-3" }), "Current"]
+								})
+							]
+						}),
+						/* @__PURE__ */ _("p", {
+							className: "text-sm text-muted-foreground truncate mb-2",
+							children: O
+						}),
+						/* @__PURE__ */ v("div", {
+							className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground",
+							children: [/* @__PURE__ */ v("span", {
+								className: "inline-flex items-center gap-1",
+								children: [/* @__PURE__ */ _(a, { className: "h-3 w-3" }), k]
+							}), D && /* @__PURE__ */ v("span", {
+								className: "inline-flex items-center gap-1",
+								children: [/* @__PURE__ */ _(l, { className: "h-3 w-3" }), D]
+							})]
+						}),
+						g && /* @__PURE__ */ v("div", {
+							className: "mt-3 pt-3 border-t border-dashed space-y-2 text-xs animate-in slide-in-from-top-2 duration-200",
+							children: [
+								n && t.ipAddress && /* @__PURE__ */ v("div", {
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ _(o, { className: "h-3 w-3 text-muted-foreground" }),
+										/* @__PURE__ */ _("span", {
+											className: "text-muted-foreground",
+											children: "IP Address:"
+										}),
+										/* @__PURE__ */ _("code", {
+											className: "px-1.5 py-0.5 bg-muted rounded font-mono",
+											children: t.ipAddress
+										})
+									]
+								}),
+								t.createdAt && /* @__PURE__ */ v("div", {
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ _(d, { className: "h-3 w-3 text-muted-foreground" }),
+										/* @__PURE__ */ _("span", {
+											className: "text-muted-foreground",
+											children: "Session started:"
+										}),
+										/* @__PURE__ */ _("span", { children: S(t.createdAt) })
+									]
+								}),
+								t.device.browser && /* @__PURE__ */ v("div", {
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ _(o, { className: "h-3 w-3 text-muted-foreground" }),
+										/* @__PURE__ */ _("span", {
+											className: "text-muted-foreground",
+											children: "Browser:"
+										}),
+										/* @__PURE__ */ v("span", { children: [t.device.browser, t.device.browserVersion && ` v${t.device.browserVersion}`] })
+									]
+								}),
+								t.device.os && /* @__PURE__ */ v("div", {
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ _(u, { className: "h-3 w-3 text-muted-foreground" }),
+										/* @__PURE__ */ _("span", {
+											className: "text-muted-foreground",
+											children: "OS:"
+										}),
+										/* @__PURE__ */ v("span", { children: [t.device.os, t.device.osVersion && ` ${t.device.osVersion}`] })
+									]
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ v("div", {
+					className: "flex items-center gap-2 flex-shrink-0",
+					children: [/* @__PURE__ */ _("button", {
+						type: "button",
+						onClick: T,
+						className: e("p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors", "opacity-0 group-hover:opacity-100 focus:opacity-100"),
+						title: g ? "Show less" : "Show more",
+						children: _(g ? i : r, { className: "h-4 w-4" })
+					}), !t.isCurrent && /* @__PURE__ */ _("button", {
+						type: "button",
+						onClick: () => m(t.id),
+						disabled: h,
+						className: e("p-2 rounded-md text-muted-foreground transition-colors", "hover:text-destructive hover:bg-destructive/10", "disabled:opacity-50 disabled:cursor-not-allowed"),
+						title: "Revoke session",
+						children: h ? /* @__PURE__ */ _(s, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ _(c, { className: "h-4 w-4" })
+					})]
+				})
+			]
+		})
+	});
+}
+function D({ sessions: n, showIpAddress: r = !1, onRevokeSession: i, onRevokeAllOtherSessions: a, renderConfirmDialog: o, timeFormat: s = "relative", defaultExpanded: l = !1, className: u, isLoading: f = !1, title: p = "Active Sessions", description: m }) {
+	let [h, g] = t.useState({ isOpen: !1 }), [y, b] = t.useState(null), [x, S] = t.useState(!1), [C, w] = t.useState(() => new Set(l ? n.map((e) => e.id) : [])), D = t.useMemo(() => [...n].sort((e, t) => e.isCurrent && !t.isCurrent ? -1 : !e.isCurrent && t.isCurrent ? 1 : t.lastActive.getTime() - e.lastActive.getTime()), [n]), O = n.filter((e) => !e.isCurrent).length, k = (e) => {
+		g({
+			isOpen: !0,
+			sessionId: e
+		});
+	}, A = () => {
+		g({
+			isOpen: !0,
+			isRevokeAll: !0
+		});
+	}, j = async () => {
+		if (h.isRevokeAll) {
+			S(!0);
+			try {
+				await a?.();
+			} finally {
+				S(!1), g({ isOpen: !1 });
+			}
+		} else if (h.sessionId) {
+			b(h.sessionId);
+			try {
+				await i?.(h.sessionId);
+			} finally {
+				b(null), g({ isOpen: !1 });
+			}
+		}
+	}, M = () => {
+		!y && !x && g({ isOpen: !1 });
+	}, N = (e) => {
+		w((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, P = {
+		isOpen: h.isOpen,
+		onClose: M,
+		onConfirm: j,
+		title: h.isRevokeAll ? "Revoke All Other Sessions" : "Revoke Session",
+		description: h.isRevokeAll ? `This will sign out all ${O} other session${O === 1 ? "" : "s"}. You will remain signed in on this device.` : "This will sign out the selected session. The device will need to sign in again to access the account.",
+		isLoading: y !== null || x,
+		variant: h.isRevokeAll ? "danger" : "warning"
+	};
+	return /* @__PURE__ */ v("div", {
+		className: e("space-y-4", u),
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ _(d, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ _("h3", {
+						className: "text-lg font-semibold",
+						children: p
+					})]
+				}), m && /* @__PURE__ */ _("p", {
+					className: "text-sm text-muted-foreground mt-1",
+					children: m
+				})] }), O > 0 && a && /* @__PURE__ */ v("button", {
+					type: "button",
+					onClick: A,
+					disabled: f || x,
+					className: e("inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium", "border border-destructive/30 text-destructive", "hover:bg-destructive/10 transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed"),
+					children: [
+						/* @__PURE__ */ _(c, { className: "h-4 w-4" }),
+						/* @__PURE__ */ _("span", {
+							className: "hidden sm:inline",
+							children: "Sign out all other sessions"
+						}),
+						/* @__PURE__ */ _("span", {
+							className: "sm:hidden",
+							children: "Sign out all"
+						})
+					]
+				})]
+			}),
+			f ? /* @__PURE__ */ _("div", {
+				className: "space-y-3",
+				children: [
+					1,
+					2,
+					3
+				].map((e) => /* @__PURE__ */ _("div", { className: "h-24 rounded-lg border bg-muted/50 animate-pulse" }, e))
+			}) : n.length === 0 ? /* @__PURE__ */ v("div", {
+				className: "text-center py-12 text-muted-foreground",
+				children: [/* @__PURE__ */ _(d, { className: "h-12 w-12 mx-auto mb-4 opacity-50" }), /* @__PURE__ */ _("p", { children: "No active sessions found" })]
+			}) : /* @__PURE__ */ _("div", {
+				className: "space-y-3",
+				children: D.map((e) => /* @__PURE__ */ _(E, {
+					session: e,
+					showIpAddress: r,
+					timeFormat: s,
+					onRevoke: k,
+					isRevoking: y === e.id,
+					expanded: C.has(e.id),
+					onToggleExpand: () => N(e.id)
+				}, e.id))
+			}),
+			!f && n.length > 0 && /* @__PURE__ */ v("p", {
+				className: "text-xs text-muted-foreground text-center",
+				children: [
+					n.length,
+					" active session",
+					n.length === 1 ? "" : "s",
+					O > 0 && ` (${O} on other devices)`
+				]
+			}),
+			o ? o(P) : /* @__PURE__ */ _(T, { ...P })
+		]
+	});
+}
+function O({ initialSessions: e = [], currentSessionId: n, fetchSessions: r, revokeSession: i, revokeAllOtherSessions: a, autoRefreshInterval: o } = {}) {
+	let [s, c] = t.useState(() => e.map((e) => ({
+		...e,
+		isCurrent: e.isCurrent ?? e.id === n
+	}))), [l, u] = t.useState(!1), [d, f] = t.useState(null), p = t.useCallback(async () => {
+		if (r) {
+			u(!0), f(null);
+			try {
+				c((await r()).map((e) => ({
+					...e,
+					isCurrent: e.isCurrent ?? e.id === n
+				})));
+			} catch (e) {
+				f(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to fetch sessions"));
+			} finally {
+				u(!1);
+			}
+		}
+	}, [r, n]), m = t.useCallback(async (e) => {
+		if (i) try {
+			await i(e), c((t) => t.filter((t) => t.id !== e));
+		} catch (e) {
+			throw f(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to revoke session")), e;
+		}
+	}, [i]), h = t.useCallback(async () => {
+		if (a) try {
+			await a(), c((e) => e.filter((e) => e.isCurrent));
+		} catch (e) {
+			throw f(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to revoke sessions")), e;
+		}
+	}, [a]);
+	t.useEffect(() => {
+		if (!o || !r) return;
+		let e = setInterval(p, o);
+		return () => clearInterval(e);
+	}, [
+		o,
+		p,
+		r
+	]), t.useEffect(() => {
+		r && e.length === 0 && p();
+	}, []);
+	let g = t.useMemo(() => s.find((e) => e.isCurrent), [s]), _ = t.useMemo(() => s.filter((e) => !e.isCurrent), [s]);
+	return {
+		sessions: s,
+		isLoading: l,
+		error: d,
+		refresh: p,
+		onRevokeSession: m,
+		onRevokeAllOtherSessions: h,
+		currentSession: g,
+		otherSessions: _,
+		sessionsByDevice: t.useMemo(() => {
+			let e = {
+				desktop: [],
+				mobile: [],
+				tablet: [],
+				unknown: []
+			};
+			return s.forEach((t) => {
+				e[t.device.type].push(t);
+			}), e;
+		}, [s]),
+		totalSessions: s.length,
+		otherSessionsCount: _.length
+	};
+}
+//#endregion
+export { T as DefaultConfirmDialog, E as SessionCard, D as default, O as useSessionManager };

package/dist/components/waka-signature-pad/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);function a(e={}){let{penColor:t=`#000000`,penSize:r=2,onChange:i}=e,a=n.useRef(null),[o,s]=n.useState([]),[c,l]=n.useState(null),[u,d]=n.useState(!1),[f,p]=n.useState(t),[m,h]=n.useState(r),g=o.length===0&&!c;n.useEffect(()=>{i?.(g)},[g,i]);let _=n.useCallback((e,t)=>{if(t.points.length<2)return;e.beginPath(),e.strokeStyle=t.color,e.lineWidth=t.size,e.lineCap=`round`,e.lineJoin=`round`;let n=t.points;e.moveTo(n[0].x,n[0].y);for(let t=1;t<n.length-1;t++){let r=(n[t].x+n[t+1].x)/2,i=(n[t].y+n[t+1].y)/2;e.quadraticCurveTo(n[t].x,n[t].y,r,i)}if(n.length>1){let t=n[n.length-1];e.lineTo(t.x,t.y)}e.stroke()},[]);n.useCallback(e=>{let t=a.current;if(!t)return;let n=t.getContext(`2d`);n&&(n.clearRect(0,0,t.width,t.height),e&&(n.fillStyle=e,n.fillRect(0,0,t.width,t.height)),o.forEach(e=>_(n,e)),c&&_(n,c))},[o,c,_]);let v=n.useCallback(e=>{d(!0),l({points:[e],color:f,size:m})},[f,m]),y=n.useCallback(e=>{!u||!c||l(t=>t?{...t,points:[...t.points,e]}:null)},[u,c]),b=n.useCallback(()=>{c&&c.points.length>1&&s(e=>[...e,c]),l(null),d(!1)},[c]);return{canvasRef:a,strokes:o,currentStroke:c,isDrawing:u,isEmpty:g,penColor:f,penSize:m,setPenColor:p,setPenSize:h,clear:n.useCallback(()=>{s([]),l(null),d(!1)},[]),undo:n.useCallback(()=>{s(e=>e.slice(0,-1))},[]),toDataURL:n.useCallback((e=`png`,t)=>{let n=a.current;if(!n)return``;if(t){let r=document.createElement(`canvas`);r.width=n.width,r.height=n.height;let i=r.getContext(`2d`);return i?(i.fillStyle=t,i.fillRect(0,0,r.width,r.height),i.drawImage(n,0,0),r.toDataURL(`image/${e}`)):``}return n.toDataURL(`image/${e}`)},[]),toSVG:n.useCallback(e=>{let t=a.current;if(!t)return``;let n=`<svg xmlns="http://www.w3.org/2000/svg" width="${t.width}" height="${t.height}" aria-hidden="true" focusable="false">`;return e&&(n+=`<rect width="100%" height="100%" fill="${e}"/>`),o.forEach(e=>{if(e.points.length<2)return;let t=`M ${e.points[0].x} ${e.points[0].y}`;for(let n=1;n<e.points.length-1;n++){let r=(e.points[n].x+e.points[n+1].x)/2,i=(e.points[n].y+e.points[n+1].y)/2;t+=` Q ${e.points[n].x} ${e.points[n].y} ${r} ${i}`}if(e.points.length>1){let n=e.points[e.points.length-1];t+=` L ${n.x} ${n.y}`}n+=`<path d="${t}" stroke="${e.color}" stroke-width="${e.size}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`}),n+=`</svg>`,`data:image/svg+xml;base64,${btoa(n)}`},[o]),fromDataURL:n.useCallback(e=>{let t=a.current;if(!t)return;let n=t.getContext(`2d`);if(!n)return;let r=new Image;r.onload=()=>{n.clearRect(0,0,t.width,t.height),n.drawImage(r,0,0),s([{points:[{x:0,y:0},{x:1,y:1}],color:`#000`,size:1}])},r.src=e},[]),fromStrokes:n.useCallback(e=>{s(e)},[]),startDrawing:v,draw:y,stopDrawing:b}}var o=[`#000000`,`#1e40af`,`#dc2626`,`#16a34a`,`#9333ea`],s=[1,2,3,5,8],c=n.forwardRef(({width:e=400,height:c=200,aspectRatio:l,penColor:u=`#000000`,penSize:d=2,backgroundColor:f=`transparent`,showGuideLine:p=!0,guideLineColor:m=`#d1d5db`,placeholder:h=`Sign here`,placeholderColor:g=`#9ca3af`,readOnly:_=!1,initialValue:v,onChange:y,onSave:b,showToolbar:x=!0,penColors:S=o,penSizes:C=s,className:w,canvasClassName:T,toolbarClassName:E,disabled:D=!1},ee)=>{let O=n.useRef(null),[k,A]=n.useState({width:e,height:c}),j=a({penColor:u,penSize:d,onChange:y}),{canvasRef:M,strokes:N,currentStroke:P,isEmpty:F,penColor:I,penSize:L,setPenColor:R,setPenSize:z,clear:B,undo:te,toDataURL:V,toSVG:H,fromDataURL:U,fromStrokes:W,startDrawing:G,draw:K,stopDrawing:q}=j;n.useImperativeHandle(ee,()=>j,[j]),n.useEffect(()=>{if(l&&O.current){let t=O.current.clientWidth||e;A({width:t,height:t/l})}else A({width:e,height:c})},[l,e,c]),n.useEffect(()=>{v&&(typeof v==`string`?U(v):W(v))},[v,U,W]),n.useEffect(()=>{let e=M.current;if(!e)return;let t=e.getContext(`2d`);if(t&&(t.clearRect(0,0,e.width,e.height),f!==`transparent`&&(t.fillStyle=f,t.fillRect(0,0,e.width,e.height)),N.forEach(e=>{if(e.points.length<2)return;t.beginPath(),t.strokeStyle=e.color,t.lineWidth=e.size,t.lineCap=`round`,t.lineJoin=`round`;let n=e.points;t.moveTo(n[0].x,n[0].y);for(let e=1;e<n.length-1;e++){let r=(n[e].x+n[e+1].x)/2,i=(n[e].y+n[e+1].y)/2;t.quadraticCurveTo(n[e].x,n[e].y,r,i)}if(n.length>1){let e=n[n.length-1];t.lineTo(e.x,e.y)}t.stroke()}),P&&P.points.length>=2)){t.beginPath(),t.strokeStyle=P.color,t.lineWidth=P.size,t.lineCap=`round`,t.lineJoin=`round`;let e=P.points;t.moveTo(e[0].x,e[0].y);for(let n=1;n<e.length-1;n++){let r=(e[n].x+e[n+1].x)/2,i=(e[n].y+e[n+1].y)/2;t.quadraticCurveTo(e[n].x,e[n].y,r,i)}if(e.length>1){let n=e[e.length-1];t.lineTo(n.x,n.y)}t.stroke()}},[N,P,f,M]);let J=n.useCallback(e=>{let t=M.current;if(!t)return null;let n=t.getBoundingClientRect(),r=t.width/n.width,i=t.height/n.height;if(`touches`in e){let t=e.touches[0];if(!t)return null;let a=t;return{x:(t.clientX-n.left)*r,y:(t.clientY-n.top)*i,pressure:a.force??.5}}return{x:(e.clientX-n.left)*r,y:(e.clientY-n.top)*i,pressure:.5}},[M]),Y=n.useCallback(e=>{if(_||D)return;e.preventDefault();let t=J(e);t&&G(t)},[_,D,J,G]),X=n.useCallback(e=>{if(_||D)return;e.preventDefault();let t=J(e);t&&K(t)},[_,D,J,K]),Z=n.useCallback(()=>{_||D||q()},[_,D,q]),Q=n.useCallback(e=>{let t=e===`svg`?H(f):V(e,f===`transparent`?void 0:f);b?.(t,e)},[V,H,f,b]),$=_||D;return(0,i.jsxs)(`div`,{ref:O,className:t.cn(`flex flex-col gap-2`,w),children:[(0,i.jsxs)(`div`,{className:t.cn(`relative rounded-lg border bg-background overflow-hidden`,$&&`opacity-50 cursor-not-allowed`,T),style:{width:k.width,height:k.height},children:[p&&(0,i.jsx)(`div`,{className:`absolute left-4 right-4 pointer-events-none`,style:{bottom:`20%`,borderBottom:`1px dashed ${m}`}}),F&&h&&(0,i.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center pointer-events-none`,style:{color:g},children:(0,i.jsx)(`span`,{className:`text-sm`,children:h})}),(0,i.jsx)(`canvas`,{ref:M,width:k.width,height:k.height,className:t.cn(`touch-none`,!$&&`cursor-crosshair`),style:{width:k.width,height:k.height},onMouseDown:Y,onMouseMove:X,onMouseUp:Z,onMouseLeave:Z,onTouchStart:Y,onTouchMove:X,onTouchEnd:Z})]}),x&&!_&&(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-between gap-2 flex-wrap`,E),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(r.Pen,{className:`h-4 w-4 text-muted-foreground`}),S.map(e=>(0,i.jsx)(`button`,{type:`button`,disabled:D,className:t.cn(`w-6 h-6 rounded-full border-2 transition-transform hover:scale-110`,I===e?`border-primary ring-2 ring-primary/30`:`border-transparent`),style:{backgroundColor:e},onClick:()=>R(e),title:`Color: ${e}`},e))]}),(0,i.jsx)(`div`,{className:`flex items-center gap-1 ml-2`,children:C.map(e=>(0,i.jsx)(`button`,{type:`button`,disabled:D,className:t.cn(`w-7 h-7 rounded flex items-center justify-center border transition-colors`,L===e?`border-primary bg-primary/10`:`border-border hover:bg-muted`),onClick:()=>z(e),title:`Size: ${e}px`,children:(0,i.jsx)(`div`,{className:`rounded-full bg-current`,style:{width:Math.min(e*2,16),height:Math.min(e*2,16)}})},e))})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`button`,{type:`button`,disabled:D||N.length===0,className:t.cn(`p-2 rounded hover:bg-muted transition-colors`,`disabled:opacity-50 disabled:cursor-not-allowed`),onClick:te,title:`Undo last stroke`,children:(0,i.jsx)(r.Undo,{className:`h-4 w-4`})}),(0,i.jsx)(`button`,{type:`button`,disabled:D||F,className:t.cn(`p-2 rounded hover:bg-muted transition-colors text-destructive`,`disabled:opacity-50 disabled:cursor-not-allowed`),onClick:B,title:`Clear signature`,children:(0,i.jsx)(r.Trash2,{className:`h-4 w-4`})}),(0,i.jsx)(`div`,{className:`w-px h-6 bg-border mx-1`}),(0,i.jsx)(`button`,{type:`button`,disabled:D||F,className:t.cn(`p-2 rounded hover:bg-muted transition-colors`,`disabled:opacity-50 disabled:cursor-not-allowed`),onClick:()=>Q(`png`),title:`Save as PNG`,children:(0,i.jsx)(r.Download,{className:`h-4 w-4`})}),b&&(0,i.jsx)(`button`,{type:`button`,disabled:D||F,className:t.cn(`p-2 rounded hover:bg-muted transition-colors text-primary`,`disabled:opacity-50 disabled:cursor-not-allowed`),onClick:()=>Q(`png`),title:`Confirm signature`,children:(0,i.jsx)(r.Check,{className:`h-4 w-4`})})]})]})]})});c.displayName=`WakaSignaturePad`,exports.default=c,exports.useSignaturePad=a;