### Basic FlowTab Component Setup

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

This is a fundamental example of setting up the FlowTab component. It defines the navigation items, including icons and labels, for a basic bottom navigation bar. This serves as the starting point for integrating FlowTab into a Compose Multiplatform application.

```kotlin
FlowTab(
    items = listOf(
        TabItem(Icons.Filled.Home, "Home"),
        TabItem(Icons.Filled.Favorite, "Favorites"),
        TabItem(Icons.Filled.Settings, "Settings")
    ),
    selectedTabIndex = 0,
    onTabSelected = { index -> /* Handle tab selection */ }
)
```

--------------------------------

### Kotlin Style Guide Example for FlowTab

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/CONTRIBUTING.md

Demonstrates correct and incorrect Kotlin coding styles for function definition and logic, emphasizing readability and adherence to conventions.

```kotlin
// Good
fun calculateItemWidth(
    containerWidth: Dp,
    itemCount: Int
): Dp {
    return if (itemCount > 0) {
        containerWidth / itemCount
    } else {
        0.dp
    }
}

// Bad
fun calculateItemWidth(containerWidth:Dp,itemCount:Int):Dp{
    return if(itemCount>0) containerWidth/itemCount else 0.dp
}

```

--------------------------------

### Basic FlowTab Bottom Navigation Setup in Compose

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

A minimal Jetpack Compose example demonstrating how to integrate FlowTab's BottomNavigation component. It shows how to define navigation items, manage the selected state, and handle item selection callbacks.

```kotlin
@Composable
fun MyApp() {
    var selectedScreen by remember { mutableStateOf("home") }

    val navItems = remember {
        listOf(
            NavItem(
                id = "home",
                label = "Home",
                icon = Icons.Outlined.Home,
                selectedIcon = Icons.Filled.Home
            ),
            NavItem(
                id = "search",
                label = "Search",
                icon = Icons.Default.Search,
                type = NavItemType.Search
            ),
            NavItem(
                id = "profile",
                label = "Profile",
                icon = Icons.Outlined.Person,
                selectedIcon = Icons.Filled.Person,
                badge = BadgeData(count = 3)
            )
        )
    }

    Scaffold(
        bottomBar = {
            BottomNavigation(
                items = navItems,
                selectedId = selectedScreen,
                onItemSelected = {
                    selectedScreen = it.id
                }
            )
        }
    ) {
        Box(modifier = Modifier.padding(it)) {
            when (selectedScreen) {
                "home" -> HomeScreen()
                "search" -> SearchScreen()
                "profile" -> ProfileScreen()
            }
        }
    }
}
```

--------------------------------

### Gradle Dependency Installation for FlowTab

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Instructions for adding the FlowTab library to your project using Gradle. It supports both Kotlin DSL (libs.versions.toml) and Groovy DSL.

```toml
[versions]
flowtab-cmp = "0.5.1-beta"

[libraries]
flowtab-cmp = { module = "io.github.alims-repo:flowtab-cmp", version.ref = "flowtab-cmp" }
```

```kotlin
dependencies {
    implementation(libs.flowtab.cmp)
}
```

```groovy
dependencies {
    implementation 'io.github.alims-repo:flowtab-cmp:0.5.1-beta'
}
```

--------------------------------

### Applying Glassmorphism Effects with Haze

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

This example demonstrates how to apply glassmorphism effects, including optional blur effects, using the Haze integration within FlowTab-CMP. This allows for visually appealing UI elements with a frosted glass look. It requires the Haze library as a dependency.

```kotlin
val hazeState = rememberHazeState()

HazeBox(state = hazeState) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black.copy(alpha = 0.5f))
    )
}

HazeStyle(
    color = Color.White,
    tint = Color.White.copy(alpha = 0.1f),
    horizontalOffset = 50.dp,
    noiseFactor = 0.05f
)

// Apply haze to specific composables
Box(
    modifier = Modifier
        .clip(RoundedCornerShape(16.dp))
        .background(Color.White.copy(alpha = 0.2f))
        .haze(hazeState)
) {
    // Content with glassmorphism effect
}
```

--------------------------------

### Implement Bottom Navigation Bar (Compose)

Source: https://context7.com/alims-repo/flowtab-cmp/llms.txt

This example demonstrates how to use the `BottomNavigation` composable within a `Scaffold`. It defines navigation items, manages the selected state, and handles item selection callbacks to update the UI.

