@seed-design/lynx-react 0.2.0-alpha.2 → 0.2.0

package/lib/components/ProgressCircle/ProgressCircle.jsx

@@ -1,286 +1,281 @@
-import { createContext, runOnMainThread, useContext, useEffect, useMemo, useMainThreadRef, } from "@lynx-js/react";
-import clsx from "clsx";
 import { progressCircle } from "@seed-design/lynx-css/recipes/progress-circle";
-const ProgressCircleContext = createContext(null);
-function useProgressCircleCtx() {
-    const ctx = useContext(ProgressCircleContext);
-    if (!ctx) {
-        throw new Error("ProgressCircle compound components must be used within ProgressCircle.Root");
-    }
-    return ctx;
+import clsx from "clsx";
+import { createContext, forwardRef, runOnMainThread, useContext, useEffect, useMainThreadRef, useMemo } from "@lynx-js/react";
+//#region src/components/ProgressCircle/ProgressCircle.tsx
+var ProgressCircleContext = createContext(null);
+function useProgressCircleContext() {
+	const ctx = useContext(ProgressCircleContext);
+	if (!ctx) throw new Error("ProgressCircle compound components must be used within ProgressCircle.Root");
+	return ctx;
 }
-// --- Background-thread-only utilities (for initial render) ---
 function computeRingGeometry(numSize) {
-    const halfSize = numSize / 2;
-    const innerR = 0.53 * Math.SQRT2 * halfSize;
-    const ringCenterR = (halfSize + innerR) / 2;
-    const capSize = halfSize - innerR;
-    return { halfSize, innerR, ringCenterR, capSize };
+	const halfSize = numSize / 2;
+	const innerR = .53 * Math.SQRT2 * halfSize;
+	return {
+		halfSize,
+		innerR,
+		ringCenterR: (halfSize + innerR) / 2,
+		capSize: halfSize - innerR
+	};
 }
 function bgPieClipPath(size, angleDeg) {
-    if (angleDeg >= 360)
-        return undefined;
-    if (angleDeg <= 0)
-        return 'path("M 0 0 Z")';
-    const c = size / 2;
-    const r = c + 1;
-    const rad = (angleDeg * Math.PI) / 180;
-    const endX = c + r * Math.sin(rad);
-    const endY = c - r * Math.cos(rad);
-    const largeArc = angleDeg > 180 ? 1 : 0;
-    return `path("M ${c} ${c} L ${c} ${c - r} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY} Z")`;
+	if (angleDeg >= 360) return void 0;
+	if (angleDeg <= 0) return "path(\"M 0 0 Z\")";
+	const c = size / 2;
+	const r = c + 1;
+	const rad = angleDeg * Math.PI / 180;
+	const endX = c + r * Math.sin(rad);
+	const endY = c - r * Math.cos(rad);
+	const largeArc = angleDeg > 180 ? 1 : 0;
+	return `path("M ${c} ${c} L ${c} ${c - r} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY} Z")`;
 }
-// --- Main-thread-only utilities (for animations) ---
-// Compiled into the main thread bundle. Must NOT be called from render code.
 function cubicBezier(rawT, x1, y1, x2, y2) {
-    "main thread";
-    const t = Math.max(0, Math.min(1, rawT));
-    const cx = 3 * x1;
-    const bx = 3 * (x2 - x1) - cx;
-    const ax = 1 - cx - bx;
-    let currentT = t;
-    for (let i = 0; i < 8; i++) {
-        const currentX = ((ax * currentT + bx) * currentT + cx) * currentT - t;
-        const currentDx = (3 * ax * currentT + 2 * bx) * currentT + cx;
-        if (Math.abs(currentDx) < 1e-6)
-            break;
-        currentT = currentT - currentX / currentDx;
-    }
-    const cy = 3 * y1;
-    const by = 3 * (y2 - y1) - cy;
-    const ay = 1 - cy - by;
-    return ((ay * currentT + by) * currentT + cy) * currentT;
+	"main thread";
+	const t = Math.max(0, Math.min(1, rawT));
+	const cx = 3 * x1;
+	const bx = 3 * (x2 - x1) - cx;
+	const ax = 1 - cx - bx;
+	let currentT = t;
+	for (let i = 0; i < 8; i++) {
+		const currentX = ((ax * currentT + bx) * currentT + cx) * currentT - t;
+		const currentDx = (3 * ax * currentT + 2 * bx) * currentT + cx;
+		if (Math.abs(currentDx) < 1e-6) break;
+		currentT = currentT - currentX / currentDx;
+	}
+	const cy = 3 * y1;
+	const by = 3 * (y2 - y1) - cy;
+	return (((1 - cy - by) * currentT + by) * currentT + cy) * currentT;
 }
 function pieClipPath(size, angleDeg) {
-    "main thread";
-    if (angleDeg >= 360)
-        return undefined;
-    if (angleDeg <= 0)
-        return 'path("M 0 0 Z")';
-    const c = size / 2;
-    const r = c + 1;
-    const rad = (angleDeg * Math.PI) / 180;
-    const endX = c + r * Math.sin(rad);
-    const endY = c - r * Math.cos(rad);
-    const largeArc = angleDeg > 180 ? 1 : 0;
-    return `path("M ${c} ${c} L ${c} ${c - r} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY} Z")`;
+	"main thread";
+	if (angleDeg >= 360) return void 0;
+	if (angleDeg <= 0) return "path(\"M 0 0 Z\")";
+	const c = size / 2;
+	const r = c + 1;
+	const rad = angleDeg * Math.PI / 180;
+	const endX = c + r * Math.sin(rad);
+	const endY = c - r * Math.cos(rad);
+	const largeArc = angleDeg > 180 ? 1 : 0;
+	return `path("M ${c} ${c} L ${c} ${c - r} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY} Z")`;
 }
 function sampleIndeterminate(t) {
-    "main thread";
-    const containerEased = cubicBezier(t, 0.35, 0.25, 0.65, 0.75);
-    const headEased = cubicBezier(t, 0.35, 0, 0.65, 1);
-    const tailEased = cubicBezier(t, 0.35, 0, 0.65, 0.6);
-    const headLength = headEased <= 0.75 ? (headEased / 0.75) * 360 : 360;
-    const tailOffset = tailEased <= 1 / 3 ? 0 : ((tailEased - 1 / 3) / (2 / 3)) * 360;
-    const arcLength = Math.max(0, headLength - tailOffset);
-    const containerDeg = containerEased * 360 + tailOffset;
-    return { containerDeg, arcLength };
+	"main thread";
+	const containerEased = cubicBezier(t, .35, .25, .65, .75);
+	const headEased = cubicBezier(t, .35, 0, .65, 1);
+	const tailEased = cubicBezier(t, .35, 0, .65, .6);
+	const headLength = headEased <= .75 ? headEased / .75 * 360 : 360;
+	const tailOffset = tailEased <= 1 / 3 ? 0 : (tailEased - 1 / 3) / (2 / 3) * 360;
+	const arcLength = Math.max(0, headLength - tailOffset);
+	return {
+		containerDeg: containerEased * 360 + tailOffset,
+		arcLength
+	};
 }
-// --- Animation constants ---
-const INDETERMINATE_DURATION = 1200;
-const TRANSITION_DURATION = 300;
+var INDETERMINATE_DURATION = 1200;
+var TRANSITION_DURATION = 300;
 /**
- * Lynx에서 SVG를 사용할 수 없어 CSS clip-path 기반 pie sector로 구현.
- *
- * **Known Issues:**
- * - clip-path가 Lynx에서 animatable이 아니라 JS RAF로 매 프레임 SVG path 생성
- * - Lynx main thread에서 모듈 레벨 Map 미지원으로 인스턴스 간 RAF 공유 불가
- * - 다수 인스턴스 동시 렌더링 시 성능 저하 가능
- *
- * Lynx SVG + stroke-dasharray 지원 시 CSS-only 애니메이션으로 전환 예정.
- */
-export const ProgressCircleRoot = (props) => {
-    const size = props.size ?? "40";
-    const tone = props.tone ?? "neutral";
-    const numSize = Number(size);
-    const isDeterminate = props.minValue !== undefined && props.maxValue !== undefined && props.value !== undefined;
-    const range = (props.maxValue ?? 1) - (props.minValue ?? 0);
-    const progress = isDeterminate
-        ? range === 0
-            ? 0
-            : ((props.value ?? 0) - (props.minValue ?? 0)) / range
-        : 0;
-    const classes = progressCircle({ tone, size });
-    const ctx = useMemo(() => ({ tone, numSize, isDeterminate, progress, classes }), [tone, numSize, isDeterminate, progress, classes]);
-    return (<ProgressCircleContext.Provider value={ctx}>
-      <view className={clsx(classes.root, props.className)} style={{ width: `${numSize}px`, height: `${numSize}px` }}>
-        {props.children}
+* Lynx에서 SVG를 사용할 수 없어 CSS clip-path 기반 pie sector로 구현.
+*
+* **Known Issues:**
+* - clip-path가 Lynx에서 animatable이 아니라 JS RAF로 매 프레임 SVG path 생성
+* - Lynx main thread에서 모듈 레벨 Map 미지원으로 인스턴스 간 RAF 공유 불가
+* - 다수 인스턴스 동시 렌더링 시 성능 저하 가능
+*
+* Lynx SVG + stroke-dasharray 지원 시 CSS-only 애니메이션으로 전환 예정.
+*/
+var ProgressCircleRoot = forwardRef((props, ref) => {
+	const [variantProps, otherProps] = progressCircle.splitVariantProps(props);
+	const { children, className, style, minValue, maxValue, value } = otherProps;
+	const size = variantProps.size ?? "40";
+	const tone = variantProps.tone ?? "neutral";
+	const numSize = Number(size);
+	const isDeterminate = minValue !== void 0 && maxValue !== void 0 && value !== void 0;
+	const range = (maxValue ?? 1) - (minValue ?? 0);
+	const progress = isDeterminate ? range === 0 ? 0 : ((value ?? 0) - (minValue ?? 0)) / range : 0;
+	const classes = progressCircle({
+		tone,
+		size
+	});
+	const ctx = useMemo(() => ({
+		numSize,
+		isDeterminate,
+		progress,
+		classes
+	}), [
+		numSize,
+		isDeterminate,
+		progress,
+		classes
+	]);
+	return <ProgressCircleContext.Provider value={ctx}>
+      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} style={{
+		...style,
+		width: `${numSize}px`,
+		height: `${numSize}px`
+	}}>
+        {children}
       </view>
-    </ProgressCircleContext.Provider>);
-};
-export const ProgressCircleRange = () => {
-    const { numSize, isDeterminate, progress, classes } = useProgressCircleCtx();
-    if (!isDeterminate) {
-        return <IndeterminateRange numSize={numSize} classes={classes}/>;
-    }
-    return <DeterminateRange numSize={numSize} progress={progress} classes={classes}/>;
+    </ProgressCircleContext.Provider>;
+});
+var ProgressCircleRange = () => {
+	const { numSize, isDeterminate, progress, classes } = useProgressCircleContext();
+	if (!isDeterminate) return <IndeterminateRange numSize={numSize} classes={classes} />;
+	return <DeterminateRange numSize={numSize} progress={progress} classes={classes} />;
 };
-function DeterminateRange({ numSize, progress, classes, }) {
-    const rangeRef = useMainThreadRef(null);
-    const startCapRef = useMainThreadRef(null);
-    const endCapRef = useMainThreadRef(null);
-    const prevProgressRef = useMainThreadRef(progress);
-    const cancelRef = useMainThreadRef(0);
-    const { halfSize, ringCenterR, capSize } = computeRingGeometry(numSize);
-    const initialAngle = progress * 360;
-    const initialClipPath = bgPieClipPath(numSize, initialAngle);
-    const initialEndRad = (initialAngle * Math.PI) / 180;
-    function startAnimation(newProgress) {
-        "main thread";
-        if (cancelRef.current) {
-            cancelAnimationFrame(cancelRef.current);
-            cancelRef.current = 0;
-        }
-        const from = prevProgressRef.current ?? 0;
-        prevProgressRef.current = newProgress;
-        if (from === newProgress)
-            return;
-        const rangeEl = rangeRef.current;
-        const endCapEl = endCapRef.current;
-        let startTs = 0;
-        function applyProgress(p) {
-            const angleDeg = p * 360;
-            const cp = pieClipPath(numSize, angleDeg);
-            if (cp) {
-                rangeEl?.setStyleProperty("clip-path", cp);
-            }
-            else {
-                rangeEl?.setStyleProperty("clip-path", "none");
-            }
-            const rad = (angleDeg * Math.PI) / 180;
-            endCapEl?.setStyleProperties({
-                left: `${halfSize + ringCenterR * Math.sin(rad) - capSize / 2}px`,
-                top: `${halfSize - ringCenterR * Math.cos(rad) - capSize / 2}px`,
-            });
-        }
-        function step(ts) {
-            if (!startTs)
-                startTs = Number(ts);
-            const elapsed = ts - startTs;
-            if (elapsed >= TRANSITION_DURATION) {
-                applyProgress(newProgress);
-                cancelRef.current = 0;
-                return;
-            }
-            const t = elapsed / TRANSITION_DURATION;
-            const eased = cubicBezier(t, 0, 0, 0.15, 1);
-            applyProgress(from + (newProgress - from) * eased);
-            cancelRef.current = requestAnimationFrame(step);
-        }
-        applyProgress(from);
-        cancelRef.current = requestAnimationFrame(step);
-    }
-    function cancelAnimation() {
-        "main thread";
-        if (cancelRef.current) {
-            cancelAnimationFrame(cancelRef.current);
-            cancelRef.current = 0;
-        }
-    }
-    useEffect(() => {
-        runOnMainThread(startAnimation)(progress);
-        return () => {
-            runOnMainThread(cancelAnimation)();
-        };
-    }, [progress, numSize]);
-    return (<>
+function DeterminateRange({ numSize, progress, classes }) {
+	const rangeRef = useMainThreadRef(null);
+	const startCapRef = useMainThreadRef(null);
+	const endCapRef = useMainThreadRef(null);
+	const prevProgressRef = useMainThreadRef(progress);
+	const cancelRef = useMainThreadRef(0);
+	const { halfSize, ringCenterR, capSize } = computeRingGeometry(numSize);
+	const initialAngle = progress * 360;
+	const initialClipPath = bgPieClipPath(numSize, initialAngle);
+	const initialEndRad = initialAngle * Math.PI / 180;
+	function startAnimation(newProgress) {
+		"main thread";
+		if (cancelRef.current) {
+			cancelAnimationFrame(cancelRef.current);
+			cancelRef.current = 0;
+		}
+		const from = prevProgressRef.current ?? 0;
+		prevProgressRef.current = newProgress;
+		if (from === newProgress) return;
+		const rangeEl = rangeRef.current;
+		const endCapEl = endCapRef.current;
+		let startTs = 0;
+		function applyProgress(p) {
+			const angleDeg = p * 360;
+			const cp = pieClipPath(numSize, angleDeg);
+			if (cp) rangeEl?.setStyleProperty("clip-path", cp);
+			else rangeEl?.setStyleProperty("clip-path", "none");
+			const rad = angleDeg * Math.PI / 180;
+			endCapEl?.setStyleProperties({
+				left: `${halfSize + ringCenterR * Math.sin(rad) - capSize / 2}px`,
+				top: `${halfSize - ringCenterR * Math.cos(rad) - capSize / 2}px`
+			});
+		}
+		function step(ts) {
+			if (!startTs) startTs = Number(ts);
+			const elapsed = ts - startTs;
+			if (elapsed >= TRANSITION_DURATION) {
+				applyProgress(newProgress);
+				cancelRef.current = 0;
+				return;
+			}
+			const eased = cubicBezier(elapsed / TRANSITION_DURATION, 0, 0, .15, 1);
+			applyProgress(from + (newProgress - from) * eased);
+			cancelRef.current = requestAnimationFrame(step);
+		}
+		applyProgress(from);
+		cancelRef.current = requestAnimationFrame(step);
+	}
+	function cancelAnimation() {
+		"main thread";
+		if (cancelRef.current) {
+			cancelAnimationFrame(cancelRef.current);
+			cancelRef.current = 0;
+		}
+	}
+	useEffect(() => {
+		runOnMainThread(startAnimation)(progress);
+		return () => {
+			runOnMainThread(cancelAnimation)();
+		};
+	}, [progress, numSize]);
+	return <>
       <view main-thread:ref={rangeRef} className={classes.range} style={{
-            position: "absolute",
-            width: `${numSize}px`,
-            height: `${numSize}px`,
-            borderRadius: "50%",
-            clipPath: initialClipPath,
-        }}/>
+		position: "absolute",
+		width: `${numSize}px`,
+		height: `${numSize}px`,
+		borderRadius: "50%",
+		clipPath: initialClipPath
+	}} />
       <view main-thread:ref={startCapRef} className={classes.cap} style={{
-            width: `${capSize}px`,
-            height: `${capSize}px`,
-            left: `${halfSize - capSize / 2}px`,
-            top: `${halfSize - ringCenterR - capSize / 2}px`,
-        }}/>
+		width: `${capSize}px`,
+		height: `${capSize}px`,
+		left: `${halfSize - capSize / 2}px`,
+		top: `${halfSize - ringCenterR - capSize / 2}px`
+	}} />
       <view main-thread:ref={endCapRef} className={classes.cap} style={{
-            width: `${capSize}px`,
-            height: `${capSize}px`,
-            left: `${halfSize + ringCenterR * Math.sin(initialEndRad) - capSize / 2}px`,
-            top: `${halfSize - ringCenterR * Math.cos(initialEndRad) - capSize / 2}px`,
-        }}/>
-    </>);
+		width: `${capSize}px`,
+		height: `${capSize}px`,
+		left: `${halfSize + ringCenterR * Math.sin(initialEndRad) - capSize / 2}px`,
+		top: `${halfSize - ringCenterR * Math.cos(initialEndRad) - capSize / 2}px`
+	}} />
+    </>;
 }
 function IndeterminateRange({ numSize, classes }) {
-    const containerRef = useMainThreadRef(null);
-    const rangeRef = useMainThreadRef(null);
-    const headCapRef = useMainThreadRef(null);
-    const tailCapRef = useMainThreadRef(null);
-    const rafIdRef = useMainThreadRef(0);
-    const { halfSize, ringCenterR, capSize } = computeRingGeometry(numSize);
-    function startLoop() {
-        "main thread";
-        const containerEl = containerRef.current;
-        const rangeEl = rangeRef.current;
-        const headCapEl = headCapRef.current;
-        let startTs = 0;
-        function tick(ts) {
-            if (!startTs)
-                startTs = Number(ts);
-            const elapsed = ts - startTs;
-            const t = (elapsed % INDETERMINATE_DURATION) / INDETERMINATE_DURATION;
-            const state = sampleIndeterminate(t);
-            containerEl?.setStyleProperty("transform", `rotate(${state.containerDeg}deg)`);
-            const clipPath = pieClipPath(numSize, state.arcLength);
-            if (clipPath) {
-                rangeEl?.setStyleProperty("clip-path", clipPath);
-            }
-            else {
-                rangeEl?.setStyleProperty("clip-path", "none");
-            }
-            const headRad = (state.arcLength * Math.PI) / 180;
-            headCapEl?.setStyleProperties({
-                left: `${halfSize + ringCenterR * Math.sin(headRad) - capSize / 2}px`,
-                top: `${halfSize - ringCenterR * Math.cos(headRad) - capSize / 2}px`,
-            });
-            rafIdRef.current = requestAnimationFrame(tick);
-        }
-        rafIdRef.current = requestAnimationFrame(tick);
-    }
-    function stopLoop() {
-        "main thread";
-        if (rafIdRef.current) {
-            cancelAnimationFrame(rafIdRef.current);
-            rafIdRef.current = 0;
-        }
-    }
-    useEffect(() => {
-        runOnMainThread(startLoop)();
-        return () => {
-            runOnMainThread(stopLoop)();
-        };
-    }, [numSize]);
-    const initialClipPath = 'path("M 0 0 Z")';
-    return (<view main-thread:ref={containerRef} style={{
-            position: "absolute",
-            width: `${numSize}px`,
-            height: `${numSize}px`,
-            transform: "rotate(0deg)",
-        }}>
+	const containerRef = useMainThreadRef(null);
+	const rangeRef = useMainThreadRef(null);
+	const headCapRef = useMainThreadRef(null);
+	const tailCapRef = useMainThreadRef(null);
+	const rafIdRef = useMainThreadRef(0);
+	const { halfSize, ringCenterR, capSize } = computeRingGeometry(numSize);
+	function startLoop() {
+		"main thread";
+		const containerEl = containerRef.current;
+		const rangeEl = rangeRef.current;
+		const headCapEl = headCapRef.current;
+		let startTs = 0;
+		function tick(ts) {
+			if (!startTs) startTs = Number(ts);
+			const state = sampleIndeterminate((ts - startTs) % INDETERMINATE_DURATION / INDETERMINATE_DURATION);
+			containerEl?.setStyleProperty("transform", `rotate(${state.containerDeg}deg)`);
+			const clipPath = pieClipPath(numSize, state.arcLength);
+			if (clipPath) rangeEl?.setStyleProperty("clip-path", clipPath);
+			else rangeEl?.setStyleProperty("clip-path", "none");
+			const headRad = state.arcLength * Math.PI / 180;
+			headCapEl?.setStyleProperties({
+				left: `${halfSize + ringCenterR * Math.sin(headRad) - capSize / 2}px`,
+				top: `${halfSize - ringCenterR * Math.cos(headRad) - capSize / 2}px`
+			});
+			rafIdRef.current = requestAnimationFrame(tick);
+		}
+		rafIdRef.current = requestAnimationFrame(tick);
+	}
+	function stopLoop() {
+		"main thread";
+		if (rafIdRef.current) {
+			cancelAnimationFrame(rafIdRef.current);
+			rafIdRef.current = 0;
+		}
+	}
+	useEffect(() => {
+		runOnMainThread(startLoop)();
+		return () => {
+			runOnMainThread(stopLoop)();
+		};
+	}, [numSize]);
+	const initialClipPath = "path(\"M 0 0 Z\")";
+	return <view main-thread:ref={containerRef} style={{
+		position: "absolute",
+		width: `${numSize}px`,
+		height: `${numSize}px`,
+		transform: "rotate(0deg)"
+	}}>
       <view main-thread:ref={rangeRef} className={classes.range} style={{
-            position: "absolute",
-            width: `${numSize}px`,
-            height: `${numSize}px`,
-            borderRadius: "50%",
-            clipPath: initialClipPath,
-        }}/>
+		position: "absolute",
+		width: `${numSize}px`,
+		height: `${numSize}px`,
+		borderRadius: "50%",
+		clipPath: initialClipPath
+	}} />
       <view main-thread:ref={tailCapRef} className={classes.cap} style={{
-            width: `${capSize}px`,
-            height: `${capSize}px`,
-            left: `${halfSize - capSize / 2}px`,
-            top: `${halfSize - ringCenterR - capSize / 2}px`,
-        }}/>
+		width: `${capSize}px`,
+		height: `${capSize}px`,
+		left: `${halfSize - capSize / 2}px`,
+		top: `${halfSize - ringCenterR - capSize / 2}px`
+	}} />
       <view main-thread:ref={headCapRef} className={classes.cap} style={{
-            width: `${capSize}px`,
-            height: `${capSize}px`,
-            left: `${halfSize - capSize / 2}px`,
-            top: `${halfSize - ringCenterR - capSize / 2}px`,
-        }}/>
-    </view>);
+		width: `${capSize}px`,
+		height: `${capSize}px`,
+		left: `${halfSize - capSize / 2}px`,
+		top: `${halfSize - ringCenterR - capSize / 2}px`
+	}} />
+    </view>;
 }
 ProgressCircleRoot.displayName = "ProgressCircleRoot";
 ProgressCircleRange.displayName = "ProgressCircleRange";
