@bug-on/md3-react 2.0.3 → 3.0.0

package/src/ui/progress-indicator/circular.tsx

@@ -0,0 +1,248 @@
+import { domMax, LazyMotion, m } from "motion/react";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import type { CircularProgressProps } from "./types";
+import { generateWavyCircularPath } from "./utils";
+
+export const CircularProgress = React.forwardRef<
+	HTMLDivElement,
+	CircularProgressProps
+>(
+	(
+		{
+			value,
+			size = 48,
+			trackHeight = 4,
+			shape = "flat",
+			amplitude,
+			wavelength,
+			gapSize = 4,
+			crawlerSpeed = 1,
+			color,
+			trackColor,
+			className,
+			"aria-label": ariaLabel,
+			...restProps
+		},
+		ref,
+	) => {
+		const isDeterminate = value !== undefined;
+		const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
+
+		const radius = (size - trackHeight) / 2;
+		const center = size / 2;
+
+		const activeColor = color || "var(--md-sys-color-indicator-active)";
+		const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
+
+		const isWavy = shape === "wavy";
+
+		const BASELINE_SIZE = 48;
+		const scaleFactor = size / BASELINE_SIZE;
+		const effectiveAmplitude = React.useMemo(
+			() => amplitude ?? 1.6 * scaleFactor,
+			[amplitude, scaleFactor],
+		);
+		const effectiveWavelength = React.useMemo(
+			() => wavelength ?? 15 * scaleFactor,
+			[wavelength, scaleFactor],
+		);
+
+		const wavyActivePath = React.useMemo(
+			() =>
+				isWavy
+					? generateWavyCircularPath(
+							center,
+							radius,
+							effectiveAmplitude,
+							effectiveWavelength,
+						)
+					: null,
+			[isWavy, center, radius, effectiveAmplitude, effectiveWavelength],
+		);
+
+		const circumference = React.useMemo(() => 2 * Math.PI * radius, [radius]);
+		const gapForTrack = React.useMemo(
+			() => (gapSize + trackHeight) / circumference,
+			[gapSize, trackHeight, circumference],
+		);
+		const activeAngularFraction = isDeterminate ? clampedValue / 100 : 0;
+
+		const trackOffset = isDeterminate ? activeAngularFraction + gapForTrack : 0;
+		const trackLength = isDeterminate
+			? Math.max(0.001, 1 - activeAngularFraction - 2 * gapForTrack)
+			: 1;
+
+		const ActiveCircleElem = m.circle;
+		const ActivePathElem = m.path;
+
+		return (
+			<div
+				ref={ref}
+				role="progressbar"
+				aria-label={ariaLabel}
+				aria-valuenow={isDeterminate ? clampedValue : undefined}
+				aria-valuemin={0}
+				aria-valuemax={100}
+				className={cn(
+					"relative inline-flex items-center justify-center shrink-0",
+					className,
+				)}
+				style={{ width: size, height: size }}
+				{...restProps}
+			>
+				<LazyMotion features={domMax} strict>
+					<svg
+						width={size}
+						height={size}
+						viewBox={`0 0 ${size} ${size}`}
+						aria-hidden="true"
+						style={{ transform: "rotate(-90deg)", overflow: "visible" }}
+					>
+						{isDeterminate ? (
+							<m.circle
+								cx={center}
+								cy={center}
+								r={radius}
+								fill="none"
+								stroke={bgTrackColor}
+								strokeWidth={trackHeight}
+								initial={{ pathLength: trackLength, pathOffset: trackOffset }}
+								animate={{ pathLength: trackLength, pathOffset: trackOffset }}
+								transition={{ duration: 0.4, ease: [0.2, 0, 0, 1] }}
+								strokeLinecap="round"
+							/>
+						) : null}
+
+						{isDeterminate &&
+							(isWavy ? (
+								<ActivePathElem
+									d={wavyActivePath ?? ""}
+									fill="none"
+									stroke={activeColor}
+									strokeWidth={trackHeight}
+									strokeLinecap="round"
+									initial={{ pathLength: 0 }}
+									animate={{ pathLength: clampedValue / 100 }}
+									transition={{
+										duration: 0.4,
+										ease: [0.2, 0, 0, 1],
+									}}
+								/>
+							) : (
+								<ActiveCircleElem
+									cx={center}
+									cy={center}
+									r={radius}
+									fill="none"
+									stroke={activeColor}
+									strokeWidth={trackHeight}
+									strokeLinecap="round"
+									initial={{ pathLength: 0 }}
+									animate={{ pathLength: clampedValue / 100 }}
+									transition={{
+										duration: 0.4,
+										ease: [0.2, 0, 0, 1],
+									}}
+								/>
+							))}
+					</svg>
+
+					{!isDeterminate && (
+						<m.svg
+							width={size}
+							height={size}
+							viewBox={`0 0 ${size} ${size}`}
+							aria-hidden="true"
+							style={{
+								position: "absolute",
+								inset: 0,
+								overflow: "visible",
+								rotate: "-90deg",
+								transformOrigin: "center",
+							}}
+							animate={{ rotate: ["-90deg", "270deg"] }}
+							transition={{
+								rotate: {
+									duration: 2 / Math.max(0.1, crawlerSpeed),
+									repeat: Number.POSITIVE_INFINITY,
+									ease: "linear",
+								},
+							}}
+						>
+							<m.circle
+								cx={center}
+								cy={center}
+								r={radius}
+								fill="none"
+								stroke={bgTrackColor}
+								strokeWidth={trackHeight}
+								strokeLinecap="round"
+								style={{ originX: "50%", originY: "50%" }}
+								animate={{
+									pathLength: [
+										Math.max(0.001, 1 - 0.1 - 2 * gapForTrack),
+										Math.max(0.001, 1 - 0.75 - 2 * gapForTrack),
+										Math.max(0.001, 1 - 0.1 - 2 * gapForTrack),
+									],
+									rotate: [
+										`${(0.1 + gapForTrack) * 360}deg`,
+										`${(1.0 + gapForTrack) * 360}deg`,
+										`${(1.1 + gapForTrack) * 360}deg`,
+									],
+								}}
+								transition={{
+									duration: 2 / Math.max(0.1, crawlerSpeed),
+									repeat: Number.POSITIVE_INFINITY,
+									ease: [0.4, 0, 0.2, 1],
+								}}
+							/>
+
+							{isWavy ? (
+								<ActivePathElem
+									d={wavyActivePath ?? ""}
+									fill="none"
+									stroke={activeColor}
+									strokeWidth={trackHeight}
+									strokeLinecap="round"
+									style={{ originX: "50%", originY: "50%" }}
+									animate={{
+										pathLength: [0.1, 0.75, 0.1],
+										rotate: ["0deg", "90deg", "360deg"],
+									}}
+									transition={{
+										duration: 2 / Math.max(0.1, crawlerSpeed),
+										repeat: Number.POSITIVE_INFINITY,
+										ease: [0.4, 0, 0.2, 1],
+									}}
+								/>
+							) : (
+								<ActiveCircleElem
+									cx={center}
+									cy={center}
+									r={radius}
+									fill="none"
+									stroke={activeColor}
+									strokeWidth={trackHeight}
+									strokeLinecap="round"
+									style={{ originX: "50%", originY: "50%" }}
+									animate={{
+										pathLength: [0.1, 0.75, 0.1],
+										rotate: ["0deg", "90deg", "360deg"],
+									}}
+									transition={{
+										duration: 2 / Math.max(0.1, crawlerSpeed),
+										repeat: Number.POSITIVE_INFINITY,
+										ease: [0.4, 0, 0.2, 1],
+									}}
+								/>
+							)}
+						</m.svg>
+					)}
+				</LazyMotion>
+			</div>
+		);
+	},
+);
+
+CircularProgress.displayName = "CircularProgress";

