add attributes customizers lambdas to all elements and temporarily change signatures with modifiers from varargs to arrays

0.0.4

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 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

build.gradle

@@ -10,6 +10,7 @@ buildscript {
         classpath libs.buildscript.kt.gradle
         classpath libs.buildscript.kt.serialization
         classpath libs.buildscript.jb.dokka
+        classpath libs.buildscript.gh.release
     }
 }
 

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,5 @@ android.enableJetifier=true
 # Project data
 
 group=dev.inmo
-version=0.0.1
+version=0.0.5
 

gradle/libs.versions.toml

@@ -14,6 +14,7 @@ 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]
 

settings.gradle

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

src/main/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/main/kotlin/dev/inmo/jsuikit/defaults/Flex.kt

@@ -1,23 +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.Div
-import org.jetbrains.compose.web.dom.ElementScope
-import org.w3c.dom.HTMLDivElement
-
-@Composable
-fun Flex(
-    vararg modifiers: UIKitModifier,
-    filler: @Composable ElementScope<HTMLDivElement>.() -> Unit
-) {
-    Div(
-        {
-            classes("uk-flex")
-            include(*modifiers)
-        }
-    ) {
-        filler()
-    }
-}

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

@@ -1,22 +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.Progress
-
-@Composable
-fun Progress(
-    value: Int,
-    vararg modifiers: UIKitModifier,
-    max: Int = 100
-) {
-    Progress(
-        {
-            classes("uk-progress")
-            include(*modifiers)
-            attr("max", max.toString())
-            attr("value", value.toString())
-        }
-    )
-}

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

@@ -1,22 +0,0 @@
-package dev.inmo.jsuikit.defaults
-
-import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.defaults.modifers.*
-import org.jetbrains.compose.web.dom.Div
-
-@Composable
-fun Spinner(
-    vararg modifier: UIKitModifier,
-    ratio: Float? = null
-) {
-    Div(
-        {
-            attr("uk-spinner", ratio ?.let { "ratio: $it" } ?: "")
-            classes("uk-icon", "uk-spinner")
-            include(*modifier)
-        }
-    )
-}
-
-@Composable
-fun DefaultSpinner() = Spinner(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Center)

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/utils/Milliseconds.kt

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

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

