@seed-design/lynx-react 0.5.0 → 0.5.2

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAE7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAKrF,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAsErB,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,EAC5D,sBAAsB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,qFAyDzB,CAAC;AAKH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,qFA+CzB,CAAC;AAKH,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,EACzC,sBAAsB;CAAG;AAE7B,eAAO,MAAM,qBAAqB,4FA6BjC,CAAC;AAKF,MAAM,WAAW,4BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,OAAO,CAAC;IAC3D,kGAAkG;IAClG,SAAS,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAC/C,0GAA0G;IAC1G,OAAO,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;CAC9C;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,qBA6B1E;yBA7Be,uBAAuB;;;AAkCvC,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;CAAG;AAE3E,eAAO,MAAM,mBAAmB,0FAoB/B,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAE7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAKrF,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAsErB,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,EAC5D,sBAAsB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,qFAyDzB,CAAC;AAKH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,qFA+CzB,CAAC;AAKH,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,EACzC,sBAAsB;CAAG;AAE7B,eAAO,MAAM,qBAAqB,4FA8BjC,CAAC;AAKF,MAAM,WAAW,4BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,OAAO,CAAC;IAC3D,kGAAkG;IAClG,SAAS,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAC/C,0GAA0G;IAC1G,OAAO,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;CAC9C;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,qBA6B1E;yBA7Be,uBAAuB;;;AAkCvC,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;CAAG;AAE3E,eAAO,MAAM,mBAAmB,0FAoB/B,CAAC"}

package/lib/components/RadioGroup/RadioGroup.jsx

