refactor: merge to BetterAndroid new usage

flexiui-core/src/androidMain/kotlin/com/highcapable/flexiui/Colors.android.kt

@@ -27,8 +27,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
-import com.highcapable.betterandroid.ui.extension.component.base.toMixColor
 import com.highcapable.betterandroid.ui.extension.component.feature.SystemColors
+import com.highcapable.betterandroid.ui.extension.graphics.mixColorOf
 
 @Composable
 @ReadOnlyComposable
@@ -39,7 +39,7 @@ internal actual val DynamicLightColors
     @ReadOnlyComposable
     get() = if (SystemColors.isAvailable) Colors(
         backgroundPrimary = Color(DynamicColors.materialDynamicNeutral(95)),
-        backgroundSecondary = Color(DynamicColors.materialDynamicNeutral(95) mix DynamicColors.materialDynamicNeutral(99)),
+        backgroundSecondary = Color(mixColorOf(DynamicColors.materialDynamicNeutral(95), DynamicColors.materialDynamicNeutral(99))),
         foregroundPrimary = Color(DynamicColors.materialDynamicNeutral(99)),
         foregroundSecondary = Color(DynamicColors.materialDynamicNeutral(95)),
         themePrimary = Color(DynamicColors.materialDynamicPrimary(60)),
@@ -55,7 +55,7 @@ internal actual val DynamicDarkColors
     @ReadOnlyComposable
     get() = if (SystemColors.isAvailable) Colors(
         backgroundPrimary = Color(DynamicColors.materialDynamicNeutral(10)),
-        backgroundSecondary = Color(DynamicColors.materialDynamicNeutral(10) mix DynamicColors.materialDynamicNeutral(20)),
+        backgroundSecondary = Color(mixColorOf(DynamicColors.materialDynamicNeutral(10), DynamicColors.materialDynamicNeutral(20))),
         foregroundPrimary = Color(DynamicColors.materialDynamicNeutral(20)),
         foregroundSecondary = Color(DynamicColors.materialDynamicNeutral(30)),
         themePrimary = Color(DynamicColors.materialDynamicSecondary(60)),
@@ -71,7 +71,7 @@ internal actual val DynamicBlackColors
     @ReadOnlyComposable
     get() = if (SystemColors.isAvailable) Colors(
         backgroundPrimary = Color(DynamicColors.materialDynamicNeutral(0)),
-        backgroundSecondary = Color(DynamicColors.materialDynamicNeutral(0) mix DynamicColors.materialDynamicNeutral(10)),
+        backgroundSecondary = Color(mixColorOf(DynamicColors.materialDynamicNeutral(0), DynamicColors.materialDynamicNeutral(10))),
         foregroundPrimary = Color(DynamicColors.materialDynamicNeutral(10)),
         foregroundSecondary = Color(DynamicColors.materialDynamicNeutral(20)),
         themePrimary = Color(DynamicColors.materialDynamicSecondary(60)),
@@ -85,6 +85,4 @@ internal actual val DynamicBlackColors
 private val DynamicColors
     @Composable
     @ReadOnlyComposable
-    get() = SystemColors.from(LocalContext.current)
+    get() = SystemColors.from(LocalContext.current)
-
-private infix fun Int.mix(other: Int) = toMixColor(other)

flexiui-core/src/androidMain/kotlin/com/highcapable/flexiui/window/Popup.android.kt

@@ -1,59 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2023 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/16.
- */
-@file:Suppress("unused")
-
-package com.highcapable.flexiui.window
-
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.input.key.KeyEvent
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.window.PopupPositionProvider
-import androidx.compose.ui.window.PopupProperties
-import androidx.compose.ui.window.Popup as ComposePopup
-
-@Composable
-actual fun Popup(
-    alignment: Alignment,
-    offset: IntOffset,
-    popupPositionProvider: PopupPositionProvider?,
-    onDismissRequest: (() -> Unit)?,
-    properties: PopupProperties,
-    onPreviewKeyEvent: ((KeyEvent) -> Boolean)?,
-    onKeyEvent: ((KeyEvent) -> Boolean)?,
-    content: @Composable () -> Unit
-) {
-    popupPositionProvider?.also {
-        ComposePopup(
-            popupPositionProvider = it,
-            onDismissRequest = onDismissRequest,
-            properties = properties,
-            content = content
-        )
-    } ?: ComposePopup(
-        alignment = alignment,
-        offset = offset,
-        onDismissRequest = onDismissRequest,
-        properties = properties,
-        content = content
-    )
-}

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/Colors.kt

@@ -418,7 +418,4 @@ fun blueColors(darkMode: Boolean = false, blackDarkMode: Boolean = false) = when
     else -> BlueLightColors
 }
 
-internal val LocalColors = staticCompositionLocalOf { DefaultLightColors }
+internal val LocalColors = staticCompositionLocalOf { DefaultLightColors }
-
-@Stable
-val Color.Companion.Translucent get() = Color(0x80000000)

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/ActionBar.kt

@@ -48,10 +48,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalSizes
 import com.highcapable.flexiui.LocalTypography
-import com.highcapable.flexiui.extension.ComponentPadding
 import com.highcapable.flexiui.resources.Icons
 import com.highcapable.flexiui.resources.icon.ArrowNaviUp
 import com.highcapable.flexiui.resources.icon.FinishClose

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/AreaBox.kt

@@ -48,12 +48,12 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.debugInspectorInfo
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
+import com.highcapable.betterandroid.compose.extension.ui.borderOrElse
 import com.highcapable.flexiui.DefaultShapes
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.ComponentPadding
-import com.highcapable.flexiui.extension.borderOrNot
 
 @Immutable
 data class AreaBoxStyle(
@@ -148,7 +148,7 @@ private fun Modifier.areaBox(
         .shadow(style.shadowSize, style.shape)
         .clip(style.shape)
         .background(color, style.shape)
-        .borderOrNot(style.border, style.shape)
+        .borderOrElse(style.border, style.shape)
         .then(then)
         .padding(style.padding)
 }

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Button.kt

@@ -43,13 +43,13 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.debugInspectorInfo
 import androidx.compose.ui.semantics.Role
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
+import com.highcapable.betterandroid.compose.extension.ui.borderOrElse
+import com.highcapable.betterandroid.compose.extension.ui.componentState
+import com.highcapable.betterandroid.compose.extension.ui.orNull
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.ComponentPadding
-import com.highcapable.flexiui.extension.borderOrNot
-import com.highcapable.flexiui.extension.orElse
-import com.highcapable.flexiui.extension.status
 import com.highcapable.flexiui.interaction.Interaction
 import com.highcapable.flexiui.interaction.RippleStyle
 import com.highcapable.flexiui.interaction.rippleClickable
@@ -196,10 +196,10 @@ private fun Modifier.button(
         properties["style"] = style
     }
 ) {
-    status(enabled)
+    componentState(enabled)
         .clip(style.shape)
         .background(colors.backgroundColor, style.shape)
-        .borderOrNot(style.border, style.shape)
+        .borderOrElse(style.border, style.shape)
         .then(then)
 }
 
@@ -262,7 +262,7 @@ private fun defaultButtonRippleStyle() =
 @Composable
 @ReadOnlyComposable
 private fun defaultIconButtonColors() = ButtonColors(
-    contentColor = LocalIconStyle.current.tint.orElse() ?: LocalColors.current.themePrimary,
+    contentColor = LocalIconStyle.current.tint.orNull() ?: LocalColors.current.themePrimary,
     backgroundColor = Color.Transparent
 )
 

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/CheckBox.kt

@@ -52,11 +52,11 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.borderOrElse
+import com.highcapable.betterandroid.compose.extension.ui.clickable
+import com.highcapable.betterandroid.compose.extension.ui.componentState
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.borderOrNot
-import com.highcapable.flexiui.extension.status
-import com.highcapable.flexiui.interaction.clickable
 import com.highcapable.flexiui.resources.Icons
 import com.highcapable.flexiui.resources.icon.CheckMark
 
@@ -96,7 +96,7 @@ fun CheckBox(
     val animatedContentScale by animateFloatAsState(if (hovered) style.hoveredGain else 1f)
     val animatedContentAlpha by animateFloatAsState(if (checked) 1f else 0f)
     val animatedContentLayer by animateFloatAsState(if (checked) 1f else 0f)
-    Row(modifier = Modifier.status(enabled).then(modifier), verticalAlignment = Alignment.CenterVertically) {
+    Row(modifier = Modifier.componentState(enabled).then(modifier), verticalAlignment = Alignment.CenterVertically) {
         Box(
             modifier = Modifier.clickable(
                 interactionSource = interactionSource,
@@ -106,7 +106,7 @@ fun CheckBox(
                 .size(style.strokeSize)
                 .scale(animatedStrokeScale)
                 .background(animatedColor, style.shape)
-                .borderOrNot(style.border, style.shape),
+                .borderOrElse(style.border, style.shape),
             contentAlignment = Alignment.Center
         ) {
             Icon(

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Dropdown.kt

@@ -102,18 +102,18 @@ import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.PopupPositionProvider
 import androidx.compose.ui.window.PopupProperties
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
+import com.highcapable.betterandroid.compose.extension.ui.borderOrElse
+import com.highcapable.betterandroid.compose.extension.ui.componentState
+import com.highcapable.betterandroid.compose.extension.ui.orNull
+import com.highcapable.betterandroid.compose.extension.ui.solidColor
+import com.highcapable.betterandroid.compose.extension.ui.window.Popup
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.ComponentPadding
-import com.highcapable.flexiui.extension.borderOrNot
-import com.highcapable.flexiui.extension.orElse
-import com.highcapable.flexiui.extension.solidColor
-import com.highcapable.flexiui.extension.status
 import com.highcapable.flexiui.interaction.rippleClickable
 import com.highcapable.flexiui.resources.Icons
 import com.highcapable.flexiui.resources.icon.Dropdown
-import com.highcapable.flexiui.window.Popup
 import kotlin.math.max
 import kotlin.math.min
 
@@ -319,11 +319,11 @@ fun DropdownMenuItem(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable RowScope.() -> Unit
 ) {
-    val currentColor = contentColor.orElse() ?: LocalDropdownMenuContentColor.current.orElse() ?: DropdownMenu.colors.contentColor
+    val currentColor = contentColor.orNull() ?: LocalDropdownMenuContentColor.current.orNull() ?: DropdownMenu.colors.contentColor
-    val currentActiveColor = activeColor.orElse() ?: LocalDropdownMenuActiveColor.current.orElse() ?: DropdownMenu.colors.activeColor
+    val currentActiveColor = activeColor.orNull() ?: LocalDropdownMenuActiveColor.current.orNull() ?: DropdownMenu.colors.activeColor
     val currentStyle = contentStyle ?: LocalDropdownMenuContentStyle.current ?: DropdownMenu.style.contentStyle
     AreaRow(
-        modifier = Modifier.status(enabled)
+        modifier = Modifier.componentState(enabled)
             .then(modifier)
             .fillMaxWidth()
             .sizeIn(
@@ -426,13 +426,13 @@ private fun Modifier.dropdownList(
         properties["border"] = border
     }
 ) {
-    status(enabled)
+    componentState(enabled)
         .focusRequester(focusRequester)
         .focusable(enabled, interactionSource)
         .hoverable(interactionSource, enabled)
         .clip(style.shape)
         .background(colors.backgroundColor, style.shape)
-        .borderOrNot(border, style.shape)
+        .borderOrElse(border, style.shape)
         .then(then)
         .padding(style.padding)
 }

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Icon.kt

@@ -48,8 +48,8 @@ import androidx.compose.ui.semantics.role
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.isSpecified
+import com.highcapable.betterandroid.compose.extension.ui.orNull
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.orElse
 
 @Immutable
 data class IconStyle(
@@ -109,7 +109,7 @@ private fun Modifier.defaultSizeFor(
         style.size.isSpecified ||
             painter.intrinsicSize == Size.Unspecified ||
             painter.intrinsicSize.isInfinite() ->
-            Modifier.size(style.size.orElse() ?: defaultIconSize())
+            Modifier.size(style.size.orNull() ?: defaultIconSize())
         else -> Modifier
     })
 }

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/ItemBox.kt

@@ -39,10 +39,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.componentState
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalSizes
 import com.highcapable.flexiui.LocalTypography
-import com.highcapable.flexiui.extension.status
 import com.highcapable.flexiui.interaction.rippleClickable
 import com.highcapable.flexiui.resources.Icons
 import com.highcapable.flexiui.resources.icon.ArrowForward
@@ -82,7 +82,7 @@ fun HorizontalItemBox(
             interactionSource = interactionSource,
             onClick = onClick
         ),
-        initializer = { status(enabled) },
+        initializer = { componentState(enabled) },
         color = colors.backgroundColor,
         style = style.boxStyle
     ) {
@@ -132,7 +132,7 @@ fun VerticalItemBox(
             interactionSource = interactionSource,
             onClick = onClick
         ),
-        initializer = { status(enabled) },
+        initializer = { componentState(enabled) },
         color = colors.backgroundColor,
         style = style.boxStyle,
         horizontalAlignment = Alignment.CenterHorizontally,

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Navigation.kt

@@ -55,11 +55,11 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Dp
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
+import com.highcapable.betterandroid.compose.extension.ui.componentState
+import com.highcapable.betterandroid.compose.extension.ui.orNull
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.ComponentPadding
-import com.highcapable.flexiui.extension.orElse
-import com.highcapable.flexiui.extension.status
 import com.highcapable.flexiui.interaction.Interaction
 import com.highcapable.flexiui.interaction.rippleClickable
 
@@ -136,7 +136,7 @@ fun NavigationItem(
 ) {
     val currentHorizontal = horizontal ?: LocalHorizontalNavigation.current
     val currentColors = colors ?: LocalNavigationColors.current ?: Navigation.colors
-    val currentContentSpacing = contentSpacing.orElse() ?: LocalNavigationContentSpacing.current.orElse() ?: Navigation.style.contentSpacing
+    val currentContentSpacing = contentSpacing.orNull() ?: LocalNavigationContentSpacing.current.orNull() ?: Navigation.style.contentSpacing
     val currentContentPadding = contentPadding ?: LocalNavigationContentPadding.current ?: Navigation.style.contentPadding
     val currentContentShape = contentShape ?: LocalNavigationContentShape.current ?: Navigation.style.contentShape
     val animatedIndicatorColor by animateColorAsState(if (selected) currentColors.indicatorColor else Color.Transparent)
@@ -144,7 +144,7 @@ fun NavigationItem(
     val currentIconStyle = LocalIconStyle.current.copy(tint = animatedContentColor)
     val currentTextStyle = LocalTextStyle.current.copy(color = animatedContentColor)
     Box(
-        modifier = Modifier.status(enabled)
+        modifier = Modifier.componentState(enabled)
             .clip(currentContentShape)
             .then(modifier)
             .background(animatedIndicatorColor)

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/ProgressIndicator.kt

@@ -52,8 +52,8 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.orNull
 import com.highcapable.flexiui.LocalColors
-import com.highcapable.flexiui.extension.orElse
 import kotlin.math.PI
 import kotlin.math.abs
 import kotlin.math.max
@@ -337,9 +337,9 @@ object CircularProgressIndicator {
         @Composable
         @ReadOnlyComposable
         get() = LocalProgressIndicatorColors.current.copy(
-            foregroundColor = LocalProgressIndicatorColors.current.foregroundColor.orElse()
+            foregroundColor = LocalProgressIndicatorColors.current.foregroundColor.orNull()
                 ?: defaultCircularIndicatorColors().foregroundColor,
-            backgroundColor = LocalProgressIndicatorColors.current.backgroundColor.orElse()
+            backgroundColor = LocalProgressIndicatorColors.current.backgroundColor.orNull()
                 ?: defaultCircularIndicatorColors().backgroundColor
         )
     val style: CircularIndicatorStyle
@@ -353,9 +353,9 @@ object LinearProgressIndicator {
         @Composable
         @ReadOnlyComposable
         get() = LocalProgressIndicatorColors.current.copy(
-            foregroundColor = LocalProgressIndicatorColors.current.foregroundColor.orElse()
+            foregroundColor = LocalProgressIndicatorColors.current.foregroundColor.orNull()
                 ?: defaultLinearIndicatorColors().foregroundColor,
-            backgroundColor = LocalProgressIndicatorColors.current.backgroundColor.orElse()
+            backgroundColor = LocalProgressIndicatorColors.current.backgroundColor.orNull()
                 ?: defaultLinearIndicatorColors().backgroundColor
         )
     val style: LinearIndicatorStyle

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/RadioButton.kt

@@ -52,11 +52,11 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.clickable
+import com.highcapable.betterandroid.compose.extension.ui.componentState
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.status
-import com.highcapable.flexiui.interaction.clickable
 
 @Immutable
 data class RadioButtonColors(
@@ -97,7 +97,7 @@ fun RadioButton(
     val animatedContentScale by animateFloatAsState(if (hovered) style.hoveredGain else 1f)
     val animatedContentShadow by animateDpAsState(if (selected) style.contentShadowSize else 0.dp)
     val animatedContentAlpha by animateFloatAsState(if (selected) 1f else 0f)
-    Row(modifier = Modifier.status(enabled).then(modifier), verticalAlignment = Alignment.CenterVertically) {
+    Row(modifier = Modifier.componentState(enabled).then(modifier), verticalAlignment = Alignment.CenterVertically) {
         Box(
             modifier = Modifier.clickable(
                 interactionSource = interactionSource,

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Scaffold.kt

@@ -26,22 +26,19 @@ package com.highcapable.flexiui.component
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.displayCutoutPadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import com.highcapable.flexiui.extension.ComponentPadding
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
 
 @Composable
 fun Scaffold(
     modifier: Modifier = Modifier,
     colors: SurfaceColors = Surface.colors,
     padding: ComponentPadding = Surface.padding,
-    fitsSystemBars: Boolean = true,
     verticalArrangement: Arrangement.Vertical = Arrangement.Top,
     horizontalAlignment: Alignment.Horizontal = Alignment.Start,
     actionBar: @Composable () -> Unit = {},
@@ -52,11 +49,7 @@ fun Scaffold(
     val outBoxPadding = padding.copy(top = 0.dp)
     val inBoxPadding = padding.copy(start = 0.dp, end = 0.dp)
     Surface(
-        modifier = if (fitsSystemBars)
+        modifier = modifier,
-            Modifier.systemBarsPadding()
-                .displayCutoutPadding()
-                .then(modifier)
-        else modifier,
         colors = colors,
         padding = outBoxPadding
     ) {

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Slider.kt

@@ -61,11 +61,11 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.borderOrElse
+import com.highcapable.betterandroid.compose.extension.ui.componentState
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.borderOrNot
-import com.highcapable.flexiui.extension.status
 import kotlin.math.abs
 import kotlin.math.roundToInt
 
@@ -143,7 +143,7 @@ fun Slider(
             Box(
                 modifier = Modifier.size(trackAdoptWidth, style.trackHeight)
                     .background(colors.trackInactiveColor, style.trackShape)
-                    .borderOrNot(style.trackBorder, style.trackShape)
+                    .borderOrElse(style.trackBorder, style.trackShape)
                     .drawWithContent {
                         drawRoundRect(
                             color = colors.trackActiveColor,
@@ -167,7 +167,7 @@ fun Slider(
                 Box(
                     modifier = Modifier.size(style.trackHeight)
                         .background(colors.stepColor, style.stepShape)
-                        .borderOrNot(style.stepBorder, style.stepShape)
+                        .borderOrElse(style.stepBorder, style.stepShape)
                 )
         }
     }
@@ -180,7 +180,7 @@ fun Slider(
                 .scale(animatedScale)
                 .shadow(style.thumbShadowSize, style.thumbShape)
                 .background(colors.thumbColor, style.thumbShape)
-                .borderOrNot(style.thumbBorder, style.thumbShape)
+                .borderOrElse(style.thumbBorder, style.thumbShape)
                 .draggable(
                     orientation = Orientation.Horizontal,
                     state = rememberDraggableState { delta ->
@@ -210,7 +210,7 @@ fun Slider(
         )
     }
     Box(
-        modifier = Modifier.status(enabled)
+        modifier = Modifier.componentState(enabled)
             .then(modifier)
             .hoverable(interactionSource, enabled)
             .pointerInput(Unit) {

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Surface.kt

@@ -36,9 +36,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.debugInspectorInfo
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.ComponentPadding
 
 @Immutable
 data class SurfaceColors(

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Switch.kt

@@ -58,13 +58,13 @@ import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
+import com.highcapable.betterandroid.compose.extension.ui.borderOrElse
+import com.highcapable.betterandroid.compose.extension.ui.clickable
+import com.highcapable.betterandroid.compose.extension.ui.componentState
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.ComponentPadding
-import com.highcapable.flexiui.extension.borderOrNot
-import com.highcapable.flexiui.extension.status
-import com.highcapable.flexiui.interaction.clickable
 import kotlin.math.roundToInt
 
 @Immutable
@@ -132,7 +132,7 @@ fun Switch(
                 offsetX = if (checked) 0f else maxOffsetX
                 onCheckedChange(!checked)
             }.background(if (efficientDragging) trackColor else animatedTrackColor, style.trackShape)
-                .borderOrNot(style.trackBorder, style.trackShape)
+                .borderOrElse(style.trackBorder, style.trackShape)
                 .size(style.trackWidth, style.trackHeight)
                 .padding(style.padding),
             verticalAlignment = Alignment.CenterVertically,
@@ -148,7 +148,7 @@ fun Switch(
                 .scale(animatedScale)
                 .shadow(style.thumbShadowSize, style.thumbShape)
                 .background(colors.thumbColor, style.thumbShape)
-                .borderOrNot(style.thumbBorder, style.thumbShape)
+                .borderOrElse(style.thumbBorder, style.thumbShape)
                 .draggable(
                     enabled = enabled,
                     orientation = Orientation.Horizontal,
@@ -182,7 +182,7 @@ fun Switch(
                 )
         )
     }
-    Row(modifier = Modifier.status(enabled).then(modifier)) {
+    Row(modifier = Modifier.componentState(enabled).then(modifier)) {
         content?.also { content ->
             Row(modifier = Modifier.clickable(enabled = enabled) { onCheckedChange(!checked) }) {
                 content()

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Tab.kt

@@ -70,12 +70,12 @@ import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.lerp
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
+import com.highcapable.betterandroid.compose.extension.ui.componentState
+import com.highcapable.betterandroid.compose.extension.ui.orNull
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.ComponentPadding
-import com.highcapable.flexiui.extension.orElse
-import com.highcapable.flexiui.extension.status
 import com.highcapable.flexiui.interaction.rippleClickable
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
@@ -203,10 +203,10 @@ fun Tab(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable RowScope.() -> Unit
 ) {
-    val currentSelectedContentColor = selectedContentColor.orElse()
+    val currentSelectedContentColor = selectedContentColor.orNull()
-        ?: LocalTabSelectedContentColor.current.orElse() ?: Tab.colors.selectedContentColor
+        ?: LocalTabSelectedContentColor.current.orNull() ?: Tab.colors.selectedContentColor
-    val currentUnselectedContentColor = unselectedContentColor.orElse()
+    val currentUnselectedContentColor = unselectedContentColor.orNull()
-        ?: LocalTabUnselectedContentColor.current.orElse() ?: Tab.colors.unselectedContentColor
+        ?: LocalTabUnselectedContentColor.current.orNull() ?: Tab.colors.unselectedContentColor
     val currentContentPadding = contentPadding ?: LocalTabContentPadding.current ?: Tab.style.contentPadding
     val currentContentShape = contentShape ?: LocalTabContentShape.current ?: Tab.style.contentShape
     val contentColor by animateColorAsState(if (selected) currentSelectedContentColor else currentUnselectedContentColor)
@@ -217,7 +217,7 @@ fun Tab(
         LocalTextStyle provides contentTextStyle
     ) {
         Row(
-            modifier = Modifier.status(enabled)
+            modifier = Modifier.componentState(enabled)
                 .clip(currentContentShape)
                 .then(modifier)
                 .rippleClickable(
@@ -288,7 +288,7 @@ interface TabRowScope {
             properties["indicatorWidth"] = indicatorWidth
         }
     ) {
-        val currentWidth = indicatorWidth.orElse() ?: currentTabPosition.tabWidth
+        val currentWidth = indicatorWidth.orNull() ?: currentTabPosition.tabWidth
         val animatedWidh by animateDpAsState(
             targetValue = currentWidth,
             animationSpec = tween(TabIndicatorDuration, easing = FastOutSlowInEasing)
@@ -322,9 +322,9 @@ interface TabRowScope {
             val currentTab = tabPositions[currentPage]
             val previousTab = tabPositions.getOrNull(currentPage - 1)
             val nextTab = tabPositions.getOrNull(currentPage + 1)
-            val currentWidth = indicatorWidth.orElse() ?: currentTab.tabWidth
+            val currentWidth = indicatorWidth.orNull() ?: currentTab.tabWidth
-            val nextWidth = indicatorWidth.orElse() ?: nextTab?.tabWidth ?: currentWidth
+            val nextWidth = indicatorWidth.orNull() ?: nextTab?.tabWidth ?: currentWidth
-            val previousWidth = indicatorWidth.orElse() ?: previousTab?.tabWidth ?: currentWidth
+            val previousWidth = indicatorWidth.orNull() ?: previousTab?.tabWidth ?: currentWidth
             val fraction = pagerState.currentPageOffsetFraction
             // Calculate the width of the indicator from the current and next / previous tab.
             val movableWidth = when {

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Text.kt

@@ -34,9 +34,9 @@ import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
+import com.highcapable.betterandroid.compose.extension.ui.orNull
 import com.highcapable.flexiui.DefaultTypography
 import com.highcapable.flexiui.LocalColors
-import com.highcapable.flexiui.extension.orElse
 
 @Composable
 fun Text(
@@ -79,7 +79,7 @@ fun Text(
     inlineContent: Map<String, InlineTextContent> = mapOf(),
     onTextLayout: (TextLayoutResult) -> Unit = {}
 ) {
-    val currentColor = color.orElse() ?: style.color.orElse() ?: Text.color
+    val currentColor = color.orNull() ?: style.color.orNull() ?: Text.color
     BasicText(
         text = text,
         modifier = modifier,

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/TextField.kt

@@ -85,13 +85,13 @@ import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.PopupProperties
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
+import com.highcapable.betterandroid.compose.extension.ui.borderOrElse
+import com.highcapable.betterandroid.compose.extension.ui.componentState
+import com.highcapable.betterandroid.compose.extension.ui.orNull
+import com.highcapable.betterandroid.compose.extension.ui.solidColor
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.ComponentPadding
-import com.highcapable.flexiui.extension.borderOrNot
-import com.highcapable.flexiui.extension.orElse
-import com.highcapable.flexiui.extension.solidColor
-import com.highcapable.flexiui.extension.status
 import com.highcapable.flexiui.resources.Icons
 import com.highcapable.flexiui.resources.icon.Backspace
 import com.highcapable.flexiui.resources.icon.ViewerClose
@@ -178,7 +178,7 @@ fun TextField(
         focused || hovered -> style.borderInactive
         else -> style.borderInactive
     }.copy(animatedBorderWidth, SolidColor(animatedBorderColor))
-    val textColor = style.textStyle.color.orElse() ?: colors.textColor
+    val textColor = style.textStyle.color.orNull() ?: colors.textColor
     BoxWithConstraints(
         modifier = Modifier.textField(
             enabled = enabled,
@@ -633,7 +633,7 @@ private fun AutoCompleteTextFieldBox(
     DropdownMenu(
         expanded = expanded && textFieldAvailable,
         onDismissRequest = {},
-        modifier = dropdownMenuWidth.orElse()?.let { Modifier.width(it) } ?: Modifier.width(IntrinsicSize.Max),
+        modifier = dropdownMenuWidth.orNull()?.let { Modifier.width(it) } ?: Modifier.width(IntrinsicSize.Max),
         colors = completionColors.menuColors,
         style = completionStyle,
         properties = PopupProperties(focusable = false)
@@ -724,12 +724,12 @@ private fun Modifier.textField(
         properties["border"] = border
     }
 ) {
-    status(enabled)
+    componentState(enabled)
         .focusable(enabled, interactionSource)
         .hoverable(interactionSource, enabled)
         .clip(style.shape)
         .background(colors.backgroundColor, style.shape)
-        .borderOrNot(border, style.shape)
+        .borderOrElse(border, style.shape)
         .then(then)
 }
 

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/extension/ComponentPadding.kt

@@ -1,105 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2023 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/27.
- */
-@file:Suppress("unused")
-
-package com.highcapable.flexiui.extension
-
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.runtime.Immutable
-import androidx.compose.runtime.Stable
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.unit.dp
-
-// TODO: Decoupling to BetterAndroid
-
-@Stable
-fun ComponentPadding(all: Dp): ComponentPadding = ComponentPaddingImpl(all, all, all, all)
-
-@Stable
-fun ComponentPadding(
-    horizontal: Dp = 0.dp,
-    vertical: Dp = 0.dp
-): ComponentPadding = ComponentPaddingImpl(horizontal, vertical, horizontal, vertical)
-
-@Stable
-fun ComponentPadding(
-    start: Dp = 0.dp,
-    top: Dp = 0.dp,
-    end: Dp = 0.dp,
-    bottom: Dp = 0.dp
-): ComponentPadding = ComponentPaddingImpl(start, top, end, bottom)
-
-@Stable
-interface ComponentPadding : PaddingValues {
-    val start: Dp
-    val top: Dp
-    val end: Dp
-    val bottom: Dp
-    val horizontal: Dp
-    val vertical: Dp
-
-    fun copy(
-        start: Dp = this.start,
-        top: Dp = this.top,
-        end: Dp = this.end,
-        bottom: Dp = this.bottom
-    ): ComponentPadding
-}
-
-@Immutable
-private class ComponentPaddingImpl(
-    override val start: Dp,
-    override val top: Dp,
-    override val end: Dp,
-    override val bottom: Dp
-) : ComponentPadding {
-
-    override val horizontal get() = start + end
-    override val vertical get() = top + bottom
-
-    override fun calculateLeftPadding(layoutDirection: LayoutDirection) =
-        if (layoutDirection == LayoutDirection.Ltr) start else end
-
-    override fun calculateTopPadding() = top
-
-    override fun calculateRightPadding(layoutDirection: LayoutDirection) =
-        if (layoutDirection == LayoutDirection.Ltr) end else start
-
-    override fun calculateBottomPadding() = bottom
-
-    override fun copy(start: Dp, top: Dp, end: Dp, bottom: Dp) = ComponentPadding(start, top, end, bottom)
-
-    override fun equals(other: Any?): Boolean {
-        if (other !is ComponentPadding) return false
-        return start == other.start &&
-            top == other.top &&
-            end == other.end &&
-            bottom == other.bottom
-    }
-
-    override fun hashCode() =
-        ((start.hashCode() * 31 + top.hashCode()) * 31 + end.hashCode()) *
-            31 + bottom.hashCode()
-
-    override fun toString() = "ComponentPadding(start=$start, top=$top, end=$end, bottom=$bottom)"
-}

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/extension/Foundation.kt

@@ -1,43 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2023 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/5.
- */
-package com.highcapable.flexiui.extension
-
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.runtime.Stable
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.SolidColor
-import androidx.compose.ui.graphics.isSpecified
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.TextUnit
-import androidx.compose.ui.unit.isSpecified
-
-@Stable
-internal fun Dp.orElse() = if (isSpecified) this else null
-
-@Stable
-internal fun Color.orElse() = if (isSpecified) this else null
-
-@Stable
-internal fun TextUnit.orElse() = if (isSpecified) this else null
-
-@Stable
-internal val BorderStroke.solidColor get() = (brush as? SolidColor?)?.value ?: Color.Unspecified

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/extension/Modifier.kt

@@ -1,40 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2023 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/14.
- */
-@file:Suppress("unused")
-
-package com.highcapable.flexiui.extension
-
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.border
-import androidx.compose.runtime.Stable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.graphics.RectangleShape
-import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.unit.dp
-
-@Stable
-internal fun Modifier.status(enabled: Boolean) = if (enabled) this else alpha(0.5f)
-
-@Stable
-internal fun Modifier.borderOrNot(border: BorderStroke, shape: Shape = RectangleShape) =
-    border.takeIf { it.width > 0.dp }?.let { border(it, shape) } ?: this

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/interaction/Interaction.kt

@@ -23,22 +23,22 @@
 
 package com.highcapable.flexiui.interaction
 
-import androidx.compose.foundation.Indication
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.compositionLocalOf
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.debugInspectorInfo
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Dp
+import com.highcapable.betterandroid.compose.extension.ui.clickable
+import com.highcapable.betterandroid.compose.extension.ui.combinedClickable
+import com.highcapable.betterandroid.compose.extension.ui.selectable
+import com.highcapable.betterandroid.compose.extension.ui.toggleable
 import com.highcapable.flexiui.LocalColors
-import androidx.compose.foundation.clickable as foundationClickable
-import androidx.compose.foundation.combinedClickable as foundationCombinedClickable
-import androidx.compose.foundation.selection.selectable as foundationSelectable
-import androidx.compose.foundation.selection.toggleable as foundationToggleable
 import androidx.compose.material.ripple.rememberRipple as materialRememberRipple
 
 @Immutable
@@ -51,70 +51,39 @@ data class RippleStyle(
 @Composable
 fun rememberRipple(style: RippleStyle) = materialRememberRipple(style.bounded, style.radius, style.color)
 
-@Composable
-fun Modifier.clickable(
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    indication: Indication? = null,
-    enabled: Boolean = true,
-    onClickLabel: String? = null,
-    role: Role? = null,
-    onClick: () -> Unit
-) = foundationClickable(interactionSource, indication, enabled, onClickLabel, role, onClick)
-
-@Composable
-fun Modifier.combinedClickable(
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    indication: Indication? = null,
-    enabled: Boolean = true,
-    onClickLabel: String? = null,
-    role: Role? = null,
-    onLongClickLabel: String? = null,
-    onLongClick: (() -> Unit)? = null,
-    onDoubleClick: (() -> Unit)? = null,
-    onClick: () -> Unit
-) = foundationCombinedClickable(interactionSource, indication, enabled, onClickLabel, role, onLongClickLabel, onLongClick, onDoubleClick, onClick)
-
-@Composable
-fun Modifier.toggleable(
-    value: Boolean,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    indication: Indication? = null,
-    enabled: Boolean = true,
-    role: Role? = null,
-    onValueChange: (Boolean) -> Unit
-) = foundationToggleable(value, interactionSource, indication, enabled, role, onValueChange)
-
-@Composable
-fun Modifier.selectable(
-    selected: Boolean,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    indication: Indication? = null,
-    enabled: Boolean = true,
-    role: Role? = null,
-    onClick: () -> Unit
-) = foundationSelectable(selected, interactionSource, indication, enabled, role, onClick)
-
-@Composable
 fun Modifier.rippleClickable(
-    rippleStyle: RippleStyle = Interaction.rippleStyle,
+    rippleStyle: RippleStyle? = null,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    interactionSource: MutableInteractionSource? = null,
     enabled: Boolean = true,
     onClickLabel: String? = null,
     role: Role? = null,
     onClick: () -> Unit
-) = clickable(
+) = composed(
-    onClick = onClick,
+    inspectorInfo = debugInspectorInfo {
-    interactionSource = interactionSource,
+        name = "rippleClickable"
-    indication = rememberRipple(rippleStyle),
+        properties["rippleStyle"] = rippleStyle
-    enabled = enabled,
+        properties["interactionSource"] = interactionSource
-    onClickLabel = onClickLabel,
+        properties["enabled"] = enabled
-    role = role
+        properties["onClickLabel"] = onClickLabel
-)
+        properties["role"] = role
+        properties["onClick"] = onClick
+    }
+) {
+    val currentRippleStyle = rippleStyle ?: Interaction.rippleStyle
+    val currentIndication = rememberRipple(currentRippleStyle)
+    clickable(
+        onClick = onClick,
+        interactionSource = interactionSource,
+        indication = currentIndication,
+        enabled = enabled,
+        onClickLabel = onClickLabel,
+        role = role
+    )
+}
 
-@Composable
 fun Modifier.rippleCombinedClickable(
-    rippleStyle: RippleStyle = Interaction.rippleStyle,
+    rippleStyle: RippleStyle? = null,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    interactionSource: MutableInteractionSource? = null,
     enabled: Boolean = true,
     onClickLabel: String? = null,
     role: Role? = null,
@@ -122,51 +91,94 @@ fun Modifier.rippleCombinedClickable(
     onLongClick: (() -> Unit)? = null,
     onDoubleClick: (() -> Unit)? = null,
     onClick: () -> Unit
-) = combinedClickable(
+) = composed(
-    interactionSource = interactionSource,
+    inspectorInfo = debugInspectorInfo {
-    indication = rememberRipple(rippleStyle),
+        name = "rippleCombinedClickable"
-    enabled = enabled,
+        properties["rippleStyle"] = rippleStyle
-    onClickLabel = onClickLabel,
+        properties["interactionSource"] = interactionSource
-    role = role,
+        properties["enabled"] = enabled
-    onLongClickLabel = onLongClickLabel,
+        properties["onClickLabel"] = onClickLabel
-    onLongClick = onLongClick,
+        properties["role"] = role
-    onDoubleClick = onDoubleClick,
+        properties["onLongClickLabel"] = onLongClickLabel
-    onClick = onClick
+        properties["onLongClick"] = onLongClick
-)
+        properties["onDoubleClick"] = onDoubleClick
+        properties["onClick"] = onClick
+    }
+) {
+    val currentRippleStyle = rippleStyle ?: Interaction.rippleStyle
+    val currentIndication = rememberRipple(currentRippleStyle)
+    combinedClickable(
+        onClick = onClick,
+        interactionSource = interactionSource,
+        indication = currentIndication,
+        enabled = enabled,
+        onClickLabel = onClickLabel,
+        role = role,
+        onLongClickLabel = onLongClickLabel,
+        onLongClick = onLongClick,
+        onDoubleClick = onDoubleClick
+    )
+}
 
-@Composable
 fun Modifier.rippleToggleable(
     value: Boolean,
-    rippleStyle: RippleStyle = Interaction.rippleStyle,
+    rippleStyle: RippleStyle? = null,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    interactionSource: MutableInteractionSource? = null,
     enabled: Boolean = true,
     role: Role? = null,
     onValueChange: (Boolean) -> Unit
-) = toggleable(
+) = composed(
-    value = value,
+    inspectorInfo = debugInspectorInfo {
-    interactionSource = interactionSource,
+        name = "rippleToggleable"
-    indication = rememberRipple(rippleStyle),
+        properties["value"] = value
-    enabled = enabled,
+        properties["rippleStyle"] = rippleStyle
-    role = role,
+        properties["interactionSource"] = interactionSource
-    onValueChange = onValueChange
+        properties["enabled"] = enabled
-)
+        properties["role"] = role
+        properties["onValueChange"] = onValueChange
+    }
+) {
+    val currentRippleStyle = rippleStyle ?: Interaction.rippleStyle
+    val currentIndication = rememberRipple(currentRippleStyle)
+    toggleable(
+        value = value,
+        interactionSource = interactionSource,
+        indication = currentIndication,
+        enabled = enabled,
+        role = role,
+        onValueChange = onValueChange
+    )
+}
 
-@Composable
 fun Modifier.rippleSelectable(
     selected: Boolean,
-    rippleStyle: RippleStyle = Interaction.rippleStyle,
+    rippleStyle: RippleStyle? = null,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    interactionSource: MutableInteractionSource? = null,
     enabled: Boolean = true,
     role: Role? = null,
     onClick: () -> Unit
-) = selectable(
+) = composed(
-    selected = selected,
+    inspectorInfo = debugInspectorInfo {
-    interactionSource = interactionSource,
+        name = "rippleSelectable"
-    indication = rememberRipple(rippleStyle),
+        properties["selected"] = selected
-    enabled = enabled,
+        properties["rippleStyle"] = rippleStyle
-    role = role,
+        properties["interactionSource"] = interactionSource
-    onClick = onClick
+        properties["enabled"] = enabled
-)
+        properties["role"] = role
+        properties["onClick"] = onClick
+    }
+) {
+    val currentRippleStyle = rippleStyle ?: Interaction.rippleStyle
+    val currentIndication = rememberRipple(currentRippleStyle)
+    selectable(
+        selected = selected,
+        interactionSource = interactionSource,
+        indication = currentIndication,
+        enabled = enabled,
+        role = role,
+        onClick = onClick
+    )
+}
 
 object Interaction {
     val rippleStyle: RippleStyle

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/window/Popup.kt

@@ -1,43 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2023 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/5.
- */
-@file:Suppress("unused")
-
-package com.highcapable.flexiui.window
-
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.input.key.KeyEvent
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.window.PopupPositionProvider
-import androidx.compose.ui.window.PopupProperties
-
-@Composable
-expect fun Popup(
-    alignment: Alignment = Alignment.TopStart,
-    offset: IntOffset = IntOffset(0, 0),
-    popupPositionProvider: PopupPositionProvider? = null,
-    onDismissRequest: (() -> Unit)? = null,
-    properties: PopupProperties = PopupProperties(),
-    onPreviewKeyEvent: ((KeyEvent) -> Boolean)? = null,
-    onKeyEvent: ((KeyEvent) -> Boolean)? = null,
-    content: @Composable () -> Unit
-)

flexiui-core/src/desktopMain/kotlin/com/highcapable/flexiui/component/DesktopContextMenu.kt

@@ -60,11 +60,11 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Popup
 import androidx.compose.ui.window.PopupProperties
 import androidx.compose.ui.window.rememberPopupPositionProviderAtPosition
+import com.highcapable.betterandroid.compose.extension.ui.ComponentPadding
+import com.highcapable.betterandroid.compose.extension.ui.orNull
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.extension.ComponentPadding
-import com.highcapable.flexiui.extension.orElse
 import com.highcapable.flexiui.interaction.rippleClickable
 import java.awt.event.KeyEvent
 
@@ -200,8 +200,8 @@ val LocalContextMenuStyle = compositionLocalOf {
 @Composable
 @ReadOnlyComposable
 internal fun defaultContextMenuColors() = ContextMenuColors(
-    contentColor = LocalContextMenuColors.current.contentColor.orElse() ?: LocalColors.current.textPrimary,
+    contentColor = LocalContextMenuColors.current.contentColor.orNull() ?: LocalColors.current.textPrimary,
-    borderColor = LocalContextMenuColors.current.borderColor.orElse() ?: LocalColors.current.backgroundSecondary
+    borderColor = LocalContextMenuColors.current.borderColor.orNull() ?: LocalColors.current.backgroundSecondary
 )
 
 @Composable

flexiui-core/src/desktopMain/kotlin/com/highcapable/flexiui/window/Popup.desktop.kt

@@ -1,63 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2023 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/16.
- */
-@file:Suppress("unused")
-
-package com.highcapable.flexiui.window
-
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.input.key.KeyEvent
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.window.PopupPositionProvider
-import androidx.compose.ui.window.PopupProperties
-import androidx.compose.ui.window.Popup as ComposePopup
-
-@Composable
-actual fun Popup(
-    alignment: Alignment,
-    offset: IntOffset,
-    popupPositionProvider: PopupPositionProvider?,
-    onDismissRequest: (() -> Unit)?,
-    properties: PopupProperties,
-    onPreviewKeyEvent: ((KeyEvent) -> Boolean)?,
-    onKeyEvent: ((KeyEvent) -> Boolean)?,
-    content: @Composable () -> Unit
-) {
-    popupPositionProvider?.also {
-        ComposePopup(
-            popupPositionProvider = it,
-            onDismissRequest = onDismissRequest,
-            properties = properties,
-            onPreviewKeyEvent = onPreviewKeyEvent,
-            onKeyEvent = onKeyEvent,
-            content = content
-        )
-    } ?: ComposePopup(
-        alignment = alignment,
-        offset = offset,
-        onDismissRequest = onDismissRequest,
-        properties = properties,
-        onPreviewKeyEvent = onPreviewKeyEvent,
-        onKeyEvent = onKeyEvent,
-        content = content
-    )
-}

flexiui-core/src/iosMain/kotlin/com/highcapable/flexiui/window/Popup.ios.kt

@@ -1,63 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2023 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/16.
- */
-@file:Suppress("unused")
-
-package com.highcapable.flexiui.window
-
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.input.key.KeyEvent
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.window.PopupPositionProvider
-import androidx.compose.ui.window.PopupProperties
-import androidx.compose.ui.window.Popup as ComposePopup
-
-@Composable
-actual fun Popup(
-    alignment: Alignment,
-    offset: IntOffset,
-    popupPositionProvider: PopupPositionProvider?,
-    onDismissRequest: (() -> Unit)?,
-    properties: PopupProperties,
-    onPreviewKeyEvent: ((KeyEvent) -> Boolean)?,
-    onKeyEvent: ((KeyEvent) -> Boolean)?,
-    content: @Composable () -> Unit
-) {
-    popupPositionProvider?.also {
-        ComposePopup(
-            popupPositionProvider = it,
-            onDismissRequest = onDismissRequest,
-            properties = properties,
-            onPreviewKeyEvent = onPreviewKeyEvent,
-            onKeyEvent = onKeyEvent,
-            content = content
-        )
-    } ?: ComposePopup(
-        alignment = alignment,
-        offset = offset,
-        onDismissRequest = onDismissRequest,
-        properties = properties,
-        onPreviewKeyEvent = onPreviewKeyEvent,
-        onKeyEvent = onKeyEvent,
-        content = content
-    )
-}

flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/builder/ImageVector.kt

@@ -1,51 +0,0 @@
-/*
- * Flexi UI - A flexible and useful UI component library.
- * Copyright (C) 2019-2023 HighCapable
- * https://github.com/BetterAndroid/FlexiUI
- *
- * Apache License Version 2.0
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * This file is created by fankes on 2023/11/11.
- */
-@file:Suppress("unused")
-
-package com.highcapable.flexiui.resources.builder
-
-import androidx.compose.ui.graphics.BlendMode
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.DefaultGroupName
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.unit.Dp
-
-internal inline fun buildImageVector(
-    name: String = DefaultGroupName,
-    defaultWidth: Dp,
-    defaultHeight: Dp,
-    viewportWidth: Float,
-    viewportHeight: Float,
-    tintColor: Color = Color.Unspecified,
-    tintBlendMode: BlendMode = BlendMode.SrcIn,
-    autoMirror: Boolean = false,
-    builder: ImageVector.Builder.() -> Unit
-) = ImageVector.Builder(
-    name = name,
-    defaultWidth = defaultWidth,
-    defaultHeight = defaultHeight,
-    viewportWidth = viewportWidth,
-    viewportHeight = viewportHeight,
-    tintColor = tintColor,
-    tintBlendMode = tintBlendMode,
-    autoMirror = autoMirror
-).apply(builder).build()

flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/ArrowForward.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ImageVector
 import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.builder.buildImageVector
 
 val Icons.ArrowForward by lazy {
-    buildImageVector(
+    ImageVector(
         name = "arrow_forward",
         defaultWidth = 32.dp,
         defaultHeight = 32.dp,

flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/ArrowNaviUp.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ImageVector
 import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.builder.buildImageVector
 
 val Icons.ArrowNaviUp by lazy {
-    buildImageVector(
+    ImageVector(
         name = "arrow_navi_up",
         defaultWidth = 32.dp,
         defaultHeight = 32.dp,

flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/Backspace.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ImageVector
 import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.builder.buildImageVector
 
 val Icons.Backspace by lazy {
-    buildImageVector(
+    ImageVector(
         name = "backspace",
         defaultWidth = 32.dp,
         defaultHeight = 32.dp,

flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/CheckMark.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ImageVector
 import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.builder.buildImageVector
 
 val Icons.CheckMark by lazy {
-    buildImageVector(
+    ImageVector(
         name = "check_mark",
         defaultWidth = 32.dp,
         defaultHeight = 32.dp,

flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/Dropdown.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ImageVector
 import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.builder.buildImageVector
 
 val Icons.Dropdown by lazy {
-    buildImageVector(
+    ImageVector(
         name = "dropdown",
         defaultWidth = 24.dp,
         defaultHeight = 24.dp,

flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/FinishClose.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ImageVector
 import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.builder.buildImageVector
 
 val Icons.FinishClose by lazy {
-    buildImageVector(
+    ImageVector(
         name = "finish_close",
         defaultWidth = 32.dp,
         defaultHeight = 32.dp,

flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/ViewerClose.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ImageVector
 import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.builder.buildImageVector
 
 val Icons.ViewerClose by lazy {
-    buildImageVector(
+    ImageVector(
         name = "viewer_close",
         defaultWidth = 32.dp,
         defaultHeight = 32.dp,

flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/ViewerOpen.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.highcapable.betterandroid.compose.extension.ui.ImageVector
 import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.builder.buildImageVector
 
 val Icons.ViewerOpen by lazy {
-    buildImageVector(
+    ImageVector(
         name = "viewer_open",
         defaultWidth = 32.dp,
         defaultHeight = 32.dp,