soma-ui 0.1.1

A Leptos 0.8 component library: 160+ accessible UI components, blocks, charts, and a ChartDB-style schema diagram — with a prebuilt stylesheet.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

use crate::components::shared::CONTROL_MOTION;
use crate::icons::{icondata, Icon};
use leptos::prelude::*;

#[derive(Debug, Clone, PartialEq, Default)]
pub enum ChipVariant {
    #[default]
    Default,
    Secondary,
    Outline,
}

#[component]
pub fn Chip(
    #[prop(default = ChipVariant::Default)] variant: ChipVariant,
    #[prop(default = false)] removable: bool,
    #[prop(optional)] on_remove: Option<Callback<()>>,
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let variant_class = match variant {
        ChipVariant::Default => {
            "bg-primary text-primary-foreground border-transparent shadow-elev-sm"
        }
        ChipVariant::Secondary => {
            "bg-secondary text-secondary-foreground border-transparent shadow-elev-sm"
        }
        ChipVariant::Outline => "bg-transparent text-foreground border-border",
    };
    let combined = format!(
        "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs {} {}",
        variant_class, class
    );
    view! {
        <span class=combined>
            {children()}
            {if removable {
                view! {
                    <button
                        class=format!("ms-0.5 rounded-full hover:opacity-70 {} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", CONTROL_MOTION)
                        on:click=move |_| { if let Some(cb) = on_remove { cb.run(()); } }
                    >
                        <Icon icon=Signal::derive(|| icondata::LuX) width="10" height="10" />
                    </button>
                }.into_any()
            } else {
                view! { <></> }.into_any()
            }}
        </span>
    }
}