@seed-design/lynx-react 0.6.2 → 0.7.0

package/lib/components/private/Positioning.js

@@ -0,0 +1,109 @@
+import { arrow, computePosition as computePosition$1, flip, limitShift, offset, shift, size } from "../../node_modules/.bun/@floating-ui_core@1.8.0/node_modules/@floating-ui/core/dist/floating-ui.core.js";
+//#region src/components/private/Positioning.ts
+function getTransformOrigin(placement) {
+	const [side, align] = placement.split("-");
+	const crossOrigin = align === "start" ? "0%" : align === "end" ? "100%" : "50%";
+	return side === "top" ? `${crossOrigin} 100%` : side === "bottom" ? `${crossOrigin} 0%` : side === "left" ? `100% ${crossOrigin}` : `0% ${crossOrigin}`;
+}
+/**
+* 모든 좌표와 크기는 동일한 화면 기준 논리 px입니다.
+* boundary의 safe area 보정과 결과의 컨테이너 상대 좌표 변환은 호출자 책임입니다.
+*
+* availableWidth로 너비를 제한했다면 줄바꿈 후 실제 높이를 다시 측정해 호출합니다.
+* native 측정·호출 주기·오래된 비동기 결과 폐기는 이 순수 계산에 포함하지 않습니다.
+*/
+async function computePosition({ reference, boundary, width, height, placement, gutter, overflowPadding, flip: flipOptions = {}, shift: shiftOptions = {}, size: sizeOptions, arrow: arrowOptions }) {
+	const referenceElement = { rect: {
+		x: reference.left,
+		y: reference.top,
+		width: reference.width,
+		height: reference.height
+	} };
+	const floatingElement = { dimensions: {
+		width: Math.max(0, width),
+		height: Math.max(0, height)
+	} };
+	const arrowElement = arrowOptions ? {
+		width: arrowOptions.size,
+		height: arrowOptions.size
+	} : void 0;
+	const clippingRect = {
+		x: boundary.left,
+		y: boundary.top,
+		width: boundary.width,
+		height: boundary.height
+	};
+	const maximumHeight = floatingElement.dimensions.height;
+	let availableWidth = 0;
+	let availableHeight = 0;
+	const platform = {
+		getElementRects: () => ({
+			reference: referenceElement.rect,
+			floating: {
+				x: 0,
+				y: 0,
+				...floatingElement.dimensions
+			}
+		}),
+		getClippingRect: () => clippingRect,
+		getDimensions: (element) => element === arrowElement && arrowElement ? arrowElement : floatingElement.dimensions,
+		isElement: () => true,
+		isRTL: () => false
+	};
+	const heightMiddleware = sizeOptions && size({
+		padding: overflowPadding,
+		apply({ availableHeight }) {
+			floatingElement.dimensions.height = Math.min(maximumHeight, Math.max(0, sizeOptions.minimumHeight ?? 0, availableHeight));
+		}
+	});
+	const result = await computePosition$1(referenceElement, floatingElement, {
+		placement,
+		strategy: "absolute",
+		platform,
+		middleware: [
+			offset(gutter + (arrowOptions?.tipHeight ?? 0)),
+			sizeOptions?.order === "beforeFlip" && heightMiddleware,
+			flipOptions !== false && flip({
+				...flipOptions,
+				padding: overflowPadding
+			}),
+			shiftOptions !== false && shift({
+				mainAxis: shiftOptions.mainAxis,
+				crossAxis: shiftOptions.crossAxis,
+				padding: overflowPadding,
+				limiter: shiftOptions.limit ? limitShift() : void 0
+			}),
+			sizeOptions?.order === "afterShift" && heightMiddleware,
+			arrowElement && arrow({
+				element: arrowElement,
+				padding: arrowOptions?.padding
+			}),
+			size({
+				padding: overflowPadding,
+				apply(available) {
+					availableWidth = Math.max(0, available.availableWidth);
+					availableHeight = Math.max(0, available.availableHeight);
+				}
+			})
+		]
+	});
+	const resolvedPlacement = result.placement;
+	const arrow$1 = result.middlewareData.arrow;
+	return {
+		left: result.x,
+		top: result.y,
+		width: floatingElement.dimensions.width,
+		height: floatingElement.dimensions.height,
+		placement: resolvedPlacement,
+		transformOrigin: getTransformOrigin(resolvedPlacement),
+		availableWidth,
+		availableHeight,
+		...arrow$1 && { arrow: {
+			left: arrow$1.x,
+			top: arrow$1.y,
+			centerOffset: arrow$1.centerOffset
+		} }
+	};
+}
+//#endregion
+export { computePosition };

