@seed-design/lynx-react 0.6.2 → 0.7.0

package/lib/components/Menu/Menu.jsx

@@ -0,0 +1,520 @@
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { toArray } from "../../utils/children.js";
+import { IconSlotProvider } from "../Icon/Icon.jsx";
+import { computePosition } from "../private/Positioning.js";
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { getRectByRef } from "@lynx-js/lynx-ui-common";
+import { menu } from "@seed-design/lynx-css/vars/component";
+import { menu as menu$1 } from "@seed-design/lynx-css/recipes/menu";
+import { menuItem } from "@seed-design/lynx-css/recipes/menu-item";
+//#region src/components/Menu/Menu.tsx
+var menuMaxHeight = Number.parseFloat(menu.base.enabled.root.maxHeight);
+var menuMinimumHeight = 200;
+var MenuContext = React.createContext(null);
+var MenuItemClassNamesContext = React.createContext(null);
+var MenuGroupPositionContext = React.createContext({ isFirst: true });
+function useMenuContext(consumer) {
+	const context = React.useContext(MenuContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside <MenuRoot/>.`);
+	return context;
+}
+function useMenuItemClassNames(consumer) {
+	const context = React.useContext(MenuItemClassNamesContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside <MenuItem/>.`);
+	return context;
+}
+function mergeNodeRef(forwardedRef, node) {
+	if (typeof forwardedRef === "function") forwardedRef(node);
+	else if (forwardedRef) forwardedRef.current = node;
+}
+function getScreenRect() {
+	const systemInfo = typeof SystemInfo === "undefined" ? void 0 : SystemInfo;
+	const pixelWidth = systemInfo?.pixelWidth;
+	const pixelHeight = systemInfo?.pixelHeight;
+	const pixelRatio = systemInfo?.pixelRatio;
+	if (typeof pixelWidth !== "number" || typeof pixelHeight !== "number" || typeof pixelRatio !== "number" || pixelWidth <= 0 || pixelHeight <= 0 || pixelRatio <= 0) return null;
+	const width = pixelWidth / pixelRatio;
+	const height = pixelHeight / pixelRatio;
+	return {
+		left: 0,
+		top: 0,
+		right: width,
+		bottom: height,
+		width,
+		height
+	};
+}
+function getRootRect() {
+	"background only";
+	return getRectByRef({ current: lynx.createSelectorQuery().selectRoot() }, true);
+}
+function toPixel(value) {
+	return `${value}px`;
+}
+function getLayoutSize(event) {
+	const width = event.detail?.width ?? event.params?.width;
+	const height = event.detail?.height ?? event.params?.height;
+	if (!Number.isFinite(width) || !Number.isFinite(height)) return null;
+	return {
+		width: Math.max(0, width),
+		height: Math.max(0, height)
+	};
+}
+function hasExitTransition(event) {
+	if (event.target.uid !== event.currentTarget.uid) return false;
+	return event.params.animation_type === "transition-opacity" || event.params.animation_name === "opacity";
+}
+/**
+* @platform Lynx
+*
+* Lynx menu supports native tap and accessibility semantics. It does not expose
+* web DOM focus, keyboard navigation, typeahead, `asChild`, or nested submenus.
+*/
+var MenuRoot = React.forwardRef((props, ref) => {
+	const { size: sizeProp = "medium", open: openProp, ...restProps } = props;
+	const [variantProps, otherProps] = menu$1.splitVariantProps({
+		...restProps,
+		size: sizeProp === "responsive" ? void 0 : sizeProp
+	});
+	const { children, className, defaultOpen = false, onOpenChange, disabled = false, placement = "bottom", gutter = 8, overflowPadding = 8, matchReferenceWidth = false, ...nativeProps } = otherProps;
+	const [open, setOpen] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen
+	});
+	const [mounted, setMounted] = React.useState(open);
+	const [positionedEpoch, setPositionedEpoch] = React.useState(null);
+	const isOpenRef = React.useRef(open);
+	const openEpochRef = React.useRef(0);
+	if (open && !isOpenRef.current) openEpochRef.current++;
+	isOpenRef.current = open;
+	const openEpoch = openEpochRef.current;
+	const positioned = positionedEpoch === openEpoch;
+	const setPositioned = React.useCallback((nextPositioned) => setPositionedEpoch(nextPositioned ? openEpochRef.current : null), []);
+	const [triggerHandlers, setTriggerHandlers] = React.useState({});
+	const anchorRef = React.useRef(null);
+	const triggerRef = React.useRef(null);
+	React.useEffect(() => {
+		"background only";
+		if (open) {
+			setMounted(true);
+			return;
+		}
+		if (!positioned) setMounted(false);
+	}, [open, positioned]);
+	const requestOpen = React.useCallback((nextOpen, details) => {
+		"background only";
+		if (disabled && nextOpen) return;
+		if (nextOpen === open) return;
+		setOpen(nextOpen);
+		onOpenChange?.(nextOpen, details);
+	}, [
+		disabled,
+		onOpenChange,
+		open,
+		setOpen
+	]);
+	const finishClose = React.useCallback((immediate = false) => {
+		"background only";
+		if (immediate || !isOpenRef.current) {
+			setMounted(false);
+			setPositionedEpoch(null);
+		}
+	}, []);
+	const screenRect = getScreenRect();
+	const resolvedSize = sizeProp === "responsive" && screenRect?.width != null && screenRect.width >= 1280 ? "small" : variantProps.size ?? "medium";
+	const classes = menu$1({
+		size: resolvedSize,
+		open,
+		positioned
+	});
+	const contextValue = React.useMemo(() => ({
+		open,
+		mounted,
+		openEpoch,
+		disabled,
+		size: resolvedSize,
+		placement,
+		gutter,
+		overflowPadding,
+		matchReferenceWidth,
+		isOpenRef,
+		openEpochRef,
+		anchorRef,
+		triggerRef,
+		triggerHandlers,
+		setTriggerHandlers,
+		classes,
+		positioned,
+		setPositioned,
+		requestOpen,
+		finishClose
+	}), [
+		classes,
+		disabled,
+		finishClose,
+		gutter,
+		matchReferenceWidth,
+		mounted,
+		openEpoch,
+		setPositioned,
+		openEpochRef,
+		triggerHandlers,
+		resolvedSize,
+		open,
+		overflowPadding,
+		placement,
+		positioned,
+		requestOpen
+	]);
+	return <MenuContext.Provider value={contextValue}>
+      <view {...ref ? { ref } : {}} className={className} {...nativeProps}>
+        {children}
+      </view>
+    </MenuContext.Provider>;
+});
+MenuRoot.displayName = "MenuRoot";
+var MenuAnchor = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useMenuContext("MenuAnchor");
+	const handleRef = React.useCallback((node) => {
+		context.anchorRef.current = node;
+		mergeNodeRef(ref, node);
+	}, [context.anchorRef, ref]);
+	return <view ref={handleRef} className={className} {...nativeProps}>
+      {children}
+    </view>;
+});
+MenuAnchor.displayName = "MenuAnchor";
+var MenuTrigger = React.forwardRef((props, ref) => {
+	const { children, className, bindtap, "main-thread:bindtap": mainThreadBindtap, disabled: disabledProp = false, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits, ...nativeProps } = props;
+	const context = useMenuContext("MenuTrigger");
+	const disabled = context.disabled || disabledProp;
+	const { bindtap: proxyBindtap, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: React.useCallback((event, instance) => {
+			"background only";
+			context.requestOpen(!context.open, {
+				reason: "trigger",
+				event
+			});
+			bindtap?.(event, instance);
+		}, [bindtap, context]),
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const mainThreadProxyBindtap = pressHandlers["main-thread:bindtap"];
+	React.useEffect(() => {
+		"background only";
+		context.setTriggerHandlers({
+			bindtap: proxyBindtap,
+			"main-thread:bindtap": mainThreadProxyBindtap
+		});
+		return () => context.setTriggerHandlers({});
+	}, [
+		context.setTriggerHandlers,
+		mainThreadProxyBindtap,
+		proxyBindtap
+	]);
+	const handleRef = React.useCallback((node) => {
+		context.triggerRef.current = node;
+		mergeNodeRef(ref, node);
+	}, [context.triggerRef, ref]);
+	return <view ref={handleRef} className={className} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-role-description="button" accessibility-value={context.open ? "expanded" : "collapsed"} accessibility-traits={disabled ? "disabled" : accessibilityTraits ?? "button"} {...nativeProps} {...pressHandlers} bindtap={proxyBindtap}>
+      {children}
+    </view>;
+});
+MenuTrigger.displayName = "MenuTrigger";
+var MenuContent = React.forwardRef((props, ref) => {
+	const { children, className, style, ...nativeProps } = props;
+	const context = useMenuContext("MenuContent");
+	const measurementVersionRef = React.useRef(0);
+	const intrinsicWidthRef = React.useRef(null);
+	const [overlayNode, setOverlayNode] = React.useState(null);
+	const measurementConfigRef = React.useRef(0);
+	const [intrinsicSize, setIntrinsicSize] = React.useState(null);
+	const [position, setPosition] = React.useState(null);
+	const [widthConstraint, setWidthConstraint] = React.useState(null);
+	const [overlayRect, setOverlayRect] = React.useState(null);
+	const [triggerRect, setTriggerRect] = React.useState(null);
+	const measurePosition = React.useCallback(async () => {
+		"background only";
+		const referenceNode = context.anchorRef.current ?? context.triggerRef.current;
+		const triggerNode = context.triggerRef.current;
+		const openEpoch = context.openEpoch;
+		if (!context.open || !referenceNode || !overlayNode || !intrinsicSize || intrinsicSize.epoch !== openEpoch || intrinsicSize.config !== measurementConfigRef.current) return;
+		const version = ++measurementVersionRef.current;
+		try {
+			const [reference, boundary, overlay, trigger] = await Promise.all([
+				getRectByRef({ current: referenceNode }, true),
+				getRootRect(),
+				getRectByRef({ current: overlayNode }, true),
+				triggerNode ? getRectByRef({ current: triggerNode }, true) : Promise.resolve(null)
+			]);
+			if (version !== measurementVersionRef.current || !context.isOpenRef.current || openEpoch !== context.openEpochRef.current) return;
+			const intrinsicWidth = context.matchReferenceWidth ? reference.width : intrinsicWidthRef.current ?? intrinsicSize.width;
+			const width = widthConstraint ?? intrinsicWidth;
+			const nextPosition = await computePosition({
+				reference,
+				boundary,
+				width,
+				height: Math.min(intrinsicSize.height, menuMaxHeight),
+				placement: context.placement,
+				gutter: context.gutter,
+				overflowPadding: context.overflowPadding,
+				flip: { fallbackStrategy: "bestFit" },
+				shift: { crossAxis: true },
+				size: {
+					order: "beforeFlip",
+					minimumHeight: menuMinimumHeight
+				}
+			});
+			if (version !== measurementVersionRef.current || !context.isOpenRef.current || openEpoch !== context.openEpochRef.current) return;
+			if (nextPosition.availableWidth < width) {
+				const constrainedWidth = nextPosition.availableWidth;
+				if (widthConstraint !== constrainedWidth) {
+					setWidthConstraint(constrainedWidth);
+					setIntrinsicSize(null);
+					setPosition(null);
+					setOverlayRect(null);
+					setTriggerRect(null);
+					context.setPositioned(false);
+				}
+				return;
+			}
+			setPosition((previous) => {
+				if (previous?.left === nextPosition.left && previous.top === nextPosition.top && previous.width === nextPosition.width && previous.height === nextPosition.height && previous.placement === nextPosition.placement) return previous;
+				return nextPosition;
+			});
+			setOverlayRect(overlay);
+			setTriggerRect(trigger);
+			context.setPositioned(true);
+		} catch {}
+	}, [
+		context,
+		intrinsicSize,
+		overlayNode,
+		widthConstraint
+	]);
+	React.useEffect(() => {
+		"background only";
+		measurementVersionRef.current++;
+		setWidthConstraint(null);
+		setPosition(null);
+		setOverlayRect(null);
+		setTriggerRect(null);
+		setIntrinsicSize((current) => current ? {
+			...current,
+			epoch: context.openEpoch
+		} : current);
+	}, [context.openEpoch]);
+	React.useEffect(() => {
+		"background only";
+		measurementVersionRef.current++;
+		intrinsicWidthRef.current = null;
+		measurementConfigRef.current++;
+		setWidthConstraint(null);
+		setIntrinsicSize((current) => current ? {
+			...current,
+			config: measurementConfigRef.current
+		} : current);
+		setPosition(null);
+		setOverlayRect(null);
+		setTriggerRect(null);
+		context.setPositioned(false);
+	}, [
+		className,
+		context.setPositioned,
+		context.size,
+		style
+	]);
+	React.useEffect(() => {
+		"background only";
+		if (context.open) measurePosition();
+	}, [context.open, measurePosition]);
+	const handleShowOverlay = React.useCallback(() => {
+		"background only";
+		measurePosition();
+	}, [measurePosition]);
+	const handleRef = React.useCallback((node) => {
+		measurementVersionRef.current++;
+		mergeNodeRef(ref, node);
+	}, [ref]);
+	const handlePositionerRef = React.useCallback((node) => {
+		setOverlayNode(node);
+	}, []);
+	const handleIntrinsicLayoutChange = React.useCallback((event) => {
+		"background only";
+		const nextSize = getLayoutSize(event);
+		if (!nextSize || !context.open) return;
+		if (intrinsicWidthRef.current === null) intrinsicWidthRef.current = nextSize.width;
+		setIntrinsicSize((current) => {
+			const nextWidth = intrinsicWidthRef.current ?? nextSize.width;
+			if (current?.width === nextWidth && current.height === nextSize.height && current.epoch === context.openEpoch && current.config === measurementConfigRef.current) return current;
+			return {
+				width: nextWidth,
+				height: nextSize.height,
+				epoch: context.openEpoch,
+				config: measurementConfigRef.current
+			};
+		});
+	}, [context.open, context.openEpoch]);
+	const handleTransitionEnd = React.useCallback((event) => {
+		"background only";
+		if (!context.open && hasExitTransition(event)) context.finishClose();
+	}, [context]);
+	const handleBackdropTap = React.useCallback((event) => {
+		"background only";
+		context.requestOpen(false, {
+			reason: "interactOutside",
+			event
+		});
+	}, [context]);
+	const handleNativeDismiss = React.useCallback((event) => {
+		"background only";
+		context.requestOpen(false, {
+			reason: "dismiss",
+			event
+		});
+		context.finishClose(true);
+	}, [context]);
+	const handleRequestClose = React.useCallback((event) => {
+		"background only";
+		context.requestOpen(false, {
+			reason: "dismiss",
+			event
+		});
+	}, [context]);
+	if (!context.mounted) return null;
+	const geometryStyle = position && overlayRect ? {
+		left: toPixel(position.left - overlayRect.left),
+		top: toPixel(position.top - overlayRect.top),
+		width: toPixel(position.width),
+		transformOrigin: position.transformOrigin
+	} : void 0;
+	const scrollStyle = position ? { height: toPixel(position.height) } : void 0;
+	const triggerProxyStyle = triggerRect && overlayRect ? {
+		left: toPixel(triggerRect.left - overlayRect.left),
+		top: toPixel(triggerRect.top - overlayRect.top),
+		width: toPixel(triggerRect.width),
+		height: toPixel(triggerRect.height)
+	} : void 0;
+	const childNodes = toArray(children);
+	return <overlay visible style={{ position: "fixed" }} binddismissoverlay={handleNativeDismiss} bindshowoverlay={handleShowOverlay} bindrequestclose={handleRequestClose}>
+      <view ref={handlePositionerRef} className={context.classes.positioner}>
+        <view className={context.classes.backdrop} bindtap={handleBackdropTap} />
+        {triggerProxyStyle && <view style={{
+		position: "absolute",
+		...triggerProxyStyle
+	}} bindtap={context.triggerHandlers.bindtap} main-thread:bindtap={context.triggerHandlers["main-thread:bindtap"]} />}
+        <view ref={handleRef} className={clsx(context.classes.content, className)} style={{
+		...geometryStyle,
+		...style,
+		...widthConstraint != null ? { width: toPixel(widthConstraint) } : {}
+	}} bindtransitionend={handleTransitionEnd} {...nativeProps}>
+          <scroll-view className={context.classes.scrollArea} scroll-orientation="vertical" style={scrollStyle}>
+            <view className={context.classes.scrollContent} bindlayoutchange={handleIntrinsicLayoutChange}>
+              {childNodes.map((child, index) => <MenuGroupPositionContext.Provider key={React.isValidElement(child) ? child.key ?? index : index} value={{ isFirst: index === 0 }}>
+                  {child}
+                </MenuGroupPositionContext.Provider>)}
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+    </overlay>;
+});
+MenuContent.displayName = "MenuContent";
+var MenuScrollArea = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useMenuContext("MenuScrollArea").classes;
+	return <scroll-view {...ref ? { ref } : {}} className={clsx(classes.scrollArea, className)} scroll-orientation="vertical" {...nativeProps}>
+      <view className={classes.scrollContent}>{children}</view>
+    </scroll-view>;
+});
+MenuScrollArea.displayName = "MenuScrollArea";
+var MenuGroup = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useMenuContext("MenuGroup").classes;
+	const position = React.useContext(MenuGroupPositionContext);
+	return <view {...ref ? { ref } : {}} className={clsx(classes.group, className)} {...nativeProps}>
+      {!position.isFirst ? <view className={classes.separator} accessibility-elements-hidden={true} /> : null}
+      {children}
+    </view>;
+});
+MenuGroup.displayName = "MenuGroup";
+var MenuGroupLabel = React.forwardRef((props, ref) => {
+	const { children, className, "accessibility-heading": accessibilityHeading = true, ...nativeProps } = props;
+	const classes = useMenuContext("MenuGroupLabel").classes;
+	return <text {...ref ? { ref } : {}} className={clsx(classes.groupLabel, className)} accessibility-heading={accessibilityHeading} {...nativeProps}>
+      {children}
+    </text>;
+});
+MenuGroupLabel.displayName = "MenuGroupLabel";
+var MenuItem = React.forwardRef((props, ref) => {
+	const [variantProps, otherProps] = menuItem.splitVariantProps(props);
+	const { disabled: disabledProp = false, tone = "neutral" } = variantProps;
+	const { children, className, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-traits": accessibilityTraits, ...nativeProps } = otherProps;
+	const context = useMenuContext("MenuItem");
+	const disabled = context.disabled || disabledProp;
+	const { pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: React.useCallback((event, instance) => {
+			"background only";
+			bindtap?.(event, instance);
+			context.requestOpen(false, {
+				reason: "itemClick",
+				event
+			});
+		}, [bindtap, context]),
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const classes = menuItem({
+		...variantProps,
+		size: context.size,
+		tone,
+		disabled,
+		pressed
+	});
+	const iconSlots = React.useMemo(() => ({
+		classNames: {
+			prefixIcon: classes.prefixIcon,
+			suffixIcon: classes.suffixIcon
+		},
+		deps: [classes.prefixIcon, classes.suffixIcon]
+	}), [classes.prefixIcon, classes.suffixIcon]);
+	return <MenuItemClassNamesContext.Provider value={classes}>
+      <IconSlotProvider value={iconSlots}>
+        <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-role-description="button" accessibility-traits={disabled ? "disabled" : accessibilityTraits ?? "button"} {...nativeProps} {...pressHandlers}>
+          <view className={classes.pressedOverlay} accessibility-elements-hidden={true} />
+          {children}
+        </view>
+      </IconSlotProvider>
+    </MenuItemClassNamesContext.Provider>;
+});
+MenuItem.displayName = "MenuItem";
+var MenuItemBody = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useMenuItemClassNames("MenuItemBody");
+	return <view {...ref ? { ref } : {}} className={clsx(classes.body, className)} {...nativeProps}>
+      {children}
+    </view>;
+});
+MenuItemBody.displayName = "MenuItemBody";
+var MenuItemLabel = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useMenuItemClassNames("MenuItemLabel");
+	return <text {...ref ? { ref } : {}} className={clsx(classes.label, className)} {...nativeProps}>
+      {children}
+    </text>;
+});
+MenuItemLabel.displayName = "MenuItemLabel";
+var MenuItemDescription = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = useMenuItemClassNames("MenuItemDescription");
+	return <text {...ref ? { ref } : {}} className={clsx(classes.description, className)} {...nativeProps}>
+        {children}
+      </text>;
+});
+MenuItemDescription.displayName = "MenuItemDescription";
+//#endregion
+export { MenuAnchor, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuItemBody, MenuItemDescription, MenuItemLabel, MenuRoot, MenuScrollArea, MenuTrigger };

