@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-flow-diagram/index.cjs.js

@@ -0,0 +1,13 @@
+"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`);function a({node:e,selected:n,draggable:a,onSelect:o,onDragStart:s,onDelete:c}){let l={start:`rounded-full bg-green-500 text-white`,end:`rounded-full bg-red-500 text-white`,action:`rounded-lg bg-blue-500 text-white`,decision:`rotate-45 bg-amber-500 text-white`,process:`rounded-lg bg-purple-500 text-white`,custom:`rounded-lg bg-muted border-2 border-dashed`},u=e.type===`decision`;return(0,i.jsxs)(`div`,{className:t.cn(`absolute cursor-pointer transition-all duration-200`,n&&`ring-2 ring-primary ring-offset-2`),style:{left:e.position.x,top:e.position.y,transform:`translate(-50%, -50%)`},onClick:o,children:[(0,i.jsxs)(`div`,{className:t.cn(`relative flex items-center justify-center min-w-[80px] min-h-[40px] px-4 py-2 shadow-lg`,l[e.type],a&&`cursor-grab active:cursor-grabbing`),onMouseDown:a?s:void 0,children:[a&&(0,i.jsx)(`div`,{className:`absolute -left-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity`,children:(0,i.jsx)(r.GripVertical,{className:`h-4 w-4 text-muted-foreground`})}),(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-2`,u&&`-rotate-45`),children:[e.icon,(0,i.jsx)(`span`,{className:`font-medium text-sm whitespace-nowrap`,children:e.label})]}),n&&c&&(0,i.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),c()},className:`absolute -top-2 -right-2 h-5 w-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center hover:scale-110 transition-transform`,children:(0,i.jsx)(r.Trash2,{className:`h-3 w-3`})}),(0,i.jsx)(`div`,{className:`absolute left-1/2 -top-1 w-2 h-2 rounded-full bg-background border-2 border-primary -translate-x-1/2`}),(0,i.jsx)(`div`,{className:`absolute left-1/2 -bottom-1 w-2 h-2 rounded-full bg-background border-2 border-primary -translate-x-1/2`}),(0,i.jsx)(`div`,{className:`absolute top-1/2 -left-1 w-2 h-2 rounded-full bg-background border-2 border-primary -translate-y-1/2`}),(0,i.jsx)(`div`,{className:`absolute top-1/2 -right-1 w-2 h-2 rounded-full bg-background border-2 border-primary -translate-y-1/2`})]}),e.description&&n&&(0,i.jsx)(`div`,{className:`absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-1.5 rounded-md bg-popover text-popover-foreground text-xs shadow-lg whitespace-nowrap z-10`,children:e.description})]})}function o({from:e,to:t,label:n,animated:r,color:a=`hsl(var(--primary))`}){let o=(e.x+t.x)/2,s=(e.y+t.y)/2,c=t.x-e.x,l=t.y-e.y,u=Math.abs(c)>Math.abs(l),d;return d=u?`M ${e.x} ${e.y} C ${o} ${e.y}, ${o} ${t.y}, ${t.x} ${t.y}`:`M ${e.x} ${e.y} C ${e.x} ${s}, ${t.x} ${s}, ${t.x} ${t.y}`,(0,i.jsxs)(`g`,{children:[(0,i.jsx)(`path`,{d,fill:`none`,stroke:`rgba(0,0,0,0.1)`,strokeWidth:4,strokeLinecap:`round`}),(0,i.jsx)(`path`,{d,fill:`none`,stroke:a,strokeWidth:2,strokeLinecap:`round`,className:r?`animate-dash`:``,strokeDasharray:r?`8 4`:`none`}),(0,i.jsx)(`polygon`,{points:`-6,-4 0,0 -6,4`,fill:a,transform:`translate(${t.x}, ${t.y}) rotate(${Math.atan2(l,c)*180/Math.PI})`}),n&&(0,i.jsx)(`text`,{x:o,y:s-8,textAnchor:`middle`,className:`fill-muted-foreground text-xs`,children:n}),(0,i.jsx)(`style`,{children:`
+        @keyframes dash {
+          to {
+            stroke-dashoffset: -24;
+          }
+        }
+        .animate-dash {
+          animation: dash 1s linear infinite;
+        }
+      `})]})}function s({nodes:e,connections:s,onNodesChange:c,onConnectionsChange:l,onNodeClick:u,onNodeDoubleClick:d,draggable:f=!0,editable:p=!0,zoom:m=1,gridSize:h=20,showGrid:g=!0,className:_}){let v=n.useRef(null),[y,b]=n.useState(e),[x,S]=n.useState(s),[C,w]=n.useState(null),[T,E]=n.useState(null),[D,O]=n.useState({x:0,y:0});n.useEffect(()=>{b(e)},[e]),n.useEffect(()=>{S(s)},[s]);let k=(e,t)=>{let n=y.find(t=>t.id===e);n&&E({id:e,offset:{x:t.clientX-n.position.x,y:t.clientY-n.position.y}})},A=n.useCallback(e=>{if(!T)return;let t=Math.round((e.clientX-T.offset.x)/h)*h,n=Math.round((e.clientY-T.offset.y)/h)*h;b(e=>{let r=e.map(e=>e.id===T.id?{...e,position:{x:t,y:n}}:e);return c?.(r),r})},[T,h,c]),j=n.useCallback(()=>{E(null)},[]);n.useEffect(()=>{if(T)return window.addEventListener(`mousemove`,A),window.addEventListener(`mouseup`,j),()=>{window.removeEventListener(`mousemove`,A),window.removeEventListener(`mouseup`,j)}},[T,A,j]);let M=e=>{let t=y.filter(t=>t.id!==e),n=x.filter(t=>t.from!==e&&t.to!==e);b(t),S(n),w(null),c?.(t),l?.(n)},N=e=>{let t={id:`node-${Date.now()}`,type:e,label:e.charAt(0).toUpperCase()+e.slice(1),position:{x:200,y:200}},n=[...y,t];b(n),c?.(n)},P=e=>y.find(t=>t.id===e)?.position||{x:0,y:0};return(0,i.jsxs)(`div`,{ref:v,className:t.cn(`relative overflow-hidden rounded-lg border bg-background`,_),style:{minHeight:400},children:[g&&(0,i.jsx)(`div`,{className:`absolute inset-0 pointer-events-none opacity-30`,style:{backgroundImage:`
+              linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px),
+              linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px)
+            `,backgroundSize:`${h*m}px ${h*m}px`,backgroundPosition:`${D.x}px ${D.y}px`}}),(0,i.jsx)(`svg`,{className:`absolute inset-0 pointer-events-none`,style:{transform:`scale(${m})`,transformOrigin:`top left`},"aria-hidden":`true`,focusable:`false`,children:x.map(e=>(0,i.jsx)(o,{from:P(e.from),to:P(e.to),label:e.label,animated:e.animated,color:e.color},e.id))}),(0,i.jsx)(`div`,{className:`absolute inset-0`,style:{transform:`scale(${m})`,transformOrigin:`top left`},children:y.map(e=>(0,i.jsx)(a,{node:e,selected:C===e.id,draggable:f,onSelect:()=>{w(e.id),u?.(e)},onDragStart:t=>k(e.id,t),onDelete:p?()=>M(e.id):void 0},e.id))}),p&&(0,i.jsxs)(`div`,{className:`absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-2 rounded-full border bg-background/95 px-4 py-2 shadow-lg backdrop-blur-sm`,children:[(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground mr-2`,children:`Add:`}),[`start`,`action`,`decision`,`process`,`end`].map(e=>(0,i.jsx)(`button`,{type:`button`,onClick:()=>N(e),className:t.cn(`h-8 w-8 rounded-full flex items-center justify-center text-xs font-medium text-white transition-transform hover:scale-110`,e===`start`&&`bg-green-500`,e===`action`&&`bg-blue-500`,e===`decision`&&`bg-amber-500`,e===`process`&&`bg-purple-500`,e===`end`&&`bg-red-500`),title:e.charAt(0).toUpperCase()+e.slice(1),children:(0,i.jsx)(r.Plus,{className:`h-4 w-4`})},e))]}),(0,i.jsxs)(`div`,{className:`absolute top-4 right-4 text-xs text-muted-foreground bg-background/80 px-2 py-1 rounded`,children:[Math.round(m*100),`%`]})]})}function c(e=[],t=[]){let[r,i]=n.useState(e),[a,o]=n.useState(t);return{nodes:r,connections:a,setNodes:i,setConnections:o,addNode:e=>{let t={...e,id:`node-${Date.now()}`};return i(e=>[...e,t]),t},removeNode:e=>{i(t=>t.filter(t=>t.id!==e)),o(t=>t.filter(t=>t.from!==e&&t.to!==e))},updateNode:(e,t)=>{i(n=>n.map(n=>n.id===e?{...n,...t}:n))},addConnection:(e,t,n)=>{let r={id:`conn-${Date.now()}`,from:e,to:t,...n};return o(e=>[...e,r]),r},removeConnection:e=>{o(t=>t.filter(t=>t.id!==e))},clear:()=>{i([]),o([])}}}exports.WakaFlowDiagram=s,exports.useFlowDiagram=c;