```kotlin
@Composable
fun MyApp() {
    var selectedScreen by remember { mutableStateOf("home") }

    val navItems = remember {
        listOf(
            NavItem(
                id = "home",
                label = "Home",
                icon = Icons.Outlined.Home,
                selectedIcon = Icons.Filled.Home
            ),
            NavItem(
                id = "search",
                label = "Search",
                icon = Icons.Default.Search,
                type = NavItemType.Search
            ),
            NavItem(
                id = "profile",
                label = "Profile",
                icon = Icons.Outlined.Person,
                selectedIcon = Icons.Filled.Person,
                badge = BadgeData(count = 3)
            )
        )
    }

    Scaffold(
        bottomBar = {
            BottomNavigation(
                items = navItems,
                selectedId = selectedScreen,
                onItemSelected = { item ->
                    selectedScreen = item.id
                }
            )
        }
    ) { padding ->
        Box(modifier = Modifier.padding(padding)) {
            when (selectedScreen) {
                "home" -> HomeScreen()
                "search" -> SearchScreen()
                "profile" -> ProfileScreen()
            }
        }
    }
}
```

--------------------------------

### Configure Bottom Navigation Appearance (Compose)

Source: https://context7.com/alims-repo/flowtab-cmp/llms.txt

This example shows how to customize the `BottomNavigation`'s appearance and behavior using the `NavConfig` object. It allows control over dimensions, colors, animations, blur effects, labels, borders, and indicator styles.

```kotlin
val customConfig = NavConfig(
    height = 60.dp,
    cornerRadius = 60.dp,
    maxWidth = 460.dp,
    iconsSize = 20.dp,
    animationDuration = 250,
    enableBlur = true,
    blurIntensity = 0.95f,
    showLabels = true,
    hideLabelsOnSearchExpand = true,
    showBorder = true,
    elevation = 8.dp,
    navColor = NavColor(
        backgroundColor = Color(0xFF1E1E1E),
        borderColor = Color(0xFF3A3A3A),
        selectedIconColor = Color(0xFF00D9FF),
        unSelectedIconColor = Color(0xFF666666),
        selectedTextColor = Color(0xFF00D9FF),
        unSelectedTextColor = Color(0xFF999999),
        selectedRippleColor = Color(0x3300D9FF)
    ),
    navIndicator = NavIndicator.Ripple(
        color = MaterialTheme.colorScheme.primaryContainer,
        indicatorPadding = 4.dp
    )
)

BottomNavigation(
    items = navItems,
    selectedId = selectedId,
    onItemSelected = { item -> selectedId = item.id },
    config = customConfig
)
```

--------------------------------

### Unit Test Bottom Navigation Selection in Kotlin

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Provides an example of a unit test written in Kotlin using Jetpack Compose testing utilities. This test verifies that the bottom navigation component correctly handles item selection and updates the selected ID.

```kotlin
@Test
fun `bottom navigation handles item selection correctly`() {
    var selectedId = "home"

    composeTestRule.setContent {
        BottomNavigation(
            items = listOf(
                NavItem(id = "home", label = "Home", icon = Icons.Default.Home),
                NavItem(id = "profile", label = "Profile", icon = Icons.Default.Person)
            ),
            selectedId = selectedId,
            onItemSelected = { item -> selectedId = item.id }
        )
    }

    composeTestRule.onNodeWithText("Profile").performClick()
    assertEquals("profile", selectedId)
}
```

--------------------------------

### Implementing Isolated Action Buttons in Bottom Navigation (Kotlin)

Source: https://context7.com/alims-repo/flowtab-cmp/llms.txt

Demonstrates how to add FAB-like action buttons that do not participate in the navigation selection state. This example shows an 'Add' button that rotates when activated, providing visual feedback for actions separate from navigation.

```kotlin
@Composable
fun AppWithIsolatedAction() {
    var rotation by remember { mutableStateOf(0f) }
    val animatedRotation by animateFloatAsState(rotation)
    var selectedId by remember { mutableStateOf("home") }

    val navItems = remember(animatedRotation) {
        listOf(
            NavItem(id = "home", label = "Home", icon = Icons.Outlined.Home, selectedIcon = Icons.Filled.Home),
            NavItem(id = "favorites", label = "Favorites", icon = Icons.Outlined.Favorite, selectedIcon = Icons.Filled.Favorite),
            NavItem(id = "profile", label = "Profile", icon = Icons.Outlined.Person, selectedIcon = Icons.Filled.Person),
            NavItem(
                id = "add",
                label = "Add",
                icon = Icons.Outlined.Add,
                type = NavItemType.Isolated(animatedRotation)  // Rotates icon when activated
            )
        )
    }

    BottomNavigation(
        items = navItems,
        selectedId = selectedId,
        onItemSelected = { item ->
            if (item.id == "add") {
                // Toggle rotation for visual feedback
                rotation = if (rotation == 45f) 0f else 45f
                // Show modal, dialog, or perform action
            } else {
                if (rotation == 45f) rotation = 0f
                selectedId = item.id
            }
        }
    )
}
```

--------------------------------

### Integrate BottomNavigation with Navigation Compose

Source: https://context7.com/alims-repo/flowtab-cmp/llms.txt

Demonstrates how to use the FlowTab BottomNavigation component with AndroidX Navigation Compose for declarative navigation. This setup allows for seamless navigation between different composable screens triggered by item selections.

