Update CHANGELOG.md

0.5.1

.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 }}

.gitignore

@@ -11,6 +11,7 @@ out/
 
 secret.gradle
 local.properties
+local.*
 
 kotlin-js-store/
 

CHANGELOG.md

@@ -1,5 +1,297 @@
 # Changelog
 
+## 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
+
+## 0.1.6
+
+* Add support of UIKitButton size and group
+
+## 0.1.5
+
+* Fix access to `UIKitSticky`
+
+## 0.1.4
+
+* Improvements in `UIKitGrid`
+* Add support of `UIKitSticky`
+
+## 0.1.3
+
+* Add support of sections
+* Improve support of navbars
+
+## 0.1.2
+
+* New typealias `AttrsWithContentBuilder`
+* Old `DList` and related composable functions removed (they are built-in in compose)
+
+## 0.1.1
+
+* `Compose`: `1.2.0-alpha01-dev686`
+
+## 0.1.0
+
+* `Kotlin` = `1.6.21`
+* `Compose`: `1.2.0-alpha01-dev683`
+
+## 0.0.53
+
+* Improvements in `UIKitPadding`
+* Add support of UIKit lists
+
+## 0.0.52
+
+* Improve work with UIKitModifiers
+
+## 0.0.51
+
+* New interface `Dropdown` which will be used to create (or retrieve) dropdown for an element
+* New attribute in `NavItemElement` for configuration of `A` element
+
+## 0.0.50
+
+* Add opportunity to customize content in title of `Nav` after text
+
+## 0.0.49
+
+* Now it is possible to use optional title in navs builders
+
+## 0.0.48
+
+* Added support of `Breadcrumb`
+* Add opportunity to summarize `UIKitModifier`
+* Add opportunity to simply create attributes builder using `UIKitModifier` of array of them
+
+## 0.0.47
+
+* Add support of `Close` element
+
+## 0.0.46
+
+* Add support of `UIKitOverlay`
+* Add support of `UIKitInverse`
+
+## 0.0.45
+
+* Add support of containers in `UIKitContainer` modifiers and `Container` function
+
+## 0.0.44
+
+* `Versions`:
+    * `Compose`: `1.1.0` -> `1.1.1`
+
+## 0.0.43
+
+* Several new extensions for `UIKitModifier` like `UIKitModifier#onSmallScreen`
+* Support of `Tile`
+
+## 0.0.42
+
+* Migration to compose 1.1.0
+* Replaces according to it
+
+## 0.0.41
+
+* Add `DropArea`
+* Add `UIKitPlaceholder`
+* `UIKitForm#Custom` now have nullable param target
+* Add `UIKitUtility#Link`
+* Add `DescriptionList` and several support composable functions
+
+## 0.0.40
+
+* All `DefaultTable` functions now use `Iterable` as data type
+
+## 0.0.39
+
+* Add support of `Notifications`
+
+## 0.0.38
+
+* Add support of `Toggle`
+* Attributes collection now can be concatenated
+
+## 0.0.37
+
+* `Dialog` now do not add auto margin by default
+* Support of `Accordion` element
+
+## 0.0.36
+
+* Reorder arguments in `DefaultComment` fun
+* Add `Vertical` and `Horizontal` members in margins
+* Add `afterHeaderBuilder` and `beforeFooterBuilder` properties in `Dialog` fun
+* Add `UIKitCustom` to be able for simple creating of custom modifiers
+* Add support of `UIKitForm`
+
+## 0.0.35
+
+* Add `UIKitModal`
+* Improve work with dialogs
+
+## 0.0.34
+
+* Add `Alert`
+* Add `Animation#KenBurns`
+
+## 0.0.33
+
+* Fixes in attributes building and related things
+
+## 0.0.32
+
+* Support of `UIKitHeight`
+* New builder `AttributesBuilder`
+* New `Percents`/`Pixels` abstractions
+* Fixes in `UIKitWidth#Fixed` classnames
+
+## 0.0.31
+
+* Support of `UIKitVisibility`
+
+## 0.0.30
+
+* Add `UIKitComment`
+* Including of `Comment` element
+* Upfill `UIKitSubNav`
+
+## 0.0.29
+
+* Unfilling of `UIKitText`
+
+## 0.0.28
+
+* Fixes in `UIKitWidth`
+
+## 0.0.27
+
+* `TextField` has been renamed to `StandardInput`
+* `StandardInput` now will look for changes in state
+
+## 0.0.26
+
+* Add UIKitColumn
+
+## 0.0.25
+
+* Full including of divider
+
+## 0.0.24
+
+* Add opportunity to fill space between header and body of table
+
+## 0.0.23
+
+* New parameter of tables `headerCustomizer`
+
+## 0.0.22
+
+* Add opportunity to customize table header cells
+
+## 0.0.21
+
+* Upfill `UIKitWidth`
+* New extension `UIKitModifier#applyWhenScreenSizeIs`
+
+## 0.0.20
+
+* Remove type of button from `DefaultButton` and add companion to `UIKitButton` to be able to use `uk-button` class
+
+## 0.0.19
+
+* Create `Card`s implementation
+* Upgrade `Label` composable draw and create `UIKitLabel` modifiers
+
+## 0.0.18
+
+* Add base companion for `UIKitFlex` with result class `uk-flex`
+
+## 0.0.17
+
+* In `DefaultTable` `headingCustomizer` has been renamed to `headerCellCustomizer`
+* Add index and title parameters for `headerCellCustomizer` in `DefaultTable`
+
+## 0.0.16
+
+* Add opportunity to customize `NavDivider`
+
+## 0.0.15
+
+* Add support of link icons
+
+## 0.0.14
+
+* Add DefaultTable parameter cellCustomizer
+
+## 0.0.13
+
+* Add `Icon#Custom`
+
 ## 0.0.12
 
 * Add `rowAttributes` to table fun

build.gradle