package/lib/components/Menu/Menu.namespace.d.ts

@@ -0,0 +1,2 @@
+export { MenuAnchor as Anchor, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemBody as ItemBody, MenuItemDescription as ItemDescription, MenuItemLabel as ItemLabel, MenuPrefixIcon as PrefixIcon, MenuRoot as Root, MenuScrollArea as ScrollArea, MenuSuffixIcon as SuffixIcon, MenuTrigger as Trigger, type MenuAnchorProps as AnchorProps, type MenuContentProps as ContentProps, type MenuGroupLabelProps as GroupLabelProps, type MenuGroupProps as GroupProps, type MenuItemBodyProps as ItemBodyProps, type MenuItemDescriptionProps as ItemDescriptionProps, type MenuItemLabelProps as ItemLabelProps, type MenuItemProps as ItemProps, type MenuRootProps as RootProps, type MenuScrollAreaProps as ScrollAreaProps, type MenuTriggerProps as TriggerProps, } from './Menu';
+//# sourceMappingURL=Menu.namespace.d.ts.map

package/lib/components/Menu/Menu.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,MAAM,EACpB,WAAW,IAAI,OAAO,EACtB,SAAS,IAAI,KAAK,EAClB,cAAc,IAAI,UAAU,EAC5B,QAAQ,IAAI,IAAI,EAChB,YAAY,IAAI,QAAQ,EACxB,mBAAmB,IAAI,eAAe,EACtC,aAAa,IAAI,SAAS,EAC1B,cAAc,IAAI,UAAU,EAC5B,QAAQ,IAAI,IAAI,EAChB,cAAc,IAAI,UAAU,EAC5B,cAAc,IAAI,UAAU,EAC5B,WAAW,IAAI,OAAO,EACtB,KAAK,eAAe,IAAI,WAAW,EACnC,KAAK,gBAAgB,IAAI,YAAY,EACrC,KAAK,mBAAmB,IAAI,eAAe,EAC3C,KAAK,cAAc,IAAI,UAAU,EACjC,KAAK,iBAAiB,IAAI,aAAa,EACvC,KAAK,wBAAwB,IAAI,oBAAoB,EACrD,KAAK,kBAAkB,IAAI,cAAc,EACzC,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,mBAAmB,IAAI,eAAe,EAC3C,KAAK,gBAAgB,IAAI,YAAY,GACtC,MAAM,QAAQ,CAAC"}

