@epilot/spark-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/components/power-network.js

@@ -0,0 +1,523 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { SectionTitle } from "./typography.js";
+import NumberFlow from "./number-flow.js";
+import { Skeleton } from "./skeleton.js";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/power-network.tsx
+const SOURCE_VARIANTS = {
+	grid: {
+		activeClassName: "border-blue-a9 bg-blue-a1 shadow-blue-a4",
+		flowStroke: "var(--blue-11)",
+		initialDashGap: 10
+	},
+	solar: {
+		activeClassName: "border-orange-a9 bg-orange-a1 shadow-orange-a3",
+		flowStroke: "var(--orange-a9)",
+		initialDashGap: 5
+	},
+	battery: {
+		activeClassName: "border-green-a9 bg-green-a1 shadow-green-a3",
+		flowStroke: "var(--green-a9)",
+		initialDashGap: 7
+	},
+	neutral: {
+		activeClassName: "border-slate-a9 bg-slate-a1 shadow-slate-a3",
+		flowStroke: "var(--slate-a9)",
+		initialDashGap: 9
+	}
+};
+const DEVICE_FLOW_STROKE = "var(--slate-a9)";
+const DEVICE_INITIAL_DASH_GAP = 9;
+const SKELETON_STROKE = "var(--gray-a6)";
+const STROKE_WIDTH = 2;
+const STRAIGHT_TOLERANCE_PX = 3;
+const SOURCE_HOME_OFFSET_STEP_PX = 10;
+const DEVICE_HOME_OFFSET_STEP_PX = 10;
+const FLOW_DASH_SOLID = 1;
+const FLOW_GAP_MAX = 14;
+const FLOW_GAP_MIN = 5;
+const FLOW_SPEED_MIN = 10;
+const FLOW_SPEED_MAX = 56;
+const FLOW_SMOOTHING = 5.5;
+const PowerNetworkContext = createContext(null);
+function usePowerNetwork() {
+	const ctx = useContext(PowerNetworkContext);
+	if (!ctx) throw new Error("Power network sub-components must be used inside <PowerNetworkDiagram>.");
+	return ctx;
+}
+function anchorTop(rect, containerRect) {
+	return {
+		x: rect.left + rect.width / 2 - containerRect.left,
+		y: rect.top - containerRect.top
+	};
+}
+function anchorBottom(rect, containerRect) {
+	return {
+		x: rect.left + rect.width / 2 - containerRect.left,
+		y: rect.bottom - containerRect.top
+	};
+}
+function buildAdaptivePath(from, to) {
+	if (Math.abs(from.x - to.x) < STRAIGHT_TOLERANCE_PX) return `M ${from.x} ${from.y} L ${to.x} ${to.y}`;
+	const dy = to.y - from.y;
+	const c1y = from.y + dy * .56;
+	const c2y = to.y - dy * .58;
+	return `M ${from.x} ${from.y} C ${from.x} ${c1y} ${to.x} ${c2y} ${to.x} ${to.y}`;
+}
+function connectorPathsEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) {
+		const ap = a[i];
+		const bp = b[i];
+		if (!ap || !bp) return false;
+		if (ap.id !== bp.id || ap.d !== bp.d || ap.variant !== bp.variant || ap.kind !== bp.kind || ap.reversed !== bp.reversed) return false;
+	}
+	return true;
+}
+function PowerNetworkDiagram({ title, loading = false, className, children }) {
+	const containerRef = useRef(null);
+	const [nodes, setNodes] = useState(() => /* @__PURE__ */ new Map());
+	const [connectorPaths, setConnectorPaths] = useState([]);
+	const connectorPathsRef = useRef([]);
+	const flowPathRefs = useRef({});
+	const currentFlowVisualsRef = useRef({});
+	const targetFlowVisualsRef = useRef({});
+	const register = useCallback((node) => {
+		setNodes((prev) => {
+			const existing = prev.get(node.id);
+			if (existing && existing.kind === node.kind && existing.variant === node.variant && existing.watts === node.watts && existing.element === node.element) return prev;
+			const next = new Map(prev);
+			next.set(node.id, node);
+			return next;
+		});
+	}, []);
+	const unregister = useCallback((id) => {
+		setNodes((prev) => {
+			if (!prev.has(id)) return prev;
+			const next = new Map(prev);
+			next.delete(id);
+			return next;
+		});
+	}, []);
+	const totalSourceWatts = useMemo(() => {
+		let total = 0;
+		for (const node of nodes.values()) if (node.kind === "source") total += node.watts;
+		return total;
+	}, [nodes]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		let homeNode;
+		const sources = [];
+		const devices = [];
+		for (const node of nodes.values()) if (node.kind === "home") homeNode = node;
+		else if (node.element) if (node.kind === "source") sources.push(node);
+		else devices.push(node);
+		const updatePaths = () => {
+			if (!homeNode || !homeNode.element) {
+				setConnectorPaths((prev) => prev.length === 0 ? prev : []);
+				return;
+			}
+			const containerRect = container.getBoundingClientRect();
+			const homeRect = homeNode.element.getBoundingClientRect();
+			const homeTop = anchorTop(homeRect, containerRect);
+			const homeBottom = anchorBottom(homeRect, containerRect);
+			const next = [];
+			const sourceCount = sources.length;
+			const deviceCount = devices.length;
+			sources.forEach((source, index) => {
+				if (!source.element) return;
+				const from = anchorBottom(source.element.getBoundingClientRect(), containerRect);
+				const offsetX = SOURCE_HOME_OFFSET_STEP_PX * (index - (sourceCount - 1) / 2);
+				const to = {
+					x: homeTop.x + offsetX,
+					y: homeTop.y
+				};
+				next.push({
+					id: source.id,
+					d: buildAdaptivePath(from, to),
+					kind: "source",
+					variant: source.variant,
+					reversed: source.watts < 0
+				});
+			});
+			devices.forEach((device, index) => {
+				if (!device.element) return;
+				const to = anchorTop(device.element.getBoundingClientRect(), containerRect);
+				const offsetX = DEVICE_HOME_OFFSET_STEP_PX * (index - (deviceCount - 1) / 2);
+				const from = {
+					x: homeBottom.x + offsetX,
+					y: homeBottom.y
+				};
+				next.push({
+					id: device.id,
+					d: buildAdaptivePath(from, to),
+					kind: "device",
+					reversed: false
+				});
+			});
+			setConnectorPaths((prev) => connectorPathsEqual(prev, next) ? prev : next);
+		};
+		updatePaths();
+		const resizeObserver = new ResizeObserver(updatePaths);
+		resizeObserver.observe(container);
+		for (const node of nodes.values()) if (node.element) resizeObserver.observe(node.element);
+		window.addEventListener("resize", updatePaths);
+		return () => {
+			resizeObserver.disconnect();
+			window.removeEventListener("resize", updatePaths);
+		};
+	}, [nodes]);
+	useEffect(() => {
+		connectorPathsRef.current = connectorPaths;
+	}, [connectorPaths]);
+	useEffect(() => {
+		const targets = {};
+		const homeWatts = totalSourceWatts;
+		for (const node of nodes.values()) {
+			if (node.kind === "home") continue;
+			const watts = node.watts;
+			const relative = homeWatts > 0 ? Math.max(0, Math.min(1, Math.abs(watts) / homeWatts)) : 0;
+			targets[node.id] = {
+				gap: FLOW_GAP_MAX - (FLOW_GAP_MAX - FLOW_GAP_MIN) * relative,
+				speed: FLOW_SPEED_MIN + (FLOW_SPEED_MAX - FLOW_SPEED_MIN) * relative,
+				opacity: Math.abs(watts) > 0 ? 1 : 0
+			};
+		}
+		targetFlowVisualsRef.current = targets;
+	}, [nodes, totalSourceWatts]);
+	useEffect(() => {
+		if (loading) return;
+		let frameId = 0;
+		let lastFrameTime = performance.now();
+		const animate = (now) => {
+			const deltaSeconds = Math.max(.001, (now - lastFrameTime) / 1e3);
+			lastFrameTime = now;
+			const smoothing = 1 - Math.exp(-FLOW_SMOOTHING * deltaSeconds);
+			for (const connectorPath of connectorPathsRef.current) {
+				const id = connectorPath.id;
+				const target = targetFlowVisualsRef.current[id];
+				const pathElement = flowPathRefs.current[id];
+				if (!target || !pathElement) continue;
+				const current = currentFlowVisualsRef.current[id] ?? {
+					gap: target.gap,
+					offset: 0,
+					speed: target.speed,
+					opacity: target.opacity
+				};
+				current.gap += (target.gap - current.gap) * smoothing;
+				current.speed += (target.speed - current.speed) * smoothing;
+				current.opacity += (target.opacity - current.opacity) * smoothing;
+				const dashCycle = FLOW_DASH_SOLID + Math.max(.001, current.gap);
+				const direction = connectorPath.reversed ? 1 : -1;
+				current.offset = ((current.offset + direction * current.speed * deltaSeconds) % dashCycle + dashCycle) % dashCycle - dashCycle;
+				pathElement.setAttribute("stroke-dasharray", `${FLOW_DASH_SOLID} ${current.gap.toFixed(3)}`);
+				pathElement.setAttribute("stroke-dashoffset", current.offset.toFixed(3));
+				pathElement.setAttribute("opacity", current.opacity.toFixed(3));
+				currentFlowVisualsRef.current[id] = current;
+			}
+			frameId = window.requestAnimationFrame(animate);
+		};
+		frameId = window.requestAnimationFrame(animate);
+		return () => window.cancelAnimationFrame(frameId);
+	}, [loading]);
+	const contextValue = useMemo(() => ({
+		loading,
+		register,
+		unregister,
+		totalSourceWatts
+	}), [
+		loading,
+		register,
+		unregister,
+		totalSourceWatts
+	]);
+	return /* @__PURE__ */ jsx(PowerNetworkContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: cn("@container relative flex flex-col", className),
+			children: [
+				title && /* @__PURE__ */ jsx(SectionTitle, { children: title }),
+				connectorPaths.length > 0 && /* @__PURE__ */ jsx("svg", {
+					className: "pointer-events-none absolute inset-0 size-full",
+					children: connectorPaths.map((path) => {
+						if (loading) return /* @__PURE__ */ jsx("path", {
+							d: path.d,
+							fill: "none",
+							stroke: SKELETON_STROKE,
+							strokeWidth: STROKE_WIDTH,
+							strokeLinecap: "round"
+						}, path.id);
+						const flowStroke = path.kind === "source" && path.variant ? SOURCE_VARIANTS[path.variant].flowStroke : DEVICE_FLOW_STROKE;
+						const initialDashGap = path.kind === "source" && path.variant ? SOURCE_VARIANTS[path.variant].initialDashGap : DEVICE_INITIAL_DASH_GAP;
+						return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+							d: path.d,
+							fill: "none",
+							stroke: "var(--gray-a1)",
+							strokeWidth: STROKE_WIDTH,
+							strokeLinecap: "round"
+						}), /* @__PURE__ */ jsx("path", {
+							d: path.d,
+							fill: "none",
+							stroke: flowStroke,
+							strokeWidth: STROKE_WIDTH,
+							strokeLinecap: "round",
+							ref: (el) => {
+								flowPathRefs.current[path.id] = el;
+							},
+							strokeDasharray: `${FLOW_DASH_SOLID} ${initialDashGap}`,
+							strokeDashoffset: 0,
+							opacity: 0
+						})] }, path.id);
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-y-14",
+					children
+				})
+			]
+		})
+	});
+}
+function PowerNetworkSources({ className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]", className),
+		children
+	});
+}
+function PowerNetworkDevices({ className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]", className),
+		children
+	});
+}
+function PowerSource({ id: idProp, watts, icon, variant = "neutral", className, progress }) {
+	const autoId = useId();
+	const id = idProp ?? autoId;
+	const { register, unregister, loading } = usePowerNetwork();
+	const [element, setElement] = useState(null);
+	useEffect(() => {
+		if (!element) return;
+		register({
+			id,
+			kind: "source",
+			variant,
+			watts,
+			element
+		});
+	}, [
+		element,
+		register,
+		id,
+		variant,
+		watts
+	]);
+	useEffect(() => {
+		return () => unregister(id);
+	}, [unregister, id]);
+	if (loading) return /* @__PURE__ */ jsx(SourceSkeleton, { anchorRef: setElement });
+	const isActive = watts !== 0;
+	const variantStyles = SOURCE_VARIANTS[variant];
+	const clampedProgress = progress == null ? null : Math.max(0, Math.min(100, progress));
+	const showRing = clampedProgress != null;
+	const RING_RADIUS = 48;
+	const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+	const ringDash = clampedProgress != null ? clampedProgress / 100 * RING_CIRCUMFERENCE : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center gap-1 transition-opacity duration-500", !isActive && "opacity-45", className),
+		children: [/* @__PURE__ */ jsx(NumberFlow, {
+			value: Math.abs(watts),
+			suffix: "W",
+			className: "mt-1 text-sm leading-none font-medium"
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: setElement,
+			className: cn("relative flex aspect-square items-center justify-center rounded-circle border p-4 shadow-sm", isActive ? variantStyles.activeClassName : "border-gray bg-gray-a3 shadow-gray-a4 saturate-0"),
+			children: [showRing && /* @__PURE__ */ jsx("svg", {
+				className: "pointer-events-none absolute inset-0 size-full -rotate-90",
+				viewBox: "0 0 100 100",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "50",
+					cy: "50",
+					r: RING_RADIUS,
+					fill: "none",
+					stroke: variantStyles.flowStroke,
+					strokeWidth: "4",
+					strokeLinecap: "round",
+					strokeDasharray: `${ringDash} ${RING_CIRCUMFERENCE}`,
+					opacity: isActive ? 1 : .5
+				})
+			}), icon]
+		})]
+	});
+}
+function SourceSkeleton({ anchorRef }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center gap-1",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-10" }), /* @__PURE__ */ jsx("div", {
+			ref: anchorRef,
+			className: "flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
+			children: /* @__PURE__ */ jsx("div", { className: "size-7" })
+		})]
+	});
+}
+function PowerDevice({ id: idProp, watts, icon, className }) {
+	const autoId = useId();
+	const id = idProp ?? autoId;
+	const { register, unregister, loading } = usePowerNetwork();
+	const [element, setElement] = useState(null);
+	useEffect(() => {
+		if (!element) return;
+		register({
+			id,
+			kind: "device",
+			watts,
+			element
+		});
+	}, [
+		element,
+		register,
+		id,
+		watts
+	]);
+	useEffect(() => {
+		return () => unregister(id);
+	}, [unregister, id]);
+	if (loading) return /* @__PURE__ */ jsx(DeviceSkeleton, { anchorRef: setElement });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center gap-1", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: setElement,
+			className: "flex aspect-square items-center justify-center rounded-circle border border-gray bg-slate-a1 p-4",
+			children: icon
+		}), /* @__PURE__ */ jsx(NumberFlow, {
+			value: watts,
+			suffix: "W",
+			className: "text-sm font-medium tabular-nums"
+		})]
+	});
+}
+function DeviceSkeleton({ anchorRef }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center gap-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: anchorRef,
+			className: "flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none",
+			children: /* @__PURE__ */ jsx("div", { className: "size-5" })
+		}), /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-10" })]
+	});
+}
+function PowerNetworkHome({ watts, autarky, className }) {
+	const autoId = useId();
+	const { register, unregister, loading, totalSourceWatts } = usePowerNetwork();
+	const [element, setElement] = useState(null);
+	const effectiveWatts = watts ?? totalSourceWatts;
+	useEffect(() => {
+		if (!element) return;
+		register({
+			id: autoId,
+			kind: "home",
+			watts: effectiveWatts,
+			element
+		});
+	}, [
+		element,
+		register,
+		autoId,
+		effectiveWatts
+	]);
+	useEffect(() => {
+		return () => unregister(autoId);
+	}, [unregister, autoId]);
+	if (loading) return /* @__PURE__ */ jsx(HomeSkeleton, {
+		anchorRef: setElement,
+		className
+	});
+	return /* @__PURE__ */ jsx(HomeSection, {
+		anchorRef: setElement,
+		autarky: autarky ?? null,
+		watts: effectiveWatts,
+		className
+	});
+}
+function HomeSection({ anchorRef, autarky, className, watts }) {
+	const targetAutarky = autarky == null ? 0 : Math.max(0, Math.min(100, autarky * 100));
+	const [animatedAutarky, setAnimatedAutarky] = useState(targetAutarky);
+	const animatedAutarkyRef = useRef(animatedAutarky);
+	const nodeSize = 78;
+	const ringStrokeWidth = 2;
+	const radius = (nodeSize - ringStrokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const progressLength = animatedAutarky / 100 * circumference;
+	useEffect(() => {
+		animatedAutarkyRef.current = animatedAutarky;
+	}, [animatedAutarky]);
+	useEffect(() => {
+		let frameId = 0;
+		let lastTime = performance.now();
+		const animate = (now) => {
+			const deltaSeconds = Math.max(.001, (now - lastTime) / 1e3);
+			lastTime = now;
+			const smoothing = 1 - Math.exp(-7 * deltaSeconds);
+			const next = animatedAutarkyRef.current + (targetAutarky - animatedAutarkyRef.current) * smoothing;
+			animatedAutarkyRef.current = next;
+			setAnimatedAutarky(next);
+			if (Math.abs(targetAutarky - next) > .05) frameId = window.requestAnimationFrame(animate);
+			else {
+				animatedAutarkyRef.current = targetAutarky;
+				setAnimatedAutarky(targetAutarky);
+			}
+		};
+		frameId = window.requestAnimationFrame(animate);
+		return () => window.cancelAnimationFrame(frameId);
+	}, [targetAutarky]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: anchorRef,
+		className: cn("relative mx-auto size-[78px]", className),
+		children: [autarky != null && /* @__PURE__ */ jsxs("svg", {
+			className: "absolute inset-0 size-full -rotate-90",
+			viewBox: `0 0 ${nodeSize} ${nodeSize}`,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: nodeSize / 2,
+				cy: nodeSize / 2,
+				r: radius,
+				fill: "none",
+				stroke: "var(--gray-a5)",
+				strokeWidth: ringStrokeWidth
+			}), progressLength > 0 && /* @__PURE__ */ jsx("circle", {
+				cx: nodeSize / 2,
+				cy: nodeSize / 2,
+				r: radius,
+				fill: "none",
+				stroke: "var(--green-a9)",
+				strokeLinecap: "round",
+				strokeWidth: ringStrokeWidth,
+				strokeDasharray: `${progressLength} ${circumference}`
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "absolute inset-0 flex flex-col items-center justify-center rounded-circle border border-gray-a5 shadow-sm shadow-gray-a1",
+			children: [/* @__PURE__ */ jsx(MaterialSymbol, {
+				className: "text-[14px]",
+				name: "home"
+			}), /* @__PURE__ */ jsx(NumberFlow, {
+				value: watts,
+				suffix: "W",
+				className: "mt-1 text-sm leading-none font-medium"
+			})]
+		})]
+	});
+}
+function HomeSkeleton({ anchorRef, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref: anchorRef,
+		className: cn("mx-auto size-[78px] animate-pulse rounded-circle border border-gray motion-reduce:animate-none", className)
+	});
+}
+//#endregion
+export { PowerDevice, PowerNetworkDevices, PowerNetworkDiagram, PowerNetworkHome, PowerNetworkSources, PowerSource };
+
+//# sourceMappingURL=power-network.js.map