```kotlin
@Composable
fun AppWithNavigation() {
    val navController = rememberNavController()
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route ?: "home"

    val navItems = remember {
        listOf(
            NavItem(id = "home", label = "Home", icon = Icons.Outlined.Home, selectedIcon = Icons.Filled.Home),
            NavItem(id = "search", label = "Search", icon = Icons.Outlined.Search, selectedIcon = Icons.Filled.Search),
            NavItem(id = "profile", label = "Profile", icon = Icons.Outlined.Person, selectedIcon = Icons.Filled.Person)
        )
    }

    Scaffold(
        bottomBar = {
            BottomNavigation(
                items = navItems,
                selectedId = currentRoute,
                onItemSelected = {
                    navController.navigate(it.id) {
                        popUpTo(navController.graph.findStartDestination().id) {
                            saveState = true
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    ) {
        NavHost(
            navController = navController,
            startDestination = "home",
            modifier = Modifier.padding(it)
        ) {
            composable("home") { HomeScreen() }
            composable("search") { SearchScreen() }
            composable("profile") { ProfileScreen() }
        }
    }
}
```

--------------------------------

### Define Navigation Item Data (Compose)

Source: https://context7.com/alims-repo/flowtab-cmp/llms.txt

This snippet illustrates various ways to define `NavItem` objects for the bottom navigation bar. It includes examples for standard items, items with badges (count or dot), expandable search items, and isolated action buttons.

```kotlin
// Standard navigation item with selected/unselected icons
NavItem(
    id = "home",
    label = "Home",
    icon = Icons.Outlined.Home,
    selectedIcon = Icons.Filled.Home
)

// Navigation item with notification badge count
NavItem(
    id = "notifications",
    label = "Notifications",
    icon = Icons.Outlined.Notifications,
    selectedIcon = Icons.Filled.Notifications,
    badge = BadgeData(count = 5)
)

// Navigation item with dot indicator badge
NavItem(
    id = "messages",
    label = "Messages",
    icon = Icons.Outlined.Message,
    badge = BadgeData(showDot = true)
)

// Expandable search bar item
NavItem(
    id = "search",
    label = "Search",
    icon = Icons.Default.Search,
    type = NavItemType.Search
)

// Isolated FAB-like action button with rotation animation
NavItem(
    id = "add",
    label = "Add",
    icon = Icons.Default.Add,
    type = NavItemType.Isolated(rotation = 45f)
)
```

--------------------------------

### Build and Test FlowTab Project

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/CONTRIBUTING.md

Gradle commands to build the entire project and run the unit tests for FlowTab.

```bash
./gradlew build
./gradlew test

```

--------------------------------

### Display Project Version, License, and GitHub Link (JavaScript)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

Logs project version, license details, and GitHub repository URL to the browser's developer console. It uses CSS styling to enhance the readability of the output. No external dependencies are required.

```javascript
console.log('%cFlowTab-CMP', 'color: #2563eb; font-size: 16px; font-weight: bold;');
console.log('%cVersion 0.5.1-beta | Apache 2.0 License', 'color: #6b7280; font-size: 12px;');
console.log('%cGitHub: https://github.com/Alims-Repo/FlowTab-CMP', 'color: #3b82f6;');
```

--------------------------------

### Implement Best Practices for Navigation Items and Callbacks in Kotlin

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Demonstrates recommended practices for managing navigation items and handling search-related callbacks in Kotlin. It emphasizes using `remember` for stable item lists and distinguishing between `onQueryChange` and `onSearch` to optimize performance.

```kotlin
// ✅ Keep NavItems stable with remember
val navItems = remember {
    listOf(
        NavItem(id = "home", label = "Home", icon = Icons.Default.Home),
        NavItem(id = "search", label = "Search", icon = Icons.Default.Search)
    )
}

// ✅ Use descriptive, unique IDs
NavItem(id = "user_profile", label = "Profile", icon = Icons.Default.Person)
NavItem(id = "settings_screen", label = "Settings", icon = Icons.Default.Settings)

// ✅ Handle search callbacks appropriately
onQueryChange = { query -> viewModel.updateSearchQuery(query) }
onSearch = { query -> viewModel.performSearch(query) }

// ✅ Match indicator style to your design language
navIndicator = NavIndicator.Line()  // Material Design 3
navIndicator = NavIndicator.Dot()   // Minimal/Instagram style
navIndicator = NavIndicator.Ripple() // Bold/high contrast
```

```kotlin
// ❌ Don't recreate items every composition
val navItems = listOf(NavItem(...))  // Missing remember!

// ❌ Don't use generic or duplicate IDs
NavItem(id = "1", ...)
NavItem(id = "screen", ...)

// ❌ Don't ignore the difference between onQueryChange and onSearch
onQueryChange = { query -> performExpensiveSearch(query) }  // Too frequent!
```

--------------------------------

### Apply Glassmorphism with Haze to BottomNavigation

