@vellira-ui/react-native 2.42.0 → 2.43.0

package/dist/index.js

@@ -1,6 +1,6 @@
 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, Easing, 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
@@ -586,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%",
@@ -640,6 +645,8 @@ const createStyles$21 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Content/DropdownContent.tsx
+const nativePointerEventsBoxNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
+const webPointerEventsBoxNone$1 = Platform.OS === "web" ? { pointerEvents: "box-none" } : void 0;
 function DropdownContent({ isOpen, children, onClose, color = "primary", contentStyle, accessibilityLabel, presentation, searchable = false, searchValue = "", searchPlaceholder = "Search actions...", searchAccessibilityLabel, onSearchChange }) {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$21);
@@ -667,7 +674,7 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 		Animated.timing(animation, {
 			toValue: 1,
 			duration: isSheet ? 220 : 160,
-			useNativeDriver: true
+			useNativeDriver: Platform.OS !== "web"
 		}).start();
 	}, [
 		animation,
@@ -701,8 +708,12 @@ function DropdownContent({ isOpen, children, onClose, color = "primary", content
 		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",
@@ -1067,7 +1078,7 @@ function DropdownTrigger({ asChild = false, label, trigger, children, icon, arro
 		Animated.timing(rotateAnim, {
 			toValue: isOpen ? 1 : 0,
 			duration: 180,
-			useNativeDriver: true
+			useNativeDriver: Platform.OS !== "web"
 		}).start();
 	}, [isOpen, rotateAnim]);
 	const arrowRotate = rotateAnim.interpolate({
@@ -1224,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);
@@ -1492,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
@@ -1736,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);
@@ -1815,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,
@@ -1846,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,
@@ -3250,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);
@@ -3257,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,
@@ -3323,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,
@@ -3342,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)
@@ -3365,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)
@@ -3382,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",
@@ -3712,6 +3745,8 @@ const COLLAPSED_SIZE = 8;
 const LINE_ANIMATION_DURATION = 360;
 const SURFACE_ANIMATION_DURATION = 220;
 const easing = Easing?.bezier?.(.22, 1, .36, 1) ?? ((value) => value);
+const nativePointerEventsNone$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,
@@ -3868,21 +3903,26 @@ const TabsIndicator = ({ children, style }) => {
 		return [
 			baseStyle,
 			{
-				top: 0,
-				left: 0,
+				top: -1,
+				left: -1,
 				width,
 				height,
 				backgroundColor: palette.segmented.active.bg,
 				borderColor: palette.segmented.active.border,
 				borderRadius: theme.tokens.radius.lg,
 				borderWidth: 1,
-				shadowColor: "#181521",
-				shadowOffset: {
-					width: 0,
-					height: 1
-				},
-				shadowOpacity: .06,
-				shadowRadius: 2,
+				...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
@@ -3907,8 +3947,8 @@ const TabsIndicator = ({ children, style }) => {
 	return /* @__PURE__ */ jsx(Animated.View, {
 		accessibilityElementsHidden: true,
 		importantForAccessibility: "no-hide-descendants",
-		pointerEvents: "none",
-		style: indicatorStyle,
+		...nativePointerEventsNone$3,
+		style: [indicatorStyle, webPointerEventsNone$3],
 		children
 	});
 };
@@ -3925,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,
@@ -4011,6 +4052,8 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		paddingHorizontal: 0
 	},
 	tabSegmented: {
+		flex: 1,
+		minWidth: 0,
 		minHeight: 32,
 		paddingVertical: 5,
 		borderRadius: theme.tokens.radius.lg
@@ -4408,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();
@@ -4427,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";
@@ -4455,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,
@@ -4475,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
@@ -4493,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, {
@@ -4708,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 }] }
 });
@@ -5204,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,
@@ -5286,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);
@@ -5306,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;
@@ -5338,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, {
@@ -5385,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,
@@ -5424,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, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.42.0",
+  "version": "2.43.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",