value in StandardInput is nullable

0.6.0

.github/workflows/build.yml

@@ -1,19 +0,0 @@
-name: Build
-
-on: [push]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Set up JDK 1.8
-        uses: actions/setup-java@v1
-        with:
-          java-version: 1.8
-      - name: Fix android 31.0.0 dx
-        continue-on-error: true
-        run: cd /usr/local/lib/android/sdk/build-tools/31.0.0/ && mv d8 dx && cd lib  && mv d8.jar dx.jar
-      - name: Build with Gradle
-        run: ./gradlew build

.github/workflows/build_and_publish.yml

@@ -0,0 +1,26 @@
+name: Build
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up JDK 11
+        uses: actions/setup-java@v1
+        with:
+          java-version: 11
+      - name: Rewrite version
+        run: |
+          branch="`echo "${{ github.ref }}" | grep -o "[^/]*$"`"
+          cat gradle.properties | sed -e "s/^version=\([0-9\.]*\)/version=\1-branch_$branch-build${{ github.run_number }}/" > gradle.properties.tmp
+          rm gradle.properties
+          mv gradle.properties.tmp gradle.properties
+      - name: Build with Gradle
+        run: ./gradlew build
+      - name: Publish
+        continue-on-error: true
+        run: ./gradlew publishAllPublicationsToGiteaRepository
+        env:
+            GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}

CHANGELOG.md

@@ -1,5 +1,78 @@
 # Changelog
 
+## 0.6.1
+
+* `DefaultInput` has been renamed to `StandardInput`
+* `Compose`: `1.3.1-rc02`
+
+## 0.6.0
+
+* `Kotlin`: `1.8.10`
+* `Compose`: `1.3.1-rc01`
+
+## 0.5.2
+
+* More fixes in Dialogs
+* Badge supported
+* Inline creation support
+
+## 0.5.1
+
+* Fixes in new `Dialog`s
+
+## 0.5.0
+
+* Fully rework `Dialog` elements
+
+## 0.4.3
+
+* Add opportunity to now show dialog automatically
+
+## 0.4.2
+
+* `Compose`: `1.2.2`
+
+## 0.4.1
+
+* Now it is possible to use `StandardInput` with simple `T` types instead of states
+* `List` may accept any `Iterable`
+
+## 0.4.0
+
+* `Kotlin`: `1.7.20`
+* `Compose`: `1.2.1`
+
+## 0.2.2
+
+* Add support of `Drop` component
+* Improve support of `Navbar`s
+
+## 0.2.1
+
+* `Tab` elements become supported
+
+## 0.2.0
+
+**ALL DEPRECATIONS HAVE BEEN REMOVED**
+
+* `Kotlin`: `1.7.0`
+* `Compose`: `1.2.0-alpha01-dev753`
+
+## 0.1.10
+
+* `Grid` support improvements
+
+## 0.1.9
+
+* `Artile` elements become supported
+* `Iconnav` elements become supported
+* `Leader` elements become supported
+* `Grid` support improvements
+
+## 0.1.8
+
+* `Compose`: `1.2.0-alpha01-dev731`
+
 ## 0.1.7
 
 Add Toggle builder

github_release.gradle

@@ -21,7 +21,7 @@ if (new File(projectDir, "secret.gradle").exists()) {
         owner "InsanusMokrassar"
         repo "JSUIKitKBindings"
 
-        tagName "${project.version}"
+        tagName "v${project.version}"
         releaseName "${project.version}"
         targetCommitish "${project.version}"
 

gradle.properties

@@ -3,10 +3,8 @@ org.gradle.parallel=true
 kotlin.js.generate.externals=true
 kotlin.incremental=true
 kotlin.incremental.js=true
-android.useAndroidX=true
-android.enableJetifier=true
 
 # Project data
 
 group=dev.inmo
-version=0.1.7
+version=0.6.1

gradle/libs.versions.toml

@@ -1,9 +1,9 @@
 [versions]
 
-kt = "1.6.21"
+kt = "1.8.10"
-jb-compose = "1.2.0-alpha01-dev686"
+jb-compose = "1.3.1-rc02"
-jb-dokka = "1.6.21"
+jb-dokka = "1.8.10"
-gh-release = "2.3.7"
+gh-release = "2.4.1"
 
 [libraries]
 

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.1-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

publish.gradle

@@ -38,14 +38,32 @@ publishing {
             }
         }
         repositories {
+            if (project.hasProperty('GITEA_TOKEN') || System.getenv('GITEA_TOKEN') != null) {
+                maven {
+                    name = "GITEA"
+                    url = uri("https://git.inmo.dev/api/packages/InsanusMokrassar/maven")
+            
+                    credentials(HttpHeaderCredentials) {
+                        name = "Authorization"
+                        value = project.hasProperty('GITEA_TOKEN') ? project.property('GITEA_TOKEN') : System.getenv('GITEA_TOKEN')
+                    }
+            
+                    authentication {
+                        header(HttpHeaderAuthentication)
+                    }
+            
+                }
+            }
             if ((project.hasProperty('SONATYPE_USER') || System.getenv('SONATYPE_USER') != null) && (project.hasProperty('SONATYPE_PASSWORD') || System.getenv('SONATYPE_PASSWORD') != null)) {
                 maven {
                     name = "sonatype"
                     url = uri("https://oss.sonatype.org/service/local/staging/deploy/maven2/")
+            
                     credentials {
                         username = project.hasProperty('SONATYPE_USER') ? project.property('SONATYPE_USER') : System.getenv('SONATYPE_USER')
                         password = project.hasProperty('SONATYPE_PASSWORD') ? project.property('SONATYPE_PASSWORD') : System.getenv('SONATYPE_PASSWORD')
                     }
+            
                 }
             }
         }

