@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-time-picker/index.es.js

@@ -0,0 +1,288 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Button as t } from "../button/index.es.js";
+import { Input as n } from "../input/index.es.js";
+import { Popover as r, PopoverContent as i, PopoverTrigger as a } from "../popover/index.es.js";
+import * as o from "react";
+import { ChevronDown as s, ChevronUp as c, Clock as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/waka-time-picker/index.tsx
+function p(e) {
+	let t = e.split(":");
+	return {
+		hours: parseInt(t[0] || "0", 10),
+		minutes: parseInt(t[1] || "0", 10),
+		seconds: parseInt(t[2] || "0", 10)
+	};
+}
+function m(e, t, n, r) {
+	let i = e.toString().padStart(2, "0"), a = t.toString().padStart(2, "0"), o = n.toString().padStart(2, "0");
+	return r ? `${i}:${a}:${o}` : `${i}:${a}`;
+}
+function h(e) {
+	let t = e >= 12 ? "PM" : "AM", n = e % 12;
+	return n === 0 && (n = 12), {
+		display: n,
+		period: t
+	};
+}
+function g(e, t) {
+	return t === "AM" ? e === 12 ? 0 : e : e === 12 ? 12 : e + 12;
+}
+function _(e, t, n, r, i) {
+	let a = e * 3600 + t * 60 + n;
+	if (r) {
+		let e = p(r);
+		if (a < e.hours * 3600 + e.minutes * 60 + e.seconds) return !1;
+	}
+	if (i) {
+		let e = p(i);
+		if (a > e.hours * 3600 + e.minutes * 60 + e.seconds) return !1;
+	}
+	return !0;
+}
+function v({ value: e, onChange: n, max: r, step: i = 1, disabled: a, label: l }) {
+	let u = o.useMemo(() => {
+		let e = [];
+		for (let t = 0; t < r; t += i) e.push(t);
+		return e;
+	}, [r, i]);
+	return /* @__PURE__ */ f("div", {
+		className: "flex flex-col items-center",
+		children: [
+			/* @__PURE__ */ d("span", {
+				className: "text-xs text-muted-foreground mb-1",
+				children: l
+			}),
+			/* @__PURE__ */ d(t, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				className: "h-6 w-8",
+				onClick: () => {
+					n(u[(u.indexOf(e) + 1) % u.length]);
+				},
+				disabled: a,
+				tabIndex: -1,
+				children: /* @__PURE__ */ d(c, { className: "h-4 w-4" })
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "h-10 w-12 flex items-center justify-center text-lg font-medium",
+				children: e.toString().padStart(2, "0")
+			}),
+			/* @__PURE__ */ d(t, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				className: "h-6 w-8",
+				onClick: () => {
+					let t = u.indexOf(e);
+					n(u[t === 0 ? u.length - 1 : t - 1]);
+				},
+				disabled: a,
+				tabIndex: -1,
+				children: /* @__PURE__ */ d(s, { className: "h-4 w-4" })
+			})
+		]
+	});
+}
+function y({ value: e, onChange: n, disabled: r }) {
+	return /* @__PURE__ */ f("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ d(t, {
+			type: "button",
+			variant: e === "AM" ? "default" : "ghost",
+			size: "sm",
+			className: "h-7 px-2",
+			onClick: () => n("AM"),
+			disabled: r,
+			children: "AM"
+		}), /* @__PURE__ */ d(t, {
+			type: "button",
+			variant: e === "PM" ? "default" : "ghost",
+			size: "sm",
+			className: "h-7 px-2",
+			onClick: () => n("PM"),
+			disabled: r,
+			children: "PM"
+		})]
+	});
+}
+function b({ value: s, onChange: c, placeholder: b = "Sélectionner une heure", format: x = "24h", showSeconds: S = !1, minuteStep: C = 1, secondStep: w = 1, minTime: T, maxTime: E, disabled: D = !1, error: O = !1, size: k = "md", className: A, id: j, name: M }) {
+	let [N, P] = o.useState(!1), [ee, F] = o.useState(s || ""), I = s ? p(s) : {
+		hours: 0,
+		minutes: 0,
+		seconds: 0
+	}, [L, R] = o.useState(I.hours), [z, B] = o.useState(I.minutes), [V, H] = o.useState(I.seconds), [U, W] = o.useState(I.hours >= 12 ? "PM" : "AM");
+	o.useEffect(() => {
+		if (s) {
+			let e = p(s);
+			R(e.hours), B(e.minutes), H(e.seconds), W(e.hours >= 12 ? "PM" : "AM"), F(s);
+		}
+	}, [s]);
+	let G = o.useMemo(() => {
+		if (!s) return "";
+		if (x === "12h") {
+			let { display: e, period: t } = h(L);
+			return `${e.toString().padStart(2, "0")}:${z.toString().padStart(2, "0")}${S ? `:${V.toString().padStart(2, "0")}` : ""} ${t}`;
+		}
+		return m(L, z, V, S);
+	}, [
+		s,
+		L,
+		z,
+		V,
+		x,
+		S
+	]), K = (e, t, n) => {
+		if (!_(e, t, n, T, E)) return;
+		R(e), B(t), H(n);
+		let r = m(e, t, n, S);
+		c?.(r);
+	}, q = (e) => {
+		K(x === "12h" ? g(e, U) : e, z, V);
+	}, J = (e) => {
+		K(L, e, V);
+	}, Y = (e) => {
+		K(L, z, e);
+	}, X = (e) => {
+		W(e), K(g(L % 12 || 12, e), z, V);
+	}, Z = (e) => {
+		let t = e.target.value;
+		F(t);
+		let n = S ? /^(\d{1,2}):(\d{2}):(\d{2})$/ : /^(\d{1,2}):(\d{2})$/, r = t.match(n);
+		if (r) {
+			let e = parseInt(r[1], 10), t = parseInt(r[2], 10), n = S ? parseInt(r[3], 10) : 0;
+			e >= 0 && e < 24 && t >= 0 && t < 60 && n >= 0 && n < 60 && K(e, t, n);
+		}
+	}, Q = {
+		sm: "h-8 text-xs",
+		md: "h-9 text-sm",
+		lg: "h-10 text-base"
+	}, $ = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}, te = x === "12h" ? L % 12 || 12 : L;
+	return /* @__PURE__ */ f(r, {
+		open: N,
+		onOpenChange: P,
+		children: [/* @__PURE__ */ d(a, {
+			asChild: !0,
+			children: /* @__PURE__ */ f("div", {
+				className: e("relative", A),
+				children: [/* @__PURE__ */ d(n, {
+					id: j,
+					name: M,
+					value: G,
+					onChange: Z,
+					placeholder: b,
+					disabled: D,
+					className: e(Q[k], "pr-10", O && "border-destructive focus-visible:ring-destructive")
+				}), /* @__PURE__ */ d(t, {
+					type: "button",
+					variant: "ghost",
+					size: "icon",
+					className: e("absolute right-0 top-0 h-full px-2", D && "pointer-events-none opacity-50"),
+					onClick: () => !D && P(!N),
+					tabIndex: -1,
+					children: /* @__PURE__ */ d(l, { className: $[k] })
+				})]
+			})
+		}), /* @__PURE__ */ f(i, {
+			className: "w-auto p-4",
+			align: "start",
+			children: [/* @__PURE__ */ f("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ d(v, {
+						value: te,
+						onChange: q,
+						max: x === "12h" ? 13 : 24,
+						disabled: D,
+						label: "Heures"
+					}),
+					/* @__PURE__ */ d("span", {
+						className: "text-xl font-medium",
+						children: ":"
+					}),
+					/* @__PURE__ */ d(v, {
+						value: z,
+						onChange: J,
+						max: 60,
+						step: C,
+						disabled: D,
+						label: "Minutes"
+					}),
+					S && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", {
+						className: "text-xl font-medium",
+						children: ":"
+					}), /* @__PURE__ */ d(v, {
+						value: V,
+						onChange: Y,
+						max: 60,
+						step: w,
+						disabled: D,
+						label: "Secondes"
+					})] }),
+					x === "12h" && /* @__PURE__ */ d("div", {
+						className: "ml-2",
+						children: /* @__PURE__ */ d(y, {
+							value: U,
+							onChange: X,
+							disabled: D
+						})
+					})
+				]
+			}), /* @__PURE__ */ f("div", {
+				className: "flex gap-2 mt-4 pt-4 border-t",
+				children: [
+					/* @__PURE__ */ d(t, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						onClick: () => {
+							let e = /* @__PURE__ */ new Date();
+							K(e.getHours(), e.getMinutes(), e.getSeconds());
+						},
+						disabled: D,
+						children: "Maintenant"
+					}),
+					/* @__PURE__ */ d(t, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						onClick: () => K(0, 0, 0),
+						disabled: D,
+						children: "00:00"
+					}),
+					/* @__PURE__ */ d(t, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						onClick: () => K(12, 0, 0),
+						disabled: D,
+						children: "12:00"
+					})
+				]
+			})]
+		})]
+	});
+}
+function x(e = {}) {
+	let { initialValue: t = "", format: n = "24h", showSeconds: r = !1 } = e, [i, a] = o.useState(t);
+	return {
+		value: i,
+		onChange: a,
+		clear: () => a(""),
+		setNow: () => {
+			let e = /* @__PURE__ */ new Date(), t = e.getHours().toString().padStart(2, "0"), n = e.getMinutes().toString().padStart(2, "0"), i = e.getSeconds().toString().padStart(2, "0");
+			a(r ? `${t}:${n}:${i}` : `${t}:${n}`);
+		},
+		format: n,
+		showSeconds: r
+	};
+}
+//#endregion
+export { b as default, x as useTimePicker };

