@wakastellar/ui 4.0.0 → 4.1.1

package/dist/blocks/auth-2fa/index.es.js

@@ -0,0 +1,466 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../../components/badge/index.es.js";
+import { Button as n } from "../../components/button/index.es.js";
+import { Card as r, CardContent as i, CardDescription as a, CardFooter as o, CardHeader as s, CardTitle as c } from "../../components/card/index.es.js";
+import { Label as l } from "../../components/label/index.es.js";
+import { Input as u } from "../../components/input/index.es.js";
+import { RadioGroup as d, RadioGroupItem as f } from "../../components/radio-group/index.es.js";
+import { Separator as p } from "../../components/separator/index.es.js";
+import * as m from "react";
+import { AlertTriangle as h, Check as g, ChevronRight as _, Copy as v, Download as y, Eye as b, EyeOff as x, Fingerprint as S, Key as C, Lock as w, Mail as T, MessageSquare as E, RefreshCw as D, Shield as O, ShieldAlert as k, ShieldCheck as A, Smartphone as j } from "lucide-react";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+//#region src/blocks/auth-2fa/index.tsx
+var F = {
+	authenticator: {
+		icon: /* @__PURE__ */ N(j, { className: "h-5 w-5" }),
+		title: "Authenticator App",
+		description: "Use an app like Google Authenticator or Authy",
+		recommended: !0
+	},
+	sms: {
+		icon: /* @__PURE__ */ N(E, { className: "h-5 w-5" }),
+		title: "SMS",
+		description: "Receive codes via text message",
+		recommended: !1
+	},
+	email: {
+		icon: /* @__PURE__ */ N(T, { className: "h-5 w-5" }),
+		title: "Email",
+		description: "Receive codes via email",
+		recommended: !1
+	},
+	hardware: {
+		icon: /* @__PURE__ */ N(C, { className: "h-5 w-5" }),
+		title: "Hardware Key",
+		description: "Use a physical security key (YubiKey, etc.)",
+		recommended: !0
+	}
+};
+function I({ methods: n, selected: r, onSelect: i }) {
+	return /* @__PURE__ */ N(d, {
+		value: r,
+		onValueChange: (e) => i(e),
+		children: /* @__PURE__ */ N("div", {
+			className: "space-y-3",
+			children: n.map((n) => {
+				let i = F[n];
+				return /* @__PURE__ */ P(l, {
+					className: e("flex items-center gap-4 p-4 rounded-lg border cursor-pointer transition-colors", r === n ? "border-primary bg-primary/5" : "hover:bg-muted/50"),
+					children: [
+						/* @__PURE__ */ N(f, { value: n }),
+						/* @__PURE__ */ N("div", {
+							className: "h-10 w-10 rounded-lg bg-muted flex items-center justify-center",
+							children: i.icon
+						}),
+						/* @__PURE__ */ P("div", {
+							className: "flex-1",
+							children: [/* @__PURE__ */ P("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ N("span", {
+									className: "font-medium",
+									children: i.title
+								}), i.recommended && /* @__PURE__ */ N(t, {
+									variant: "secondary",
+									className: "text-xs",
+									children: "Recommended"
+								})]
+							}), /* @__PURE__ */ N("p", {
+								className: "text-sm text-muted-foreground",
+								children: i.description
+							})]
+						})
+					]
+				}, n);
+			})
+		})
+	});
+}
+function L({ length: e = 6, value: t, onChange: n }) {
+	let r = m.useRef([]), i = t.padEnd(e, "").split("").slice(0, e), a = (t, a) => {
+		if (!/^\d*$/.test(a)) return;
+		let o = [...i];
+		o[t] = a.slice(-1), n(o.join("")), a && t < e - 1 && r.current[t + 1]?.focus();
+	}, o = (e, t) => {
+		t.key === "Backspace" && !i[e] && e > 0 && r.current[e - 1]?.focus();
+	}, s = (t) => {
+		t.preventDefault(), n(t.clipboardData.getData("text").replace(/\D/g, "").slice(0, e));
+	};
+	return /* @__PURE__ */ N("div", {
+		className: "flex gap-2 justify-center",
+		children: i.map((e, t) => /* @__PURE__ */ N(u, {
+			ref: (e) => {
+				r.current[t] = e;
+			},
+			type: "text",
+			inputMode: "numeric",
+			maxLength: 1,
+			value: e,
+			onChange: (e) => a(t, e.target.value),
+			onKeyDown: (e) => o(t, e),
+			onPaste: s,
+			className: "w-12 h-14 text-center text-2xl font-mono"
+		}, t))
+	});
+}
+function R({ codes: t, onRegenerate: l, onDownload: u }) {
+	let [d, f] = m.useState(!1), [p, _] = m.useState(!1), S = () => {
+		let e = t.map((e) => e.code).join("\n");
+		navigator.clipboard.writeText(e), f(!0), setTimeout(() => f(!1), 2e3);
+	}, w = t.filter((e) => !e.used);
+	return /* @__PURE__ */ P(r, { children: [
+		/* @__PURE__ */ N(s, { children: /* @__PURE__ */ P("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P(c, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ N(C, { className: "h-5 w-5" }), "Backup Codes"]
+			}), /* @__PURE__ */ P(a, { children: [
+				w.length,
+				" of ",
+				t.length,
+				" codes remaining"
+			] })] }), /* @__PURE__ */ N(n, {
+				variant: "ghost",
+				size: "icon",
+				onClick: () => _(!p),
+				children: N(p ? x : b, { className: "h-4 w-4" })
+			})]
+		}) }),
+		/* @__PURE__ */ P(i, { children: [/* @__PURE__ */ N("div", {
+			className: "grid grid-cols-2 gap-2",
+			children: t.map((t, n) => /* @__PURE__ */ N("div", {
+				className: e("font-mono text-sm p-2 rounded border text-center", t.used ? "bg-muted text-muted-foreground line-through" : "bg-card"),
+				children: p ? t.code : "••••••••"
+			}, n))
+		}), w.length < 3 && /* @__PURE__ */ P("div", {
+			className: "mt-4 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20 flex items-center gap-3",
+			children: [/* @__PURE__ */ N(h, { className: "h-5 w-5 text-yellow-500" }), /* @__PURE__ */ N("p", {
+				className: "text-sm",
+				children: "You're running low on backup codes. Consider regenerating them."
+			})]
+		})] }),
+		/* @__PURE__ */ P(o, {
+			className: "flex gap-2",
+			children: [
+				/* @__PURE__ */ P(n, {
+					variant: "outline",
+					size: "sm",
+					onClick: S,
+					children: [N(d ? g : v, { className: "h-4 w-4 mr-2" }), d ? "Copied" : "Copy All"]
+				}),
+				u && /* @__PURE__ */ P(n, {
+					variant: "outline",
+					size: "sm",
+					onClick: u,
+					children: [/* @__PURE__ */ N(y, { className: "h-4 w-4 mr-2" }), "Download"]
+				}),
+				l && /* @__PURE__ */ P(n, {
+					variant: "outline",
+					size: "sm",
+					onClick: l,
+					children: [/* @__PURE__ */ N(D, { className: "h-4 w-4 mr-2" }), "Regenerate"]
+				})
+			]
+		})
+	] });
+}
+function z({ status: d = { enabled: !1 }, availableMethods: f = [
+	"authenticator",
+	"sms",
+	"email"
+], qrCodeUrl: y, secretKey: b, backupCodes: x, onEnable: C, onDisable: j, onRegenerateBackupCodes: z, onSendCode: B, className: V }) {
+	let [H, U] = m.useState("overview"), [W, G] = m.useState(f[0]), [K, q] = m.useState(""), [J, Y] = m.useState(!1), [X, Z] = m.useState(null), [ee, Q] = m.useState(!1), [$, te] = m.useState(!1);
+	return /* @__PURE__ */ P("div", {
+		className: e("space-y-6 max-w-2xl", V),
+		children: [
+			/* @__PURE__ */ P(r, { children: [/* @__PURE__ */ N(s, { children: /* @__PURE__ */ P("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ P("div", {
+					className: "flex items-center gap-3",
+					children: [d.enabled ? /* @__PURE__ */ N("div", {
+						className: "h-12 w-12 rounded-full bg-green-500/10 flex items-center justify-center",
+						children: /* @__PURE__ */ N(A, { className: "h-6 w-6 text-green-500" })
+					}) : /* @__PURE__ */ N("div", {
+						className: "h-12 w-12 rounded-full bg-yellow-500/10 flex items-center justify-center",
+						children: /* @__PURE__ */ N(k, { className: "h-6 w-6 text-yellow-500" })
+					}), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N(c, { children: "Two-Factor Authentication" }), /* @__PURE__ */ N(a, { children: d.enabled ? `Enabled via ${F[d.method]?.title}` : "Add an extra layer of security to your account" })] })]
+				}), /* @__PURE__ */ N(t, {
+					variant: d.enabled ? "default" : "secondary",
+					children: d.enabled ? "Enabled" : "Disabled"
+				})]
+			}) }), H === "overview" && /* @__PURE__ */ N(o, { children: d.enabled ? /* @__PURE__ */ P("div", {
+				className: "flex gap-2 w-full",
+				children: [/* @__PURE__ */ N(n, {
+					variant: "outline",
+					className: "flex-1",
+					onClick: () => U("setup"),
+					children: "Change Method"
+				}), /* @__PURE__ */ N(n, {
+					variant: "destructive",
+					className: "flex-1",
+					onClick: () => U("disable"),
+					children: "Disable 2FA"
+				})]
+			}) : /* @__PURE__ */ P(n, {
+				className: "w-full",
+				onClick: () => U("setup"),
+				children: [/* @__PURE__ */ N(O, { className: "h-4 w-4 mr-2" }), "Enable Two-Factor Authentication"]
+			}) })] }),
+			H === "setup" && /* @__PURE__ */ P(r, { children: [
+				/* @__PURE__ */ P(s, { children: [/* @__PURE__ */ N(c, { children: "Choose Authentication Method" }), /* @__PURE__ */ N(a, { children: "Select how you want to receive verification codes" })] }),
+				/* @__PURE__ */ N(i, { children: /* @__PURE__ */ N(I, {
+					methods: f,
+					selected: W,
+					onSelect: G
+				}) }),
+				/* @__PURE__ */ P(o, {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ N(n, {
+						variant: "outline",
+						onClick: () => U("overview"),
+						children: "Cancel"
+					}), /* @__PURE__ */ P(n, {
+						className: "flex-1",
+						onClick: () => U("verify"),
+						children: ["Continue", /* @__PURE__ */ N(_, { className: "h-4 w-4 ml-2" })]
+					})]
+				})
+			] }),
+			H === "verify" && /* @__PURE__ */ P(r, { children: [
+				/* @__PURE__ */ P(s, { children: [/* @__PURE__ */ N(c, { children: W === "authenticator" ? "Set Up Authenticator" : "Verify Your Identity" }), /* @__PURE__ */ N(a, { children: W === "authenticator" ? "Scan the QR code with your authenticator app" : `Enter the code sent to your ${W}` })] }),
+				/* @__PURE__ */ P(i, {
+					className: "space-y-6",
+					children: [
+						W === "authenticator" && /* @__PURE__ */ P(M, { children: [
+							y && /* @__PURE__ */ N("div", {
+								className: "flex justify-center",
+								children: /* @__PURE__ */ N("div", {
+									className: "p-4 bg-white rounded-lg",
+									children: /* @__PURE__ */ N("img", {
+										src: y,
+										alt: "QR Code",
+										className: "h-48 w-48"
+									})
+								})
+							}),
+							b && /* @__PURE__ */ P("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ N(l, { children: "Or enter this code manually:" }), /* @__PURE__ */ P("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ N(u, {
+										value: b,
+										readOnly: !0,
+										className: "font-mono"
+									}), /* @__PURE__ */ N(n, {
+										variant: "outline",
+										size: "icon",
+										onClick: () => {
+											b && (navigator.clipboard.writeText(b), Q(!0), setTimeout(() => Q(!1), 2e3));
+										},
+										children: N(ee ? g : v, { className: "h-4 w-4" })
+									})]
+								})]
+							}),
+							/* @__PURE__ */ N(p, {})
+						] }),
+						(W === "sms" || W === "email") && !$ && /* @__PURE__ */ P("div", {
+							className: "text-center",
+							children: [/* @__PURE__ */ P("p", {
+								className: "text-sm text-muted-foreground mb-4",
+								children: ["We'll send a verification code to your ", W === "sms" ? "phone" : "email"]
+							}), /* @__PURE__ */ P(n, {
+								onClick: async () => {
+									if (B) {
+										Y(!0);
+										try {
+											await B(W), te(!0);
+										} finally {
+											Y(!1);
+										}
+									}
+								},
+								disabled: J,
+								children: [J ? /* @__PURE__ */ N(D, { className: "h-4 w-4 mr-2 animate-spin" }) : N(W === "sms" ? E : T, { className: "h-4 w-4 mr-2" }), "Send Code"]
+							})]
+						}),
+						(W === "authenticator" || $) && /* @__PURE__ */ P("div", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ N(l, {
+									className: "text-center block",
+									children: "Enter the 6-digit code"
+								}),
+								/* @__PURE__ */ N(L, {
+									value: K,
+									onChange: q
+								}),
+								X && /* @__PURE__ */ N("p", {
+									className: "text-sm text-destructive text-center",
+									children: X
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ P(o, {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ N(n, {
+						variant: "outline",
+						onClick: () => U("setup"),
+						children: "Back"
+					}), /* @__PURE__ */ P(n, {
+						className: "flex-1",
+						onClick: async () => {
+							if (C) {
+								Y(!0), Z(null);
+								try {
+									await C(W, K) ? (U("overview"), q("")) : Z("Invalid verification code. Please try again.");
+								} finally {
+									Y(!1);
+								}
+							}
+						},
+						disabled: K.length !== 6 || J,
+						children: [J ? /* @__PURE__ */ N(D, { className: "h-4 w-4 mr-2 animate-spin" }) : /* @__PURE__ */ N(w, { className: "h-4 w-4 mr-2" }), "Verify & Enable"]
+					})]
+				})
+			] }),
+			H === "disable" && /* @__PURE__ */ P(r, { children: [
+				/* @__PURE__ */ P(s, { children: [/* @__PURE__ */ N(c, {
+					className: "text-destructive",
+					children: "Disable Two-Factor Authentication"
+				}), /* @__PURE__ */ N(a, { children: "Enter your verification code to confirm. This will make your account less secure." })] }),
+				/* @__PURE__ */ P(i, {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ N("div", {
+						className: "p-4 rounded-lg bg-destructive/10 border border-destructive/20",
+						children: /* @__PURE__ */ P("div", {
+							className: "flex items-start gap-3",
+							children: [/* @__PURE__ */ N(h, { className: "h-5 w-5 text-destructive mt-0.5" }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("p", {
+								className: "font-medium text-destructive",
+								children: "Warning"
+							}), /* @__PURE__ */ N("p", {
+								className: "text-sm text-muted-foreground",
+								children: "Disabling 2FA will remove an important layer of security from your account. Anyone with your password will be able to access your account."
+							})] })]
+						})
+					}), /* @__PURE__ */ P("div", {
+						className: "space-y-2",
+						children: [
+							/* @__PURE__ */ N(l, { children: "Enter your verification code" }),
+							/* @__PURE__ */ N(L, {
+								value: K,
+								onChange: q
+							}),
+							X && /* @__PURE__ */ N("p", {
+								className: "text-sm text-destructive text-center",
+								children: X
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ P(o, {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ N(n, {
+						variant: "outline",
+						onClick: () => U("overview"),
+						children: "Cancel"
+					}), /* @__PURE__ */ P(n, {
+						variant: "destructive",
+						className: "flex-1",
+						onClick: async () => {
+							if (j) {
+								Y(!0), Z(null);
+								try {
+									await j(K) ? (U("overview"), q("")) : Z("Invalid verification code. Please try again.");
+								} finally {
+									Y(!1);
+								}
+							}
+						},
+						disabled: K.length !== 6 || J,
+						children: [J ? /* @__PURE__ */ N(D, { className: "h-4 w-4 mr-2 animate-spin" }) : /* @__PURE__ */ N(k, { className: "h-4 w-4 mr-2" }), "Disable 2FA"]
+					})]
+				})
+			] }),
+			d.enabled && x && x.length > 0 && H === "overview" && /* @__PURE__ */ N(R, {
+				codes: x,
+				onRegenerate: z,
+				onDownload: () => {
+					let e = x.map((e) => e.code).join("\n"), t = new Blob([e], { type: "text/plain" }), n = URL.createObjectURL(t), r = document.createElement("a");
+					r.href = n, r.download = "backup-codes.txt", r.click();
+				}
+			}),
+			/* @__PURE__ */ P(r, { children: [/* @__PURE__ */ N(s, { children: /* @__PURE__ */ P(c, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ N(S, { className: "h-5 w-5" }), "Security Tips"]
+			}) }), /* @__PURE__ */ P(i, {
+				className: "space-y-3",
+				children: [
+					/* @__PURE__ */ P("div", {
+						className: "flex items-start gap-3",
+						children: [/* @__PURE__ */ N(g, { className: "h-4 w-4 text-green-500 mt-1" }), /* @__PURE__ */ N("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Use an authenticator app for the most secure experience"
+						})]
+					}),
+					/* @__PURE__ */ P("div", {
+						className: "flex items-start gap-3",
+						children: [/* @__PURE__ */ N(g, { className: "h-4 w-4 text-green-500 mt-1" }), /* @__PURE__ */ N("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Store your backup codes in a safe place (password manager, safe deposit box)"
+						})]
+					}),
+					/* @__PURE__ */ P("div", {
+						className: "flex items-start gap-3",
+						children: [/* @__PURE__ */ N(g, { className: "h-4 w-4 text-green-500 mt-1" }), /* @__PURE__ */ N("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Never share your verification codes with anyone"
+						})]
+					})
+				]
+			})] })
+		]
+	});
+}
+var B = [
+	{
+		code: "ABCD-1234",
+		used: !1
+	},
+	{
+		code: "EFGH-5678",
+		used: !1
+	},
+	{
+		code: "IJKL-9012",
+		used: !0
+	},
+	{
+		code: "MNOP-3456",
+		used: !1
+	},
+	{
+		code: "QRST-7890",
+		used: !1
+	},
+	{
+		code: "UVWX-1234",
+		used: !0
+	},
+	{
+		code: "YZAB-5678",
+		used: !1
+	},
+	{
+		code: "CDEF-9012",
+		used: !1
+	}
+], V = {
+	enabled: !0,
+	method: "authenticator",
+	lastVerified: /* @__PURE__ */ new Date("2024-03-01")
+};
+//#endregion
+export { z as Auth2FA, z as default, B as defaultBackupCodes, V as defaultStatus };

