@seed-design/lynx-react 0.1.0

package/lib/components/Checkbox/Checkbox.jsx

@@ -0,0 +1,130 @@
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { InternalIcon } from "../Icon/Icon.jsx";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { isValidElement } from "@lynx-js/react";
+import { checkbox } from "@seed-design/lynx-css/recipes/checkbox";
+import { checkmark } from "@seed-design/lynx-css/recipes/checkmark";
+import { checkboxGroup } from "@seed-design/lynx-css/recipes/checkbox-group";
+//#region src/components/Checkbox/Checkbox.tsx
+var CheckboxContext = React.createContext(null);
+function useCheckboxContext(consumer) {
+	const ctx = React.useContext(CheckboxContext);
+	if (!ctx) throw new Error(`<${consumer}/> must be rendered inside <CheckboxRoot/>.`);
+	return ctx;
+}
+var CheckmarkControlContext = React.createContext(null);
+function useCheckmarkControlContext(consumer) {
+	const ctx = React.useContext(CheckmarkControlContext);
+	if (!ctx) throw new Error(`<${consumer}/> must be rendered inside <CheckboxControl/>.`);
+	return ctx;
+}
+var CheckboxRoot = React.forwardRef((props, ref) => {
+	const { children, className, checked: checkedProp, defaultChecked = false, indeterminate = false, disabled = false, onCheckedChange, ...restProps } = props;
+	const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, {
+		checkbox,
+		checkmark
+	});
+	const [checked, setChecked] = useControllableState({
+		value: checkedProp,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
+	const { pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: toggle
+	});
+	const rootClassName = checkbox({
+		...checkboxVariantProps,
+		disabled
+	}).root;
+	const contextValue = React.useMemo(() => ({
+		checked,
+		indeterminate,
+		disabled,
+		pressed,
+		checkboxVariantProps,
+		checkmarkVariantProps,
+		toggle
+	}), [
+		checked,
+		indeterminate,
+		disabled,
+		pressed,
+		checkboxVariantProps,
+		checkmarkVariantProps,
+		toggle
+	]);
+	return <CheckboxContext.Provider value={contextValue}>
+      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
+        {children}
+      </view>
+    </CheckboxContext.Provider>;
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+var CheckboxControl = React.forwardRef((props, ref) => {
+	const [variantProps, restProps] = checkmark.splitVariantProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const context = useCheckboxContext("CheckboxControl");
+	const checkmarkVariantProps = {
+		...context.checkmarkVariantProps,
+		...variantProps,
+		checked: context.checked,
+		disabled: context.disabled,
+		indeterminate: context.indeterminate,
+		pressed: context.pressed
+	};
+	const classes = checkmark(checkmarkVariantProps);
+	return <CheckmarkControlContext.Provider value={{
+		iconClassName: classes.icon,
+		checkmarkVariantProps
+	}}>
+      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+        {children}
+      </view>
+    </CheckmarkControlContext.Provider>;
+});
+CheckboxControl.displayName = "CheckboxControl";
+function CheckboxIndicator(props) {
+	const { unchecked, checked: checkedIcon, indeterminate: indeterminateIcon, className, style } = props;
+	const context = useCheckboxContext("CheckboxIndicator");
+	const { iconClassName, checkmarkVariantProps } = useCheckmarkControlContext("CheckboxIndicator");
+	if (process.env.NODE_ENV !== "production" && context.indeterminate && !indeterminateIcon) console.warn("[seed-design] CheckboxIndicator: `indeterminate` prop must be provided when the checkbox is in an indeterminate state.");
+	const icon = context.indeterminate ? indeterminateIcon : context.checked ? checkedIcon : unchecked;
+	if (!icon || !isValidElement(icon)) return null;
+	return <InternalIcon icon={icon} className={clsx(iconClassName, className)} style={style} deps={[
+		context.checked,
+		context.indeterminate,
+		context.disabled,
+		context.pressed,
+		checkmarkVariantProps.tone,
+		checkmarkVariantProps.variant,
+		checkmarkVariantProps.size
+	]} />;
+}
+CheckboxIndicator.displayName = "CheckboxIndicator";
+var CheckboxLabel = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useCheckboxContext("CheckboxLabel");
+	const labelClassName = checkbox({
+		...context.checkboxVariantProps,
+		disabled: context.disabled
+	}).label;
+	return <text {...ref ? { ref } : {}} className={clsx(labelClassName, className)} {...nativeProps}>
+      {children}
+    </text>;
+});
+CheckboxLabel.displayName = "CheckboxLabel";
+var CheckboxGroup = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = checkboxGroup();
+	return <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+      {children}
+    </view>;
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+//#endregion
+export { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot };

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