Source: https://context7.com/alims-repo/flowtab-cmp/llms.txt

Illustrates how to achieve glassmorphism effects by integrating Haze with the BottomNavigation component. This allows for blur effects over scrollable content, creating a modern and visually appealing UI.

```kotlin
@Composable
fun AppWithGlassmorphism() {
    val hazeState = remember { HazeState() }
    var selectedId by remember { mutableStateOf("home") }

    Scaffold(
        bottomBar = {
            BottomNavigation(
                items = navItems,
                selectedId = selectedId,
                onItemSelected = { item -> selectedId = item.id },
                hazeState = hazeState,
                config = NavConfig(
                    enableBlur = true,
                    blurIntensity = 0.95f
                )
            )
        }
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
                .hazeChild(state = hazeState)
        ) {
            items(100) {
                Text("Item $it", modifier = Modifier.padding(16.dp))
            }
        }
    }
}
```

--------------------------------

### Smooth Scroll for Anchor Links (JavaScript)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

Implements smooth scrolling behavior when clicking on anchor links (links starting with '#'). It prevents the default jump behavior and scrolls the target element into view with a smooth animation. Requires target elements to have corresponding IDs.

```javascript
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    const href = this.getAttribute('href');
    if (href !== '#') {
      e.preventDefault();
      const target = document.querySelector(href);
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth'
        });
      }
    }
  });
});
```

--------------------------------

### Implementing Expandable Search Bar Animation

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

This code illustrates the implementation of an expandable search bar with natural animations, a feature of FlowTab-CMP. It showcases how to integrate search functionality that animates smoothly, enhancing the user experience. This functionality relies on the animation capabilities provided by Jetpack Compose.

```kotlin
var searchExpanded by remember { mutableStateOf(false) }

Row(modifier = Modifier.fillMaxWidth()) {
    if (searchExpanded) {
        TextField(
            value = "",
            onValueChange = { /* TODO */ },
            label = { Text("Search") },
            modifier = Modifier.weight(1f).animateContentSize()
        )
        IconButton(onClick = { searchExpanded = false }) {
            Icon(Icons.Default.Close, contentDescription = "Close Search")
        }
    } else {
        Spacer(Modifier.weight(1f))
        IconButton(onClick = { searchExpanded = true }) {
            Icon(Icons.Default.Search, contentDescription = "Open Search")
        }
    }
}
```

--------------------------------

### Demo Section Styles (CSS)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

Styles the demo section with a grid layout for content and features. Includes styles for headings, paragraphs, and individual feature items with icons. Features hover effects for interactive elements.

```css
/* Demo Section */
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 40px; }
.demo-content h3 { margin-bottom: 16px; color: var(--text-primary); }
.demo-content p { margin-bottom: 16px; }
.demo-features { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.demo-feature { display: flex; gap: 12px; align-items: flex-start; transition: transform 0.3s ease; }
.demo-feature:hover { transform: translateX(4px); }
.demo-feature-icon { width: 32px; height: 32px; background: var(--primary-50); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 700; flex-shrink: 0; font-size: 1.1rem; }
.demo-feature-text strong { color: var(--text-primary); display: block; margin-bottom: 4px; }
.demo-feature-text { flex: 1; }
```

--------------------------------

### Configure FlowTab-CMP Parameters

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

This snippet shows how to customize the appearance and behavior of the BottomNavigation component by setting various parameters. These include height, corner radius, maximum width, animation duration, blur effects, and label visibility.

```kotlin
BottomNavigation(
    navController = navController,
    items = items,
    height = 70.dp, // Custom height
    cornerRadius = 30.dp, // Custom corner radius
    maxWidth = 500.dp, // Custom max width
    animationDuration = 300,
    enableBlur = false, // Disable blur
    showLabels = false // Hide labels
)
```

--------------------------------

### Implement Glassmorphism with Haze Effect (Kotlin)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Illustrates how to achieve a glassmorphism effect on a navigation bar using the `HazeState` and `hazeChild` modifiers. This allows the navigation bar to have blur effects over scrollable content.

```kotlin
val hazeState = remember { HazeState() }

Scaffold(
    bottomBar = {
        BottomNavigation(
            items = navItems,
            selectedId = selectedId,
            onItemSelected = { /* ... */ },
            hazeState = hazeState,  // Pass the haze state
            config = NavConfig(
                enableBlur = true,
                blurIntensity = 0.95f
            )
        )
    }
) {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .padding(padding)
            .hazeChild(state = hazeState)  // Apply to scrollable content
    ) {
        items(100) {
            Text("Item $index")
        }
    }
}
```

--------------------------------

### Preset Style Configurations for Bottom Navigation (Kotlin)

Source: https://context7.com/alims-repo/flowtab-cmp/llms.txt

Provides pre-built styling configurations for common design patterns like Instagram-style, Modern Pill, and Floating Minimal. These configurations define various visual aspects of the bottom navigation bar, such as height, corner radius, colors, and indicator styles.