package/dist/components/power-network.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"power-network.js","names":[],"sources":["../../src/components/power-network.tsx"],"sourcesContent":["import {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport NumberFlow from './number-flow'\nimport { Skeleton } from './skeleton'\nimport { SectionTitle } from './typography'\n\n// --- Variants -----------------------------------------------------------\n\nexport type PowerSourceVariant = 'grid' | 'solar' | 'battery' | 'neutral'\n\ninterface SourceVariantStyles {\n  activeClassName: string\n  flowStroke: string\n  initialDashGap: number\n}\n\nconst SOURCE_VARIANTS: Record<PowerSourceVariant, SourceVariantStyles> = {\n  grid: {\n    activeClassName: 'border-blue-a9 bg-blue-a1 shadow-blue-a4',\n    flowStroke: 'var(--blue-11)',\n    initialDashGap: 10,\n  },\n  solar: {\n    activeClassName: 'border-orange-a9 bg-orange-a1 shadow-orange-a3',\n    flowStroke: 'var(--orange-a9)',\n    initialDashGap: 5,\n  },\n  battery: {\n    activeClassName: 'border-green-a9 bg-green-a1 shadow-green-a3',\n    flowStroke: 'var(--green-a9)',\n    initialDashGap: 7,\n  },\n  neutral: {\n    activeClassName: 'border-slate-a9 bg-slate-a1 shadow-slate-a3',\n    flowStroke: 'var(--slate-a9)',\n    initialDashGap: 9,\n  },\n}\n\nconst DEVICE_FLOW_STROKE = 'var(--slate-a9)'\nconst DEVICE_INITIAL_DASH_GAP = 9\n\nconst SKELETON_STROKE = 'var(--gray-a6)'\nconst STROKE_WIDTH = 2\nconst STRAIGHT_TOLERANCE_PX = 3\nconst SOURCE_HOME_OFFSET_STEP_PX = 10\nconst DEVICE_HOME_OFFSET_STEP_PX = 10\n\n// --- Flow animation parameters ------------------------------------------\n\nconst FLOW_DASH_SOLID = 1\nconst FLOW_GAP_MAX = 14\nconst FLOW_GAP_MIN = 5\nconst FLOW_SPEED_MIN = 10\nconst FLOW_SPEED_MAX = 56\nconst FLOW_SMOOTHING = 5.5\n\ninterface FlowVisual {\n  gap: number\n  speed: number\n  opacity: number\n}\n\ninterface FlowAnimationState extends FlowVisual {\n  offset: number\n}\n\n// --- Context ------------------------------------------------------------\n\ntype NodeKind = 'source' | 'device' | 'home'\n\ninterface RegisteredNode {\n  id: string\n  kind: NodeKind\n  variant?: PowerSourceVariant\n  watts: number\n  element: HTMLDivElement | null\n}\n\ninterface PowerNetworkContextValue {\n  loading: boolean\n  register: (node: RegisteredNode) => void\n  unregister: (id: string) => void\n  totalSourceWatts: number\n}\n\nconst PowerNetworkContext = createContext<PowerNetworkContextValue | null>(null)\n\nfunction usePowerNetwork(): PowerNetworkContextValue {\n  const ctx = useContext(PowerNetworkContext)\n  if (!ctx) {\n    throw new Error(\n      'Power network sub-components must be used inside <PowerNetworkDiagram>.',\n    )\n  }\n  return ctx\n}\n\n// --- Geometry helpers ---------------------------------------------------\n\ninterface Point {\n  x: number\n  y: number\n}\n\nfunction anchorTop(rect: DOMRect, containerRect: DOMRect): Point {\n  return {\n    x: rect.left + rect.width / 2 - containerRect.left,\n    y: rect.top - containerRect.top,\n  }\n}\n\nfunction anchorBottom(rect: DOMRect, containerRect: DOMRect): Point {\n  return {\n    x: rect.left + rect.width / 2 - containerRect.left,\n    y: rect.bottom - containerRect.top,\n  }\n}\n\nfunction buildAdaptivePath(from: Point, to: Point): string {\n  if (Math.abs(from.x - to.x) < STRAIGHT_TOLERANCE_PX) {\n    return `M ${from.x} ${from.y} L ${to.x} ${to.y}`\n  }\n  const dy = to.y - from.y\n  const c1y = from.y + dy * 0.56\n  const c2y = to.y - dy * 0.58\n  return `M ${from.x} ${from.y} C ${from.x} ${c1y} ${to.x} ${c2y} ${to.x} ${to.y}`\n}\n\n// --- PowerNetworkDiagram ------------------------------------------------\n\nexport interface PowerNetworkDiagramProps {\n  title?: string\n  loading?: boolean\n  className?: string\n  children?: ReactNode\n}\n\ninterface ConnectorPath {\n  id: string\n  d: string\n  kind: NodeKind\n  variant?: PowerSourceVariant\n  reversed: boolean\n}\n\nfunction connectorPathsEqual(a: ConnectorPath[], b: ConnectorPath[]): boolean {\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i++) {\n    const ap = a[i]\n    const bp = b[i]\n    if (!ap || !bp) return false\n    if (\n      ap.id !== bp.id ||\n      ap.d !== bp.d ||\n      ap.variant !== bp.variant ||\n      ap.kind !== bp.kind ||\n      ap.reversed !== bp.reversed\n    ) {\n      return false\n    }\n  }\n  return true\n}\n\nexport function PowerNetworkDiagram({\n  title,\n  loading = false,\n  className,\n  children,\n}: PowerNetworkDiagramProps): ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [nodes, setNodes] = useState<Map<string, RegisteredNode>>(\n    () => new Map(),\n  )\n  const [connectorPaths, setConnectorPaths] = useState<ConnectorPath[]>([])\n  const connectorPathsRef = useRef<ConnectorPath[]>([])\n  const flowPathRefs = useRef<Record<string, SVGPathElement | null>>({})\n  const currentFlowVisualsRef = useRef<Record<string, FlowAnimationState>>({})\n  const targetFlowVisualsRef = useRef<Record<string, FlowVisual>>({})\n\n  const register = useCallback((node: RegisteredNode) => {\n    setNodes((prev) => {\n      const existing = prev.get(node.id)\n      if (\n        existing &&\n        existing.kind === node.kind &&\n        existing.variant === node.variant &&\n        existing.watts === node.watts &&\n        existing.element === node.element\n      ) {\n        return prev\n      }\n      const next = new Map(prev)\n      next.set(node.id, node)\n      return next\n    })\n  }, [])\n\n  const unregister = useCallback((id: string) => {\n    setNodes((prev) => {\n      if (!prev.has(id)) return prev\n      const next = new Map(prev)\n      next.delete(id)\n      return next\n    })\n  }, [])\n\n  const totalSourceWatts = useMemo(() => {\n    let total = 0\n    for (const node of nodes.values()) {\n      if (node.kind === 'source') total += node.watts\n    }\n    return total\n  }, [nodes])\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    let homeNode: RegisteredNode | undefined\n    const sources: RegisteredNode[] = []\n    const devices: RegisteredNode[] = []\n    for (const node of nodes.values()) {\n      if (node.kind === 'home') {\n        homeNode = node\n      } else if (node.element) {\n        if (node.kind === 'source') sources.push(node)\n        else devices.push(node)\n      }\n    }\n\n    const updatePaths = () => {\n      if (!homeNode || !homeNode.element) {\n        setConnectorPaths((prev) => (prev.length === 0 ? prev : []))\n        return\n      }\n      const containerRect = container.getBoundingClientRect()\n      const homeRect = homeNode.element.getBoundingClientRect()\n      const homeTop = anchorTop(homeRect, containerRect)\n      const homeBottom = anchorBottom(homeRect, containerRect)\n      const next: ConnectorPath[] = []\n\n      const sourceCount = sources.length\n      const deviceCount = devices.length\n\n      sources.forEach((source, index) => {\n        if (!source.element) return\n        const from = anchorBottom(\n          source.element.getBoundingClientRect(),\n          containerRect,\n        )\n        const offsetX =\n          SOURCE_HOME_OFFSET_STEP_PX * (index - (sourceCount - 1) / 2)\n        const to = { x: homeTop.x + offsetX, y: homeTop.y }\n        next.push({\n          id: source.id,\n          d: buildAdaptivePath(from, to),\n          kind: 'source',\n          variant: source.variant,\n          reversed: source.watts < 0,\n        })\n      })\n\n      devices.forEach((device, index) => {\n        if (!device.element) return\n        const to = anchorTop(\n          device.element.getBoundingClientRect(),\n          containerRect,\n        )\n        const offsetX =\n          DEVICE_HOME_OFFSET_STEP_PX * (index - (deviceCount - 1) / 2)\n        const from = { x: homeBottom.x + offsetX, y: homeBottom.y }\n        next.push({\n          id: device.id,\n          d: buildAdaptivePath(from, to),\n          kind: 'device',\n          reversed: false,\n        })\n      })\n\n      setConnectorPaths((prev) =>\n        connectorPathsEqual(prev, next) ? prev : next,\n      )\n    }\n\n    updatePaths()\n\n    const resizeObserver = new ResizeObserver(updatePaths)\n    resizeObserver.observe(container)\n    for (const node of nodes.values()) {\n      if (node.element) resizeObserver.observe(node.element)\n    }\n    window.addEventListener('resize', updatePaths)\n\n    return () => {\n      resizeObserver.disconnect()\n      window.removeEventListener('resize', updatePaths)\n    }\n  }, [nodes])\n\n  useEffect(() => {\n    connectorPathsRef.current = connectorPaths\n  }, [connectorPaths])\n\n  useEffect(() => {\n    const targets: Record<string, FlowVisual> = {}\n    const homeWatts = totalSourceWatts\n    for (const node of nodes.values()) {\n      if (node.kind === 'home') continue\n      const watts = node.watts\n      const relative =\n        homeWatts > 0\n          ? Math.max(0, Math.min(1, Math.abs(watts) / homeWatts))\n          : 0\n      targets[node.id] = {\n        gap: FLOW_GAP_MAX - (FLOW_GAP_MAX - FLOW_GAP_MIN) * relative,\n        speed: FLOW_SPEED_MIN + (FLOW_SPEED_MAX - FLOW_SPEED_MIN) * relative,\n        opacity: Math.abs(watts) > 0 ? 1 : 0,\n      }\n    }\n    targetFlowVisualsRef.current = targets\n  }, [nodes, totalSourceWatts])\n\n  useEffect(() => {\n    if (loading) return\n    let frameId = 0\n    let lastFrameTime = performance.now()\n\n    const animate = (now: number) => {\n      const deltaSeconds = Math.max(0.001, (now - lastFrameTime) / 1000)\n      lastFrameTime = now\n      const smoothing = 1 - Math.exp(-FLOW_SMOOTHING * deltaSeconds)\n\n      for (const connectorPath of connectorPathsRef.current) {\n        const id = connectorPath.id\n        const target = targetFlowVisualsRef.current[id]\n        const pathElement = flowPathRefs.current[id]\n        if (!target || !pathElement) continue\n\n        const current = currentFlowVisualsRef.current[id] ?? {\n          gap: target.gap,\n          offset: 0,\n          speed: target.speed,\n          opacity: target.opacity,\n        }\n\n        current.gap += (target.gap - current.gap) * smoothing\n        current.speed += (target.speed - current.speed) * smoothing\n        current.opacity += (target.opacity - current.opacity) * smoothing\n\n        const dashCycle = FLOW_DASH_SOLID + Math.max(0.001, current.gap)\n        const direction = connectorPath.reversed ? 1 : -1\n        const nextOffset =\n          current.offset + direction * current.speed * deltaSeconds\n        const wrappedOffset = ((nextOffset % dashCycle) + dashCycle) % dashCycle\n        current.offset = wrappedOffset - dashCycle\n\n        pathElement.setAttribute(\n          'stroke-dasharray',\n          `${FLOW_DASH_SOLID} ${current.gap.toFixed(3)}`,\n        )\n        pathElement.setAttribute('stroke-dashoffset', current.offset.toFixed(3))\n        pathElement.setAttribute('opacity', current.opacity.toFixed(3))\n\n        currentFlowVisualsRef.current[id] = current\n      }\n\n      frameId = window.requestAnimationFrame(animate)\n    }\n\n    frameId = window.requestAnimationFrame(animate)\n    return () => window.cancelAnimationFrame(frameId)\n  }, [loading])\n\n  const contextValue = useMemo<PowerNetworkContextValue>(\n    () => ({ loading, register, unregister, totalSourceWatts }),\n    [loading, register, unregister, totalSourceWatts],\n  )\n\n  return (\n    <PowerNetworkContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        className={cn('@container relative flex flex-col', className)}\n      >\n        {title && <SectionTitle>{title}</SectionTitle>}\n        {connectorPaths.length > 0 && (\n          <svg className=\"pointer-events-none absolute inset-0 size-full\">\n            {connectorPaths.map((path) => {\n              if (loading) {\n                return (\n                  <path\n                    key={path.id}\n                    d={path.d}\n                    fill=\"none\"\n                    stroke={SKELETON_STROKE}\n                    strokeWidth={STROKE_WIDTH}\n                    strokeLinecap=\"round\"\n                  />\n                )\n              }\n\n              const flowStroke =\n                path.kind === 'source' && path.variant\n                  ? SOURCE_VARIANTS[path.variant].flowStroke\n                  : DEVICE_FLOW_STROKE\n              const initialDashGap =\n                path.kind === 'source' && path.variant\n                  ? SOURCE_VARIANTS[path.variant].initialDashGap\n                  : DEVICE_INITIAL_DASH_GAP\n\n              return (\n                <g key={path.id}>\n                  <path\n                    d={path.d}\n                    fill=\"none\"\n                    stroke=\"var(--gray-a1)\"\n                    strokeWidth={STROKE_WIDTH}\n                    strokeLinecap=\"round\"\n                  />\n                  <path\n                    d={path.d}\n                    fill=\"none\"\n                    stroke={flowStroke}\n                    strokeWidth={STROKE_WIDTH}\n                    strokeLinecap=\"round\"\n                    ref={(el) => {\n                      flowPathRefs.current[path.id] = el\n                    }}\n                    strokeDasharray={`${FLOW_DASH_SOLID} ${initialDashGap}`}\n                    strokeDashoffset={0}\n                    opacity={0}\n                  />\n                </g>\n              )\n            })}\n          </svg>\n        )}\n        <div className=\"flex flex-col gap-y-14\">{children}</div>\n      </div>\n    </PowerNetworkContext.Provider>\n  )\n}\n\n// --- Row containers -----------------------------------------------------\n\nexport interface PowerNetworkRowProps {\n  className?: string\n  children?: ReactNode\n}\n\nexport function PowerNetworkSources({\n  className,\n  children,\n}: PowerNetworkRowProps): ReactElement {\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function PowerNetworkDevices({\n  className,\n  children,\n}: PowerNetworkRowProps): ReactElement {\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-[clamp(1.5rem,10cqw,4rem)]',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\n// --- PowerSource --------------------------------------------------------\n\nexport interface PowerSourceProps {\n  id?: string\n  watts: number\n  icon: ReactNode\n  variant?: PowerSourceVariant\n  className?: string\n  /**\n   * Optional 0–100 progress (e.g. battery SoC). When set, a thin colored arc\n   * is drawn around the icon circle as a non-intrusive indicator.\n   */\n  progress?: number\n}\n\nexport function PowerSource({\n  id: idProp,\n  watts,\n  icon,\n  variant = 'neutral',\n  className,\n  progress,\n}: PowerSourceProps): ReactElement {\n  const autoId = useId()\n  const id = idProp ?? autoId\n  const { register, unregister, loading } = usePowerNetwork()\n  const [element, setElement] = useState<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (!element) return\n    register({ id, kind: 'source', variant, watts, element })\n  }, [element, register, id, variant, watts])\n\n  useEffect(() => {\n    return () => unregister(id)\n  }, [unregister, id])\n\n  if (loading) {\n    return <SourceSkeleton anchorRef={setElement} />\n  }\n\n  const isActive = watts !== 0\n  const variantStyles = SOURCE_VARIANTS[variant]\n  const clampedProgress =\n    progress == null ? null : Math.max(0, Math.min(100, progress))\n  const showRing = clampedProgress != null\n  const RING_RADIUS = 48\n  const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS\n  const ringDash =\n    clampedProgress != null ? (clampedProgress / 100) * RING_CIRCUMFERENCE : 0\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-1 transition-opacity duration-500',\n        !isActive && 'opacity-45',\n        className,\n      )}\n    >\n      <NumberFlow\n        value={Math.abs(watts)}\n        suffix=\"W\"\n        className=\"mt-1 text-sm leading-none font-medium\"\n      />\n      <div\n        ref={setElement}\n        className={cn(\n          'relative flex aspect-square items-center justify-center rounded-circle border p-4 shadow-sm',\n          isActive\n            ? variantStyles.activeClassName\n            : 'border-gray bg-gray-a3 shadow-gray-a4 saturate-0',\n        )}\n      >\n        {showRing && (\n          <svg\n            className=\"pointer-events-none absolute inset-0 size-full -rotate-90\"\n            viewBox=\"0 0 100 100\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"50\"\n              cy=\"50\"\n              r={RING_RADIUS}\n              fill=\"none\"\n              stroke={variantStyles.flowStroke}\n              strokeWidth=\"4\"\n              strokeLinecap=\"round\"\n              strokeDasharray={`${ringDash} ${RING_CIRCUMFERENCE}`}\n              opacity={isActive ? 1 : 0.5}\n            />\n          </svg>\n        )}\n        {icon}\n      </div>\n    </div>\n  )\n}\n\nfunction SourceSkeleton({\n  anchorRef,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n}): ReactElement {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-1\">\n      <Skeleton className=\"h-3.5 w-10\" />\n      <div\n        ref={anchorRef}\n        className=\"flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none\"\n      >\n        <div className=\"size-7\" />\n      </div>\n    </div>\n  )\n}\n\n// --- PowerDevice --------------------------------------------------------\n\nexport interface PowerDeviceProps {\n  id?: string\n  watts: number\n  icon: ReactNode\n  className?: string\n}\n\nexport function PowerDevice({\n  id: idProp,\n  watts,\n  icon,\n  className,\n}: PowerDeviceProps): ReactElement {\n  const autoId = useId()\n  const id = idProp ?? autoId\n  const { register, unregister, loading } = usePowerNetwork()\n  const [element, setElement] = useState<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (!element) return\n    register({ id, kind: 'device', watts, element })\n  }, [element, register, id, watts])\n\n  useEffect(() => {\n    return () => unregister(id)\n  }, [unregister, id])\n\n  if (loading) {\n    return <DeviceSkeleton anchorRef={setElement} />\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-1',\n        className,\n      )}\n    >\n      <div\n        ref={setElement}\n        className=\"flex aspect-square items-center justify-center rounded-circle border border-gray bg-slate-a1 p-4\"\n      >\n        {icon}\n      </div>\n      <NumberFlow\n        value={watts}\n        suffix=\"W\"\n        className=\"text-sm font-medium tabular-nums\"\n      />\n    </div>\n  )\n}\n\nfunction DeviceSkeleton({\n  anchorRef,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n}): ReactElement {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-1\">\n      <div\n        ref={anchorRef}\n        className=\"flex aspect-square animate-pulse items-center justify-center rounded-circle border border-gray bg-base-gray-soft p-4 motion-reduce:animate-none\"\n      >\n        <div className=\"size-5\" />\n      </div>\n      <Skeleton className=\"h-3.5 w-10\" />\n    </div>\n  )\n}\n\n// --- PowerNetworkHome ---------------------------------------------------\n\nexport interface PowerNetworkHomeProps {\n  /** Override total power. Defaults to the sum of registered source watts. */\n  watts?: number\n  /** Self-sufficiency ratio in 0..1. Renders a green ring when provided. */\n  autarky?: number\n  className?: string\n}\n\nexport function PowerNetworkHome({\n  watts,\n  autarky,\n  className,\n}: PowerNetworkHomeProps): ReactElement {\n  const autoId = useId()\n  const { register, unregister, loading, totalSourceWatts } = usePowerNetwork()\n  const [element, setElement] = useState<HTMLDivElement | null>(null)\n  const effectiveWatts = watts ?? totalSourceWatts\n\n  useEffect(() => {\n    if (!element) return\n    register({ id: autoId, kind: 'home', watts: effectiveWatts, element })\n  }, [element, register, autoId, effectiveWatts])\n\n  useEffect(() => {\n    return () => unregister(autoId)\n  }, [unregister, autoId])\n\n  if (loading) {\n    return <HomeSkeleton anchorRef={setElement} className={className} />\n  }\n\n  return (\n    <HomeSection\n      anchorRef={setElement}\n      autarky={autarky ?? null}\n      watts={effectiveWatts}\n      className={className}\n    />\n  )\n}\n\nfunction HomeSection({\n  anchorRef,\n  autarky,\n  className,\n  watts,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n  autarky: number | null\n  className?: string\n  watts: number\n}): ReactElement {\n  const targetAutarky =\n    autarky == null ? 0 : Math.max(0, Math.min(100, autarky * 100))\n  const [animatedAutarky, setAnimatedAutarky] = useState(targetAutarky)\n  const animatedAutarkyRef = useRef(animatedAutarky)\n  const nodeSize = 78\n  const ringStrokeWidth = 2\n  const radius = (nodeSize - ringStrokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const progressLength = (animatedAutarky / 100) * circumference\n\n  useEffect(() => {\n    animatedAutarkyRef.current = animatedAutarky\n  }, [animatedAutarky])\n\n  useEffect(() => {\n    let frameId = 0\n    let lastTime = performance.now()\n\n    const animate = (now: number) => {\n      const deltaSeconds = Math.max(0.001, (now - lastTime) / 1000)\n      lastTime = now\n      const smoothing = 1 - Math.exp(-7 * deltaSeconds)\n      const next =\n        animatedAutarkyRef.current +\n        (targetAutarky - animatedAutarkyRef.current) * smoothing\n\n      animatedAutarkyRef.current = next\n      setAnimatedAutarky(next)\n\n      if (Math.abs(targetAutarky - next) > 0.05) {\n        frameId = window.requestAnimationFrame(animate)\n      } else {\n        animatedAutarkyRef.current = targetAutarky\n        setAnimatedAutarky(targetAutarky)\n      }\n    }\n\n    frameId = window.requestAnimationFrame(animate)\n    return () => window.cancelAnimationFrame(frameId)\n  }, [targetAutarky])\n\n  return (\n    <div\n      ref={anchorRef}\n      className={cn('relative mx-auto size-[78px]', className)}\n    >\n      {autarky != null && (\n        <svg\n          className=\"absolute inset-0 size-full -rotate-90\"\n          viewBox={`0 0 ${nodeSize} ${nodeSize}`}\n        >\n          <circle\n            cx={nodeSize / 2}\n            cy={nodeSize / 2}\n            r={radius}\n            fill=\"none\"\n            stroke=\"var(--gray-a5)\"\n            strokeWidth={ringStrokeWidth}\n          />\n          {progressLength > 0 && (\n            <circle\n              cx={nodeSize / 2}\n              cy={nodeSize / 2}\n              r={radius}\n              fill=\"none\"\n              stroke=\"var(--green-a9)\"\n              strokeLinecap=\"round\"\n              strokeWidth={ringStrokeWidth}\n              strokeDasharray={`${progressLength} ${circumference}`}\n            />\n          )}\n        </svg>\n      )}\n      <div className=\"absolute inset-0 flex flex-col items-center justify-center rounded-circle border border-gray-a5 shadow-sm shadow-gray-a1\">\n        <MaterialSymbol className=\"text-[14px]\" name=\"home\" />\n        <NumberFlow\n          value={watts}\n          suffix=\"W\"\n          className=\"mt-1 text-sm leading-none font-medium\"\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction HomeSkeleton({\n  anchorRef,\n  className,\n}: {\n  anchorRef: (element: HTMLDivElement | null) => void\n  className?: string\n}): ReactElement {\n  return (\n    <div\n      ref={anchorRef}\n      className={cn(\n        'mx-auto size-[78px] animate-pulse rounded-circle border border-gray motion-reduce:animate-none',\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/progress.cjs

@@ -0,0 +1,34 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/progress.tsx
+const sizeClasses = {
+	sm: "h-1",
+	default: "h-2",
+	lg: "h-3"
+};
+const Progress = react.forwardRef(({ className, value, max = 100, size = "default", ...props }, ref) => {
+	const percentage = Math.min(100, Math.max(0, value / max * 100));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-valuemax": max,
+		"aria-valuemin": 0,
+		"aria-valuenow": value,
+		className: (0, cnfast.cn)("w-full overflow-hidden rounded-full bg-slate-a4", sizeClasses[size], className),
+		ref,
+		role: "progressbar",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "h-full rounded-full bg-spark-9 transition-all duration-300",
+			style: { width: `${percentage}%` }
+		})
+	});
+});
+Progress.displayName = "Progress";
+//#endregion
+exports.Progress = Progress;
+
+//# sourceMappingURL=progress.cjs.map