@@ -0,0 +1,2 @@
+export { CheckboxControl as Control, CheckboxGroup as Group, CheckboxIndicator as Indicator, CheckboxLabel as Label, CheckboxRoot as Root, type CheckboxControlProps as ControlProps, type CheckboxGroupProps as GroupProps, type CheckboxIndicatorProps as IndicatorProps, type CheckboxLabelProps as LabelProps, type CheckboxRootProps as RootProps, } from './Checkbox';
+//# sourceMappingURL=Checkbox.namespace.d.ts.map

package/lib/components/Checkbox/Checkbox.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,IAAI,OAAO,EAC1B,aAAa,IAAI,KAAK,EACtB,iBAAiB,IAAI,SAAS,EAC9B,aAAa,IAAI,KAAK,EACtB,YAAY,IAAI,IAAI,EACpB,KAAK,oBAAoB,IAAI,YAAY,EACzC,KAAK,kBAAkB,IAAI,UAAU,EACrC,KAAK,sBAAsB,IAAI,cAAc,EAC7C,KAAK,kBAAkB,IAAI,UAAU,EACrC,KAAK,iBAAiB,IAAI,SAAS,GACpC,MAAM,YAAY,CAAC"}

package/lib/components/Checkbox/Checkbox.namespace.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from "./Checkbox.jsx";
+//#region src/components/Checkbox/Checkbox.namespace.ts
+var Checkbox_namespace_exports = /* @__PURE__ */ __exportAll({
+	Control: () => CheckboxControl,
+	Group: () => CheckboxGroup,
+	Indicator: () => CheckboxIndicator,
+	Label: () => CheckboxLabel,
+	Root: () => CheckboxRoot
+});
+//#endregion
+export { Checkbox_namespace_exports };

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

@@ -0,0 +1,3 @@
+export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxGroup, type CheckboxRootProps, type CheckboxControlProps, type CheckboxIndicatorProps, type CheckboxLabelProps, type CheckboxGroupProps, } from './Checkbox';
+export * as Checkbox from './Checkbox.namespace';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAC"}

package/lib/components/Icon/Icon.d.ts