package/lib/components/Menu/Menu.namespace.js

@@ -0,0 +1,21 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { PrefixIcon, SuffixIcon } from "../Icon/Icon.jsx";
+import { MenuAnchor, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuItemBody, MenuItemDescription, MenuItemLabel, MenuRoot, MenuScrollArea, MenuTrigger } from "./Menu.jsx";
+//#region src/components/Menu/Menu.namespace.ts
+var Menu_namespace_exports = /* @__PURE__ */ __exportAll({
+	Anchor: () => MenuAnchor,
+	Content: () => MenuContent,
+	Group: () => MenuGroup,
+	GroupLabel: () => MenuGroupLabel,
+	Item: () => MenuItem,
+	ItemBody: () => MenuItemBody,
+	ItemDescription: () => MenuItemDescription,
+	ItemLabel: () => MenuItemLabel,
+	PrefixIcon: () => PrefixIcon,
+	Root: () => MenuRoot,
+	ScrollArea: () => MenuScrollArea,
+	SuffixIcon: () => SuffixIcon,
+	Trigger: () => MenuTrigger
+});
+//#endregion
+export { Menu_namespace_exports };

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

@@ -0,0 +1,3 @@
+export { MenuAnchor, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuItemBody, MenuItemDescription, MenuItemLabel, MenuPrefixIcon, MenuRoot, MenuScrollArea, MenuSuffixIcon, MenuTrigger, type MenuAnchorProps, type MenuContentProps, type MenuGroupLabelProps, type MenuGroupProps, type MenuItemBodyProps, type MenuItemDescriptionProps, type MenuItemLabelProps, type MenuItemProps, type MenuOpenChangeDetails, type MenuOpenChangeReason, type MenuPlacement, type MenuRootProps, type MenuScrollAreaProps, type MenuTriggerProps, } from './Menu';
+export * as Menu from './Menu.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,WAAW,EACX,SAAS,EACT,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,QAAQ,EACR,cAAc,EACd,cAAc,EACd,WAAW,EACX,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBadge/NotificationBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,6BAA6B,EACnC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAEL,KAAK,uCAAuC,EAC7C,MAAM,6DAA6D,CAAC;AAErE,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EAEvB,MAAM,aAAa,CAAC;AAIrB;;;;;;GAMG;AACH,MAAM,WAAW,sBACf,SAAQ,6BAA6B,EACnC,sBAAsB,EACtB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,iBAAiB,wFAoB7B,CAAC;AAIF,MAAM,WAAW,gCACf,SAAQ,uCAAuC,EAC7C,sBAAsB;CAAG;AAE7B,eAAO,MAAM,2BAA2B,kGAmBtC,CAAC"}
+{"version":3,"file":"NotificationBadge.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationBadge/NotificationBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,6BAA6B,EACnC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAEL,KAAK,uCAAuC,EAC7C,MAAM,6DAA6D,CAAC;AAErE,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAK/F;;;;;;GAMG;AACH,MAAM,WAAW,sBACf,SAAQ,6BAA6B,EACnC,sBAAsB,EACtB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,iBAAiB,wFAmB7B,CAAC;AAIF,MAAM,WAAW,gCACf,SAAQ,uCAAuC,EAC7C,sBAAsB;CAAG;AAE7B,eAAO,MAAM,2BAA2B,kGAkBtC,CAAC"}

