@seed-design/lynx-react 0.6.3 → 0.7.0

package/lib/components/Checkbox/Checkbox.jsx

@@ -1,6 +1,9 @@
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { usePressTap } from "../../hooks/usePressTap.js";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
+import { mergeProps } from "../../utils/merge-props.js";
 import { InternalIcon } from "../Icon/Icon.jsx";
+import { ScaleFeedbackContentContext } from "../../contexts/ScaleFeedbackContentContext.js";
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
 import * as React from "@lynx-js/react";
 import { isValidElement } from "@lynx-js/react";
@@ -23,10 +26,11 @@ function useCheckmarkControlContext(consumer) {
 }
 var CheckboxRoot = React.forwardRef((props, ref) => {
 	const { children, className, checked: checkedProp, defaultChecked = false, indeterminate = false, disabled = false, onCheckedChange, ...restProps } = props;
-	const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, {
+	const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, restNativeProps] = splitMultipleVariantsProps(restProps, {
 		checkbox,
 		checkmark
 	});
+	const { "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "checkbox", "accessibility-traits": accessibilityTraits, "accessibility-value": accessibilityValue, ...nativeProps } = restNativeProps;
 	const [checked, setChecked] = useControllableState({
 		value: checkedProp,
 		defaultValue: defaultChecked,
@@ -37,21 +41,26 @@ var CheckboxRoot = React.forwardRef((props, ref) => {
 		checked,
 		indeterminate
 	});
-	const { pressed, bindtouchstart, ...pressHandlers } = usePressTap({
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
 		disabled,
 		onTap: toggle
 	});
-	const handleTouchStart = React.useCallback((...args) => {
-		pressSelectionRef.current = {
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		disabled,
+		onTouchStart: React.useCallback(() => {
+			pressSelectionRef.current = {
+				checked,
+				indeterminate
+			};
+			bindtouchstart();
+		}, [
+			bindtouchstart,
 			checked,
 			indeterminate
-		};
-		bindtouchstart(...args);
-	}, [
-		bindtouchstart,
-		checked,
-		indeterminate
-	]);
+		]),
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
 	const rootClassName = checkbox({
 		...checkboxVariantProps,
 		disabled
@@ -65,7 +74,8 @@ var CheckboxRoot = React.forwardRef((props, ref) => {
 		pressStartIndeterminate: pressSelectionRef.current.indeterminate,
 		checkboxVariantProps,
 		checkmarkVariantProps,
-		toggle
+		toggle,
+		scaleFeedbackTargetProps
 	}), [
 		checked,
 		indeterminate,
@@ -73,10 +83,11 @@ var CheckboxRoot = React.forwardRef((props, ref) => {
 		pressed,
 		checkboxVariantProps,
 		checkmarkVariantProps,
-		toggle
+		toggle,
+		scaleFeedbackTargetProps
 	]);
 	return <CheckboxContext.Provider value={contextValue}>
-      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} bindtouchstart={handleTouchStart} {...pressHandlers} {...nativeProps}>
+      <view {...mergeProps(ref ? { ref } : {}, scaleFeedbackTriggerProps, pressHandlers, nativeProps)} className={clsx(rootClassName, className)} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : void 0)} accessibility-value={accessibilityValue ?? (checked ? "checked" : "not checked")}>
         {children}
       </view>
     </CheckboxContext.Provider>;
@@ -86,6 +97,7 @@ var CheckboxControl = React.forwardRef((props, ref) => {
 	const [variantProps, restProps] = checkmark.splitVariantProps(props);
 	const { children, className, ...nativeProps } = restProps;
 	const context = useCheckboxContext("CheckboxControl");
+	const hasScaledContent = React.useContext(ScaleFeedbackContentContext);
 	const checkmarkVariantProps = {
 		...context.checkmarkVariantProps,
 		...variantProps,
@@ -95,6 +107,10 @@ var CheckboxControl = React.forwardRef((props, ref) => {
 		pressed: context.pressed
 	};
 	const classes = checkmark(checkmarkVariantProps);
+	const checkboxControlClassName = checkbox({
+		...context.checkboxVariantProps,
+		disabled: context.disabled
+	}).control;
 	const pressStartClasses = checkmark({
 		...checkmarkVariantProps,
 		checked: context.pressStartChecked,
@@ -112,7 +128,7 @@ var CheckboxControl = React.forwardRef((props, ref) => {
 		iconClassName: classes.icon,
 		checkmarkVariantProps
 	}}>
-      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...nativeProps}>
+      <view {...mergeProps(ref ? { ref } : {}, !hasScaledContent ? context.scaleFeedbackTargetProps : {}, nativeProps)} className={clsx(checkboxControlClassName, rootClassName, className)} {...!hasScaledContent ? { flatten: false } : {}}>
         {isGhost ? <view className={pressStartClasses.background} /> : null}
         {children}
       </view>
@@ -144,7 +160,7 @@ var CheckboxLabel = React.forwardRef((props, ref) => {
 		...context.checkboxVariantProps,
 		disabled: context.disabled
 	}).label;
-	return <text {...ref ? { ref } : {}} className={clsx(labelClassName, className)} {...nativeProps}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(labelClassName, className)}>
       {children}
     </text>;
 });
@@ -152,7 +168,7 @@ CheckboxLabel.displayName = "CheckboxLabel";
 var CheckboxGroup = React.forwardRef((props, ref) => {
 	const { children, className, ...nativeProps } = props;
 	const classes = checkboxGroup();
-	return <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.root, className)}>
       {children}
     </view>;
 });

package/lib/components/Chip/Chip.d.ts

@@ -11,7 +11,7 @@ type ChipPublicVariantProps = Omit<ChipVariantProps, "selected" | "pressed">;
  * - 키보드 focus / focusVisible
  * - `asChild`
  */
-export interface ChipButtonProps extends ChipPublicVariantProps, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+export interface ChipButtonProps extends ChipPublicVariantProps, Omit<LynxStyledElementProps, "flatten">, LynxPressableProps, LynxAccessibilityProps {
     disabled?: boolean;
 }
 export declare const ChipButton: React.ForwardRefExoticComponent<ChipButtonProps & React.RefAttributes<unknown>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAGxC,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAIjF,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAErB,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAItB,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AA6D7E;;;;;;;GAOG;AACH,MAAM,WAAW,eACf,SAAQ,sBAAsB,EAC5B,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,iFA2BrB,CAAC;AAGH,iDAAiD;AACjD,MAAM,WAAW,aAAc,SAAQ,eAAe;CAAG;AAEzD,eAAO,MAAM,QAAQ,+EAEnB,CAAC;AAKH;;;;;;GAMG;AACH,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU,iFA4CrB,CAAC;AAqBH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,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,aAAa,oFAqCxB,CAAC;AAGH;;;;;;GAMG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa,oFAwCxB,CAAC;AAKH,MAAM,WAAW,cAAe,SAAQ,sBAAsB;CAAG;AAEjE,eAAO,MAAM,SAAS,gFAapB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D,eAAO,MAAM,cAAc,qFAEzB,CAAC;AAGH,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;CAAG;AAExE,eAAO,MAAM,gBAAgB,uFAa3B,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D,eAAO,MAAM,cAAc,qFAEzB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAGxC,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAKjF,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAErB,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAKtB,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AA8D7E;;;;;;;GAOG;AACH,MAAM,WAAW,eACf,SAAQ,sBAAsB,EAE5B,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EACvC,kBAAkB,EAClB,sBAAsB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,iFAwCrB,CAAC;AAGH,iDAAiD;AACjD,MAAM,WAAW,aAAc,SAAQ,eAAe;CAAG;AAEzD,eAAO,MAAM,QAAQ,+EAEnB,CAAC;AAKH;;;;;;GAMG;AACH,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU,iFAyDrB,CAAC;AAqBH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,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,aAAa,oFAwCxB,CAAC;AAGH;;;;;;GAMG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa,oFAqDxB,CAAC;AAKH,MAAM,WAAW,cAAe,SAAQ,sBAAsB;CAAG;AAEjE,eAAO,MAAM,SAAS,gFAYpB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D,eAAO,MAAM,cAAc,qFAEzB,CAAC;AAGH,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;CAAG;AAExE,eAAO,MAAM,gBAAgB,uFAY3B,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D,eAAO,MAAM,cAAc,qFAEzB,CAAC"}

package/lib/components/Chip/Chip.jsx

@@ -1,5 +1,7 @@
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { usePressTap } from "../../hooks/usePressTap.js";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
+import { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
 import { IconRequired, IconSlotProvider, PrefixIcon, SuffixIcon } from "../Icon/Icon.jsx";
 import * as React from "@lynx-js/react";
@@ -39,7 +41,7 @@ var ChipRootView = React.forwardRef((props, ref) => {
 	return <ClassNamesProvider value={classes}>
       <IconSlotProvider value={iconSlotContextValue}>
         <IconRequired enabled={variantProps.layout === "iconOnly"}>
-          <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+          <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.root, className)}>
             {children}
           </view>
         </IconRequired>
@@ -48,25 +50,31 @@ var ChipRootView = React.forwardRef((props, ref) => {
 });
 ChipRootView.displayName = "ChipRootView";
 var ChipButton = React.forwardRef((props, ref) => {
-	const { bindtap, "main-thread:bindtap": mainThreadBindtap, disabled = false, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits, ...restProps } = props;
-	const { pressed, ...pressHandlers } = usePressTap({
+	const { bindtap, "main-thread:bindtap": mainThreadBindtap, disabled = false, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "button", "accessibility-traits": accessibilityTraits, ...restProps } = props;
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
 		disabled,
 		onTap: bindtap,
 		mainThreadOnTap: mainThreadBindtap
 	});
-	return <ChipRootView ref={ref} {...restProps} disabled={disabled} selected={false} pressed={pressed} accessibility-element={accessibilityElement} accessibility-traits={disabled ? "disabled" : accessibilityTraits ?? "button"} {...pressHandlers} />;
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		disabled,
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
+	return <ChipRootView {...mergeProps({ ref }, scaleFeedbackTargetProps, scaleFeedbackTriggerProps, pressHandlers, restProps)} disabled={disabled} selected={false} pressed={pressed} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : void 0)} flatten={false} />;
 });
 ChipButton.displayName = "ChipButton";
-var ChipRoot = React.forwardRef((props, ref) => <ChipButton ref={ref} {...props} />);
+var ChipRoot = React.forwardRef((props, ref) => <ChipButton {...mergeProps({ ref }, props)} />);
 ChipRoot.displayName = "ChipRoot";
 var ChipToggle = React.forwardRef((props, ref) => {
-	const { checked: checkedProp, defaultChecked = false, onCheckedChange, bindtap, "main-thread:bindtap": mainThreadBindtap, disabled = false, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits, ...restProps } = props;
+	const { checked: checkedProp, defaultChecked = false, onCheckedChange, bindtap, "main-thread:bindtap": mainThreadBindtap, disabled = false, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "toggle", "accessibility-traits": accessibilityTraits, "accessibility-value": accessibilityValue, ...restProps } = props;
 	const [checked, setChecked] = useControllableState({
 		value: checkedProp,
 		defaultValue: defaultChecked,
 		onChange: onCheckedChange
 	});
-	const { pressed, ...pressHandlers } = usePressTap({
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
 		disabled,
 		onTap: React.useCallback((...args) => {
 			setChecked(!checked);
@@ -78,7 +86,13 @@ var ChipToggle = React.forwardRef((props, ref) => {
 		]),
 		mainThreadOnTap: mainThreadBindtap
 	});
-	return <ChipRootView ref={ref} {...restProps} disabled={disabled} selected={checked} pressed={pressed} accessibility-element={accessibilityElement} accessibility-traits={disabled ? "disabled" : checked ? "selected" : accessibilityTraits ?? "button"} {...pressHandlers} />;
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		disabled,
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
+	return <ChipRootView {...mergeProps({ ref }, scaleFeedbackTargetProps, scaleFeedbackTriggerProps, pressHandlers, restProps)} disabled={disabled} selected={checked} pressed={pressed} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : void 0)} accessibility-value={accessibilityValue ?? (checked ? "checked" : "not checked")} flatten={false} />;
 });
 ChipToggle.displayName = "ChipToggle";
 var ChipRadioGroupContext = React.createContext(null);
@@ -108,18 +122,18 @@ var ChipRadioRoot = React.forwardRef((props, ref) => {
 		disabled
 	]);
 	return <ChipRadioGroupContext.Provider value={contextValue}>
-      <view {...ref ? { ref } : {}} className={className} {...nativeProps}>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={className}>
         {children}
       </view>
     </ChipRadioGroupContext.Provider>;
 });
 ChipRadioRoot.displayName = "ChipRadioRoot";
 var ChipRadioItem = React.forwardRef((props, ref) => {
-	const { value: itemValue, disabled: itemDisabled = false, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits, ...restProps } = props;
+	const { value: itemValue, disabled: itemDisabled = false, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "radio", "accessibility-traits": accessibilityTraits, "accessibility-value": accessibilityValue, ...restProps } = props;
 	const group = useChipRadioGroupContext("ChipRadioItem");
 	const disabled = group.disabled || itemDisabled;
 	const selected = group.value === itemValue;
-	const { pressed, ...pressHandlers } = usePressTap({
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
 		disabled,
 		onTap: React.useCallback((...args) => {
 			if (!selected) group.setValue(itemValue);
@@ -132,28 +146,34 @@ var ChipRadioItem = React.forwardRef((props, ref) => {
 		]),
 		mainThreadOnTap: mainThreadBindtap
 	});
-	return <ChipRootView ref={ref} {...restProps} disabled={disabled} selected={selected} pressed={pressed} accessibility-element={accessibilityElement} accessibility-traits={disabled ? "disabled" : selected ? "selected" : accessibilityTraits ?? "button"} {...pressHandlers} />;
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		disabled,
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
+	return <ChipRootView {...mergeProps({ ref }, scaleFeedbackTargetProps, scaleFeedbackTriggerProps, pressHandlers, restProps)} disabled={disabled} selected={selected} pressed={pressed} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : void 0)} accessibility-value={accessibilityValue ?? (selected ? "selected" : "not selected")} flatten={false} />;
 });
 ChipRadioItem.displayName = "ChipRadioItem";
 var ChipLabel = React.forwardRef((props, ref) => {
 	const classes = useClassNames();
 	const { children, className, ...nativeProps } = props;
-	return <text {...ref ? { ref } : {}} className={clsx(classes.label, className)} {...nativeProps}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.label, className)}>
       {children}
     </text>;
 });
 ChipLabel.displayName = "ChipLabel";
