diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7851798e..4f764eda 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,9 +1,14 @@ name: CI on: + workflow_dispatch: pull_request: paths: ["demo/**", "demo_markdown/**", "thaw/**"] branches: - main + push: + paths: ["demo/**", "demo_markdown/**", "thaw/**"] + branches: + - thaw/v0.2 jobs: stable: @@ -62,8 +67,11 @@ jobs: uses: jetli/trunk-action@v0.4.0 with: version: "latest" + - name: Install Cargo BInstall + uses: cargo-bins/cargo-binstall@main + - name: Install Cargo Leptos + run: cargo binstall cargo-leptos -y - name: Build run: | cd ./examples/ssr_axum - cargo install --locked cargo-leptos cargo leptos build --release diff --git a/CHANGELOG.md b/CHANGELOG.md index 1852b534..1e25ae8b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,30 @@ +## [0.2.0-beta](https://github.com/thaw-ui/thaw/compare/v0.2.0-alpha...v0.2.0-beta) (2024-02-07) + +### Breaking Changes + +* `ColorPicker` changes the value type to Color. +* Remove re-export of chrono. + +### Features + +* `Drawer` adds z_index and mount prop. + +## [0.2.0-alpha](https://github.com/thaw-ui/thaw/compare/v0.1.10...v0.2.0-alpha) (2024-02-01) + +### Breaking Changes + +* Remove the default feature of csr. +* `ButtonVariant::Solid` is changed to `ButtonVariant::Outlined`. +* Change icondata to icondata_core. +* Rewrite `Code` component. +* Update leptos to v0.6.5. + +### Features + +* Change `RwSignal` to `Model`. +* Change `#[prop(optional)] T` to `#[prop(optional)] OptionalProp`. +* `Checkbox` children can be empty. + ## [0.1.10](https://github.com/thaw-ui/thaw/compare/v0.1.9...v0.1.10) (2024-01-31) ### Features diff --git a/demo/Cargo.toml b/demo/Cargo.toml index 9cd1532e..45cd7ef2 100644 --- a/demo/Cargo.toml +++ b/demo/Cargo.toml @@ -7,20 +7,15 @@ edition = "2021" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -leptos = { version = "0.5.7" } -leptos_meta = { version = "0.5.7" } -leptos_router = { version = "0.5.7" } -leptos_devtools = { version = "0.0.1", optional = true} -thaw = { path = "../thaw", default-features = false } -icondata = { version = "0.1.0", features = [ - "AiCloseOutlined", - "AiCheckOutlined", - "AiGithubOutlined", - "AiUserOutlined", - "AiSearchOutlined", - "AiUnorderedListOutlined" -] } +leptos = { version = "0.6.5" } +leptos_meta = { version = "0.6.5" } +leptos_router = { version = "0.6.5" } +leptos_devtools = { version = "0.0.1", optional = true } +thaw = { path = "../thaw" } demo_markdown = { path = "../demo_markdown" } +icondata = "0.3.0" +palette = "0.7.4" +chrono = "0.4.33" [features] default = ["csr"] @@ -41,4 +36,4 @@ nightly = ["leptos/nightly", "leptos_meta/nightly", "leptos_router/nightly"] opt-level = 1 [profile.dev.package."*"] -opt-level = 3 \ No newline at end of file +opt-level = 3 diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs index 82d1d7be..bce1da24 100644 --- a/demo/src/components/demo.rs +++ b/demo/src/components/demo.rs @@ -42,7 +42,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView { let content_class = create_memo(move |_| { theme.with(|theme| { format!( - "thaw-demo__content color-scheme--{}", + "color-scheme--{}", theme.common.color_scheme ) }) @@ -66,21 +66,17 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
{children()}
- { if is_highlight { view! { - 

+                            
                         }
                     } else {
                         view! {
-                            
-                                {html}
-                            

+                            
                         }
                     }
                 }
-            
         

     }
 }
diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index dacbb757..730c869e 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -141,14 +141,14 @@ pub fn SiteHeader() -> impl IntoView {
                     comp_ref=auto_complete_ref
                 >
                     
-                        
+                        
                     
                 
                 
                     
                         
                     
-        
+        
         
         
     
@@ -29,17 +29,17 @@ view! {
 ```rust demo
 view! {
     
-        
         
         
-        
         
-            
-            
+            
+            
+            
         
         
-            
-            
-            
+            
+            
+            
         
     
 }
@@ -129,8 +129,8 @@ view! {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| class | `MaybeSignal` | `Default::default()` | Additional classes for the button element. |
-| style | `MaybeSignal` | `Default::default()` | Button's style. |
+| class | `OptionalProp>` | `Default::default()` | Additional classes for the button element. |
+| style | `Option>` | `Default::default()` | Button's style. |
 | variant | `MaybeSignal` | `ButtonVariant::Primary` | Button's variant. |
 | color | `MaybeSignal` | `ButtonColor::Primary` | Button's color. |
 | round | `MaybeSignal` | `false` | Whether the button shows rounded corners. |
@@ -140,4 +140,11 @@ view! {
 | disabled | `MaybeSignal` | `false` | Whether the button is disabled. |
 | size | `MaybeSignal` | `ButtonSize::Medium` | Button size. |
 | on_click | `Option>` | `None` | Listen for button click events. |
-| children | `Children` |  | Button's content. |
+| children | `Option` |  | Button's content. |
+
+### ButtonGroup props
+
+| Name     | Type       | Default | Description                         |
+| -------- | ---------- | ------- | ----------------------------------- |
+| vertical | `bool`     | `false` | Directions of buttons in the group. |
+| children | `Children` |         | ButtonGroup's content.              |
diff --git a/demo_markdown/docs/calendar/mod.md b/demo_markdown/docs/calendar/mod.md
index 55c34db4..d5a0c09b 100644
--- a/demo_markdown/docs/calendar/mod.md
+++ b/demo_markdown/docs/calendar/mod.md
@@ -1,7 +1,7 @@
 # Calendar
 
 ```rust demo
-use thaw::chrono::prelude::*;
+use chrono::prelude::*;
 let value = create_rw_signal(Some(Local::now().date_naive()));
 
 view! {
@@ -11,7 +11,7 @@ view! {
 
 ### Calendar Props
 
-| Name  | Type                          | Default              | Desciption                                  |
-| ----- | ----------------------------- | -------------------- | ------------------------------------------- |
-| class | `MaybeSignal`         | `Default::default()` | Addtional classes for the calendar element. |
-| value | `RwSignal>` | `Default::default()` | Set the calendar value                      |
+| Name  | Type                                | Default              | Desciption                                  |
+| ----- | ----------------------------------- | -------------------- | ------------------------------------------- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the calendar element. |
+| value | `Model>`          | `Default::default()` | Set the calendar value                      |
diff --git a/demo_markdown/docs/card/mod.md b/demo_markdown/docs/card/mod.md
index 327a30bc..8b936759 100644
--- a/demo_markdown/docs/card/mod.md
+++ b/demo_markdown/docs/card/mod.md
@@ -23,11 +23,11 @@ view! {
 
 ### Card Props
 
-| Name     | Type                  | Default              | Description                             |
-| -------- | --------------------- | -------------------- | --------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the card element. |
-| title    | `MaybeSignal` | `Default::default()` | Card title.                             |
-| children | `Children`            |                      | Card's content.                         |
+| Name     | Type                                | Default              | Description                             |
+| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()` | Addtional classes for the card element. |
+| title    | `OptionalProp>` | `Default::default()` | Card title.                             |
+| children | `Children`                          |                      | Card's content.                         |
 
 ### Card Slots
 
diff --git a/demo_markdown/docs/checkbox/mod.md b/demo_markdown/docs/checkbox/mod.md
index 679ffcd2..e1eb6fd2 100644
--- a/demo_markdown/docs/checkbox/mod.md
+++ b/demo_markdown/docs/checkbox/mod.md
@@ -5,6 +5,7 @@ let value = create_rw_signal(false);
 
 view! {
     "Click"
+    
 }
 ```
 
@@ -27,23 +28,23 @@ view! {
 
 ### Checkbox Props
 
-| Name     | Type                  | Default              | Description                                 |
-| -------- | --------------------- | -------------------- | ------------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the checkbox element. |
-| value    | `RwSignal`      | `false`              | Whether the checkbox is being checked.      |
-| children | `Children`            |                      | Checkbox's content.                         |
+| Name     | Type                                | Default              | Description                                 |
+| -------- | ----------------------------------- | -------------------- | ------------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()` | Addtional classes for the checkbox element. |
+| value    | `Model`                       | `false`              | Whether the checkbox is being checked.      |
+| children | `Children`                          |                      | Checkbox's content.                         |
 
 ### CheckboxGroup Props
 
-| Name     | Type                        | Default              | Description                           |
-| -------- | --------------------------- | -------------------- | ------------------------------------- |
-| value    | `RwSignal>` | `Default::default()` | Sets the value of the checkbox group. |
-| children | `Children`                  |                      | CheckboxGroup's content.              |
+| Name     | Type                     | Default              | Description                           |
+| -------- | ------------------------ | -------------------- | ------------------------------------- |
+| value    | `Model>` | `Default::default()` | Sets the value of the checkbox group. |
+| children | `Children`               |                      | CheckboxGroup's content.              |
 
 ### CheckboxItem Props
 
-| Name  | Type                  | Default              | Description                                             |
-| ----- | --------------------- | -------------------- | ------------------------------------------------------- |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the checkbox element.             |
-| key   | `String`              |                      | The key of the checkbox to be used in a checkbox group. |
-| label | `Option`      | `None`               | Checkbox's label.                                       |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the checkbox element. |
+| key | `String` |  | The key of the checkbox to be used in a checkbox group. |
+| label | `Option` | `None` | Checkbox's label. |
diff --git a/demo_markdown/docs/collapse/mod.md b/demo_markdown/docs/collapse/mod.md
index 119410de..2891b442 100644
--- a/demo_markdown/docs/collapse/mod.md
+++ b/demo_markdown/docs/collapse/mod.md
@@ -39,18 +39,18 @@ view! {
 
 ### Collapse Props
 
-| Name      | Type                        | Default              | Description                                 |
-| --------- | --------------------------- | -------------------- | ------------------------------------------- |
-| class     | `MaybeSignal`       | `Default::default()` | Addtional classes for the collapse element. |
-| value     | `RwSignal>` | `Default::default()` | Currently active panel.                     |
-| accordion | `bool`                      | `false`              | Only allow one panel open at a time.        |
-| children  | `Children`                  |                      | Collapse's content.                         |
+| Name      | Type                                | Default              | Description                                 |
+| --------- | ----------------------------------- | -------------------- | ------------------------------------------- |
+| class     | `OptionalProp>` | `Default::default()` | Addtional classes for the collapse element. |
+| value     | `Model>`            | `Default::default()` | Currently active panel.                     |
+| accordion | `bool`                              | `false`              | Only allow one panel open at a time.        |
+| children  | `Children`                          |                      | Collapse's content.                         |
 
 ### CollapseItem Props
 
-| Name    | Type                  | Default              | Description                                      |
-| ------- | --------------------- | -------------------- | ------------------------------------------------ |
-| class   | `MaybeSignal` | `Default::default()` | Addtional classes for the collapse item element. |
-| title   | `MaybeSignal` |                      | The title of the CollapseItem.                   |
-| key     | `MaybeSignal` |                      | The indentifier of CollapseItem.                 |
-| chilren | `Children`            |                      | CollapseItem's content.                          |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the collapse item element. |
+| title | `MaybeSignal` |  | The title of the CollapseItem. |
+| key | `MaybeSignal` |  | The indentifier of CollapseItem. |
+| chilren | `Children` |  | CollapseItem's content. |
diff --git a/demo_markdown/docs/color_picker/mod.md b/demo_markdown/docs/color_picker/mod.md
index 39b9fba0..e6975298 100644
--- a/demo_markdown/docs/color_picker/mod.md
+++ b/demo_markdown/docs/color_picker/mod.md
@@ -1,16 +1,38 @@
 # Color Picker
 
 ```rust demo
-let value = create_rw_signal(RGBA::default());
+use palette::Srgb;
+
+let value = create_rw_signal(Color::from(Srgb::new(0.0, 0.0, 0.0)));
 
 view! {
     
 }
 ```
 
-### DatePicker Props
+### Color Format
+
+Encoding formats, support RGB, HSV, HSL.
+
+```rust demo
+use palette::{Hsl, Hsv, Srgb};
+
+let rgb = create_rw_signal(Color::from(Srgb::new(0.0, 0.0, 0.0)));
+let hsv = create_rw_signal(Color::from(Hsv::new(0.0, 0.0, 0.0)));
+let hsl = create_rw_signal(Color::from(Hsl::new(0.0, 0.0, 0.0)));
+
+view! {
+    
+        
+        
+        
+    
+}
+```
+
+### ColorPicker Props
 
-| Name  | Type                  | Default              | Desciption                                      |
-| ----- | --------------------- | -------------------- | ----------------------------------------------- |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the color picker element. |
-| value | `RwSignal`      | `Default::default()` | Value of the picker.                            |
+| Name  | Type                                | Default              | Desciption                                      |
+| ----- | ----------------------------------- | -------------------- | ----------------------------------------------- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the color picker element. |
+| value | `Model`                      | `Default::default()` | Value of the picker.                            |
diff --git a/demo_markdown/docs/date_picker/mod.md b/demo_markdown/docs/date_picker/mod.md
index 3cf037ab..fb9b2649 100644
--- a/demo_markdown/docs/date_picker/mod.md
+++ b/demo_markdown/docs/date_picker/mod.md
@@ -1,7 +1,7 @@
 # Date Picker
 
 ```rust demo
-use thaw::chrono::prelude::*;
+use chrono::prelude::*;
 let value = create_rw_signal(Some(Local::now().date_naive()));
 
 view! {
@@ -13,6 +13,6 @@ view! {
 
 | Name | Type | Default | Desciption |
 | --- | --- | --- | --- |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the date picker element. |
-| value | `RwSignal>` | `Default::default()` | Set the date picker value |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the date picker element. |
+| value | `Model>` | `Default::default()` | Set the date picker value |
 | attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
diff --git a/demo_markdown/docs/divider/mod.md b/demo_markdown/docs/divider/mod.md
index d095fd82..385e2d97 100644
--- a/demo_markdown/docs/divider/mod.md
+++ b/demo_markdown/docs/divider/mod.md
@@ -10,6 +10,6 @@ view! {
 
 ### Divider Props
 
-| Name  | Type                  | Default              | Desciption                                 |
-| ----- | --------------------- | -------------------- | ------------------------------------------ |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the divider element. |
+| Name  | Type                                | Default              | Desciption                                 |
+| ----- | ----------------------------------- | -------------------- | ------------------------------------------ |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the divider element. |
diff --git a/demo_markdown/docs/drawer/mod.md b/demo_markdown/docs/drawer/mod.md
index f8e4fb74..ec0a4479 100644
--- a/demo_markdown/docs/drawer/mod.md
+++ b/demo_markdown/docs/drawer/mod.md
@@ -5,8 +5,8 @@ let show = create_rw_signal(false);
 let placement = create_rw_signal(DrawerPlacement::Top);
 
 let open = Callback::new(move |new_placement: DrawerPlacement| {
-    show.set(true);
     placement.set(new_placement);
+    show.set(true);
 });
 
 view! {
@@ -22,14 +22,31 @@ view! {
 }
 ```
 
+### Customize display area
+
+```rust demo
+let show = create_rw_signal(false);
+
+view! {
+    

+        
+        
+            "Current position"
+        
+    

+}
+```
+
 ### Drawer Props
 
-| Name      | Type                           | Default                  | Desciption                                |
-| --------- | ------------------------------ | ------------------------ | ----------------------------------------- |
-| class     | `MaybeSignal`          | `Default::default()`     | Addtional classes for the drawer element. |
-| show      | `MaybeSignal`            |                          | Whether to show drawer.                   |
-| title     | `MaybeSignal`          | `Default::default()`     | Drawer title.                             |
-| placement | `MaybeSignal` | `DrawerPlacement::Right` | Drawer placement.                         |
-| width     | `MaybeSignal`          | `520px`                  | Drawer width.                             |
-| height    | `MaybeSignal`          | `260px`                  | Drawer height.                            |
-| children  | `Children`                     |                          | Drawer content.                           |
+| Name | Type | Default | Desciption |
+| --- | --- | --- | --- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the drawer element. |
+| show | `Model` |  | Whether to show drawer. |
+| title | `OptionalProp>` | `Default::default()` | Drawer title. |
+| placement | `MaybeSignal` | `DrawerPlacement::Right` | Drawer placement. |
+| width | `MaybeSignal` | `520px` | Drawer width. |
+| height | `MaybeSignal` | `260px` | Drawer height. |
+| z_index | `MaybeSignal` | `2000` | z-index of the drawer. |
+| mount | `DrawerMount` | `DrawerMount::Body` | Container node of the drawer. |
+| children | `Children` |  | Drawer content. |
diff --git a/demo_markdown/docs/grid/mod.md b/demo_markdown/docs/grid/mod.md
index 50c99619..20d0e90d 100644
--- a/demo_markdown/docs/grid/mod.md
+++ b/demo_markdown/docs/grid/mod.md
@@ -95,17 +95,17 @@ view! {
 
 ### Grid Props
 
-| Name  | Type                  | Default              | Desciption                              |
-| ----- | --------------------- | -------------------- | --------------------------------------- |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the grid element. |
-| cols  | `MaybeSignal`    | `1`                  | Number of grids displayed.              |
-| x_gap | `MaybeSignal`    | `0`                  | Horizontal gap.                         |
-| y_gap | `MaybeSignal`    | `0`                  | Vertical gap.                           |
+| Name  | Type                                | Default              | Desciption                              |
+| ----- | ----------------------------------- | -------------------- | --------------------------------------- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the grid element. |
+| cols  | `MaybeSignal`                  | `1`                  | Number of grids displayed.              |
+| x_gap | `MaybeSignal`                  | `0`                  | Horizontal gap.                         |
+| y_gap | `MaybeSignal`                  | `0`                  | Vertical gap.                           |
 
 ### GridItem Props
 
-| Name   | Type                  | Default              | Desciption                                    |
-| ------ | --------------------- | -------------------- | --------------------------------------------- |
-| class  | `MaybeSignal` | `Default::default()` | Addtional classes for the grid item element.  |
-| column | `MaybeSignal`    | `1`                  | Number of columns this grid item will occupy. |
-| offset | `MaybeSignal`    | `0`                  | Horizontal offset.                            |
+| Name   | Type                                | Default              | Desciption                                    |
+| ------ | ----------------------------------- | -------------------- | --------------------------------------------- |
+| class  | `OptionalProp>` | `Default::default()` | Addtional classes for the grid item element.  |
+| column | `MaybeSignal`                  | `1`                  | Number of columns this grid item will occupy. |
+| offset | `MaybeSignal`                  | `0`                  | Horizontal offset.                            |
diff --git a/demo_markdown/docs/icon/mod.md b/demo_markdown/docs/icon/mod.md
index 570c9dc3..78c400aa 100644
--- a/demo_markdown/docs/icon/mod.md
+++ b/demo_markdown/docs/icon/mod.md
@@ -3,8 +3,8 @@
 ```rust demo
 view! {
     
-        
-        
+        
+        
     
 }
 ```
diff --git a/demo_markdown/docs/image/mod.md b/demo_markdown/docs/image/mod.md
index 117bd2fa..46bee1fe 100644
--- a/demo_markdown/docs/image/mod.md
+++ b/demo_markdown/docs/image/mod.md
@@ -9,12 +9,12 @@ view! {
 
 ### Image Props
 
-| Name          | Type                  | Default              | Desciption                                     |
-| ------------- | --------------------- | -------------------- | ---------------------------------------------- |
-| class         | `MaybeSignal` | `Default::default()` | Addtional classes for the image element.       |
-| src           | `MaybeSignal` | `Default::default()` | Image source.                                  |
-| alt           | `MaybeSignal` | `Default::default()` | Image alt information.                         |
-| width         | `MaybeSignal` | `Default::default()` | Image width.                                   |
-| height        | `MaybeSignal` | `Default::default()` | Image height.                                  |
-| border_radius | `MaybeSignal` | `Default::default()` | Image border radius.                           |
-| object_fit    | `MaybeSignal` | `Default::default()` | Object-fit type of the image in the container. |
+| Name | Type | Default | Desciption |
+| --- | --- | --- | --- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the image element. |
+| src | `OptionalProp>` | `Default::default()` | Image source. |
+| alt | `OptionalProp>` | `Default::default()` | Image alt information. |
+| width | `MaybeSignal` | `Default::default()` | Image width. |
+| height | `MaybeSignal` | `Default::default()` | Image height. |
+| border_radius | `MaybeSignal` | `Default::default()` | Image border radius. |
+| object_fit | `MaybeSignal` | `Default::default()` | Object-fit type of the image in the container. |
diff --git a/demo_markdown/docs/input/mod.md b/demo_markdown/docs/input/mod.md
index 730c14d2..20ba362a 100644
--- a/demo_markdown/docs/input/mod.md
+++ b/demo_markdown/docs/input/mod.md
@@ -79,7 +79,7 @@ view! {
     
         
             
-                
+                
             
         
         
@@ -87,7 +87,7 @@ view! {
         
         
             
-                
+                
             
         
     
@@ -98,10 +98,10 @@ view! {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the input element. |
-| value | `RwSignal` | `Default::default()` | Set the input value. |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the input element. |
+| value | `Model` | `Default::default()` | Set the input value. |
 | variant | `MaybeSignal` | `InputVariant::Text` | Input's variant. |
-| placeholder | `MaybeSignal` | `Default::default()` | Placeholder of input. |
+| placeholder | `OptionalProp>` | `Default::default()` | Placeholder of input. |
 | disabled | `MaybeSignal` | `false` | Whether the input is disabled. |
 | invalid | `MaybeSignal` | `false` | Whether the input is invalid. |
 | allow_value | `Option>` | `None` | Check the incoming value, if it returns false, input will not be accepted. |
@@ -125,4 +125,4 @@ view! {
 
 ### TextArea Props
 
-Removes variant and slot from Input component.
\ No newline at end of file
+Removes variant and slot from Input component.
diff --git a/demo_markdown/docs/input_number/mod.md b/demo_markdown/docs/input_number/mod.md
index c0774989..4c5e0c4a 100644
--- a/demo_markdown/docs/input_number/mod.md
+++ b/demo_markdown/docs/input_number/mod.md
@@ -36,9 +36,9 @@ view! {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the input element. |
-| value | `RwSignal` | `T::default()` | Set the input value. |
-| placeholder | `MaybeSignal` | `Default::default()` | Placeholder of input number. |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the input element. |
+| value | `Model` | `T::default()` | Set the input value. |
+| placeholder | `OptionalProp>` | `Default::default()` | Placeholder of input number. |
 | step | `MaybeSignal` |  | The number which the current value is increased or decreased on key or button press. |
 | disabled | `MaybeSignal` | `false` | Whether the input is disabled. |
 | invalid | `MaybeSignal` | `false` | Whether the input is invalid. |
@@ -53,4 +53,4 @@ view! {
 | Name  | Type        | Description              |
 | ----- | ----------- | ------------------------ |
 | focus | `Fn(&self)` | Focus the input element. |
-| blur  | `Fn(&self)` | Blur the input element.  |
\ No newline at end of file
+| blur  | `Fn(&self)` | Blur the input element.  |
diff --git a/demo_markdown/docs/layout/mod.md b/demo_markdown/docs/layout/mod.md
index 55e2e06f..76dd7ddf 100644
--- a/demo_markdown/docs/layout/mod.md
+++ b/demo_markdown/docs/layout/mod.md
@@ -35,15 +35,16 @@ view! {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the layout element. |
-| style | `MaybeSignal` | `Default::default()` | Layout's style. |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the layout element. |
+| style | `OptionalProp>` | `Default::default()` | Layout's style. |
 | position | `LayoutPosition` | `LayoutPosition::Static` | static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. |
+| has_sider | `MaybeSignal` | `false` | Whether the component has sider inside. If so it must be true. |
 | children | `Children` |  | Layout's content. |
 
 ### LayoutHeader, LayoutSider Props
 
-| Name     | Type                  | Default              | Description                                      |
-| -------- | --------------------- | -------------------- | ------------------------------------------------ |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the layout header element. |
-| style    | `MaybeSignal` | `Default::default()` | LayoutHeader's style.                            |
-| children | `Children`            |                      | LayoutHeader's content.                          |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the layout header element. |
+| style | `OptionalProp>` | `Default::default()` | LayoutHeader's style. |
+| children | `Children` |  | LayoutHeader's content. |
diff --git a/demo_markdown/docs/menu/mod.md b/demo_markdown/docs/menu/mod.md
index ad9555c9..ea2ef070 100644
--- a/demo_markdown/docs/menu/mod.md
+++ b/demo_markdown/docs/menu/mod.md
@@ -13,24 +13,24 @@ view! {
 
 ### Menu Props
 
-| Name     | Type                  | Default              | Description                             |
-| -------- | --------------------- | -------------------- | --------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the menu element. |
-| value    | `MaybeSignal` | `Default::default()` | The selected item key of the menu.      |
-| children | `Children`            |                      | Menu's content.                         |
+| Name     | Type                                | Default              | Description                             |
+| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()` | Addtional classes for the menu element. |
+| value    | `Model`                     | `Default::default()` | The selected item key of the menu.      |
+| children | `Children`                          |                      | Menu's content.                         |
 
 ### MenuGroup Props
 
-| Name     | Type                  | Default              | Description                                   |
-| -------- | --------------------- | -------------------- | --------------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the menu group element. |
-| label    | `String`              |                      | The label of the menu group.                  |
-| children | `Children`            |                      | MenuGroup's content.                          |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu group element. |
+| label | `String` |  | The label of the menu group. |
+| children | `Children` |  | MenuGroup's content. |
 
 ### MenuItem Props
 
-| Name  | Type                  | Default              | Description                                  |
-| ----- | --------------------- | -------------------- | -------------------------------------------- |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the menu item element. |
-| label | `MaybeSignal` | `Default::default()` | The label of the menu item.                  |
-| key   | `MaybeSignal` | `Default::default()` | The indentifier of the menu item.            |
+| Name  | Type                                | Default              | Description                                  |
+| ----- | ----------------------------------- | -------------------- | -------------------------------------------- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the menu item element. |
+| label | `MaybeSignal`               | `Default::default()` | The label of the menu item.                  |
+| key   | `MaybeSignal`               | `Default::default()` | The indentifier of the menu item.            |
diff --git a/demo_markdown/docs/message/mod.md b/demo_markdown/docs/message/mod.md
index 16a4263d..e7f7f429 100644
--- a/demo_markdown/docs/message/mod.md
+++ b/demo_markdown/docs/message/mod.md
@@ -35,9 +35,9 @@ view! {
 
 ### MessageProvider Props
 
-| Name      | Type                          | Default                 | Desciption                      |
-| --------- | ----------------------------- | ----------------------- | ------------------------------- |
-| placement | `MessagePlacement`            | `MessagePlacement::Top` | Position to place the messages. |
+| Name      | Type               | Default                 | Desciption                      |
+| --------- | ------------------ | ----------------------- | ------------------------------- |
+| placement | `MessagePlacement` | `MessagePlacement::Top` | Position to place the messages. |
 
 ### MessageProvider Injection Methods
 
@@ -47,7 +47,7 @@ view! {
 
 ### MessageOptions fields
 
-| Name     | Type              | Default                   | Description                                                     |
-| -------- | ----------------- | ------------------------- | --------------------------------------------------------------- |
-| duration | `Duration`        | `Duration::from_secs(3)`  | How long the message will be displayed. 0 for permanent message |
-| closable | `bool`            | `false`                   | Can the message be manually closed.                             |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| duration | `Duration` | `std::time::Duration::from_secs(3)` | How long the message will be displayed. 0 for permanent message |
+| closable | `bool` | `false` | Can the message be manually closed. |
diff --git a/demo_markdown/docs/modal/mod.md b/demo_markdown/docs/modal/mod.md
index db641494..4f7434bb 100644
--- a/demo_markdown/docs/modal/mod.md
+++ b/demo_markdown/docs/modal/mod.md
@@ -15,7 +15,7 @@ view! {
 
 | Name     | Type                  | Default              | Description            |
 | -------- | --------------------- | -------------------- | ---------------------- |
-| show     | `MaybeSignal`   |                      | Whether to show modal. |
+| show     | `Model`   |                      | Whether to show modal. |
 | title    | `MaybeSignal` | `Default::default()` | Modal title.           |
 | children | `Children`            |                      | Modal's content.       |
 
diff --git a/demo_markdown/docs/popover/mod.md b/demo_markdown/docs/popover/mod.md
index b76d6f30..614bcd3f 100644
--- a/demo_markdown/docs/popover/mod.md
+++ b/demo_markdown/docs/popover/mod.md
@@ -131,11 +131,11 @@ view! {
 
 ### Popover Props
 
-| Name      | Type                  | Default                 | Description                   |
-| --------- | --------------------- | ----------------------- | ----------------------------- |
-| class     | `MaybeSignal` | `Default::default()`    | Content class of the popover. |
-| placement | `PopoverPlacement`    | `PopoverPlacement::Top` | Popover placement.            |
-| children  | `Children`            |                         | The content inside popover.   |
+| Name      | Type                                | Default                 | Description                   |
+| --------- | ----------------------------------- | ----------------------- | ----------------------------- |
+| class     | `OptionalProp>` | `Default::default()`    | Content class of the popover. |
+| placement | `PopoverPlacement`                  | `PopoverPlacement::Top` | Popover placement.            |
+| children  | `Children`                          |                         | The content inside popover.   |
 
 ### Popover Slots
 
diff --git a/demo_markdown/docs/radio/mod.md b/demo_markdown/docs/radio/mod.md
index 9a121802..6eb9c3b6 100644
--- a/demo_markdown/docs/radio/mod.md
+++ b/demo_markdown/docs/radio/mod.md
@@ -10,8 +10,8 @@ view! {
 
 ### Radio Props
 
-| Name     | Type                  | Default              | Description                              |
-| -------- | --------------------- | -------------------- | ---------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the radio element. |
-| value    | `RwSignal`      | `false`              | Checked value.                           |
-| children | `Children`            |                      | Radio's content.                         |
+| Name     | Type                                | Default              | Description                              |
+| -------- | ----------------------------------- | -------------------- | ---------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()` | Addtional classes for the radio element. |
+| value    | `Model`                       | `false`              | Checked value.                           |
+| children | `Children`                          |                      | Radio's content.                         |
diff --git a/demo_markdown/docs/select/mod.md b/demo_markdown/docs/select/mod.md
index 93b5d4fa..25934eba 100644
--- a/demo_markdown/docs/select/mod.md
+++ b/demo_markdown/docs/select/mod.md
@@ -23,6 +23,6 @@ view! {
 
 | Name    | Type                                | Default              | Description                               |
 | ------- | ----------------------------------- | -------------------- | ----------------------------------------- |
-| class   | `MaybeSignal`               | `Default::default()` | Addtional classes for the select element. |
-| value   | `RwSignal>`               | `None`               | Checked value.                            |
+| class   | `OptionalProp>` | `Default::default()` | Addtional classes for the select element. |
+| value   | `Model>`                  | `None`               | Checked value.                            |
 | options | `MaybeSignal>>` | `vec![]`             | Options that can be selected.             |
diff --git a/demo_markdown/docs/slider/mod.md b/demo_markdown/docs/slider/mod.md
index 0e9461e6..f37522a9 100644
--- a/demo_markdown/docs/slider/mod.md
+++ b/demo_markdown/docs/slider/mod.md
@@ -40,13 +40,13 @@ view! {
 
 ### Slider Props
 
-| Name     | Type                  | Default              | Description                               |
-| -------- | --------------------- | -------------------- | ----------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the slider element. |
-| value    | `MaybeSignal`    | `Default::default()` | Value of the slider.                      |
-| max      | `MaybeSignal`    | `100`                | Max value of the slider.                  |
-| step     | `MaybeSignal`    | `Default::default()` | The step in which value is incremented.   |
-| children | `Option`    | `None`               | Slider's content.                         |
+| Name     | Type                                | Default              | Description                               |
+| -------- | ----------------------------------- | -------------------- | ----------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()` | Addtional classes for the slider element. |
+| value    | `MaybeSignal`                  | `Default::default()` | Value of the slider.                      |
+| max      | `MaybeSignal`                  | `100`                | Max value of the slider.                  |
+| step     | `MaybeSignal`                  | `Default::default()` | The step in which value is incremented.   |
+| children | `Option`                  | `None`               | Slider's content.                         |
 
 ### SliderLabel props
 
diff --git a/demo_markdown/docs/space/mod.md b/demo_markdown/docs/space/mod.md
index 6e2dfa24..5ef940af 100644
--- a/demo_markdown/docs/space/mod.md
+++ b/demo_markdown/docs/space/mod.md
@@ -41,9 +41,9 @@ view! {
 
 ### Space Props
 
-| Name     | Type                  | Default              | Description                              |
-| -------- | --------------------- | -------------------- | ---------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the space element. |
-| vertical | `bool`                | `false`              | Whether to lay out vertically.           |
-| gap      | `SpaceGap`            | `SpaceGap::Medium`   | Space's gap.                             |
-| children | `Children`            |                      | Space's content.                         |
+| Name     | Type                                | Default              | Description                              |
+| -------- | ----------------------------------- | -------------------- | ---------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()` | Addtional classes for the space element. |
+| vertical | `bool`                              | `false`              | Whether to lay out vertically.           |
+| gap      | `SpaceGap`                          | `SpaceGap::Medium`   | Space's gap.                             |
+| children | `Children`                          |                      | Space's content.                         |
diff --git a/demo_markdown/docs/spinner/mod.md b/demo_markdown/docs/spinner/mod.md
index 39af9e78..f3f2f9c2 100644
--- a/demo_markdown/docs/spinner/mod.md
+++ b/demo_markdown/docs/spinner/mod.md
@@ -21,7 +21,7 @@ view! {
 
 ### Spinner Props
 
-| Name  | Type                       | Default               | Description                                 |
-| ----- | -------------------------- | --------------------- | ------------------------------------------- |
-| class | `MaybeSignal`      | `Default::default()`  | Additional classes for the spinner element. |
-| size  | `MaybeSignal` | `SpinnerSize::Medium` | Spinner size.                               |
+| Name  | Type                                | Default               | Description                                 |
+| ----- | ----------------------------------- | --------------------- | ------------------------------------------- |
+| class | `OptionalProp>` | `Default::default()`  | Additional classes for the spinner element. |
+| size  | `MaybeSignal`          | `SpinnerSize::Medium` | Spinner size.                               |
diff --git a/demo_markdown/docs/switch/mod.md b/demo_markdown/docs/switch/mod.md
index 0ba2c23e..399d6819 100644
--- a/demo_markdown/docs/switch/mod.md
+++ b/demo_markdown/docs/switch/mod.md
@@ -10,7 +10,7 @@ view! {
 
 ### Switch Props
 
-| Name  | Type                  | Default              | Description                               |
-| ----- | --------------------- | -------------------- | ----------------------------------------- |
-| class | `MaybeSignal` | `Default::default()` | Addtional classes for the switch element. |
-| value | `RwSignal`      | `Default::default()` | Switch's value.                           |
+| Name  | Type                                | Default              | Description                               |
+| ----- | ----------------------------------- | -------------------- | ----------------------------------------- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the switch element. |
+| value | `Model`                       | `false`              | Switch's value.                           |
diff --git a/demo_markdown/docs/table/mod.md b/demo_markdown/docs/table/mod.md
index 0817bf2b..d658fe5d 100644
--- a/demo_markdown/docs/table/mod.md
+++ b/demo_markdown/docs/table/mod.md
@@ -28,10 +28,10 @@ view! {
 
 ### Table Props
 
-| Name          | Type                  | Default              | Description                                                                           |
-| ------------- | --------------------- | -------------------- | ------------------------------------------------------------------------------------- |
-| class         | `MaybeSignal` | `Default::default()` | Addtional classes for the table element.                                              |
-| style         | `MaybeSignal` | `Default::default()` | Table's style.                                                                        |
-| single_row    | `RwSignal`      | `true`               | Whether columns are not divided. If the prop is true, table cell has no border-right. |
-| single_column | `RwSignal`      | `false`              | Whether rows are not divided. If the prop is true, table cell has no border-bottom.   |
-| children      | `Children`            |                      | Table's content.                                                                      |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the table element. |
+| style | `MaybeSignal` | `Default::default()` | Table's style. |
+| single_row | `MaybeSignal` | `true` | Whether columns are not divided. If the prop is true, table cell has no border-right. |
+| single_column | `MaybeSignal` | `false` | Whether rows are not divided. If the prop is true, table cell has no border-bottom. |
+| children | `Children` |  | Table's content. |
diff --git a/demo_markdown/docs/tabs/mod.md b/demo_markdown/docs/tabs/mod.md
index 6a0d902e..fdc30dc5 100644
--- a/demo_markdown/docs/tabs/mod.md
+++ b/demo_markdown/docs/tabs/mod.md
@@ -44,20 +44,20 @@ view! {
 
 ### Tabs Props
 
-| Name     | Type                  | Default               | Description                             |
-| -------- | --------------------- | --------------------- | --------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()`  | Addtional classes for the tabs element. |
-| value    | `RwSignal`    | `TagVariant::Default` | Tabs value.                             |
-| children | `Children`            |                       | Tabs content.                           |
+| Name     | Type                                | Default              | Description                             |
+| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()` | Addtional classes for the tabs element. |
+| value    | `Model`                     | `Default::default()` | Tabs value.                             |
+| children | `Children`                          |                      | Tabs content.                           |
 
 ### Tab Props
 
-| Name     | Type                  | Default              | Description                            |
-| -------- | --------------------- | -------------------- | -------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the tab element. |
-| key      | `String`              |                      | The indentifier of the tab.            |
-| label    | `String`              | `Default::default()` | The label of the tab.                  |
-| children | `Children`            |                      | Tabs content.                          |
+| Name     | Type                                | Default              | Description                            |
+| -------- | ----------------------------------- | -------------------- | -------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()` | Addtional classes for the tab element. |
+| key      | `String`                            |                      | The indentifier of the tab.            |
+| label    | `String`                            | `Default::default()` | The label of the tab.                  |
+| children | `Children`                          |                      | Tabs content.                          |
 
 ### Tab Slots
 
diff --git a/demo_markdown/docs/tag/mod.md b/demo_markdown/docs/tag/mod.md
index 2302fb62..b2eaf624 100644
--- a/demo_markdown/docs/tag/mod.md
+++ b/demo_markdown/docs/tag/mod.md
@@ -13,8 +13,8 @@ view! {
 
 ### Tag Props
 
-| Name     | Type                      | Default               | Description                            |
-| -------- | ------------------------- | --------------------- | -------------------------------------- |
-| class    | `MaybeSignal`     | `Default::default()`  | Addtional classes for the tag element. |
-| variant  | `MaybeSignal` | `TagVariant::Default` | Tag's variant.                         |
-| children | `Children`                |                       | Tag's content.                         |
+| Name     | Type                                | Default               | Description                            |
+| -------- | ----------------------------------- | --------------------- | -------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()`  | Addtional classes for the tag element. |
+| variant  | `MaybeSignal`           | `TagVariant::Default` | Tag's variant.                         |
+| children | `Children`                          |                       | Tag's content.                         |
diff --git a/demo_markdown/docs/time_picker/mod.md b/demo_markdown/docs/time_picker/mod.md
index 7dc60bdc..e9cc65c2 100644
--- a/demo_markdown/docs/time_picker/mod.md
+++ b/demo_markdown/docs/time_picker/mod.md
@@ -1,7 +1,7 @@
 # Time Picker
 
 ```rust demo
-use thaw::chrono::prelude::*;
+use chrono::prelude::*;
 
 let value = create_rw_signal(Some(Local::now().time()));
 
@@ -12,8 +12,8 @@ view! {
 
 ## TimePicker Props
 
-| Name  | Type                             | Default              | Description                                              |
-| ----- | -------------------------------- | -------------------- | -------------------------------------------------------- |
-| class | `MaybeSignal`            | `Default::default()` | Addtional classes for the time picker element.           |
-| value | `RwSignal>`    | `Default::default()` | Set the TimePicker value.                                |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the time picker element. |
+| value | `Model>` | `Default::default()` | Set the TimePicker value. |
 | attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
diff --git a/demo_markdown/docs/typography/mod.md b/demo_markdown/docs/typography/mod.md
index 80c46255..2f4f6c28 100644
--- a/demo_markdown/docs/typography/mod.md
+++ b/demo_markdown/docs/typography/mod.md
@@ -11,8 +11,8 @@ view! {
 
 ## Text Props
 
-| Name     | Type                  | Default              | Description                             |
-| -------- | --------------------- | -------------------- | --------------------------------------- |
-| class    | `MaybeSignal` | `Default::default()` | Addtional classes for the text element. |
-| code     | `bool`                | `false`              | Use the code tag and style.             |
-| children | `Children`            |                      | Text's content.                         |
+| Name     | Type                                | Default              | Description                             |
+| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
+| class    | `OptionalProp>` | `Default::default()` | Addtional classes for the text element. |
+| code     | `bool`                              | `false`              | Use the code tag and style.             |
+| children | `Children`                          |                      | Text's content.                         |
diff --git a/demo_markdown/src/markdown/mod.rs b/demo_markdown/src/markdown/mod.rs
index 8e77e9b2..0379fc43 100644
--- a/demo_markdown/src/markdown/mod.rs
+++ b/demo_markdown/src/markdown/mod.rs
@@ -145,5 +145,6 @@ fn iter_nodes<'a>(node: &'a AstNode<'a>, demos: &mut Vec) -> TokenStream
         NodeValue::Link(_) => quote!("Link todo!!!"),
         NodeValue::Image(_) => quote!("Image todo!!!"),
         NodeValue::FootnoteReference(_) => quote!("FootnoteReference todo!!!"),
+        NodeValue::MultilineBlockQuote(_) => quote!("FootnoteReference todo!!!"),
     }
 }
diff --git a/examples/ssr_axum/Cargo.toml b/examples/ssr_axum/Cargo.toml
index cb2800da..26169817 100644
--- a/examples/ssr_axum/Cargo.toml
+++ b/examples/ssr_axum/Cargo.toml
@@ -7,22 +7,22 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-axum = { version = "0.6.4", optional = true }
+axum = { version = "0.7.4", optional = true }
 console_error_panic_hook = "0.1"
 console_log = "1"
 cfg-if = "1"
-leptos = { version = "0.5" }
-leptos_axum = { version = "0.5", optional = true }
-leptos_meta = { version = "0.5" }
-leptos_router = { version = "0.5" }
+leptos = { version = "0.6.5" }
+leptos_axum = { version = "0.6.5", optional = true }
+leptos_meta = { version = "0.6.5" }
+leptos_router = { version = "0.6.5" }
 log = "0.4"
 simple_logger = "4"
-tokio = { version = "1.25.0", optional = true }
+tokio = { version = "1.35.1", features = ["rt-multi-thread"], optional = true }
 tower = { version = "0.4.13", optional = true }
-tower-http = { version = "0.4", features = ["fs"], optional = true }
-wasm-bindgen = "=0.2.89"
-thiserror = "1.0.38"
-tracing = { version = "0.1.37", optional = true }
+tower-http = { version = "0.5.1", features = ["fs"], optional = true }
+wasm-bindgen = "=0.2.90"
+thiserror = "1.0.56"
+tracing = { version = "0.1.40", optional = true }
 http = "0.2.8"
 demo = { path = "../../demo", default-features = false }
 
diff --git a/examples/ssr_axum/src/fileserv.rs b/examples/ssr_axum/src/fileserv.rs
index eef7b716..a71b53a2 100644
--- a/examples/ssr_axum/src/fileserv.rs
+++ b/examples/ssr_axum/src/fileserv.rs
@@ -1,40 +1,42 @@
-use cfg_if::cfg_if;
+use axum::{
+    body::Body,
+    extract::State,
+    http::{Request, Response, StatusCode, Uri},
+    response::{IntoResponse, Response as AxumResponse},
+};
+use demo::App;
+use leptos::{view, LeptosOptions};
+use tower::ServiceExt;
+use tower_http::services::ServeDir;
 
-cfg_if! { if #[cfg(feature = "ssr")] {
-    use axum::{
-        body::{boxed, Body, BoxBody},
-        extract::State,
-        response::IntoResponse,
-        http::{Request, Response, StatusCode, Uri},
-    };
-    use axum::response::Response as AxumResponse;
-    use tower::ServiceExt;
-    use tower_http::services::ServeDir;
-    use leptos::*;
-    use demo::App;
+pub async fn file_and_error_handler(
+    uri: Uri,
+    State(options): State,
+    req: Request,
+) -> AxumResponse {
+    let root = options.site_root.clone();
+    let res = get_static_file(uri.clone(), &root).await.unwrap();
 
-    pub async fn file_and_error_handler(uri: Uri, State(options): State, req: Request) -> AxumResponse {
-        let root = options.site_root.clone();
-        let res = get_static_file(uri.clone(), &root).await.unwrap();
-
-        if res.status() == StatusCode::OK {
-            res.into_response()
-        } else {
-            let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{});
-            handler(req).await.into_response()
-        }
+    if res.status() == StatusCode::OK {
+        res.into_response()
+    } else {
+        let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view! {});
+        handler(req).await.into_response()
     }
+}
 
-    async fn get_static_file(uri: Uri, root: &str) -> Result, (StatusCode, String)> {
-        let req = Request::builder().uri(uri.clone()).body(Body::empty()).unwrap();
-        // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
-        // This path is relative to the cargo root
-        match ServeDir::new(root).oneshot(req).await {
-            Ok(res) => Ok(res.map(boxed)),
-            Err(err) => Err((
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Something went wrong: {err}"),
-            )),
-        }
+async fn get_static_file(uri: Uri, root: &str) -> Result, (StatusCode, String)> {
+    let req = Request::builder()
+        .uri(uri.clone())
+        .body(Body::empty())
+        .unwrap();
+    // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
+    // This path is relative to the cargo root
+    match ServeDir::new(root).oneshot(req).await {
+        Ok(res) => Ok(res.into_response()),
+        Err(err) => Err((
+            StatusCode::INTERNAL_SERVER_ERROR,
+            format!("Something went wrong: {err}"),
+        )),
     }
-}}
+}
diff --git a/examples/ssr_axum/src/lib.rs b/examples/ssr_axum/src/lib.rs
index 1bae92b5..a1249d74 100644
--- a/examples/ssr_axum/src/lib.rs
+++ b/examples/ssr_axum/src/lib.rs
@@ -1,17 +1,14 @@
-use cfg_if::cfg_if;
+#[cfg(feature = "ssr")]
 pub mod fileserv;
 
-cfg_if! { if #[cfg(feature = "hydrate")] {
-    use leptos::*;
-    use wasm_bindgen::prelude::wasm_bindgen;
+#[cfg(feature = "hydrate")]
+#[wasm_bindgen::prelude::wasm_bindgen]
+pub fn hydrate() {
     use demo::App;
 
-    #[wasm_bindgen]
-    pub fn hydrate() {
-        // initializes logging using the `log` crate
-        _ = console_log::init_with_level(log::Level::Debug);
-        console_error_panic_hook::set_once();
+    // initializes logging using the `log` crate
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
 
-        leptos::mount_to_body(App);
-    }
-}}
+    leptos::mount_to_body(App);
+}
diff --git a/examples/ssr_axum/src/main.rs b/examples/ssr_axum/src/main.rs
index 82224181..3647ee9b 100644
--- a/examples/ssr_axum/src/main.rs
+++ b/examples/ssr_axum/src/main.rs
@@ -29,8 +29,8 @@ async fn main() {
     // run our app with hyper
     // `axum::Server` is a re-export of `hyper::Server`
     log::info!("listening on http://{}", &addr);
-    axum::Server::bind(&addr)
-        .serve(app.into_make_service())
+    let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
+    axum::serve(listener, app.into_make_service())
         .await
         .unwrap();
 }
diff --git a/thaw/Cargo.toml b/thaw/Cargo.toml
index 2c57f229..beb605f6 100644
--- a/thaw/Cargo.toml
+++ b/thaw/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "thaw"
-version = "0.1.10"
+version = "0.2.0-beta"
 edition = "2021"
 keywords = ["web", "leptos", "ui", "thaw", "component"]
 readme = "../README.md"
@@ -13,39 +13,23 @@ license = "MIT"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.7" }
-leptos_meta = { version = "0.5.7", optional = true }
-web-sys = { version = "0.3.63", features = [
+leptos = { version = "0.6.5" }
+leptos_meta = { version = "0.6.5", optional = true }
+web-sys = { version = "0.3.67", features = [
     "DomRect",
     "File",
     "FileList",
     "DataTransfer",
 ] }
-wasm-bindgen = "0.2.89"
-icondata = { version = "0.1.0", features = [
-    "AiCloseOutlined",
-    "AiCheckOutlined",
-    "AiLeftOutlined",
-    "AiLoadingOutlined",
-    "AiCheckCircleFilled",
-    "AiExclamationCircleFilled",
-    "AiCloseCircleFilled",
-    "AiPlusOutlined",
-    "AiPlusOutlined",
-    "AiMinusOutlined",
-    "AiRightOutlined",
-    "AiClockCircleOutlined",
-    "AiCalendarOutlined",
-    "AiArrowLeftOutlined",
-    "AiArrowRightOutlined",
-] }
-icondata_core = "0.0.2"
-uuid = { version = "1.5.0", features = ["v4"] }
+wasm-bindgen = "0.2.90"
+icondata_core = "0.1.0"
+icondata_ai = "0.0.10"
+uuid = { version = "1.7.0", features = ["v4"] }
 cfg-if = "1.0.0"
-chrono = "0.4.31"
+chrono = "0.4.33"
+palette = "0.7.4"
 
 [features]
-default = ["csr"]
 csr = ["leptos/csr"]
 ssr = ["leptos/ssr", "leptos_meta/ssr"]
 hydrate = ["leptos/hydrate"]
diff --git a/thaw/src/alert/mod.rs b/thaw/src/alert/mod.rs
index 5ba585ff..d33920e0 100644
--- a/thaw/src/alert/mod.rs
+++ b/thaw/src/alert/mod.rs
@@ -1,11 +1,11 @@
 mod theme;
 
 use crate::{
+    components::OptionComp,
     theme::use_theme,
-    utils::{class_list::class_list, mount_style},
+    utils::{class_list::class_list, mount_style, OptionalProp},
     Icon, Theme,
 };
-use icondata::AiIcon;
 use leptos::*;
 pub use theme::AlertTheme;
 
@@ -42,8 +42,8 @@ impl AlertVariant {
 
 #[component]
 pub fn Alert(
-    #[prop(optional, into)] class: MaybeSignal,
-    #[prop(optional, into)] title: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
+    #[prop(optional, into)] title: Option>,
     #[prop(into)] variant: MaybeSignal,
     children: Children,
 ) -> impl IntoView {
@@ -75,28 +75,22 @@ pub fn Alert(
             css_vars
         }
     });
-    let icon = create_memo(move |_| {
-        match variant.get() {
-            AlertVariant::Success => AiIcon::AiCheckCircleFilled,
-            AlertVariant::Warning => AiIcon::AiExclamationCircleFilled,
-            AlertVariant::Error => AiIcon::AiCloseCircleFilled,
-        }
-        .into()
+    let icon = create_memo(move |_| match variant.get() {
+        AlertVariant::Success => icondata_ai::AiCheckCircleFilled,
+        AlertVariant::Warning => icondata_ai::AiExclamationCircleFilled,
+        AlertVariant::Error => icondata_ai::AiCloseCircleFilled,
     });
 
     view! {
-        

+        

             
             

-
-                {move || {
-                    let title = title.get();
-                    if title.is_empty() {
-                        None
-                    } else {
-                        view! { 
{title}
 }.into()
-                    }
-                }}
+                
+                    
{move || title.get()}

+                
                 
{children()}

             

         

diff --git a/thaw/src/auto_complete/mod.rs b/thaw/src/auto_complete/mod.rs
index 80157d58..7a79102b 100644
--- a/thaw/src/auto_complete/mod.rs
+++ b/thaw/src/auto_complete/mod.rs
@@ -3,7 +3,7 @@ mod theme;
 use crate::{
     components::{Binder, Follower, FollowerPlacement, FollowerWidth},
     use_theme,
-    utils::{class_list::class_list, mount_style, StoredMaybeSignal},
+    utils::{class_list::class_list, mount_style, Model, OptionalProp, StoredMaybeSignal},
     ComponentRef, Input, InputPrefix, InputRef, InputSuffix, Theme,
 };
 use leptos::*;
@@ -27,14 +27,14 @@ pub struct AutoCompleteSuffix {
 
 #[component]
 pub fn AutoComplete(
-    #[prop(optional, into)] value: RwSignal,
-    #[prop(optional, into)] placeholder: MaybeSignal,
+    #[prop(optional, into)] value: Model,
+    #[prop(optional, into)] placeholder: OptionalProp>,
     #[prop(optional, into)] options: MaybeSignal>,
     #[prop(optional, into)] clear_after_select: MaybeSignal,
     #[prop(optional, into)] on_select: Option>,
     #[prop(optional, into)] disabled: MaybeSignal,
     #[prop(optional, into)] invalid: MaybeSignal,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     #[prop(optional)] auto_complete_prefix: Option,
     #[prop(optional)] auto_complete_suffix: Option,
     #[prop(optional)] comp_ref: ComponentRef,
@@ -130,7 +130,7 @@ pub fn AutoComplete(
     view! {
         
             

diff --git a/thaw/src/avatar/mod.rs b/thaw/src/avatar/mod.rs
index 1d3f19d6..07fba1d8 100644
--- a/thaw/src/avatar/mod.rs
+++ b/thaw/src/avatar/mod.rs
@@ -1,8 +1,9 @@
 mod theme;
 
 use crate::{
+    components::OptionComp,
     use_theme,
-    utils::{class_list::class_list, mount_style},
+    utils::{class_list::class_list, mount_style, OptionalProp},
     Theme,
 };
 use leptos::*;
@@ -10,10 +11,10 @@ pub use theme::AvatarTheme;
 
 #[component]
 pub fn Avatar(
-    #[prop(optional, into)] src: MaybeSignal,
+    #[prop(optional, into)] src: Option>,
     #[prop(optional, into)] round: MaybeSignal,
     #[prop(default = MaybeSignal::Static(30), into)] size: MaybeSignal,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
@@ -34,12 +35,13 @@ pub fn Avatar(
     mount_style("avatar", include_str!("./avatar.css"));
 
     view! {
-        
-            {move || {
-                let src = src.get();
-                (!src.is_empty()).then(|| view! {  })
-            }}
-
+        
+            
+                
+            
         
     }
 }
diff --git a/thaw/src/badge/mod.rs b/thaw/src/badge/mod.rs
index b9e1391b..491fda0c 100644
--- a/thaw/src/badge/mod.rs
+++ b/thaw/src/badge/mod.rs
@@ -1,6 +1,6 @@
 use crate::{
     theme::use_theme,
-    utils::{class_list::class_list, mount_style},
+    utils::{class_list::class_list, mount_style, OptionalProp},
     Theme,
 };
 use leptos::*;
@@ -29,7 +29,7 @@ pub fn Badge(
     #[prop(default = MaybeSignal::Static(u32::MAX), into)] max: MaybeSignal,
     #[prop(optional, into)] variant: MaybeSignal,
     #[prop(optional, into)] dot: MaybeSignal,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
@@ -61,7 +61,8 @@ pub fn Badge(
         

             
{move || value.get()}

             {children()}
         

diff --git a/thaw/src/breadcrumb/breadcrumb_item.rs b/thaw/src/breadcrumb/breadcrumb_item.rs
index f3d16f09..2e2bfee6 100644
--- a/thaw/src/breadcrumb/breadcrumb_item.rs
+++ b/thaw/src/breadcrumb/breadcrumb_item.rs
@@ -1,10 +1,10 @@
 use super::use_breadcrumb_separator;
-use crate::utils::class_list::class_list;
+use crate::utils::{class_list::class_list, OptionalProp};
 use leptos::*;
 
 #[component]
 pub fn BreadcrumbItem(
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     let breadcrumb_separator = use_breadcrumb_separator();
@@ -12,7 +12,7 @@ pub fn BreadcrumbItem(
     view! {
         
  • 
             {children()}
             
                 {move || breadcrumb_separator.0.get()}
diff --git a/thaw/src/breadcrumb/mod.rs b/thaw/src/breadcrumb/mod.rs
index e576700c..3ab46521 100644
--- a/thaw/src/breadcrumb/mod.rs
+++ b/thaw/src/breadcrumb/mod.rs
@@ -3,7 +3,7 @@ mod theme;
 
 use crate::{
     use_theme,
-    utils::{class_list::class_list, mount_style},
+    utils::{class_list::class_list, mount_style, OptionalProp},
     Theme,
 };
 pub use breadcrumb_item::BreadcrumbItem;
@@ -13,7 +13,7 @@ pub use theme::BreadcrumbTheme;
 #[component]
 pub fn Breadcrumb(
     #[prop(default = MaybeSignal::Static("/".to_string()),into)] separator: MaybeSignal,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     mount_style("breadcrumb", include_str!("./breadcrumb.css"));
@@ -40,7 +40,7 @@ pub fn Breadcrumb(
     view! {
         
             
    • 
@@ -159,7 +156,7 @@ pub fn DatePanel(
                 
    
             
             
    
-                
             
    
diff --git a/thaw/src/date_picker/panel/mod.rs b/thaw/src/date_picker/panel/mod.rs
index 46f62f62..591ece0e 100644
--- a/thaw/src/date_picker/panel/mod.rs
+++ b/thaw/src/date_picker/panel/mod.rs
@@ -3,11 +3,11 @@ mod month_panel;
 mod year_panel;
 
 use crate::{
-    chrono::NaiveDate,
     use_theme,
     utils::{now_date, ComponentRef},
     Theme,
 };
+use chrono::NaiveDate;
 use date_panel::DatePanel;
 use leptos::*;
 use month_panel::MonthPanel;
diff --git a/thaw/src/date_picker/panel/month_panel.rs b/thaw/src/date_picker/panel/month_panel.rs
index d1392914..d54ca7ed 100644
--- a/thaw/src/date_picker/panel/month_panel.rs
+++ b/thaw/src/date_picker/panel/month_panel.rs
@@ -1,8 +1,6 @@
 use super::PanelVariant;
-use crate::{
-    chrono::{Datelike, Month, Months, NaiveDate},
-    AiIcon, Button, ButtonSize, ButtonVariant,
-};
+use crate::{Button, ButtonSize, ButtonVariant};
+use chrono::{Datelike, Month, Months, NaiveDate};
 use leptos::*;
 
 #[component]
@@ -27,7 +25,7 @@ pub fn MonthPanel(
                 
                 
             
         
diff --git a/thaw/src/layout/layout_header.rs b/thaw/src/layout/layout_header.rs
index 04ff82ea..b989afef 100644
--- a/thaw/src/layout/layout_header.rs
+++ b/thaw/src/layout/layout_header.rs
@@ -1,14 +1,17 @@
-use crate::utils::class_list::class_list;
+use crate::utils::{class_list::class_list, OptionalProp};
 use leptos::*;
 
 #[component]
 pub fn LayoutHeader(
-    #[prop(optional, into)] class: MaybeSignal,
-    #[prop(optional, into)] style: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
+    #[prop(optional, into)] style: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     view! {
-        
    
+        
    
             {children()}
         
    
     }
diff --git a/thaw/src/layout/layout_sider.rs b/thaw/src/layout/layout_sider.rs
index ee192eb5..5c92aa43 100644
--- a/thaw/src/layout/layout_sider.rs
+++ b/thaw/src/layout/layout_sider.rs
@@ -1,15 +1,18 @@
-use crate::utils::{class_list::class_list, mount_style};
+use crate::utils::{class_list::class_list, mount_style, OptionalProp};
 use leptos::*;
 
 #[component]
 pub fn LayoutSider(
-    #[prop(optional, into)] class: MaybeSignal,
-    #[prop(optional, into)] style: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
+    #[prop(optional, into)] style: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     mount_style("layout-sider", include_str!("./layout-sider.css"));
     view! {
-        
    
+        
    
             {children()}
         
    
     }
diff --git a/thaw/src/layout/mod.rs b/thaw/src/layout/mod.rs
index d409d2e8..b53c3f45 100644
--- a/thaw/src/layout/mod.rs
+++ b/thaw/src/layout/mod.rs
@@ -1,7 +1,7 @@
 mod layout_header;
 mod layout_sider;
 
-use crate::utils::{class_list::class_list, mount_style};
+use crate::utils::{class_list::class_list, mount_style, OptionalProp};
 pub use layout_header::*;
 pub use layout_sider::*;
 use leptos::*;
@@ -24,8 +24,8 @@ impl LayoutPosition {
 
 #[component]
 pub fn Layout(
-    #[prop(optional, into)] class: MaybeSignal,
-    #[prop(optional, into)] style: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
+    #[prop(optional, into)] style: OptionalProp>,
     #[prop(optional)] position: LayoutPosition,
     #[prop(optional, into)] has_sider: MaybeSignal,
     children: Children,
@@ -33,15 +33,21 @@ pub fn Layout(
     mount_style("layout", include_str!("./layout.css"));
 
     let style = create_memo(move |_| {
-        let mut style = style.get();
+        let mut new_style = style.as_ref().map(|s| s.get()).unwrap_or_default();
         if has_sider.get() {
-            style.push_str("display: flex; flex-wrap: nowrap; flex-direction: row; width: 100%;")
+            new_style
+                .push_str("display: flex; flex-wrap: nowrap; flex-direction: row; width: 100%;");
+
+            Some(new_style)
+        } else if style.is_some() {
+            Some(new_style)
+        } else {
+            None
         }
-        style
     });
     view! {
         
    
             {children()}
diff --git a/thaw/src/lib.rs b/thaw/src/lib.rs
index f2023ef7..8b98209d 100644
--- a/thaw/src/lib.rs
+++ b/thaw/src/lib.rs
@@ -53,7 +53,6 @@ pub use button::*;
 pub use calendar::*;
 pub use card::*;
 pub use checkbox::*;
-pub use chrono;
 pub use code::*;
 pub use collapse::*;
 pub use color_picker::*;
diff --git a/thaw/src/menu/menu_group.rs b/thaw/src/menu/menu_group.rs
index 30722e2b..c6f8f23d 100644
--- a/thaw/src/menu/menu_group.rs
+++ b/thaw/src/menu/menu_group.rs
@@ -1,6 +1,6 @@
 use crate::{
     theme::use_theme,
-    utils::{class_list::class_list, mount_style},
+    utils::{class_list::class_list, mount_style, OptionalProp},
     Theme,
 };
 use leptos::*;
@@ -8,7 +8,7 @@ use leptos::*;
 #[component]
 pub fn MenuGroup(
     #[prop(into)] label: String,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     mount_style("menu-group", include_str!("./menu-group.css"));
@@ -22,7 +22,10 @@ pub fn MenuGroup(
     });
 
     view! {
-        
    
+        
    
             {label}
         
    
         {children()}
diff --git a/thaw/src/menu/menu_item.rs b/thaw/src/menu/menu_item.rs
index ca4000c3..ab7077d4 100644
--- a/thaw/src/menu/menu_item.rs
+++ b/thaw/src/menu/menu_item.rs
@@ -1,7 +1,7 @@
 use super::use_menu;
 use crate::{
     theme::use_theme,
-    utils::{class_list::class_list, mount_style},
+    utils::{class_list::class_list, mount_style, OptionalProp},
     Theme,
 };
 use leptos::*;
@@ -10,7 +10,7 @@ use leptos::*;
 pub fn MenuItem(
     #[prop(into)] key: MaybeSignal,
     #[prop(into)] label: MaybeSignal,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
 ) -> impl IntoView {
     mount_style("menu-item", include_str!("./menu-item.css"));
     let theme = use_theme(Theme::light);
@@ -43,7 +43,7 @@ pub fn MenuItem(
             
    ,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] value: Model,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     view! {
         
-            
    {children()}
    
+            
    {children()}
    
             
     }
 }
 
 #[derive(Clone)]
-pub(crate) struct MenuInjection(pub RwSignal);
+pub(crate) struct MenuInjection(pub Model);
 
 pub(crate) fn use_menu() -> MenuInjection {
     expect_context()
diff --git a/thaw/src/message/message_provider.rs b/thaw/src/message/message_provider.rs
index 1edff6f6..0fd7b46a 100644
--- a/thaw/src/message/message_provider.rs
+++ b/thaw/src/message/message_provider.rs
@@ -1,7 +1,9 @@
 use std::time::Duration;
-
 use super::{message_environment::MessageEnvironment, MessageVariant};
-use crate::{components::Teleport, utils::{class_list::class_list, mount_style}};
+use crate::{
+    components::Teleport,
+    utils::{class_list::class_list, mount_style},
+};
 use leptos::*;
 use uuid::Uuid;
 
@@ -13,7 +15,7 @@ pub enum MessagePlacement {
     TopRight,
     Bottom,
     BottomLeft,
-    BottomRight
+    BottomRight,
 }
 
 impl MessagePlacement {
@@ -24,7 +26,7 @@ impl MessagePlacement {
             MessagePlacement::TopRight => "thaw-message-container--top-right".to_owned(),
             MessagePlacement::Bottom => "thaw-message-container--bottom".to_owned(),
             MessagePlacement::BottomLeft => "thaw-message-container--bottom-left".to_owned(),
-            MessagePlacement::BottomRight=> "thaw-message-container--bottom-right".to_owned(),
+            MessagePlacement::BottomRight => "thaw-message-container--bottom-right".to_owned(),
         }
     }
 }
@@ -111,5 +113,3 @@ impl MessageInjection {
 pub fn use_message() -> MessageInjection {
     expect_context::()
 }
-
-
diff --git a/thaw/src/message/mod.rs b/thaw/src/message/mod.rs
index 1ea50eee..06c5a809 100644
--- a/thaw/src/message/mod.rs
+++ b/thaw/src/message/mod.rs
@@ -2,12 +2,15 @@ mod message_environment;
 mod message_provider;
 mod theme;
 
-use crate::{theme::use_theme, Icon, Theme, components::{If, Then}};
-use icondata::*;
+use crate::{
+    components::{If, Then},
+    theme::use_theme,
+    Icon, Theme,
+};
 use leptos::*;
-use uuid::Uuid;
 pub use message_provider::*;
 pub use theme::MessageTheme;
+use uuid::Uuid;
 
 #[derive(Default, Clone)]
 pub enum MessageVariant {
@@ -18,11 +21,11 @@ pub enum MessageVariant {
 }
 
 impl MessageVariant {
-    fn icon(&self) -> Icon {
+    fn icon(&self) -> icondata_core::Icon {
         match self {
-            MessageVariant::Success => icondata::Icon::Ai(AiCloseCircleFilled),
-            MessageVariant::Warning => icondata::Icon::Ai(AiExclamationCircleFilled),
-            MessageVariant::Error => icondata::Icon::Ai(AiCheckCircleFilled),
+            MessageVariant::Success => icondata_ai::AiCloseCircleFilled,
+            MessageVariant::Warning => icondata_ai::AiExclamationCircleFilled,
+            MessageVariant::Error => icondata_ai::AiCheckCircleFilled,
         }
     }
     fn theme_color(&self, theme: &Theme) -> String {
@@ -63,8 +66,8 @@ pub(crate) fn Message(
                 
    {content}
    
                 
                     
-                        
    
-                            
+                        
    
+                            
                         
    
                     
                 
@@ -72,5 +75,3 @@ pub(crate) fn Message(
         
    
     }
 }
-
-
diff --git a/thaw/src/mobile/nav_bar/mod.rs b/thaw/src/mobile/nav_bar/mod.rs
index f28a4312..a09ebdfe 100644
--- a/thaw/src/mobile/nav_bar/mod.rs
+++ b/thaw/src/mobile/nav_bar/mod.rs
@@ -4,7 +4,7 @@ use crate::{
     components::*,
     icon::*,
     use_theme,
-    utils::{class_list::class_list, mount_style, StoredMaybeSignal},
+    utils::{class_list::class_list, mount_style, OptionalProp},
     Theme,
 };
 use leptos::*;
@@ -13,14 +13,14 @@ pub use theme::NavBarTheme;
 #[slot]
 pub struct NavBarLeft {
     #[prop(optional, into)]
-    class: MaybeSignal,
+    class: OptionalProp>,
     children: Children,
 }
 
 #[slot]
 pub struct NavBarRight {
     #[prop(optional, into)]
-    class: MaybeSignal,
+    class: OptionalProp>,
     children: Children,
 }
 
@@ -28,13 +28,13 @@ pub struct NavBarRight {
 pub fn NavBar(
     #[prop(optional, into)] title: MaybeSignal,
     #[prop(optional, into)] left_arrow: MaybeSignal,
-    #[prop(optional, into)] left_text: MaybeSignal,
+    #[prop(optional, into)] left_text: OptionalProp>,
     #[prop(optional)] nav_bar_left: Option,
     #[prop(optional, into)] on_click_left: Option>,
-    #[prop(optional, into)] right_text: MaybeSignal,
+    #[prop(optional, into)] right_text: OptionalProp>,
     #[prop(optional)] nav_bar_right: Option,
     #[prop(optional, into)] on_click_right: Option>,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
 ) -> impl IntoView {
     mount_style("nav-bar", include_str!("./nav-bar.css"));
     let theme = use_theme(Theme::light);
@@ -46,9 +46,6 @@ pub fn NavBar(
             )
         })
     });
-    let title: StoredMaybeSignal<_> = title.into();
-    let left_text: StoredMaybeSignal<_> = left_text.into();
-    let right_text: StoredMaybeSignal<_> = right_text.into();
 
     let on_click_left = move |ev| {
         if let Some(click_left) = on_click_left.as_ref() {
@@ -63,51 +60,72 @@ pub fn NavBar(
     };
 
     view! {
-        
    
-            {
-                if let Some(NavBarLeft { class, children }) = nav_bar_left {
-                    view! {
-                        
    
-                            {children()}
-                        
    
-                    }.into_view()
-                } else {
-                    view! {
-                        
+        
    
+
+            {if let Some(NavBarLeft { class, children }) = nav_bar_left {
+                view! {
+                    
    
+                        {children()}
+                    
    
+                }
+                    .into_view()
+            } else if let Some(left_text) = left_text.into_option() {
+                view! {
+                    
    
+                        
                             
-                                
    
-                                    
-                                        
-                                            
-                                        
-                                    
-                                    {move || left_text.get()}
-                                
    
+                                
                                 
                             
-                    }.into_view()
+                        {move || left_text.get()}
+                    
    
                 }
-            }
+                    .into_view()
+            } else {
+                (move || {
+                    if left_arrow.get() {
+                        view! {
+                            
    
+                                
+                            
    
+                        }
+                            .into()
+                    } else {
+                        None
+                    }
+                })
+                    .into_view()
+            }}
+
             
    {move || title.get()}
    
-            {
-                if let Some(NavBarRight { class, children }) = nav_bar_right {
-                    view! {
-                        
    
-                            {children()}
-                        
    
-                    }.into_view()
-                } else {
-                    view! {
-                        
-                            
-                                
    
-                                    {move || right_text.get()}
-                                
    
-                                
-                            
-                    }.into_view()
+
+            {if let Some(NavBarRight { class, children }) = nav_bar_right {
+                view! {
+                    
    
+                        {children()}
+                    
    
                 }
-            }
+                    .into()
+            } else if let Some(right_text) = right_text.into_option() {
+                view! {
+                    
    
+                        {move || right_text.get()}
+                    
    
+                }
+                    .into()
+            } else {
+                None
+            }}
+
         
    
     }
 }
diff --git a/thaw/src/mobile/tabbar/mod.rs b/thaw/src/mobile/tabbar/mod.rs
index c21c082d..1ce6ad78 100644
--- a/thaw/src/mobile/tabbar/mod.rs
+++ b/thaw/src/mobile/tabbar/mod.rs
@@ -1,16 +1,17 @@
 mod tabbar_item;
 mod theme;
 
-use crate::{use_theme, utils::mount_style, Theme};
+use crate::{
+    use_theme,
+    utils::{mount_style, Model},
+    Theme,
+};
 use leptos::*;
 pub use tabbar_item::*;
 pub use theme::TabbarTheme;
 
 #[component]
-pub fn Tabbar(
-    #[prop(optional, into)] value: RwSignal,
-    children: Children,
-) -> impl IntoView {
+pub fn Tabbar(#[prop(optional, into)] value: Model, children: Children) -> impl IntoView {
     mount_style("tabbar", include_str!("./tabbar.css"));
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
@@ -32,7 +33,7 @@ pub fn Tabbar(
 }
 
 #[derive(Clone)]
-pub(crate) struct TabbarInjection(pub RwSignal);
+pub(crate) struct TabbarInjection(pub Model);
 
 pub(crate) fn use_tabbar() -> TabbarInjection {
     expect_context()
diff --git a/thaw/src/mobile/tabbar/tabbar_item.rs b/thaw/src/mobile/tabbar/tabbar_item.rs
index ed4f06f3..b9c97a2d 100644
--- a/thaw/src/mobile/tabbar/tabbar_item.rs
+++ b/thaw/src/mobile/tabbar/tabbar_item.rs
@@ -1,13 +1,13 @@
 use super::use_tabbar;
 use crate::components::*;
 use crate::utils::StoredMaybeSignal;
-use crate::{icon::*, theme::use_theme, utils::mount_style, Theme};
+use crate::{icon::Icon, theme::use_theme, utils::mount_style, Theme};
 use leptos::*;
 
 #[component]
 pub fn TabbarItem(
     #[prop(into)] key: MaybeSignal,
-    #[prop(optional, into)] icon: Option,
+    #[prop(optional, into)] icon: Option,
     children: Children,
 ) -> impl IntoView {
     mount_style("tabbar-item", include_str!("./tabbar-item.css"));
diff --git a/thaw/src/mobile/toast/mod.rs b/thaw/src/mobile/toast/mod.rs
index 8a5f9690..da9047fc 100644
--- a/thaw/src/mobile/toast/mod.rs
+++ b/thaw/src/mobile/toast/mod.rs
@@ -11,7 +11,7 @@ pub fn show_toast(options: ToastOptions) {
     mount_style("toast", include_str!("./toast.css"));
     cfg_if! { if #[cfg(target_arch = "wasm32")] {
         use leptos::{leptos_dom::Mountable, *};
-        let mount = document().body().expect("body element not to exist");
+        let mount = document().body().expect("body element to exist");
         let children = view! { 
    {options.message}
     };
         let node = children.into_view();
         let node = node.get_mountable_node();
diff --git a/thaw/src/modal/mod.rs b/thaw/src/modal/mod.rs
index 6daa285e..d4855c12 100644
--- a/thaw/src/modal/mod.rs
+++ b/thaw/src/modal/mod.rs
@@ -1,7 +1,8 @@
 use crate::icon::*;
+use crate::utils::Model;
 use crate::{
     components::{OptionComp, Teleport},
-    utils::{mount_style, StoredMaybeSignal},
+    utils::mount_style,
     Card, CardFooter, CardHeader, CardHeaderExtra,
 };
 use leptos::*;
@@ -13,13 +14,12 @@ pub struct ModalFooter {
 
 #[component]
 pub fn Modal(
-    #[prop(into)] show: RwSignal,
+    #[prop(into)] show: Model,
     #[prop(optional, into)] title: MaybeSignal,
     children: Children,
     #[prop(optional)] modal_footer: Option,
 ) -> impl IntoView {
     mount_style("modal", include_str!("./modal.css"));
-    let title: StoredMaybeSignal<_> = title.into();
 
     view! {
         
@@ -35,7 +35,7 @@ pub fn Modal(
                         
                         
                             
-                                
+                                
                             
                         
                         {children()}
diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs
index f51eac88..ea870fd0 100644
--- a/thaw/src/popover/mod.rs
+++ b/thaw/src/popover/mod.rs
@@ -3,7 +3,7 @@ mod theme;
 use crate::{
     components::{Binder, Follower, FollowerPlacement},
     use_theme,
-    utils::{add_event_listener, class_list::class_list, mount_style},
+    utils::{add_event_listener, class_list::class_list, mount_style, OptionalProp},
     Theme,
 };
 use leptos::{leptos_dom::helpers::TimeoutHandle, *};
@@ -13,13 +13,13 @@ pub use theme::PopoverTheme;
 #[slot]
 pub struct PopoverTrigger {
     #[prop(optional, into)]
-    class: MaybeSignal,
+    class: OptionalProp>,
     children: Children,
 }
 
 #[component]
 pub fn Popover(
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     #[prop(optional)] trigger_type: PopoverTriggerType,
     popover_trigger: PopoverTrigger,
     #[prop(optional)] placement: PopoverPlacement,
@@ -115,7 +115,7 @@ pub fn Popover(
     view! {
         
             
    
-                    
    {children()}
    
+                    
    {children()}
    
                     
    
                         
    
                     
    
diff --git a/thaw/src/radio/mod.rs b/thaw/src/radio/mod.rs
index 82128eb2..124205ea 100644
--- a/thaw/src/radio/mod.rs
+++ b/thaw/src/radio/mod.rs
@@ -1,14 +1,14 @@
 use crate::{
     theme::use_theme,
-    utils::{class_list::class_list, mount_style},
+    utils::{class_list::class_list, mount_style, Model, OptionalProp},
     Theme,
 };
 use leptos::*;
 
 #[component]
 pub fn Radio(
-    #[prop(optional, into)] value: RwSignal,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] value: Model,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
@@ -27,7 +27,8 @@ pub fn Radio(
     view! {
         
     {
 
 #[component]
 pub fn Select(
-    #[prop(optional, into)] value: RwSignal>,
+    #[prop(optional, into)] value: Model>,
     #[prop(optional, into)] options: MaybeSignal>>,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
 ) -> impl IntoView
 where
     T: Eq + Hash + Clone + 'static,
@@ -111,7 +111,7 @@ where
     view! {
         
             
    ,
+    #[prop(optional, into)] value: Model,
     #[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal,
     #[prop(optional, into)] step: MaybeSignal,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     #[prop(optional)] children: Option,
 ) -> impl IntoView {
     mount_style("slider", include_str!("./slider.css"));
@@ -118,7 +118,7 @@ pub fn Slider(
 
     view! {
         
    
diff --git a/thaw/src/slider/slider_label.rs b/thaw/src/slider/slider_label.rs
index b82c8527..a8346bbc 100644
--- a/thaw/src/slider/slider_label.rs
+++ b/thaw/src/slider/slider_label.rs
@@ -1,6 +1,5 @@
-use leptos::*;
-
 use crate::utils::mount_style;
+use leptos::*;
 
 #[component]
 pub fn SliderLabel(#[prop(into)] value: MaybeSignal, children: Children) -> impl IntoView {
diff --git a/thaw/src/space/mod.rs b/thaw/src/space/mod.rs
index 598c6601..eb4da14c 100644
--- a/thaw/src/space/mod.rs
+++ b/thaw/src/space/mod.rs
@@ -1,4 +1,4 @@
-use crate::utils::{class_list::class_list, mount_style};
+use crate::utils::{class_list::class_list, mount_style, OptionalProp};
 use leptos::*;
 
 #[derive(Default)]
@@ -16,7 +16,7 @@ pub enum SpaceGap {
 pub fn Space(
     #[prop(optional)] gap: SpaceGap,
     #[prop(optional)] vertical: bool,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     mount_style("space", include_str!("./space.css"));
@@ -30,7 +30,7 @@ pub fn Space(
 
     view! {
         
    
diff --git a/thaw/src/spinner/mod.rs b/thaw/src/spinner/mod.rs
index 009b4ac1..4e18c744 100644
--- a/thaw/src/spinner/mod.rs
+++ b/thaw/src/spinner/mod.rs
@@ -2,7 +2,7 @@ mod theme;
 
 use crate::{
     theme::use_theme,
-    utils::{class_list::class_list, mount_style},
+    utils::{class_list::class_list, mount_style, OptionalProp},
     Theme,
 };
 use leptos::*;
@@ -30,7 +30,7 @@ impl SpinnerSize {
 
 #[component]
 pub fn Spinner(
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     #[prop(optional, into)] size: MaybeSignal,
 ) -> impl IntoView {
     mount_style("spinner", include_str!("./spinner.css"));
@@ -53,7 +53,7 @@ pub fn Spinner(
 
     view! {
         
    
     }
diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index 271344ed..f0e252ce 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -2,7 +2,7 @@ mod theme;
 
 use crate::{
     theme::use_theme,
-    utils::{class_list::class_list, mount_style},
+    utils::{class_list::class_list, mount_style, Model, OptionalProp},
     Theme,
 };
 use leptos::*;
@@ -10,8 +10,8 @@ pub use theme::SwitchTheme;
 
 #[component]
 pub fn Switch(
-    #[prop(optional, into)] value: RwSignal,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] value: Model,
+    #[prop(optional, into)] class: OptionalProp>,
 ) -> impl IntoView {
     mount_style("switch", include_str!("./switch.css"));
     let theme = use_theme(Theme::light);
@@ -33,7 +33,8 @@ pub fn Switch(
     view! {
         
    ,
     #[prop(default=true.into(), into)] single_row: MaybeSignal,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     #[prop(optional, into)] single_column: MaybeSignal,
     children: Children,
 ) -> impl IntoView {
@@ -46,7 +46,8 @@ pub fn Table(
         ,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] value: Model,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     mount_style("tabs", include_str!("./tabs.css"));
@@ -30,9 +30,9 @@ pub fn Tabs(
 
 #[component]
 fn TabsInner(
-    value: RwSignal,
+    value: Model,
     tab_options_vec: RwSignal>,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     mount_style("tabs", include_str!("./tabs.css"));
@@ -61,7 +61,10 @@ fn TabsInner(
     let children = children();
 
     view! {
-        
    
+        
    
             
    
                 ,
+    active_key: Model,
     tab_options_vec: RwSignal>,
 }
 
diff --git a/thaw/src/tabs/tab.rs b/thaw/src/tabs/tab.rs
index 138dfbf6..1ea94d55 100644
--- a/thaw/src/tabs/tab.rs
+++ b/thaw/src/tabs/tab.rs
@@ -1,5 +1,5 @@
 use super::use_tabs;
-use crate::utils::{class_list::class_list, mount_style};
+use crate::utils::{class_list::class_list, mount_style, OptionalProp};
 use leptos::*;
 
 #[derive(Clone)]
@@ -11,7 +11,7 @@ pub(crate) struct TabOption {
 
 #[derive(Clone)]
 pub(crate) struct TabLabelView {
-    pub class: MaybeSignal,
+    pub class: OptionalProp>,
     pub children: Fragment,
 }
 
@@ -28,7 +28,7 @@ impl From for TabLabelView {
 #[slot]
 pub struct TabLabel {
     #[prop(optional, into)]
-    class: MaybeSignal,
+    class: OptionalProp>,
     children: Children,
 }
 
@@ -37,7 +37,7 @@ pub fn Tab(
     #[prop(into)] key: String,
     #[prop(optional, into)] label: String,
     #[prop(optional)] tab_label: Option,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     mount_style("tab", include_str!("./tab.css"));
@@ -61,7 +61,8 @@ pub fn Tab(
     view! {
         
    ,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] class: OptionalProp>,
     children: Children,
 ) -> impl IntoView {
     mount_style("tag", include_str!("./tag.css"));
@@ -73,7 +73,10 @@ pub fn Tag(
     });
 
     view! {
-        
    
+        
    
             {children()}
         
    
     }
diff --git a/thaw/src/time_picker/mod.rs b/thaw/src/time_picker/mod.rs
index fb80152e..fcb38b35 100644
--- a/thaw/src/time_picker/mod.rs
+++ b/thaw/src/time_picker/mod.rs
@@ -1,19 +1,20 @@
 mod theme;
 
+pub use theme::TimePickerTheme;
+
 use crate::{
-    chrono::{Local, NaiveTime, Timelike},
     components::{Binder, Follower, FollowerPlacement},
     use_theme,
-    utils::{mount_style, ComponentRef},
-    AiIcon, Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, SignalWatch, Theme,
+    utils::{mount_style, ComponentRef, Model, OptionalProp},
+    Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, SignalWatch, Theme,
 };
+use chrono::{Local, NaiveTime, Timelike};
 use leptos::*;
-pub use theme::TimePickerTheme;
 
 #[component]
 pub fn TimePicker(
-    #[prop(optional, into)] value: RwSignal>,
-    #[prop(optional, into)] class: MaybeSignal,
+    #[prop(optional, into)] value: Model>,
+    #[prop(optional, into)] class: OptionalProp>,
     #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     mount_style("time-picker", include_str!("./time-picker.css"));
@@ -76,10 +77,7 @@ pub fn TimePicker(
             
    
                 
                     
-                        
+                        
                     
                 
             
    
@@ -257,7 +255,7 @@ fn Panel(
                 
    
             
    
             
    
-