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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

use crate::components::shared::{CONTROL_MOTION, FOCUS_RING_INSET};
use leptos::prelude::*;

#[component]
pub fn Tabs(
    #[prop(into)] value: RwSignal<String>,
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    provide_context(value);
    let combined = format!("w-full {}", class);
    view! {
        <div class=combined>{children()}</div>
    }
}

#[component]
pub fn TabsList(
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let combined = format!(
        "inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground {}",
        class
    );
    view! {
        <div role="tablist" class=combined>{children()}</div>
    }
}

#[component]
pub fn TabsTrigger(
    #[prop(into)] value: String,
    #[prop(default = String::new())] class: String,
    children: Children,
) -> impl IntoView {
    let active = use_context::<RwSignal<String>>().expect("TabsTrigger must be used inside Tabs");
    let val = StoredValue::new(value);
    view! {
        <button
            role="tab"
            class=move || {
                let base = format!("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium {} {}", FOCUS_RING_INSET, CONTROL_MOTION);
                let active_cls = "bg-background text-foreground shadow-elev-sm";
                let inactive_cls = "hover:bg-muted/50 hover:text-foreground";
                let extra = if class.is_empty() { "" } else { &class };
                if active.get() == val.get_value() {
                    format!("{} {} {}", base, active_cls, extra)
                } else {
                    format!("{} {} {}", base, inactive_cls, extra)
                }
            }
            aria-selected=move || if active.get() == val.get_value() { "true" } else { "false" }
            on:click=move |_| active.set(val.get_value())
        >
            {children()}
        </button>
    }
}

#[component]
pub fn TabsContent(
    #[prop(into)] value: String,
    #[prop(default = String::new())] class: String,
    children: ChildrenFn,
) -> impl IntoView {
    let active = use_context::<RwSignal<String>>().expect("TabsContent must be used inside Tabs");
    let val = StoredValue::new(value);
    let combined = format!("mt-2 focus:outline-none {}", class);
    view! {
        <Show when=move || active.get() == val.get_value()>
            <div role="tabpanel" class=combined.clone()>
                {children()}
            </div>
        </Show>
    }
}