-var ChipPrefixIcon = React.forwardRef((props, ref) => <PrefixIcon ref={ref} {...props} />);
+var ChipPrefixIcon = React.forwardRef((props, ref) => <PrefixIcon {...mergeProps({ ref }, props)} />);
 ChipPrefixIcon.displayName = "ChipPrefixIcon";
 var ChipPrefixAvatar = React.forwardRef((props, ref) => {
 	const classes = useClassNames();
 	const { children, className, ...nativeProps } = props;
-	return <view {...ref ? { ref } : {}} className={clsx(classes.prefixAvatar, className)} {...nativeProps}>
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.prefixAvatar, className)}>
       {children}
     </view>;
 });
 ChipPrefixAvatar.displayName = "ChipPrefixAvatar";
-var ChipSuffixIcon = React.forwardRef((props, ref) => <SuffixIcon ref={ref} {...props} />);
+var ChipSuffixIcon = React.forwardRef((props, ref) => <SuffixIcon {...mergeProps({ ref }, props)} />);
 ChipSuffixIcon.displayName = "ChipSuffixIcon";
 //#endregion
 export { ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle };

package/lib/components/Count/Count.d.ts

@@ -0,0 +1,7 @@
+import { LynxStyledElementProps } from '../../types';
+import * as React from "@lynx-js/react";
+export interface CountProps extends LynxStyledElementProps {
+}
+export declare const Count: React.ForwardRefExoticComponent<CountProps & React.RefAttributes<unknown>>;
+export declare function isCountElement(node: React.ReactNode): node is React.ReactElement<CountProps>;
+//# sourceMappingURL=Count.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Count.d.ts","sourceRoot":"","sources":["../../../src/components/Count/Count.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAGxC,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAQvE,MAAM,WAAW,UAAW,SAAQ,sBAAsB;CAAG;AAE7D,eAAO,MAAM,KAAK,4EAYhB,CAAC;AAIH,wBAAgB,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,IAAI,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAI5F"}