package/lib/components/private/TrackPositioning.d.ts

@@ -0,0 +1,22 @@
+export interface TrackPositioningOptions {
+    /** 최솟값이 0, 최댓값이 1인 값의 비율입니다. 범위 밖이면 양 끝에 고정합니다. */
+    progress: number;
+    trackWidth: number;
+    thumbWidth: number;
+    labelWidth: number;
+    direction?: "ltr" | "rtl";
+}
+/**
+ * 트랙 왼쪽 기준 논리 px로 thumb 중심과 label 왼쪽 좌표를 계산합니다.
+ * arrowCenter는 label 왼쪽 기준이며 화살표 너비의 절반을 빼서 배치합니다.
+ * 트랙보다 넓은 label은 중앙에 두고 양쪽으로 넘치게 합니다.
+ *
+ * 각 thumb에 대해 호출하며, 측정값을 재사용할 수 있는 동기식 계산입니다.
+ * MTS에서는 이 모듈을 runtime: 'shared'로 import하고 native 측정은 별도로 수행합니다.
+ */
+export declare function getTrackPosition({ progress, trackWidth, thumbWidth, labelWidth, direction, }: TrackPositioningOptions): {
+    thumbCenter: number;
+    labelLeft: number;
+    arrowCenter: number;
+};
+//# sourceMappingURL=TrackPositioning.d.ts.map

package/lib/components/private/TrackPositioning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackPositioning.d.ts","sourceRoot":"","sources":["../../../src/components/private/TrackPositioning.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAiB,GAClB,EAAE,uBAAuB;;;;EAazB"}

package/lib/contexts/ScaleFeedbackContentContext.d.ts

@@ -0,0 +1,4 @@
+import { Context } from '@lynx-js/react';
+/** @internal Prevents controls inside an animated content layer from binding a second target. */
+export declare const ScaleFeedbackContentContext: Context<boolean>;
+//# sourceMappingURL=ScaleFeedbackContentContext.d.ts.map

package/lib/contexts/ScaleFeedbackContentContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScaleFeedbackContentContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ScaleFeedbackContentContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE7D,iGAAiG;AACjG,eAAO,MAAM,2BAA2B,EAAE,OAAO,CAAC,OAAO,CAAwB,CAAC"}

package/lib/contexts/ScaleFeedbackContentContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "@lynx-js/react";
+//#region src/contexts/ScaleFeedbackContentContext.ts
+/** @internal Prevents controls inside an animated content layer from binding a second target. */
+var ScaleFeedbackContentContext = createContext(false);
+//#endregion
+export { ScaleFeedbackContentContext };

package/lib/contexts/index.d.ts

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

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

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

package/lib/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './useControllableState';
 export * from './useIconColor';
 export * from './usePressTap';
+export * from './useScaleFeedback';
 export * from './useSafeArea';
 export * from './useSeedClassName';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

