refactor: merge to BetterAndroid new usage

2025-09-07 19:14:12 +08:00 · 2024-01-02 11:11:27 +08:00
parent 7935372e2f
commit ace3f11460
37 changed files with 218 additions and 685 deletions
--- a/flexiui-core/src/androidMain/kotlin/com/highcapable/flexiui/Colors.android.kt
+++ b/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)
-
-private infix fun Int.mix(other: Int) = toMixColor(other)
+    get() = SystemColors.from(LocalContext.current)
--- a/flexiui-core/src/androidMain/kotlin/com/highcapable/flexiui/window/Popup.android.kt
+++ b/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
-    )
-}
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/Colors.kt
+++ b/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 }
-
-@Stable
-val Color.Companion.Translucent get() = Color(0x80000000)
+internal val LocalColors = staticCompositionLocalOf { DefaultLightColors }
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/ActionBar.kt
+++ b/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
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/AreaBox.kt
+++ b/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)
 }
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Button.kt
+++ b/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
 )

--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/CheckBox.kt
+++ b/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(
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Dropdown.kt
+++ b/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 currentActiveColor = activeColor.orElse() ?: LocalDropdownMenuActiveColor.current.orElse() ?: DropdownMenu.colors.activeColor
+    val currentColor = contentColor.orNull() ?: LocalDropdownMenuContentColor.current.orNull() ?: DropdownMenu.colors.contentColor
+    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)
 }
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Icon.kt
+++ b/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
    })
 }
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/ItemBox.kt
+++ b/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,
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Navigation.kt
+++ b/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)
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/ProgressIndicator.kt
+++ b/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
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/RadioButton.kt
+++ b/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,
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Scaffold.kt
+++ b/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.systemBarsPadding()
-                .displayCutoutPadding()
-                .then(modifier)
-        else modifier,
+        modifier = modifier,
        colors = colors,
        padding = outBoxPadding
    ) {
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Slider.kt
+++ b/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) {
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Surface.kt
+++ b/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(
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Switch.kt
+++ b/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()
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Tab.kt
+++ b/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()
-        ?: LocalTabSelectedContentColor.current.orElse() ?: Tab.colors.selectedContentColor
-    val currentUnselectedContentColor = unselectedContentColor.orElse()
-        ?: LocalTabUnselectedContentColor.current.orElse() ?: Tab.colors.unselectedContentColor
+    val currentSelectedContentColor = selectedContentColor.orNull()
+        ?: LocalTabSelectedContentColor.current.orNull() ?: Tab.colors.selectedContentColor
+    val currentUnselectedContentColor = unselectedContentColor.orNull()
+        ?: 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 nextWidth = indicatorWidth.orElse() ?: nextTab?.tabWidth ?: currentWidth
-            val previousWidth = indicatorWidth.orElse() ?: previousTab?.tabWidth ?: currentWidth
+            val currentWidth = indicatorWidth.orNull() ?: currentTab.tabWidth
+            val nextWidth = indicatorWidth.orNull() ?: nextTab?.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 {
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Text.kt
+++ b/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,
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/TextField.kt
+++ b/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)
 }

--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/extension/ComponentPadding.kt
+++ b/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)"
-}
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/extension/Foundation.kt
+++ b/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
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/extension/Modifier.kt
+++ b/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
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/interaction/Interaction.kt
+++ b/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,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    rippleStyle: RippleStyle? = null,
+    interactionSource: MutableInteractionSource? = null,
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onClick: () -> Unit
-) = clickable(
-    onClick = onClick,
-    interactionSource = interactionSource,
-    indication = rememberRipple(rippleStyle),
-    enabled = enabled,
-    onClickLabel = onClickLabel,
-    role = role
-)
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "rippleClickable"
+        properties["rippleStyle"] = rippleStyle
+        properties["interactionSource"] = interactionSource
+        properties["enabled"] = enabled
+        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,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    rippleStyle: RippleStyle? = null,
+    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(
-    interactionSource = interactionSource,
-    indication = rememberRipple(rippleStyle),
-    enabled = enabled,
-    onClickLabel = onClickLabel,
-    role = role,
-    onLongClickLabel = onLongClickLabel,
-    onLongClick = onLongClick,
-    onDoubleClick = onDoubleClick,
-    onClick = onClick
-)
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "rippleCombinedClickable"
+        properties["rippleStyle"] = rippleStyle
+        properties["interactionSource"] = interactionSource
+        properties["enabled"] = enabled
+        properties["onClickLabel"] = onClickLabel
+        properties["role"] = role
+        properties["onLongClickLabel"] = onLongClickLabel
+        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,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    rippleStyle: RippleStyle? = null,
+    interactionSource: MutableInteractionSource? = null,
    enabled: Boolean = true,
    role: Role? = null,
    onValueChange: (Boolean) -> Unit
-) = toggleable(
-    value = value,
-    interactionSource = interactionSource,
-    indication = rememberRipple(rippleStyle),
-    enabled = enabled,
-    role = role,
-    onValueChange = onValueChange
-)
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "rippleToggleable"
+        properties["value"] = value
+        properties["rippleStyle"] = rippleStyle
+        properties["interactionSource"] = interactionSource
+        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,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    rippleStyle: RippleStyle? = null,
+    interactionSource: MutableInteractionSource? = null,
    enabled: Boolean = true,
    role: Role? = null,
    onClick: () -> Unit
-) = selectable(
-    selected = selected,
-    interactionSource = interactionSource,
-    indication = rememberRipple(rippleStyle),
-    enabled = enabled,
-    role = role,
-    onClick = onClick
-)
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "rippleSelectable"
+        properties["selected"] = selected
+        properties["rippleStyle"] = rippleStyle
+        properties["interactionSource"] = interactionSource
+        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
--- a/flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/window/Popup.kt
+++ b/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
-)
--- a/flexiui-core/src/desktopMain/kotlin/com/highcapable/flexiui/component/DesktopContextMenu.kt
+++ b/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,
-    borderColor = LocalContextMenuColors.current.borderColor.orElse() ?: LocalColors.current.backgroundSecondary
+    contentColor = LocalContextMenuColors.current.contentColor.orNull() ?: LocalColors.current.textPrimary,
+    borderColor = LocalContextMenuColors.current.borderColor.orNull() ?: LocalColors.current.backgroundSecondary
 )

@Composable
--- a/flexiui-core/src/desktopMain/kotlin/com/highcapable/flexiui/window/Popup.desktop.kt
+++ b/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
-    )
-}
--- a/flexiui-core/src/iosMain/kotlin/com/highcapable/flexiui/window/Popup.ios.kt
+++ b/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
-    )
-}
--- a/flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/builder/ImageVector.kt
+++ b/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()
--- a/flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/ArrowForward.kt
+++ b/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,
--- a/flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/ArrowNaviUp.kt
+++ b/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,
--- a/flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/Backspace.kt
+++ b/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,
--- a/flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/CheckMark.kt
+++ b/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,
--- a/flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/Dropdown.kt
+++ b/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,
--- a/flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/FinishClose.kt
+++ b/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,
--- a/flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/ViewerClose.kt
+++ b/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,
--- a/flexiui-resources/src/commonMain/kotlin/com/highcapable/flexiui/resources/icon/ViewerOpen.kt
+++ b/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,