package/lib/components/Count/Count.jsx

@@ -0,0 +1,19 @@
+import * as React from "@lynx-js/react";
+import { isValidElement } from "@lynx-js/react";
+import clsx from "clsx";
+//#region src/components/Count/Count.tsx
+var countMarker = Symbol.for("@seed-design/lynx-react/count");
+var Count = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx("seed-count", className)}>
+      {children}
+    </text>;
+});
+Count.displayName = "Count";
+Count[countMarker] = true;
+function isCountElement(node) {
+	if (!isValidElement(node)) return false;
+	return node.type[countMarker] === true;
+}
+//#endregion
+export { Count, isCountElement };

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

@@ -0,0 +1,2 @@
+export { Count, type CountProps } from './Count';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Count/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAClF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAC9C,sBAAsB;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IAElC;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,8EAmClB,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAClF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrD,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAC9C,sBAAsB;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IAElC;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,8EAkClB,CAAC"}

package/lib/components/Divider/Divider.jsx

@@ -1,3 +1,4 @@
+import { mergeProps } from "../../utils/merge-props.js";
 import { Box } from "../Box/Box.jsx";
 import * as React from "@lynx-js/react";
 //#region src/components/Divider/Divider.tsx
@@ -11,7 +12,7 @@ import * as React from "@lynx-js/react";
 var Divider = React.forwardRef((props, ref) => {
 	const { color = "stroke.neutralMuted", thickness = 1, orientation = "horizontal", inset = false, style, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "separator", ...nativeProps } = props;
 	const isHorizontal = orientation === "horizontal";
-	return <Box {...nativeProps} ref={ref} borderColor={color} borderWidth={0} borderBottomWidth={isHorizontal ? thickness : 0} borderRightWidth={isHorizontal ? 0 : thickness} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} style={{
+	return <Box {...mergeProps({ ref }, nativeProps)} borderColor={color} borderWidth={0} borderBottomWidth={isHorizontal ? thickness : 0} borderRightWidth={isHorizontal ? 0 : thickness} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} style={{
 		width: isHorizontal ? inset ? "calc(100% - 32px)" : "100%" : void 0,
 		height: isHorizontal ? void 0 : inset ? "calc(100% - 32px)" : "100%",
 		marginLeft: inset && isHorizontal ? "16px" : void 0,

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

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AAGpG,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAWpF;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,EAAE,sBAAsB;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,iFAmDpB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;CAAG;AAEnE,eAAO,MAAM,WAAW,kFAatB,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE1F,eAAO,MAAM,UAAU,iFAgBrB,CAAC;AAGH,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;CAAG;AAE1E,eAAO,MAAM,kBAAkB,yFAgB9B,CAAC;AAGF,MAAM,WAAW,2BAA4B,SAAQ,sBAAsB;CAAG;AAE9E,eAAO,MAAM,sBAAsB,6FAiBlC,CAAC;AAKF,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;CAAG;AAEnE,eAAO,MAAM,WAAW,kFAatB,CAAC;AAGH,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;CAAG;AAExE,eAAO,MAAM,gBAAgB,uFAa3B,CAAC;AAGH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;CAAG;AAEzE,eAAO,MAAM,iBAAiB,wFAa5B,CAAC;AAKH,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACtE,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,mBAAmB,0FAiB/B,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AAGpG,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAYpF;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,EAAE,sBAAsB;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,iFA6CpB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;CAAG;AAEnE,eAAO,MAAM,WAAW,kFAYtB,CAAC;AAGH,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE1F,eAAO,MAAM,UAAU,iFAerB,CAAC;AAGH,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;CAAG;AAE1E,eAAO,MAAM,kBAAkB,yFAe9B,CAAC;AAGF,MAAM,WAAW,2BAA4B,SAAQ,sBAAsB;CAAG;AAE9E,eAAO,MAAM,sBAAsB,6FAgBlC,CAAC;AAKF,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;CAAG;AAEnE,eAAO,MAAM,WAAW,kFAYtB,CAAC;AAGH,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;CAAG;AAExE,eAAO,MAAM,gBAAgB,uFAY3B,CAAC;AAGH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;CAAG;AAEzE,eAAO,MAAM,iBAAiB,wFAY5B,CAAC;AAKH,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACtE,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,mBAAmB,0FAgB/B,CAAC"}

package/lib/components/Field/Field.jsx

@@ -1,3 +1,4 @@
+import { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
 import { FieldContext, useFieldContext } from "./context.js";
 import * as React from "@lynx-js/react";
@@ -14,12 +15,7 @@ var FieldRoot = React.forwardRef((props, forwardedRef) => {
 	const [focused, setFocused] = React.useState(false);
 	const rootRef = React.useRef(null);
 	const classes = field({ invalid });
-	const mergedRef = React.useCallback((node) => {
-		"background only";
-		rootRef.current = node;
-		if (typeof forwardedRef === "function") forwardedRef(node);
-		else if (forwardedRef) forwardedRef.current = node;
-	}, [forwardedRef]);
+	const mergedRef = React.useMemo(() => mergeProps({ ref: rootRef }, { ref: forwardedRef }).ref, [forwardedRef]);
 	const contextValue = React.useMemo(() => ({
 		rootRef,
 		disabled,
@@ -37,7 +33,7 @@ var FieldRoot = React.forwardRef((props, forwardedRef) => {
 	]);
 	return <FieldContext.Provider value={contextValue}>
       <FieldClassNamesProvider value={classes}>
-        <view ref={mergedRef} className={clsx(classes.root, className)} {...nativeProps}>
+        <view {...mergeProps({ ref: mergedRef }, nativeProps)} className={clsx(classes.root, className)}>
           {children}
         </view>
       </FieldClassNamesProvider>
@@ -47,7 +43,7 @@ FieldRoot.displayName = "FieldRoot";
 var FieldHeader = React.forwardRef((props, ref) => {
 	const classes = useFieldClassNames();
 	const { children, className, ...nativeProps } = props;
-	return <view {...ref ? { ref } : {}} className={clsx(classes.header, className)} {...nativeProps}>
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.header, className)}>
       {children}
     </view>;
 });
@@ -57,7 +53,7 @@ var FieldLabel = React.forwardRef((props, ref) => {
 	const { children, className, ...nativeProps } = otherProps;
 	const classes = fieldLabel(variantProps);
 	return <FieldLabelClassNamesProvider value={classes}>
-      <text {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+      <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.root, className)}>
         {children}
       </text>
     </FieldLabelClassNamesProvider>;
@@ -66,7 +62,7 @@ FieldLabel.displayName = "FieldLabel";
 var FieldIndicatorText = React.forwardRef((props, ref) => {
 	const classes = useFieldLabelClassNames();
 	const { children, className, ...nativeProps } = props;
-	return <text {...ref ? { ref } : {}} className={clsx(classes.indicatorText, className)} {...nativeProps}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.indicatorText, className)}>
         {"\xA0"}
         {children}
       </text>;
@@ -75,7 +71,7 @@ FieldIndicatorText.displayName = "FieldIndicatorText";
 var FieldRequiredIndicator = React.forwardRef((props, ref) => {
 	const classes = useFieldLabelClassNames();
 	const { children = "*", className, ...nativeProps } = props;
-	return <text {...ref ? { ref } : {}} accessibility-elements-hidden={true} className={clsx(classes.indicatorIcon, className)} {...nativeProps}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} accessibility-elements-hidden={true} className={clsx(classes.indicatorIcon, className)}>
         {" "}
         {children}
       </text>;
@@ -84,7 +80,7 @@ FieldRequiredIndicator.displayName = "FieldRequiredIndicator";
 var FieldFooter = React.forwardRef((props, ref) => {
 	const classes = useFieldClassNames();
 	const { children, className, ...nativeProps } = props;
-	return <view {...ref ? { ref } : {}} className={clsx(classes.footer, className)} {...nativeProps}>
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.footer, className)}>
       {children}
     </view>;
 });
@@ -92,7 +88,7 @@ FieldFooter.displayName = "FieldFooter";
 var FieldDescription = React.forwardRef((props, ref) => {
 	const classes = useFieldClassNames();
 	const { children, className, ...nativeProps } = props;
-	return <text {...ref ? { ref } : {}} className={clsx(classes.description, className)} {...nativeProps}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.description, className)}>
       {children}
     </text>;
 });
@@ -100,7 +96,7 @@ FieldDescription.displayName = "FieldDescription";
 var FieldErrorMessage = React.forwardRef((props, ref) => {
 	const classes = useFieldClassNames();
 	const { children, className, ...nativeProps } = props;
-	return <text {...ref ? { ref } : {}} className={clsx(classes.errorMessage, className)} {...nativeProps}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.errorMessage, className)}>
       {children}
     </text>;
 });
@@ -111,7 +107,7 @@ var FieldCharacterCount = React.forwardRef((props, ref) => {
 		invalid: useFieldContext({ strict: true }).invalid,
 		empty: current === 0
 	});
-	return <view {...ref ? { ref } : {}} className={clsx(classes.characterCountArea, className)} {...nativeProps}>
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.characterCountArea, className)}>
         <text className={classes.characterCount}>{current}</text>
         <text className={classes.maxCharacterCount}>/{max}</text>
       </view>;

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

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

package/lib/components/Icon/Icon.jsx

@@ -1,3 +1,4 @@
+import { mergeProps } from "../../utils/merge-props.js";
 import { useIconColor } from "../../hooks/useIconColor.js";
 import { handleColor, handleDimension } from "../../utils/styled.js";
 import * as React from "@lynx-js/react";
@@ -100,7 +101,7 @@ var IconSlotBase = React.forwardRef((props, ref) => {
 		slot
 	]);
 	if (!hasValidIcon) return null;
-	return <view {...ref ? { ref } : {}} {...nativeProps} main-thread:ref={sourceRef} className={clsx(baseClassName, slotClassName, className)} style={mergeWrapperStyle({
+	return <view {...mergeProps({ "main-thread:ref": sourceRef }, ref ? { ref } : {}, nativeProps)} className={clsx(baseClassName, slotClassName, className)} style={mergeWrapperStyle({
 		size,
 		color,
 		style
@@ -119,7 +120,7 @@ var IconSlotBase = React.forwardRef((props, ref) => {
 IconSlotBase.displayName = "IconSlotBase";
 function createIconComponent(displayName, slot, baseClassName) {
 	const Component = React.forwardRef((props, ref) => {
-		return <IconSlotBase ref={ref} slot={slot} baseClassName={baseClassName} {...props} />;
+		return <IconSlotBase {...mergeProps({ ref }, props)} slot={slot} baseClassName={baseClassName} />;
 	});
 	Component.displayName = displayName;
 	Component[iconSlotMarker] = slot;
@@ -137,7 +138,7 @@ var InternalIcon = React.forwardRef((props, ref) => {
 		...deps ?? []
 	], { sourceRef });
 	if (!isValidElement(icon)) return null;
-	return <view {...ref ? { ref } : {}} {...nativeProps} main-thread:ref={sourceRef} className={className} style={style}>
+	return <view {...mergeProps({ "main-thread:ref": sourceRef }, ref ? { ref } : {}, nativeProps)} className={className} style={style}>
       {cloneElement(icon, {
 		...iconColor,
 		className: icon.props.className,

package/lib/components/InputButton/InputButton.d.ts

@@ -0,0 +1,40 @@
+import { NodesRef } from '@lynx-js/types';
+import { InputButtonVariantProps } from '@seed-design/lynx-css/recipes/input-button';
+import { LynxAccessibilityProps, LynxPressableProps, LynxStyledElementProps } from '../../types';
+import { InternalIconProps } from '../Icon/Icon';
+import * as React from "@lynx-js/react";
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - `size="responsive"`: Lynx에는 CSS viewport breakpoint가 없음
+ * - HTML form 제출과 DOM ARIA id 연결
+ */
+export interface InputButtonRootProps extends Omit<InputButtonVariantProps, "pressed">, LynxStyledElementProps {
+}
+export declare const InputButtonRoot: React.ForwardRefExoticComponent<InputButtonRootProps & React.RefAttributes<NodesRef>>;
+export interface InputButtonButtonProps extends LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+}
+export declare const InputButtonButton: React.ForwardRefExoticComponent<InputButtonButtonProps & React.RefAttributes<unknown>>;
+export interface InputButtonValueProps extends LynxStyledElementProps {
+}
+export declare const InputButtonValue: React.ForwardRefExoticComponent<InputButtonValueProps & React.RefAttributes<unknown>>;
+export interface InputButtonPlaceholderProps extends LynxStyledElementProps {
+}
+export declare const InputButtonPlaceholder: React.ForwardRefExoticComponent<InputButtonPlaceholderProps & React.RefAttributes<unknown>>;
+export interface InputButtonPrefixTextProps extends LynxStyledElementProps {
+}
+export declare const InputButtonPrefixText: React.ForwardRefExoticComponent<InputButtonPrefixTextProps & React.RefAttributes<unknown>>;
+export interface InputButtonPrefixIconProps extends InternalIconProps {
+}
+export declare const InputButtonPrefixIcon: React.ForwardRefExoticComponent<InputButtonPrefixIconProps & React.RefAttributes<unknown>>;
+export interface InputButtonSuffixTextProps extends LynxStyledElementProps {
+}
+export declare const InputButtonSuffixText: React.ForwardRefExoticComponent<InputButtonSuffixTextProps & React.RefAttributes<unknown>>;
+export interface InputButtonSuffixIconProps extends InternalIconProps {
+}
+export declare const InputButtonSuffixIcon: React.ForwardRefExoticComponent<InputButtonSuffixIconProps & React.RefAttributes<unknown>>;
+export interface InputButtonClearButtonProps extends InternalIconProps, LynxPressableProps, LynxAccessibilityProps {
+}
+export declare const InputButtonClearButton: React.ForwardRefExoticComponent<InputButtonClearButtonProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=InputButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputButton.d.ts","sourceRoot":"","sources":["../../../src/components/InputButton/InputButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,4CAA4C,CAAC;AAIpD,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAsBpE;;;;;;GAMG;AACH,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAC9C,sBAAsB;CAAG;AAE7B,eAAO,MAAM,eAAe,uFAwB3B,CAAC;AAKF,MAAM,WAAW,sBACf,SAAQ,sBAAsB,EAC5B,kBAAkB,EAClB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,iBAAiB,wFAiC5B,CAAC;AAKH,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;CAAG;AAExE,eAAO,MAAM,gBAAgB,uFAe3B,CAAC;AAGH,MAAM,WAAW,2BAA4B,SAAQ,sBAAsB;CAAG;AAE9E,eAAO,MAAM,sBAAsB,6FAiBlC,CAAC;AAKF,MAAM,WAAW,0BAA2B,SAAQ,sBAAsB;CAAG;AAE7E,eAAO,MAAM,qBAAqB,4FAiBjC,CAAC;AAGF,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB;CAAG;AAExE,eAAO,MAAM,qBAAqB,4FAejC,CAAC;AAGF,MAAM,WAAW,0BAA2B,SAAQ,sBAAsB;CAAG;AAE7E,eAAO,MAAM,qBAAqB,4FAiBjC,CAAC;AAGF,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB;CAAG;AAExE,eAAO,MAAM,qBAAqB,4FAejC,CAAC;AAKF,MAAM,WAAW,2BACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,sBAAsB,6FAqClC,CAAC"}