@idealyst/components 1.2.121 → 1.2.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.121",
+  "version": "1.2.123",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,12 +56,13 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.121",
+    "@idealyst/theme": "^1.2.123",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
     "@react-native-vector-icons/material-design-icons": ">=12.0.0",
     "@react-native/normalize-colors": "*",
+    "@react-navigation/bottom-tabs": ">=7.0.0",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-edge-to-edge": "*",
@@ -80,6 +81,9 @@
     "@mdi/react": {
       "optional": true
     },
+    "@react-navigation/bottom-tabs": {
+      "optional": true
+    },
     "@react-native/normalize-colors": {
       "optional": true
     },
@@ -107,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.121",
-    "@idealyst/tooling": "^1.2.121",
+    "@idealyst/theme": "^1.2.123",
+    "@idealyst/tooling": "^1.2.123",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Menu/Menu.styles.tsx

@@ -155,6 +155,14 @@ export const menuStyles = defineStyle('Menu', (theme: Theme) => ({
                 height: theme.sizes.$menu.iconSize,
                 fontSize: theme.sizes.$menu.iconSize,
             },
+            intent: {
+                neutral: {},
+                primary: { color: theme.intents.primary.primary },
+                success: { color: theme.intents.success.primary },
+                danger: { color: theme.intents.danger.primary },
+                warning: { color: theme.intents.warning.primary },
+                info: { color: theme.intents.info.primary },
+            },
         },
     }),
 
@@ -165,6 +173,14 @@ export const menuStyles = defineStyle('Menu', (theme: Theme) => ({
             size: {
                 fontSize: theme.sizes.$menu.labelFontSize,
             },
+            intent: {
+                neutral: {},
+                primary: { color: theme.intents.primary.primary },
+                success: { color: theme.intents.success.primary },
+                danger: { color: theme.intents.danger.primary },
+                warning: { color: theme.intents.warning.primary },
+                info: { color: theme.intents.info.primary },
+            },
         },
     }),
 }));

package/src/Menu/MenuItem.native.tsx

@@ -20,9 +20,10 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
   });
 
   // Call styles as functions to get theme-reactive styles
-  const itemStyle = (menuItemStyles.item as any)({ intent: item.intent || 'neutral' });
-  const iconStyle = (menuItemStyles.icon as any)({});
-  const labelStyle = (menuItemStyles.label as any)({});
+  const intent = item.intent || 'neutral';
+  const itemStyle = (menuItemStyles.item as any)({ intent });
+  const iconStyle = (menuItemStyles.icon as any)({ intent });
+  const labelStyle = (menuItemStyles.label as any)({ intent });
 
   // Extract icon size from theme variant (fontSize is set by $menu.iconSize)
   const iconSize = iconStyle.fontSize || iconStyle.width || 20;

package/src/Menu/MenuItem.styles.tsx

@@ -118,6 +118,14 @@ export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
                 height: theme.sizes.$menu.iconSize,
                 fontSize: theme.sizes.$menu.iconSize,
             },
+            intent: {
+                neutral: {},
+                primary: { color: theme.intents.primary.primary },
+                success: { color: theme.intents.success.primary },
+                danger: { color: theme.intents.danger.primary },
+                warning: { color: theme.intents.warning.primary },
+                info: { color: theme.intents.info.primary },
+            },
         },
         _web: {
             display: 'flex',
@@ -131,6 +139,14 @@ export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
             size: {
                 fontSize: theme.sizes.$menu.labelFontSize,
             },
+            intent: {
+                neutral: {},
+                primary: { color: theme.intents.primary.primary },
+                success: { color: theme.intents.success.primary },
+                danger: { color: theme.intents.danger.primary },
+                warning: { color: theme.intents.warning.primary },
+                info: { color: theme.intents.info.primary },
+            },
         },
     }),
 }));

package/src/Menu/MenuItem.web.tsx

