✨ feat: add checkbox component

Cargo.toml

@@ -17,7 +17,7 @@ leptos = { version = "0.2.5", features = ["stable"] }
 stylers = "0.3.1"
 web-sys = "0.3.61"
 leptos_dom = { version = "0.2.5" }
-leptos-icons = { git = "https://github.com/Carlosted/leptos-icons.git", features = ["AiCloseOutlined"] }
+leptos-icons = { git = "https://github.com/Carlosted/leptos-icons.git", features = ["AiCloseOutlined", "AiCheckOutlined"] }
 
 [workspace]
 members = ["examples/basic"]

examples/basic/src/demo_checkbox.rs

@@ -0,0 +1,20 @@
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn DemoCheckout(cx: Scope) -> impl IntoView {
+    let (checked, set_checked) = create_signal(cx, false);
+    view! {cx,
+        <div>
+            <Checkbox>
+                "A"
+            </Checkbox>
+            <Checkbox checked=true>
+                "B"
+            </Checkbox>
+            <Checkbox checked=checked on_checked=set_checked>
+                "Click"
+            </Checkbox>
+        </div>
+    }
+}

examples/basic/src/main.rs

@@ -1,8 +1,10 @@
 use leptos::*;
 use melt_ui::*;
 mod demo_button;
+mod demo_checkbox;
 mod demo_modal;
 pub use demo_button::*;
+pub use demo_checkbox::*;
 pub use demo_modal::*;
 
 #[component]
@@ -45,6 +47,8 @@ pub fn App(cx: Scope) -> impl IntoView {
         <DemoButton />
         <hr />
         <DemoModal/>
+        <hr />
+        <DemoCheckout />
     }
 }
 

src/checkbox/checkbox.css

@@ -0,0 +1,31 @@
+.melt-checkbox {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.melt-checkbox__input {
+    width: 0;
+    height: 0;
+}
+.melt-checkbox__dot {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 14px;
+    height: 14px;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+}
+.melt-checkbox:hover .melt-checkbox__dot,
+.melt-checkbox--checked .melt-checkbox__dot {
+    border-color: var(--background-color-checked);
+}
+.melt-checkbox--checked .melt-checkbox__dot {
+    background-color: var(--background-color-checked);
+}
+
+.melt-checkbox__label {
+    display: inline-block;
+    padding: 0 6px;
+}

src/checkbox/mod.rs

@@ -0,0 +1,51 @@
+use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
+use leptos::*;
+use stylers::style_sheet_str;
+use leptos_icons::*;
+
+#[component]
+pub fn Checkbox(
+    cx: Scope,
+    #[prop(optional, into)] checked: MaybeSignal<bool>,
+    #[prop(optional, into)] on_checked: Option<SignalSetter<bool>>,
+    children: Children,
+) -> impl IntoView {
+    let theme = use_theme(cx, Theme::light);
+    let class_name = mount_style("checkbox", || {
+        style_sheet_str!("./src/checkbox/checkbox.css")
+    });
+
+    let css_vars = create_memo(cx, move |_| {
+        let mut css_vars = String::new();
+        let theme = theme.get();
+        let bg_color = theme.common.color_primary;
+        css_vars.push_str(&format!("--background-color-checked: {bg_color};"));
+        css_vars
+    });
+    let on_click = move |_| {
+        if let Some(on_checked) = on_checked {
+            on_checked.set(!checked.get());
+        }
+    };
+    view! {cx, class=class_name,
+        <div class:melt-checkbox=true class=("melt-checkbox--checked", move || checked.get()) style=move || css_vars.get() on:click=on_click>
+            <input class="melt-checkbox__input" type="checkbox" />
+            <div class="melt-checkbox__dot">
+                {
+                    move || {
+                        if checked.get() {
+                            view! {cx,
+                                <LeptosIcon icon=AiIcon::AiCheckOutlined style="color: white"/>
+                            }.into()
+                        } else {
+                            None
+                        }
+                    }
+                }
+            </div>
+            <div class="melt-checkbox__label">
+                {children(cx)}
+            </div>
+        </div>
+    }
+}

src/lib.rs

@@ -1,5 +1,6 @@
 mod button;
 mod card;
+mod checkbox;
 mod input;
 mod modal;
 mod progress;
@@ -10,6 +11,7 @@ mod theme;
 mod utils;
 
 pub use button::*;
+pub use checkbox::*;
 pub use input::*;
 pub use modal::*;
 pub use progress::*;