import { cn } from "./index3.js";
import { cva } from "class-variance-authority";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/atoms/display/LoadingIndicator/LoadingIndicator.tsx
var loadingIndicatorVariants = cva("flex flex-col items-center justify-center", {
	variants: { size: {
		sm: "gap-4",
		md: "gap-4",
		lg: "gap-4",
		xl: "gap-5"
	} },
	defaultVariants: { size: "sm" }
});
var loadingTextVariants = cva("font-medium text-secondary-foreground text-center", {
	variants: { size: {
		sm: "text-sm leading-5",
		md: "text-sm leading-5",
		lg: "text-lg leading-7",
		xl: "text-lg leading-7"
	} },
	defaultVariants: { size: "sm" }
});
var SIZE_CONFIG = {
	sm: {
		dimension: 32,
		strokeWidth: 3
	},
	md: {
		dimension: 48,
		strokeWidth: 4
	},
	lg: {
		dimension: 56,
		strokeWidth: 5
	},
	xl: {
		dimension: 64,
		strokeWidth: 5
	}
};
/** Line Simple Spinner - A simple arc that rotates */
function LineSimpleSpinner({ size, color = "var(--primary)", trackColor = "var(--border)" }) {
	const config = SIZE_CONFIG[size];
	const radius = (config.dimension - config.strokeWidth) / 2;
	const circumference = 2 * Math.PI * radius;
	const arcLength = circumference * .25;
	return /* @__PURE__ */ jsxs("svg", {
		width: config.dimension,
		height: config.dimension,
		viewBox: `0 0 ${config.dimension} ${config.dimension}`,
		className: "animate-spin motion-reduce:animate-none",
		style: { animationDuration: "1s" },
		"aria-hidden": "true",
		children: [/* @__PURE__ */ jsx("circle", {
			cx: config.dimension / 2,
			cy: config.dimension / 2,
			r: radius,
			fill: "none",
			stroke: trackColor,
			strokeWidth: config.strokeWidth,
			strokeLinecap: "round"
		}), /* @__PURE__ */ jsx("circle", {
			cx: config.dimension / 2,
			cy: config.dimension / 2,
			r: radius,
			fill: "none",
			stroke: color,
			strokeWidth: config.strokeWidth,
			strokeLinecap: "round",
			strokeDasharray: `${arcLength} ${circumference - arcLength}`,
			strokeDashoffset: circumference * .25
		})]
	});
}
/** Line Spinner - A gradient arc that rotates */
function LineSpinner({ size, color = "var(--primary)" }) {
	const config = SIZE_CONFIG[size];
	const radius = (config.dimension - config.strokeWidth) / 2;
	const circumference = 2 * Math.PI * radius;
	const arcLength = circumference * .7;
	const gradientId = React.useId();
	return /* @__PURE__ */ jsxs("svg", {
		width: config.dimension,
		height: config.dimension,
		viewBox: `0 0 ${config.dimension} ${config.dimension}`,
		className: "animate-spin motion-reduce:animate-none",
		style: { animationDuration: "0.8s" },
		"aria-hidden": "true",
		children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
			id: gradientId,
			x1: "0%",
			y1: "0%",
			x2: "100%",
			y2: "0%",
			children: [/* @__PURE__ */ jsx("stop", {
				offset: "0%",
				stopColor: color,
				stopOpacity: "0"
			}), /* @__PURE__ */ jsx("stop", {
				offset: "100%",
				stopColor: color,
				stopOpacity: "1"
			})]
		}) }), /* @__PURE__ */ jsx("circle", {
			cx: config.dimension / 2,
			cy: config.dimension / 2,
			r: radius,
			fill: "none",
			stroke: `url(#${gradientId})`,
			strokeWidth: config.strokeWidth,
			strokeLinecap: "round",
			strokeDasharray: `${arcLength} ${circumference - arcLength}`,
			strokeDashoffset: circumference * .25
		})]
	});
}
/** Dot Circle Spinner - A circle of dots with a rotating chase effect */
function DotCircleSpinner({ size, color = "var(--primary)" }) {
	const config = SIZE_CONFIG[size];
	const numDots = 12;
	const dotRadius = config.strokeWidth * .6;
	const circleRadius = (config.dimension - dotRadius * 2) / 2 - 2;
	const center = config.dimension / 2;
	return /* @__PURE__ */ jsx("svg", {
		width: config.dimension,
		height: config.dimension,
		viewBox: `0 0 ${config.dimension} ${config.dimension}`,
		className: "animate-spin motion-reduce:animate-none",
		style: { animationDuration: "1s" },
		"aria-hidden": "true",
		children: Array.from({ length: numDots }).map((_, i) => {
			const radian = (i * 360 / numDots - 90) * Math.PI / 180;
			return /* @__PURE__ */ jsx("circle", {
				cx: center + circleRadius * Math.cos(radian),
				cy: center + circleRadius * Math.sin(radian),
				r: dotRadius,
				fill: color,
				opacity: .15 + .85 * (i / (numDots - 1)) ** 2.5
			}, i);
		})
	});
}
/** Breathing Spinner - An organic scale/opacity oscillation that feels alive */
function BreathingSpinner({ size, color = "var(--primary)" }) {
	const config = SIZE_CONFIG[size];
	const r = config.dimension * .35;
	return /* @__PURE__ */ jsxs("svg", {
		width: config.dimension,
		height: config.dimension,
		viewBox: `0 0 ${config.dimension} ${config.dimension}`,
		"aria-hidden": "true",
		children: [/* @__PURE__ */ jsx("circle", {
			cx: config.dimension / 2,
			cy: config.dimension / 2,
			r,
			fill: color,
			opacity: .15
		}), /* @__PURE__ */ jsx("circle", {
			cx: config.dimension / 2,
			cy: config.dimension / 2,
			r: r * .6,
			fill: color,
			className: "delight-breathing"
		})]
	});
}
function LoadingIndicator({ variant = "line-simple", size = "sm", showText = false, text = "Loading...", color, trackColor, className, ...props }) {
	const effectiveSize = size || "sm";
	const renderSpinner = () => {
		switch (variant) {
			case "line-spinner": return /* @__PURE__ */ jsx(LineSpinner, {
				size: effectiveSize,
				color
			});
			case "dot-circle": return /* @__PURE__ */ jsx(DotCircleSpinner, {
				size: effectiveSize,
				color
			});
			case "breathing": return /* @__PURE__ */ jsx(BreathingSpinner, {
				size: effectiveSize,
				color
			});
			default: return /* @__PURE__ */ jsx(LineSimpleSpinner, {
				size: effectiveSize,
				color,
				trackColor
			});
		}
	};
	return /* @__PURE__ */ jsxs("output", {
		"data-slot": "loading-indicator",
		className: cn(loadingIndicatorVariants({ size }), "delight-spinner-entrance", className),
		role: "status",
		"aria-live": "polite",
		"aria-busy": "true",
		...props,
		children: [renderSpinner(), showText && /* @__PURE__ */ jsxs("p", {
			className: cn(loadingTextVariants({ size }), "delight-loading-text"),
			children: [text, /* @__PURE__ */ jsx("span", {
				className: "sr-only",
				children: " in progress"
			})]
		})]
	});
}
LoadingIndicator.displayName = "LoadingIndicator";
//#endregion
export { DotCircleSpinner, LineSimpleSpinner, LineSpinner, LoadingIndicator, loadingIndicatorVariants, loadingTextVariants };

//# sourceMappingURL=index14.js.map