@vellira-ui/react-native 2.41.0 → 2.43.0

package/dist/index.js

@@ -1,8 +1,133 @@
 import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
-import { AccessibilityInfo, ActivityIndicator, Animated, Dimensions, FlatList, Modal as Modal$1, Pressable, ScrollView, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
+import { AccessibilityInfo, ActivityIndicator, Animated, Dimensions, Easing, FlatList, Modal as Modal$1, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
 import { darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/managers/FloatingManager/useNativeFloatingPosition.ts
+const safePadding = 12;
+function useNativeFloatingPosition(placement = "top", offset = 8) {
+	const [position, setPosition] = useState({
+		top: 0,
+		left: 0
+	});
+	const floatingSizeRef = useRef({
+		width: 0,
+		height: 0
+	});
+	const lastTriggerRef = useRef(null);
+	const clamp = useCallback((value, min, max) => {
+		return Math.min(Math.max(value, min), Math.max(min, max));
+	}, []);
+	const calculatePosition = useCallback((triggerRect, size) => {
+		const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
+		const [side, align = "center"] = placement.split("-");
+		const horizontalTop = side === "bottom" ? triggerRect.y + triggerRect.height + offset : triggerRect.y - size.height - offset;
+		const verticalTop = align === "start" ? triggerRect.y : align === "end" ? triggerRect.y + triggerRect.height - size.height : triggerRect.y + triggerRect.height / 2 - size.height / 2;
+		const horizontalLeft = align === "start" ? triggerRect.x : align === "end" ? triggerRect.x + triggerRect.width - size.width : triggerRect.x + triggerRect.width / 2 - size.width / 2;
+		const verticalLeft = side === "right" ? triggerRect.x + triggerRect.width + offset : triggerRect.x - size.width - offset;
+		const rawPosition = side === "left" || side === "right" ? {
+			top: verticalTop,
+			left: verticalLeft
+		} : {
+			top: horizontalTop,
+			left: horizontalLeft
+		};
+		return {
+			top: clamp(rawPosition.top, safePadding, screenHeight - size.height - safePadding),
+			left: clamp(rawPosition.left, safePadding, screenWidth - size.width - safePadding)
+		};
+	}, [
+		placement,
+		offset,
+		clamp
+	]);
+	const updatePosition = useCallback((triggerRef, measuredSize = floatingSizeRef.current) => {
+		lastTriggerRef.current = triggerRef;
+		const node = triggerRef.current;
+		if (!node || typeof node.measureInWindow !== "function") {
+			setPosition({
+				top: 0,
+				left: 0
+			});
+			return;
+		}
+		node.measureInWindow((x, y, width, height) => {
+			setPosition(calculatePosition({
+				x,
+				y,
+				width,
+				height
+			}, measuredSize));
+		});
+	}, [calculatePosition]);
+	return {
+		position,
+		updatePosition,
+		onFloatingLayout: useCallback((event) => {
+			const { width, height } = event.nativeEvent.layout;
+			const nextSize = {
+				width,
+				height
+			};
+			floatingSizeRef.current = nextSize;
+			if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, nextSize);
+		}, [updatePosition])
+	};
+}
+//#endregion
+//#region src/managers/OverlayStack/NativeOverlayStack.ts
+let stack = [];
+const nativeOverlayStackStore = {
+	add(id) {
+		stack = stack.filter((item) => item !== id);
+		stack.push(id);
+	},
+	remove(id) {
+		stack = stack.filter((item) => item !== id);
+	},
+	isTop(id) {
+		return stack[stack.length - 1] === id;
+	}
+};
+//#endregion
+//#region src/managers/OverlayStack/useNativeOverlayStack.ts
+const useNativeOverlayStack = ({ id, visible }) => {
+	useEffect(() => {
+		if (!visible) return;
+		nativeOverlayStackStore.add(id);
+		return () => {
+			nativeOverlayStackStore.remove(id);
+		};
+	}, [id, visible]);
+	return { isTopOverlay: useCallback(() => nativeOverlayStackStore.isTop(id), [id]) };
+};
+//#endregion
+//#region src/hooks/behavior/overlay/useOverlayStack.ts
+const useOverlayStack = ({ active, id }) => useNativeOverlayStack({
+	id,
+	visible: active
+});
+//#endregion
+//#region src/hooks/behavior/overlay/useOverlayDismiss.ts
+const useOverlayDismiss = ({ active, closeOnOutsidePress = true, id, requestClose }) => {
+	const { isTopOverlay } = useOverlayStack({
+		active,
+		id
+	});
+	const requestTopClose = useCallback(() => {
+		if (!isTopOverlay()) return;
+		requestClose();
+	}, [isTopOverlay, requestClose]);
+	return {
+		isTopOverlay,
+		requestClose: requestTopClose,
+		requestOutsideClose: useCallback(() => {
+			if (!closeOnOutsidePress) return;
+			requestTopClose();
+		}, [closeOnOutsidePress, requestTopClose])
+	};
+};
+//#endregion
 //#region src/hooks/useControllableState.ts
 const useControllableState = ({ value, defaultValue, onChange }) => {
 	const [internalValue, setInternalValue] = useState(defaultValue);
@@ -461,14 +586,19 @@ const createStyles$21 = (theme) => StyleSheet.create({
 		borderTopLeftRadius: theme.tokens.radius.lg,
 		borderTopRightRadius: theme.tokens.radius.lg,
 		borderWidth: 1,
-		shadowColor: "#000000",
-		shadowOffset: {
-			width: 0,
-			height: -4
-		},
-		shadowOpacity: .24,
-		shadowRadius: 16,
-		elevation: 12
+		...Platform.select({
+			web: { boxShadow: "0 -4px 16px rgba(0, 0, 0, 0.24)" },
+			default: {
+				shadowColor: "#000000",
+				shadowOffset: {
+					width: 0,
+					height: -4
+				},
+				shadowOpacity: .24,
+				shadowRadius: 16,
+				elevation: 12
+			}
+		})
 	},
 	sheetMenu: {
 		width: "100%",
@@ -515,9 +645,12 @@ const createStyles$21 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Content/DropdownContent.tsx
-function DropdownContent({ isOpen, children, onClose, contentStyle, accessibilityLabel, presentation, searchable = false, searchValue = "", searchPlaceholder = "Search actions...", searchAccessibilityLabel, onSearchChange }) {
+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, searchable = false, searchValue = "", searchPlaceholder = "Search actions...", searchAccessibilityLabel, onSearchChange }) {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$21);
+	const colorPalette = theme.components.dropdown[color];
 	const isSheet = presentation === "sheet";
 	const animation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
 	const [reduceMotion, setReduceMotion] = useState(false);
@@ -541,7 +674,7 @@ function DropdownContent({ isOpen, children, onClose, contentStyle, accessibilit
 		Animated.timing(animation, {
 			toValue: 1,
 			duration: isSheet ? 220 : 160,
-			useNativeDriver: true
+			useNativeDriver: Platform.OS !== "web"
 		}).start();
 	}, [
 		animation,
@@ -575,8 +708,12 @@ function DropdownContent({ isOpen, children, onClose, contentStyle, accessibilit
 		children: /* @__PURE__ */ jsxs(View, {
 			style: [styles.modalRoot, styles[presentation]],
 			children: [/* @__PURE__ */ jsx(Animated.View, {
-				pointerEvents: "box-none",
-				style: [styles.backdrop, backdropAnimatedStyle],
+				...nativePointerEventsBoxNone$1,
+				style: [
+					styles.backdrop,
+					backdropAnimatedStyle,
+					webPointerEventsBoxNone$1
+				],
 				children: /* @__PURE__ */ jsx(Pressable, {
 					accessibilityRole: "button",
 					accessibilityLabel: "Close menu",
@@ -589,6 +726,7 @@ function DropdownContent({ isOpen, children, onClose, contentStyle, accessibilit
 				style: [
 					styles.menu,
 					styles[`${presentation}Menu`],
+					{ borderColor: colorPalette.content.border },
 					contentStyle,
 					menuAnimatedStyle
 				],
@@ -619,125 +757,6 @@ function DropdownContent({ isOpen, children, onClose, contentStyle, accessibilit
 }
 DropdownContent.displayName = "DropdownContent";
 //#endregion
-//#region src/managers/FloatingManager/useNativeFloatingPosition.ts
-const safePadding = 12;
-function useNativeFloatingPosition(placement = "top", offset = 8) {
-	const [position, setPosition] = useState({
-		top: 0,
-		left: 0
-	});
-	const floatingSizeRef = useRef({
-		width: 0,
-		height: 0
-	});
-	const lastTriggerRef = useRef(null);
-	const clamp = useCallback((value, min, max) => {
-		return Math.min(Math.max(value, min), Math.max(min, max));
-	}, []);
-	const calculatePosition = useCallback((triggerRect, size) => {
-		const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
-		const [side, align = "center"] = placement.split("-");
-		const horizontalTop = side === "bottom" ? triggerRect.y + triggerRect.height + offset : triggerRect.y - size.height - offset;
-		const verticalTop = align === "start" ? triggerRect.y : align === "end" ? triggerRect.y + triggerRect.height - size.height : triggerRect.y + triggerRect.height / 2 - size.height / 2;
-		const horizontalLeft = align === "start" ? triggerRect.x : align === "end" ? triggerRect.x + triggerRect.width - size.width : triggerRect.x + triggerRect.width / 2 - size.width / 2;
-		const verticalLeft = side === "right" ? triggerRect.x + triggerRect.width + offset : triggerRect.x - size.width - offset;
-		const rawPosition = side === "left" || side === "right" ? {
-			top: verticalTop,
-			left: verticalLeft
-		} : {
-			top: horizontalTop,
-			left: horizontalLeft
-		};
-		return {
-			top: clamp(rawPosition.top, safePadding, screenHeight - size.height - safePadding),
-			left: clamp(rawPosition.left, safePadding, screenWidth - size.width - safePadding)
-		};
-	}, [
-		placement,
-		offset,
-		clamp
-	]);
-	const updatePosition = useCallback((triggerRef, measuredSize = floatingSizeRef.current) => {
-		lastTriggerRef.current = triggerRef;
-		const node = triggerRef.current;
-		if (!node || typeof node.measureInWindow !== "function") {
-			setPosition({
-				top: 0,
-				left: 0
-			});
-			return;
-		}
-		node.measureInWindow((x, y, width, height) => {
-			setPosition(calculatePosition({
-				x,
-				y,
-				width,
-				height
-			}, measuredSize));
-		});
-	}, [calculatePosition]);
-	return {
-		position,
-		updatePosition,
-		onFloatingLayout: useCallback((event) => {
-			const { width, height } = event.nativeEvent.layout;
-			const nextSize = {
-				width,
-				height
-			};
-			floatingSizeRef.current = nextSize;
-			if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, nextSize);
-		}, [updatePosition])
-	};
-}
-//#endregion
-//#region src/managers/OverlayStack/NativeOverlayStack.ts
-let stack = [];
-const nativeOverlayStackStore = {
-	add(id) {
-		stack = stack.filter((item) => item !== id);
-		stack.push(id);
-	},
-	remove(id) {
-		stack = stack.filter((item) => item !== id);
-	},
-	isTop(id) {
-		return stack[stack.length - 1] === id;
-	}
-};
-//#endregion
-//#region src/managers/OverlayStack/useNativeOverlayStack.ts
-const useNativeOverlayStack = ({ id, visible }) => {
-	useEffect(() => {
-		if (!visible) return;
-		nativeOverlayStackStore.add(id);
-		return () => {
-			nativeOverlayStackStore.remove(id);
-		};
-	}, [id, visible]);
-	return { isTopOverlay: useCallback(() => nativeOverlayStackStore.isTop(id), [id]) };
-};
-//#endregion
-//#region src/managers/OverlayStack/useNativeDismiss.ts
-const useNativeDismiss = ({ id, visible, closeOnOutsidePress = true, onClose }) => {
-	const { isTopOverlay } = useNativeOverlayStack({
-		id,
-		visible
-	});
-	const requestClose = useCallback(() => {
-		if (!isTopOverlay()) return;
-		onClose();
-	}, [isTopOverlay, onClose]);
-	return {
-		isTopOverlay,
-		requestClose,
-		requestOutsideClose: useCallback(() => {
-			if (!closeOnOutsidePress) return;
-			requestClose();
-		}, [closeOnOutsidePress, requestClose])
-	};
-};
-//#endregion
 //#region src/components/Dropdown/Group/DropdownGroup.styles.ts
 const createStyles$20 = (theme) => StyleSheet.create({ groupLabel: {
 	paddingHorizontal: theme.tokens.spacing[4],
@@ -875,10 +894,6 @@ const createStyles$19 = (theme) => StyleSheet.create({
 		backgroundColor: theme.components.dropdown.item.default.bg,
 		borderRadius: theme.tokens.radius.sm
 	},
-	itemPressed: { backgroundColor: theme.components.dropdown.item.pressed.bg },
-	itemDisabled: { backgroundColor: theme.components.dropdown.item.disabled.bg },
-	itemDanger: { backgroundColor: theme.components.dropdown.item.danger.default.bg },
-	itemDangerPressed: { backgroundColor: theme.components.dropdown.item.danger.active.bg },
 	itemText: {
 		flex: 1,
 		minWidth: 0,
@@ -886,17 +901,14 @@ const createStyles$19 = (theme) => StyleSheet.create({
 		fontFamily: theme.tokens.typography.family.regular,
 		fontSize: theme.tokens.typography.size.md,
 		lineHeight: theme.tokens.typography.lineHeight.md
-	},
-	itemTextPressed: { color: theme.components.dropdown.item.pressed.fg },
-	itemTextDisabled: { color: theme.components.dropdown.item.disabled.fg },
-	itemTextDanger: { color: theme.components.dropdown.item.danger.default.fg },
-	itemTextDangerPressed: { color: theme.components.dropdown.item.danger.active.fg }
+	}
 });
 //#endregion
 //#region src/components/Dropdown/Item/DropdownItem.tsx
-function DropdownItem({ label, value, icon, danger = false, disabled = false, textWrap = "truncate", itemStyle, textStyle, onSelect }) {
+function DropdownItem({ label, value, color = "primary", icon, danger = false, disabled = false, textWrap = "truncate", itemStyle, textStyle, onSelect }) {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$19);
+	const colorPalette = theme.components.dropdown[color];
 	const renderColoredNode = (node, color) => {
 		if (!isValidElement(node)) return node;
 		return cloneElement(node, { color });
@@ -904,12 +916,12 @@ function DropdownItem({ label, value, icon, danger = false, disabled = false, te
 	const getContentColor = (pressed) => {
 		if (disabled) return theme.components.dropdown.item.disabled.fg;
 		if (danger) return pressed ? theme.components.dropdown.item.danger.active.fg : theme.components.dropdown.item.danger.default.fg;
-		return pressed ? theme.components.dropdown.item.pressed.fg : theme.components.dropdown.item.default.fg;
+		return pressed ? colorPalette.item.pressed.fg : theme.components.dropdown.item.default.fg;
 	};
 	const getBackgroundColor = (pressed) => {
 		if (disabled) return theme.components.dropdown.item.disabled.bg;
 		if (danger) return pressed ? theme.components.dropdown.item.danger.active.bg : theme.components.dropdown.item.danger.default.bg;
-		return pressed ? theme.components.dropdown.item.pressed.bg : theme.components.dropdown.item.default.bg;
+		return pressed ? colorPalette.item.pressed.bg : theme.components.dropdown.item.default.bg;
 	};
 	const accessibilityLabel = typeof label === "string" ? label : value;
 	const numberOfLines = textWrap === "wrap" ? void 0 : 1;
@@ -1009,10 +1021,6 @@ const createStyles$17 = (theme) => StyleSheet.create({
 		minHeight: 52,
 		padding: 0
 	},
-	triggerPressed: {
-		backgroundColor: theme.components.dropdown.trigger.hover.bg,
-		borderColor: theme.components.dropdown.trigger.hover.border
-	},
 	triggerDisabled: {
 		backgroundColor: theme.components.dropdown.trigger.disabled.bg,
 		borderColor: theme.components.dropdown.trigger.disabled.border,
@@ -1022,7 +1030,6 @@ const createStyles$17 = (theme) => StyleSheet.create({
 		color: theme.components.dropdown.trigger.default.fg,
 		fontFamily: theme.tokens.typography.family.regular
 	},
-	triggerTextPressed: { color: theme.components.dropdown.trigger.hover.fg },
 	triggerTextDisabled: { color: theme.components.dropdown.trigger.disabled.fg },
 	textSm: {
 		fontSize: theme.tokens.typography.size.sm,
@@ -1049,9 +1056,10 @@ const createStyles$17 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Trigger/DropdownTrigger.tsx
-function DropdownTrigger({ label, trigger, children, icon, arrowIcon, showArrow = true, size = "md", disabled = false, isOpen, triggerStyle, triggerRef, accessibilityLabel, accessibilityHint, onPress }) {
+function DropdownTrigger({ asChild = false, label, trigger, children, icon, arrowIcon, showArrow = true, color = "primary", size = "md", disabled = false, isOpen, triggerStyle, triggerRef, accessibilityLabel, accessibilityHint, onPress }) {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$17);
+	const colorPalette = theme.components.dropdown[color];
 	const textSizeStyle = {
 		sm: styles.textSm,
 		md: styles.textMd,
@@ -1070,7 +1078,7 @@ function DropdownTrigger({ label, trigger, children, icon, arrowIcon, showArrow
 		Animated.timing(rotateAnim, {
 			toValue: isOpen ? 1 : 0,
 			duration: 180,
-			useNativeDriver: true
+			useNativeDriver: Platform.OS !== "web"
 		}).start();
 	}, [isOpen, rotateAnim]);
 	const arrowRotate = rotateAnim.interpolate({
@@ -1091,7 +1099,7 @@ function DropdownTrigger({ label, trigger, children, icon, arrowIcon, showArrow
 		if (!isValidElement(node)) return node;
 		return cloneElement(node, { color });
 	};
-	const contentColor = disabled ? theme.components.dropdown.trigger.disabled.fg : isPressed ? theme.components.dropdown.trigger.hover.fg : theme.components.dropdown.trigger.default.fg;
+	const contentColor = disabled ? theme.components.dropdown.trigger.disabled.fg : isPressed ? colorPalette.trigger.hover.fg : colorPalette.trigger.default.fg;
 	const arrow = arrowIcon ? renderColoredNode(arrowIcon, contentColor) : /* @__PURE__ */ jsx(ChevronDown, {
 		width: 16,
 		height: 16,
@@ -1099,7 +1107,7 @@ function DropdownTrigger({ label, trigger, children, icon, arrowIcon, showArrow
 	});
 	const renderedIcon = icon ? renderColoredNode(icon, contentColor) : null;
 	const triggerContent = trigger ?? children;
-	if (isValidElement(triggerContent)) {
+	if (asChild && isValidElement(triggerContent)) {
 		const child = triggerContent;
 		const isChildDisabled = disabled || child.props.disabled;
 		return cloneElement(child, {
@@ -1133,9 +1141,16 @@ function DropdownTrigger({ label, trigger, children, icon, arrowIcon, showArrow
 		style: [
 			styles.trigger,
 			styles[size],
+			{
+				backgroundColor: colorPalette.trigger.default.bg,
+				borderColor: colorPalette.trigger.default.border
+			},
 			isIconOnly && styles.iconOnly,
 			isIconOnly && iconOnlySizeStyle,
-			isPressed && !disabled && styles.triggerPressed,
+			isPressed && !disabled && {
+				backgroundColor: colorPalette.trigger.hover.bg,
+				borderColor: colorPalette.trigger.hover.border
+			},
 			disabled && styles.triggerDisabled,
 			triggerStyle
 		],
@@ -1178,7 +1193,7 @@ const createStyles$16 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Dropdown.tsx
-function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", closeOnSelect = true, disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, noOptionsText, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
+function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, noOptionsText, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
 	const styles = useThemeStyles(createStyles$16);
 	const overlayId = useId();
 	const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
@@ -1220,6 +1235,11 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		AccessibilityInfo.announceForAccessibility(`${menuAccessibilityLabel} opened`);
 	}, [isOpen, menuAccessibilityLabel]);
 	const focusTrigger = useCallback(() => {
+		if (Platform.OS === "web") {
+			const triggerNode = triggerRef.current;
+			if (triggerNode && typeof triggerNode === "object" && "focus" in triggerNode && typeof triggerNode.focus === "function") triggerNode.focus();
+			return;
+		}
 		if (typeof findNodeHandle !== "function") return;
 		const handle = findNodeHandle(triggerRef.current);
 		if (handle && AccessibilityInfo.setAccessibilityFocus) AccessibilityInfo.setAccessibilityFocus(handle);
@@ -1228,10 +1248,10 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		closeDropdown();
 		requestAnimationFrame(focusTrigger);
 	}, [closeDropdown, focusTrigger]);
-	const dismiss = useNativeDismiss({
+	const dismiss = useOverlayDismiss({
 		id: overlayId,
-		visible: isOpen,
-		onClose: closeAndFocusTrigger
+		active: isOpen,
+		requestClose: closeAndFocusTrigger
 	});
 	const handleSelect = useCallback((entry) => {
 		if (entry.disabled || loading) return;
@@ -1265,6 +1285,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		return /* @__PURE__ */ jsx(DropdownItem, {
 			label: item.props.children,
 			value: item.props.value ?? item.id,
+			color,
 			icon: item.props.icon,
 			danger: item.props.danger,
 			disabled: item.props.disabled,
@@ -1274,6 +1295,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 			onSelect: () => handleSelect(item)
 		});
 	}, [
+		color,
 		handleSelect,
 		itemStyle,
 		styles.emptyText,
@@ -1293,11 +1315,13 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	return /* @__PURE__ */ jsxs(View, {
 		style: [styles.root, style],
 		children: [/* @__PURE__ */ jsx(DropdownTrigger, {
+			asChild: Boolean(parsed.trigger),
 			label,
 			trigger: trigger ?? parsed.trigger,
 			icon,
 			arrowIcon,
 			showArrow,
+			color,
 			disabled: disabled || parsed.triggerProps?.disabled,
 			isOpen,
 			size,
@@ -1311,6 +1335,7 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 		}), /* @__PURE__ */ jsx(DropdownContent, {
 			isOpen,
 			onClose: dismiss.requestClose,
+			color,
 			contentStyle: [contentStyle, contentStyleFromSlot],
 			accessibilityLabel: menuAccessibilityLabel,
 			presentation: presentationFromSlot ?? resolvedPresentation,
@@ -1483,14 +1508,19 @@ const createStyles$13 = (theme) => StyleSheet.create({ content: {
 	borderColor: theme.components.modal.content.border,
 	borderRadius: theme.components.modal.content.radius,
 	borderWidth: theme.components.modal.content.borderWidth,
-	shadowColor: theme.tokens.shadows.lg.color,
-	shadowOffset: {
-		width: theme.tokens.shadows.lg.x,
-		height: theme.tokens.shadows.lg.y
-	},
-	shadowOpacity: theme.tokens.shadows.lg.opacity,
-	shadowRadius: theme.tokens.shadows.lg.blur,
-	elevation: theme.tokens.shadows.lg.elevation
+	...Platform.select({
+		web: { boxShadow: `${theme.tokens.shadows.lg.x}px ${theme.tokens.shadows.lg.y}px ${theme.tokens.shadows.lg.blur}px ${theme.tokens.shadows.lg.color}` },
+		default: {
+			shadowColor: theme.tokens.shadows.lg.color,
+			shadowOffset: {
+				width: theme.tokens.shadows.lg.x,
+				height: theme.tokens.shadows.lg.y
+			},
+			shadowOpacity: theme.tokens.shadows.lg.opacity,
+			shadowRadius: theme.tokens.shadows.lg.blur,
+			elevation: theme.tokens.shadows.lg.elevation
+		}
+	})
 } });
 //#endregion
 //#region src/components/Modal/Content/ModalContent.tsx
@@ -1576,11 +1606,11 @@ const ModalRoot = ({ open, defaultOpen = false, onOpenChange, closeOnOutsidePres
 		onOpenChange,
 		closeOnOutsidePress
 	});
-	const dismiss = useNativeDismiss({
+	const dismiss = useOverlayDismiss({
 		id: modal.contentId,
-		visible: modal.open,
+		active: modal.open,
 		closeOnOutsidePress: modal.closeOnOutsidePress,
-		onClose: modal.requestClose
+		requestClose: modal.requestClose
 	});
 	return /* @__PURE__ */ jsx(ModalContext.Provider, {
 		value: {
@@ -1727,6 +1757,8 @@ const indicatorSizeBySize = {
 	md: 8,
 	lg: 10
 };
+const nativePointerEventsNone$5 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const webPointerEventsNone$5 = 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);
@@ -1806,9 +1838,10 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 			onPress: handlePress,
 			style: resolvePressableStyle,
 			children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(View, {
-				pointerEvents: "none",
+				...nativePointerEventsNone$5,
 				style: [
 					styles.control,
+					webPointerEventsNone$5,
 					{
 						width: controlSize,
 						height: controlSize,
@@ -1837,8 +1870,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					resolvedDisabled && styles.indicatorDisabled
 				] }))
 			}), (label || description) && /* @__PURE__ */ jsxs(View, {
-				pointerEvents: "none",
-				style: styles.content,
+				...nativePointerEventsNone$5,
+				style: [styles.content, webPointerEventsNone$5],
 				children: [label && (typeof label === "string" ? /* @__PURE__ */ jsx(Text, {
 					style: [
 						styles.label,
@@ -3241,6 +3274,10 @@ const createTriggerStyles = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Select/Trigger/SelectTrigger.tsx
 const SelectTriggerSlot = createSelectSlot("trigger", "Select.Trigger");
+const nativePointerEventsNone$4 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const nativePointerEventsBoxNone = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
+const webPointerEventsNone$4 = 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();
 	const styles = useThemeStyles(createTriggerStyles);
@@ -3248,6 +3285,16 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 	const triggerState = isOpen ? palette.focus : palette.default;
 	const resolvedIconSize = size === "lg" ? 18 : 16;
 	const showClearButton = clearable && hasValue && !disabled && !loading;
+	const openRingStyle = Platform.OS === "web" ? { boxShadow: `0 0 0 3px ${theme.components.select[color].ring}` } : {
+		shadowColor: theme.components.select[color].ring,
+		shadowOffset: {
+			width: 0,
+			height: 0
+		},
+		shadowOpacity: .16,
+		shadowRadius: 6,
+		elevation: 1
+	};
 	const triggerWithClearStyle = {
 		sm: styles.triggerWithClearSm,
 		md: styles.triggerWithClearMd,
@@ -3314,16 +3361,7 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 				},
 				styles[size],
 				showClearButton && triggerWithClearStyle[size],
-				isOpen && {
-					shadowColor: theme.components.select[color].ring,
-					shadowOffset: {
-						width: 0,
-						height: 0
-					},
-					shadowOpacity: .16,
-					shadowRadius: 6,
-					elevation: 1
-				},
+				isOpen && openRingStyle,
 				hasError && { borderColor: theme.components.select.trigger.error.border },
 				disabled && {
 					backgroundColor: theme.components.select.trigger.disabled.bg,
@@ -3333,8 +3371,8 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 			],
 			children: [
 				startIcon && /* @__PURE__ */ jsx(View, {
-					pointerEvents: "none",
-					style: styles.startIcon,
+					...nativePointerEventsNone$4,
+					style: [styles.startIcon, webPointerEventsNone$4],
 					accessibilityElementsHidden: true,
 					importantForAccessibility: "no",
 					children: renderIcon(startIcon)
@@ -3356,8 +3394,8 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 					size: "small",
 					color: iconColor
 				}) : showClearButton ? null : endIcon ? /* @__PURE__ */ jsx(View, {
-					pointerEvents: "none",
-					style: styles.endIcon,
+					...nativePointerEventsNone$4,
+					style: [styles.endIcon, webPointerEventsNone$4],
 					accessibilityElementsHidden: true,
 					importantForAccessibility: "no",
 					children: renderIcon(endIcon)
@@ -3373,8 +3411,12 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 				})
 			]
 		}), showClearButton && /* @__PURE__ */ jsx(View, {
-			pointerEvents: "box-none",
-			style: [styles.clearButtonContainer, clearButtonContainerStyle[size]],
+			...nativePointerEventsBoxNone,
+			style: [
+				styles.clearButtonContainer,
+				clearButtonContainerStyle[size],
+				webPointerEventsBoxNone
+			],
 			children: /* @__PURE__ */ jsx(Pressable, {
 				accessibilityRole: "button",
 				accessibilityLabel: "Clear selection",
@@ -3475,11 +3517,11 @@ function SelectRoot(props) {
 		fieldDescribedBy: field?.ariaDescribedBy
 	});
 	const hasValue = selectedValues.length > 0;
-	const dismiss = useNativeDismiss({
+	const dismiss = useOverlayDismiss({
 		id: overlayId,
-		visible: isOpen,
+		active: isOpen,
 		closeOnOutsidePress: dismissOnBackdropPress,
-		onClose: closeDropdown
+		requestClose: closeDropdown
 	});
 	const clearValue = () => {
 		selectedFocusValueRef.current = void 0;
@@ -3699,18 +3741,223 @@ const TabsContent = ({ value, children, forceMount = false, style }) => {
 TabsContent.displayName = "Tabs.Content";
 //#endregion
 //#region src/components/Tabs/List/TabsIndicator.tsx
-const TabsIndicator = ({ children, style }) => /* @__PURE__ */ jsx(View, {
-	accessibilityElementsHidden: true,
-	importantForAccessibility: "no-hide-descendants",
-	pointerEvents: "none",
-	style,
-	children
+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$3 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const webPointerEventsNone$3 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
+const animateValue = (value, toValue, duration) => Animated.timing(value, {
+	toValue,
+	duration,
+	easing,
+	useNativeDriver: false
 });
+const TabsIndicator = ({ children, style }) => {
+	const { theme } = useTheme();
+	const { value, orientation, variant, color, size, indicatorVersion, getTriggerLayout } = useTabs();
+	const translateX = useRef(new Animated.Value(0)).current;
+	const translateY = useRef(new Animated.Value(0)).current;
+	const width = useRef(new Animated.Value(0)).current;
+	const height = useRef(new Animated.Value(0)).current;
+	const previousLayoutRef = useRef(null);
+	const previousValueRef = useRef(void 0);
+	const previousOrientationRef = useRef(orientation);
+	const animationRef = useRef(null);
+	const [reduceMotion, setReduceMotion] = useState(false);
+	const [visible, setVisible] = useState(false);
+	const isVertical = orientation === "vertical";
+	const palette = theme.components.tabs[color];
+	useEffect(() => {
+		AccessibilityInfo.isReduceMotionEnabled?.().then(setReduceMotion);
+		const subscription = AccessibilityInfo.addEventListener?.("reduceMotionChanged", setReduceMotion);
+		return () => {
+			subscription?.remove();
+			animationRef.current?.stop();
+		};
+	}, []);
+	useEffect(() => {
+		if (!value) {
+			setVisible(false);
+			return;
+		}
+		const nextLayout = getTriggerLayout(value);
+		if (!nextLayout || nextLayout.width <= 0 || nextLayout.height <= 0) {
+			setVisible(false);
+			return;
+		}
+		setVisible(true);
+		animationRef.current?.stop();
+		const previousLayout = previousLayoutRef.current;
+		if (!(!reduceMotion && previousLayout && previousValueRef.current !== value && previousOrientationRef.current === orientation)) {
+			translateX.setValue(nextLayout.x);
+			translateY.setValue(nextLayout.y);
+			width.setValue(nextLayout.width);
+			height.setValue(nextLayout.height);
+			previousLayoutRef.current = nextLayout;
+			previousValueRef.current = value;
+			previousOrientationRef.current = orientation;
+			return;
+		}
+		if (variant === "line" && isVertical) {
+			const previousCenter = previousLayout.y + previousLayout.height / 2;
+			const nextCenter = nextLayout.y + nextLayout.height / 2;
+			const collapsedPreviousY = previousCenter - COLLAPSED_SIZE / 2;
+			const collapsedNextY = nextCenter - COLLAPSED_SIZE / 2;
+			translateY.setValue(previousLayout.y);
+			height.setValue(previousLayout.height);
+			animationRef.current = Animated.sequence([
+				Animated.parallel([animateValue(height, COLLAPSED_SIZE, LINE_ANIMATION_DURATION * .28), animateValue(translateY, collapsedPreviousY, LINE_ANIMATION_DURATION * .28)]),
+				animateValue(translateY, collapsedNextY, LINE_ANIMATION_DURATION * .36),
+				Animated.parallel([animateValue(height, nextLayout.height, LINE_ANIMATION_DURATION * .36), animateValue(translateY, nextLayout.y, LINE_ANIMATION_DURATION * .36)])
+			]);
+		} else if (variant === "line") {
+			const previousCenter = previousLayout.x + previousLayout.width / 2;
+			const nextCenter = nextLayout.x + nextLayout.width / 2;
+			const collapsedPreviousX = previousCenter - COLLAPSED_SIZE / 2;
+			const collapsedNextX = nextCenter - COLLAPSED_SIZE / 2;
+			translateX.setValue(previousLayout.x);
+			width.setValue(previousLayout.width);
+			animationRef.current = Animated.sequence([
+				Animated.parallel([animateValue(width, COLLAPSED_SIZE, LINE_ANIMATION_DURATION * .28), animateValue(translateX, collapsedPreviousX, LINE_ANIMATION_DURATION * .28)]),
+				animateValue(translateX, collapsedNextX, LINE_ANIMATION_DURATION * .36),
+				Animated.parallel([animateValue(width, nextLayout.width, LINE_ANIMATION_DURATION * .36), animateValue(translateX, nextLayout.x, LINE_ANIMATION_DURATION * .36)])
+			]);
+		} else {
+			translateX.setValue(previousLayout.x);
+			translateY.setValue(previousLayout.y);
+			width.setValue(previousLayout.width);
+			height.setValue(previousLayout.height);
+			animationRef.current = Animated.parallel([
+				animateValue(translateX, nextLayout.x, SURFACE_ANIMATION_DURATION),
+				animateValue(translateY, nextLayout.y, SURFACE_ANIMATION_DURATION),
+				animateValue(width, nextLayout.width, SURFACE_ANIMATION_DURATION),
+				animateValue(height, nextLayout.height, SURFACE_ANIMATION_DURATION)
+			]);
+		}
+		animationRef.current.start(() => {
+			translateX.setValue(nextLayout.x);
+			translateY.setValue(nextLayout.y);
+			width.setValue(nextLayout.width);
+			height.setValue(nextLayout.height);
+		});
+		previousLayoutRef.current = nextLayout;
+		previousValueRef.current = value;
+		previousOrientationRef.current = orientation;
+	}, [
+		getTriggerLayout,
+		height,
+		indicatorVersion,
+		isVertical,
+		orientation,
+		reduceMotion,
+		translateX,
+		translateY,
+		value,
+		variant,
+		width
+	]);
+	const indicatorStyle = useMemo(() => {
+		const baseStyle = {
+			position: "absolute",
+			opacity: visible ? 1 : 0,
+			zIndex: 0
+		};
+		if (variant === "line") return [
+			baseStyle,
+			{
+				backgroundColor: palette.indicator.bg,
+				borderRadius: theme.tokens.radius.full
+			},
+			isVertical ? {
+				top: 0,
+				left: 0,
+				width: 3,
+				height,
+				transform: [{ translateY }]
+			} : {
+				right: void 0,
+				bottom: 0,
+				left: 0,
+				width,
+				height: 3,
+				transform: [{ translateX }]
+			},
+			style
+		];
+		if (variant === "pills") return [
+			baseStyle,
+			{
+				top: 0,
+				left: 0,
+				width,
+				height,
+				backgroundColor: palette.pills.active.bg,
+				borderColor: palette.pills.active.border,
+				borderRadius: theme.tokens.radius[size === "lg" ? "lg" : size === "sm" ? "sm" : "md"],
+				borderWidth: 1,
+				transform: [{ translateX }, { translateY }]
+			},
+			style
+		];
+		return [
+			baseStyle,
+			{
+				top: -1,
+				left: -1,
+				width,
+				height,
+				backgroundColor: palette.segmented.active.bg,
+				borderColor: palette.segmented.active.border,
+				borderRadius: theme.tokens.radius.lg,
+				borderWidth: 1,
+				...Platform.select({
+					web: { boxShadow: "0 1px 2px rgba(24, 21, 33, 0.06)" },
+					default: {
+						shadowColor: "#181521",
+						shadowOffset: {
+							width: 0,
+							height: 1
+						},
+						shadowOpacity: .06,
+						shadowRadius: 2
+					}
+				}),
+				transform: [{ translateX }, { translateY }]
+			},
+			style
+		];
+	}, [
+		height,
+		isVertical,
+		palette.indicator.bg,
+		palette.pills.active.bg,
+		palette.pills.active.border,
+		palette.segmented.active.bg,
+		palette.segmented.active.border,
+		size,
+		style,
+		theme.tokens.radius,
+		translateX,
+		translateY,
+		variant,
+		visible,
+		width
+	]);
+	return /* @__PURE__ */ jsx(Animated.View, {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants",
+		...nativePointerEventsNone$3,
+		style: [indicatorStyle, webPointerEventsNone$3],
+		children
+	});
+};
 TabsIndicator.displayName = "Tabs.Indicator";
 //#endregion
 //#region src/components/Tabs/List/TabsList.styles.ts
 const createStyles$6 = (theme) => StyleSheet.create({
 	list: {
+		position: "relative",
 		flexDirection: "row",
 		alignSelf: "stretch",
 		width: "100%",
@@ -3718,6 +3965,7 @@ const createStyles$6 = (theme) => StyleSheet.create({
 		marginBottom: theme.tokens.spacing[6]
 	},
 	listSegmented: {
+		gap: theme.tokens.spacing[1],
 		padding: 2,
 		backgroundColor: theme.components.tabs.list.segmentedBg,
 		borderColor: theme.components.tabs.list.border,
@@ -3775,31 +4023,64 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		justifyContent: "center",
 		paddingHorizontal: theme.tokens.spacing[4],
 		paddingVertical: theme.tokens.spacing[2],
-		borderWidth: 1
+		borderWidth: 1,
+		zIndex: 1
+	},
+	tabIconOnly: {
+		width: 44,
+		minWidth: 44,
+		paddingHorizontal: 0
 	},
 	tabSm: {
 		minHeight: 36,
 		paddingHorizontal: theme.tokens.spacing[3],
 		paddingVertical: 6
 	},
+	tabIconOnlySm: {
+		width: 36,
+		minWidth: 36,
+		paddingHorizontal: 0
+	},
 	tabLg: {
 		minHeight: 52,
 		paddingHorizontal: theme.tokens.spacing[5],
 		paddingVertical: theme.tokens.spacing[3]
 	},
+	tabIconOnlyLg: {
+		width: 52,
+		minWidth: 52,
+		paddingHorizontal: 0
+	},
 	tabSegmented: {
+		flex: 1,
+		minWidth: 0,
 		minHeight: 32,
 		paddingVertical: 5,
 		borderRadius: theme.tokens.radius.lg
 	},
+	tabSegmentedIconOnly: {
+		width: 32,
+		minWidth: 32,
+		paddingHorizontal: 0
+	},
 	tabSegmentedSm: {
 		minHeight: 30,
 		paddingVertical: 4
 	},
+	tabSegmentedIconOnlySm: {
+		width: 30,
+		minWidth: 30,
+		paddingHorizontal: 0
+	},
 	tabSegmentedLg: {
 		minHeight: 40,
 		paddingVertical: 8
 	},
+	tabSegmentedIconOnlyLg: {
+		width: 40,
+		minWidth: 40,
+		paddingHorizontal: 0
+	},
 	tabVertical: {
 		position: "relative",
 		width: "100%",
@@ -3808,25 +4089,6 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		flexShrink: 0,
 		justifyContent: "flex-start"
 	},
-	horizontalIndicator: {
-		position: "absolute",
-		right: 0,
-		bottom: 0,
-		left: 0,
-		height: 3,
-		backgroundColor: "transparent"
-	},
-	horizontalIndicatorActive: { backgroundColor: "transparent" },
-	verticalIndicator: {
-		position: "absolute",
-		top: 0,
-		bottom: 0,
-		left: 0,
-		width: 3,
-		backgroundColor: "transparent"
-	},
-	verticalIndicatorActive: { backgroundColor: "transparent" },
-	verticalIndicatorPressed: { backgroundColor: "transparent" },
 	tabHovered: { backgroundColor: "transparent" },
 	tabPressed: { backgroundColor: "transparent" },
 	tabFocused: { borderColor: theme.semantic.focus.ring.color },
@@ -3860,6 +4122,11 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		paddingVertical: theme.tokens.spacing[1],
 		borderRadius: theme.tokens.radius.md
 	},
+	tabPillsIconOnly: {
+		width: 36,
+		minWidth: 36,
+		paddingHorizontal: 0
+	},
 	tabPillsActive: {
 		backgroundColor: "transparent",
 		borderRadius: theme.tokens.radius.md
@@ -3931,7 +4198,7 @@ TabsIcon.displayName = "Tabs.Icon";
 const TabsTrigger = ({ value, children, icon, badge, description, disabled, style, textStyle }) => {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$5);
-	const { value: selectedValue, variant, color, size, orientation, disabled: rootDisabled, setValue, registerTrigger } = useTabs();
+	const { value: selectedValue, variant, color, size, orientation, disabled: rootDisabled, setValue, registerTrigger, registerTriggerLayout } = useTabs();
 	const isDisabled = rootDisabled || disabled;
 	const isActive = selectedValue === value;
 	const isPills = variant === "pills";
@@ -3940,6 +4207,7 @@ const TabsTrigger = ({ value, children, icon, badge, description, disabled, styl
 	const isVertical = orientation === "vertical";
 	const isSm = size === "sm";
 	const isLg = size === "lg";
+	const isOnlyIcon = icon != null && children == null && badge == null;
 	const palette = theme.components.tabs[color];
 	const state = isDisabled ? theme.components.tabs.disabled : isPills ? isActive ? palette.pills.active : palette.pills.default : isActive ? palette.trigger.active : palette.trigger.default;
 	const pressedState = isDisabled ? state : isPills ? isActive ? palette.pills.active : palette.pills.hover : isActive ? palette.trigger.active : palette.trigger.hover;
@@ -3947,12 +4215,17 @@ const TabsTrigger = ({ value, children, icon, badge, description, disabled, styl
 		registerTrigger(value, Boolean(isDisabled), true);
 		return () => {
 			registerTrigger(value, Boolean(isDisabled), false);
+			registerTriggerLayout(value, void 0);
 		};
 	}, [
 		isDisabled,
 		registerTrigger,
+		registerTriggerLayout,
 		value
 	]);
+	const handleLayout = (event) => {
+		registerTriggerLayout(value, event.nativeEvent.layout);
+	};
 	const iconColor = isPills && isActive ? palette.pills.active.fg : isActive ? palette.trigger.active.fg : state.fg;
 	const renderedIcon = isValidElement(icon) ? cloneElement(icon, { color: iconColor }) : icon;
 	return /* @__PURE__ */ jsx(Pressable, {
@@ -3965,43 +4238,39 @@ const TabsTrigger = ({ value, children, icon, badge, description, disabled, styl
 		onPress: () => {
 			if (!isDisabled && !isActive) setValue(value);
 		},
+		onLayout: handleLayout,
 		style: ({ pressed }) => [
 			styles.tab,
 			isSm && styles.tabSm,
 			isLg && styles.tabLg,
+			isOnlyIcon && styles.tabIconOnly,
+			isOnlyIcon && isSm && styles.tabIconOnlySm,
+			isOnlyIcon && isLg && styles.tabIconOnlyLg,
 			isVertical && styles.tabVertical,
 			isPills && styles.tabPills,
+			isPills && isOnlyIcon && styles.tabPillsIconOnly,
 			isSegmented && styles.tabSegmented,
 			isSegmented && isSm && styles.tabSegmentedSm,
 			isSegmented && isLg && styles.tabSegmentedLg,
-			isPills && isActive && {
-				borderColor: palette.pills.active.border,
-				backgroundColor: palette.pills.active.bg
-			},
+			isSegmented && isOnlyIcon && styles.tabSegmentedIconOnly,
+			isSegmented && isOnlyIcon && isSm && styles.tabSegmentedIconOnlySm,
+			isSegmented && isOnlyIcon && isLg && styles.tabSegmentedIconOnlyLg,
 			{
-				borderColor: state.border,
+				borderColor: isLine ? "transparent" : state.border,
 				backgroundColor: pressed ? pressedState.bg : state.bg
 			},
 			isSegmented && isActive && {
 				borderColor: palette.segmented.active.border,
-				backgroundColor: palette.segmented.active.bg
+				backgroundColor: "transparent"
+			},
+			isPills && isActive && {
+				borderColor: "transparent",
+				backgroundColor: "transparent"
 			},
 			isDisabled && styles.tabDisabled,
 			style
 		],
-		children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-			isLine && !isVertical && /* @__PURE__ */ jsx(View, {
-				pointerEvents: "none",
-				style: [styles.horizontalIndicator, isActive && { backgroundColor: palette.indicator.bg }]
-			}),
-			isLine && isVertical && /* @__PURE__ */ jsx(View, {
-				pointerEvents: "none",
-				style: [
-					styles.verticalIndicator,
-					isActive && { backgroundColor: palette.indicator.bg },
-					pressed && !isActive && !isDisabled && { backgroundColor: palette.indicator.hoverBg }
-				]
-			}),
+		children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
 			icon != null && /* @__PURE__ */ jsx(View, {
 				style: styles.tabIcon,
 				children: renderedIcon
@@ -4066,7 +4335,9 @@ const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChang
 	const styles = useThemeStyles(createStyles$4);
 	const isControlled = controlledValue !== void 0;
 	const [version, setVersion] = useState(0);
+	const [indicatorVersion, setIndicatorVersion] = useState(0);
 	const triggersRef = useRef([]);
+	const triggerLayoutsRef = useRef(/* @__PURE__ */ new Map());
 	const { value, setValue } = useTabs$1({
 		value: controlledValue,
 		defaultValue,
@@ -4089,6 +4360,14 @@ const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChang
 		else triggersRef.current.push(nextTab);
 		setVersion((current) => current + 1);
 	}, []);
+	const registerTriggerLayout = useCallback((triggerValue, layout) => {
+		if (!layout) triggerLayoutsRef.current.delete(triggerValue);
+		else triggerLayoutsRef.current.set(triggerValue, layout);
+		setIndicatorVersion((current) => current + 1);
+	}, []);
+	const getTriggerLayout = useCallback((triggerValue) => {
+		return triggerLayoutsRef.current.get(triggerValue);
+	}, []);
 	useEffect(() => {
 		const enabledTabs = triggersRef.current.filter((tab) => !tab.disabled);
 		const selectedExists = triggersRef.current.some((tab) => tab.value === value);
@@ -4118,7 +4397,10 @@ const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChang
 			keepMounted,
 			lazyMount,
 			disabled,
-			registerTrigger
+			registerTrigger,
+			indicatorVersion,
+			getTriggerLayout,
+			registerTriggerLayout
 		}), [
 			activationMode,
 			color,
@@ -4126,6 +4408,9 @@ const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChang
 			keepMounted,
 			lazyMount,
 			orientation,
+			getTriggerLayout,
+			indicatorVersion,
+			registerTriggerLayout,
 			registerTrigger,
 			setValue,
 			size,
@@ -4166,6 +4451,8 @@ const useTooltipContext = () => {
 TooltipContext.displayName = "TooltipContext";
 //#endregion
 //#region src/components/Tooltip/Arrow/TooltipArrow.tsx
+const nativePointerEventsNone$2 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const webPointerEventsNone$2 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const TooltipArrow = ({ style }) => {
 	const { theme } = useTheme();
 	const tooltip = useTooltipContext();
@@ -4185,16 +4472,20 @@ const TooltipArrow = ({ style }) => {
 		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
-		}, style]
+		...nativePointerEventsNone$2,
+		style: [
+			{
+				position: "absolute",
+				width: size,
+				height: size,
+				backgroundColor: theme.components.tooltip.arrow.bg,
+				transform: [{ rotate: "45deg" }],
+				[staticSide]: -size / 2,
+				...crossAxisStyle
+			},
+			webPointerEventsNone$2,
+			style
+		]
 	});
 };
 TooltipArrow.displayName = "Tooltip.Arrow";
@@ -4213,14 +4504,19 @@ const createStyles$3 = (theme) => StyleSheet.create({
 		borderColor: theme.components.tooltip.content.border,
 		borderRadius: theme.components.tooltip.content.radius,
 		borderWidth: theme.components.tooltip.content.borderWidth,
-		shadowColor: theme.tokens.shadows.md.color,
-		shadowOffset: {
-			width: theme.tokens.shadows.md.x,
-			height: theme.tokens.shadows.md.y
-		},
-		shadowOpacity: theme.tokens.shadows.md.opacity,
-		shadowRadius: theme.tokens.shadows.md.blur,
-		elevation: theme.tokens.shadows.md.elevation
+		...Platform.select({
+			web: { boxShadow: `${theme.tokens.shadows.md.x}px ${theme.tokens.shadows.md.y}px ${theme.tokens.shadows.md.blur}px ${theme.tokens.shadows.md.color}` },
+			default: {
+				shadowColor: theme.tokens.shadows.md.color,
+				shadowOffset: {
+					width: theme.tokens.shadows.md.x,
+					height: theme.tokens.shadows.md.y
+				},
+				shadowOpacity: theme.tokens.shadows.md.opacity,
+				shadowRadius: theme.tokens.shadows.md.blur,
+				elevation: theme.tokens.shadows.md.elevation
+			}
+		})
 	},
 	text: {
 		flexShrink: 1,
@@ -4233,16 +4529,19 @@ const createStyles$3 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Tooltip/Content/TooltipContent.tsx
-const TooltipContent = ({ children, forceMount = false, style, textStyle }) => {
+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();
 	const visible = tooltip.open && !tooltip.disabled;
 	if (!forceMount && !visible) return null;
-	const bubble = /* @__PURE__ */ jsx(View, {
+	const bubble = /* @__PURE__ */ jsxs(View, {
 		nativeID: tooltip.contentId,
-		pointerEvents: "none",
+		...nativePointerEventsNone$1,
 		style: [
 			styles.bubble,
+			webPointerEventsNone$1,
 			{
 				top: tooltip.position.top,
 				left: tooltip.position.left
@@ -4251,10 +4550,10 @@ const TooltipContent = ({ children, forceMount = false, style, textStyle }) => {
 			style
 		],
 		onLayout: tooltip.onFloatingLayout,
-		children: Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx(Text, {
+		children: [Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx(Text, {
 			style: [styles.text, textStyle],
 			children: child
-		}) : child)
+		}) : child), withArrow && /* @__PURE__ */ jsx(TooltipArrow, {})]
 	});
 	if (!visible) return bubble;
 	return /* @__PURE__ */ jsx(Modal$1, {
@@ -4332,11 +4631,11 @@ const TooltipRoot = ({ children, open: openProp, defaultOpen = false, onOpenChan
 		setOpen,
 		updatePosition
 	]);
-	const dismiss = useNativeDismiss({
+	const dismiss = useOverlayDismiss({
 		id: contentId,
-		visible: open && !disabled,
+		active: open && !disabled,
 		closeOnOutsidePress,
-		onClose: hide
+		requestClose: hide
 	});
 	useEffect(() => {
 		if (disabled && open) hide();
@@ -4466,14 +4765,19 @@ const createStyles$2 = (theme) => StyleSheet.create({
 	disabled: { borderColor: theme.components.button.disabled.border },
 	focused: {
 		borderColor: theme.semantic.focus.ring.color,
-		shadowColor: theme.semantic.focus.ring.color,
-		shadowOffset: {
-			width: 0,
-			height: 0
-		},
-		shadowOpacity: .18,
-		shadowRadius: 8,
-		elevation: 2
+		...Platform.select({
+			web: { boxShadow: `0 0 0 4px ${theme.semantic.focus.ring.color}` },
+			default: {
+				shadowColor: theme.semantic.focus.ring.color,
+				shadowOffset: {
+					width: 0,
+					height: 0
+				},
+				shadowOpacity: .18,
+				shadowRadius: 8,
+				elevation: 2
+			}
+		})
 	},
 	pressed: { transform: [{ scale: .98 }] }
 });
@@ -4962,26 +5266,36 @@ const createStyles = (theme) => StyleSheet.create({
 		color: theme.components.input.focus.fg,
 		backgroundColor: theme.components.input.focus.bg,
 		borderColor: theme.components.input.focus.border,
-		shadowColor: resolveRingColor(theme.components.input.focus.ring),
-		shadowOffset: {
-			width: 0,
-			height: 0
-		},
-		shadowOpacity: .18,
-		shadowRadius: 6,
-		elevation: 1
+		...Platform.select({
+			web: { boxShadow: `0 0 0 3px ${resolveRingColor(theme.components.input.focus.ring)}` },
+			default: {
+				shadowColor: resolveRingColor(theme.components.input.focus.ring),
+				shadowOffset: {
+					width: 0,
+					height: 0
+				},
+				shadowOpacity: .18,
+				shadowRadius: 6,
+				elevation: 1
+			}
+		})
 	},
 	error: { borderColor: theme.components.input.error.border },
 	errorFocused: {
 		borderColor: theme.components.input.error.border,
-		shadowColor: resolveRingColor(theme.components.input.error.ring),
-		shadowOffset: {
-			width: 0,
-			height: 0
-		},
-		shadowOpacity: .2,
-		shadowRadius: 6,
-		elevation: 1
+		...Platform.select({
+			web: { boxShadow: `0 0 0 3px ${resolveRingColor(theme.components.input.error.ring)}` },
+			default: {
+				shadowColor: resolveRingColor(theme.components.input.error.ring),
+				shadowOffset: {
+					width: 0,
+					height: 0
+				},
+				shadowOpacity: .2,
+				shadowRadius: 6,
+				elevation: 1
+			}
+		})
 	},
 	readOnly: {
 		color: theme.components.input.readOnly.fg,
@@ -5044,6 +5358,8 @@ const applyMask = (value, mask) => {
 	if (!mask) return value;
 	return typeof mask === "function" ? mask(value) : applyPatternMask(value, mask);
 };
+const nativePointerEventsNone = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
+const webPointerEventsNone = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const Input = forwardRef(({ label, description, value, defaultValue, onValueChange, placeholder, size, error, invalid = false, disabled = false, required = false, loading = false, readOnly = false, type = "text", startIcon, endIcon, startIconTone = "default", endIconTone = "default", clearIcon, clearIconTone = "danger", iconSize, containerStyle, inputStyle, keyboardType, secureTextEntry, autoCapitalize, autoCorrect, onBlur, onFocus, accessibilityLabel, accessibilityHint, testID, autoFocus, maxLength, clearable, onClear, color = "primary", variant = "outline", revealPassword = false, showCounter: _showCounter, mask, format, parse, ...props }, ref) => {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles);
@@ -5064,6 +5380,16 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 	const isRequired = required || !hasOwnField && Boolean(field?.required);
 	const isReadOnly = readOnly || loading;
 	const placeholderTextColor = isDisabled ? getDisabledPlaceholderTextColor(theme) : readOnly ? theme.components.input.readOnly.placeholder : inputState.placeholder;
+	const focusedRingStyle = Platform.OS === "web" ? { boxShadow: `0 0 0 3px ${inputColorPalette.ring}` } : {
+		shadowColor: inputColorPalette.ring,
+		shadowOffset: {
+			width: 0,
+			height: 0
+		},
+		shadowOpacity: .18,
+		shadowRadius: 6,
+		elevation: 1
+	};
 	const isPassword = type === "password";
 	const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);
 	const resolvedIconSize = iconSize ?? 16;
@@ -5096,8 +5422,8 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 		style: styles.inputWrapper,
 		children: [
 			startIcon && /* @__PURE__ */ jsx(View, {
-				pointerEvents: "none",
-				style: styles.leftIcon,
+				...nativePointerEventsNone,
+				style: [styles.leftIcon, webPointerEventsNone],
 				accessibilityElementsHidden: true,
 				importantForAccessibility: "no",
 				children: cloneElement(startIcon, {
@@ -5143,14 +5469,7 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 						color: inputPalette.focus.fg,
 						backgroundColor: inputPalette.focus.bg,
 						borderColor: inputPalette.focus.border,
-						shadowColor: inputColorPalette.ring,
-						shadowOffset: {
-							width: 0,
-							height: 0
-						},
-						shadowOpacity: .18,
-						shadowRadius: 6,
-						elevation: 1
+						...focusedRingStyle
 					},
 					isInvalid && styles.error,
 					isFocused && isInvalid && !isDisabled && !isReadOnly && styles.errorFocused,
@@ -5182,8 +5501,8 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 					children: isPasswordRevealed ? "Hide" : "Show"
 				})
 			}) : showRightIcon && endIcon && /* @__PURE__ */ jsx(View, {
-				pointerEvents: "none",
-				style: styles.rightIcon,
+				...nativePointerEventsNone,
+				style: [styles.rightIcon, webPointerEventsNone],
 				accessibilityElementsHidden: true,
 				importantForAccessibility: "no",
 				children: cloneElement(endIcon, {