@wakastellar/ui 4.0.0 → 4.0.1

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

@@ -0,0 +1,148 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { X as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dialog";
+//#region src/components/waka-modal/index.tsx
+var o = {
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-xl",
+	full: "max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]"
+}, s = {
+	fade: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+	slide: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+	scale: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+	none: ""
+}, c = {
+	fade: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+	slide: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]",
+	scale: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+	none: ""
+}, l = t.forwardRef(({ className: t, animation: n = "fade", ...i }, o) => /* @__PURE__ */ r(a.Overlay, {
+	ref: o,
+	className: e("fixed inset-0 z-50 bg-black/80", s[n], t),
+	...i
+}));
+l.displayName = "ModalOverlay";
+var u = t.forwardRef(({ className: t, children: s, size: l = "md", animation: u = "fade", centered: d = !0, showCloseButton: f = !0, ...p }, m) => /* @__PURE__ */ i(a.Content, {
+	ref: m,
+	className: e("fixed z-50 w-full bg-background shadow-lg sm:rounded-lg", "left-1/2 -translate-x-1/2", d ? "top-1/2 -translate-y-1/2" : "top-[10%]", o[l], c[u], "duration-200", t),
+	...p,
+	children: [s, f && /* @__PURE__ */ i(a.Close, {
+		className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+		children: [/* @__PURE__ */ r(n, { className: "h-4 w-4" }), /* @__PURE__ */ r("span", {
+			className: "sr-only",
+			children: "Fermer"
+		})]
+	})]
+}));
+u.displayName = "ModalContent";
+var d = t.forwardRef(({ className: t, sticky: n, ...i }, a) => /* @__PURE__ */ r("div", {
+	ref: a,
+	className: e("flex flex-col space-y-1.5 p-6 pb-4", n && "sticky top-0 bg-background z-10 border-b", t),
+	...i
+}));
+d.displayName = "ModalHeader";
+var f = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(a.Title, {
+	ref: i,
+	className: e("text-lg font-semibold leading-none tracking-tight", t),
+	...n
+}));
+f.displayName = "ModalTitle";
+var p = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(a.Description, {
+	ref: i,
+	className: e("text-sm text-muted-foreground", t),
+	...n
+}));
+p.displayName = "ModalDescription";
+var m = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
+	ref: i,
+	className: e("px-6 py-4 overflow-auto", t),
+	...n
+}));
+m.displayName = "ModalBody";
+var h = t.forwardRef(({ className: t, sticky: n, ...i }, a) => /* @__PURE__ */ r("div", {
+	ref: a,
+	className: e("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 pt-4", n && "sticky bottom-0 bg-background z-10 border-t", t),
+	...i
+}));
+h.displayName = "ModalFooter";
+function g({ open: e, onOpenChange: t, title: n, description: o, children: s, size: c = "md", showCloseButton: g = !0, closeOnOverlayClick: _ = !0, closeOnEscape: v = !0, animation: y = "scale", centered: b = !0, stickyHeader: x = !1, stickyFooter: S = !1, footer: C, className: w, overlayClassName: T }) {
+	return /* @__PURE__ */ r(a.Root, {
+		open: e,
+		onOpenChange: t,
+		children: /* @__PURE__ */ i(a.Portal, { children: [/* @__PURE__ */ r(l, {
+			animation: y,
+			className: T
+		}), /* @__PURE__ */ i(u, {
+			size: c,
+			animation: y,
+			centered: b,
+			showCloseButton: g,
+			className: w,
+			onInteractOutside: (e) => {
+				_ || e.preventDefault();
+			},
+			onEscapeKeyDown: (e) => {
+				v || e.preventDefault();
+			},
+			"aria-describedby": o ? void 0 : "modal-description",
+			children: [
+				!n && /* @__PURE__ */ r(f, {
+					className: "sr-only",
+					children: "Fenêtre modale"
+				}),
+				!o && /* @__PURE__ */ r(p, {
+					id: "modal-description",
+					className: "sr-only",
+					children: "Contenu de la fenêtre modale"
+				}),
+				(n || o) && /* @__PURE__ */ i(d, {
+					sticky: x,
+					children: [n && /* @__PURE__ */ r(f, { children: n }), o && /* @__PURE__ */ r(p, { children: o })]
+				}),
+				/* @__PURE__ */ r(m, { children: s }),
+				C && /* @__PURE__ */ r(h, {
+					sticky: S,
+					children: C
+				})
+			]
+		})] })
+	});
+}
+function _({ children: e, onOpen: t, className: n, disabled: i }) {
+	return /* @__PURE__ */ r(a.Trigger, {
+		className: n,
+		disabled: i,
+		onClick: t,
+		asChild: !0,
+		children: e
+	});
+}
+function v(e) {
+	let { defaultOpen: n = !1, onOpenChange: r } = e || {}, [i, a] = t.useState(n);
+	return {
+		isOpen: i,
+		open: t.useCallback(() => {
+			a(!0), r?.(!0);
+		}, [r]),
+		close: t.useCallback(() => {
+			a(!1), r?.(!1);
+		}, [r]),
+		toggle: t.useCallback(() => {
+			a((e) => {
+				let t = !e;
+				return r?.(t), t;
+			});
+		}, [r]),
+		onOpenChange: t.useCallback((e) => {
+			a(e), r?.(e);
+		}, [r])
+	};
+}
+//#endregion
+export { m as ModalBody, u as ModalContent, p as ModalDescription, h as ModalFooter, d as ModalHeader, l as ModalOverlay, f as ModalTitle, _ as WakaModalTrigger, g as default, v as useModal };

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