+//#endregion
+export { ProgressCircleRange, ProgressCircleRoot };

package/lib/components/ProgressCircle/ProgressCircle.namespace.d.ts

@@ -1,2 +1,2 @@
-export { ProgressCircleRange as Range, ProgressCircleRoot as Root, type ProgressCircleRootProps as RootProps, } from "./ProgressCircle";
+export { ProgressCircleRange as Range, ProgressCircleRoot as Root, type ProgressCircleRootProps as RootProps, } from './ProgressCircle';
 //# sourceMappingURL=ProgressCircle.namespace.d.ts.map

package/lib/components/ProgressCircle/ProgressCircle.namespace.js

@@ -1 +1,9 @@
-export { ProgressCircleRange as Range, ProgressCircleRoot as Root, } from "./ProgressCircle";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { ProgressCircleRange, ProgressCircleRoot } from "./ProgressCircle.jsx";
+//#region src/components/ProgressCircle/ProgressCircle.namespace.ts
+var ProgressCircle_namespace_exports = /* @__PURE__ */ __exportAll({
+	Range: () => ProgressCircleRange,
+	Root: () => ProgressCircleRoot
+});
+//#endregion
+export { ProgressCircle_namespace_exports };

package/lib/components/ProgressCircle/index.d.ts

@@ -1,3 +1,3 @@
-export { ProgressCircleRange, ProgressCircleRoot, type ProgressCircleRootProps, type ProgressCircleRootProps as ProgressCircleProps, type RootProps, } from "./ProgressCircle";
-export * as ProgressCircle from "./ProgressCircle.namespace";
+export { ProgressCircleRange, ProgressCircleRoot, type ProgressCircleRootProps, type ProgressCircleRootProps as ProgressCircleProps, type RootProps, } from './ProgressCircle';
+export * as ProgressCircle from './ProgressCircle.namespace';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/RadioGroup/RadioGroup.d.ts

