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

use leptos::prelude::*;

// ponytail: click-catcher (fixed inset-0 z-40) closes the popover on outside click.
// Panel sits at z-50. No portal needed — anchored to trigger via relative/absolute.

#[component]
pub fn Popover(children: ChildrenFn) -> impl IntoView {
    let open = RwSignal::new(false);
    provide_context(open);

    let children = StoredValue::new(children);

    view! {
        <div class="relative inline-block">
            {children.with_value(|c| c())}
        </div>
    }
}

#[component]
pub fn PopoverTrigger(children: Children) -> impl IntoView {
    let open = use_context::<RwSignal<bool>>().expect("PopoverTrigger must be inside Popover");

    view! {
        <div on:click=move |_| open.update(|v| *v = !*v) style="display:contents">
            {children()}
        </div>
    }
}

#[component]
pub fn PopoverContent(children: ChildrenFn) -> impl IntoView {
    let open = use_context::<RwSignal<bool>>().expect("PopoverContent must be inside Popover");
    let close = move |_| open.set(false);

    let children = StoredValue::new(children);

    view! {
        <Show when=move || open.get()>
            // Click-catcher behind panel
            <div class="fixed inset-0 z-40" on:click=close />
            <div class="absolute z-50 mt-2 rounded-md border border-border bg-card p-4 shadow-elev-md animate-scale-in">
                {children.with_value(|c| c())}
            </div>
        </Show>
    }
}