@vellira-ui/react-native 2.58.0 → 2.59.0

package/dist/index.js

@@ -1,7 +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, createOverlayZIndexPolicy, resolveOverlayZIndex } from "@vellira-ui/core";
+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
@@ -31,38 +31,54 @@ const nativeOverlayZIndexPolicy = createOverlayZIndexPolicy({
 });
 const nativeOverlayDiagnostics = createConsoleOverlayDiagnostics("NativeOverlayManager");
 const createNativeOverlayManager = () => {
-	let stack = [];
+	const store = createOverlayManagerStore({
+		diagnostics: nativeOverlayDiagnostics,
+		policy: nativeOverlayZIndexPolicy
+	});
 	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;
+	};
 	return {
 		register(id) {
-			if (stack.some((item) => item.id === id)) nativeOverlayDiagnostics.duplicateRegistration?.(id);
-			stack = stack.filter((item) => item.id !== id);
-			const entry = {
-				id,
-				zIndex: resolveOverlayZIndex({
-					level: nativeOverlayZIndexPolicy.defaultLevel,
-					order: stack.length,
-					policy: nativeOverlayZIndexPolicy
-				})
-			};
-			stack.push(entry);
-			return entry;
+			const entry = store.register({ id });
+			return toNativeEntry(entry.id);
 		},
 		unregister(id) {
-			if (!stack.some((item) => item.id === id)) nativeOverlayDiagnostics.unknownUnregister?.(id);
 			dismissHandlers.delete(id);
 			outsidePressHandlers.delete(id);
-			stack = stack.filter((item) => item.id !== id);
+			store.unregister(id);
+		},
+		getSnapshot() {
+			return getNativeSnapshot();
 		},
 		isTop(id) {
-			return stack.at(-1)?.id === id;
+			return store.isTopmost(id);
 		},
 		getTop() {
-			return stack.at(-1);
+			return getNativeSnapshot().topmost;
 		},
 		getZIndex(id) {
-			return stack.find((item) => item.id === id)?.zIndex ?? nativeOverlayZIndexPolicy.levels[nativeOverlayZIndexPolicy.defaultLevel];
+			return store.getZIndex(id) ?? nativeOverlayZIndexPolicy.levels[nativeOverlayZIndexPolicy.defaultLevel];
+		},
+		subscribe(listener) {
+			return store.subscribe(listener);
 		},
 		registerDismissHandler(id, handler) {
 			dismissHandlers.set(id, handler);
@@ -93,9 +109,9 @@ const createNativeOverlayManager = () => {
 			return handler();
 		},
 		clear() {
-			stack = [];
 			dismissHandlers.clear();
 			outsidePressHandlers.clear();
+			store.clear();
 		}
 	};
 };