publish.kpsb

@@ -1 +1 @@
-{"licenses":[{"id":"Apache-2.0","title":"Apache Software License 2.0","url":"https://opensource.org/licenses/Apache-2.0"}],"mavenConfig":{"name":"${project.name}","description":"${project.name}","url":"https://github.com/InsanusMokrassar/JSUIKitKBindings","vcsUrl":"https://github.com/InsanusMokrassar/JSUIKitKBindings.git","developers":[{"id":"InsanusMokrassar","name":"Ovsiannikov Aleksei","eMail":"ovsyannikov.alexey95@gmail.com"}],"repositories":[{"name":"sonatype","url":"https://oss.sonatype.org/service/local/staging/deploy/maven2/"}],"gpgSigning":{"type":"dev.inmo.kmppscriptbuilder.core.models.GpgSigning.Optional"}}}
+{"licenses":[{"id":"Apache-2.0","title":"Apache Software License 2.0","url":"https://opensource.org/licenses/Apache-2.0"}],"mavenConfig":{"name":"${project.name}","description":"${project.name}","url":"https://github.com/InsanusMokrassar/JSUIKitKBindings","vcsUrl":"https://github.com/InsanusMokrassar/JSUIKitKBindings.git","developers":[{"id":"InsanusMokrassar","name":"Ovsiannikov Aleksei","eMail":"ovsyannikov.alexey95@gmail.com"}],"repositories":[{"name":"GITEA","url":"https://git.inmo.dev/api/packages/InsanusMokrassar/maven","credsType":{"type":"dev.inmo.kmppscriptbuilder.core.models.MavenPublishingRepository.CredentialsType.HttpHeaderCredentials","headerName":"Authorization","headerValueProperty":"GITEA_TOKEN"}},{"name":"sonatype","url":"https://oss.sonatype.org/service/local/staging/deploy/maven2/"}],"gpgSigning":{"type":"dev.inmo.kmppscriptbuilder.core.models.GpgSigning.Optional"}}}

src/jsMain/kotlin/dev/inmo/jsuikit/UIKitAttributeValueBuilder.kt

@@ -1,26 +1,8 @@
 package dev.inmo.jsuikit
 
-import dev.inmo.jsuikit.modifiers.AttributeValue
 import dev.inmo.jsuikit.utils.*
 import org.jetbrains.compose.web.attributes.AttrsScope
 
