Fixes in UIKitWidth

0.0.27

.gitignore

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

CHANGELOG.md

@@ -1,3 +1,117 @@
+# Changelog
+
+## 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
+
+## 0.0.11
+
+* Upfill `Nav` and `UIKitNav`
+
+## 0.0.10
+
+* Filling of `UIKitUtility`
+
+## 0.0.9
+
+* Improving of `Nav` support
+
+## 0.0.8
+
+Removing of redundant non standard things
+
+## 0.0.7
+
+Rewrite project onto multiplatform paradigm and return back varargs instead of most `Array<UIKitModifier>`
+
+## 0.0.6
+
+Changes in signatures of text field and list
+
+## 0.0.5
+
+All elements has changed their signatures: they all will accept an additional lambda for attributes configuration
+
+## 0.0.4
+
+__Migrate modifers to modifiers__
+
+## 0.0.3
+
+__Global changes in packages__
+
+## 0.0.2
+
+* Name of project has been changed: `jsuikitkotlin` -> `kjsuikit`
+
 ## 0.0.1
 
 It is first version. Here project has been created and added a lot of implementations of elements

README.md

@@ -1,8 +1,5 @@
 # JSUIKit Kotlin
 
-**IMPORTANT NOTICE**: ___Currently it is possible that you will have issues with `vararg` arguments passing to the functions.
-Use `arrayOf(...)` instead___
-
 Hello :) This library is a wrapper for JavaScript/CSS [UIKit](https://getuikit.com) framework. It uses the same
 structure as in [UIKit Docs](https://getuikit.com/docs/introduction) and in most cases you may use it.
 
@@ -11,10 +8,10 @@ for you in case you are using it too.
 
 ## How to include
 
-Last version: [![Maven Central](https://maven-badges.herokuapp.com/maven-central/dev.inmo/jsuikitkotlin/badge.svg)](https://maven-badges.herokuapp.com/maven-central/dev.inmo/jsuikitkotlin)
+Last version: [![Maven Central](https://maven-badges.herokuapp.com/maven-central/dev.inmo/kjsuikit/badge.svg)](https://maven-badges.herokuapp.com/maven-central/dev.inmo/kjsuikit)
 
 ```groovy
-implementation "dev.inmo:jsuikitkotlin:$jsuikitkotlin_version"
+implementation "dev.inmo:kjsuikit:$kjsuikit_version"
 ```
 
 **THIS LIBRARY DO NOT ADD ANY JS OR CSS**. So, you must download and include UIKit js/css by yourself. See

build.gradle

@@ -10,39 +10,49 @@ buildscript {
         classpath libs.buildscript.kt.gradle
         classpath libs.buildscript.kt.serialization
         classpath libs.buildscript.jb.dokka
+        classpath libs.buildscript.gh.release
     }
 }
 
 plugins {
-    alias(libs.plugins.kt.js)
+    alias(libs.plugins.kt.multiplatform)
     alias(libs.plugins.jb.compose)
 }
 
 project.version = "$version"
 project.group = "$group"
 
-allprojects {
-    repositories {
-        mavenLocal()
-        mavenCentral()
-        google()
-    }
+repositories {
+    mavenLocal()
+    mavenCentral()
+    google()
 }
 
 kotlin {
     js(IR) {
         browser()
-        binaries.executable()
     }
-}
 
+    sourceSets {
+        commonMain {
+            dependencies {
+                implementation libs.kt.stdlib
+                implementation compose.runtime
+            }
+        }
+        jsMain {
+            dependencies {
+                implementation compose.web.core
+            }
+        }
 
-dependencies {
-    implementation libs.kt.stdlib
-    implementation compose.web.core
-    implementation compose.runtime
-    testImplementation libs.kt.test.js
-    testImplementation libs.kt.test.junit
+        jsTest {
+            dependencies {
+                implementation libs.kt.test.js
+                implementation libs.kt.test.junit
+            }
+        }
+    }
 }
 
 apply from: "./github_release.gradle"

github_release.gradle

@@ -19,7 +19,7 @@ if (new File(projectDir, "secret.gradle").exists()) {
         token "${project.property('GITHUB_RELEASE_TOKEN')}"
 
         owner "InsanusMokrassar"
-        repo "JSUIKitBindings"
+        repo "JSUIKitKBindings"
 
         tagName "${project.version}"
         releaseName "${project.version}"

gradle.properties

@@ -9,5 +9,4 @@ android.enableJetifier=true
 # Project data
 
 group=dev.inmo
-version=0.0.1
-
+version=0.0.28

gradle/libs.versions.toml

@@ -14,8 +14,9 @@ kt-test-junit = { module = "org.jetbrains.kotlin:kotlin-test-junit", version.ref
 buildscript-kt-gradle = { module = "org.jetbrains.kotlin:kotlin-gradle-plugin", version.ref = "kt" }
 buildscript-kt-serialization = { module = "org.jetbrains.kotlin:kotlin-serialization", version.ref = "kt" }
 buildscript-jb-dokka = { module = "org.jetbrains.dokka:dokka-gradle-plugin", version.ref = "jb-dokka" }
+buildscript-gh-release = { module = "com.github.breadmoirai:github-release", version.ref = "gh-release" }
 
 [plugins]
 
-kt-js = { id = "org.jetbrains.kotlin.js", version.ref = "kt" }
+kt-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kt" }
 jb-compose = { id = "org.jetbrains.compose", version.ref = "jb-compose" }

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

@@ -1,72 +1,57 @@
 apply plugin: 'maven-publish'
 
-task javadocJar(type: Jar) {
+task javadocsJar(type: Jar) {
     classifier = 'javadoc'
 }
-task sourcesJar(type: Jar) {
-    kotlin.sourceSets.all {
-        from(kotlin)
-    }
-    classifier = 'sources'
-}
 
 publishing {
-    publications {
-        maven(MavenPublication) {
-            kotlin.js().components.forEach {
-                from(it)
+    publications.all {
+        artifact javadocsJar
+
+        pom {
+            description = "${project.name}"
+            name = "${project.name}"
+            url = "https://github.com/InsanusMokrassar/JSUIKitKBindings"
+
+            scm {
+                developerConnection = "scm:git:[fetch=]https://github.com/InsanusMokrassar/JSUIKitKBindings.git[push=]https://github.com/InsanusMokrassar/JSUIKitKBindings.git"
+                url = "https://github.com/InsanusMokrassar/JSUIKitKBindings.git"
             }
 
-            artifact javadocJar
-            artifact sourcesJar
-
-            pom {
-                resolveStrategy = Closure.DELEGATE_FIRST
-
-                description = "${project.name}"
-                name = "${project.name}"
-                url = "https://github.com/InsanusMokrassar/JSUIKitKBindings"
-
-                scm {
-                    developerConnection = "scm:git:[fetch=]https://github.com/InsanusMokrassar/JSUIKitKBindings.git[push=]https://github.com/InsanusMokrassar/JSUIKitKBindings.git"
-                    url = "https://github.com/InsanusMokrassar/JSUIKitKBindings.git"
-                }
-
-                developers {
-                    
-                        developer {
-                            id = "InsanusMokrassar"
-                            name = "Ovsiannikov Aleksei"
-                            email = "ovsyannikov.alexey95@gmail.com"
-                        }
-                    
-                }
-
-                licenses {
-                    
-                        license {
-                            name = "Apache Software License 2.0"
-                            url = "https://opensource.org/licenses/Apache-2.0"
-                        }
-                    
-                }
+            developers {
+                
+                    developer {
+                        id = "InsanusMokrassar"
+                        name = "Ovsiannikov Aleksei"
+                        email = "ovsyannikov.alexey95@gmail.com"
+                    }
+                
             }
-            repositories {
-                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')
-                        }
+
+            licenses {
+                
+                    license {
+                        name = "Apache Software License 2.0"
+                        url = "https://opensource.org/licenses/Apache-2.0"
+                    }
+                
+            }
+        }
+        repositories {
+            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')
                     }
                 }
             }
         }
     }
 }
-
+    
 if (project.hasProperty("signing.gnupg.keyName")) {
     apply plugin: 'signing'
     

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"}},"type":"JS"}
+{"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"}}}

settings.gradle

@@ -1,3 +1,3 @@
-rootProject.name = 'jsuikitkotlin'
+rootProject.name = 'kjsuikit'
 
 enableFeaturePreview("VERSION_CATALOGS")

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

@@ -1,6 +1,6 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit
 
-import dev.inmo.jsuikit.defaults.modifers.AttributeValue
+import dev.inmo.jsuikit.modifiers.AttributeValue
 import org.jetbrains.compose.web.attributes.AttrsBuilder
 
 class UIKitAttributeValueBuilder {

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

@@ -1,30 +1,31 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
 import androidx.compose.web.events.SyntheticMouseEvent
-import dev.inmo.jsuikit.defaults.modifers.*
+import dev.inmo.jsuikit.modifiers.*
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.attributes.disabled
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.events.Event
 
 @Composable
 fun DefaultButton(
     vararg modifiers: UIKitModifier,
     disabled: Boolean = false,
-    buttonType: UIKitButton.Type = UIKitButton.Type.Default,
     onClick: ((SyntheticMouseEvent) -> Unit)? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLButtonElement> = {},
     contentAllocator: ContentBuilder<HTMLButtonElement>
 ) {
     Button(
         {
             onClick ?.let { onClick(it) }
-            classes("uk-button")
-            include(*modifiers, buttonType)
+            include(UIKitButton, *modifiers)
             if (disabled) {
                 disabled()
             }
+            attributesCustomizer()
         }
     ) {
         contentAllocator()
@@ -36,11 +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) {
+) = DefaultButton(*modifiers, disabled = disabled, onClick = onClick, attributesCustomizer = attributesCustomizer) {
     preTextContentAllocator ?.apply { preTextContentAllocator() }
     Text(text)
     afterTextContentAllocator ?.apply { afterTextContentAllocator() }
@@ -53,6 +54,7 @@ fun UploadButton(
     containerModifiers: Array<UIKitModifier> = emptyArray(),
     disabled: Boolean = false,
     buttonType: UIKitButton.Type = UIKitButton.Type.Default,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     onChange: (Event) -> Unit
 ) {
     Div(
@@ -60,6 +62,7 @@ fun UploadButton(
             classes("js-upload", "uk-form-custom")
             attr("uk-form-custom", "")
             include(*containerModifiers)
+            attributesCustomizer()
         }
     ) {
         Input(InputType.File) { onChange { onChange(it.nativeEvent) } }

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

@@ -0,0 +1,79 @@
+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.*
+
+@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/Dialog.kt

@@ -1,11 +1,12 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffectResult
-import dev.inmo.jsuikit.defaults.modifers.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.HTMLElement
+import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.*
 import org.w3c.dom.events.Event
 import kotlin.random.Random
 import kotlin.random.nextUInt
@@ -29,6 +30,7 @@ fun Dialog(
     hide: (() -> Unit)? = null,
     hidden: (() -> Unit)? = null,
     footerBuilder: (@Composable () -> Unit)? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     bodyBuilder: @Composable () -> Unit
 ) {
     Div(
@@ -37,6 +39,7 @@ fun Dialog(
             classes("uk-flex-top", "uk-modal")
             id("dialog${Random.nextUInt()}")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         Div(

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

@@ -0,0 +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
+    )
+}
+

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

@@ -1,10 +1,10 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.*
-import dev.inmo.jsuikit.defaults.utils.Milliseconds
-import org.jetbrains.compose.web.dom.ContentBuilder
-import org.jetbrains.compose.web.dom.Div
+import dev.inmo.jsuikit.buildAndAddAttribute
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Milliseconds
+import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDivElement
 
 @Composable
@@ -21,6 +21,7 @@ fun Dropdown(
     offset: Int? = null,
     animation: UIKitAnimation? = null,
     duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     contentBuilder: ContentBuilder<HTMLDivElement>
 ) {
     Div(
@@ -40,6 +41,7 @@ fun Dropdown(
             }
             classes("uk-dropdown")
             include(*modifiers)
+            attributesCustomizer()
         },
         contentBuilder
     )

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

@@ -1,21 +1,22 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
-import org.jetbrains.compose.web.dom.Div
-import org.jetbrains.compose.web.dom.ElementScope
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDivElement
 
 @Composable
 fun Flex(
     vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     filler: @Composable ElementScope<HTMLDivElement>.() -> Unit
 ) {
     Div(
         {
             classes("uk-flex")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         filler()

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

@@ -1,20 +1,21 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
-import org.jetbrains.compose.web.dom.Div
-import org.jetbrains.compose.web.dom.ElementScope
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDivElement
 
 @Composable
 fun GridColumn(
     vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
 ) {
     Div(
         {
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         builder()
@@ -28,6 +29,7 @@ fun Grid(
     parallax: Int? = null,
     marginClass: String? = null,
     firstColumnClass: String? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
 ) {
     val attrs = listOfNotNull(
@@ -41,6 +43,7 @@ fun Grid(
             attr("uk-grid", attrs.joinToString(";") { (k, v) -> "$k: $v" })
             classes("uk-grid")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         builder()

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

@@ -1,9 +1,9 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.*
-import org.jetbrains.compose.web.dom.Button
-import org.jetbrains.compose.web.dom.Span
+import dev.inmo.jsuikit.modifiers.*
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
 import org.w3c.dom.events.Event
 
 sealed class Icon(val name: String) {
@@ -204,47 +204,51 @@ sealed class Icon(val name: String) {
 
     @Composable
     operator fun invoke(
-        vararg modifier: UIKitModifier,
+        vararg modifiers: UIKitModifier,
         type: UIKitIconType = UIKitIconType.Default,
         ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
         onClick: ((Event) -> Unit)? = null
     ) {
-        if (type == UIKitIconType.Button) {
-            Button(
-                {
-                    classes("uk-icon")
-                    include(*modifier, type)
-                    attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
-                    onClick ?.let { _ ->
-                        onClick { onClick(it.nativeEvent) }
-                    }
-                }
-            )
-        } else {
-            Span(
-                {
-                    classes("uk-icon")
-                    include(*modifier, type)
-                    attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
-                    onClick ?.let { _ ->
-                        onClick { onClick(it.nativeEvent) }
-                    }
-                }
-            )
+        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()
+        }
+        when (type) {
+            UIKitIconType.Default -> Span(configurer)
+            UIKitIconType.Link -> A(href = "#", configurer)
+            UIKitIconType.Button -> Button(configurer)
         }
     }
 
+    class Custom(name: String) : Icon(name)
+
     @Composable
     fun drawAsButton(
-        vararg modifier: UIKitModifier,
+        vararg modifiers: UIKitModifier,
         ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
         onClick: ((Event) -> Unit)? = null
-    ) = invoke(*modifier, type = UIKitIconType.Button, ratio = ratio, onClick = onClick)
+    ) = invoke(*modifiers, type = UIKitIconType.Button, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
 
     @Composable
     fun drawAsIcon(
-        vararg modifier: UIKitModifier,
+        vararg modifiers: UIKitModifier,
         ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
         onClick: ((Event) -> Unit)? = null
-    ) = invoke(*modifier, type = UIKitIconType.Default, ratio = ratio, onClick = onClick)
+    ) = invoke(*modifiers, type = UIKitIconType.Default, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
+
+    @Composable
+    fun drawAsLink(
+        vararg modifiers: UIKitModifier,
+        ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+        onClick: ((Event) -> Unit)? = null
+    ) = invoke(*modifiers, type = UIKitIconType.Link, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
 }

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

@@ -0,0 +1,20 @@
+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.HTMLSpanElement
+
+@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

@@ -1,22 +1,25 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.snapshots.SnapshotStateList
-import dev.inmo.jsuikit.defaults.modifers.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLHeadingElement
 import org.w3c.dom.HTMLUListElement
 
 @Composable
 fun <T> List(
     title: String,
     data: SnapshotStateList<T>,
-    titleModifiers: Array<UIKitModifier> = emptyArray(),
+    vararg titleModifiers: UIKitModifier,
     ulModifiers: Array<UIKitModifier> = emptyArray(),
     besidesTitleAndList: (@Composable () -> Unit)? = null,
+    titleCustomizer: AttrBuilderContext<HTMLHeadingElement> = {},
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) {
-    H4({ include(*titleModifiers) }) {
+    H4({ include(*titleModifiers); titleCustomizer() }) {
         Text(title)
     }
     besidesTitleAndList ?.invoke()
@@ -24,6 +27,7 @@ fun <T> List(
         {
             classes("uk-list")
             include(*ulModifiers)
+            ulCustomizer()
         }
     ) {
         data.forEach {

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

@@ -0,0 +1,277 @@
+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
+import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.*
+
+@Composable
+fun Nav(
+    vararg modifiers: UIKitModifier,
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    dataAllocator: ContentBuilder<HTMLUListElement>
+) {
+    Ul(
+        {
+            buildAndAddAttribute("uk-nav") {
+                "multiple" to multiple ?.toString()
+                "collapsible" to collapsible ?.toString()
+                "animation" to animation
+                "duration" to duration ?.toString()
+            }
+            include(*modifiers, UIKitNav)
+            attributesCustomizer()
+        }
+    ) {
+        dataAllocator()
+    }
+}
+
+@Composable
+fun DefaultNav(
+    vararg modifiers: UIKitModifier,
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    dataAllocator: ContentBuilder<HTMLUListElement>
+) = Nav(
+    modifiers = modifiers + UIKitNav.Default,
+    multiple,
+    collapsible,
+    animation,
+    duration,
+    attributesCustomizer,
+    dataAllocator
+)
+
+@Composable
+fun PrimaryNav(
+    vararg modifiers: UIKitModifier,
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    dataAllocator: ContentBuilder<HTMLUListElement>
+) = Nav(
+    modifiers = modifiers + UIKitNav.Primary,
+    multiple,
+    collapsible,
+    animation,
+    duration,
+    attributesCustomizer,
+    dataAllocator
+)
+
+@Composable
+fun SubNav(
+    vararg modifiers: UIKitModifier,
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    dataAllocator: ContentBuilder<HTMLUListElement>
+) = Nav(
+    modifiers = modifiers + UIKitNav.SubNav,
+    multiple,
+    collapsible,
+    animation,
+    duration,
+    attributesCustomizer,
+    dataAllocator
+)
+
+@Composable
+fun <T> Nav(
+    title: String,
+    data: SnapshotStateList<T>,
+    vararg ulModifiers: UIKitModifier,
+    titleModifiers: Array<UIKitModifier> = emptyArray(),
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
+    titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
+) {
+    Ul(
+        {
+            buildAndAddAttribute("uk-nav") {
+                "multiple" to multiple ?.toString()
+                "collapsible" to collapsible ?.toString()
+                "animation" to animation
+                "duration" to duration ?.toString()
+            }
+            include(*ulModifiers, UIKitNav)
+            ulCustomizer()
+        }
+    ) {
+        NavHeader(
+            title,
+            *titleModifiers,
+            attributesCustomizer = titleCustomizer
+        )
+        besidesTitleAndList ?.let { it() }
+        data.forEach {
+            elementAllocator(it)
+        }
+    }
+}
+
+@Composable
+fun <T> DefaultNav(
+    title: String,
+    data: SnapshotStateList<T>,
+    vararg ulModifiers: UIKitModifier,
+    titleModifiers: Array<UIKitModifier> = emptyArray(),
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
+    titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
+) = Nav(
+    title,
+    data,
+    ulModifiers = ulModifiers + UIKitNav.Default,
+    titleModifiers,
+    multiple,
+    collapsible,
+    animation,
+    duration,
+    besidesTitleAndList,
+    titleCustomizer,
+    ulCustomizer,
+    elementAllocator
+)
+
+@Composable
+fun <T> PrimaryNav(
+    title: String,
+    data: SnapshotStateList<T>,
+    vararg ulModifiers: UIKitModifier,
+    titleModifiers: Array<UIKitModifier> = emptyArray(),
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
+    titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
+) = Nav(
+    title,
+    data,
+    ulModifiers = ulModifiers + UIKitNav.Primary,
+    titleModifiers,
+    multiple,
+    collapsible,
+    animation,
+    duration,
+    besidesTitleAndList,
+    titleCustomizer,
+    ulCustomizer,
+    elementAllocator
+)
+
+@Composable
+fun <T> SubNav(
+    title: String,
+    data: SnapshotStateList<T>,
+    vararg ulModifiers: UIKitModifier,
+    titleModifiers: Array<UIKitModifier> = emptyArray(),
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
+    titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
+) = Nav(
+    title,
+    data,
+    ulModifiers = ulModifiers + UIKitNav.SubNav,
+    titleModifiers,
+    multiple,
+    collapsible,
+    animation,
+    duration,
+    besidesTitleAndList,
+    titleCustomizer,
+    ulCustomizer,
+    elementAllocator
+)
+
+@Composable
+fun NavHeader(
+    text: String,
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+) {
+    Li(
+        {
+            include(*modifiers, UIKitNav.Header)
+            attributesCustomizer()
+        }
+    ) {
+        Text(text)
+    }
+}
+
+@Composable
+fun NavItemElement(
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    contentAllocator: ContentBuilder<HTMLAnchorElement>
+) {
+    Li(
+        {
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    ) {
+        A("#") {
+            contentAllocator()
+        }
+    }
+}
+
+@Composable
+fun NavElement(
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    contentAllocator: ContentBuilder<HTMLLIElement>
+) {
+    Li(
+        {
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    ) {
+        contentAllocator()
+    }
+}
+
+@Composable
+fun NavDivider(
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+) {
+    Li({ include(UIKitNav.Divider, *modifiers);attributesCustomizer() })
+}

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

@@ -1,23 +1,25 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
-import org.jetbrains.compose.web.dom.Div
-import org.jetbrains.compose.web.dom.Nav
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLElement
 
 @Composable
 fun Navbar(
-    vararg navModifiers: UIKitModifier,
     leftBuilder: NavbarNavBuilder? = null,
     centerBuilder: NavbarNavBuilder? = null,
     rightBuilder: NavbarNavBuilder? = null,
+    vararg navModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
 ) {
     Nav(
         {
             attr("uk-navbar", "")
             classes("uk-navbar-container", "uk-navbar")
             include(*navModifiers)
+            attributesCustomizer()
         }
     ) {
         leftBuilder ?.let {

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

@@ -1,11 +1,12 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.attributes.AttrsBuilder
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLLIElement
+import org.w3c.dom.HTMLUListElement
 
 interface NavbarNavElement {
     fun AttrsBuilder<HTMLLIElement>.setup() {}
@@ -29,21 +30,25 @@ interface NavbarNavElement {
 
 class NavbarNavBuilder(
     private val modifiers: Array<UIKitModifier>,
-    private val elements: List<NavbarNavElement>
+    private val elements: List<NavbarNavElement>,
+    private val attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
 ) {
     constructor(
         modifiers: Array<UIKitModifier>,
-        vararg elements: NavbarNavElement
-    ) : this(modifiers, elements.toList())
+        vararg elements: NavbarNavElement,
+        attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
+    ) : this(modifiers, elements.toList(), attributesCustomizer)
     constructor(
-        vararg elements: NavbarNavElement
-    ) : this(emptyArray(), elements.toList())
+        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 ->

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

@@ -1,15 +1,18 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.Progress
+import org.w3c.dom.HTMLProgressElement
 
 @Composable
 fun Progress(
     value: Int,
     vararg modifiers: UIKitModifier,
-    max: Int = 100
+    max: Int = 100,
+    attributesCustomizer: AttrBuilderContext<HTMLProgressElement> = {}
 ) {
     Progress(
         {
@@ -17,6 +20,7 @@ fun Progress(
             include(*modifiers)
             attr("max", max.toString())
             attr("value", value.toString())
+            attributesCustomizer()
         }
     )
 }

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

@@ -1,19 +1,23 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.*
+import dev.inmo.jsuikit.modifiers.*
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
 
 @Composable
 fun Spinner(
-    vararg modifier: UIKitModifier,
-    ratio: Float? = null
+    vararg modifiers: UIKitModifier,
+    ratio: Float? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {}
 ) {
     Div(
         {
             attr("uk-spinner", ratio ?.let { "ratio: $it" } ?: "")
             classes("uk-icon", "uk-spinner")
-            include(*modifier)
+            include(*modifiers)
+            attributesCustomizer()
         }
     )
 }

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

@@ -0,0 +1,54 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.*
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.Input
+import org.w3c.dom.HTMLInputElement
+
+@Composable
+fun <T> StandardInput(
+    type: InputType<T>,
+    state: MutableState<T>,
+    disabledState: State<Boolean>? = null,
+    placeholder: String? = null,
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+) {
+    Input(type) {
+        classes("uk-input")
+        include(*modifiers)
+
+        placeholder ?.let(::placeholder)
+
+        state.value.let {
+            when (it) {
+                is String -> value(it)
+                is Number -> value(it)
+                else -> {}
+            }
+        }
+
+        onInput { state.value = it.value }
+
+        disabledState ?.let {
+            if (it.value) {
+                disabled()
+            }
+        }
+        attributesCustomizer()
+    }
+}
+
+@Composable
+@Deprecated("Renamed", ReplaceWith("StandardInput", "dev.inmo.jsuikit.elements.StandardInput"))
+fun <T> TextField(
+    type: InputType<T>,
+    state: MutableState<T>,
+    disabledState: State<Boolean>? = null,
+    placeholder: String? = null,
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+) = StandardInput(type, state, disabledState, placeholder, modifiers = modifiers, attributesCustomizer)

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

@@ -0,0 +1,104 @@
+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 org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.*
+
+@Composable
+fun <T> DefaultTable(
+    headerBuilders: List<ContentBuilder<HTMLTableCellElement>>,
+    dataList: SnapshotStateList<T>,
+    vararg tableModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
+    headerCustomizer: AttrBuilderContext<HTMLTableSectionElement> = {},
+    headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int) -> Unit = {},
+    rowAttributes: AttrsBuilder<HTMLTableRowElement>.(t: T) -> Unit = {},
+    cellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
+    betweenHeaderAndBodyFiller: ContentBuilder<HTMLTableElement> = {},
+    cellFiller: @Composable ElementScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit
+) {
+    val headingIndexes = headerBuilders.indices
+    Table(
+        {
+            classes("uk-table")
+            include(*tableModifiers)
+            attributesCustomizer()
+        }
+    ) {
+        Thead(headerCustomizer) {
+            Tr {
+                headerBuilders.forEachIndexed { i, t ->
+                    Th(
+                        {
+                            headerCellCustomizer(i)
+                        }
+                    ) {
+                        t()
+                    }
+                }
+            }
+        }
+        betweenHeaderAndBodyFiller()
+        Tbody {
+            dataList.forEach {
+                Tr(
+                    {
+                        rowAttributes(it)
+                    }
+                ) {
+                    headingIndexes.forEach { i ->
+                        Td(
+                            {
+                                cellCustomizer(i, it)
+                            }
+                        ) {
+                            cellFiller(i, it)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun <T> DefaultTable(
+    heading: List<String>,
+    dataList: SnapshotStateList<T>,
+    vararg tableModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
+    headerCustomizer: AttrBuilderContext<HTMLTableSectionElement> = {},
+    headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, title: String) -> Unit = { _, _ -> },
+    rowAttributes: AttrsBuilder<HTMLTableRowElement>.(t: T) -> Unit = {},
+    cellCustomizer: AttrsBuilder<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: AttrsBuilder<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/modifiers/AttributeValue.kt

@@ -1,3 +1,3 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class AttributeValue(val name: String)

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

@@ -0,0 +1,4 @@
+package dev.inmo.jsuikit.modifiers
+
+inline val UIKit
+    get() = js("UIkit")

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitAlign(classnameSuffix: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf("uk-align-$classnameSuffix")

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitAnimation (name: String) : UIKitModifier, AttributeValue(name) {
     override val classes: Array<String> = arrayOf("uk-animation-$name")

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitBackground(suffix: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf("uk-background-$suffix")

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

@@ -1,7 +1,7 @@
-package dev.inmo.jsuikit.defaults.modifers
+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,6 @@ sealed class UIKitButton(suffix: String) : UIKitModifier {
         object Text : Type("text")
         object Link : Type("link")
     }
+
+    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/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/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/UIKitDropdown.kt

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitDropdown(classname: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf(classname)

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

@@ -1,7 +1,7 @@
-package dev.inmo.jsuikit.defaults.modifers
+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/UIKitGrid.kt

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitGrid(suffix: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf("uk-grid-$suffix")

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitIconType(suffix: String?) : UIKitModifier {
     override val classes: Array<String> = suffix ?.let {

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitMargin(val classname: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf(classname)

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 import org.jetbrains.compose.web.attributes.AttrsBuilder
 

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

@@ -1,10 +1,10 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitNav(classname: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf(classname)
 
-    object Accordion : UIKitNav("uk-nav-parent-icon")
-    object Subnav : UIKitNav("uk-nav-sub")
+    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")
@@ -14,4 +14,6 @@ sealed class UIKitNav(classname: String) : UIKitModifier {
     object Primary : UIKitNav("uk-nav-primary")
 
     object Center : UIKitNav("uk-nav-center")
+
+    companion object : UIKitNav("uk-nav")
 }

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitNavbar(suffix: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf("uk-navbar-$suffix")

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitPadding(suffix: String?) : UIKitModifier {
     override val classes: Array<String> = arrayOf("uk-padding${suffix ?.let { "-$it" } ?: ""}")

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitPosition(classname: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf(classname)

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitScreenSizeModifier(val name: String) {
     class UIKitScreenSizeModifierModified (
@@ -18,3 +18,5 @@ sealed class UIKitScreenSizeModifier(val name: String) {
         modifier
     )
 }
+
+fun UIKitModifier.applyWhenScreenSizeIs(size: UIKitScreenSizeModifier) = size.modify(this)

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitTable(suffix: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf("uk-table-$suffix")

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitText(suffix: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf("uk-text-$suffix")

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

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults.modifers
+package dev.inmo.jsuikit.modifiers
 
 class UIKitTooltipModifier(
     text: String,

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

@@ -0,0 +1,112 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitUtility(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Panel : UIKitUtility("uk-panel")
+
+    sealed class Float(suffix: String) : UIKitUtility("uk-float-$suffix") {
+        object Left : Float("left")
+        object Right : Float("right")
+    }
+    object Clearfix : Float("clearfix")
+
+    sealed class Overflow(suffix: String) : UIKitUtility("uk-overflow-$suffix") {
+        object Hidden : Overflow("hidden")
+        object Auto : Overflow("auto")
+    }
+
+    sealed class Resize(suffix: String?) : UIKitUtility("uk-resize${suffix ?.let { "-$it" } ?: ""}") {
+        object Vertical : Resize("vertical")
+        companion object : Resize(null)
+    }
+
+    sealed class Display(suffix: String) : UIKitUtility("uk-display-$suffix") {
+        object Block : Display("block")
+        sealed class Inline(suffix: String?) : Display("inline${suffix ?.let { "-$it" } ?: ""}") {
+            object Block : Inline("block")
+            companion object : Inline(null)
+        }
+    }
+
+    sealed class Inline(suffix: String?) : UIKitUtility("uk-inline${suffix ?.let { "-$it" } ?: ""}") {
+        object Clip : Inline("clip")
+        companion object : Inline(null)
+    }
+
+    sealed class Responsive(suffix: String) : UIKitUtility("uk-responsive-$suffix") {
+        object Width : Responsive("width")
+        object Height : Responsive("height")
+    }
+    object PreserveWidth : UIKitUtility("uk-preserve-width")
+
+    sealed class Border(suffix: String) : UIKitUtility("uk-border-$suffix") {
+        object Rounded : Border("rounded")
+        object Circle : Border("circle")
+        object Pill : Border("pill")
+    }
+
+    sealed class BoxShadow(suffix: String) : UIKitUtility("uk-box-shadow-$suffix") {
+        object Small : BoxShadow("small")
+        object Medium : BoxShadow("medium")
+        object Large : BoxShadow("large")
+        object XLarge : BoxShadow("xlarge")
+
+        object Bottom : BoxShadow("bottom")
+
+        sealed class Hover(suffix: String) : BoxShadow("hover-$suffix") {
+            object Small : Hover("small")
+            object Medium : Hover("medium")
+            object Large : Hover("large")
+            object XLarge : Hover("xlarge")
+        }
+    }
+
+    object DropCap : UIKitUtility("uk-dropcap")
+
+    object Logo : UIKitUtility("uk-logo")
+
+    sealed class Blend(suffix: String) : UIKitUtility("uk-blend-$suffix") {
+        object Multiply : Blend("multiply")
+        object Screen : Blend("screen")
+        object Overlay : Blend("overlay")
+        object Darken : Blend("darken")
+        object Lighten : Blend("lighten")
+        sealed class Color(suffix: String?) : Blend("color${suffix ?.let { "-$it" } ?: ""}") {
+            object Dodge : Color("dodge")
+            object Burn : Color("burn")
+            companion object : Color(null)
+        }
+        object HardLight : Blend("hard-light")
+        object SoftLight : Blend("soft-light")
+        object Difference : Blend("difference")
+        object Exclusion : Blend("exclusion")
+        object Hue : Blend("hue")
+        object Saturation : Blend("saturation")
+        object Luminosity : Blend("luminosity")
+    }
+
+    sealed class Transform(suffix: String) : UIKitUtility("uk-transform-$suffix") {
+        object Center : Transform("center")
+        sealed class Origin(suffix: String) : Transform("origin-$suffix") {
+            sealed class Top(suffix: String) : Origin("top-$suffix") {
+                object Left : Top("left")
+                object Center : Top("center")
+                object Right : Top("right")
+            }
+            sealed class Center(suffix: String) : Origin("center-$suffix") {
+                object Left : Center("left")
+                object Right : Center("right")
+            }
+            sealed class Bottom(suffix: String) : Origin("bottom-$suffix") {
+                object Left : Bottom("left")
+                object Center : Bottom("center")
+                object Right : Bottom("right")
+            }
+        }
+    }
+
+    object Disabled : UIKitUtility("uk-disabled")
+    object Drag : UIKitUtility("uk-drag")
+    object Active : UIKitUtility("uk-active")
+}

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

@@ -0,0 +1,82 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitWidth(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Auto : UIKitWidth("uk-width-auto")
+    object Expand : UIKitWidth("uk-width-expand")
+    object Full : UIKitWidth("uk-width-1-1")
+
+    object Half : UIKitWidth("uk-width-1-2")
+
+    object OneThird : UIKitWidth("uk-width-1-3")
+    object TwoThird : UIKitWidth("uk-width-2-3")
+
+    object OneFourth : UIKitWidth("uk-width-1-4")
+    object ThreeFourth : UIKitWidth("uk-width-3-4")
+
+    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("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-fixed-$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/utils/AttributesCollection.kt

@@ -0,0 +1,26 @@
+package dev.inmo.jsuikit.utils
+
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.attributes.AttrsBuilder
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
+
+class AttributesCollection<T : Element> (
+    private vararg val modifiers: UIKitModifier,
+    private val attrs: AttrBuilderContext<T> = {}
+) {
+    val builder: AttrBuilderContext<T> = {
+        include(*modifiers)
+        attrs()
+    }
+
+    companion object {
+        val Empty = Attrs<Element>()
+
+        @Suppress("UNCHECKED_CAST")
+        fun <T : Element> empty() = Empty as Attrs<T>
+    }
+}
+
+typealias Attrs<T> = AttributesCollection<T>

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

@@ -0,0 +1,3 @@
+package dev.inmo.jsuikit.utils
+
+typealias Milliseconds = Long

src/main/kotlin/dev/inmo/jsuikit/defaults/Divider.kt

@@ -1,7 +0,0 @@
-package dev.inmo.jsuikit.defaults
-
-import androidx.compose.runtime.Composable
-import org.jetbrains.compose.web.dom.Hr
-
-@Composable
-fun Divider() = Hr({ classes("uk-divider-icon") })

src/main/kotlin/dev/inmo/jsuikit/defaults/Labels.kt

@@ -1,39 +0,0 @@
-package dev.inmo.jsuikit.defaults
-
-import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
-import org.jetbrains.compose.web.dom.Span
-import org.jetbrains.compose.web.dom.Text
-
-sealed interface Label {
-    val suffix: String
-
-    @Composable
-    operator fun invoke(
-        text: String,
-        vararg modifiers: UIKitModifier
-    ) = Span(
-        {
-            classes("uk-label", "uk-label-$suffix")
-            include(*modifiers)
-        }
-    ) {
-        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"
-    }
-}

src/main/kotlin/dev/inmo/jsuikit/defaults/Nav.kt

@@ -1,49 +0,0 @@
-package dev.inmo.jsuikit.defaults
-
-import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.*
-import dev.inmo.jsuikit.defaults.utils.Milliseconds
-import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.HTMLLIElement
-import org.w3c.dom.HTMLUListElement
-
-@Composable
-fun Nav(
-    vararg modifiers: UIKitModifier,
-    multiple: Boolean? = null,
-    collapsible: Boolean? = null,
-    animation: UIKitAnimation? = null,
-    duration: Milliseconds? = null,
-    dataAllocator: ContentBuilder<HTMLUListElement>
-) {
-    Ul(
-        {
-            buildAndAddAttribute("uk-nav") {
-                "multiple" to multiple ?.toString()
-                "collapsible" to collapsible ?.toString()
-                "animation" to animation
-                "duration" to duration ?.toString()
-            }
-            classes("uk-nav")
-            include(*modifiers)
-        }
-    ) {
-        dataAllocator()
-    }
-}
-
-@Composable
-fun NavElement(
-    vararg modifiers: UIKitModifier,
-    attributesAllocator: (AttrBuilderContext<HTMLLIElement>)? = null,
-    contentAllocator: ContentBuilder<HTMLLIElement>
-) {
-    Li(
-        {
-            attributesAllocator ?.apply { attributesAllocator() }
-            include(*modifiers)
-        }
-    ) {
-        contentAllocator()
-    }
-}

src/main/kotlin/dev/inmo/jsuikit/defaults/Table.kt

@@ -1,47 +0,0 @@
-package dev.inmo.jsuikit.defaults
-
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.snapshots.SnapshotStateList
-import dev.inmo.jsuikit.defaults.modifers.*
-import org.jetbrains.compose.web.dom.*
-
-@Composable
-fun <T> DefaultTable(
-    heading: List<String>,
-    dataList: SnapshotStateList<T>,
-    vararg tableModifiers: UIKitModifier,
-    cellFiller: @Composable (i: Int, t: T) -> Unit
-) {
-    val headingIndexes = heading.indices
-    Table(
-        {
-            classes("uk-table")
-            include(*tableModifiers)
-        }
-    ) {
-        Thead {
-            Tr {
-                heading.forEach {
-                    Th(
-                        {
-                            include(UIKitExtension.TextTransformUnset)
-                        }
-                    ) {
-                        Text(it)
-                    }
-                }
-            }
-        }
-        Tbody {
-            dataList.forEach {
-                Tr {
-                    headingIndexes.forEach { i ->
-                        Td {
-                            cellFiller(i, it)
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

src/main/kotlin/dev/inmo/jsuikit/defaults/TextField.kt

@@ -1,30 +0,0 @@
-package dev.inmo.jsuikit.defaults
-
-import androidx.compose.runtime.*
-import dev.inmo.jsuikit.defaults.modifers.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
-import org.jetbrains.compose.web.attributes.*
-import org.jetbrains.compose.web.dom.Input
-
-@Composable
-fun <T> TextField(
-    type: InputType<T>,
-    state: MutableState<T>,
-    disabledState: State<Boolean>? = null,
-    placeholder: String? = null,
-    vararg modifiers: UIKitModifier
-) {
-    Input(type) {
-        classes("uk-input")
-        include(*modifiers)
-
-        placeholder ?.let(::placeholder)
-
-        onChange { state.value = it.value }
-        disabledState ?.let {
-            if (it.value) {
-                disabled()
-            }
-        }
-    }
-}

src/main/kotlin/dev/inmo/jsuikit/defaults/modifers/UIKit.kt

@@ -1,4 +0,0 @@
-package dev.inmo.jsuikit.defaults.modifers
-
-inline val UIKit
-    get() = js("UIkit")

src/main/kotlin/dev/inmo/jsuikit/defaults/modifers/UIKitExtensions.kt

@@ -1,7 +0,0 @@
-package dev.inmo.jsuikit.defaults.modifers
-
-sealed class UIKitExtension(classname: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf(classname)
-    object TextTransformUnset : UIKitExtension("text_transform_unset")
-    object CursorPointer : UIKitExtension("cursor_pointer")
-}

src/main/kotlin/dev/inmo/jsuikit/defaults/modifers/UIKitUtility.kt

@@ -1,12 +0,0 @@
-package dev.inmo.jsuikit.defaults.modifers
-
-sealed class UIKitUtility(classname: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf(classname)
-
-    sealed class Overflow(suffix: String) : UIKitUtility("uk-overflow-$suffix") {
-        object Hidden : Overflow("hidden")
-        object Auto : Overflow("auto")
-    }
-
-    object Logo : UIKitUtility("uk-logo")
-}

src/main/kotlin/dev/inmo/jsuikit/defaults/modifers/UIKitWidth.kt

@@ -1,33 +0,0 @@
-package dev.inmo.jsuikit.defaults.modifers
-
-sealed class UIKitWidth(classname: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-width-$classname")
-
-    object Full : UIKitWidth("1-1")
-    object Expand : UIKitWidth("expand")
-
-    object Half : UIKitWidth("1-2")
-
-    object OneThird : UIKitWidth("1-3")
-    object TwoThird : UIKitWidth("2-3")
-
-    object OneFourth : UIKitWidth("1-4")
-    val TwoFourth get() = Half
-    object ThreeFourth : UIKitWidth("3-4")
-    val FourFourth get() = Full
-
-    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 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
-
-    override fun toString() = classes.first()
-}

src/main/kotlin/dev/inmo/jsuikit/defaults/utils/Milliseconds.kt

@@ -1,3 +0,0 @@
-package dev.inmo.jsuikit.defaults.utils
-
-typealias Milliseconds = Long