@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-voice-message/index.es.js

@@ -0,0 +1,393 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Download as n, Mic as r, Pause as i, Play as a, Send as o, Square as s, Trash2 as c, X as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/waka-voice-message/index.tsx
+function p(e) {
+	return `${Math.floor(e / 60)}:${Math.floor(e % 60).toString().padStart(2, "0")}`;
+}
+function m(e) {
+	return Array.from({ length: e }, () => Math.random() * .6 + .2);
+}
+function h(e = {}) {
+	let { src: n, defaultSpeed: r = 1, waveformBars: i = 40, maxRecordingDuration: a = 0, onError: o } = e, s = t.useRef(null), c = t.useRef(null), l = t.useRef(null), u = t.useRef(null), d = t.useRef(null), f = t.useRef(null), m = t.useRef(null), h = t.useRef([]), [g, _] = t.useState(!1), [v, y] = t.useState(0), [b, x] = t.useState(0), [S, C] = t.useState(r), [w, T] = t.useState(null), [E, D] = t.useState(!1), [O, k] = t.useState(0), [A, j] = t.useState(null), [M, N] = t.useState(() => Array(i).fill(.1));
+	t.useEffect(() => {
+		if (!n) {
+			T(null);
+			return;
+		}
+		if (typeof n == "string") T(n);
+		else {
+			let e = URL.createObjectURL(n);
+			return T(e), () => URL.revokeObjectURL(e);
+		}
+	}, [n]), t.useEffect(() => {
+		if (!w) return;
+		let e = new Audio(w);
+		return s.current = e, e.addEventListener("loadedmetadata", () => {
+			x(e.duration);
+		}), e.addEventListener("timeupdate", () => {
+			y(e.currentTime);
+		}), e.addEventListener("ended", () => {
+			_(!1), y(0);
+		}), e.addEventListener("play", () => _(!0)), e.addEventListener("pause", () => _(!1)), () => {
+			e.pause(), e.src = "";
+		};
+	}, [w]), t.useEffect(() => {
+		s.current && (s.current.playbackRate = S);
+	}, [S]), t.useEffect(() => {
+		E && a > 0 && O >= a && B();
+	}, [
+		E,
+		O,
+		a
+	]), t.useEffect(() => () => {
+		f.current && cancelAnimationFrame(f.current), m.current && clearInterval(m.current), l.current && l.current.getTracks().forEach((e) => e.stop()), d.current && d.current.close();
+	}, []);
+	let P = t.useCallback(() => {
+		s.current?.play().catch((e) => {
+			o?.(e);
+		});
+	}, [o]), F = t.useCallback(() => {
+		s.current?.pause();
+	}, []), I = t.useCallback(() => {
+		g ? F() : P();
+	}, [
+		g,
+		P,
+		F
+	]), L = t.useCallback((e) => {
+		s.current && (s.current.currentTime = Math.max(0, Math.min(e, s.current.duration || 0)), y(s.current.currentTime));
+	}, []), R = t.useCallback((e) => {
+		C(e);
+	}, []), z = t.useCallback(async () => {
+		try {
+			let e = await navigator.mediaDevices.getUserMedia({ audio: !0 });
+			l.current = e;
+			let t = new AudioContext();
+			d.current = t;
+			let n = t.createAnalyser();
+			u.current = n, n.fftSize = 256, t.createMediaStreamSource(e).connect(n);
+			let r = new MediaRecorder(e);
+			c.current = r, h.current = [], r.ondataavailable = (e) => {
+				e.data.size > 0 && h.current.push(e.data);
+			}, r.onstop = () => {
+				let e = new Blob(h.current, { type: "audio/webm" });
+				j(e);
+			}, r.start(100), D(!0), k(0), m.current = setInterval(() => {
+				k((e) => e + .1);
+			}, 100);
+			let a = () => {
+				if (!u.current || !E) return;
+				let e = new Uint8Array(u.current.frequencyBinCount);
+				u.current.getByteFrequencyData(e);
+				let t = Math.floor(e.length / i), n = Array.from({ length: i }, (n, r) => {
+					let i = e[r * t] / 255;
+					return Math.max(.1, i);
+				});
+				N(n), f.current = requestAnimationFrame(a);
+			};
+			f.current = requestAnimationFrame(a);
+		} catch (e) {
+			o?.(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to start recording"));
+		}
+	}, [i, o]), B = t.useCallback(() => {
+		c.current && E && c.current.stop(), l.current && l.current.getTracks().forEach((e) => e.stop()), f.current && cancelAnimationFrame(f.current), m.current && clearInterval(m.current), d.current && d.current.close(), D(!1), N(Array(i).fill(.1));
+	}, [E, i]);
+	return {
+		isPlaying: g,
+		currentTime: v,
+		duration: b,
+		playbackSpeed: S,
+		audioUrl: w,
+		isRecording: E,
+		recordingDuration: O,
+		recordedBlob: A,
+		liveWaveform: M,
+		play: P,
+		pause: F,
+		togglePlay: I,
+		seek: L,
+		setSpeed: R,
+		startRecording: z,
+		stopRecording: B,
+		cancelRecording: t.useCallback(() => {
+			B(), j(null), k(0), h.current = [];
+		}, [B]),
+		progress: b > 0 ? v / b * 100 : 0,
+		formattedCurrentTime: p(v),
+		formattedDuration: p(b),
+		formattedRecordingDuration: p(O)
+	};
+}
+var g = t.memo(function({ data: n, progress: r = 0, bars: i = 40, className: a, onClick: o }) {
+	let s = t.useRef(null), c = n || m(i);
+	return /* @__PURE__ */ d("div", {
+		ref: s,
+		className: e("flex items-center gap-[2px] h-8 cursor-pointer select-none", a),
+		onClick: (e) => {
+			if (!o || !s.current) return;
+			let t = s.current.getBoundingClientRect(), n = (e.clientX - t.left) / t.width * 100;
+			o(Math.max(0, Math.min(100, n)));
+		},
+		children: c.slice(0, i).map((t, n) => /* @__PURE__ */ d("div", {
+			className: e("flex-1 rounded-full transition-colors duration-150", n / i * 100 <= r ? "bg-primary" : "bg-muted-foreground/30"),
+			style: {
+				height: `${Math.max(10, t * 100)}%`,
+				minWidth: "2px"
+			}
+		}, n))
+	});
+}), _ = t.memo(function({ speed: t, speeds: n, onSpeedChange: r, disabled: i, size: a }) {
+	return /* @__PURE__ */ f("button", {
+		type: "button",
+		onClick: () => {
+			r(n[(n.indexOf(t) + 1) % n.length]);
+		},
+		disabled: i,
+		className: e("flex items-center justify-center font-medium rounded transition-colors", "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1", "disabled:opacity-50 disabled:cursor-not-allowed", a === "sm" && "text-xs px-1.5 py-0.5 min-w-[32px]", a === "md" && "text-sm px-2 py-1 min-w-[40px]", a === "lg" && "text-base px-2.5 py-1.5 min-w-[48px]"),
+		children: [t, "x"]
+	});
+}), v = t.memo(function({ size: t }) {
+	return /* @__PURE__ */ d("span", { className: e("absolute rounded-full bg-red-500 animate-ping", t === "sm" && "w-2 h-2", t === "md" && "w-2.5 h-2.5", t === "lg" && "w-3 h-3") });
+});
+function y({ mode: m = "player", src: y, waveform: b, waveformBars: x = 40, defaultSpeed: S = 1, speeds: C = [
+	.5,
+	1,
+	1.5,
+	2
+], showDownload: w = !1, showDelete: T = !1, showSend: E = !0, showCancel: D = !0, showSpeedControl: O = !0, maxRecordingDuration: k = 0, variant: A = "default", size: j = "md", disabled: M = !1, className: N, waveformClassName: P, controlsClassName: F, onPlay: I, onPause: L, onEnded: R, onTimeUpdate: z, onSeek: B, onSpeedChange: ee, onDownload: te, onDelete: ne, onRecordingStart: re, onRecordingStop: V, onRecordingCancel: ie, onSend: ae, onError: oe }) {
+	let { isPlaying: H, currentTime: U, duration: W, playbackSpeed: se, isRecording: G, recordingDuration: K, recordedBlob: q, liveWaveform: J, togglePlay: Y, seek: ce, setSpeed: le, startRecording: ue, stopRecording: de, cancelRecording: fe, progress: X, formattedCurrentTime: pe, formattedDuration: me, formattedRecordingDuration: he } = h({
+		src: y,
+		defaultSpeed: S,
+		waveformBars: x,
+		maxRecordingDuration: k,
+		onError: oe
+	});
+	t.useEffect(() => {
+		H ? I?.() : L?.();
+	}, [
+		H,
+		I,
+		L
+	]), t.useEffect(() => {
+		z?.(U);
+	}, [U, z]), t.useEffect(() => {
+		U > 0 && U >= W && R?.();
+	}, [
+		U,
+		W,
+		R
+	]);
+	let Z = (e) => {
+		let t = e / 100 * W;
+		ce(t), B?.(t);
+	}, ge = (e) => {
+		le(e), ee?.(e);
+	}, _e = async () => {
+		await ue(), re?.();
+	}, ve = () => {
+		de();
+	};
+	t.useEffect(() => {
+		q && !G && K > 0 && V?.({
+			src: q,
+			duration: K,
+			waveform: J
+		});
+	}, [
+		q,
+		G,
+		K,
+		J,
+		V
+	]);
+	let ye = () => {
+		fe(), ie?.();
+	}, be = () => {
+		q && ae?.({
+			src: q,
+			duration: K,
+			waveform: J
+		});
+	}, xe = () => {
+		te?.();
+	}, Se = () => {
+		ne?.();
+	}, Q = {
+		sm: {
+			container: "p-2 gap-2",
+			button: "h-7 w-7",
+			icon: "h-3.5 w-3.5",
+			text: "text-xs",
+			waveform: "h-6"
+		},
+		md: {
+			container: "p-3 gap-3",
+			button: "h-9 w-9",
+			icon: "h-4 w-4",
+			text: "text-sm",
+			waveform: "h-8"
+		},
+		lg: {
+			container: "p-4 gap-4",
+			button: "h-11 w-11",
+			icon: "h-5 w-5",
+			text: "text-base",
+			waveform: "h-10"
+		}
+	}[j], $ = {
+		default: "bg-background border border-border rounded-lg",
+		bubble: "bg-muted rounded-2xl",
+		"bubble-sent": "bg-primary text-primary-foreground rounded-2xl rounded-br-sm",
+		"bubble-received": "bg-muted rounded-2xl rounded-bl-sm"
+	};
+	return m === "player" ? /* @__PURE__ */ f("div", {
+		className: e("flex items-center", $[A], Q.container, M && "opacity-50 pointer-events-none", N),
+		children: [
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: Y,
+				disabled: M,
+				className: e("flex items-center justify-center rounded-full shrink-0", "bg-primary text-primary-foreground", "hover:bg-primary/90 transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "disabled:opacity-50 disabled:cursor-not-allowed", Q.button, F),
+				children: H ? /* @__PURE__ */ d(i, { className: Q.icon }) : /* @__PURE__ */ d(a, { className: e(Q.icon, "ml-0.5") })
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "flex-1 min-w-0",
+				children: /* @__PURE__ */ d(g, {
+					data: b,
+					progress: X,
+					bars: x,
+					className: e(Q.waveform, P),
+					onClick: Z
+				})
+			}),
+			/* @__PURE__ */ f("div", {
+				className: e("shrink-0 tabular-nums", Q.text),
+				children: [
+					/* @__PURE__ */ d("span", { children: pe }),
+					/* @__PURE__ */ d("span", {
+						className: "text-muted-foreground",
+						children: " / "
+					}),
+					/* @__PURE__ */ d("span", {
+						className: "text-muted-foreground",
+						children: me
+					})
+				]
+			}),
+			O && /* @__PURE__ */ d(_, {
+				speed: se,
+				speeds: C,
+				onSpeedChange: ge,
+				disabled: M,
+				size: j
+			}),
+			w && /* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: xe,
+				disabled: M,
+				className: e("flex items-center justify-center rounded-full shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1", "disabled:opacity-50 disabled:cursor-not-allowed", Q.button),
+				children: /* @__PURE__ */ d(n, { className: Q.icon })
+			}),
+			T && /* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: Se,
+				disabled: M,
+				className: e("flex items-center justify-center rounded-full shrink-0", "text-destructive hover:bg-destructive/10 transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1", "disabled:opacity-50 disabled:cursor-not-allowed", Q.button),
+				children: /* @__PURE__ */ d(c, { className: Q.icon })
+			})
+		]
+	}) : /* @__PURE__ */ f("div", {
+		className: e("flex items-center", $[A], Q.container, M && "opacity-50 pointer-events-none", N),
+		children: [
+			!G && !q && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: _e,
+				disabled: M,
+				className: e("relative flex items-center justify-center rounded-full shrink-0", "bg-red-500 text-white", "hover:bg-red-600 transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "disabled:opacity-50 disabled:cursor-not-allowed", Q.button, F),
+				children: /* @__PURE__ */ d(r, { className: Q.icon })
+			}), /* @__PURE__ */ d("span", {
+				className: e("text-muted-foreground", Q.text),
+				children: "Tap to record"
+			})] }),
+			G && /* @__PURE__ */ f(u, { children: [
+				/* @__PURE__ */ f("button", {
+					type: "button",
+					onClick: ve,
+					disabled: M,
+					className: e("relative flex items-center justify-center rounded-full shrink-0", "bg-red-500 text-white", "hover:bg-red-600 transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "disabled:opacity-50 disabled:cursor-not-allowed", Q.button, F),
+					children: [/* @__PURE__ */ d(v, { size: j }), /* @__PURE__ */ d(s, { className: e(Q.icon, "relative z-10") })]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "flex-1 min-w-0",
+					children: /* @__PURE__ */ d(g, {
+						data: J,
+						progress: 100,
+						bars: x,
+						className: e(Q.waveform, P)
+					})
+				}),
+				/* @__PURE__ */ f("div", {
+					className: e("shrink-0 tabular-nums text-red-500", Q.text),
+					children: [he, k > 0 && /* @__PURE__ */ f("span", {
+						className: "text-muted-foreground",
+						children: [
+							" ",
+							"/ ",
+							p(k)
+						]
+					})]
+				}),
+				D && /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: ye,
+					disabled: M,
+					className: e("flex items-center justify-center rounded-full shrink-0", "text-muted-foreground hover:bg-muted transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1", "disabled:opacity-50 disabled:cursor-not-allowed", Q.button),
+					children: /* @__PURE__ */ d(l, { className: Q.icon })
+				})
+			] }),
+			!G && q && /* @__PURE__ */ f(u, { children: [
+				/* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: Y,
+					disabled: M,
+					className: e("flex items-center justify-center rounded-full shrink-0", "bg-primary text-primary-foreground", "hover:bg-primary/90 transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "disabled:opacity-50 disabled:cursor-not-allowed", Q.button, F),
+					children: H ? /* @__PURE__ */ d(i, { className: Q.icon }) : /* @__PURE__ */ d(a, { className: e(Q.icon, "ml-0.5") })
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "flex-1 min-w-0",
+					children: /* @__PURE__ */ d(g, {
+						data: J,
+						progress: X,
+						bars: x,
+						className: e(Q.waveform, P),
+						onClick: Z
+					})
+				}),
+				/* @__PURE__ */ d("div", {
+					className: e("shrink-0 tabular-nums", Q.text),
+					children: p(K)
+				}),
+				D && /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: ye,
+					disabled: M,
+					className: e("flex items-center justify-center rounded-full shrink-0", "text-destructive hover:bg-destructive/10 transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1", "disabled:opacity-50 disabled:cursor-not-allowed", Q.button),
+					children: /* @__PURE__ */ d(c, { className: Q.icon })
+				}),
+				E && /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: be,
+					disabled: M,
+					className: e("flex items-center justify-center rounded-full shrink-0", "bg-primary text-primary-foreground", "hover:bg-primary/90 transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "disabled:opacity-50 disabled:cursor-not-allowed", Q.button, F),
+					children: /* @__PURE__ */ d(o, { className: Q.icon })
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { y as WakaVoiceMessage, y as default, h as useVoiceMessage };

package/dist/components/waka-welcome-modal/index.cjs.js

@@ -0,0 +1,41 @@
+"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"),a=require("@radix-ui/react-dialog");a=e.__toESM(a);var o=[{id:`welcome`,title:`Welcome aboard!`,description:`We're excited to have you here. Let's get you set up in just a few steps.`,icon:(0,i.jsx)(r.Sparkles,{className:`h-12 w-12 text-primary`})},{id:`features`,title:`Discover powerful features`,description:`Explore the tools and capabilities that will help you succeed.`,icon:(0,i.jsx)(r.Rocket,{className:`h-12 w-12 text-primary`})},{id:`preferences`,title:`Customize your experience`,description:`Select the options that best fit your needs.`,icon:(0,i.jsx)(r.Settings,{className:`h-12 w-12 text-primary`}),options:[{id:`dark-mode`,label:`Dark Mode`,description:`Enable dark theme`},{id:`notifications`,label:`Notifications`,description:`Get updates and alerts`},{id:`newsletter`,label:`Newsletter`,description:`Receive tips and news`}],multiSelect:!0},{id:`ready`,title:`You're all set!`,description:`Your workspace is ready. Let's get started on your journey.`,icon:(0,i.jsx)(r.Users,{className:`h-12 w-12 text-primary`})}];function s(e={}){let{defaultOpen:t=!1,storageKey:r=`waka-welcome-modal-shown`,onComplete:i,onSkip:a}=e,o=n.useCallback(()=>{if(typeof window>`u`)return!1;try{return localStorage.getItem(r)===`true`}catch{return!1}},[r]),s=n.useCallback(()=>{if(typeof window>`u`)return t;try{let e=localStorage.getItem(r)===`true`;return t&&!e}catch{return t}},[t,r]),[c,l]=n.useState(s),[u,d]=n.useState(0),[f,p]=n.useState({}),[m,h]=n.useState(o);n.useEffect(()=>{l(s()),h(o())},[s,o]);let g=n.useCallback(e=>{if(h(e),typeof window<`u`)try{e?localStorage.setItem(r,`true`):localStorage.removeItem(r)}catch{}},[r]),_=n.useCallback(()=>{l(!0)},[]),v=n.useCallback(()=>{l(!1)},[]),y=n.useCallback(()=>{d(e=>e+1)},[]),b=n.useCallback(()=>{d(e=>Math.max(0,e-1))},[]),x=n.useCallback((e,t,n=!1)=>{p(r=>{let i=r[e]||[],a=i.includes(t);return n?{...r,[e]:a?i.filter(e=>e!==t):[...i,t]}:{...r,[e]:a?[]:[t]}})},[]),S=n.useCallback(()=>{p({})},[]),C=n.useCallback(()=>{l(!1),i?.(f)},[f,i]),w=n.useCallback(()=>{l(!1),a?.()},[a]);return{open:c,setOpen:l,openModal:_,closeModal:v,currentStep:u,setCurrentStep:d,nextStep:y,prevStep:b,selections:f,toggleSelection:x,clearSelections:S,dontShowAgain:m,setDontShowAgain:g,complete:C,skip:w,reset:n.useCallback(()=>{d(0),p({})},[]),modalProps:{open:c,onOpenChange:n.useCallback(e=>{l(e),e||setTimeout(()=>{d(0)},300)},[]),dontShowAgain:m,onDontShowAgainChange:g,onComplete:C,onSkip:w}}}function c({totalSteps:e,currentStep:n,onStepClick:r,className:a}){return(0,i.jsx)(`div`,{className:t.cn(`flex items-center justify-center gap-2`,a),children:Array.from({length:e}).map((e,a)=>(0,i.jsx)(`button`,{type:`button`,onClick:()=>r?.(a),disabled:!r,"aria-label":`Go to step ${a+1}`,"aria-current":a===n?`step`:void 0,className:t.cn(`h-2 rounded-full transition-all duration-300`,a===n?`w-6 bg-primary`:`w-2 bg-muted-foreground/30 hover:bg-muted-foreground/50`,r&&`cursor-pointer`,!r&&`cursor-default`)},a))})}function l({option:e,selected:n,onSelect:a}){return(0,i.jsxs)(`button`,{type:`button`,onClick:a,className:t.cn(`flex items-center gap-3 w-full p-4 rounded-lg border-2 transition-all duration-200`,`hover:border-primary/50 hover:bg-primary/5`,n?`border-primary bg-primary/10`:`border-border bg-background`),children:[e.icon&&(0,i.jsx)(`div`,{className:`flex-shrink-0 text-primary`,children:e.icon}),(0,i.jsxs)(`div`,{className:`flex-1 text-left`,children:[(0,i.jsx)(`div`,{className:`font-medium`,children:e.label}),e.description&&(0,i.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e.description})]}),(0,i.jsx)(`div`,{className:t.cn(`flex-shrink-0 h-5 w-5 rounded-full border-2 flex items-center justify-center transition-all duration-200`,n?`border-primary bg-primary text-primary-foreground`:`border-muted-foreground/30`),children:n&&(0,i.jsx)(r.Check,{className:`h-3 w-3`})})]})}function u({open:e,onOpenChange:s,steps:u=o,userName:d,onComplete:f,onSkip:p,allowSkip:m=!0,showDontShowAgain:h=!0,onDontShowAgainChange:g,dontShowAgain:_=!1,skipText:v=`Skip`,nextText:y=`Next`,prevText:b=`Back`,completeText:x=`Get Started`,className:S,animationDuration:C=300}){let[w,T]=n.useState(0),[E,D]=n.useState({}),[O,k]=n.useState(`forward`),[A,j]=n.useState(!1),[M,N]=n.useState(_),P=u.length,F=u[w],I=w===0,L=w===P-1;n.useEffect(()=>{N(_)},[_]),n.useEffect(()=>{if(!e){let e=setTimeout(()=>{T(0),k(`forward`)},C);return()=>clearTimeout(e)}},[e,C]);let R=n.useCallback(()=>{A||(L?(f?.(E),s(!1)):(k(`forward`),j(!0),setTimeout(()=>{T(e=>e+1),j(!1)},C/2)))},[L,A,E,f,s,C]),z=n.useCallback(()=>{A||I||(k(`backward`),j(!0),setTimeout(()=>{T(e=>e-1),j(!1)},C/2))},[I,A,C]),B=n.useCallback(()=>{p?.(),s(!1)},[p,s]),V=n.useCallback(e=>{N(e),g?.(e)},[g]),H=n.useCallback(e=>{F&&D(t=>{let n=t[F.id]||[],r=n.includes(e);return F.multiSelect?{...t,[F.id]:r?n.filter(t=>t!==e):[...n,e]}:{...t,[F.id]:r?[]:[e]}})},[F]),U=n.useMemo(()=>F?d&&w===0?F.title.replace(`!`,`, ${d}!`):F.title:``,[F,d,w]);return(0,i.jsx)(a.Root,{open:e,onOpenChange:s,children:(0,i.jsxs)(a.Portal,{children:[(0,i.jsx)(a.Overlay,{className:t.cn(`fixed inset-0 z-50 bg-black/80`,`data-[state=open]:animate-in data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`)}),(0,i.jsxs)(a.Content,{"aria-describedby":`welcome-modal-description`,className:t.cn(`fixed z-50 w-full max-w-lg bg-background shadow-2xl rounded-2xl overflow-hidden`,`left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,`data-[state=open]:animate-in data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,`data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95`,`duration-300`,S),children:[(0,i.jsxs)(a.Title,{className:`sr-only`,children:[`Welcome Modal - Step `,w+1,` of `,P]}),(0,i.jsx)(a.Description,{id:`welcome-modal-description`,className:`sr-only`,children:`A multi-step welcome wizard to help you get started`}),(0,i.jsxs)(a.Close,{className:t.cn(`absolute right-4 top-4 z-10 rounded-full p-2`,`bg-background/80 backdrop-blur-sm`,`opacity-70 ring-offset-background transition-opacity`,`hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2`),children:[(0,i.jsx)(r.X,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{className:`sr-only`,children:`Close`})]}),(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsxs)(`div`,{className:`relative h-48 bg-gradient-to-br from-primary/10 via-primary/5 to-background flex items-center justify-center overflow-hidden`,children:[(0,i.jsxs)(`div`,{className:`absolute inset-0 opacity-20`,children:[(0,i.jsx)(`div`,{className:`absolute top-0 left-0 w-32 h-32 bg-primary/20 rounded-full blur-3xl animate-pulse`}),(0,i.jsx)(`div`,{className:`absolute bottom-0 right-0 w-40 h-40 bg-primary/30 rounded-full blur-3xl animate-pulse delay-150`})]}),(0,i.jsx)(`div`,{className:t.cn(`relative z-10 transition-all`,A&&O===`forward`&&`animate-slide-out-left`,A&&O===`backward`&&`animate-slide-out-right`,!A&&`animate-slide-in`),style:{animationDuration:`${C/2}ms`},children:F?.illustration?(0,i.jsx)(`img`,{src:F.illustration,alt:F.title,className:`max-h-32 object-contain`}):(0,i.jsx)(`div`,{className:`p-6 bg-background/50 backdrop-blur-sm rounded-full shadow-lg`,children:F?.icon||(0,i.jsx)(r.Sparkles,{className:`h-12 w-12 text-primary`})})})]}),(0,i.jsx)(`div`,{className:`px-8 pt-6 pb-4`,children:(0,i.jsxs)(`div`,{className:t.cn(`transition-all`,A&&O===`forward`&&`opacity-0 translate-x-4`,A&&O===`backward`&&`opacity-0 -translate-x-4`,!A&&`opacity-100 translate-x-0`),style:{transitionDuration:`${C/2}ms`},children:[(0,i.jsx)(`h2`,{className:`text-2xl font-bold text-center mb-2`,children:U}),(0,i.jsx)(`p`,{className:`text-muted-foreground text-center`,children:F?.description})]})}),F?.options&&F.options.length>0&&(0,i.jsx)(`div`,{className:t.cn(`px-8 pb-4 space-y-3 transition-all`,A&&`opacity-0`,!A&&`opacity-100`),style:{transitionDuration:`${C/2}ms`},children:F.options.map(e=>(0,i.jsx)(l,{option:e,selected:(E[F.id]||[]).includes(e.id),onSelect:()=>H(e.id)},e.id))}),F?.content&&(0,i.jsx)(`div`,{className:t.cn(`px-8 pb-4 transition-all`,A&&`opacity-0`,!A&&`opacity-100`),style:{transitionDuration:`${C/2}ms`},children:F.content}),(0,i.jsx)(`div`,{className:`px-8 py-4`,children:(0,i.jsx)(c,{totalSteps:P,currentStep:w})}),(0,i.jsxs)(`div`,{className:`px-8 pb-6 space-y-4`,children:[h&&L&&(0,i.jsxs)(`label`,{className:`flex items-center justify-center gap-2 text-sm text-muted-foreground cursor-pointer`,children:[(0,i.jsx)(`input`,{type:`checkbox`,checked:M,onChange:e=>V(e.target.checked),className:`h-4 w-4 rounded border-border`}),(0,i.jsx)(`span`,{children:`Don't show this again`})]}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,i.jsx)(`div`,{className:`flex-1`,children:I?m&&(0,i.jsx)(`button`,{type:`button`,onClick:B,className:t.cn(`px-4 py-2 text-sm font-medium text-muted-foreground`,`hover:text-foreground transition-colors`),children:v}):(0,i.jsx)(`button`,{type:`button`,onClick:z,disabled:A,className:t.cn(`px-4 py-2 text-sm font-medium text-muted-foreground`,`hover:text-foreground transition-colors`,`disabled:opacity-50 disabled:cursor-not-allowed`),children:b})}),(0,i.jsxs)(`button`,{type:`button`,onClick:R,disabled:A,className:t.cn(`flex items-center gap-2 px-6 py-3 rounded-full font-medium`,`bg-primary text-primary-foreground`,`hover:bg-primary/90 transition-colors`,`disabled:opacity-50 disabled:cursor-not-allowed`,`shadow-lg shadow-primary/25`),children:[L?x:y,!L&&(0,i.jsx)(r.ChevronRight,{className:`h-4 w-4`})]})]})]})]}),(0,i.jsx)(`style`,{dangerouslySetInnerHTML:{__html:`
+            @keyframes waka-slide-out-left {
+              from {
+                opacity: 1;
+                transform: translateX(0);
+              }
+              to {
+                opacity: 0;
+                transform: translateX(-20px);
+              }
+            }
+            @keyframes waka-slide-out-right {
+              from {
+                opacity: 1;
+                transform: translateX(0);
+              }
+              to {
+                opacity: 0;
+                transform: translateX(20px);
+              }
+            }
+            @keyframes waka-slide-in {
+              from {
+                opacity: 0;
+                transform: translateX(20px);
+              }
+              to {
+                opacity: 1;
+                transform: translateX(0);
+              }
+            }
+            .animate-slide-out-left {
+              animation: waka-slide-out-left ease-out forwards;
+            }
+            .animate-slide-out-right {
+              animation: waka-slide-out-right ease-out forwards;
+            }
+            .animate-slide-in {
+              animation: waka-slide-in ease-out forwards;
+            }
+          `}})]})]})})}exports.WakaWelcomeModal=u,exports.default=u,exports.defaultWelcomeSteps=o,exports.useWelcomeModal=s;