@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-slider-range/index.es.js

@@ -0,0 +1,382 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/waka-slider-range/index.tsx
+function a(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function o(e, t, n) {
+	let r = Math.round((e - n) / t) * t + n, i = String(t).split(".")[1]?.length || 0;
+	return Number(r.toFixed(i));
+}
+function s(e, t, n) {
+	return (e - t) / (n - t) * 100;
+}
+function c(e, t, n) {
+	return e / 100 * (n - t) + t;
+}
+function l(e, t, n) {
+	switch (t) {
+		case "currency": return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: n,
+			minimumFractionDigits: 0,
+			maximumFractionDigits: 0
+		}).format(e);
+		case "percentage": return `${e}%`;
+		default: return String(e);
+	}
+}
+function u(e = {}) {
+	let { initialValue: n = [0, 100], min: r = 0, max: i = 100, step: s = 1, minDistance: c = 0 } = e, [l, u] = t.useState(() => {
+		let [e, t] = n;
+		return [a(o(e, s, r), r, i), a(o(t, s, r), r, i)];
+	}), d = t.useCallback((e) => {
+		let [t, n] = e, l = a(o(t, s, r), r, i - c), d = a(o(n, s, r), l + c, i);
+		u([l, d]);
+	}, [
+		r,
+		i,
+		s,
+		c
+	]);
+	return {
+		value: l,
+		setValue: d,
+		setMin: t.useCallback((e) => {
+			d([e, l[1]]);
+		}, [d, l]),
+		setMax: t.useCallback((e) => {
+			d([l[0], e]);
+		}, [d, l]),
+		reset: t.useCallback(() => {
+			let [e, t] = n;
+			u([a(o(e, s, r), r, i), a(o(t, s, r), r, i)]);
+		}, [
+			n,
+			r,
+			i,
+			s
+		]),
+		min: r,
+		max: i,
+		step: s
+	};
+}
+function d({ value: t, position: n, visible: a, size: o }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("absolute bottom-full mb-2 -translate-x-1/2 rounded-md bg-popover border border-border shadow-md transition-opacity duration-150", {
+			sm: "text-xs px-1.5 py-0.5",
+			md: "text-sm px-2 py-1",
+			lg: "text-base px-2.5 py-1.5"
+		}[o], a ? "opacity-100" : "opacity-0 pointer-events-none"),
+		style: { left: `${n}%` },
+		children: [/* @__PURE__ */ r("span", {
+			className: "text-popover-foreground font-medium whitespace-nowrap",
+			children: t
+		}), /* @__PURE__ */ i("div", {
+			className: "absolute top-full left-1/2 -translate-x-1/2 -mt-px",
+			children: [/* @__PURE__ */ r("div", { className: "border-4 border-transparent border-t-border" }), /* @__PURE__ */ r("div", { className: "absolute -top-px left-1/2 -translate-x-1/2 border-4 border-transparent border-t-popover" })]
+		})]
+	});
+}
+function f({ data: t, height: n, minPercent: i, maxPercent: a, variant: o }) {
+	let s = Math.max(...t, 1);
+	100 / t.length;
+	let c = {
+		default: "bg-muted-foreground/30",
+		primary: "bg-primary/20",
+		success: "bg-emerald-500/20",
+		warning: "bg-amber-500/20",
+		danger: "bg-red-500/20"
+	}, l = {
+		default: "bg-muted-foreground/60",
+		primary: "bg-primary/50",
+		success: "bg-emerald-500/50",
+		warning: "bg-amber-500/50",
+		danger: "bg-red-500/50"
+	};
+	return /* @__PURE__ */ r("div", {
+		className: "absolute bottom-full left-0 right-0 flex items-end gap-px mb-1",
+		style: { height: n },
+		children: t.map((n, u) => {
+			let d = n / s * 100, f = u / t.length * 100;
+			return /* @__PURE__ */ r("div", {
+				className: e("flex-1 rounded-t-sm transition-colors duration-150", f >= i && f <= a ? l[o] : c[o]),
+				style: {
+					height: `${d}%`,
+					minHeight: n > 0 ? "2px" : "0px"
+				}
+			}, u);
+		})
+	});
+}
+function p({ min: u = 0, max: p = 100, step: m = 1, value: h, defaultValue: ee = [u, p], onChange: g, onChangeStart: _, onChangeEnd: v, format: y = "none", currencyCode: b = "USD", formatValue: x, showLabels: S = !1, labelPosition: C = "above", showTooltip: te = !0, showTicks: w = !1, tickValues: T, tickCount: E = 5, histogram: D, histogramHeight: O = 40, disabled: k = !1, size: A = "md", variant: j = "default", className: ne, minAriaLabel: re = "Minimum value", maxAriaLabel: ie = "Maximum value", minDistance: M = 0 }) {
+	let [ae, oe] = t.useState(() => {
+		let [e, t] = ee;
+		return [a(o(e, m, u), u, p), a(o(t, m, u), u, p)];
+	}), N = h !== void 0, P = N ? h : ae, [F, I] = t.useState(null), [L, R] = t.useState(null), z = t.useRef(null), B = t.useRef(null), V = t.useRef(null), H = t.useCallback((e) => x ? x(e) : l(e, y, b), [
+		x,
+		y,
+		b
+	]), U = s(P[0], u, p), W = s(P[1], u, p), G = t.useCallback((e) => {
+		let [t, n] = e, r = a(o(t, m, u), u, p - M), i = [r, a(o(n, m, u), r + M, p)];
+		N || oe(i), g?.(i);
+	}, [
+		N,
+		g,
+		u,
+		p,
+		m,
+		M
+	]), K = t.useCallback((e, t) => {
+		if (!z.current || k) return;
+		let n = z.current.getBoundingClientRect(), r = o(c(a((e - n.left) / n.width * 100, 0, 100), u, p), m, u);
+		if (t === "min") {
+			let e = P[1] - M;
+			G([Math.min(r, e), P[1]]);
+		} else {
+			let e = P[0] + M;
+			G([P[0], Math.max(r, e)]);
+		}
+	}, [
+		k,
+		u,
+		p,
+		m,
+		P,
+		M,
+		G
+	]), q = t.useCallback((e) => (t) => {
+		k || (t.preventDefault(), I(e), _?.(P));
+	}, [
+		k,
+		_,
+		P
+	]), J = t.useCallback((e) => {
+		F && K(e.clientX, F);
+	}, [F, K]), Y = t.useCallback(() => {
+		F && (v?.(P), I(null));
+	}, [
+		F,
+		v,
+		P
+	]), X = t.useCallback((e) => (t) => {
+		k || (I(e), _?.(P));
+	}, [
+		k,
+		_,
+		P
+	]), Z = t.useCallback((e) => {
+		F && e.touches[0] && K(e.touches[0].clientX, F);
+	}, [F, K]), Q = t.useCallback(() => {
+		F && (v?.(P), I(null));
+	}, [
+		F,
+		v,
+		P
+	]), se = t.useCallback((e) => {
+		if (k || !z.current || B.current && B.current.contains(e.target) || V.current && V.current.contains(e.target)) return;
+		let t = z.current.getBoundingClientRect(), n = o(c(a((e.clientX - t.left) / t.width * 100, 0, 100), u, p), m, u);
+		Math.abs(n - P[0]) <= Math.abs(n - P[1]) ? G([n, P[1]]) : G([P[0], n]);
+	}, [
+		k,
+		u,
+		p,
+		m,
+		P,
+		G
+	]), ce = t.useCallback((e) => (t) => {
+		if (k) return;
+		let n = e === "min" ? P[0] : P[1], r = m * 10;
+		switch (t.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				t.preventDefault(), n += t.shiftKey ? r : m;
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				t.preventDefault(), n -= t.shiftKey ? r : m;
+				break;
+			case "Home":
+				t.preventDefault(), n = e === "min" ? u : P[0] + M;
+				break;
+			case "End":
+				t.preventDefault(), n = e === "max" ? p : P[1] - M;
+				break;
+			case "PageUp":
+				t.preventDefault(), n += r;
+				break;
+			case "PageDown":
+				t.preventDefault(), n -= r;
+				break;
+			default: return;
+		}
+		G(e === "min" ? [n, P[1]] : [P[0], n]);
+	}, [
+		k,
+		u,
+		p,
+		m,
+		P,
+		M,
+		G
+	]);
+	t.useEffect(() => {
+		if (F) return document.addEventListener("mousemove", J), document.addEventListener("mouseup", Y), document.addEventListener("touchmove", Z), document.addEventListener("touchend", Q), () => {
+			document.removeEventListener("mousemove", J), document.removeEventListener("mouseup", Y), document.removeEventListener("touchmove", Z), document.removeEventListener("touchend", Q);
+		};
+	}, [
+		F,
+		J,
+		Y,
+		Z,
+		Q
+	]);
+	let le = {
+		sm: "h-1",
+		md: "h-2",
+		lg: "h-3"
+	}, $ = {
+		sm: "h-4 w-4",
+		md: "h-5 w-5",
+		lg: "h-6 w-6"
+	}, ue = {
+		default: "bg-primary",
+		primary: "bg-primary",
+		success: "bg-emerald-500",
+		warning: "bg-amber-500",
+		danger: "bg-red-500"
+	}, de = {
+		default: "border-primary",
+		primary: "border-primary",
+		success: "border-emerald-500",
+		warning: "border-amber-500",
+		danger: "border-red-500"
+	}, fe = t.useMemo(() => {
+		if (!w) return [];
+		if (T) return T;
+		let e = (p - u) / (E - 1);
+		return Array.from({ length: E }, (t, n) => u + e * n);
+	}, [
+		w,
+		T,
+		E,
+		u,
+		p
+	]);
+	return /* @__PURE__ */ i("div", {
+		className: e("relative w-full select-none", k && "opacity-50 cursor-not-allowed", ne),
+		children: [
+			S && C === "above" && /* @__PURE__ */ i("div", {
+				className: "flex justify-between mb-2 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ r("span", { children: H(P[0]) }), /* @__PURE__ */ r("span", { children: H(P[1]) })]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: e("relative", D && `pt-[${O}px]`),
+				children: [
+					D && D.length > 0 && /* @__PURE__ */ r(f, {
+						data: D,
+						height: O,
+						minPercent: U,
+						maxPercent: W,
+						variant: j
+					}),
+					/* @__PURE__ */ i("div", {
+						ref: z,
+						className: e("relative w-full rounded-full bg-secondary cursor-pointer", le[A]),
+						onClick: se,
+						children: [
+							/* @__PURE__ */ r("div", {
+								className: e("absolute h-full rounded-full transition-all", ue[j]),
+								style: {
+									left: `${U}%`,
+									width: `${W - U}%`
+								}
+							}),
+							/* @__PURE__ */ r("div", {
+								ref: B,
+								role: "slider",
+								tabIndex: k ? -1 : 0,
+								"aria-label": re,
+								"aria-valuemin": u,
+								"aria-valuemax": P[1] - M,
+								"aria-valuenow": P[0],
+								"aria-valuetext": H(P[0]),
+								"aria-disabled": k,
+								className: e("absolute top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full", "bg-background border-2 shadow-md transition-transform", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "hover:scale-110 active:scale-105", $[A], de[j], F === "min" && "scale-110 ring-2 ring-ring ring-offset-2", !k && "cursor-grab active:cursor-grabbing"),
+								style: { left: `${U}%` },
+								onMouseDown: q("min"),
+								onTouchStart: X("min"),
+								onKeyDown: ce("min"),
+								onMouseEnter: () => R("min"),
+								onMouseLeave: () => R(null),
+								onFocus: () => R("min"),
+								onBlur: () => R(null),
+								children: S && C === "handles" && /* @__PURE__ */ r("span", {
+									className: "absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs font-medium text-muted-foreground whitespace-nowrap",
+									children: H(P[0])
+								})
+							}),
+							/* @__PURE__ */ r("div", {
+								ref: V,
+								role: "slider",
+								tabIndex: k ? -1 : 0,
+								"aria-label": ie,
+								"aria-valuemin": P[0] + M,
+								"aria-valuemax": p,
+								"aria-valuenow": P[1],
+								"aria-valuetext": H(P[1]),
+								"aria-disabled": k,
+								className: e("absolute top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full", "bg-background border-2 shadow-md transition-transform", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "hover:scale-110 active:scale-105", $[A], de[j], F === "max" && "scale-110 ring-2 ring-ring ring-offset-2", !k && "cursor-grab active:cursor-grabbing"),
+								style: { left: `${W}%` },
+								onMouseDown: q("max"),
+								onTouchStart: X("max"),
+								onKeyDown: ce("max"),
+								onMouseEnter: () => R("max"),
+								onMouseLeave: () => R(null),
+								onFocus: () => R("max"),
+								onBlur: () => R(null),
+								children: S && C === "handles" && /* @__PURE__ */ r("span", {
+									className: "absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs font-medium text-muted-foreground whitespace-nowrap",
+									children: H(P[1])
+								})
+							}),
+							te && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(d, {
+								value: H(P[0]),
+								position: U,
+								visible: F === "min" || L === "min",
+								size: A
+							}), /* @__PURE__ */ r(d, {
+								value: H(P[1]),
+								position: W,
+								visible: F === "max" || L === "max",
+								size: A
+							})] })
+						]
+					}),
+					w && fe.length > 0 && /* @__PURE__ */ r("div", {
+						className: "relative mt-2",
+						children: fe.map((t) => {
+							let n = s(t, u, p), a = t >= P[0] && t <= P[1];
+							return /* @__PURE__ */ i("div", {
+								className: "absolute -translate-x-1/2",
+								style: { left: `${n}%` },
+								children: [/* @__PURE__ */ r("div", { className: e("w-0.5 h-2 rounded-full transition-colors", a ? ue[j] : "bg-muted-foreground/40") }), /* @__PURE__ */ r("span", {
+									className: "absolute top-3 left-1/2 -translate-x-1/2 text-xs text-muted-foreground",
+									children: H(t)
+								})]
+							}, t);
+						})
+					})
+				]
+			}),
+			S && C === "handles" && /* @__PURE__ */ r("div", { className: "h-6" }),
+			w && /* @__PURE__ */ r("div", { className: "h-6" })
+		]
+	});
+}
+//#endregion
+export { p as WakaSliderRange, p as default, u as useSliderRange };