package/lib/hooks/useIconColor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAuBA"}
+{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA2DD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CA6BA"}

package/lib/hooks/useIconColor.js

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef, useRef } from "@lynx-js/react";
 //#region src/hooks/useIconColor.ts
 function syncTintColorOnce(targetRef, sourceRef) {
 	"main thread";
@@ -16,11 +16,11 @@ function scheduleTintColorSync(targetRef, sourceRef, frameRef) {
 		cancelAnimationFrame(frameRef.current);
 		frameRef.current = 0;
 	}
+	syncTintColorOnce(targetRef, sourceRef);
 	if (typeof requestAnimationFrame === "function") frameRef.current = requestAnimationFrame(() => {
 		frameRef.current = 0;
 		syncTintColorOnce(targetRef, sourceRef);
 	});
-	else syncTintColorOnce(targetRef, sourceRef);
 }
 function cancelTintColorSync(frameRef) {
 	"main thread";
@@ -45,12 +45,17 @@ function useIconColor(deps, options) {
 	const enabled = options?.enabled ?? true;
 	const frameRef = useMainThreadRef(0);
 	const theme = useGlobalProps()?.theme;
+	const hasMountedRef = useRef(false);
 	function syncOnUiAppear() {
 		"main thread";
 		if (!enabled) return;
-		syncTintColorOnce(ref, sourceRef);
+		scheduleTintColorSync(ref, sourceRef, frameRef);
 	}
 	useEffect(() => {
+		if (!hasMountedRef.current) {
+			hasMountedRef.current = true;
+			return;
+		}
 		if (!enabled) return;
 		runOnMainThread(scheduleTintColorSync)(ref, sourceRef, frameRef);
 		return () => {

package/lib/hooks/usePressTap.d.ts

@@ -1,6 +1,7 @@
 import { BaseTouchEvent, EventHandler, Target } from '@lynx-js/types';
 import { LynxTouchProps } from '../types';
 type TouchHandler = EventHandler<BaseTouchEvent<Target>>;
+type PressStateHandler = TouchHandler & (() => void);
 export interface UsePressTapOptions {
     disabled?: boolean;
     onTap?: TouchHandler;
@@ -9,9 +10,9 @@ export interface UsePressTapOptions {
 export interface UsePressTapReturn {
     pressed: boolean;
     bindtap: TouchHandler;
-    bindtouchstart: TouchHandler;
-    bindtouchend: TouchHandler;
-    bindtouchcancel: TouchHandler;
+    bindtouchstart: PressStateHandler;
+    bindtouchend: PressStateHandler;
+    bindtouchcancel: PressStateHandler;
     "main-thread:bindtap"?: LynxTouchProps["main-thread:bindtap"];
 }
 /**

package/lib/hooks/usePressTap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePressTap.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressTap.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,KAAK,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,cAAc,EAAE,YAAY,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,YAAY,CAAC;IAC9B,qBAAqB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA2B/E"}
+{"version":3,"file":"usePressTap.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressTap.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,KAAK,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AACzD,KAAK,iBAAiB,GAAG,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAErD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,cAAc,EAAE,iBAAiB,CAAC;IAClC,YAAY,EAAE,iBAAiB,CAAC;IAChC,eAAe,EAAE,iBAAiB,CAAC;IACnC,qBAAqB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA2B/E"}

package/lib/hooks/useScaleFeedback.d.ts

@@ -0,0 +1,48 @@
+import { LynxViewProps } from '../types';
+type MainThreadLayoutChangeHandler = NonNullable<LynxViewProps["main-thread:bindlayoutchange"]>;
+type MainThreadTouchHandler = NonNullable<LynxViewProps["main-thread:bindtouchstart"]>;
+export interface UseScaleFeedbackOptions {
+    /** Disables Scale Feedback while the target is not interactive. */
+    disabled?: boolean;
+    /** Runs on the Background Thread immediately after Main Thread touchstart. */
+    onTouchStart?: () => void;
+    /** Runs on the Background Thread immediately after Main Thread touchend. */
+    onTouchEnd?: () => void;
+    /** Runs on the Background Thread immediately after Main Thread touchcancel. */
+    onTouchCancel?: () => void;
+}
+export interface ScaleFeedbackTriggerProps {
+    "main-thread:bindtouchstart": MainThreadTouchHandler;
+    "main-thread:bindtouchend": MainThreadTouchHandler;
+    "main-thread:bindtouchcancel": MainThreadTouchHandler;
+}
+/** The target's transform is owned by Scale Feedback; use a separate layer for other transforms. */
+export interface ScaleFeedbackTargetProps {
+    flatten: false;
+    "main-thread:ref": NonNullable<LynxViewProps["main-thread:ref"]>;
+    "main-thread:bindlayoutchange": MainThreadLayoutChangeHandler;
+}
+export interface UseScaleFeedbackReturn {
+    /** Spread onto the element that receives touch events. */
+    scaleFeedbackTriggerProps: ScaleFeedbackTriggerProps;
+    /** Spread onto the element that is measured and scaled. */
+    scaleFeedbackTargetProps: ScaleFeedbackTargetProps;
+}
+/**
+ * Applies SEED Scale Feedback on the Lynx Main Thread.
+ *
+ * Spread `scaleFeedbackTriggerProps` onto the element that receives touch
+ * events and `scaleFeedbackTargetProps` onto the element that should scale.
+ * Applying both objects to one element creates Self Scale; applying them to
+ * separate elements creates Content Scale.
+ *
+ * The target's transform is owned by this hook. Use a separate content layer
+ * when the element already uses translate, rotate, or another transform.
+ *
+ * Supported on Lynx Engine 3.9 and later. Missing or unknown
+ * `GlobalProps.motion` values preserve the default motion; only the exact
+ * `"reduced"` value disables scaling.
+ */
+export declare function useScaleFeedback(options?: UseScaleFeedbackOptions): UseScaleFeedbackReturn;
+export {};
+//# sourceMappingURL=useScaleFeedback.d.ts.map

package/lib/hooks/useScaleFeedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScaleFeedback.d.ts","sourceRoot":"","sources":["../../src/hooks/useScaleFeedback.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,KAAK,6BAA6B,GAAG,WAAW,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC,CAAC;AAChG,KAAK,sBAAsB,GAAG,WAAW,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC,CAAC;AAUvF,MAAM,WAAW,uBAAuB;IACtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC,4BAA4B,EAAE,sBAAsB,CAAC;IACrD,0BAA0B,EAAE,sBAAsB,CAAC;IACnD,6BAA6B,EAAE,sBAAsB,CAAC;CACvD;AAED,oGAAoG;AACpG,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,EAAE,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACjE,8BAA8B,EAAE,6BAA6B,CAAC;CAC/D;AAED,MAAM,WAAW,sBAAsB;IACrC,0DAA0D;IAC1D,yBAAyB,EAAE,yBAAyB,CAAC;IACrD,2DAA2D;IAC3D,wBAAwB,EAAE,wBAAwB,CAAC;CACpD;AAoDD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B,GAAG,sBAAsB,CAyE9F"}

package/lib/hooks/useScaleFeedback.js

@@ -0,0 +1,108 @@
+import { calculateScaleFeedback, isReducedMotion } from "../utils/calculate-scale-feedback.js";
+import { runOnBackground, runOnMainThread, useEffect, useGlobalProps, useMainThreadRef, useRef } from "@lynx-js/react";
+import { feedbackScaleDuration, feedbackScaleTimingFunction } from "@seed-design/lynx-css/scale-feedback";
+//#region src/hooks/useScaleFeedback.ts
+function runScaleFeedback(targetRef, animationRef, scale, duration) {
+	"main thread";
+	const target = targetRef.current;
+	if (!target) return;
+	let currentTransform = "scale(1)";
+	try {
+		currentTransform = target.getComputedStyleProperty("transform") || currentTransform;
+	} catch {}
+	animationRef.current?.cancel();
+	animationRef.current = target.animate([{ transform: currentTransform }, { transform: `scale(${scale})` }], {
+		duration,
+		easing: feedbackScaleTimingFunction,
+		fill: "forwards"
+	});
+}
+function readScaleFeedbackScale(target) {
+	"main thread";
+	if (!target) return null;
+	let width = 0;
+	let height = 0;
+	try {
+		width = Number.parseFloat(target.getComputedStyleProperty("width"));
+		height = Number.parseFloat(target.getComputedStyleProperty("height"));
+	} catch {
+		return null;
+	}
+	if (width <= 0 || height <= 0 || Number.isNaN(width) || Number.isNaN(height)) return null;
+	return calculateScaleFeedback(width, height);
+}
+/**
+* Applies SEED Scale Feedback on the Lynx Main Thread.
+*
+* Spread `scaleFeedbackTriggerProps` onto the element that receives touch
+* events and `scaleFeedbackTargetProps` onto the element that should scale.
+* Applying both objects to one element creates Self Scale; applying them to
+* separate elements creates Content Scale.
+*
+* The target's transform is owned by this hook. Use a separate content layer
+* when the element already uses translate, rotate, or another transform.
+*
+* Supported on Lynx Engine 3.9 and later. Missing or unknown
+* `GlobalProps.motion` values preserve the default motion; only the exact
+* `"reduced"` value disables scaling.
+*/
+function useScaleFeedback(options = {}) {
+	const { disabled = false, onTouchStart, onTouchEnd, onTouchCancel } = options;
+	const reducedMotion = isReducedMotion(useGlobalProps()?.motion);
+	const targetRef = useMainThreadRef(null);
+	const animationRef = useMainThreadRef(null);
+	const scaleRef = useMainThreadRef(null);
+	const hasMountedRef = useRef(false);
+	function handleLayoutChange(event) {
+		"main thread";
+		targetRef.current = event.currentTarget;
+		const width = event.detail?.width ?? event.params?.width ?? 0;
+		const height = event.detail?.height ?? event.params?.height ?? 0;
+		if (width > 0 && height > 0) scaleRef.current = calculateScaleFeedback(width, height);
+		else scaleRef.current = null;
+		targetRef.current?.setStyleProperty("transform-origin", "center center");
+	}
+	function handleTouchStart() {
+		"main thread";
+		if (!disabled && !reducedMotion) {
+			const scale = scaleRef.current ?? readScaleFeedbackScale(targetRef.current);
+			if (scale !== null) {
+				scaleRef.current = scale;
+				runScaleFeedback(targetRef, animationRef, scale, feedbackScaleDuration);
+			}
+		}
+		if (onTouchStart) runOnBackground(onTouchStart)();
+	}
+	function handleTouchEnd() {
+		"main thread";
+		runScaleFeedback(targetRef, animationRef, 1, feedbackScaleDuration);
+		if (onTouchEnd) runOnBackground(onTouchEnd)();
+	}
+	function handleTouchCancel() {
+		"main thread";
+		runScaleFeedback(targetRef, animationRef, 1, feedbackScaleDuration);
+		if (onTouchCancel) runOnBackground(onTouchCancel)();
+	}
+	useEffect(() => {
+		if (!hasMountedRef.current) {
+			hasMountedRef.current = true;
+			return;
+		}
+		if (!disabled && !reducedMotion) return;
+		runOnMainThread(runScaleFeedback)(targetRef, animationRef, 1, 0);
+	}, [disabled, reducedMotion]);
+	return {
+		scaleFeedbackTriggerProps: {
+			"main-thread:bindtouchstart": handleTouchStart,
+			"main-thread:bindtouchend": handleTouchEnd,
+			"main-thread:bindtouchcancel": handleTouchCancel
+		},
+		scaleFeedbackTargetProps: {
+			flatten: false,
+			"main-thread:ref": targetRef,
+			"main-thread:bindlayoutchange": handleLayoutChange
+		}
+	};
+}
+//#endregion
+export { useScaleFeedback };

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './contexts';
 export * from './hooks';
 export type * from './types';
 export * from './utils';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -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 { useIconColor } from "./hooks/useIconColor.js";
 import { useSafeArea } from "./hooks/useSafeArea.js";
@@ -18,30 +20,42 @@ import { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDe
 import { BottomSheet_namespace_exports } from "./components/BottomSheet/BottomSheet.namespace.js";
 import { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle } from "./components/Callout/Callout.jsx";
 import { Callout_namespace_exports } from "./components/Callout/Callout.namespace.js";
+import { ScaleFeedbackContentContext } from "./contexts/ScaleFeedbackContentContext.js";
 import { splitMultipleVariantsProps } from "./utils/split-multiple-variants-props.js";
 import { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from "./components/Checkbox/Checkbox.jsx";
 import { Checkbox_namespace_exports } from "./components/Checkbox/Checkbox.namespace.js";
 import { ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle } from "./components/Chip/Chip.jsx";
 import { Chip_namespace_exports } from "./components/Chip/Chip.namespace.js";
+import { Count } from "./components/Count/Count.jsx";
 import { Divider } from "./components/Divider/Divider.jsx";
 import { FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot } from "./components/Field/Field.jsx";
 import { Field_namespace_exports } from "./components/Field/Field.namespace.js";
+import { InputButtonButton, InputButtonClearButton, InputButtonPlaceholder, InputButtonPrefixIcon, InputButtonPrefixText, InputButtonRoot, InputButtonSuffixIcon, InputButtonSuffixText, InputButtonValue } from "./components/InputButton/InputButton.jsx";
+import { InputButton_namespace_exports } from "./components/InputButton/InputButton.namespace.js";
 import { KeyboardAvoidingScrollView } from "./components/KeyboardAvoidingScrollView/KeyboardAvoidingScrollView.jsx";
 import { MannerTemp, MannerTempEmote } from "./components/MannerTemp/MannerTemp.jsx";
+import { MenuAnchor, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuItemBody, MenuItemDescription, MenuItemLabel, MenuRoot, MenuScrollArea, MenuTrigger } from "./components/Menu/Menu.jsx";
+import { Menu_namespace_exports } from "./components/Menu/Menu.namespace.js";
 import { MannerTempBadge } from "./components/MannerTempBadge/MannerTempBadge.jsx";
 import { NotificationBadge, NotificationBadgePositioner } from "./components/NotificationBadge/NotificationBadge.jsx";
+import { ScaleFeedback } from "./components/ScaleFeedback/ScaleFeedback.jsx";
 import { PageBannerBody, PageBannerButton, PageBannerCloseButton, PageBannerContent, PageBannerDescription, PageBannerRoot, PageBannerTitle } from "./components/PageBanner/PageBanner.jsx";
 import { PageBanner_namespace_exports } from "./components/PageBanner/PageBanner.namespace.js";
 import { RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot } from "./components/RadioGroup/RadioGroup.jsx";
+import { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb } from "./components/Switch/Switch.jsx";
+import { ListButtonItem, ListCheckboxItem, ListContent, ListDetail, ListHeader, ListItem, ListPrefix, ListRadioItem, ListRoot, ListSuffix, ListSwitchItem, ListTitle } from "./components/List/List.jsx";
+import { List_namespace_exports } from "./components/List/List.namespace.js";
 import { RadioGroup_namespace_exports } from "./components/RadioGroup/RadioGroup.namespace.js";
+import { ReactionButton } from "./components/ReactionButton/ReactionButton.jsx";
+import { HStack, VStack } from "./components/Stack/Stack.jsx";
 import { SegmentedControlIndicator, SegmentedControlItem, SegmentedControlRoot } from "./components/SegmentedControl/SegmentedControl.jsx";
 import { SegmentedControl_namespace_exports } from "./components/SegmentedControl/SegmentedControl.namespace.js";
 import { CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger, RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger } from "./components/SelectBox/SelectBox.jsx";
 import { CheckSelectBox_namespace_exports } from "./components/SelectBox/CheckSelectBox.namespace.js";
 import { RadioSelectBox_namespace_exports } from "./components/SelectBox/RadioSelectBox.namespace.js";
-import { HStack, VStack } from "./components/Stack/Stack.jsx";
-import { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb } from "./components/Switch/Switch.jsx";
 import { Switch_namespace_exports } from "./components/Switch/Switch.namespace.js";
+import { SwipeableMenuSheetBackdrop, SwipeableMenuSheetCloseButton, SwipeableMenuSheetContent, SwipeableMenuSheetDescription, SwipeableMenuSheetFooter, SwipeableMenuSheetGroup, SwipeableMenuSheetHandle, SwipeableMenuSheetHeader, SwipeableMenuSheetItem, SwipeableMenuSheetItemContent, SwipeableMenuSheetItemDescription, SwipeableMenuSheetItemLabel, SwipeableMenuSheetList, SwipeableMenuSheetPositioner, SwipeableMenuSheetRoot, SwipeableMenuSheetTitle, SwipeableMenuSheetTrigger } from "./components/SwipeableMenuSheet/SwipeableMenuSheet.jsx";
+import { SwipeableMenuSheet_namespace_exports } from "./components/SwipeableMenuSheet/SwipeableMenuSheet.namespace.js";
 import { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "./components/Tabs/Tabs.jsx";
 import { Tabs_namespace_exports } from "./components/Tabs/Tabs.namespace.js";
 import { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from "./components/TagGroup/TagGroup.jsx";
@@ -52,4 +66,4 @@ import { useTextFieldWithGraphemes } from "./components/TextField/useTextFieldWi
 import { TextField_namespace_exports } from "./components/TextField/TextField.namespace.js";
 import { getSeedClassName } from "./utils/get-seed-class-name.js";
 import { useSeedClassName } from "./hooks/useSeedClassName.js";
-export { Accordion_namespace_exports as Accordion, AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger, ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Callout_namespace_exports as Callout, CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle, CheckSelectBox_namespace_exports as CheckSelectBox, CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Chip_namespace_exports as Chip, ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle, Divider, Field_namespace_exports as Field, FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot, HStack, Icon, KeyboardAvoidingScrollView, MannerTemp, MannerTempBadge, MannerTempEmote, NotificationBadge, NotificationBadgePositioner, PageBanner_namespace_exports as PageBanner, PageBannerBody, PageBannerButton, PageBannerCloseButton, PageBannerContent, PageBannerDescription, PageBannerRoot, PageBannerTitle, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, RadioSelectBox_namespace_exports as RadioSelectBox, RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger, SegmentedControl_namespace_exports as SegmentedControl, SegmentedControlIndicator, SegmentedControlItem, SegmentedControlRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, Tabs_namespace_exports as Tabs, TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, TextField_namespace_exports as TextField, TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName, useTextFieldWithGraphemes };
+export { Accordion_namespace_exports as Accordion, AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger, ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Callout_namespace_exports as Callout, CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle, CheckSelectBox_namespace_exports as CheckSelectBox, CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Chip_namespace_exports as Chip, ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle, Count, Divider, Field_namespace_exports as Field, FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot, HStack, Icon, InputButton_namespace_exports as InputButton, InputButtonButton, InputButtonClearButton, InputButtonPlaceholder, InputButtonPrefixIcon, InputButtonPrefixText, InputButtonRoot, InputButtonSuffixIcon, InputButtonSuffixText, InputButtonValue, KeyboardAvoidingScrollView, List_namespace_exports as List, ListButtonItem, ListCheckboxItem, ListContent, ListDetail, ListHeader, ListItem, ListPrefix, ListRadioItem, ListRoot, ListSuffix, ListSwitchItem, ListTitle, MannerTemp, MannerTempBadge, MannerTempEmote, Menu_namespace_exports as Menu, MenuAnchor, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuItemBody, MenuItemDescription, MenuItemLabel, PrefixIcon as MenuPrefixIcon, MenuRoot, MenuScrollArea, SuffixIcon as MenuSuffixIcon, MenuTrigger, NotificationBadge, NotificationBadgePositioner, PageBanner_namespace_exports as PageBanner, PageBannerBody, PageBannerButton, PageBannerCloseButton, PageBannerContent, PageBannerDescription, PageBannerRoot, PageBannerTitle, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, RadioSelectBox_namespace_exports as RadioSelectBox, RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger, ReactionButton, ScaleFeedback, ScaleFeedbackContentContext, SegmentedControl_namespace_exports as SegmentedControl, SegmentedControlIndicator, SegmentedControlItem, SegmentedControlRoot, SuffixIcon, SwipeableMenuSheet_namespace_exports as SwipeableMenuSheet, SwipeableMenuSheetBackdrop, SwipeableMenuSheetCloseButton, SwipeableMenuSheetContent, SwipeableMenuSheetDescription, SwipeableMenuSheetFooter, SwipeableMenuSheetGroup, SwipeableMenuSheetHandle, SwipeableMenuSheetHeader, SwipeableMenuSheetItem, SwipeableMenuSheetItemContent, SwipeableMenuSheetItemDescription, SwipeableMenuSheetItemLabel, SwipeableMenuSheetList, SwipeableMenuSheetPositioner, SwipeableMenuSheetRoot, SwipeableMenuSheetTitle, SwipeableMenuSheetTrigger, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, Tabs_namespace_exports as Tabs, TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, TextField_namespace_exports as TextField, TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea, VStack, capitalize, createSlotRecipeContext, getSeedClassName, mergeProps, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useScaleFeedback, useSeedClassName, useTextFieldWithGraphemes };