@@ -1,50 +1,34 @@
-import * as React from "react";
-import { type CSSProperties, type ReactElement } from "react";
-import type { MainThread } from "@lynx-js/types";
-import type { RadioVariantProps } from "@seed-design/lynx-css/recipes/radio";
-import type { RadiomarkVariantProps } from "@seed-design/lynx-css/recipes/radiomark";
-export interface RadioGroupRootProps extends RadioVariantProps, Omit<RadiomarkVariantProps, "size" | "checked" | "disabled"> {
-    children?: React.ReactNode;
-    className?: string;
+import { ReactElement } from '@lynx-js/react';
+import { RadioVariantProps } from '@seed-design/lynx-css/recipes/radio';
+import { RadiomarkVariantProps } from '@seed-design/lynx-css/recipes/radiomark';
+import { LynxIconElementProps, LynxStyledElementProps } from '../../types';
+import * as React from "@lynx-js/react";
+export interface RadioGroupRootProps extends RadioVariantProps, Omit<RadiomarkVariantProps, "size" | "checked" | "disabled">, LynxStyledElementProps {
     value?: string;
     defaultValue?: string;
     disabled?: boolean;
     onValueChange?: (value: string) => void;
 }
 export declare const RadioGroupRoot: React.ForwardRefExoticComponent<RadioGroupRootProps & React.RefAttributes<unknown>>;
-export interface RadioGroupItemProps {
+export interface RadioGroupItemProps extends LynxStyledElementProps {
     value: string;
-    children?: React.ReactNode;
-    className?: string;
     disabled?: boolean;
 }
 export declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<unknown>>;
-export interface RadioGroupItemControlProps extends Pick<RadiomarkVariantProps, "tone"> {
-    children?: React.ReactNode;
-    className?: string;
+export interface RadioGroupItemControlProps extends Pick<RadiomarkVariantProps, "tone">, LynxStyledElementProps {
 }
 export declare const RadioGroupItemControl: React.ForwardRefExoticComponent<RadioGroupItemControlProps & React.RefAttributes<unknown>>;
-type IconElementProps = {
-    className?: string;
-    style?: CSSProperties;
-    ref?: React.Ref<MainThread.Element>;
-};
-export interface RadioGroupItemIndicatorProps {
+export interface RadioGroupItemIndicatorProps extends Pick<LynxStyledElementProps, "className" | "style"> {
     /** Icon rendered when not checked. Optional — falls back to default `<view>` dot when omitted. */
-    unchecked?: ReactElement<IconElementProps>;
+    unchecked?: ReactElement<LynxIconElementProps>;
     /** Icon rendered when the item is checked. Optional — falls back to default `<view>` dot when omitted. */
-    checked?: ReactElement<IconElementProps>;
-    className?: string;
-    style?: CSSProperties;
+    checked?: ReactElement<LynxIconElementProps>;
 }
 export declare function RadioGroupItemIndicator(props: RadioGroupItemIndicatorProps): React.JSX.Element;
 export declare namespace RadioGroupItemIndicator {
     var displayName: string;
 }
-export interface RadioGroupItemLabelProps {
-    children?: React.ReactNode;
-    className?: string;
+export interface RadioGroupItemLabelProps extends LynxStyledElementProps {
 }
 export declare const RadioGroupItemLabel: React.ForwardRefExoticComponent<RadioGroupItemLabelProps & React.RefAttributes<unknown>>;
-export {};
 //# sourceMappingURL=RadioGroup.d.ts.map