import { cn } from "./index3.js";
import { Avatar } from "./index15.js";
import { cva } from "class-variance-authority";
import * as React from "react";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Progress } from "@base-ui/react/progress";
//#region src/components/atoms/display/Progress/Progress.tsx
var MILESTONES = [
	25,
	50,
	75
];
var progressVariants = cva("", {
	variants: { size: {
		sm: "h-1.5",
		md: "h-2",
		lg: "h-3"
	} },
	defaultVariants: { size: "md" }
});
var indicatorVariants = cva("rounded-l-full transition-all duration-300 ease-out motion-reduce:transition-none", {
	variants: { variant: {
		default: "bg-primary",
		success: "bg-success",
		warning: "bg-warning",
		destructive: "bg-destructive",
		info: "bg-info",
		gradient: "bg-gradient-to-r from-primary/60 to-primary"
	} },
	defaultVariants: { variant: "default" }
});
var segmentVariants = cva("rounded-full h-4 w-1 transition-[background-color,transform] duration-200 ease-out motion-reduce:transition-none", {
	variants: {
		variant: {
			default: "",
			success: "",
			warning: "",
			destructive: "",
			info: "",
			gradient: ""
		},
		filled: {
			true: "",
			false: "bg-primary/20"
		}
	},
	compoundVariants: [
		{
			variant: "default",
			filled: true,
			className: "bg-primary"
		},
		{
			variant: "success",
			filled: true,
			className: "bg-success"
		},
		{
			variant: "warning",
			filled: true,
			className: "bg-warning"
		},
		{
			variant: "destructive",
			filled: true,
			className: "bg-destructive"
		},
		{
			variant: "info",
			filled: true,
			className: "bg-info"
		},
		{
			variant: "gradient",
			filled: true,
			className: "bg-primary"
		}
	],
	defaultVariants: {
		variant: "default",
		filled: false
	}
});
var DEFAULT_SEGMENTS = 25;
var CIRCULAR_SIZE_CONFIG = {
	sm: {
		dimension: 80,
		strokeWidth: 6,
		fontSize: "text-sm"
	},
	md: {
		dimension: 100,
		strokeWidth: 8,
		fontSize: "text-base"
	},
	lg: {
		dimension: 120,
		strokeWidth: 10,
		fontSize: "text-lg"
	}
};
/** Maps variant to text color class for labels */
var VARIANT_TEXT_COLORS = {
	default: "text-muted-foreground",
	success: "text-success",
	warning: "text-warning",
	destructive: "text-destructive",
	info: "text-info",
	gradient: "text-muted-foreground"
};
/** Maps variant to CSS custom property for SVG strokes */
var VARIANT_CSS_COLORS = {
	default: "var(--primary)",
	success: "var(--success)",
	warning: "var(--warning)",
	destructive: "var(--destructive)",
	info: "var(--info)",
	gradient: "var(--primary)"
};
function ProgressTrack({ className, size, ...props }) {
	return /* @__PURE__ */ jsx(Progress.Track, {
		className: cn("bg-primary/20 rounded-full relative flex w-full items-center overflow-hidden", progressVariants({ size }), className),
		"data-slot": "progress-track",
		...props
	});
}
function ProgressIndicator({ className, variant, value, ...props }) {
	const prevValueRef = React.useRef(value ?? 0);
	const [milestoneHit, setMilestoneHit] = React.useState(false);
	React.useEffect(() => {
		const prev = prevValueRef.current;
		const curr = value ?? 0;
		prevValueRef.current = curr;
		if (MILESTONES.some((m) => prev < m && curr >= m && curr < 100)) {
			setMilestoneHit(true);
			const timer = setTimeout(() => setMilestoneHit(false), 500);
			return () => clearTimeout(timer);
		}
	}, [value]);
	return /* @__PURE__ */ jsx(Progress.Indicator, {
		"data-slot": "progress-indicator",
		className: cn(indicatorVariants({ variant }), value === 100 && "rounded-full animate-[progress-complete_600ms_ease-out_1] motion-reduce:animate-none", milestoneHit && "animate-[delight-pulse-once_500ms_ease-out_1] motion-reduce:animate-none", className),
		style: value === 100 ? { boxShadow: "0 0 8px 2px color-mix(in srgb, currentColor 30%, transparent)" } : void 0,
		...props
	});
}
function FloatingTooltip({ value, formattedValue }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "progress-floating-tooltip",
		className: "absolute top-full -translate-x-1/2 z-10 mt-1 animate-[delight-fade-in-up_200ms_ease-out] motion-reduce:animate-none",
		style: { left: `${Math.max(0, Math.min(100, value))}%` },
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col items-center",
			children: [/* @__PURE__ */ jsx("div", { className: "w-0 h-0 border-l-[5px] border-r-[5px] border-b-[6px] border-l-transparent border-r-transparent border-b-foreground" }), /* @__PURE__ */ jsx("div", {
				className: "bg-foreground text-background px-3 py-1.5 text-xs font-medium rounded-md whitespace-nowrap",
				children: formattedValue
			})]
		})
	});
}
function AvatarTooltip({ value, avatarSrc, avatarFallback }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "progress-avatar-tooltip",
		className: "absolute bottom-full -translate-x-1/2 z-10 mb-1 animate-[delight-fade-in-up_200ms_ease-out] motion-reduce:animate-none",
		style: { left: `${Math.max(0, Math.min(100, value))}%` },
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col items-center",
			children: [/* @__PURE__ */ jsx(Avatar, {
				src: avatarSrc,
				fallback: avatarFallback,
				ring: "primary",
				className: "size-9 shadow-md"
			}), /* @__PURE__ */ jsx("div", { className: "w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-primary -mt-px" })]
		})
	});
}
function LinearProgress({ value, variant, size, label, subLabel, showValue, labelPosition, formattedValue, icon, avatarSrc, avatarFallback, className, ref, ...restProps }) {
	const hasHeader = label || showValue && labelPosition === "inline";
	const showTooltip = labelPosition === "tooltip";
	const showAvatarOnBar = avatarSrc && !label;
	return /* @__PURE__ */ jsxs(Progress.Root, {
		ref,
		value,
		"aria-label": label || `Progress: ${formattedValue}`,
		"data-slot": "progress",
		className: cn("flex flex-col gap-2 w-full", className),
		...restProps,
		children: [
			hasHeader && /* @__PURE__ */ jsxs("div", {
				className: "flex items-center justify-between gap-2",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-2 flex-1 min-w-0",
					children: [avatarSrc && label && /* @__PURE__ */ jsx(Avatar, {
						src: avatarSrc,
						fallback: avatarFallback,
						className: "size-6 shrink-0"
					}), label && /* @__PURE__ */ jsx("span", {
						className: "text-sm font-medium text-foreground truncate",
						children: label
					})]
				}), showValue && labelPosition === "inline" && /* @__PURE__ */ jsx("span", {
					className: "text-sm font-medium text-foreground shrink-0",
					children: formattedValue
				})]
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-2",
				children: [icon && /* @__PURE__ */ jsx("div", {
					className: "shrink-0 flex items-center justify-center size-6 rounded-xl border border-dashed border-muted-foreground p-1",
					children: icon
				}), /* @__PURE__ */ jsxs("div", {
					className: cn("relative flex-1", (showTooltip || showAvatarOnBar) && "overflow-visible"),
					children: [
						showTooltip && /* @__PURE__ */ jsx(FloatingTooltip, {
							value,
							formattedValue
						}),
						showAvatarOnBar && /* @__PURE__ */ jsx(AvatarTooltip, {
							value,
							avatarSrc,
							avatarFallback
						}),
						/* @__PURE__ */ jsx(ProgressTrack, {
							size,
							children: /* @__PURE__ */ jsx(ProgressIndicator, {
								variant,
								value
							})
						})
					]
				})]
			}),
			subLabel && /* @__PURE__ */ jsx("span", {
				className: cn("text-sm", VARIANT_TEXT_COLORS[variant]),
				children: subLabel
			})
		]
	});
}
function SegmentedProgress({ value, variant, label, showValue, formattedValue, segments, className, ref, ...restProps }) {
	const filledSegments = Math.round(value / 100 * segments);
	const prevFilledRef = React.useRef(filledSegments);
	const labelId = React.useId();
	const fillDirection = filledSegments >= prevFilledRef.current ? 1 : -1;
	React.useEffect(() => {
		prevFilledRef.current = filledSegments;
	});
	return /* @__PURE__ */ jsxs("div", {
		ref,
		"data-slot": "progress",
		className: cn("flex flex-col gap-2 w-full", className),
		...restProps,
		children: [(label || showValue) && /* @__PURE__ */ jsxs("div", {
			className: "flex items-center justify-between gap-2",
			children: [label && /* @__PURE__ */ jsx("span", {
				id: labelId,
				className: "text-sm font-medium text-foreground",
				children: label
			}), showValue && /* @__PURE__ */ jsx("span", {
				className: "text-sm font-medium text-foreground",
				children: formattedValue
			})]
		}), /* @__PURE__ */ jsx("div", {
			className: "flex gap-1",
			role: "progressbar",
			"aria-valuenow": value,
			"aria-valuemin": 0,
			"aria-valuemax": 100,
			"aria-valuetext": formattedValue,
			...label ? { "aria-labelledby": labelId } : { "aria-label": `Progress: ${formattedValue}` },
			children: Array.from({ length: segments }).map((_, i) => {
				const isFilled = i < filledSegments;
				const staggerIndex = fillDirection >= 0 ? i : segments - 1 - i;
				return /* @__PURE__ */ jsx("div", {
					className: segmentVariants({
						variant,
						filled: isFilled
					}),
					style: { transitionDelay: `${staggerIndex * 20}ms` }
				}, i);
			})
		})]
	});
}
function CircularProgress({ value, variant, size, shape, label, showValue, formattedValue, avatarSrc, avatarFallback, strokeWidth: customStrokeWidth, color, trackColor, className, ref, ...restProps }) {
	const config = CIRCULAR_SIZE_CONFIG[size];
	const strokeWidth = customStrokeWidth || config.strokeWidth;
	const dimension = config.dimension;
	const radius = (dimension - strokeWidth * 2 - strokeWidth) / 2;
	const center = dimension / 2;
	const circumference = 2 * Math.PI * radius;
	const clampedValue = Math.min(100, Math.max(0, value));
	const isHalf = shape === "half";
	const maxProgress = isHalf ? .5 : 1;
	const strokeDashoffset = circumference * (1 - clampedValue / 100 * maxProgress);
	const trackDashoffset = circumference * (1 - maxProgress);
	const rotation = isHalf ? 180 : -90;
	const viewBoxHeight = isHalf ? dimension / 2 + strokeWidth : dimension;
	const containerHeight = isHalf ? dimension / 2 + strokeWidth : dimension;
	const progressColor = color || VARIANT_CSS_COLORS[variant];
	const bgTrackColor = trackColor || "color-mix(in srgb, var(--primary) 20%, transparent)";
	const avatarSize = size === "sm" ? "size-10" : size === "md" ? "size-12" : "size-16";
	const circleCy = isHalf ? dimension / 2 : center;
	const svgTransform = `rotate(${rotation} ${center} ${circleCy})`;
	return /* @__PURE__ */ jsxs("div", {
		ref,
		"data-slot": "progress",
		className: cn("relative flex items-center justify-center", className),
		style: {
			width: dimension,
			height: containerHeight
		},
		role: "progressbar",
		"aria-valuenow": clampedValue,
		"aria-valuemin": 0,
		"aria-valuemax": 100,
		"aria-valuetext": formattedValue,
		"aria-label": label || `Progress: ${formattedValue}`,
		...restProps,
		children: [/* @__PURE__ */ jsxs("svg", {
			width: dimension,
			height: containerHeight,
			viewBox: `0 0 ${dimension} ${viewBoxHeight}`,
			className: "overflow-visible",
			children: [/* @__PURE__ */ jsx("circle", {
				cx: center,
				cy: circleCy,
				r: radius,
				fill: "none",
				stroke: bgTrackColor,
				strokeWidth,
				strokeLinecap: "round",
				strokeDasharray: circumference,
				strokeDashoffset: trackDashoffset,
				transform: svgTransform
			}), /* @__PURE__ */ jsx("circle", {
				cx: center,
				cy: circleCy,
				r: radius,
				fill: "none",
				stroke: progressColor,
				strokeWidth,
				strokeLinecap: "round",
				strokeDasharray: circumference,
				strokeDashoffset,
				transform: svgTransform,
				className: cn("transition-[stroke-dashoffset,filter] duration-500 ease-out motion-reduce:transition-none", clampedValue === 100 && "drop-shadow-[0_0_6px_var(--primary)] motion-reduce:drop-shadow-none")
			})]
		}), /* @__PURE__ */ jsx("div", {
			className: cn("absolute flex flex-col items-center justify-center", isHalf && "translate-y-[20%]"),
			children: avatarSrc ? /* @__PURE__ */ jsx(Avatar, {
				src: avatarSrc,
				fallback: avatarFallback,
				className: avatarSize
			}) : showValue && /* @__PURE__ */ jsx("span", {
				className: cn("font-medium text-foreground tracking-tight", config.fontSize, clampedValue === 100 && "animate-[scale-in_300ms_ease-out] motion-reduce:animate-none"),
				children: formattedValue
			})
		})]
	});
}
var Progress$1 = forwardRef(({ type, value = 0, circular, segments, variant = "default", size = "md", label, subLabel, showValue = false, labelPosition = "inline", valueFormat, icon, avatarSrc, avatarFallback, strokeWidth, color, trackColor, className, ...props }, ref) => {
	const resolvedType = type || (circular ? "circular" : segments !== void 0 ? "segmented" : "linear");
	const formattedValue = valueFormat ? valueFormat(value) : `${Math.round(value)}%`;
	if (resolvedType === "circular" || resolvedType === "half") return /* @__PURE__ */ jsx(CircularProgress, {
		ref,
		value,
		variant,
		size,
		shape: resolvedType === "half" ? "half" : "circle",
		label,
		showValue,
		formattedValue,
		avatarSrc,
		avatarFallback,
		strokeWidth,
		color,
		trackColor,
		className,
		...props
	});
	if (resolvedType === "segmented") return /* @__PURE__ */ jsx(SegmentedProgress, {
		ref,
		value,
		variant,
		label,
		showValue,
		formattedValue,
		segments: segments ?? DEFAULT_SEGMENTS,
		className,
		...props
	});
	return /* @__PURE__ */ jsx(LinearProgress, {
		ref,
		value,
		variant,
		size,
		label,
		subLabel,
		showValue,
		labelPosition,
		formattedValue,
		icon,
		avatarSrc,
		avatarFallback,
		className,
		...props
	});
});
Progress$1.displayName = "Progress";
//#endregion
export { Progress$1 as Progress, indicatorVariants, progressVariants, segmentVariants };

//# sourceMappingURL=index16.js.map