package/dist/components/progress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.cjs","names":["React"],"sources":["../../src/components/progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Current value */\n  value: number\n  /** Maximum value. Default: 100 */\n  max?: number\n  /** Height variant */\n  size?: 'sm' | 'default' | 'lg'\n}\n\nconst sizeClasses = {\n  sm: 'h-1',\n  default: 'h-2',\n  lg: 'h-3',\n} as const\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, max = 100, size = 'default', ...props }, ref) => {\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100))\n\n    return (\n      <div\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={value}\n        className={cn(\n          'w-full overflow-hidden rounded-full bg-slate-a4',\n          sizeClasses[size],\n          className,\n        )}\n        ref={ref}\n        role=\"progressbar\"\n        {...props}\n      >\n        <div\n          className=\"h-full rounded-full bg-spark-9 transition-all duration-300\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n    )\n  },\n)\n\nProgress.displayName = 'Progress'\n\nexport { Progress }\n"],"mappings":";;;;;;;;AAYA,MAAM,cAAc;CAClB,IAAI;CACJ,SAAS;CACT,IAAI;CACL;AAED,MAAM,WAAWA,MAAM,YACpB,EAAE,WAAW,OAAO,MAAM,KAAK,OAAO,WAAW,GAAG,SAAS,QAAQ;CACpE,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,IAAI,CAAC;AAElE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,YAAA,GAAA,OAAA,IACE,mDACA,YAAY,OACZ,UACD;EACI;EACL,MAAK;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAE,OAAO,GAAG,WAAW,IAAI;GAClC,CAAA;EACE,CAAA;EAGX;AAED,SAAS,cAAc"}

package/dist/components/progress.d.cts

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/progress.d.ts
+interface ProgressProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  /** Current value */
+  value: number;
+  /** Maximum value. Default: 100 */
+  max?: number;
+  /** Height variant */
+  size?: 'sm' | 'default' | 'lg';
+}
+declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Progress, ProgressProps };
+//# sourceMappingURL=progress.d.cts.map