@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-cohort-table/index.es.js

@@ -0,0 +1,459 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { localDateKey as t } from "../../utils/local-date.es.js";
+import * as n from "react";
+import { Download as r, Info as i, TrendingDown as a, TrendingUp as o, Users as s } from "lucide-react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/waka-cohort-table/index.tsx
+var d = {
+	min: "#fef2f2",
+	mid: "#fef9c3",
+	max: "#dcfce7",
+	midValue: 50
+};
+function f(e, t, n, r) {
+	let i = (Math.max(t, Math.min(n, e)) - t) / (n - t), a = (e) => {
+		let t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+		return t ? {
+			r: parseInt(t[1], 16),
+			g: parseInt(t[2], 16),
+			b: parseInt(t[3], 16)
+		} : {
+			r: 255,
+			g: 255,
+			b: 255
+		};
+	}, o = a(r.min), s = a(r.max), c = r.mid ? a(r.mid) : null, l = (r.midValue ?? 50) / 100, u, d, f;
+	if (c && i <= l) {
+		let e = i / l;
+		u = Math.round(o.r + (c.r - o.r) * e), d = Math.round(o.g + (c.g - o.g) * e), f = Math.round(o.b + (c.b - o.b) * e);
+	} else if (c && i > l) {
+		let e = (i - l) / (1 - l);
+		u = Math.round(c.r + (s.r - c.r) * e), d = Math.round(c.g + (s.g - c.g) * e), f = Math.round(c.b + (s.b - c.b) * e);
+	} else u = Math.round(o.r + (s.r - o.r) * i), d = Math.round(o.g + (s.g - o.g) * i), f = Math.round(o.b + (s.b - o.b) * i);
+	return `rgb(${u}, ${d}, ${f})`;
+}
+function p(e, t, n) {
+	return t ? `${e.toFixed(n)}%` : e.toFixed(n);
+}
+function m(e) {
+	return e >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(1)}K` : e.toString();
+}
+function h(e, t) {
+	return `${{
+		day: "Day",
+		week: "Week",
+		month: "Month",
+		quarter: "Q",
+		year: "Year"
+	}[e]} ${t}`;
+}
+function g(e) {
+	if (e.length === 0) return [];
+	let t = Math.max(...e.map((e) => e.data.length)), n = [];
+	for (let r = 0; r < t; r++) {
+		let t = e.map((e) => e.data[r]?.value).filter((e) => e !== void 0);
+		if (t.length > 0) {
+			let e = t.reduce((e, t) => e + t, 0);
+			n.push({
+				value: e / t.length,
+				count: t.length
+			});
+		}
+	}
+	return n;
+}
+function _(e, t) {
+	let n = e - t;
+	return Math.abs(n) < .5 ? "neutral" : n > 0 ? "up" : "down";
+}
+function v(e, t, n) {
+	let r = Math.max(...e.map((e) => e.data.length)), i = [
+		"Cohort",
+		"Size",
+		...Array.from({ length: r }, (e, n) => h(t, n))
+	], a = e.map((e) => [
+		e.label,
+		e.size.toString(),
+		...e.data.map((e) => e.value.toString())
+	]);
+	return [i.join(","), ...a.map((e) => e.join(","))].join("\n");
+}
+function y(e, t) {
+	let n = e.map((e) => ({
+		id: e.id,
+		label: e.label,
+		date: e.date.toISOString(),
+		size: e.size,
+		data: e.data.map((e) => ({
+			value: e.value,
+			count: e.count,
+			...t && e.metadata ? { metadata: e.metadata } : {}
+		}))
+	}));
+	return JSON.stringify(n, null, 2);
+}
+function b({ children: e, content: t, visible: n, position: r }) {
+	return /* @__PURE__ */ u("div", {
+		className: "relative inline-block",
+		children: [e, n && /* @__PURE__ */ u("div", {
+			className: "fixed z-50 px-3 py-2 text-sm bg-popover text-popover-foreground rounded-md shadow-lg border max-w-xs",
+			style: {
+				left: r.x,
+				top: r.y - 10,
+				transform: "translate(-50%, -100%)"
+			},
+			children: [t, /* @__PURE__ */ l("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover" })]
+		})]
+	});
+}
+function x({ colorScale: e, min: t, max: n, showAsPercentage: r }) {
+	return (n - t) / 4, /* @__PURE__ */ u("div", {
+		className: "flex items-center gap-2 text-xs text-muted-foreground",
+		children: [
+			/* @__PURE__ */ l("span", { children: r ? `${t}%` : t }),
+			/* @__PURE__ */ l("div", {
+				className: "flex h-3 rounded overflow-hidden",
+				children: Array.from({ length: 20 }, (r, i) => /* @__PURE__ */ l("div", {
+					className: "w-3 h-full",
+					style: { backgroundColor: f(t + (n - t) * (i / 19), t, n, e) }
+				}, i))
+			}),
+			/* @__PURE__ */ l("span", { children: r ? `${n}%` : n })
+		]
+	});
+}
+function S({ dataPoint: t, row: r, periodIndex: i, colorScale: a, showAsPercentage: o, decimalPlaces: s, highlighted: c, onClick: d, renderCell: h, renderTooltip: g, className: _ }) {
+	let [v, y] = n.useState(!1), [x, S] = n.useState({
+		x: 0,
+		y: 0
+	}), C = n.useRef(null), w = f(t.value, 0, 100, a), T = (e) => {
+		y(!0);
+		let t = e.target.getBoundingClientRect();
+		S({
+			x: t.left + t.width / 2,
+			y: t.top
+		});
+	}, E = () => {
+		y(!1);
+	}, D = /* @__PURE__ */ u("div", {
+		className: "space-y-1",
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "font-medium",
+				children: r.label
+			}),
+			/* @__PURE__ */ u("div", { children: [
+				"Period ",
+				i,
+				": ",
+				p(t.value, o, s)
+			] }),
+			t.count !== void 0 && /* @__PURE__ */ u("div", {
+				className: "text-muted-foreground",
+				children: ["Count: ", m(t.count)]
+			}),
+			t.metadata && Object.keys(t.metadata).length > 0 && /* @__PURE__ */ l("div", {
+				className: "pt-1 border-t",
+				children: Object.entries(t.metadata).map(([e, t]) => /* @__PURE__ */ u("div", {
+					className: "text-muted-foreground",
+					children: [
+						e,
+						": ",
+						String(t)
+					]
+				}, e))
+			})
+		]
+	});
+	return /* @__PURE__ */ l("td", {
+		ref: C,
+		className: e("px-3 py-2 text-center text-sm font-medium transition-all cursor-pointer", "border-r border-border last:border-r-0", c && "ring-2 ring-primary ring-inset", _),
+		style: { backgroundColor: w },
+		onClick: d,
+		onMouseEnter: T,
+		onMouseLeave: E,
+		children: /* @__PURE__ */ l(b, {
+			content: g ? g(t, r, i) : D,
+			visible: v,
+			position: x,
+			children: h ? h(t, r, i) : p(t.value, o, s)
+		})
+	});
+}
+function C({ data: b, period: C = "month", metric: w = "retention", metricLabel: T, showAsPercentage: E = !0, decimalPlaces: D = 1, colorScale: O = d, showCohortSize: k = !0, showAverageRow: A = !0, showTrends: j = !0, highlightOnHover: M = !0, showLegend: N = !0, enableExport: P = !0, onCellClick: F, onExport: I, renderCell: L, renderTooltip: R, className: z, tableClassName: B, headerClassName: V, cellClassName: H }) {
+	let [U, W] = n.useState(null), [G, K] = n.useState(null), q = n.useMemo(() => Math.max(...b.map((e) => e.data.length), 0), [b]), J = n.useMemo(() => g(b), [b]), Y = n.useCallback((e) => {
+		let n = T || w, r = `cohort-${n}-${t(/* @__PURE__ */ new Date())}`;
+		if (I) {
+			I({
+				format: e,
+				filename: r,
+				includeMetadata: !0
+			});
+			return;
+		}
+		let i, a, o;
+		e === "csv" ? (i = v(b, C, n), a = "text/csv", o = "csv") : (i = y(b, !0), a = "application/json", o = "json");
+		let s = new Blob([i], { type: a }), c = URL.createObjectURL(s), l = document.createElement("a");
+		l.href = c, l.download = `${r}.${o}`, document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(c);
+	}, [
+		b,
+		C,
+		w,
+		T,
+		I
+	]), X = n.useCallback((e, t) => {
+		M && (W(e), K(t));
+	}, [M]), Z = n.useCallback(() => {
+		W(null), K(null);
+	}, []), Q = T || {
+		retention: "Retention",
+		churn: "Churn",
+		revenue: "Revenue",
+		engagement: "Engagement",
+		custom: "Value"
+	}[w];
+	return b.length === 0 ? /* @__PURE__ */ u("div", {
+		className: e("flex flex-col items-center justify-center py-12 text-center", z),
+		children: [
+			/* @__PURE__ */ l(s, { className: "h-12 w-12 text-muted-foreground/50 mb-4" }),
+			/* @__PURE__ */ l("h3", {
+				className: "text-lg font-medium text-muted-foreground",
+				children: "No cohort data"
+			}),
+			/* @__PURE__ */ l("p", {
+				className: "text-sm text-muted-foreground/70 mt-1",
+				children: "Add cohort data to see the analysis table."
+			})
+		]
+	}) : /* @__PURE__ */ u("div", {
+		className: e("space-y-4", z),
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center justify-between flex-wrap gap-4",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex items-center gap-4",
+					children: [/* @__PURE__ */ u("h3", {
+						className: "text-lg font-semibold",
+						children: [Q, " Analysis"]
+					}), N && /* @__PURE__ */ l(x, {
+						colorScale: O,
+						min: 0,
+						max: 100,
+						showAsPercentage: E
+					})]
+				}), P && /* @__PURE__ */ u("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ u("button", {
+						onClick: () => Y("csv"),
+						className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors",
+						children: [/* @__PURE__ */ l(r, { className: "h-4 w-4" }), "CSV"]
+					}), /* @__PURE__ */ u("button", {
+						onClick: () => Y("json"),
+						className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors",
+						children: [/* @__PURE__ */ l(r, { className: "h-4 w-4" }), "JSON"]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "overflow-x-auto rounded-lg border border-border",
+				children: /* @__PURE__ */ u("table", {
+					className: e("w-full border-collapse", B),
+					children: [/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ u("tr", {
+						className: "bg-muted/50",
+						children: [
+							/* @__PURE__ */ l("th", {
+								className: e("px-4 py-3 text-left text-sm font-semibold text-foreground border-b border-r border-border sticky left-0 bg-muted/50 z-10", V),
+								children: "Cohort"
+							}),
+							k && /* @__PURE__ */ l("th", {
+								className: e("px-4 py-3 text-center text-sm font-semibold text-foreground border-b border-r border-border", V),
+								children: /* @__PURE__ */ u("div", {
+									className: "flex items-center justify-center gap-1",
+									children: [/* @__PURE__ */ l(s, { className: "h-4 w-4" }), "Size"]
+								})
+							}),
+							Array.from({ length: q }, (t, n) => /* @__PURE__ */ l("th", {
+								className: e("px-3 py-3 text-center text-sm font-semibold text-foreground border-b border-r border-border last:border-r-0 transition-colors", G === n && M && "bg-accent", V),
+								children: h(C, n)
+							}, n))
+						]
+					}) }), /* @__PURE__ */ u("tbody", { children: [b.map((t, n) => {
+						let r = U === t.id;
+						return /* @__PURE__ */ u("tr", {
+							className: e("transition-colors", r && M && "bg-accent/30"),
+							onMouseEnter: () => W(t.id),
+							onMouseLeave: () => W(null),
+							children: [
+								/* @__PURE__ */ l("td", {
+									className: e("px-4 py-2 text-sm font-medium text-foreground border-b border-r border-border sticky left-0 bg-background z-10", r && M && "bg-accent/30", H),
+									children: /* @__PURE__ */ u("div", {
+										className: "flex items-center gap-2",
+										children: [t.label, j && n > 0 && t.data[0] && b[n - 1].data[0] && /* @__PURE__ */ u(c, { children: [_(t.data[0].value, b[n - 1].data[0].value) === "up" && /* @__PURE__ */ l(o, { className: "h-3 w-3 text-green-600" }), _(t.data[0].value, b[n - 1].data[0].value) === "down" && /* @__PURE__ */ l(a, { className: "h-3 w-3 text-red-600" })] })]
+									})
+								}),
+								k && /* @__PURE__ */ l("td", {
+									className: e("px-4 py-2 text-center text-sm text-muted-foreground border-b border-r border-border", H),
+									children: m(t.size)
+								}),
+								Array.from({ length: q }, (n, i) => {
+									let a = t.data[i];
+									return a ? /* @__PURE__ */ l(S, {
+										dataPoint: a,
+										row: t,
+										periodIndex: i,
+										colorScale: O,
+										showAsPercentage: E,
+										decimalPlaces: D,
+										highlighted: (r || G === i) && M,
+										onClick: () => F?.(t, i, a),
+										renderCell: L,
+										renderTooltip: R,
+										className: e("border-b", G === i && M && "ring-2 ring-primary/50 ring-inset", H)
+									}, i) : /* @__PURE__ */ l("td", {
+										className: e("px-3 py-2 text-center text-sm text-muted-foreground border-b border-r border-border last:border-r-0 bg-muted/20", H),
+										onMouseEnter: () => X(t.id, i),
+										onMouseLeave: Z,
+										children: "-"
+									}, i);
+								})
+							]
+						}, t.id);
+					}), A && J.length > 0 && /* @__PURE__ */ u("tr", {
+						className: "bg-muted/30 font-medium",
+						children: [
+							/* @__PURE__ */ l("td", {
+								className: e("px-4 py-2 text-sm font-semibold text-foreground border-r border-border sticky left-0 bg-muted/30 z-10", H),
+								children: /* @__PURE__ */ u("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ l(i, { className: "h-4 w-4 text-muted-foreground" }), "Average"]
+								})
+							}),
+							k && /* @__PURE__ */ l("td", {
+								className: e("px-4 py-2 text-center text-sm text-muted-foreground border-r border-border", H),
+								children: m(Math.round(b.reduce((e, t) => e + t.size, 0) / b.length))
+							}),
+							Array.from({ length: q }, (t, n) => {
+								let r = J[n];
+								return r ? /* @__PURE__ */ l("td", {
+									className: e("px-3 py-2 text-center text-sm font-semibold border-r border-border last:border-r-0", H),
+									style: { backgroundColor: f(r.value, 0, 100, O) },
+									children: p(r.value, E, D)
+								}, n) : /* @__PURE__ */ l("td", {
+									className: e("px-3 py-2 text-center text-sm text-muted-foreground border-r border-border last:border-r-0", H),
+									children: "-"
+								}, n);
+							})
+						]
+					})] })]
+				})
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center justify-between text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ u("span", { children: [
+					b.length,
+					" cohort",
+					b.length === 1 ? "" : "s",
+					" | ",
+					q,
+					" period",
+					q === 1 ? "" : "s"
+				] }), /* @__PURE__ */ u("span", { children: ["Total users: ", m(b.reduce((e, t) => e + t.size, 0))] })]
+			})
+		]
+	});
+}
+function w({ initialData: e = [], defaultPeriod: t = "month", defaultMetric: r = "retention" } = {}) {
+	let [i, a] = n.useState(e), [o, s] = n.useState(t), [c, l] = n.useState(r), [u, d] = n.useState(null);
+	return {
+		data: i,
+		period: o,
+		metric: c,
+		selectedCohort: u,
+		statistics: n.useMemo(() => {
+			if (i.length === 0) return {
+				totalCohorts: 0,
+				totalUsers: 0,
+				averageCohortSize: 0,
+				averageRetentionByPeriod: [],
+				overallAverageRetention: 0,
+				bestCohort: null,
+				worstCohort: null
+			};
+			let e = i.reduce((e, t) => e + t.size, 0), t = e / i.length, n = Math.max(...i.map((e) => e.data.length)), r = Array.from({ length: n }, (e, t) => {
+				let n = i.map((e) => e.data[t]?.value).filter((e) => e !== void 0);
+				return n.length > 0 ? n.reduce((e, t) => e + t, 0) / n.length : 0;
+			}), a = i.flatMap((e) => e.data.map((e) => e.value)), o = a.length > 0 ? a.reduce((e, t) => e + t, 0) / a.length : 0, s = [...i.map((e) => ({
+				row: e,
+				average: e.data.length > 0 ? e.data.reduce((e, t) => e + t.value, 0) / e.data.length : 0
+			}))].sort((e, t) => t.average - e.average), c = s[0]?.row || null, l = s[s.length - 1]?.row || null;
+			return {
+				totalCohorts: i.length,
+				totalUsers: e,
+				averageCohortSize: t,
+				averageRetentionByPeriod: r,
+				overallAverageRetention: o,
+				bestCohort: c,
+				worstCohort: l
+			};
+		}, [i]),
+		setData: a,
+		setPeriod: s,
+		setMetric: l,
+		setSelectedCohort: d,
+		addCohort: n.useCallback((e) => {
+			a((t) => [...t, e]);
+		}, []),
+		updateCohort: n.useCallback((e, t) => {
+			a((n) => n.map((n) => n.id === e ? {
+				...n,
+				...t
+			} : n));
+		}, []),
+		removeCohort: n.useCallback((e) => {
+			a((t) => t.filter((t) => t.id !== e));
+		}, []),
+		updateDataPoint: n.useCallback((e, t, n) => {
+			a((r) => r.map((r) => {
+				if (r.id !== e) return r;
+				let i = [...r.data];
+				return i[t] && (i[t] = {
+					...i[t],
+					...n
+				}), {
+					...r,
+					data: i
+				};
+			}));
+		}, []),
+		sortCohorts: n.useCallback((e, t = "desc") => {
+			a((n) => [...n].sort((n, r) => {
+				let i = 0;
+				switch (e) {
+					case "date":
+						i = n.date.getTime() - r.date.getTime();
+						break;
+					case "size":
+						i = n.size - r.size;
+						break;
+					case "retention":
+						i = (n.data.length > 0 ? n.data.reduce((e, t) => e + t.value, 0) / n.data.length : 0) - (r.data.length > 0 ? r.data.reduce((e, t) => e + t.value, 0) / r.data.length : 0);
+						break;
+				}
+				return t === "asc" ? i : -i;
+			}));
+		}, []),
+		filterByDateRange: n.useCallback((e, t) => i.filter((n) => n.date >= e && n.date <= t), [i]),
+		getCohortById: n.useCallback((e) => i.find((t) => t.id === e), [i]),
+		reset: n.useCallback(() => {
+			a(e), s(t), l(r), d(null);
+		}, [
+			e,
+			t,
+			r
+		])
+	};
+}
+//#endregion
+export { C as WakaCohortTable, C as default, w as useCohortTable };

package/dist/components/waka-color-picker/index.cjs.js

@@ -0,0 +1,5 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../button/index.cjs.js"),r=require("../label/index.cjs.js"),i=require("../input/index.cjs.js"),a=require("../popover/index.cjs.js");let o=require("react");o=e.__toESM(o);let s=require("lucide-react"),c=require("react/jsx-runtime");var l=[`#ef4444`,`#f97316`,`#f59e0b`,`#eab308`,`#84cc16`,`#22c55e`,`#10b981`,`#14b8a6`,`#06b6d4`,`#0ea5e9`,`#3b82f6`,`#6366f1`,`#8b5cf6`,`#a855f7`,`#d946ef`,`#ec4899`,`#f43f5e`,`#000000`,`#6b7280`,`#ffffff`];function u(e,t,n){t/=100,n/=100;let r=t*Math.min(n,1-n),i=t=>{let i=(t+e/30)%12;return n-r*Math.max(Math.min(i-3,9-i,1),-1)};return[Math.round(i(0)*255),Math.round(i(8)*255),Math.round(i(4)*255)]}function d(e,t,n){e/=255,t/=255,n/=255;let r=Math.max(e,t,n),i=Math.min(e,t,n),a=0,o=0,s=(r+i)/2;if(r!==i){let c=r-i;switch(o=s>.5?c/(2-r-i):c/(r+i),r){case e:a=((t-n)/c+(t<n?6:0))*60;break;case t:a=((n-e)/c+2)*60;break;case n:a=((e-t)/c+4)*60;break}}return[Math.round(a),Math.round(o*100),Math.round(s*100)]}function f(e){let t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?[parseInt(t[1],16),parseInt(t[2],16),parseInt(t[3],16)]:null}function p(e,t,n){return`#`+[e,t,n].map(e=>e.toString(16).padStart(2,`0`)).join(``)}function m(e){if(e.startsWith(`#`))return f(e);let t=e.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);if(t)return[parseInt(t[1]),parseInt(t[2]),parseInt(t[3])];let n=e.match(/hsl\((\d+),\s*(\d+)%?,\s*(\d+)%?\)/);return n?u(parseInt(n[1]),parseInt(n[2]),parseInt(n[3])):null}function h(e,t,n,r){switch(r){case`hex`:return p(e,t,n);case`rgb`:return`rgb(${e}, ${t}, ${n})`;case`hsl`:{let[r,i,a]=d(e,t,n);return`hsl(${r}, ${i}%, ${a}%)`}default:return p(e,t,n)}}var g=o.forwardRef(({value:e=`#3b82f6`,onChange:f,format:p=`hex`,showAlpha:g=!1,showPresets:_=!0,presets:v=l,showEyeDropper:y=!0,disabled:b=!1,placeholder:x=`Sélectionner une couleur`,className:S,size:C=`md`},w)=>{let[T,E]=o.useState(!1),[D,O]=o.useState(0),[k,A]=o.useState(100),[j,M]=o.useState(50),[N,P]=o.useState(e),F=o.useRef(null),I=o.useRef(null);o.useEffect(()=>{let t=m(e);if(t){let[n,r,i]=d(...t);O(n),A(r),M(i),P(e)}},[e]);let L=o.useCallback((e,t,n)=>{let[r,i,a]=u(e,t,n),o=h(r,i,a,p);P(o),f?.(o)},[p,f]),R=e=>{e.preventDefault();let t=F.current?.getBoundingClientRect();if(!t)return;let n=(e,n)=>{let r=Math.max(0,Math.min(100,(e-t.left)/t.width*100)),i=Math.max(0,Math.min(100,100-(n-t.top)/t.height*100));A(r),M(i),L(D,r,i)};n(e.clientX,e.clientY);let r=e=>n(e.clientX,e.clientY),i=()=>{document.removeEventListener(`mousemove`,r),document.removeEventListener(`mouseup`,i)};document.addEventListener(`mousemove`,r),document.addEventListener(`mouseup`,i)},z=e=>{e.preventDefault();let t=I.current?.getBoundingClientRect();if(!t)return;let n=e=>{let n=Math.max(0,Math.min(360,(e-t.left)/t.width*360));O(n),L(n,k,j)};n(e.clientX);let r=e=>n(e.clientX),i=()=>{document.removeEventListener(`mousemove`,r),document.removeEventListener(`mouseup`,i)};document.addEventListener(`mousemove`,r),document.addEventListener(`mouseup`,i)},B=async()=>{if(`EyeDropper`in window)try{let e=m((await new window.EyeDropper().open()).sRGBHex);if(e){let[t,n,r]=d(...e);O(t),A(n),M(r),L(t,n,r)}}catch{}},V=e=>{let t=e.target.value;P(t);let n=m(t);if(n){let[e,t,r]=d(...n);O(e),A(t),M(r),f?.(h(...n,p))}},H={sm:`h-7 w-7`,md:`h-9 w-9`,lg:`h-11 w-11`},U=y&&typeof window<`u`&&`EyeDropper`in window;return(0,c.jsxs)(a.Popover,{open:T,onOpenChange:E,children:[(0,c.jsx)(a.PopoverTrigger,{asChild:!0,children:(0,c.jsx)(n.Button,{ref:w,variant:`outline`,disabled:b,className:t.cn(`p-0.5 rounded-md border`,H[C],S),title:x,children:(0,c.jsx)(`div`,{className:`w-full h-full rounded`,style:{backgroundColor:e}})})}),(0,c.jsx)(a.PopoverContent,{className:`w-64 p-3`,align:`start`,children:(0,c.jsxs)(`div`,{className:`space-y-3`,children:[(0,c.jsx)(`div`,{ref:F,className:`relative w-full h-36 rounded cursor-crosshair`,style:{background:`
+                  linear-gradient(to top, #000, transparent),
+                  linear-gradient(to right, #fff, transparent),
+                  hsl(${D}, 100%, 50%)
+                `},onMouseDown:R,children:(0,c.jsx)(`div`,{className:`absolute w-4 h-4 border-2 border-white rounded-full shadow -translate-x-1/2 -translate-y-1/2 pointer-events-none`,style:{left:`${k}%`,top:`${100-j}%`,backgroundColor:`hsl(${D}, ${k}%, ${j}%)`}})}),(0,c.jsx)(`div`,{ref:I,className:`relative w-full h-3 rounded cursor-pointer`,style:{background:`linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)`},onMouseDown:z,children:(0,c.jsx)(`div`,{className:`absolute w-3 h-5 border-2 border-white rounded -translate-x-1/2 -top-1 shadow pointer-events-none`,style:{left:`${D/360*100}%`,backgroundColor:`hsl(${D}, 100%, 50%)`}})}),(0,c.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,c.jsx)(`div`,{className:`w-8 h-8 rounded border flex-shrink-0`,style:{backgroundColor:e}}),(0,c.jsx)(i.Input,{value:N,onChange:V,className:`h-8 text-sm font-mono`,placeholder:p===`hex`?`#000000`:p===`rgb`?`rgb(0,0,0)`:`hsl(0,0%,0%)`}),U&&(0,c.jsx)(n.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8`,onClick:B,title:`Pipette`,children:(0,c.jsx)(s.Pipette,{className:`h-4 w-4`})})]}),_&&v.length>0&&(0,c.jsxs)(`div`,{children:[(0,c.jsx)(r.Label,{className:`text-xs text-muted-foreground`,children:`Couleurs prédéfinies`}),(0,c.jsx)(`div`,{className:`grid grid-cols-10 gap-1 mt-1`,children:v.map(n=>(0,c.jsx)(`button`,{className:t.cn(`w-5 h-5 rounded border transition-transform hover:scale-110`,e.toLowerCase()===n.toLowerCase()&&`ring-2 ring-primary ring-offset-1`),style:{backgroundColor:n},onClick:()=>{let e=m(n);if(e){let[t,n,r]=d(...e);O(t),A(n),M(r),L(t,n,r)}}},n))})]})]})})]})});g.displayName=`WakaColorPicker`;var _=o.forwardRef(({error:e,label:n,className:i,...a},o)=>(0,c.jsxs)(`div`,{className:t.cn(`space-y-1.5`,i),children:[n&&(0,c.jsx)(r.Label,{htmlFor:a.name,children:n}),(0,c.jsx)(g,{ref:o,...a}),e&&(0,c.jsx)(`p`,{className:`text-sm text-destructive`,children:e})]}));_.displayName=`WakaColorPickerForm`,exports.WakaColorPicker=g,exports.default=g,exports.WakaColorPickerForm=_;