package/lib/components/NotificationBadge/NotificationBadge.jsx

@@ -1,3 +1,4 @@
+import { mergeProps } from "../../utils/merge-props.js";
 import * as React from "@lynx-js/react";
 import clsx from "clsx";
 import { notificationBadge } from "@seed-design/lynx-css/recipes/notification-badge";
@@ -12,7 +13,7 @@ var NotificationBadge = React.forwardRef((innerProps, ref) => {
 	const [variantProps, otherProps] = notificationBadge.splitVariantProps(props);
 	const classes = notificationBadge(variantProps);
 	const { children, className, ...nativeProps } = otherProps;
-	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classes.root, className)}>
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.root, className)}>
         <text className={classes.label} text-single-line-vertical-align="center">
           {children}
         </text>
@@ -24,7 +25,7 @@ var NotificationBadgePositioner = React.forwardRef((props, ref) => {
 	const { children, className, ...nativeProps } = otherProps;
 	const contextValue = React.useMemo(() => ({ size: variantProps.size }), [variantProps.size]);
 	return <NotificationBadgeContext.Provider value={contextValue}>
-      <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(notificationBadgePositioner(variantProps), className)}>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(notificationBadgePositioner(variantProps), className)}>
         {children}
       </view>
     </NotificationBadgeContext.Provider>;

