@vellira-ui/react-native 2.62.1 → 2.62.3

package/dist/index.js

@@ -773,7 +773,7 @@ const createStyles$21 = (theme) => StyleSheet.create({
 		borderTopRightRadius: theme.tokens.radius.lg,
 		borderWidth: 1,
 		...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}` },
+			web: { boxShadow: theme.components.dropdown.content.shadow },
 			default: {
 				shadowColor: theme.tokens.shadows.lg.color,
 				shadowOffset: {
@@ -854,7 +854,7 @@ function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 			animation.setValue(0);
 			return;
 		}
-		if (reduceMotion) {
+		if (reduceMotion || Platform.OS === "web") {
 			animation.setValue(1);
 			return;
 		}
@@ -862,7 +862,7 @@ function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 		Animated.timing(animation, {
 			toValue: 1,
 			duration: isSheet ? 220 : 160,
-			useNativeDriver: Platform.OS !== "web"
+			useNativeDriver: true
 		}).start();
 	}, [
 		animation,
@@ -1332,7 +1332,10 @@ function useNativeFloatingPosition(placement = "top", offset = 8) {
 //#endregion
 //#region src/components/Dropdown/Dropdown.styles.ts
 const createStyles$20 = (theme) => StyleSheet.create({
-	root: { alignSelf: "flex-start" },
+	root: { alignSelf: Platform.select({
+		web: "auto",
+		default: "flex-start"
+	}) },
 	emptyText: {
 		minHeight: 44,
 		paddingHorizontal: theme.tokens.spacing[3],
@@ -2013,7 +2016,7 @@ const createStyles$13 = (theme) => StyleSheet.create({ content: {
 	borderRadius: theme.components.modal.content.radius,
 	borderWidth: theme.components.modal.content.borderWidth,
 	...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}` },