package/dist/blocks/avatar-upload/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../../components/avatar/index.cjs.js"),r=require("../../components/button/index.cjs.js"),i=require("../../components/slider/index.cjs.js");let a=require("react");a=e.__toESM(a);let o=require("lucide-react"),s=require("react/jsx-runtime"),c=require("react-easy-crop");c=e.__toESM(c);var l={size:256,outputFormat:`image/webp`,outputQuality:.85,maxSourceSizeMB:8,shape:`circle`};function u(e,t,n){let r=n*Math.PI/180;return{width:Math.abs(Math.cos(r)*e)+Math.abs(Math.sin(r)*t),height:Math.abs(Math.sin(r)*e)+Math.abs(Math.cos(r)*t)}}async function d(e,t,n,r,i,a){let o=await f(e),s=n*Math.PI/180,{width:c,height:l}=u(o.width,o.height,n),d=document.createElement(`canvas`);d.width=c,d.height=l;let p=d.getContext(`2d`);if(!p)throw Error(`Canvas 2D context not available`);p.translate(c/2,l/2),p.rotate(s),p.translate(-o.width/2,-o.height/2),p.drawImage(o,0,0);let m=document.createElement(`canvas`);m.width=r,m.height=r;let h=m.getContext(`2d`);if(!h)throw Error(`Canvas 2D context not available`);h.drawImage(d,t.x,t.y,t.width,t.height,0,0,r,r);let g=m.toDataURL(i,a);return{blob:await new Promise((e,t)=>m.toBlob(n=>n?e(n):t(Error(`toBlob failed`)),i,a)),dataUrl:g}}function f(e){return new Promise((t,n)=>{let r=new Image;r.crossOrigin=`anonymous`,r.onload=()=>t(r),r.onerror=n,r.src=e})}function p({value:e,onChange:u,size:f=l.size,outputFormat:p=l.outputFormat,outputQuality:m=l.outputQuality,maxSourceSizeMB:h=l.maxSourceSizeMB,shape:g=l.shape,labels:_,className:v}){let[y,b]=a.useState(null),[x,S]=a.useState({x:0,y:0}),[C,w]=a.useState(1),[T,E]=a.useState(0),[D,O]=a.useState(null),[k,A]=a.useState(null),[j,M]=a.useState(!1),N=a.useRef(null),P=()=>N.current?.click(),F=e=>{if(A(null),!e)return;if(!e.type.startsWith(`image/`)){A(`Format invalide : seules les images sont acceptées`);return}if(e.size>h*1024*1024){A(`Fichier trop volumineux (max ${h} Mo)`);return}let t=URL.createObjectURL(e);b(t),S({x:0,y:0}),w(1),E(0)};return y?(0,s.jsxs)(`div`,{className:t.cn(`flex flex-col gap-4`,v),children:[(0,s.jsx)(`div`,{className:`relative w-full h-64 bg-muted rounded-md overflow-hidden`,children:(0,s.jsx)(c.default,{image:y,crop:x,zoom:C,rotation:T,aspect:1,cropShape:g===`circle`?`round`:`rect`,onCropChange:S,onZoomChange:w,onRotationChange:E,onCropComplete:(e,t)=>O(t)})}),(0,s.jsxs)(`div`,{className:`grid grid-cols-2 gap-4`,children:[(0,s.jsxs)(`div`,{className:`space-y-2`,children:[(0,s.jsxs)(`label`,{className:`flex items-center gap-2 text-xs text-muted-foreground`,children:[(0,s.jsx)(o.ZoomIn,{className:`size-3`}),` `,_?.zoom??`Zoom`]}),(0,s.jsx)(i.Slider,{min:1,max:3,step:.05,value:[C],onValueChange:e=>w(e[0])})]}),(0,s.jsxs)(`div`,{className:`space-y-2`,children:[(0,s.jsxs)(`label`,{className:`flex items-center gap-2 text-xs text-muted-foreground`,children:[(0,s.jsx)(o.RotateCw,{className:`size-3`}),` `,_?.rotate??`Rotation`]}),(0,s.jsx)(i.Slider,{min:0,max:360,step:1,value:[T],onValueChange:e=>E(e[0])})]})]}),k&&(0,s.jsx)(`p`,{role:`alert`,className:`text-sm text-destructive`,children:k}),(0,s.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,s.jsx)(r.Button,{type:`button`,variant:`ghost`,onClick:()=>{y&&URL.revokeObjectURL(y),b(null),A(null)},disabled:j,children:_?.cancel??`Annuler`}),(0,s.jsx)(r.Button,{type:`button`,onClick:async()=>{if(!(!y||!D)){M(!0);try{let{blob:e,dataUrl:t}=await d(y,D,T,f,p,m);await Promise.resolve(u(e,t)),URL.revokeObjectURL(y),b(null)}catch(e){A(e instanceof Error?e.message:`Échec du traitement de l'image`)}finally{M(!1)}}},disabled:j||!D,children:j?`Traitement…`:_?.save??`Enregistrer`})]})]}):(0,s.jsxs)(`div`,{className:t.cn(`flex flex-col items-center gap-3`,v),children:[(0,s.jsxs)(n.Avatar,{className:t.cn(`size-24`,g===`square`&&`rounded-md`),children:[e&&(0,s.jsx)(n.AvatarImage,{src:e,alt:``}),(0,s.jsx)(n.AvatarFallback,{children:(0,s.jsx)(o.Upload,{className:`size-6`})})]}),(0,s.jsx)(`input`,{ref:N,type:`file`,accept:`image/*`,"aria-label":`Sélectionner un avatar`,className:`sr-only`,onChange:e=>F(e.target.files?.[0])}),(0,s.jsx)(r.Button,{type:`button`,variant:`outline`,onClick:P,children:_?.dropzone??`Sélectionner une image`}),k&&(0,s.jsx)(`p`,{role:`alert`,className:`text-sm text-destructive`,children:k})]})}exports.WakaAvatarUpload=p;