```kotlin
val instagramConfig = NavConfig(
    height = 60.dp,
    cornerRadius = 0.dp,
    maxWidth = 600.dp,
    showLabels = false,
    iconsSize = 32.dp,
    enableBlur = false,
    showBorder = false,
    navColor = NavColor(
        backgroundColor = Color.Black,
        selectedIconColor = Color.White,
        unSelectedIconColor = Color.Gray,
        selectedRippleColor = Color.Transparent
    ),
    navIndicator = NavIndicator.Line(height = 2.dp, width = 32.dp)
)

val modernPillConfig = NavConfig(
    height = 60.dp,
    cornerRadius = 60.dp,
    maxWidth = 460.dp,
    enableBlur = true,
    blurIntensity = 0.95f,
    showLabels = true,
    showBorder = true,
    navColor = NavColor(
        backgroundColor = Color.White.copy(alpha = 0.9f),
        borderColor = Color(0xFFE0E0E0),
        selectedIconColor = Color(0xFF6200EE),
        unSelectedIconColor = Color(0xFF666666)
    ),
    navIndicator = NavIndicator.Ripple(indicatorPadding = 4.dp)
)

val floatingConfig = NavConfig(
    height = 56.dp,
    cornerRadius = 28.dp,
    maxWidth = 320.dp,
    showLabels = false,
    enableBlur = false,
    showBorder = false,
    elevation = 12.dp,
    navColor = NavColor(
        backgroundColor = Color(0xFF1E1E1E),
        selectedIconColor = Color(0xFF00D9FF),
        unSelectedIconColor = Color(0xFF666666)
    ),
    navIndicator = NavIndicator.Dot(size = 8.dp, indicatorPadding = 6.dp)
)
```

--------------------------------

### Implement Expandable Search Bar in Navigation (Kotlin)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Details how to create an expandable search bar within the navigation items. This involves setting the `NavItemType` to `Search` and providing callback functions for query changes and search submission.

```kotlin
val navItems = listOf(
    NavItem(id = "home", label = "Home", icon = Icons.Default.Home),
    NavItem(
        id = "search",
        label = "Search",
        icon = Icons.Default.Search,
        type = NavItemType.Search  // Makes it expandable
    ),
    NavItem(id = "profile", label = "Profile", icon = Icons.Default.Person)
)

BottomNavigation(
    items = navItems,
    selectedId = selectedId,
    onItemSelected = { item -> selectedId = item.id },
    onQueryChange = {
        // Handle real-time search input
        searchViewModel.updateQuery(query)
    },
    onSearch = {
        // Handle search submission (when user presses search button)
        searchViewModel.performSearch(query)
    }
)
```

--------------------------------

### Compose State Management: Stable vs. Recreated State

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/CONTRIBUTING.md

Demonstrates the correct way to manage state within a Composable function using `remember` for stable, remembered state. Contrasts this with the incorrect approach of recreating state on every composition, which leads to inefficiency.

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember

// Assuming NavItem is defined elsewhere
data class NavItem(val id: String, val label: String, val icon: androidx.compose.ui.graphics.vector.ImageVector)

// Good - Stable, remembered state
@Composable
fun MyComponentGood() {
    val items = remember {
        listOf(
            NavItem(id = "home", label = "Home", icon = Icons.Default.Home)
        )
    }
    // ... rest of the component using items
}

// Bad - Recreated every composition
@Composable
fun MyComponentBad() {
    val items = listOf(
        NavItem(id = "home", label = "Home", icon = Icons.Default.Home)
    )
    // ... rest of the component using items
}
```

--------------------------------

### Clone FlowTab Repository

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/CONTRIBUTING.md

Bash commands to clone the FlowTab repository and navigate into the project directory.

```bash
git clone https://github.com/Alims-Repo/flow-tab-cmp.git
cd flow-tab-cmp

```

--------------------------------

### Version Badge Styles (CSS)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

Styles a version badge with a distinct background, text color, and border. Includes hover effects for visual feedback. Utilizes CSS variables for theming and transitions for smooth animations.

```css
.version-badge { display: inline-block; padding: 6px 14px; background: var(--primary-50); color: var(--primary-dark); border-radius: 20px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; border: 1px solid rgba(37, 99, 235, 0.2); transition: all 0.3s ease; }
.version-badge:hover { background: var(--primary-light); color: white; border-color: var(--primary-light); }
```

--------------------------------

### Add FlowTab Dependency to build.gradle.kts

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

This snippet shows how to add the FlowTab-CMP dependency to your project using the libs.versions.toml file in a build.gradle.kts file. It ensures you are using the recommended version management approach.

```kotlin
// In your module's build.gradle.kts
dependencies {
    implementation(libs.flowtab.cmp)
}
```

--------------------------------

### Apply Instagram-Style Navigation Bar Configuration (Kotlin)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Provides a `NavConfig` preset for an Instagram-like navigation bar appearance. This style features a black background, white and gray colors for icons, no labels, and a white dot indicator.

```kotlin
val instagramConfig = NavConfig(
    height = 50.dp,
    cornerRadius = 0.dp,
    showLabels = false,
    enableBlur = false,
    showBorder = false,
    navColor = NavColor(
        backgroundColor = Color.Black,
        selectedIconColor = Color.White,
        unSelectedIconColor = Color.Gray
    ),
    navIndicator = NavIndicator.Dot(
        size = 6.dp,
        color = Color.White
    )
)
```

--------------------------------

### Add FlowTab to Project (Gradle)

Source: https://context7.com/alims-repo/flowtab-cmp/llms.txt

This snippet shows how to add the FlowTab library to your project using Gradle's version catalog. It specifies the dependency for the `flowtab-cmp` module.

```toml
# libs.versions.toml
[versions]
flowtab-cmp = "0.5.1-beta"