@@ -26,6 +26,7 @@ repositories {
     mavenLocal()
     mavenCentral()
     google()
+    maven { url "https://maven.pkg.jetbrains.space/public/p/compose/dev" }
 }
 
 kotlin {

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

@@ -9,4 +9,4 @@ android.enableJetifier=true
 # Project data
 
 group=dev.inmo
-version=0.0.12
+version=0.5.2

gradle/libs.versions.toml

@@ -1,9 +1,9 @@
 [versions]
 
-kt = "1.6.10"
-jb-compose = "1.0.1"
-jb-dokka = "1.6.10"
-gh-release = "2.2.12"
+kt = "1.7.20"
+jb-compose = "1.2.2"
+jb-dokka = "1.7.20"
+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.3.3-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

local.make_version.sh

@@ -0,0 +1 @@
+git add -A && git stash && git checkout master && git pull && git checkout -b "$1" && nano gradle.properties CHANGELOG.md && git add -A && git commit -m "start $1" && git stash pop && git add -A && nano CHANGELOG.md && git add -A && git commit -m "$2" && git push --set-upstream origin "$1" && ./gradlew clean && ./gradlew publishToMavenLocal

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,27 +1,14 @@
 package dev.inmo.jsuikit
 
-import dev.inmo.jsuikit.modifiers.AttributeValue
-import org.jetbrains.compose.web.attributes.AttrsBuilder
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.attributes.AttrsScope
 
-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 AttrsBuilder<*>.buildAndAddAttribute(
+fun AttrsScope<*>.buildAndAddAttribute(
     attributeName: String,
-    block: UIKitAttributeValueBuilder.() -> Unit
+    skipNullValues: Boolean = true,
+    block: ParametersBuilder.() -> Unit
 ) {
-    attr(attributeName, UIKitAttributeValueBuilder().apply(block).build())
+    buildAttribute(attributeName, skipNullValues, block).let {
+        attr(it.first, it.second)
+    }
 }

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

@@ -0,0 +1,89 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitAccordion
+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.*
+
+@Composable
+fun <T> Accordion(
+    data: Iterable<T>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    itemAttrsBuilder: AttrsScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    itemContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit
+) {
+    Ul(
+        {
+            include(UIKitAccordion)
+            attrs.builder(this)
+        }
+    ) {
+        data.forEachIndexed { i, t ->
+            Li({ itemAttrsBuilder(i, t) }) {
+                itemContentBuilder(i, t)
+            }
+        }
+    }
+}
+
+@Composable
+fun <T> DefaultAccordion(
+    data: Iterable<T>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    itemAttrsBuilder: AttrsScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    titleAttrsBuilder: AttrsScope<HTMLAnchorElement>.(Int, T) -> Unit = { _, _ -> },
+    titleContentBuilder: @Composable ElementScope<HTMLAnchorElement>.(Int, T) -> Unit = { _, _ -> },
+    beforeTitleContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    afterTitleContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    afterContentContentBuilder: @Composable  ElementScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    contentAttrsBuilder: AttrsScope<HTMLDivElement>.(Int, T) -> Unit = { _, _ -> },
+    contentContentBuilder: @Composable ElementScope<HTMLDivElement>.(Int, T) -> Unit
+) = Accordion(
+    data,
+    attrs,
+    itemAttrsBuilder
+) { i, t ->
+    beforeTitleContentBuilder(i, t)
+    A(
+        attrs = {
+            include(UIKitAccordion.Title)
+            titleAttrsBuilder(i, t)
+        }
+    ) {
+        titleContentBuilder(i, t)
+    }
+    afterTitleContentBuilder(i, t)
+    Div(
+        {
+            include(UIKitAccordion.Content)
+            contentAttrsBuilder(i, t)
+        }
+    ) {
+        contentContentBuilder(i, t)
+    }
+    afterContentContentBuilder(i, t)
+}
+
+@Composable
+fun <T> DefaultAccordion(
+    data: Iterable<T>,
+    titleResolver: (Int, T) -> String,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    itemAttrsBuilder: AttrsScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    titleAttrsBuilder: AttrsScope<HTMLAnchorElement>.(Int, T) -> Unit = { _, _ -> },
+    contentAttrsBuilder: AttrsScope<HTMLDivElement>.(Int, T) -> Unit = { _, _ -> },
+    contentContentBuilder: @Composable ElementScope<HTMLDivElement>.(Int, T) -> Unit
+) = DefaultAccordion(
+    data,
+    attrs,
+    itemAttrsBuilder,
+    titleAttrsBuilder,
+    { i, t ->
+        org.jetbrains.compose.web.dom.Text(titleResolver(i, t))
+    },
+    contentAttrsBuilder = contentAttrsBuilder,
+    contentContentBuilder = contentContentBuilder
+)

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

@@ -0,0 +1,49 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.buildAndAddAttribute
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
+import dev.inmo.jsuikit.utils.Milliseconds
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLAnchorElement
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Alert(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    animation: UIKitAnimation? = UIKitAnimation.Fade,
+    duration: Milliseconds? = null,
+    selClose: String? = null,
+    content: ContentBuilder<HTMLDivElement>
+) = Div(
+    {
+        attrs.builder(this)
+        include(UIKitAlert)
+
+        buildAndAddAttribute("uk-alert") {
+            "animation" to animation ?.classes ?.firstOrNull()
+            "duration" to duration
+            "sel-close" to selClose
+        }
+    },
+    content
+)
+
+@Composable
+fun AlertCloseButton(
+    attrs: Attrs<HTMLAnchorElement> = Attrs.empty(),
+    content: ContentBuilder<HTMLAnchorElement> = @Composable {}
+) {
+    A(
+        null,
+        {
+            include(UIKitAlert.Close, UIKitIcon)
+            attr("uk-close", "")
+            classes("uk-close")
+            attrs.builder(this)
+        },
+        content
+    )
+
+}

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/Breadcrumb.kt

@@ -0,0 +1,50 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitBreadcrumb
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+@Composable
+fun <T> Breadcrumb(
+    data: Iterable<T>,
+    rootAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAttrs: Attrs<HTMLLIElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLLIElement>.(T) -> Unit = {},
+) {
+    Ul(
+        {
+            include(UIKitBreadcrumb)
+            rootAttrs.builder(this)
+        }
+    ) {
+        data.forEach {
+            Li({ elementAttrs.builder(this) }) {
+                elementContent(it)
+            }
+        }
+    }
+}
+
+@Composable
+fun BreadcrumbActiveElement(
+    href: String? = "#",
+    elementAttrs: Attrs<HTMLAnchorElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLAnchorElement>.() -> Unit = {},
+) {
+    A(href, { elementAttrs.builder(this) }) {
+        elementContent()
+    }
+}
+
+@Composable
+fun BreadcrumbInactiveElement(
+    elementAttrs: Attrs<HTMLSpanElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLSpanElement>.() -> Unit = {},
+) {
+    Span({ elementAttrs.builder(this) }) {
+        elementContent()
+    }
+}

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

@@ -14,7 +14,6 @@ import org.w3c.dom.events.Event
 fun DefaultButton(
     vararg modifiers: UIKitModifier,
     disabled: Boolean = false,
-    buttonType: UIKitButton.Type = UIKitButton.Type.Default,
     onClick: ((SyntheticMouseEvent) -> Unit)? = null,
     attributesCustomizer: AttrBuilderContext<HTMLButtonElement> = {},
     contentAllocator: ContentBuilder<HTMLButtonElement>
@@ -22,8 +21,7 @@ fun DefaultButton(
     Button(
         {
             onClick ?.let { onClick(it) }
-            classes("uk-button")
-            include(*modifiers, buttonType)
+            include(UIKitButton, *modifiers)
             if (disabled) {
                 disabled()
             }
@@ -39,12 +37,11 @@ fun DefaultButton(
     text: String,
     vararg modifiers: UIKitModifier,
     disabled: Boolean = false,
-    buttonType: UIKitButton.Type = UIKitButton.Type.Default,
     preTextContentAllocator: ContentBuilder<HTMLButtonElement>? = null,
     afterTextContentAllocator: ContentBuilder<HTMLButtonElement>? = null,
     attributesCustomizer: AttrBuilderContext<HTMLButtonElement> = {},
     onClick: ((SyntheticMouseEvent) -> Unit)? = null
-) = DefaultButton(*modifiers, disabled = disabled, buttonType = buttonType, onClick = onClick, attributesCustomizer = attributesCustomizer) {
+) = DefaultButton(*modifiers, disabled = disabled, onClick = onClick, attributesCustomizer = attributesCustomizer) {
     preTextContentAllocator ?.apply { preTextContentAllocator() }
     Text(text)
     afterTextContentAllocator ?.apply { afterTextContentAllocator() }

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

@@ -0,0 +1,80 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.HTMLHeadingElement
+
+@Composable
+fun Card(
+    cardAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    headerAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    header: ContentBuilder<HTMLDivElement>? = null,
+    footerAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    footer: ContentBuilder<HTMLDivElement>? = null,
+    bodyAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    body: ContentBuilder<HTMLDivElement>
+) {
+    Div(
+        {
+            include(UIKitCard)
+            cardAttrs.builder(this)
+        }
+    ) {
+        header ?.let {
+            Div(
+                {
+                    include(UIKitCard.Parts.Header)
+                    headerAttrs.builder(this)
+                },
+                header
+            )
+        }
+        Div(
+            {
+                include(UIKitCard.Parts.Body)
+                bodyAttrs.builder(this)
+            },
+            body
+        )
+        footer ?.let {
+            Div(
+                {
+                    include(UIKitCard.Parts.Footer)
+                    footerAttrs.builder(this)
+                },
+                footer
+            )
+        }
+    }
+}
+
+@Composable
+fun CardTitle(
+    titleAttrs: Attrs<HTMLHeadingElement> = Attrs.empty(),
+    title: ContentBuilder<HTMLHeadingElement>
+) {
+    H3(
+        {
+            include(UIKitCard.Title)
+            titleAttrs.builder(this)
+        },
+        title
+    )
+}
+
+@Composable
+fun CardBadge(
+    badgeAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    badge: ContentBuilder<HTMLDivElement>
+) {
+    Div(
+        {
+            include(UIKitCard.Badge, UIKitLabel)
+            badgeAttrs.builder(this)
+        },
+        badge
+    )
+}

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

@@ -0,0 +1,45 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import dev.inmo.jsuikit.modifiers.UIKitClose
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.ButtonType
+import org.jetbrains.compose.web.attributes.type
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLAnchorElement
+import org.w3c.dom.HTMLButtonElement
+
+object Close {
+    @Composable
+    fun drawAsLink(
+        href: String = "#",
+        attrs: Attrs<HTMLAnchorElement> = Attrs.empty(),
+        contentBuilder: ContentBuilder<HTMLAnchorElement> = {}
+    ) = A(
+        href,
+        {
+            include(UIKitClose)
+            attrs.builder(this)
+        },
+        contentBuilder
+    )
+
+    @Composable
+    fun drawAsButton(
+        attrs: Attrs<HTMLButtonElement> = Attrs.empty(),
+        contentBuilder: ContentBuilder<HTMLButtonElement> = {},
+        onClick: ((SyntheticMouseEvent) -> Unit)? = null
+    ) = Button(
+        {
+            type(ButtonType.Button)
+            include(UIKitClose)
+            attrs.builder(this)
+            onClick ?.let {
+                onClick(onClick)
+            }
+        },
+        contentBuilder
+    )
+}

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

@@ -0,0 +1,106 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+@Composable
+fun Comment(
+    rootAttrs: Attrs<HTMLElement> = Attrs.empty(),
+    headerAttrs: Attrs<HTMLElement>? = null,
+    headerContent: ContentBuilder<HTMLElement>? = null,
+    bodyAttrs: Attrs<HTMLDivElement>? = null,
+    bodyContent: ContentBuilder<HTMLDivElement>? = null,
+) {
+    Article(
+        {
+            include(UIKitComment)
+            rootAttrs.builder(this)
+        }
+    ) {
+        if (headerAttrs != null || headerContent != null) {
+            Header (
+                {
+                    include(UIKitComment.Header)
+                    headerAttrs ?.builder ?.invoke(this)
+                }
+            ) {
+                headerContent ?.let { it(this) }
+            }
+        }
+        if (bodyAttrs != null || bodyContent != null) {
+            Div(
+                {
+                    include(UIKitComment.Body)
+                    bodyAttrs ?.builder ?.invoke(this)
+                }
+            ) {
+                bodyContent ?.let { it(this) }
+            }
+        }
+    }
+}
+
+@Composable
+fun DefaultComment(
+    rootAttrs: Attrs<HTMLElement> = Attrs.empty(),
+    headerGridAttrs: Attrs<HTMLDivElement>? = null,
+    headerAttrs: Attrs<HTMLElement>? = null,
+    additionalHeaderContent: ContentBuilder<HTMLElement>? = null,
+    avatarUrl: String? = null,
+    avatarAttrs: Attrs<HTMLImageElement>? = null,
+    titleAttrs: Attrs<HTMLHeadingElement>? = null,
+    titleContent: ContentBuilder<HTMLHeadingElement>? = null,
+    metaAttrs: Attrs<HTMLUListElement>? = null,
+    metaContent: ContentBuilder<HTMLUListElement>? = null,
+    bodyAttrs: Attrs<HTMLDivElement>? = null,
+    bodyContent: ContentBuilder<HTMLDivElement>? = null,
+) {
+    Comment(
+        rootAttrs = rootAttrs,
+        headerAttrs = headerAttrs,
+        headerContent = {
+            if (arrayOf(headerGridAttrs, avatarUrl, avatarAttrs, titleAttrs, titleContent, metaAttrs, metaContent).anyNotNull()) {
+                Grid(
+                    UIKitGrid.Gap.Medium, UIKitFlex.Alignment.Vertical.Middle,
+                    attributesCustomizer = headerGridAttrs ?.builder ?: {}
+                ) {
+                    if (avatarUrl != null) {
+                        Div({ include(UIKitWidth.Auto) }) {
+                            Img(avatarUrl, attrs = avatarAttrs ?.builder)
+                        }
+                    }
+                    if (arrayOf(titleAttrs, titleContent, metaAttrs, metaContent).anyNotNull()) {
+                        Div({ include(UIKitWidth.Expand) }) {
+                            optionallyDraw(titleAttrs, titleContent) {
+                                H4(
+                                    {
+                                        include(UIKitComment.Title, UIKitMargin.Remove)
+                                        titleAttrs ?.builder ?.invoke(this)
+                                    }
+                                ) {
+                                    titleContent ?.invoke(this)
+                                }
+                            }
+                            optionallyDraw(metaAttrs, metaContent) {
+                                Ul (
+                                    {
+                                        include(UIKitComment.Meta, UIKitSubNav, UIKitSubNav.Divider, UIKitMargin.Remove.Top)
+                                        metaAttrs ?.builder ?.invoke(this)
+                                    }
+                                ) {
+                                    metaContent ?.invoke(this)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            additionalHeaderContent ?.let { it(this) }
+        },
+        bodyAttrs = bodyAttrs,
+        bodyContent = bodyContent
+    )
+}

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

@@ -0,0 +1,21 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitContainer
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Container(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    contentBuilder: ContentBuilder<HTMLDivElement> = {}
+) = Div(
+    {
+        include(UIKitContainer)
+        attrs.builder.invoke(this)
+    },
+    contentBuilder
+)

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

@@ -0,0 +1,56 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitDescriptionList
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLDListElement
+import org.w3c.dom.HTMLElement
+
+@Composable
+fun DescriptionList(
+    attrs: Attrs<HTMLDListElement>,
+    contentBuilder: ContentBuilder<HTMLDListElement>
+) {
+    DList(
+        {
+            include(UIKitDescriptionList)
+            attrs.builder(this)
+        },
+        contentBuilder
+    )
+}
+
+@Composable
+fun <T> DescriptionList(
+    data: Iterable<T>,
+    attrs: Attrs<HTMLDListElement>,
+    beforeTermContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    itemTermAttrs: ((Int, T) -> Attrs<HTMLElement>?)? = null,
+    itemTermContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    betweenTermAndDescriptionContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    afterDescriptionContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    itemDescriptionAttrs: ((Int, T) -> Attrs<HTMLElement>?)? = null,
+    itemDescriptionContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null
+) {
+    DescriptionList(attrs) {
+        data.forEachIndexed { i, t ->
+            beforeTermContent ?.invoke(this, i, t)
+            if (itemTermAttrs != null || itemTermContent != null) {
+                DTerm(
+                    itemTermAttrs ?.let { { it(i, t) } },
+                    itemTermContent ?.let { { it(i, t) } },
+                )
+            }
+            betweenTermAndDescriptionContent ?.invoke(this, i, t)
+            if (itemDescriptionAttrs != null || itemDescriptionContent != null) {
+                DDescription(
+                    itemDescriptionAttrs ?.let { { it(i, t) } },
+                    itemDescriptionContent ?.let { { it(i, t) } },
+                )
+            }
+            afterDescriptionContent ?.invoke(this, i, t)
+        }
+    }
+}

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

@@ -1,97 +1,172 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffectResult
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
+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.dom.Text
-import org.w3c.dom.*
-import org.w3c.dom.events.Event
+import org.jetbrains.compose.web.renderComposableInBody
+import org.w3c.dom.HTMLDivElement
 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()
-        js("UIkit").modal("#${element.id}") ?.hide()
-        onDisposed?.invoke()
+@Composable
+fun Dialog(
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    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> = {}
+) {
+    val draw = remember { mutableStateOf(true) }
+
+    remember {
+        renderComposableInBody {
+            if (draw.value) {
+                Div(
+                    {
+                        if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
+                            include(UIKitModal)
+                        }
+                        id("dialog${Random.nextUInt()}")
+                        include(*modifiers)
+
+                        attributesCustomizer()
+                    }
+                ) {
+                    DisposableEffect(true) {
+                        val htmlElement = scopeElement
+
+                        if (autoShow) {
+                            UIKit.modal(htmlElement).show()
+                        }
+
+                        if (onHidden != null || removeOnHide) {
+                            htmlElement.addEventListener("hidden", {
+                                if (it.target != htmlElement) return@addEventListener
+
+                                onHidden ?.invoke(htmlElement)
+
+                                if (removeOnHide) {
+                                    htmlElement.remove()
+                                }
+                            })
+                        }
+
+                        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()
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
+
+    Div({
+        hidden()
+        ref {
+            onDispose {
+                draw.value = false
+            }
+        }
+    })
 }
 
 @Composable
 fun Dialog(
-    title: String? = null,
+    title: String,
     vararg modifiers: UIKitModifier,
-    hide: (() -> Unit)? = null,
-    hidden: (() -> Unit)? = null,
-    footerBuilder: (@Composable () -> Unit)? = null,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    bodyBuilder: @Composable () -> Unit
-) {
-    Div(
-        {
-            attr("uk-modal", "")
-            classes("uk-flex-top", "uk-modal")
-            id("dialog${Random.nextUInt()}")
-            include(*modifiers)
-            attributesCustomizer()
+    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)
         }
-    ) {
-        Div(
-            {
-                classes("uk-modal-dialog", "uk-margin-auto-vertical")
-            }
-        ) {
-            title ?.let {
-                Div(
-                    {
-                        classes("uk-modal-header")
-                    }
-                ) {
-                    H2({ classes("uk-modal-title") }) {
-                        Text(title)
-                    }
-                }
-            }
-            Div(
-                {
-                    classes("uk-modal-body")
-                }
-            ) {
-                bodyBuilder()
-            }
-            footerBuilder ?.let {
-                Div(
-                    {
-                        classes("uk-modal-footer", "uk-text-right")
-                    }
-                ) {
-                    footerBuilder()
-                }
-            }
-        }
-
-        DisposableRefEffect {
-            DialogDisposableEffectResult(it, hide, hidden)
-        }
-
-        DomSideEffect { htmlElement ->
-            var wrapper: (Event) -> Unit = {}
-            wrapper = { it: Event ->
-                htmlElement.removeEventListener("hidden", wrapper)
-                htmlElement.remove()
-                hidden ?.invoke()
-            }
-            htmlElement.addEventListener("hidden", wrapper)
-
-            val dialog = js("UIkit").modal("#${htmlElement.id}")
-            dialog.show()
-            Unit
-        }
-    }
-}
+        headerBuilder ?.invoke(this)
+    },
+    afterHeaderBuilder = afterHeaderBuilder,
+    beforeFooterBuilder = beforeFooterBuilder,
+    footerAttrsBuilder = footerAttrsBuilder,
+    footerBuilder = footerBuilder,
+    bodyAttrsBuilder = bodyAttrsBuilder,
+    autoShow = autoShow,
+    removeOnHide = removeOnHide,
+    bodyBuilder = bodyBuilder
+)

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

@@ -1,7 +1,40 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.*
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.Hr
+import org.w3c.dom.HTMLHRElement
+
+object Divider {
+    @Composable
+    fun Common(
+        vararg modifiers: UIKitModifier,
+        attributesCustomizer: AttrBuilderContext<HTMLHRElement> = {}
+    ) = Hr {
+        include(*modifiers)
+        attributesCustomizer()
+    }
+    @Composable
+    fun Icon(
+        vararg modifiers: UIKitModifier,
+        attributesCustomizer: AttrBuilderContext<HTMLHRElement> = {}
+    ) = Common(
+        *(modifiers + UIKitDivider.Icon), attributesCustomizer = attributesCustomizer
+    )
+    @Composable
+    fun Small(
+        vararg modifiers: UIKitModifier,
+        attributesCustomizer: AttrBuilderContext<HTMLHRElement> = {}
+    ) = Common(
+        *(modifiers + UIKitDivider.Small), attributesCustomizer = attributesCustomizer
+    )
+    @Composable
+    fun Vertical(
+        vararg modifiers: UIKitModifier,
+        attributesCustomizer: AttrBuilderContext<HTMLHRElement> = {}
+    ) = Common(
+        *(modifiers + UIKitDivider.Vertical), attributesCustomizer = attributesCustomizer
+    )
+}
 
-@Composable
-fun Divider() = Hr({ classes("uk-divider-icon") })

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/DropArea.kt

@@ -0,0 +1,25 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
+import dev.inmo.jsuikit.utils.InputAttrs
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun DropArea(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    inputAttrs: InputAttrs<String> = InputAttrs.empty(),
+    contentBuilder: ContentBuilder<HTMLDivElement> = {}
+) = Div(
+    {
+        include(UIKitPlaceholder, UIKitForm.Custom())
+        attrs.builder(this)
+    }
+) {
+    FileInput {
+        inputAttrs.builder.invoke(this)
+    }
+    contentBuilder(this)
+}

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

@@ -3,10 +3,26 @@ package dev.inmo.jsuikit.elements
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.buildAndAddAttribute
 import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.types.DropdownOptions
 import dev.inmo.jsuikit.utils.Milliseconds
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDivElement
 
+@Composable
+fun Dropdown(
+    vararg modifiers: UIKitModifier,
+    dropdownOptions: DropdownOptions,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    contentBuilder: ContentBuilder<HTMLDivElement>
+) {
+    Div(
+        {
+            include(UIKitDropdown(dropdownOptions), *modifiers)
+            attributesCustomizer()
+        },
+        contentBuilder
+    )
+}
 @Composable
 fun Dropdown(
     vararg modifiers: UIKitModifier,
@@ -26,21 +42,24 @@ fun Dropdown(
 ) {
     Div(
         {
-            buildAndAddAttribute("uk-dropdown") {
-                "toggle" to toggle
-                "pos" to pos
-                "mode" to mode
-                "delayShow" to delayShow
-                "delayHide" to delayHide
-                "boundary" to boundary
-                "boundaryAlign" to boundaryAlign
-                "flip" to flip
-                "offset" to offset
-                "animation" to animation
-                "duration" to duration
-            }
-            classes("uk-dropdown")
-            include(*modifiers)
+            include(
+                UIKitDropdown(
+                    DropdownOptions(
+                        toggle = toggle,
+                        pos = pos,
+                        mode = mode,
+                        delayShow = delayShow,
+                        delayHide = delayHide,
+                        boundary = boundary,
+                        boundaryAlign = boundaryAlign,
+                        flip = flip,
+                        offset = offset,
+                        animation = animation,
+                        duration = duration
+                    )
+                ),
+                *modifiers
+            )
             attributesCustomizer()
         },
         contentBuilder

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.include
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.buildAttribute
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDivElement
 
@@ -10,7 +10,7 @@ import org.w3c.dom.HTMLDivElement
 fun GridColumn(
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
+    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit = {}
 ) {
     Div(
         {
@@ -26,23 +26,18 @@ fun GridColumn(
 fun Grid(
     vararg modifiers: UIKitModifier,
     masonry: Boolean = false,
-    parallax: Int? = null,
-    marginClass: String? = null,
+    parallax: UInt? = 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" })
-            classes("uk-grid")
-            include(*modifiers)
+            include(
+                UIKitGrid.invoke(marginClass, firstColumnClass, masonry, parallax),
+                *modifiers
+            )
             attributesCustomizer()
         }
     ) {

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

@@ -77,15 +77,15 @@ sealed class Icon(val name: String) {
         object Grid : App("grid")
         sealed class More(iconName: String) : App("more${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Vertical : More("vertical")
-            companion object : More("more")
+            companion object : More("")
         }
         sealed class Plus(iconName: String) : App("plus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Circle : Plus("circle")
-            companion object : Plus("plus")
+            companion object : Plus("")
         }
         sealed class Minus(iconName: String) : App("minus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Circle : Minus("circle")
-            companion object : Minus("minus")
+            companion object : Minus("")
         }
         object Close : App("close")
         object Check : App("check")
@@ -93,7 +93,7 @@ sealed class Icon(val name: String) {
         object Refresh : App("refresh")
         sealed class Play(iconName: String) : App("play${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Circle : Play("circle")
-            companion object : Play("play")
+            companion object : Play("")
         }
     }
     sealed class Devices(iconName: String) : Icon(iconName) {
@@ -102,11 +102,11 @@ sealed class Icon(val name: String) {
         object Laptop : Devices("laptop")
         sealed class Tablet(iconName: String) : Devices("tablet${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Landscape : Tablet("landscape")
-            companion object : Tablet("tablet")
+            companion object : Tablet("")
         }
         sealed class Phone(iconName: String) : Devices("phone${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Landscape : Phone("landscape")
-            companion object : Phone("phone")
+            companion object : Phone("")
         }
     }
     sealed class Storage(iconName: String) : Icon(iconName) {
@@ -114,7 +114,7 @@ sealed class Icon(val name: String) {
             object Text : File("text")
             object Pdf : File("pdf")
             object Edit : File("edit")
-            companion object : File("file")
+            companion object : File("")
         }
         object Copy : Storage("copy")
         object Folder : Storage("folder")
@@ -177,7 +177,7 @@ sealed class Icon(val name: String) {
         object Foursquare : Brands("foursquare")
         sealed class Github(iconName: String) : Brands("github${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Alt : Github("alt")
-            companion object : Github("github")
+            companion object : Github("")
         }
         object Gitter : Brands("gitter")
         object Google : Brands("google")
@@ -202,43 +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> = {
-            classes("uk-icon")
-            include(*modifiers, type)
-            attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
-            onClick ?.let { _ ->
-                onClick { onClick(it.nativeEvent) }
-            }
-            attributesCustomizer()
-        }
-        if (type == UIKitIconType.Button) {
-            Button(configurer)
-        } else {
-            Span(configurer)
-        }
+    class Custom(name: String) : Icon(name)
+
+    companion object {
     }
-
-    @Composable
-    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
+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/Labels.kt

@@ -1,41 +1,22 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.UIKitLabel
 import dev.inmo.jsuikit.modifiers.include
-import org.jetbrains.compose.web.dom.*
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.Span
+import org.jetbrains.compose.web.dom.Text
 import org.w3c.dom.HTMLSpanElement
 
-sealed interface Label {
-    val suffix: String
-
-    @Composable
-    fun draw(
-        text: String,
-        vararg modifiers: UIKitModifier,
-        attributesCustomizer: AttrBuilderContext<HTMLSpanElement> = {},
-    ) = Span(
-        {
-            classes("uk-label", "uk-label-$suffix")
-            include(*modifiers)
-            attributesCustomizer()
-        }
-    ) {
-        Text(text)
-    }
-
-    object Success : Label {
-        override val suffix: String
-            get() = "success"
-    }
-
-    object Warning : Label {
-        override val suffix: String
-            get() = "warning"
-    }
-
-    object Error : Label {
-        override val suffix: String
-            get() = "danger"
+@Composable
+fun Label(
+    text: String,
+    attrs: Attrs<HTMLSpanElement>
+) = Span(
+    {
+        include(UIKitLabel)
+        attrs.builder(this)
     }
+) {
+    Text(text)
 }

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

@@ -2,16 +2,34 @@ package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.snapshots.SnapshotStateList
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLHeadingElement
 import org.w3c.dom.HTMLUListElement
 
 @Composable
 fun <T> List(
+    data: Iterable<T>,
+    ukAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
+) {
+    Ul(
+        {
+            include(UIKitList)
+            ukAttrs.builder(this)
+        }
+    ) {
+        data.forEach {
+            elementAllocator(it)
+        }
+    }
+}
+
+@Composable
+fun <T> ListWithTitle(
     title: String,
-    data: SnapshotStateList<T>,
+    data: Iterable<T>,
     vararg titleModifiers: UIKitModifier,
     ulModifiers: Array<UIKitModifier> = emptyArray(),
     besidesTitleAndList: (@Composable () -> Unit)? = null,
@@ -23,15 +41,5 @@ fun <T> List(
         Text(title)
     }
     besidesTitleAndList ?.invoke()
-    Ul(
-        {
-            classes("uk-list")
-            include(*ulModifiers)
-            ulCustomizer()
-        }
-    ) {
-        data.forEach {
-            elementAllocator(it)
-        }
-    }
+    List(data, Attrs(*ulModifiers) { ulCustomizer(this) }, elementAllocator)
 }

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

@@ -1,7 +1,6 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.snapshots.SnapshotStateList
 import dev.inmo.jsuikit.buildAndAddAttribute
 import dev.inmo.jsuikit.modifiers.*
 import dev.inmo.jsuikit.utils.Milliseconds
@@ -94,8 +93,8 @@ fun SubNav(
 
 @Composable
 fun <T> Nav(
-    title: String,
-    data: SnapshotStateList<T>,
+    title: String?,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -104,6 +103,7 @@ fun <T> Nav(
     duration: Milliseconds? = null,
     besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
     titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
     ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) {
@@ -119,11 +119,14 @@ fun <T> Nav(
             ulCustomizer()
         }
     ) {
-        NavHeader(
-            title,
-            *titleModifiers,
-            attributesCustomizer = titleCustomizer
-        )
+        title ?.let {
+            NavHeader(
+                title,
+                *titleModifiers,
+                attributesCustomizer = titleCustomizer,
+                afterTitleContentBuilder = afterTitleContentBuilder
+            )
+        }
         besidesTitleAndList ?.let { it() }
         data.forEach {
             elementAllocator(it)
@@ -133,8 +136,8 @@ fun <T> Nav(
 
 @Composable
 fun <T> DefaultNav(
-    title: String,
-    data: SnapshotStateList<T>,
+    title: String?,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -143,6 +146,7 @@ fun <T> DefaultNav(
     duration: Milliseconds? = null,
     besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
     titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
     ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) = Nav(
@@ -156,14 +160,15 @@ fun <T> DefaultNav(
     duration,
     besidesTitleAndList,
     titleCustomizer,
+    afterTitleContentBuilder,
     ulCustomizer,
     elementAllocator
 )
 
 @Composable
 fun <T> PrimaryNav(
-    title: String,
-    data: SnapshotStateList<T>,
+    title: String?,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -172,6 +177,7 @@ fun <T> PrimaryNav(
     duration: Milliseconds? = null,
     besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
     titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
     ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) = Nav(
@@ -185,14 +191,15 @@ fun <T> PrimaryNav(
     duration,
     besidesTitleAndList,
     titleCustomizer,
+    afterTitleContentBuilder,
     ulCustomizer,
     elementAllocator
 )
 
 @Composable
 fun <T> SubNav(
-    title: String,
-    data: SnapshotStateList<T>,
+    title: String?,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -201,6 +208,7 @@ fun <T> SubNav(
     duration: Milliseconds? = null,
     besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
     titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
     ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) = Nav(
@@ -214,6 +222,7 @@ fun <T> SubNav(
     duration,
     besidesTitleAndList,
     titleCustomizer,
+    afterTitleContentBuilder,
     ulCustomizer,
     elementAllocator
 )
@@ -223,6 +232,7 @@ fun NavHeader(
     text: String,
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {}
 ) {
     Li(
         {
@@ -231,6 +241,7 @@ fun NavHeader(
         }
     ) {
         Text(text)
+        afterTitleContentBuilder()
     }
 }
 
@@ -238,6 +249,7 @@ fun NavHeader(
 fun NavItemElement(
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    anchorAttributesCustomizer: AttrBuilderContext<HTMLAnchorElement> = {},
     contentAllocator: ContentBuilder<HTMLAnchorElement>
 ) {
     Li(
@@ -246,7 +258,7 @@ fun NavItemElement(
             attributesCustomizer()
         }
     ) {
-        A("#") {
+        A("#", attrs = anchorAttributesCustomizer) {
             contentAllocator()
         }
     }
@@ -269,6 +281,9 @@ fun NavElement(
 }
 
 @Composable
-fun NavDivider() {
-    Li({ include(UIKitNav.Divider) })
+fun NavDivider(
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+) {
+    Li({ include(UIKitNav.Divider, *modifiers);attributesCustomizer() })
 }

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

@@ -1,35 +1,49 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.*
 import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 
 @Composable
 fun Navbar(
-    leftBuilder: NavbarNavBuilder? = null,
-    centerBuilder: NavbarNavBuilder? = null,
-    rightBuilder: NavbarNavBuilder? = null,
-    vararg navModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
+    contentBuilder: ContentBuilder<HTMLElement>
 ) {
     Nav(
         {
-            attr("uk-navbar", "")
-            classes("uk-navbar-container", "uk-navbar")
+            include(UIKitNavbar, UIKitNavbar(), UIKitNavbar.Container)
+            attributesCustomizer()
+        }
+    ) {
+        contentBuilder()
+    }
+}
+
+@Composable
+fun Navbar(
+    leftBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
+    centerBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
+    rightBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
+    vararg navModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
+) {
+    Navbar(
+        attributesCustomizer = {
             include(*navModifiers)
             attributesCustomizer()
         }
     ) {
         leftBuilder ?.let {
-            Div({ classes("uk-navbar-left") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Left);leftBuilder.attributesBuilderContext(this) }, leftBuilder.builder)
         }
         centerBuilder ?.let {
-            Div({ classes("uk-navbar-center") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Center);centerBuilder.attributesBuilderContext(this) }, centerBuilder.builder)
         }
         rightBuilder ?.let {
-            Div({ classes("uk-navbar-right") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Right);rightBuilder.attributesBuilderContext(this) }, rightBuilder.builder)
         }
     }
 }

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

@@ -1,63 +1,45 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
-import org.jetbrains.compose.web.attributes.AttrsBuilder
+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.HTMLUListElement
+import org.w3c.dom.*
 
-interface NavbarNavElement {
-    fun AttrsBuilder<HTMLLIElement>.setup() {}
-    @Composable
-    fun ElementScope<HTMLLIElement>.fill()
-
-    class Default(
-        private val setupCallback: AttrsBuilder<HTMLLIElement>.() -> Unit,
-        private val fillCallback: @Composable ElementScope<HTMLLIElement>.() -> Unit
-    ) : NavbarNavElement {
-        override fun AttrsBuilder<HTMLLIElement>.setup() {
-            setupCallback()
-        }
-
-        @Composable
-        override fun ElementScope<HTMLLIElement>.fill() {
-            fillCallback()
-        }
-    }
-}
-
-class NavbarNavBuilder(
-    private val modifiers: Array<UIKitModifier>,
-    private val elements: List<NavbarNavElement>,
-    private val attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
+@Composable
+fun NavbarNav(
+    elements: List<AttrsWithContentBuilder<HTMLLIElement>>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty()
 ) {
-    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(
-            {
-                classes("uk-navbar-nav")
-                include(*modifiers)
-                attributesCustomizer()
-            }
-        ) {
-            elements.forEach { element ->
-                Li(
-                    { element.apply { setup() } }
-                ) {
-                    element.apply { fill() }
-                }
-            }
+    Ul(
+        {
+            include(UIKitNavbar.Nav)
+            attrs.builder(this)
+        }
+    ) {
+        elements.forEach { element ->
+            Li(element.attributesBuilderContext, element.builder)
         }
     }
 }
+
+@Composable
+fun NavbarNav(
+    vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty()
+) = NavbarNav(elements.toList(), attrs)
+
+fun NavbarNavBuilder(
+    elements: List<AttrsWithContentBuilder<HTMLLIElement>>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
+) = AttrsWithContentBuilder<HTMLDivElement>(containerAttrs) {
+    NavbarNav(elements, attrs)
+}
+
+fun NavbarNavBuilder(
+    vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
+) = NavbarNavBuilder(elements.toList(), attrs, containerAttrs)

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

@@ -0,0 +1,13 @@
+package dev.inmo.jsuikit.elements
+
+import dev.inmo.jsuikit.modifiers.UIKit
+import dev.inmo.jsuikit.types.*
+import dev.inmo.jsuikit.utils.Milliseconds
+
+fun Notification(
+    message: String,
+    status: UIKitNotificationParameter.Style? = null,
+    timeout: Milliseconds? = null,
+    group: NotificationsGroup? = null,
+    position: UIKitNotificationParameter.Position? = null
+) = UIKit.notification.invoke(message, status, timeout, group, position)

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

@@ -23,4 +23,4 @@ fun Spinner(
 }
 
 @Composable
-fun DefaultSpinner() = Spinner(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Center)
+fun DefaultSpinner() = Spinner(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Horizontal.Center, UIKitText.Alignment.Vertical.Middle)

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

@@ -9,13 +9,14 @@ import org.jetbrains.compose.web.dom.Input
 import org.w3c.dom.HTMLInputElement
 
 @Composable
-fun <T> TextField(
+fun <T> DefaultInput(
     type: InputType<T>,
-    state: MutableState<T>,
-    disabledState: State<Boolean>? = null,
+    value: T,
+    disabled: Boolean = false,
     placeholder: String? = null,
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+    onChange: (T) -> Unit
 ) {
     Input(type) {
         classes("uk-input")
@@ -23,12 +24,38 @@ fun <T> TextField(
 
         placeholder ?.let(::placeholder)
 
-        onChange { state.value = it.value }
-        disabledState ?.let {
-            if (it.value) {
-                disabled()
+        value.let {
+            when (it) {
+                is String -> value(it)
+                is Number -> value(it)
+                else -> {}
             }
         }
+
+        onInput { onChange(it.value) }
+
+        if (disabled) {
+            disabled()
+        }
         attributesCustomizer()
     }
 }
+
+@Composable
+fun <T> StandardInput(
+    type: InputType<T>,
+    state: MutableState<T>,
+    disabledState: State<Boolean>? = null,
+    placeholder: String? = null,
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+) = DefaultInput(
+    type,
+    state.value,
+    disabledState ?.value == true,
+    placeholder,
+    modifiers = modifiers,
+    attributesCustomizer = attributesCustomizer
+) {
+    state.value = it
+}

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

@@ -1,24 +1,27 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.snapshots.SnapshotStateList
-import dev.inmo.jsuikit.modifiers.*
-import org.jetbrains.compose.web.attributes.AttrsBuilder
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.attributes.AttrsScope
 import org.jetbrains.compose.web.dom.*
 import org.jetbrains.compose.web.dom.Text
 import org.w3c.dom.*
 
 @Composable
 fun <T> DefaultTable(
-    heading: List<String>,
-    dataList: SnapshotStateList<T>,
+    headerBuilders: List<ContentBuilder<HTMLTableCellElement>>,
+    dataList: Iterable<T>,
     vararg tableModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
-    headingCustomizer: AttrBuilderContext<HTMLTableCellElement> = {},
-    rowAttributes: AttrsBuilder<HTMLTableRowElement>.(t: T) -> Unit = {},
-    cellFiller: @Composable (i: Int, t: T) -> Unit
+    headerCustomizer: AttrBuilderContext<HTMLTableSectionElement> = {},
+    headerCellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int) -> Unit = {},
+    rowAttributes: AttrsScope<HTMLTableRowElement>.(t: T) -> Unit = {},
+    cellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
+    betweenHeaderAndBodyFiller: ContentBuilder<HTMLTableElement> = {},
+    cellFiller: @Composable ElementScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit
 ) {
-    val headingIndexes = heading.indices
+    val headingIndexes = headerBuilders.indices
     Table(
         {
             classes("uk-table")
@@ -26,19 +29,20 @@ fun <T> DefaultTable(
             attributesCustomizer()
         }
     ) {
-        Thead {
+        Thead(headerCustomizer) {
             Tr {
-                heading.forEach {
+                headerBuilders.forEachIndexed { i, t ->
                     Th(
                         {
-                            headingCustomizer()
+                            headerCellCustomizer(i)
                         }
                     ) {
-                        Text(it)
+                        t()
                     }
                 }
             }
         }
+        betweenHeaderAndBodyFiller()
         Tbody {
             dataList.forEach {
                 Tr(
@@ -47,7 +51,11 @@ fun <T> DefaultTable(
                     }
                 ) {
                     headingIndexes.forEach { i ->
-                        Td {
+                        Td(
+                            {
+                                cellCustomizer(i, it)
+                            }
+                        ) {
                             cellFiller(i, it)
                         }
                     }
@@ -56,3 +64,41 @@ fun <T> DefaultTable(
         }
     }
 }
+
+@Composable
+fun <T> DefaultTable(
+    heading: List<String>,
+    dataList: Iterable<T>,
+    vararg tableModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
+    headerCustomizer: AttrBuilderContext<HTMLTableSectionElement> = {},
+    headerCellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int, title: String) -> Unit = { _, _ -> },
+    rowAttributes: AttrsScope<HTMLTableRowElement>.(t: T) -> Unit = {},
+    cellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
+    betweenHeaderAndBodyFiller: ContentBuilder<HTMLTableElement> = {},
+    cellFiller: @Composable ElementScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit
+) {
+    val headersByIndex = heading.mapIndexed { index, s -> index to s }.toMap()
+    val headerCellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int) -> Unit = { i ->
+        val header = headersByIndex[i]
+        if (header != null) {
+            headerCellCustomizer(i, header)
+        }
+    }
+    inline fun headerFactory(header: String): ContentBuilder<HTMLTableCellElement> = {
+        Text(header)
+    }
+    val headerBuilders = heading.map(::headerFactory)
+    return DefaultTable(
+        headerBuilders,
+        dataList,
+        tableModifiers = tableModifiers,
+        attributesCustomizer,
+        headerCustomizer,
+        headerCellCustomizer,
+        rowAttributes,
+        cellCustomizer,
+        betweenHeaderAndBodyFiller,
+        cellFiller
+    )
+}

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/elements/Tile.kt

@@ -0,0 +1,21 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitTile
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Tile(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    contentBuilder: ContentBuilder<HTMLDivElement>
+) = Div(
+    {
+        include(UIKitTile)
+        attrs.builder(this)
+    },
+    contentBuilder
+)

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

@@ -0,0 +1,26 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitToggle
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.ButtonType
+import org.jetbrains.compose.web.attributes.type
+import org.jetbrains.compose.web.dom.Button
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.HTMLButtonElement
+
+@Composable
+fun Toggle(
+    attrs: Attrs<HTMLButtonElement>,
+    contentBuilder: ContentBuilder<HTMLButtonElement>
+) {
+    Button(
+        {
+            include(UIKitToggle)
+            type(ButtonType.Button)
+            attrs.builder(this)
+        },
+        contentBuilder
+    )
+}

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

@@ -1,3 +1,5 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class AttributeValue(val name: String)
+sealed class AttributeValue(val name: String) {
+    override fun toString(): String = name
+}

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

@@ -1,4 +1,6 @@
 package dev.inmo.jsuikit.modifiers
 
-inline val UIKit
-    get() = js("UIkit")
+import dev.inmo.jsuikit.types.UIKit
+
+inline val UIKit: UIKit
+    get() = js("UIkit").unsafeCast<UIKit>()

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

@@ -0,0 +1,52 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.Milliseconds
+import dev.inmo.jsuikit.utils.buildAttribute
+import org.w3c.dom.PageTransitionEvent
+
+sealed class UIKitAccordion(
+    vararg classnames: String,
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classnames as Array<String>
+
+    object Title : UIKitAccordion("uk-accordion-title")
+    object Content : UIKitAccordion("uk-accordion-content")
+
+    class Custom internal constructor(
+        otherAttrs: Map<String, String> = emptyMap()
+    ) : UIKitAccordion (otherAttrs = otherAttrs)
+
+    companion object : UIKitAccordion("uk-accordion", otherAttrs = mapOf("uk-accordion" to "")) {
+        val Open = UIKitUtility.Open
+
+        operator fun invoke(
+            activeItemIndex: Int? = null,
+            animation: Boolean? = null,
+            collapsible: Boolean? = null,
+            contentSelector: String? = null,
+            animationDuration: Milliseconds? = null,
+            multiple: Boolean? = null,
+            targetsSelector: String? = null,
+            toggleSelector: String? = null,
+            transition: PageTransitionEvent? = null,
+            offsetTopPixels: Int? = null,
+        ) = Custom(
+            mapOf(
+                buildAttribute("uk-accordion") {
+                    "active" to activeItemIndex
+                    "animation" to animation
+                    "collapsible" to collapsible
+                    "content" to contentSelector
+                    "duration" to animationDuration
+                    "multiple" to multiple
+                    "targets" to targetsSelector
+                    "toggle" to toggleSelector
+                    "transition" to transition
+                    "offset" to offsetTopPixels
+                }
+            )
+        )
+    }
+}

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

@@ -0,0 +1,18 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitAlert(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    sealed class Style(classname: String) : UIKitAlert(classname) {
+
+        object Primary : Style("uk-alert-primary")
+        object Success : Style("uk-alert-success")
+        object Warning : Style("uk-alert-warning")
+        object Danger : Style("uk-alert-danger")
+
+    }
+
+    object Close : UIKitAlert("uk-alert-close")
+
+    companion object : UIKitAlert("uk-alert")
+}

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

@@ -60,4 +60,9 @@ sealed class UIKitAnimation (name: String) : UIKitModifier, AttributeValue(name)
 
     object Fast : UIKitAnimation("fast")
 
+    object KenBurns : UIKitAnimation("kenburns")
+
+    override fun toString(): String {
+        return classes.joinToString(" ")
+    }
 }

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/UIKitBase.kt

@@ -0,0 +1,14 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitBase(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    sealed class Heading(suffix: String) : UIKitBase("uk-h$suffix") {
+        object H1 : Heading("1")
+        object H2 : Heading("2")
+        object H3 : Heading("3")
+        object H4 : Heading("4")
+        object H5 : Heading("5")
+        object H6 : Heading("6")
+    }
+}

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

@@ -0,0 +1,8 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitBreadcrumb(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    companion object : UIKitBreadcrumb(arrayOf("uk-breadcrumb"))
+}

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

@@ -1,7 +1,7 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitButton(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-button-$suffix")
+sealed class UIKitButton(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-button${suffix?.let { "-$it" } ?: ""}")
 
     sealed class Type(suffix: String) : UIKitButton(suffix) {
         object Default : Type("default")
@@ -11,4 +11,13 @@ sealed class UIKitButton(suffix: String) : UIKitModifier {
         object Text : Type("text")
         object Link : Type("link")
     }
+
+    sealed class Size(suffix: String) : UIKitButton(suffix) {
+        object Small : Size("small")
+        object Large : Size("large")
+    }
+
+    object Group : UIKitButton("group")
+
+    companion object : UIKitButton(null)
 }

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

@@ -0,0 +1,35 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitCard(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-card${suffix ?.let { "-$it" } ?: ""}")
+
+    object Title : UIKitCard("title")
+    object Hover : UIKitCard("hover")
+    object Badge : Parts("badge")
+
+    sealed class Parts(suffix: String) : UIKitCard(suffix) {
+        object Header : Parts("header")
+        object Body : Parts("body")
+        object Footer : Parts("footer")
+    }
+
+    sealed class Style(suffix: String) : UIKitCard(suffix) {
+        object Default : Style("default")
+        object Primary : Style("primary")
+        object Secondary : Style("secondary")
+    }
+
+    sealed class Size(suffix: String) : UIKitCard(suffix) {
+        object Small : Size("small")
+        object Large : Size("large")
+    }
+
+    sealed class Media(suffix: String) : UIKitCard("media-$suffix") {
+        object Top : Media("top")
+        object Right : Media("right")
+        object Bottom : Media("bottom")
+        object Left : Media("left")
+    }
+
+    companion object : UIKitCard(null)
+}

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

@@ -0,0 +1,17 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitClose(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    object Large : UIKitClose(
+        arrayOf("uk-close-large")
+    )
+
+    companion object : UIKitClose(
+        arrayOf("uk-close"),
+        mapOf("uk-close" to "")
+    )
+
+}

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

@@ -0,0 +1,15 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitColumn(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Two : UIKitColumn("uk-column-1-2")
+    object Three : UIKitColumn("uk-column-1-3")
+    object Four : UIKitColumn("uk-column-1-4")
+    object Five : UIKitColumn("uk-column-1-5")
+    object Six : UIKitColumn("uk-column-1-6")
+
+    object Divider : UIKitColumn("uk-column-divider")
+
+    object Span : UIKitColumn("uk-column-span")
+}

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

@@ -0,0 +1,17 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitComment(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-comment${suffix ?.let { "-$it" } ?: ""}")
+
+    object Body : UIKitComment("body")
+    object Header : UIKitComment("header")
+    object Title : UIKitComment("title")
+    object Meta : UIKitComment("meta")
+    object Avatar : UIKitComment("avatar")
+
+    object Primary : UIKitComment("primary")
+
+    object List : UIKitComment("list")
+
+    companion object : UIKitComment(null)
+}

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

@@ -0,0 +1,19 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitContainer(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    sealed class Size(size: String) : UIKitContainer(arrayOf("uk-container-$size")) {
+        object XSmall : Size("xsmall")
+        object Small : Size("small")
+        object Large : Size("large")
+        object XLarge : Size("xlarge")
+        object Expand : Size("expand")
+    }
+
+    companion object : UIKitContainer(
+        arrayOf("uk-container")
+    )
+}

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

@@ -0,0 +1,6 @@
+package dev.inmo.jsuikit.modifiers
+
+class UIKitCustom(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier

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

@@ -0,0 +1,11 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitDescriptionList(
+    override val classes: Array<String>
+) : UIKitModifier {
+
+    object Divider : UIKitDescriptionList(arrayOf("uk-description-list-divider"))
+
+    companion object : UIKitDescriptionList(arrayOf("uk-description-list"))
+
+}

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

@@ -0,0 +1,10 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitDivider(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Icon : UIKitDivider("uk-divider-icon")
+    object Small : UIKitDivider("uk-divider-small")
+    object Vertical : UIKitDivider("uk-divider-vertical")
+
+}

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/UIKitDropdown.kt

@@ -1,5 +1,9 @@
 package dev.inmo.jsuikit.modifiers
 
+import dev.inmo.jsuikit.types.DropdownOptions
+import dev.inmo.jsuikit.utils.Milliseconds
+import dev.inmo.jsuikit.utils.buildAttribute
+
 sealed class UIKitDropdown(classname: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf(classname)
 
@@ -50,6 +54,9 @@ sealed class UIKitDropdown(classname: String) : UIKitModifier {
         object Click : Mode("click")
         object Hover : Mode("hover")
 
+        object None : Mode("")
+        object HoverAndClick : Mode("$Hover, $Click")
+
     }
 
     sealed class Flip(name: String) : AttributeValue(name) {
@@ -61,4 +68,48 @@ sealed class UIKitDropdown(classname: String) : UIKitModifier {
 
     }
 
+    class Custom(
+        dropdownOptions: DropdownOptions
+    ) : UIKitDropdown("uk-dropdown") {
+        override val otherAttrs: Map<String, String> = mapOf(
+            buildAttribute(
+                "uk-dropdown"
+            ) {
+                dropdownOptions.includeParameters(this)
+            }
+        )
+    }
+
+    companion object {
+        operator fun invoke(
+            dropdownOptions: DropdownOptions
+        ) = Custom(dropdownOptions)
+        operator fun invoke(
+            toggle: String? = null,
+            pos: Position? = null,
+            mode: Mode? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            flip: Flip? = null,
+            offset: Int? = null,
+            animation: UIKitAnimation? = null,
+            duration: Milliseconds? = null,
+        ) = Custom(
+            DropdownOptions(
+                toggle = toggle,
+                pos = pos,
+                mode = mode,
+                delayShow = delayShow,
+                delayHide = delayHide,
+                boundary = boundary,
+                boundaryAlign = boundaryAlign,
+                flip = flip,
+                offset = offset,
+                animation = animation,
+                duration = duration
+            )
+        )
+    }
 }

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

@@ -1,7 +1,7 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitFlex(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-flex-$suffix")
+sealed class UIKitFlex(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-flex${suffix ?.let { "-$it" } ?: ""}")
 
     object Inline : UIKitFlex("inline")
 
@@ -76,4 +76,6 @@ sealed class UIKitFlex(suffix: String) : UIKitModifier {
 
     object NoWrap : UIKitFlex("nowrap")
 
+    companion object : UIKitFlex(null)
+
 }

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

@@ -0,0 +1,59 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+
+sealed class UIKitForm(
+    vararg classnames: String,
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classnames as Array<String>
+
+    object Fieldset : UIKitForm("uk-fieldset")
+    object Legend : UIKitForm("uk-legend")
+
+    object Input : UIKitForm("uk-input")
+    object Select : UIKitForm("uk-select")
+    object TextArea : UIKitForm("uk-textarea")
+    object Radio : UIKitForm("uk-radio", otherAttrs = mapOf("type" to "radio"))
+    object Checkbox : UIKitForm("uk-checkbox", otherAttrs = mapOf("type" to "checkbox"))
+    object Range : UIKitForm("uk-range", otherAttrs = mapOf("type" to "range"))
+
+    sealed class State(vararg classnames: String) : UIKitForm(*classnames) {
+        object Danger : State("uk-form-danger")
+        object Success : State("uk-form-success")
+    }
+    sealed class Size(vararg classnames: String) : UIKitForm(*classnames) {
+        object Large : Size("uk-form-large")
+        object Default : Size() // :)
+        object Small : Size("uk-form-small")
+    }
+    sealed class Width(vararg classnames: String) : UIKitForm(*classnames) {
+        object Large : Width("uk-form-width-large")
+        object Medium : Width("uk-form-width-medium")
+        object Small : Width("uk-form-width-small")
+        object XSmall : Width("uk-form-width-xsmall")
+    }
+
+    object Blank : UIKitForm("uk-form-blank")
+
+    sealed class Layout(vararg classnames: String) : UIKitForm(*classnames) {
+        object Stacked : Layout("uk-form-stacked")
+        object Horizontal : Layout("uk-form-horizontal")
+        object Label : Layout("uk-form-label")
+        object Controls : Layout("uk-form-controls")
+    }
+
+    object Icon : UIKitForm("uk-form-icon")
+
+    class Custom(
+        target: String? = null
+    ) : UIKitForm(
+        "uk-form-custom",
+        otherAttrs = mapOf(
+            buildAttribute("uk-form-custom") {
+                "target" to target
+            }
+        )
+    )
+}

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

@@ -1,20 +1,59 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitGrid(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-grid-$suffix")
+import dev.inmo.jsuikit.utils.buildAttribute
 
-    sealed class Gap(suffix: String) : UIKitGrid(suffix) {
+sealed class UIKitGrid(vararg classnames: String) : UIKitModifier {
+    override val classes: Array<String> = classnames as Array<String>
 
-        object Small : Gap("small")
-        object Medium : Gap("medium")
-        object Large : Gap("large")
-        object Collapse : Gap("collapse")
+    sealed class Gap(classname: String) : UIKitGrid(classname) {
+
+        object Small : Gap("uk-grid-small")
+        object Medium : Gap("uk-grid-medium")
+        object Large : Gap("uk-grid-large")
+        object Collapse : Gap("uk-grid-collapse")
 
     }
 
-    object Divider : UIKitGrid("divider")
+    sealed class Column(classname: String) : UIKitGrid(classname) {
 
-    object MatchHeight : UIKitGrid("match")
-    object ItemMatchHeight : UIKitGrid("item-match")
+        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("uk-grid")
+
+    companion object : UIKitGrid("uk-grid") {
+        operator fun invoke(
+            margin: UIKitMargin? = null,
+            firstColumnClass: String? = null,
+            masonry: Boolean? = null,
+            parallax: UInt? = null
+        ) = Custom(
+            mapOf(
+                buildAttribute("uk-grid") {
+                    margin to margin ?.classes ?.joinToString(" ")
+                    "first-column" to firstColumnClass
+                    "masonry" to masonry
+                    "parallax" to parallax
+                }
+            )
+        )
+    }
 }

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

@@ -0,0 +1,79 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.*
+
+sealed class UIKitHeight(
+    classname: String?,
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    override val classes: Array<String> = classname ?.let { arrayOf(it) } ?: emptyArray()
+
+    object Full : UIKitHeight("uk-height-1-1")
+
+    sealed class Size(classname: String) : UIKitHeight(classname) {
+
+        sealed class Small(classname: String = "uk-height-small") : Size(classname) {
+            object Max : Small("uk-height-max-small")
+
+            companion object : Small()
+        }
+
+        sealed class Medium(classname: String = "uk-height-medium") : Size(classname) {
+            object Max : Medium("uk-height-max-medium")
+
+            companion object : Medium()
+        }
+
+        sealed class Large(classname: String = "uk-height-large") : Size(classname) {
+            object Max : Large("uk-height-max-large")
+
+            companion object : Large()
+        }
+
+    }
+
+    class Viewport(offsetTop: Boolean? = null, offsetBottom: String? = null, expand: Boolean? = null, minHeight: Int? = null) : UIKitHeight(
+        null,
+        mapOf(
+            buildAttribute("uk-height-viewport") {
+                offsetTop ?.let { "offset-top" to it.toString() }
+                offsetBottom ?.let { "offset-bottom" to it }
+                expand ?.let { "expand" to it.toString() }
+                minHeight ?.let { "min-height" to it.toString() }
+            }
+        )
+    )
+
+    fun Viewport(
+        offsetTop: Boolean? = null,
+        offsetBottom: Boolean,
+        expand: Boolean? = null,
+        minHeight: Int? = null
+    ) = Viewport(offsetTop, offsetBottom.toString(), expand, minHeight)
+
+    fun Viewport(
+        offsetTop: Boolean? = null,
+        offsetBottom: Pixels,
+        expand: Boolean? = null,
+        minHeight: Int? = null
+    ) = Viewport(offsetTop, offsetBottom.toString(), expand, minHeight)
+
+    fun Viewport(
+        offsetTop: Boolean? = null,
+        offsetBottom: Percents,
+        expand: Boolean? = null,
+        minHeight: Int? = null
+    ) = Viewport(offsetTop, offsetBottom.toString(), expand, minHeight)
+
+
+    class Match(target: String? = null, row: Boolean? = null) : UIKitHeight(
+        null,
+        mapOf(
+            buildAttribute("uk-height-match") {
+                target ?.let { "target" to it }
+                row ?.let { "row" to it.toString() }
+            }
+        )
+    )
+
+}

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

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

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/UIKitInverse.kt

@@ -0,0 +1,8 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitInverse(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Light : UIKitInverse("uk-light")
+    object Dark : UIKitInverse("uk-dark")
+}

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

@@ -0,0 +1,11 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitLabel(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-label${suffix?.let { "-$it" } ?: ""}")
+
+    object Success : UIKitLabel("success")
+    object Warning : UIKitLabel("warning")
+    object Error : UIKitLabel("danger")
+
+    companion object : UIKitLabel(null)
+}

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/UIKitList.kt

@@ -0,0 +1,46 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitList(
+    vararg classes: String,
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classes as Array<String>
+
+    sealed class Style(vararg classes: String) : UIKitList(*classes) {
+
+        object Disc : Style("uk-list-disc")
+        object Circle : Style("uk-list-circle")
+        object Square : Style("uk-list-square")
+        object Decimal : Style("uk-list-decimal")
+        object Hyphen : Style("uk-list-hyphen")
+
+    }
+
+    sealed class Size(vararg classes: String) : UIKitList(*classes) {
+
+        object Large : Size("uk-list-large")
+        object Collapse : Size("uk-list-collapse")
+
+    }
+
+    sealed class Color(vararg classes: String) : UIKitList(*classes) {
+
+        object Muted : Color("uk-list-muted")
+        object Emphasis : Color("uk-list-emphasis")
+        object Primary : Color("uk-list-primary")
+        object Secondary : Color("uk-list-secondary")
+        companion object {
+            val Bullet = UIKitList.Bullet
+        }
+
+    }
+
+    object Bullet: UIKitList("uk-list-bullet")
+
+    object Divider: UIKitList("uk-list-divider")
+
+    object Striped: UIKitList("uk-list-striped")
+
+    companion object : UIKitList("uk-list")
+}

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

@@ -1,68 +1,87 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitMargin(val classname: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf(classname)
+sealed class UIKitMargin(vararg classnames: String) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classnames as Array<String>
 
-    object Top : Small("uk-margin-top")
-    object Bottom : Small("uk-margin-bottom")
-    object Left : Small("uk-margin-left")
-    object Right : Small("uk-margin-right")
+    object Top : UIKitMargin("uk-margin-top")
+    object Bottom : UIKitMargin("uk-margin-bottom")
+    object Left : UIKitMargin("uk-margin-left")
+    object Right : UIKitMargin("uk-margin-right")
+    object Vertical : UIKitMargin() { override val classes: Array<String> = Top.classes + Bottom.classes }
+    object Horizontal : UIKitMargin() { override val classes: Array<String> = Left.classes + Right.classes }
     companion object : Small("uk-margin")
 
-    sealed class Small(classname: String) : UIKitMargin(classname) {
+    sealed class Small(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Small("uk-margin-small-top")
         object Bottom : Small("uk-margin-small-bottom")
         object Left : Small("uk-margin-small-left")
         object Right : Small("uk-margin-small-right")
+
+        object Vertical : Small() {
+            override val classes: Array<String> = Top.classes + Bottom.classes
+        }
+        object Horizontal : Small() {
+            override val classes: Array<String> = Left.classes + Right.classes
+        }
+
         companion object : Small("uk-margin-small")
 
     }
-    sealed class Medium(classname: String) : UIKitMargin(classname) {
+    sealed class Medium(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Medium("uk-margin-medium-top")
         object Bottom : Medium("uk-margin-medium-bottom")
         object Left : Medium("uk-margin-medium-left")
         object Right : Medium("uk-margin-medium-right")
+        object Vertical : Medium() { override val classes: Array<String> = Top.classes + Bottom.classes }
+        object Horizontal : Medium() { override val classes: Array<String> = Left.classes + Right.classes }
         companion object : Medium("uk-margin-medium")
 
     }
-    sealed class Large(classname: String) : UIKitMargin(classname) {
+    sealed class Large(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Large("uk-margin-large-top")
         object Bottom : Large("uk-margin-large-bottom")
         object Left : Large("uk-margin-large-left")
         object Right : Large("uk-margin-large-right")
+        object Vertical : Large() { override val classes: Array<String> = Top.classes + Bottom.classes }
+        object Horizontal : Large() { override val classes: Array<String> = Left.classes + Right.classes }
         companion object : Large("uk-margin-large")
 
     }
-    sealed class XLarge(classname: String) : UIKitMargin(classname) {
+    sealed class XLarge(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : XLarge("uk-margin-xlarge-top")
         object Bottom : XLarge("uk-margin-xlarge-bottom")
         object Left : XLarge("uk-margin-xlarge-left")
         object Right : XLarge("uk-margin-xlarge-right")
+        object Vertical : XLarge() { override val classes: Array<String> = Top.classes + Bottom.classes }
+        object Horizontal : XLarge() { override val classes: Array<String> = Left.classes + Right.classes }
         companion object : XLarge("uk-margin-xlarge")
 
     }
-    sealed class Auto(classname: String) : UIKitMargin(classname) {
+    sealed class Auto(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Auto("uk-margin-auto-top")
         object Bottom : Auto("uk-margin-auto-bottom")
         object Left : Auto("uk-margin-auto-left")
         object Right : Auto("uk-margin-auto-right")
         object Vertical : Auto("uk-margin-auto-vertical")
+        object Horizontal : Auto() { override val classes: Array<String> = Left.classes + Right.classes }
         companion object : Auto("uk-margin-auto")
 
     }
 
-    sealed class Remove(classname: String) : UIKitMargin(classname) {
+    sealed class Remove(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Remove("uk-margin-remove-top")
         object Bottom : Remove("uk-margin-remove-bottom")
         object Left : Remove("uk-margin-remove-left")
         object Right : Remove("uk-margin-remove-right")
         object Vertical : Remove("uk-margin-remove-vertical")
+        object Horizontal : Remove() { override val classes: Array<String> = Left.classes + Right.classes }
         object Adjacent : Remove("uk-margin-remove-adjacent")
         object FirstChild : Remove("uk-margin-remove-first-child")
         object LastChild : Remove("uk-margin-remove-last-child")

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

@@ -0,0 +1,58 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+
+sealed class UIKitModal(
+    classname: String,
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Dialog : UIKitModal("uk-modal-dialog")
+    object Title : UIKitModal("uk-modal-title")
+
+    object Header : UIKitModal("uk-modal-header")
+    object Body : UIKitModal("uk-modal-body")
+    object Footer : UIKitModal("uk-modal-footer")
+
+    object Container : UIKitModal("uk-modal-container")
+    object Full : UIKitModal("uk-modal-full")
+
+    object Page : UIKitModal("uk-modal-page")
+
+    sealed class Close(classname: String) : UIKitModal(classname) {
+        object Default : Close("uk-modal-close-default")
+        object Outside : Close("uk-modal-close-outside")
+        object Full : Close("uk-modal-close-full")
+
+        companion object : Close("uk-modal-close")
+    }
+
+    internal class WithCustomAttributes(
+        otherAttrs: Map<String, String> = emptyMap()
+    ) : UIKitModal("uk-modal", otherAttrs)
+
+    companion object : UIKitModal("uk-modal", mapOf("uk-modal" to "")) {
+        operator fun invoke(
+            escClose: Boolean? = null,
+            backgroundClose: Boolean? = null,
+            stack: Boolean? = null,
+            container: Boolean? = null,
+            classPage: String? = null,
+            classPanel: String? = null,
+            closingSelection: String? = null,
+        ): UIKitModal = WithCustomAttributes(
+            mapOf(
+                buildAttribute("uk-modal") {
+                    "esc-close" to escClose
+                    "bg-close" to backgroundClose
+                    "stack" to stack
+                    "container" to container
+                    "cls-page" to classPage
+                    "cls-panel" to classPanel
+                    "sel-close" to closingSelection
+                }
+            )
+        )
+    }
+}

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

@@ -1,6 +1,9 @@
 package dev.inmo.jsuikit.modifiers
 
-import org.jetbrains.compose.web.attributes.AttrsBuilder
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
 
 interface UIKitModifier {
     val classes: Array<String>
@@ -9,9 +12,22 @@ interface UIKitModifier {
         get() = emptyMap()
 }
 
-fun AttrsBuilder<*>.include(vararg container: UIKitModifier?) {
+fun AttrsScope<*>.include(vararg container: UIKitModifier?) {
     container.forEach {
         it ?.classes ?.let { newClasses -> classes(*newClasses) }
         it ?.otherAttrs ?.let { attrs -> attrs.forEach { (k, v) -> attr(k, v) } }
     }
 }
+
+fun <T : Element> UIKitModifier.asAttributesBuilder(): AttrBuilderContext<T> = {
+    include(this@asAttributesBuilder)
+}
+operator fun UIKitModifier.plus(other: UIKitModifier): UIKitModifier = UIKitCustom(
+    classes + other.classes,
+    otherAttrs + other.otherAttrs
+)
+fun <T: Element> UIKitModifier?.builder() = Attrs<T>(this).builder
+fun <T: Element> Array<out UIKitModifier?>.builder() = Attrs<T>(*this).builder
+inline fun <T: Element> attrsBuilder(vararg modifiers: UIKitModifier?) = modifiers.builder<T>()
+@JsName("plusBuilder")
+operator fun <T: Element> UIKitModifier?.plus(other: UIKitModifier?): AttrBuilderContext<T> = Attrs<T>(this@plus, other).builder

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

@@ -4,7 +4,6 @@ sealed class UIKitNav(classname: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf(classname)
 
     object ParentIcon : UIKitNav("uk-nav-parent-icon")
-    object SubNav : UIKitNav("uk-nav-sub")
 
     object Header : UIKitNav("uk-nav-header")
     object Divider : UIKitNav("uk-nav-divider")
@@ -15,5 +14,9 @@ sealed class UIKitNav(classname: String) : UIKitModifier {
 
     object Center : UIKitNav("uk-nav-center")
 
-    companion object : UIKitNav("uk-nav")
+    object Sub : UIKitNav("uk-nav-sub")
+
+    companion object : UIKitNav("uk-nav") {
+        val SubNav = UIKitSubNav
+    }
 }

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

@@ -1,17 +1,86 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitNavbar(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-navbar-$suffix")
+import dev.inmo.jsuikit.types.Dropdown
+import dev.inmo.jsuikit.utils.*
 
-    object Transparent : UIKitNavbar("transparent")
-    sealed class Dropdown(suffix: String?) : UIKitNavbar("dropdown${suffix ?.let { "-$it" } ?: ""}") {
+sealed class UIKitNavbar(vararg classes: String) : UIKitModifier {
+    override val classes: Array<String> = classes as Array<String>
+
+    object Transparent : UIKitNavbar("uk-navbar-transparent")
+    object Container : UIKitNavbar("uk-navbar-container")
+    sealed class Dropdown(suffix: String?) : UIKitNavbar("uk-navbar-dropdown${suffix ?.let { "-$it" } ?: ""}") {
         object Nav : Dropdown("nav")
 
+        sealed class Width(suffix: String) : Dropdown(suffix) {
+            object Two : Width("width-2")
+            object Three : Width("width-3")
+            object Four : Width("width-4")
+            object Five : Width("width-5")
+        }
+
         companion object : Dropdown(null)
     }
-    object Item : UIKitNavbar("item")
+    sealed class Alignment(val suffix: String) : UIKitNavbar("uk-navbar-$suffix") {
+        object Left : Alignment("left")
+        sealed class Center(suffix: String) : Alignment(suffix) {
+            object Left : Center("center-left")
+            object Right : Center("center-right")
 
-    companion object {
+            companion object : Center("center")
+        }
+        object Right : Alignment("right")
+    }
+    object Item : UIKitNavbar("uk-navbar-item")
+    object Nav : UIKitNavbar("uk-navbar-nav")
+    object Subtitle : UIKitNavbar("uk-navbar-subtitle")
+    object Toggle : UIKitNavbar("uk-navbar-toggle")
+    object Sticky : UIKitNavbar("uk-navbar-sticky")
+
+    class Component internal constructor(
+        override val otherAttrs: Map<String, String>
+    ) : UIKitNavbar(*UIKitNavbar.classes)
+
+    companion object : UIKitNavbar("uk-navbar") {
         val Logo = UIKitUtility.Logo
+
+        operator fun invoke(
+            align: String?,
+            mode: String? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            offset: Pixels? = null,
+            dropbar: Boolean? = null,
+            duration: Milliseconds? = null
+        ): Component {
+            return Component(
+                mapOf(
+                    buildAttribute(UIKitNavbar.classes.first()) {
+                        "align" to align
+                        "mode" to mode
+                        "delay-show" to delayShow
+                        "delay-hide" to delayHide
+                        "boundary" to boundary
+                        "boundary-align" to boundaryAlign
+                        "offset" to offset
+                        "dropbar" to dropbar
+                        "duration" to duration
+                    }
+                )
+            )
+        }
+
+        operator fun invoke(
+            align: Alignment? = null,
+            mode: UIKitDropdown.Mode? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            offset: Pixels? = null,
+            dropbar: Boolean? = null,
+            duration: Milliseconds? = null
+        ): Component = invoke(align ?.suffix, mode ?.name, delayShow, delayHide, boundary, boundaryAlign, offset, dropbar, duration)
     }
 }

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

@@ -0,0 +1,16 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitOverlay(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    object Default : UIKitOverlay(arrayOf("uk-overlay-default"))
+    object Primary : UIKitOverlay(arrayOf("uk-overlay-primary"))
+    object Icon : UIKitOverlay(arrayOf("uk-overlay-icon"))
+
+    companion object : UIKitOverlay(
+        arrayOf("uk-overlay")
+    )
+
+}

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

@@ -8,7 +8,10 @@ sealed class UIKitPadding(suffix: String?) : UIKitModifier {
         object Small : Size("small")
         object Large : Size("large")
 
-        companion object : Size(null)
+        companion object : Size(null) {
+            val Default
+                get() = this
+        }
 
     }
 
@@ -25,5 +28,6 @@ sealed class UIKitPadding(suffix: String?) : UIKitModifier {
 
     }
 
+    companion object : Size(null)
 
 }

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

@@ -0,0 +1,5 @@
+package dev.inmo.jsuikit.modifiers
+
+object UIKitPlaceholder : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-placeholder")
+}

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

@@ -18,3 +18,14 @@ sealed class UIKitScreenSizeModifier(val name: String) {
         modifier
     )
 }
+
+fun UIKitModifier.applyWhenScreenSizeIs(size: UIKitScreenSizeModifier) = size.modify(this)
+
+val UIKitModifier.onSmallScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.Small)
+val UIKitModifier.onMediumScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.Medium)
+val UIKitModifier.onLargeScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.Large)
+val UIKitModifier.onXLargeScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.XLarge)

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

@@ -0,0 +1,23 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitSection(vararg classes: String) : UIKitModifier {
+    override val classes: Array<String> = classes as Array<String>
+
+    sealed class Style(suffix: String) : UIKitSection("uk-section-$suffix") {
+        object Default : Style("default")
+        object Muted : Style("muted")
+        object Primary : Style("primary")
+        object Secondary : Style("secondary")
+    }
+
+    sealed class Size(suffix: String) : UIKitSection("uk-section-$suffix") {
+        object XSmall : Size("xsmall")
+        object Small : Size("small")
+        object Large : Size("large")
+        object XLarge : Size("xlarge")
+    }
+
+    object Overlap : UIKitSection("uk-section-overlap")
+
+    companion object : UIKitSection("uk-section")
+}

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

@@ -0,0 +1,47 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+import org.jetbrains.compose.web.css.CSSUnitLengthOrPercentage
+import org.jetbrains.compose.web.css.CSSUnitValueTyped
+
+class UIKitSticky(
+    position: Position? = null,
+    start: String? = null,
+    end: String? = null,
+    offset: CSSUnitValueTyped<CSSUnitLengthOrPercentage>? = null,
+    overflowFlip: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    classForActiveItems: String? = null,
+    classForInactiveItems: String? = null,
+    showOnUp: Boolean? = null,
+    media: String? = null,
+    targetOffset: CSSUnitValueTyped<CSSUnitLengthOrPercentage>? = null
+) : UIKitModifier {
+    override val otherAttrs: Map<String, String> = mapOf(
+        buildAttribute("uk-sticky") {
+            "position" to position ?.name
+            "start" to start
+            "end" to end
+            "offset" to offset ?.toString()
+            "overflow-flip" to overflowFlip
+            "animation" to animation
+            "cls-active" to classForActiveItems
+            "cls-inactive" to classForInactiveItems
+            "show-on-up" to showOnUp
+            "media" to media
+            "target-offset" to targetOffset ?.toString()
+        }
+    )
+
+    sealed interface Position {
+        val name: String
+        object Top : Position {
+            override val name: String
+                get() = "top"
+        }
+        object Bottom : Position {
+            override val name: String
+                get() = "bottom"
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitSubNav(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Divider : UIKitSubNav("uk-subnav-divider")
+    object Pill : UIKitSubNav("uk-subnav-pill")
+
+    companion object : UIKitSubNav("uk-subnav")
+}

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/modifiers/UIKitText.kt

@@ -3,16 +3,34 @@ package dev.inmo.jsuikit.modifiers
 sealed class UIKitText(suffix: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf("uk-text-$suffix")
 
-    object Lead : UIKitText("lead")
-    object Meta : UIKitText("meta")
-
-    sealed class Alignment(suffix: String) : UIKitText(suffix) {
-        object Left : Alignment("left")
-        object Right : Alignment("right")
-        object Center : Alignment("center")
-        object Justify : Alignment("justify")
+    sealed class Style(suffix: String) : UIKitText(suffix) {
+        object Lead : Style("lead")
+        object Meta : Style("meta")
+        object Italic : Style("italic")
     }
 
+    sealed class Size(suffix: String) : UIKitText(suffix) {
+        object Small : Size("small")
+        object Default : Size("default")
+        object Large : Size("large")
+    }
+
+    sealed class Weight(suffix: String) : UIKitText(suffix) {
+        object Light : Weight("light")
+        object Normal : Weight("normal")
+        object Bold : Weight("bold")
+        object Lighter : Weight("lighter")
+        object Bolder : Weight("bolder")
+    }
+
+    sealed class Transform(suffix: String) : UIKitText(suffix) {
+        object Capitalize : Transform("capitalize")
+        object Uppercase : Transform("uppercase")
+        object Lowercase : Transform("lowercase")
+    }
+
+    object DecorationNone : UIKitText("decoration-none")
+
     sealed class Color(suffix: String) : UIKitText(suffix) {
         object Muted : Color("muted")
         object Emphasis : Color("emphasis")
@@ -22,4 +40,32 @@ sealed class UIKitText(suffix: String) : UIKitModifier {
         object Warning : Color("warning")
         object Danger : Color("danger")
     }
+
+    object Background : UIKitText("background")
+
+    sealed class Alignment(suffix: String) : UIKitText(suffix) {
+
+        sealed class Horizontal(suffix: String) : Alignment(suffix) {
+            object Left : Horizontal("left")
+            object Right : Horizontal("right")
+            object Center : Horizontal("center")
+            object Justify : Horizontal("justify")
+        }
+
+        sealed class Vertical(suffix: String) : Alignment(suffix) {
+            object Top : Vertical("top")
+            object Middle : Vertical("middle")
+            object Bottom : Vertical("bottom")
+            object Baseline : Vertical("baseline")
+        }
+
+    }
+
+    sealed class Wrapping(suffix: String) : UIKitText(suffix) {
+
+        object Truncate : Wrapping("truncate")
+        object Break : Wrapping("break")
+        object NoWrap : Wrapping("nowrap")
+
+    }
 }

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

@@ -0,0 +1,15 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitTile(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    object Default : UIKitTile(arrayOf("uk-tile-default"))
+    object Muted : UIKitTile(arrayOf("uk-tile-muted"))
+    object Primary : UIKitTile(arrayOf("uk-tile-primary"))
+    object Secondary : UIKitTile(arrayOf("uk-tile-secondary"))
+
+    companion object : UIKitTile(arrayOf("uk-tile"))
+
+}

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

@@ -0,0 +1,64 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.Milliseconds
+import dev.inmo.jsuikit.utils.buildAttribute
+
+sealed class UIKitToggle(
+    vararg classnames: String,
+    override val otherAttrs: Map<String, String>
+) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classnames as Array<String>
+
+    sealed class Mode {
+        abstract val mode: String
+
+        object Click : Mode() {
+            override val mode: String
+                get() = "click"
+        }
+
+        object Hover : Mode() {
+            override val mode: String
+                get() = "hover"
+        }
+
+        object ClickAndHover : Mode() {
+            override val mode: String
+                get() = "${Click.mode}, ${Hover.mode}"
+        }
+
+        object Media : Mode() {
+            override val mode: String
+                get() = "media"
+        }
+
+        override fun toString(): String = mode
+    }
+
+    class Custom internal constructor(otherAttrs: Map<String, String>) : UIKitToggle(otherAttrs = otherAttrs)
+
+    companion object : UIKitToggle(otherAttrs = mapOf("uk-toggle" to "")) {
+        operator fun invoke(
+            target: String? = null,
+            mode: Mode? = null,
+            classesToApplyOnToggle: String? = null,
+            media: String? = null,
+            animation: UIKitAnimation? = null,
+            duration: Milliseconds? = null,
+            queued: Boolean? = null
+        ) = Custom(
+            mapOf(
+                buildAttribute("uk-toggle") {
+                    "target" to target
+                    "mode" to mode
+                    "cls" to classesToApplyOnToggle
+                    "media" to media
+                    "animation" to animation
+                    "duration" to duration
+                    "queued" to queued
+                }
+            )
+        )
+    }
+}

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

@@ -1,5 +1,7 @@
 package dev.inmo.jsuikit.modifiers
 
+import dev.inmo.jsuikit.utils.buildAttribute
+
 class UIKitTooltipModifier(
     text: String,
     align: Align? = null,
@@ -8,16 +10,15 @@ class UIKitTooltipModifier(
     duration: Int? = null,
     animation: UIKitAnimation? = null
 ) : UIKitModifier {
-    private val parametersMap = listOfNotNull(
-        "title" to text,
-        align ?.let { it.k to it.v },
-        delay ?.let { "delay" to it.toString() },
-        offset ?.let { "offset" to it.toString() },
-        duration ?.let { "duration" to it.toString() },
-        animation ?.let { "animation" to it.name },
-    )
     override val otherAttrs: Map<String, String> = mapOf(
-        "uk-tooltip" to parametersMap.joinToString(";") { (k, v) -> "$k: $v" }
+        buildAttribute("uk-tooltip") {
+            "title" to text
+            align ?.let { it.k to it.v }
+            delay ?.let { "delay" to it.toString() }
+            offset ?.let { "offset" to it.toString() }
+            duration ?.let { "duration" to it.toString() }
+            animation ?.let { "animation" to it.name }
+        }
     )
 
     sealed class Align(name: String) {

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

@@ -38,7 +38,10 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
         object Width : Responsive("width")
         object Height : Responsive("height")
     }
-    object PreserveWidth : UIKitUtility("uk-preserve-width")
+    sealed class Preserve(suffix: String) : UIKitUtility("uk-preserve-$suffix") {
+        object Width : Preserve("width")
+        object Color : Preserve("color")
+    }
 
     sealed class Border(suffix: String) : UIKitUtility("uk-border-$suffix") {
         object Rounded : Border("rounded")
@@ -109,4 +112,11 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
     object Disabled : UIKitUtility("uk-disabled")
     object Drag : UIKitUtility("uk-drag")
     object Active : UIKitUtility("uk-active")
+
+    object Open : UIKitUtility("uk-open")
+    object Link : UIKitUtility("uk-link")
+
+    companion object {
+        val PreserveWidth = Preserve.Width
+    }
 }

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

@@ -0,0 +1,30 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitVisibility(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    sealed class Hidden(suffix: String?) : UIKitModifier {
+        override val classes: Array<String> = arrayOf("uk-hidden${suffix ?.let { "-$it" } ?: ""}")
+
+        object Hover : Hidden("hover")
+        sealed class Touch(suffix: String?) : Hidden(suffix) {
+            override val classes: Array<String> = arrayOf("${suffix ?: ""}touch")
+
+            object No : Touch("no")
+
+            companion object : Touch(null)
+        }
+
+        companion object : Hidden(null) {
+            val NoTouch = Touch.No
+        }
+    }
+
+    sealed class Invisible(suffix: String?) : UIKitModifier {
+        override val classes: Array<String> = arrayOf("uk-invisible${suffix ?.let { "-$it" } ?: ""}")
+
+        object Hover : Invisible("hover")
+
+        companion object : Invisible(null)
+    }
+}

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

@@ -1,33 +1,82 @@
 package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitWidth(classname: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-width-$classname")
+    override val classes: Array<String> = arrayOf(classname)
 
-    object Full : UIKitWidth("1-1")
-    object Expand : UIKitWidth("expand")
+    object Auto : UIKitWidth("uk-width-auto")
+    object Expand : UIKitWidth("uk-width-expand")
+    object Full : UIKitWidth("uk-width-1-1")
 
-    object Half : UIKitWidth("1-2")
+    object Half : UIKitWidth("uk-width-1-2")
 
-    object OneThird : UIKitWidth("1-3")
-    object TwoThird : UIKitWidth("2-3")
+    object OneThird : UIKitWidth("uk-width-1-3")
+    object TwoThird : UIKitWidth("uk-width-2-3")
 
-    object OneFourth : UIKitWidth("1-4")
-    val TwoFourth get() = Half
-    object ThreeFourth : UIKitWidth("3-4")
-    val FourFourth get() = Full
+    object OneFourth : UIKitWidth("uk-width-1-4")
+    object ThreeFourth : UIKitWidth("uk-width-3-4")
 
-    object OneFifth : UIKitWidth("1-5")
-    object TwoFifth : UIKitWidth("2-5")
-    object ThreeFifth : UIKitWidth("3-5")
-    object FourFifth : UIKitWidth("4-5")
-    val FiveFifth get() = Full
+    object OneFifth : UIKitWidth("uk-width-1-5")
+    object TwoFifth : UIKitWidth("uk-width-2-5")
+    object ThreeFifth : UIKitWidth("uk-width-3-5")
+    object FourFifth : UIKitWidth("uk-width-4-5")
 
-    object OneSixth : UIKitWidth("1-6")
-    val TwoSixth get() = OneThird
-    val ThreeSixth get() = Half
-    val FourSixth get() = TwoThird
-    object FiveSixth : UIKitWidth("5-6")
-    val SixSixth get() = Full
+    object OneSixth : UIKitWidth("uk-width-1-6")
+    object FiveSixth : UIKitWidth("uk-width-5-6")
+
+    sealed class Child(suffix: String) : UIKitWidth("uk-child-width-$suffix") {
+        object Full : Child("1-1")
+
+        object Half : Child("1-2")
+
+        object OneThird : Child("1-3")
+        object TwoThird : Child("2-3")
+
+        object OneFourth : Child("1-4")
+        object ThreeFourth : Child("3-4")
+
+        object OneFifth : Child("1-5")
+        object TwoFifth : Child("2-5")
+        object ThreeFifth : Child("3-5")
+        object FourFifth : Child("4-5")
+
+        object OneSixth : Child("1-6")
+        object FiveSixth : Child("5-6")
+
+        object Auto : Child("auto")
+        object Expand : Child("expand")
+
+        companion object {
+
+            val TwoFourth get() = Half
+            val TwoSixth get() = OneThird
+            val ThreeSixth get() = Half
+            val FourSixth get() = TwoThird
+            val FourFourth get() = Full
+            val FiveFifth get() = Full
+            val SixSixth get() = Full
+        }
+    }
+
+    sealed class Fixed(suffix: String) : UIKitWidth("uk-width-$suffix") {
+
+        object Small : Fixed("small")
+        object Medium : Fixed("medium")
+        object Large : Fixed("large")
+        object XLarge : Fixed("xlarge")
+        object XXLarge : Fixed("2xlarge")
+
+    }
 
     override fun toString() = classes.first()
+
+    companion object {
+
+        val TwoFourth get() = Half
+        val TwoSixth get() = OneThird
+        val ThreeSixth get() = Half
+        val FourSixth get() = TwoThird
+        val FourFourth get() = Full
+        val FiveFifth get() = Full
+        val SixSixth get() = Full
+    }
 }

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

@@ -0,0 +1,44 @@
+package dev.inmo.jsuikit.types
+
+import dev.inmo.jsuikit.modifiers.UIKitAnimation
+import dev.inmo.jsuikit.modifiers.UIKitDropdown
+import dev.inmo.jsuikit.utils.*
+
+external interface Dropdown {
+    fun show()
+    fun hide(delay: Boolean = definedExternally)
+    fun hide(delay: Milliseconds)
+}
+
+data class DropdownOptions(
+    private val toggle: String? = null,
+    private val pos: UIKitDropdown.Position? = null,
+    private val mode: UIKitDropdown.Mode? = null,
+    private val delayShow: Milliseconds? = null,
+    private val delayHide: Milliseconds? = null,
+    private val boundary: String? = null,
+    private val boundaryAlign: Boolean? = null,
+    private val flip: UIKitDropdown.Flip? = null,
+    private val offset: Int? = null,
+    private val animation: UIKitAnimation? = null,
+    private val duration: Milliseconds? = null,
+) {
+    fun includeParameters(parametersBuilder: ParametersBuilder) {
+        with(parametersBuilder) {
+            "toggle" to toggle
+            "pos" to pos
+            "mode" to mode
+            "delayShow" to delayShow
+            "delayHide" to delayHide
+            "boundary" to boundary
+            "boundaryAlign" to boundaryAlign
+            "flip" to flip
+            "offset" to offset
+            "animation" to animation
+            "duration" to duration
+        }
+    }
+    fun parameters() = buildParametersWithoutNulls {
+        includeParameters(this)
+    }
+}

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

@@ -0,0 +1,20 @@
+package dev.inmo.jsuikit.types
+
+import org.w3c.dom.Element
+import kotlin.js.Json
+
+external interface UIKit {
+    val notification: UIKitNotifications
+    val modal: UIKitDialogs
+    val util: UIKitUtil
+
+
+    fun notification(message: String, parameters: Json)
+    fun notification(element: Element): UIKitNotification?
+
+    fun modal(element: Element): UIKitDialog
+    fun modal(selector: String): UIKitDialog?
+
+    fun dropdown(element: Element, options: DropdownOptions = definedExternally): Dropdown
+    fun dropdown(selector: String, options: DropdownOptions = definedExternally): Dropdown?
+}

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

@@ -0,0 +1,38 @@
+package dev.inmo.jsuikit.types
+
+import org.w3c.dom.Element
+import kotlin.js.Promise
+
+external interface UIKitDialogs {
+    fun alert(text: String): UIKitDialogPromiseAlert
+    fun confirm(text: String): UIKitDialogPromiseConfirm
+    fun prompt(title: String): UIKitDialogPromisePrompt
+    fun prompt(title: String, preset: String): UIKitDialogPromisePrompt
+    fun dialog(element: Element): UIKitDialog
+}
+
+external class UIKitDialogPromiseConfirm : Promise<Unit> {
+    val dialog: UIKitDialog
+
+    fun then(
+        onConfirm: () -> Unit = definedExternally,
+        onRejected: () -> Unit = definedExternally,
+    )
+}
+
+external class UIKitDialogPromisePrompt : Promise<Unit> {
+    val dialog: UIKitDialog
+
+    fun then(onResult: (data: String?) -> Unit)
+}
+
+external class UIKitDialogPromiseAlert : Promise<Unit> {
+    val dialog: UIKitDialog
+
+    fun then(onClose: () -> Unit)
+}
+
+external interface UIKitDialog {
+    fun show()
+    fun hide()
+}

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

@@ -0,0 +1,39 @@
+package dev.inmo.jsuikit.types
+
+sealed class UIKitNotificationParameter {
+    abstract val parameterName: String
+    abstract val parameterValue: String
+
+    sealed class Style(override val parameterValue: String) : UIKitNotificationParameter() {
+        override val parameterName: String
+            get() = "status"
+
+        object Primary : Style("primary")
+        object Success : Style("success")
+        object Warning : Style("warning")
+        object Danger : Style("danger")
+
+    }
+
+    sealed class Position(override val parameterValue: String) : UIKitNotificationParameter() {
+        override val parameterName: String
+            get() = "pos"
+
+        sealed class Top(parameterValue: String) : Position("top-$parameterValue") {
+
+            object Left : Top("left")
+            object Center : Top("center")
+            object Right : Top("right")
+
+        }
+
+        sealed class Bottom(parameterValue: String) : Position("bottom-$parameterValue") {
+
+            object Left : Bottom("left")
+            object Center : Bottom("center")
+            object Right : Bottom("right")
+
+        }
+
+    }
+}

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

@@ -0,0 +1,45 @@
+package dev.inmo.jsuikit.types
+
+import dev.inmo.jsuikit.modifiers.UIKit
+import dev.inmo.jsuikit.utils.Milliseconds
+import kotlin.js.json
+
+typealias NotificationsGroup = String
+
+external interface UIKitNotifications {
+
+    fun closeAll(group: NotificationsGroup)
+}
+
+external interface UIKitNotification {
+    fun close(immediate: Boolean)
+}
+
+data class UIKitNotificationsParameters(
+    val status: UIKitNotificationParameter.Style? = null,
+    val timeout: Milliseconds? = null,
+    val group: NotificationsGroup? = null,
+    val position: UIKitNotificationParameter.Position? = null
+) {
+    fun parametersJson() = json(
+        *listOfNotNull(
+            status ?.let { it.parameterName to it.parameterValue },
+            timeout ?.let { "timeout" to timeout.toString() },
+            group ?.let { "group" to it },
+            position ?.let { it.parameterName to it.parameterValue },
+        ).toTypedArray()
+    )
+}
+
+operator fun UIKitNotifications.invoke(
+    message: String,
+    parameters: UIKitNotificationsParameters
+) = UIKit.notification(message, parameters.parametersJson())
+
+operator fun UIKitNotifications.invoke(
+    message: String,
+    status: UIKitNotificationParameter.Style? = null,
+    timeout: Milliseconds? = null,
+    group: NotificationsGroup? = null,
+    position: UIKitNotificationParameter.Position? = null
+) = invoke(message, UIKitNotificationsParameters(status, timeout, group, position))