@seed-design/lynx-react 0.4.0 → 0.4.1

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

@@ -1 +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"}
+{"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;AA2IvE,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

@@ -18,6 +18,34 @@ function computeRingGeometry(numSize) {
 		capSize: halfSize - innerR
 	};
 }
+function bgCubicBezier(rawT, x1, y1, x2, y2) {
+	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 bgSampleIndeterminate(t) {
+	const containerEased = bgCubicBezier(t, .35, .25, .65, .75);
+	const headEased = bgCubicBezier(t, .35, 0, .65, 1);
+	const tailEased = bgCubicBezier(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
+	};
+}
 function bgPieClipPath(size, angleDeg) {
 	if (angleDeg >= 360) return void 0;
 	if (angleDeg <= 0) return "path(\"M 0 0 Z\")";
@@ -72,6 +100,7 @@ function sampleIndeterminate(t) {
 	};
 }
 var INDETERMINATE_DURATION = 1200;
+var INDETERMINATE_INITIAL_PHASE = 1 / 6;
 var TRANSITION_DURATION = 300;
 /**
 * Lynx에서 SVG를 사용할 수 없어 CSS clip-path 기반 pie sector로 구현.
@@ -220,7 +249,7 @@ function IndeterminateRange({ numSize, classes }) {
 		let startTs = 0;
 		function tick(ts) {
 			if (!startTs) startTs = Number(ts);
-			const state = sampleIndeterminate((ts - startTs) % INDETERMINATE_DURATION / INDETERMINATE_DURATION);
+			const state = sampleIndeterminate((ts - startTs + INDETERMINATE_DURATION * INDETERMINATE_INITIAL_PHASE) % INDETERMINATE_DURATION / INDETERMINATE_DURATION);
 			containerEl?.setStyleProperty("transform", `rotate(${state.containerDeg}deg)`);
 			const clipPath = pieClipPath(numSize, state.arcLength);
 			if (clipPath) rangeEl?.setStyleProperty("clip-path", clipPath);
@@ -247,12 +276,14 @@ function IndeterminateRange({ numSize, classes }) {
 			runOnMainThread(stopLoop)();
 		};
 	}, [numSize]);
-	const initialClipPath = "path(\"M 0 0 Z\")";
+	const initialState = bgSampleIndeterminate(INDETERMINATE_INITIAL_PHASE);
+	const initialClipPath = bgPieClipPath(numSize, initialState.arcLength);
+	const initialHeadRad = initialState.arcLength * Math.PI / 180;
 	return <view main-thread:ref={containerRef} style={{
 		position: "absolute",
 		width: `${numSize}px`,
 		height: `${numSize}px`,
-		transform: "rotate(0deg)"
+		transform: `rotate(${initialState.containerDeg}deg)`
 	}}>
       <view main-thread:ref={rangeRef} className={classes.range} style={{
 		position: "absolute",
@@ -270,8 +301,8 @@ function IndeterminateRange({ numSize, classes }) {
       <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`
+		left: `${halfSize + ringCenterR * Math.sin(initialHeadRad) - capSize / 2}px`,
+		top: `${halfSize - ringCenterR * Math.cos(initialHeadRad) - capSize / 2}px`
 	}} />
     </view>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,KAAK,eAAe,GAChB,SAAS,GACT,eAAe,GACf,YAAY,GACZ,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,CAAC;AAEjB,UAAU,cAAe,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACrF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC;IACvE,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AAElD,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AA0ClD,eAAO,MAAM,MAAM,6EAIjB,CAAC;AAIH,eAAO,MAAM,MAAM,6EAIjB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,KAAK,eAAe,GAChB,SAAS,GACT,eAAe,GACf,YAAY,GACZ,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,CAAC;AAEjB,UAAU,cAAe,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACrF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC;IACvE,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AAElD,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AAwDlD,eAAO,MAAM,MAAM,6EAIjB,CAAC;AAIH,eAAO,MAAM,MAAM,6EAIjB,CAAC"}

package/lib/components/Stack/Stack.jsx

@@ -14,11 +14,20 @@ function getStackProps(props) {
 	};
 }
 function useStackStyleProps(props, flexDirection) {
-	return useStyleProps({
+	const stackStyleProps = useStyleProps({
 		display: "flex",
 		flexDirection,
 		...getStackProps(props)
 	});
+	const { gap, ...style } = stackStyleProps.style;
+	if (gap == null) return stackStyleProps;
+	return {
+		...stackStyleProps,
+		style: {
+			[flexDirection === "column" ? "rowGap" : "columnGap"]: gap,
+			...style
+		}
+	};
 }
 function renderStackView(stackStyleProps, ref) {
 	const { style, restProps } = stackStyleProps;

package/lib/components/TagGroup/TagGroup.d.ts

@@ -14,7 +14,8 @@ import * as React from "@lynx-js/react";
  */
 export interface TagGroupRootProps extends TagGroupVariantProps, TagGroupItemVariantProps, LynxStyledElementProps {
     /**
-     * children 사이에 삽입되는 구분자. 기본값 `" · "`.
+     * children 사이에 삽입되는 구분자. 기본값 `"·"`.
+     * 문자열을 전달하면 앞뒤 공백을 제거합니다.
      */
     separator?: React.ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAIpF,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOpE;;;;;;;;GAQG;AACH,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,sBAAsB;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mFAiCvB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,sBAAsB;CAAG;AAE7B,eAAO,MAAM,YAAY,mFAmBvB,CAAC;AAKH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;CAAG;AAEzE,eAAO,MAAM,iBAAiB,wFAY5B,CAAC"}
+{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAIpF,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOpE;;;;;;;;GAQG;AACH,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,sBAAsB;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mFAkCvB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,sBAAsB;CAAG;AAE7B,eAAO,MAAM,YAAY,mFAmBvB,CAAC;AAKH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;CAAG;AAEzE,eAAO,MAAM,iBAAiB,wFAY5B,CAAC"}

package/lib/components/TagGroup/TagGroup.jsx

@@ -15,13 +15,14 @@ var TagGroupRoot = React.forwardRef((props, ref) => {
 	});
 	const { children, className, separator = " · ", ...nativeProps } = otherProps;
 	const classes = tagGroup(tagGroupVariantProps);
+	const normalizedSeparator = typeof separator === "string" ? separator.trim() : separator;
 	const visibleChildren = toArray(children);
 	return <PropsProvider value={tagGroupItemVariantProps}>
       <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
         {visibleChildren.map((child, index) => {
 		if (index === 0) return child;
 		return <view key={child.key ?? index} className={classes.separatorWrapper}>
-              <text className={classes.separator}>{separator}</text>
+              <text className={classes.separator}>{normalizedSeparator}</text>
               {child}
             </view>;
 	})}

package/lib/components/TextField/TextField.d.ts

@@ -44,13 +44,22 @@ export interface TextFieldInputProps extends NativeTextControlProps {
     maxlength?: NativeInputProps["maxlength"];
     readonly?: NativeInputProps["readonly"];
     disabled?: NativeInputProps["disabled"];
+    /**
+     * 포커스할 때 시스템 키보드를 표시한다.
+     * `undefined`가 native attribute로 전달되지 않도록 `true`를 명시적으로 적용한다.
+     * @defaultValue true
+     */
     "show-soft-input-on-focus"?: NativeInputProps["show-soft-input-on-focus"];
     "input-filter"?: NativeInputProps["input-filter"];
     type?: NativeInputProps["type"];
     "ios-auto-correct"?: NativeInputProps["ios-auto-correct"];
     "ios-spell-check"?: NativeInputProps["ios-spell-check"];
     "android-fullscreen-mode"?: NativeInputProps["android-fullscreen-mode"];
-    /** Android host window의 soft input mode를 지정한다. */
+    /**
+     * Android host window의 soft input mode를 지정한다.
+     * `undefined`가 native attribute로 전달되지 않도록 `"unspecified"`를 명시적으로 적용한다.
+     * @defaultValue "unspecified"
+     */
     "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
     bindfocus?: NativeInputProps["bindfocus"];
     bindblur?: NativeInputProps["bindblur"];
@@ -80,6 +89,11 @@ export interface TextFieldTextareaProps extends NativeTextControlProps {
     "line-spacing"?: NativeTextareaProps["line-spacing"];
     readonly?: NativeTextareaProps["readonly"];
     disabled?: NativeTextareaProps["disabled"];
+    /**
+     * 포커스할 때 시스템 키보드를 표시한다.
+     * `undefined`가 native attribute로 전달되지 않도록 `true`를 명시적으로 적용한다.
+     * @defaultValue true
+     */
     "show-soft-input-on-focus"?: NativeTextareaProps["show-soft-input-on-focus"];
     "input-filter"?: NativeTextareaProps["input-filter"];
     "enable-scroll-bar"?: NativeTextareaProps["enable-scroll-bar"];
@@ -88,7 +102,11 @@ export interface TextFieldTextareaProps extends NativeTextControlProps {
     "ios-spell-check"?: NativeTextareaProps["ios-spell-check"];
     /** Android의 fullscreen extract input을 활성화한다. @defaultValue false */
     "android-fullscreen-mode"?: NativeTextareaProps["android-fullscreen-mode"];
-    /** Android host window의 soft input mode를 지정한다. */
+    /**
+     * Android host window의 soft input mode를 지정한다.
+     * `undefined`가 native attribute로 전달되지 않도록 `"unspecified"`를 명시적으로 적용한다.
+     * @defaultValue "unspecified"
+     */
     "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
     bindfocus?: NativeTextareaProps["bindfocus"];
     bindblur?: NativeTextareaProps["bindblur"];

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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"}

package/lib/components/TextField/TextField.jsx

@@ -9,8 +9,14 @@ import * as React from "@lynx-js/react";
 import { textInput as textInput$1 } from "@seed-design/lynx-css/recipes/text-input";
 //#region src/components/TextField/TextField.tsx
 var ANDROID_TEXTAREA_DEFAULT_LINE_SPACING = "3.2px";
+function getRuntimePlatform() {
+	return (globalThis.SystemInfo ?? (typeof SystemInfo === "undefined" ? void 0 : SystemInfo))?.platform;
+}
 function isAndroidRuntime() {
-	return (globalThis.SystemInfo ?? (typeof SystemInfo === "undefined" ? void 0 : SystemInfo))?.platform === "Android";
+	return getRuntimePlatform() === "Android";
+}
+function isIOSRuntime() {
+	return getRuntimePlatform() === "iOS";
 }
 var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(textInput$1);
 var TextFieldRoot = React.forwardRef((props, forwardedRef) => {
@@ -340,7 +346,7 @@ var TextFieldInput = React.forwardRef((props, ref) => {
         {displayValue}
       </text>;
 	}
-	return <input {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus} android-set-soft-input-mode={androidSetSoftInputMode} name={name ?? control.context.name} maxlength={resolvedMaxLength} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} {...nativeProps} />;
+	return <input {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={showSoftInputOnFocus ?? true} android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"} name={name ?? control.context.name} {...resolvedMaxLength === void 0 ? {} : { maxlength: resolvedMaxLength }} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} {...nativeProps} />;
 });
 TextFieldInput.displayName = "TextFieldInput";
 var TextFieldTextarea = React.forwardRef((props, ref) => {
@@ -356,17 +362,27 @@ var TextFieldTextarea = React.forwardRef((props, ref) => {
 	});
 	const resolvedMaxLength = useResolvedNativeMaxLength(maxlength, control.nativeInsertionMaxLength);
 	const isAndroid = isAndroidRuntime();
+	const usesIOSAutoresizeWrapper = autoresize && isIOSRuntime();
 	const resolvedLineSpacing = lineSpacing !== void 0 ? lineSpacing : isAndroid ? ANDROID_TEXTAREA_DEFAULT_LINE_SPACING : void 0;
 	const handleSelection = React.useCallback((event) => {
 		"background only";
 		control.handleSelectionChange(event.detail);
 		bindselection?.(event);
 	}, [bindselection, control.handleSelectionChange]);
+	const handleLayoutChange = React.useCallback((event) => {
+		"background only";
+		if (autoresize) control.notifyLayoutChanged();
+		bindlayoutchange?.(event);
+	}, [
+		autoresize,
+		bindlayoutchange,
+		control.notifyLayoutChanged
+	]);
 	const handleTextareaRootTap = React.useCallback((event) => {
 		"background only";
-		if (event.target.uid !== event.currentTarget.uid) return;
+		if (control.disabled || event.target.uid !== event.currentTarget.uid) return;
 		control.focusNativeControl();
-	}, [control.focusNativeControl]);
+	}, [control.disabled, control.focusNativeControl]);
 	if (control.readOnly) {
 		const value = control.context.value;
 		const isPlaceholder = value === "";
@@ -379,9 +395,9 @@ var TextFieldTextarea = React.forwardRef((props, ref) => {
           {isPlaceholder ? props.placeholder : value}
         </text>;
 	}
-	const textarea = <textarea {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, classes.textareaValue, autoresize ? classes.textareaNativeAutoresize : classes.textareaFixed, autoresize && isAndroid && classes.textareaAndroidAutoresize, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus} bounces={bounces ?? (autoresize ? false : void 0)} line-spacing={resolvedLineSpacing} android-fullscreen-mode={androidFullscreenMode ?? false} android-set-soft-input-mode={androidSetSoftInputMode} name={name ?? control.context.name} maxlength={resolvedMaxLength} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} bindlayoutchange={bindlayoutchange} {...nativeProps} />;
-	if (!autoresize) return textarea;
-	return <view className={clsx(classes.textareaRoot, !isAndroid && classes.textareaAutoresizeRoot)} bindtap={handleTextareaRootTap} bindlayoutchange={control.notifyLayoutChanged}>
+	const textarea = <textarea {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, classes.textareaValue, !autoresize && classes.textareaFixed, usesIOSAutoresizeWrapper && classes.textareaNativeAutoresize, autoresize && !usesIOSAutoresizeWrapper && classes.textareaAndroidAutoresize, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={showSoftInputOnFocus ?? true} bounces={bounces ?? (autoresize ? false : void 0)} line-spacing={resolvedLineSpacing} android-fullscreen-mode={androidFullscreenMode ?? false} android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"} name={name ?? control.context.name} {...resolvedMaxLength === void 0 ? {} : { maxlength: resolvedMaxLength }} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} bindlayoutchange={usesIOSAutoresizeWrapper ? bindlayoutchange : handleLayoutChange} {...nativeProps} />;
+	if (!usesIOSAutoresizeWrapper) return textarea;
+	return <view ignore-focus={true} className={clsx(classes.textareaRoot, classes.textareaAutoresizeRoot)} bindtap={handleTextareaRootTap} bindlayoutchange={control.notifyLayoutChanged}>
         {textarea}
       </view>;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -34,12 +34,12 @@
   "peerDependencies": {
     "@lynx-js/react": ">=0.117.0",
     "@lynx-js/types": ">=3.7.0",
-    "@seed-design/lynx-css": "0.0.0 || >=0.1.0 <1.0.0"
+    "@seed-design/lynx-css": "0.0.0 || >=0.8.0 <1.0.0"
   },
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.8.0",
+    "@seed-design/lynx-css": "0.8.1",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/components/ProgressCircle/ProgressCircle.test.tsx

@@ -0,0 +1,58 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { ProgressCircle } from "./index";
+
+vi.mock("@lynx-js/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@lynx-js/react")>();
+
+  return {
+    ...actual,
+    runOnMainThread: () => () => undefined,
+  };
+});
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+describe("ProgressCircle", () => {
+  it("renders a visible indeterminate range before the main-thread animation starts", () => {
+    render(
+      <ProgressCircle.Root>
+        <ProgressCircle.Range />
+      </ProgressCircle.Root>,
+    );
+
+    const root = getRenderedRoot();
+    const range = root.querySelector<HTMLElement>(".seed-progress-circle__range");
+    const caps = root.querySelectorAll<HTMLElement>(".seed-progress-circle__cap");
+    const animationContainer = range?.parentElement;
+
+    expect(range).toBeInTheDocument();
+    expect(animationContainer?.style.transform).not.toBe("rotate(0deg)");
+    expect(range?.style.clipPath).toMatch(/^path\("M 20 20 L 20 -1 A 21 21/);
+    expect(caps).toHaveLength(2);
+    expect(caps[1]?.style.left).not.toBe(caps[0]?.style.left);
+    expect(caps[1]?.style.top).not.toBe(caps[0]?.style.top);
+  });
+
+  it("keeps the determinate range at the requested initial value", () => {
+    render(
+      <ProgressCircle.Root minValue={0} maxValue={100} value={40}>
+        <ProgressCircle.Range />
+      </ProgressCircle.Root>,
+    );
+
+    const range = getRenderedRoot().querySelector<HTMLElement>(".seed-progress-circle__range");
+
+    expect(range?.style.clipPath).toMatch(/^path\("M 20 20 L 20 -1 A 21 21/);
+  });
+});

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -45,6 +45,37 @@ function computeRingGeometry(numSize: number) {
   return { halfSize, innerR, ringCenterR, capSize };
 }
 
+function bgCubicBezier(rawT: number, x1: number, y1: number, x2: number, y2: number): number {
+  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;
+}
+
+function bgSampleIndeterminate(t: number) {
+  const containerEased = bgCubicBezier(t, 0.35, 0.25, 0.65, 0.75);
+  const headEased = bgCubicBezier(t, 0.35, 0, 0.65, 1);
+  const tailEased = bgCubicBezier(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 };
+}
+
 function bgPieClipPath(size: number, angleDeg: number): string | undefined {
   if (angleDeg >= 360) return undefined;
   if (angleDeg <= 0) return 'path("M 0 0 Z")';
@@ -113,6 +144,7 @@ function sampleIndeterminate(t: number) {
 // --- Animation constants ---
 
 const INDETERMINATE_DURATION = 1200;
+const INDETERMINATE_INITIAL_PHASE = 1 / 6;
 const TRANSITION_DURATION = 300;
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -335,7 +367,10 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
       if (!startTs) startTs = Number(ts);
 
       const elapsed = ts - startTs;
-      const t = (elapsed % INDETERMINATE_DURATION) / INDETERMINATE_DURATION;
+      const t =
+        ((elapsed + INDETERMINATE_DURATION * INDETERMINATE_INITIAL_PHASE) %
+          INDETERMINATE_DURATION) /
+        INDETERMINATE_DURATION;
       const state = sampleIndeterminate(t);
 
       containerEl?.setStyleProperty("transform", `rotate(${state.containerDeg}deg)`);
@@ -373,7 +408,9 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
     };
   }, [numSize]);
 
-  const initialClipPath = 'path("M 0 0 Z")';
+  const initialState = bgSampleIndeterminate(INDETERMINATE_INITIAL_PHASE);
+  const initialClipPath = bgPieClipPath(numSize, initialState.arcLength);
+  const initialHeadRad = (initialState.arcLength * Math.PI) / 180;
 
   return (
     <view
@@ -382,7 +419,7 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
         position: "absolute",
         width: `${numSize}px`,
         height: `${numSize}px`,
-        transform: "rotate(0deg)",
+        transform: `rotate(${initialState.containerDeg}deg)`,
       }}
     >
       <view
@@ -412,8 +449,8 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
         style={{
           width: `${capSize}px`,
           height: `${capSize}px`,
-          left: `${halfSize - capSize / 2}px`,
-          top: `${halfSize - ringCenterR - capSize / 2}px`,
+          left: `${halfSize + ringCenterR * Math.sin(initialHeadRad) - capSize / 2}px`,
+          top: `${halfSize - ringCenterR * Math.cos(initialHeadRad) - capSize / 2}px`,
         }}
       />
     </view>

package/src/components/Stack/Stack.test.tsx

@@ -0,0 +1,67 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { HStack, VStack } from "./Stack";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  const stack = root.querySelector<HTMLElement>("view");
+
+  if (!stack) {
+    throw new Error("Expected Stack root view to exist.");
+  }
+
+  return stack;
+}
+
+describe("Stack", () => {
+  it("maps a VStack gap token to row-gap", () => {
+    render(<VStack gap="x3" />);
+
+    expect(getRenderedRoot()).toHaveStyle({
+      rowGap: "var(--seed-dimension-x3)",
+    });
+    expect(getRenderedRoot().style.getPropertyValue("gap")).toBe("");
+    expect(getRenderedRoot().style.getPropertyValue("column-gap")).toBe("");
+  });
+
+  it("maps an HStack gap token to column-gap", () => {
+    render(<HStack gap="x4" />);
+
+    expect(getRenderedRoot()).toHaveStyle({
+      columnGap: "var(--seed-dimension-x4)",
+    });
+    expect(getRenderedRoot().style.getPropertyValue("gap")).toBe("");
+    expect(getRenderedRoot().style.getPropertyValue("row-gap")).toBe("");
+  });
+
+  it("keeps a numeric zero gap value", () => {
+    render(<VStack gap={0} />);
+
+    expect(getRenderedRoot()).toHaveStyle({ rowGap: "0px" });
+  });
+
+  it("keeps an arbitrary string gap value", () => {
+    render(<HStack gap="1.5rem" />);
+
+    expect(getRenderedRoot()).toHaveStyle({ columnGap: "1.5rem" });
+  });
+
+  it("keeps style gap precedence over the gap prop", () => {
+    render(<VStack gap="x3" style={{ gap: "20px" }} />);
+
+    expect(getRenderedRoot()).toHaveStyle({ rowGap: "20px" });
+  });
+
+  it("keeps an axis longhand in style above the gap prop", () => {
+    render(<VStack gap="x3" style={{ rowGap: "24px" }} />);
+
+    expect(getRenderedRoot()).toHaveStyle({ rowGap: "24px" });
+  });
+});

package/src/components/Stack/Stack.tsx

@@ -54,11 +54,25 @@ function getStackProps(props: StackProps) {
 }
 
 function useStackStyleProps(props: StackProps, flexDirection: "column" | "row") {
-  return useStyleProps({
+  const stackStyleProps = useStyleProps({
     display: "flex",
     flexDirection,
     ...getStackProps(props),
   });
+  // Lynx의 gap 단축 속성 파서는 var(...)를 0px로 확정하므로 축별 longhand를 사용합니다.
+  const { gap, ...style } = stackStyleProps.style;
+
+  if (gap == null) {
+    return stackStyleProps;
+  }
+
+  return {
+    ...stackStyleProps,
+    style: {
+      [flexDirection === "column" ? "rowGap" : "columnGap"]: gap,
+      ...style,
+    },
+  };
 }
 
 function renderStackView(

package/src/components/TagGroup/TagGroup.test.tsx

@@ -0,0 +1,73 @@
+import "@testing-library/jest-dom";
+import type { ReactNode } from "@lynx-js/react";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import * as TagGroup from "./TagGroup.namespace";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function renderTagGroup(separator?: ReactNode) {
+  render(
+    <TagGroup.Root separator={separator}>
+      <TagGroup.Item>
+        <TagGroup.ItemLabel>첫 번째</TagGroup.ItemLabel>
+      </TagGroup.Item>
+      <TagGroup.Item>
+        <TagGroup.ItemLabel>두 번째</TagGroup.ItemLabel>
+      </TagGroup.Item>
+      <TagGroup.Item>
+        <TagGroup.ItemLabel>세 번째</TagGroup.ItemLabel>
+      </TagGroup.Item>
+    </TagGroup.Root>,
+  );
+}
+
+describe("TagGroup", () => {
+  it("trims surrounding whitespace from the default string separator", () => {
+    renderTagGroup();
+
+    const separators = getRenderedRoot().querySelectorAll(".seed-tag-group__separator");
+
+    expect(separators).toHaveLength(2);
+    expect(Array.from(separators, (separator) => separator.textContent)).toEqual(["·", "·"]);
+  });
+
+  it("trims surrounding whitespace from a custom string separator", () => {
+    renderTagGroup(" \n / \t ");
+
+    const separators = getRenderedRoot().querySelectorAll(".seed-tag-group__separator");
+
+    expect(Array.from(separators, (separator) => separator.textContent)).toEqual(["/", "/"]);
+  });
+
+  it("preserves a non-string separator node", () => {
+    renderTagGroup(<text className="custom-separator"> 구분 </text>);
+
+    const customSeparators = getRenderedRoot().querySelectorAll(".custom-separator");
+
+    expect(customSeparators).toHaveLength(2);
+    expect(Array.from(customSeparators, (separator) => separator.textContent)).toEqual([
+      " 구분 ",
+      " 구분 ",
+    ]);
+  });
+
+  it("keeps each separator and following item in the same wrapper", () => {
+    renderTagGroup();
+
+    const wrappers = getRenderedRoot().querySelectorAll(".seed-tag-group__separatorWrapper");
+
+    expect(wrappers).toHaveLength(2);
+    expect(wrappers[0]?.textContent).toBe("·두 번째");
+    expect(wrappers[1]?.textContent).toBe("·세 번째");
+  });
+});

package/src/components/TagGroup/TagGroup.tsx

@@ -31,7 +31,8 @@ export interface TagGroupRootProps
     TagGroupItemVariantProps,
     LynxStyledElementProps {
   /**
-   * children 사이에 삽입되는 구분자. 기본값 `" · "`.
+   * children 사이에 삽입되는 구분자. 기본값 `"·"`.
+   * 문자열을 전달하면 앞뒤 공백을 제거합니다.
    */
   separator?: React.ReactNode;
 }
@@ -41,6 +42,7 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
     splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
   const { children, className, separator = " · ", ...nativeProps } = otherProps;
   const classes = tagGroup(tagGroupVariantProps);
+  const normalizedSeparator = typeof separator === "string" ? separator.trim() : separator;
 
   const visibleChildren = toArray(children);
 
@@ -61,7 +63,7 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
               key={(child as React.ReactElement).key ?? index}
               className={classes.separatorWrapper}
             >
-              <text className={classes.separator}>{separator}</text>
+              <text className={classes.separator}>{normalizedSeparator}</text>
               {child}
             </view>
           );

package/src/components/TextField/TextField.test.tsx

@@ -63,11 +63,17 @@ function getTextFieldRoot() {
   return textFieldRoot;
 }
 
-function fireNativeEvent(nativeRef: NodesRef, element: Element, eventName: string, detail: object) {
+function fireNativeEvent(
+  nativeRef: NodesRef,
+  element: Element,
+  eventName: string,
+  detail: object,
+  bubbles = true,
+) {
   const EventConstructor = element.ownerDocument.defaultView?.CustomEvent;
   if (!EventConstructor) throw new Error("Expected CustomEvent constructor to exist.");
 
-  const event = new EventConstructor(`bindEvent:${eventName}`, { bubbles: true, detail });
+  const event = new EventConstructor(`bindEvent:${eventName}`, { bubbles, detail });
   Object.assign(event, { eventType: "bindEvent", eventName });
   fireEvent(nativeRef as unknown as Element, event);
 }
@@ -171,7 +177,9 @@ describe("TextField", () => {
     expect(input).toHaveAttribute("name", "title");
     expect(input).toHaveAttribute("placeholder", "제목");
     expect(input).toHaveAttribute("default-value", "초기값");
-    expect(input).not.toHaveAttribute("android-set-soft-input-mode");
+    expect(input).toHaveAttribute("show-soft-input-on-focus", "true");
+    expect(input).toHaveAttribute("android-set-soft-input-mode", "unspecified");
+    expect(input).not.toHaveAttribute("maxlength");
 
     rerender(renderTextField());
 
@@ -196,6 +204,56 @@ describe("TextField", () => {
     expect(input).toHaveAttribute("default-value", "");
   });
 
+  it("replaces undefined soft keyboard props with safe native defaults", () => {
+    const { rerender } = render(
+      <TextField.Root>
+        <TextField.Input
+          show-soft-input-on-focus={undefined}
+          android-set-soft-input-mode={undefined}
+        />
+      </TextField.Root>,
+    );
+
+    const input = getRenderedRoot().querySelector("input");
+    expect(input).toHaveAttribute("show-soft-input-on-focus", "true");
+    expect(input).toHaveAttribute("android-set-soft-input-mode", "unspecified");
+
+    rerender(
+      <TextField.Root>
+        <TextField.Textarea
+          show-soft-input-on-focus={undefined}
+          android-set-soft-input-mode={undefined}
+        />
+      </TextField.Root>,
+    );
+
+    const textarea = getRenderedRoot().querySelector("textarea");
+    expect(textarea).toHaveAttribute("show-soft-input-on-focus", "true");
+    expect(textarea).toHaveAttribute("android-set-soft-input-mode", "unspecified");
+  });
+
+  it("preserves explicit soft keyboard overrides", () => {
+    const { rerender } = render(
+      <TextField.Root>
+        <TextField.Input show-soft-input-on-focus={false} android-set-soft-input-mode="nothing" />
+      </TextField.Root>,
+    );
+
+    const input = getRenderedRoot().querySelector("input");
+    expect(input).toHaveAttribute("show-soft-input-on-focus", "false");
+    expect(input).toHaveAttribute("android-set-soft-input-mode", "nothing");
+
+    rerender(
+      <TextField.Root>
+        <TextField.Textarea show-soft-input-on-focus={false} android-set-soft-input-mode="resize" />
+      </TextField.Root>,
+    );
+
+    const textarea = getRenderedRoot().querySelector("textarea");
+    expect(textarea).toHaveAttribute("show-soft-input-on-focus", "false");
+    expect(textarea).toHaveAttribute("android-set-soft-input-mode", "resize");
+  });
+
   it("initializes a non-empty value without invoking a native UI method", () => {
     const invoke = vi.fn(() => ({ exec: vi.fn() }));
     const setRef = (node: NodesRef | null) => {
@@ -543,8 +601,9 @@ describe("TextField", () => {
     );
 
     if (!inputRef.current) throw new Error("Expected native input ref to exist.");
-    expect(getRenderedRoot().querySelector("input")).not.toHaveAttribute(
+    expect(getRenderedRoot().querySelector("input")).toHaveAttribute(
       "android-set-soft-input-mode",
+      "unspecified",
     );
 
     // ReactLynx Testing Library runtime accepts NodesRef, but its public fireEvent type
@@ -627,8 +686,11 @@ describe("TextField", () => {
     expect(getRenderedQueries().queryByText("secret")).toBeNull();
   });
 
-  it("uses native intrinsic autoresize inside a padded sizing wrapper", () => {
+  it("uses direct native autoresize on Android", () => {
+    setSystemInfo({ platform: "Android" });
+
     const textareaRef = createRef<NodesRef>();
+    const bindlayoutchange = vi.fn();
     const actions = {
       focus: vi.fn(),
       blur: vi.fn(),
@@ -642,6 +704,7 @@ describe("TextField", () => {
             ref={textareaRef}
             placeholder="내용"
             android-set-soft-input-mode="nothing"
+            bindlayoutchange={bindlayoutchange}
           />
         </TextField.Root>
       </KeyboardAvoidanceActionsContext.Provider>,
@@ -649,37 +712,27 @@ describe("TextField", () => {
 
     const root = getRenderedRoot();
     const textarea = root.querySelector("textarea");
-    const textareaRoot = root.querySelector(".seed-text-input__textareaRoot");
     if (!textarea) throw new Error("Expected native textarea to exist.");
-    if (!textareaRoot) throw new Error("Expected textarea sizing wrapper to exist.");
     if (!textareaRef.current) throw new Error("Expected native textarea ref to exist.");
 
-    expect(textareaRoot).toHaveClass("seed-text-input__textareaAutoresizeRoot--size_large");
-    expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
-    expect(textarea).not.toHaveClass("seed-text-input__textareaAndroidAutoresize--size_large");
+    expect(textarea).not.toHaveClass("seed-text-input__textareaNativeAutoresize");
+    expect(textarea).toHaveClass("seed-text-input__textareaAndroidAutoresize--size_large");
     expect(textarea).toHaveClass("seed-text-input__textareaValue");
     expect(textarea).not.toHaveClass("seed-text-input__textareaFixed");
     expect(textarea).toHaveAttribute("bounces", "false");
+    expect(textarea).toHaveAttribute("show-soft-input-on-focus", "true");
     expect(textarea).toHaveAttribute("default-value", "첫 줄\n둘째 줄\n");
     expect(textarea).toHaveAttribute("android-fullscreen-mode", "false");
     expect(textarea).toHaveAttribute("android-set-soft-input-mode", "nothing");
-    expect(textareaRoot.querySelector("text")).toBeNull();
+    expect(textarea).not.toHaveAttribute("maxlength");
+    expect(root.querySelector(".seed-text-input__textareaRoot")).toBeNull();
 
-    fireNativeEvent(textareaRoot as unknown as NodesRef, textareaRoot, "layoutchange", {
+    fireNativeEvent(textareaRef.current, textarea, "layoutchange", {
       width: 200,
       height: 120,
     });
     expect(actions.layoutChanged).toHaveBeenCalledOnce();
-
-    const exec = vi.fn();
-    const invoke = vi.fn(() => ({ exec }));
-    textareaRef.current.invoke = invoke as unknown as NodesRef["invoke"];
-    fireEvent.tap(textareaRef.current as unknown as Element);
-    expect(invoke).not.toHaveBeenCalled();
-
-    fireEvent.tap(textareaRoot);
-    expect(invoke).toHaveBeenCalledWith(expect.objectContaining({ method: "focus" }));
-    expect(exec).toHaveBeenCalledOnce();
+    expect(bindlayoutchange).toHaveBeenCalledOnce();
   });
 
   it("uses native intrinsic autoresize with the Android-only line-spacing correction", () => {
@@ -695,7 +748,7 @@ describe("TextField", () => {
     const textarea = root.querySelector("textarea");
     if (!textarea) throw new Error("Expected native textarea to exist.");
 
-    expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
+    expect(textarea).not.toHaveClass("seed-text-input__textareaNativeAutoresize");
     expect(textarea).toHaveClass("seed-text-input__textareaAndroidAutoresize--size_large");
     expect(textarea).toHaveAttribute("line-spacing", "3.2px");
     expect(root.querySelector(".seed-text-input__textareaAutoresizeRoot--size_large")).toBeNull();
@@ -743,29 +796,98 @@ describe("TextField", () => {
     expect(uncorrectedTextarea).toHaveAttribute("line-spacing", "0");
   });
 
-  it("keeps iOS native autoresize without the Android line-spacing correction", () => {
+  it("uses an iOS-only sizing wrapper without intercepting native textarea taps", () => {
     setSystemInfo({ platform: "iOS" });
 
+    const textareaRef = createRef<NodesRef>();
+    const bindlayoutchange = vi.fn();
+    const actions = {
+      focus: vi.fn(),
+      blur: vi.fn(),
+      layoutChanged: vi.fn(),
+      unregister: vi.fn(),
+    };
     render(
-      <TextField.Root defaultValue={"첫 줄\n"}>
-        <TextField.Textarea />
-      </TextField.Root>,
+      <KeyboardAvoidanceActionsContext.Provider value={actions}>
+        <TextField.Root defaultValue={"첫 줄\n"}>
+          <TextField.Textarea ref={textareaRef} bindlayoutchange={bindlayoutchange} />
+        </TextField.Root>
+      </KeyboardAvoidanceActionsContext.Provider>,
     );
 
     const root = getRenderedRoot();
     const textarea = root.querySelector("textarea");
-    if (!textarea) throw new Error("Expected native textarea to exist.");
+    const textareaRoot = root.querySelector(".seed-text-input__textareaRoot");
+    if (!textarea || !textareaRoot || !textareaRef.current) {
+      throw new Error("Expected native textarea and its iOS sizing wrapper to exist.");
+    }
 
     expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
     expect(textarea).not.toHaveClass("seed-text-input__textareaAndroidAutoresize--size_large");
     expect(textarea).not.toHaveAttribute("line-spacing");
-    expect(
-      root.querySelector(".seed-text-input__textareaAutoresizeRoot--size_large"),
-    ).not.toBeNull();
-    expect(root.querySelector(".seed-text-input__textareaRoot text")).toBeNull();
+    expect(textareaRoot).toHaveClass("seed-text-input__textareaAutoresizeRoot--size_large");
+    expect(textareaRoot).toHaveAttribute("ignore-focus", "true");
+
+    const exec = vi.fn();
+    const invoke = vi.fn(() => ({ exec }));
+    textareaRef.current.invoke = invoke as unknown as NodesRef["invoke"];
+
+    fireEvent.tap(textareaRef.current as unknown as Element);
+    expect(invoke).not.toHaveBeenCalled();
+
+    fireEvent.tap(textareaRoot);
+    expect(invoke).toHaveBeenCalledWith(expect.objectContaining({ method: "focus" }));
+    expect(exec).toHaveBeenCalledOnce();
+
+    actions.layoutChanged.mockClear();
+    fireNativeEvent(
+      textareaRef.current,
+      textarea,
+      "layoutchange",
+      {
+        width: 200,
+        height: 80,
+      },
+      false,
+    );
+    expect(bindlayoutchange).toHaveBeenCalledOnce();
+    expect(actions.layoutChanged).not.toHaveBeenCalled();
+
+    fireNativeEvent(textareaRoot as unknown as NodesRef, textareaRoot, "layoutchange", {
+      width: 200,
+      height: 94,
+    });
+    expect(actions.layoutChanged).toHaveBeenCalledOnce();
   });
 
-  it("does not restore the previous value after an accepted controlled textarea newline", async () => {
+  it("does not invoke focus from disabled iOS textarea wrapper padding", () => {
+    setSystemInfo({ platform: "iOS" });
+
+    const textareaRef = createRef<NodesRef>();
+    render(
+      <TextField.Root disabled>
+        <TextField.Textarea ref={textareaRef} />
+      </TextField.Root>,
+    );
+
+    const textareaRoot = getRenderedRoot().querySelector(".seed-text-input__textareaRoot");
+    if (!textareaRoot || !textareaRef.current) {
+      throw new Error("Expected disabled native textarea and its iOS sizing wrapper to exist.");
+    }
+
+    const invoke = vi.fn(() => ({ exec: vi.fn() }));
+    textareaRef.current.invoke = invoke as unknown as NodesRef["invoke"];
+
+    fireEvent.tap(textareaRoot);
+    expect(invoke).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    "Android",
+    "iOS",
+  ] as const)("does not restore the previous value after an accepted controlled textarea newline on %s", async (platform) => {
+    setSystemInfo({ platform });
+
     const textareaRef = createRef<NodesRef>();
     const onValueChange = vi.fn();
     const bindinput = vi.fn();
@@ -794,8 +916,13 @@ describe("TextField", () => {
       throw new Error("Expected native textarea to exist.");
     }
 
-    expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
-    expect(root.querySelector(".seed-text-input__textareaRoot")).not.toBeNull();
+    if (platform === "iOS") {
+      expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
+      expect(root.querySelector(".seed-text-input__textareaRoot")).not.toBeNull();
+    } else {
+      expect(textarea).not.toHaveClass("seed-text-input__textareaNativeAutoresize");
+      expect(root.querySelector(".seed-text-input__textareaRoot")).toBeNull();
+    }
 
     const invoke = vi.fn(() => ({ exec: vi.fn() }));
     textareaRef.current.invoke = invoke as unknown as NodesRef["invoke"];
@@ -811,6 +938,7 @@ describe("TextField", () => {
     expect(invoke).not.toHaveBeenCalled();
 
     await flushControlledReconciliation();
+    expect(getRenderedRoot().querySelector("textarea")).toBe(textarea);
     expect(invoke).not.toHaveBeenCalled();
   });
 

package/src/components/TextField/TextField.tsx

@@ -17,13 +17,21 @@ declare const SystemInfo: LynxSystemInfo | undefined;
 
 const ANDROID_TEXTAREA_DEFAULT_LINE_SPACING = "3.2px" as const;
 
-function isAndroidRuntime(): boolean {
+function getRuntimePlatform(): string | undefined {
   const globalSystemInfo = (globalThis as typeof globalThis & { SystemInfo?: LynxSystemInfo })
     .SystemInfo;
   const systemInfo =
     globalSystemInfo ?? (typeof SystemInfo === "undefined" ? undefined : SystemInfo);
 
-  return systemInfo?.platform === "Android";
+  return systemInfo?.platform;
+}
+
+function isAndroidRuntime(): boolean {
+  return getRuntimePlatform() === "Android";
+}
+
+function isIOSRuntime(): boolean {
+  return getRuntimePlatform() === "iOS";
 }
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(textInput);
@@ -562,13 +570,22 @@ export interface TextFieldInputProps extends NativeTextControlProps {
   maxlength?: NativeInputProps["maxlength"];
   readonly?: NativeInputProps["readonly"];
   disabled?: NativeInputProps["disabled"];
+  /**
+   * 포커스할 때 시스템 키보드를 표시한다.
+   * `undefined`가 native attribute로 전달되지 않도록 `true`를 명시적으로 적용한다.
+   * @defaultValue true
+   */
   "show-soft-input-on-focus"?: NativeInputProps["show-soft-input-on-focus"];
   "input-filter"?: NativeInputProps["input-filter"];
   type?: NativeInputProps["type"];
   "ios-auto-correct"?: NativeInputProps["ios-auto-correct"];
   "ios-spell-check"?: NativeInputProps["ios-spell-check"];
   "android-fullscreen-mode"?: NativeInputProps["android-fullscreen-mode"];
-  /** Android host window의 soft input mode를 지정한다. */
+  /**
+   * Android host window의 soft input mode를 지정한다.
+   * `undefined`가 native attribute로 전달되지 않도록 `"unspecified"`를 명시적으로 적용한다.
+   * @defaultValue "unspecified"
+   */
   "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
   bindfocus?: NativeInputProps["bindfocus"];
   bindblur?: NativeInputProps["bindblur"];
@@ -651,10 +668,10 @@ export const TextFieldInput = React.forwardRef<NodesRef, TextFieldInputProps>((p
       className={clsx(classes.value, className)}
       disabled={control.disabled}
       readonly={control.readOnly}
-      show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus}
-      android-set-soft-input-mode={androidSetSoftInputMode}
+      show-soft-input-on-focus={showSoftInputOnFocus ?? true}
+      android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"}
       name={name ?? control.context.name}
-      maxlength={resolvedMaxLength}
+      {...(resolvedMaxLength === undefined ? {} : { maxlength: resolvedMaxLength })}
       bindinput={control.handleInput}
       bindselection={handleSelection}
       bindfocus={control.handleFocus}
@@ -686,6 +703,11 @@ export interface TextFieldTextareaProps extends NativeTextControlProps {
   "line-spacing"?: NativeTextareaProps["line-spacing"];
   readonly?: NativeTextareaProps["readonly"];
   disabled?: NativeTextareaProps["disabled"];
+  /**
+   * 포커스할 때 시스템 키보드를 표시한다.
+   * `undefined`가 native attribute로 전달되지 않도록 `true`를 명시적으로 적용한다.
+   * @defaultValue true
+   */
   "show-soft-input-on-focus"?: NativeTextareaProps["show-soft-input-on-focus"];
   "input-filter"?: NativeTextareaProps["input-filter"];
   "enable-scroll-bar"?: NativeTextareaProps["enable-scroll-bar"];
@@ -694,7 +716,11 @@ export interface TextFieldTextareaProps extends NativeTextControlProps {
   "ios-spell-check"?: NativeTextareaProps["ios-spell-check"];
   /** Android의 fullscreen extract input을 활성화한다. @defaultValue false */
   "android-fullscreen-mode"?: NativeTextareaProps["android-fullscreen-mode"];
-  /** Android host window의 soft input mode를 지정한다. */
+  /**
+   * Android host window의 soft input mode를 지정한다.
+   * `undefined`가 native attribute로 전달되지 않도록 `"unspecified"`를 명시적으로 적용한다.
+   * @defaultValue "unspecified"
+   */
   "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
   bindfocus?: NativeTextareaProps["bindfocus"];
   bindblur?: NativeTextareaProps["bindblur"];
@@ -738,6 +764,7 @@ export const TextFieldTextarea = React.forwardRef<NodesRef, TextFieldTextareaPro
       control.nativeInsertionMaxLength,
     );
     const isAndroid = isAndroidRuntime();
+    const usesIOSAutoresizeWrapper = autoresize && isIOSRuntime();
     // Android native textarea는 CSS line-height를 무시한다. 실기기에서 관측한
     // native font metrics와 SEED line box의 차이를 line-spacing으로 보정한다.
     // 명시적인 값(0 포함)은 내부 기본값보다 우선한다.
@@ -756,16 +783,29 @@ export const TextFieldTextarea = React.forwardRef<NodesRef, TextFieldTextareaPro
       },
       [bindselection, control.handleSelectionChange],
     );
+    const handleLayoutChange = React.useCallback<
+      NonNullable<NativeTextareaProps["bindlayoutchange"]>
+    >(
+      (event) => {
+        "background only";
+
+        if (autoresize) {
+          control.notifyLayoutChanged();
+        }
+        bindlayoutchange?.(event);
+      },
+      [autoresize, bindlayoutchange, control.notifyLayoutChanged],
+    );
     const handleTextareaRootTap = React.useCallback<
       NonNullable<IntrinsicElements["view"]["bindtap"]>
     >(
       (event) => {
         "background only";
 
-        if (event.target.uid !== event.currentTarget.uid) return;
+        if (control.disabled || event.target.uid !== event.currentTarget.uid) return;
         control.focusNativeControl();
       },
-      [control.focusNativeControl],
+      [control.disabled, control.focusNativeControl],
     );
 
     if (control.readOnly) {
@@ -795,8 +835,8 @@ export const TextFieldTextarea = React.forwardRef<NodesRef, TextFieldTextareaPro
       );
     }
 
-    // Android EditText는 자체 canvas 경계 안에서 text와 scroll offset을 먼저 자른다.
-    // autoresize 시 세로 padding을 wrapper가 아니라 native가 소유해야 첫 줄 여유가 유효하다.
+    // iOS textarea는 첫 편집에서 native contentSize를 높이에 반영한다.
+    // 디자인 padding을 wrapper로 분리해 이때 padding만큼 높이가 중복되지 않게 한다.
     const textarea = (
       <textarea
         {...control.defaultValueProps}
@@ -804,33 +844,35 @@ export const TextFieldTextarea = React.forwardRef<NodesRef, TextFieldTextareaPro
         className={clsx(
           classes.value,
           classes.textareaValue,
-          autoresize ? classes.textareaNativeAutoresize : classes.textareaFixed,
-          autoresize && isAndroid && classes.textareaAndroidAutoresize,
+          !autoresize && classes.textareaFixed,
+          usesIOSAutoresizeWrapper && classes.textareaNativeAutoresize,
+          autoresize && !usesIOSAutoresizeWrapper && classes.textareaAndroidAutoresize,
           className,
         )}
         disabled={control.disabled}
         readonly={control.readOnly}
-        show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus}
+        show-soft-input-on-focus={showSoftInputOnFocus ?? true}
         bounces={bounces ?? (autoresize ? false : undefined)}
         line-spacing={resolvedLineSpacing}
         android-fullscreen-mode={androidFullscreenMode ?? false}
-        android-set-soft-input-mode={androidSetSoftInputMode}
+        android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"}
         name={name ?? control.context.name}
-        maxlength={resolvedMaxLength}
+        {...(resolvedMaxLength === undefined ? {} : { maxlength: resolvedMaxLength })}
         bindinput={control.handleInput}
         bindselection={handleSelection}
         bindfocus={control.handleFocus}
         bindblur={control.handleBlur}
-        bindlayoutchange={bindlayoutchange}
+        bindlayoutchange={usesIOSAutoresizeWrapper ? bindlayoutchange : handleLayoutChange}
         {...nativeProps}
       />
     );
 
-    if (!autoresize) return textarea;
+    if (!usesIOSAutoresizeWrapper) return textarea;
 
     return (
       <view
-        className={clsx(classes.textareaRoot, !isAndroid && classes.textareaAutoresizeRoot)}
+        ignore-focus={true}
+        className={clsx(classes.textareaRoot, classes.textareaAutoresizeRoot)}
         bindtap={handleTextareaRootTap}
         bindlayoutchange={control.notifyLayoutChanged}
       >