package/dist/components/waka-flow-diagram/index.d.ts

@@ -53,15 +53,15 @@ export declare function useFlowDiagram(initialNodes?: FlowNode[], initialConnect
     setConnections: React.Dispatch<React.SetStateAction<FlowConnection[]>>;
     addNode: (node: Omit<FlowNode, "id">) => {
         id: string;
-        data?: Record<string, unknown>;
-        description?: string;
+        data?: Record<string, unknown> | undefined;
+        description?: string | undefined;
         type: "start" | "end" | "action" | "decision" | "process" | "custom";
         label: string;
-        icon?: React.ReactNode;
         position: {
             x: number;
             y: number;
         };
+        icon?: React.ReactNode;
     };
     removeNode: (nodeId: string) => void;
     updateNode: (nodeId: string, updates: Partial<FlowNode>) => void;

package/dist/components/waka-flow-diagram/index.es.js

@@ -0,0 +1,272 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { GripVertical as n, Plus as r, Trash2 as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/waka-flow-diagram/index.tsx
+function s({ node: t, selected: r, draggable: s, onSelect: c, onDragStart: l, onDelete: u }) {
+	let d = {
+		start: "rounded-full bg-green-500 text-white",
+		end: "rounded-full bg-red-500 text-white",
+		action: "rounded-lg bg-blue-500 text-white",
+		decision: "rotate-45 bg-amber-500 text-white",
+		process: "rounded-lg bg-purple-500 text-white",
+		custom: "rounded-lg bg-muted border-2 border-dashed"
+	}, f = t.type === "decision";
+	return /* @__PURE__ */ o("div", {
+		className: e("absolute cursor-pointer transition-all duration-200", r && "ring-2 ring-primary ring-offset-2"),
+		style: {
+			left: t.position.x,
+			top: t.position.y,
+			transform: "translate(-50%, -50%)"
+		},
+		onClick: c,
+		children: [/* @__PURE__ */ o("div", {
+			className: e("relative flex items-center justify-center min-w-[80px] min-h-[40px] px-4 py-2 shadow-lg", d[t.type], s && "cursor-grab active:cursor-grabbing"),
+			onMouseDown: s ? l : void 0,
+			children: [
+				s && /* @__PURE__ */ a("div", {
+					className: "absolute -left-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity",
+					children: /* @__PURE__ */ a(n, { className: "h-4 w-4 text-muted-foreground" })
+				}),
+				/* @__PURE__ */ o("div", {
+					className: e("flex items-center gap-2", f && "-rotate-45"),
+					children: [t.icon, /* @__PURE__ */ a("span", {
+						className: "font-medium text-sm whitespace-nowrap",
+						children: t.label
+					})]
+				}),
+				r && u && /* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation(), u();
+					},
+					className: "absolute -top-2 -right-2 h-5 w-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center hover:scale-110 transition-transform",
+					children: /* @__PURE__ */ a(i, { className: "h-3 w-3" })
+				}),
+				/* @__PURE__ */ a("div", { className: "absolute left-1/2 -top-1 w-2 h-2 rounded-full bg-background border-2 border-primary -translate-x-1/2" }),
+				/* @__PURE__ */ a("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 rounded-full bg-background border-2 border-primary -translate-x-1/2" }),
+				/* @__PURE__ */ a("div", { className: "absolute top-1/2 -left-1 w-2 h-2 rounded-full bg-background border-2 border-primary -translate-y-1/2" }),
+				/* @__PURE__ */ a("div", { className: "absolute top-1/2 -right-1 w-2 h-2 rounded-full bg-background border-2 border-primary -translate-y-1/2" })
+			]
+		}), t.description && r && /* @__PURE__ */ a("div", {
+			className: "absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-1.5 rounded-md bg-popover text-popover-foreground text-xs shadow-lg whitespace-nowrap z-10",
+			children: t.description
+		})]
+	});
+}
+function c({ from: e, to: t, label: n, animated: r, color: i = "hsl(var(--primary))" }) {
+	let s = (e.x + t.x) / 2, c = (e.y + t.y) / 2, l = t.x - e.x, u = t.y - e.y, d = Math.abs(l) > Math.abs(u), f;
+	return f = d ? `M ${e.x} ${e.y} C ${s} ${e.y}, ${s} ${t.y}, ${t.x} ${t.y}` : `M ${e.x} ${e.y} C ${e.x} ${c}, ${t.x} ${c}, ${t.x} ${t.y}`, /* @__PURE__ */ o("g", { children: [
+		/* @__PURE__ */ a("path", {
+			d: f,
+			fill: "none",
+			stroke: "rgba(0,0,0,0.1)",
+			strokeWidth: 4,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ a("path", {
+			d: f,
+			fill: "none",
+			stroke: i,
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			className: r ? "animate-dash" : "",
+			strokeDasharray: r ? "8 4" : "none"
+		}),
+		/* @__PURE__ */ a("polygon", {
+			points: "-6,-4 0,0 -6,4",
+			fill: i,
+			transform: `translate(${t.x}, ${t.y}) rotate(${Math.atan2(u, l) * 180 / Math.PI})`
+		}),
+		n && /* @__PURE__ */ a("text", {
+			x: s,
+			y: c - 8,
+			textAnchor: "middle",
+			className: "fill-muted-foreground text-xs",
+			children: n
+		}),
+		/* @__PURE__ */ a("style", { children: "\n        @keyframes dash {\n          to {\n            stroke-dashoffset: -24;\n          }\n        }\n        .animate-dash {\n          animation: dash 1s linear infinite;\n        }\n      " })
+	] });
+}
+function l({ nodes: n, connections: i, onNodesChange: l, onConnectionsChange: u, onNodeClick: d, onNodeDoubleClick: f, draggable: p = !0, editable: m = !0, zoom: h = 1, gridSize: g = 20, showGrid: _ = !0, className: v }) {
+	let y = t.useRef(null), [b, x] = t.useState(n), [S, C] = t.useState(i), [w, T] = t.useState(null), [E, D] = t.useState(null), [O, k] = t.useState({
+		x: 0,
+		y: 0
+	});
+	t.useEffect(() => {
+		x(n);
+	}, [n]), t.useEffect(() => {
+		C(i);
+	}, [i]);
+	let A = (e, t) => {
+		let n = b.find((t) => t.id === e);
+		n && D({
+			id: e,
+			offset: {
+				x: t.clientX - n.position.x,
+				y: t.clientY - n.position.y
+			}
+		});
+	}, j = t.useCallback((e) => {
+		if (!E) return;
+		let t = Math.round((e.clientX - E.offset.x) / g) * g, n = Math.round((e.clientY - E.offset.y) / g) * g;
+		x((e) => {
+			let r = e.map((e) => e.id === E.id ? {
+				...e,
+				position: {
+					x: t,
+					y: n
+				}
+			} : e);
+			return l?.(r), r;
+		});
+	}, [
+		E,
+		g,
+		l
+	]), M = t.useCallback(() => {
+		D(null);
+	}, []);
+	t.useEffect(() => {
+		if (E) return window.addEventListener("mousemove", j), window.addEventListener("mouseup", M), () => {
+			window.removeEventListener("mousemove", j), window.removeEventListener("mouseup", M);
+		};
+	}, [
+		E,
+		j,
+		M
+	]);
+	let N = (e) => {
+		let t = b.filter((t) => t.id !== e), n = S.filter((t) => t.from !== e && t.to !== e);
+		x(t), C(n), T(null), l?.(t), u?.(n);
+	}, P = (e) => {
+		let t = {
+			id: `node-${Date.now()}`,
+			type: e,
+			label: e.charAt(0).toUpperCase() + e.slice(1),
+			position: {
+				x: 200,
+				y: 200
+			}
+		}, n = [...b, t];
+		x(n), l?.(n);
+	}, F = (e) => b.find((t) => t.id === e)?.position || {
+		x: 0,
+		y: 0
+	};
+	return /* @__PURE__ */ o("div", {
+		ref: y,
+		className: e("relative overflow-hidden rounded-lg border bg-background", v),
+		style: { minHeight: 400 },
+		children: [
+			_ && /* @__PURE__ */ a("div", {
+				className: "absolute inset-0 pointer-events-none opacity-30",
+				style: {
+					backgroundImage: "\n              linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px),\n              linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px)\n            ",
+					backgroundSize: `${g * h}px ${g * h}px`,
+					backgroundPosition: `${O.x}px ${O.y}px`
+				}
+			}),
+			/* @__PURE__ */ a("svg", {
+				className: "absolute inset-0 pointer-events-none",
+				style: {
+					transform: `scale(${h})`,
+					transformOrigin: "top left"
+				},
+				"aria-hidden": "true",
+				focusable: "false",
+				children: S.map((e) => /* @__PURE__ */ a(c, {
+					from: F(e.from),
+					to: F(e.to),
+					label: e.label,
+					animated: e.animated,
+					color: e.color
+				}, e.id))
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "absolute inset-0",
+				style: {
+					transform: `scale(${h})`,
+					transformOrigin: "top left"
+				},
+				children: b.map((e) => /* @__PURE__ */ a(s, {
+					node: e,
+					selected: w === e.id,
+					draggable: p,
+					onSelect: () => {
+						T(e.id), d?.(e);
+					},
+					onDragStart: (t) => A(e.id, t),
+					onDelete: m ? () => N(e.id) : void 0
+				}, e.id))
+			}),
+			m && /* @__PURE__ */ o("div", {
+				className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-2 rounded-full border bg-background/95 px-4 py-2 shadow-lg backdrop-blur-sm",
+				children: [/* @__PURE__ */ a("span", {
+					className: "text-xs text-muted-foreground mr-2",
+					children: "Add:"
+				}), [
+					"start",
+					"action",
+					"decision",
+					"process",
+					"end"
+				].map((t) => /* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: () => P(t),
+					className: e("h-8 w-8 rounded-full flex items-center justify-center text-xs font-medium text-white transition-transform hover:scale-110", t === "start" && "bg-green-500", t === "action" && "bg-blue-500", t === "decision" && "bg-amber-500", t === "process" && "bg-purple-500", t === "end" && "bg-red-500"),
+					title: t.charAt(0).toUpperCase() + t.slice(1),
+					children: /* @__PURE__ */ a(r, { className: "h-4 w-4" })
+				}, t))]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "absolute top-4 right-4 text-xs text-muted-foreground bg-background/80 px-2 py-1 rounded",
+				children: [Math.round(h * 100), "%"]
+			})
+		]
+	});
+}
+function u(e = [], n = []) {
+	let [r, i] = t.useState(e), [a, o] = t.useState(n);
+	return {
+		nodes: r,
+		connections: a,
+		setNodes: i,
+		setConnections: o,
+		addNode: (e) => {
+			let t = {
+				...e,
+				id: `node-${Date.now()}`
+			};
+			return i((e) => [...e, t]), t;
+		},
+		removeNode: (e) => {
+			i((t) => t.filter((t) => t.id !== e)), o((t) => t.filter((t) => t.from !== e && t.to !== e));
+		},
+		updateNode: (e, t) => {
+			i((n) => n.map((n) => n.id === e ? {
+				...n,
+				...t
+			} : n));
+		},
+		addConnection: (e, t, n) => {
+			let r = {
+				id: `conn-${Date.now()}`,
+				from: e,
+				to: t,
+				...n
+			};
+			return o((e) => [...e, r]), r;
+		},
+		removeConnection: (e) => {
+			o((t) => t.filter((t) => t.id !== e));
+		},
+		clear: () => {
+			i([]), o([]);
+		}
+	};
+}
+//#endregion
+export { l as WakaFlowDiagram, u as useFlowDiagram };

