@vellira-ui/react-native 2.39.5 → 2.41.0

package/dist/index.d.ts

@@ -6,9 +6,9 @@ export type { RadioGroupProps } from './components/RadioGroup';
 export { RadioGroup } from './components/RadioGroup';
 export type { SelectOption, SelectProps } from './components/Select';
 export { Select } from './components/Select';
-export type { TabProps, TabsListProps, TabsPanelProps, TabsProps, } from './components/Tabs';
+export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, } from './components/Tabs';
 export { Tabs } from './components/Tabs';
-export type { TooltipProps } from './components/Tooltip';
+export type { TooltipArrowProps, TooltipContentProps, TooltipProps, TooltipRootProps, TooltipTriggerProps, } from './components/Tooltip';
 export { Tooltip } from './components/Tooltip';
 export type { FormFieldProps } from './patterns/FormField';
 export { FormField } from './patterns/FormField';

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, FlatList, Modal as Modal$1, Pressable, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
+import { AccessibilityInfo, ActivityIndicator, Animated, Dimensions, FlatList, Modal as Modal$1, 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/hooks/useControllableState.ts
@@ -378,15 +378,15 @@ const useSelect = ({ value, defaultValue, onValueChange, onChange, options, mult
 };
 //#endregion
 //#region src/hooks/useTabs.ts
-const useTabs$1 = ({ activeIndex: controlledActiveIndex, defaultActiveIndex = 0, onChange }) => {
-	const [activeIndex, setActiveIndex] = useControllableState({
-		value: controlledActiveIndex,
-		defaultValue: defaultActiveIndex,
-		onChange
+const useTabs$1 = ({ value: controlledValue, defaultValue = "", onValueChange }) => {
+	const [value, setValue] = useControllableState({
+		value: controlledValue,
+		defaultValue,
+		onChange: onValueChange
 	});
 	return {
-		activeIndex,
-		setActiveIndex
+		value,
+		setValue
 	};
 };
 //#endregion
@@ -3650,51 +3650,8 @@ const useTabs = () => {
 };
 TabsContext.displayName = "TabsContext";
 //#endregion
-//#region src/components/Tabs/List/TabsList.styles.ts
+//#region src/components/Tabs/Content/TabsContent.styles.ts
 const createStyles$7 = (theme) => StyleSheet.create({
-	list: {
-		flexDirection: "row",
-		alignSelf: "stretch",
-		width: "100%",
-		gap: theme.tokens.spacing[5],
-		marginBottom: theme.tokens.spacing[4]
-	},
-	listPills: {
-		backgroundColor: theme.components.tabs.pills.default.bg,
-		borderRadius: theme.tokens.radius.lg
-	},
-	listVertical: {
-		flexDirection: "column",
-		alignSelf: "flex-start",
-		width: 140,
-		minWidth: 140,
-		maxWidth: 140,
-		flexGrow: 0,
-		flexShrink: 0,
-		gap: theme.tokens.spacing[1],
-		marginBottom: 0
-	}
-});
-//#endregion
-//#region src/components/Tabs/List/TabsList.tsx
-const TabsList = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$7);
-	const { orientation, appearance } = useTabs();
-	return /* @__PURE__ */ jsx(View, {
-		accessibilityRole: "tablist",
-		style: [
-			styles.list,
-			appearance === "pills" && styles.listPills,
-			orientation === "vertical" && styles.listVertical,
-			style
-		],
-		children
-	});
-};
-TabsList.displayName = "TabsList";
-//#endregion
-//#region src/components/Tabs/Panel/TabsPanel.styles.ts
-const createStyles$6 = (theme) => StyleSheet.create({
 	panel: {
 		width: "100%",
 		minWidth: 0,
@@ -3718,39 +3675,135 @@ const createStyles$6 = (theme) => StyleSheet.create({
 	}
 });
 //#endregion
-//#region src/components/Tabs/Panel/TabsPanel.tsx
-const TabsPanel = ({ index, children, style }) => {
-	const styles = useThemeStyles(createStyles$6);
-	const { activeIndex, orientation } = useTabs();
-	if (activeIndex !== index) return null;
+//#region src/components/Tabs/Content/TabsContent.tsx
+const TabsContent = ({ value, children, forceMount = false, style }) => {
+	const styles = useThemeStyles(createStyles$7);
+	const { value: selectedValue, orientation, keepMounted, lazyMount } = useTabs();
+	const isActive = selectedValue === value;
+	const [hasMounted, setHasMounted] = useState(isActive);
+	useEffect(() => {
+		if (isActive) setHasMounted(true);
+	}, [isActive]);
+	if (!(forceMount || isActive || keepMounted && !lazyMount || keepMounted && lazyMount && hasMounted)) return null;
 	return /* @__PURE__ */ jsx(View, {
 		style: [
 			styles.panel,
 			orientation === "vertical" && styles.panelVertical,
 			style
 		],
+		accessibilityElementsHidden: !isActive,
+		importantForAccessibility: isActive ? "auto" : "no-hide-descendants",
+		children
+	});
+};
+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
+});
+TabsIndicator.displayName = "Tabs.Indicator";
+//#endregion
+//#region src/components/Tabs/List/TabsList.styles.ts
+const createStyles$6 = (theme) => StyleSheet.create({
+	list: {
+		flexDirection: "row",
+		alignSelf: "stretch",
+		width: "100%",
+		gap: theme.tokens.spacing[5],
+		marginBottom: theme.tokens.spacing[6]
+	},
+	listSegmented: {
+		padding: 2,
+		backgroundColor: theme.components.tabs.list.segmentedBg,
+		borderColor: theme.components.tabs.list.border,
+		borderRadius: theme.tokens.radius.xl,
+		borderWidth: 1
+	},
+	listVertical: {
+		flexDirection: "column",
+		alignSelf: "flex-start",
+		width: 156,
+		minWidth: 156,
+		maxWidth: 156,
+		flexGrow: 0,
+		flexShrink: 0,
+		gap: theme.tokens.spacing[1],
+		marginBottom: 0
+	}
+});
+//#endregion
+//#region src/components/Tabs/List/TabsList.tsx
+const TabsList = ({ children, scrollable: scrollableProp, style }) => {
+	const styles = useThemeStyles(createStyles$6);
+	const { orientation, variant } = useTabs();
+	const scrollable = scrollableProp ?? false;
+	const listStyle = [
+		styles.list,
+		variant === "segmented" && styles.listSegmented,
+		orientation === "vertical" && styles.listVertical,
+		style
+	];
+	if (scrollable && orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollView, {
+		horizontal: true,
+		accessibilityRole: "tablist",
+		showsHorizontalScrollIndicator: false,
+		contentContainerStyle: listStyle,
+		children
+	});
+	return /* @__PURE__ */ jsx(View, {
+		accessibilityRole: "tablist",
+		style: listStyle,
 		children
 	});
 };
-TabsPanel.displayName = "TabsPanel";
+TabsList.displayName = "TabsList";
 //#endregion
-//#region src/components/Tabs/Tab/Tab.styles.ts
+//#region src/components/Tabs/Trigger/TabsTrigger.styles.ts
 const fontWeight$1 = (value) => value;
 const createStyles$5 = (theme) => StyleSheet.create({
 	tab: {
-		minHeight: 40,
+		minHeight: 44,
+		minWidth: 44,
 		alignItems: "center",
 		flexDirection: "row",
 		gap: theme.tokens.spacing[2],
 		justifyContent: "center",
 		paddingHorizontal: theme.tokens.spacing[4],
 		paddingVertical: theme.tokens.spacing[2],
-		backgroundColor: theme.components.tabs.trigger.default.bg
+		borderWidth: 1
+	},
+	tabSm: {
+		minHeight: 36,
+		paddingHorizontal: theme.tokens.spacing[3],
+		paddingVertical: 6
+	},
+	tabLg: {
+		minHeight: 52,
+		paddingHorizontal: theme.tokens.spacing[5],
+		paddingVertical: theme.tokens.spacing[3]
+	},
+	tabSegmented: {
+		minHeight: 32,
+		paddingVertical: 5,
+		borderRadius: theme.tokens.radius.lg
+	},
+	tabSegmentedSm: {
+		minHeight: 30,
+		paddingVertical: 4
+	},
+	tabSegmentedLg: {
+		minHeight: 40,
+		paddingVertical: 8
 	},
 	tabVertical: {
 		position: "relative",
 		width: "100%",
-		minHeight: 40,
+		minHeight: 44,
 		flexGrow: 0,
 		flexShrink: 0,
 		justifyContent: "flex-start"
@@ -3763,7 +3816,7 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		height: 3,
 		backgroundColor: "transparent"
 	},
-	horizontalIndicatorActive: { backgroundColor: theme.components.tabs.indicator.active.bg },
+	horizontalIndicatorActive: { backgroundColor: "transparent" },
 	verticalIndicator: {
 		position: "absolute",
 		top: 0,
@@ -3772,27 +3825,35 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		width: 3,
 		backgroundColor: "transparent"
 	},
-	verticalIndicatorActive: { backgroundColor: theme.components.tabs.indicator.active.bg },
-	verticalIndicatorPressed: { backgroundColor: theme.components.tabs.indicator.hover.bg },
-	tabHovered: { backgroundColor: theme.components.tabs.trigger.hover.bg },
-	tabPressed: { backgroundColor: theme.components.tabs.trigger.active.bg },
+	verticalIndicatorActive: { backgroundColor: "transparent" },
+	verticalIndicatorPressed: { backgroundColor: "transparent" },
+	tabHovered: { backgroundColor: "transparent" },
+	tabPressed: { backgroundColor: "transparent" },
 	tabFocused: { borderColor: theme.semantic.focus.ring.color },
-	tabDefaultActive: { backgroundColor: theme.components.tabs.trigger.active.bg },
-	tabDisabled: { backgroundColor: theme.components.tabs.trigger.disabled.bg },
+	tabDefaultActive: { backgroundColor: "transparent" },
+	tabDisabled: { backgroundColor: theme.components.tabs.disabled.bg },
 	tabText: {
 		flexShrink: 0,
 		textAlign: "center",
 		lineHeight: theme.tokens.typography.lineHeight.md,
-		color: theme.components.tabs.trigger.default.fg,
+		color: theme.components.tabs.primary.trigger.default.fg,
 		fontFamily: theme.tokens.typography.family.regular,
 		fontSize: theme.tokens.typography.size.md,
 		fontWeight: fontWeight$1(theme.tokens.typography.weight.regular)
 	},
-	tabTextHover: { color: theme.components.tabs.trigger.hover.fg },
-	tabTextPressed: { color: theme.components.tabs.trigger.active.fg },
-	tabTextDisabled: { color: theme.components.tabs.trigger.disabled.fg },
-	tabTextActive: { color: theme.components.tabs.trigger.active.fg },
-	tabTextPillsActive: { color: theme.components.tabs.pills.active.fg },
+	tabTextSm: {
+		fontSize: theme.tokens.typography.size.sm,
+		lineHeight: theme.tokens.typography.lineHeight.sm
+	},
+	tabTextLg: {
+		fontSize: theme.tokens.typography.size.lg,
+		lineHeight: theme.tokens.typography.lineHeight.lg
+	},
+	tabTextHover: { color: theme.components.tabs.primary.trigger.hover.fg },
+	tabTextPressed: { color: theme.components.tabs.primary.trigger.active.fg },
+	tabTextDisabled: { color: theme.components.tabs.disabled.fg },
+	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],
@@ -3800,64 +3861,145 @@ const createStyles$5 = (theme) => StyleSheet.create({
 		borderRadius: theme.tokens.radius.md
 	},
 	tabPillsActive: {
-		backgroundColor: theme.components.tabs.pills.active.bg,
+		backgroundColor: "transparent",
 		borderRadius: theme.tokens.radius.md
 	},
-	tabPillsHover: { backgroundColor: theme.components.tabs.pills.hover.bg },
-	tabPillsPressed: { backgroundColor: theme.components.tabs.pills.active.bg },
+	tabPillsHover: { backgroundColor: "transparent" },
+	tabPillsPressed: { backgroundColor: "transparent" },
 	tabIcon: {
 		alignItems: "center",
 		justifyContent: "center"
 	},
-	tabIconHover: { color: theme.components.tabs.trigger.hover.fg },
-	tabIconPressed: { color: theme.components.tabs.trigger.active.fg },
-	tabIconActive: { color: theme.components.tabs.trigger.active.fg },
-	tabIconPillsActive: { color: theme.components.tabs.pills.active.fg }
+	tabDescription: {
+		fontSize: theme.tokens.typography.size.sm,
+		color: theme.components.tabs.primary.trigger.default.fg
+	},
+	tabBadge: {
+		minHeight: 20,
+		minWidth: 20,
+		alignItems: "center",
+		justifyContent: "center",
+		paddingHorizontal: theme.tokens.spacing[2],
+		backgroundColor: theme.components.tabs.primary.pills.active.bg,
+		borderRadius: theme.tokens.radius.full
+	},
+	tabBadgeLg: {
+		minHeight: 24,
+		minWidth: 24
+	},
+	tabBadgeText: {
+		color: theme.components.tabs.primary.pills.active.fg,
+		fontSize: theme.tokens.typography.size.sm,
+		fontWeight: fontWeight$1(theme.tokens.typography.weight.medium)
+	},
+	tabIconHover: { color: theme.components.tabs.primary.trigger.hover.fg },
+	tabIconPressed: { color: theme.components.tabs.primary.trigger.active.fg },
+	tabIconActive: { color: theme.components.tabs.primary.trigger.active.fg },
+	tabIconPillsActive: { color: theme.components.tabs.primary.pills.active.fg }
 });
 //#endregion
-//#region src/components/Tabs/Tab/Tab.tsx
-const Tab = ({ index, children, icon, disabled, style, textStyle }) => {
+//#region src/components/Tabs/Trigger/TabsBadge.tsx
+const TabsBadge = ({ children, style }) => {
+	const styles = useThemeStyles(createStyles$5);
+	const { color } = useTabs();
+	const { theme } = useTheme();
+	const palette = theme.components.tabs[color];
+	return /* @__PURE__ */ jsx(View, {
+		style: [
+			styles.tabBadge,
+			{ backgroundColor: palette.pills.active.bg },
+			style
+		],
+		children: /* @__PURE__ */ jsx(Text, {
+			style: [styles.tabBadgeText, { color: palette.pills.active.fg }],
+			children
+		})
+	});
+};
+TabsBadge.displayName = "Tabs.Badge";
+//#endregion
+//#region src/components/Tabs/Trigger/TabsIcon.tsx
+const TabsIcon = ({ children, style }) => {
+	return /* @__PURE__ */ jsx(View, {
+		style: [useThemeStyles(createStyles$5).tabIcon, style],
+		children
+	});
+};
+TabsIcon.displayName = "Tabs.Icon";
+//#endregion
+//#region src/components/Tabs/Trigger/TabsTrigger.tsx
+const TabsTrigger = ({ value, children, icon, badge, description, disabled, style, textStyle }) => {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$5);
-	const { activeIndex, appearance, orientation, setActiveIndex } = useTabs();
-	const isActive = activeIndex === index;
-	const isPills = appearance === "pills";
-	const isUnderline = appearance === "underline";
-	const isDefault = appearance === "default";
+	const { value: selectedValue, variant, color, size, orientation, disabled: rootDisabled, setValue, registerTrigger } = useTabs();
+	const isDisabled = rootDisabled || disabled;
+	const isActive = selectedValue === value;
+	const isPills = variant === "pills";
+	const isLine = variant === "line";
+	const isSegmented = variant === "segmented";
 	const isVertical = orientation === "vertical";
-	const iconColor = isPills && isActive ? theme.components.tabs.pills.active.fg : isActive ? theme.components.tabs.trigger.active.fg : theme.components.tabs.trigger.default.fg;
+	const isSm = size === "sm";
+	const isLg = size === "lg";
+	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;
+	useEffect(() => {
+		registerTrigger(value, Boolean(isDisabled), true);
+		return () => {
+			registerTrigger(value, Boolean(isDisabled), false);
+		};
+	}, [
+		isDisabled,
+		registerTrigger,
+		value
+	]);
+	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, {
-		disabled,
+		disabled: isDisabled,
 		accessibilityRole: "tab",
 		accessibilityState: {
 			selected: isActive,
-			disabled
+			disabled: isDisabled
 		},
 		onPress: () => {
-			if (!disabled && !isActive) setActiveIndex(index);
+			if (!isDisabled && !isActive) setValue(value);
 		},
 		style: ({ pressed }) => [
 			styles.tab,
+			isSm && styles.tabSm,
+			isLg && styles.tabLg,
 			isVertical && styles.tabVertical,
 			isPills && styles.tabPills,
-			isPills && isActive && styles.tabPillsActive,
-			pressed && !disabled && styles.tabPressed,
-			isDefault && isActive && styles.tabDefaultActive,
-			disabled && styles.tabDisabled,
+			isSegmented && styles.tabSegmented,
+			isSegmented && isSm && styles.tabSegmentedSm,
+			isSegmented && isLg && styles.tabSegmentedLg,
+			isPills && isActive && {
+				borderColor: palette.pills.active.border,
+				backgroundColor: palette.pills.active.bg
+			},
+			{
+				borderColor: state.border,
+				backgroundColor: pressed ? pressedState.bg : state.bg
+			},
+			isSegmented && isActive && {
+				borderColor: palette.segmented.active.border,
+				backgroundColor: palette.segmented.active.bg
+			},
+			isDisabled && styles.tabDisabled,
 			style
 		],
 		children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-			isUnderline && !isVertical && /* @__PURE__ */ jsx(View, {
+			isLine && !isVertical && /* @__PURE__ */ jsx(View, {
 				pointerEvents: "none",
-				style: [styles.horizontalIndicator, isActive && styles.horizontalIndicatorActive]
+				style: [styles.horizontalIndicator, isActive && { backgroundColor: palette.indicator.bg }]
 			}),
-			isUnderline && isVertical && /* @__PURE__ */ jsx(View, {
+			isLine && isVertical && /* @__PURE__ */ jsx(View, {
 				pointerEvents: "none",
 				style: [
 					styles.verticalIndicator,
-					isActive && styles.verticalIndicatorActive,
-					pressed && !isActive && !disabled && styles.verticalIndicatorPressed
+					isActive && { backgroundColor: palette.indicator.bg },
+					pressed && !isActive && !isDisabled && { backgroundColor: palette.indicator.hoverBg }
 				]
 			}),
 			icon != null && /* @__PURE__ */ jsx(View, {
@@ -3869,17 +4011,40 @@ const Tab = ({ index, children, icon, disabled, style, textStyle }) => {
 				ellipsizeMode: "tail",
 				style: [
 					styles.tabText,
-					isPills && isActive && styles.tabTextPillsActive,
-					!isPills && isActive && styles.tabTextActive,
-					disabled && styles.tabTextDisabled,
+					isSm && styles.tabTextSm,
+					isLg && styles.tabTextLg,
+					{ color: isSegmented && isActive ? palette.segmented.active.fg : state.fg },
 					textStyle
 				],
 				children
+			}),
+			description != null && /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 2,
+				ellipsizeMode: "tail",
+				style: [
+					styles.tabText,
+					styles.tabDescription,
+					isSm && styles.tabTextSm,
+					isLg && styles.tabTextLg,
+					{ color: isDisabled ? theme.components.tabs.disabled.fg : state.fg }
+				],
+				children: description
+			}),
+			badge != null && /* @__PURE__ */ jsx(View, {
+				style: [
+					styles.tabBadge,
+					isLg && styles.tabBadgeLg,
+					{ backgroundColor: palette.pills.active.bg }
+				],
+				children: /* @__PURE__ */ jsx(Text, {
+					style: [styles.tabBadgeText, { color: palette.pills.active.fg }],
+					children: badge
+				})
 			})
 		] })
 	});
 };
-Tab.displayName = "Tab";
+TabsTrigger.displayName = "Tabs.Trigger";
 //#endregion
 //#region src/components/Tabs/Tabs.styles.ts
 const createStyles$4 = (theme) => StyleSheet.create({
@@ -3896,26 +4061,76 @@ const createStyles$4 = (theme) => StyleSheet.create({
 	}
 });
 //#endregion
-//#region src/components/Tabs/Tabs.tsx
-const TabsRoot = ({ children, activeIndex: controlledActiveIndex, defaultActiveIndex = 0, onChange, orientation = "horizontal", appearance = "pills", style }) => {
+//#region src/components/Tabs/Root/TabsRoot.tsx
+const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChange, orientation = "horizontal", activationMode = "automatic", variant = "line", color = "primary", size = "md", keepMounted = false, lazyMount = false, disabled = false, style }) => {
 	const styles = useThemeStyles(createStyles$4);
-	const { activeIndex, setActiveIndex } = useTabs$1({
-		activeIndex: controlledActiveIndex,
-		defaultActiveIndex,
-		onChange,
-		orientation
+	const isControlled = controlledValue !== void 0;
+	const [version, setVersion] = useState(0);
+	const triggersRef = useRef([]);
+	const { value, setValue } = useTabs$1({
+		value: controlledValue,
+		defaultValue,
+		onValueChange
 	});
+	const registerTrigger = useCallback((triggerValue, triggerDisabled, mounted) => {
+		const existingIndex = triggersRef.current.findIndex((tab) => tab.value === triggerValue);
+		if (!mounted) {
+			if (existingIndex >= 0) {
+				triggersRef.current.splice(existingIndex, 1);
+				setVersion((current) => current + 1);
+			}
+			return;
+		}
+		const nextTab = {
+			value: triggerValue,
+			disabled: triggerDisabled
+		};
+		if (existingIndex >= 0) triggersRef.current[existingIndex] = nextTab;
+		else triggersRef.current.push(nextTab);
+		setVersion((current) => current + 1);
+	}, []);
+	useEffect(() => {
+		const enabledTabs = triggersRef.current.filter((tab) => !tab.disabled);
+		const selectedExists = triggersRef.current.some((tab) => tab.value === value);
+		if (isControlled) {
+			if (value && !selectedExists && triggersRef.current.length > 0) console.warn(`Tabs: value "${value}" does not match any Tabs.Trigger.`);
+			return;
+		}
+		if (!value || !selectedExists) {
+			const firstEnabledValue = enabledTabs[0]?.value;
+			if (firstEnabledValue) setValue(firstEnabledValue);
+		}
+	}, [
+		isControlled,
+		setValue,
+		value,
+		version
+	]);
 	return /* @__PURE__ */ jsx(TabsProvider, {
 		value: useMemo(() => ({
-			activeIndex,
-			appearance,
+			value,
+			setValue,
 			orientation,
-			setActiveIndex
+			activationMode,
+			variant,
+			color,
+			size,
+			keepMounted,
+			lazyMount,
+			disabled,
+			registerTrigger
 		}), [
-			activeIndex,
-			appearance,
+			activationMode,
+			color,
+			disabled,
+			keepMounted,
+			lazyMount,
 			orientation,
-			setActiveIndex
+			registerTrigger,
+			setValue,
+			size,
+			value,
+			variant
 		]),
 		children: /* @__PURE__ */ jsx(View, {
 			style: [
@@ -3927,14 +4142,62 @@ const TabsRoot = ({ children, activeIndex: controlledActiveIndex, defaultActiveI
 		})
 	});
 };
-TabsRoot.displayName = "TabsRoot";
+TabsRoot.displayName = "Tabs";
 //#endregion
-//#region src/components/Tabs/index.ts
+//#region src/components/Tabs/Tabs.tsx
 const Tabs = Object.assign(TabsRoot, {
 	List: TabsList,
-	Tab,
-	Panel: TabsPanel
+	Trigger: TabsTrigger,
+	Content: TabsContent,
+	Indicator: TabsIndicator,
+	Icon: TabsIcon,
+	Badge: TabsBadge
 });
+Tabs.displayName = "Tabs";
+//#endregion
+//#region src/components/Tooltip/internal/TooltipContext.tsx
+const TooltipContext = createContext(null);
+const TooltipProvider = TooltipContext.Provider;
+const useTooltipContext = () => {
+	const context = useContext(TooltipContext);
+	if (!context) throw new Error("Tooltip components must be used inside <Tooltip>.");
+	return context;
+};
+TooltipContext.displayName = "TooltipContext";
+//#endregion
+//#region src/components/Tooltip/Arrow/TooltipArrow.tsx
+const TooltipArrow = ({ style }) => {
+	const { theme } = useTheme();
+	const tooltip = useTooltipContext();
+	const size = theme.components.tooltip.arrow.size;
+	const side = tooltip.placement.split("-")[0];
+	const staticSide = {
+		top: "bottom",
+		right: "left",
+		bottom: "top",
+		left: "right"
+	}[side];
+	const crossAxisStyle = side === "left" || side === "right" ? {
+		top: "50%",
+		marginTop: -size / 2
+	} : {
+		left: "50%",
+		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]
+	});
+};
+TooltipArrow.displayName = "Tooltip.Arrow";
 //#endregion
 //#region src/components/Tooltip/Tooltip.styles.ts
 const createStyles$3 = (theme) => StyleSheet.create({
@@ -3943,13 +4206,13 @@ const createStyles$3 = (theme) => StyleSheet.create({
 	bubble: {
 		position: "absolute",
 		zIndex: 1e3,
-		maxWidth: 280,
-		paddingHorizontal: theme.tokens.spacing[3],
-		paddingVertical: theme.tokens.spacing[2],
+		maxWidth: theme.components.tooltip.content.maxWidth,
+		paddingHorizontal: theme.components.tooltip.content.paddingX,
+		paddingVertical: theme.components.tooltip.content.paddingY,
 		backgroundColor: theme.components.tooltip.content.bg,
 		borderColor: theme.components.tooltip.content.border,
-		borderRadius: theme.tokens.radius.sm,
-		borderWidth: 1,
+		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,
@@ -3963,83 +4226,192 @@ const createStyles$3 = (theme) => StyleSheet.create({
 		flexShrink: 1,
 		color: theme.components.tooltip.content.fg,
 		fontFamily: theme.tokens.typography.family.regular,
-		fontSize: theme.tokens.typography.size.sm,
-		lineHeight: theme.tokens.typography.lineHeight.sm,
+		fontSize: theme.components.tooltip.content.fontSize,
+		lineHeight: theme.components.tooltip.content.lineHeight,
 		textAlign: "center"
 	}
 });
 //#endregion
-//#region src/components/Tooltip/Tooltip.tsx
-function Tooltip({ children, content, placement = "top", disabled = false, maxWidth = 240, delay, style, contentStyle, textStyle }) {
+//#region src/components/Tooltip/Content/TooltipContent.tsx
+const TooltipContent = ({ children, forceMount = false, style, textStyle }) => {
 	const styles = useThemeStyles(createStyles$3);
-	const overlayId = useId();
-	const [visible, setVisible] = useState(false);
+	const tooltip = useTooltipContext();
+	const visible = tooltip.open && !tooltip.disabled;
+	if (!forceMount && !visible) return null;
+	const bubble = /* @__PURE__ */ jsx(View, {
+		nativeID: tooltip.contentId,
+		pointerEvents: "none",
+		style: [
+			styles.bubble,
+			{
+				top: tooltip.position.top,
+				left: tooltip.position.left
+			},
+			!visible && { display: "none" },
+			style
+		],
+		onLayout: tooltip.onFloatingLayout,
+		children: Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx(Text, {
+			style: [styles.text, textStyle],
+			children: child
+		}) : child)
+	});
+	if (!visible) return bubble;
+	return /* @__PURE__ */ jsx(Modal$1, {
+		visible,
+		transparent: true,
+		animationType: "fade",
+		onRequestClose: tooltip.requestClose,
+		children: /* @__PURE__ */ jsx(Pressable, {
+			style: styles.overlay,
+			onPress: tooltip.requestOutsideClose,
+			children: bubble
+		})
+	});
+};
+TooltipContent.displayName = "Tooltip.Content";
+//#endregion
+//#region src/components/Tooltip/internal/useTooltipDelay.ts
+const resolveTooltipDelay = (delay) => {
+	if (typeof delay === "number") return {
+		open: delay,
+		close: 2500
+	};
+	return {
+		open: delay?.open ?? 0,
+		close: delay?.close ?? 2500
+	};
+};
+//#endregion
+//#region src/components/Tooltip/Root/TooltipRoot.tsx
+const TooltipRoot = ({ children, open: openProp, defaultOpen = false, onOpenChange, placement = "top", disabled = false, delay, offset = 8, closeOnOutsidePress = true, style }) => {
+	const contentId = `${useId()}-content`;
 	const triggerRef = useRef(null);
 	const closeTimerRef = useRef(null);
-	const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, 8);
-	const hideDelay = delay?.close ?? 2500;
-	const clearCloseTimer = () => {
+	const resolvedDelay = useMemo(() => resolveTooltipDelay(delay), [delay]);
+	const [open, setOpenState] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const { position, updatePosition, onFloatingLayout } = useNativeFloatingPosition(placement, offset);
+	const clearCloseTimer = useCallback(() => {
 		if (closeTimerRef.current) {
 			clearTimeout(closeTimerRef.current);
 			closeTimerRef.current = null;
 		}
-	};
-	const dismiss = useNativeDismiss({
-		id: overlayId,
-		visible: visible && !disabled,
-		onClose: () => {
-			clearCloseTimer();
-			setVisible(false);
-		}
-	});
-	const showTooltip = () => {
+	}, []);
+	const setOpen = useCallback((nextOpen) => {
+		if (disabled && nextOpen) return;
+		setOpenState(nextOpen);
+	}, [disabled, setOpenState]);
+	const hide = useCallback(() => {
+		clearCloseTimer();
+		setOpen(false);
+	}, [clearCloseTimer, setOpen]);
+	const show = useCallback(() => {
 		if (disabled) return;
 		clearCloseTimer();
 		updatePosition(triggerRef);
-		setVisible(true);
-		closeTimerRef.current = setTimeout(() => {
-			setVisible(false);
-			closeTimerRef.current = null;
-		}, hideDelay);
-	};
+		const openTooltip = () => {
+			setOpen(true);
+			closeTimerRef.current = setTimeout(() => {
+				setOpen(false);
+				closeTimerRef.current = null;
+			}, resolvedDelay.close);
+		};
+		if (resolvedDelay.open > 0) {
+			closeTimerRef.current = setTimeout(openTooltip, resolvedDelay.open);
+			return;
+		}
+		openTooltip();
+	}, [
+		clearCloseTimer,
+		disabled,
+		resolvedDelay,
+		setOpen,
+		updatePosition
+	]);
+	const dismiss = useNativeDismiss({
+		id: contentId,
+		visible: open && !disabled,
+		closeOnOutsidePress,
+		onClose: hide
+	});
+	useEffect(() => {
+		if (disabled && open) hide();
+	}, [
+		disabled,
+		hide,
+		open
+	]);
 	useEffect(() => {
 		return clearCloseTimer;
-	}, []);
-	return /* @__PURE__ */ jsxs(View, {
-		style: [styles.root, style],
-		children: [/* @__PURE__ */ jsx(Pressable, {
-			ref: triggerRef,
-			onLongPress: showTooltip,
+	}, [clearCloseTimer]);
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		value: useMemo(() => ({
+			contentId,
+			open,
+			disabled,
+			placement,
+			position,
+			triggerRef,
+			setOpen,
+			show,
+			hide,
+			requestClose: dismiss.requestClose,
+			requestOutsideClose: dismiss.requestOutsideClose,
+			onFloatingLayout
+		}), [
+			contentId,
+			disabled,
+			dismiss.requestClose,
+			dismiss.requestOutsideClose,
+			hide,
+			open,
+			placement,
+			position,
+			setOpen,
+			show,
+			onFloatingLayout
+		]),
+		children: /* @__PURE__ */ jsx(View, {
+			style,
 			children
-		}), /* @__PURE__ */ jsx(Modal$1, {
-			visible: visible && !disabled,
-			transparent: true,
-			animationType: "fade",
-			onRequestClose: dismiss.requestClose,
-			children: /* @__PURE__ */ jsx(Pressable, {
-				style: styles.overlay,
-				onPress: dismiss.requestOutsideClose,
-				children: /* @__PURE__ */ jsx(View, {
-					pointerEvents: "none",
-					style: [
-						styles.bubble,
-						{
-							maxWidth,
-							top: position.top,
-							left: position.left
-						},
-						contentStyle
-					],
-					onLayout: onFloatingLayout,
-					children: typeof content === "string" ? /* @__PURE__ */ jsx(Text, {
-						style: [styles.text, textStyle],
-						children: content
-					}) : content
-				})
-			})
-		})]
+		})
 	});
-}
+};
+TooltipRoot.displayName = "Tooltip.Root";
+//#endregion
+//#region src/components/Tooltip/Trigger/TooltipTrigger.tsx
+const TooltipTrigger = ({ children, disabled, onLongPress, style, ...props }) => {
+	const tooltip = useTooltipContext();
+	const isDisabled = tooltip.disabled || disabled;
+	return /* @__PURE__ */ jsx(Pressable, {
+		...props,
+		ref: tooltip.triggerRef,
+		accessibilityState: {
+			...props.accessibilityState,
+			disabled: isDisabled || props.accessibilityState?.disabled
+		},
+		disabled: isDisabled,
+		onLongPress: (event) => {
+			onLongPress?.(event);
+			if (event.defaultPrevented) return;
+			tooltip.show();
+		},
+		style,
+		children
+	});
+};
+TooltipTrigger.displayName = "Tooltip.Trigger";
+//#endregion
+//#region src/components/Tooltip/Tooltip.tsx
+const Tooltip = Object.assign(TooltipRoot, {
+	Trigger: TooltipTrigger,
+	Content: TooltipContent,
+	Arrow: TooltipArrow
+});
 Tooltip.displayName = "Tooltip";
 //#endregion
 //#region src/utils/devWarning.ts

package/package.json

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