-@Deprecated("Will be removed soon")
-class UIKitAttributeValueBuilder {
-    private val attrs = mutableListOf<Pair<String, String>>()
-
-    infix fun String.to(other: String?) {
-        other ?.let {
-            attrs.add(Pair(this, other))
-        }
-    }
-
-    infix fun String.to(other: AttributeValue?) {
-        this to other ?.name
-    }
-
-    fun build(): String = attrs.joinToString(";") { (k, v) -> "$k: $v" }
-}
-
 fun AttrsScope<*>.buildAndAddAttribute(
     attributeName: String,
     skipNullValues: Boolean = true,

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Article.kt

@@ -0,0 +1,57 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitArticle
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import dev.inmo.jsuikit.utils.optionallyDraw
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.*
+
+@Composable
+fun UIKitArticleElement (
+    headerBuilder: ContentBuilder<HTMLHeadingElement>,
+    headerAttrs: Attrs<HTMLHeadingElement> = Attrs.empty(),
+    metaBuilder: ContentBuilder<HTMLParagraphElement>? = null,
+    metaAttrs: Attrs<HTMLParagraphElement>? = null,
+    otherContentBuilder: ContentBuilder<HTMLElement>
+) = Article(
+    {
+        include(UIKitArticle)
+    }
+) {
+    H1(
+        {
+            include(UIKitArticle.Title)
+            headerAttrs.builder(this)
+        },
+        headerBuilder
+    )
+    optionallyDraw(metaAttrs, metaBuilder) {
+        P(
+            {
+                include(UIKitArticle.Meta)
+                metaAttrs ?.builder ?.invoke(this)
+            },
+            metaBuilder ?: {}
+        )
+    }
+
+    otherContentBuilder()
+}
+
+@Composable
+fun UIKitArticleElement (
+    header: String,
+    meta: String? = null,
+    otherContentBuilder: ContentBuilder<HTMLElement>
+) = UIKitArticleElement(
+    { Text(header) },
+    metaBuilder = meta ?.let {
+        {
+            Text(meta)
+        }
+    },
+    otherContentBuilder = otherContentBuilder
+)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Badge.kt

@@ -0,0 +1,25 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitBadge
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Span
+import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.HTMLSpanElement
+
+@Composable
+fun Badge(
+    text: String,
+    onAfterText: ContentBuilder<HTMLSpanElement>? = null,
+    onBeforeText: ContentBuilder<HTMLSpanElement>? = null,
+    attrs: AttrBuilderContext<HTMLSpanElement>? = null
+) = Span({
+    include(UIKitBadge)
+    attrs ?.invoke(this)
+}) {
+    onAfterText ?.invoke(this)
+    Text(text)
+    onBeforeText ?.invoke(this)
+}

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Dialog.kt

@@ -1,33 +1,22 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffectResult
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import dev.inmo.jsuikit.modifiers.*
 import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.renderComposableInBody
 import org.w3c.dom.HTMLDivElement
-import org.w3c.dom.HTMLElement
-import org.w3c.dom.events.Event
 import kotlin.random.Random
 import kotlin.random.nextUInt
 
-private class DialogDisposableEffectResult(
-    private val element: HTMLElement,
-    private val onDispose: (() -> Unit)?,
-    private val onDisposed: (() -> Unit)?
-) : DisposableEffectResult {
-    override fun dispose() {
-        onDispose?.invoke()
-        UIKit.modal("#${element.id}") ?.hide()
-        onDisposed?.invoke()
-    }
-}
-
 @Composable
 fun Dialog(
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    onHide: (() -> Unit)? = null,
+    onHidden: ((HTMLDivElement) -> Unit)? = null,
-    onHidden: (() -> Unit)? = null,
+    onShown: ((HTMLDivElement) -> Unit)? = null,
     dialogAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     headerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     headerBuilder: ContentBuilder<HTMLDivElement>? = null,
@@ -36,101 +25,148 @@ fun Dialog(
     footerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     footerBuilder: ContentBuilder<HTMLDivElement>? = null,
     bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
-    bodyBuilder: ContentBuilder<HTMLDivElement>
+    autoShow: Boolean = true,
+    removeOnHide: Boolean = true,
+    bodyBuilder: ContentBuilder<HTMLDivElement> = {}
 ) {
-    Div(
+    val draw = remember { mutableStateOf(true) }
-        {
+
-            if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
+    remember {
-                include(UIKitModal)
+        renderComposableInBody {
-            }
+            if (draw.value) {
-            id("dialog${Random.nextUInt()}")
-            include(*modifiers)
-            attributesCustomizer()
-        }
-    ) {
-        Div(
-            {
-                include(UIKitModal.Dialog)
-                dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
-            }
-        ) {
-            headerBuilder ?.let {
                 Div(
                     {
-                        include(UIKitModal.Header)
+                        if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
-                        headerAttrsBuilder ?.let { it() }
+                            include(UIKitModal)
+                        }
+                        id("dialog${Random.nextUInt()}")
+                        include(*modifiers)
+
+                        attributesCustomizer()
                     }
                 ) {
-                    it()
+                    DisposableEffect(true) {
-                }
+                        val htmlElement = scopeElement
-            }
+
-            afterHeaderBuilder ?.let { it() }
+                        if (autoShow) {
-            Div(
+                            UIKit.modal(htmlElement).show()
-                {
+                        }
-                    include(UIKitModal.Body)
+
-                    bodyAttrsBuilder ?.let { it() }
+                        if (onHidden != null || removeOnHide) {
-                }
+                            htmlElement.addEventListener("hidden", {
-            ) {
+                                if (it.target != htmlElement) return@addEventListener
-                bodyBuilder()
+
-            }
+                                onHidden ?.invoke(htmlElement)
-            beforeFooterBuilder ?.let { it() }
+
-            footerBuilder ?.let {
+                                if (removeOnHide) {
-                Div(
+                                    htmlElement.remove()
-                    {
+                                }
-                        include(UIKitModal.Footer)
+                            })
-                        footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
+                        }
+
+                        onShown ?.let {
+                            htmlElement.addEventListener("shown", {
+                                if (it.target != htmlElement) return@addEventListener
+
+                                onShown(htmlElement)
+                            })
+                        }
+
+
+                        onDispose {
+                            draw.value = false
+                        }
+                    }
+
+                    Div(
+                        {
+                            include(UIKitModal.Dialog)
+                            dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
+                        }
+                    ) {
+                        headerBuilder ?.let {
+                            Div(
+                                {
+                                    include(UIKitModal.Header)
+                                    headerAttrsBuilder ?.let { it() }
+                                }
+                            ) {
+                                it()
+                            }
+                        }
+                        afterHeaderBuilder ?.let { it() }
+                        Div(
+                            {
+                                include(UIKitModal.Body)
+                                bodyAttrsBuilder ?.let { it() }
+                            }
+                        ) {
+                            bodyBuilder()
+                        }
+                        beforeFooterBuilder ?.let { it() }
+                        footerBuilder ?.let {
+                            Div(
+                                {
+                                    include(UIKitModal.Footer)
+                                    footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
+                                }
+                            ) {
+                                it()
+                            }
+                        }
                     }
-                ) {
-                    it()
                 }
             }
         }
-
-        DisposableRefEffect {
-            DialogDisposableEffectResult(it, onHide, onHidden)
-        }
-
-        DomSideEffect { htmlElement ->
-            var wrapper: (Event) -> Unit = {}
-            wrapper = { it: Event ->
-                htmlElement.removeEventListener("hidden", wrapper)
-                htmlElement.remove()
-                onHidden ?.invoke()
-            }
-            htmlElement.addEventListener("hidden", wrapper)
-
-            UIKit.modal("#${htmlElement.id}") ?.show()
-        }
     }
+
+    Div({
+        hidden()
+        ref {
+            onDispose {
+                draw.value = false
+            }
+        }
+    })
 }
 
 @Composable
 fun Dialog(
     title: String,
     vararg modifiers: UIKitModifier,
-    hide: (() -> Unit)? = null,
-    hidden: (() -> Unit)? = null,
-    footerBuilder: (@Composable () -> Unit)? = null,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    bodyBuilder: @Composable () -> Unit
+    onHidden: ((HTMLDivElement) -> Unit)? = null,
+    onShown: ((HTMLDivElement) -> Unit)? = null,
+    dialogAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
+    headerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
+    headerBuilder: ContentBuilder<HTMLDivElement>? = null,
+    afterHeaderBuilder: ContentBuilder<HTMLDivElement>? = null,
+    beforeFooterBuilder: ContentBuilder<HTMLDivElement>? = null,
+    footerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
+    footerBuilder: ContentBuilder<HTMLDivElement>? = null,
+    bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
+    autoShow: Boolean = true,
+    removeOnHide: Boolean = true,
+    bodyBuilder: ContentBuilder<HTMLDivElement> = {}
 ) = Dialog(
     modifiers = modifiers,
+    attributesCustomizer = attributesCustomizer,
+    onHidden = onHidden,
+    onShown = onShown,
+    dialogAttrsBuilder = dialogAttrsBuilder,
+    headerAttrsBuilder = headerAttrsBuilder,
     headerBuilder = {
         H2({ include(UIKitModal.Title) }) {
             Text(title)
         }
+        headerBuilder ?.invoke(this)
     },
-    onHide = hide,
+    afterHeaderBuilder = afterHeaderBuilder,
-    onHidden = hidden,
+    beforeFooterBuilder = beforeFooterBuilder,
-    footerBuilder = footerBuilder ?.let { _ ->
+    footerAttrsBuilder = footerAttrsBuilder,
-        {
+    footerBuilder = footerBuilder,
-            footerBuilder()
+    bodyAttrsBuilder = bodyAttrsBuilder,
-        }
+    autoShow = autoShow,
-    },
+    removeOnHide = removeOnHide,
-    attributesCustomizer = {
+    bodyBuilder = bodyBuilder
-        attributesCustomizer()
-    },
-    bodyBuilder = {
-        bodyBuilder()
-    }
 )

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Drop.kt

@@ -0,0 +1,24 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitDrop
+import dev.inmo.jsuikit.modifiers.attrsBuilder
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Drop(
+    buttonBuilder: AttrsWithContentBuilder<HTMLButtonElement>,
+    dropBuilder: AttrsWithContentBuilder<HTMLDivElement>
+) {
+    DefaultButton(
+        attributesCustomizer = buttonBuilder.attributesBuilderContext,
+        contentAllocator = buttonBuilder.builder
+    )
+    Div(
+        (Attrs<HTMLDivElement>(UIKitDrop.Custom()) + dropBuilder.attrs).builder,
+        dropBuilder.builder
+    )
+}

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Grid.kt

@@ -1,8 +1,8 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.*
-import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.buildAttribute
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDivElement
 
@@ -26,23 +26,18 @@ fun GridColumn(
 fun Grid(
     vararg modifiers: UIKitModifier,
     masonry: Boolean = false,
-    parallax: Int? = null,
+    parallax: UInt? = null,
-    marginClass: String? = null,
+    marginClass: UIKitMargin? = null,
     firstColumnClass: String? = null,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit = {}
+    builder: ContentBuilder<HTMLDivElement> = {}
 ) {
-    val attrs = listOfNotNull(
-        if (masonry) "masonry" to "true" else null,
-        parallax ?.let { "parallax" to it.toString() },
-        marginClass ?.let { "margin" to it },
-        firstColumnClass ?.let { "first-column" to it },
-    )
     Div(
         {
-            attr("uk-grid", attrs.joinToString(";") { (k, v) -> "$k: $v" })
+            include(
-            classes("uk-grid")
+                UIKitGrid.invoke(marginClass, firstColumnClass, masonry, parallax),
-            include(*modifiers)
+                *modifiers
+            )
             attributesCustomizer()
         }
     ) {

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Icon.kt

@@ -202,60 +202,62 @@ sealed class Icon(val name: String) {
         object Youtube : Brands("youtube")
     }
 
-    @Composable
-    operator fun invoke(
-        vararg modifiers: UIKitModifier,
-        type: UIKitIconType = UIKitIconType.Default,
-        ratio: Float? = null,
-        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
-        onClick: ((Event) -> Unit)? = null
-    ) {
-        val configurer: AttrBuilderContext<out HTMLElement> = {
-            include(*modifiers, type, UIKitIcon)
-            attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
-            onClick ?.let { _ ->
-                onClick { onClick(it.nativeEvent) }
-            }
-            attributesCustomizer()
-        }
-        when (type) {
-            UIKitIconType.Default -> Span(configurer)
-            UIKitIconType.Link -> A(href = "#", configurer)
-            UIKitIconType.Button -> Button(configurer)
-        }
-    }
-
     class Custom(name: String) : Icon(name)
 
-    @Composable
+    companion object {
-    fun drawAsButton(
+    }
-        vararg modifiers: UIKitModifier,
-        ratio: Float? = null,
-        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
-        onClick: ((Event) -> Unit)? = null
-    ) = invoke(*modifiers, type = UIKitIconType.Button, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
-
-    @Composable
-    fun drawAsIcon(
-        vararg modifiers: UIKitModifier,
-        ratio: Float? = null,
-        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
-        onClick: ((Event) -> Unit)? = null
-    ) = invoke(*modifiers, type = UIKitIconType.Default, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
-
-    @Composable
-    fun drawAsLink(
-        vararg modifiers: UIKitModifier,
-        ratio: Float? = null,
-        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
-        onClick: ((Event) -> Unit)? = null
-    ) = invoke(*modifiers, type = UIKitIconType.Link, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
-
-    @Composable
-    fun drawAsFormInputPart(
-        vararg modifiers: UIKitModifier,
-        ratio: Float? = null,
-        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
-        onClick: ((Event) -> Unit)? = null
-    ) = invoke(*modifiers, UIKitForm.Icon, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
 }
+@Composable
+operator fun Icon.invoke(
+    vararg modifiers: UIKitModifier,
+    type: UIKitIconType = UIKitIconType.Default,
+    ratio: Float? = null,
+    attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+    onClick: ((Event) -> Unit)? = null
+) {
+    val configurer: AttrBuilderContext<out HTMLElement> = {
+        include(*modifiers, type, UIKitIcon)
+        attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
+        onClick ?.let { _ ->
+            onClick { onClick(it.nativeEvent) }
+        }
+        attributesCustomizer()
+    }
+    when (type) {
+        UIKitIconType.Default -> Span(configurer)
+        UIKitIconType.Link -> A(href = "#", configurer)
+        UIKitIconType.Button -> Button(configurer)
+    }
+}
+
+@Composable
+fun Icon.drawAsButton(
+    vararg modifiers: UIKitModifier,
+    ratio: Float? = null,
+    attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+    onClick: ((Event) -> Unit)? = null
+) = invoke(*modifiers, type = UIKitIconType.Button, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
+
+@Composable
+fun Icon.drawAsIcon(
+    vararg modifiers: UIKitModifier,
+    ratio: Float? = null,
+    attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+    onClick: ((Event) -> Unit)? = null
+) = invoke(*modifiers, type = UIKitIconType.Default, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
+
+@Composable
+fun Icon.drawAsLink(
+    vararg modifiers: UIKitModifier,
+    ratio: Float? = null,
+    attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+    onClick: ((Event) -> Unit)? = null
+) = invoke(*modifiers, type = UIKitIconType.Link, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
+
+@Composable
+fun Icon.drawAsFormInputPart(
+    vararg modifiers: UIKitModifier,
+    ratio: Float? = null,
+    attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+    onClick: ((Event) -> Unit)? = null
+) = invoke(*modifiers, UIKitForm.Icon, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Iconnav.kt

@@ -0,0 +1,41 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitIconnav
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLLIElement
+import org.w3c.dom.HTMLUListElement
+
+@Composable
+fun <T> IconNav(
+    data: Iterable<T>,
+    listAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {},
+    elementBuilder: @Composable ElementScope<HTMLLIElement>.(T) -> Unit
+) {
+    Ul(
+        {
+            include(UIKitIconnav)
+            listAttrs.builder(this)
+        }
+    ) {
+        data.forEach {
+            Li(
+                {
+                    elementAttrsBuilder.invoke(this, it)
+                }
+            ) { elementBuilder(this, it) }
+        }
+    }
+}
+
+@Composable
+fun <T> Iconnav(
+    data: Iterable<T>,
+    listAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {},
+    elementBuilder: @Composable ElementScope<HTMLLIElement>.(T) -> Unit
+) = IconNav(data, listAttrs, elementAttrsBuilder, elementBuilder)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Inline.kt

@@ -0,0 +1,18 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitUtility
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Inline(
+    attrBuilderContext: AttrBuilderContext<HTMLDivElement>? = null,
+    contentBuilder: ContentBuilder<HTMLDivElement>
+) = Div({
+    include(UIKitUtility.Inline)
+    attrBuilderContext ?.invoke(this)
+}, contentBuilder)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/List.kt

@@ -10,7 +10,7 @@ import org.w3c.dom.HTMLUListElement
 
 @Composable
 fun <T> List(
-    data: SnapshotStateList<T>,
+    data: Iterable<T>,
     ukAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) {
@@ -29,7 +29,7 @@ fun <T> List(
 @Composable
 fun <T> ListWithTitle(
     title: String,
-    data: SnapshotStateList<T>,
+    data: Iterable<T>,
     vararg titleModifiers: UIKitModifier,
     ulModifiers: Array<UIKitModifier> = emptyArray(),
     besidesTitleAndList: (@Composable () -> Unit)? = null,
@@ -43,25 +43,3 @@ fun <T> ListWithTitle(
     besidesTitleAndList ?.invoke()
     List(data, Attrs(*ulModifiers) { ulCustomizer(this) }, elementAllocator)
 }
-
-@Deprecated("Renamed", ReplaceWith("ListWithTitle", "dev.inmo.jsuikit.elements.ListWithTitle"))
-@Composable
-fun <T> List(
-    title: String,
-    data: SnapshotStateList<T>,
-    vararg titleModifiers: UIKitModifier,
-    ulModifiers: Array<UIKitModifier> = emptyArray(),
-    besidesTitleAndList: (@Composable () -> Unit)? = null,
-    titleCustomizer: AttrBuilderContext<HTMLHeadingElement> = {},
-    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
-    elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
-) = ListWithTitle(
-    title,
-    data,
-    *titleModifiers,
-    ulModifiers = ulModifiers,
-    besidesTitleAndList = besidesTitleAndList,
-    titleCustomizer = titleCustomizer,
-    ulCustomizer = ulCustomizer,
-    elementAllocator = elementAllocator
-)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt

@@ -22,33 +22,6 @@ fun Navbar(
     }
 }
 
-@Deprecated("Will be removed soon. Use the variant with AttrsWithContentBuilders")
-@Composable
-fun Navbar(
-    leftBuilder: NavbarNavBuilder?,
-    centerBuilder: NavbarNavBuilder? = null,
-    rightBuilder: NavbarNavBuilder? = null,
-    vararg navModifiers: UIKitModifier,
-    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
-) {
-    Navbar(
-        {
-            include(*navModifiers)
-            attributesCustomizer()
-        }
-    ) {
-        leftBuilder ?.let {
-            Div({ include(UIKitNavbar.Alignment.Left) }) { it.draw() }
-        }
-        centerBuilder ?.let {
-            Div({ include(UIKitNavbar.Alignment.Center) }) { it.draw() }
-        }
-        rightBuilder ?.let {
-            Div({ include(UIKitNavbar.Alignment.Right) }) { it.draw() }
-        }
-    }
-}
-
 @Composable
 fun Navbar(
     leftBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,

src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt

@@ -5,8 +5,7 @@ import dev.inmo.jsuikit.modifiers.*
 import dev.inmo.jsuikit.utils.*
 import org.jetbrains.compose.web.attributes.AttrsScope
 import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.HTMLLIElement
+import org.w3c.dom.*
-import org.w3c.dom.HTMLUListElement
 
 @Composable
 fun NavbarNav(
@@ -31,57 +30,16 @@ fun NavbarNav(
     attrs: Attrs<HTMLUListElement> = Attrs.empty()
 ) = NavbarNav(elements.toList(), attrs)
 
-@Deprecated("Will be removed soon. Use NavbarNavPart with AttrsWithContentBuilder instead")
+fun NavbarNavBuilder(
-interface NavbarNavElement {
+    elements: List<AttrsWithContentBuilder<HTMLLIElement>>,
-    fun AttrsScope<HTMLLIElement>.setup() {}
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
-    @Composable
+    containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
-    fun ElementScope<HTMLLIElement>.fill()
+) = AttrsWithContentBuilder<HTMLDivElement>(containerAttrs) {
-
+    NavbarNav(elements, attrs)
-    class Default(
-        private val setupCallback: AttrsScope<HTMLLIElement>.() -> Unit,
-        private val fillCallback: @Composable ElementScope<HTMLLIElement>.() -> Unit
-    ) : NavbarNavElement {
-        override fun AttrsScope<HTMLLIElement>.setup() {
-            setupCallback()
-        }
-
-        @Composable
-        override fun ElementScope<HTMLLIElement>.fill() {
-            fillCallback()
-        }
-    }
 }
 
-@Deprecated("Will be removed soon. Use NavbarNavPart with AttrsWithContentBuilder instead")
+fun NavbarNavBuilder(
-class NavbarNavBuilder(
+    vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
-    private val modifiers: Array<UIKitModifier>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
-    private val elements: List<NavbarNavElement>,
+    containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
-    private val attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
+) = NavbarNavBuilder(elements.toList(), attrs, containerAttrs)
-) {
-    constructor(
-        modifiers: Array<UIKitModifier>,
-        vararg elements: NavbarNavElement,
-        attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
-    ) : this(modifiers, elements.toList(), attributesCustomizer)
-    constructor(
-        vararg elements: NavbarNavElement,
-        attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
-    ) : this(emptyArray(), elements.toList(), attributesCustomizer)
-    @Composable
-    fun draw() {
-        Ul(
-            {
-                include(UIKitNavbar.Nav, *modifiers)
-                attributesCustomizer()
-            }
-        ) {
-            elements.forEach { element ->
-                Li(
-                    { element.apply { setup() } }
-                ) {
-                    element.apply { fill() }
-                }
-            }
-        }
-    }
-}

src/jsMain/kotlin/dev/inmo/jsuikit/elements/StandardInput.kt

@@ -11,11 +11,12 @@ import org.w3c.dom.HTMLInputElement
 @Composable
 fun <T> StandardInput(
     type: InputType<T>,
-    state: MutableState<T>,
+    value: T? = null,
-    disabledState: State<Boolean>? = null,
-    placeholder: String? = null,
     vararg modifiers: UIKitModifier,
+    disabled: Boolean = false,
+    placeholder: String? = null,
     attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+    onChange: HTMLInputElement.(T) -> Unit
 ) {
     Input(type) {
         classes("uk-input")
@@ -23,7 +24,7 @@ fun <T> StandardInput(
 
         placeholder ?.let(::placeholder)
 
-        state.value.let {
+        value ?.let {
             when (it) {
                 is String -> value(it)
                 is Number -> value(it)
@@ -31,24 +32,44 @@ fun <T> StandardInput(
             }
         }
 
-        onInput { state.value = it.value }
+        onInput { event -> event.target.onChange(event.value) }
 
-        disabledState ?.let {
+        if (disabled) {
-            if (it.value) {
+            disabled()
-                disabled()
-            }
         }
         attributesCustomizer()
     }
 }
 
+@Deprecated("Renamed", ReplaceWith("StandardInput(type, value, *modifiers, disabled, placeholder, attributesCustomizer, onChange)"))
 @Composable
-@Deprecated("Renamed", ReplaceWith("StandardInput", "dev.inmo.jsuikit.elements.StandardInput"))
+fun <T> DefaultInput(
-fun <T> TextField(
+    type: InputType<T>,
+    value: T,
+    disabled: Boolean = false,
+    placeholder: String? = null,
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+    onChange: (T) -> Unit
+) = StandardInput(type, value, modifiers = modifiers, disabled, placeholder, attributesCustomizer) {
+    onChange(it)
+}
+
+@Composable
+fun <T> StandardInput(
     type: InputType<T>,
     state: MutableState<T>,
     disabledState: State<Boolean>? = null,
     placeholder: String? = null,
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
-) = StandardInput(type, state, disabledState, placeholder, modifiers = modifiers, attributesCustomizer)
+) = StandardInput(
+    type,
+    state.value,
+    modifiers = modifiers,
+    disabledState ?.value == true,
+    placeholder,
+    attributesCustomizer = attributesCustomizer
+) {
+    state.value = it
+}

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Tabs.kt

@@ -0,0 +1,46 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitTab
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.optionallyDraw
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLLIElement
+import org.w3c.dom.HTMLUListElement
+
+@Composable
+fun <T> Tabs(
+    data: Iterable<T>,
+    tabsItemBuilder: @Composable ElementScope<HTMLLIElement>.(i: Int, data: T) -> Unit,
+    tabsItemAttrs: AttrsScope<HTMLLIElement>.(i: Int, data: T) -> Unit = { _, _ -> },
+    tabsContainerAttrs: AttrsScope<HTMLUListElement>.() -> Unit = {},
+    contentContainerAttrs: (AttrsScope<HTMLUListElement>.() -> Unit)? = null,
+    contentItemAttrs: (AttrsScope<HTMLLIElement>.(i: Int, data: T) -> Unit)? = null,
+    contentItemBuilder: (@Composable ElementScope<HTMLLIElement>.(i: Int, data: T) -> Unit)? = null
+) {
+    Ul({
+        include(UIKitTab);
+        tabsContainerAttrs()
+    }) {
+        data.forEachIndexed { i, data ->
+            Li({ tabsItemAttrs(i, data) }) {
+                tabsItemBuilder(i, data)
+            }
+        }
+    }
+
+    optionallyDraw(contentItemAttrs != null, contentItemBuilder != null, contentContainerAttrs != null) {
+        Ul({
+            contentContainerAttrs ?.invoke(this)
+        }) {
+            optionallyDraw(contentItemAttrs != null, contentItemBuilder != null) {
+                data.forEachIndexed { i, data ->
+                    Li({ contentItemAttrs ?.invoke(this, i, data) }) {
+                        contentItemBuilder ?.invoke(this, i, data)
+                    }
+                }
+            }
+        }
+    }
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitArticle.kt

@@ -0,0 +1,12 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitArticle(
+    override val classes: Array<String>
+) : UIKitModifier {
+
+    object Title : UIKitArticle(arrayOf("uk-article-title"))
+    object Meta : UIKitArticle(arrayOf("uk-article-meta"))
+
+    companion object : UIKitArticle(arrayOf("uk-article"))
+
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitBadge.kt

@@ -0,0 +1,7 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitBadge(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    companion object : UIKitBadge("uk-badge")
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitDrop.kt

@@ -0,0 +1,122 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.css.selectors.CSSSelector
+
+sealed class UIKitDrop(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    sealed class Position(name: String) : AttributeValue(name) {
+
+        sealed class Bottom(name: String) : Position("bottom-$name") {
+
+            object Left : Bottom("left")
+            object Center : Bottom("center")
+            object Right : Bottom("right")
+            object Justify : Bottom("justify")
+
+        }
+
+        sealed class Top(name: String) : Position("top-$name") {
+
+            object Left : Top("left")
+            object Center : Top("center")
+            object Right : Top("right")
+            object Justify : Top("justify")
+
+        }
+
+        sealed class Left(name: String) : Position("left-$name") {
+
+            object Top : Left("top")
+            object Center : Left("center")
+            object Bottom : Left("bottom")
+
+        }
+
+        sealed class Right(name: String) : Position("right-$name") {
+
+            object Top : Right("top")
+            object Center : Right("center")
+            object Bottom : Right("bottom")
+
+        }
+    }
+
+    sealed class Stretch(name: String) : AttributeValue(name) {
+        object True : Stretch("true")
+        object X : Stretch("x")
+        object Y : Stretch("y")
+    }
+
+    sealed class Mode(name: String) : AttributeValue(name) {
+
+        object Click : Mode("click")
+        object Hover : Mode("hover")
+
+        object None : Mode("")
+        object HoverAndClick : Mode("$Hover, $Click")
+
+    }
+
+    class Custom internal constructor(
+        classes: Array<String> = emptyArray(),
+        otherAttrs: Map<String, String> = emptyMap()
+    ) : UIKitDrop(classes, otherAttrs)
+
+    companion object {
+        operator fun invoke(
+            toggle: CSSSelector? = null,
+            position: Position? = null,
+            stretch: Stretch? = null,
+            mode: Mode? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            autoUpdate: Boolean? = null,
+            boundary: CSSSelector? = null,
+            boundaryX: CSSSelector? = null,
+            boundaryY: CSSSelector? = null,
+            target: CSSSelector? = null,
+            targetX: CSSSelector? = null,
+            targetY: CSSSelector? = null,
+            inset: Boolean? = null,
+            flip: Boolean? = null,
+            shift: Boolean? = null,
+            offset: Pixels? = null,
+            animation: UIKitAnimation? = null,
+            animationOut: Boolean? = null,
+            bgScroll: Boolean? = null,
+            duration: Milliseconds? = null,
+            container: Boolean? = null
+        ) = Custom(
+            arrayOf("uk-drop"),
+            mapOf(
+                buildAttribute("uk-drop") {
+                    "toggle" to toggle
+                    "position" to position
+                    "stretch" to stretch
+                    "mode" to mode
+                    "delay-show" to delayShow
+                    "delay-hide" to delayHide
+                    "auto-update" to autoUpdate
+                    "boundary" to boundary
+                    "boundary-x" to boundaryX
+                    "boundary-y" to boundaryY
+                    "target" to target
+                    "target-x" to targetX
+                    "target-y" to targetY
+                    "inset" to inset
+                    "flip" to flip
+                    "shift" to shift
+                    "offset" to offset
+                    "animation" to animation
+                    "animation-out" to animationOut
+                    "bg-scroll" to bgScroll
+                    "duration" to duration
+                    "container" to container
+                }
+            )
+        )
+    }
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitGrid.kt

@@ -14,12 +14,30 @@ sealed class UIKitGrid(vararg classnames: String) : UIKitModifier {
 
     }
 
+    sealed class Column(classname: String) : UIKitGrid(classname) {
+
+        object Small : Column("uk-grid-column-small")
+        object Medium : Column("uk-grid-column-medium")
+        object Large : Column("uk-grid-column-large")
+        object Collapse : Column("uk-grid-column-collapse")
+
+    }
+
+    sealed class Row(classname: String) : UIKitGrid(classname) {
+
+        object Small : Row("uk-grid-row-small")
+        object Medium : Row("uk-grid-row-medium")
+        object Large : Row("uk-grid-row-large")
+        object Collapse : Row("uk-grid-row-collapse")
+
+    }
+
     object Divider : UIKitGrid("uk-grid-divider")
 
     object MatchHeight : UIKitGrid("uk-grid-match")
     object ItemMatchHeight : UIKitGrid("uk-grid-item-match")
 
-    class Custom internal constructor(override val otherAttrs: Map<String, String>) : UIKitGrid()
+    class Custom internal constructor(override val otherAttrs: Map<String, String>) : UIKitGrid("uk-grid")
 
     companion object : UIKitGrid("uk-grid") {
         operator fun invoke(

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitIconnav.kt

@@ -0,0 +1,11 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitIconnav(
+    override val classes: Array<String>
+) : UIKitModifier {
+
+    object Vertical : UIKitIconnav(arrayOf("uk-iconnav-vertical"))
+
+    companion object : UIKitIconnav(arrayOf("uk-iconnav"))
+
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitLeader.kt

@@ -0,0 +1,28 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+
+sealed class UIKitLeader(
+    override val classes: Array<String>,
+    override val otherAttrs: Map<String, String>
+) : UIKitModifier {
+
+    class Custom(
+        otherAttrs: Map<String, String>
+    ) : UIKitLeader(arrayOf("uk-leader"), otherAttrs)
+
+    companion object : UIKitLeader(arrayOf("uk-leader"), emptyMap()) {
+        operator fun invoke(
+            media: String? = null,
+            fill: String? = null
+        ) = Custom(
+            mapOf(
+                buildAttribute("uk-leader") {
+                    "fill" to fill
+                    "media" to media
+                }
+            )
+        )
+    }
+
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitTab.kt

@@ -0,0 +1,51 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+import org.jetbrains.compose.web.css.selectors.CSSSelector
+import kotlin.time.Duration
+
+sealed class UIKitTab(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    sealed class Position(
+        classes: Array<String> = emptyArray(),
+        otherAttrs: Map<String, String> = emptyMap()
+    ) : UIKitTab(classes, otherAttrs) {
+        object Bottom : Position(arrayOf("uk-tab-bottom"))
+        object Left : Position(arrayOf("uk-tab-left"))
+        object Right : Position(arrayOf("uk-tab-right"))
+    }
+
+    class Custom(
+        connect: CSSSelector? = null,
+        toggle: CSSSelector? = null,
+        active: Int? = null,
+        animationsIn: Array<UIKitAnimation>? = null,
+        animationsOut: Array<UIKitAnimation>? = null,
+        animationDuration: Duration? = null,
+        swiping: Boolean? = null,
+        media: String? = null
+    ) : UIKitTab(
+        arrayOf("uk-tab"),
+        mapOf(
+            buildAttribute("uk-tab") {
+                "connect" to connect
+                "toggle" to toggle
+                "active" to active
+                "animation" to (
+                    (animationsIn ?.let {
+                        it.joinToString(" ") { it.name }
+                    } ?: "") + (animationsOut ?.let {
+                        it.joinToString(" ", ",") { it.name }
+                    } ?: "")
+                ).takeIf { it.isNotBlank() }
+                "duration" to animationDuration
+                "swiping" to swiping
+                "media" to media
+            }
+        )
+    )
+
+    companion object : UIKitTab(arrayOf("uk-tab"), mapOf("uk-tab" to ""))
+}

src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKit.kt

@@ -6,6 +6,7 @@ import kotlin.js.Json
 external interface UIKit {
     val notification: UIKitNotifications
     val modal: UIKitDialogs
+    val util: UIKitUtil
 
 
     fun notification(message: String, parameters: Json)

src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKitUtil.kt

@@ -0,0 +1,8 @@
+package dev.inmo.jsuikit.types
+
+import org.w3c.dom.HTMLElement
+
+external interface UIKitUtil {
+    fun on(selector: String, event: String, callback: () -> Unit)
+    fun on(element: HTMLElement, event: String, callback: () -> Unit)
+}

src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttributeBuilderContextSums.kt

@@ -0,0 +1,9 @@
+package dev.inmo.jsuikit.utils
+
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
+
+operator fun <T : Element> AttrBuilderContext<T>.plus(other: AttrBuilderContext<T>): AttrBuilderContext<T> = {
+    this@plus()
+    other()
+}

src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttributesCollection.kt

@@ -3,7 +3,9 @@ package dev.inmo.jsuikit.utils
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.attributes.HtmlAttrMarker
 import org.jetbrains.compose.web.attributes.builders.InputAttrsScope
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLInputElement
 

src/jsMain/kotlin/dev/inmo/jsuikit/utils/OptionallyDraw.kt

@@ -4,13 +4,19 @@ import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.dom.ContentBuilder
 import org.w3c.dom.Element
 
+@Composable
+inline fun optionallyDraw (
+    vararg bools: Boolean,
+    whatToDraw: @Composable () -> Unit
+) {
+    if (bools.any { it }) {
+        whatToDraw()
+    }
+}
+
 @Composable
 inline fun <T : Element> optionallyDraw (
     attrs: Attrs<T>? = null,
     noinline contentBuilder: ContentBuilder<T>? = null,
     whatToDraw: @Composable () -> Unit
-) {
+) = optionallyDraw(attrs != null || contentBuilder != null, whatToDraw = whatToDraw)
-    if (attrs != null || contentBuilder != null) {
-        whatToDraw()
-    }
-}

src/jsMain/kotlin/dev/inmo/jsuikit/utils/ParametersBuilder.kt

@@ -1,13 +1,17 @@
 package dev.inmo.jsuikit.utils
 
+import dev.inmo.jsuikit.modifiers.AttributeValue
+
 
 class ParametersBuilder(
     val skipNullValues: Boolean = true,
     private val parameters: MutableMap<String, String?> = mutableMapOf()
 ) {
     fun add(k: String, v: Any? = null) {
-        if (v != null || !skipNullValues) {
+        when {
-            parameters[k] = v ?.toString()
+            v is AttributeValue -> parameters[k] = v.name
+            v == null && skipNullValues -> return
+            else -> parameters[k] = v ?.toString()
         }
     }
     infix fun String.to(value: Any?) = add(this, value)