package/lib/components/PageBanner/PageBanner.d.ts

@@ -4,11 +4,11 @@ import * as React from "@lynx-js/react";
 /**
  * @platform Lynx
  *
- * 웹 대비 차이:
- * - `asChild`와 DOM 이벤트 대신 Lynx native `<view>`와 `bindtap`을 사용합니다.
- * - 웹 focus ring과 동적 scale feedback은 지원하지 않습니다.
+ * Differences from React Web:
+ * - Uses Lynx native `<view>` and `bindtap` instead of `asChild` and DOM events.
+ * - Does not provide a web focus ring.
  */
-export interface PageBannerRootProps extends Omit<PageBannerVariantProps, "pressed" | "closeButtonPressed">, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+export interface PageBannerRootProps extends Omit<PageBannerVariantProps, "pressed" | "closeButtonPressed" | "interactive">, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
     defaultOpen?: boolean;
     open?: boolean;
     onDismiss?: () => void;
@@ -29,7 +29,7 @@ export declare const PageBannerDescription: React.ForwardRefExoticComponent<Page
 export interface PageBannerButtonProps extends LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
 }
 export declare const PageBannerButton: React.ForwardRefExoticComponent<PageBannerButtonProps & React.RefAttributes<unknown>>;
-export interface PageBannerCloseButtonProps extends LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+export interface PageBannerCloseButtonProps extends Omit<LynxStyledElementProps, "flatten">, LynxPressableProps, LynxAccessibilityProps {
 }
 export declare const PageBannerCloseButton: React.ForwardRefExoticComponent<PageBannerCloseButtonProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=PageBanner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACpG,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAMxC,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAIvB,MAAM,aAAa,CAAC;AA2BrB;;;;;;GAMG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,oBAAoB,CAAC,EACpE,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,qFAmFzB,CAAC;AAKH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAEjG,eAAO,MAAM,iBAAiB,wFAc5B,CAAC;AAKH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE9F,eAAO,MAAM,cAAc,qFAczB,CAAC;AAKH,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE/F,eAAO,MAAM,eAAe,sFAe1B,CAAC;AAKH,MAAM,WAAW,0BACf,SAAQ,sBAAsB,EAC5B,sBAAsB;CAAG;AAE7B,eAAO,MAAM,qBAAqB,4FAgBjC,CAAC;AAKF,MAAM,WAAW,qBACf,SAAQ,sBAAsB,EAC5B,kBAAkB,EAClB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,gBAAgB,uFAuB3B,CAAC;AAKH,MAAM,WAAW,0BACf,SAAQ,sBAAsB,EAC5B,kBAAkB,EAClB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,qBAAqB,4FAiEjC,CAAC"}
+{"version":3,"file":"PageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACpG,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAOxC,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAIvB,MAAM,aAAa,CAAC;AA6BrB;;;;;;GAMG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,oBAAoB,GAAG,aAAa,CAAC,EACpF,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,qFAyFzB,CAAC;AAKH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAEjG,eAAO,MAAM,iBAAiB,wFAa5B,CAAC;AAKH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE9F,eAAO,MAAM,cAAc,qFAazB,CAAC;AAKH,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB,EAAE,sBAAsB;CAAG;AAE/F,eAAO,MAAM,eAAe,sFAc1B,CAAC;AAKH,MAAM,WAAW,0BACf,SAAQ,sBAAsB,EAC5B,sBAAsB;CAAG;AAE7B,eAAO,MAAM,qBAAqB,4FAejC,CAAC;AAKF,MAAM,WAAW,qBACf,SAAQ,sBAAsB,EAC5B,kBAAkB,EAClB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,gBAAgB,uFAwB3B,CAAC;AAKH,MAAM,WAAW,0BAEf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAC7C,kBAAkB,EAClB,sBAAsB;CAAG;AAE7B,eAAO,MAAM,qBAAqB,4FAmEjC,CAAC"}