@idealyst/components 1.2.125 → 1.2.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.125",
+  "version": "1.2.127",
   "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,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.125",
+    "@idealyst/theme": "^1.2.127",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -111,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.125",
-    "@idealyst/tooling": "^1.2.125",
+    "@idealyst/theme": "^1.2.127",
+    "@idealyst/tooling": "^1.2.127",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/TabBar/TabBar.native.tsx

@@ -173,7 +173,6 @@ const TabBar = forwardRef<IdealystElement, TabBarProps>(({
             // Apply icon variants (size, disabled, iconPosition)
             tabBarIconStyles.useVariants({
               size,
-              active: isActive,
               disabled: Boolean(item.disabled),
               iconPosition,
             });
@@ -181,7 +180,6 @@ const TabBar = forwardRef<IdealystElement, TabBarProps>(({
             // Compute dynamic styles for this tab - call as functions for theme reactivity
             const tabStyle = (tabBarTabStyles.tab as any)({ type, size, active: isActive, pillMode, justify });
             const labelStyle = (tabBarLabelStyles.tabLabel as any)({ type, active: isActive, pillMode });
-            const iconContainerStyle = (tabBarIconStyles.tabIcon as any)({});
 
             const icon = renderIcon(item.icon, isActive, iconSize);
 
@@ -201,7 +199,7 @@ const TabBar = forwardRef<IdealystElement, TabBarProps>(({
                 accessibilityLabel={item.label}
                 accessibilityState={{ selected: isActive, disabled: item.disabled }}
               >
-                {icon && <View style={iconContainerStyle}>{icon}</View>}
+                {icon && <View style={tabBarIconStyles.tabIcon as any}>{icon}</View>}
                 <Text style={labelStyle}>{item.label}</Text>
               </TouchableOpacity>
             );

package/src/TabBar/TabBar.styles.tsx

@@ -92,15 +92,24 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
     },
 
     tab: ({ type = 'standard', size = 'md', active = false, pillMode: _pillMode = 'light', disabled = false, iconPosition = 'left', justify = 'start' }: TabBarDynamicProps) => {
-        // Tab padding for pills — narrower than standard tabs
-        const pillsPaddingMap: Record<Size, { paddingVertical: number; paddingHorizontal: number }> = {
-            xs: { paddingVertical: 2, paddingHorizontal: 8 },
-            sm: { paddingVertical: 3, paddingHorizontal: 10 },
-            md: { paddingVertical: 4, paddingHorizontal: 12 },
-            lg: { paddingVertical: 6, paddingHorizontal: 16 },
-            xl: { paddingVertical: 8, paddingHorizontal: 20 },
+        // Resolve padding at runtime — can't use $iterator with runtime `type` check
+        // Use explicit top/bottom/left/right for cross-platform compatibility
+        const pillsPaddingMap: Record<Size, { paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number }> = {
+            xs: { paddingTop: 2, paddingBottom: 2, paddingLeft: 8, paddingRight: 8 },
+            sm: { paddingTop: 3, paddingBottom: 3, paddingLeft: 10, paddingRight: 10 },
+            md: { paddingTop: 4, paddingBottom: 4, paddingLeft: 12, paddingRight: 12 },
+            lg: { paddingTop: 6, paddingBottom: 6, paddingLeft: 16, paddingRight: 16 },
+            xl: { paddingTop: 8, paddingBottom: 8, paddingLeft: 20, paddingRight: 20 },
         };
-        const tabPadding = type === 'pills' ? pillsPaddingMap[size] : {};
+        const sizeValues = theme.sizes.tabBar[size];
+        const tabPadding = type === 'pills'
+            ? pillsPaddingMap[size]
+            : {
+                paddingTop: sizeValues.padding,
+                paddingBottom: sizeValues.padding,
+                paddingLeft: sizeValues.padding,
+                paddingRight: sizeValues.padding,
+            };
 
         // Color based on type and active state
         let color = active ? theme.colors.text.primary : theme.colors.text.secondary;
@@ -128,9 +137,6 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
                 size: {
                     fontSize: theme.sizes.$tabBar.fontSize,
                     lineHeight: theme.sizes.$tabBar.lineHeight,
-                    paddingTop: type === 'pills' ? undefined : theme.sizes.$tabBar.padding,
-                    paddingBottom: type === 'pills' ? undefined : theme.sizes.$tabBar.paddingBottom,
-                    paddingHorizontal: type === 'pills' ? undefined : theme.sizes.$tabBar.padding,
                 },
             },
             _web: {
@@ -165,19 +171,25 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
         } as const;
     },
 
-    tabIcon: ({ active: _active = false, disabled = false, iconPosition = 'left' }: TabBarDynamicProps) => ({
+    tabIcon: {
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        opacity: disabled ? 0.5 : 1,
-        marginBottom: iconPosition === 'top' ? 2 : 0,
         variants: {
             size: {
                 width: theme.sizes.$tabBar.fontSize,
                 height: theme.sizes.$tabBar.fontSize,
             },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+            iconPosition: {
+                top: { marginBottom: 2 },
+                left: { marginBottom: 0 },
+            },
         },
-    }),
+    },
 
     indicator: ({ type = 'standard', pillMode = 'light' }: TabBarDynamicProps) => {
         const backgroundColor = type === 'pills'
@@ -186,8 +198,8 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
 
         const typeStyles = type === 'pills' ? {
             borderRadius: 9999,
-            bottom: 3,
-            top: 3,
+            top: 4,
+            bottom: 4,
             left: 0,
         } : {
             bottom: -1,

package/src/TabBar/TabBar.web.tsx

@@ -66,10 +66,19 @@ const Tab: React.FC<TabProps> = ({
 }) => {
   const iconSize = ICON_SIZES[size || 'md'] || 18;
 
+  // Apply tab variants (size) for variant expansion (padding, fontSize, lineHeight)
+  tabBarTabStyles.useVariants({
+    size,
+  });
+
+  // Apply label variants (size) for variant expansion
+  tabBarLabelStyles.useVariants({
+    size,
+  });
+
   // Apply icon variants (size, disabled, iconPosition)
   tabBarIconStyles.useVariants({
     size,
-    active: isActive,
     disabled: Boolean(item.disabled),
     iconPosition,
   });