@@ -0,0 +1,42 @@
+"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 overflow-hidden font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none`,{variants:{variant:{default:``,outline:`border-2`,ghost:``},size:{sm:`h-9 text-sm`,default:`h-11 text-base`,lg:`h-14 text-lg`},rounded:{default:`rounded-xl`,sm:`rounded-lg`,lg:`rounded-2xl`,full:`rounded-full`}},defaultVariants:{variant:`default`,size:`default`,rounded:`default`}}),o={idle:`bg-primary text-primary-foreground shadow-md hover:shadow-lg active:shadow-sm`,loading:`bg-primary/80 text-primary-foreground shadow-md cursor-wait`,success:`bg-green-500 text-white shadow-md`,error:`bg-destructive text-destructive-foreground shadow-md`},s={idle:`border-primary text-primary bg-transparent hover:bg-primary/10`,loading:`border-primary/50 text-primary/70 bg-transparent cursor-wait`,success:`border-green-500 text-green-500 bg-green-500/10`,error:`border-destructive text-destructive bg-destructive/10`},c={idle:`text-primary hover:bg-primary/10`,loading:`text-primary/70 cursor-wait`,success:`text-green-500 bg-green-500/10`,error:`text-destructive bg-destructive/10`};function l(e){typeof window>`u`||!(`vibrate`in navigator)||navigator.vibrate({light:[10],medium:[20],success:[10,50,10],error:[30,50,30,50,30]}[e])}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({className:e}){return(0,i.jsx)(`svg`,{className:t.cn(``,e),width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,i.jsx)(`polyline`,{points:`20 6 9 17 4 12`,className:`animate-draw-check`})})}function f({className:e}){return(0,i.jsxs)(`svg`,{className:t.cn(``,e),width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,i.jsx)(`line`,{x1:`18`,y1:`6`,x2:`6`,y2:`18`,className:`animate-draw-x-1`}),(0,i.jsx)(`line`,{x1:`6`,y1:`6`,x2:`18`,y2:`18`,className:`animate-draw-x-2`})]})}var p=n.forwardRef(({className:e,variant:r=`default`,size:p,rounded:m,state:h=`idle`,idleText:g,loadingText:_=`Loading...`,successText:v=`Success!`,errorText:y=`Error`,resetDelay:b=2e3,onReset:x,idleIcon:S,loadingIcon:C,successIcon:w,errorIcon:T,hapticFeedback:E=!0,animationDuration:D=300,disabled:O,onClick:k,...A},j)=>{let[M,N]=n.useState(h),[P,F]=n.useState(`auto`),I=n.useRef(null),L=n.useRef(null);n.useImperativeHandle(j,()=>I.current),n.useEffect(()=>{N(h)},[h]),n.useEffect(()=>{E&&(M===`success`?l(`success`):M===`error`?l(`error`):M===`loading`&&l(`light`))},[M,E]),n.useEffect(()=>{if((M===`success`||M===`error`)&&b>0){let e=setTimeout(()=>{N(`idle`),x?.()},b);return()=>clearTimeout(e)}},[M,b,x]),n.useEffect(()=>{I.current&&L.current&&F(L.current.scrollWidth+48+(M===`idle`?S?28:0:28))},[M,g,_,v,y,S]);let R=()=>{switch(M){case`loading`:return _;case`success`:return v;case`error`:return y;default:return g}},z=()=>{switch(M){case`loading`:return C??(0,i.jsx)(u,{});case`success`:return w??(0,i.jsx)(d,{});case`error`:return T??(0,i.jsx)(f,{});default:return S}},B=()=>r===`outline`?s[M]:r===`ghost`?c[M]:o[M],V=e=>{M===`loading`||O||k?.(e)},H=z(),U=R();return(0,i.jsxs)(`button`,{ref:I,className:t.cn(a({variant:r,size:p,rounded:m}),B(),e),style:{width:typeof P==`number`?`${P}px`:P,transition:`all ${D}ms ease-out`},disabled:O||M===`loading`,onClick:V,...A,children:[(0,i.jsx)(`span`,{className:t.cn(`flex items-center justify-center transition-all`,H?`w-5 mr-2`:`w-0 mr-0`),style:{transition:`all ${D}ms ease-out`,opacity:+!!H},children:H}),(0,i.jsx)(`span`,{ref:L,className:`whitespace-nowrap transition-opacity`,style:{transition:`opacity ${D/2}ms ease-out`},children:U})]})});if(p.displayName=`WakaMorphButton`,typeof document<`u`){let e=`waka-morph-button-styles`;if(!document.getElementById(e)){let t=document.createElement(`style`);t.id=e,t.textContent=`
+      @keyframes draw-check {
+        0% {
+          stroke-dasharray: 0 100;
+        }
+        100% {
+          stroke-dasharray: 100 0;
+        }
+      }
+      .animate-draw-check {
+        stroke-dasharray: 100;
+        stroke-dashoffset: 100;
+        animation: draw-check 0.4s ease-out forwards;
+      }
+
+      @keyframes draw-x-1 {
+        0% {
+          stroke-dasharray: 0 100;
+        }
+        100% {
+          stroke-dasharray: 100 0;
+        }
+      }
+      @keyframes draw-x-2 {
+        0% {
+          stroke-dasharray: 0 100;
+        }
+        100% {
+          stroke-dasharray: 100 0;
+        }
+      }
+      .animate-draw-x-1 {
+        stroke-dasharray: 100;
+        stroke-dashoffset: 100;
+        animation: draw-x-1 0.3s ease-out forwards;
+      }
+      .animate-draw-x-2 {
+        stroke-dasharray: 100;
+        stroke-dashoffset: 100;
+        animation: draw-x-2 0.3s ease-out 0.1s forwards;
+      }
+    `,document.head.appendChild(t)}}function m(e,t={}){let{onSuccess:r,onError:i,resetDelay:a=2e3}=t,[o,s]=n.useState(`idle`),[c,l]=n.useState(null),[u,d]=n.useState(null);return{state:o,result:c,error:u,execute:n.useCallback(async()=>{if(o!==`loading`){s(`loading`),d(null);try{l(await e()),s(`success`),r?.(),setTimeout(()=>{s(`idle`)},a)}catch(e){d(e),s(`error`),i?.(e),setTimeout(()=>{s(`idle`)},a)}}},[o,e,r,i,a]),reset:n.useCallback(()=>{s(`idle`),l(null),d(null)},[]),isLoading:o===`loading`,isSuccess:o===`success`,isError:o===`error`}}var h=n.forwardRef(({onClick:e,onSuccess:t,onError:n,resetDelay:r=2e3,...a},o)=>{let{state:s,execute:c}=m(e,{onSuccess:t,onError:n,resetDelay:r});return(0,i.jsx)(p,{ref:o,state:s,onClick:c,resetDelay:0,...a})});h.displayName=`WakaAsyncButton`,exports.WakaAsyncButton=h,exports.WakaMorphButton=p,exports.useMorphButton=m;

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

@@ -29,11 +29,11 @@ export interface WakaMorphButtonProps extends Omit<React.ButtonHTMLAttributes<HT
     /** Animation duration in ms */
     animationDuration?: number;
 }
-declare const morphButtonVariants: (props?: {
-    variant?: "default" | "outline" | "ghost";
-    size?: "default" | "sm" | "lg";
-    rounded?: "default" | "sm" | "lg" | "full";
-} & import("class-variance-authority/types").ClassProp) => string;
+declare const morphButtonVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    rounded?: "default" | "sm" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const WakaMorphButton: React.ForwardRefExoticComponent<WakaMorphButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export interface UseMorphButtonOptions {
     onSuccess?: () => void;
@@ -42,7 +42,7 @@ export interface UseMorphButtonOptions {
 }
 export declare function useMorphButton<T>(asyncFn: () => Promise<T>, options?: UseMorphButtonOptions): {
     state: MorphState;
-    result: T;
+    result: T | null;
     error: unknown;
     execute: () => Promise<void>;
     reset: () => void;

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

@@ -0,0 +1,260 @@
+"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-morph-button/index.tsx
+var a = n("relative inline-flex items-center justify-center overflow-hidden font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none", {
+	variants: {
+		variant: {
+			default: "",
+			outline: "border-2",
+			ghost: ""
+		},
+		size: {
+			sm: "h-9 text-sm",
+			default: "h-11 text-base",
+			lg: "h-14 text-lg"
+		},
+		rounded: {
+			default: "rounded-xl",
+			sm: "rounded-lg",
+			lg: "rounded-2xl",
+			full: "rounded-full"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		rounded: "default"
+	}
+}), o = {
+	idle: "bg-primary text-primary-foreground shadow-md hover:shadow-lg active:shadow-sm",
+	loading: "bg-primary/80 text-primary-foreground shadow-md cursor-wait",
+	success: "bg-green-500 text-white shadow-md",
+	error: "bg-destructive text-destructive-foreground shadow-md"
+}, s = {
+	idle: "border-primary text-primary bg-transparent hover:bg-primary/10",
+	loading: "border-primary/50 text-primary/70 bg-transparent cursor-wait",
+	success: "border-green-500 text-green-500 bg-green-500/10",
+	error: "border-destructive text-destructive bg-destructive/10"
+}, c = {
+	idle: "text-primary hover:bg-primary/10",
+	loading: "text-primary/70 cursor-wait",
+	success: "text-green-500 bg-green-500/10",
+	error: "text-destructive bg-destructive/10"
+};
+function l(e) {
+	typeof window > "u" || !("vibrate" in navigator) || navigator.vibrate({
+		light: [10],
+		medium: [20],
+		success: [
+			10,
+			50,
+			10
+		],
+		error: [
+			30,
+			50,
+			30,
+			50,
+			30
+		]
+	}[e]);
+}
+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({ className: t }) {
+	return /* @__PURE__ */ r("svg", {
+		className: e("", t),
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ r("polyline", {
+			points: "20 6 9 17 4 12",
+			className: "animate-draw-check"
+		})
+	});
+}
+function f({ className: t }) {
+	return /* @__PURE__ */ i("svg", {
+		className: e("", t),
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [/* @__PURE__ */ r("line", {
+			x1: "18",
+			y1: "6",
+			x2: "6",
+			y2: "18",
+			className: "animate-draw-x-1"
+		}), /* @__PURE__ */ r("line", {
+			x1: "6",
+			y1: "6",
+			x2: "18",
+			y2: "18",
+			className: "animate-draw-x-2"
+		})]
+	});
+}
+var p = t.forwardRef(({ className: n, variant: p = "default", size: m, rounded: h, state: g = "idle", idleText: _, loadingText: v = "Loading...", successText: y = "Success!", errorText: b = "Error", resetDelay: x = 2e3, onReset: S, idleIcon: C, loadingIcon: w, successIcon: T, errorIcon: E, hapticFeedback: D = !0, animationDuration: O = 300, disabled: k, onClick: A, ...j }, M) => {
+	let [N, P] = t.useState(g), [F, I] = t.useState("auto"), L = t.useRef(null), R = t.useRef(null);
+	t.useImperativeHandle(M, () => L.current), t.useEffect(() => {
+		P(g);
+	}, [g]), t.useEffect(() => {
+		D && (N === "success" ? l("success") : N === "error" ? l("error") : N === "loading" && l("light"));
+	}, [N, D]), t.useEffect(() => {
+		if ((N === "success" || N === "error") && x > 0) {
+			let e = setTimeout(() => {
+				P("idle"), S?.();
+			}, x);
+			return () => clearTimeout(e);
+		}
+	}, [
+		N,
+		x,
+		S
+	]), t.useEffect(() => {
+		L.current && R.current && I(R.current.scrollWidth + 48 + (N === "idle" ? C ? 28 : 0 : 28));
+	}, [
+		N,
+		_,
+		v,
+		y,
+		b,
+		C
+	]);
+	let z = () => {
+		switch (N) {
+			case "loading": return v;
+			case "success": return y;
+			case "error": return b;
+			default: return _;
+		}
+	}, B = () => {
+		switch (N) {
+			case "loading": return w ?? /* @__PURE__ */ r(u, {});
+			case "success": return T ?? /* @__PURE__ */ r(d, {});
+			case "error": return E ?? /* @__PURE__ */ r(f, {});
+			default: return C;
+		}
+	}, V = () => p === "outline" ? s[N] : p === "ghost" ? c[N] : o[N], H = (e) => {
+		N === "loading" || k || A?.(e);
+	}, U = B(), W = z();
+	return /* @__PURE__ */ i("button", {
+		ref: L,
+		className: e(a({
+			variant: p,
+			size: m,
+			rounded: h
+		}), V(), n),
+		style: {
+			width: typeof F == "number" ? `${F}px` : F,
+			transition: `all ${O}ms ease-out`
+		},
+		disabled: k || N === "loading",
+		onClick: H,
+		...j,
+		children: [/* @__PURE__ */ r("span", {
+			className: e("flex items-center justify-center transition-all", U ? "w-5 mr-2" : "w-0 mr-0"),
+			style: {
+				transition: `all ${O}ms ease-out`,
+				opacity: +!!U
+			},
+			children: U
+		}), /* @__PURE__ */ r("span", {
+			ref: R,
+			className: "whitespace-nowrap transition-opacity",
+			style: { transition: `opacity ${O / 2}ms ease-out` },
+			children: W
+		})]
+	});
+});
+if (p.displayName = "WakaMorphButton", typeof document < "u") {
+	let e = "waka-morph-button-styles";
+	if (!document.getElementById(e)) {
+		let t = document.createElement("style");
+		t.id = e, t.textContent = "\n      @keyframes draw-check {\n        0% {\n          stroke-dasharray: 0 100;\n        }\n        100% {\n          stroke-dasharray: 100 0;\n        }\n      }\n      .animate-draw-check {\n        stroke-dasharray: 100;\n        stroke-dashoffset: 100;\n        animation: draw-check 0.4s ease-out forwards;\n      }\n\n      @keyframes draw-x-1 {\n        0% {\n          stroke-dasharray: 0 100;\n        }\n        100% {\n          stroke-dasharray: 100 0;\n        }\n      }\n      @keyframes draw-x-2 {\n        0% {\n          stroke-dasharray: 0 100;\n        }\n        100% {\n          stroke-dasharray: 100 0;\n        }\n      }\n      .animate-draw-x-1 {\n        stroke-dasharray: 100;\n        stroke-dashoffset: 100;\n        animation: draw-x-1 0.3s ease-out forwards;\n      }\n      .animate-draw-x-2 {\n        stroke-dasharray: 100;\n        stroke-dashoffset: 100;\n        animation: draw-x-2 0.3s ease-out 0.1s forwards;\n      }\n    ", document.head.appendChild(t);
+	}
+}
+function m(e, n = {}) {
+	let { onSuccess: r, onError: i, resetDelay: a = 2e3 } = n, [o, s] = t.useState("idle"), [c, l] = t.useState(null), [u, d] = t.useState(null);
+	return {
+		state: o,
+		result: c,
+		error: u,
+		execute: t.useCallback(async () => {
+			if (o !== "loading") {
+				s("loading"), d(null);
+				try {
+					l(await e()), s("success"), r?.(), setTimeout(() => {
+						s("idle");
+					}, a);
+				} catch (e) {
+					d(e), s("error"), i?.(e), setTimeout(() => {
+						s("idle");
+					}, a);
+				}
+			}
+		}, [
+			o,
+			e,
+			r,
+			i,
+			a
+		]),
+		reset: t.useCallback(() => {
+			s("idle"), l(null), d(null);
+		}, []),
+		isLoading: o === "loading",
+		isSuccess: o === "success",
+		isError: o === "error"
+	};
+}
+var h = t.forwardRef(({ onClick: e, onSuccess: t, onError: n, resetDelay: i = 2e3, ...a }, o) => {
+	let { state: s, execute: c } = m(e, {
+		onSuccess: t,
+		onError: n,
+		resetDelay: i
+	});
+	return /* @__PURE__ */ r(p, {
+		ref: o,
+		state: s,
+		onClick: c,
+		resetDelay: 0,
+		...a
+	});
+});
+h.displayName = "WakaAsyncButton";
+//#endregion
+export { h as WakaAsyncButton, p as WakaMorphButton, m as useMorphButton };

package/dist/components/waka-network-topology/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={server:r.Server,database:r.Database,loadbalancer:r.Scale,firewall:r.Shield,cloud:r.Cloud,client:r.Monitor,router:r.Router},o={healthy:`#22c55e`,warning:`#eab308`,error:`#ef4444`,offline:`#6b7280`},s={low:{color:`#22c55e`,width:2,dashOffset:20},medium:{color:`#eab308`,width:3,dashOffset:15},high:{color:`#ef4444`,width:4,dashOffset:10}},c={active:`#3b82f6`,degraded:`#eab308`,down:`#ef4444`},l=({node:e,isSelected:n,onClick:r,scale:s})=>{let c=a[e.type],l=o[e.status];return(0,i.jsxs)(`g`,{transform:`translate(${e.x}, ${e.y})`,onClick:r,style:{cursor:`pointer`},role:`button`,"aria-label":`${e.label} - ${e.type} - ${e.status}`,tabIndex:0,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&r()},children:[n&&(0,i.jsx)(`circle`,{r:32,fill:`none`,stroke:`#3b82f6`,strokeWidth:2,strokeDasharray:`4 2`,className:`animate-spin`,style:{animationDuration:`8s`}}),(0,i.jsx)(`circle`,{r:48/2,fill:`white`,stroke:n?`#3b82f6`:`#e5e7eb`,strokeWidth:n?2:1,className:`drop-shadow-md`}),(0,i.jsx)(`circle`,{cx:48/2-8,cy:-16,r:6,fill:l,stroke:`white`,strokeWidth:2,children:e.status===`healthy`&&(0,i.jsx)(`animate`,{attributeName:`opacity`,values:`1;0.5;1`,dur:`2s`,repeatCount:`indefinite`})}),(0,i.jsx)(`foreignObject`,{x:-16,y:-16,width:32,height:32,style:{overflow:`visible`},children:(0,i.jsx)(`div`,{className:`flex h-full w-full items-center justify-center`,children:(0,i.jsx)(c,{size:24,className:t.cn(`text-gray-600`,e.status===`error`&&`text-red-500`,e.status===`warning`&&`text-yellow-500`,e.status===`offline`&&`text-gray-400`)})})}),(0,i.jsx)(`text`,{y:40,textAnchor:`middle`,className:`fill-gray-700 text-xs font-medium`,style:{fontSize:`${12/s}px`},children:e.label}),e.metrics&&(0,i.jsxs)(`g`,{className:`opacity-0 transition-opacity hover:opacity-100`,children:[(0,i.jsx)(`rect`,{x:-60,y:-98,width:120,height:45,rx:4,fill:`rgba(0,0,0,0.8)`}),(0,i.jsx)(`text`,{x:0,y:-83,textAnchor:`middle`,className:`fill-white text-xs`,style:{fontSize:`10px`},children:e.metrics.cpu!==void 0&&`CPU: ${e.metrics.cpu}%`}),(0,i.jsx)(`text`,{x:0,y:-70,textAnchor:`middle`,className:`fill-white text-xs`,style:{fontSize:`10px`},children:e.metrics.memory!==void 0&&`Mem: ${e.metrics.memory}%`}),(0,i.jsx)(`text`,{x:0,y:-57,textAnchor:`middle`,className:`fill-white text-xs`,style:{fontSize:`10px`},children:e.metrics.connections!==void 0&&`Conn: ${e.metrics.connections}`})]})]})},u=({edge:e,sourceNode:n,targetNode:r,showLatency:a,showTraffic:o,animated:l,isHighlighted:u,onClick:d})=>{let f=e.traffic||`low`,p=s[f],m=e.status?c[e.status]:p.color,h=r.x-n.x,g=r.y-n.y,_=Math.sqrt(h*h+g*g),v=h/_*24,y=g/_*24,b=n.x+v,x=n.y+y,S=r.x-v,C=r.y-y,w=(b+S)/2,T=(x+C)/2,E=180/Math.PI*Math.atan2(g,h);return(E>90||E<-90)&&E+180,`${e.source}${e.target}`,(0,i.jsxs)(`g`,{onClick:d,style:{cursor:`pointer`},role:`button`,"aria-label":`Connection from ${n.label} to ${r.label}${e.latency?`, latency ${e.latency}ms`:``}`,children:[(0,i.jsx)(`line`,{x1:b,y1:x,x2:S,y2:C,stroke:`transparent`,strokeWidth:20}),(0,i.jsx)(`line`,{x1:b,y1:x,x2:S,y2:C,stroke:u?`#3b82f6`:m,strokeWidth:o?p.width:2,strokeOpacity:e.status===`down`?.3:u?1:.6,strokeDasharray:e.status===`down`?`5 5`:void 0}),l&&o&&e.status!==`down`&&(0,i.jsx)(`line`,{x1:b,y1:x,x2:S,y2:C,stroke:u?`#60a5fa`:m,strokeWidth:p.width,strokeDasharray:`8 12`,strokeLinecap:`round`,children:(0,i.jsx)(`animate`,{attributeName:`stroke-dashoffset`,from:`0`,to:-p.dashOffset*2,dur:`${p.dashOffset/10}s`,repeatCount:`indefinite`})}),l&&o&&f===`high`&&e.status!==`down`&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`circle`,{r:3,fill:m,children:(0,i.jsx)(`animateMotion`,{dur:`1s`,repeatCount:`indefinite`,path:`M${b},${x} L${S},${C}`})}),(0,i.jsx)(`circle`,{r:3,fill:m,children:(0,i.jsx)(`animateMotion`,{dur:`1s`,repeatCount:`indefinite`,begin:`0.5s`,path:`M${b},${x} L${S},${C}`})})]}),a&&e.latency!==void 0&&(0,i.jsxs)(`g`,{transform:`translate(${w}, ${T})`,children:[(0,i.jsx)(`rect`,{x:-20,y:-10,width:40,height:20,rx:4,fill:`white`,stroke:`#e5e7eb`,strokeWidth:1}),(0,i.jsxs)(`text`,{textAnchor:`middle`,dominantBaseline:`middle`,className:t.cn(`text-xs font-medium`,e.latency>100?`fill-red-500`:e.latency>50?`fill-yellow-500`:`fill-green-500`),style:{fontSize:`10px`},children:[e.latency,`ms`]})]})]})},d=({nodes:e,edges:t,viewBox:n,bounds:r,onViewChange:a})=>{let s=r.maxX-r.minX+20,c=r.maxY-r.minY+20,l=Math.min(150/s,150/c);return(0,i.jsx)(`div`,{className:`absolute bottom-4 right-4 rounded-lg border border-gray-200 bg-white p-2 shadow-lg`,children:(0,i.jsxs)(`svg`,{width:150,height:150,onClick:e=>{let t=e.currentTarget.getBoundingClientRect(),i=e.clientX-t.left,o=e.clientY-t.top,s=i/l+r.minX-10,c=o/l+r.minY-10;a(s-n.width/2,c-n.height/2)},style:{cursor:`crosshair`},"aria-label":`Network mini-map`,children:[(0,i.jsx)(`rect`,{width:150,height:150,fill:`#f9fafb`,rx:4}),t.map(t=>{let n=e.find(e=>e.id===t.source),a=e.find(e=>e.id===t.target);return!n||!a?null:(0,i.jsx)(`line`,{x1:(n.x-r.minX+10)*l,y1:(n.y-r.minY+10)*l,x2:(a.x-r.minX+10)*l,y2:(a.y-r.minY+10)*l,stroke:`#cbd5e1`,strokeWidth:1},`mini-${t.source}-${t.target}`)}),e.map(e=>(0,i.jsx)(`circle`,{cx:(e.x-r.minX+10)*l,cy:(e.y-r.minY+10)*l,r:4,fill:o[e.status]},`mini-${e.id}`)),(0,i.jsx)(`rect`,{x:(n.x-r.minX+10)*l,y:(n.y-r.minY+10)*l,width:n.width*l,height:n.height*l,fill:`rgba(59, 130, 246, 0.1)`,stroke:`#3b82f6`,strokeWidth:1,rx:2})]})})},f=({nodes:e,edges:a,onNodeClick:c,onEdgeClick:f,selectedNode:p,showLatency:m=!0,showTraffic:h=!0,animated:g=!0,className:_})=>{let v=n.useRef(null),y=n.useRef(null),[b,x]=n.useState({x:0,y:0,width:800,height:600}),[S,C]=n.useState(1),[w,T]=n.useState(!1),[E,D]=n.useState({x:0,y:0}),[O,k]=n.useState(new Set),A=n.useMemo(()=>{if(e.length===0)return{minX:0,minY:0,maxX:800,maxY:600};let t=e.map(e=>e.x),n=e.map(e=>e.y);return{minX:Math.min(...t)-100,minY:Math.min(...n)-100,maxX:Math.max(...t)+100,maxY:Math.max(...n)+100}},[e]);n.useEffect(()=>{if(y.current){let{width:e,height:t}=y.current.getBoundingClientRect();x({x:A.minX,y:A.minY,width:e||800,height:t||600})}},[A]),n.useEffect(()=>{if(p){let e=new Set;a.forEach(t=>{(t.source===p||t.target===p)&&e.add(`${t.source}-${t.target}`)}),k(e)}else k(new Set)},[p,a]);let j=e=>{let t=Math.max(.25,Math.min(4,S+e)),n=S/t;x(e=>({x:e.x+e.width*(1-n)/2,y:e.y+e.height*(1-n)/2,width:e.width*n,height:e.height*n})),C(t)},M=e=>{e.preventDefault(),j(e.deltaY>0?-.1:.1)},N=e=>{e.button===0&&(T(!0),D({x:e.clientX,y:e.clientY}))},P=e=>{if(w){let t=(e.clientX-E.x)/S,n=(e.clientY-E.y)/S;x(e=>({...e,x:e.x-t,y:e.y-n})),D({x:e.clientX,y:e.clientY})}},F=()=>{T(!1)};return(0,i.jsxs)(`div`,{ref:y,className:t.cn(`relative h-full w-full overflow-hidden rounded-lg border border-gray-200 bg-gray-50`,_),children:[(0,i.jsxs)(`div`,{className:`absolute left-4 top-4 z-10 flex flex-col gap-2`,children:[(0,i.jsx)(`button`,{onClick:()=>j(.2),className:`rounded-lg border border-gray-200 bg-white p-2 shadow-sm transition-colors hover:bg-gray-50`,"aria-label":`Zoom in`,children:(0,i.jsx)(r.ZoomIn,{size:18,className:`text-gray-600`})}),(0,i.jsx)(`button`,{onClick:()=>j(-.2),className:`rounded-lg border border-gray-200 bg-white p-2 shadow-sm transition-colors hover:bg-gray-50`,"aria-label":`Zoom out`,children:(0,i.jsx)(r.ZoomOut,{size:18,className:`text-gray-600`})}),(0,i.jsx)(`button`,{onClick:()=>{if(y.current){let{width:e,height:t}=y.current.getBoundingClientRect(),n=A.maxX-A.minX,r=A.maxY-A.minY,i=Math.min(e/n,t/r);x({x:A.minX-(e/i-n)/2,y:A.minY-(t/i-r)/2,width:e/i,height:t/i}),C(i)}},className:`rounded-lg border border-gray-200 bg-white p-2 shadow-sm transition-colors hover:bg-gray-50`,"aria-label":`Fit to view`,children:(0,i.jsx)(r.Maximize2,{size:18,className:`text-gray-600`})}),(0,i.jsxs)(`div`,{className:`mt-2 rounded-lg border border-gray-200 bg-white px-2 py-1 text-center text-xs text-gray-500 shadow-sm`,children:[Math.round(S*100),`%`]})]}),w&&(0,i.jsxs)(`div`,{className:`absolute left-1/2 top-4 z-10 -translate-x-1/2 rounded-full bg-blue-500 px-3 py-1 text-xs text-white shadow-md`,children:[(0,i.jsx)(r.Move,{size:12,className:`mr-1 inline`}),`Panning`]}),(0,i.jsxs)(`svg`,{ref:v,className:t.cn(`h-full w-full`,w?`cursor-grabbing`:`cursor-grab`),viewBox:`${b.x} ${b.y} ${b.width} ${b.height}`,onWheel:M,onMouseDown:N,onMouseMove:P,onMouseUp:F,onMouseLeave:F,"aria-label":`Network topology diagram`,role:`img`,children:[(0,i.jsxs)(`defs`,{children:[(0,i.jsx)(`pattern`,{id:`grid`,width:50,height:50,patternUnits:`userSpaceOnUse`,children:(0,i.jsx)(`path`,{d:`M 50 0 L 0 0 0 50`,fill:`none`,stroke:`#e5e7eb`,strokeWidth:.5})}),(0,i.jsx)(`marker`,{id:`arrowhead`,markerWidth:10,markerHeight:7,refX:9,refY:3.5,orient:`auto`,children:(0,i.jsx)(`polygon`,{points:`0 0, 10 3.5, 0 7`,fill:`#94a3b8`})}),(0,i.jsxs)(`filter`,{id:`glow`,x:`-50%`,y:`-50%`,width:`200%`,height:`200%`,children:[(0,i.jsx)(`feGaussianBlur`,{stdDeviation:`3`,result:`coloredBlur`}),(0,i.jsxs)(`feMerge`,{children:[(0,i.jsx)(`feMergeNode`,{in:`coloredBlur`}),(0,i.jsx)(`feMergeNode`,{in:`SourceGraphic`})]})]})]}),(0,i.jsx)(`rect`,{x:A.minX-1e3,y:A.minY-1e3,width:A.maxX-A.minX+2e3,height:A.maxY-A.minY+2e3,fill:`url(#grid)`}),(0,i.jsx)(`g`,{className:`edges`,children:a.map(t=>{let n=e.find(e=>e.id===t.source),r=e.find(e=>e.id===t.target);if(!n||!r)return null;let a=`${t.source}-${t.target}`;return(0,i.jsx)(u,{edge:t,sourceNode:n,targetNode:r,showLatency:m,showTraffic:h,animated:g,isHighlighted:O.has(a),onClick:()=>f?.(t.source,t.target)},a)})}),(0,i.jsx)(`g`,{className:`nodes`,children:e.map(e=>(0,i.jsx)(l,{node:e,isSelected:p===e.id,onClick:()=>c?.(e.id),scale:S},e.id))})]}),(0,i.jsx)(d,{nodes:e,edges:a,viewBox:b,bounds:A,onViewChange:(e,t)=>{x(n=>({...n,x:e,y:t}))}}),(0,i.jsxs)(`div`,{className:`absolute bottom-4 left-4 rounded-lg border border-gray-200 bg-white p-3 shadow-lg`,children:[(0,i.jsx)(`div`,{className:`mb-2 text-xs font-medium text-gray-700`,children:`Status`}),(0,i.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:Object.entries(o).map(([e,t])=>(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(`div`,{className:`h-3 w-3 rounded-full`,style:{backgroundColor:t}}),(0,i.jsx)(`span`,{className:`text-xs capitalize text-gray-600`,children:e})]},e))}),h&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`mb-2 mt-3 text-xs font-medium text-gray-700`,children:`Traffic`}),(0,i.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:Object.entries(s).map(([e,t])=>(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(`div`,{className:`h-0.5 w-4`,style:{backgroundColor:t.color,height:t.width}}),(0,i.jsx)(`span`,{className:`text-xs capitalize text-gray-600`,children:e})]},e))})]})]})]})};exports.default=f;