import { cn as e } from "../../../lib/utils.js";
import { useId as t } from "react";
import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
//#region lib/components/ui/atoms/flow-connector.tsx
var a = 2.8, o = "10 14", s = "1.5 6", c = "0.01 1000", l = 4.5, u = 1.8, d = .55, f = .32;
function p({ paths: p, className: m, variant: h = "flow", lineStyle: g, clusterSide: _, animated: v = !0, ...y }) {
	let b = p.length, x = g ?? (h === "dot" ? "dotted" : "dashed"), S = x === "dotted" ? s : o, C = x === "dotted" ? "animate-gateway-flow-dotted" : "animate-gateway-flow", w = `flow-${t().replace(/[^a-zA-Z0-9]/g, "")}`, T = _ ? `url(#${w}-track)` : "currentColor", E = _ ? `url(#${w}-dot)` : "currentColor";
	return /* @__PURE__ */ i("svg", {
		"aria-hidden": !0,
		className: e("shrink-0 overflow-visible text-success", m),
		"data-slot": "flow-connector",
		preserveAspectRatio: "none",
		viewBox: "0 0 100 100",
		...y,
		children: [
			/* @__PURE__ */ r("title", { children: "Connection flow" }),
			_ ? /* @__PURE__ */ i("defs", { children: [/* @__PURE__ */ r("linearGradient", {
				gradientUnits: "userSpaceOnUse",
				id: `${w}-track`,
				x1: "0",
				x2: "100",
				y1: "50",
				y2: "50",
				children: _ === "start" ? /* @__PURE__ */ i(n, { children: [
					/* @__PURE__ */ r("stop", {
						offset: "0",
						stopColor: "currentColor",
						stopOpacity: 0
					}),
					/* @__PURE__ */ r("stop", {
						offset: f,
						stopColor: "currentColor",
						stopOpacity: d
					}),
					/* @__PURE__ */ r("stop", {
						offset: "1",
						stopColor: "currentColor",
						stopOpacity: d
					})
				] }) : /* @__PURE__ */ i(n, { children: [
					/* @__PURE__ */ r("stop", {
						offset: "0",
						stopColor: "currentColor",
						stopOpacity: d
					}),
					/* @__PURE__ */ r("stop", {
						offset: 1 - f,
						stopColor: "currentColor",
						stopOpacity: d
					}),
					/* @__PURE__ */ r("stop", {
						offset: "1",
						stopColor: "currentColor",
						stopOpacity: 0
					})
				] })
			}), /* @__PURE__ */ r("linearGradient", {
				gradientUnits: "userSpaceOnUse",
				id: `${w}-dot`,
				x1: "0",
				x2: "100",
				y1: "50",
				y2: "50",
				children: _ === "start" ? /* @__PURE__ */ i(n, { children: [
					/* @__PURE__ */ r("stop", {
						offset: "0",
						stopColor: "currentColor",
						stopOpacity: 0
					}),
					/* @__PURE__ */ r("stop", {
						offset: f,
						stopColor: "currentColor",
						stopOpacity: 1
					}),
					/* @__PURE__ */ r("stop", {
						offset: "1",
						stopColor: "currentColor",
						stopOpacity: 1
					})
				] }) : /* @__PURE__ */ i(n, { children: [
					/* @__PURE__ */ r("stop", {
						offset: "0",
						stopColor: "currentColor",
						stopOpacity: 1
					}),
					/* @__PURE__ */ r("stop", {
						offset: 1 - f,
						stopColor: "currentColor",
						stopOpacity: 1
					}),
					/* @__PURE__ */ r("stop", {
						offset: "1",
						stopColor: "currentColor",
						stopOpacity: 0
					})
				] })
			})] }) : null,
			p.map((t, n) => /* @__PURE__ */ r("path", {
				className: e("motion-reduce:animate-none", v && h === "flow" && C),
				d: t,
				fill: "none",
				stroke: T,
				strokeDasharray: S,
				strokeLinecap: "round",
				strokeOpacity: _ ? void 0 : d,
				strokeWidth: u,
				vectorEffect: "non-scaling-stroke"
			}, `path-${n}`)),
			v && h === "dot" ? p.map((e, t) => /* @__PURE__ */ r("path", {
				className: "animate-gateway-flow-dot motion-reduce:animate-none",
				d: e,
				fill: "none",
				pathLength: 100,
				stroke: E,
				strokeDasharray: c,
				strokeLinecap: "round",
				strokeOpacity: _ ? void 0 : 1,
				strokeWidth: l,
				style: { animationDelay: `${t * a / Math.max(b, 1)}s` },
				vectorEffect: "non-scaling-stroke"
			}, `dot-${t}`)) : null
		]
	});
}
//#endregion
export { p as FlowConnector };