@@ -108,11 +124,10 @@ const useNativeOverlayManager = () => useContext(NativeOverlayManagerContext) ??
 //#region src/hooks/behavior/overlay/useOverlayRegistration.ts
 const useOverlayRegistration = ({ active, id }) => {
 	const nativeOverlayManager = useNativeOverlayManager();
-	const [zIndex, setZIndex] = useState(() => nativeOverlayManager.getZIndex(id));
+	const snapshot = useSyncExternalStore(nativeOverlayManager.subscribe, nativeOverlayManager.getSnapshot, nativeOverlayManager.getSnapshot);
 	useEffect(() => {
 		if (!active) return;
-		const entry = nativeOverlayManager.register(id);
-		setZIndex(entry.zIndex);
+		nativeOverlayManager.register(id);
 		return () => {
 			nativeOverlayManager.unregister(id);
 		};
@@ -121,52 +136,33 @@ const useOverlayRegistration = ({ active, id }) => {
 		id,
 		nativeOverlayManager
 	]);
+	const isTopOverlay = useCallback(() => nativeOverlayManager.isTop(id), [id, nativeOverlayManager]);
 	return {
-		zIndex,
-		isTopOverlay: useCallback(() => nativeOverlayManager.isTop(id), [id, nativeOverlayManager])
+		zIndex: snapshot.registry.get(id)?.zIndex ?? nativeOverlayManager.getZIndex(id),
+		isTopmost: snapshot.topmost?.id === id,
+		isTopOverlay
 	};
 };
 //#endregion
 //#region src/hooks/behavior/overlay/useOverlayDismiss.ts
-const dismissListeners = /* @__PURE__ */ new Map();
-function attachDismissListener(manager) {
-	if (dismissListeners.has(manager)) return;
+const dismissListeners = createRetainedResourceRegistry((manager) => {
 	if (Platform.OS === "web") {
 		const handleKeyDown = (event) => {
 			if (event.key !== "Escape") return;
 			manager.dispatchTopDismiss();
 		};
 		document.addEventListener("keydown", handleKeyDown);
-		dismissListeners.set(manager, {
-			count: 0,
-			detach: () => {
-				document.removeEventListener("keydown", handleKeyDown);
-				dismissListeners.delete(manager);
-			}
-		});
-		return;
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
 	}
 	const subscription = BackHandler.addEventListener("hardwareBackPress", () => manager.dispatchTopDismiss());
-	dismissListeners.set(manager, {
-		count: 0,
-		detach: () => {
-			subscription.remove();
-			dismissListeners.delete(manager);
-		}
-	});
-}
-function retainDismissListener(manager) {
-	attachDismissListener(manager);
-	const retained = dismissListeners.get(manager);
-	if (!retained) return () => void 0;
-	retained.count += 1;
 	return () => {
-		const current = dismissListeners.get(manager);
-		if (!current) return;
-		current.count = Math.max(0, current.count - 1);
-		if (current.count > 0) return;
-		current.detach();
+		subscription.remove();
 	};
+});
+function retainDismissListener(manager) {
+	return dismissListeners.retain(manager);
 }
 const useOverlayDismiss = ({ active, closeOnEscape = true, closeOnOutsidePress = true, id, requestClose, requestOutsideClose }) => {
 	const nativeOverlayManager = useNativeOverlayManager();
@@ -182,6 +178,22 @@ const useOverlayDismiss = ({ active, closeOnEscape = true, closeOnOutsidePress =
 	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) return;
 		return nativeOverlayManager.registerOutsidePressHandler(id, () => {
@@ -225,6 +237,7 @@ const useOverlayDismiss = ({ active, closeOnEscape = true, closeOnOutsidePress =
 	return {
 		zIndex: registration.zIndex,
 		isTopOverlay,
+		getOutsidePressProps,
 		requestClose: requestTopClose,
 		requestOutsideClose: requestOutsideTopClose
 	};
@@ -262,7 +275,7 @@ const useOverlayFocusRestore = ({ active = false, enabled = true, finalFocus, tr
 	]);
 	const restoreFocusAfterClose = useCallback(() => {
 		if (!enabled) return;
-		requestAnimationFrame(restoreFocus);
+		deferOverlayFocusRestore(restoreFocus, requestAnimationFrame);
 	}, [enabled, restoreFocus]);
 	useEffect(() => {
 		if (!active) return;
@@ -278,8 +291,11 @@ const useOverlayFocusRestore = ({ active = false, enabled = true, finalFocus, tr
 //#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
@@ -531,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,
@@ -808,7 +836,7 @@ const createStyles$21 = (theme) => StyleSheet.create({
 const nativePointerEventsBoxNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
 const webPointerEventsBoxNone$1 = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
 function DropdownContent({ children, contentStyle, accessibilityLabel }) {
-	const { open, color, presentation, zIndex, position, searchable, searchValue, searchPlaceholder, searchAccessibilityLabel, requestClose, requestOutsideClose, onSearchChange, onFloatingLayout } = useDropdownContext();
+	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];
@@ -881,10 +909,8 @@ function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 					webPointerEventsBoxNone$1
 				],
 				children: /* @__PURE__ */ jsx(Pressable, {
-					accessibilityRole: "button",
-					accessibilityLabel: "Close menu",
-					style: StyleSheet.absoluteFill,
-					onPress: requestOutsideClose
+					...getOutsidePressProps({ accessibilityLabel: "Close menu" }),
+					style: StyleSheet.absoluteFill
 				})
 			}), /* @__PURE__ */ jsxs(Animated.View, {
 				accessibilityRole: "menu",
@@ -932,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;
 }
@@ -960,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;
@@ -1340,6 +1367,11 @@ function DropdownGroup({ label }) {
 }
 DropdownGroup.displayName = "DropdownGroup";
 //#endregion
+//#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({
 	item: {
@@ -1364,7 +1396,7 @@ const createStyles$18 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Item/DropdownItem.tsx
-function DropdownItem({ label, value, color = "default", icon, disabled = false, textWrap = "truncate", 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);
@@ -1389,6 +1421,24 @@ function DropdownItem({ label, value, color = "default", icon, disabled = false,
 	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",
@@ -1398,11 +1448,7 @@ function DropdownItem({ label, value, color = "default", icon, disabled = false,
 			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, {
@@ -1736,13 +1782,15 @@ 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,
 			color: item.props.color,
 			icon: item.props.icon,
 			disabled: item.props.disabled,
 			textWrap: item.props.textWrap,
-			onSelect: () => handleSelect(item)
+			onSelect: () => handleSelect(item),
+			children: item.props.children
 		});
 	}, [handleSelect, styles.emptyText]);
 	const resolvedSearchPlaceholder = parsed.searchProps?.placeholder ?? searchPlaceholder ?? (command || contentCommand ? "Type a command..." : "Search actions...");
@@ -1764,7 +1812,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 			itemStyle,
 			textStyle,
 			requestClose: dismiss.requestClose,
-			requestOutsideClose: dismiss.requestOutsideClose,
+			getOutsidePressProps: dismiss.getOutsidePressProps,
 			toggle: handleTriggerPress,
 			onSearchChange: handleSearchChange,
 			onFloatingLayout
@@ -1773,8 +1821,8 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 			contentPresentation,
 			disabled,
 			dismiss.zIndex,
+			dismiss.getOutsidePressProps,
 			dismiss.requestClose,
-			dismiss.requestOutsideClose,
 			handleSearchChange,
 			handleTriggerPress,
 			isOpen,
@@ -1885,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,
@@ -1915,11 +1973,11 @@ const useModalContext = () => {
 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);
@@ -2012,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: {
@@ -2042,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, zIndex, 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,
@@ -2059,17 +2144,15 @@ const ModalOverlay = ({ children, overlayStyle }) => {
 				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,
@@ -2090,33 +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 triggerRef = useRef(null);
-	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 { restoreFocusAfterClose } = useOverlayFocusRestore({
-		active: modal.open,
-		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,
-		closeOnOutsidePress: modal.closeOnOutsidePress,
-		requestClose: modal.requestClose
-	});
 	const animationDuration = resolveDuration(duration);
 	const shouldAnimate = animation !== "none" && !reduceMotion;
 	useEffect(() => {
@@ -2128,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);
@@ -2160,17 +2220,57 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, animation = "scale
 		animationDuration.close,
 		animationDuration.open,
 		easing,
-		modal.open,
+		open,
 		shouldAnimate
 	]);
+	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,
@@ -2236,6 +2336,8 @@ const Modal = Object.assign(ModalRoot, {
 	Overlay: ModalOverlay,
 	Content: ModalContent,
 	Header: ModalHeader,
+	Title: ModalTitle,
+	Description: ModalDescription,
 	Body: ModalBody,
 	Footer: ModalFooter,
 	Close: ModalClose
@@ -2416,7 +2518,7 @@ function PopoverContent({ children, style, ...contentProps }) {
 	const { theme } = useTheme();
 	const layerRef = useRef(null);
 	const themedStyles = useMemo(() => createPopoverContentStyles(theme), [theme]);
-	const { open, zIndex, position, onFloatingLayout, updatePosition, requestClose, requestOutsideClose, closeOnOutsidePress } = usePopoverContext("Popover.Content");
+	const { open, zIndex, position, onFloatingLayout, updatePosition, requestClose, getOutsidePressProps } = usePopoverContext("Popover.Content");
 	useEffect(() => {
 		if (!open) return;
 		requestAnimationFrame(() => {
@@ -2432,9 +2534,7 @@ function PopoverContent({ children, style, ...contentProps }) {
 			style: [styles.root, { zIndex }],
 			children: [/* @__PURE__ */ jsx(Pressable, {
 				testID: "popover-backdrop",
-				accessibilityLabel: closeOnOutsidePress ? "Close popover" : void 0,
-				accessibilityRole: closeOnOutsidePress ? "button" : void 0,
-				onPress: closeOnOutsidePress ? requestOutsideClose : void 0,
+				...getOutsidePressProps({ accessibilityLabel: "Close popover" }),
 				style: styles.backdrop
 			}), /* @__PURE__ */ jsx(View, {
 				...contentProps,
@@ -2517,7 +2617,6 @@ function PopoverRoot({ children, open: openProp, defaultOpen = false, onOpenChan
 	return /* @__PURE__ */ jsx(PopoverProvider, {
 		value: {
 			open,
-			closeOnOutsidePress,
 			triggerRef,
 			anchorRef,
 			side,
@@ -2527,7 +2626,7 @@ function PopoverRoot({ children, open: openProp, defaultOpen = false, onOpenChan
 			position,
 			arrowPosition,
 			requestClose: dismiss.requestClose,
-			requestOutsideClose: dismiss.requestOutsideClose,
+			getOutsidePressProps: dismiss.getOutsidePressProps,
 			onFloatingLayout,
 			updatePosition,
 			setOpen
@@ -3231,17 +3330,14 @@ const createContentStyles = (theme) => StyleSheet.create({
 	}
 });
 //#endregion
-//#region src/components/Select/internal/types.ts
-const selectSlotName = Symbol("VelliraNativeSelectSlot");
-//#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);
@@ -3330,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,
@@ -3537,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",
@@ -3560,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,
@@ -3693,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";
@@ -3715,7 +3844,7 @@ const SelectHandle = () => {
 SelectHandle.displayName = "Select.Handle";
 //#endregion
 //#region src/components/Select/Presentation/SelectModal.tsx
-const SelectModal = ({ visible, onClose, dismissOnBackdropPress, zIndex, contentStyle, children }) => {
+const SelectModal = ({ visible, onClose, outsidePressProps, zIndex, contentStyle, children }) => {
 	const styles = useThemeStyles(createPresentationStyles);
 	return /* @__PURE__ */ jsx(Modal$1, {
 		transparent: true,
@@ -3729,10 +3858,7 @@ const SelectModal = ({ visible, onClose, dismissOnBackdropPress, zIndex, content
 				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,
@@ -3747,7 +3873,7 @@ const SelectModal = ({ visible, onClose, dismissOnBackdropPress, zIndex, content
 SelectModal.displayName = "Select.Modal";
 //#endregion
 //#region src/components/Select/Presentation/SelectPopover.tsx
-const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, zIndex, 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,
@@ -3757,10 +3883,7 @@ const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, zIndex, posit
 		children: /* @__PURE__ */ jsxs(View, {
 			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,
@@ -3782,7 +3905,7 @@ const SelectPopover = ({ visible, onClose, dismissOnBackdropPress, zIndex, posit
 SelectPopover.displayName = "Select.Popover";
 //#endregion
 //#region src/components/Select/Presentation/SelectSheet.tsx
-const SelectSheet = ({ visible, onClose, dismissOnBackdropPress, zIndex, contentStyle, children }) => {
+const SelectSheet = ({ visible, onClose, outsidePressProps, zIndex, contentStyle, children }) => {
 	const styles = useThemeStyles(createPresentationStyles);
 	return /* @__PURE__ */ jsx(Modal$1, {
 		transparent: true,
@@ -3796,10 +3919,7 @@ const SelectSheet = ({ visible, onClose, dismissOnBackdropPress, zIndex, content
 				Platform.OS === "web" && { zIndex }
 			],
 			testID: "select-content-root",
-			children: [/* @__PURE__ */ jsx(SelectBackdrop, {
-				onClose,
-				dismissOnBackdropPress
-			}), /* @__PURE__ */ jsxs(View, {
+			children: [/* @__PURE__ */ jsx(SelectBackdrop, { outsidePressProps }), /* @__PURE__ */ jsxs(View, {
 				style: [
 					styles.content,
 					styles.sheet,
@@ -3924,13 +4044,13 @@ const SelectContentSurface = () => {
 	const wasOpenRef = useRef(false);
 	const [openCycle, setOpenCycle] = useState(0);
 	const context = useSelectContext();
-	const { isOpen, resolvedPresentation, zIndex, 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));
@@ -3952,6 +4072,9 @@ const SelectContentSurface = () => {
 			option: item.option,
 			isSelected,
 			isDisabled: Boolean(item.option.disabled || maxReached),
+			itemIndex: index,
+			selectedValues,
+			multiple: context.multiple,
 			optionStyle,
 			onSelect: selectOption
 		});
@@ -4014,7 +4137,7 @@ const SelectContentSurface = () => {
 	if (resolvedPresentation === "sheet") return /* @__PURE__ */ jsx(SelectSheet, {
 		visible: isOpen,
 		onClose: closeContent,
-		dismissOnBackdropPress,
+		outsidePressProps: getOutsidePressProps({ accessibilityLabel: "Dismiss select" }),
 		zIndex,
 		contentStyle,
 		children: body
@@ -4022,7 +4145,7 @@ const SelectContentSurface = () => {
 	if (resolvedPresentation === "popover") return /* @__PURE__ */ jsx(SelectPopover, {
 		visible: isOpen,
 		onClose: closeContent,
-		dismissOnBackdropPress,
+		outsidePressProps: getOutsidePressProps({ accessibilityLabel: "Dismiss select" }),
 		position,
 		zIndex,
 		onFloatingLayout,
@@ -4034,7 +4157,7 @@ const SelectContentSurface = () => {
 	return /* @__PURE__ */ jsx(SelectModal, {
 		visible: isOpen,
 		onClose: closeContent,
-		dismissOnBackdropPress,
+		outsidePressProps: getOutsidePressProps({ accessibilityLabel: "Dismiss select" }),
 		zIndex,
 		contentStyle,
 		children: body
@@ -4057,95 +4180,6 @@ const SelectItemIcon = createSelectSlot("itemIcon", "Select.ItemIcon");
 //#region src/components/Select/Label/SelectLabel.tsx
 const SelectLabel = createSelectSlot("label", "Select.Label");
 //#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/Trigger/SelectTrigger.styles.ts
 const createTriggerStyles = (theme) => StyleSheet.create({
 	container: {
@@ -4401,174 +4435,174 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 }
 SelectTrigger.displayName = "SelectTrigger";
 //#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;
-	const field = useFormFieldContext();
-	const overlayId = useId();
-	const hasOwnField = Boolean(label || description || error);
-	const [triggerWidth, setTriggerWidth] = useState();
-	const triggerRef = useRef(null);
-	const { position, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
-	const searchInputRef = useRef(null);
-	const selectedFocusValueRef = useRef(void 0);
-	const resolvedPresentation = useOverlayPresentation(presentation);
-	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);
+//#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;
 			}
-			props.onValueChange?.(nextValue === "" ? null : nextValue);
-		},
-		options,
-		multiple: props.multiple,
-		maxSelected,
-		closeOnSelect,
-		disabled: isDisabled,
-		open,
-		defaultOpen,
-		onOpenChange
-	});
-	const { restoreFocusAfterClose } = useOverlayFocusRestore({
-		active: isOpen,
-		triggerRef
-	});
-	const closeAndFocusTrigger = useCallback(() => {
-		closeDropdown();
-		restoreFocusAfterClose();
-	}, [closeDropdown, restoreFocusAfterClose]);
-	const selectedValues = useMemo(() => {
-		if (props.multiple) return Array.isArray(selectedValue) ? selectedValue : [];
-		return typeof selectedValue === "string" && selectedValue ? [selectedValue] : [];
-	}, [props.multiple, 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 { query, setQuery, shouldSearch, filteredRows } = useSelectSearch({
-		rows,
-		isOpen,
-		searchable: searchableProp,
-		searchableFromChildren,
-		onSearch,
-		filterOptions,
-		filter
-	});
-	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 (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";
 		});
-		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;
-	}, [
-		placeholder,
-		props.multiple,
-		renderValue,
-		selectedOption,
-		selectedOptions
-	]);
-	const { resolvedLabel, resolvedHint, announce } = resolveSelectAccessibility({
-		accessibilityLabel,
-		accessibilityHint,
-		label: !hasOwnField ? void 0 : label,
-		description: !hasOwnField ? field?.description : description,
-		error: !hasOwnField ? field?.error : error,
-		invalid: isInvalid,
-		placeholder,
-		selectedLabel: selectedOption?.label,
-		hasFieldContext: !hasOwnField && Boolean(field),
-		fieldDescribedBy: field?.ariaDescribedBy
-	});
-	const hasValue = selectedValues.length > 0;
-	const dismiss = useOverlayDismiss({
-		id: overlayId,
-		active: isOpen,
-		closeOnOutsidePress: dismissOnBackdropPress,
-		requestClose: closeAndFocusTrigger
-	});
-	const clearValue = () => {
-		selectedFocusValueRef.current = void 0;
-		selectValue("");
-		announce("Selection cleared");
-	};
-	const selectOption = useCallback((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`);
 	}, [
-		announce,
-		maxSelected,
-		props.multiple,
-		selectValue,
-		selectedValues
+		filter,
+		query,
+		rows,
+		shouldFilter
 	]);
-	const selectGroup = useCallback((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");
+	useEffect(() => {
+		if (!isOpen) {
+			setQuery("");
 			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();
+		if (shouldSearch) onSearch?.(query);
 	}, [
-		announce,
-		closeAndFocusTrigger,
-		closeOnSelect,
-		maxSelected,
-		optionsByValue,
-		props.multiple,
-		selectedValues,
-		setSelectedValue
+		isOpen,
+		onSearch,
+		query,
+		shouldSearch
 	]);
-	const resolvedSearchPlaceholder = searchPlaceholder ?? searchPlaceholderFromChildren ?? "Search...";
-	const resolvedEmpty = empty ?? emptyFromChildren ?? "Nothing found";
-	const resolvedLoadingContent = loadingFromChildren ?? loadingText;
-	const contextValue = useMemo(() => ({
+	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: shouldSearch,
-		multiple: Boolean(props.multiple),
+		searchable,
+		multiple,
 		maxSelected,
 		virtual,
 		resolvedLabel,
 		resolvedPresentation,
-		zIndex: dismiss.zIndex,
+		zIndex,
 		position,
 		onFloatingLayout,
-		dismissOnBackdropPress,
 		matchTriggerWidth,
 		triggerWidth,
 		selectedValues,
@@ -4578,11 +4612,12 @@ function SelectRoot(props) {
 		selectedRowIndex,
 		itemHeight,
 		query,
-		searchPlaceholder: resolvedSearchPlaceholder,
+		searchPlaceholder,
 		searchInputRef,
-		empty: resolvedEmpty,
-		loadingContent: resolvedLoadingContent,
-		closeContent: dismiss.requestClose,
+		empty,
+		loadingContent,
+		closeContent,
+		getOutsidePressProps,
 		selectOption,
 		selectGroup,
 		setQuery,
@@ -4595,16 +4630,15 @@ function SelectRoot(props) {
 		variant,
 		isOpen,
 		loading,
-		shouldSearch,
-		props.multiple,
+		searchable,
+		multiple,
 		maxSelected,
 		virtual,
 		resolvedLabel,
 		resolvedPresentation,
-		dismiss.zIndex,
+		zIndex,
 		position,
 		onFloatingLayout,
-		dismissOnBackdropPress,
 		matchTriggerWidth,
 		triggerWidth,
 		selectedValues,
@@ -4614,11 +4648,12 @@ function SelectRoot(props) {
 		selectedRowIndex,
 		itemHeight,
 		query,
-		resolvedSearchPlaceholder,
+		searchPlaceholder,
 		searchInputRef,
-		resolvedEmpty,
-		resolvedLoadingContent,
-		dismiss.requestClose,
+		empty,
+		loadingContent,
+		closeContent,
+		getOutsidePressProps,
 		selectOption,
 		selectGroup,
 		setQuery,
@@ -4627,11 +4662,229 @@ function SelectRoot(props) {
 		optionStyle,
 		searchStyle
 	]);
+}
+//#endregion
+//#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/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 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 { setSelectedValue, selectedValues, selectedOption, selectedOptions, optionsByValue, isOpen, openDropdown, closeDropdown, selectValue } = useSelectRootSelection({
+		props,
+		options,
+		isDisabled
+	});
+	const { restoreFocusAfterClose } = useOverlayFocusRestore({
+		active: isOpen,
+		triggerRef
+	});
+	const closeAndFocusTrigger = useCallback(() => {
+		closeDropdown();
+		restoreFocusAfterClose();
+	}, [closeDropdown, restoreFocusAfterClose]);
+	const { query, setQuery, shouldSearch, filteredRows } = useSelectSearch({
+		rows,
+		isOpen,
+		searchable: searchableProp,
+		searchableFromChildren,
+		onSearch,
+		filterOptions,
+		filter
+	});
+	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 = useSelectRootDisplayValue({
+		multiple: Boolean(props.multiple),
+		placeholder,
+		renderValue,
+		selectedOption,
+		selectedOptions,
+		selectedValues
+	});
+	const { resolvedLabel, resolvedHint, announce } = resolveSelectAccessibility({
+		accessibilityLabel,
+		accessibilityHint,
+		label: !hasOwnField ? void 0 : label,
+		description: !hasOwnField ? field?.description : description,
+		error: !hasOwnField ? field?.error : error,
+		invalid: isInvalid,
+		placeholder,
+		selectedLabel: selectedOption?.label,
+		hasFieldContext: !hasOwnField && Boolean(field),
+		fieldDescribedBy: field?.ariaDescribedBy
+	});
+	const hasValue = selectedValues.length > 0;
+	const dismiss = useOverlayDismiss({
+		id: overlayId,
+		active: isOpen,
+		closeOnOutsidePress: dismissOnBackdropPress,
+		requestClose: closeAndFocusTrigger
+	});
+	const { clearValue, selectOption, selectGroup } = useSelectRootActions({
+		multiple: Boolean(props.multiple),
+		maxSelected,
+		closeOnSelect,
+		selectedValues,
+		optionsByValue,
+		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,
+		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,
@@ -4639,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, {})]
@@ -4664,14 +4917,14 @@ 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
 	});
 }
@@ -5570,8 +5823,8 @@ 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
 		})
 	});
@@ -5669,15 +5922,15 @@ const TooltipRoot = ({ children, open: openProp, defaultOpen = false, onOpenChan
 			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,
@@ -5724,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({
@@ -5747,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
@@ -5796,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
@@ -5901,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