[libraries]
flowtab-cmp = { module = "io.github.alims-repo:flowtab-cmp", version.ref = "flowtab-cmp" }
```

```kotlin
// build.gradle.kts
dependencies {
    implementation(libs.flowtab.cmp)
}
```

--------------------------------

### Apply Floating Minimal Navigation Bar Configuration (Kotlin)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Defines a `NavConfig` for a floating, minimal navigation bar. This style is characterized by a specific height, rounded corners, hidden labels, elevation, a maximum width, and a subtle line indicator.

```kotlin
val floatingConfig = NavConfig(
    height = 56.dp,
    cornerRadius = 28.dp,
    showLabels = false,
    elevation = 12.dp,
    maxWidth = 320.dp,
    navIndicator = NavIndicator.Line(
        height = 2.dp,
        width = 40.dp,
        color = MaterialTheme.colorScheme.primary
    )
)
```

--------------------------------

### Apply Custom Colors to Navigation Bar (Kotlin)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Demonstrates how to define and apply a custom color scheme to the `BottomNavigation` component using the `NavColor` class. This allows for full control over background, border, icon, and text colors.

```kotlin
val customColors = NavColor(
    backgroundColor = Color(0xFF1E1E1E),
    borderColor = Color(0xFF3A3A3A),
    selectedIconColor = Color(0xFF00D9FF),
    unSelectedIconColor = Color(0xFF666666),
    selectedTextColor = Color(0xFF00D9FF),
    unSelectedTextColor = Color(0xFF999999),
    selectedRippleColor = Color(0x3300D9FF)
)

BottomNavigation(
    items = navItems,
    selectedId = selectedId,
    onItemSelected = { /* ... */ },
    config = NavConfig(navColor = customColors)
)
```

--------------------------------

### Integrate Search Bar with BottomNavigation

Source: https://context7.com/alims-repo/flowtab-cmp/llms.txt

Shows how to integrate an expandable search bar into the BottomNavigation component. This feature allows for real-time query updates and search submission callbacks, enhancing user interaction within the navigation.

```kotlin
val navItems = remember {
    listOf(
        NavItem(id = "home", label = "Home", icon = Icons.Default.Home),
        NavItem(
            id = "search",
            label = "Search",
            icon = Icons.Default.Search,
            type = NavItemType.Search  // Makes this item expandable
        ),
        NavItem(id = "profile", label = "Profile", icon = Icons.Default.Person)
    )
}

BottomNavigation(
    items = navItems,
    selectedId = selectedId,
    onItemSelected = { item -> selectedId = item.id },
    onQueryChange = {
        // Handle real-time search input as user types
        searchViewModel.updateQuery(it)
    },
    onSearch = {
        // Handle search submission when user presses search button
        searchViewModel.performSearch(it)
    }
)
```

--------------------------------

### Handle Item Selection and Navigation

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

This code demonstrates how to manage item selection within the BottomNavigation component and trigger navigation. It updates the selected item's state and uses a navigation controller to change the screen.

```kotlin
val selectedItem = remember { mutableStateOf(items.first().id) } // or from your navigation state

