@vellira-ui/react-native 2.59.3 → 2.60.0

package/dist/index.js

@@ -5297,7 +5297,7 @@ const createStyles$6 = (theme) => StyleSheet.create({
 //#region src/components/Tabs/List/TabsList.tsx
 const TabsList = ({ children, scrollable: scrollableProp, style }) => {
 	const styles = useThemeStyles(createStyles$6);
-	const { orientation, variant } = useTabs();
+	const { mode, orientation, variant } = useTabs();
 	const scrollable = scrollableProp ?? false;
 	const listStyle = [
 		styles.list,
@@ -5309,13 +5309,13 @@ const TabsList = ({ children, scrollable: scrollableProp, style }) => {
 	];
 	if (scrollable && orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollView, {
 		horizontal: true,
-		accessibilityRole: "tablist",
+		accessibilityRole: mode === "tabs" ? "tablist" : void 0,
 		showsHorizontalScrollIndicator: false,
 		contentContainerStyle: listStyle,
 		children
 	});
 	return /* @__PURE__ */ jsx(View, {
-		accessibilityRole: "tablist",
+		accessibilityRole: mode === "tabs" ? "tablist" : void 0,
 		style: listStyle,
 		children
 	});
@@ -5476,6 +5476,37 @@ const createStyles$5 = (theme) => StyleSheet.create({
 	tabIconActive: { color: theme.components.tabs.primary.trigger.active.fg },
 	tabIconPillsActive: { color: theme.components.tabs.primary.pills.active.fg }
 });
+const getTriggerStyle = ({ styles, isSm, isLg, isOnlyIcon, isVertical, isPills, isSegmented, isLine, isActive, isDisabled, borderColor, backgroundColor, segmentedActiveBorderColor, style }) => [
+	styles.tab,
+	isSm && styles.tabSm,
+	isLg && styles.tabLg,
+	isOnlyIcon && styles.tabIconOnly,
+	isOnlyIcon && isSm && styles.tabIconOnlySm,
+	isOnlyIcon && isLg && styles.tabIconOnlyLg,
+	isVertical && styles.tabVertical,
+	isPills && styles.tabPills,
+	isPills && isOnlyIcon && styles.tabPillsIconOnly,
+	isSegmented && styles.tabSegmented,
+	isSegmented && isSm && styles.tabSegmentedSm,
+	isSegmented && isLg && styles.tabSegmentedLg,
+	isSegmented && isOnlyIcon && styles.tabSegmentedIconOnly,
+	isSegmented && isOnlyIcon && isSm && styles.tabSegmentedIconOnlySm,
+	isSegmented && isOnlyIcon && isLg && styles.tabSegmentedIconOnlyLg,
+	{
+		borderColor: isLine ? "transparent" : borderColor,
+		backgroundColor
+	},
+	isSegmented && isActive && {
+		borderColor: segmentedActiveBorderColor,
+		backgroundColor: "transparent"
+	},
+	isPills && isActive && {
+		borderColor: "transparent",
+		backgroundColor: "transparent"
+	},
+	isDisabled && styles.tabDisabled,
+	style
+];
 //#endregion
 //#region src/components/Tabs/Trigger/TabsBadge.tsx
 const TabsBadge = ({ children, style }) => {
@@ -5508,19 +5539,21 @@ const TabsIcon = ({ children, style }) => {
 TabsIcon.displayName = "Tabs.Icon";
 //#endregion
 //#region src/components/Tabs/Trigger/TabsTrigger.tsx
-const TabsTrigger = ({ value, children, icon, badge, description, disabled, style, textStyle }) => {
+const TabsTrigger = ({ value, children, asChild = false, icon, badge, description, disabled, style, textStyle }) => {
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$5);
-	const { value: selectedValue, variant, color, size, orientation, disabled: rootDisabled, setValue, registerTrigger, registerTriggerLayout } = useTabs();
-	const isDisabled = rootDisabled || disabled;
+	const { value: selectedValue, variant, color, size, mode, orientation, disabled: rootDisabled, setValue, registerTrigger, registerTriggerLayout } = useTabs();
+	const isDisabled = rootDisabled || Boolean(disabled);
 	const isActive = selectedValue === value;
+	const child = asChild && isValidElement(children) ? children : void 0;
+	const visibleChildren = child ? child.props.children : children;
 	const isPills = variant === "pills";
 	const isLine = variant === "line";
 	const isSegmented = variant === "segmented";
 	const isVertical = orientation === "vertical";
 	const isSm = size === "sm";
 	const isLg = size === "lg";
-	const isOnlyIcon = icon != null && children == null && badge == null;
+	const isOnlyIcon = icon != null && visibleChildren == null && badge == null;
 	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;
@@ -5539,91 +5572,114 @@ const TabsTrigger = ({ value, children, icon, badge, description, disabled, styl
 	const handleLayout = (event) => {
 		registerTriggerLayout(value, event.nativeEvent.layout);
 	};
+	const handlePress = (_event) => {
+		if (isDisabled || isActive) return;
+		setValue(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: isDisabled,
-		accessibilityRole: "tab",
-		accessibilityState: {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon != null && /* @__PURE__ */ jsx(View, {
+			style: styles.tabIcon,
+			children: renderedIcon
+		}),
+		visibleChildren != null && /* @__PURE__ */ jsx(Text, {
+			numberOfLines: 2,
+			ellipsizeMode: "tail",
+			style: [
+				styles.tabText,
+				isSm && styles.tabTextSm,
+				isLg && styles.tabTextLg,
+				{ color: isSegmented && isActive ? palette.segmented.active.fg : state.fg },
+				textStyle
+			],
+			children: visibleChildren
+		}),
+		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
+			})
+		})
+	] });
+	const baseStyle = getTriggerStyle({
+		styles,
+		isSm,
+		isLg,
+		isOnlyIcon,
+		isVertical,
+		isPills,
+		isSegmented,
+		isLine,
+		isActive,
+		isDisabled,
+		borderColor: state.border,
+		backgroundColor: state.bg,
+		segmentedActiveBorderColor: palette.segmented.active.border,
+		style
+	});
+	if (child) return cloneElement(child, {
+		accessibilityRole: mode === "tabs" ? "tab" : void 0,
+		accessibilityState: mode === "tabs" ? {
 			selected: isActive,
 			disabled: isDisabled
+		} : { disabled: isDisabled },
+		disabled: isDisabled,
+		onLayout: (event) => {
+			child.props.onLayout?.(event);
+			handleLayout(event);
 		},
-		onPress: () => {
-			if (!isDisabled && !isActive) setValue(value);
+		onPress: (event) => {
+			child.props.onPress?.(event);
+			if (isDisabled) return;
+			handlePress(event);
 		},
+		style: [baseStyle, child.props.style],
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Pressable, {
+		disabled: isDisabled,
+		accessibilityRole: mode === "tabs" ? "tab" : void 0,
+		accessibilityState: mode === "tabs" ? {
+			selected: isActive,
+			disabled: isDisabled
+		} : { disabled: isDisabled },
+		onPress: handlePress,
 		onLayout: handleLayout,
-		style: ({ pressed }) => [
-			styles.tab,
-			isSm && styles.tabSm,
-			isLg && styles.tabLg,
-			isOnlyIcon && styles.tabIconOnly,
-			isOnlyIcon && isSm && styles.tabIconOnlySm,
-			isOnlyIcon && isLg && styles.tabIconOnlyLg,
-			isVertical && styles.tabVertical,
-			isPills && styles.tabPills,
-			isPills && isOnlyIcon && styles.tabPillsIconOnly,
-			isSegmented && styles.tabSegmented,
-			isSegmented && isSm && styles.tabSegmentedSm,
-			isSegmented && isLg && styles.tabSegmentedLg,
-			isSegmented && isOnlyIcon && styles.tabSegmentedIconOnly,
-			isSegmented && isOnlyIcon && isSm && styles.tabSegmentedIconOnlySm,
-			isSegmented && isOnlyIcon && isLg && styles.tabSegmentedIconOnlyLg,
-			{
-				borderColor: isLine ? "transparent" : state.border,
-				backgroundColor: pressed ? pressedState.bg : state.bg
-			},
-			isSegmented && isActive && {
-				borderColor: palette.segmented.active.border,
-				backgroundColor: "transparent"
-			},
-			isPills && isActive && {
-				borderColor: "transparent",
-				backgroundColor: "transparent"
-			},
-			isDisabled && styles.tabDisabled,
+		style: ({ pressed }) => getTriggerStyle({
+			styles,
+			isSm,
+			isLg,
+			isOnlyIcon,
+			isVertical,
+			isPills,
+			isSegmented,
+			isLine,
+			isActive,
+			isDisabled,
+			borderColor: state.border,
+			backgroundColor: pressed ? pressedState.bg : state.bg,
+			segmentedActiveBorderColor: palette.segmented.active.border,
 			style
-		],
-		children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-			icon != null && /* @__PURE__ */ jsx(View, {
-				style: styles.tabIcon,
-				children: renderedIcon
-			}),
-			children != null && /* @__PURE__ */ jsx(Text, {
-				numberOfLines: 2,
-				ellipsizeMode: "tail",
-				style: [
-					styles.tabText,
-					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
-				})
-			})
-		] })
+		}),
+		children: content
 	});
 };
 TabsTrigger.displayName = "Tabs.Trigger";
@@ -5644,7 +5700,7 @@ const createStyles$4 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#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 TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChange, orientation = "horizontal", activationMode = "automatic", mode = "tabs", variant = "line", color = "primary", size = "md", keepMounted = false, lazyMount = false, disabled = false, style }) => {
 	const styles = useThemeStyles(createStyles$4);
 	const isControlled = controlledValue !== void 0;
 	const [version, setVersion] = useState(0);
@@ -5701,6 +5757,7 @@ const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChang
 	const contextValue = useMemo(() => ({
 		value,
 		setValue,
+		mode,
 		orientation,
 		activationMode,
 		variant,
@@ -5719,6 +5776,7 @@ const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChang
 		disabled,
 		keepMounted,
 		lazyMount,
+		mode,
 		orientation,
 		getTriggerLayout,
 		indicatorVersion,

package/package.json

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