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,24 +26,22 @@ 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!" }
     }
 }
-}
 ```
 
 ## Formatted text
 ```rust
-fn app() -> Element {
 let x = 69;
+
 rsx! {
     text { "the number is {x}, Nice!" }
 }
-}
 ```
 > :::info You can also do expressions after the string
 ```rust
@@ -51,29 +50,24 @@ text { "the number is {}, Nice!", x }
 
 ## For loops
 ```rust
-fn app() -> Element {
 rsx! {
     for (i in 0..5) { // () are required
         text { "{i}" }
     }
 }
-}
 ```
 
 ## 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" }
 }
-}
 ```
 
 ## 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) {
@@ -81,13 +75,11 @@ 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();
 
 rsx! {
@@ -98,14 +90,12 @@ fn app() -> Element {
         "Current count: {count}"
     }
 }
-}
 ```
 > :::info you can add multiple decedents by separating them via `,` like: @var1, var2, var3
 
 ## 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
 
 rsx! {
@@ -113,13 +103,11 @@ fn app() -> Element {
         static "Current count: {count}"
     }
 }
-}
 ```
 
 ## Instructions
 Add an instruction by putting a `@` before it, like this:
 ```rust
-pub fn app() -> Element {
 rsx! {
     @SetStyle(css! { // the SetStyle instruction
         "title": {
@@ -129,5 +117,13 @@ pub fn app() -> Element {
 
     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
+            red {
-```rust
-fn styles() -> Css {
-    css! {
-        "my_btn" { // style by classname
                 color: Red,
             }
 
-        // Style by state
+            green-hover: "hover" {
-        "my_btn": "clicked" { // When the element state is clicked
+                color: Green,
-            color: Blue,
             }
+        })
+
+        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,
 }
 ```