BottomNavigation(
    navController = navController,
    items = items,
    selectedItemId = selectedItem.value,
    onItemSelected = {
        selectedItem.value = it.id
        navController.navigate(it.id) // Example navigation
    }
)
```

--------------------------------

### FlowTab Navigation Logic Handling

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Illustrates the core philosophy of FlowTab, which is presentation-only. This code snippet shows how the developer retains full control over navigation logic by handling the `selectedId` and `onItemSelected` callbacks.

```kotlin
BottomNavigation(
    items = navItems,           // Define your navigation structure
    selectedId = selectedId,    // YOU control which item is selected
    onItemSelected = { item ->  // YOU handle navigation logic
        selectedId = item.id
        // Navigate, log analytics, show toasts, etc.
    }
)
```

--------------------------------

### Add FlowTab Dependency to build.gradle (Groovy DSL)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

This snippet demonstrates how to add the FlowTab-CMP dependency to your project using the Groovy DSL in a build.gradle file. This is an alternative to using libs.versions.toml.

```groovy
dependencies {
    implementation 'io.github.alims-repo:flowtab-cmp:0.5.1-beta'
}
```

--------------------------------

### Apply Modern Pill-Style Navigation Bar Configuration (Kotlin)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Presents a `NavConfig` for a modern pill-shaped navigation bar. This style includes rounded corners, a maximum width, blur effects, a border, elevation, and a ripple indicator.

```kotlin
val pillConfig = NavConfig(
    height = 60.dp,
    cornerRadius = 60.dp,
    maxWidth = 400.dp,
    enableBlur = true,
    blurIntensity = 0.95f,
    showBorder = true,
    elevation = 8.dp,
    navIndicator = NavIndicator.Ripple(
        color = MaterialTheme.colorScheme.primaryContainer
    )
)
```

--------------------------------

### App Navigation with Voyager

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Utilizes Voyager, a Compose navigation library, to manage tabs and navigation within the application. It simplifies tab management and integrates seamlessly with Scaffold.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.padding
import cafe.adriel.voyager.navigator.Tab
import cafe.adriel.voyager.navigator.TabNavigator
import cafe.adriel.voyager.navigator.tab.TabOptions
import cafe.adriel.voyager.navigator.tab.CurrentTab

// Assuming HomeTab, SearchTab, ProfileTab, HomeScreen, SearchScreen, ProfileScreen, BottomNavigation, navItems are defined elsewhere

object HomeTab : Tab {
    override val options: TabOptions
        @Composable get() = TabOptions(index = 0u, title = "Home")
    
    @Composable
    override fun Content() { HomeScreen() } // Assuming HomeScreen is defined elsewhere
}

// Placeholder for other tabs if they exist
object SearchTab : Tab {
    override val options: TabOptions
        @Composable get() = TabOptions(index = 1u, title = "Search")
    
    @Composable
    override fun Content() { SearchScreen() } // Assuming SearchScreen is defined elsewhere
}

object ProfileTab : Tab {
    override val options: TabOptions
        @Composable get() = TabOptions(index = 2u, title = "Profile")
    
    @Composable
    override fun Content() { ProfileScreen() } // Assuming ProfileScreen is defined elsewhere
}

@Composable
fun AppWithVoyager() {
    val tabs = remember { listOf(HomeTab, SearchTab, ProfileTab) } // Ensure these tabs are defined
    
    TabNavigator(tab = HomeTab) { tabNavigator ->
        Scaffold(
            bottomBar = {
                BottomNavigation(
                    items = navItems, // Assuming navItems is defined elsewhere
                    selectedId = tabs.indexOf(tabNavigator.current).toString(),
                    onItemSelected = {
                        tabNavigator.current = tabs[it.id.toInt()]
                    }
                )
            }
        ) {
            CurrentTab(modifier = Modifier.padding(it))
        }
    }
}
```

--------------------------------

### Bug Report Template for FlowTab

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/CONTRIBUTING.md

A markdown template for reporting bugs in FlowTab. It prompts for a description, steps to reproduce, expected behavior, screenshots, and environment details.

```markdown
**Description:**
A clear and concise description of the bug.

**To Reproduce:**
1. Go to '...'
2. Click on '...'
3. See error

**Expected behavior:**
What you expected to happen.

**Screenshots:**
If applicable, add screenshots.

**Environment:**
- FlowTab version: [e.g., 1.0.0]
- Kotlin version: [e.g., 2.2.21]
- Compose Multiplatform version: [e.g., 1.9.3]
- Device: [e.g., Pixel 6, iOS Simulator]
- OS: [e.g., Android 14, iOS 17]

```

--------------------------------

### Features Grid Styles (CSS)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

Styles a grid layout for feature cards, allowing for responsive columns. Each card has padding, a border, rounded corners, and a hover effect that lifts the card and adds a shadow.

```css
/* Features Grid */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 40px; }
.feature-card { padding: 24px; background: white; border: 1px solid var(--border-color); border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.feature-card:hover { border-color: var(--primary-light); box-shadow: 0 12px 24px rgba(37, 99, 235, 0.15); transform: translateY(-6px); }
.feature-icon { font-size: 2rem; margin-bottom: 12px; }
.feature-card h4 { margin-bottom: 8px; color: var(--text-primary); }
.feature-card p { font-size: 0.95rem; }
```

--------------------------------

### Define Navigation Items with Labels and Icons

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

This code snippet illustrates how to define the navigation items for FlowTab-CMP. Each item requires a unique ID, a label, and an icon, which are essential for creating the navigation bar.

```kotlin
val items = listOf(
    NavItem(
        id = "home",
        label = "Home",
        icon = painterResource(id = R.drawable.ic_home)
    ),
    NavItem(
        id = "settings",
        label = "Settings",
        icon = painterResource(id = R.drawable.ic_settings)
    )
)
```

