@vellira-ui/react-native 2.39.5 → 2.40.0

package/dist/index.d.ts

@@ -6,7 +6,7 @@ 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 { Tooltip } from './components/Tooltip';

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,18 @@ 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/Tooltip.styles.ts
 const createStyles$3 = (theme) => StyleSheet.create({

package/package.json

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