@vellira-ui/react-native 2.59.0 → 2.59.1

package/dist/index.js

@@ -1,8 +1,8 @@
-import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Children, cloneElement, createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
 import { AccessibilityInfo, ActivityIndicator, Animated, BackHandler, Dimensions, Easing, FlatList, Modal as Modal$1, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
 import { createConsoleOverlayDiagnostics, createOverlayManagerStore, createOverlayZIndexPolicy, createRetainedResourceRegistry, deferOverlayFocusRestore, getCompoundSlot, markCompoundSlot, resolveOverlayPresentation } from "@vellira-ui/core";
-import { darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
+import { controlSizes, darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/theme/fontWeight.ts
 const nativeFontWeights = /* @__PURE__ */ new Set([
@@ -385,19 +385,17 @@ const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOpen, onO
 			case "Tab":
 				onClose?.();
 				break;
-			default:
-				if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
-					event.preventDefault();
-					if (searchRef.current.timeoutId) clearTimeout(searchRef.current.timeoutId);
-					searchRef.current.value += event.key;
-					searchRef.current.timeoutId = setTimeout(() => {
-						searchRef.current.value = "";
-						searchRef.current.timeoutId = void 0;
-					}, 700);
-					const nextIndex = getTypeaheadIndex(searchRef.current.value);
-					if (nextIndex >= 0) setActiveIndex(nextIndex);
-				}
-				break;
+			default: if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+				event.preventDefault();
+				if (searchRef.current.timeoutId) clearTimeout(searchRef.current.timeoutId);
+				searchRef.current.value += event.key;
+				searchRef.current.timeoutId = setTimeout(() => {
+					searchRef.current.value = "";
+					searchRef.current.timeoutId = void 0;
+				}, 700);
+				const nextIndex = getTypeaheadIndex(searchRef.current.value);
+				if (nextIndex >= 0) setActiveIndex(nextIndex);
+			}
 		}
 	}, [
 		activeIndex,
@@ -1359,9 +1357,10 @@ const createStyles$19 = (theme) => StyleSheet.create({ groupLabel: {
 //#endregion
 //#region src/components/Dropdown/Group/DropdownGroup.tsx
 function DropdownGroup({ label }) {
+	const styles = useThemeStyles(createStyles$19);
 	return /* @__PURE__ */ jsx(Text, {
 		accessibilityRole: "header",
-		style: useThemeStyles(createStyles$19).groupLabel,
+		style: styles.groupLabel,
 		children: label
 	});
 }
@@ -1474,7 +1473,8 @@ const createStyles$17 = (theme) => StyleSheet.create({ separator: {
 //#endregion
 //#region src/components/Dropdown/Separator/DropdownSeparator.tsx
 function DropdownSeparator() {
-	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createStyles$17).separator });
+	const styles = useThemeStyles(createStyles$17);
+	return /* @__PURE__ */ jsx(View, { style: styles.separator });
 }
 DropdownSeparator.displayName = "DropdownSeparator";
 //#endregion
@@ -1795,48 +1795,49 @@ function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, show
 	}, [handleSelect, styles.emptyText]);
 	const resolvedSearchPlaceholder = parsed.searchProps?.placeholder ?? searchPlaceholder ?? (command || contentCommand ? "Type a command..." : "Search actions...");
 	const searchAccessibilityLabel = parsed.searchProps?.accessibilityLabel;
+	const contextValue = useMemo(() => ({
+		open: isOpen,
+		disabled,
+		loading,
+		color,
+		size,
+		presentation: contentPresentation,
+		position,
+		zIndex: dismiss.zIndex,
+		searchable: isSearchable,
+		searchValue: resolvedSearchValue,
+		searchPlaceholder: resolvedSearchPlaceholder,
+		searchAccessibilityLabel,
+		itemStyle,
+		textStyle,
+		requestClose: dismiss.requestClose,
+		getOutsidePressProps: dismiss.getOutsidePressProps,
+		toggle: handleTriggerPress,
+		onSearchChange: handleSearchChange,
+		onFloatingLayout
+	}), [
+		color,
+		contentPresentation,
+		disabled,
+		dismiss.zIndex,
+		dismiss.getOutsidePressProps,
+		dismiss.requestClose,
+		handleSearchChange,
+		handleTriggerPress,
+		isOpen,
+		isSearchable,
+		itemStyle,
+		loading,
+		onFloatingLayout,
+		position,
+		resolvedSearchPlaceholder,
+		resolvedSearchValue,
+		searchAccessibilityLabel,
+		size,
+		textStyle
+	]);
 	return /* @__PURE__ */ jsx(DropdownProvider, {
-		value: useMemo(() => ({
-			open: isOpen,
-			disabled,
-			loading,
-			color,
-			size,
-			presentation: contentPresentation,
-			position,
-			zIndex: dismiss.zIndex,
-			searchable: isSearchable,
-			searchValue: resolvedSearchValue,
-			searchPlaceholder: resolvedSearchPlaceholder,
-			searchAccessibilityLabel,
-			itemStyle,
-			textStyle,
-			requestClose: dismiss.requestClose,
-			getOutsidePressProps: dismiss.getOutsidePressProps,
-			toggle: handleTriggerPress,
-			onSearchChange: handleSearchChange,
-			onFloatingLayout
-		}), [
-			color,
-			contentPresentation,
-			disabled,
-			dismiss.zIndex,
-			dismiss.getOutsidePressProps,
-			dismiss.requestClose,
-			handleSearchChange,
-			handleTriggerPress,
-			isOpen,
-			isSearchable,
-			itemStyle,
-			loading,
-			onFloatingLayout,
-			position,
-			resolvedSearchPlaceholder,
-			resolvedSearchValue,
-			searchAccessibilityLabel,
-			size,
-			textStyle
-		]),
+		value: contextValue,
 		children: /* @__PURE__ */ jsxs(View, {
 			style: [styles.root, style],
 			children: [/* @__PURE__ */ jsx(DropdownTrigger, {
@@ -2063,8 +2064,9 @@ const createStyles$12 = (theme) => StyleSheet.create({ footer: {
 //#endregion
 //#region src/components/Modal/Footer/ModalFooter.tsx
 const ModalFooter = ({ children, style }) => {
+	const styles = useThemeStyles(createStyles$12);
 	return /* @__PURE__ */ jsx(View, {
-		style: [useThemeStyles(createStyles$12).footer, style],
+		style: [styles.footer, style],
 		children
 	});
 };
@@ -2072,8 +2074,9 @@ ModalFooter.displayName = "ModalFooter";
 //#endregion
 //#region src/components/Modal/Header/ModalDescription.tsx
 const ModalDescription = ({ children, style }) => {
+	const styles = useThemeStyles(createStyles$14);
 	return /* @__PURE__ */ jsx(Text, {
-		style: [useThemeStyles(createStyles$14).description, style],
+		style: [styles.description, style],
 		children
 	});
 };
@@ -2102,9 +2105,10 @@ ModalHeader.displayName = "ModalHeader";
 //#endregion
 //#region src/components/Modal/Header/ModalTitle.tsx
 const ModalTitle = ({ children, style }) => {
+	const styles = useThemeStyles(createStyles$14);
 	return /* @__PURE__ */ jsx(Text, {
 		accessibilityRole: "header",
-		style: [useThemeStyles(createStyles$14).title, style],
+		style: [styles.title, style],
 		children
 	});
 };
@@ -2402,12 +2406,12 @@ function createPopoverArrowStyles({ theme, side, arrowPosition }) {
 			position.left = -halfSize;
 			border.borderLeftWidth = 1;
 			border.borderBottomWidth = 1;
-			break;
 	}
 	return StyleSheet.create({ arrow: {
 		position: "absolute",
 		width: tokens.size,
 		height: tokens.size,
+		...Platform.OS === "web" ? { pointerEvents: "none" } : {},
 		backgroundColor: tokens.bg,
 		...position,
 		...border
@@ -2419,18 +2423,19 @@ function PopoverArrow({ style }) {
 	const { theme } = useTheme();
 	const { placement, arrowPosition } = usePopoverContext("Popover.Arrow");
 	const side = placement.split("-")[0];
+	const styles = useMemo(() => createPopoverArrowStyles({
+		theme,
+		side,
+		arrowPosition
+	}), [
+		theme,
+		side,
+		arrowPosition
+	]);
 	return /* @__PURE__ */ jsx(View, {
 		accessible: false,
-		pointerEvents: "none",
-		style: [useMemo(() => createPopoverArrowStyles({
-			theme,
-			side,
-			arrowPosition
-		}), [
-			theme,
-			side,
-			arrowPosition
-		]).arrow, style]
+		pointerEvents: Platform.OS === "web" ? void 0 : "none",
+		style: [styles.arrow, style]
 	});
 }
 PopoverArrow.displayName = "Popover.Arrow";
@@ -2455,7 +2460,10 @@ PopoverClose.displayName = "PopoverClose";
 //#endregion
 //#region src/primitives/Portal/Portal.tsx
 const PortalContext = createContext(null);
-const styles$1 = StyleSheet.create({ host: { flex: 1 } });
+const styles$1 = StyleSheet.create({ host: {
+	flex: 1,
+	...Platform.OS === "web" ? { pointerEvents: "box-none" } : {}
+} });
 const PortalProvider = ({ children, container = null }) => /* @__PURE__ */ jsx(PortalContext.Provider, {
 	value: container,
 	children
@@ -2474,7 +2482,7 @@ const Portal = ({ children, visible = true, animationType = "none", hardwareAcce
 		transparent: true,
 		visible: true,
 		children: /* @__PURE__ */ jsx(View, {
-			pointerEvents: "box-none",
+			pointerEvents: Platform.OS === "web" ? void 0 : "box-none",
 			style: styles$1.host,
 			children
 		})
@@ -2486,7 +2494,10 @@ PortalProvider.displayName = "PortalProvider";
 //#endregion
 //#region src/components/Popover/Content/PopoverContent.styles.ts
 const styles = StyleSheet.create({
-	root: { flex: 1 },
+	root: {
+		flex: 1,
+		...Platform.OS === "web" ? { pointerEvents: "box-none" } : {}
+	},
 	backdrop: StyleSheet.absoluteFill,
 	content: { position: "absolute" }
 });
@@ -2502,14 +2513,16 @@ function createPopoverContentStyles(theme) {
 		borderColor: tokens.border,
 		borderWidth: tokens.borderWidth,
 		borderRadius: tokens.radius,
-		shadowColor: shadow.color,
-		shadowOpacity: shadow.opacity,
-		shadowRadius: shadow.blur,
-		shadowOffset: {
-			width: shadow.x,
-			height: shadow.y
-		},
-		elevation: shadow.elevation
+		...Platform.OS === "web" ? { boxShadow: tokens.shadow.web } : {
+			shadowColor: shadow.color,
+			shadowOpacity: shadow.opacity,
+			shadowRadius: shadow.blur,
+			shadowOffset: {
+				width: shadow.x,
+				height: shadow.y
+			},
+			elevation: shadow.elevation
+		}
 	} });
 }
 //#endregion
@@ -2530,7 +2543,7 @@ function PopoverContent({ children, style, ...contentProps }) {
 		onRequestClose: requestClose,
 		children: /* @__PURE__ */ jsxs(View, {
 			ref: layerRef,
-			pointerEvents: "box-none",
+			pointerEvents: Platform.OS === "web" ? void 0 : "box-none",
 			style: [styles.root, { zIndex }],
 			children: [/* @__PURE__ */ jsx(Pressable, {
 				testID: "popover-backdrop",
@@ -2701,8 +2714,6 @@ function useRadioGroupContext() {
 const createStyles$10 = (theme) => StyleSheet.create({
 	root: { alignSelf: "flex-start" },
 	pressable: {
-		minWidth: 32,
-		minHeight: 32,
 		flexDirection: "row",
 		alignItems: "flex-start",
 		gap: theme.tokens.spacing[2]
@@ -2773,6 +2784,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 	const radioColor = theme.components.radio[resolvedColor];
 	const radioSize = theme.components.radio.size[resolvedSize];
 	const controlMarginTop = (radioSize.labelLineHeight - radioSize.controlSize) / 2;
+	const visualHeight = Math.max(radioSize.labelLineHeight, radioSize.controlSize);
+	const hitSlop = Math.max(0, (32 - visualHeight) / 2);
 	useEffect(() => {
 		if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) console.warn("Radio requires either a visible label or accessibilityLabel.");
 	}, [accessibilityLabel, label]);
@@ -2809,6 +2822,7 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 				disabled: resolvedDisabled
 			},
 			disabled: resolvedDisabled,
+			hitSlop: Platform.OS === "web" ? void 0 : hitSlop,
 			onPress: handlePress,
 			style: resolvePressableStyle,
 			children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(View, {
@@ -2873,7 +2887,7 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					children: description
 				}) : description)]
 			})] })
-		}), error && /* @__PURE__ */ jsx(Text, {
+		}), Boolean(error) && /* @__PURE__ */ jsx(Text, {
 			accessibilityLiveRegion: "polite",
 			style: [
 				styles.error,
@@ -2903,7 +2917,7 @@ const createStyles$9 = (theme) => StyleSheet.create({
 	root: {
 		width: "100%",
 		minWidth: 0,
-		alignSelf: "stretch",
+		alignSelf: "auto",
 		gap: theme.components.formField.size.md.gap
 	},
 	label: {
@@ -3087,7 +3101,7 @@ function FormFieldRoot({ id, label, description, error, message, messageTone, me
 							style: styles.required,
 							accessible: false,
 							importantForAccessibility: "no",
-							children: " *"
+							children: "*"
 						}),
 						!required && resolvedOptionalText && /* @__PURE__ */ jsx(Text, {
 							style: [styles.optional, {
@@ -3218,10 +3232,13 @@ const RadioGroupRoot = forwardRef(({ value, defaultValue = "", onValueChange, di
 		required,
 		disabled,
 		size,
+		accessibilityRole: "radiogroup",
+		accessibilityLabel: resolvedAccessibilityLabel,
+		accessibilityHint: resolvedAccessibilityHint,
 		labelStyle,
 		descriptionStyle,
 		errorStyle,
-		style,
+		style: [{ alignSelf: "auto" }, style],
 		children: /* @__PURE__ */ jsx(RadioGroupProvider, {
 			value: {
 				value: selectedValue,
@@ -3235,10 +3252,6 @@ const RadioGroupRoot = forwardRef(({ value, defaultValue = "", onValueChange, di
 			children: /* @__PURE__ */ jsx(View, {
 				...rest,
 				ref,
-				accessibilityRole: "radiogroup",
-				accessibilityLabel: resolvedAccessibilityLabel,
-				accessibilityHint: resolvedAccessibilityHint,
-				accessibilityState: { disabled },
 				style: [
 					styles.items,
 					orientation === "horizontal" ? [styles.horizontal, {
@@ -3528,8 +3541,9 @@ const createGroupStyles = (theme) => StyleSheet.create({
 //#region src/components/Select/Group/SelectGroup.tsx
 const SelectGroup = createSelectSlot("group", "Select.Group");
 const SelectGroupLabelRow = ({ label }) => {
+	const styles = useThemeStyles(createGroupStyles);
 	return /* @__PURE__ */ jsx(Text, {
-		style: useThemeStyles(createGroupStyles).groupLabel,
+		style: styles.groupLabel,
 		children: label
 	});
 };
@@ -3709,7 +3723,7 @@ const SelectItemRow = ({ option, isSelected, isDisabled, itemIndex, selectedValu
 				multiple,
 				pressed
 			}), [styles.optionLabel, { color: optionFg }]) : /* @__PURE__ */ jsxs(Fragment, { children: [
-				option.icon && /* @__PURE__ */ jsx(View, {
+				Boolean(option.icon) && /* @__PURE__ */ jsx(View, {
 					style: styles.optionIcon,
 					children: isValidElement(option.icon) ? cloneElement(option.icon, {
 						color: optionFg,
@@ -3722,13 +3736,13 @@ const SelectItemRow = ({ option, isSelected, isDisabled, itemIndex, selectedValu
 						numberOfLines: 1,
 						style: [styles.optionLabel, { color: optionFg }],
 						children: option.label
-					}), option.description && /* @__PURE__ */ jsx(Text, {
+					}), Boolean(option.description) && /* @__PURE__ */ jsx(Text, {
 						numberOfLines: 2,
 						style: [styles.optionDescription, { color: descriptionFg }],
 						children: option.description
 					})]
 				}),
-				option.badge && /* @__PURE__ */ jsx(View, {
+				Boolean(option.badge) && /* @__PURE__ */ jsx(View, {
 					style: [styles.badge, {
 						backgroundColor: optionPalette.badge.bg,
 						borderColor: optionPalette.badge.border
@@ -4013,7 +4027,7 @@ const SelectSearchField = () => {
 				accessibilityLabel: searchPlaceholder,
 				style: [styles.searchInput, searchStyle]
 			}),
-			query && /* @__PURE__ */ jsx(Pressable, {
+			Boolean(query) && /* @__PURE__ */ jsx(Pressable, {
 				accessibilityRole: "button",
 				accessibilityLabel: "Clear search",
 				hitSlop: 8,
@@ -4033,7 +4047,8 @@ SelectSearchField.displayName = "Select.SearchField";
 //#region src/components/Select/Separator/SelectSeparator.tsx
 const SelectSeparator = createSelectSlot("separator", "Select.Separator");
 const SelectSeparatorRow = () => {
-	return /* @__PURE__ */ jsx(View, { style: useThemeStyles(createGroupStyles).separator });
+	const styles = useThemeStyles(createGroupStyles);
+	return /* @__PURE__ */ jsx(View, { style: styles.separator });
 };
 SelectSeparatorRow.displayName = "Select.SeparatorRow";
 //#endregion
@@ -4190,14 +4205,14 @@ const createTriggerStyles = (theme) => StyleSheet.create({
 	trigger: {
 		width: "100%",
 		minWidth: 0,
-		minHeight: 44,
+		minHeight: 38,
 		alignItems: "center",
 		flexDirection: "row",
 		borderRadius: theme.tokens.radius.md,
 		borderWidth: 1
 	},
 	sm: {
-		minHeight: 44,
+		minHeight: 38,
 		paddingHorizontal: theme.tokens.spacing[3],
 		paddingVertical: theme.tokens.spacing[2]
 	},
@@ -4211,9 +4226,9 @@ const createTriggerStyles = (theme) => StyleSheet.create({
 		paddingHorizontal: theme.tokens.spacing[5],
 		paddingVertical: theme.tokens.spacing[4]
 	},
-	triggerWithClearSm: { paddingRight: theme.tokens.spacing[3] + 28 + theme.tokens.spacing[2] },
-	triggerWithClearMd: { paddingRight: theme.tokens.spacing[4] + 28 + theme.tokens.spacing[2] },
-	triggerWithClearLg: { paddingRight: theme.tokens.spacing[5] + 28 + theme.tokens.spacing[2] },
+	triggerWithClearSm: { paddingRight: theme.tokens.spacing[3] + 24 + theme.tokens.spacing[2] },
+	triggerWithClearMd: { paddingRight: theme.tokens.spacing[4] + 24 + theme.tokens.spacing[2] },
+	triggerWithClearLg: { paddingRight: theme.tokens.spacing[5] + 24 + theme.tokens.spacing[2] },
 	clearButtonContainer: {
 		position: "absolute",
 		top: 0,
@@ -4249,23 +4264,23 @@ const createTriggerStyles = (theme) => StyleSheet.create({
 		lineHeight: theme.tokens.typography.lineHeight.md
 	},
 	startIcon: {
-		width: 18,
-		height: 18,
+		width: 16,
+		height: 16,
 		marginRight: theme.tokens.spacing[2],
 		alignItems: "center",
 		justifyContent: "center"
 	},
 	endIcon: {
-		width: 18,
-		height: 18,
+		width: 16,
+		height: 16,
 		marginLeft: theme.tokens.spacing[2],
 		alignItems: "center",
 		justifyContent: "center"
 	},
 	iconOpen: { transform: [{ rotate: "180deg" }] },
 	clearButton: {
-		width: 28,
-		height: 28,
+		width: 24,
+		height: 24,
 		alignItems: "center",
 		justifyContent: "center",
 		borderRadius: 999,
@@ -4279,12 +4294,18 @@ const nativePointerEventsNone$2 = Platform.OS === "web" ? void 0 : { pointerEven
 const nativePointerEventsBoxNone = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
 const webPointerEventsNone$2 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const webPointerEventsBoxNone = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
+const compactTouchHitSlop = {
+	top: 3,
+	bottom: 3,
+	left: 0,
+	right: 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);
 	const palette = theme.components.select[color][variant];
 	const triggerState = isOpen ? palette.focus : palette.default;
-	const resolvedIconSize = size === "lg" ? 18 : 16;
+	const resolvedIconSize = 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,
@@ -4353,6 +4374,7 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 				selected: hasValue,
 				busy: loading
 			},
+			hitSlop: size === "sm" ? compactTouchHitSlop : void 0,
 			onPress,
 			style: [
 				styles.trigger,
@@ -4425,8 +4447,8 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 				onPress: onClear,
 				style: styles.clearButton,
 				children: /* @__PURE__ */ jsx(Close, {
-					width: 14,
-					height: 14,
+					width: 16,
+					height: 16,
 					color: theme.components.select.clearButton.hoverFg
 				})
 			})
@@ -4692,9 +4714,11 @@ function useSelectRootDisplayValue({ multiple, placeholder, renderValue, selecte
 //#endregion
 //#region src/components/Select/Root/useSelectRootSelection.ts
 function useSelectRootSelection({ props, options, isDisabled }) {
+	const controlledValue = props.multiple ? props.value : props.value === null ? "" : props.value;
+	const controlledDefaultValue = props.multiple ? props.defaultValue : props.defaultValue === null ? "" : props.defaultValue;
 	const selection = useSelect({
-		value: props.multiple ? props.value : props.value === null ? "" : props.value,
-		defaultValue: props.multiple ? props.defaultValue : props.defaultValue === null ? "" : props.defaultValue,
+		value: controlledValue,
+		defaultValue: controlledDefaultValue,
 		onValueChange: (nextValue) => {
 			if (props.multiple) {
 				props.onValueChange?.(Array.isArray(nextValue) ? nextValue : nextValue ? [nextValue] : []);
@@ -4729,7 +4753,7 @@ function useSelectRootState(props) {
 	const searchInputRef = useRef(null);
 	const selectedFocusValueRef = useRef(void 0);
 	const resolvedPresentation = useOverlayPresentation(presentation);
-	const { position, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
+	const { position, updatePosition, 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);
@@ -4757,6 +4781,10 @@ function useSelectRootState(props) {
 		filterOptions,
 		filter
 	});
+	const openAndPositionDropdown = useCallback(() => {
+		updatePosition(triggerRef);
+		openDropdown();
+	}, [openDropdown, updatePosition]);
 	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;
@@ -4849,7 +4877,7 @@ function useSelectRootState(props) {
 		isOpen,
 		isRequired,
 		clearValue,
-		openDropdown,
+		openDropdown: openAndPositionDropdown,
 		resolvedHint,
 		resolvedLabel,
 		resolvedSize,
@@ -5235,7 +5263,17 @@ const createStyles$6 = (theme) => StyleSheet.create({
 		gap: theme.tokens.spacing[5],
 		marginBottom: theme.tokens.spacing[6]
 	},
+	listLine: {
+		borderBottomWidth: 1,
+		borderColor: theme.components.tabs.list.border
+	},
+	listLineVertical: {
+		borderRightWidth: 1,
+		borderBottomWidth: 0
+	},
 	listSegmented: {
+		alignSelf: "flex-start",
+		width: "auto",
 		gap: theme.tokens.spacing[1],
 		padding: 2,
 		backgroundColor: theme.components.tabs.list.segmentedBg,
@@ -5263,8 +5301,10 @@ const TabsList = ({ children, scrollable: scrollableProp, style }) => {
 	const scrollable = scrollableProp ?? false;
 	const listStyle = [
 		styles.list,
+		variant === "line" && styles.listLine,
 		variant === "segmented" && styles.listSegmented,
 		orientation === "vertical" && styles.listVertical,
+		variant === "line" && orientation === "vertical" && styles.listLineVertical,
 		style
 	];
 	if (scrollable && orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollView, {
@@ -5286,7 +5326,7 @@ TabsList.displayName = "TabsList";
 const fontWeight$1 = (value) => value;
 const createStyles$5 = (theme) => StyleSheet.create({
 	tab: {
-		minHeight: 44,
+		minHeight: 38,
 		minWidth: 44,
 		alignItems: "center",
 		flexDirection: "row",
@@ -5303,7 +5343,7 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		paddingHorizontal: 0
 	},
 	tabSm: {
-		minHeight: 36,
+		minHeight: 32,
 		paddingHorizontal: theme.tokens.spacing[3],
 		paddingVertical: 6
 	},
@@ -5313,7 +5353,7 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		paddingHorizontal: 0
 	},
 	tabLg: {
-		minHeight: 52,
+		minHeight: 51,
 		paddingHorizontal: theme.tokens.spacing[5],
 		paddingVertical: theme.tokens.spacing[3]
 	},
@@ -5323,7 +5363,8 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		paddingHorizontal: 0
 	},
 	tabSegmented: {
-		flex: 1,
+		flexGrow: 0,
+		flexShrink: 0,
 		minWidth: 0,
 		minHeight: 32,
 		paddingVertical: 5,
@@ -5368,7 +5409,7 @@ const createStyles$5 = (theme) => StyleSheet.create({
 	tabText: {
 		flexShrink: 0,
 		textAlign: "center",
-		lineHeight: theme.tokens.typography.lineHeight.md,
+		lineHeight: theme.tokens.typography.size.md * 1.25,
 		color: theme.components.tabs.primary.trigger.default.fg,
 		fontFamily: theme.tokens.typography.family.regular,
 		fontSize: theme.tokens.typography.size.md,
@@ -5376,11 +5417,11 @@ const createStyles$5 = (theme) => StyleSheet.create({
 	},
 	tabTextSm: {
 		fontSize: theme.tokens.typography.size.sm,
-		lineHeight: theme.tokens.typography.lineHeight.sm
+		lineHeight: theme.tokens.typography.size.sm * 1.25
 	},
 	tabTextLg: {
 		fontSize: theme.tokens.typography.size.lg,
-		lineHeight: theme.tokens.typography.lineHeight.lg
+		lineHeight: theme.tokens.typography.size.lg * 1.25
 	},
 	tabTextHover: { color: theme.components.tabs.primary.trigger.hover.fg },
 	tabTextPressed: { color: theme.components.tabs.primary.trigger.active.fg },
@@ -5458,8 +5499,9 @@ TabsBadge.displayName = "Tabs.Badge";
 //#endregion
 //#region src/components/Tabs/Trigger/TabsIcon.tsx
 const TabsIcon = ({ children, style }) => {
+	const styles = useThemeStyles(createStyles$5);
 	return /* @__PURE__ */ jsx(View, {
-		style: [useThemeStyles(createStyles$5).tabIcon, style],
+		style: [styles.tabIcon, style],
 		children
 	});
 };
@@ -5656,38 +5698,39 @@ const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChang
 		value,
 		version
 	]);
+	const contextValue = useMemo(() => ({
+		value,
+		setValue,
+		orientation,
+		activationMode,
+		variant,
+		color,
+		size,
+		keepMounted,
+		lazyMount,
+		disabled,
+		registerTrigger,
+		indicatorVersion,
+		getTriggerLayout,
+		registerTriggerLayout
+	}), [
+		activationMode,
+		color,
+		disabled,
+		keepMounted,
+		lazyMount,
+		orientation,
+		getTriggerLayout,
+		indicatorVersion,
+		registerTriggerLayout,
+		registerTrigger,
+		setValue,
+		size,
+		value,
+		variant
+	]);
 	return /* @__PURE__ */ jsx(TabsProvider, {
-		value: useMemo(() => ({
-			value,
-			setValue,
-			orientation,
-			activationMode,
-			variant,
-			color,
-			size,
-			keepMounted,
-			lazyMount,
-			disabled,
-			registerTrigger,
-			indicatorVersion,
-			getTriggerLayout,
-			registerTriggerLayout
-		}), [
-			activationMode,
-			color,
-			disabled,
-			keepMounted,
-			lazyMount,
-			orientation,
-			getTriggerLayout,
-			indicatorVersion,
-			registerTriggerLayout,
-			registerTrigger,
-			setValue,
-			size,
-			value,
-			variant
-		]),
+		value: contextValue,
 		children: /* @__PURE__ */ jsx(View, {
 			style: [
 				styles.root,
@@ -5741,9 +5784,10 @@ function TooltipArrow() {
 		marginLeft: -size / 2
 	};
 	return /* @__PURE__ */ jsx(View, {
-		pointerEvents: "none",
+		pointerEvents: Platform.OS === "web" ? void 0 : "none",
 		style: {
 			position: "absolute",
+			...Platform.OS === "web" ? { pointerEvents: "none" } : {},
 			width: size,
 			height: size,
 			backgroundColor: theme.components.tooltip.arrow.bg,
@@ -5799,9 +5843,10 @@ const TooltipContent = ({ children, forceMount = false, withArrow = false, style
 	if (!forceMount && !visible) return null;
 	const bubble = /* @__PURE__ */ jsxs(View, {
 		nativeID: tooltip.contentId,
-		pointerEvents: "none",
+		pointerEvents: Platform.OS === "web" ? void 0 : "none",
 		style: [
 			styles.bubble,
+			Platform.OS === "web" && { pointerEvents: "none" },
 			{
 				top: tooltip.position.top,
 				left: tooltip.position.left,
@@ -5908,37 +5953,38 @@ const TooltipRoot = ({ children, open: openProp, defaultOpen = false, onOpenChan
 	useEffect(() => {
 		return clearCloseTimer;
 	}, [clearCloseTimer]);
+	const contextValue = useMemo(() => ({
+		contentId,
+		open,
+		disabled,
+		placement: resolvedPlacement,
+		position,
+		arrowPosition,
+		triggerRef,
+		setOpen,
+		show,
+		hide,
+		zIndex: dismiss.zIndex,
+		requestClose: dismiss.requestClose,
+		getOutsidePressProps: dismiss.getOutsidePressProps,
+		onFloatingLayout
+	}), [
+		arrowPosition,
+		contentId,
+		disabled,
+		dismiss.zIndex,
+		dismiss.getOutsidePressProps,
+		dismiss.requestClose,
+		hide,
+		open,
+		resolvedPlacement,
+		position,
+		setOpen,
+		show,
+		onFloatingLayout
+	]);
 	return /* @__PURE__ */ jsx(TooltipProvider, {
-		value: useMemo(() => ({
-			contentId,
-			open,
-			disabled,
-			placement: resolvedPlacement,
-			position,
-			arrowPosition,
-			triggerRef,
-			setOpen,
-			show,
-			hide,
-			zIndex: dismiss.zIndex,
-			requestClose: dismiss.requestClose,
-			getOutsidePressProps: dismiss.getOutsidePressProps,
-			onFloatingLayout
-		}), [
-			arrowPosition,
-			contentId,
-			disabled,
-			dismiss.zIndex,
-			dismiss.getOutsidePressProps,
-			dismiss.requestClose,
-			hide,
-			open,
-			resolvedPlacement,
-			position,
-			setOpen,
-			show,
-			onFloatingLayout
-		]),
+		value: contextValue,
 		children: /* @__PURE__ */ jsx(View, {
 			style,
 			children
@@ -5948,9 +5994,65 @@ const TooltipRoot = ({ children, open: openProp, defaultOpen = false, onOpenChan
 TooltipRoot.displayName = "Tooltip.Root";
 //#endregion
 //#region src/components/Tooltip/Trigger/TooltipTrigger.tsx
-const TooltipTrigger = ({ children, disabled, onLongPress, style, ...props }) => {
+function flattenWebStyle(style) {
+	if (!style) return;
+	if (Array.isArray(style)) return Object.assign({}, ...style.map(flattenWebStyle).filter(Boolean));
+	return typeof style === "object" ? style : void 0;
+}
+const TooltipTrigger = ({ children, disabled, onBlur, onFocus, onHoverIn, onHoverOut, onLongPress, onPress, onPressIn, style, ...props }) => {
 	const tooltip = useTooltipContext();
 	const isDisabled = tooltip.disabled || disabled;
+	if (Platform.OS === "web") {
+		const webProps = props;
+		const showFromWebEvent = (event) => {
+			if (event.defaultPrevented || isDisabled) return;
+			tooltip.show();
+		};
+		return createElement("button", {
+			"aria-label": webProps.accessibilityLabel,
+			"data-testid": webProps.testID,
+			disabled: isDisabled || void 0,
+			type: "button",
+			ref: (node) => {
+				if (node) Object.assign(node, { measureInWindow(callback) {
+					const rect = node.getBoundingClientRect();
+					callback(rect.left, rect.top, rect.width, rect.height);
+				} });
+				tooltip.triggerRef.current = node;
+			},
+			onBlur: (event) => {
+				onBlur?.(event);
+				tooltip.hide();
+			},
+			onClick: (event) => {
+				onPress?.(event);
+				showFromWebEvent(event);
+			},
+			onClickCapture: showFromWebEvent,
+			onPointerDown: showFromWebEvent,
+			onPointerDownCapture: showFromWebEvent,
+			onMouseDown: showFromWebEvent,
+			onMouseDownCapture: showFromWebEvent,
+			onFocusCapture: showFromWebEvent,
+			onFocus: (event) => {
+				onFocus?.(event);
+				tooltip.show();
+			},
+			onMouseEnter: (event) => {
+				onHoverIn?.(event);
+				tooltip.show();
+			},
+			onMouseLeave: (event) => {
+				onHoverOut?.(event);
+			},
+			style: {
+				all: "unset",
+				cursor: isDisabled ? "default" : "pointer",
+				display: "inline-flex",
+				...flattenWebStyle(style)
+			}
+		}, children);
+	}
 	return /* @__PURE__ */ jsx(Pressable, {
 		...props,
 		ref: tooltip.triggerRef,
@@ -5959,11 +6061,36 @@ const TooltipTrigger = ({ children, disabled, onLongPress, style, ...props }) =>
 			disabled: isDisabled || props.accessibilityState?.disabled
 		},
 		disabled: isDisabled,
+		onBlur: (event) => {
+			onBlur?.(event);
+			if (Platform.OS === "web") tooltip.hide();
+		},
+		onFocus: (event) => {
+			onFocus?.(event);
+			if (Platform.OS === "web") tooltip.show();
+		},
+		onHoverIn: (event) => {
+			onHoverIn?.(event);
+			if (Platform.OS === "web") tooltip.show();
+		},
+		onHoverOut: (event) => {
+			onHoverOut?.(event);
+			if (Platform.OS === "web") tooltip.hide();
+		},
 		onLongPress: (event) => {
 			onLongPress?.(event);
 			if (event.defaultPrevented) return;
 			tooltip.show();
 		},
+		onPress: (event) => {
+			onPress?.(event);
+			if (event.defaultPrevented || Platform.OS !== "web") return;
+			tooltip.show();
+		},
+		onPressIn: (event) => {
+			onPressIn?.(event);
+			if (Platform.OS === "web") tooltip.show();
+		},
 		style,
 		children
 	});
@@ -5987,14 +6114,10 @@ const createStyles$2 = (theme) => StyleSheet.create({
 		gap: 8,
 		borderWidth: 1
 	},
-	fullWidth: {
-		alignSelf: "stretch",
-		width: "100%"
-	},
+	fullWidth: { width: "100%" },
 	text: {
 		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
 	},
@@ -6007,10 +6130,7 @@ const createStyles$2 = (theme) => StyleSheet.create({
 		position: "absolute",
 		opacity: 0
 	},
-	spinner: {
-		fontSize: 12,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	},
+	spinner: { fontSize: 12 },
 	badge: {
 		minWidth: 18,
 		height: 18,
@@ -6047,33 +6167,16 @@ const createStyles$2 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/primitives/Button/Button.tsx
-const sizeMap = {
-	sm: {
-		px: 16,
-		py: 6,
-		height: 36,
-		fontSize: 12,
-		iconSize: 16
-	},
-	md: {
-		px: 24,
-		py: 8,
-		height: 44,
-		fontSize: 14,
-		iconSize: 20
-	},
-	lg: {
-		px: 32,
-		py: 10,
-		height: 52,
-		fontSize: 16,
-		iconSize: 24
-	}
+const buttonSizeMap = {
+	sm: { px: 16 },
+	md: { px: 24 },
+	lg: { px: 32 }
 };
 function Button({ children, color = "primary", appearance = "solid", shape = "pill", disabled = false, loading = false, loadingText, onPress, onFocus, onBlur, onHoverIn, onHoverOut, size = "md", iconStart, iconEnd, badge, shortcut, fullWidth = false, iconOnly: iconOnlyProp = false, style, textStyle, accessibilityLabel, iconSize, testID, ...props }) {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$2);
-	const config = sizeMap[size];
+	const controlSize = controlSizes[size];
+	const buttonSize = buttonSizeMap[size];
 	const radius = shape === "square" ? theme.tokens.radius.sm : shape === "rounded" ? theme.tokens.radius.md : theme.tokens.radius.full;
 	const appearanceTheme = theme.components.button[color][appearance];
 	const [isHovered, setIsHovered] = useState(false);
@@ -6084,7 +6187,7 @@ function Button({ children, color = "primary", appearance = "solid", shape = "pi
 	const content = loading && loadingText ? loadingText : children;
 	const measureLabel = loadingText && children && !iconOnly ? loading ? children : loadingText : void 0;
 	devWarning(!iconOnly || Boolean(accessibilityLabel), "Button: icon-only buttons must provide an accessibilityLabel.");
-	const resolvedIconSize = iconSize ?? config.iconSize;
+	const resolvedIconSize = iconSize ?? controlSize.iconSize;
 	const handleFocus = (event) => {
 		setIsFocused(true);
 		onFocus?.(event);
@@ -6133,10 +6236,11 @@ function Button({ children, color = "primary", appearance = "solid", shape = "pi
 					backgroundColor: interactionTheme.bg,
 					borderColor: interactionTheme.border,
 					borderRadius: radius,
-					paddingHorizontal: iconOnly ? 0 : config.px,
-					paddingVertical: iconOnly ? 0 : config.py,
-					width: iconOnly ? config.height : void 0,
-					height: iconOnly ? config.height : void 0
+					minHeight: controlSize.height,
+					paddingHorizontal: iconOnly ? 0 : buttonSize.px,
+					paddingVertical: 0,
+					width: iconOnly ? controlSize.height : void 0,
+					height: iconOnly ? controlSize.height : void 0
 				},
 				fullWidth && !iconOnly && styles.fullWidth,
 				isDisabled && styles.disabled,
@@ -6149,7 +6253,7 @@ function Button({ children, color = "primary", appearance = "solid", shape = "pi
 			const contentColor = getInteractionTheme(pressed).fg;
 			return /* @__PURE__ */ jsxs(Fragment, { children: [
 				loading && /* @__PURE__ */ jsx(ActivityIndicator, {
-					size: "small",
+					size: controlSize.iconSize,
 					color: contentColor
 				}),
 				!loading && iconStart && renderIcon(iconStart, contentColor),
@@ -6160,7 +6264,8 @@ function Button({ children, color = "primary", appearance = "solid", shape = "pi
 						style: [
 							styles.text,
 							{
-								fontSize: config.fontSize,
+								fontSize: controlSize.fontSize,
+								lineHeight: controlSize.lineHeight,
 								color: contentColor
 							},
 							textStyle
@@ -6173,7 +6278,10 @@ function Button({ children, color = "primary", appearance = "solid", shape = "pi
 						style: [
 							styles.text,
 							styles.labelMeasure,
-							{ fontSize: config.fontSize },
+							{
+								fontSize: controlSize.fontSize,
+								lineHeight: controlSize.lineHeight
+							},
 							textStyle
 						],
 						children: measureLabel
@@ -6273,7 +6381,7 @@ const createStyles$1 = (theme) => StyleSheet.create({
 	labelCheckedPressed: { color: theme.components.checkbox.primary.pressed.labelFg },
 	labelSm: {
 		fontSize: theme.tokens.typography.size.sm,
-		lineHeight: theme.tokens.typography.lineHeight.sm
+		lineHeight: theme.tokens.typography.lineHeight.md
 	},
 	labelMd: {
 		fontSize: theme.tokens.typography.size.md,
@@ -6281,7 +6389,7 @@ const createStyles$1 = (theme) => StyleSheet.create({
 	},
 	labelLg: {
 		fontSize: theme.tokens.typography.size.lg,
-		lineHeight: theme.tokens.typography.lineHeight.lg
+		lineHeight: theme.tokens.typography.lineHeight.md
 	},
 	labelDisabled: { color: theme.components.checkbox.disabled.fg },
 	requiredMark: { color: theme.components.checkbox.error.fg },
@@ -6393,7 +6501,7 @@ const Checkbox = forwardRef(({ label, description, icon, indeterminateIcon, chec
 							size: iconSizeBySize[size],
 							color: checkColor
 						}))
-					}), label && /* @__PURE__ */ jsxs(Text, {
+					}), Boolean(label) && /* @__PURE__ */ jsxs(Text, {
 						style: [
 							styles.label,
 							labelSizeStyle[size],
@@ -6408,7 +6516,7 @@ const Checkbox = forwardRef(({ label, description, icon, indeterminateIcon, chec
 					})] });
 				}
 			}),
-			description && /* @__PURE__ */ jsx(Text, {
+			Boolean(description) && /* @__PURE__ */ jsx(Text, {
 				style: [
 					styles.descriptionText,
 					helperTextSizeStyle[size],
@@ -6508,22 +6616,16 @@ const createStyles = (theme) => StyleSheet.create({
 	},
 	clearButtonPressed: { backgroundColor: theme.components.input.clearButton.pressedBg },
 	sm: {
-		minHeight: 36,
 		paddingHorizontal: theme.tokens.spacing[3],
-		paddingVertical: theme.tokens.spacing[2],
-		fontSize: theme.tokens.typography.size.sm
+		paddingVertical: 0
 	},
 	md: {
-		minHeight: 44,
 		paddingHorizontal: theme.tokens.spacing[4],
-		paddingVertical: theme.tokens.spacing[3],
-		fontSize: theme.tokens.typography.size.md
+		paddingVertical: 0
 	},
 	lg: {
-		minHeight: 52,
 		paddingHorizontal: theme.tokens.spacing[5],
-		paddingVertical: theme.tokens.spacing[4],
-		fontSize: theme.tokens.typography.size.lg
+		paddingVertical: 0
 	},
 	focused: {
 		color: theme.components.input.focus.fg,
@@ -6635,6 +6737,8 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 	const displayValue = format ? format(currentValue) : currentValue;
 	const hasValue = currentValue !== "";
 	const resolvedSize = size ?? field?.size ?? "md";
+	const controlSize = controlSizes[resolvedSize];
+	const resolvedIconSize = iconSize ?? controlSize.iconSize;
 	const inputColorPalette = theme.components.input[color];
 	const inputPalette = inputColorPalette[variant];
 	const inputState = isFocused ? inputPalette.focus : inputPalette.default;
@@ -6642,6 +6746,7 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 	const isDisabled = disabled || !hasOwnField && Boolean(field?.disabled);
 	const isRequired = required || !hasOwnField && Boolean(field?.required);
 	const isReadOnly = readOnly || loading;
+	const showLoading = loading && !isDisabled;
 	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,
@@ -6655,7 +6760,6 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 	};
 	const isPassword = type === "password";
 	const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);
-	const resolvedIconSize = iconSize ?? 16;
 	const handleFocus = (event) => {
 		setIsFocused(true);
 		onFocus?.(event);
@@ -6675,9 +6779,9 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 		onValueChange?.("");
 		onClear?.();
 	};
-	const showClearButton = clearable && hasValue && !isDisabled && !isReadOnly;
-	const showRevealButton = revealPassword && isPassword && !isDisabled;
-	const showRightIcon = !showClearButton && !showRevealButton && Boolean(endIcon);
+	const showClearButton = clearable && hasValue && !isDisabled && !isReadOnly && !showLoading;
+	const showRevealButton = revealPassword && isPassword && !isDisabled && !showLoading && !showClearButton;
+	const showRightIcon = !showLoading && !showClearButton && !showRevealButton && Boolean(endIcon);
 	const startIconColor = isDisabled ? theme.components.input.disabled.icon : theme.components.input.icon[startIconTone];
 	const endIconColor = isDisabled ? theme.components.input.disabled.icon : theme.components.input.icon[endIconTone];
 	const clearIconColor = isDisabled ? theme.components.input.disabled.icon : theme.components.input.icon[clearIconTone];
@@ -6714,7 +6818,10 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 				placeholderTextColor,
 				accessibilityLabel: accessibilityLabel ?? label,
 				accessibilityHint,
-				accessibilityState: { disabled: isDisabled },
+				accessibilityState: {
+					disabled: isDisabled,
+					busy: loading
+				},
 				accessibilityLabelledBy: !hasOwnField ? field?.labelId : void 0,
 				"aria-describedby": !hasOwnField ? field?.ariaDescribedBy : void 0,
 				style: [
@@ -6722,12 +6829,15 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 					{
 						color: inputState.fg,
 						backgroundColor: inputState.bg,
-						borderColor: inputState.border
+						borderColor: inputState.border,
+						height: controlSize.height,
+						fontSize: controlSize.fontSize,
+						lineHeight: controlSize.lineHeight
 					},
 					styles[resolvedSize],
 					inputStyle,
 					startIcon && styles.inputWithLeftAdornment,
-					(showRightIcon || showClearButton || showRevealButton) && styles.inputWithRightAdornment,
+					(showLoading || showRightIcon || showClearButton || showRevealButton) && styles.inputWithRightAdornment,
 					isFocused && !isDisabled && !isReadOnly && {
 						color: inputPalette.focus.fg,
 						backgroundColor: inputPalette.focus.bg,
@@ -6740,7 +6850,16 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 					isDisabled && styles.disabled
 				]
 			}),
-			showClearButton ? /* @__PURE__ */ jsx(Pressable, {
+			showLoading ? /* @__PURE__ */ jsx(View, {
+				...nativePointerEventsNone,
+				style: [styles.rightIcon, webPointerEventsNone],
+				accessibilityElementsHidden: true,
+				importantForAccessibility: "no",
+				children: /* @__PURE__ */ jsx(ActivityIndicator, {
+					size: "small",
+					color: endIconColor
+				})
+			}) : showClearButton ? /* @__PURE__ */ jsx(Pressable, {
 				accessibilityRole: "button",
 				accessibilityLabel: "Clear input",
 				hitSlop: 8,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.59.0",
+  "version": "2.59.1",
   "description": "React Native components for Vellira Design System",
   "keywords": [
     "vellira",