@@ -22,9 +22,10 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
   });
 
   // Compute dynamic styles - call as functions for theme reactivity
-  const itemStyle = (menuItemStyles.item as any)({ intent: item.intent || 'neutral' });
-  const iconStyle = (menuItemStyles.icon as any)({});
-  const labelStyle = (menuItemStyles.label as any)({});
+  const intent = item.intent || 'neutral';
+  const itemStyle = (menuItemStyles.item as any)({ intent });
+  const iconStyle = (menuItemStyles.icon as any)({ intent });
+  const labelStyle = (menuItemStyles.label as any)({ intent });
 
   const itemProps = getWebProps([itemStyle]);
   const iconProps = getWebProps([iconStyle]);

package/src/Screen/Screen.native.tsx

@@ -1,7 +1,8 @@
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useContext, useEffect } from 'react';
 import { View as RNView, ScrollView as RNScrollView, Keyboard, Platform } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { useSafeAreaInsets } from '@idealyst/theme';
+import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 import type { IdealystElement } from '../utils/refTypes';
@@ -16,6 +17,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   safeAreaRight,
   scrollable = true,
   avoidKeyboard = true,
+  keyboardAvoidingOffset = 0,
   contentInset,
   onLayout,
   // Spacing variants from ContainerStyleProps
@@ -38,6 +40,9 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   const applySafeAreaLeft = safeAreaLeft ?? safeArea;
   const applySafeAreaRight = safeAreaRight ?? safeArea;
 
+  // Detect tab bar height when inside a bottom tab navigator
+  const tabBarHeight = useContext(BottomTabBarHeightContext) ?? 0;
+
   // Animated keyboard offset
   const keyboardOffset = useSharedValue(0);
 
@@ -49,7 +54,10 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
     const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
 
     const showSubscription = Keyboard.addListener(showEvent, (e) => {
-      keyboardOffset.value = withTiming(e.endCoordinates.height, {
+      // Subtract the tab bar height and any manual offset since those areas
+      // are already occupied and don't need additional padding
+      const adjustedHeight = Math.max(0, e.endCoordinates.height - tabBarHeight - keyboardAvoidingOffset);
+      keyboardOffset.value = withTiming(adjustedHeight, {
         duration: Platform.OS === 'ios' ? e.duration : 250,
         easing: Easing.out(Easing.cubic),
       });
@@ -66,7 +74,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
       showSubscription.remove();
       hideSubscription.remove();
     };
-  }, [avoidKeyboard]);
+  }, [avoidKeyboard, tabBarHeight, keyboardAvoidingOffset]);
 
   const animatedKeyboardStyle = useAnimatedStyle(() => ({
     paddingBottom: keyboardOffset.value,

package/src/Screen/types.ts

@@ -84,6 +84,15 @@ export interface ScreenProps extends ContainerStyleProps {
    */
   avoidKeyboard?: boolean;
 
+  /**
+   * Additional offset to subtract from the keyboard height when avoiding the keyboard.
+   * The Screen automatically accounts for the tab bar height when inside a tab navigator,
+   * but this prop can be used for other fixed UI elements that occupy space at the bottom.
+   * @default 0
+   * @platform native
+   */
+  keyboardAvoidingOffset?: number;
+
   /**
    * Called when the layout of the screen changes.
    * Provides the new width, height, x, and y coordinates.

package/src/TabBar/TabBar.styles.tsx

@@ -127,7 +127,9 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
             variants: {
                 size: {
                     fontSize: theme.sizes.$tabBar.fontSize,
-                    padding: theme.sizes.$tabBar.padding,
+                    paddingHorizontal: theme.sizes.$tabBar.padding,
+                    paddingTop: theme.sizes.$tabBar.padding,
+                    paddingBottom: theme.sizes.$tabBar.paddingBottom,
                     lineHeight: theme.sizes.$tabBar.lineHeight,
                 },
             },