@seed-design/lynx-react 0.6.3 → 0.7.0

package/lib/utils/create-slot-recipe-context.jsx

@@ -1,3 +1,4 @@
+import { mergeProps } from "./merge-props.js";
 import { createContext, forwardRef, useContext } from "@lynx-js/react";
 import clsx from "clsx";
 //#region src/utils/create-slot-recipe-context.tsx
@@ -30,11 +31,7 @@ function createSlotRecipeContext(recipe) {
 		assertNotIntrinsicComponent(Component, "withRootProvider");
 		const { defaultProps } = options ?? {};
 		const StyledComponent = (innerProps) => {
-			const props = {
-				...defaultProps ?? {},
-				...useProps(),
-				...innerProps
-			};
+			const props = mergeProps(defaultProps ?? {}, useProps() ?? {}, innerProps);
 			restoreDefaultProps(props, defaultProps);
 			const [variantProps, otherProps] = recipe.splitVariantProps(props);
 			const classNames = recipe(variantProps);
@@ -51,11 +48,7 @@ function createSlotRecipeContext(recipe) {
 		assertNotIntrinsicComponent(Component, "withProvider");
 		const { defaultProps } = options ?? {};
 		const StyledComponent = forwardRef((innerProps, ref) => {
-			const props = {
-				...defaultProps ?? {},
-				...useProps(),
-				...innerProps
-			};
+			const props = mergeProps(defaultProps ?? {}, useProps() ?? {}, innerProps);
 			restoreDefaultProps(props, defaultProps);
 			const [variantProps, otherProps] = recipe.splitVariantProps(props);
 			const classNames = recipe(variantProps);
@@ -63,7 +56,7 @@ function createSlotRecipeContext(recipe) {
 			const userClassName = props["className"];
 			return <ClassNamesProvider value={classNames}>
           <PropsProvider value={variantProps}>
-            <Component {...ref ? { ref } : {}} {...otherProps} className={clsx(slotClassName, userClassName)} />
+            <Component {...mergeProps(ref ? { ref } : {}, otherProps)} className={clsx(slotClassName, userClassName)} />
           </PropsProvider>
         </ClassNamesProvider>;
 		});
@@ -74,15 +67,12 @@ function createSlotRecipeContext(recipe) {
 		assertNotIntrinsicComponent(Component, "withContext");
 		const { defaultProps } = options ?? {};
 		const StyledComponent = forwardRef((innerProps, ref) => {
-			const props = {
-				...defaultProps ?? {},
-				...innerProps
-			};
+			const props = mergeProps(defaultProps ?? {}, innerProps);
 			restoreDefaultProps(props, defaultProps);
 			const classNames = useClassNames();
 			const slotClassName = slot ? classNames[slot] : void 0;
 			const userClassName = props["className"];
-			return <Component {...ref ? { ref } : {}} {...props} className={clsx(slotClassName, userClassName)} />;
+			return <Component {...mergeProps(ref ? { ref } : {}, props)} className={clsx(slotClassName, userClassName)} />;
 		});
 		StyledComponent.displayName = Component.displayName || Component.name;
 		return StyledComponent;

package/lib/utils/index.d.ts

@@ -2,4 +2,5 @@ export * from './create-slot-recipe-context';
 export * from './get-seed-class-name';
 export * from './resolve-recipe-token';
 export * from './split-multiple-variants-props';
+export * from './merge-props';
 //# sourceMappingURL=index.d.ts.map

package/lib/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,eAAe,CAAC"}

package/lib/utils/merge-props.d.ts

@@ -0,0 +1,15 @@
+type Merge<A, B> = Omit<A, keyof B> & {
+    [K in keyof B]: undefined extends B[K] ? Exclude<B[K], undefined> | (K extends keyof A ? A[K] : undefined) : B[K];
+};
+type Merged<T extends object[], Result = {}> = T extends [
+    infer First extends object,
+    ...infer Rest extends object[]
+] ? Merged<Rest, Merge<Result, First>> : Result;
+/**
+ * Merges props without changing event threads or propagation modes.
+ * Same-key handlers run last-source first, matching SEED React. Return values
+ * and preventDefault do not cancel another handler. Ref cleanup is preserved.
+ */
+export declare function mergeProps<T extends object[]>(...sources: T): Merged<T>;
+export {};
+//# sourceMappingURL=merge-props.d.ts.map

package/lib/utils/merge-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-props.d.ts","sourceRoot":"","sources":["../../src/utils/merge-props.ts"],"names":[],"mappings":"AAKA,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG;KACnC,CAAC,IAAI,MAAM,CAAC,GAAG,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAClC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GACjE,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACF,KAAK,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,MAAM,GAAG,EAAE,IAAI,CAAC,SAAS;IACvD,MAAM,KAAK,SAAS,MAAM;IAC1B,GAAG,MAAM,IAAI,SAAS,MAAM,EAAE;CAC/B,GACG,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,GAClC,MAAM,CAAC;AAKX;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,GAAG,OAAO,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAoCvE"}

package/lib/utils/merge-props.js

@@ -0,0 +1,36 @@
+import { composeEventHandlers, composeMainThreadEventHandlers } from "./compose-event-handlers.js";
+import { mergeMainThreadRefs, mergeRefs } from "./merge-refs.js";
+import clsx from "clsx";
+//#region src/utils/merge-props.ts
+var nativeEvent = /^(?:main-thread:)?(?:(?:capture|global)-)?(?:bind|catch)[a-z]/;
+var callbackEvent = /^on[A-Z]/;
+/**
+* Merges props without changing event threads or propagation modes.
+* Same-key handlers run last-source first, matching SEED React. Return values
+* and preventDefault do not cancel another handler. Ref cleanup is preserved.
+*/
+function mergeProps(...sources) {
+	const result = {};
+	const refs = [];
+	const mainThreadRefs = [];
+	for (const source of sources) for (const [key, value] of Object.entries(source)) {
+		if (value === void 0) continue;
+		const previous = result[key];
+		if (key === "ref" || key === "main-thread:ref") {
+			if (value == null) continue;
+			(key === "ref" ? refs : mainThreadRefs).push(value);
+		} else if (key === "className") result[key] = clsx(previous, value);
+		else if (key === "style" && typeof value === "object" && value !== null) result[key] = {
+			...typeof previous === "object" ? previous : {},
+			...value
+		};
+		else if (nativeEvent.test(key) || callbackEvent.test(key)) if (previous && value) result[key] = (key.startsWith("main-thread:") ? composeMainThreadEventHandlers : composeEventHandlers)(value, previous);
+		else result[key] = value;
+		else result[key] = value;
+	}
+	if (refs.length) result["ref"] = refs.length === 1 ? refs[0] : mergeRefs(...refs);
+	if (mainThreadRefs.length) result["main-thread:ref"] = mainThreadRefs.length === 1 ? mainThreadRefs[0] : mergeMainThreadRefs(...mainThreadRefs);
+	return result;
+}
+//#endregion
+export { mergeProps };

package/lib/utils/merge-refs.d.ts

@@ -0,0 +1,8 @@
+type Cleanup = void | (() => void);
+export type Ref<T> = {
+    current: T | null;
+} | ((value: T | null) => Cleanup);
+export declare function mergeRefs<T>(...refs: Ref<T>[]): Ref<T>;
+export declare function mergeMainThreadRefs<T>(...refs: Ref<T>[]): Ref<T>;
+export {};
+//# sourceMappingURL=merge-refs.d.ts.map

package/lib/utils/merge-refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-refs.d.ts","sourceRoot":"","sources":["../../src/utils/merge-refs.ts"],"names":[],"mappings":"AAAA,KAAK,OAAO,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AACnC,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI;IAAE,OAAO,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC;AAa5E,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAWtD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAgBhE"}

package/lib/utils/merge-refs.js

@@ -0,0 +1,38 @@
+//#region src/utils/merge-refs.ts
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	ref.current = value;
+}
+function setMainThreadRef(ref, value) {
+	"main thread";
+	if (typeof ref === "function") return ref(value);
+	ref.current = value;
+}
+function mergeRefs(...refs) {
+	return (value) => {
+		const cleanups = refs.map((ref) => setRef(ref, value));
+		return () => {
+			refs.forEach((ref, index) => {
+				const cleanup = cleanups[index];
+				if (cleanup) cleanup();
+				else setRef(ref, null);
+			});
+		};
+	};
+}
+function mergeMainThreadRefs(...refs) {
+	return (value) => {
+		"main thread";
+		const cleanups = [];
+		for (let index = 0; index < refs.length; index++) cleanups.push(setMainThreadRef(refs[index], value));
+		return () => {
+			for (let index = 0; index < refs.length; index++) {
+				const cleanup = cleanups[index];
+				if (cleanup) cleanup();
+				else setMainThreadRef(refs[index], null);
+			}
+		};
+	};
+}
+//#endregion
+export { mergeMainThreadRefs, mergeRefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -33,13 +33,13 @@
   },
   "peerDependencies": {
     "@lynx-js/react": ">=0.117.0",
-    "@lynx-js/types": ">=3.7.0",
-    "@seed-design/lynx-css": "0.0.0 || >=0.10.0 <1.0.0"
+    "@lynx-js/types": ">=3.9.0",
+    "@seed-design/lynx-css": "0.0.0 || >=0.11.0 <1.0.0"
   },
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
-    "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.10.2",
+    "@lynx-js/types": "^3.9.0",
+    "@seed-design/lynx-css": "0.11.0",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",
@@ -51,6 +51,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@floating-ui/core": "^1.8.0",
     "@lynx-js/lynx-ui-common": "^3.130.0",
     "@lynx-js/lynx-ui-sheet": "^3.130.1",
     "clsx": "^2.1.1",

package/src/components/Accordion/Accordion.tsx

@@ -6,6 +6,7 @@ import { accordion, type AccordionVariantProps } from "@seed-design/lynx-css/rec
 
 import { useControllableState } from "../../hooks/useControllableState";
 import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
 import type {
   LynxAccessibilityProps,
   LynxIconElementProps,
@@ -18,6 +19,7 @@ import type {
 import { toArray } from "../../utils/children";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import { InternalIcon } from "../Icon/Icon";
+import { mergeProps } from "../../utils/merge-props";
 
 /**
  * @platform Lynx
@@ -126,9 +128,8 @@ export const AccordionRoot = React.forwardRef<unknown, AccordionRootProps>((prop
   return (
     <AccordionContext.Provider value={contextValue}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classes.root, className)}
-        {...nativeProps}
       >
         {items.map((item, index) => (
           <AccordionItemPositionContext.Provider
@@ -173,9 +174,8 @@ export const AccordionItem = React.forwardRef<unknown, AccordionItemProps>((prop
     <AccordionItemContext.Provider value={contextValue}>
       <ClassNamesProvider value={classes}>
         <view
-          {...(ref ? { ref: ref as LynxViewRef } : {})}
+          {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
           className={clsx(classes.item, className)}
-          {...nativeProps}
         >
           {children}
           {!isLast ? (
@@ -203,10 +203,9 @@ export const AccordionHeader = React.forwardRef<unknown, AccordionHeaderProps>((
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.header, className)}
       accessibility-heading={accessibilityHeading}
-      {...nativeProps}
     >
       {children}
     </view>
@@ -245,10 +244,16 @@ export const AccordionTrigger = React.forwardRef<unknown, AccordionTriggerProps>
     },
     [bindtap, context],
   );
-  const { pressed, ...pressHandlers } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     disabled: context.disabled,
     onTap: handleTap,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled: context.disabled,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
   const classes = accordion({
     ...context.variantProps,
     open: context.open,
@@ -259,7 +264,12 @@ export const AccordionTrigger = React.forwardRef<unknown, AccordionTriggerProps>
   return (
     <ClassNamesProvider value={classes}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(
+          ref ? { ref: ref as LynxViewRef } : {},
+          pressHandlers,
+          scaleFeedbackTriggerProps,
+          nativeProps,
+        )}
         className={clsx(classes.trigger, className)}
         accessibility-element={accessibilityElement}
         accessibility-role-description={accessibilityRoleDescription}
@@ -268,11 +278,11 @@ export const AccordionTrigger = React.forwardRef<unknown, AccordionTriggerProps>
           accessibilityValue ??
           (context.open ? expandedAccessibilityValue : collapsedAccessibilityValue)
         }
-        {...pressHandlers}
-        {...nativeProps}
       >
         <view className={classes.pressedOverlay} accessibility-elements-hidden={true} />
-        {children}
+        <view className={classes.triggerContent} {...scaleFeedbackTargetProps}>
+          {children}
+        </view>
       </view>
     </ClassNamesProvider>
   );
@@ -311,11 +321,10 @@ export const AccordionContent = React.forwardRef<unknown, AccordionContentProps>
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.content, className)}
       style={{ ...style, height: context.open ? `${contentHeight}px` : "0px" }}
       accessibility-elements-hidden={!context.open || accessibilityElementsHidden}
-      {...nativeProps}
     >
       <view className={classes.contentInner} bindlayoutchange={handleContentLayoutChange}>
         {children}
@@ -335,9 +344,8 @@ export const AccordionBody = React.forwardRef<unknown, AccordionBodyProps>((prop
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.body, className)}
-      {...nativeProps}
     >
       {children}
     </view>
@@ -355,9 +363,8 @@ export const AccordionTitle = React.forwardRef<unknown, AccordionTitleProps>((pr
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classes.title, className)}
-      {...nativeProps}
     >
       {children}
     </text>
@@ -376,9 +383,8 @@ export const AccordionDescription = React.forwardRef<unknown, AccordionDescripti
 
     return (
       <text
-        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
         className={clsx(classes.description, className)}
-        {...nativeProps}
       >
         {children}
       </text>
@@ -397,9 +403,8 @@ export const AccordionPrefix = React.forwardRef<unknown, AccordionPrefixProps>((
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.prefix, className)}
-      {...nativeProps}
     >
       {children}
     </view>
@@ -423,9 +428,11 @@ export const AccordionSuffixIcon = React.forwardRef<unknown, AccordionSuffixIcon
     if (icon) {
       return (
         <view
-          {...(ref ? { ref: ref as LynxViewRef } : {})}
-          accessibility-elements-hidden={true}
-          {...nativeProps}
+          {...mergeProps(
+            { "accessibility-elements-hidden": true },
+            ref ? { ref: ref as LynxViewRef } : {},
+            nativeProps,
+          )}
         >
           <InternalIcon
             icon={icon}
@@ -439,11 +446,13 @@ export const AccordionSuffixIcon = React.forwardRef<unknown, AccordionSuffixIcon
 
     return (
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(
+          { "accessibility-elements-hidden": true },
+          ref ? { ref: ref as LynxViewRef } : {},
+          nativeProps,
+        )}
         className={mergedClassName}
         style={style}
-        accessibility-elements-hidden={true}
-        {...nativeProps}
       >
         {children}
       </view>

package/src/components/ActionButton/ActionButton.tsx

@@ -7,6 +7,7 @@ import * as React from "@lynx-js/react";
 import { isValidElement, useMemo } from "@lynx-js/react";
 
 import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
 import type {
   LynxElementProps,
   LynxPressableProps,
@@ -36,6 +37,7 @@ import {
   type PrefixIconProps,
   type SuffixIconProps,
 } from "../Icon/Icon";
+import { mergeProps } from "../../utils/merge-props";
 
 // Root/TextSlot 은 `withProvider("view", ...)` / `withContext("text", ...)` 를 쓰지 않는다.
 // intrinsic string 인자는 `React.createElement("view", ...)` 로 컴파일되어 Lynx 컴파일러의
@@ -63,7 +65,9 @@ interface ActionButtonRootOwnProps
     LynxTouchProps,
     ActionButtonAccessibilityProps {}
 
-interface ActionButtonRootProps extends ActionButtonVariantProps, ActionButtonRootOwnProps {}
+interface ActionButtonRootProps extends ActionButtonVariantProps, ActionButtonRootOwnProps {
+  flatten?: false;
+}
 
 function resolveProgressCircleSize(
   actionButtonSize: ActionButtonVariantProps["size"],
@@ -131,8 +135,7 @@ const ActionButtonRoot = React.forwardRef<unknown, ActionButtonRootProps>((inner
       <PropsProvider value={propsForContext}>
         <IconSlotProvider value={iconSlotContextValue}>
           <view
-            {...(ref ? { ref: ref as LynxViewRef } : {})}
-            {...rest}
+            {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, rest)}
             className={clsx(classNames.root, userClassName)}
           >
             {children as React.ReactNode}
@@ -153,8 +156,7 @@ const ActionButtonTextSlot = React.forwardRef<unknown, ActionButtonTextSlotProps
   const classNames = useClassNames();
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...rest}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, rest)}
       className={clsx(classNames.text, userClassName)}
     >
       {children}
@@ -276,7 +278,8 @@ function ActionButtonLoadingIndicator({ size }: { size: ActionButtonVariantProps
 export interface ActionButtonProps
   extends Omit<ActionButtonVariantProps, "pressed">,
     Pick<StyleProps, "flexGrow">,
-    LynxElementProps,
+    // Keep the scale target's Android View even if shared props later expose flatten.
+    Omit<LynxElementProps, "flatten">,
     LynxPressableProps,
     ActionButtonAccessibilityProps {
   icon?: IconProps["icon"];
@@ -315,24 +318,36 @@ export const ActionButton = React.forwardRef<unknown, ActionButtonProps>((props,
     );
   }
 
-  const { pressed, ...pressTapHandlers } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressTapHandlers } =
+    usePressTap({
+      disabled: !isInteractive,
+      onTap: bindtap,
+      mainThreadOnTap: mainThreadBindtap,
+    });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
     disabled: !isInteractive,
-    onTap: bindtap,
-    mainThreadOnTap: mainThreadBindtap,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
   });
 
   return (
     <IconRequired enabled={isIconOnly}>
       <ActionButtonRoot
-        {...variantAndRest}
+        {...mergeProps(
+          { ref },
+          scaleFeedbackTargetProps,
+          scaleFeedbackTriggerProps,
+          pressTapHandlers,
+          variantAndRest,
+        )}
         layout={layout}
         pressed={pressed}
-        ref={ref}
         style={flexGrow != null ? { flexGrow: resolveFlexValue(flexGrow) } : undefined}
         accessibility-element={accessibilityElement}
         accessibility-label={accessibilityLabel}
         accessibility-traits={accessibilityTraits}
-        {...pressTapHandlers}
+        flatten={false}
       >
         {loading ? (
           <>

package/src/components/AppBar/AppBar.tsx

@@ -19,6 +19,7 @@ import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context"
 import { Icon } from "../Icon";
 import { AppBarProvider, useAppBarContext } from "./context";
 import { getLayoutWidth, getMainLayoutStyle, useAppBar } from "./useAppBar";
+import { mergeProps } from "../../utils/merge-props";
 
 type AppBarClassNames = ReturnType<typeof appBar>;
 type AppBarMainClassNames = ReturnType<typeof appBarMain>;
@@ -61,8 +62,7 @@ export const AppBarRoot = React.forwardRef<unknown, AppBarRootProps>((props, ref
     <AppBarProvider value={contextValue}>
       <AppBarClassNamesProvider value={classNames}>
         <view
-          {...(ref ? { ref: ref as LynxViewRef } : {})}
-          {...nativeProps}
+          {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
           className={clsx(classNames.root, className)}
           style={
             {
@@ -106,9 +106,11 @@ export const AppBarLeft = React.forwardRef<unknown, AppBarLeftProps>((props, ref
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
-      bindlayoutchange={handleLayoutChange}
+      {...mergeProps(
+        { bindlayoutchange: handleLayoutChange },
+        ref ? { ref: ref as LynxViewRef } : {},
+        nativeProps,
+      )}
       className={clsx(classNames.left, className)}
     >
       {children}
@@ -139,9 +141,11 @@ export const AppBarRight = React.forwardRef<unknown, AppBarRightProps>((props, r
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
-      bindlayoutchange={handleLayoutChange}
+      {...mergeProps(
+        { bindlayoutchange: handleLayoutChange },
+        ref ? { ref: ref as LynxViewRef } : {},
+        nativeProps,
+      )}
       className={clsx(classNames.right, className)}
     >
       {children}
@@ -175,8 +179,7 @@ export const AppBarMain = React.forwardRef<unknown, AppBarMainProps>((props, ref
   return (
     <AppBarMainClassNamesProvider value={classNames}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
-        {...nativeProps}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classNames.root, className)}
         style={
           {
@@ -201,8 +204,7 @@ export const AppBarTitle = React.forwardRef<unknown, AppBarTitleProps>((props, r
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classNames.title, className)}
     >
       {children}
@@ -219,8 +221,7 @@ export const AppBarSubtitle = React.forwardRef<unknown, AppBarSubtitleProps>((pr
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classNames.subtitle, className)}
     >
       {children}
@@ -256,8 +257,7 @@ export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       accessibility-element={accessibilityElement}
       accessibility-label={accessibilityLabel}
       accessibility-traits={accessibilityTraits}
@@ -277,8 +277,7 @@ export const AppBarSlot = React.forwardRef<unknown, AppBarSlotProps>((props, ref
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classNames.custom, className)}
     >
       {children}

package/src/components/Badge/Badge.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import * as React from "@lynx-js/react";
 
 import type { LynxStyledElementProps, LynxViewRef } from "../../types";
+import { mergeProps } from "../../utils/merge-props";
 
 /**
  * @platform Lynx
@@ -20,8 +21,7 @@ export const Badge = React.forwardRef<unknown, BadgeProps>((props, ref) => {
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.root, className)}
     >
       <text className={classes.label}>{children}</text>