@@ -1,20 +1,22 @@
-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,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     disabled: Boolean = false,
     buttonType: UIKitButton.Type = UIKitButton.Type.Default,
     onClick: ((SyntheticMouseEvent) -> Unit)? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLButtonElement> = {},
     contentAllocator: ContentBuilder<HTMLButtonElement>
 ) {
     Button(
@@ -25,6 +27,7 @@ fun DefaultButton(
             if (disabled) {
                 disabled()
             }
+            attributesCustomizer()
         }
     ) {
         contentAllocator()
@@ -34,13 +37,14 @@ fun DefaultButton(
 @Composable
 fun DefaultButton(
     text: String,
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     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, buttonType = buttonType, onClick = onClick, attributesCustomizer = attributesCustomizer) {
     preTextContentAllocator ?.apply { preTextContentAllocator() }
     Text(text)
     afterTextContentAllocator ?.apply { afterTextContentAllocator() }
@@ -49,10 +53,11 @@ fun DefaultButton(
 @Composable
 fun UploadButton(
     text: String,
-    vararg buttonModifiers: UIKitModifier,
+    buttonModifiers: Array<UIKitModifier> = emptyArray(),
     containerModifiers: Array<UIKitModifier> = emptyArray(),
     disabled: Boolean = false,
     buttonType: UIKitButton.Type = UIKitButton.Type.Default,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     onChange: (Event) -> Unit
 ) {
     Div(
@@ -60,6 +65,7 @@ fun UploadButton(
             classes("js-upload", "uk-form-custom")
             attr("uk-form-custom", "")
             include(*containerModifiers)
+            attributesCustomizer()
         }
     ) {
         Input(InputType.File) { onChange { onChange(it.nativeEvent) } }

src/main/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
@@ -25,10 +26,11 @@ private class DialogDisposableEffectResult(
 @Composable
 fun Dialog(
     title: String? = null,
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     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/main/kotlin/dev/inmo/jsuikit/elements/Divider.kt

@@ -1,4 +1,4 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.dom.Hr

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

@@ -1,15 +1,15 @@
-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
 fun Dropdown(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     toggle: String? = null,
     pos: UIKitDropdown.Position? = null,
     mode: UIKitDropdown.Mode? = null,
@@ -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/main/kotlin/dev/inmo/jsuikit/elements/Flex.kt

@@ -0,0 +1,24 @@
+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.dom.*
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Flex(
+    modifiers: Array<UIKitModifier> = emptyArray(),
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    filler: @Composable ElementScope<HTMLDivElement>.() -> Unit
+) {
+    Div(
+        {
+            classes("uk-flex")
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    ) {
+        filler()
+    }
+}

src/main/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,
+    modifiers: Array<UIKitModifier> = emptyArray(),
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
 ) {
     Div(
         {
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         builder()
@@ -23,11 +24,12 @@ fun GridColumn(
 
 @Composable
 fun Grid(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     masonry: Boolean = false,
     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/main/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,41 @@ sealed class Icon(val name: String) {
 
     @Composable
     operator fun invoke(
-        vararg modifier: UIKitModifier,
+        modifiers: Array<UIKitModifier> = emptyArray(),
         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(
-                {
-                    classes("uk-icon")
-                    include(*modifier, type)
-                    attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
-                    onClick ?.let { _ ->
-                        onClick { onClick(it.nativeEvent) }
-                    }
-                }
-            )
+            Button(configurer)
         } 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) }
-                    }
-                }
-            )
+            Span(configurer)
         }
     }
 
     @Composable
     fun drawAsButton(
-        vararg modifier: UIKitModifier,
+        modifiers: Array<UIKitModifier> = emptyArray(),
         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,
+        modifiers: Array<UIKitModifier> = emptyArray(),
         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)
 }

src/main/kotlin/dev/inmo/jsuikit/elements/Labels.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.UIKitModifier
-import dev.inmo.jsuikit.defaults.modifers.include
-import org.jetbrains.compose.web.dom.Span
-import org.jetbrains.compose.web.dom.Text
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLSpanElement
 
 sealed interface Label {
     val suffix: String
@@ -12,11 +12,13 @@ sealed interface Label {
     @Composable
     operator fun invoke(
         text: String,
-        vararg modifiers: UIKitModifier
+        modifiers: Array<UIKitModifier> = emptyArray(),
+        attributesCustomizer: AttrBuilderContext<HTMLSpanElement> = {},
     ) = Span(
         {
             classes("uk-label", "uk-label-$suffix")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         Text(text)

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

@@ -1,10 +1,11 @@
-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
@@ -12,11 +13,13 @@ fun <T> List(
     title: String,
     data: SnapshotStateList<T>,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
+    titleCustomizer: AttrBuilderContext<HTMLHeadingElement> = {},
     ulModifiers: Array<UIKitModifier> = emptyArray(),
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     besidesTitleAndList: (@Composable () -> Unit)? = null,
     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/main/kotlin/dev/inmo/jsuikit/elements/Nav.kt

@@ -1,19 +1,21 @@
-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 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.HTMLLIElement
 import org.w3c.dom.HTMLUListElement
 
 @Composable
 fun Nav(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
     collapsible: Boolean? = null,
     animation: UIKitAnimation? = null,
     duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     dataAllocator: ContentBuilder<HTMLUListElement>
 ) {
     Ul(
@@ -26,6 +28,7 @@ fun Nav(
             }
             classes("uk-nav")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         dataAllocator()
@@ -34,14 +37,14 @@ fun Nav(
 
 @Composable
 fun NavElement(
-    vararg modifiers: UIKitModifier,
-    attributesAllocator: (AttrBuilderContext<HTMLLIElement>)? = null,
+    modifiers: Array<UIKitModifier> = emptyArray(),
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
     contentAllocator: ContentBuilder<HTMLLIElement>
 ) {
     Li(
         {
-            attributesAllocator ?.apply { attributesAllocator() }
             include(*modifiers)
+            attributesCustomizer
         }
     ) {
         contentAllocator()

src/main/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,
+    navModifiers: Array<UIKitModifier> = emptyArray(),
+    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
 ) {
     Nav(
         {
             attr("uk-navbar", "")
             classes("uk-navbar-container", "uk-navbar")
             include(*navModifiers)
+            attributesCustomizer()
         }
     ) {
         leftBuilder ?.let {

src/main/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/main/kotlin/dev/inmo/jsuikit/elements/Progress.kt

@@ -0,0 +1,26 @@
+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.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.Progress
+import org.w3c.dom.HTMLProgressElement
+
+@Composable
+fun Progress(
+    value: Int,
+    modifiers: Array<UIKitModifier> = emptyArray(),
+    max: Int = 100,
+    attributesCustomizer: AttrBuilderContext<HTMLProgressElement> = {}
+) {
+    Progress(
+        {
+            classes("uk-progress")
+            include(*modifiers)
+            attr("max", max.toString())
+            attr("value", value.toString())
+            attributesCustomizer()
+        }
+    )
+}

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

@@ -0,0 +1,28 @@
+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.Div
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Spinner(
+    modifiers: Array<UIKitModifier> = emptyArray(),
+    ratio: Float? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {}
+) {
+    Div(
+        {
+            attr("uk-spinner", ratio ?.let { "ratio: $it" } ?: "")
+            classes("uk-icon", "uk-spinner")
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    )
+}
+
+@Composable
+fun DefaultSpinner() = Spinner(
+    arrayOf(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Center)
+)

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

@@ -1,15 +1,18 @@
-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.*
+import dev.inmo.jsuikit.modifiers.*
 import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLProgressElement
+import org.w3c.dom.HTMLTableElement
 
 @Composable
 fun <T> DefaultTable(
     heading: List<String>,
     dataList: SnapshotStateList<T>,
-    vararg tableModifiers: UIKitModifier,
+    tableModifiers: Array<UIKitModifier> = emptyArray(),
+    attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
     cellFiller: @Composable (i: Int, t: T) -> Unit
 ) {
     val headingIndexes = heading.indices
@@ -17,6 +20,7 @@ fun <T> DefaultTable(
         {
             classes("uk-table")
             include(*tableModifiers)
+            attributesCustomizer()
         }
     ) {
         Thead {

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

@@ -1,10 +1,12 @@
-package dev.inmo.jsuikit.defaults
+package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.*
-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.*
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.Input
+import org.w3c.dom.HTMLInputElement
 
 @Composable
 fun <T> TextField(
@@ -12,7 +14,8 @@ fun <T> TextField(
     state: MutableState<T>,
     disabledState: State<Boolean>? = null,
     placeholder: String? = null,
-    vararg modifiers: UIKitModifier
+    attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+    modifiers: Array<UIKitModifier> = emptyArray()
 ) {
     Input(type) {
         classes("uk-input")
@@ -26,5 +29,6 @@ fun <T> TextField(
                 disabled()
             }
         }
+        attributesCustomizer()
     }
 }

src/main/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/main/kotlin/dev/inmo/jsuikit/modifiers/UIKit.kt

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

src/main/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/main/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/main/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/main/kotlin/dev/inmo/jsuikit/modifiers/UIKitButton.kt

@@ -1,4 +1,4 @@
-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")

src/main/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/main/kotlin/dev/inmo/jsuikit/modifiers/UIKitExtensions.kt

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

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

@@ -1,4 +1,4 @@
-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")

src/main/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/main/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/main/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/main/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/main/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt

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

src/main/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/main/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/main/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/main/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 (

src/main/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/main/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/main/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/main/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt

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

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

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

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

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