package/dist/blocks/avatar-upload/index.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface WakaAvatarUploadProps {
+    value?: string;
+    onChange: (blob: Blob, dataUrl: string) => void;
+    size?: number;
+    outputFormat?: 'image/webp' | 'image/jpeg' | 'image/png';
+    outputQuality?: number;
+    maxSourceSizeMB?: number;
+    shape?: 'circle' | 'square';
+    labels?: {
+        dropzone?: string;
+        zoom?: string;
+        rotate?: string;
+        save?: string;
+        cancel?: string;
+    };
+    className?: string;
+}
+/**
+ * Avatar upload block with interactive crop (zoom, pan, rotation) and Canvas resize.
+ */
+export declare function WakaAvatarUpload({ value, onChange, size, outputFormat, outputQuality, maxSourceSizeMB, shape, labels, className, }: WakaAvatarUploadProps): React.ReactElement;

package/dist/blocks/avatar-upload/index.es.js

@@ -0,0 +1,191 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Avatar as t, AvatarFallback as n, AvatarImage as r } from "../../components/avatar/index.es.js";
+import { Button as i } from "../../components/button/index.es.js";
+import { Slider as a } from "../../components/slider/index.es.js";
+import * as o from "react";
+import { RotateCw as s, Upload as c, ZoomIn as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "react-easy-crop";
+//#region src/blocks/avatar-upload/index.tsx
+var p = {
+	size: 256,
+	outputFormat: "image/webp",
+	outputQuality: .85,
+	maxSourceSizeMB: 8,
+	shape: "circle"
+};
+function m(e, t, n) {
+	let r = n * Math.PI / 180;
+	return {
+		width: Math.abs(Math.cos(r) * e) + Math.abs(Math.sin(r) * t),
+		height: Math.abs(Math.sin(r) * e) + Math.abs(Math.cos(r) * t)
+	};
+}
+async function h(e, t, n, r, i, a) {
+	let o = await g(e), s = n * Math.PI / 180, { width: c, height: l } = m(o.width, o.height, n), u = document.createElement("canvas");
+	u.width = c, u.height = l;
+	let d = u.getContext("2d");
+	if (!d) throw Error("Canvas 2D context not available");
+	d.translate(c / 2, l / 2), d.rotate(s), d.translate(-o.width / 2, -o.height / 2), d.drawImage(o, 0, 0);
+	let f = document.createElement("canvas");
+	f.width = r, f.height = r;
+	let p = f.getContext("2d");
+	if (!p) throw Error("Canvas 2D context not available");
+	p.drawImage(u, t.x, t.y, t.width, t.height, 0, 0, r, r);
+	let h = f.toDataURL(i, a);
+	return {
+		blob: await new Promise((e, t) => f.toBlob((n) => n ? e(n) : t(/* @__PURE__ */ Error("toBlob failed")), i, a)),
+		dataUrl: h
+	};
+}
+function g(e) {
+	return new Promise((t, n) => {
+		let r = new Image();
+		r.crossOrigin = "anonymous", r.onload = () => t(r), r.onerror = n, r.src = e;
+	});
+}
+function _({ value: m, onChange: g, size: _ = p.size, outputFormat: v = p.outputFormat, outputQuality: y = p.outputQuality, maxSourceSizeMB: b = p.maxSourceSizeMB, shape: x = p.shape, labels: S, className: C }) {
+	let [w, T] = o.useState(null), [E, D] = o.useState({
+		x: 0,
+		y: 0
+	}), [O, k] = o.useState(1), [A, j] = o.useState(0), [M, N] = o.useState(null), [P, F] = o.useState(null), [I, L] = o.useState(!1), R = o.useRef(null), z = () => R.current?.click(), B = (e) => {
+		if (F(null), !e) return;
+		if (!e.type.startsWith("image/")) {
+			F("Format invalide : seules les images sont acceptées");
+			return;
+		}
+		if (e.size > b * 1024 * 1024) {
+			F(`Fichier trop volumineux (max ${b} Mo)`);
+			return;
+		}
+		let t = URL.createObjectURL(e);
+		T(t), D({
+			x: 0,
+			y: 0
+		}), k(1), j(0);
+	};
+	return w ? /* @__PURE__ */ d("div", {
+		className: e("flex flex-col gap-4", C),
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "relative w-full h-64 bg-muted rounded-md overflow-hidden",
+				children: /* @__PURE__ */ u(f, {
+					image: w,
+					crop: E,
+					zoom: O,
+					rotation: A,
+					aspect: 1,
+					cropShape: x === "circle" ? "round" : "rect",
+					onCropChange: D,
+					onZoomChange: k,
+					onRotationChange: j,
+					onCropComplete: (e, t) => N(t)
+				})
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "grid grid-cols-2 gap-4",
+				children: [/* @__PURE__ */ d("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ d("label", {
+						className: "flex items-center gap-2 text-xs text-muted-foreground",
+						children: [
+							/* @__PURE__ */ u(l, { className: "size-3" }),
+							" ",
+							S?.zoom ?? "Zoom"
+						]
+					}), /* @__PURE__ */ u(a, {
+						min: 1,
+						max: 3,
+						step: .05,
+						value: [O],
+						onValueChange: (e) => k(e[0])
+					})]
+				}), /* @__PURE__ */ d("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ d("label", {
+						className: "flex items-center gap-2 text-xs text-muted-foreground",
+						children: [
+							/* @__PURE__ */ u(s, { className: "size-3" }),
+							" ",
+							S?.rotate ?? "Rotation"
+						]
+					}), /* @__PURE__ */ u(a, {
+						min: 0,
+						max: 360,
+						step: 1,
+						value: [A],
+						onValueChange: (e) => j(e[0])
+					})]
+				})]
+			}),
+			P && /* @__PURE__ */ u("p", {
+				role: "alert",
+				className: "text-sm text-destructive",
+				children: P
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ u(i, {
+					type: "button",
+					variant: "ghost",
+					onClick: () => {
+						w && URL.revokeObjectURL(w), T(null), F(null);
+					},
+					disabled: I,
+					children: S?.cancel ?? "Annuler"
+				}), /* @__PURE__ */ u(i, {
+					type: "button",
+					onClick: async () => {
+						if (!(!w || !M)) {
+							L(!0);
+							try {
+								let { blob: e, dataUrl: t } = await h(w, M, A, _, v, y);
+								await Promise.resolve(g(e, t)), URL.revokeObjectURL(w), T(null);
+							} catch (e) {
+								F(e instanceof Error ? e.message : "Échec du traitement de l'image");
+							} finally {
+								L(!1);
+							}
+						}
+					},
+					disabled: I || !M,
+					children: I ? "Traitement…" : S?.save ?? "Enregistrer"
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ d("div", {
+		className: e("flex flex-col items-center gap-3", C),
+		children: [
+			/* @__PURE__ */ d(t, {
+				className: e("size-24", x === "square" && "rounded-md"),
+				children: [m && /* @__PURE__ */ u(r, {
+					src: m,
+					alt: ""
+				}), /* @__PURE__ */ u(n, { children: /* @__PURE__ */ u(c, { className: "size-6" }) })]
+			}),
+			/* @__PURE__ */ u("input", {
+				ref: R,
+				type: "file",
+				accept: "image/*",
+				"aria-label": "Sélectionner un avatar",
+				className: "sr-only",
+				onChange: (e) => B(e.target.files?.[0])
+			}),
+			/* @__PURE__ */ u(i, {
+				type: "button",
+				variant: "outline",
+				onClick: z,
+				children: S?.dropzone ?? "Sélectionner une image"
+			}),
+			P && /* @__PURE__ */ u("p", {
+				role: "alert",
+				className: "text-sm text-destructive",
+				children: P
+			})
+		]
+	});
+}
+//#endregion
+export { _ as WakaAvatarUpload };