@seed-design/lynx-react 0.6.2 → 0.7.0

package/lib/components/PageBanner/PageBanner.jsx

@@ -1,7 +1,10 @@
 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 { IconSlotProvider } from "../Icon/Icon.jsx";
+import { ScaleFeedback } from "../ScaleFeedback/ScaleFeedback.jsx";
 import * as React from "@lynx-js/react";
 import clsx from "clsx";
 import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
@@ -30,7 +33,8 @@ var PageBannerRoot = React.forwardRef((props, ref) => {
 	});
 	const classNames = pageBanner({
 		...variantProps,
-		pressed: pressTap.pressed
+		pressed: pressTap.pressed,
+		interactive: isInteractive
 	});
 	const dismiss = useMemoizedFn(() => {
 		if (!open) return;
@@ -60,7 +64,7 @@ var PageBannerRoot = React.forwardRef((props, ref) => {
       <ClassNamesProvider value={classNames}>
         <PropsProvider value={variantProps}>
           <IconSlotProvider value={iconSlotContextValue}>
-            <view {...ref ? { ref } : {}} {...nativeProps} {...isInteractive ? pressTap : {}} accessibility-element={accessibilityElement ?? (isInteractive ? true : void 0)} accessibility-traits={accessibilityTraits ?? (isInteractive ? "button" : void 0)} className={clsx(classNames.root, className)} style={style}>
+            <view {...mergeProps(ref ? { ref } : {}, isInteractive ? pressTap : {}, nativeProps)} accessibility-element={accessibilityElement ?? (isInteractive ? true : void 0)} accessibility-traits={accessibilityTraits ?? (isInteractive ? "button" : void 0)} className={clsx(classNames.root, className)} style={style}>
               {children}
             </view>
           </IconSlotProvider>
@@ -72,7 +76,7 @@ PageBannerRoot.displayName = "PageBannerRoot";
 var PageBannerContent = React.forwardRef((props, ref) => {
 	const { children, className, style, ...nativeProps } = props;
 	const classNames = useClassNames();
-	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.content, className)} style={style}>
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.content, className)} style={style}>
       {children}
     </view>;
 });
@@ -80,7 +84,7 @@ PageBannerContent.displayName = "PageBannerContent";
 var PageBannerBody = React.forwardRef((props, ref) => {
 	const { children, className, style, ...nativeProps } = props;
 	const classNames = useClassNames();
-	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.body, className)} style={style}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.body, className)} style={style}>
       {children}
     </text>;
 });
@@ -88,7 +92,7 @@ PageBannerBody.displayName = "PageBannerBody";
 var PageBannerTitle = React.forwardRef((props, ref) => {
 	const { children, className, style, ...nativeProps } = props;
 	const classNames = useClassNames();
-	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.title, className)} style={style}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.title, className)} style={style}>
       {children}
       {"  "}
     </text>;
@@ -97,7 +101,7 @@ PageBannerTitle.displayName = "PageBannerTitle";
 var PageBannerDescription = React.forwardRef((props, ref) => {
 	const { children, className, style, ...nativeProps } = props;
 	const classNames = useClassNames();
-	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.description, className)} style={style}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.description, className)} style={style}>
         {children}
       </text>;
 });
