@seed-design/lynx-react 0.6.2 → 0.7.0

package/lib/components/Switch/Switch.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 { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
 import * as React from "@lynx-js/react";
 import clsx from "clsx";
@@ -20,20 +22,27 @@ function useSwitchmarkControlContext(consumer) {
 }
 var SwitchRoot = React.forwardRef((props, ref) => {
 	const { children, className, checked: checkedProp, defaultChecked = false, disabled = false, onCheckedChange, ...restProps } = props;
-	const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, {
+	const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, restNativeProps] = splitMultipleVariantsProps(restProps, {
 		switch: switchStyle,
 		switchmark
 	});
+	const { "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "switch", "accessibility-traits": accessibilityTraits, "accessibility-value": accessibilityValue, ...nativeProps } = restNativeProps;
 	const [checked, setChecked] = useControllableState({
 		value: checkedProp,
 		defaultValue: defaultChecked,
 		onChange: onCheckedChange
 	});
 	const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
-	const { pressed: _pressed, ...pressHandlers } = usePressTap({
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
 		disabled,
 		onTap: toggle
 	});
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		disabled,
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
 	const rootClassName = switchStyle({
 		...switchVariantProps,
 		disabled
@@ -41,18 +50,22 @@ var SwitchRoot = React.forwardRef((props, ref) => {
 	const contextValue = React.useMemo(() => ({
 		checked,
 		disabled,
+		pressed,
 		switchVariantProps,
 		switchmarkVariantProps,
-		toggle
+		toggle,
+		scaleFeedbackTargetProps
 	}), [
 		checked,
 		disabled,
+		pressed,
 		switchVariantProps,
 		switchmarkVariantProps,
-		toggle
+		toggle,
+		scaleFeedbackTargetProps
 	]);
 	return <SwitchContext.Provider value={contextValue}>
-      <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 ? "checked" : "not checked")}>
         {children}
       </view>
     </SwitchContext.Provider>;
@@ -73,7 +86,7 @@ var SwitchControl = React.forwardRef((props, ref) => {
 		thumbClassName: classes.thumb,
 		switchmarkVariantProps
 	}}>
-      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+      <view {...mergeProps(ref ? { ref } : {}, context.scaleFeedbackTargetProps, nativeProps)} className={clsx(classes.root, className)} flatten={false}>
         {children}
       </view>
     </SwitchmarkControlContext.Provider>;
@@ -82,7 +95,7 @@ SwitchControl.displayName = "SwitchControl";
 var SwitchThumb = React.forwardRef((props, ref) => {
 	const { className, ...nativeProps } = props;
 	const { thumbClassName } = useSwitchmarkControlContext("SwitchThumb");
-	return <view {...ref ? { ref } : {}} className={clsx(thumbClassName, className)} {...nativeProps} />;
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(thumbClassName, className)} />;
 });
 SwitchThumb.displayName = "SwitchThumb";
 var SwitchLabel = React.forwardRef((props, ref) => {
@@ -92,10 +105,10 @@ var SwitchLabel = React.forwardRef((props, ref) => {
 		...context.switchVariantProps,
 		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>;
 });
 SwitchLabel.displayName = "SwitchLabel";
 //#endregion
-export { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb };
+export { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, useSwitchContext };

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

@@ -1,6 +1,6 @@
 import { TabsVariantProps } from '@seed-design/lynx-css/recipes/tabs';
 import { IntrinsicElements } from '@lynx-js/types';
-import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
+import { LynxAccessibilityProps, LynxPressableProps, LynxStyledElementProps } from '../../types';
 import * as React from "@lynx-js/react";
 type NativeViewPagerProps = IntrinsicElements["viewpager"];
 type TabsPublicVariantProps = Omit<TabsVariantProps, "selected" | "disabled" | "inCarousel" | "transitionEnabled">;
@@ -21,9 +21,11 @@ export declare const TabsRoot: React.ForwardRefExoticComponent<TabsRootProps & R
 export interface TabsListProps extends LynxStyledElementProps {
 }
 export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<unknown>>;
-export interface TabsTriggerProps extends LynxStyledElementProps {
+export interface TabsTriggerProps extends Omit<LynxStyledElementProps, "children" | "flatten">, Pick<LynxPressableProps, "bindtap"> {
+    children: string | number;
     value: string;
     disabled?: boolean;
+    notification?: React.ReactNode;
     "accessibility-label"?: LynxAccessibilityProps["accessibility-label"];
 }
 export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<unknown>>;

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

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

package/lib/components/Tabs/Tabs.jsx

@@ -1,6 +1,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 { Box } from "../Box/Box.jsx";
 import { areTabsTransitionsEnabled, getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects } from "./Tabs.utils.js";
 import * as React from "@lynx-js/react";
 import clsx from "clsx";
@@ -192,7 +195,7 @@ var TabsRoot = React.forwardRef((props, ref) => {
 	]);
 	return <TabsContext.Provider value={contextValue}>
       <ClassNamesProvider value={classNames}>
-        <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.root, className)} style={style}>
+        <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.root, className)} style={style}>
           {children}
         </view>
       </ClassNamesProvider>
@@ -229,18 +232,14 @@ var TabsList = React.forwardRef((props, ref) => {
 		syncTriggerOrder,
 		triggerOrder
 	]);
-	const mergedRef = React.useCallback((node) => {
-		setListRef(node);
-		if (typeof ref === "function") ref(node);
-		else if (ref) ref.current = node;
-	}, [ref, setListRef]);
-	return <scroll-view ref={mergedRef} {...nativeProps} scroll-orientation="horizontal" scroll-bar-enable={false} accessibility-element={false} accessibility-traits="tabbar" className={clsx(classNames.list, className)} style={style}>
+	const mergedRef = React.useMemo(() => mergeProps({ ref: setListRef }, { ref }).ref, [ref, setListRef]);
+	return <scroll-view {...mergeProps({ ref: mergedRef }, nativeProps)} scroll-orientation="horizontal" scroll-bar-enable={false} accessibility-element={false} accessibility-traits="tabbar" className={clsx(classNames.list, className)} style={style}>
       <view className={classNames.listContent}>{children}</view>
     </scroll-view>;
 });
 TabsList.displayName = "TabsList";
 var TabsTrigger = React.forwardRef((props, ref) => {
-	const { children, className, style, value: triggerValue, disabled = false, "accessibility-label": accessibilityLabel, ...nativeProps } = props;
+	const { children, notification, className, style, value: triggerValue, disabled = false, bindtap, "accessibility-label": accessibilityLabel, ...nativeProps } = props;
 	const context = useTabsContext("TabsTrigger");
 	const selected = context.value === triggerValue;
 	const visuallySelected = context.visualValue === triggerValue;
@@ -256,12 +255,23 @@ var TabsTrigger = React.forwardRef((props, ref) => {
 		triggerValue,
 		disabled
 	]);
-	const { pressed: _pressed, ...pressHandlers } = usePressTap({
+	const { pressed: _pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
 		disabled,
-		onTap: React.useCallback(() => {
+		onTap: React.useCallback((...args) => {
 			"background only";
+			bindtap?.(...args);
 			context.selectValue(triggerValue);
-		}, [context.selectValue, triggerValue])
+		}, [
+			bindtap,
+			context.selectValue,
+			triggerValue
+		])
+	});
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		disabled,
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
 	});
 	const handleLayoutChange = React.useCallback((...args) => {
 		"background only";
@@ -275,8 +285,11 @@ var TabsTrigger = React.forwardRef((props, ref) => {
 		transitionEnabled: context.transitionsEnabled
 	});
 	const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
-	return <view {...ref ? { ref } : {}} {...nativeProps} {...pressHandlers} flatten={false} bindlayoutchange={handleLayoutChange} accessibility-element={true} accessibility-role-description="tab" accessibility-label={accessibilityLabel ?? label} accessibility-value={selected ? "selected" : "not selected"} accessibility-traits={disabled ? "disabled" : selected ? "selected" : "button"} className={clsx(triggerClasses.trigger, className)} style={style}>
-      <text className={triggerClasses.triggerLabel}>{children}</text>
+	return <view {...mergeProps({ bindlayoutchange: handleLayoutChange }, ref ? { ref } : {}, pressHandlers, scaleFeedbackTargetProps, scaleFeedbackTriggerProps, nativeProps)} flatten={false} accessibility-element={true} accessibility-role-description="tab" accessibility-label={accessibilityLabel ?? label} accessibility-value={selected ? "selected" : "not selected"} accessibility-traits={disabled ? "disabled" : selected ? "selected" : "button"} className={clsx(triggerClasses.trigger, className)} style={style}>
+      {notification ? <Box position="relative">
+          <text className={triggerClasses.triggerLabel}>{children}</text>
+          {notification}
+        </Box> : <text className={triggerClasses.triggerLabel}>{children}</text>}
     </view>;
 });
 TabsTrigger.displayName = "TabsTrigger";
@@ -292,7 +305,7 @@ var TabsIndicator = React.forwardRef((props, ref) => {
 	const upperRect = triggerRects[items[upperIndex]?.value ?? ""] ?? lowerRect;
 	const x = lowerRect ? lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress : 0;
 	const width = lowerRect ? lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress : 0;
-	return <view {...ref ? { ref } : {}} main-thread:ref={indicatorRef} {...nativeProps} accessibility-elements-hidden={true} className={clsx(classNames.indicator, className)} style={{
+	return <view {...mergeProps({ "main-thread:ref": indicatorRef }, ref ? { ref } : {}, nativeProps)} accessibility-elements-hidden={true} className={clsx(classNames.indicator, className)} style={{
 		"--tabs-indicator-x": `${x}px`,
 		"--tabs-indicator-width": `${width}px`,
 		...style
@@ -318,7 +331,7 @@ var TabsContent = React.forwardRef((props, ref) => {
 		tabsContext.registerContent,
 		contentValue
 	]);
-	const content = <view {...ref ? { ref } : {}} {...nativeProps} accessibility-elements-hidden={!selected} accessibility-role-description="tabpanel" accessibility-value={selected ? "selected" : "not selected"} className={clsx(contentClasses.content, className)} style={style}>
+	const content = <view {...mergeProps(ref ? { ref } : {}, nativeProps)} accessibility-elements-hidden={!selected} accessibility-role-description="tabpanel" accessibility-value={selected ? "selected" : "not selected"} className={clsx(contentClasses.content, className)} style={style}>
       {children}
     </view>;
 	if (inCarousel) {
@@ -345,7 +358,7 @@ var TabsCarousel = React.forwardRef((props, ref) => {
 		onSwipeEnd
 	]);
 	return <TabsCarouselContext.Provider value={contextValue}>
-      <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.carousel, className)} style={style}>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.carousel, className)} style={style}>
         {children}
       </view>
     </TabsCarouselContext.Provider>;
@@ -359,11 +372,7 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 	const swipingRef = React.useRef(false);
 	const { indicatorRef, pagerValues, triggerRects } = tabsContext;
 	const indicatorRects = pagerValues.map((value) => triggerRects[value] ?? null);
-	const mergedRef = React.useCallback((node) => {
-		tabsContext.setPagerRef(node);
-		if (typeof ref === "function") ref(node);
-		else if (ref) ref.current = node;
-	}, [ref, tabsContext.setPagerRef]);
+	const mergedRef = React.useMemo(() => mergeProps({ ref: tabsContext.setPagerRef }, { ref }).ref, [ref, tabsContext.setPagerRef]);
 	const handleWillChange = React.useCallback((event) => {
 		"background only";
 		bindwillchange?.(event);
@@ -415,7 +424,13 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 			"--tabs-indicator-width": `${width}px`
 		});
 	}
-	return <viewpager ref={mergedRef} {...nativeProps} initial-select-index={Math.max(0, tabsContext.selectedPagerIndex)} enable-scroll={carouselContext.swipeable} ios-gesture-offset={carouselContext.iosBackGestureEdgeWidth} bindwillchange={handleWillChange} bindchange={handleChange} bindoffsetchange={handleOffsetChange} main-thread:bindoffsetchange={handleIndicatorOffsetChange} className={clsx(classNames.carouselCamera, className)} style={style}>
+	return <viewpager {...mergeProps({
+		ref: mergedRef,
+		bindwillchange: handleWillChange,
+		bindchange: handleChange,
+		bindoffsetchange: handleOffsetChange,
+		"main-thread:bindoffsetchange": handleIndicatorOffsetChange
+	}, nativeProps)} initial-select-index={Math.max(0, tabsContext.selectedPagerIndex)} enable-scroll={carouselContext.swipeable} ios-gesture-offset={carouselContext.iosBackGestureEdgeWidth} className={clsx(classNames.carouselCamera, className)} style={style}>
         <TabsCarouselCameraContext.Provider value={true}>
           {children}
         </TabsCarouselCameraContext.Provider>

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAIpF,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOpE;;;;;;;;GAQG;AACH,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,sBAAsB;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mFAkCvB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,sBAAsB;CAAG;AAE7B,eAAO,MAAM,YAAY,mFAmBvB,CAAC;AAKH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;CAAG;AAEzE,eAAO,MAAM,iBAAiB,wFAY5B,CAAC"}
+{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAIpF,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAQpE;;;;;;;;GAQG;AACH,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,sBAAsB;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mFAiCvB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,sBAAsB;CAAG;AAE7B,eAAO,MAAM,YAAY,mFAkBvB,CAAC;AAKH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;CAAG;AAEzE,eAAO,MAAM,iBAAiB,wFAW5B,CAAC"}

package/lib/components/TagGroup/TagGroup.jsx

@@ -1,4 +1,5 @@
 import { toArray } from "../../utils/children.js";
+import { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
 import { useStyleProps } from "../../utils/styled.js";
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
@@ -18,7 +19,7 @@ var TagGroupRoot = React.forwardRef((props, ref) => {
 	const normalizedSeparator = typeof separator === "string" ? separator.trim() : separator;
 	const visibleChildren = toArray(children);
 	return <PropsProvider value={tagGroupItemVariantProps}>
-      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.root, className)}>
         {visibleChildren.map((child, index) => {
 		if (index === 0) return child;
 		return <view key={child.key ?? index} className={classes.separatorWrapper}>
@@ -40,7 +41,7 @@ var TagGroupItem = React.forwardRef((props, ref) => {
 	const { style, restProps } = useStyleProps(otherProps);
 	const { children, className, ...nativeProps } = restProps;
 	return <ClassNamesProvider value={classes}>
-      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} style={style} {...nativeProps}>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.root, className)} style={style}>
         {children}
       </view>
     </ClassNamesProvider>;
@@ -49,7 +50,7 @@ TagGroupItem.displayName = "TagGroupItem";
 var TagGroupItemLabel = 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>;
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAYvE,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,sBAAsB;CAAG;AAE5E,eAAO,MAAM,IAAI,2EAkCf,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAavE,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,sBAAsB;CAAG;AAE5E,eAAO,MAAM,IAAI,2EAiCf,CAAC"}

package/lib/components/Text/Text.jsx

@@ -1,3 +1,4 @@
+import { mergeProps } from "../../utils/merge-props.js";
 import { handleColor, handleFontSize, handleFontWeight, handleLineHeight } from "../../utils/styled.js";
 import * as React from "@lynx-js/react";
 import clsx from "clsx";
@@ -12,7 +13,7 @@ function getTypographyStyle(textStyle) {
 var Text = React.forwardRef((props, ref) => {
 	const { color, textStyle, fontSize, lineHeight, fontWeight, align, children, className, style, ...nativeProps } = props;
 	const typographyStyle = getTypographyStyle(textStyle);
-	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(className)} style={{
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(className)} style={{
 		color: handleColor(color),
 		fontSize: handleFontSize(fontSize) ?? typographyStyle.fontSize,
 		lineHeight: handleLineHeight(lineHeight ?? fontSize) ?? typographyStyle.lineHeight,

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

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

package/lib/components/TextField/TextField.jsx

@@ -1,3 +1,4 @@
+import { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
 import { InternalIcon } from "../Icon/Icon.jsx";
 import { useFieldContext } from "../Field/context.js";
@@ -52,12 +53,7 @@ var TextFieldRoot = React.forwardRef((props, forwardedRef) => {
 		invalid,
 		readOnly
 	});
-	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 setFocused = React.useCallback((nextFocused) => {
 		"background only";
 		setLocalFocused(nextFocused);
@@ -96,7 +92,7 @@ var TextFieldRoot = React.forwardRef((props, forwardedRef) => {
 	]);
 	return <TextFieldContext.Provider value={contextValue}>
         <ClassNamesProvider value={classes}>
-          <view ref={mergedRef} className={clsx(classes.root, className)} {...nativeProps}>
+          <view {...mergeProps({ ref: mergedRef }, nativeProps)} className={clsx(classes.root, className)}>
             <view className={classes.baseStroke} accessibility-elements-hidden={true} />
             <view className={classes.stroke} accessibility-elements-hidden={true} />
             {children}
@@ -161,12 +157,7 @@ function useNativeTextControl({ forwardedRef, disabled: disabledProp, readOnly:
 			lastNativeValueRef.current = null;
 		}
 	}, []);
-	const mergedRef = React.useCallback((node) => {
-		"background only";
-		nativeRef.current = node;
-		if (typeof forwardedRef === "function") forwardedRef(node);
-		else if (forwardedRef) forwardedRef.current = node;
-	}, [forwardedRef]);
+	const mergedRef = React.useMemo(() => mergeProps({ ref: nativeRef }, { ref: forwardedRef }).ref, [forwardedRef]);
 	const updateEditingState = React.useCallback((selectionStart, selectionEnd, isComposing = isComposingRef.current) => {
 		"background only";
 		isComposingRef.current = isComposing;
@@ -341,16 +332,26 @@ var TextFieldInput = React.forwardRef((props, ref) => {
 		const value = control.context.value;
 		const isPlaceholder = value === "";
 		const displayValue = isPlaceholder ? props.placeholder : props.type === "password" ? Array.from(value, () => "•").join("") : value;
-		return <text ref={control.mergedRef} id={props.id} hidden={props.hidden} flatten={props.flatten} focusable={props.focusable} bindlayoutchange={props.bindlayoutchange} main-thread:bindlayoutchange={props["main-thread:bindlayoutchange"]} className={clsx(classes.value, className)} style={getReadOnlyTextStyle({
+		return <text {...mergeProps({
+			ref: control.mergedRef,
+			bindlayoutchange: props.bindlayoutchange,
+			"main-thread:bindlayoutchange": props["main-thread:bindlayoutchange"]
+		}, getAccessibilityProps(props))} id={props.id} hidden={props.hidden} flatten={props.flatten} focusable={props.focusable} className={clsx(classes.value, className)} style={getReadOnlyTextStyle({
 			style: props.style,
 			disabled: control.disabled,
 			placeholder: isPlaceholder,
 			multiline: false
-		})} {...getAccessibilityProps(props)}>
+		})}>
         {displayValue}
       </text>;
 	}
-	return <input {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={showSoftInputOnFocus ?? true} android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"} name={name ?? control.context.name} {...resolvedMaxLength === void 0 ? {} : { maxlength: resolvedMaxLength }} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} {...nativeProps} />;
+	return <input {...mergeProps({
+		ref: control.mergedRef,
+		bindinput: control.handleInput,
+		bindselection: handleSelection,
+		bindfocus: control.handleFocus,
+		bindblur: control.handleBlur
+	}, control.defaultValueProps, resolvedMaxLength === void 0 ? {} : { maxlength: resolvedMaxLength }, nativeProps)} className={clsx(classes.value, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={showSoftInputOnFocus ?? true} android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"} name={name ?? control.context.name} />;
 });
 TextFieldInput.displayName = "TextFieldInput";
 var TextFieldTextarea = React.forwardRef((props, ref) => {
@@ -390,16 +391,27 @@ var TextFieldTextarea = React.forwardRef((props, ref) => {
 	if (control.readOnly) {
 		const value = control.context.value;
 		const isPlaceholder = value === "";
-		return <text ref={control.mergedRef} id={props.id} hidden={props.hidden} flatten={props.flatten} focusable={props.focusable} bindlayoutchange={props.bindlayoutchange} main-thread:bindlayoutchange={props["main-thread:bindlayoutchange"]} className={clsx(classes.value, classes.textareaValue, classes.textareaFixed, className)} style={getReadOnlyTextStyle({
+		return <text {...mergeProps({
+			ref: control.mergedRef,
+			bindlayoutchange: props.bindlayoutchange,
+			"main-thread:bindlayoutchange": props["main-thread:bindlayoutchange"]
+		}, getAccessibilityProps(props))} id={props.id} hidden={props.hidden} flatten={props.flatten} focusable={props.focusable} className={clsx(classes.value, classes.textareaValue, classes.textareaFixed, className)} style={getReadOnlyTextStyle({
 			style: props.style,
 			disabled: control.disabled,
 			placeholder: isPlaceholder,
 			multiline: true
-		})} {...getAccessibilityProps(props)}>
+		})}>
           {isPlaceholder ? props.placeholder : value}
         </text>;
 	}
-	const textarea = <textarea {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, classes.textareaValue, !autoresize && classes.textareaFixed, usesIOSAutoresizeWrapper && classes.textareaNativeAutoresize, autoresize && !usesIOSAutoresizeWrapper && classes.textareaAndroidAutoresize, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={showSoftInputOnFocus ?? true} bounces={bounces ?? (autoresize ? false : void 0)} line-spacing={resolvedLineSpacing} android-fullscreen-mode={androidFullscreenMode ?? false} android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"} name={name ?? control.context.name} {...resolvedMaxLength === void 0 ? {} : { maxlength: resolvedMaxLength }} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} bindlayoutchange={usesIOSAutoresizeWrapper ? bindlayoutchange : handleLayoutChange} {...nativeProps} />;
+	const textarea = <textarea {...mergeProps({
+		ref: control.mergedRef,
+		bindinput: control.handleInput,
+		bindselection: handleSelection,
+		bindfocus: control.handleFocus,
+		bindblur: control.handleBlur,
+		bindlayoutchange: usesIOSAutoresizeWrapper ? bindlayoutchange : handleLayoutChange
+	}, control.defaultValueProps, resolvedMaxLength === void 0 ? {} : { maxlength: resolvedMaxLength }, nativeProps)} className={clsx(classes.value, classes.textareaValue, !autoresize && classes.textareaFixed, usesIOSAutoresizeWrapper && classes.textareaNativeAutoresize, autoresize && !usesIOSAutoresizeWrapper && classes.textareaAndroidAutoresize, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={showSoftInputOnFocus ?? true} bounces={bounces ?? (autoresize ? false : void 0)} line-spacing={resolvedLineSpacing} android-fullscreen-mode={androidFullscreenMode ?? false} android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"} name={name ?? control.context.name} />;
 	if (!usesIOSAutoresizeWrapper) return textarea;
 	return <view ignore-focus={true} className={clsx(classes.textareaRoot, classes.textareaAutoresizeRoot)} bindtap={handleTextareaRootTap} bindlayoutchange={control.notifyLayoutChanged}>
         {textarea}
@@ -409,13 +421,13 @@ TextFieldTextarea.displayName = "TextFieldTextarea";
 var TextFieldPrefixIcon = React.forwardRef((props, ref) => {
 	const classes = useClassNames();
 	const { className, ...otherProps } = props;
-	return <InternalIcon ref={ref} className={clsx(classes.prefixIcon, className)} {...otherProps} />;
+	return <InternalIcon {...mergeProps({ ref }, otherProps)} className={clsx(classes.prefixIcon, className)} />;
 });
 TextFieldPrefixIcon.displayName = "TextFieldPrefixIcon";
 var TextFieldPrefixText = React.forwardRef((props, ref) => {
 	const classes = useClassNames();
 	const { children, className, ...nativeProps } = props;
-	return <text {...ref ? { ref } : {}} className={clsx(classes.prefixText, className)} {...nativeProps}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.prefixText, className)}>
         {children}
       </text>;
 });
@@ -423,13 +435,13 @@ TextFieldPrefixText.displayName = "TextFieldPrefixText";
 var TextFieldSuffixIcon = React.forwardRef((props, ref) => {
 	const classes = useClassNames();
 	const { className, ...otherProps } = props;
-	return <InternalIcon ref={ref} className={clsx(classes.suffixIcon, className)} {...otherProps} />;
+	return <InternalIcon {...mergeProps({ ref }, otherProps)} className={clsx(classes.suffixIcon, className)} />;
 });
 TextFieldSuffixIcon.displayName = "TextFieldSuffixIcon";
 var TextFieldSuffixText = React.forwardRef((props, ref) => {
 	const classes = useClassNames();
 	const { children, className, ...nativeProps } = props;
-	return <text {...ref ? { ref } : {}} className={clsx(classes.suffixText, className)} {...nativeProps}>
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.suffixText, className)}>
         {children}
       </text>;
 });

package/lib/components/index.d.ts

@@ -7,20 +7,27 @@ export * from './BottomSheet';
 export * from './Callout';
 export * from './Checkbox';
 export * from './Chip';
+export * from './Count';
 export * from './Divider';
 export * from './Field';
 export * from './Icon';
+export * from './InputButton';
 export * from './KeyboardAvoidingScrollView';
 export * from './MannerTemp';
+export * from './Menu';
 export * from './MannerTempBadge';
 export * from './NotificationBadge';
 export * from './PageBanner';
+export * from './List';
 export * from './ProgressCircle';
 export * from './RadioGroup';
+export * from './ReactionButton';
+export * from './ScaleFeedback';
 export * from './SegmentedControl';
 export * from './SelectBox';
 export * from './Stack';
 export * from './Switch';
+export * from './SwipeableMenuSheet';
 export * from './Tabs';
 export * from './TagGroup';
 export * from './Text';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,69 @@
+export type Side = "top" | "right" | "bottom" | "left";
+export type Placement = Side | `${Side}-${"start" | "end"}`;
+export interface Rect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface Position {
+    /** 가용 크기는 콘텐츠 크기와 별개이며 0 이상입니다. */
+    availableWidth: number;
+    availableHeight: number;
+    /** 콘텐츠 내부 좌표입니다. 나머지 축은 placement의 반대쪽 가장자리에 붙입니다. */
+    arrow?: {
+        left?: number;
+        top?: number;
+        centerOffset: number;
+    };
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    placement: Placement;
+    transformOrigin: string;
+}
+export interface PositioningOptions {
+    placement: Placement;
+    gutter: number;
+    overflowPadding: number;
+    flip?: false | {
+        fallbackStrategy?: "bestFit" | "initialPlacement";
+        fallbackPlacements?: Placement[];
+    };
+    shift?: false | {
+        mainAxis?: boolean;
+        crossAxis?: boolean;
+        /** reference에서 완전히 떨어지지 않도록 이동을 제한합니다. */
+        limit?: boolean;
+    };
+    /** 생략하면 원래 높이를 보존합니다. 너비 제한은 호출자가 적용합니다. */
+    size?: {
+        order: "beforeFlip" | "afterShift";
+        minimumHeight?: number;
+    };
+    arrow?: {
+        /** 회전 가능한 정사각형 화살표 컨테이너의 한 변입니다. */
+        size: number;
+        /** 컨테이너 크기와 별개인 화살표 끝의 돌출 길이입니다. gutter에 더합니다. */
+        tipHeight: number;
+        padding: number;
+    };
+}
+export interface ComputePositionOptions extends PositioningOptions {
+    reference: Rect;
+    boundary: Rect;
+    width: number;
+    height: number;
+}
+/**
+ * 모든 좌표와 크기는 동일한 화면 기준 논리 px입니다.
+ * boundary의 safe area 보정과 결과의 컨테이너 상대 좌표 변환은 호출자 책임입니다.
+ *
+ * availableWidth로 너비를 제한했다면 줄바꿈 후 실제 높이를 다시 측정해 호출합니다.
+ * native 측정·호출 주기·오래된 비동기 결과 폐기는 이 순수 계산에 포함하지 않습니다.
+ */
+export declare function computePosition({ reference, boundary, width, height, placement, gutter, overflowPadding, flip: flipOptions, shift: shiftOptions, size: sizeOptions, arrow: arrowOptions, }: ComputePositionOptions): Promise<Position>;
+//# sourceMappingURL=Positioning.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Positioning.d.ts","sourceRoot":"","sources":["../../../src/components/private/Positioning.ts"],"names":[],"mappings":"AAYA,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AACvD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI,IAAI,OAAO,GAAG,KAAK,EAAE,CAAC;AAE5D,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,QAAQ;IACvB,mCAAmC;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,SAAS,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;CACzB;AAaD,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EACD,KAAK,GACL;QACE,gBAAgB,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;QAClD,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;KAClC,CAAC;IACN,KAAK,CAAC,EACF,KAAK,GACL;QACE,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,0CAA0C;QAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;IACN,4CAA4C;IAC5C,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,YAAY,GAAG,YAAY,CAAC;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,oCAAoC;QACpC,IAAI,EAAE,MAAM,CAAC;QACb,kDAAkD;QAClD,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;IAChE,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAcD;;;;;;GAMG;AACH,wBAAsB,eAAe,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,MAAM,EACN,eAAe,EACf,IAAI,EAAE,WAAgB,EACtB,KAAK,EAAE,YAAiB,EACxB,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,YAAY,GACpB,EAAE,sBAAsB,GAAG,OAAO,CAAC,QAAQ,CAAC,CAuG5C"}