--------------------------------

### Keyboard Navigation Support (JavaScript)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

Adds event listeners for keyboard interactions. Currently includes placeholders for handling the 'Escape' key (e.g., to close modals) and preventing default behavior for 'ArrowDown' and 'ArrowUp' keys, suggesting future navigation enhancements.

```javascript
document.addEventListener('keydown', (e) => {
  // Escape key to close any modals (future use)
  if (e.key === 'Escape') {
    // Handle escape key
  }
  // Arrow keys for navigation (future use)
  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
    e.preventDefault();
  }
});
```

--------------------------------

### GIF Player Styles (CSS)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

Styles a GIF player component with a white background, rounded corners, and a shadow effect. Includes a label overlay and hover animations. Ensures the image scales correctly within the player.

```css
/* GIF Player */
.gif-player { background: white; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); position: relative; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; border: 1px solid rgba(37, 99, 235, 0.1); width: 100%; max-width: 280px; height: auto; margin: 0 auto; }
.gif-player:hover { box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2); transform: translateY(-4px); }
.gif-player img { width: 100%; height: auto; display: block; max-width: 100%; }
.gif-label { position: absolute; bottom: 16px; left: 16px; background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 14px; border-radius: 6px; font-size: 0.875rem; font-weight: 600; backdrop-filter: blur(8px); z-index: 10; }
```

--------------------------------

### App Navigation with androidx.navigation Compose

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Implements bottom navigation using androidx.navigation's NavHost and composable functions. It manages navigation state and handles item selection to navigate between different screens.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.padding
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.compose.currentBackStackEntryAsState

@Composable
fun AppWithNavigation() {
    val navController = rememberNavController()
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route ?: "home"

    Scaffold(
        bottomBar = {
            BottomNavigation(
                items = navItems, // Assuming navItems is defined elsewhere
                selectedId = currentRoute,
                onItemSelected = {
                    navController.navigate(it.id) {
                        popUpTo(navController.graph.findStartDestination().id) {
                            saveState = true
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    ) {
        NavHost(
            navController = navController,
            startDestination = "home",
            modifier = Modifier.padding(it)
        ) {
            composable("home") { HomeScreen() } // Assuming HomeScreen is defined elsewhere
            composable("search") { SearchScreen() } // Assuming SearchScreen is defined elsewhere
            composable("profile") { ProfileScreen() } // Assuming ProfileScreen is defined elsewhere
        }
    }
}
```

--------------------------------

### Section Styles (CSS)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

Provides basic styling for general content sections, including padding and alternative background colors. Styles section headers with centered text and adjustable margins.

```css
/* Section */
.section { padding: 80px 20px; }
.section-alt { background: white; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { margin-bottom: 16px; color: var(--text-primary); }
.section-header p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
```

--------------------------------

### Define Navigation Item Types (Kotlin)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Defines the `NavItemType` sealed class, which specifies the behavior of navigation items. It includes types for standard navigation, expandable search bars, and isolated action items.

```kotlin
sealed class NavItemType {
    // Regular navigation item
    data object Standard : NavItemType()
    
    // Expandable search bar
    data object Search : NavItemType()
    
    // Modal/dialog trigger (doesn't change selectedId)
    data class Isolated(val rotation: Float = 0f) : NavItemType()
}
```

--------------------------------

### Configure Line Indicator for Bottom Navigation (Kotlin)

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/README.md

Demonstrates how to add a horizontal line indicator below the selected item in a BottomNavigation component. This configuration uses Material Design 3 styling for the indicator, specifying its height, width, color, and padding.

```kotlin
BottomNavigation(
    items = navItems,
    selectedId = selectedId,
    onItemSelected = { item -> selectedId = item.id },
    config = NavConfig(
        navIndicator = NavIndicator.Line(
            height = 3.dp,
            width = 40.dp,
            color = MaterialTheme.colorScheme.primary,
            indicatorPadding = 4.dp
        )
    )
)
```

--------------------------------

### Utility Classes and Typography CSS

Source: https://github.com/alims-repo/flowtab-cmp/blob/main/docs/index.html

Defines common utility classes for layout, spacing, and text alignment, along with typography styles for headings and paragraphs. These styles are essential for consistent UI design across the application.

```css
/* Global Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #2563eb;
  --primary-dark: #1e40af;
  --primary-light: #3b82f6;
  --primary-lighter: #60a5fa;
  --primary-50: #eff6ff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--text-primary);
  background: var(--gray-50);
  line-height: 1.6;
}

/* Utility Classes */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-12 { margin-bottom: 48px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }
.text-center { text-align: center; }
.w-full { width: 100%; }

/* Typography */
h1 { font-size: 3.5rem; font-weight: 700; line-height: 1.1; }
h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }
p { color: var(--text-secondary); line-height: 1.8; }
small { font-size: 0.875rem; color: var(--gray-500); }
```