@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-magic-link/index.es.js

@@ -0,0 +1,191 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ArrowRight as n, Check as r, Loader2 as i, Mail as a, Sparkles as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/waka-magic-link/index.tsx
+function u({ onSubmit: u, placeholder: d = "Enter your email", buttonText: f = {
+	idle: "Send Magic Link",
+	loading: "Sending...",
+	sent: "Check your inbox"
+}, successMessage: p = "We've sent a magic link to your email", errorMessage: m = "Something went wrong. Please try again.", countdownDuration: h = 60, onResend: g, className: _, size: v = "default", variant: y = "default" }) {
+	let [b, x] = t.useState(""), [S, C] = t.useState("idle"), [w, T] = t.useState(0), [E, D] = t.useState(""), O = t.useRef(null);
+	t.useEffect(() => {
+		if (w <= 0) return;
+		let e = setInterval(() => {
+			T((e) => e - 1);
+		}, 1e3);
+		return () => clearInterval(e);
+	}, [w]);
+	let k = async (e) => {
+		if (e.preventDefault(), !(!b || S === "loading")) {
+			C("loading");
+			try {
+				await u(b), D(b), C("sent"), T(h);
+			} catch {
+				C("error"), setTimeout(() => C("idle"), 3e3);
+			}
+		}
+	}, A = async () => {
+		if (!(w > 0 || !g)) {
+			C("loading");
+			try {
+				await g(), C("sent"), T(h);
+			} catch {
+				C("error"), setTimeout(() => C("idle"), 3e3);
+			}
+		}
+	}, j = () => {
+		C("idle"), x(""), D(""), T(0), O.current?.focus();
+	}, M = {
+		sm: "h-10 text-sm",
+		default: "h-12 text-base",
+		lg: "h-14 text-lg"
+	};
+	return S === "sent" ? /* @__PURE__ */ l("div", {
+		className: e("w-full", _),
+		children: [/* @__PURE__ */ l("div", {
+			className: "relative overflow-hidden rounded-2xl border bg-gradient-to-br from-green-500/10 via-emerald-500/10 to-teal-500/10 p-6",
+			children: [/* @__PURE__ */ c("div", {
+				className: "absolute inset-0 overflow-hidden",
+				children: [...[
+					,
+					,
+					,
+					,
+					,
+					,
+				]].map((e, t) => /* @__PURE__ */ c("div", {
+					className: "absolute animate-float",
+					style: {
+						left: `${15 + t * 15}%`,
+						top: `${20 + t % 3 * 20}%`,
+						animationDelay: `${t * .2}s`,
+						animationDuration: `${2 + t * .3}s`
+					},
+					children: /* @__PURE__ */ c(o, { className: "h-4 w-4 text-green-500/40" })
+				}, t))
+			}), /* @__PURE__ */ l("div", {
+				className: "relative text-center",
+				children: [
+					/* @__PURE__ */ l("div", {
+						className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center",
+						children: [/* @__PURE__ */ c("div", { className: "absolute h-16 w-16 animate-ping rounded-full bg-green-500/20" }), /* @__PURE__ */ c("div", {
+							className: "relative flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg shadow-green-500/30",
+							children: /* @__PURE__ */ c(r, { className: "h-7 w-7 text-white animate-in zoom-in-50" })
+						})]
+					}),
+					/* @__PURE__ */ c("h3", {
+						className: "text-lg font-semibold text-foreground",
+						children: f.sent
+					}),
+					/* @__PURE__ */ c("p", {
+						className: "mt-2 text-sm text-muted-foreground",
+						children: p
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "mt-4 inline-flex items-center gap-2 rounded-full bg-background/80 px-4 py-2 text-sm",
+						children: [/* @__PURE__ */ c(a, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ c("span", {
+							className: "font-medium",
+							children: E
+						})]
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "mt-6 flex items-center justify-center gap-4 text-sm",
+						children: [
+							w > 0 ? /* @__PURE__ */ l("span", {
+								className: "text-muted-foreground",
+								children: ["Resend in ", /* @__PURE__ */ l("span", {
+									className: "font-mono font-medium text-foreground",
+									children: [w, "s"]
+								})]
+							}) : g ? /* @__PURE__ */ c("button", {
+								onClick: A,
+								className: "font-medium text-primary hover:underline",
+								children: "Resend email"
+							}) : null,
+							/* @__PURE__ */ c("span", {
+								className: "text-muted-foreground",
+								children: "•"
+							}),
+							/* @__PURE__ */ c("button", {
+								onClick: j,
+								className: "text-muted-foreground hover:text-foreground",
+								children: "Use different email"
+							})
+						]
+					})
+				]
+			})]
+		}), /* @__PURE__ */ c("style", { children: "\n          @keyframes float {\n            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }\n            50% { transform: translateY(-10px) rotate(10deg); opacity: 0.8; }\n          }\n          .animate-float {\n            animation: float 3s ease-in-out infinite;\n          }\n        " })]
+	}) : /* @__PURE__ */ l("form", {
+		onSubmit: k,
+		className: e("w-full", _),
+		children: [/* @__PURE__ */ l("div", {
+			className: e("relative flex items-center overflow-hidden rounded-full border transition-all duration-300", M[v], y === "gradient" && "bg-gradient-to-r from-primary/5 via-purple-500/5 to-pink-500/5", y === "minimal" && "border-transparent bg-muted", S === "error" && "border-destructive bg-destructive/5", S === "idle" && "focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20"),
+			children: [
+				/* @__PURE__ */ c("span", {
+					className: e("flex shrink-0 items-center justify-center text-muted-foreground", {
+						sm: "px-3",
+						default: "px-4",
+						lg: "px-5"
+					}[v]),
+					children: /* @__PURE__ */ c(a, { className: e("transition-all duration-300", v === "sm" && "h-4 w-4", v === "default" && "h-5 w-5", v === "lg" && "h-6 w-6", S === "loading" && "animate-bounce") })
+				}),
+				/* @__PURE__ */ c("input", {
+					ref: O,
+					type: "email",
+					value: b,
+					onChange: (e) => x(e.target.value),
+					placeholder: d,
+					disabled: S === "loading",
+					className: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+				}),
+				/* @__PURE__ */ c("button", {
+					type: "submit",
+					disabled: !b || S === "loading",
+					className: e("flex shrink-0 items-center gap-2 rounded-full font-medium transition-all", {
+						sm: "px-4 text-sm",
+						default: "px-6",
+						lg: "px-8 text-lg"
+					}[v], M[v], S === "loading" ? "bg-muted text-muted-foreground cursor-wait" : S === "error" ? "bg-destructive text-destructive-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"),
+					children: S === "loading" ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(i, { className: "h-4 w-4 animate-spin" }), /* @__PURE__ */ c("span", {
+						className: "hidden sm:inline",
+						children: f.loading
+					})] }) : S === "error" ? /* @__PURE__ */ c("span", { children: m }) : /* @__PURE__ */ l(s, { children: [
+						/* @__PURE__ */ c("span", {
+							className: "hidden sm:inline",
+							children: f.idle
+						}),
+						/* @__PURE__ */ c(o, { className: "h-4 w-4 sm:hidden" }),
+						/* @__PURE__ */ c(n, { className: "h-4 w-4 hidden sm:block" })
+					] })
+				})
+			]
+		}), /* @__PURE__ */ c("p", {
+			className: "mt-3 text-center text-xs text-muted-foreground",
+			children: "We'll send you a magic link for password-free sign in"
+		})]
+	});
+}
+function d() {
+	let [e, n] = t.useState("idle"), [r, i] = t.useState("");
+	return {
+		state: e,
+		email: r,
+		sendMagicLink: async (e, t) => {
+			i(e), n("loading");
+			try {
+				await t(e), n("sent");
+			} catch (e) {
+				throw n("error"), e;
+			}
+		},
+		reset: () => {
+			n("idle"), i("");
+		}
+	};
+}
+//#endregion
+export { u as WakaMagicLink, d as useMagicLink };