package/dist/components/waka-timeline/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(`../button/index.cjs.js`);let r=require(`react`);r=e.__toESM(r);let i=require(`lucide-react`),a=require(`react/jsx-runtime`);var o={completed:{icon:i.Check,color:`text-green-600`,bgColor:`bg-green-100`},current:{icon:i.Circle,color:`text-primary`,bgColor:`bg-primary/10`},pending:{icon:i.Clock,color:`text-muted-foreground`,bgColor:`bg-muted`},error:{icon:i.AlertCircle,color:`text-destructive`,bgColor:`bg-destructive/10`}};function s({status:e,icon:n,color:r,size:i}){let s=o[e],c=s.icon;return(0,a.jsx)(`div`,{className:t.cn(`rounded-full flex items-center justify-center flex-shrink-0 border-2 border-background shadow-sm`,{sm:`h-6 w-6`,md:`h-8 w-8`,lg:`h-10 w-10`}[i],r?``:s.bgColor),style:r?{backgroundColor:r+`20`}:void 0,children:n||(0,a.jsx)(c,{className:t.cn({sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`}[i],r?``:s.color),style:r?{color:r}:void 0})})}function c({item:e,isLast:c,size:l,showDate:u,dateFormat:d,collapsible:f,onItemClick:p,orientation:m,position:h}){let[g,_]=r.useState(!1),v=e.status||`pending`,y={sm:{title:`text-sm`,desc:`text-xs`,date:`text-[10px]`},md:{title:`text-base`,desc:`text-sm`,date:`text-xs`},lg:{title:`text-lg`,desc:`text-base`,date:`text-sm`}},b=e=>(typeof e==`string`?new Date(e):e).toLocaleDateString(`fr-FR`,d||{day:`numeric`,month:`short`,year:`numeric`}),x=()=>{f&&e.content&&_(!g),p?.(e)};if(m===`horizontal`)return(0,a.jsxs)(`div`,{className:`flex flex-col items-center flex-1 min-w-[120px]`,children:[u&&e.date&&(0,a.jsx)(`div`,{className:t.cn(`mb-2 text-muted-foreground`,y[l].date),children:b(e.date)}),(0,a.jsxs)(`div`,{className:`flex items-center w-full`,children:[(0,a.jsx)(`div`,{className:t.cn(`flex-1 h-0.5`,c?``:`bg-border`),style:v===`completed`?{backgroundColor:o.completed.color.replace(`text-`,``)}:void 0}),(0,a.jsx)(s,{status:v,icon:e.icon,color:e.color,size:l}),(0,a.jsx)(`div`,{className:t.cn(`flex-1 h-0.5`,c?``:`bg-border`)})]}),(0,a.jsxs)(`div`,{className:t.cn(`mt-2 text-center`,p&&`cursor-pointer hover:opacity-80`),onClick:x,children:[(0,a.jsx)(`h4`,{className:t.cn(`font-medium`,y[l].title),children:e.title}),e.description&&(0,a.jsx)(`p`,{className:t.cn(`text-muted-foreground mt-0.5`,y[l].desc),children:e.description})]})]});let S=h===`right`;return(0,a.jsxs)(`div`,{className:t.cn(`flex gap-4`,S&&`flex-row-reverse`),children:[h!==`left`&&u&&e.date&&(0,a.jsx)(`div`,{className:t.cn(`w-24 text-muted-foreground pt-1`,y[l].date,S?`text-left`:`text-right`),children:b(e.date)}),(0,a.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,a.jsx)(s,{status:v,icon:e.icon,color:e.color,size:l}),!c&&(0,a.jsx)(`div`,{className:t.cn(`w-0.5 flex-1 min-h-[24px] mt-1`,v===`completed`?`bg-green-500`:`bg-border`)})]}),(0,a.jsxs)(`div`,{className:t.cn(`flex-1 pb-8`,S&&`text-right`),children:[h===`left`&&u&&e.date&&(0,a.jsx)(`div`,{className:t.cn(`text-muted-foreground mb-1`,y[l].date),children:b(e.date)}),(0,a.jsxs)(`div`,{className:t.cn(`inline-block`,(p||f&&e.content)&&`cursor-pointer hover:opacity-80`),onClick:x,children:[(0,a.jsxs)(`h4`,{className:t.cn(`font-medium`,y[l].title),children:[e.title,f&&e.content&&(0,a.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-5 w-5 ml-1`,children:g?(0,a.jsx)(i.ChevronUp,{className:`h-3 w-3`}):(0,a.jsx)(i.ChevronDown,{className:`h-3 w-3`})})]}),e.description&&(0,a.jsx)(`p`,{className:t.cn(`text-muted-foreground mt-0.5`,y[l].desc),children:e.description})]}),f&&e.content&&g&&(0,a.jsx)(`div`,{className:`mt-3 p-3 bg-muted/50 rounded-lg`,children:e.content})]})]})}function l({items:e,orientation:n=`vertical`,linePosition:r=`left`,size:i=`md`,showDates:o=!0,dateFormat:s,collapsible:l=!1,alternate:u=!1,onItemClick:d,className:f}){return n===`horizontal`?(0,a.jsx)(`div`,{className:t.cn(`flex items-start overflow-x-auto`,f),children:e.map((t,n)=>(0,a.jsx)(c,{item:t,isLast:n===e.length-1,size:i,showDate:o,dateFormat:s,collapsible:l,onItemClick:d,orientation:`horizontal`,position:`left`},t.id))}):(0,a.jsx)(`div`,{className:t.cn(`flex flex-col`,r===`center`&&`items-center`,f),children:e.map((t,n)=>{let f=`left`;return r===`center`&&u?f=n%2==0?`left`:`right`:r===`right`&&(f=`right`),(0,a.jsx)(c,{item:t,isLast:n===e.length-1,size:i,showDate:o,dateFormat:s,collapsible:l,onItemClick:d,orientation:`vertical`,position:f},t.id)})})}exports.default=l;

