Updated the docs

docs/index.md

@@ -14,10 +14,11 @@ cargo add osui
 use osui::prelude::*;
 
 fn main() {
-    launch!(app());
+    launch!(App);
 }
 
-fn app() -> Element {
+#[component]
+fn App() -> Element {
     rsx! {
         text { "Hello, World!" }
     }
@@ -30,10 +31,11 @@ This app uses state management and a function using the state as a dependent
 use osui::prelude::*;
 
 fn main() {
-    launch!(app());
+    launch!(App);
 }
 
-fn app() -> Element {
+#[component]
+fn App() -> Element {
     let count = State::new(0);
 
     rsx! {

docs/references/a_rsx.md

@@ -4,7 +4,8 @@ title: RSX
 
 This macro is the recommended way to describe a ui, it is a div that holds multiple elements
 ```rust
-fn app() -> Element {
+#[component]
+fn App() -> Element {
     rsx! {
         button { "click me" }
         text { "This is some text" }
@@ -25,23 +26,21 @@ fn app() -> Element {
 ## Child values
 If you want to add more children to values then just simply express it like a `rsx!`
 ```rust
-fn app() -> Element {
-    let x = 69;
-    rsx! {
-        div {
-            text { "the number is {x}, Nice!" }
-        }
+let x = 69;
+
+rsx! {
+    div {
+        text { "the number is {x}, Nice!" }
     }
 }
 ```
 
 ## Formatted text
 ```rust
-fn app() -> Element {
-    let x = 69;
-    rsx! {
-        text { "the number is {x}, Nice!" }
-    }
+let x = 69;
+
+rsx! {
+    text { "the number is {x}, Nice!" }
 }
 ```
 > :::info You can also do expressions after the string
@@ -51,11 +50,9 @@ text { "the number is {}, Nice!", x }
 
 ## For loops
 ```rust
-fn app() -> Element {
-    rsx! {
-        for (i in 0..5) { // () are required
-            text { "{i}" }
-        }
+rsx! {
+    for (i in 0..5) { // () are required
+        text { "{i}" }
     }
 }
 ```
@@ -63,22 +60,18 @@ fn app() -> Element {
 ## Attribute
 You can change the element's struct fields by just providing some attributes before the children
 ```rust
-fn app() -> Element {
-    rsx! {
-        text { class: "my_text" }
-    }
+rsx! {
+    text { class: "my_text" }
 }
 ```
 
 ## Handler functions
 Instead of closures which are tricky to work with on structs, We use `Handler`, It's basically a closure wrapped with a `Arc<Mutex<T>>`
 ```rust
-fn app() -> Element {
-    rsx! {
-        button {
-            on_click: fn(btn: &mut Button, event, document) {
-                // do something
-            }
+rsx! {
+    button {
+        on_click: fn(btn: &mut Button, event, document) {
+            // do something
         }
     }
 }
@@ -87,16 +80,14 @@ fn app() -> Element {
 ## Handler functions (with dependents)
 If you have a `State<T>` and want to use it, you have to put a @ before the code block like this
 ```rust
-fn app() -> Element {
-    let count = State::new();
+let count = State::new();
 
-    rsx! {
-        button {
-            on_click: fn(btn: &mut Button, event, document) @count {
-                let count = count.use_state(); // locks count so it can be used
-            },
-            "Current count: {count}"
-        }
+rsx! {
+    button {
+        on_click: fn(btn: &mut Button, event, document) @count {
+            let count = count.use_state(); // locks count so it can be used
+        },
+        "Current count: {count}"
     }
 }
 ```
@@ -105,13 +96,11 @@ fn app() -> Element {
 ## Static text
 If your text doesn't use variables that will change you can put `static` right before the text to signal that it's static.
 ```rust
-fn app() -> Element {
-    let count = 69; // count won't change since it's not mutable
+let count = 69; // count won't change since it's not mutable
 
-    rsx! {
-        text {
-            static "Current count: {count}"
-        }
+rsx! {
+    text {
+        static "Current count: {count}"
     }
 }
 ```
@@ -119,15 +108,22 @@ fn app() -> Element {
 ## Instructions
 Add an instruction by putting a `@` before it, like this:
 ```rust
-pub fn app() -> Element {
-    rsx! {
-        @SetStyle(css! { // the SetStyle instruction
-            "title": {
-                color: Green,
-            }
-        })
+rsx! {
+    @SetStyle(css! { // the SetStyle instruction
+        "title": {
+            color: Green,
+        }
+    })
 
-        text { class: "title", static "Hello world!" }
-    }
+    text { class: "title", static "Hello world!" }
 }
 ```
+
+# Ghost elements
+With a `div` you can use tab (or shift+tab) to go through components, But sometimes an element doesn't really do anything, So to skip over the element you can use the ghost syntax `%`. This makes it so that the element is not selectable.
+```rust
+rsx! {
+    %text { "This is a ghost title!!!!" }
+
+    button { "Click me!" }
+}

docs/references/b_handler.md

@@ -24,7 +24,8 @@ rsx! {
 ### With dependents
 If you have a `State<T>` and want to use it in a `fn()`, Pub a @ before the code block like this
 ```rust
-pub fn app() -> Element {
+#[component]
+pub fn App() -> Element {
     let count = State::new(0);
     rsx! {
         button {

docs/references/css.md

@@ -7,25 +7,25 @@ Along with the `Css` type, This macro provides styling for multiple elements by
 ## Example
 In this case we will make a button with the classname `my_btn`. And set `styling`
 ```rust
-fn app() -> Element {
+#[component]
+fn App() -> Element {
     rsx! {
-        button { class: "my_btn", "Click me!" }
-    }
-}
-```
+        @SetStyle(css! {
+            blue-outline {
+                outline: true,
+                outline_color: Blue,
+            }
 
-## Style by classname
-```rust
-fn styles() -> Css {
-    css! {
-        "my_btn" { // style by classname
-            color: Red,
-        }
+            red {
+                color: Red,
+            }
 
-        // Style by state
-        "my_btn": "clicked" { // When the element state is clicked
-            color: Blue,
-        }
+            green-hover: "hover" {
+                color: Green,
+            }
+        })
+
+        button { class: "red blue-outline green-hover", "Click me!" }
     }
 }
 ```
@@ -33,7 +33,7 @@ fn styles() -> Css {
 ## `hover`
 The `hover` state is on every element but only if it's focused/hovered.
 ```rust
-"my_btn": "clicked" {
+"my_btn": "hover" {
     color: Green,
 }
 ```