package/src/ui/progress-indicator/hooks.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+export function useContainerWidth() {
+	const [width, setWidth] = React.useState(0);
+	const observerRef = React.useRef<ResizeObserver | null>(null);
+
+	const ref = React.useCallback((node: HTMLDivElement | null) => {
+		if (observerRef.current) {
+			observerRef.current.disconnect();
+			observerRef.current = null;
+		}
+
+		if (node) {
+			const obs = new ResizeObserver((entries) => {
+				const contentRect = entries[0].contentRect;
+				setWidth(contentRect.width);
+			});
+			obs.observe(node);
+			observerRef.current = obs;
+		}
+	}, []);
+
+	// Cleanup on unmount
+	React.useEffect(() => {
+		return () => {
+			if (observerRef.current) {
+				observerRef.current.disconnect();
+			}
+		};
+	}, []);
+
+	return [ref, width] as const;
+}
+
+export function useMergedRef<T>(
+	...refs: (React.Ref<T> | undefined | null)[]
+): React.RefCallback<T> {
+	return React.useCallback(
+		(node: T | null) => {
+			for (const ref of refs) {
+				if (typeof ref === "function") {
+					ref(node);
+				} else if (ref && typeof ref === "object") {
+					(ref as React.MutableRefObject<T | null>).current = node;
+				}
+			}
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[refs],
+	);
+}

package/{dist/ui/progress-indicator/index.d.ts → src/ui/progress-indicator/index.tsx}

@@ -1,5 +1,8 @@
 import * as React from "react";
+import { CircularProgress } from "./circular";
+import { LinearProgress } from "./linear";
 import type { ProgressIndicatorProps } from "./types";
+
 /**
  * Thanh tiến trình (Progress Indicator) theo nguyên tắc Material Design 3 Expressive.
  * Hỗ trợ linh hoạt 2 loại hình hiển thị: Linear (Đường thẳng) và Circular (Hình tròn),
@@ -17,5 +20,20 @@ import type { ProgressIndicatorProps } from "./types";
  * <ProgressIndicator variant="circular" value={45} size={48} aria-label="Syncing..." />
  * ```
  */
-export declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
-export type { CircularProgressProps, LinearProgressProps, ProgressIndicatorProps, } from "./types";
+export const ProgressIndicator = React.forwardRef<
+	HTMLDivElement,
+	ProgressIndicatorProps
+>((props, ref) => {
+	if (props.variant === "circular") {
+		return <CircularProgress ref={ref} {...props} />;
+	}
+	return <LinearProgress ref={ref} {...props} />;
+});
+
+ProgressIndicator.displayName = "ProgressIndicator";
+
+export type {
+	CircularProgressProps,
+	LinearProgressProps,
+	ProgressIndicatorProps,
+} from "./types";

package/src/ui/progress-indicator/linear-flat.tsx

@@ -0,0 +1,83 @@
+import { m } from "motion/react";
+import * as React from "react";
+
+export const FlatLinearTrack = React.memo<{
+	trackHeight: number;
+	activeColor: string;
+	trackColor: string;
+	value?: number;
+	isRtl: boolean;
+	gapSize: number;
+	crawlerSpeed: number;
+}>(function FlatLinearTrack({
+	trackHeight,
+	activeColor,
+	trackColor,
+	value,
+	isRtl,
+	gapSize,
+	crawlerSpeed,
+}) {
+	const isDeterminate = value !== undefined;
+	const radius = trackHeight / 2;
+	const minActiveWidth = trackHeight;
+
+	return (
+		<div
+			className="relative w-full overflow-hidden"
+			style={{ height: trackHeight, borderRadius: radius }}
+		>
+			{isDeterminate ? (
+				<>
+					<m.div
+						className="absolute inset-y-0"
+						style={{
+							backgroundColor: trackColor,
+							borderRadius: radius,
+							width: "100%",
+						}}
+						initial={{
+							[isRtl ? "right" : "left"]:
+								`calc(max(${minActiveWidth}px, 0%) + ${gapSize}px)`,
+						}}
+						animate={{
+							[isRtl ? "right" : "left"]:
+								`calc(max(${minActiveWidth}px, ${value}%) + ${gapSize}px)`,
+						}}
+						transition={{ duration: 0.4, ease: [0.2, 0, 0, 1] }}
+					/>
+					<m.div
+						className="absolute inset-y-0"
+						style={{
+							backgroundColor: activeColor,
+							borderRadius: radius,
+							minWidth: minActiveWidth,
+							...(isRtl ? { right: 0 } : { left: 0 }),
+						}}
+						initial={{ width: `${minActiveWidth}px` }}
+						animate={{ width: `${value}%` }}
+						transition={{ duration: 0.4, ease: [0.2, 0, 0, 1] }}
+					/>
+				</>
+			) : (
+				<>
+					<div
+						className="absolute inset-0"
+						style={{ backgroundColor: trackColor, borderRadius: radius }}
+					/>
+					<m.div
+						className="absolute inset-y-0"
+						style={{ backgroundColor: activeColor, borderRadius: radius }}
+						initial={{ left: "-40%", width: "40%" }}
+						animate={{ left: ["-40%", "100%"], width: ["40%", "20%", "40%"] }}
+						transition={{
+							duration: 2 / Math.max(0.1, crawlerSpeed),
+							repeat: Number.POSITIVE_INFINITY,
+							ease: "easeInOut",
+						}}
+					/>
+				</>
+			)}
+		</div>
+	);
+});

package/src/ui/progress-indicator/linear-wavy.tsx

@@ -0,0 +1,243 @@
+import { animate, useAnimationFrame, useMotionValue } from "motion/react";
+import * as React from "react";
+import { useContainerWidth } from "./hooks";
+import { easeInOutCubic, getSinePath } from "./utils";
+
+export const WavyLinearTrack = React.memo<{
+	trackHeight: number;
+	svgHeight: number;
+	amplitude: number;
+	wavelength: number;
+	indeterminateWavelength: number;
+	activeColor: string;
+	trackColor: string;
+	value?: number;
+	isRtl: boolean;
+	gapSize: number;
+	waveSpeed: number;
+	crawlerSpeed: number;
+	determinateAnimation: "md3" | "continuous";
+	indeterminateAnimation: "md3" | "continuous";
+	trackShape: "flat" | "wavy";
+}>(function WavyLinearTrack({
+	trackHeight,
+	svgHeight,
+	amplitude,
+	wavelength,
+	indeterminateWavelength,
+	activeColor,
+	trackColor,
+	value,
+	isRtl,
+	gapSize,
+	waveSpeed,
+	crawlerSpeed,
+	determinateAnimation,
+	indeterminateAnimation,
+	trackShape,
+}) {
+	const isDeterminate = typeof value === "number";
+	const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
+	const titleId = React.useId();
+
+	const [containerRef, width] = useContainerWidth();
+
+	const activePathRef = React.useRef<SVGPathElement>(null);
+	const trackPathRef = React.useRef<SVGPathElement>(null);
+
+	const amplitudeMV = useMotionValue(amplitude);
+	const fractionMV = useMotionValue(isDeterminate ? clampedValue / 100 : 1);
+
+	React.useEffect(() => {
+		if (isDeterminate) {
+			const fraction = clampedValue / 100;
+
+			// Xử lý Flattening Logic dựa trên prop determinateAnimation
+			let targetAmp = amplitude;
+			if (determinateAnimation === "md3") {
+				targetAmp = fraction <= 0.1 || fraction >= 0.95 ? 0 : amplitude;
+			}
+
+			animate(amplitudeMV, targetAmp, {
+				type: "spring",
+				bounce: 0,
+				duration: 0.5,
+			});
+			animate(fractionMV, fraction, { duration: 0.4, ease: [0.2, 0, 0, 1] });
+		}
+	}, [
+		clampedValue,
+		isDeterminate,
+		amplitude,
+		amplitudeMV,
+		fractionMV,
+		determinateAnimation,
+	]);
+
+	const activeWavelength = Math.max(
+		1,
+		isDeterminate ? wavelength : indeterminateWavelength,
+	);
+	const trackAmp = trackShape === "wavy" ? amplitude : 0;
+
+	useAnimationFrame((time) => {
+		if (width === 0) return;
+
+		const currentAmp = amplitudeMV.get();
+		const phase = (time / 1000) * waveSpeed * activeWavelength;
+		const capWidth = trackHeight / 2;
+
+		let activePathD = "";
+		let trackD = "";
+		const totalGap = gapSize + trackHeight;
+
+		// 1. CHẾ ĐỘ CÓ XÁC ĐỊNH (DETERMINATE)
+		if (isDeterminate) {
+			const fraction = fractionMV.get();
+			const barHead = fraction * width;
+
+			const adjHead = Math.max(capWidth, Math.min(width - capWidth, barHead));
+			const adjTail = capWidth;
+
+			if (fraction > 0 && adjHead - adjTail > 0.1) {
+				activePathD = getSinePath(
+					adjTail,
+					adjHead,
+					phase,
+					activeWavelength,
+					currentAmp,
+				);
+			} else if (fraction === 0) {
+				activePathD = `M ${capWidth} 0 L ${capWidth + 0.01} 0`;
+			}
+
+			const trackStart = adjHead + totalGap;
+			if (trackStart < width - capWidth) {
+				trackD = getSinePath(
+					trackStart,
+					width - capWidth,
+					phase,
+					activeWavelength,
+					trackAmp,
+				);
+			}
+		}
+		// 2. CHẾ ĐỘ KHÔNG XÁC ĐỊNH (INDETERMINATE)
+		else {
+			const safeCrawlerSpeed = Math.max(0.1, crawlerSpeed);
+			const activeLines: { tail: number; head: number }[] = [];
+
+			if (indeterminateAnimation === "continuous") {
+				const cycle = 2000 / safeCrawlerSpeed;
+				const fraction = (time % cycle) / cycle;
+				activeLines.push({
+					tail: easeInOutCubic(Math.max(0, fraction * 1.5 - 0.5)),
+					head: easeInOutCubic(Math.min(1, fraction * 1.5)),
+				});
+			} else {
+				const cycle = 1750 / safeCrawlerSpeed;
+				const t = (time % cycle) * safeCrawlerSpeed;
+
+				const l1H = easeInOutCubic(Math.max(0, Math.min(1, t / 1000)));
+				const l1T = easeInOutCubic(Math.max(0, Math.min(1, (t - 250) / 1000)));
+				const l2H = easeInOutCubic(Math.max(0, Math.min(1, (t - 650) / 850)));
+				const l2T = easeInOutCubic(Math.max(0, Math.min(1, (t - 900) / 850)));
+
+				activeLines.push({ tail: l1T, head: l1H });
+				activeLines.push({ tail: l2T, head: l2H });
+			}
+
+			const segments = activeLines
+				.map((line) => {
+					const barTail = line.tail * width;
+					const barHead = line.head * width;
+					const adjTail = Math.max(
+						capWidth,
+						Math.min(width - capWidth, barTail),
+					);
+					const adjHead = Math.max(
+						capWidth,
+						Math.min(width - capWidth, barHead),
+					);
+					return { adjTail, adjHead };
+				})
+				.filter((seg) => seg.adjHead - seg.adjTail > 0.1);
+
+			activePathD = segments
+				.map((seg) =>
+					getSinePath(
+						seg.adjTail,
+						seg.adjHead,
+						phase,
+						activeWavelength,
+						currentAmp,
+					),
+				)
+				.join(" ");
+
+			let currentTrackX = capWidth;
+			for (const seg of segments) {
+				const trackEnd = seg.adjTail - totalGap;
+				if (trackEnd > currentTrackX) {
+					trackD += `${getSinePath(currentTrackX, trackEnd, phase, activeWavelength, trackAmp)} `;
+				}
+				currentTrackX = Math.max(currentTrackX, seg.adjHead + totalGap);
+			}
+			if (currentTrackX < width - capWidth) {
+				trackD += getSinePath(
+					currentTrackX,
+					width - capWidth,
+					phase,
+					activeWavelength,
+					trackAmp,
+				);
+			}
+		}
+
+		if (activePathRef.current)
+			activePathRef.current.setAttribute("d", activePathD);
+		if (trackPathRef.current)
+			trackPathRef.current.setAttribute("d", trackD.trim());
+	});
+
+	return (
+		<div
+			ref={containerRef}
+			className="relative w-full overflow-hidden"
+			style={{ height: svgHeight }}
+		>
+			{width > 0 && (
+				<svg
+					className="absolute inset-0 w-full h-full"
+					style={{
+						overflow: "visible",
+						transform: isRtl ? "scaleX(-1)" : undefined,
+					}}
+					aria-labelledby={titleId}
+				>
+					<title id={titleId}>
+						{isDeterminate
+							? `Progress: ${clampedValue}%`
+							: "Indeterminate loading progress"}
+					</title>
+					<g transform={`translate(0, ${svgHeight / 2})`}>
+						<path
+							ref={trackPathRef}
+							fill="none"
+							stroke={trackColor}
+							strokeWidth={trackHeight}
+							strokeLinecap="round"
+						/>
+						<path
+							ref={activePathRef}
+							fill="none"
+							stroke={activeColor}
+							strokeWidth={trackHeight}
+							strokeLinecap="round"
+						/>
+					</g>
+				</svg>
+			)}
+		</div>
+	);
+});