+		web: { boxShadow: theme.components.modal.content.shadow },
 		default: {
 			shadowColor: theme.tokens.shadows.lg.color,
 			shadowOffset: {
@@ -2182,7 +2185,7 @@ function useModalRootAnimation({ animation, defaultOpen, duration, easing, open
 	const [shouldRender, setShouldRender] = useState(defaultOpen);
 	const [reduceMotion, setReduceMotion] = useState(false);
 	const animationDuration = resolveDuration(duration);
-	const shouldAnimate = animation !== "none" && !reduceMotion;
+	const shouldAnimate = animation !== "none" && !reduceMotion && Platform.OS !== "web";
 	useEffect(() => {
 		AccessibilityInfo.isReduceMotionEnabled?.().then(setReduceMotion);
 		const subscription = AccessibilityInfo.addEventListener?.("reduceMotionChanged", setReduceMotion);
@@ -2712,7 +2715,10 @@ function useRadioGroupContext() {
 //#endregion
 //#region src/primitives/Radio/Radio.styles.ts
 const createStyles$10 = (theme) => StyleSheet.create({
-	root: { alignSelf: "flex-start" },
+	root: { alignSelf: Platform.select({
+		web: "auto",
+		default: "flex-start"
+	}) },
 	pressable: {
 		flexDirection: "row",
 		alignItems: "flex-start",
@@ -3806,6 +3812,42 @@ const createPresentationStyles = (theme) => StyleSheet.create({
 		borderColor: theme.components.select.dropdown.border,
 		borderWidth: 1
 	},
+	surface: { ...Platform.select({
+		web: { boxShadow: theme.components.select.dropdown.shadow },
+		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
+		}
+	}) },
+	sheetSurface: {
+		borderTopLeftRadius: theme.tokens.radius.lg,
+		borderTopRightRadius: theme.tokens.radius.lg,
+		...Platform.select({
+			web: { boxShadow: `0 -${theme.tokens.shadows.lg.y}px ${theme.tokens.shadows.lg.blur}px color-mix(in srgb, ${theme.tokens.shadows.lg.color} ${theme.tokens.shadows.lg.opacity * 100}%, transparent)` },
+			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
+			}
+		})
+	},
+	modalSurface: {
+		width: "100%",
+		maxWidth: 420,
+		borderRadius: theme.tokens.radius.lg
+	},
+	popoverSurface: { borderRadius: theme.tokens.radius.lg },
 	sheet: {
 		maxHeight: "74%",
 		borderTopLeftRadius: theme.tokens.radius.lg,
@@ -3819,8 +3861,6 @@ const createPresentationStyles = (theme) => StyleSheet.create({
 		borderRadius: theme.tokens.radius.lg
 	},
 	popover: {
-		width: "100%",
-		maxWidth: 420,
 		maxHeight: "60%",
 		borderRadius: theme.tokens.radius.lg
 	},
@@ -3873,13 +3913,16 @@ const SelectModal = ({ visible, onClose, outsidePressProps, zIndex, contentStyle
 			],
 			testID: "select-content-root",
 			children: [/* @__PURE__ */ jsx(SelectBackdrop, { outsidePressProps }), /* @__PURE__ */ jsx(View, {
-				style: [
-					styles.content,
-					styles.modalPresentation,
-					contentStyle
-				],
-				testID: "select-modal",
-				children
+				style: [styles.surface, styles.modalSurface],
+				children: /* @__PURE__ */ jsx(View, {
+					style: [
+						styles.content,
+						styles.modalPresentation,
+						contentStyle
+					],
+					testID: "select-modal",
+					children
+				})
 			})]
 		})
 	});
@@ -3900,18 +3943,31 @@ const SelectPopover = ({ visible, onClose, outsidePressProps, zIndex, position,
 			children: [/* @__PURE__ */ jsx(SelectBackdrop, { outsidePressProps }), /* @__PURE__ */ jsx(View, {
 				onLayout: onFloatingLayout,
 				style: [
-					styles.content,
-					styles.popover,
+					styles.surface,
+					styles.popoverSurface,
 					{
 						position: "absolute",
 						top: position.top,
 						left: position.left
 					},
-					matchTriggerWidth && triggerWidth ? { width: triggerWidth } : null,
-					contentStyle
+					matchTriggerWidth && triggerWidth ? {
+						width: triggerWidth,
+						maxWidth: triggerWidth
+					} : {
+						width: "100%",
+						maxWidth: 420
+					}
 				],
-				testID: "select-popover",
-				children
+				testID: "select-popover-surface",
+				children: /* @__PURE__ */ jsx(View, {
+					style: [
+						styles.content,
+						styles.popover,
+						contentStyle
+					],
+					testID: "select-popover",
+					children
+				})
 			})]
 		})
 	});
@@ -3933,14 +3989,17 @@ const SelectSheet = ({ visible, onClose, outsidePressProps, zIndex, contentStyle
 				Platform.OS === "web" && { zIndex }
 			],
 			testID: "select-content-root",
-			children: [/* @__PURE__ */ jsx(SelectBackdrop, { outsidePressProps }), /* @__PURE__ */ jsxs(View, {
-				style: [
-					styles.content,
-					styles.sheet,
-					contentStyle
-				],
-				testID: "select-sheet",
-				children: [/* @__PURE__ */ jsx(SelectHandle, {}), children]
+			children: [/* @__PURE__ */ jsx(SelectBackdrop, { outsidePressProps }), /* @__PURE__ */ jsx(View, {
+				style: [styles.surface, styles.sheetSurface],
+				children: /* @__PURE__ */ jsxs(View, {
+					style: [
+						styles.content,
+						styles.sheet,
+						contentStyle
+					],
+					testID: "select-sheet",
+					children: [/* @__PURE__ */ jsx(SelectHandle, {}), children]
+				})
 			})]
 		})
 	});
@@ -3985,7 +4044,7 @@ const createSearchStyles = (theme) => StyleSheet.create({
 		alignItems: "center",
 		justifyContent: "center",
 		borderRadius: 999,
-		backgroundColor: theme.components.select.clearButton.hoverBg
+		backgroundColor: "transparent"
 	}
 });
 //#endregion
@@ -4036,7 +4095,7 @@ const SelectSearchField = () => {
 				children: /* @__PURE__ */ jsx(Close, {
 					width: 14,
 					height: 14,
-					color: theme.components.select.clearButton.hoverFg
+					color: theme.components.select.clearButton.fg
 				})
 			})
 		]
@@ -4226,9 +4285,6 @@ const createTriggerStyles = (theme) => StyleSheet.create({
 		paddingHorizontal: theme.tokens.spacing[5],
 		paddingVertical: theme.tokens.spacing[4]
 	},
-	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,
@@ -4236,13 +4292,14 @@ const createTriggerStyles = (theme) => StyleSheet.create({
 		alignItems: "center",
 		justifyContent: "center"
 	},
-	clearButtonContainerSm: { right: theme.tokens.spacing[3] },
-	clearButtonContainerMd: { right: theme.tokens.spacing[4] },
-	clearButtonContainerLg: { right: theme.tokens.spacing[5] },
+	clearButtonContainerSm: { right: theme.tokens.spacing[3] + 16 + theme.tokens.spacing[2] },
+	clearButtonContainerMd: { right: theme.tokens.spacing[4] + 16 + theme.tokens.spacing[2] },
+	clearButtonContainerLg: { right: theme.tokens.spacing[5] + 16 + theme.tokens.spacing[2] },
 	value: {
 		flex: 1,
 		minWidth: 0
 	},
+	valueWithClear: { marginRight: 24 + theme.tokens.spacing[2] },
 	text: { fontFamily: theme.tokens.typography.family.regular },
 	textSm: {
 		fontSize: theme.tokens.typography.size.sm,
@@ -4284,7 +4341,7 @@ const createTriggerStyles = (theme) => StyleSheet.create({
 		alignItems: "center",
 		justifyContent: "center",
 		borderRadius: 999,
-		backgroundColor: theme.components.select.clearButton.hoverBg
+		backgroundColor: "transparent"
 	}
 });
 //#endregion
@@ -4317,11 +4374,6 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 		shadowRadius: 6,
 		elevation: 1
 	};
-	const triggerWithClearStyle = {
-		sm: styles.triggerWithClearSm,
-		md: styles.triggerWithClearMd,
-		lg: styles.triggerWithClearLg
-	};
 	const clearButtonContainerStyle = {
 		sm: styles.clearButtonContainerSm,
 		md: styles.clearButtonContainerMd,
@@ -4383,7 +4435,6 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 					borderColor: triggerState.border
 				},
 				styles[size],
-				showClearButton && triggerWithClearStyle[size],
 				isOpen && openRingStyle,
 				hasError && { borderColor: theme.components.select.trigger.error.border },
 				disabled && {
@@ -4405,7 +4456,7 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 					children: prefix
 				}),
 				/* @__PURE__ */ jsx(View, {
-					style: styles.value,
+					style: [styles.value, showClearButton && styles.valueWithClear],
 					children: renderValue()
 				}),
 				suffix && /* @__PURE__ */ jsx(Text, {
@@ -4416,7 +4467,7 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 					testID: "select-loading-indicator",
 					size: "small",
 					color: iconColor
-				}) : showClearButton ? null : endIcon ? /* @__PURE__ */ jsx(View, {
+				}) : endIcon ? /* @__PURE__ */ jsx(View, {
 					...nativePointerEventsNone$2,
 					style: [styles.endIcon, webPointerEventsNone$2],
 					accessibilityElementsHidden: true,
@@ -4449,7 +4500,7 @@ function SelectTrigger({ displayText, isPlaceholder, isOpen, size = "md", color
 				children: /* @__PURE__ */ jsx(Close, {
 					width: 16,
 					height: 16,
-					color: theme.components.select.clearButton.hoverFg
+					color: theme.components.select.clearButton.fg
 				})
 			})
 		})]
@@ -5004,14 +5055,7 @@ const createStyles$7 = (theme) => StyleSheet.create({
 		minWidth: 0,
 		alignSelf: "stretch"
 	},
-	panelHidden: { display: "none" },
-	text: {
-		flexShrink: 1,
-		color: theme.components.tabs.panel.fg,
-		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.md,
-		lineHeight: theme.tokens.typography.lineHeight.md
-	}
+	panelHidden: { display: "none" }
 });
 //#endregion
 //#region src/components/Tabs/Content/TabsContent.tsx
@@ -5168,7 +5212,7 @@ const TabsIndicator = ({ children, style }) => {
 			},
 			isVertical ? {
 				top: 0,
-				left: 0,
+				right: 0,
 				width: 3,
 				height,
 				transform: [{ translateY }]
@@ -5209,7 +5253,7 @@ const TabsIndicator = ({ children, style }) => {
 				borderRadius: theme.tokens.radius.lg,
 				borderWidth: 1,
 				...Platform.select({
-					web: { boxShadow: `${theme.tokens.shadows.sm.x}px ${theme.tokens.shadows.sm.y}px ${theme.tokens.shadows.sm.blur}px ${theme.tokens.shadows.sm.color}` },
+					web: { boxShadow: `${theme.tokens.shadows.sm.x}px ${theme.tokens.shadows.sm.y}px ${theme.tokens.shadows.sm.blur}px color-mix(in srgb, ${theme.tokens.shadows.sm.color} ${theme.tokens.shadows.sm.opacity * 100}%, transparent)` },
 					default: {
 						shadowColor: theme.tokens.shadows.sm.color,
 						shadowOffset: {
@@ -5274,7 +5318,7 @@ const createStyles$6 = (theme) => StyleSheet.create({
 	listSegmented: {
 		alignSelf: "flex-start",
 		width: "auto",
-		gap: theme.tokens.spacing[1],
+		gap: 0,
 		padding: 2,
 		backgroundColor: theme.components.tabs.list.segmentedBg,
 		borderColor: theme.components.tabs.list.border,
@@ -5291,6 +5335,18 @@ const createStyles$6 = (theme) => StyleSheet.create({
 		flexShrink: 0,
 		gap: theme.tokens.spacing[1],
 		marginBottom: 0
+	},
+	listPillsVertical: { gap: theme.tokens.spacing[2] },
+	listSegmentedVertical: {
+		gap: 0,
+		padding: 2,
+		width: 156,
+		minWidth: 156,
+		maxWidth: 156,
+		backgroundColor: theme.components.tabs.list.segmentedBg,
+		borderColor: theme.components.tabs.list.border,
+		borderRadius: theme.tokens.radius.xl,
+		borderWidth: 1
 	}
 });
 //#endregion
@@ -5305,6 +5361,8 @@ const TabsList = ({ children, scrollable: scrollableProp, style }) => {
 		variant === "segmented" && styles.listSegmented,
 		orientation === "vertical" && styles.listVertical,
 		variant === "line" && orientation === "vertical" && styles.listLineVertical,
+		variant === "pills" && orientation === "vertical" && styles.listPillsVertical,
+		variant === "segmented" && orientation === "vertical" && styles.listSegmentedVertical,
 		style
 	];
 	if (scrollable && orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollView, {
@@ -5326,7 +5384,7 @@ TabsList.displayName = "TabsList";
 const fontWeight$1 = (value) => value;
 const createStyles$5 = (theme) => StyleSheet.create({
 	tab: {
-		minHeight: 38,
+		minHeight: 36,
 		minWidth: 44,
 		alignItems: "center",
 		flexDirection: "row",
@@ -5396,7 +5454,6 @@ const createStyles$5 = (theme) => StyleSheet.create({
 	tabVertical: {
 		position: "relative",
 		width: "100%",
-		minHeight: 44,
 		flexGrow: 0,
 		flexShrink: 0,
 		justifyContent: "flex-start"
@@ -5429,10 +5486,10 @@ const createStyles$5 = (theme) => StyleSheet.create({
 	tabTextActive: { color: theme.components.tabs.primary.trigger.active.fg },
 	tabTextPillsActive: { color: theme.components.tabs.primary.pills.active.fg },
 	tabPills: {
-		minHeight: 36,
-		paddingHorizontal: theme.tokens.spacing[3],
-		paddingVertical: theme.tokens.spacing[1],
-		borderRadius: theme.tokens.radius.md
+		minHeight: 38,
+		paddingHorizontal: theme.tokens.spacing[4],
+		paddingVertical: theme.tokens.spacing[2],
+		borderRadius: theme.tokens.radius.lg
 	},
 	tabPillsIconOnly: {
 		width: 36,
@@ -5730,8 +5787,15 @@ const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChang
 		setVersion((current) => current + 1);
 	}, []);
 	const registerTriggerLayout = useCallback((triggerValue, layout) => {
-		if (!layout) triggerLayoutsRef.current.delete(triggerValue);
-		else triggerLayoutsRef.current.set(triggerValue, layout);
+		const previous = triggerLayoutsRef.current.get(triggerValue);
+		if (!layout) {
+			if (!previous) return;
+			triggerLayoutsRef.current.delete(triggerValue);
+			setIndicatorVersion((current) => current + 1);
+			return;
+		}
+		if (previous && previous.x === layout.x && previous.y === layout.y && previous.width === layout.width && previous.height === layout.height) return;
+		triggerLayoutsRef.current.set(triggerValue, layout);
 		setIndicatorVersion((current) => current + 1);
 	}, []);
 	const getTriggerLayout = useCallback((triggerValue) => {
@@ -5858,7 +5922,10 @@ function TooltipArrow() {
 //#endregion
 //#region src/components/Tooltip/Tooltip.styles.ts
 const createStyles$3 = (theme) => StyleSheet.create({
-	root: { alignSelf: "flex-start" },
+	root: { alignSelf: Platform.select({
+		web: "auto",
+		default: "flex-start"
+	}) },
 	overlay: { ...StyleSheet.absoluteFill },
 	bubble: {
 		position: "absolute",
@@ -5870,7 +5937,7 @@ const createStyles$3 = (theme) => StyleSheet.create({
 		borderRadius: theme.components.tooltip.content.radius,
 		borderWidth: theme.components.tooltip.content.borderWidth,
 		...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}` },
+			web: { boxShadow: theme.components.tooltip.content.shadow },
 			default: {
 				shadowColor: theme.tokens.shadows.md.color,
 				shadowOffset: {
@@ -6247,7 +6314,10 @@ function Button({ children, color = "primary", appearance = "solid", shape = "pi
 	devWarning(!iconOnly || Boolean(accessibilityLabel), "Button: icon-only buttons must provide an accessibilityLabel.");
 	const resolvedIconSize = iconSize ?? controlSize.iconSize;
 	const handleFocus = (event) => {
-		setIsFocused(true);
+		if (Platform.OS === "web") {
+			const target = event.currentTarget;
+			setIsFocused(target.matches?.(":focus-visible") ?? false);
+		} else setIsFocused(true);
 		onFocus?.(event);
 	};
 	const handleBlur = (event) => {

package/package.json

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