package/dist/components/waka-spin-wheel/index.cjs.js

@@ -0,0 +1,24 @@
+"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("react/jsx-runtime");function i(e){if(typeof e==`number`)return e;switch(e){case`sm`:return 240;case`lg`:return 400;default:return 320}}function a(e){let t=e.reduce((e,t)=>e+(t.weight??1),0);return e.map(e=>(e.weight??1)/t*360)}function o(e){let t=e.reduce((e,t)=>e+(t.weight??1),0),n=Math.random()*t;for(let t=0;t<e.length;t++)if(n-=e[t].weight??1,n<=0)return t;return e.length-1}function s(e,t,n){let r=0;for(let n=0;n<e;n++)r+=t[n];let i=r+t[e]/2;return{top:90,right:0,bottom:270,left:180}[n]-i}function c(e){if(!e.startsWith(`#`))return`#ffffff`;let t=e.replace(`#`,``),n=parseInt(t.substr(0,2),16),r=parseInt(t.substr(2,2),16),i=parseInt(t.substr(4,2),16);return(.299*n+.587*r+.114*i)/255>.5?`#1f2937`:`#ffffff`}function l(e){return 1-(1-e)**3}var u=n.forwardRef(({segments:e,onSpin:u,onResult:d,onTick:f,onSlowDown:p,spinning:m,result:h,spinDuration:g=5e3,rotations:_=5,size:v=`md`,disabled:y=!1,centerContent:b,className:x,showLabels:S=!0,pointerPosition:C=`top`,customPointer:w,...T},E)=>{let D=i(v),O=n.useMemo(()=>a(e),[e]),[k,A]=n.useState(!1),[j,M]=n.useState(null),N=m!==void 0,P=N?m:k,[F,I]=n.useState(0),[L,R]=n.useState(null),[z,B]=n.useState(!1),V=n.useRef(null),H=n.useRef(0),U=n.useRef(!1),W=n.useCallback((e,t)=>{let n=t,r=t,i=-90;for(let t=0;t<e;t++)i+=O[t];let a=i+O[e],o=i*Math.PI/180,s=a*Math.PI/180,c=n+t*Math.cos(o),l=r+t*Math.sin(o),u=n+t*Math.cos(s),d=r+t*Math.sin(s);return`M ${n} ${r} L ${c} ${l} A ${t} ${t} 0 ${+(O[e]>180)} 1 ${u} ${d} Z`},[O]),G=n.useCallback((e,t)=>{let n=t,r=t,i=-90;for(let t=0;t<e;t++)i+=O[t];i+=O[e]/2;let a=t*.65,o=i*Math.PI/180;return{x:n+a*Math.cos(o),y:r+a*Math.sin(o),angle:i}},[O]),K=n.useCallback(()=>{if(P||y||e.length===0)return;B(!1),U.current=!1,u?.();let t;h?(t=e.findIndex(e=>e.id===h),t===-1&&(t=o(e))):t=o(e),R(t),N||(A(!0),M(e[t].id));let n=s(t,O,C),r=_*360,i=F+r+(n-F%360+360)%360,a=performance.now(),c=F,m=i-c,v=n=>{let r=n-a,o=Math.min(r/g,1),s=l(o),u=c+m*s;if(I(u),f){let t=360/e.length,n=(u%360+360)%360,r=(H.current%360+360)%360;Math.floor(n/t)!==Math.floor(r/t)&&o<.9&&f()}H.current=u,o>=.7&&!U.current&&(U.current=!0,p?.()),o<1?V.current=requestAnimationFrame(v):(I(i),B(!0),N||A(!1),d?.(e[t]))};V.current=requestAnimationFrame(v)},[P,y,e,u,h,N,O,C,_,F,g,f,p,d]);n.useEffect(()=>()=>{V.current&&cancelAnimationFrame(V.current)},[]);let q=()=>{if(w)return w;let e=D*.08;return(0,r.jsx)(`div`,{className:`absolute z-10 drop-shadow-lg`,style:{top:{top:-e/2,left:`50%`,transform:`translateX(-50%) rotate(180deg)`},right:{top:`50%`,right:-e/2,transform:`translateY(-50%) rotate(-90deg)`},bottom:{bottom:-e/2,left:`50%`,transform:`translateX(-50%)`},left:{top:`50%`,left:-e/2,transform:`translateY(-50%) rotate(90deg)`}}[C],children:(0,r.jsxs)(`svg`,{width:e,height:e*1.2,viewBox:`0 0 40 48`,fill:`none`,children:[(0,r.jsx)(`path`,{d:`M20 48L0 8L8 0H32L40 8L20 48Z`,fill:`currentColor`,className:`text-gray-900 dark:text-white`}),(0,r.jsx)(`path`,{d:`M20 44L4 10L10 4H30L36 10L20 44Z`,fill:`currentColor`,className:`text-amber-400`})]})})},J=D/2,Y=D*.22;return(0,r.jsxs)(`div`,{ref:E,className:t.cn(`relative inline-flex items-center justify-center select-none`,x),style:{width:D,height:D},...T,children:[q(),(0,r.jsx)(`div`,{className:`absolute rounded-full shadow-2xl`,style:{width:D+16,height:D+16,background:`linear-gradient(135deg, #374151 0%, #1f2937 50%, #111827 100%)`},children:Array.from({length:24}).map((e,t)=>{let n=t*15*Math.PI/180,i=(D+16)/2-6,a=i+i*Math.cos(n),o=i+i*Math.sin(n);return(0,r.jsx)(`div`,{className:`absolute w-2 h-2 rounded-full bg-amber-400/60`,style:{left:a-4,top:o-4}},t)})}),(0,r.jsx)(`div`,{className:`absolute rounded-full overflow-hidden shadow-inner`,style:{width:D,height:D,transform:`rotate(${F}deg)`,transition:P?`none`:`transform 0.1s ease-out`},children:(0,r.jsx)(`svg`,{width:D,height:D,viewBox:`0 0 ${D} ${D}`,children:e.map((e,n)=>{let i=z&&n===L;return(0,r.jsxs)(`g`,{children:[(0,r.jsx)(`path`,{d:W(n,J),fill:e.color,stroke:`#1f2937`,strokeWidth:`2`,className:t.cn(`transition-all duration-300`,i&&`brightness-125`)}),i&&(0,r.jsx)(`path`,{d:W(n,J),fill:`none`,stroke:`#fbbf24`,strokeWidth:`4`,className:`animate-pulse`}),S&&(0,r.jsx)(`g`,{children:(()=>{let{x:t,y:i,angle:a}=G(n,J),o=c(e.color),s=a>90&&a<270?a+180:a;return(0,r.jsxs)(`g`,{transform:`translate(${t}, ${i})`,children:[e.icon&&(0,r.jsx)(`foreignObject`,{x:-12,y:-24,width:24,height:24,transform:`rotate(${-F})`,style:{overflow:`visible`},children:(0,r.jsx)(`div`,{className:`flex items-center justify-center w-6 h-6`,children:e.icon})}),(0,r.jsx)(`text`,{x:0,y:e.icon?8:0,textAnchor:`middle`,dominantBaseline:`middle`,fill:o,fontSize:Math.max(10,D/28),fontWeight:`600`,transform:`rotate(${s-a})`,className:`pointer-events-none`,style:{textShadow:`0 1px 2px rgba(0,0,0,0.3)`},children:e.label.length>10?e.label.substring(0,9)+`...`:e.label})]})})()})]},e.id)})})}),(0,r.jsx)(`button`,{type:`button`,onClick:K,disabled:P||y,className:t.cn(`absolute z-20 rounded-full flex items-center justify-center`,`bg-gradient-to-b from-amber-400 via-amber-500 to-amber-600`,`shadow-lg border-4 border-amber-300`,`transition-all duration-200`,`hover:scale-105 hover:from-amber-300 hover:via-amber-400 hover:to-amber-500`,`active:scale-95`,`focus:outline-none focus:ring-4 focus:ring-amber-400/50`,(P||y)&&`opacity-70 cursor-not-allowed hover:scale-100`),style:{width:Y,height:Y},"aria-label":`Spin the wheel`,children:b??(0,r.jsx)(`span`,{className:t.cn(`font-bold text-amber-900 uppercase tracking-wide`,P&&`animate-pulse`),style:{fontSize:Y*.25},children:P?`...`:`SPIN`})}),z&&L!==null&&(0,r.jsx)(`div`,{className:`absolute inset-0 pointer-events-none`,style:{animation:`spin-wheel-celebrate 0.5s ease-out`},children:Array.from({length:12}).map((t,n)=>{let i=n*30*Math.PI/180,a=D*.6;return(0,r.jsx)(`div`,{className:`absolute w-3 h-3 rounded-full`,style:{left:`50%`,top:`50%`,backgroundColor:e[L].color,transform:`translate(-50%, -50%) translate(${Math.cos(i)*a}px, ${Math.sin(i)*a}px)`,animation:`spin-wheel-particle 0.6s ease-out ${n*.05}s forwards`,opacity:0}},n)})}),(0,r.jsx)(`style`,{children:`
+          @keyframes spin-wheel-celebrate {
+            0% {
+              transform: scale(1);
+            }
+            50% {
+              transform: scale(1.05);
+            }
+            100% {
+              transform: scale(1);
+            }
+          }
+
+          @keyframes spin-wheel-particle {
+            0% {
+              opacity: 1;
+              transform: translate(-50%, -50%) scale(1);
+            }
+            100% {
+              opacity: 0;
+              transform: translate(-50%, -50%) scale(0) translateY(-20px);
+            }
+          }
+        `})]})});u.displayName=`WakaSpinWheel`,exports.WakaSpinWheel=u,exports.default=u;

package/dist/components/waka-spin-wheel/index.es.js

@@ -0,0 +1,267 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/waka-spin-wheel/index.tsx
+function i(e) {
+	if (typeof e == "number") return e;
+	switch (e) {
+		case "sm": return 240;
+		case "lg": return 400;
+		default: return 320;
+	}
+}
+function a(e) {
+	let t = e.reduce((e, t) => e + (t.weight ?? 1), 0);
+	return e.map((e) => (e.weight ?? 1) / t * 360);
+}
+function o(e) {
+	let t = e.reduce((e, t) => e + (t.weight ?? 1), 0), n = Math.random() * t;
+	for (let t = 0; t < e.length; t++) if (n -= e[t].weight ?? 1, n <= 0) return t;
+	return e.length - 1;
+}
+function s(e, t, n) {
+	let r = 0;
+	for (let n = 0; n < e; n++) r += t[n];
+	let i = r + t[e] / 2;
+	return {
+		top: 90,
+		right: 0,
+		bottom: 270,
+		left: 180
+	}[n] - i;
+}
+function c(e) {
+	if (!e.startsWith("#")) return "#ffffff";
+	let t = e.replace("#", ""), n = parseInt(t.substr(0, 2), 16), r = parseInt(t.substr(2, 2), 16), i = parseInt(t.substr(4, 2), 16);
+	return (.299 * n + .587 * r + .114 * i) / 255 > .5 ? "#1f2937" : "#ffffff";
+}
+function l(e) {
+	return 1 - (1 - e) ** 3;
+}
+var u = t.forwardRef(({ segments: u, onSpin: d, onResult: f, onTick: p, onSlowDown: m, spinning: h, result: g, spinDuration: _ = 5e3, rotations: v = 5, size: y = "md", disabled: b = !1, centerContent: x, className: S, showLabels: C = !0, pointerPosition: w = "top", customPointer: T, ...E }, D) => {
+	let O = i(y), k = t.useMemo(() => a(u), [u]), [A, j] = t.useState(!1), [M, N] = t.useState(null), P = h !== void 0, F = P ? h : A, [I, L] = t.useState(0), [R, z] = t.useState(null), [B, V] = t.useState(!1), H = t.useRef(null), U = t.useRef(0), W = t.useRef(!1), G = t.useCallback((e, t) => {
+		let n = t, r = t, i = -90;
+		for (let t = 0; t < e; t++) i += k[t];
+		let a = i + k[e], o = i * Math.PI / 180, s = a * Math.PI / 180, c = n + t * Math.cos(o), l = r + t * Math.sin(o), u = n + t * Math.cos(s), d = r + t * Math.sin(s);
+		return `M ${n} ${r} L ${c} ${l} A ${t} ${t} 0 ${+(k[e] > 180)} 1 ${u} ${d} Z`;
+	}, [k]), K = t.useCallback((e, t) => {
+		let n = t, r = t, i = -90;
+		for (let t = 0; t < e; t++) i += k[t];
+		i += k[e] / 2;
+		let a = t * .65, o = i * Math.PI / 180;
+		return {
+			x: n + a * Math.cos(o),
+			y: r + a * Math.sin(o),
+			angle: i
+		};
+	}, [k]), q = t.useCallback(() => {
+		if (F || b || u.length === 0) return;
+		V(!1), W.current = !1, d?.();
+		let e;
+		g ? (e = u.findIndex((e) => e.id === g), e === -1 && (e = o(u))) : e = o(u), z(e), P || (j(!0), N(u[e].id));
+		let t = s(e, k, w), n = v * 360, r = I + n + (t - I % 360 + 360) % 360, i = performance.now(), a = I, c = r - a, h = (t) => {
+			let n = t - i, o = Math.min(n / _, 1), s = l(o), d = a + c * s;
+			if (L(d), p) {
+				let e = 360 / u.length, t = (d % 360 + 360) % 360, n = (U.current % 360 + 360) % 360;
+				Math.floor(t / e) !== Math.floor(n / e) && o < .9 && p();
+			}
+			U.current = d, o >= .7 && !W.current && (W.current = !0, m?.()), o < 1 ? H.current = requestAnimationFrame(h) : (L(r), V(!0), P || j(!1), f?.(u[e]));
+		};
+		H.current = requestAnimationFrame(h);
+	}, [
+		F,
+		b,
+		u,
+		d,
+		g,
+		P,
+		k,
+		w,
+		v,
+		I,
+		_,
+		p,
+		m,
+		f
+	]);
+	t.useEffect(() => () => {
+		H.current && cancelAnimationFrame(H.current);
+	}, []);
+	let J = () => {
+		if (T) return T;
+		let e = O * .08;
+		return /* @__PURE__ */ n("div", {
+			className: "absolute z-10 drop-shadow-lg",
+			style: {
+				top: {
+					top: -e / 2,
+					left: "50%",
+					transform: "translateX(-50%) rotate(180deg)"
+				},
+				right: {
+					top: "50%",
+					right: -e / 2,
+					transform: "translateY(-50%) rotate(-90deg)"
+				},
+				bottom: {
+					bottom: -e / 2,
+					left: "50%",
+					transform: "translateX(-50%)"
+				},
+				left: {
+					top: "50%",
+					left: -e / 2,
+					transform: "translateY(-50%) rotate(90deg)"
+				}
+			}[w],
+			children: /* @__PURE__ */ r("svg", {
+				width: e,
+				height: e * 1.2,
+				viewBox: "0 0 40 48",
+				fill: "none",
+				children: [/* @__PURE__ */ n("path", {
+					d: "M20 48L0 8L8 0H32L40 8L20 48Z",
+					fill: "currentColor",
+					className: "text-gray-900 dark:text-white"
+				}), /* @__PURE__ */ n("path", {
+					d: "M20 44L4 10L10 4H30L36 10L20 44Z",
+					fill: "currentColor",
+					className: "text-amber-400"
+				})]
+			})
+		});
+	}, Y = O / 2, X = O * .22;
+	return /* @__PURE__ */ r("div", {
+		ref: D,
+		className: e("relative inline-flex items-center justify-center select-none", S),
+		style: {
+			width: O,
+			height: O
+		},
+		...E,
+		children: [
+			J(),
+			/* @__PURE__ */ n("div", {
+				className: "absolute rounded-full shadow-2xl",
+				style: {
+					width: O + 16,
+					height: O + 16,
+					background: "linear-gradient(135deg, #374151 0%, #1f2937 50%, #111827 100%)"
+				},
+				children: Array.from({ length: 24 }).map((e, t) => {
+					let r = t * 15 * Math.PI / 180, i = (O + 16) / 2 - 6, a = i + i * Math.cos(r), o = i + i * Math.sin(r);
+					return /* @__PURE__ */ n("div", {
+						className: "absolute w-2 h-2 rounded-full bg-amber-400/60",
+						style: {
+							left: a - 4,
+							top: o - 4
+						}
+					}, t);
+				})
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "absolute rounded-full overflow-hidden shadow-inner",
+				style: {
+					width: O,
+					height: O,
+					transform: `rotate(${I}deg)`,
+					transition: F ? "none" : "transform 0.1s ease-out"
+				},
+				children: /* @__PURE__ */ n("svg", {
+					width: O,
+					height: O,
+					viewBox: `0 0 ${O} ${O}`,
+					children: u.map((t, i) => {
+						let a = B && i === R;
+						return /* @__PURE__ */ r("g", { children: [
+							/* @__PURE__ */ n("path", {
+								d: G(i, Y),
+								fill: t.color,
+								stroke: "#1f2937",
+								strokeWidth: "2",
+								className: e("transition-all duration-300", a && "brightness-125")
+							}),
+							a && /* @__PURE__ */ n("path", {
+								d: G(i, Y),
+								fill: "none",
+								stroke: "#fbbf24",
+								strokeWidth: "4",
+								className: "animate-pulse"
+							}),
+							C && /* @__PURE__ */ n("g", { children: (() => {
+								let { x: e, y: a, angle: o } = K(i, Y), s = c(t.color), l = o > 90 && o < 270 ? o + 180 : o;
+								return /* @__PURE__ */ r("g", {
+									transform: `translate(${e}, ${a})`,
+									children: [t.icon && /* @__PURE__ */ n("foreignObject", {
+										x: -12,
+										y: -24,
+										width: 24,
+										height: 24,
+										transform: `rotate(${-I})`,
+										style: { overflow: "visible" },
+										children: /* @__PURE__ */ n("div", {
+											className: "flex items-center justify-center w-6 h-6",
+											children: t.icon
+										})
+									}), /* @__PURE__ */ n("text", {
+										x: 0,
+										y: t.icon ? 8 : 0,
+										textAnchor: "middle",
+										dominantBaseline: "middle",
+										fill: s,
+										fontSize: Math.max(10, O / 28),
+										fontWeight: "600",
+										transform: `rotate(${l - o})`,
+										className: "pointer-events-none",
+										style: { textShadow: "0 1px 2px rgba(0,0,0,0.3)" },
+										children: t.label.length > 10 ? t.label.substring(0, 9) + "..." : t.label
+									})]
+								});
+							})() })
+						] }, t.id);
+					})
+				})
+			}),
+			/* @__PURE__ */ n("button", {
+				type: "button",
+				onClick: q,
+				disabled: F || b,
+				className: e("absolute z-20 rounded-full flex items-center justify-center", "bg-gradient-to-b from-amber-400 via-amber-500 to-amber-600", "shadow-lg border-4 border-amber-300", "transition-all duration-200", "hover:scale-105 hover:from-amber-300 hover:via-amber-400 hover:to-amber-500", "active:scale-95", "focus:outline-none focus:ring-4 focus:ring-amber-400/50", (F || b) && "opacity-70 cursor-not-allowed hover:scale-100"),
+				style: {
+					width: X,
+					height: X
+				},
+				"aria-label": "Spin the wheel",
+				children: x ?? /* @__PURE__ */ n("span", {
+					className: e("font-bold text-amber-900 uppercase tracking-wide", F && "animate-pulse"),
+					style: { fontSize: X * .25 },
+					children: F ? "..." : "SPIN"
+				})
+			}),
+			B && R !== null && /* @__PURE__ */ n("div", {
+				className: "absolute inset-0 pointer-events-none",
+				style: { animation: "spin-wheel-celebrate 0.5s ease-out" },
+				children: Array.from({ length: 12 }).map((e, t) => {
+					let r = t * 30 * Math.PI / 180, i = O * .6;
+					return /* @__PURE__ */ n("div", {
+						className: "absolute w-3 h-3 rounded-full",
+						style: {
+							left: "50%",
+							top: "50%",
+							backgroundColor: u[R].color,
+							transform: `translate(-50%, -50%) translate(${Math.cos(r) * i}px, ${Math.sin(r) * i}px)`,
+							animation: `spin-wheel-particle 0.6s ease-out ${t * .05}s forwards`,
+							opacity: 0
+						}
+					}, t);
+				})
+			}),
+			/* @__PURE__ */ n("style", { children: "\n          @keyframes spin-wheel-celebrate {\n            0% {\n              transform: scale(1);\n            }\n            50% {\n              transform: scale(1.05);\n            }\n            100% {\n              transform: scale(1);\n            }\n          }\n\n          @keyframes spin-wheel-particle {\n            0% {\n              opacity: 1;\n              transform: translate(-50%, -50%) scale(1);\n            }\n            100% {\n              opacity: 0;\n              transform: translate(-50%, -50%) scale(0) translateY(-20px);\n            }\n          }\n        " })
+		]
+	});
+});
+u.displayName = "WakaSpinWheel";
+//#endregion
+export { u as WakaSpinWheel, u as default };