@vellira-ui/react-native 2.57.0 → 2.59.0

package/dist/index.js

@@ -1,6 +1,7 @@
-import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
 import { AccessibilityInfo, ActivityIndicator, Animated, BackHandler, Dimensions, Easing, FlatList, Modal as Modal$1, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
+import { createConsoleOverlayDiagnostics, createOverlayManagerStore, createOverlayZIndexPolicy, createRetainedResourceRegistry, deferOverlayFocusRestore, getCompoundSlot, markCompoundSlot, resolveOverlayPresentation } from "@vellira-ui/core";
 import { darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/theme/fontWeight.ts
@@ -23,314 +24,278 @@ function toNativeFontWeight(weight) {
 	return normalizedWeight;
 }
 //#endregion
-//#region src/managers/FloatingManager/computeFloatingPosition.ts
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), Math.max(min, max));
-}
-function parsePlacement(placement) {
-	const [side, align = "center"] = placement.split("-");
-	return {
-		side,
-		align
-	};
-}
-function createPlacement(side, align) {
-	return align === "center" ? side : `${side}-${align}`;
-}
-function getOppositeSide(side) {
-	switch (side) {
-		case "top": return "bottom";
-		case "right": return "left";
-		case "bottom": return "top";
-		case "left": return "right";
-	}
-}
-function computeBasePosition({ reference, floating, side, align, offset }) {
-	const referenceCenterX = reference.x + reference.width / 2;
-	const referenceCenterY = reference.y + reference.height / 2;
-	const alignedLeft = align === "start" ? reference.x : align === "end" ? reference.x + reference.width - floating.width : referenceCenterX - floating.width / 2;
-	const alignedTop = align === "start" ? reference.y : align === "end" ? reference.y + reference.height - floating.height : referenceCenterY - floating.height / 2;
-	switch (side) {
-		case "top": return {
-			top: reference.y - floating.height - offset,
-			left: alignedLeft
-		};
-		case "right": return {
-			top: alignedTop,
-			left: reference.x + reference.width + offset
-		};
-		case "bottom": return {
-			top: reference.y + reference.height + offset,
-			left: alignedLeft
-		};
-		case "left": return {
-			top: alignedTop,
-			left: reference.x - floating.width - offset
-		};
-	}
-}
-function getMainAxisOverflow({ side, position, floating, boundary, padding }) {
-	switch (side) {
-		case "top": return padding - position.top;
-		case "right": return position.left + floating.width + padding - boundary.width;
-		case "bottom": return position.top + floating.height + padding - boundary.height;
-		case "left": return padding - position.left;
-	}
-}
-function computeFloatingPosition({ reference, floating, boundary, placement, offset = 8, padding = 12, arrowPadding = 16, flip = true, shift = true }) {
-	const parsed = parsePlacement(placement);
-	let resolvedSide = parsed.side;
-	let position = computeBasePosition({
-		reference,
-		floating,
-		side: resolvedSide,
-		align: parsed.align,
-		offset
+//#region src/managers/OverlayManager/NativeOverlayManager.ts
+const nativeOverlayZIndexPolicy = createOverlayZIndexPolicy({
+	defaultLevel: "modal",
+	levels: { modal: lightTheme.tokens.zIndex.modal }
+});
+const nativeOverlayDiagnostics = createConsoleOverlayDiagnostics("NativeOverlayManager");
+const createNativeOverlayManager = () => {
+	const store = createOverlayManagerStore({
+		diagnostics: nativeOverlayDiagnostics,
+		policy: nativeOverlayZIndexPolicy
 	});
-	if (flip && getMainAxisOverflow({
-		side: resolvedSide,
-		position,
-		floating,
-		boundary,
-		padding
-	}) > 0) {
-		const oppositeSide = getOppositeSide(resolvedSide);
-		const oppositePosition = computeBasePosition({
-			reference,
-			floating,
-			side: oppositeSide,
-			align: parsed.align,
-			offset
-		});
-		if (getMainAxisOverflow({
-			side: oppositeSide,
-			position: oppositePosition,
-			floating,
-			boundary,
-			padding
-		}) <= 0) {
-			resolvedSide = oppositeSide;
-			position = oppositePosition;
-		}
-	}
-	if (shift) position = {
-		top: clamp(position.top, padding, boundary.height - floating.height - padding),
-		left: clamp(position.left, padding, boundary.width - floating.width - padding)
+	const dismissHandlers = /* @__PURE__ */ new Map();
+	const outsidePressHandlers = /* @__PURE__ */ new Map();
+	const toNativeEntry = (id) => ({
+		id,
+		zIndex: store.getZIndex(id) ?? nativeOverlayZIndexPolicy.levels.modal
+	});
+	let cachedStoreSnapshot;
+	let cachedNativeSnapshot;
+	const getNativeSnapshot = () => {
+		const snapshot = store.getSnapshot();
+		if (cachedStoreSnapshot === snapshot && cachedNativeSnapshot) return cachedNativeSnapshot;
+		const stack = snapshot.stack.map((entry) => toNativeEntry(entry.id));
+		cachedStoreSnapshot = snapshot;
+		cachedNativeSnapshot = {
+			registry: new Map(stack.map((entry) => [entry.id, entry])),
+			stack,
+			topmost: snapshot.topmost ? toNativeEntry(snapshot.topmost.id) : void 0
+		};
+		return cachedNativeSnapshot;
 	};
-	const referenceCenterX = reference.x + reference.width / 2;
-	const referenceCenterY = reference.y + reference.height / 2;
-	const arrowPosition = resolvedSide === "top" || resolvedSide === "bottom" ? { left: clamp(referenceCenterX - position.left, arrowPadding, floating.width - arrowPadding) } : { top: clamp(referenceCenterY - position.top, arrowPadding, floating.height - arrowPadding) };
 	return {
-		position,
-		arrowPosition,
-		placement: createPlacement(resolvedSide, parsed.align)
-	};
-}
-//#endregion
-//#region src/managers/FloatingManager/useNativeFloatingPosition.ts
-function useNativeFloatingPosition(placement = "top", offset = 8) {
-	const [result, setResult] = useState({
-		position: {
-			top: 0,
-			left: 0
+		register(id) {
+			const entry = store.register({ id });
+			return toNativeEntry(entry.id);
 		},
-		arrowPosition: {},
-		placement
-	});
-	const floatingSizeRef = useRef({
-		width: 0,
-		height: 0
-	});
-	const lastTriggerRef = useRef(null);
-	const lastContainerRef = useRef(null);
-	const updatePosition = useCallback((triggerRef, containerRef, measuredSize = floatingSizeRef.current) => {
-		lastTriggerRef.current = triggerRef;
-		lastContainerRef.current = containerRef ?? null;
-		const triggerNode = triggerRef.current;
-		const containerNode = containerRef?.current;
-		if (!triggerNode || typeof triggerNode.measureInWindow !== "function") {
-			setResult((current) => ({
-				...current,
-				position: {
-					top: 0,
-					left: 0
-				}
-			}));
-			return;
-		}
-		triggerNode.measureInWindow((x, y, width, height) => {
-			const commitPosition = (containerX, containerY, containerWidth, containerHeight) => {
-				const nextResult = computeFloatingPosition({
-					reference: {
-						x: x - containerX,
-						y: y - containerY,
-						width,
-						height
-					},
-					floating: measuredSize,
-					boundary: {
-						width: containerWidth,
-						height: containerHeight
-					},
-					placement,
-					offset
-				});
-				setResult(nextResult);
+		unregister(id) {
+			dismissHandlers.delete(id);
+			outsidePressHandlers.delete(id);
+			store.unregister(id);
+		},
+		getSnapshot() {
+			return getNativeSnapshot();
+		},
+		isTop(id) {
+			return store.isTopmost(id);
+		},
+		getTop() {
+			return getNativeSnapshot().topmost;
+		},
+		getZIndex(id) {
+			return store.getZIndex(id) ?? nativeOverlayZIndexPolicy.levels[nativeOverlayZIndexPolicy.defaultLevel];
+		},
+		subscribe(listener) {
+			return store.subscribe(listener);
+		},
+		registerDismissHandler(id, handler) {
+			dismissHandlers.set(id, handler);
+			return () => {
+				if (dismissHandlers.get(id) !== handler) return;
+				dismissHandlers.delete(id);
 			};
-			if (!containerNode || typeof containerNode.measureInWindow !== "function") {
-				const window = Dimensions.get("window");
-				commitPosition(0, 0, window.width, window.height);
-				return;
-			}
-			containerNode.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
-				commitPosition(containerX, containerY, containerWidth, containerHeight);
-			});
-		});
-	}, [placement, offset]);
-	const onFloatingLayout = useCallback((event) => {
-		const { width, height } = event.nativeEvent.layout;
-		const nextSize = {
-			width,
-			height
-		};
-		floatingSizeRef.current = nextSize;
-		if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, lastContainerRef.current ?? void 0, nextSize);
-	}, [updatePosition]);
-	return {
-		position: result.position,
-		arrowPosition: result.arrowPosition,
-		placement: result.placement,
-		updatePosition,
-		onFloatingLayout
+		},
+		registerOutsidePressHandler(id, handler) {
+			outsidePressHandlers.set(id, handler);
+			return () => {
+				if (outsidePressHandlers.get(id) !== handler) return;
+				outsidePressHandlers.delete(id);
+			};
+		},
+		dispatchTopDismiss() {
+			const top = this.getTop();
+			if (!top) return false;
+			const handler = dismissHandlers.get(top.id);
+			if (!handler) return false;
+			return handler();
+		},
+		dispatchTopOutsidePress() {
+			const top = this.getTop();
+			if (!top) return false;
+			const handler = outsidePressHandlers.get(top.id);
+			if (!handler) return false;
+			return handler();
+		},
+		clear() {
+			dismissHandlers.clear();
+			outsidePressHandlers.clear();
+			store.clear();
+		}
 	};
-}
-//#endregion
-//#region src/managers/OverlayManager/NativeOverlayManager.ts
-const BASE_LAYER = 1e3;
-const LAYER_STEP = 10;
-let stack = [];
-const nativeOverlayManager = {
-	register(id) {
-		stack = stack.filter((item) => item.id !== id);
-		const entry = {
-			id,
-			layer: BASE_LAYER + stack.length * LAYER_STEP
-		};
-		stack.push(entry);
-		return entry;
-	},
-	unregister(id) {
-		stack = stack.filter((item) => item.id !== id);
-	},
-	isTop(id) {
-		return stack.at(-1)?.id === id;
-	},
-	getTop() {
-		return stack.at(-1);
-	},
-	getLayer(id) {
-		return stack.find((item) => item.id === id)?.layer ?? BASE_LAYER;
-	}
 };
+const nativeOverlayManager = createNativeOverlayManager();
 //#endregion
-//#region src/managers/OverlayManager/useNativeOverlayRegistration.ts
-const useNativeOverlayRegistration = ({ id, visible }) => {
-	const [layer, setLayer] = useState(() => nativeOverlayManager.getLayer(id));
+//#region src/managers/OverlayManager/OverlayManagerProvider.tsx
+const NativeOverlayManagerContext = createContext(null);
+const useNativeOverlayManager = () => useContext(NativeOverlayManagerContext) ?? nativeOverlayManager;
+//#endregion
+//#region src/hooks/behavior/overlay/useOverlayRegistration.ts
+const useOverlayRegistration = ({ active, id }) => {
+	const nativeOverlayManager = useNativeOverlayManager();
+	const snapshot = useSyncExternalStore(nativeOverlayManager.subscribe, nativeOverlayManager.getSnapshot, nativeOverlayManager.getSnapshot);
 	useEffect(() => {
-		if (!visible) return;
-		const entry = nativeOverlayManager.register(id);
-		setLayer(entry.layer);
+		if (!active) return;
+		nativeOverlayManager.register(id);
 		return () => {
 			nativeOverlayManager.unregister(id);
 		};
-	}, [id, visible]);
+	}, [
+		active,
+		id,
+		nativeOverlayManager
+	]);
+	const isTopOverlay = useCallback(() => nativeOverlayManager.isTop(id), [id, nativeOverlayManager]);
 	return {
-		layer,
-		isTopOverlay: useCallback(() => nativeOverlayManager.isTop(id), [id])
+		zIndex: snapshot.registry.get(id)?.zIndex ?? nativeOverlayManager.getZIndex(id),
+		isTopmost: snapshot.topmost?.id === id,
+		isTopOverlay
 	};
 };
 //#endregion
-//#region src/hooks/behavior/overlay/useOverlayStack.ts
-const useOverlayStack = ({ active, id }) => useNativeOverlayRegistration({
-	id,
-	visible: active
-});
-//#endregion
 //#region src/hooks/behavior/overlay/useOverlayDismiss.ts
-const useOverlayDismiss = ({ active, closeOnEscape = true, closeOnOutsidePress = true, id, requestClose }) => {
-	const { isTopOverlay } = useOverlayStack({
+const dismissListeners = createRetainedResourceRegistry((manager) => {
+	if (Platform.OS === "web") {
+		const handleKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			manager.dispatchTopDismiss();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}
+	const subscription = BackHandler.addEventListener("hardwareBackPress", () => manager.dispatchTopDismiss());
+	return () => {
+		subscription.remove();
+	};
+});
+function retainDismissListener(manager) {
+	return dismissListeners.retain(manager);
+}
+const useOverlayDismiss = ({ active, closeOnEscape = true, closeOnOutsidePress = true, id, requestClose, requestOutsideClose }) => {
+	const nativeOverlayManager = useNativeOverlayManager();
+	const registration = useOverlayRegistration({
 		active,
 		id
 	});
+	const { isTopOverlay } = registration;
 	const requestTopClose = useCallback(() => {
 		if (!isTopOverlay()) return;
 		requestClose();
 	}, [isTopOverlay, requestClose]);
-	const requestOutsideClose = useCallback(() => {
-		if (!closeOnOutsidePress) return;
-		requestTopClose();
-	}, [closeOnOutsidePress, requestTopClose]);
+	const requestOutsideTopClose = useCallback(() => {
+		nativeOverlayManager.dispatchTopOutsidePress();
+	}, [nativeOverlayManager]);
+	const getOutsidePressProps = useCallback(({ accessibilityLabel = "Dismiss overlay" } = {}) => {
+		if (!active || !closeOnOutsidePress) return {
+			accessibilityLabel: void 0,
+			accessibilityRole: void 0,
+			onPress: void 0
+		};
+		return {
+			accessibilityLabel,
+			accessibilityRole: "button",
+			onPress: requestOutsideTopClose
+		};
+	}, [
+		active,
+		closeOnOutsidePress,
+		requestOutsideTopClose
+	]);
 	useEffect(() => {
-		if (!active || !closeOnEscape) return;
-		if (Platform.OS === "web") {
-			const handleKeyDown = (event) => {
-				if (event.key !== "Escape") return;
-				requestTopClose();
-			};
-			document.addEventListener("keydown", handleKeyDown);
-			return () => {
-				document.removeEventListener("keydown", handleKeyDown);
-			};
-		}
-		const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+		if (!active) return;
+		return nativeOverlayManager.registerOutsidePressHandler(id, () => {
+			if (!closeOnOutsidePress) return false;
 			if (!isTopOverlay()) return false;
+			if (requestOutsideClose) {
+				requestOutsideClose();
+				return true;
+			}
 			requestClose();
 			return true;
 		});
+	}, [
+		active,
+		closeOnOutsidePress,
+		id,
+		isTopOverlay,
+		nativeOverlayManager,
+		requestClose,
+		requestOutsideClose
+	]);
+	useEffect(() => {
+		if (!active) return;
+		const releaseDismissListener = retainDismissListener(nativeOverlayManager);
+		const unregisterDismissHandler = nativeOverlayManager.registerDismissHandler(id, () => {
+			if (!closeOnEscape) return false;
+			requestTopClose();
+			return true;
+		});
 		return () => {
-			subscription.remove();
+			unregisterDismissHandler();
+			releaseDismissListener();
 		};
 	}, [
 		active,
 		closeOnEscape,
-		isTopOverlay,
-		requestClose,
+		id,
+		nativeOverlayManager,
 		requestTopClose
 	]);
 	return {
+		zIndex: registration.zIndex,
 		isTopOverlay,
+		getOutsidePressProps,
 		requestClose: requestTopClose,
-		requestOutsideClose
+		requestOutsideClose: requestOutsideTopClose
 	};
 };
 //#endregion
 //#region src/hooks/behavior/overlay/useOverlayFocusRestore.ts
-const useOverlayFocusRestore = ({ enabled = true, triggerRef }) => {
+function isFocusableWebNode(node) {
+	return typeof node === "object" && node !== null && "focus" in node && typeof node.focus === "function";
+}
+const useOverlayFocusRestore = ({ active = false, enabled = true, finalFocus, triggerRef }) => {
+	const previouslyFocusedRef = useRef(null);
+	const saveFocusSnapshot = useCallback(() => {
+		if (Platform.OS !== "web" || typeof document === "undefined") return;
+		previouslyFocusedRef.current = document.activeElement;
+	}, []);
 	const restoreFocus = useCallback(() => {
 		if (!enabled) return;
 		if (Platform.OS === "web") {
-			const triggerNode = triggerRef.current;
-			if (triggerNode && typeof triggerNode === "object" && "focus" in triggerNode && typeof triggerNode.focus === "function") triggerNode.focus();
+			const preferredNode = finalFocus?.current ?? triggerRef.current;
+			if (isFocusableWebNode(preferredNode)) {
+				preferredNode.focus();
+				return;
+			}
+			const previouslyFocused = previouslyFocusedRef.current;
+			if (previouslyFocused instanceof HTMLElement && previouslyFocused.isConnected) previouslyFocused.focus();
 			return;
 		}
 		if (typeof findNodeHandle !== "function") return;
-		const handle = findNodeHandle(triggerRef.current);
+		const handle = findNodeHandle(finalFocus?.current ?? triggerRef.current);
 		if (handle && AccessibilityInfo.setAccessibilityFocus) AccessibilityInfo.setAccessibilityFocus(handle);
-	}, [enabled, triggerRef]);
+	}, [
+		enabled,
+		finalFocus,
+		triggerRef
+	]);
+	const restoreFocusAfterClose = useCallback(() => {
+		if (!enabled) return;
+		deferOverlayFocusRestore(restoreFocus, requestAnimationFrame);
+	}, [enabled, restoreFocus]);
+	useEffect(() => {
+		if (!active) return;
+		saveFocusSnapshot();
+	}, [active, saveFocusSnapshot]);
 	return {
 		restoreFocus,
-		restoreFocusAfterClose: useCallback(() => {
-			if (!enabled) return;
-			requestAnimationFrame(restoreFocus);
-		}, [enabled, restoreFocus])
+		restoreFocusAfterClose,
+		saveFocusSnapshot
 	};
 };
 //#endregion
 //#region src/hooks/behavior/overlay/useOverlayPresentation.ts
 function useOverlayPresentation(presentation = "auto", breakpoint = 768) {
 	const { width } = useWindowDimensions();
-	if (presentation === "auto") return width >= breakpoint ? "popover" : "sheet";
-	return presentation;
+	return resolveOverlayPresentation({
+		presentation,
+		defaultPresentation: "sheet",
+		autoPresentation: width >= breakpoint ? "popover" : "sheet"
+	});
 }
 //#endregion
 //#region src/hooks/useControllableState.ts
@@ -582,11 +547,23 @@ const useModal = ({ open, defaultOpen = false, onOpenChange, closeOnEscape, clos
 };
 //#endregion
 //#region src/hooks/useSelect.ts
-const useSelect = ({ value, defaultValue, onValueChange, onChange, options, multiple = false, maxSelected, closeOnSelect = !multiple, disabled = false, open, defaultOpen = false, onOpenChange }) => {
+const useSelect = ({ value, defaultValue, onValueChange, options, multiple = false, maxSelected, closeOnSelect = !multiple, disabled = false, open, defaultOpen = false, onOpenChange }) => {
+	const handleValueChange = useCallback((nextValue) => {
+		if (!onValueChange) return;
+		if (multiple) {
+			if (Array.isArray(nextValue)) {
+				onValueChange(nextValue);
+				return;
+			}
+			onValueChange(nextValue ? [nextValue] : []);
+			return;
+		}
+		onValueChange(Array.isArray(nextValue) ? nextValue[0] ?? "" : nextValue);
+	}, [multiple, onValueChange]);
 	const [selectedValue, setSelectedValue] = useControllableState({
 		value,
 		defaultValue: defaultValue ?? (multiple ? [] : ""),
-		onChange: onValueChange ?? onChange
+		onChange: handleValueChange
 	});
 	const [isOpen, setIsOpen] = useControllableState({
 		value: open,
@@ -764,6 +741,16 @@ function useThemeStyles(createStyles) {
 	return useMemo(() => createStyles(theme), [createStyles, theme]);
 }
 //#endregion
+//#region src/components/Dropdown/internal/DropdownContext.tsx
+const DropdownContext = createContext(null);
+const DropdownProvider = DropdownContext.Provider;
+const useDropdownContext = () => {
+	const context = useContext(DropdownContext);
+	if (!context) throw new Error("Dropdown components must be used inside Dropdown");
+	return context;
+};
+DropdownContext.displayName = "DropdownContext";
+//#endregion
 //#region src/components/Dropdown/Content/DropdownContent.styles.ts
 const createStyles$21 = (theme) => StyleSheet.create({
 	modalRoot: { flex: 1 },
@@ -848,13 +835,14 @@ const createStyles$21 = (theme) => StyleSheet.create({
 //#region src/components/Dropdown/Content/DropdownContent.tsx
 const nativePointerEventsBoxNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
 const webPointerEventsBoxNone$1 = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
-function DropdownContent({ isOpen, children, onClose, color = "primary", contentStyle, accessibilityLabel, presentation, position, onFloatingLayout, searchable = false, searchValue = "", searchPlaceholder = "Search actions...", searchAccessibilityLabel, onSearchChange }) {
+function DropdownContent({ children, contentStyle, accessibilityLabel }) {
+	const { open, color, presentation, zIndex, position, searchable, searchValue, searchPlaceholder, searchAccessibilityLabel, requestClose, getOutsidePressProps, onSearchChange, onFloatingLayout } = useDropdownContext();
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$21);
 	const colorPalette = theme.components.dropdown[color];
 	const isSheet = presentation === "sheet";
 	const isPopover = presentation === "popover";
-	const animation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+	const animation = useRef(new Animated.Value(open ? 1 : 0)).current;
 	const [reduceMotion, setReduceMotion] = useState(false);
 	useEffect(() => {
 		AccessibilityInfo.isReduceMotionEnabled?.().then(setReduceMotion);
@@ -864,7 +852,7 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 		};
 	}, []);
 	useEffect(() => {
-		if (!isOpen) {
+		if (!open) {
 			animation.setValue(0);
 			return;
 		}
@@ -880,7 +868,7 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 		}).start();
 	}, [
 		animation,
-		isOpen,
+		open,
 		isSheet,
 		reduceMotion
 	]);
@@ -904,11 +892,15 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 	}, [animation, isSheet]);
 	return /* @__PURE__ */ jsx(Modal$1, {
 		transparent: true,
-		visible: isOpen,
+		visible: open,
 		animationType: "none",
-		onRequestClose: onClose,
+		onRequestClose: requestClose,
 		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles.modalRoot, styles[presentation]],
+			style: [
+				styles.modalRoot,
+				styles[presentation],
+				Platform.OS === "web" && { zIndex }
+			],
 			children: [/* @__PURE__ */ jsx(Animated.View, {
 				...nativePointerEventsBoxNone$1,
 				style: [
@@ -917,10 +909,8 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 					webPointerEventsBoxNone$1
 				],
 				children: /* @__PURE__ */ jsx(Pressable, {
-					accessibilityRole: "button",
-					accessibilityLabel: "Close menu",
-					style: StyleSheet.absoluteFill,
-					onPress: onClose
+					...getOutsidePressProps({ accessibilityLabel: "Close menu" }),
+					style: StyleSheet.absoluteFill
 				})
 			}), /* @__PURE__ */ jsxs(Animated.View, {
 				accessibilityRole: "menu",
@@ -968,7 +958,7 @@ DropdownContent.displayName = "DropdownContent";
 //#region src/components/Dropdown/internal/DropdownCollection.ts
 function createDropdownSlot(name, displayName) {
 	const Slot = () => null;
-	Slot.__velliraDropdownPart = name;
+	markCompoundSlot(Slot, name);
 	Slot.displayName = displayName;
 	return Slot;
 }
@@ -996,11 +986,12 @@ function parseDropdownChildren(children) {
 		Children.forEach(node, (child) => {
 			if (!isValidElement(child)) return;
 			const type = child.type;
+			const slot = getCompoundSlot(type);
 			if (type.__velliraPortal) {
 				visit(child.props.children);
 				return;
 			}
-			switch (type.__velliraDropdownPart) {
+			switch (slot) {
 				case "trigger":
 					triggerProps = child.props;
 					trigger = triggerProps.children;
@@ -1068,6 +1059,279 @@ function getItemLabel(children) {
 	return labelParts.join("").trim();
 }
 //#endregion
+//#region src/hooks/behavior/dropdown/useDropdownAccessibility.ts
+const useDropdownAccessibility = ({ accessibilityLabel, label, open }) => {
+	const menuAccessibilityLabel = useMemo(() => {
+		if (accessibilityLabel) return accessibilityLabel;
+		return typeof label === "string" ? label : "Menu";
+	}, [accessibilityLabel, label]);
+	useEffect(() => {
+		if (!open) return;
+		AccessibilityInfo.announceForAccessibility(`${menuAccessibilityLabel} opened`);
+	}, [menuAccessibilityLabel, open]);
+	return { menuAccessibilityLabel };
+};
+//#endregion
+//#region src/hooks/behavior/dropdown/useDropdownEntries.ts
+const useDropdownEntries = ({ parsed, filteredParsed, loading, loadingText, isSearchable, empty }) => {
+	return {
+		navigableItems: useMemo(() => parsed.items.map((item) => ({
+			disabled: item.disabled,
+			label: item.label,
+			value: item.id
+		})), [parsed.items]),
+		data: useMemo(() => {
+			if (loading) return [{
+				type: "loading",
+				id: "loading",
+				props: { children: loadingText }
+			}];
+			if (isSearchable && filteredParsed.items.length === 0) return [{
+				type: "empty",
+				id: "empty",
+				props: { children: empty ?? "No actions found" }
+			}];
+			return filteredParsed.entries;
+		}, [
+			empty,
+			filteredParsed.entries,
+			filteredParsed.items.length,
+			isSearchable,
+			loading,
+			loadingText
+		])
+	};
+};
+//#endregion
+//#region src/components/Dropdown/internal/DropdownUtils.ts
+function createDropdownSelectEvent() {
+	let defaultPrevented = false;
+	return {
+		preventDefault: () => {
+			defaultPrevented = true;
+		},
+		get defaultPrevented() {
+			return defaultPrevented;
+		}
+	};
+}
+function filterDropdownEntries(parsed, searchValue) {
+	const normalizedSearch = searchValue.trim().toLocaleLowerCase();
+	const matchedItems = new Set(parsed.items.filter((item) => item.label.toLocaleLowerCase().includes(normalizedSearch)).map((item) => item.id));
+	return {
+		...parsed,
+		items: parsed.items.filter((item) => matchedItems.has(item.id)),
+		entries: parsed.entries.filter((entry) => entry.type !== "item" || matchedItems.has(entry.id))
+	};
+}
+//#endregion
+//#region src/hooks/behavior/dropdown/useDropdownSearch.ts
+const useDropdownSearch = ({ parsed, searchable, command, searchValue, defaultSearchValue, onSearch }) => {
+	const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
+	const resolvedSearchValue = searchValue ?? uncontrolledSearchValue;
+	const contentCommand = parsed.contentProps?.command ?? false;
+	const isSearchable = searchable || command || contentCommand || Boolean(parsed.searchProps);
+	return {
+		contentCommand,
+		filteredParsed: useMemo(() => {
+			if (!isSearchable || !resolvedSearchValue.trim()) return parsed;
+			return filterDropdownEntries(parsed, resolvedSearchValue);
+		}, [
+			isSearchable,
+			parsed,
+			resolvedSearchValue
+		]),
+		handleSearchChange: useCallback((value) => {
+			if (searchValue === void 0) setUncontrolledSearchValue(value);
+			onSearch?.(value);
+		}, [onSearch, searchValue]),
+		isSearchable,
+		resolvedSearchValue
+	};
+};
+//#endregion
+//#region src/managers/FloatingManager/computeFloatingPosition.ts
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function parsePlacement(placement) {
+	const [side, align = "center"] = placement.split("-");
+	return {
+		side,
+		align
+	};
+}
+function createPlacement(side, align) {
+	return align === "center" ? side : `${side}-${align}`;
+}
+function getOppositeSide(side) {
+	switch (side) {
+		case "top": return "bottom";
+		case "right": return "left";
+		case "bottom": return "top";
+		case "left": return "right";
+	}
+}
+function computeBasePosition({ reference, floating, side, align, offset }) {
+	const referenceCenterX = reference.x + reference.width / 2;
+	const referenceCenterY = reference.y + reference.height / 2;
+	const alignedLeft = align === "start" ? reference.x : align === "end" ? reference.x + reference.width - floating.width : referenceCenterX - floating.width / 2;
+	const alignedTop = align === "start" ? reference.y : align === "end" ? reference.y + reference.height - floating.height : referenceCenterY - floating.height / 2;
+	switch (side) {
+		case "top": return {
+			top: reference.y - floating.height - offset,
+			left: alignedLeft
+		};
+		case "right": return {
+			top: alignedTop,
+			left: reference.x + reference.width + offset
+		};
+		case "bottom": return {
+			top: reference.y + reference.height + offset,
+			left: alignedLeft
+		};
+		case "left": return {
+			top: alignedTop,
+			left: reference.x - floating.width - offset
+		};
+	}
+}
+function getMainAxisOverflow({ side, position, floating, boundary, padding }) {
+	switch (side) {
+		case "top": return padding - position.top;
+		case "right": return position.left + floating.width + padding - boundary.width;
+		case "bottom": return position.top + floating.height + padding - boundary.height;
+		case "left": return padding - position.left;
+	}
+}
+function computeFloatingPosition({ reference, floating, boundary, placement, offset = 8, padding = 12, arrowPadding = 16, flip = true, shift = true }) {
+	const parsed = parsePlacement(placement);
+	let resolvedSide = parsed.side;
+	let position = computeBasePosition({
+		reference,
+		floating,
+		side: resolvedSide,
+		align: parsed.align,
+		offset
+	});
+	if (flip && getMainAxisOverflow({
+		side: resolvedSide,
+		position,
+		floating,
+		boundary,
+		padding
+	}) > 0) {
+		const oppositeSide = getOppositeSide(resolvedSide);
+		const oppositePosition = computeBasePosition({
+			reference,
+			floating,
+			side: oppositeSide,
+			align: parsed.align,
+			offset
+		});
+		if (getMainAxisOverflow({
+			side: oppositeSide,
+			position: oppositePosition,
+			floating,
+			boundary,
+			padding
+		}) <= 0) {
+			resolvedSide = oppositeSide;
+			position = oppositePosition;
+		}
+	}
+	if (shift) position = {
+		top: clamp(position.top, padding, boundary.height - floating.height - padding),
+		left: clamp(position.left, padding, boundary.width - floating.width - padding)
+	};
+	const referenceCenterX = reference.x + reference.width / 2;
+	const referenceCenterY = reference.y + reference.height / 2;
+	const arrowPosition = resolvedSide === "top" || resolvedSide === "bottom" ? { left: clamp(referenceCenterX - position.left, arrowPadding, floating.width - arrowPadding) } : { top: clamp(referenceCenterY - position.top, arrowPadding, floating.height - arrowPadding) };
+	return {
+		position,
+		arrowPosition,
+		placement: createPlacement(resolvedSide, parsed.align)
+	};
+}
+//#endregion
+//#region src/managers/FloatingManager/useNativeFloatingPosition.ts
+function useNativeFloatingPosition(placement = "top", offset = 8) {
+	const [result, setResult] = useState({
+		position: {
+			top: 0,
+			left: 0
+		},
+		arrowPosition: {},
+		placement
+	});
+	const floatingSizeRef = useRef({
+		width: 0,
+		height: 0
+	});
+	const lastTriggerRef = useRef(null);
+	const lastContainerRef = useRef(null);
+	const updatePosition = useCallback((triggerRef, containerRef, measuredSize = floatingSizeRef.current) => {
+		lastTriggerRef.current = triggerRef;
+		lastContainerRef.current = containerRef ?? null;
+		const triggerNode = triggerRef.current;
+		const containerNode = containerRef?.current;
+		if (!triggerNode || typeof triggerNode.measureInWindow !== "function") {
+			setResult((current) => ({
+				...current,
+				position: {
+					top: 0,
+					left: 0
+				}
+			}));
+			return;
+		}
+		triggerNode.measureInWindow((x, y, width, height) => {
+			const commitPosition = (containerX, containerY, containerWidth, containerHeight) => {
+				const nextResult = computeFloatingPosition({
+					reference: {
+						x: x - containerX,
+						y: y - containerY,
+						width,
+						height
+					},
+					floating: measuredSize,
+					boundary: {
+						width: containerWidth,
+						height: containerHeight
+					},
+					placement,
+					offset
+				});
+				setResult(nextResult);
+			};
+			if (!containerNode || typeof containerNode.measureInWindow !== "function") {
+				const window = Dimensions.get("window");
+				commitPosition(0, 0, window.width, window.height);
+				return;
+			}
+			containerNode.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
+				commitPosition(containerX, containerY, containerWidth, containerHeight);
+			});
+		});
+	}, [placement, offset]);
+	const onFloatingLayout = useCallback((event) => {
+		const { width, height } = event.nativeEvent.layout;
+		const nextSize = {
+			width,
+			height
+		};
+		floatingSizeRef.current = nextSize;
+		if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, lastContainerRef.current ?? void 0, nextSize);
+	}, [updatePosition]);
+	return {
+		position: result.position,
+		arrowPosition: result.arrowPosition,
+		placement: result.placement,
+		updatePosition,
+		onFloatingLayout
+	};
+}
+//#endregion
 //#region src/components/Dropdown/Dropdown.styles.ts
 const createStyles$20 = (theme) => StyleSheet.create({
 	root: { alignSelf: "flex-start" },
@@ -1103,27 +1367,10 @@ function DropdownGroup({ label }) {
 }
 DropdownGroup.displayName = "DropdownGroup";
 //#endregion
-//#region src/components/Dropdown/internal/DropdownUtils.ts
-function createDropdownSelectEvent() {
-	let defaultPrevented = false;
-	return {
-		preventDefault: () => {
-			defaultPrevented = true;
-		},
-		get defaultPrevented() {
-			return defaultPrevented;
-		}
-	};
-}
-function filterDropdownEntries(parsed, searchValue) {
-	const normalizedSearch = searchValue.trim().toLocaleLowerCase();
-	const matchedItems = new Set(parsed.items.filter((item) => item.label.toLocaleLowerCase().includes(normalizedSearch)).map((item) => item.id));
-	return {
-		...parsed,
-		items: parsed.items.filter((item) => matchedItems.has(item.id)),
-		entries: parsed.entries.filter((entry) => entry.type !== "item" || matchedItems.has(entry.id))
-	};
-}
+//#region src/utils/devWarning.ts
+const devWarning = (condition, message) => {
+	if ((typeof __DEV__ === "undefined" || __DEV__) && !condition) console.warn(message);
+};
 //#endregion
 //#region src/components/Dropdown/Item/DropdownItem.styles.ts
 const createStyles$18 = (theme) => StyleSheet.create({
@@ -1149,7 +1396,8 @@ const createStyles$18 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Item/DropdownItem.tsx
-function DropdownItem({ label, value, rootColor = "primary", color = "default", icon, disabled = false, textWrap = "truncate", itemStyle, textStyle, onSelect }) {
+function DropdownItem({ label, value, asChild = false, children, color = "default", icon, disabled = false, textWrap = "truncate", onSelect }) {
+	const { color: rootColor, itemStyle, textStyle } = useDropdownContext();
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$18);
 	const rootColorPalette = theme.components.dropdown[rootColor];
@@ -1173,6 +1421,24 @@ function DropdownItem({ label, value, rootColor = "primary", color = "default",
 	const accessibilityLabel = typeof label === "string" ? label : value;
 	const numberOfLines = textWrap === "wrap" ? void 0 : 1;
 	const ellipsizeMode = textWrap === "truncate" ? "tail" : "clip";
+	const child = asChild && isValidElement(children) ? children : void 0;
+	const getItemStyle = (pressed) => [
+		styles.item,
+		{ backgroundColor: getBackgroundColor(pressed) },
+		itemStyle
+	];
+	devWarning(!asChild || Boolean(child), "Dropdown.Item: asChild requires a single valid React element child.");
+	if (child) return cloneElement(child, {
+		accessibilityRole: "menuitem",
+		accessibilityLabel,
+		accessibilityState: { disabled },
+		disabled,
+		onPress: (event) => {
+			child.props.onPress?.(event);
+			if (!event.defaultPrevented && !disabled) onSelect(value);
+		},
+		style: [getItemStyle(false), child.props.style]
+	});
 	return /* @__PURE__ */ jsx(Pressable, {
 		disabled,
 		accessibilityRole: "menuitem",
@@ -1182,11 +1448,7 @@ function DropdownItem({ label, value, rootColor = "primary", color = "default",
 			if (disabled) return;
 			onSelect(value);
 		},
-		style: ({ pressed }) => [
-			styles.item,
-			{ backgroundColor: getBackgroundColor(pressed) },
-			itemStyle
-		],
+		style: ({ pressed }) => getItemStyle(pressed),
 		children: ({ pressed }) => {
 			const contentColor = getContentColor(pressed);
 			return /* @__PURE__ */ jsxs(Fragment, { children: [icon ? renderColoredNode(icon, contentColor) : null, /* @__PURE__ */ jsx(Text, {
@@ -1303,7 +1565,8 @@ const createStyles$16 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Trigger/DropdownTrigger.tsx
-function DropdownTrigger({ asChild = false, label, trigger, children, icon, arrowIcon, showArrow = true, color = "primary", size = "md", disabled = false, isOpen, triggerStyle, triggerRef, accessibilityLabel, accessibilityHint, onPress }) {
+function DropdownTrigger({ asChild = false, label, trigger, children, icon, arrowIcon, showArrow = true, triggerStyle, triggerRef, accessibilityLabel, accessibilityHint }) {
+	const { open, color, disabled, size, toggle } = useDropdownContext();
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$16);
 	const colorPalette = theme.components.dropdown[color];
@@ -1320,14 +1583,14 @@ function DropdownTrigger({ asChild = false, label, trigger, children, icon, arro
 	const hasIcon = Boolean(icon);
 	const isIconOnly = !trigger && hasIcon && !showArrow;
 	const [isPressed, setIsPressed] = useState(false);
-	const rotateAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+	const rotateAnim = useRef(new Animated.Value(open ? 1 : 0)).current;
 	useEffect(() => {
 		Animated.timing(rotateAnim, {
-			toValue: isOpen ? 1 : 0,
+			toValue: open ? 1 : 0,
 			duration: 180,
 			useNativeDriver: Platform.OS !== "web"
 		}).start();
-	}, [isOpen, rotateAnim]);
+	}, [open, rotateAnim]);
 	const arrowRotate = rotateAnim.interpolate({
 		inputRange: [0, 1],
 		outputRange: ["0deg", "180deg"]
@@ -1363,12 +1626,12 @@ function DropdownTrigger({ asChild = false, label, trigger, children, icon, arro
 			accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
 			accessibilityHint,
 			accessibilityState: {
-				expanded: isOpen,
+				expanded: open,
 				disabled: isChildDisabled
 			},
 			onPress: () => {
 				child.props.onPress?.();
-				if (!isChildDisabled) onPress();
+				if (!isChildDisabled) toggle();
 			}
 		});
 	}
@@ -1379,10 +1642,10 @@ function DropdownTrigger({ asChild = false, label, trigger, children, icon, arro
 		accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
 		accessibilityHint,
 		accessibilityState: {
-			expanded: isOpen,
+			expanded: open,
 			disabled
 		},
-		onPress,
+		onPress: toggle,
 		onPressIn: () => setIsPressed(true),
 		onPressOut: () => setIsPressed(false),
 		style: [
@@ -1429,8 +1692,6 @@ DropdownTrigger.displayName = "DropdownTrigger";
 function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", placement = "bottom-start", offset = 8, closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
 	const styles = useThemeStyles(createStyles$20);
 	const overlayId = useId();
-	const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
-	const resolvedSearchValue = searchValue ?? uncontrolledSearchValue;
 	const triggerRef = useRef(null);
 	const setTriggerRef = useCallback((node) => {
 		if (node && typeof node === "object" && "measureInWindow" in node && typeof node.measureInWindow === "function") {
@@ -1440,29 +1701,26 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		triggerRef.current = null;
 	}, []);
 	const parsed = useMemo(() => parseDropdownChildren(children), [children]);
-	const contentCommand = parsed.contentProps?.command ?? false;
-	const isSearchable = searchable || command || contentCommand || !!parsed.searchProps;
+	const { contentCommand, filteredParsed, handleSearchChange, isSearchable, resolvedSearchValue } = useDropdownSearch({
+		parsed,
+		searchable,
+		command,
+		searchValue,
+		defaultSearchValue,
+		onSearch
+	});
+	const { navigableItems, data } = useDropdownEntries({
+		parsed,
+		filteredParsed,
+		loading,
+		loadingText,
+		isSearchable,
+		empty
+	});
 	const resolvedPresentation = useOverlayPresentation(presentation);
 	const contentStyleFromSlot = parsed.contentProps?.style;
 	const contentPresentation = (parsed.contentProps?.presentation === "auto" ? void 0 : parsed.contentProps?.presentation) ?? resolvedPresentation;
 	const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
-	const menuAccessibilityLabel = useMemo(() => {
-		if (accessibilityLabel) return accessibilityLabel;
-		return typeof label === "string" ? label : "Menu";
-	}, [accessibilityLabel, label]);
-	const navigableItems = useMemo(() => parsed.items.map((item) => ({
-		disabled: item.disabled,
-		label: item.label,
-		value: item.id
-	})), [parsed.items]);
-	const filteredParsed = useMemo(() => {
-		if (!isSearchable || !resolvedSearchValue.trim()) return parsed;
-		return filterDropdownEntries(parsed, resolvedSearchValue);
-	}, [
-		isSearchable,
-		parsed,
-		resolvedSearchValue
-	]);
 	const { isOpen, closeDropdown, toggleDropdown } = useDropdown({
 		items: navigableItems,
 		open,
@@ -1472,6 +1730,11 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		getItemValue: (item) => item.value,
 		getItemText: (item) => typeof item.label === "string" ? item.label : item.value
 	});
+	const { menuAccessibilityLabel } = useDropdownAccessibility({
+		accessibilityLabel,
+		label,
+		open: isOpen
+	});
 	useEffect(() => {
 		if (!isOpen || contentPresentation !== "popover") return;
 		updatePosition(triggerRef);
@@ -1480,11 +1743,10 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		contentPresentation,
 		updatePosition
 	]);
-	useEffect(() => {
-		if (!isOpen) return;
-		AccessibilityInfo.announceForAccessibility(`${menuAccessibilityLabel} opened`);
-	}, [isOpen, menuAccessibilityLabel]);
-	const { restoreFocusAfterClose } = useOverlayFocusRestore({ triggerRef });
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({
+		active: isOpen,
+		triggerRef
+	});
 	const closeAndFocusTrigger = useCallback(() => {
 		closeDropdown();
 		restoreFocusAfterClose();
@@ -1508,10 +1770,6 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	const handleTriggerPress = useCallback(() => {
 		toggleDropdown();
 	}, [toggleDropdown]);
-	const handleSearchChange = useCallback((value) => {
-		if (searchValue === void 0) setUncontrolledSearchValue(value);
-		onSearch?.(value);
-	}, [onSearch, searchValue]);
 	const renderEntry = useCallback(({ item }) => {
 		if (item.type === "label") return /* @__PURE__ */ jsx(DropdownGroup, { label: item.props.children });
 		if (item.type === "separator") return /* @__PURE__ */ jsx(DropdownSeparator, {});
@@ -1524,73 +1782,86 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 			children: item.props.children
 		});
 		return /* @__PURE__ */ jsx(DropdownItem, {
+			asChild: item.props.asChild,
 			label: item.props.children,
 			value: item.props.value ?? item.id,
-			rootColor: color,
 			color: item.props.color,
 			icon: item.props.icon,
 			disabled: item.props.disabled,
 			textWrap: item.props.textWrap,
-			itemStyle,
-			textStyle,
-			onSelect: () => handleSelect(item)
+			onSelect: () => handleSelect(item),
+			children: item.props.children
 		});
-	}, [
-		color,
-		handleSelect,
-		itemStyle,
-		styles.emptyText,
-		textStyle
-	]);
-	const data = loading ? [{
-		type: "loading",
-		id: "loading",
-		props: { children: loadingText }
-	}] : isSearchable && filteredParsed.items.length === 0 ? [{
-		type: "empty",
-		id: "empty",
-		props: { children: empty ?? "No actions found" }
-	}] : filteredParsed.entries;
-	return /* @__PURE__ */ jsxs(View, {
-		style: [styles.root, style],
-		children: [/* @__PURE__ */ jsx(DropdownTrigger, {
-			asChild: Boolean(parsed.trigger),
-			label,
-			trigger: trigger ?? parsed.trigger,
-			icon,
-			arrowIcon,
-			showArrow,
+	}, [handleSelect, styles.emptyText]);
+	const resolvedSearchPlaceholder = parsed.searchProps?.placeholder ?? searchPlaceholder ?? (command || contentCommand ? "Type a command..." : "Search actions...");
+	const searchAccessibilityLabel = parsed.searchProps?.accessibilityLabel;
+	return /* @__PURE__ */ jsx(DropdownProvider, {
+		value: useMemo(() => ({
+			open: isOpen,
+			disabled,
+			loading,
 			color,
-			disabled: disabled || parsed.triggerProps?.disabled,
-			isOpen,
 			size,
-			triggerRef: setTriggerRef,
-			triggerStyle,
-			accessibilityLabel,
-			accessibilityHint,
-			onPress: handleTriggerPress
-		}), /* @__PURE__ */ jsx(DropdownContent, {
-			isOpen,
-			onClose: dismiss.requestClose,
-			color,
-			contentStyle: [contentStyle, contentStyleFromSlot],
-			accessibilityLabel: menuAccessibilityLabel,
 			presentation: contentPresentation,
 			position,
-			onFloatingLayout,
+			zIndex: dismiss.zIndex,
 			searchable: isSearchable,
 			searchValue: resolvedSearchValue,
-			searchPlaceholder: parsed.searchProps?.placeholder ?? searchPlaceholder ?? (command || contentCommand ? "Type a command..." : "Search actions..."),
-			searchAccessibilityLabel: parsed.searchProps?.accessibilityLabel,
+			searchPlaceholder: resolvedSearchPlaceholder,
+			searchAccessibilityLabel,
+			itemStyle,
+			textStyle,
+			requestClose: dismiss.requestClose,
+			getOutsidePressProps: dismiss.getOutsidePressProps,
+			toggle: handleTriggerPress,
 			onSearchChange: handleSearchChange,
-			children: /* @__PURE__ */ jsx(FlatList, {
-				data,
-				keyExtractor: (item) => item.id,
-				renderItem: renderEntry,
-				keyboardShouldPersistTaps: "handled",
-				removeClippedSubviews: data.length > 24
-			})
-		})]
+			onFloatingLayout
+		}), [
+			color,
+			contentPresentation,
+			disabled,
+			dismiss.zIndex,
+			dismiss.getOutsidePressProps,
+			dismiss.requestClose,
+			handleSearchChange,
+			handleTriggerPress,
+			isOpen,
+			isSearchable,
+			itemStyle,
+			loading,
+			onFloatingLayout,
+			position,
+			resolvedSearchPlaceholder,
+			resolvedSearchValue,
+			searchAccessibilityLabel,
+			size,
+			textStyle
+		]),
+		children: /* @__PURE__ */ jsxs(View, {
+			style: [styles.root, style],
+			children: [/* @__PURE__ */ jsx(DropdownTrigger, {
+				asChild: Boolean(parsed.trigger),
+				label,
+				trigger: trigger ?? parsed.trigger,
+				icon,
+				arrowIcon,
+				showArrow,
+				triggerRef: setTriggerRef,
+				triggerStyle,
+				accessibilityLabel,
+				accessibilityHint
+			}), /* @__PURE__ */ jsx(DropdownContent, {
+				contentStyle: [contentStyle, contentStyleFromSlot],
+				accessibilityLabel: menuAccessibilityLabel,
+				children: /* @__PURE__ */ jsx(FlatList, {
+					data,
+					keyExtractor: (item) => item.id,
+					renderItem: renderEntry,
+					keyboardShouldPersistTaps: "handled",
+					removeClippedSubviews: data.length > 24
+				})
+			})]
+		})
 	});
 }
 DropdownRoot.displayName = "Dropdown";
@@ -1662,13 +1933,23 @@ const createStyles$14 = (theme) => StyleSheet.create({
 		justifyContent: "space-between",
 		paddingBottom: theme.components.modal.header.paddingBottom
 	},
-	title: {
+	headerContent: {
 		flex: 1,
+		gap: theme.tokens.spacing["1"]
+	},
+	title: {
 		color: theme.components.modal.title.fg,
 		fontFamily: theme.tokens.typography.family.semibold,
 		fontSize: theme.tokens.typography.size.lg,
 		lineHeight: theme.tokens.typography.lineHeight.md
 	},
+	plainTitle: { flex: 1 },
+	description: {
+		color: theme.components.modal.description.fg,
+		fontFamily: theme.tokens.typography.family.regular,
+		fontSize: theme.tokens.typography.size.sm,
+		lineHeight: theme.tokens.typography.lineHeight.sm
+	},
 	closeButton: {
 		width: theme.components.modal.closeButton.size,
 		height: theme.components.modal.closeButton.size,
@@ -1682,20 +1963,21 @@ const createStyles$14 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Modal/internal/ModalContext.tsx
-const ModalContext = createContext(void 0);
-ModalContext.displayName = "ModalContext";
+const ModalContext = createContext(null);
+const ModalProvider = ModalContext.Provider;
 const useModalContext = () => {
 	const context = useContext(ModalContext);
 	if (!context) throw new Error("Modal compound components must be used inside Modal");
 	return context;
 };
+ModalContext.displayName = "ModalContext";
 //#endregion
 //#region src/components/Modal/Close/ModalClose.tsx
-const ModalClose = ({ children, accessibilityLabel, style }) => {
+const ModalClose = ({ asChild = false, children, accessibilityLabel, style }) => {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$14);
 	const { onClose } = useModalContext();
-	if (isValidElement(children)) return cloneElement(children, {
+	if ((asChild || children !== void 0) && isValidElement(children)) return cloneElement(children, {
 		accessibilityLabel: children.props.accessibilityLabel ?? accessibilityLabel,
 		onPress: (event) => {
 			children.props.onPress?.(event);
@@ -1788,19 +2070,46 @@ const ModalFooter = ({ children, style }) => {
 };
 ModalFooter.displayName = "ModalFooter";
 //#endregion
+//#region src/components/Modal/Header/ModalDescription.tsx
+const ModalDescription = ({ children, style }) => {
+	return /* @__PURE__ */ jsx(Text, {
+		style: [useThemeStyles(createStyles$14).description, style],
+		children
+	});
+};
+ModalDescription.displayName = "Modal.Description";
+//#endregion
 //#region src/components/Modal/Header/ModalHeader.tsx
 const ModalHeader = ({ children, style, textStyle }) => {
 	const styles = useThemeStyles(createStyles$14);
+	const isPlainTitle = typeof children === "string" || typeof children === "number";
 	return /* @__PURE__ */ jsxs(View, {
 		style: [styles.header, style],
-		children: [/* @__PURE__ */ jsx(Text, {
-			style: [styles.title, textStyle],
+		children: [isPlainTitle ? /* @__PURE__ */ jsx(Text, {
+			style: [
+				styles.title,
+				styles.plainTitle,
+				textStyle
+			],
+			children
+		}) : /* @__PURE__ */ jsx(View, {
+			style: styles.headerContent,
 			children
 		}), /* @__PURE__ */ jsx(ModalClose, {})]
 	});
 };
 ModalHeader.displayName = "ModalHeader";
 //#endregion
+//#region src/components/Modal/Header/ModalTitle.tsx
+const ModalTitle = ({ children, style }) => {
+	return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "header",
+		style: [useThemeStyles(createStyles$14).title, style],
+		children
+	});
+};
+ModalTitle.displayName = "Modal.Title";
+//#endregion
 //#region src/components/Modal/Modal.styles.ts
 const createStyles$11 = (theme) => StyleSheet.create({
 	overlay: {
@@ -1818,7 +2127,7 @@ const createStyles$11 = (theme) => StyleSheet.create({
 //#region src/components/Modal/Overlay/ModalOverlay.tsx
 const ModalOverlay = ({ children, overlayStyle }) => {
 	const styles = useThemeStyles(createStyles$11);
-	const { animation, animationProgress, closeOnOutsidePress, onClose, onOutsideClose, shouldRender } = useModalContext();
+	const { animation, animationProgress, zIndex, onClose, getOutsidePressProps, shouldRender } = useModalContext();
 	const backdropStyle = animation === "none" ? void 0 : { opacity: animationProgress };
 	return /* @__PURE__ */ jsx(Modal$1, {
 		visible: shouldRender,
@@ -1826,22 +2135,24 @@ const ModalOverlay = ({ children, overlayStyle }) => {
 		animationType: "none",
 		onRequestClose: onClose,
 		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles.overlay, overlayStyle],
+			style: [
+				styles.overlay,
+				Platform.OS === "web" && { zIndex },
+				overlayStyle
+			],
 			children: [/* @__PURE__ */ jsx(Animated.View, {
 				style: [styles.backdrop, backdropStyle],
 				children: /* @__PURE__ */ jsx(Pressable, {
 					testID: "modal-backdrop",
-					accessibilityRole: closeOnOutsidePress ? "button" : void 0,
-					accessibilityLabel: closeOnOutsidePress ? "Close modal" : void 0,
-					style: StyleSheet.absoluteFill,
-					onPress: closeOnOutsidePress ? onOutsideClose : void 0
+					...getOutsidePressProps({ accessibilityLabel: "Close modal" }),
+					style: StyleSheet.absoluteFill
 				})
 			}), children]
 		})
 	});
 };
 //#endregion
-//#region src/components/Modal/Root/ModalRoot.tsx
+//#region src/components/Modal/Root/useModalRootAnimation.ts
 const linearEasing = (value) => value;
 const easingMap = {
 	standard: Easing?.bezier?.(.22, 1, .36, 1) ?? linearEasing,
@@ -1862,23 +2173,10 @@ const resolveDuration = (duration) => {
 		open: duration?.open ?? parseDuration(nativeThemes.light.components.modal.motion.openDuration)
 	};
 };
-const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale", duration, easing = "standard", closeOnOutsidePress = true, children }) => {
-	const initialOpen = open ?? defaultOpen;
-	const animationProgress = useRef(new Animated.Value(initialOpen ? 1 : 0));
-	const [shouldRender, setShouldRender] = useState(initialOpen);
+function useModalRootAnimation({ animation, defaultOpen, duration, easing, open }) {
+	const animationProgress = useRef(new Animated.Value(defaultOpen ? 1 : 0));
+	const [shouldRender, setShouldRender] = useState(defaultOpen);
 	const [reduceMotion, setReduceMotion] = useState(false);
-	const modal = useModal({
-		open,
-		defaultOpen,
-		onOpenChange,
-		closeOnOutsidePress
-	});
-	const dismiss = useOverlayDismiss({
-		id: modal.contentId,
-		active: modal.open,
-		closeOnOutsidePress: modal.closeOnOutsidePress,
-		requestClose: modal.requestClose
-	});
 	const animationDuration = resolveDuration(duration);
 	const shouldAnimate = animation !== "none" && !reduceMotion;
 	useEffect(() => {
@@ -1890,7 +2188,7 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale
 	}, []);
 	useEffect(() => {
 		const progress = animationProgress.current;
-		if (modal.open) {
+		if (open) {
 			setShouldRender(true);
 			if (!shouldAnimate) {
 				progress.setValue(1);
@@ -1922,19 +2220,61 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale
 		animationDuration.close,
 		animationDuration.open,
 		easing,
-		modal.open,
+		open,
 		shouldAnimate
 	]);
-	return /* @__PURE__ */ jsx(ModalContext.Provider, {
+	return {
+		animationProgress: animationProgress.current,
+		shouldRender
+	};
+}
+//#endregion
+//#region src/components/Modal/Root/ModalRoot.tsx
+const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale", duration, easing = "standard", closeOnEscape = true, closeOnOutsidePress = true, restoreFocus = true, children }) => {
+	const initialOpen = open ?? defaultOpen;
+	const triggerRef = useRef(null);
+	const modal = useModal({
+		open,
+		defaultOpen,
+		onOpenChange,
+		closeOnEscape,
+		closeOnOutsidePress
+	});
+	const { animationProgress, shouldRender } = useModalRootAnimation({
+		animation,
+		defaultOpen: initialOpen,
+		duration,
+		easing,
+		open: modal.open
+	});
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({
+		active: modal.open,
+		enabled: restoreFocus,
+		triggerRef
+	});
+	const previousOpenRef = useRef(modal.open);
+	useEffect(() => {
+		if (previousOpenRef.current && !modal.open) restoreFocusAfterClose();
+		previousOpenRef.current = modal.open;
+	}, [modal.open, restoreFocusAfterClose]);
+	const dismiss = useOverlayDismiss({
+		id: modal.contentId,
+		active: modal.open,
+		closeOnEscape: modal.closeOnEscape,
+		closeOnOutsidePress: modal.closeOnOutsidePress,
+		requestClose: modal.requestClose
+	});
+	return /* @__PURE__ */ jsx(ModalProvider, {
 		value: {
 			animation,
-			animationProgress: animationProgress.current,
-			closeOnOutsidePress: modal.closeOnOutsidePress,
+			animationProgress,
+			zIndex: dismiss.zIndex,
 			onClose: dismiss.requestClose,
-			onOutsideClose: dismiss.requestOutsideClose,
+			getOutsidePressProps: dismiss.getOutsidePressProps,
 			open: modal.open,
 			setOpen: modal.setOpen,
-			shouldRender
+			shouldRender,
+			triggerRef
 		},
 		children
 	});
@@ -1942,15 +2282,26 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale
 ModalRoot.displayName = "ModalRoot";
 //#endregion
 //#region src/components/Modal/Trigger/ModalTrigger.tsx
+const composeRefs = (...refs) => (node) => {
+	for (const ref of refs) {
+		if (typeof ref === "function") {
+			ref(node);
+			continue;
+		}
+		if (ref) ref.current = node;
+	}
+};
 const ModalTrigger = ({ children, asChild = false, disabled = false, accessibilityLabel, style, testID }) => {
 	const root = useModalContext();
 	const child = asChild && isValidElement(children) ? children : void 0;
+	const composedTriggerRef = child ? composeRefs(root.triggerRef, child.props.ref) : root.triggerRef;
 	const handlePress = (event) => {
 		if (disabled || child?.props.disabled) return;
 		child?.props.onPress?.(event);
 		root.setOpen(true);
 	};
 	if (child) return cloneElement(child, {
+		ref: composedTriggerRef,
 		onPress: handlePress,
 		accessibilityRole: child.props.accessibilityRole ?? "button",
 		accessibilityState: {
@@ -1963,6 +2314,7 @@ const ModalTrigger = ({ children, asChild = false, disabled = false, accessibili
 		style: child.props.style
 	});
 	return /* @__PURE__ */ jsx(Pressable, {
+		ref: root.triggerRef,
 		accessibilityRole: "button",
 		accessibilityState: {
 			expanded: root.open,
@@ -1984,6 +2336,8 @@ const Modal = Object.assign(ModalRoot, {
 	Overlay: ModalOverlay,
 	Content: ModalContent,
 	Header: ModalHeader,
+	Title: ModalTitle,
+	Description: ModalDescription,
 	Body: ModalBody,
 	Footer: ModalFooter,
 	Close: ModalClose
@@ -2132,7 +2486,7 @@ PortalProvider.displayName = "PortalProvider";
 //#endregion
 //#region src/components/Popover/Content/PopoverContent.styles.ts
 const styles = StyleSheet.create({
-	layer: { flex: 1 },
+	root: { flex: 1 },
 	backdrop: StyleSheet.absoluteFill,
 	content: { position: "absolute" }
 });
@@ -2164,7 +2518,7 @@ function PopoverContent({ children, style, ...contentProps }) {
 	const { theme } = useTheme();
 	const layerRef = useRef(null);
 	const themedStyles = useMemo(() => createPopoverContentStyles(theme), [theme]);
-	const { open, position, onFloatingLayout, updatePosition, setOpen, closeOnOutsidePress } = usePopoverContext("Popover.Content");
+	const { open, zIndex, position, onFloatingLayout, updatePosition, requestClose, getOutsidePressProps } = usePopoverContext("Popover.Content");
 	useEffect(() => {
 		if (!open) return;
 		requestAnimationFrame(() => {
@@ -2173,20 +2527,14 @@ function PopoverContent({ children, style, ...contentProps }) {
 	}, [open, updatePosition]);
 	return /* @__PURE__ */ jsx(Portal, {
 		visible: open,
-		onRequestClose: () => {
-			setOpen(false, { reason: "escape-key" });
-		},
+		onRequestClose: requestClose,
 		children: /* @__PURE__ */ jsxs(View, {
 			ref: layerRef,
 			pointerEvents: "box-none",
-			style: styles.layer,
+			style: [styles.root, { zIndex }],
 			children: [/* @__PURE__ */ jsx(Pressable, {
 				testID: "popover-backdrop",
-				accessibilityLabel: closeOnOutsidePress ? "Close popover" : void 0,
-				accessibilityRole: closeOnOutsidePress ? "button" : void 0,
-				onPress: closeOnOutsidePress ? () => {
-					setOpen(false, { reason: "outside-press" });
-				} : void 0,
+				...getOutsidePressProps({ accessibilityLabel: "Close popover" }),
 				style: styles.backdrop
 			}), /* @__PURE__ */ jsx(View, {
 				...contentProps,
@@ -2232,6 +2580,7 @@ function getNativePlacement(side, align) {
 function PopoverRoot({ children, open: openProp, defaultOpen = false, onOpenChange, side = "bottom", align = "center", sideOffset = 8, closeOnOutsidePress = true }) {
 	const triggerRef = useRef(null);
 	const anchorRef = useRef(null);
+	const overlayId = useId();
 	const getReferenceRef = useCallback(() => anchorRef.current ? anchorRef : triggerRef, []);
 	const openChangeDetailsRef = useRef({ reason: "programmatic" });
 	const [open, setOpenState] = useControllableState({
@@ -2241,26 +2590,45 @@ function PopoverRoot({ children, open: openProp, defaultOpen = false, onOpenChan
 			onOpenChange?.(nextOpen, openChangeDetailsRef.current);
 		}
 	});
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({
+		active: open,
+		triggerRef
+	});
 	const { position, arrowPosition, placement, updatePosition: updateFloatingPosition, onFloatingLayout } = useNativeFloatingPosition(getNativePlacement(side, align), sideOffset);
 	const setOpen = useCallback((nextOpen, details) => {
 		openChangeDetailsRef.current = details;
 		setOpenState(nextOpen);
-	}, [setOpenState]);
+		if (!nextOpen) restoreFocusAfterClose();
+	}, [restoreFocusAfterClose, setOpenState]);
+	const dismiss = useOverlayDismiss({
+		id: overlayId,
+		active: open,
+		closeOnOutsidePress,
+		requestClose: () => {
+			setOpen(false, { reason: "escape-key" });
+		},
+		requestOutsideClose: () => {
+			setOpen(false, { reason: "outside-press" });
+		}
+	});
+	const updatePosition = useCallback((containerRef) => {
+		updateFloatingPosition(getReferenceRef(), containerRef);
+	}, [getReferenceRef, updateFloatingPosition]);
 	return /* @__PURE__ */ jsx(PopoverProvider, {
 		value: {
 			open,
-			closeOnOutsidePress,
 			triggerRef,
 			anchorRef,
 			side,
 			align,
 			placement,
+			zIndex: dismiss.zIndex,
 			position,
 			arrowPosition,
+			requestClose: dismiss.requestClose,
+			getOutsidePressProps: dismiss.getOutsidePressProps,
 			onFloatingLayout,
-			updatePosition: useCallback((containerRef) => {
-				updateFloatingPosition(getReferenceRef(), containerRef);
-			}, [getReferenceRef, updateFloatingPosition]),
+			updatePosition,
 			setOpen
 		},
 		children
@@ -2384,8 +2752,8 @@ const createStyles$10 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/primitives/Radio/Radio.tsx
-const nativePointerEventsNone$4 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
-const webPointerEventsNone$4 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
+const nativePointerEventsNone$3 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const webPointerEventsNone$3 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: disabledProp = false, required: requiredProp = false, size: sizeProp, color: colorProp, onCheckedChange, label, description, icon, error, accessibilityLabel, accessibilityHint, containerStyle, labelStyle, descriptionStyle, errorStyle, style, ...rest }, ref) => {
 	const { theme } = useTheme();
 	const styles = createStyles$10(theme);
@@ -2444,10 +2812,10 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 			onPress: handlePress,
 			style: resolvePressableStyle,
 			children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(View, {
-				...nativePointerEventsNone$4,
+				...nativePointerEventsNone$3,
 				style: [
 					styles.control,
-					webPointerEventsNone$4,
+					webPointerEventsNone$3,
 					{
 						width: radioSize.controlSize,
 						height: radioSize.controlSize,
@@ -2476,8 +2844,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					resolvedDisabled && styles.indicatorDisabled
 				] }))
 			}), (label || description) && /* @__PURE__ */ jsxs(View, {
-				...nativePointerEventsNone$4,
-				style: [styles.content, webPointerEventsNone$4],
+				...nativePointerEventsNone$3,
+				style: [styles.content, webPointerEventsNone$3],
 				children: [label && (typeof label === "string" ? /* @__PURE__ */ jsx(Text, {
 					style: [
 						styles.label,
@@ -2884,23 +3252,92 @@ const RadioGroupRoot = forwardRef(({ value, defaultValue = "", onValueChange, di
 		})
 	});
 });
-RadioGroupRoot.displayName = "RadioGroup.Root";
-//#endregion
-//#region src/components/RadioGroup/RadioGroup.tsx
-const RadioGroup = Object.assign(RadioGroupRoot, { Item: RadioGroupItem });
-RadioGroup.displayName = "RadioGroup";
-//#endregion
-//#region src/components/Select/internal/types.ts
-const selectSlotName = Symbol("VelliraNativeSelectSlot");
+RadioGroupRoot.displayName = "RadioGroup.Root";
+//#endregion
+//#region src/components/RadioGroup/RadioGroup.tsx
+const RadioGroup = Object.assign(RadioGroupRoot, { Item: RadioGroupItem });
+RadioGroup.displayName = "RadioGroup";
+//#endregion
+//#region src/components/Select/Content/SelectContent.styles.ts
+const createContentStyles = (theme) => StyleSheet.create({
+	toolbar: {
+		minHeight: 52,
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		paddingHorizontal: theme.tokens.spacing[4],
+		borderBottomColor: theme.components.select.dropdown.separator.bg,
+		borderBottomWidth: 1
+	},
+	title: {
+		flex: 1,
+		marginHorizontal: theme.tokens.spacing[3],
+		color: theme.components.select.dropdown.fg,
+		fontFamily: theme.tokens.typography.family.medium,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md,
+		textAlign: "center"
+	},
+	toolbarAction: {
+		minWidth: 64,
+		minHeight: 44,
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	cancelText: {
+		color: theme.components.select.trigger.placeholder.fg,
+		fontFamily: theme.tokens.typography.family.medium,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md
+	},
+	doneText: {
+		color: theme.semantic.text.interactive,
+		fontFamily: theme.tokens.typography.family.medium,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md
+	},
+	list: { maxHeight: 420 },
+	listContent: {
+		paddingHorizontal: theme.tokens.spacing[2],
+		paddingVertical: theme.tokens.spacing[2]
+	},
+	empty: {
+		minHeight: 72,
+		alignItems: "center",
+		justifyContent: "center",
+		padding: theme.tokens.spacing[4]
+	},
+	emptyText: {
+		color: theme.components.select.dropdown.empty.fg,
+		fontFamily: theme.tokens.typography.family.regular,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md,
+		textAlign: "center"
+	},
+	loading: {
+		minHeight: 72,
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: theme.tokens.spacing[2],
+		padding: theme.tokens.spacing[4]
+	},
+	loadingText: {
+		color: theme.components.select.dropdown.fg,
+		fontFamily: theme.tokens.typography.family.regular,
+		fontSize: theme.tokens.typography.size.md,
+		lineHeight: theme.tokens.typography.lineHeight.md
+	}
+});
 //#endregion
 //#region src/components/Select/internal/SelectCollection.ts
 const createSelectSlot = (name, displayName) => {
 	const Slot = (_props) => null;
-	Slot[selectSlotName] = name;
+	markCompoundSlot(Slot, name);
 	Slot.displayName = displayName;
 	return Slot;
 };
-const getSelectSlot = (type) => type?.[selectSlotName];
+const getSelectSlot = (type) => getCompoundSlot(type);
 const defaultSelectFilter = (option, query) => option.label.toLowerCase().includes(query.trim().toLowerCase());
 const getTextFromNode = (node) => {
 	if (typeof node === "string" || typeof node === "number") return String(node);
@@ -2989,6 +3426,8 @@ const parseSelectChildren = (children) => {
 				const option = {
 					value: props.value,
 					label: props.label,
+					asChild: props.asChild,
+					children: props.children,
 					disabled: props.disabled,
 					description: props.description,
 					icon: props.icon,
@@ -3017,6 +3456,33 @@ const parseSelectChildren = (children) => {
 	};
 };
 //#endregion
+//#region src/components/Select/internal/SelectContext.tsx
+const SelectContext = createContext(null);
+const useSelectContext = () => {
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("Select compound components must be used inside Select");
+	return context;
+};
+//#endregion
+//#region src/components/Select/Empty/SelectEmpty.tsx
+const renderText$1 = (node, style) => {
+	if (typeof node === "string" || typeof node === "number") return /* @__PURE__ */ jsx(Text, {
+		style,
+		children: node
+	});
+	return node;
+};
+const SelectEmpty = createSelectSlot("empty", "Select.Empty");
+const SelectEmptyState = () => {
+	const styles = useThemeStyles(createContentStyles);
+	const { empty } = useSelectContext();
+	return /* @__PURE__ */ jsx(View, {
+		style: styles.empty,
+		children: renderText$1(empty, styles.emptyText)
+	});
+};
+SelectEmptyState.displayName = "Select.EmptyState";
+//#endregion
 //#region src/components/Select/Group/SelectGroup.styles.ts
 const createGroupStyles = (theme) => StyleSheet.create({
 	groupLabel: {
@@ -3100,24 +3566,6 @@ const SelectGroupActionRow = ({ label, selectLabel, selectedCount, itemCount, on
 SelectGroupLabelRow.displayName = "Select.GroupLabelRow";
 SelectGroupActionRow.displayName = "Select.GroupActionRow";
 //#endregion
-//#region src/components/Select/Group/SelectLabel.tsx
-const SelectLabel = createSelectSlot("label", "Select.Label");
-//#endregion
-//#region src/components/Select/Group/SelectSeparator.tsx
-const SelectSeparator = createSelectSlot("separator", "Select.Separator");
-const SelectSeparatorRow = () => {
-	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createGroupStyles).separator });
-};
-SelectSeparatorRow.displayName = "Select.SeparatorRow";
-//#endregion
-//#region src/components/Select/internal/SelectContext.tsx
-const SelectContext = createContext(null);
-const useSelectContext = () => {
-	const context = useContext(SelectContext);
-	if (!context) throw new Error("Select compound components must be used inside Select");
-	return context;
-};
-//#endregion
 //#region src/components/Select/Item/SelectItem.styles.ts
 const createItemStyles = (theme) => StyleSheet.create({
 	option: {
@@ -3187,17 +3635,54 @@ const renderNodeOrText = (node, textStyle, fallback) => {
 	}) : null);
 };
 const SelectItem = createSelectSlot("item", "Select.Item");
-const SelectItemRow = ({ option, isSelected, isDisabled, optionStyle, onSelect }) => {
+const SelectItemRow = ({ option, isSelected, isDisabled, itemIndex, selectedValues, multiple, optionStyle, onSelect }) => {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createItemStyles);
 	const { color, variant, renderOption } = useSelectContext();
 	const [isHovered, setIsHovered] = useState(false);
+	const child = option.asChild && isValidElement(option.children) ? option.children : void 0;
 	const optionPalette = theme.components.select[option.color ?? color][variant].option;
 	const getOptionState = (pressed) => {
 		if (isDisabled) return theme.components.select.option.disabled;
 		if (isSelected) return pressed ? optionPalette.selectedPressed : isHovered ? optionPalette.selectedHover : optionPalette.selected;
 		return pressed ? optionPalette.pressed : isHovered ? optionPalette.hover : theme.components.select.option.default;
 	};
+	const getOptionStyle = (pressed) => {
+		const optionState = getOptionState(pressed);
+		return [
+			styles.option,
+			{
+				backgroundColor: optionState.bg,
+				borderColor: optionState.border
+			},
+			isDisabled && styles.optionDisabled,
+			optionStyle
+		];
+	};
+	devWarning(!option.asChild || Boolean(child), "Select.Item: asChild requires a single valid React element child.");
+	if (child) return cloneElement(child, {
+		accessibilityRole: "button",
+		accessibilityLabel: option.accessibilityLabel ?? option.label,
+		accessibilityHint: option.accessibilityHint,
+		accessibilityState: {
+			selected: isSelected,
+			disabled: isDisabled
+		},
+		disabled: isDisabled,
+		onPress: (event) => {
+			child.props.onPress?.(event);
+			if (!event.defaultPrevented && !isDisabled) onSelect(option);
+		},
+		onHoverIn: () => {
+			child.props.onHoverIn?.();
+			setIsHovered(true);
+		},
+		onHoverOut: () => {
+			child.props.onHoverOut?.();
+			setIsHovered(false);
+		},
+		style: [getOptionStyle(false), child.props.style]
+	});
 	return /* @__PURE__ */ jsx(Pressable, {
 		disabled: isDisabled,
 		accessibilityRole: "button",
@@ -3210,24 +3695,19 @@ const SelectItemRow = ({ option, isSelected, isDisabled, optionStyle, onSelect }
 		onPress: () => onSelect(option),
 		onHoverIn: () => setIsHovered(true),
 		onHoverOut: () => setIsHovered(false),
-		style: ({ pressed }) => {
-			const optionState = getOptionState(pressed);
-			return [
-				styles.option,
-				{
-					backgroundColor: optionState.bg,
-					borderColor: optionState.border
-				},
-				isDisabled && styles.optionDisabled,
-				optionStyle
-			];
-		},
+		style: ({ pressed }) => getOptionStyle(pressed),
 		children: ({ pressed }) => {
 			const optionFg = getOptionState(pressed).fg;
 			const descriptionFg = isSelected || pressed ? optionFg : theme.components.select.option.description.fg;
-			return renderOption ? renderNodeOrText(renderOption(option, {
+			return renderOption ? renderNodeOrText(renderOption({
+				option,
 				selected: isSelected,
-				disabled: isDisabled
+				disabled: isDisabled,
+				active: isHovered,
+				index: itemIndex,
+				values: selectedValues,
+				multiple,
+				pressed
 			}), [styles.optionLabel, { color: optionFg }]) : /* @__PURE__ */ jsxs(Fragment, { children: [
 				option.icon && /* @__PURE__ */ jsx(View, {
 					style: styles.optionIcon,
@@ -3269,14 +3749,29 @@ const SelectItemRow = ({ option, isSelected, isDisabled, optionStyle, onSelect }
 };
 SelectItemRow.displayName = "Select.ItemRow";
 //#endregion
-//#region src/components/Select/Item/SelectItemBadge.tsx
-const SelectItemBadge = createSelectSlot("itemBadge", "Select.ItemBadge");
-//#endregion
-//#region src/components/Select/Item/SelectItemDescription.tsx
-const SelectItemDescription = createSelectSlot("itemDescription", "Select.ItemDescription");
-//#endregion
-//#region src/components/Select/Item/SelectItemIcon.tsx
-const SelectItemIcon = createSelectSlot("itemIcon", "Select.ItemIcon");
+//#region src/components/Select/Loading/SelectLoading.tsx
+const renderText = (node, style) => {
+	if (typeof node === "string" || typeof node === "number") return /* @__PURE__ */ jsx(Text, {
+		style,
+		children: node
+	});
+	return node;
+};
+const SelectLoading = createSelectSlot("loading", "Select.Loading");
+const SelectLoadingState = () => {
+	const { theme } = useTheme();
+	const styles = useThemeStyles(createContentStyles);
+	const { loadingContent } = useSelectContext();
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles.loading,
+		children: [/* @__PURE__ */ jsx(ActivityIndicator, {
+			testID: "select-content-loading-indicator",
+			size: "small",
+			color: theme.components.select.dropdown.fg
+		}), renderText(loadingContent, styles.loadingText)]
+	});
+};
+SelectLoadingState.displayName = "Select.LoadingState";
 //#endregion
 //#region src/components/Select/Presentation/SelectPresentation.styles.ts
 const createPresentationStyles = (theme) => StyleSheet.create({
@@ -3328,12 +3823,11 @@ const createPresentationStyles = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Select/Presentation/SelectBackdrop.tsx
-const SelectBackdrop = ({ onClose, dismissOnBackdropPress }) => {
+const SelectBackdrop = ({ outsidePressProps }) => {
+	const styles = useThemeStyles(createPresentationStyles);
 	return /* @__PURE__ */ jsx(Pressable, {
-		style: useThemeStyles(createPresentationStyles).backdrop,
-		onPress: dismissOnBackdropPress ? onClose : void 0,
-		accessibilityRole: "button",
-		accessibilityLabel: "Dismiss select"
+		...outsidePressProps,
+		style: styles.backdrop
 	});
 };
 SelectBackdrop.displayName = "Select.Backdrop";
@@ -3350,7 +3844,7 @@ const SelectHandle = () => {
 SelectHandle.displayName = "Select.Handle";
 //#endregion
 //#region src/components/Select/Presentation/SelectModal.tsx
-const SelectModal = ({ visible, onClose, dismissOnBackdropPress, contentStyle, children }) => {
+const SelectModal = ({ visible, onClose, outsidePressProps, zIndex, contentStyle, children }) => {
 	const styles = useThemeStyles(createPresentationStyles);
 	return /* @__PURE__ */ jsx(Modal$1, {
 		transparent: true,
@@ -3358,12 +3852,13 @@ const SelectModal = ({ visible, onClose, dismissOnBackdropPress, contentStyle, c
 		animationType: "slide",
 		onRequestClose: onClose,
 		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles.modalRoot, styles.modalPresentationRoot],
+			style: [
+				styles.modalRoot,
+				styles.modalPresentationRoot,
+				Platform.OS === "web" && { zIndex }
+			],
 			testID: "select-content-root",
-			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
-				onClose,
-				dismissOnBackdropPress
-			}), /* @__PURE__ */ jsx(View, {
+			children: [/* @__PURE__ */ jsx(SelectBackdrop, { outsidePressProps }), /* @__PURE__ */ jsx(View, {
 				style: [
 					styles.content,
 					styles.modalPresentation,
@@ -3378,7 +3873,7 @@ const SelectModal = ({ visible, onClose, dismissOnBackdropPress, contentStyle, c
 SelectModal.displayName = "Select.Modal";
 //#endregion
 //#region src/components/Select/Presentation/SelectPopover.tsx
-const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, position, onFloatingLayout, matchTriggerWidth, triggerWidth, contentStyle, children }) => {
+const SelectPopover = ({ visible, onClose, outsidePressProps, zIndex, position, onFloatingLayout, matchTriggerWidth, triggerWidth, contentStyle, children }) => {
 	const styles = useThemeStyles(createPresentationStyles);
 	return /* @__PURE__ */ jsx(Modal$1, {
 		transparent: true,
@@ -3386,12 +3881,9 @@ const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, position, onF
 		animationType: "fade",
 		onRequestClose: onClose,
 		children: /* @__PURE__ */ jsxs(View, {
-			style: styles.modalRoot,
+			style: [styles.modalRoot, Platform.OS === "web" && { zIndex }],
 			testID: "select-content-root",
-			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
-				onClose,
-				dismissOnBackdropPress
-			}), /* @__PURE__ */ jsx(View, {
+			children: [/* @__PURE__ */ jsx(SelectBackdrop, { outsidePressProps }), /* @__PURE__ */ jsx(View, {
 				onLayout: onFloatingLayout,
 				style: [
 					styles.content,
@@ -3411,151 +3903,37 @@ const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, position, onF
 	});
 };
 SelectPopover.displayName = "Select.Popover";
-//#endregion
-//#region src/components/Select/Presentation/SelectSheet.tsx
-const SelectSheet = ({ visible, onClose, dismissOnBackdropPress, contentStyle, children }) => {
-	const styles = useThemeStyles(createPresentationStyles);
-	return /* @__PURE__ */ jsx(Modal$1, {
-		transparent: true,
-		visible,
-		animationType: "slide",
-		onRequestClose: onClose,
-		children: /* @__PURE__ */ jsxs(View, {
-			style: [styles.modalRoot, styles.sheetRoot],
-			testID: "select-content-root",
-			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
-				onClose,
-				dismissOnBackdropPress
-			}), /* @__PURE__ */ jsxs(View, {
-				style: [
-					styles.content,
-					styles.sheet,
-					contentStyle
-				],
-				testID: "select-sheet",
-				children: [/* @__PURE__ */ jsx(SelectHandle, {}), children]
-			})]
-		})
-	});
-};
-SelectSheet.displayName = "Select.Sheet";
-//#endregion
-//#region src/components/Select/Content/SelectContent.styles.ts
-const createContentStyles = (theme) => StyleSheet.create({
-	toolbar: {
-		minHeight: 52,
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "space-between",
-		paddingHorizontal: theme.tokens.spacing[4],
-		borderBottomColor: theme.components.select.dropdown.separator.bg,
-		borderBottomWidth: 1
-	},
-	title: {
-		flex: 1,
-		marginHorizontal: theme.tokens.spacing[3],
-		color: theme.components.select.dropdown.fg,
-		fontFamily: theme.tokens.typography.family.medium,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md,
-		textAlign: "center"
-	},
-	toolbarAction: {
-		minWidth: 64,
-		minHeight: 44,
-		alignItems: "center",
-		justifyContent: "center"
-	},
-	cancelText: {
-		color: theme.components.select.trigger.placeholder.fg,
-		fontFamily: theme.tokens.typography.family.medium,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	},
-	doneText: {
-		color: theme.semantic.text.interactive,
-		fontFamily: theme.tokens.typography.family.medium,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	},
-	list: { maxHeight: 420 },
-	listContent: {
-		paddingHorizontal: theme.tokens.spacing[2],
-		paddingVertical: theme.tokens.spacing[2]
-	},
-	empty: {
-		minHeight: 72,
-		alignItems: "center",
-		justifyContent: "center",
-		padding: theme.tokens.spacing[4]
-	},
-	emptyText: {
-		color: theme.components.select.dropdown.empty.fg,
-		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md,
-		textAlign: "center"
-	},
-	loading: {
-		minHeight: 72,
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "center",
-		gap: theme.tokens.spacing[2],
-		padding: theme.tokens.spacing[4]
-	},
-	loadingText: {
-		color: theme.components.select.dropdown.fg,
-		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	}
-});
-//#endregion
-//#region src/components/Select/Content/SelectEmpty.tsx
-const renderText$1 = (node, style) => {
-	if (typeof node === "string" || typeof node === "number") return /* @__PURE__ */ jsx(Text, {
-		style,
-		children: node
-	});
-	return node;
-};
-const SelectEmpty = createSelectSlot("empty", "Select.Empty");
-const SelectEmptyState = () => {
-	const styles = useThemeStyles(createContentStyles);
-	const { empty } = useSelectContext();
-	return /* @__PURE__ */ jsx(View, {
-		style: styles.empty,
-		children: renderText$1(empty, styles.emptyText)
-	});
-};
-SelectEmptyState.displayName = "Select.EmptyState";
-//#endregion
-//#region src/components/Select/Content/SelectLoading.tsx
-const renderText = (node, style) => {
-	if (typeof node === "string" || typeof node === "number") return /* @__PURE__ */ jsx(Text, {
-		style,
-		children: node
-	});
-	return node;
-};
-const SelectLoading = createSelectSlot("loading", "Select.Loading");
-const SelectLoadingState = () => {
-	const { theme } = useTheme();
-	const styles = useThemeStyles(createContentStyles);
-	const { loadingContent } = useSelectContext();
-	return /* @__PURE__ */ jsxs(View, {
-		style: styles.loading,
-		children: [/* @__PURE__ */ jsx(ActivityIndicator, {
-			testID: "select-content-loading-indicator",
-			size: "small",
-			color: theme.components.select.dropdown.fg
-		}), renderText(loadingContent, styles.loadingText)]
+//#endregion
+//#region src/components/Select/Presentation/SelectSheet.tsx
+const SelectSheet = ({ visible, onClose, outsidePressProps, zIndex, contentStyle, children }) => {
+	const styles = useThemeStyles(createPresentationStyles);
+	return /* @__PURE__ */ jsx(Modal$1, {
+		transparent: true,
+		visible,
+		animationType: "slide",
+		onRequestClose: onClose,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: [
+				styles.modalRoot,
+				styles.sheetRoot,
+				Platform.OS === "web" && { zIndex }
+			],
+			testID: "select-content-root",
+			children: [/* @__PURE__ */ jsx(SelectBackdrop, { outsidePressProps }), /* @__PURE__ */ jsxs(View, {
+				style: [
+					styles.content,
+					styles.sheet,
+					contentStyle
+				],
+				testID: "select-sheet",
+				children: [/* @__PURE__ */ jsx(SelectHandle, {}), children]
+			})]
+		})
 	});
 };
-SelectLoadingState.displayName = "Select.LoadingState";
+SelectSheet.displayName = "Select.Sheet";
 //#endregion
-//#region src/components/Select/Content/SelectSearch.styles.ts
+//#region src/components/Select/Search/SelectSearch.styles.ts
 const createSearchStyles = (theme) => StyleSheet.create({
 	searchWrap: {
 		flexDirection: "row",
@@ -3597,7 +3975,7 @@ const createSearchStyles = (theme) => StyleSheet.create({
 	}
 });
 //#endregion
-//#region src/components/Select/Content/SelectSearch.tsx
+//#region src/components/Select/Search/SelectSearch.tsx
 const SelectSearch = createSelectSlot("search", "Select.Search");
 const SelectSearchField = () => {
 	const { theme } = useTheme();
@@ -3652,6 +4030,13 @@ const SelectSearchField = () => {
 };
 SelectSearchField.displayName = "Select.SearchField";
 //#endregion
+//#region src/components/Select/Separator/SelectSeparator.tsx
+const SelectSeparator = createSelectSlot("separator", "Select.Separator");
+const SelectSeparatorRow = () => {
+	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createGroupStyles).separator });
+};
+SelectSeparatorRow.displayName = "Select.SeparatorRow";
+//#endregion
 //#region src/components/Select/Content/SelectContent.tsx
 const SelectContent = createSelectSlot("content", "Select.Content");
 const SelectContentSurface = () => {
@@ -3659,13 +4044,13 @@ const SelectContentSurface = () => {
 	const wasOpenRef = useRef(false);
 	const [openCycle, setOpenCycle] = useState(0);
 	const context = useSelectContext();
-	const { isOpen, resolvedPresentation, position, onFloatingLayout, dismissOnBackdropPress, contentStyle, matchTriggerWidth, triggerWidth, resolvedLabel, closeContent, searchable, loading, filteredRows, selectedValues, selectedOptions, maxSelected, optionStyle, selectOption, selectGroup, itemHeight, selectedRowIndex, query } = context;
+	const { isOpen, resolvedPresentation, zIndex, position, onFloatingLayout, contentStyle, matchTriggerWidth, triggerWidth, resolvedLabel, closeContent, getOutsidePressProps, searchable, loading, filteredRows, selectedValues, selectedOptions, maxSelected, optionStyle, selectOption, selectGroup, itemHeight, selectedRowIndex, query } = context;
 	const initialScrollIndex = Boolean(context.virtual) && selectedRowIndex > 0 && query === "" ? selectedRowIndex : void 0;
 	useEffect(() => {
 		if (isOpen && !wasOpenRef.current) setOpenCycle((cycle) => cycle + 1);
 		wasOpenRef.current = isOpen;
 	}, [isOpen]);
-	const renderRow = ({ item }) => {
+	const renderRow = ({ item, index }) => {
 		if (item.type === "group") {
 			if (item.selectable && context.multiple) {
 				const enabledGroupValues = item.itemValues.filter((value) => context.optionsByValue.get(value));
@@ -3687,6 +4072,9 @@ const SelectContentSurface = () => {
 			option: item.option,
 			isSelected,
 			isDisabled: Boolean(item.option.disabled || maxReached),
+			itemIndex: index,
+			selectedValues,
+			multiple: context.multiple,
 			optionStyle,
 			onSelect: selectOption
 		});
@@ -3749,15 +4137,17 @@ const SelectContentSurface = () => {
 	if (resolvedPresentation === "sheet") return /* @__PURE__ */ jsx(SelectSheet, {
 		visible: isOpen,
 		onClose: closeContent,
-		dismissOnBackdropPress,
+		outsidePressProps: getOutsidePressProps({ accessibilityLabel: "Dismiss select" }),
+		zIndex,
 		contentStyle,
 		children: body
 	});
 	if (resolvedPresentation === "popover") return /* @__PURE__ */ jsx(SelectPopover, {
 		visible: isOpen,
 		onClose: closeContent,
-		dismissOnBackdropPress,
+		outsidePressProps: getOutsidePressProps({ accessibilityLabel: "Dismiss select" }),
 		position,
+		zIndex,
 		onFloatingLayout,
 		matchTriggerWidth,
 		triggerWidth,
@@ -3767,104 +4157,28 @@ const SelectContentSurface = () => {
 	return /* @__PURE__ */ jsx(SelectModal, {
 		visible: isOpen,
 		onClose: closeContent,
-		dismissOnBackdropPress,
+		outsidePressProps: getOutsidePressProps({ accessibilityLabel: "Dismiss select" }),
+		zIndex,
 		contentStyle,
 		children: body
 	});
 };
 SelectContentSurface.displayName = "Select.ContentSurface";
 //#endregion
-//#region src/components/Select/internal/useSelectAccessibility.ts
-const useSelectAccessibility = ({ accessibilityLabel, accessibilityHint, label, description, error, invalid, placeholder, selectedLabel, hasFieldContext, fieldDescribedBy }) => {
-	const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : void 0;
-	const errorText = typeof error === "string" || typeof error === "number" ? String(error) : void 0;
-	return {
-		resolvedLabel: accessibilityLabel ?? label ?? selectedLabel ?? placeholder ?? "Select",
-		resolvedHint: accessibilityHint ?? (invalid && errorText ? errorText : descriptionText ? descriptionText : hasFieldContext && fieldDescribedBy ? "Opens a list of options" : void 0),
-		announce: (message) => {
-			AccessibilityInfo.announceForAccessibility?.(message);
-		}
-	};
-};
+//#region src/components/Select/Icon/SelectIcon.tsx
+const SelectIcon = createSelectSlot("icon", "Select.Icon");
 //#endregion
-//#region src/components/Select/internal/useSelectCollection.ts
-const useSelectCollection = (children, optionsProp) => {
-	const parsedChildren = useMemo(() => parseSelectChildren(children), [children]);
-	const options = useMemo(() => [...optionsProp ?? [], ...parsedChildren.options], [optionsProp, parsedChildren.options]);
-	return {
-		options,
-		rows: useMemo(() => {
-			if (parsedChildren.rows.length > 0) return parsedChildren.rows;
-			return options.map((option) => ({
-				type: "item",
-				key: `item-${option.value}`,
-				option
-			}));
-		}, [options, parsedChildren.rows]),
-		searchableFromChildren: parsedChildren.searchable,
-		searchPlaceholderFromChildren: parsedChildren.searchPlaceholder,
-		emptyFromChildren: parsedChildren.empty,
-		loadingFromChildren: parsedChildren.loading
-	};
-};
+//#region src/components/Select/ItemBadge/SelectItemBadge.tsx
+const SelectItemBadge = createSelectSlot("itemBadge", "Select.ItemBadge");
 //#endregion
-//#region src/components/Select/internal/useSelectSearch.ts
-const useSelectSearch = ({ rows, isOpen, searchable, searchableFromChildren, onSearch, filterOptions, filter = defaultSelectFilter }) => {
-	const [query, setQuery] = useState("");
-	const shouldSearch = searchable ?? searchableFromChildren ?? Boolean(onSearch);
-	const shouldFilter = filterOptions ?? !onSearch;
-	const filteredRows = useMemo(() => {
-		if (!query || !shouldFilter) return rows;
-		const visibleRows = [];
-		let pendingGroup;
-		rows.forEach((row) => {
-			if (row.type === "group") {
-				pendingGroup = row;
-				return;
-			}
-			if (row.type === "separator") {
-				if (visibleRows.length > 0 && visibleRows[visibleRows.length - 1]?.type !== "separator") visibleRows.push(row);
-				return;
-			}
-			if (!filter(row.option, query)) return;
-			if (pendingGroup) {
-				visibleRows.push(pendingGroup);
-				pendingGroup = void 0;
-			}
-			visibleRows.push(row);
-		});
-		return visibleRows.filter((row, index, collection) => {
-			if (row.type !== "separator") return true;
-			return index > 0 && index < collection.length - 1 && collection[index - 1]?.type !== "separator";
-		});
-	}, [
-		filter,
-		query,
-		rows,
-		shouldFilter
-	]);
-	useEffect(() => {
-		if (!isOpen) {
-			setQuery("");
-			return;
-		}
-		if (shouldSearch) onSearch?.(query);
-	}, [
-		isOpen,
-		onSearch,
-		query,
-		shouldSearch
-	]);
-	return {
-		query,
-		setQuery,
-		shouldSearch,
-		filteredRows
-	};
-};
+//#region src/components/Select/ItemDescription/SelectItemDescription.tsx
+const SelectItemDescription = createSelectSlot("itemDescription", "Select.ItemDescription");
 //#endregion
-//#region src/components/Select/Trigger/SelectIcon.tsx
-const SelectIcon = createSelectSlot("icon", "Select.Icon");
+//#region src/components/Select/ItemIcon/SelectItemIcon.tsx
+const SelectItemIcon = createSelectSlot("itemIcon", "Select.ItemIcon");
+//#endregion
+//#region src/components/Select/Label/SelectLabel.tsx
+const SelectLabel = createSelectSlot("label", "Select.Label");
 //#endregion
 //#region src/components/Select/Trigger/SelectTrigger.styles.ts
 const createTriggerStyles = (theme) => StyleSheet.create({
@@ -3961,9 +4275,9 @@ const createTriggerStyles = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Select/Trigger/SelectTrigger.tsx
 const SelectTriggerSlot = createSelectSlot("trigger", "Select.Trigger");
-const nativePointerEventsNone$3 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const nativePointerEventsNone$2 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
 const nativePointerEventsBoxNone = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
-const webPointerEventsNone$3 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
+const webPointerEventsNone$2 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const webPointerEventsBoxNone = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
 function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color = "primary", variant = "outline", disabled = false, required = false, hasError = false, hasValue = false, loading = false, clearable = false, startIcon, endIcon, prefix, suffix, accessibilityLabel, accessibilityHint, nativeID, accessibilityLabelledBy, ariaDescribedBy, triggerStyle, textStyle, onPress, onClear }) {
 	const { theme } = useTheme();
@@ -4058,8 +4372,8 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 			],
 			children: [
 				startIcon && /* @__PURE__ */ jsx(View, {
-					...nativePointerEventsNone$3,
-					style: [styles.startIcon, webPointerEventsNone$3],
+					...nativePointerEventsNone$2,
+					style: [styles.startIcon, webPointerEventsNone$2],
 					accessibilityElementsHidden: true,
 					importantForAccessibility: "no",
 					children: renderIcon(startIcon)
@@ -4081,8 +4395,8 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 					size: "small",
 					color: iconColor
 				}) : showClearButton ? null : endIcon ? /* @__PURE__ */ jsx(View, {
-					...nativePointerEventsNone$3,
-					style: [styles.endIcon, webPointerEventsNone$3],
+					...nativePointerEventsNone$2,
+					style: [styles.endIcon, webPointerEventsNone$2],
 					accessibilityElementsHidden: true,
 					importantForAccessibility: "no",
 					children: renderIcon(endIcon)
@@ -4119,51 +4433,321 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 		})]
 	});
 }
-SelectTrigger.displayName = "SelectTrigger";
+SelectTrigger.displayName = "SelectTrigger";
+//#endregion
+//#region src/hooks/behavior/select/useSelectCollection.ts
+const useSelectCollection = (children, optionsProp) => {
+	const parsedChildren = useMemo(() => parseSelectChildren(children), [children]);
+	const options = useMemo(() => [...optionsProp ?? [], ...parsedChildren.options], [optionsProp, parsedChildren.options]);
+	return {
+		options,
+		rows: useMemo(() => {
+			if (parsedChildren.rows.length > 0) return parsedChildren.rows;
+			return options.map((option) => ({
+				type: "item",
+				key: `item-${option.value}`,
+				option
+			}));
+		}, [options, parsedChildren.rows]),
+		searchableFromChildren: parsedChildren.searchable,
+		searchPlaceholderFromChildren: parsedChildren.searchPlaceholder,
+		emptyFromChildren: parsedChildren.empty,
+		loadingFromChildren: parsedChildren.loading
+	};
+};
+//#endregion
+//#region src/hooks/behavior/select/useSelectSearch.ts
+const useSelectSearch = ({ rows, isOpen, searchable, searchableFromChildren, onSearch, filterOptions, filter = defaultSelectFilter }) => {
+	const [query, setQuery] = useState("");
+	const shouldSearch = searchable ?? searchableFromChildren ?? Boolean(onSearch);
+	const shouldFilter = filterOptions ?? !onSearch;
+	const filteredRows = useMemo(() => {
+		if (!query || !shouldFilter) return rows;
+		const visibleRows = [];
+		let pendingGroup;
+		rows.forEach((row) => {
+			if (row.type === "group") {
+				pendingGroup = row;
+				return;
+			}
+			if (row.type === "separator") {
+				if (visibleRows.length > 0 && visibleRows[visibleRows.length - 1]?.type !== "separator") visibleRows.push(row);
+				return;
+			}
+			if (!filter(row.option, query)) return;
+			if (pendingGroup) {
+				visibleRows.push(pendingGroup);
+				pendingGroup = void 0;
+			}
+			visibleRows.push(row);
+		});
+		return visibleRows.filter((row, index, collection) => {
+			if (row.type !== "separator") return true;
+			return index > 0 && index < collection.length - 1 && collection[index - 1]?.type !== "separator";
+		});
+	}, [
+		filter,
+		query,
+		rows,
+		shouldFilter
+	]);
+	useEffect(() => {
+		if (!isOpen) {
+			setQuery("");
+			return;
+		}
+		if (shouldSearch) onSearch?.(query);
+	}, [
+		isOpen,
+		onSearch,
+		query,
+		shouldSearch
+	]);
+	return {
+		query,
+		setQuery,
+		shouldSearch,
+		filteredRows
+	};
+};
+//#endregion
+//#region src/components/Select/internal/resolveSelectAccessibility.ts
+const resolveSelectAccessibility = ({ accessibilityLabel, accessibilityHint, label, description, error, invalid, placeholder, selectedLabel, hasFieldContext, fieldDescribedBy }) => {
+	const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : void 0;
+	const errorText = typeof error === "string" || typeof error === "number" ? String(error) : void 0;
+	return {
+		resolvedLabel: accessibilityLabel ?? label ?? selectedLabel ?? placeholder ?? "Select",
+		resolvedHint: accessibilityHint ?? (invalid && errorText ? errorText : descriptionText ? descriptionText : hasFieldContext && fieldDescribedBy ? "Opens a list of options" : void 0),
+		announce: (message) => {
+			AccessibilityInfo.announceForAccessibility?.(message);
+		}
+	};
+};
+//#endregion
+//#region src/components/Select/Root/useSelectRootActions.ts
+function useSelectRootActions({ multiple, maxSelected, closeOnSelect, selectedValues, optionsByValue, selectedFocusValueRef, selectValue, setSelectedValue, announce, closeAndFocusTrigger }) {
+	return {
+		clearValue: useCallback(() => {
+			selectedFocusValueRef.current = void 0;
+			selectValue("");
+			announce("Selection cleared");
+		}, [
+			announce,
+			selectValue,
+			selectedFocusValueRef
+		]),
+		selectOption: useCallback((option) => {
+			if (option.disabled) return;
+			const selectedBefore = selectedValues.includes(option.value);
+			if (multiple && !selectedBefore && typeof maxSelected === "number" && selectedValues.length >= maxSelected) return;
+			selectedFocusValueRef.current = option.value;
+			selectValue(option.value);
+			announce(`${option.label} selected`);
+		}, [
+			announce,
+			maxSelected,
+			multiple,
+			selectValue,
+			selectedFocusValueRef,
+			selectedValues
+		]),
+		selectGroup: useCallback((values) => {
+			if (!multiple || values.length === 0) return;
+			const enabledValues = values.filter((value) => optionsByValue.has(value));
+			const selectedGroupValues = enabledValues.filter((value) => selectedValues.includes(value));
+			const outsideSelectedCount = selectedValues.filter((value) => !enabledValues.includes(value)).length;
+			const maxSelectableGroupCount = typeof maxSelected === "number" ? Math.max(0, Math.min(enabledValues.length, maxSelected - outsideSelectedCount)) : enabledValues.length;
+			if (selectedGroupValues.length > 0 && selectedGroupValues.length >= maxSelectableGroupCount) {
+				selectedFocusValueRef.current = void 0;
+				setSelectedValue(selectedValues.filter((value) => !enabledValues.includes(value)));
+				announce("Group selection cleared");
+				return;
+			}
+			const nextValues = [...selectedValues];
+			for (const value of enabledValues) {
+				if (nextValues.includes(value)) continue;
+				if (typeof maxSelected === "number" && nextValues.length >= maxSelected) break;
+				nextValues.push(value);
+			}
+			setSelectedValue(nextValues);
+			selectedFocusValueRef.current = nextValues.at(-1);
+			announce("Group selected");
+			if (closeOnSelect) closeAndFocusTrigger();
+		}, [
+			announce,
+			closeAndFocusTrigger,
+			closeOnSelect,
+			maxSelected,
+			multiple,
+			optionsByValue,
+			selectedFocusValueRef,
+			selectedValues,
+			setSelectedValue
+		])
+	};
+}
+//#endregion
+//#region src/components/Select/Root/useSelectRootContextValue.ts
+function useSelectRootContextValue({ color, variant, isOpen, loading, searchable, multiple, maxSelected, virtual, resolvedLabel, resolvedPresentation, zIndex, position, onFloatingLayout, matchTriggerWidth, triggerWidth, selectedValues, selectedOptions, optionsByValue, filteredRows, selectedRowIndex, itemHeight, query, searchPlaceholder, searchInputRef, empty, loadingContent, closeContent, getOutsidePressProps, selectOption, selectGroup, setQuery, renderOption, contentStyle, optionStyle, searchStyle }) {
+	return useMemo(() => ({
+		color,
+		variant,
+		isOpen,
+		loading,
+		searchable,
+		multiple,
+		maxSelected,
+		virtual,
+		resolvedLabel,
+		resolvedPresentation,
+		zIndex,
+		position,
+		onFloatingLayout,
+		matchTriggerWidth,
+		triggerWidth,
+		selectedValues,
+		selectedOptions,
+		optionsByValue,
+		filteredRows,
+		selectedRowIndex,
+		itemHeight,
+		query,
+		searchPlaceholder,
+		searchInputRef,
+		empty,
+		loadingContent,
+		closeContent,
+		getOutsidePressProps,
+		selectOption,
+		selectGroup,
+		setQuery,
+		renderOption,
+		contentStyle,
+		optionStyle,
+		searchStyle
+	}), [
+		color,
+		variant,
+		isOpen,
+		loading,
+		searchable,
+		multiple,
+		maxSelected,
+		virtual,
+		resolvedLabel,
+		resolvedPresentation,
+		zIndex,
+		position,
+		onFloatingLayout,
+		matchTriggerWidth,
+		triggerWidth,
+		selectedValues,
+		selectedOptions,
+		optionsByValue,
+		filteredRows,
+		selectedRowIndex,
+		itemHeight,
+		query,
+		searchPlaceholder,
+		searchInputRef,
+		empty,
+		loadingContent,
+		closeContent,
+		getOutsidePressProps,
+		selectOption,
+		selectGroup,
+		setQuery,
+		renderOption,
+		contentStyle,
+		optionStyle,
+		searchStyle
+	]);
+}
 //#endregion
-//#region src/components/Select/Trigger/SelectValue.tsx
-const SelectValue = createSelectSlot("value", "Select.Value");
+//#region src/components/Select/Root/useSelectRootDisplayValue.ts
+function useSelectRootDisplayValue({ multiple, placeholder, renderValue, selectedOption, selectedOptions, selectedValues }) {
+	return useMemo(() => {
+		if (renderValue) return renderValue({
+			option: selectedOption,
+			options: selectedOptions,
+			value: selectedValues[0] ?? "",
+			values: selectedValues,
+			placeholder,
+			multiple
+		});
+		if (multiple && selectedOptions.length > 0) {
+			const visibleLabels = selectedOptions.slice(0, 2).map((option) => option.label);
+			return selectedOptions.length > 2 ? `${visibleLabels.join(", ")} +${selectedOptions.length - 2}` : visibleLabels.join(", ");
+		}
+		return selectedOption?.label ?? placeholder;
+	}, [
+		multiple,
+		placeholder,
+		renderValue,
+		selectedOption,
+		selectedOptions,
+		selectedValues
+	]);
+}
 //#endregion
-//#region src/components/Select/Root/SelectRoot.tsx
-function SelectRoot(props) {
-	const { label, description, error, invalid = false, required = false, disabled = false, placeholder = "Select...", color = "primary", variant = "outline", size, open, defaultOpen, onOpenChange, clearable = false, searchable: searchableProp, searchPlaceholder, loading = false, loadingText = "Loading...", onSearch, filterOptions, filter, empty, startIcon, endIcon, prefix, suffix, renderValue, renderOption, closeOnSelect, maxSelected, presentation = "auto", placement = "bottom-start", offset = 8, matchTriggerWidth = false, dismissOnBackdropPress = true, virtual, options: optionsProp, children, style, triggerStyle, textStyle, contentStyle, optionStyle, searchStyle, accessibilityLabel, accessibilityHint, testID } = props;
+//#region src/components/Select/Root/useSelectRootSelection.ts
+function useSelectRootSelection({ props, options, isDisabled }) {
+	const selection = useSelect({
+		value: props.multiple ? props.value : props.value === null ? "" : props.value,
+		defaultValue: props.multiple ? props.defaultValue : props.defaultValue === null ? "" : props.defaultValue,
+		onValueChange: (nextValue) => {
+			if (props.multiple) {
+				props.onValueChange?.(Array.isArray(nextValue) ? nextValue : nextValue ? [nextValue] : []);
+				return;
+			}
+			props.onValueChange?.(Array.isArray(nextValue) ? nextValue[0] ?? null : nextValue === "" ? null : nextValue);
+		},
+		options,
+		multiple: props.multiple,
+		maxSelected: props.maxSelected,
+		closeOnSelect: props.closeOnSelect,
+		disabled: isDisabled,
+		open: props.open,
+		defaultOpen: props.defaultOpen,
+		onOpenChange: props.onOpenChange
+	});
+	const optionsByValue = useMemo(() => new Map(options.filter((option) => !option.disabled).map((option) => [option.value, option])), [options]);
+	return {
+		...selection,
+		optionsByValue
+	};
+}
+//#endregion
+//#region src/components/Select/Root/useSelectRootState.tsx
+function useSelectRootState(props) {
+	const { label, description, error, invalid = false, required = false, disabled = false, placeholder = "Select...", color = "primary", variant = "outline", size, clearable = false, searchable: searchableProp, searchPlaceholder, loading = false, loadingText = "Loading...", onSearch, filterOptions, filter, empty, startIcon, endIcon, prefix, suffix, renderValue, renderOption, closeOnSelect, maxSelected, presentation = "auto", placement = "bottom-start", offset = 8, matchTriggerWidth = false, dismissOnBackdropPress = true, virtual, options: optionsProp, children, style, triggerStyle, textStyle, contentStyle, optionStyle, searchStyle, accessibilityLabel, accessibilityHint, testID } = props;
 	const field = useFormFieldContext();
 	const overlayId = useId();
 	const hasOwnField = Boolean(label || description || error);
 	const [triggerWidth, setTriggerWidth] = useState();
 	const triggerRef = useRef(null);
-	const { position, placement: resolvedPlacement, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
 	const searchInputRef = useRef(null);
 	const selectedFocusValueRef = useRef(void 0);
 	const resolvedPresentation = useOverlayPresentation(presentation);
+	const { position, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
 	const { options, rows, searchableFromChildren, searchPlaceholderFromChildren, emptyFromChildren, loadingFromChildren } = useSelectCollection(children, optionsProp);
 	const resolvedSize = size ?? field?.size ?? "md";
 	const isInvalid = invalid || Boolean(error) || !hasOwnField && Boolean(field?.invalid);
 	const isDisabled = disabled || !hasOwnField && Boolean(field?.disabled);
 	const isRequired = required || !hasOwnField && Boolean(field?.required);
-	const { selectedValue, setSelectedValue, isOpen, openDropdown, closeDropdown, selectValue } = useSelect({
-		value: props.multiple ? props.value : props.value === null ? "" : props.value,
-		defaultValue: props.multiple ? props.defaultValue : props.defaultValue === null ? "" : props.defaultValue,
-		onValueChange: (nextValue) => {
-			if (props.multiple) {
-				props.onValueChange?.(nextValue);
-				return;
-			}
-			props.onValueChange?.(nextValue === "" ? null : nextValue);
-		},
+	const { setSelectedValue, selectedValues, selectedOption, selectedOptions, optionsByValue, isOpen, openDropdown, closeDropdown, selectValue } = useSelectRootSelection({
+		props,
 		options,
-		multiple: props.multiple,
-		maxSelected,
-		closeOnSelect,
-		disabled: isDisabled,
-		open,
-		defaultOpen,
-		onOpenChange
+		isDisabled
 	});
-	const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue ? [selectedValue] : [];
-	const selectedOption = options.find((option) => selectedValues.includes(option.value));
-	const selectedOptions = options.filter((option) => selectedValues.includes(option.value));
-	const optionsByValue = useMemo(() => new Map(options.filter((option) => !option.disabled).map((option) => [option.value, option])), [options]);
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({
+		active: isOpen,
+		triggerRef
+	});
+	const closeAndFocusTrigger = useCallback(() => {
+		closeDropdown();
+		restoreFocusAfterClose();
+	}, [closeDropdown, restoreFocusAfterClose]);
 	const { query, setQuery, shouldSearch, filteredRows } = useSelectSearch({
 		rows,
 		isOpen,
@@ -4176,24 +4760,15 @@ function SelectRoot(props) {
 	const selectedFocusValue = selectedValues.includes(selectedFocusValueRef.current ?? "") ? selectedFocusValueRef.current : selectedValues[0];
 	const selectedRowIndex = Math.max(0, filteredRows.findIndex((row) => row.type === "item" && row.option.value === selectedFocusValue));
 	const itemHeight = typeof virtual === "object" ? virtual.estimatedItemSize ?? 46 : 46;
-	const displayValue = useMemo(() => {
-		if (renderValue) return renderValue(props.multiple ? selectedOptions : selectedOption ?? null, {
-			placeholder,
-			multiple: Boolean(props.multiple)
-		});
-		if (props.multiple && selectedOptions.length > 0) {
-			const visibleLabels = selectedOptions.slice(0, 2).map((option) => option.label);
-			return selectedOptions.length > 2 ? `${visibleLabels.join(", ")} +${selectedOptions.length - 2}` : visibleLabels.join(", ");
-		}
-		return selectedOption?.label ?? placeholder;
-	}, [
+	const displayValue = useSelectRootDisplayValue({
+		multiple: Boolean(props.multiple),
 		placeholder,
-		props.multiple,
 		renderValue,
 		selectedOption,
-		selectedOptions
-	]);
-	const { resolvedLabel, resolvedHint, announce } = useSelectAccessibility({
+		selectedOptions,
+		selectedValues
+	});
+	const { resolvedLabel, resolvedHint, announce } = resolveSelectAccessibility({
 		accessibilityLabel,
 		accessibilityHint,
 		label: !hasOwnField ? void 0 : label,
@@ -4210,111 +4785,106 @@ function SelectRoot(props) {
 		id: overlayId,
 		active: isOpen,
 		closeOnOutsidePress: dismissOnBackdropPress,
-		requestClose: closeDropdown
+		requestClose: closeAndFocusTrigger
 	});
-	const clearValue = () => {
-		selectedFocusValueRef.current = void 0;
-		selectValue("");
-		announce("Selection cleared");
-	};
-	const selectOption = (option) => {
-		if (option.disabled) return;
-		const selectedBefore = selectedValues.includes(option.value);
-		if (Boolean(props.multiple) && !selectedBefore && typeof maxSelected === "number" && selectedValues.length >= maxSelected) return;
-		selectedFocusValueRef.current = option.value;
-		selectValue(option.value);
-		announce(`${option.label} selected`);
-	};
-	const selectGroup = (values) => {
-		if (!props.multiple || values.length === 0) return;
-		const enabledValues = values.filter((value) => optionsByValue.has(value));
-		const selectedGroupValues = enabledValues.filter((value) => selectedValues.includes(value));
-		const outsideSelectedCount = selectedValues.filter((value) => !enabledValues.includes(value)).length;
-		const maxSelectableGroupCount = typeof maxSelected === "number" ? Math.max(0, Math.min(enabledValues.length, maxSelected - outsideSelectedCount)) : enabledValues.length;
-		if (selectedGroupValues.length > 0 && selectedGroupValues.length >= maxSelectableGroupCount) {
-			selectedFocusValueRef.current = void 0;
-			setSelectedValue(selectedValues.filter((value) => !enabledValues.includes(value)));
-			announce("Group selection cleared");
-			return;
-		}
-		const nextValues = [...selectedValues];
-		for (const value of enabledValues) {
-			if (nextValues.includes(value)) continue;
-			if (typeof maxSelected === "number" && nextValues.length >= maxSelected) break;
-			nextValues.push(value);
-		}
-		setSelectedValue(nextValues);
-		selectedFocusValueRef.current = nextValues.at(-1);
-		announce("Group selected");
-		if (closeOnSelect) closeDropdown();
-	};
-	const openContent = () => {
-		updatePosition(triggerRef);
-		openDropdown();
-	};
-	const contextValue = {
-		label,
-		description,
-		error,
-		placeholder,
-		color,
-		variant,
-		size: resolvedSize,
-		isOpen,
-		hasValue,
-		loading,
-		clearable,
-		searchable: shouldSearch,
+	const { clearValue, selectOption, selectGroup } = useSelectRootActions({
 		multiple: Boolean(props.multiple),
 		maxSelected,
-		virtual,
-		resolvedLabel,
-		resolvedHint,
-		resolvedPresentation,
-		placement: resolvedPlacement,
-		position,
-		onFloatingLayout,
-		dismissOnBackdropPress,
-		matchTriggerWidth,
-		triggerWidth,
+		closeOnSelect,
 		selectedValues,
-		selectedOptions,
 		optionsByValue,
-		rows,
-		filteredRows,
-		selectedRowIndex,
-		itemHeight,
-		query,
-		searchPlaceholder: searchPlaceholder ?? searchPlaceholderFromChildren ?? "Search...",
-		searchInputRef,
-		empty: empty ?? emptyFromChildren ?? "Nothing found",
-		loadingContent: loadingFromChildren ?? loadingText,
-		closeContent: dismiss.requestClose,
-		openContent,
+		selectedFocusValueRef,
+		selectValue,
+		setSelectedValue,
+		announce,
+		closeAndFocusTrigger
+	});
+	const resolvedSearchPlaceholder = searchPlaceholder ?? searchPlaceholderFromChildren ?? "Search...";
+	const resolvedEmpty = empty ?? emptyFromChildren ?? "Nothing found";
+	const resolvedLoadingContent = loadingFromChildren ?? loadingText;
+	return {
+		contextValue: useSelectRootContextValue({
+			color,
+			variant,
+			isOpen,
+			loading,
+			searchable: shouldSearch,
+			multiple: Boolean(props.multiple),
+			maxSelected,
+			virtual,
+			resolvedLabel,
+			resolvedPresentation,
+			zIndex: dismiss.zIndex,
+			position,
+			onFloatingLayout,
+			matchTriggerWidth,
+			triggerWidth,
+			selectedValues,
+			selectedOptions,
+			optionsByValue,
+			filteredRows,
+			selectedRowIndex,
+			itemHeight,
+			query,
+			searchPlaceholder: resolvedSearchPlaceholder,
+			searchInputRef,
+			empty: resolvedEmpty,
+			loadingContent: resolvedLoadingContent,
+			closeContent: dismiss.requestClose,
+			getOutsidePressProps: dismiss.getOutsidePressProps,
+			selectOption,
+			selectGroup,
+			setQuery,
+			renderOption,
+			contentStyle,
+			optionStyle,
+			searchStyle
+		}),
+		displayValue,
+		field,
+		hasOwnField,
+		hasValue,
+		isDisabled,
+		isInvalid,
+		isOpen,
+		isRequired,
 		clearValue,
-		selectOption,
-		selectGroup,
-		setQuery,
-		renderValue,
-		renderOption,
-		startIcon,
-		endIcon,
-		prefix,
-		suffix,
-		triggerStyle,
-		textStyle,
-		contentStyle,
-		optionStyle,
-		searchStyle,
-		fieldControlId: !hasOwnField ? field?.controlId : void 0,
-		fieldLabelId: !hasOwnField ? field?.labelId : void 0,
-		fieldDescribedBy: !hasOwnField ? field?.ariaDescribedBy : void 0
+		openDropdown,
+		resolvedHint,
+		resolvedLabel,
+		resolvedSize,
+		setTriggerWidth,
+		triggerRef,
+		controlProps: {
+			clearable,
+			color,
+			endIcon,
+			loading,
+			prefix,
+			startIcon,
+			suffix,
+			testID,
+			textStyle,
+			triggerStyle,
+			variant
+		},
+		formFieldProps: {
+			description,
+			error,
+			label,
+			style
+		}
 	};
+}
+//#endregion
+//#region src/components/Select/Root/SelectRoot.tsx
+function SelectRoot(props) {
+	const { contextValue, controlProps, displayValue, field, formFieldProps, hasOwnField, hasValue, isDisabled, isInvalid, isOpen, isRequired, resolvedHint, resolvedLabel, resolvedSize, triggerRef, clearValue, openDropdown, setTriggerWidth } = useSelectRootState(props);
 	const control = /* @__PURE__ */ jsx(SelectContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs(View, {
 			ref: triggerRef,
-			testID,
+			testID: controlProps.testID,
 			onLayout: (event) => setTriggerWidth(event.nativeEvent.layout.width),
 			children: [/* @__PURE__ */ jsx(SelectTrigger, {
 				displayText: displayValue,
@@ -4322,24 +4892,24 @@ function SelectRoot(props) {
 				isOpen,
 				hasValue,
 				size: resolvedSize,
-				color,
-				variant,
+				color: controlProps.color,
+				variant: controlProps.variant,
 				disabled: isDisabled,
 				required: isRequired,
 				hasError: isInvalid,
-				loading,
-				clearable,
-				startIcon,
-				endIcon,
-				prefix,
-				suffix,
+				loading: controlProps.loading,
+				clearable: controlProps.clearable,
+				startIcon: controlProps.startIcon,
+				endIcon: controlProps.endIcon,
+				prefix: controlProps.prefix,
+				suffix: controlProps.suffix,
 				nativeID: !hasOwnField ? field?.controlId : void 0,
 				accessibilityLabel: resolvedLabel,
 				accessibilityHint: resolvedHint,
 				accessibilityLabelledBy: !hasOwnField ? field?.labelId : void 0,
 				ariaDescribedBy: !hasOwnField ? field?.ariaDescribedBy : void 0,
-				triggerStyle,
-				textStyle,
+				triggerStyle: controlProps.triggerStyle,
+				textStyle: controlProps.textStyle,
 				onPress: openDropdown,
 				onClear: clearValue
 			}), /* @__PURE__ */ jsx(SelectContentSurface, {})]
@@ -4347,19 +4917,22 @@ function SelectRoot(props) {
 	});
 	if (!hasOwnField && field) return control;
 	return /* @__PURE__ */ jsx(FormField, {
-		label,
-		description,
-		error,
+		label: formFieldProps.label,
+		description: formFieldProps.description,
+		error: formFieldProps.error,
 		required: isRequired,
 		disabled: isDisabled,
 		invalid: isInvalid,
 		size: resolvedSize,
-		style,
+		style: formFieldProps.style,
 		children: control
 	});
 }
 SelectRoot.displayName = "Select";
 //#endregion
+//#region src/components/Select/Value/SelectValue.tsx
+const SelectValue = createSelectSlot("value", "Select.Value");
+//#endregion
 //#region src/components/Select/Select.tsx
 const Select = Object.assign(SelectRoot, {
 	Trigger: SelectTriggerSlot,
@@ -4378,7 +4951,7 @@ const Select = Object.assign(SelectRoot, {
 	Loading: SelectLoading
 });
 //#endregion
-//#region src/components/Tabs/TabsContext.tsx
+//#region src/components/Tabs/internal/TabsContext.tsx
 const TabsContext = createContext(null);
 const TabsProvider = TabsContext.Provider;
 const useTabs = () => {
@@ -4441,8 +5014,8 @@ const COLLAPSED_SIZE = 8;
 const LINE_ANIMATION_DURATION = 360;
 const SURFACE_ANIMATION_DURATION = 220;
 const easing = Easing?.bezier?.(.22, 1, .36, 1) ?? ((value) => value);
-const nativePointerEventsNone$2 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
-const webPointerEventsNone$2 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
+const nativePointerEventsNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const webPointerEventsNone$1 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const animateValue = (value, toValue, duration) => Animated.timing(value, {
 	toValue,
 	duration,
@@ -4645,8 +5218,8 @@ const TabsIndicator = ({ children, style }) => {
 	return /* @__PURE__ */ jsx(Animated.View, {
 		accessibilityElementsHidden: true,
 		importantForAccessibility: "no-hide-descendants",
-		...nativePointerEventsNone$2,
-		style: [indicatorStyle, webPointerEventsNone$2],
+		...nativePointerEventsNone$1,
+		style: [indicatorStyle, webPointerEventsNone$1],
 		children
 	});
 };
@@ -5148,13 +5721,45 @@ const useTooltipContext = () => {
 };
 TooltipContext.displayName = "TooltipContext";
 //#endregion
+//#region src/components/Tooltip/Arrow/TooltipArrow.tsx
+function TooltipArrow() {
+	const { theme } = useTheme();
+	const tooltip = useTooltipContext();
+	const size = theme.components.tooltip.arrow.size;
+	const side = tooltip.placement.split("-")[0];
+	const staticSide = {
+		top: "bottom",
+		right: "left",
+		bottom: "top",
+		left: "right"
+	}[side];
+	const crossAxisStyle = side === "left" || side === "right" ? {
+		top: tooltip.arrowPosition.top ?? 0,
+		marginTop: -size / 2
+	} : {
+		left: tooltip.arrowPosition.left ?? 0,
+		marginLeft: -size / 2
+	};
+	return /* @__PURE__ */ jsx(View, {
+		pointerEvents: "none",
+		style: {
+			position: "absolute",
+			width: size,
+			height: size,
+			backgroundColor: theme.components.tooltip.arrow.bg,
+			transform: [{ rotate: "45deg" }],
+			[staticSide]: -size / 2,
+			...crossAxisStyle
+		}
+	});
+}
+//#endregion
 //#region src/components/Tooltip/Tooltip.styles.ts
 const createStyles$3 = (theme) => StyleSheet.create({
 	root: { alignSelf: "flex-start" },
 	overlay: { ...StyleSheet.absoluteFill },
 	bubble: {
 		position: "absolute",
-		zIndex: 1e3,
 		maxWidth: theme.components.tooltip.content.maxWidth,
 		paddingHorizontal: theme.components.tooltip.content.paddingX,
 		paddingVertical: theme.components.tooltip.content.paddingY,
@@ -5187,8 +5792,6 @@ const createStyles$3 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Tooltip/Content/TooltipContent.tsx
-const nativePointerEventsNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
-const webPointerEventsNone$1 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const TooltipContent = ({ children, forceMount = false, withArrow = false, style, textStyle }) => {
 	const styles = useThemeStyles(createStyles$3);
 	const tooltip = useTooltipContext();
@@ -5196,13 +5799,13 @@ const TooltipContent = ({ children, forceMount = false, withArrow = false, style
 	if (!forceMount && !visible) return null;
 	const bubble = /* @__PURE__ */ jsxs(View, {
 		nativeID: tooltip.contentId,
-		...nativePointerEventsNone$1,
+		pointerEvents: "none",
 		style: [
 			styles.bubble,
-			webPointerEventsNone$1,
 			{
 				top: tooltip.position.top,
-				left: tooltip.position.left
+				left: tooltip.position.left,
+				zIndex: tooltip.zIndex
 			},
 			!visible && { display: "none" },
 			style
@@ -5211,7 +5814,7 @@ const TooltipContent = ({ children, forceMount = false, withArrow = false, style
 		children: [Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx(Text, {
 			style: [styles.text, textStyle],
 			children: child
-		}) : child), withArrow && /* @__PURE__ */ jsx(InternalArrow, {})]
+		}) : child), withArrow && /* @__PURE__ */ jsx(TooltipArrow, {})]
 	});
 	if (!visible) return bubble;
 	return /* @__PURE__ */ jsx(Modal$1, {
@@ -5220,46 +5823,15 @@ const TooltipContent = ({ children, forceMount = false, withArrow = false, style
 		animationType: "fade",
 		onRequestClose: tooltip.requestClose,
 		children: /* @__PURE__ */ jsx(Pressable, {
+			...tooltip.getOutsidePressProps({ accessibilityLabel: "Close tooltip" }),
 			style: styles.overlay,
-			onPress: tooltip.requestOutsideClose,
 			children: bubble
 		})
 	});
 };
 TooltipContent.displayName = "Tooltip.Content";
-function InternalArrow() {
-	const { theme } = useTheme();
-	const tooltip = useTooltipContext();
-	const size = theme.components.tooltip.arrow.size;
-	const side = tooltip.placement.split("-")[0];
-	const staticSide = {
-		top: "bottom",
-		right: "left",
-		bottom: "top",
-		left: "right"
-	}[side];
-	const crossAxisStyle = side === "left" || side === "right" ? {
-		top: tooltip.arrowPosition.top ?? 0,
-		marginTop: -size / 2
-	} : {
-		left: tooltip.arrowPosition.left ?? 0,
-		marginLeft: -size / 2
-	};
-	return /* @__PURE__ */ jsx(View, {
-		...nativePointerEventsNone$1,
-		style: [{
-			position: "absolute",
-			width: size,
-			height: size,
-			backgroundColor: theme.components.tooltip.arrow.bg,
-			transform: [{ rotate: "45deg" }],
-			[staticSide]: -size / 2,
-			...crossAxisStyle
-		}, webPointerEventsNone$1]
-	});
-}
 //#endregion
-//#region src/components/Tooltip/internal/useTooltipDelay.ts
+//#region src/components/Tooltip/internal/resolveTooltipDelay.ts
 const resolveTooltipDelay = (delay) => {
 	if (typeof delay === "number") return {
 		open: delay,
@@ -5348,15 +5920,17 @@ const TooltipRoot = ({ children, open: openProp, defaultOpen = false, onOpenChan
 			setOpen,
 			show,
 			hide,
+			zIndex: dismiss.zIndex,
 			requestClose: dismiss.requestClose,
-			requestOutsideClose: dismiss.requestOutsideClose,
+			getOutsidePressProps: dismiss.getOutsidePressProps,
 			onFloatingLayout
 		}), [
 			arrowPosition,
 			contentId,
 			disabled,
+			dismiss.zIndex,
+			dismiss.getOutsidePressProps,
 			dismiss.requestClose,
-			dismiss.requestOutsideClose,
 			hide,
 			open,
 			resolvedPlacement,
@@ -5403,11 +5977,6 @@ const Tooltip = Object.assign(TooltipRoot, {
 });
 Tooltip.displayName = "Tooltip";
 //#endregion
-//#region src/utils/devWarning.ts
-const devWarning = (condition, message) => {
-	if ((typeof __DEV__ === "undefined" || __DEV__) && !condition) console.warn(message);
-};
-//#endregion
 //#region src/primitives/Button/Button.styles.ts
 const fontWeight = (value) => value;
 const createStyles$2 = (theme) => StyleSheet.create({
@@ -5426,9 +5995,14 @@ const createStyles$2 = (theme) => StyleSheet.create({
 		fontFamily: theme.tokens.typography.family.regular,
 		fontWeight: fontWeight(theme.tokens.typography.weight.regular),
 		lineHeight: theme.tokens.typography.lineHeight.md,
+		textAlign: "center",
 		color: theme.components.button.primary.solid.default.fg
 	},
-	labelSlot: { position: "relative" },
+	labelSlot: {
+		position: "relative",
+		alignItems: "center",
+		justifyContent: "center"
+	},
 	labelMeasure: {
 		position: "absolute",
 		opacity: 0
@@ -5475,22 +6049,22 @@ const createStyles$2 = (theme) => StyleSheet.create({
 //#region src/primitives/Button/Button.tsx
 const sizeMap = {
 	sm: {
-		px: 12,
-		py: 8,
+		px: 16,
+		py: 6,
 		height: 36,
 		fontSize: 12,
 		iconSize: 16
 	},
 	md: {
-		px: 16,
-		py: 12,
+		px: 24,
+		py: 8,
 		height: 44,
 		fontSize: 14,
 		iconSize: 20
 	},
 	lg: {
-		px: 20,
-		py: 16,
+		px: 32,
+		py: 10,
 		height: 52,
 		fontSize: 16,
 		iconSize: 24
@@ -5580,12 +6154,11 @@ function Button({ children, color = "primary", appearance = "solid", shape = "pi
 				}),
 				!loading && iconStart && renderIcon(iconStart, contentColor),
 				content && !iconOnly && /* @__PURE__ */ jsxs(View, {
-					style: styles.labelSlot,
+					style: [styles.labelSlot, labelWidth > 0 && { minWidth: labelWidth }],
 					children: [/* @__PURE__ */ jsx(Text, {
 						onLayout: handleLabelLayout,
 						style: [
 							styles.text,
-							labelWidth > 0 && { minWidth: labelWidth },
 							{
 								fontSize: config.fontSize,
 								color: contentColor