package/dist/components/waka-timeline/index.es.js

@@ -0,0 +1,192 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Button as t } from "../button/index.es.js";
+import * as n from "react";
+import { AlertCircle as r, Check as i, ChevronDown as a, ChevronUp as o, Circle as s, Clock as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/waka-timeline/index.tsx
+var d = {
+	completed: {
+		icon: i,
+		color: "text-green-600",
+		bgColor: "bg-green-100"
+	},
+	current: {
+		icon: s,
+		color: "text-primary",
+		bgColor: "bg-primary/10"
+	},
+	pending: {
+		icon: c,
+		color: "text-muted-foreground",
+		bgColor: "bg-muted"
+	},
+	error: {
+		icon: r,
+		color: "text-destructive",
+		bgColor: "bg-destructive/10"
+	}
+};
+function f({ status: t, icon: n, color: r, size: i }) {
+	let a = d[t], o = a.icon;
+	return /* @__PURE__ */ l("div", {
+		className: e("rounded-full flex items-center justify-center flex-shrink-0 border-2 border-background shadow-sm", {
+			sm: "h-6 w-6",
+			md: "h-8 w-8",
+			lg: "h-10 w-10"
+		}[i], r ? "" : a.bgColor),
+		style: r ? { backgroundColor: r + "20" } : void 0,
+		children: n || /* @__PURE__ */ l(o, {
+			className: e({
+				sm: "h-3 w-3",
+				md: "h-4 w-4",
+				lg: "h-5 w-5"
+			}[i], r ? "" : a.color),
+			style: r ? { color: r } : void 0
+		})
+	});
+}
+function p({ item: r, isLast: i, size: s, showDate: c, dateFormat: p, collapsible: m, onItemClick: h, orientation: g, position: _ }) {
+	let [v, y] = n.useState(!1), b = r.status || "pending", x = {
+		sm: {
+			title: "text-sm",
+			desc: "text-xs",
+			date: "text-[10px]"
+		},
+		md: {
+			title: "text-base",
+			desc: "text-sm",
+			date: "text-xs"
+		},
+		lg: {
+			title: "text-lg",
+			desc: "text-base",
+			date: "text-sm"
+		}
+	}, S = (e) => (typeof e == "string" ? new Date(e) : e).toLocaleDateString("fr-FR", p || {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	}), C = () => {
+		m && r.content && y(!v), h?.(r);
+	};
+	if (g === "horizontal") return /* @__PURE__ */ u("div", {
+		className: "flex flex-col items-center flex-1 min-w-[120px]",
+		children: [
+			c && r.date && /* @__PURE__ */ l("div", {
+				className: e("mb-2 text-muted-foreground", x[s].date),
+				children: S(r.date)
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center w-full",
+				children: [
+					/* @__PURE__ */ l("div", {
+						className: e("flex-1 h-0.5", i ? "" : "bg-border"),
+						style: b === "completed" ? { backgroundColor: d.completed.color.replace("text-", "") } : void 0
+					}),
+					/* @__PURE__ */ l(f, {
+						status: b,
+						icon: r.icon,
+						color: r.color,
+						size: s
+					}),
+					/* @__PURE__ */ l("div", { className: e("flex-1 h-0.5", i ? "" : "bg-border") })
+				]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e("mt-2 text-center", h && "cursor-pointer hover:opacity-80"),
+				onClick: C,
+				children: [/* @__PURE__ */ l("h4", {
+					className: e("font-medium", x[s].title),
+					children: r.title
+				}), r.description && /* @__PURE__ */ l("p", {
+					className: e("text-muted-foreground mt-0.5", x[s].desc),
+					children: r.description
+				})]
+			})
+		]
+	});
+	let w = _ === "right";
+	return /* @__PURE__ */ u("div", {
+		className: e("flex gap-4", w && "flex-row-reverse"),
+		children: [
+			_ !== "left" && c && r.date && /* @__PURE__ */ l("div", {
+				className: e("w-24 text-muted-foreground pt-1", x[s].date, w ? "text-left" : "text-right"),
+				children: S(r.date)
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex flex-col items-center",
+				children: [/* @__PURE__ */ l(f, {
+					status: b,
+					icon: r.icon,
+					color: r.color,
+					size: s
+				}), !i && /* @__PURE__ */ l("div", { className: e("w-0.5 flex-1 min-h-[24px] mt-1", b === "completed" ? "bg-green-500" : "bg-border") })]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e("flex-1 pb-8", w && "text-right"),
+				children: [
+					_ === "left" && c && r.date && /* @__PURE__ */ l("div", {
+						className: e("text-muted-foreground mb-1", x[s].date),
+						children: S(r.date)
+					}),
+					/* @__PURE__ */ u("div", {
+						className: e("inline-block", (h || m && r.content) && "cursor-pointer hover:opacity-80"),
+						onClick: C,
+						children: [/* @__PURE__ */ u("h4", {
+							className: e("font-medium", x[s].title),
+							children: [r.title, m && r.content && /* @__PURE__ */ l(t, {
+								variant: "ghost",
+								size: "icon",
+								className: "h-5 w-5 ml-1",
+								children: l(v ? o : a, { className: "h-3 w-3" })
+							})]
+						}), r.description && /* @__PURE__ */ l("p", {
+							className: e("text-muted-foreground mt-0.5", x[s].desc),
+							children: r.description
+						})]
+					}),
+					m && r.content && v && /* @__PURE__ */ l("div", {
+						className: "mt-3 p-3 bg-muted/50 rounded-lg",
+						children: r.content
+					})
+				]
+			})
+		]
+	});
+}
+function m({ items: t, orientation: n = "vertical", linePosition: r = "left", size: i = "md", showDates: a = !0, dateFormat: o, collapsible: s = !1, alternate: c = !1, onItemClick: u, className: d }) {
+	return n === "horizontal" ? /* @__PURE__ */ l("div", {
+		className: e("flex items-start overflow-x-auto", d),
+		children: t.map((e, n) => /* @__PURE__ */ l(p, {
+			item: e,
+			isLast: n === t.length - 1,
+			size: i,
+			showDate: a,
+			dateFormat: o,
+			collapsible: s,
+			onItemClick: u,
+			orientation: "horizontal",
+			position: "left"
+		}, e.id))
+	}) : /* @__PURE__ */ l("div", {
+		className: e("flex flex-col", r === "center" && "items-center", d),
+		children: t.map((e, n) => {
+			let d = "left";
+			return r === "center" && c ? d = n % 2 == 0 ? "left" : "right" : r === "right" && (d = "right"), /* @__PURE__ */ l(p, {
+				item: e,
+				isLast: n === t.length - 1,
+				size: i,
+				showDate: a,
+				dateFormat: o,
+				collapsible: s,
+				onItemClick: u,
+				orientation: "vertical",
+				position: d
+			}, e.id);
+		})
+	});
+}
+//#endregion
+export { m as default };

package/dist/components/waka-tooltip-tour/index.cjs.js

@@ -0,0 +1,11 @@
+"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`);var a=`waka-tour-completed-`,o=8,s=12;function c(e){return`${a}${e}`}function l(e){if(typeof window>`u`)return!1;try{return localStorage.getItem(c(e))===`true`}catch{return!1}}function u(e){if(!(typeof window>`u`))try{localStorage.setItem(c(e),`true`)}catch{}}function d(e){if(!(typeof window>`u`))try{localStorage.removeItem(c(e))}catch{}}function f(e){return typeof e==`string`?document.querySelector(e):e.current}function p(e){return e.getBoundingClientRect()}function m(e,t,n,r,i){let a=s+o,c=0,l=0,u=0,d=0,f=0,p=n,m={top:()=>{c=e.top-t.height-a,l=e.left+(e.width-t.width)/2,u=t.height,d=t.width/2-o,f=180},"top-start":()=>{c=e.top-t.height-a,l=e.left,u=t.height,d=Math.min(e.width/2,t.width/4),f=180},"top-end":()=>{c=e.top-t.height-a,l=e.right-t.width,u=t.height,d=t.width-Math.min(e.width/2,t.width/4)-o*2,f=180},bottom:()=>{c=e.bottom+a,l=e.left+(e.width-t.width)/2,u=-o*2,d=t.width/2-o,f=0},"bottom-start":()=>{c=e.bottom+a,l=e.left,u=-o*2,d=Math.min(e.width/2,t.width/4),f=0},"bottom-end":()=>{c=e.bottom+a,l=e.right-t.width,u=-o*2,d=t.width-Math.min(e.width/2,t.width/4)-o*2,f=0},left:()=>{c=e.top+(e.height-t.height)/2,l=e.left-t.width-a,u=t.height/2-o,d=t.width,f=90},"left-start":()=>{c=e.top,l=e.left-t.width-a,u=Math.min(e.height/2,t.height/4),d=t.width,f=90},"left-end":()=>{c=e.bottom-t.height,l=e.left-t.width-a,u=t.height-Math.min(e.height/2,t.height/4)-o*2,d=t.width,f=90},right:()=>{c=e.top+(e.height-t.height)/2,l=e.right+a,u=t.height/2-o,d=-o*2,f=-90},"right-start":()=>{c=e.top,l=e.right+a,u=Math.min(e.height/2,t.height/4),d=-o*2,f=-90},"right-end":()=>{c=e.bottom-t.height,l=e.right+a,u=t.height-Math.min(e.height/2,t.height/4)-o*2,d=-o*2,f=-90}};return m[n](),l<16?l=16:l+t.width>r-16&&(l=r-t.width-16),c<16&&n.startsWith(`top`)?(p=n.replace(`top`,`bottom`),m[p]()):c+t.height>i-16&&n.startsWith(`bottom`)&&(p=n.replace(`bottom`,`top`),m[p]()),{top:c,left:l,arrowTop:u,arrowLeft:d,arrowRotation:f,actualPlacement:p}}function h({tourId:e,persistCompletion:t=!0,autoStart:r=!1,autoStartDelay:i=500}){let[a,o]=n.useState(!1),[s,c]=n.useState(0),[f,p]=n.useState(!1);n.useEffect(()=>{t&&p(l(e))},[e,t]),n.useEffect(()=>{if(r&&!f&&!a){let e=setTimeout(()=>{o(!0)},i);return()=>clearTimeout(e)}},[r,f,a,i]);let m=n.useCallback((e=0)=>{c(e),o(!0)},[]),h=n.useCallback(()=>{o(!1)},[]),g=n.useCallback(()=>{c(e=>e+1)},[]),_=n.useCallback(()=>{c(e=>Math.max(0,e-1))},[]),v=n.useCallback(e=>{c(e)},[]),y=n.useCallback(()=>{o(!1),t&&(u(e),p(!0))},[e,t]),b=n.useCallback(()=>{o(!1)},[]);return{isActive:a,currentStep:s,start:m,stop:h,next:g,prev:_,goTo:v,complete:y,skip:b,reset:n.useCallback(()=>{d(e),p(!1),c(0)},[e]),hasCompleted:f,tourProps:{isActive:a,onActiveChange:n.useCallback(e=>{o(e),e||c(0)},[]),onComplete:y,onSkip:b,onStepChange:c,startAt:s}}}function g({targetRect:e,padding:n,onClick:r,className:a}){if(!e)return(0,i.jsx)(`div`,{className:t.cn(`fixed inset-0 z-[9998] bg-black/60 transition-opacity duration-300`,a),onClick:r});let o={position:`fixed`,inset:0,zIndex:9998,background:`
+      linear-gradient(to right, rgba(0,0,0,0.6) ${e.left-n}px, transparent ${e.left-n}px),
+      linear-gradient(to left, rgba(0,0,0,0.6) ${window.innerWidth-e.right-n}px, transparent ${window.innerWidth-e.right-n}px),
+      linear-gradient(to bottom, rgba(0,0,0,0.6) ${e.top-n}px, transparent ${e.top-n}px),
+      linear-gradient(to top, rgba(0,0,0,0.6) ${window.innerHeight-e.bottom-n}px, transparent ${window.innerHeight-e.bottom-n}px)
+    `};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:t.cn(`transition-all duration-300`,a),style:o,onClick:r}),(0,i.jsx)(`div`,{className:`fixed z-[9999] pointer-events-none rounded-md ring-2 ring-primary ring-offset-2 ring-offset-transparent transition-all duration-300`,style:{top:e.top-n,left:e.left-n,width:e.width+n*2,height:e.height+n*2}})]})}function _({top:e,left:t,rotation:n}){return(0,i.jsx)(`div`,{className:`absolute w-0 h-0`,style:{top:e,left:t,transform:`rotate(${n}deg)`,borderLeft:`${o}px solid transparent`,borderRight:`${o}px solid transparent`,borderBottom:`${o}px solid hsl(var(--popover))`}})}function v({tourId:e,steps:a,isActive:o,onActiveChange:s,onComplete:c,onSkip:l,onStepChange:d,startAt:h=0,autoAdvance:v,showSkip:y=!0,showProgress:b=!0,showNavigation:x=!0,persistCompletion:S=!0,className:C,overlayClassName:w,scrollToTarget:T=!0,scrollBehavior:E=`smooth`,closeOnOverlayClick:D=!1,closeOnEscape:O=!0,skipText:k=`Skip tour`,nextText:A=`Next`,prevText:j=`Back`,finishText:M=`Finish`}){let[N,P]=n.useState(h),[F,I]=n.useState(null),[L,R]=n.useState(null),[z,B]=n.useState(!1),V=n.useRef(null),H=n.useRef(void 0),U=a[N],W=N===0,G=N===a.length-1;n.useEffect(()=>{P(h)},[h]),n.useEffect(()=>{if(!o||!O)return;let e=e=>{e.key===`Escape`&&Y()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[o,O]),n.useEffect(()=>{if(!o||!U)return;let e=()=>{let e=f(U.target);if(e){let t=p(e);I(t),T&&(t.top>=0&&t.left>=0&&t.bottom<=window.innerHeight&&t.right<=window.innerWidth||(e.scrollIntoView({behavior:E,block:`center`,inline:`center`}),requestAnimationFrame(()=>{I(p(e))})))}else I(null)};B(!0),e();let t=setTimeout(()=>{B(!1)},300);return window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{clearTimeout(t),window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[o,U,N,T,E]),n.useEffect(()=>{!F||!V.current||!U||R(m(F,V.current.getBoundingClientRect(),U.placement||`bottom`,window.innerWidth,window.innerHeight))},[F,U]),n.useEffect(()=>{if(!(!o||!v||G))return H.current=setTimeout(()=>{K()},v),()=>{H.current&&clearTimeout(H.current)}},[o,v,N,G]);let K=()=>{if(G)J();else{let e=N+1;P(e),d?.(e)}},q=()=>{if(!W){let e=N-1;P(e),d?.(e)}},J=()=>{S&&u(e),s?.(!1),c?.()},Y=()=>{s?.(!1),l?.()},X=()=>{D&&Y()},Z=()=>{U?.onAction?.(),K()};if(!o||!U)return null;let Q=U.spotlightPadding??8;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(g,{targetRect:U.highlight===!1?null:F,padding:Q,onClick:X,className:w}),(0,i.jsxs)(`div`,{ref:V,role:`dialog`,"aria-modal":`true`,"aria-labelledby":`tour-step-${U.id}-title`,"aria-describedby":`tour-step-${U.id}-content`,className:t.cn(`fixed z-[10000] w-80 max-w-[calc(100vw-32px)] rounded-lg border bg-popover p-4 shadow-xl`,`transition-all duration-300`,z?`opacity-0 scale-95`:`opacity-100 scale-100`,C),style:{top:L?.top??0,left:L?.left??0},children:[L&&(0,i.jsx)(_,{top:L.arrowTop,left:L.arrowLeft,rotation:L.arrowRotation}),(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-2 mb-2`,children:[(0,i.jsx)(`h3`,{id:`tour-step-${U.id}-title`,className:`font-semibold text-foreground`,children:U.title}),y&&(0,i.jsx)(`button`,{onClick:Y,className:`p-1 -m-1 rounded-md hover:bg-accent transition-colors`,"aria-label":`Close tour`,children:(0,i.jsx)(r.X,{className:`h-4 w-4 text-muted-foreground`})})]}),(0,i.jsx)(`div`,{id:`tour-step-${U.id}-content`,className:`text-sm text-muted-foreground mb-4`,children:U.content}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[b&&(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[N+1,` of `,a.length]}),y&&!G&&(0,i.jsxs)(`button`,{onClick:Y,className:`text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1`,children:[(0,i.jsx)(r.SkipForward,{className:`h-3 w-3`}),k]})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[x&&!W&&(0,i.jsxs)(`button`,{onClick:q,className:`flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md hover:bg-accent transition-colors`,children:[(0,i.jsx)(r.ChevronLeft,{className:`h-4 w-4`}),j]}),U.actionText?(0,i.jsx)(`button`,{onClick:Z,className:`px-3 py-1.5 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors`,children:U.actionText}):(0,i.jsxs)(`button`,{onClick:K,className:`flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors`,children:[G?M:A,!G&&(0,i.jsx)(r.ChevronRight,{className:`h-4 w-4`})]})]})]}),v&&!G&&(0,i.jsxs)(`div`,{className:`absolute bottom-0 left-0 right-0 h-1 bg-muted rounded-b-lg overflow-hidden`,children:[(0,i.jsx)(`div`,{className:`h-full bg-primary`,style:{width:`100%`,animation:`waka-tour-progress ${v}ms linear forwards`}}),(0,i.jsx)(`style`,{dangerouslySetInnerHTML:{__html:`
+                  @keyframes waka-tour-progress {
+                    from { width: 0%; }
+                    to { width: 100%; }
+                  }
+                `}})]})]})]})}exports.default=v,exports.useTooltipTour=h;

package/dist/components/waka-tooltip-tour/index.d.ts

@@ -119,5 +119,5 @@ export declare function useTooltipTour({ tourId, persistCompletion, autoStart, a
  * Use `WakaTour` compound (with `Tour.Step`, `Tour.Tooltip`) instead (futur).
  * See `docs/audit/remove-relocate.md` §2.4.
  */
-export declare function WakaTooltipTour({ tourId, steps, isActive, onActiveChange, onComplete, onSkip, onStepChange, startAt, autoAdvance, showSkip, showProgress, showNavigation, persistCompletion, className, overlayClassName, scrollToTarget, scrollBehavior, closeOnOverlayClick, closeOnEscape, skipText, nextText, prevText, finishText, }: WakaTooltipTourProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaTooltipTour({ tourId, steps, isActive, onActiveChange, onComplete, onSkip, onStepChange, startAt, autoAdvance, showSkip, showProgress, showNavigation, persistCompletion, className, overlayClassName, scrollToTarget, scrollBehavior, closeOnOverlayClick, closeOnEscape, skipText, nextText, prevText, finishText, }: WakaTooltipTourProps): import("react/jsx-runtime").JSX.Element | null;
 export default WakaTooltipTour;