@@ -105,42 +109,49 @@ PageBannerDescription.displayName = "PageBannerDescription";
 var PageBannerButton = React.forwardRef((props, ref) => {
 	const { children, className, style, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits = "button", ...nativeProps } = props;
 	const classNames = useClassNames();
-	return <text {...ref ? { ref } : {}} {...nativeProps} accessibility-element={accessibilityElement} accessibility-traits={accessibilityTraits} className={clsx(classNames.button, className)} style={style}>
-      {children}
-    </text>;
+	return <ScaleFeedback>
+      <text {...mergeProps(ref ? { ref } : {}, nativeProps)} accessibility-element={accessibilityElement} accessibility-traits={accessibilityTraits} className={clsx(classNames.button, className)} style={style}>
+        {children}
+      </text>
+    </ScaleFeedback>;
 });
 PageBannerButton.displayName = "PageBannerButton";
 var PageBannerCloseButton = React.forwardRef((props, ref) => {
 	const { children, className, style, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits = "button", ...nativeProps } = props;
 	const parentVariantProps = useProps() ?? {};
 	const { dismiss } = usePageBannerContext("PageBannerCloseButton");
-	const pressTap = usePressTap({
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressTapHandlers } = usePressTap({
 		onTap: useMemoizedFn((event) => {
 			bindtap?.(event);
 			dismiss();
 		}),
 		mainThreadOnTap: mainThreadBindtap
 	});
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
 	const classNames = pageBanner({
 		...parentVariantProps,
-		closeButtonPressed: pressTap.pressed
+		closeButtonPressed: pressed
 	});
 	const iconSlotContextValue = React.useMemo(() => ({
 		classNames: { suffixIcon: classNames.closeButtonIcon },
 		deps: [
 			parentVariantProps.tone ?? "neutral",
 			parentVariantProps.variant ?? "weak",
-			pressTap.pressed
+			pressed
 		]
 	}), [
 		classNames.closeButtonIcon,
 		parentVariantProps.tone,
 		parentVariantProps.variant,
-		pressTap.pressed
+		pressed
 	]);
 	if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) console.warn("PageBannerCloseButton requires `accessibility-label` for accessibility.");
 	return <IconSlotProvider value={iconSlotContextValue}>
-        <view {...ref ? { ref } : {}} {...nativeProps} {...pressTap} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-traits={accessibilityTraits} className={clsx(classNames.closeButton, className)} style={style}>
+        <view {...mergeProps(ref ? { ref } : {}, pressTapHandlers, scaleFeedbackTriggerProps, scaleFeedbackTargetProps, nativeProps)} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-traits={accessibilityTraits} className={clsx(classNames.closeButton, className)} style={style} flatten={false}>
           {children}
         </view>
       </IconSlotProvider>;

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

@@ -1,7 +1,7 @@
 import { ProgressCircleVariantProps } from '@seed-design/lynx-css/recipes/progress-circle';
-import { LynxStyledElementProps } from '../../types';
+import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
 import type * as React from "@lynx-js/react";
-export interface ProgressCircleRootProps extends ProgressCircleVariantProps, LynxStyledElementProps {
+export interface ProgressCircleRootProps extends ProgressCircleVariantProps, LynxStyledElementProps, LynxAccessibilityProps {
     minValue?: number;
     maxValue?: number;
     value?: number;

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

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

package/lib/components/ProgressCircle/ProgressCircle.jsx

@@ -114,13 +114,14 @@ var TRANSITION_DURATION = 300;
 */
 var ProgressCircleRoot = forwardRef((props, ref) => {
 	const [variantProps, otherProps] = progressCircle.splitVariantProps(props);
-	const { children, className, style, minValue, maxValue, value } = otherProps;
+	const { children, className, style, minValue, maxValue, value, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "progressbar", "accessibility-value": accessibilityValue, ...nativeProps } = otherProps;
 	const size = variantProps.size ?? "40";
 	const tone = variantProps.tone ?? "neutral";
 	const numSize = Number(size);
 	const isDeterminate = minValue !== void 0 && maxValue !== void 0 && value !== void 0;
 	const range = (maxValue ?? 1) - (minValue ?? 0);
 	const progress = isDeterminate ? range === 0 ? 0 : ((value ?? 0) - (minValue ?? 0)) / range : 0;
+	const defaultAccessibilityValue = isDeterminate ? `minimum ${minValue}, maximum ${maxValue}, current ${value}` : "indeterminate";
 	const classes = progressCircle({
 		tone,
 		size
@@ -137,11 +138,11 @@ var ProgressCircleRoot = forwardRef((props, ref) => {
 		classes
 	]);
 	return <ProgressCircleContext.Provider value={ctx}>
-      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} style={{
+      <view {...nativeProps} {...ref ? { ref } : {}} className={clsx(classes.root, className)} style={{
 		...style,
 		width: `${numSize}px`,
 		height: `${numSize}px`
-	}}>
+	}} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} accessibility-value={accessibilityValue ?? defaultAccessibilityValue}>
         {children}
       </view>
     </ProgressCircleContext.Provider>;

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

@@ -1,7 +1,8 @@
 import { ReactElement } from '@lynx-js/react';
 import { RadioVariantProps } from '@seed-design/lynx-css/recipes/radio';
 import { RadiomarkVariantProps } from '@seed-design/lynx-css/recipes/radiomark';
-import { LynxIconElementProps, LynxStyledElementProps } from '../../types';
+import { ScaleFeedbackTargetProps } from '../../hooks/useScaleFeedback';
+import { LynxAccessibilityProps, LynxIconElementProps, LynxStyledElementProps } from '../../types';
 import * as React from "@lynx-js/react";
 interface RadioGroupItemContextValue {
     value: string;
@@ -9,16 +10,17 @@ interface RadioGroupItemContextValue {
     disabled: boolean;
     pressed: boolean;
     select: () => void;
+    scaleFeedbackTargetProps: ScaleFeedbackTargetProps;
 }
 export declare function useRadioGroupItemContext(consumer: string): RadioGroupItemContextValue;
-export interface RadioGroupRootProps extends RadioVariantProps, Omit<RadiomarkVariantProps, "size" | "checked" | "disabled">, LynxStyledElementProps {
+export interface RadioGroupRootProps extends RadioVariantProps, Omit<RadiomarkVariantProps, "size" | "checked" | "disabled">, LynxStyledElementProps, LynxAccessibilityProps {
     value?: string;
     defaultValue?: string;
     disabled?: boolean;
     onValueChange?: (value: string) => void;
 }
 export declare const RadioGroupRoot: React.ForwardRefExoticComponent<RadioGroupRootProps & React.RefAttributes<unknown>>;
-export interface RadioGroupItemProps extends LynxStyledElementProps {
+export interface RadioGroupItemProps extends LynxStyledElementProps, LynxAccessibilityProps {
     value: string;
     disabled?: boolean;
 }

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;AAmCrB,UAAU,0BAA0B;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAID,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,GAAG,0BAA0B,CAMrF;AAmBD,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"}
+{"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;AAMrF,OAAO,EAAoB,KAAK,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAC/F,OAAO,KAAK,EACV,sBAAsB,EACtB,oBAAoB,EACpB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAoCrB,UAAU,0BAA0B;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,wBAAwB,EAAE,wBAAwB,CAAC;CACpD;AAID,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,GAAG,0BAA0B,CAMrF;AAmBD,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,EAC5D,sBAAsB,EACtB,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,qFAiEzB,CAAC;AAKH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,sBAAsB;IACzF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,qFAiEzB,CAAC;AAKH,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,EACzC,sBAAsB;CAAG;AAE7B,eAAO,MAAM,qBAAqB,4FAmCjC,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,0FAmB/B,CAAC"}

package/lib/components/RadioGroup/RadioGroup.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";
@@ -29,10 +32,11 @@ function useRadiomarkControlContext(consumer) {
 }
 var RadioGroupRoot = React.forwardRef((props, ref) => {
 	const { children, className, value: valueProp, defaultValue, disabled = false, onValueChange, ...restProps } = props;
-	const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, {
+	const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, restNativeProps] = splitMultipleVariantsProps(restProps, {
 		radio,
 		radiomark
 	});
+	const { "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "radiogroup", "accessibility-traits": accessibilityTraits, ...nativeProps } = restNativeProps;
 	const handleChange = React.useCallback((next) => {
 		if (next !== null) onValueChange?.(next);
 	}, [onValueChange]);
@@ -59,14 +63,14 @@ var RadioGroupRoot = React.forwardRef((props, ref) => {
 		radiomarkVariantProps
 	]);
 	return <RadioGroupContext.Provider value={contextValue}>
-      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...nativeProps}>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(rootClassName, className)} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : void 0)}>
         {children}
       </view>
     </RadioGroupContext.Provider>;
 });
 RadioGroupRoot.displayName = "RadioGroupRoot";
 var RadioGroupItem = React.forwardRef((props, ref) => {
-	const { value: itemValue, disabled: itemDisabled = false, children, className, ...nativeProps } = props;
+	const { value: itemValue, disabled: itemDisabled = false, children, className, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "radio", "accessibility-traits": accessibilityTraits, "accessibility-value": accessibilityValue, ...nativeProps } = props;
 	const groupContext = useRadioGroupContext("RadioGroupItem");
 	const disabled = groupContext.disabled || itemDisabled;
 	const checked = groupContext.value === itemValue;
@@ -78,10 +82,16 @@ var RadioGroupItem = React.forwardRef((props, ref) => {
 		groupContext,
 		itemValue
 	]);
-	const { pressed, ...pressHandlers } = usePressTap({
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
 		disabled,
 		onTap: select
 	});
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		disabled,
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
 	const rootClassName = radio({
 		...groupContext.radioVariantProps,
 		disabled
@@ -91,16 +101,18 @@ var RadioGroupItem = React.forwardRef((props, ref) => {
 		checked,
 		disabled,
 		pressed,
-		select
+		select,
+		scaleFeedbackTargetProps
 	}), [
 		itemValue,
 		checked,
 		disabled,
 		pressed,
-		select
+		select,
+		scaleFeedbackTargetProps
 	]);
 	return <RadioGroupItemContext.Provider value={itemContextValue}>
-      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...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 ? "selected" : "not selected")}>
         {children}
       </view>
     </RadioGroupItemContext.Provider>;
@@ -111,6 +123,7 @@ var RadioGroupItemControl = React.forwardRef((props, ref) => {
 	const { children, className, ...nativeProps } = restProps;
 	const groupContext = useRadioGroupContext("RadioGroupItemControl");
 	const itemContext = useRadioGroupItemContext("RadioGroupItemControl");
+	const hasScaledContent = React.useContext(ScaleFeedbackContentContext);
 	const radiomarkVariantProps = {
 		...groupContext.radiomarkVariantProps,
 		...variantProps,
@@ -124,7 +137,7 @@ var RadioGroupItemControl = React.forwardRef((props, ref) => {
 		iconClassName: classes.icon,
 		radiomarkVariantProps
 	}}>
-        <view {...ref ? { ref } : {}} className={clsx(classes.root, controlClassName, className)} {...nativeProps}>
+        <view {...mergeProps(ref ? { ref } : {}, !hasScaledContent ? itemContext.scaleFeedbackTargetProps : {}, nativeProps)} className={clsx(classes.root, controlClassName, className)} {...!hasScaledContent ? { flatten: false } : {}}>
           {children}
         </view>
       </RadiomarkControlContext.Provider>;
@@ -152,7 +165,7 @@ var RadioGroupItemLabel = React.forwardRef((props, ref) => {
 		...useRadioGroupContext("RadioGroupItemLabel").radioVariantProps,
 		disabled: itemContext.disabled
 	}).label;
-	return <text {...ref ? { ref } : {}} className={clsx(labelClassName, className)} {...nativeProps}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(labelClassName, className)}>
         {children}
       </text>;
 });

package/lib/components/ReactionButton/ReactionButton.d.ts

@@ -0,0 +1,20 @@
+import { ReactionButtonVariantProps } from '@seed-design/lynx-css/recipes/reaction-button';
+import { LynxAccessibilityProps, LynxPressableProps, LynxStyledElementProps } from '../../types';
+import * as React from "@lynx-js/react";
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HTML button 속성 및 native form 제출
+ * - 키보드 focus / focusVisible
+ * - `asChild`
+ */
+export interface ReactionButtonProps extends Omit<ReactionButtonVariantProps, "selected" | "pressed" | "disabled" | "loading">, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    disabled?: boolean;
+    loading?: boolean;
+}
+export declare const ReactionButton: React.ForwardRefExoticComponent<ReactionButtonProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=ReactionButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ReactionButton/ReactionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAEhG,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAKxC,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAEvB,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC,EACvF,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,qFAkGzB,CAAC"}

package/lib/components/ReactionButton/ReactionButton.jsx

@@ -0,0 +1,88 @@
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { toArray } from "../../utils/children.js";
+import { IconSlotProvider, getIconSlotName } from "../Icon/Icon.jsx";
+import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle/ProgressCircle.jsx";
+import { isCountElement } from "../Count/Count.jsx";
+import * as React from "@lynx-js/react";
+import { cloneElement, useMemo } from "@lynx-js/react";
+import clsx from "clsx";
+import { reactionButton } from "@seed-design/lynx-css/recipes/reaction-button";
+//#region src/components/ReactionButton/ReactionButton.tsx
+var ReactionButton = React.forwardRef((props, ref) => {
+	const [variantProps, otherProps] = reactionButton.splitVariantProps(props);
+	const { children, className, style, defaultPressed = false, onPressedChange, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits, ...nativeProps } = otherProps;
+	const { size, pressed: pressedProp, disabled = false, loading = false } = variantProps;
+	const [selected, setSelected] = useControllableState({
+		value: pressedProp,
+		defaultValue: defaultPressed,
+		onChange: onPressedChange
+	});
+	const { pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: React.useCallback((...args) => {
+			setSelected(!selected);
+			bindtap?.(...args);
+		}, [
+			bindtap,
+			selected,
+			setSelected
+		]),
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const classNames = reactionButton({
+		...variantProps,
+		selected,
+		pressed,
+		disabled,
+		loading
+	});
+	const iconSlotContextValue = useMemo(() => ({
+		classNames: { prefixIcon: classNames.prefixIcon },
+		deps: [
+			size ?? "small",
+			selected,
+			pressed,
+			disabled,
+			loading
+		]
+	}), [
+		classNames.prefixIcon,
+		size,
+		selected,
+		pressed,
+		disabled,
+		loading
+	]);
+	const prefixIconChildren = [];
+	const labelChildren = [];
+	const countChildren = [];
+	for (const child of toArray(children)) {
+		if (getIconSlotName(child) === "prefixIcon") {
+			prefixIconChildren.push(child);
+			continue;
+		}
+		if (isCountElement(child)) {
+			countChildren.push(child);
+			continue;
+		}
+		labelChildren.push(child);
+	}
+	return <IconSlotProvider value={iconSlotContextValue}>
+      <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.root, className)} style={style} accessibility-element={accessibilityElement} accessibility-traits={disabled ? "disabled" : selected ? "selected" : accessibilityTraits ?? "button"} {...pressHandlers}>
+        <view className={classNames.content}>
+          {prefixIconChildren}
+          {labelChildren.length > 0 ? <text className={classNames.label}>{labelChildren}</text> : null}
+          {countChildren.map((child) => cloneElement(child, { className: clsx(classNames.count, child.props.className) }))}
+        </view>
+        {loading ? <view className={classNames.loadingIndicator}>
+            <ProgressCircleRoot size="14" tone="inherit">
+              <ProgressCircleRange />
+            </ProgressCircleRoot>
+          </view> : null}
+      </view>
+    </IconSlotProvider>;
+});
+ReactionButton.displayName = "ReactionButton";
+//#endregion
+export { ReactionButton };

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

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

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

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

package/lib/components/ScaleFeedback/ScaleFeedback.d.ts

@@ -0,0 +1,11 @@
+import { UseScaleFeedbackOptions } from '../../hooks/useScaleFeedback';
+import * as React from "@lynx-js/react";
+export interface ScaleFeedbackProps extends UseScaleFeedbackOptions {
+    /** Content rendered inside the native element that receives Self Scale Feedback. */
+    children: React.ReactNode;
+}
+/**
+ * Applies Self Scale Feedback through a native Lynx view.
+ */
+export declare const ScaleFeedback: React.ForwardRefExoticComponent<ScaleFeedbackProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=ScaleFeedback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScaleFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/ScaleFeedback/ScaleFeedback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAoB,KAAK,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAI9F,MAAM,WAAW,kBAAmB,SAAQ,uBAAuB;IACjE,oFAAoF;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,oFAgBzB,CAAC"}

package/lib/components/ScaleFeedback/ScaleFeedback.jsx

@@ -0,0 +1,16 @@
+import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
+import { mergeProps } from "../../utils/merge-props.js";
+import * as React from "@lynx-js/react";
+//#region src/components/ScaleFeedback/ScaleFeedback.tsx
+/**
+* Applies Self Scale Feedback through a native Lynx view.
+*/
+var ScaleFeedback = React.forwardRef(({ children, ...options }, ref) => {
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback(options);
+	return <view {...mergeProps(ref ? { ref } : {}, scaleFeedbackTriggerProps, scaleFeedbackTargetProps)}>
+        {children}
+      </view>;
+});
+ScaleFeedback.displayName = "ScaleFeedback";
+//#endregion
+export { ScaleFeedback };

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

@@ -0,0 +1,2 @@
+export * from './ScaleFeedback';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScaleFeedback/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib/components/SegmentedControl/SegmentedControl.d.ts

@@ -17,6 +17,7 @@ export interface SegmentedControlRootProps extends LynxStyledElementProps, LynxA
 export declare const SegmentedControlRoot: React.ForwardRefExoticComponent<SegmentedControlRootProps & React.RefAttributes<unknown>>;
 export interface SegmentedControlItemProps extends Omit<LynxStyledElementProps, "children">, LynxAccessibilityProps, LynxPressableProps {
     children: string | number;
+    notification?: React.ReactNode;
     value: string;
     disabled?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAKxC,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAsBrB;;;;;;;GAOG;AACH,MAAM,WAAW,yBAA0B,SAAQ,sBAAsB,EAAE,sBAAsB;IAC/F,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,oBAAoB,2FA6EhC,CAAC;AAGF,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAC9C,sBAAsB,EACtB,kBAAkB;IACpB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,2FA4EhC,CAAC;AAGF,MAAM,WAAW,8BAA+B,SAAQ,sBAAsB;CAAG;AAEjF,eAAO,MAAM,yBAAyB,gGAerC,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAMxC,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAwBrB;;;;;;;GAOG;AACH,MAAM,WAAW,yBAA0B,SAAQ,sBAAsB,EAAE,sBAAsB;IAC/F,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,oBAAoB,2FA4EhC,CAAC;AAGF,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAC9C,sBAAsB,EACtB,kBAAkB;IACpB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,2FA+FhC,CAAC;AAGF,MAAM,WAAW,8BAA+B,SAAQ,sBAAsB;CAAG;AAEjF,eAAO,MAAM,yBAAyB,gGAcrC,CAAC"}

package/lib/components/SegmentedControl/SegmentedControl.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 { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { HStack } from "../Stack/Stack.jsx";
 import * as React from "@lynx-js/react";
 import clsx from "clsx";
 import { segmentedControl } from "@seed-design/lynx-css/recipes/segmented-control";
@@ -53,7 +56,7 @@ var SegmentedControlRoot = React.forwardRef((props, ref) => {
 	]);
 	return <SegmentedControlContext.Provider value={contextValue}>
         <ClassNamesProvider value={classNames}>
-          <view {...ref ? { ref } : {}} {...nativeProps} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} className={clsx(classNames.root, className)} style={{
+          <view {...mergeProps(ref ? { ref } : {}, nativeProps)} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} className={clsx(classNames.root, className)} style={{
 		"--segment-count": Math.max(items.length, 1).toString(),
 		"--segment-index": Math.max(selectedIndex, 0).toString(),
 		...style
@@ -65,7 +68,7 @@ var SegmentedControlRoot = React.forwardRef((props, ref) => {
 });
 SegmentedControlRoot.displayName = "SegmentedControlRoot";
 var SegmentedControlItem = React.forwardRef((props, ref) => {
-	const { children, className, style, value: itemValue, disabled: itemDisabled = false, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-role-description": accessibilityRoleDescription = "radio", "accessibility-traits": accessibilityTraits, ...nativeProps } = props;
+	const { children, notification, className, style, value: itemValue, disabled: itemDisabled = false, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-role-description": accessibilityRoleDescription = "radio", "accessibility-traits": accessibilityTraits, ...nativeProps } = props;
 	const context = useSegmentedControlContext("SegmentedControlItem");
 	const disabled = context.disabled || itemDisabled;
 	const selected = context.value === itemValue;
@@ -84,15 +87,20 @@ var SegmentedControlItem = React.forwardRef((props, ref) => {
 		selected
 	]);
 	const pressSelectionRef = React.useRef(selected);
-	const { pressed, bindtouchstart, ...pressHandlers } = usePressTap({
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
 		disabled,
 		onTap: handleTap,
 		mainThreadOnTap: mainThreadBindtap
 	});
-	const handleTouchStart = React.useCallback((...args) => {
-		pressSelectionRef.current = selected;
-		bindtouchstart(...args);
-	}, [bindtouchstart, selected]);
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		disabled,
+		onTouchStart: React.useCallback((...args) => {
+			pressSelectionRef.current = selected;
+			bindtouchstart(...args);
+		}, [bindtouchstart, selected]),
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
 	const classes = segmentedControl({
 		selected,
 		disabled,
@@ -104,16 +112,21 @@ var SegmentedControlItem = React.forwardRef((props, ref) => {
 		pressed
 	});
 	const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
-	return <view {...ref ? { ref } : {}} {...nativeProps} bindtouchstart={handleTouchStart} {...pressHandlers} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel ?? label} accessibility-role-description={accessibilityRoleDescription} accessibility-value={selected ? "selected" : "not selected"} accessibility-traits={disabled ? "disabled" : selected ? "selected" : accessibilityTraits ?? "button"} className={clsx(classes.item, className)} style={style}>
+	return <view {...mergeProps(ref ? { ref } : {}, scaleFeedbackTriggerProps, pressHandlers, nativeProps)} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel ?? label} accessibility-role-description={accessibilityRoleDescription} accessibility-value={selected ? "selected" : "not selected"} accessibility-traits={disabled ? "disabled" : selected ? "selected" : accessibilityTraits ?? "button"} className={clsx(classes.item, className)} style={style}>
         <view accessibility-elements-hidden={true} className={pressStartClasses.itemBackground} />
-        <text className={classes.label}>{children}</text>
+        <view className={classes.itemContent} {...scaleFeedbackTargetProps}>
+        {notification ? <HStack position="relative" align="flex-start">
+            <text className={classes.label}>{children}</text>
+            <view accessibility-elements-hidden={true}>{notification}</view>
+          </HStack> : <text className={classes.label}>{children}</text>}
+        </view>
       </view>;
 });
 SegmentedControlItem.displayName = "SegmentedControlItem";
 var SegmentedControlIndicator = React.forwardRef((props, ref) => {
 	const { className, style, ...nativeProps } = props;
 	const classNames = useClassNames();
-	return <view {...ref ? { ref } : {}} {...nativeProps} accessibility-elements-hidden={true} className={clsx(classNames.indicator, className)} style={style} />;
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} accessibility-elements-hidden={true} className={clsx(classNames.indicator, className)} style={style} />;
 });
 SegmentedControlIndicator.displayName = "SegmentedControlIndicator";
 //#endregion

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

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