package/dist/components/waka-funnel-chart/index.cjs.js

@@ -0,0 +1,13 @@
+"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`);function a({data:e,minWidthPercentage:t=20}){let[r,i]=n.useState(null),[a,o]=n.useState(null),s=n.useMemo(()=>{if(e.length===0)return[];let n=e[0].value,r=Math.max(...e.map(e=>e.value));return e.map((i,a)=>{let o=a>0?e[a-1]:null,s=o&&o.value>0?i.value/o.value*100:null,c=o?o.value-i.value:null,l=o&&o.value>0?(o.value-i.value)/o.value*100:null,u=r>0?i.value/r*100:0,d=Math.max(u,t);return{...i,percentageOfTotal:n>0?i.value/n*100:0,conversionRate:s,dropOff:c,dropOffPercentage:l,widthPercentage:d}})},[e,t]),c=e.length>0?e[0].value:0,l=e.length>0?e[e.length-1].value:0;return{stages:s,totalValue:c,overallConversionRate:c>0?l/c*100:0,totalDropOff:c-l,hoveredStage:r,setHoveredStage:i,activeStage:a,setActiveStage:o}}function o(e,t,n=`$`,r=`en-US`){switch(t){case`percentage`:return`${e.toFixed(1)}%`;case`currency`:return`${n}${e.toLocaleString(r,{minimumFractionDigits:0,maximumFractionDigits:0})}`;default:return e.toLocaleString(r)}}var s=[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`,`hsl(var(--primary))`,`hsl(var(--info))`,`hsl(var(--destructive))`];function c(e,t){return t.color||s[e%s.length]}function l({stage:e,index:n,totalStages:r,width:a,stageHeight:o,gap:s,isHovered:l,isAnimated:u,animationDelay:d,animationDuration:f}){let p=n<r-1?e:null,m=c(n,e),h=e.widthPercentage/100*a,g=(a-h)/2,_=g+h,v=p?e.widthPercentage/100*a*.85:h*.7,y=(a-v)/2,b=`
+    M ${g} 0
+    L ${_} 0
+    L ${y+v} ${o}
+    L ${y} ${o}
+    Z
+  `;return(0,i.jsxs)(`g`,{style:{transform:`translateY(${n*(o+s)}px)`},children:[(0,i.jsx)(`path`,{d:b,fill:m,className:t.cn(`transition-all duration-300`,l&&`brightness-110`),style:{opacity:+!!u,transform:u?`scaleY(1)`:`scaleY(0)`,transformOrigin:`top`,transition:`opacity ${f}ms ease-out ${d}ms, transform ${f}ms ease-out ${d}ms`}}),l&&(0,i.jsx)(`path`,{d:b,fill:`none`,stroke:`white`,strokeWidth:`2`,className:`opacity-50`})]})}function u({stage:e,index:n,totalStages:r,stageWidth:a,height:o,gap:s,isHovered:l,isAnimated:u,animationDelay:d,animationDuration:f}){let p=c(n,e),m=e.widthPercentage/100*o,h=(o-m)/2,g=h+m,_=n<r-1?m*.85:m*.7,v=(o-_)/2,y=`
+    M 0 ${h}
+    L ${a} ${v}
+    L ${a} ${v+_}
+    L 0 ${g}
+    Z
+  `;return(0,i.jsxs)(`g`,{style:{transform:`translateX(${n*(a+s)}px)`},children:[(0,i.jsx)(`path`,{d:y,fill:p,className:t.cn(`transition-all duration-300`,l&&`brightness-110`),style:{opacity:+!!u,transform:u?`scaleX(1)`:`scaleX(0)`,transformOrigin:`left`,transition:`opacity ${f}ms ease-out ${d}ms, transform ${f}ms ease-out ${d}ms`}}),l&&(0,i.jsx)(`path`,{d:y,fill:`none`,stroke:`white`,strokeWidth:`2`,className:`opacity-50`})]})}function d({stage:e,index:n,position:a,valueFormat:s,currencySymbol:c,locale:l,showConversionRates:u,showDropOff:d}){return(0,i.jsxs)(`div`,{className:t.cn(`absolute z-50 px-3 py-2 text-sm rounded-lg shadow-lg`,`bg-foreground text-background`,`animate-in fade-in-0 zoom-in-95 duration-150`,`pointer-events-none min-w-[180px]`),style:{left:a.x,top:a.y,transform:`translate(-50%, -100%) translateY(-12px)`},children:[(0,i.jsx)(`div`,{className:`font-semibold mb-1`,children:e.label}),(0,i.jsxs)(`div`,{className:`space-y-1 text-xs opacity-90`,children:[(0,i.jsxs)(`div`,{className:`flex justify-between gap-4`,children:[(0,i.jsx)(`span`,{children:`Value:`}),(0,i.jsx)(`span`,{className:`font-medium`,children:o(e.value,s,c,l)})]}),(0,i.jsxs)(`div`,{className:`flex justify-between gap-4`,children:[(0,i.jsx)(`span`,{children:`% of Total:`}),(0,i.jsxs)(`span`,{className:`font-medium`,children:[e.percentageOfTotal.toFixed(1),`%`]})]}),u&&e.conversionRate!==null&&(0,i.jsxs)(`div`,{className:`flex justify-between gap-4`,children:[(0,i.jsx)(`span`,{children:`Conversion:`}),(0,i.jsxs)(`span`,{className:`font-medium text-green-400`,children:[e.conversionRate.toFixed(1),`%`]})]}),d&&e.dropOff!==null&&(0,i.jsxs)(`div`,{className:`flex justify-between gap-4`,children:[(0,i.jsx)(`span`,{children:`Drop-off:`}),(0,i.jsxs)(`span`,{className:`font-medium text-red-400`,children:[`-`,o(e.dropOff,s,c,l),` (`,e.dropOffPercentage?.toFixed(1),`%)`]})]}),e.details&&(0,i.jsxs)(`div`,{className:`mt-2 pt-2 border-t border-background/20 flex items-start gap-1`,children:[(0,i.jsx)(r.Info,{className:`w-3 h-3 mt-0.5 flex-shrink-0`}),(0,i.jsx)(`span`,{children:e.details})]})]}),(0,i.jsx)(`div`,{className:`absolute left-1/2 -translate-x-1/2 -bottom-1.5 w-3 h-3 rotate-45 bg-foreground`})]})}function f({conversionRate:e,dropOffPercentage:n,orientation:a,showDropOff:o}){let s=a===`vertical`?r.ArrowDown:r.ArrowRight;return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-1 text-xs text-muted-foreground`,a===`vertical`?`justify-center py-1`:`flex-col justify-center px-1`),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(s,{className:`w-3 h-3`}),(0,i.jsxs)(`span`,{className:`font-medium text-green-600 dark:text-green-400`,children:[e.toFixed(1),`%`]})]}),o&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1 text-red-600 dark:text-red-400`,children:[(0,i.jsx)(r.TrendingDown,{className:`w-3 h-3`}),(0,i.jsxs)(`span`,{children:[`-`,n.toFixed(1),`%`]})]})]})}function p({data:e,orientation:r=`vertical`,width:s=400,height:c=300,showConversionRates:p=!0,showDropOff:m=!0,showValues:h=!0,showPercentages:g=!0,valueFormat:_=`number`,currencySymbol:v=`$`,locale:y=`en-US`,animated:b=!0,animationDuration:x=500,staggerDelay:S=100,showTooltips:C=!0,minWidthPercentage:w=20,gap:T=4,className:E,onStageClick:D,onStageHover:O}){let[k,A]=n.useState(!b),[j,M]=n.useState(null),N=n.useRef(null),{stages:P,hoveredStage:F,setHoveredStage:I,overallConversionRate:L}=a({data:e,minWidthPercentage:w});n.useEffect(()=>{if(b){let e=setTimeout(()=>{A(!0)},50);return()=>clearTimeout(e)}},[b]);let R=(e,t)=>{if(N.current&&C){let t=N.current.getBoundingClientRect();M({x:e.clientX-t.left,y:e.clientY-t.top})}},z=(e,t,n)=>{I(t.id),O?.(t,n),R(e,t)},B=()=>{I(null),M(null),O?.(null,null)},V=(e,t)=>{D?.(e,t)},H=P.find(e=>e.id===F),U=P.findIndex(e=>e.id===F),W=r===`vertical`,G=P.length,K=T*(G-1),q=p?(G-1)*32:0,J=W?(c-K-q)/G:c,Y=W?s:(s-K-q)/G;return W&&G*J+K,!W&&G*Y+K,(0,i.jsxs)(`div`,{ref:N,className:t.cn(`relative inline-flex flex-col`,E),children:[(0,i.jsxs)(`div`,{className:`mb-4 flex items-center justify-between text-sm`,children:[(0,i.jsxs)(`span`,{className:`text-muted-foreground`,children:[P.length,` stages`]}),(0,i.jsxs)(`span`,{className:`font-medium`,children:[`Overall: `,L.toFixed(1),`% conversion`]})]}),(0,i.jsx)(`div`,{className:t.cn(`flex`,W?`flex-col`:`flex-row items-center`),children:P.map((e,a)=>(0,i.jsxs)(n.Fragment,{children:[(0,i.jsxs)(`div`,{className:t.cn(`relative cursor-pointer group`,W?`w-full`:`h-full`),onMouseEnter:t=>z(t,e,a),onMouseMove:t=>R(t,e),onMouseLeave:B,onClick:()=>V(e,a),children:[(0,i.jsx)(`svg`,{width:W?s:Y,height:W?J:c,className:`overflow-visible`,"aria-hidden":`true`,focusable:`false`,children:W?(0,i.jsx)(l,{stage:e,index:0,totalStages:G,width:s,stageHeight:J,gap:T,isHovered:F===e.id,isAnimated:k,animationDelay:a*S,animationDuration:x}):(0,i.jsx)(u,{stage:e,index:0,totalStages:G,stageWidth:Y,height:c,gap:T,isHovered:F===e.id,isAnimated:k,animationDelay:a*S,animationDuration:x})}),(0,i.jsxs)(`div`,{className:t.cn(`absolute inset-0 flex items-center justify-center`,`text-white pointer-events-none`,`flex-col gap-0.5`),style:{opacity:+!!k,transition:`opacity ${x}ms ease-out ${a*S+x/2}ms`},children:[(0,i.jsx)(`span`,{className:`font-semibold text-sm drop-shadow-md`,children:e.label}),h&&(0,i.jsx)(`span`,{className:`text-xs opacity-90 drop-shadow-md`,children:o(e.value,_,v,y)}),g&&(0,i.jsxs)(`span`,{className:`text-xs opacity-75 drop-shadow-md`,children:[e.percentageOfTotal.toFixed(1),`%`]})]})]}),p&&a<P.length-1&&P[a+1].conversionRate!==null&&(0,i.jsx)(`div`,{className:t.cn(W?`py-1`:`px-1`,`opacity-0 transition-opacity duration-300`,k&&`opacity-100`),style:{transitionDelay:`${(a+1)*S+x}ms`},children:(0,i.jsx)(f,{conversionRate:P[a+1].conversionRate,dropOffPercentage:P[a+1].dropOffPercentage,orientation:r,showDropOff:m})})]},e.id))}),C&&F&&j&&H&&(0,i.jsx)(d,{stage:H,index:U,position:j,valueFormat:_,currencySymbol:v,locale:y,showConversionRates:p,showDropOff:m})]})}function m({labels:e,values:t,colors:n,...r}){return(0,i.jsx)(p,{data:e.map((e,r)=>({id:`stage-${r}`,label:e,value:t[r]??0,color:n?.[r]})),...r})}function h({minimal:e=!0,width:t=200,height:n=150,gap:r=2,...a}){return(0,i.jsx)(p,{width:t,height:n,gap:r,showConversionRates:!e,showDropOff:!1,showPercentages:!e,...a})}exports.WakaFunnelChartCompact=h,exports.WakaFunnelChartSimple=m,exports.default=p,exports.useFunnelChart=a;