@@ -119,11 +119,12 @@ var RadioGroupItemControl = React.forwardRef((props, ref) => {
 		pressed: itemContext.pressed
 	};
 	const classes = radiomark(radiomarkVariantProps);
+	const controlClassName = radio(groupContext.radioVariantProps).control;
 	return <RadiomarkControlContext.Provider value={{
 		iconClassName: classes.icon,
 		radiomarkVariantProps
 	}}>
-        <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+        <view {...ref ? { ref } : {}} className={clsx(classes.root, controlClassName, className)} {...nativeProps}>
           {children}
         </view>
       </RadiomarkControlContext.Provider>;

package/lib/components/Tabs/Tabs.d.ts

@@ -3,7 +3,7 @@ import { IntrinsicElements } from '@lynx-js/types';
 import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
 import * as React from "@lynx-js/react";
 type NativeViewPagerProps = IntrinsicElements["viewpager"];
-type TabsPublicVariantProps = Omit<TabsVariantProps, "selected" | "disabled" | "inCarousel">;
+type TabsPublicVariantProps = Omit<TabsVariantProps, "selected" | "disabled" | "inCarousel" | "transitionEnabled">;
 /**
  * @platform Lynx
  *

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,gBAAgB,CAAC;AAKxB,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAIrB,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAI3D,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AAyF7F;;;;;;;GAOG;AACH,MAAM,WAAW,aAAc,SAAQ,sBAAsB,EAAE,sBAAsB;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,QAAQ,+EAmMnB,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,sBAAsB;CAAG;AAEhE,eAAO,MAAM,QAAQ,+EAsCnB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,WAAW,kFAiEtB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAkCxB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,kFAgCtB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,mFA8BvB,CAAC;AAKH,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,kBAAkB,yFAmH9B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,gBAAgB,CAAC;AAKxB,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAWrB,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAI3D,KAAK,sBAAsB,GAAG,IAAI,CAChC,gBAAgB,EAChB,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,mBAAmB,CAC7D,CAAC;AAkFF;;;;;;;GAOG;AACH,MAAM,WAAW,aAAc,SAAQ,sBAAsB,EAAE,sBAAsB;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,QAAQ,+EAoNnB,CAAC;AAyBH,MAAM,WAAW,aAAc,SAAQ,sBAAsB;CAAG;AAEhE,eAAO,MAAM,QAAQ,+EAkCnB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,WAAW,kFAkEtB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAiCxB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,kFAgCtB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,mFA8BvB,CAAC;AAKH,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,kBAAkB,yFAgH9B,CAAC"}

package/lib/components/Tabs/Tabs.jsx

@@ -1,6 +1,7 @@
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { usePressTap } from "../../hooks/usePressTap.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { areTabsTransitionsEnabled, getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects } from "./Tabs.utils.js";
 import * as React from "@lynx-js/react";
 import clsx from "clsx";
 import { tabs } from "@seed-design/lynx-css/recipes/tabs";
@@ -32,15 +33,6 @@ function invokeScrollToOffset(list, offset) {
 		}).exec();
 	} catch {}
 }
-function getLayoutRect(event) {
-	const width = event.detail?.width ?? event.params?.width;
-	const left = event.detail?.left ?? event.params?.left;
-	if (!Number.isFinite(width) || !Number.isFinite(left)) return null;
-	return {
-		width: Math.max(0, width),
-		left
-	};
-}
 var TabsContext = React.createContext(null);
 function useTabsContext(consumer) {
 	const context = React.useContext(TabsContext);
@@ -60,7 +52,6 @@ function useTabsCarouselContext(consumer) {
 var TabsRoot = React.forwardRef((props, ref) => {
 	const [variantProps, otherProps] = tabs.splitVariantProps(props);
 	const { children, className, style, value: valueProp, defaultValue, onValueChange, ...nativeProps } = otherProps;
-	const classNames = tabs(variantProps);
 	const [value, setValueInternal] = useControllableState({
 		value: valueProp,
 		defaultValue,
@@ -72,17 +63,21 @@ var TabsRoot = React.forwardRef((props, ref) => {
 	const [items, setItems] = React.useState([]);
 	const [contentValues, setContentValues] = React.useState([]);
 	const [indicatorValue, setIndicatorValue] = React.useState();
-	const [triggerRects, setTriggerRects] = React.useState({});
-	const [listLeft, setListLeft] = React.useState(0);
+	const [triggerWidths, setTriggerWidths] = React.useState({});
 	const listRef = React.useRef(null);
 	const pagerRef = React.useRef(null);
 	const indicatorRef = React.useMainThreadRef(null);
 	const pagerValues = React.useMemo(() => contentValues.filter((contentValue) => !items.find((item) => item.value === contentValue)?.disabled), [contentValues, items]);
+	const triggerRects = React.useMemo(() => getTabsTriggerRects(items.map((item) => item.value), triggerWidths), [items, triggerWidths]);
+	const transitionsEnabled = areTabsTransitionsEnabled(items.map((item) => item.value), triggerRects);
+	const classNames = tabs({
+		...variantProps,
+		transitionEnabled: transitionsEnabled
+	});
 	const visualValue = indicatorValue ?? value;
 	const indicatorIndex = items.findIndex((item) => item.value === visualValue);
 	const selectedPagerIndex = value === void 0 ? -1 : pagerValues.indexOf(value);
-	const selectedRect = value === void 0 ? void 0 : triggerRects[value];
-	const selectedOffset = selectedRect ? Math.max(0, selectedRect.left - listLeft) : null;
+	const selectedOffset = (value === void 0 ? void 0 : triggerRects[value])?.left ?? null;
 	const setListNode = React.useCallback((node) => {
 		listRef.current = node;
 		if (node && selectedOffset !== null) invokeScrollToOffset(node, selectedOffset);
@@ -102,7 +97,7 @@ var TabsRoot = React.forwardRef((props, ref) => {
 		return () => {
 			"background only";
 			setItems((current) => current.filter((item) => item.value !== triggerValue));
-			setTriggerRects((current) => {
+			setTriggerWidths((current) => {
 				const next = { ...current };
 				delete next[triggerValue];
 				return next;
@@ -122,14 +117,16 @@ var TabsRoot = React.forwardRef((props, ref) => {
 			disabled
 		} : item));
 	}, []);
-	const updateTriggerRect = React.useCallback((triggerValue, rect) => {
-		setTriggerRects((current) => {
-			const previous = current[triggerValue];
-			if (previous?.left === rect.left && previous.width === rect.width) return current;
-			return {
-				...current,
-				[triggerValue]: rect
-			};
+	const syncTriggerOrder = React.useCallback((triggerValues) => {
+		setItems((current) => {
+			const ordered = getTabsOrderedItems(current, triggerValues);
+			return ordered.every((item, index) => item === current[index]) ? current : ordered;
+		});
+	}, []);
+	const updateTriggerWidth = React.useCallback((triggerValue, width) => {
+		setTriggerWidths((current) => current[triggerValue] === width ? current : {
+			...current,
+			[triggerValue]: width
 		});
 	}, []);
 	const selectValue = React.useCallback((nextValue) => {
@@ -159,13 +156,13 @@ var TabsRoot = React.forwardRef((props, ref) => {
 		indicatorIndex,
 		selectedPagerIndex,
 		indicatorRef,
-		listLeft,
+		transitionsEnabled,
 		triggerRects,
 		registerTrigger,
 		registerContent,
 		updateTriggerDisabled,
-		updateTriggerRect,
-		setListLeft,
+		syncTriggerOrder,
+		updateTriggerWidth,
 		setListRef: setListNode,
 		setPagerRef: setPagerNode,
 		selectValue,
@@ -180,12 +177,13 @@ var TabsRoot = React.forwardRef((props, ref) => {
 		indicatorIndex,
 		selectedPagerIndex,
 		indicatorRef,
-		listLeft,
 		triggerRects,
+		transitionsEnabled,
 		registerTrigger,
 		registerContent,
 		updateTriggerDisabled,
-		updateTriggerRect,
+		syncTriggerOrder,
+		updateTriggerWidth,
 		setListNode,
 		setPagerNode,
 		selectValue,
@@ -201,21 +199,42 @@ var TabsRoot = React.forwardRef((props, ref) => {
     </TabsContext.Provider>;
 });
 TabsRoot.displayName = "TabsRoot";
+function getTabsTriggerValues(children) {
+	const values = [];
+	function visit(node) {
+		if (Array.isArray(node)) {
+			node.forEach(visit);
+			return;
+		}
+		if (!React.isValidElement(node)) return;
+		if (node.type === TabsTrigger) {
+			values.push(node.props.value);
+			return;
+		}
+		if (node.type === React.Fragment) visit(node.props.children);
+	}
+	visit(children);
+	return values;
+}
 var TabsList = React.forwardRef((props, ref) => {
 	const { children, className, style, ...nativeProps } = props;
 	const classNames = useClassNames();
-	const { setListLeft, setListRef } = useTabsContext("TabsList");
+	const { items, setListRef, syncTriggerOrder } = useTabsContext("TabsList");
+	const triggerOrder = React.useMemo(() => getTabsTriggerValues(children), [children]);
+	React.useEffect(() => {
+		"background only";
+		syncTriggerOrder(triggerOrder);
+	}, [
+		items,
+		syncTriggerOrder,
+		triggerOrder
+	]);
 	const mergedRef = React.useCallback((node) => {
 		setListRef(node);
 		if (typeof ref === "function") ref(node);
 		else if (ref) ref.current = node;
 	}, [ref, setListRef]);
-	const handleLayoutChange = React.useCallback((...args) => {
-		"background only";
-		const rect = getLayoutRect(args[0]);
-		if (rect) setListLeft(rect.left);
-	}, [setListLeft]);
-	return <scroll-view ref={mergedRef} {...nativeProps} scroll-orientation="horizontal" scroll-bar-enable={false} bindlayoutchange={handleLayoutChange} accessibility-element={false} accessibility-traits="tabbar" className={clsx(classNames.list, className)} style={style}>
+	return <scroll-view ref={mergedRef} {...nativeProps} scroll-orientation="horizontal" scroll-bar-enable={false} accessibility-element={false} accessibility-traits="tabbar" className={clsx(classNames.list, className)} style={style}>
       <view className={classNames.listContent}>{children}</view>
     </scroll-view>;
 });
@@ -246,13 +265,14 @@ var TabsTrigger = React.forwardRef((props, ref) => {
 	});
 	const handleLayoutChange = React.useCallback((...args) => {
 		"background only";
-		const rect = getLayoutRect(args[0]);
-		if (rect) context.updateTriggerRect(triggerValue, rect);
-	}, [context.updateTriggerRect, triggerValue]);
+		const width = getTabsLayoutWidth(args[0]);
+		if (width !== null) context.updateTriggerWidth(triggerValue, width);
+	}, [context.updateTriggerWidth, triggerValue]);
 	const triggerClasses = tabs({
 		...context.variantProps,
 		selected: visuallySelected,
-		disabled
+		disabled,
+		transitionEnabled: context.transitionsEnabled
 	});
 	const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
 	return <view {...ref ? { ref } : {}} {...nativeProps} {...pressHandlers} flatten={false} bindlayoutchange={handleLayoutChange} accessibility-element={true} accessibility-role-description="tab" accessibility-label={accessibilityLabel ?? label} accessibility-value={selected ? "selected" : "not selected"} accessibility-traits={disabled ? "disabled" : selected ? "selected" : "button"} className={clsx(triggerClasses.trigger, className)} style={style}>
@@ -263,14 +283,14 @@ TabsTrigger.displayName = "TabsTrigger";
 var TabsIndicator = React.forwardRef((props, ref) => {
 	const { className, style, ...nativeProps } = props;
 	const classNames = useClassNames();
-	const { indicatorRef, items, listLeft, indicatorIndex, triggerRects } = useTabsContext("TabsIndicator");
+	const { indicatorRef, items, indicatorIndex, triggerRects } = useTabsContext("TabsIndicator");
 	const position = indicatorIndex;
 	const lowerIndex = Math.max(0, Math.floor(position));
 	const upperIndex = Math.min(items.length - 1, Math.ceil(position));
 	const progress = Math.max(0, Math.min(1, position - lowerIndex));
 	const lowerRect = triggerRects[items[lowerIndex]?.value ?? ""];
 	const upperRect = triggerRects[items[upperIndex]?.value ?? ""] ?? lowerRect;
-	const x = lowerRect ? lowerRect.left - listLeft + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress : 0;
+	const x = lowerRect ? lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress : 0;
 	const width = lowerRect ? lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress : 0;
 	return <view {...ref ? { ref } : {}} main-thread:ref={indicatorRef} {...nativeProps} accessibility-elements-hidden={true} className={clsx(classNames.indicator, className)} style={{
 		"--tabs-indicator-x": `${x}px`,
@@ -337,7 +357,7 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 	const tabsContext = useTabsContext("TabsCarouselCamera");
 	const carouselContext = useTabsCarouselContext("TabsCarouselCamera");
 	const swipingRef = React.useRef(false);
-	const { indicatorRef, pagerValues, listLeft, triggerRects } = tabsContext;
+	const { indicatorRef, pagerValues, triggerRects } = tabsContext;
 	const indicatorRects = pagerValues.map((value) => triggerRects[value] ?? null);
 	const mergedRef = React.useCallback((node) => {
 		tabsContext.setPagerRef(node);
@@ -388,7 +408,7 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 		const lowerRect = indicatorRects[lowerIndex];
 		const upperRect = indicatorRects[upperIndex] ?? lowerRect;
 		if (!lowerRect) return;
-		const x = lowerRect.left - listLeft + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress;
+		const x = lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress;
 		const width = lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress;
 		indicatorRef.current?.setStyleProperties({
 			"--tabs-indicator-x": `${x}px`,

package/lib/components/Tabs/Tabs.utils.d.ts

@@ -0,0 +1,19 @@
+export interface TabsLayoutChangeEvent {
+    detail?: {
+        width?: number;
+    };
+    params?: {
+        width?: number;
+    };
+}
+export interface TabsLayoutRect {
+    left: number;
+    width: number;
+}
+export declare function getTabsLayoutWidth(event: TabsLayoutChangeEvent): number | null;
+export declare function getTabsOrderedItems<T extends {
+    value: string;
+}>(items: T[], values: string[]): T[];
+export declare function getTabsTriggerRects(values: string[], widths: Record<string, number>): Record<string, TabsLayoutRect>;
+export declare function areTabsTransitionsEnabled(values: string[], rects: Record<string, TabsLayoutRect>): boolean;
+//# sourceMappingURL=Tabs.utils.d.ts.map

package/lib/components/Tabs/Tabs.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,GAAG,IAAI,CAI9E;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAC7D,KAAK,EAAE,CAAC,EAAE,EACV,MAAM,EAAE,MAAM,EAAE,GACf,CAAC,EAAE,CAUL;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,EAAE,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAiBhC;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,MAAM,EAAE,EAChB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,GACpC,OAAO,CAET"}

package/lib/components/Tabs/Tabs.utils.js

@@ -0,0 +1,40 @@
+//#region src/components/Tabs/Tabs.utils.ts
+function getTabsLayoutWidth(event) {
+	const width = event.detail?.width ?? event.params?.width;
+	if (typeof width !== "number" || !Number.isFinite(width)) return null;
+	return Math.max(0, width);
+}
+function getTabsOrderedItems(items, values) {
+	const itemsByValue = new Map(items.map((item) => [item.value, item]));
+	const ordered = values.flatMap((value) => {
+		const item = itemsByValue.get(value);
+		if (!item) return [];
+		itemsByValue.delete(value);
+		return [item];
+	});
+	ordered.push(...itemsByValue.values());
+	return ordered;
+}
+function getTabsTriggerRects(values, widths) {
+	const rects = Object.create(null);
+	let left = 0;
+	let hasCompletePrefix = true;
+	for (const value of values) {
+		const width = Object.prototype.hasOwnProperty.call(widths, value) ? widths[value] : void 0;
+		if (width === void 0) {
+			hasCompletePrefix = false;
+			continue;
+		}
+		if (hasCompletePrefix) rects[value] = {
+			left,
+			width
+		};
+		left += width;
+	}
+	return rects;
+}
+function areTabsTransitionsEnabled(values, rects) {
+	return values.length > 0 && values.every((value) => rects[value] !== void 0);
+}
+//#endregion
+export { areTabsTransitionsEnabled, getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects };

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

@@ -257,12 +257,16 @@ function useNativeTextControl({ forwardedRef, disabled: disabledProp, readOnly:
 	]);
 	const handleBlur = React.useCallback((event) => {
 		"background only";
+		const nativeValue = event.detail?.value;
+		if (typeof nativeValue === "string") lastNativeValueRef.current = nativeValue;
 		textFieldContext.setFocused(false);
 		keyboardAvoidance?.blur(ownerRef.current);
 		bindblur?.(event);
+		if (typeof nativeValue === "string") reconcileControlledValue(nativeValue);
 	}, [
 		bindblur,
 		keyboardAvoidance,
+		reconcileControlledValue,
 		textFieldContext.setFocused
 	]);
 	const notifyLayoutChanged = React.useCallback(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.9.0",
+    "@seed-design/lynx-css": "0.9.3",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/components/RadioGroup/RadioGroup.tsx

@@ -232,6 +232,7 @@ export const RadioGroupItemControl = React.forwardRef<unknown, RadioGroupItemCon
       pressed: itemContext.pressed,
     };
     const classes = radiomark(radiomarkVariantProps);
+    const controlClassName = radio(groupContext.radioVariantProps).control;
 
     return (
       <RadiomarkControlContext.Provider
@@ -239,7 +240,7 @@ export const RadioGroupItemControl = React.forwardRef<unknown, RadioGroupItemCon
       >
         <view
           {...(ref ? { ref: ref as LynxViewRef } : {})}
-          className={clsx(classes.root, className)}
+          className={clsx(classes.root, controlClassName, className)}
           {...nativeProps}
         >
           {children}

package/src/components/Tabs/Tabs.test.tsx

@@ -3,6 +3,12 @@ import { fireEvent, render } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
 
 import * as Tabs from "./Tabs.namespace";
+import {
+  areTabsTransitionsEnabled,
+  getTabsLayoutWidth,
+  getTabsOrderedItems,
+  getTabsTriggerRects,
+} from "./Tabs.utils";
 
 function BasicTabs(props: {
   value?: string;
@@ -40,6 +46,26 @@ describe("Tabs", () => {
     expect(listContent?.querySelectorAll(".seed-tabs__trigger")).toHaveLength(2);
   });
 
+  it("disables label and indicator transitions during the initial render", () => {
+    const { container } = render(<BasicTabs defaultValue="two" />);
+    const labels = container.querySelectorAll<HTMLElement>(".seed-tabs__triggerLabel");
+    const indicator = container.querySelector<HTMLElement>(".seed-tabs__indicator");
+
+    expect(indicator).toHaveClass("seed-tabs__indicator--transitionEnabled_false");
+    expect(indicator?.style.transitionDuration).toBe("");
+    for (const label of labels) {
+      expect(label).toHaveClass("seed-tabs__triggerLabel--transitionEnabled_false");
+      expect(label.style.transitionDuration).toBe("");
+    }
+  });
+
+  it("disables transitions when a dynamically added trigger is unmeasured", () => {
+    const rects = getTabsTriggerRects(["one", "two"], { one: 80, two: 80 });
+
+    expect(areTabsTransitionsEnabled(["one", "two"], rects)).toBe(true);
+    expect(areTabsTransitionsEnabled(["one", "two", "three"], rects)).toBe(false);
+  });
+
   it("changes an uncontrolled value when a trigger is tapped", () => {
     const onValueChange = vi.fn();
     const { container } = render(<BasicTabs defaultValue="one" onValueChange={onValueChange} />);
@@ -56,6 +82,45 @@ describe("Tabs", () => {
     expect(second).toHaveAttribute("accessibility-value", "selected");
   });
 
+  it("derives trigger positions from ordered widths instead of platform coordinates", () => {
+    expect(getTabsLayoutWidth({ detail: { width: 128 }, params: { width: 128 } })).toBe(128);
+    expect(
+      getTabsTriggerRects(["one", "two", "three"], {
+        one: 128,
+        two: 128,
+        three: 128,
+      }),
+    ).toEqual({
+      one: { left: 0, width: 128 },
+      two: { left: 128, width: 128 },
+      three: { left: 256, width: 128 },
+    });
+  });
+
+  it("waits for every preceding trigger width before positioning later triggers", () => {
+    expect(getTabsTriggerRects(["one", "two", "three"], { one: 80, three: 120 })).toEqual({
+      one: { left: 0, width: 80 },
+    });
+  });
+
+  it("ignores inherited object properties used as trigger values", () => {
+    expect(getTabsTriggerRects(["toString"], {})).toEqual({});
+    expect(getTabsTriggerRects(["constructor"], {})).toEqual({});
+    expect(getTabsTriggerRects(["__proto__"], {})).toEqual({});
+  });
+
+  it("updates trigger positions when keyed triggers are reordered", () => {
+    const items = [{ value: "one" }, { value: "two" }, { value: "three" }];
+    const reordered = getTabsOrderedItems(items, ["three", "two", "one"]);
+    const rects = getTabsTriggerRects(
+      reordered.map((item) => item.value),
+      { one: 80, two: 80, three: 80 },
+    );
+
+    expect(reordered.map((item) => item.value)).toEqual(["three", "two", "one"]);
+    expect(rects["three"]?.left).toBe(0);
+  });
+
   it("does not select a disabled trigger", () => {
     const onValueChange = vi.fn();
     const { container } = render(

package/src/components/Tabs/Tabs.tsx

@@ -19,13 +19,23 @@ import type {
   LynxViewRef,
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import {
+  areTabsTransitionsEnabled,
+  getTabsLayoutWidth,
+  getTabsOrderedItems,
+  getTabsTriggerRects,
+  type TabsLayoutRect,
+} from "./Tabs.utils";
 
 type NativeViewProps = IntrinsicElements["view"];
 type NativeViewPagerProps = IntrinsicElements["viewpager"];
 type LayoutChangeHandler = NonNullable<NativeViewProps["bindlayoutchange"]>;
-type TriggerRect = { left: number; width: number };
+type TriggerRect = TabsLayoutRect;
 type TriggerItem = { value: string; disabled: boolean };
-type TabsPublicVariantProps = Omit<TabsVariantProps, "selected" | "disabled" | "inCarousel">;
+type TabsPublicVariantProps = Omit<
+  TabsVariantProps,
+  "selected" | "disabled" | "inCarousel" | "transitionEnabled"
+>;
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(tabs);
 
@@ -49,13 +59,6 @@ function invokeScrollToOffset(list: NodesRef | null, offset: number) {
   }
 }
 
-function getLayoutRect(event: Parameters<LayoutChangeHandler>[0]): TriggerRect | null {
-  const width = event.detail?.width ?? event.params?.width;
-  const left = event.detail?.left ?? event.params?.left;
-  if (!Number.isFinite(width) || !Number.isFinite(left)) return null;
-  return { width: Math.max(0, width), left };
-}
-
 interface TabsContextValue {
   value: string | undefined;
   visualValue: string | undefined;
@@ -65,13 +68,13 @@ interface TabsContextValue {
   indicatorIndex: number;
   selectedPagerIndex: number;
   indicatorRef: React.RefObject<MainThread.Element>;
-  listLeft: number;
   triggerRects: Record<string, TriggerRect>;
+  transitionsEnabled: boolean;
   registerTrigger: (value: string, disabled: boolean) => () => void;
   registerContent: (value: string) => () => void;
   updateTriggerDisabled: (value: string, disabled: boolean) => void;
-  updateTriggerRect: (value: string, rect: TriggerRect) => void;
-  setListLeft: (left: number) => void;
+  syncTriggerOrder: (values: string[]) => void;
+  updateTriggerWidth: (value: string, width: number) => void;
   setListRef: (ref: NodesRef | null) => void;
   setPagerRef: (ref: NodesRef | null) => void;
   selectValue: (value: string) => void;
@@ -139,7 +142,6 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
     onValueChange,
     ...nativeProps
   } = otherProps;
-  const classNames = tabs(variantProps);
   const [value, setValueInternal] = useControllableState<string | undefined>({
     value: valueProp,
     defaultValue,
@@ -151,8 +153,7 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
   const [items, setItems] = React.useState<TriggerItem[]>([]);
   const [contentValues, setContentValues] = React.useState<string[]>([]);
   const [indicatorValue, setIndicatorValue] = React.useState<string | undefined>();
-  const [triggerRects, setTriggerRects] = React.useState<Record<string, TriggerRect>>({});
-  const [listLeft, setListLeft] = React.useState(0);
+  const [triggerWidths, setTriggerWidths] = React.useState<Record<string, number>>({});
   const listRef = React.useRef<NodesRef | null>(null);
   const pagerRef = React.useRef<NodesRef | null>(null);
   const indicatorRef = React.useMainThreadRef<MainThread.Element>(null);
@@ -164,11 +165,24 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
       ),
     [contentValues, items],
   );
+  const triggerRects = React.useMemo(
+    () =>
+      getTabsTriggerRects(
+        items.map((item) => item.value),
+        triggerWidths,
+      ),
+    [items, triggerWidths],
+  );
+  const transitionsEnabled = areTabsTransitionsEnabled(
+    items.map((item) => item.value),
+    triggerRects,
+  );
+  const classNames = tabs({ ...variantProps, transitionEnabled: transitionsEnabled });
   const visualValue = indicatorValue ?? value;
   const indicatorIndex = items.findIndex((item) => item.value === visualValue);
   const selectedPagerIndex = value === undefined ? -1 : pagerValues.indexOf(value);
   const selectedRect = value === undefined ? undefined : triggerRects[value];
-  const selectedOffset = selectedRect ? Math.max(0, selectedRect.left - listLeft) : null;
+  const selectedOffset = selectedRect?.left ?? null;
 
   const setListNode = React.useCallback(
     (node: NodesRef | null) => {
@@ -195,7 +209,7 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
     return () => {
       "background only";
       setItems((current) => current.filter((item) => item.value !== triggerValue));
-      setTriggerRects((current) => {
+      setTriggerWidths((current) => {
         const next = { ...current };
         delete next[triggerValue];
         return next;
@@ -222,14 +236,19 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
     );
   }, []);
 
-  const updateTriggerRect = React.useCallback((triggerValue: string, rect: TriggerRect) => {
-    setTriggerRects((current) => {
-      const previous = current[triggerValue];
-      if (previous?.left === rect.left && previous.width === rect.width) return current;
-      return { ...current, [triggerValue]: rect };
+  const syncTriggerOrder = React.useCallback((triggerValues: string[]) => {
+    setItems((current) => {
+      const ordered = getTabsOrderedItems(current, triggerValues);
+      return ordered.every((item, index) => item === current[index]) ? current : ordered;
     });
   }, []);
 
+  const updateTriggerWidth = React.useCallback((triggerValue: string, width: number) => {
+    setTriggerWidths((current) =>
+      current[triggerValue] === width ? current : { ...current, [triggerValue]: width },
+    );
+  }, []);
+
   const selectValue = React.useCallback(
     (nextValue: string) => {
       setIndicatorValue(undefined);
@@ -273,13 +292,13 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
       indicatorIndex,
       selectedPagerIndex,
       indicatorRef,
-      listLeft,
+      transitionsEnabled,
       triggerRects,
       registerTrigger,
       registerContent,
       updateTriggerDisabled,
-      updateTriggerRect,
-      setListLeft,
+      syncTriggerOrder,
+      updateTriggerWidth,
       setListRef: setListNode,
       setPagerRef: setPagerNode,
       selectValue,
@@ -295,12 +314,13 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
       indicatorIndex,
       selectedPagerIndex,
       indicatorRef,
-      listLeft,
       triggerRects,
+      transitionsEnabled,
       registerTrigger,
       registerContent,
       updateTriggerDisabled,
-      updateTriggerRect,
+      syncTriggerOrder,
+      updateTriggerWidth,
       setListNode,
       setPagerNode,
       selectValue,
@@ -328,12 +348,38 @@ TabsRoot.displayName = "TabsRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+function getTabsTriggerValues(children: React.ReactNode): string[] {
+  const values: string[] = [];
+
+  function visit(node: React.ReactNode) {
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    if (!React.isValidElement<TabsTriggerProps>(node)) return;
+    if (node.type === TabsTrigger) {
+      values.push(node.props.value);
+      return;
+    }
+    if (node.type === React.Fragment) visit(node.props.children);
+  }
+
+  visit(children);
+  return values;
+}
+
 export interface TabsListProps extends LynxStyledElementProps {}
 
 export const TabsList = React.forwardRef<unknown, TabsListProps>((props, ref) => {
   const { children, className, style, ...nativeProps } = props;
   const classNames = useClassNames();
-  const { setListLeft, setListRef } = useTabsContext("TabsList");
+  const { items, setListRef, syncTriggerOrder } = useTabsContext("TabsList");
+  const triggerOrder = React.useMemo(() => getTabsTriggerValues(children), [children]);
+
+  React.useEffect(() => {
+    "background only";
+    syncTriggerOrder(triggerOrder);
+  }, [items, syncTriggerOrder, triggerOrder]);
 
   const mergedRef = React.useCallback(
     (node: NodesRef | null) => {
@@ -344,22 +390,12 @@ export const TabsList = React.forwardRef<unknown, TabsListProps>((props, ref) =>
     [ref, setListRef],
   );
 
-  const handleLayoutChange = React.useCallback<LayoutChangeHandler>(
-    (...args) => {
-      "background only";
-      const rect = getLayoutRect(args[0]);
-      if (rect) setListLeft(rect.left);
-    },
-    [setListLeft],
-  );
-
   return (
     <scroll-view
       ref={mergedRef}
       {...nativeProps}
       scroll-orientation="horizontal"
       scroll-bar-enable={false}
-      bindlayoutchange={handleLayoutChange}
       accessibility-element={false}
       accessibility-traits="tabbar"
       className={clsx(classNames.list, className)}
@@ -412,16 +448,17 @@ export const TabsTrigger = React.forwardRef<unknown, TabsTriggerProps>((props, r
   const handleLayoutChange = React.useCallback<LayoutChangeHandler>(
     (...args) => {
       "background only";
-      const rect = getLayoutRect(args[0]);
-      if (rect) context.updateTriggerRect(triggerValue, rect);
+      const width = getTabsLayoutWidth(args[0]);
+      if (width !== null) context.updateTriggerWidth(triggerValue, width);
     },
-    [context.updateTriggerRect, triggerValue],
+    [context.updateTriggerWidth, triggerValue],
   );
 
   const triggerClasses = tabs({
     ...context.variantProps,
     selected: visuallySelected,
     disabled,
+    transitionEnabled: context.transitionsEnabled,
   });
   const label =
     typeof children === "string" || typeof children === "number" ? String(children) : undefined;
@@ -454,8 +491,7 @@ export interface TabsIndicatorProps extends LynxStyledElementProps {}
 export const TabsIndicator = React.forwardRef<unknown, TabsIndicatorProps>((props, ref) => {
   const { className, style, ...nativeProps } = props;
   const classNames = useClassNames();
-  const { indicatorRef, items, listLeft, indicatorIndex, triggerRects } =
-    useTabsContext("TabsIndicator");
+  const { indicatorRef, items, indicatorIndex, triggerRects } = useTabsContext("TabsIndicator");
   const position = indicatorIndex;
   const lowerIndex = Math.max(0, Math.floor(position));
   const upperIndex = Math.min(items.length - 1, Math.ceil(position));
@@ -463,7 +499,7 @@ export const TabsIndicator = React.forwardRef<unknown, TabsIndicatorProps>((prop
   const lowerRect = triggerRects[items[lowerIndex]?.value ?? ""];
   const upperRect = triggerRects[items[upperIndex]?.value ?? ""] ?? lowerRect;
   const x = lowerRect
-    ? lowerRect.left - listLeft + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress
+    ? lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress
     : 0;
   const width = lowerRect
     ? lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress
@@ -602,7 +638,7 @@ export const TabsCarouselCamera = React.forwardRef<unknown, TabsCarouselCameraPr
     const tabsContext = useTabsContext("TabsCarouselCamera");
     const carouselContext = useTabsCarouselContext("TabsCarouselCamera");
     const swipingRef = React.useRef(false);
-    const { indicatorRef, pagerValues, listLeft, triggerRects } = tabsContext;
+    const { indicatorRef, pagerValues, triggerRects } = tabsContext;
     const indicatorRects = pagerValues.map((value) => triggerRects[value] ?? null);
 
     const mergedRef = React.useCallback(
@@ -669,10 +705,7 @@ export const TabsCarouselCamera = React.forwardRef<unknown, TabsCarouselCameraPr
       const upperRect = indicatorRects[upperIndex] ?? lowerRect;
       if (!lowerRect) return;
 
-      const x =
-        lowerRect.left -
-        listLeft +
-        ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress;
+      const x = lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress;
       const width =
         lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress;
 

package/src/components/Tabs/Tabs.utils.ts

@@ -0,0 +1,63 @@
+export interface TabsLayoutChangeEvent {
+  detail?: {
+    width?: number;
+  };
+  params?: {
+    width?: number;
+  };
+}
+
+export interface TabsLayoutRect {
+  left: number;
+  width: number;
+}
+
+export function getTabsLayoutWidth(event: TabsLayoutChangeEvent): number | null {
+  const width = event.detail?.width ?? event.params?.width;
+  if (typeof width !== "number" || !Number.isFinite(width)) return null;
+  return Math.max(0, width);
+}
+
+export function getTabsOrderedItems<T extends { value: string }>(
+  items: T[],
+  values: string[],
+): T[] {
+  const itemsByValue = new Map(items.map((item) => [item.value, item]));
+  const ordered = values.flatMap((value) => {
+    const item = itemsByValue.get(value);
+    if (!item) return [];
+    itemsByValue.delete(value);
+    return [item];
+  });
+  ordered.push(...itemsByValue.values());
+  return ordered;
+}
+
+export function getTabsTriggerRects(
+  values: string[],
+  widths: Record<string, number>,
+): Record<string, TabsLayoutRect> {
+  const rects = Object.create(null) as Record<string, TabsLayoutRect>;
+  let left = 0;
+  let hasCompletePrefix = true;
+
+  for (const value of values) {
+    // biome-ignore lint/suspicious/noPrototypeBuiltins: Object.hasOwn is unavailable in supported Lynx runtimes.
+    const width = Object.prototype.hasOwnProperty.call(widths, value) ? widths[value] : undefined;
+    if (width === undefined) {
+      hasCompletePrefix = false;
+      continue;
+    }
+    if (hasCompletePrefix) rects[value] = { left, width };
+    left += width;
+  }
+
+  return rects;
+}
+
+export function areTabsTransitionsEnabled(
+  values: string[],
+  rects: Record<string, TabsLayoutRect>,
+): boolean {
+  return values.length > 0 && values.every((value) => rects[value] !== undefined);
+}

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

@@ -301,6 +301,54 @@ describe("TextField", () => {
     expect(invoke).not.toHaveBeenCalled();
   });
 
+  it("restores the committed controlled value when blur reports a stale native value", async () => {
+    const inputRef = createRef<NodesRef>();
+
+    function ControlledInput() {
+      const [value, setValue] = useState("초기값");
+
+      return (
+        <TextField.Root value={value} onValueChange={setValue}>
+          <TextField.Input ref={inputRef} />
+        </TextField.Root>
+      );
+    }
+
+    render(<ControlledInput />);
+
+    const input = getRenderedRoot().querySelector("input");
+    if (!input || !inputRef.current) throw new Error("Expected native input to exist.");
+
+    const exec = vi.fn();
+    const invoke = vi.fn(() => ({ exec }));
+    inputRef.current.invoke = invoke as unknown as NodesRef["invoke"];
+
+    fireNativeEvent(inputRef.current, input, "input", {
+      value: "최신값",
+      selectionStart: 3,
+      selectionEnd: 3,
+      isComposing: false,
+    });
+    await flushControlledReconciliation();
+
+    fireNativeEvent(inputRef.current, input, "blur", { value: "이전값" });
+    await flushControlledReconciliation();
+
+    expect(invoke).toHaveBeenCalledTimes(1);
+    expect(invoke).toHaveBeenCalledWith(
+      expect.objectContaining({
+        method: "setValue",
+        params: { value: "최신값" },
+      }),
+    );
+    expect(exec).toHaveBeenCalledTimes(1);
+
+    fireNativeEvent(inputRef.current, input, "blur", { value: "최신값" });
+    await flushControlledReconciliation();
+
+    expect(invoke).toHaveBeenCalledTimes(1);
+  });
+
   it("waits for a parent value update queued in a microtask", async () => {
     const inputRef = createRef<NodesRef>();
 

package/src/components/TextField/TextField.tsx

@@ -456,11 +456,18 @@ function useNativeTextControl({
     (event: Parameters<NonNullable<NativeInputProps["bindblur"]>>[0]) => {
       "background only";
 
+      const nativeValue = event.detail?.value;
+      if (typeof nativeValue === "string") {
+        lastNativeValueRef.current = nativeValue;
+      }
       textFieldContext.setFocused(false);
       keyboardAvoidance?.blur(ownerRef.current);
       bindblur?.(event);
+      if (typeof nativeValue === "string") {
+        reconcileControlledValue(nativeValue);
+      }
     },
-    [bindblur, keyboardAvoidance, textFieldContext.setFocused],
+    [bindblur, keyboardAvoidance, reconcileControlledValue, textFieldContext.setFocused],
   );
 
   const notifyLayoutChanged = React.useCallback(() => {