@@ -0,0 +1,37 @@
+import { DependencyList, ReactElement } from '@lynx-js/react';
+import { LynxIconElementProps, LynxStyledElementProps } from '../../types';
+import { StyleProps } from '../../utils/styled';
+import * as React from "@lynx-js/react";
+export type IconSlotName = "icon" | "prefixIcon" | "suffixIcon";
+interface IconSlotContextValue {
+    classNames?: Partial<Record<IconSlotName, string>>;
+    deps?: DependencyList;
+}
+export declare function IconRequired({ children, enabled, }: {
+    children: React.ReactNode;
+    enabled: boolean;
+}): React.JSX.Element;
+export declare function IconSlotProvider({ value, children, }: {
+    value: IconSlotContextValue;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function getIconSlotName(node: React.ReactNode): IconSlotName | null;
+export interface IconProps extends LynxStyledElementProps {
+    icon: ReactElement<LynxIconElementProps>;
+    size?: StyleProps["height"] | number;
+    color?: StyleProps["color"];
+}
+export interface PrefixIconProps extends IconProps {
+}
+export interface SuffixIconProps extends IconProps {
+}
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<unknown>>;
+export declare const PrefixIcon: React.ForwardRefExoticComponent<PrefixIconProps & React.RefAttributes<unknown>>;
+export declare const SuffixIcon: React.ForwardRefExoticComponent<SuffixIconProps & React.RefAttributes<unknown>>;
+export interface InternalIconProps extends LynxStyledElementProps {
+    icon: ReactElement<LynxIconElementProps>;
+    deps?: DependencyList;
+}
+export declare const InternalIcon: React.ForwardRefExoticComponent<InternalIconProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/lib/components/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,oBAAoB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC7F,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEnF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC;AAIhE,UAAU,oBAAoB;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACnD,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAWD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB,qBAyCA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAUD,wBAAgB,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,YAAY,GAAG,IAAI,CAI1E;AAID,MAAM,WAAW,SAAU,SAAQ,sBAAsB;IACvD,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AAErD,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AAqGrD,eAAO,MAAM,IAAI,2EAA8D,CAAC;AAChF,eAAO,MAAM,UAAU,iFAItB,CAAC;AACF,eAAO,MAAM,UAAU,iFAItB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,mFA2BvB,CAAC"}

package/lib/components/Icon/Icon.jsx

@@ -0,0 +1,143 @@
+import { handleColor, handleDimension } from "../../utils/styled.js";
+import { useIconColor } from "../../hooks/useIconColor.js";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { cloneElement, isValidElement, useMainThreadRef } from "@lynx-js/react";
+//#region src/components/Icon/Icon.tsx
+var IconSlotContext = React.createContext(null);
+var IconRequiredContext = React.createContext(null);
+function IconRequired({ children, enabled }) {
+	const registeredCountRef = React.useRef(0);
+	const parentContext = React.useContext(IconRequiredContext);
+	const register = React.useCallback(() => {
+		registeredCountRef.current += 1;
+		if (process.env.NODE_ENV !== "production" && registeredCountRef.current > 1) throw new Error("Icon-only Component must render only one <Icon /> under children. Check if you are rendering multiple <Icon />.");
+	}, []);
+	const unregister = React.useCallback(() => {
+		registeredCountRef.current = Math.max(0, registeredCountRef.current - 1);
+	}, []);
+	React.useLayoutEffect(() => {
+		if (!enabled) return;
+		if (process.env.NODE_ENV !== "production") {
+			if (parentContext) throw new Error("Icon-only Component must not be nested within another Icon-Only. Check if you are using Icon-Only inside another Icon-Only.");
+			if (registeredCountRef.current === 0) throw new Error("Icon-only Component must render <Icon /> as a child. Check if you are using raw icon element instead of <Icon icon={} />.");
+		}
+	}, [enabled, parentContext]);
+	const value = React.useMemo(() => {
+		if (!enabled) return parentContext ?? null;
+		return {
+			register,
+			unregister
+		};
+	}, [
+		enabled,
+		parentContext,
+		register,
+		unregister
+	]);
+	return <IconRequiredContext.Provider value={value}>{children}</IconRequiredContext.Provider>;
+}
+function IconSlotProvider({ value, children }) {
+	return <IconSlotContext.Provider value={value}>{children}</IconSlotContext.Provider>;
+}
+var iconSlotMarker = Symbol.for("@seed-design/lynx-react/icon-slot");
+function getIconSlotName(node) {
+	if (!isValidElement(node)) return null;
+	return node.type[iconSlotMarker] ?? null;
+}
+function mergeWrapperStyle({ size, color, style }) {
+	const dimension = handleDimension(size);
+	const resolvedColor = handleColor(color);
+	if (dimension == null && resolvedColor == null) return style;
+	return {
+		...dimension != null ? {
+			width: dimension,
+			height: dimension
+		} : {},
+		...resolvedColor != null ? { color: resolvedColor } : {},
+		...style
+	};
+}
+function getStyleColor(style) {
+	return style?.color;
+}
+var IconSlotBase = React.forwardRef((props, ref) => {
+	const { icon, slot, baseClassName, className, style, size, color, children: _children, ...nativeProps } = props;
+	const context = React.useContext(IconSlotContext);
+	const iconRequiredContext = React.useContext(IconRequiredContext);
+	const sourceRef = useMainThreadRef(null);
+	const slotClassName = slot != null ? context?.classNames?.[slot] : void 0;
+	const iconColor = useIconColor([
+		baseClassName,
+		slotClassName,
+		className,
+		size,
+		color,
+		getStyleColor(style),
+		...context?.deps ?? []
+	], { sourceRef });
+	const hasValidIcon = isValidElement(icon);
+	React.useLayoutEffect(() => {
+		if (slot !== "icon" || !hasValidIcon) return;
+		iconRequiredContext?.register();
+		return () => {
+			iconRequiredContext?.unregister();
+		};
+	}, [
+		hasValidIcon,
+		iconRequiredContext,
+		slot
+	]);
+	if (!hasValidIcon) return null;
+	return <view {...ref ? { ref } : {}} {...nativeProps} main-thread:ref={sourceRef} className={clsx(baseClassName, slotClassName, className)} style={mergeWrapperStyle({
+		size,
+		color,
+		style
+	})}>
+      {cloneElement(icon, {
+		...iconColor,
+		className: icon.props.className,
+		style: {
+			...icon.props.style,
+			width: "100%",
+			height: "100%"
+		}
+	})}
+    </view>;
+});
+IconSlotBase.displayName = "IconSlotBase";
+function createIconComponent(displayName, slot, baseClassName) {
+	const Component = React.forwardRef((props, ref) => {
+		return <IconSlotBase ref={ref} slot={slot} baseClassName={baseClassName} {...props} />;
+	});
+	Component.displayName = displayName;
+	Component[iconSlotMarker] = slot;
+	return Component;
+}
+var Icon = createIconComponent("Icon", "icon", "seed-icon");
+var PrefixIcon = createIconComponent("PrefixIcon", "prefixIcon", "seed-prefix-icon");
+var SuffixIcon = createIconComponent("SuffixIcon", "suffixIcon", "seed-suffix-icon");
+var InternalIcon = React.forwardRef((props, ref) => {
+	const { icon, deps = [], className, style, children: _children, ...nativeProps } = props;
+	const sourceRef = useMainThreadRef(null);
+	const iconColor = useIconColor([
+		className,
+		getStyleColor(style),
+		...deps ?? []
+	], { sourceRef });
+	if (!isValidElement(icon)) return null;
+	return <view {...ref ? { ref } : {}} {...nativeProps} main-thread:ref={sourceRef} className={className} style={style}>
+      {cloneElement(icon, {
+		...iconColor,
+		className: icon.props.className,
+		style: {
+			...icon.props.style,
+			width: "100%",
+			height: "100%"
+		}
+	})}
+    </view>;
+});
+InternalIcon.displayName = "InternalIcon";
+//#endregion
+export { Icon, IconRequired, IconSlotProvider, InternalIcon, PrefixIcon, SuffixIcon, getIconSlotName };

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

@@ -0,0 +1,2 @@
+export { Icon, PrefixIcon, SuffixIcon, type IconProps, type PrefixIconProps, type SuffixIconProps, } from './Icon';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,KAAK,SAAS,EACd,KAAK,eAAe,EACpB,KAAK,eAAe,GACrB,MAAM,QAAQ,CAAC"}

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

@@ -0,0 +1,25 @@
+import { ProgressCircleVariantProps } from '@seed-design/lynx-css/recipes/progress-circle';
+import { LynxStyledElementProps } from '../../types';
+import type * as React from "@lynx-js/react";
+export interface ProgressCircleRootProps extends ProgressCircleVariantProps, LynxStyledElementProps {
+    minValue?: number;
+    maxValue?: number;
+    value?: number;
+}
+export type RootProps = ProgressCircleRootProps;
+/**
+ * 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 declare const ProgressCircleRoot: React.ForwardRefExoticComponent<ProgressCircleRootProps & React.RefAttributes<unknown>>;
+export declare const ProgressCircleRange: {
+    (): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ProgressCircle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAa7C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAChG,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AA2GvE,MAAM,WAAW,uBACf,SAAQ,0BAA0B,EAChC,sBAAsB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,uBAAuB,CAAC;AAIhD;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,yFA8B7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;CAQ/B,CAAC"}

package/lib/components/ProgressCircle/ProgressCircle.jsx

@@ -0,0 +1,281 @@
+import { progressCircle } from "@seed-design/lynx-css/recipes/progress-circle";
+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;
+}
+function computeRingGeometry(numSize) {
+	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 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 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;
+	return (((1 - cy - by) * currentT + by) * currentT + cy) * currentT;
+}
+function pieClipPath(size, angleDeg) {
+	"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, .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
+	};
+}
+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 애니메이션으로 전환 예정.
+*/
+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>;
+});
+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 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
+	}} />
+      <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`
+	}} />
+      <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`
+	}} />
+    </>;
+}
+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 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
+	}} />
+      <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`
+	}} />
+      <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>;
+}
+ProgressCircleRoot.displayName = "ProgressCircleRoot";
+ProgressCircleRange.displayName = "ProgressCircleRange";
+//#endregion
+export { ProgressCircleRange, ProgressCircleRoot };

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

@@ -0,0 +1,2 @@
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,IAAI,KAAK,EAC5B,kBAAkB,IAAI,IAAI,EAC1B,KAAK,uBAAuB,IAAI,SAAS,GAC1C,MAAM,kBAAkB,CAAC"}