package/dist/components/waka-magnetic-button/index.cjs.js

@@ -0,0 +1,29 @@
+"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(`class-variance-authority`),i=require(`react/jsx-runtime`);var a=(0,r.cva)(`relative inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,{variants:{variant:{default:`bg-primary text-primary-foreground shadow-md hover:bg-primary/90`,secondary:`bg-secondary text-secondary-foreground shadow hover:bg-secondary/80`,destructive:`bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90`,outline:`border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground`,ghost:`hover:bg-accent hover:text-accent-foreground`,gradient:`bg-gradient-to-r from-primary to-primary/70 text-primary-foreground shadow-lg`},size:{sm:`h-9 px-4 text-sm`,default:`h-11 px-6 text-base`,lg:`h-14 px-8 text-lg`,xl:`h-16 px-10 text-xl`,icon:`h-11 w-11`,"icon-sm":`h-9 w-9`,"icon-lg":`h-14 w-14`},rounded:{default:`rounded-xl`,sm:`rounded-lg`,lg:`rounded-2xl`,full:`rounded-full`}},defaultVariants:{variant:`default`,size:`default`,rounded:`default`}});function o(e,t,n){return e+(t-e)*n}function s(e,t,n){return Math.min(Math.max(e,t),n)}function c(e,t,n,r){return Math.sqrt((n-e)**2+(r-t)**2)}function l({x:e,y:t,size:r,color:a,duration:o,onComplete:s}){return n.useEffect(()=>{let e=setTimeout(s,o);return()=>clearTimeout(e)},[o,s]),(0,i.jsx)(`span`,{className:`absolute rounded-full pointer-events-none animate-magnetic-ripple`,style:{left:e-r/2,top:t-r/2,width:r,height:r,backgroundColor:a,animationDuration:`${o}ms`}})}function u({className:e}){return(0,i.jsxs)(`svg`,{className:t.cn(`animate-spin`,e),width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,children:[(0,i.jsx)(`circle`,{className:`opacity-25`,cx:`12`,cy:`12`,r:`10`,stroke:`currentColor`,strokeWidth:`3`}),(0,i.jsx)(`path`,{className:`opacity-75`,fill:`currentColor`,d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z`})]})}function d(e,t){let{enabled:r,radius:i,strength:a,duration:l}=t,[u,d]=n.useState({x:0,y:0}),[f,p]=n.useState({x:0,y:0}),m=n.useRef(void 0),h=n.useRef({x:0,y:0}),g=n.useRef({x:0,y:0}),_=n.useRef(!1);return n.useEffect(()=>{if(!r)return;let t=e.current;if(!t)return;let n=()=>{let e=1-Math.exp(16/l*-5);g.current.x=o(g.current.x,h.current.x,e),g.current.y=o(g.current.y,h.current.y,e),d({x:g.current.x,y:g.current.y}),p({x:g.current.x*.3,y:g.current.y*.3}),(Math.abs(h.current.x-g.current.x)>.01||Math.abs(h.current.y-g.current.y)>.01||_.current)&&(m.current=requestAnimationFrame(n))},u=e=>{let r=t.getBoundingClientRect(),o=r.left+r.width/2,l=r.top+r.height/2,u=c(e.clientX,e.clientY,o,l);if(u<i){_.current=!0;let t=(1-u/i)*a,r=(e.clientX-o)*t,c=(e.clientY-l)*t;h.current={x:s(r,-i*.5,i*.5),y:s(c,-i*.5,i*.5)},m.current||=requestAnimationFrame(n)}else _.current=!1,h.current={x:0,y:0},m.current||=requestAnimationFrame(n)},f=()=>{_.current=!1,h.current={x:0,y:0},m.current||=requestAnimationFrame(n)};return document.addEventListener(`mousemove`,u),t.addEventListener(`mouseleave`,f),()=>{document.removeEventListener(`mousemove`,u),t.removeEventListener(`mouseleave`,f),m.current&&cancelAnimationFrame(m.current)}},[r,i,a,l,e]),{transform:u,contentTransform:f}}var f=n.forwardRef(({className:e,variant:r,size:o,rounded:s,children:c,magneticEnabled:f=!0,attractionRadius:p=150,attractionStrength:m=.4,followDuration:h=300,rippleEnabled:g=!0,rippleColor:_=`rgba(255, 255, 255, 0.35)`,rippleDuration:v=600,moveContent:y=!0,contentMoveStrength:b=.3,leftIcon:x,rightIcon:S,loading:C=!1,disabled:w,onClick:T,...E},D)=>{let O=n.useRef(null),[k,A]=n.useState([]),j=n.useRef(0);n.useImperativeHandle(D,()=>O.current);let{transform:M,contentTransform:N}=d(O,{enabled:f&&!w&&!C,radius:p,strength:m,duration:h}),P=n.useCallback(e=>{if(!(w||C)){if(g&&O.current){let t=O.current.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,i=Math.max(t.width,t.height)*2.5,a=j.current++;A(e=>[...e,{id:a,x:n,y:r,size:i}])}T?.(e)}},[w,C,g,T]),F=n.useCallback(e=>{A(t=>t.filter(t=>t.id!==e))},[]);return(0,i.jsxs)(`button`,{ref:O,className:t.cn(a({variant:r,size:o,rounded:s,className:e})),style:{transform:`translate(${M.x}px, ${M.y}px)`,transition:`box-shadow 0.2s ease-out`},disabled:w||C,onClick:P,...E,children:[k.map(({id:e,x:t,y:n,size:r})=>(0,i.jsx)(l,{x:t,y:n,size:r,color:_,duration:v,onComplete:()=>F(e)},e)),(0,i.jsxs)(`span`,{className:`relative z-10 flex items-center gap-2`,style:{transform:y?`translate(${N.x*b}px, ${N.y*b}px)`:void 0},children:[C?(0,i.jsx)(u,{}):x?(0,i.jsx)(`span`,{className:`flex-shrink-0`,children:x}):null,(0,i.jsx)(`span`,{className:t.cn(C&&`opacity-0`),children:c}),!C&&S&&(0,i.jsx)(`span`,{className:`flex-shrink-0`,children:S})]})]})});if(f.displayName=`WakaMagneticButton`,typeof document<`u`){let e=`waka-magnetic-button-styles`;if(!document.getElementById(e)){let t=document.createElement(`style`);t.id=e,t.textContent=`
+      @keyframes magnetic-ripple {
+        0% {
+          transform: scale(0);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(1);
+          opacity: 0;
+        }
+      }
+
+      .animate-magnetic-ripple {
+        animation: magnetic-ripple ease-out forwards;
+      }
+
+      @keyframes magnetic-pulse {
+        0%, 100% {
+          box-shadow: 0 0 0 0 rgba(var(--primary), 0.4);
+        }
+        50% {
+          box-shadow: 0 0 0 10px rgba(var(--primary), 0);
+        }
+      }
+
+      .animate-magnetic-pulse {
+        animation: magnetic-pulse 2s ease-in-out infinite;
+      }
+    `,document.head.appendChild(t)}}var p=n.forwardRef(({icon:e,size:t=`icon`,rounded:n=`full`,...r},a)=>(0,i.jsx)(f,{ref:a,size:t,rounded:n,...r,children:e}));p.displayName=`WakaMagneticIconButton`;var m=n.forwardRef(({className:e,children:r,magneticEnabled:a=!0,attractionRadius:s=100,attractionStrength:l=.3,followDuration:u=200,...d},f)=>{let p=n.useRef(null),[m,h]=n.useState({x:0,y:0});return n.useImperativeHandle(f,()=>p.current),n.useEffect(()=>{if(!a)return;let e=p.current;if(!e)return;let t,n={x:0,y:0},r={x:0,y:0},i=()=>{let e=1-Math.exp(16/u*-5);r.x=o(r.x,n.x,e),r.y=o(r.y,n.y,e),h({x:r.x,y:r.y}),(Math.abs(n.x-r.x)>.01||Math.abs(n.y-r.y)>.01)&&(t=requestAnimationFrame(i))},d=r=>{let a=e.getBoundingClientRect(),o=a.left+a.width/2,u=a.top+a.height/2,d=c(r.clientX,r.clientY,o,u);if(d<s){let e=(1-d/s)*l;n.x=(r.clientX-o)*e,n.y=(r.clientY-u)*e}else n.x=0,n.y=0;t=requestAnimationFrame(i)},f=()=>{n.x=0,n.y=0,t=requestAnimationFrame(i)};return document.addEventListener(`mousemove`,d),e.addEventListener(`mouseleave`,f),()=>{document.removeEventListener(`mousemove`,d),e.removeEventListener(`mouseleave`,f),t&&cancelAnimationFrame(t)}},[a,s,l,u]),(0,i.jsx)(`a`,{ref:p,className:t.cn(`inline-block text-primary underline-offset-4 hover:underline cursor-pointer`,e),style:{transform:`translate(${m.x}px, ${m.y}px)`},...d,children:r})});m.displayName=`WakaMagneticLink`,exports.WakaMagneticButton=f,exports.WakaMagneticIconButton=p,exports.WakaMagneticLink=m;

package/dist/components/waka-magnetic-button/index.d.ts

@@ -29,11 +29,11 @@ export interface WakaMagneticButtonProps extends Omit<React.ButtonHTMLAttributes
     /** Loading state */
     loading?: boolean;
 }
-declare const magneticButtonVariants: (props?: {
-    variant?: "default" | "gradient" | "outline" | "destructive" | "secondary" | "ghost";
-    size?: "default" | "sm" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg";
-    rounded?: "default" | "sm" | "lg" | "full";
-} & import("class-variance-authority/types").ClassProp) => string;
+declare const magneticButtonVariants: (props?: ({
+    variant?: "default" | "gradient" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    rounded?: "default" | "sm" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * @deprecated Since v3.6 — will be removed in v4.0.
  * Use `WakaFancyButton variant="magnetic"` instead (futur, dans `@wakastellar/ui-effects-decorative`).

package/dist/components/waka-magnetic-button/index.es.js

@@ -0,0 +1,281 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { cva as n } from "class-variance-authority";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/waka-magnetic-button/index.tsx
+var a = n("relative inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
+			secondary: "bg-secondary text-secondary-foreground shadow hover:bg-secondary/80",
+			destructive: "bg-destructive text-destructive-foreground shadow-md hover:bg-destructive/90",
+			outline: "border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			gradient: "bg-gradient-to-r from-primary to-primary/70 text-primary-foreground shadow-lg"
+		},
+		size: {
+			sm: "h-9 px-4 text-sm",
+			default: "h-11 px-6 text-base",
+			lg: "h-14 px-8 text-lg",
+			xl: "h-16 px-10 text-xl",
+			icon: "h-11 w-11",
+			"icon-sm": "h-9 w-9",
+			"icon-lg": "h-14 w-14"
+		},
+		rounded: {
+			default: "rounded-xl",
+			sm: "rounded-lg",
+			lg: "rounded-2xl",
+			full: "rounded-full"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		rounded: "default"
+	}
+});
+function o(e, t, n) {
+	return e + (t - e) * n;
+}
+function s(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function c(e, t, n, r) {
+	return Math.sqrt((n - e) ** 2 + (r - t) ** 2);
+}
+function l({ x: e, y: n, size: i, color: a, duration: o, onComplete: s }) {
+	return t.useEffect(() => {
+		let e = setTimeout(s, o);
+		return () => clearTimeout(e);
+	}, [o, s]), /* @__PURE__ */ r("span", {
+		className: "absolute rounded-full pointer-events-none animate-magnetic-ripple",
+		style: {
+			left: e - i / 2,
+			top: n - i / 2,
+			width: i,
+			height: i,
+			backgroundColor: a,
+			animationDuration: `${o}ms`
+		}
+	});
+}
+function u({ className: t }) {
+	return /* @__PURE__ */ i("svg", {
+		className: e("animate-spin", t),
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		children: [/* @__PURE__ */ r("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "3"
+		}), /* @__PURE__ */ r("path", {
+			className: "opacity-75",
+			fill: "currentColor",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		})]
+	});
+}
+function d(e, n) {
+	let { enabled: r, radius: i, strength: a, duration: l } = n, [u, d] = t.useState({
+		x: 0,
+		y: 0
+	}), [f, p] = t.useState({
+		x: 0,
+		y: 0
+	}), m = t.useRef(void 0), h = t.useRef({
+		x: 0,
+		y: 0
+	}), g = t.useRef({
+		x: 0,
+		y: 0
+	}), _ = t.useRef(!1);
+	return t.useEffect(() => {
+		if (!r) return;
+		let t = e.current;
+		if (!t) return;
+		let n = () => {
+			let e = 1 - Math.exp(16 / l * -5);
+			g.current.x = o(g.current.x, h.current.x, e), g.current.y = o(g.current.y, h.current.y, e), d({
+				x: g.current.x,
+				y: g.current.y
+			}), p({
+				x: g.current.x * .3,
+				y: g.current.y * .3
+			}), (Math.abs(h.current.x - g.current.x) > .01 || Math.abs(h.current.y - g.current.y) > .01 || _.current) && (m.current = requestAnimationFrame(n));
+		}, u = (e) => {
+			let r = t.getBoundingClientRect(), o = r.left + r.width / 2, l = r.top + r.height / 2, u = c(e.clientX, e.clientY, o, l);
+			if (u < i) {
+				_.current = !0;
+				let t = (1 - u / i) * a, r = (e.clientX - o) * t, c = (e.clientY - l) * t;
+				h.current = {
+					x: s(r, -i * .5, i * .5),
+					y: s(c, -i * .5, i * .5)
+				}, m.current ||= requestAnimationFrame(n);
+			} else _.current = !1, h.current = {
+				x: 0,
+				y: 0
+			}, m.current ||= requestAnimationFrame(n);
+		}, f = () => {
+			_.current = !1, h.current = {
+				x: 0,
+				y: 0
+			}, m.current ||= requestAnimationFrame(n);
+		};
+		return document.addEventListener("mousemove", u), t.addEventListener("mouseleave", f), () => {
+			document.removeEventListener("mousemove", u), t.removeEventListener("mouseleave", f), m.current && cancelAnimationFrame(m.current);
+		};
+	}, [
+		r,
+		i,
+		a,
+		l,
+		e
+	]), {
+		transform: u,
+		contentTransform: f
+	};
+}
+var f = t.forwardRef(({ className: n, variant: o, size: s, rounded: c, children: f, magneticEnabled: p = !0, attractionRadius: m = 150, attractionStrength: h = .4, followDuration: g = 300, rippleEnabled: _ = !0, rippleColor: v = "rgba(255, 255, 255, 0.35)", rippleDuration: y = 600, moveContent: b = !0, contentMoveStrength: x = .3, leftIcon: S, rightIcon: C, loading: w = !1, disabled: T, onClick: E, ...D }, O) => {
+	let k = t.useRef(null), [A, j] = t.useState([]), M = t.useRef(0);
+	t.useImperativeHandle(O, () => k.current);
+	let { transform: N, contentTransform: P } = d(k, {
+		enabled: p && !T && !w,
+		radius: m,
+		strength: h,
+		duration: g
+	}), F = t.useCallback((e) => {
+		if (!(T || w)) {
+			if (_ && k.current) {
+				let t = k.current.getBoundingClientRect(), n = e.clientX - t.left, r = e.clientY - t.top, i = Math.max(t.width, t.height) * 2.5, a = M.current++;
+				j((e) => [...e, {
+					id: a,
+					x: n,
+					y: r,
+					size: i
+				}]);
+			}
+			E?.(e);
+		}
+	}, [
+		T,
+		w,
+		_,
+		E
+	]), I = t.useCallback((e) => {
+		j((t) => t.filter((t) => t.id !== e));
+	}, []);
+	return /* @__PURE__ */ i("button", {
+		ref: k,
+		className: e(a({
+			variant: o,
+			size: s,
+			rounded: c,
+			className: n
+		})),
+		style: {
+			transform: `translate(${N.x}px, ${N.y}px)`,
+			transition: "box-shadow 0.2s ease-out"
+		},
+		disabled: T || w,
+		onClick: F,
+		...D,
+		children: [A.map(({ id: e, x: t, y: n, size: i }) => /* @__PURE__ */ r(l, {
+			x: t,
+			y: n,
+			size: i,
+			color: v,
+			duration: y,
+			onComplete: () => I(e)
+		}, e)), /* @__PURE__ */ i("span", {
+			className: "relative z-10 flex items-center gap-2",
+			style: { transform: b ? `translate(${P.x * x}px, ${P.y * x}px)` : void 0 },
+			children: [
+				w ? /* @__PURE__ */ r(u, {}) : S ? /* @__PURE__ */ r("span", {
+					className: "flex-shrink-0",
+					children: S
+				}) : null,
+				/* @__PURE__ */ r("span", {
+					className: e(w && "opacity-0"),
+					children: f
+				}),
+				!w && C && /* @__PURE__ */ r("span", {
+					className: "flex-shrink-0",
+					children: C
+				})
+			]
+		})]
+	});
+});
+if (f.displayName = "WakaMagneticButton", typeof document < "u") {
+	let e = "waka-magnetic-button-styles";
+	if (!document.getElementById(e)) {
+		let t = document.createElement("style");
+		t.id = e, t.textContent = "\n      @keyframes magnetic-ripple {\n        0% {\n          transform: scale(0);\n          opacity: 1;\n        }\n        100% {\n          transform: scale(1);\n          opacity: 0;\n        }\n      }\n\n      .animate-magnetic-ripple {\n        animation: magnetic-ripple ease-out forwards;\n      }\n\n      @keyframes magnetic-pulse {\n        0%, 100% {\n          box-shadow: 0 0 0 0 rgba(var(--primary), 0.4);\n        }\n        50% {\n          box-shadow: 0 0 0 10px rgba(var(--primary), 0);\n        }\n      }\n\n      .animate-magnetic-pulse {\n        animation: magnetic-pulse 2s ease-in-out infinite;\n      }\n    ", document.head.appendChild(t);
+	}
+}
+var p = t.forwardRef(({ icon: e, size: t = "icon", rounded: n = "full", ...i }, a) => /* @__PURE__ */ r(f, {
+	ref: a,
+	size: t,
+	rounded: n,
+	...i,
+	children: e
+}));
+p.displayName = "WakaMagneticIconButton";
+var m = t.forwardRef(({ className: n, children: i, magneticEnabled: a = !0, attractionRadius: s = 100, attractionStrength: l = .3, followDuration: u = 200, ...d }, f) => {
+	let p = t.useRef(null), [m, h] = t.useState({
+		x: 0,
+		y: 0
+	});
+	return t.useImperativeHandle(f, () => p.current), t.useEffect(() => {
+		if (!a) return;
+		let e = p.current;
+		if (!e) return;
+		let t, n = {
+			x: 0,
+			y: 0
+		}, r = {
+			x: 0,
+			y: 0
+		}, i = () => {
+			let e = 1 - Math.exp(16 / u * -5);
+			r.x = o(r.x, n.x, e), r.y = o(r.y, n.y, e), h({
+				x: r.x,
+				y: r.y
+			}), (Math.abs(n.x - r.x) > .01 || Math.abs(n.y - r.y) > .01) && (t = requestAnimationFrame(i));
+		}, d = (r) => {
+			let a = e.getBoundingClientRect(), o = a.left + a.width / 2, u = a.top + a.height / 2, d = c(r.clientX, r.clientY, o, u);
+			if (d < s) {
+				let e = (1 - d / s) * l;
+				n.x = (r.clientX - o) * e, n.y = (r.clientY - u) * e;
+			} else n.x = 0, n.y = 0;
+			t = requestAnimationFrame(i);
+		}, f = () => {
+			n.x = 0, n.y = 0, t = requestAnimationFrame(i);
+		};
+		return document.addEventListener("mousemove", d), e.addEventListener("mouseleave", f), () => {
+			document.removeEventListener("mousemove", d), e.removeEventListener("mouseleave", f), t && cancelAnimationFrame(t);
+		};
+	}, [
+		a,
+		s,
+		l,
+		u
+	]), /* @__PURE__ */ r("a", {
+		ref: p,
+		className: e("inline-block text-primary underline-offset-4 hover:underline cursor-pointer", n),
+		style: { transform: `translate(${m.x}px, ${m.y}px)` },
+		...d,
+		children: i
+	});
+});
+m.displayName = "WakaMagneticLink";
+//#endregion
+export { f as WakaMagneticButton, p as WakaMagneticIconButton, m as WakaMagneticLink };

package/dist/components/waka-mention-input/index.cjs.js

@@ -0,0 +1 @@
+"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=[{trigger:`@`,type:`user`,icon:(0,i.jsx)(r.User,{className:`h-4 w-4`}),data:[]},{trigger:`#`,type:`channel`,icon:(0,i.jsx)(r.Hash,{className:`h-4 w-4`}),data:[]}];function o(e={}){let{initialValue:t=``,triggers:r=a,maxMentions:i,searchDebounce:o=300}=e,[c,l]=n.useState(t),[u,d]=n.useState([]),f=n.useMemo(()=>{let e=c;for(let t of u){let n=RegExp(`${s(t.trigger)}\\[${s(t.display)}\\]\\(${s(t.id)}\\)`,`g`);e=e.replace(n,`${t.trigger}${t.display}`)}return e},[c,u]);return{value:c,plainText:f,mentions:u,setValue:n.useCallback(e=>{l(e);let t=[];for(let n of r){let r=RegExp(`${s(n.trigger)}\\[([^\\]]+)\\]\\(([^)]+)\\)`,`g`),i;for(;(i=r.exec(e))!==null;)t.push({id:i[2],type:n.type,display:i[1],value:i[1],trigger:n.trigger,startIndex:i.index,endIndex:i.index+i[0].length})}d(t)},[r]),insertMention:n.useCallback((e,t)=>{if(i&&u.length>=i)return;let n={id:e.id,type:e.type,display:e.display,value:e.value,trigger:t,startIndex:0,endIndex:0};d(e=>[...e,n])},[i,u.length]),removeMention:n.useCallback(e=>{d(t=>t.filter(t=>t.id!==e))},[]),clear:n.useCallback(()=>{l(``),d([])},[]),mentionCount:u.length,characterCount:f.length}}function s(e){return e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)}function c(e,t){let n=document.createElement(`div`),r=getComputedStyle(e);for(let e of Array.from(r))n.style.setProperty(e,r.getPropertyValue(e));n.style.position=`absolute`,n.style.visibility=`hidden`,n.style.whiteSpace=`pre-wrap`,n.style.wordWrap=`break-word`,n.style.overflow=`hidden`,n.style.width=`${e.offsetWidth}px`,n.style.height=`auto`,n.textContent=e.value.substring(0,t);let i=document.createElement(`span`);i.textContent=e.value.substring(t)||`.`,n.appendChild(i),document.body.appendChild(n);let a=e.getBoundingClientRect(),o=i.getBoundingClientRect(),s={top:o.top-a.top+e.scrollTop,left:o.left-a.left+e.scrollLeft};return document.body.removeChild(n),s}function l({items:e,highlightedIndex:a,onSelect:o,onHighlight:s,trigger:c,loading:l,position:u,visible:d}){let f=n.useRef(null);return n.useEffect(()=>{if(f.current&&a>=0){let e=f.current.children[a];e&&e.scrollIntoView({block:`nearest`})}},[a]),d?(0,i.jsx)(`div`,{className:t.cn(`absolute z-50 min-w-[200px] max-w-[300px] max-h-[240px] overflow-y-auto`,`bg-popover border rounded-lg shadow-lg`,`animate-in fade-in-0 zoom-in-95 duration-150`),style:{top:u.top+24,left:Math.max(0,u.left-8)},ref:f,children:l?(0,i.jsx)(`div`,{className:`flex items-center justify-center p-4`,children:(0,i.jsx)(r.Loader2,{className:`h-5 w-5 animate-spin text-muted-foreground`})}):e.length===0?(0,i.jsx)(`div`,{className:`p-3 text-sm text-muted-foreground text-center`,children:`No results found`}):(0,i.jsx)(`div`,{className:`p-1`,children:e.map((e,n)=>(0,i.jsxs)(`button`,{type:`button`,className:t.cn(`w-full flex items-center gap-3 px-3 py-2 rounded-md text-left`,`transition-colors duration-100`,a===n?`bg-accent text-accent-foreground`:`hover:bg-muted`),onClick:()=>o(e),onMouseEnter:()=>s(n),children:[e.avatar?(0,i.jsx)(`img`,{src:e.avatar,alt:e.display,className:`h-8 w-8 rounded-full object-cover flex-shrink-0`}):e.icon?(0,i.jsx)(`div`,{className:`h-8 w-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0`,children:e.icon}):(0,i.jsx)(`div`,{className:`h-8 w-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0`,children:c.icon||(0,i.jsx)(r.User,{className:`h-4 w-4`})}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsx)(`div`,{className:`font-medium text-sm truncate`,children:e.display}),e.description&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground truncate`,children:e.description})]}),(0,i.jsxs)(`div`,{className:`text-xs text-muted-foreground flex-shrink-0`,children:[c.trigger,e.value]})]},e.id))})}):null}function u({text:e,mentions:n,triggers:a}){let o=[],s=0,c=[...n].sort((e,t)=>e.startIndex-t.startIndex);for(let n of c){n.startIndex>s&&o.push((0,i.jsx)(`span`,{children:e.substring(s,n.startIndex)},`text-${s}`));let c=a.find(e=>e.trigger===n.trigger);o.push((0,i.jsxs)(`span`,{className:t.cn(`inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-md`,`bg-primary/10 text-primary font-medium`),children:[c?.icon||(n.trigger===`@`?(0,i.jsx)(r.AtSign,{className:`h-3 w-3`}):(0,i.jsx)(r.Hash,{className:`h-3 w-3`})),n.display]},`mention-${n.id}-${n.startIndex}`)),s=n.endIndex}return s<e.length&&o.push((0,i.jsx)(`span`,{children:e.substring(s)},`text-${s}`)),(0,i.jsx)(i.Fragment,{children:o})}var d=n.forwardRef(({value:e,onChange:o,triggers:d=a,placeholder:f=`Type @ to mention someone...`,disabled:p=!1,error:m,maxLength:h,maxMentions:g,showCharacterCount:_=!1,showMentionCount:v=!1,minHeight:y=80,maxHeight:ee=300,showPreview:te=!1,className:b,label:x,description:S,searchDebounce:C=300,autoFocus:ne=!1,onFocus:re,onBlur:ie,onSubmit:w},T)=>{let E=n.useRef(null),D=n.useRef(null),[O,k]=n.useState(e||``),[A,j]=n.useState([]),[ae,M]=n.useState(!1),[N,P]=n.useState(!1),[oe,se]=n.useState({top:0,left:0}),[F,I]=n.useState([]),[L,R]=n.useState(0),[z,B]=n.useState(null),[V,H]=n.useState(``),[U,W]=n.useState(!1),G=n.useRef(void 0),K=n.useRef(-1);n.useEffect(()=>{e!==void 0&&e!==O&&(k(e),q(e))},[e]);let q=n.useCallback(e=>{let t=[];for(let n of d){let r=RegExp(`${s(n.trigger)}\\[([^\\]]+)\\]\\(([^)]+)\\)`,`g`),i;for(;(i=r.exec(e))!==null;)t.push({id:i[2],type:n.type,display:i[1],value:i[1],trigger:n.trigger,startIndex:i.index,endIndex:i.index+i[0].length})}j(t)},[d]);n.useEffect(()=>{O&&q(O)},[]);let J=n.useMemo(()=>{let e=O;for(let t of A){let n=`${t.trigger}[${t.display}](${t.id})`;e=e.replace(n,`${t.trigger}${t.display}`)}return e},[O,A]),Y=n.useCallback(async(e,t)=>{if(t.onSearch){W(!0);try{I(await t.onSearch(e))}catch{I([])}finally{W(!1)}}else t.data&&I(t.data.filter(t=>t.display.toLowerCase().includes(e.toLowerCase())||t.value.toLowerCase().includes(e.toLowerCase())))},[]);n.useEffect(()=>{if(!(!z||!N))return G.current&&clearTimeout(G.current),z.onSearch?G.current=setTimeout(()=>{Y(V,z)},C):Y(V,z),()=>{G.current&&clearTimeout(G.current)}},[V,z,N,Y,C]);let ce=e=>{let t=e.target.value,n=e.target.selectionStart,r=null,i=-1;for(let e of d){for(let a=n-1;a>=0;a--){if(t[a]===e.trigger){if((a===0||/\s/.test(t[a-1]))&&(!t.substring(a+1,n).includes(` `)||e.allowSpaces)){r=e,i=a;break}break}if(/\s/.test(t[a]))break}if(r)break}r&&i>=0?(H(t.substring(i+1,n)),B(r),K.current=i,E.current&&se(c(E.current,i)),P(!0),R(0)):(P(!1),B(null),K.current=-1),k(t),q(t);let a=[];for(let e of d){let n=RegExp(`${s(e.trigger)}\\[([^\\]]+)\\]\\(([^)]+)\\)`,`g`),r;for(;(r=n.exec(t))!==null;)a.push({id:r[2],type:e.type,display:r[1],value:r[1],trigger:e.trigger,startIndex:r.index,endIndex:r.index+r[0].length})}let l=t;for(let e of a){let t=`${e.trigger}[${e.display}](${e.id})`;l=l.replace(t,`${e.trigger}${e.display}`)}o?.(t,l,a)},X=e=>{if(!z||K.current<0||g&&A.length>=g)return;let t=E.current;if(!t)return;let n=t.selectionStart,r=O.substring(0,K.current),i=O.substring(n),a=`${z.trigger}[${e.display}](${e.id})`,c=`${r}${a} ${i}`;k(c),P(!1),B(null),K.current=-1;let l=r.length+a.length+1;setTimeout(()=>{t.focus(),t.setSelectionRange(l,l)},0);let u=[];for(let e of d){let t=RegExp(`${s(e.trigger)}\\[([^\\]]+)\\]\\(([^)]+)\\)`,`g`),n;for(;(n=t.exec(c))!==null;)u.push({id:n[2],type:e.type,display:n[1],value:n[1],trigger:e.trigger,startIndex:n.index,endIndex:n.index+n[0].length})}j(u);let f=c;for(let e of u){let t=`${e.trigger}[${e.display}](${e.id})`;f=f.replace(t,`${e.trigger}${e.display}`)}o?.(c,f,u)},le=e=>{if((e.ctrlKey||e.metaKey)&&e.key===`Enter`){e.preventDefault(),w?.(O,J,A);return}if(N)switch(e.key){case`ArrowDown`:e.preventDefault(),R(e=>e<F.length-1?e+1:0);break;case`ArrowUp`:e.preventDefault(),R(e=>e>0?e-1:F.length-1);break;case`Enter`:case`Tab`:e.preventDefault(),F[L]&&X(F[L]);break;case`Escape`:e.preventDefault(),P(!1),B(null);break}},ue=()=>{M(!0),re?.()},Z=e=>{D.current?.contains(e.relatedTarget)||(M(!1),setTimeout(()=>{P(!1)},150),ie?.())},de=e=>{let t=A.find(t=>t.id===e);if(!t)return;let n=`${t.trigger}[${t.display}](${t.id})`,r=O.replace(n,``);k(r),q(r);let i=r,a=A.filter(t=>t.id!==e);for(let e of a){let t=`${e.trigger}[${e.display}](${e.id})`;i=i.replace(t,`${e.trigger}${e.display}`)}o?.(r,i,a)};n.useImperativeHandle(T,()=>E.current,[]);let Q=J.length,$=A.length,fe=h?Q>h:!1,pe=g?$>g:!1;return(0,i.jsxs)(`div`,{ref:D,className:t.cn(`space-y-1.5`,b),children:[x&&(0,i.jsx)(`label`,{className:`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70`,children:x}),S&&(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:S}),(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsxs)(`div`,{className:t.cn(`relative rounded-lg border bg-background transition-colors`,ae&&`ring-2 ring-ring ring-offset-2 ring-offset-background`,m&&`border-destructive`,p&&`opacity-50 cursor-not-allowed`),children:[(0,i.jsx)(`textarea`,{ref:E,value:O,onChange:ce,onKeyDown:le,onFocus:ue,onBlur:Z,placeholder:f,disabled:p,autoFocus:ne,className:t.cn(`w-full resize-none bg-transparent px-3 py-2 text-sm`,`placeholder:text-muted-foreground`,`focus:outline-none`,`disabled:cursor-not-allowed`),style:{minHeight:y,maxHeight:ee}}),z&&(0,i.jsx)(l,{items:F,highlightedIndex:L,onSelect:X,onHighlight:R,trigger:z,loading:U,position:oe,visible:N}),(_||v)&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between px-3 py-1.5 border-t bg-muted/30 text-xs text-muted-foreground`,children:[(0,i.jsx)(`div`,{className:`flex items-center gap-3`,children:v&&(0,i.jsxs)(`span`,{className:t.cn(pe&&`text-destructive`),children:[(0,i.jsx)(r.Users,{className:`h-3 w-3 inline mr-1`}),$,g&&` / ${g}`]})}),_&&(0,i.jsxs)(`span`,{className:t.cn(fe&&`text-destructive`),children:[Q,h&&` / ${h}`]})]})]}),(0,i.jsx)(`div`,{className:`flex items-center gap-2 mt-1.5 text-xs text-muted-foreground`,children:d.map(e=>(0,i.jsxs)(`span`,{className:`flex items-center gap-1`,children:[e.icon||(e.trigger===`@`?(0,i.jsx)(r.AtSign,{className:`h-3 w-3`}):e.trigger===`#`?(0,i.jsx)(r.Hash,{className:`h-3 w-3`}):(0,i.jsx)(r.MessageSquare,{className:`h-3 w-3`})),(0,i.jsxs)(`span`,{children:[e.trigger,` `,e.type]})]},e.trigger))})]}),m&&(0,i.jsx)(`p`,{className:`text-sm text-destructive`,children:m}),te&&O&&(0,i.jsxs)(`div`,{className:`p-3 rounded-lg border bg-muted/30`,children:[(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground mb-1.5`,children:`Preview`}),(0,i.jsx)(`div`,{className:`text-sm whitespace-pre-wrap`,children:(0,i.jsx)(u,{text:O,mentions:A,triggers:d})})]}),A.length>0&&(0,i.jsx)(`div`,{className:`flex flex-wrap gap-1.5`,children:A.map(e=>{let n=d.find(t=>t.trigger===e.trigger);return(0,i.jsxs)(`span`,{className:t.cn(`inline-flex items-center gap-1 px-2 py-1 rounded-full`,`bg-primary/10 text-primary text-xs font-medium`,`animate-in fade-in-0 zoom-in-95 duration-200`),children:[n?.icon||(e.trigger===`@`?(0,i.jsx)(r.AtSign,{className:`h-3 w-3`}):(0,i.jsx)(r.Hash,{className:`h-3 w-3`})),e.display,(0,i.jsx)(`button`,{type:`button`,onClick:()=>de(e.id),className:`ml-0.5 hover:text-destructive transition-colors`,children:(0,i.jsx)(r.X,{className:`h-3 w-3`})})]},`${e.id}-${e.startIndex}`)})})]})});d.displayName=`WakaMentionInput`,exports.default=d,exports.useMentionInput=o;