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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

use crate::components::shared::{MENU_ITEM_CLASS, MENU_SEPARATOR_CLASS};
use leptos::prelude::*;

// ponytail: shared RwSignal<Option<String>> tracks which menu is open by value.
// One click-catcher rendered from Menubar when any menu is open.
// ponytail: hover-to-switch behavior — only active when menubar already has an open menu.

#[derive(Clone, Copy)]
struct MenubarCtx {
    active: RwSignal<Option<String>>,
}

#[derive(Clone)]
struct MenubarMenuCtx {
    value: StoredValue<String>,
}

#[component]
pub fn Menubar(children: ChildrenFn) -> impl IntoView {
    let ctx = MenubarCtx {
        active: RwSignal::new(None),
    };
    provide_context(ctx);

    let close = move |_| ctx.active.set(None);
    let children = StoredValue::new(children);

    view! {
        <div>
            <Show when=move || ctx.active.get().is_some()>
                <div class="fixed inset-0 z-40" on:click=close />
            </Show>
            <div class="flex items-center gap-1 rounded-md border border-border bg-card p-1">
                {children.with_value(|c| c())}
            </div>
        </div>
    }
}

#[component]
pub fn MenubarMenu(#[prop(into)] value: String, children: ChildrenFn) -> impl IntoView {
    let menu_ctx = MenubarMenuCtx {
        value: StoredValue::new(value),
    };
    provide_context(menu_ctx);

    let children = StoredValue::new(children);

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

#[component]
pub fn MenubarTrigger(children: Children) -> impl IntoView {
    let bar_ctx = use_context::<MenubarCtx>().expect("MenubarTrigger must be inside Menubar");
    let menu_ctx =
        use_context::<MenubarMenuCtx>().expect("MenubarTrigger must be inside MenubarMenu");

    let on_click = move |_| {
        let val = menu_ctx.value.get_value();
        bar_ctx.active.update(|a| {
            if a.as_deref() == Some(&val) {
                *a = None;
            } else {
                *a = Some(val);
            }
        });
    };

    // ponytail: hover-to-switch behavior — only active when menubar already has an open menu
    let on_hover = move |_| {
        let val = menu_ctx.value.get_value();
        bar_ctx.active.update(|a| {
            if a.is_some() {
                *a = Some(val);
            }
        });
    };

    let is_open = move || bar_ctx.active.get().as_deref() == Some(&menu_ctx.value.get_value());

    view! {
        <button
            class=move || {
                let base = "px-3 py-1.5 text-sm rounded-sm text-foreground transition-colors";
                if is_open() {
                    format!("{base} bg-accent text-accent-foreground")
                } else {
                    format!("{base} hover:bg-accent hover:text-accent-foreground")
                }
            }
            on:click=on_click
            on:mouseenter=on_hover
        >
            {children()}
        </button>
    }
}

#[component]
pub fn MenubarContent(children: ChildrenFn) -> impl IntoView {
    let bar_ctx = use_context::<MenubarCtx>().expect("MenubarContent must be inside Menubar");
    let menu_ctx =
        use_context::<MenubarMenuCtx>().expect("MenubarContent must be inside MenubarMenu");

    let children = StoredValue::new(children);

    let is_open = move || bar_ctx.active.get().as_deref() == Some(&menu_ctx.value.get_value());

    view! {
        <Show when=is_open>
            <div class="absolute z-50 mt-1 min-w-[12rem] rounded-md border border-border bg-card p-1 shadow-elev-md animate-scale-in">
                {children.with_value(|c| c())}
            </div>
        </Show>
    }
}

#[component]
pub fn MenubarItem(
    #[prop(optional)] on_click: Option<Callback<()>>,
    children: Children,
) -> impl IntoView {
    let bar_ctx = use_context::<MenubarCtx>().expect("MenubarItem must be inside Menubar");

    let handle_click = move |_| {
        bar_ctx.active.set(None);
        if let Some(cb) = on_click {
            cb.run(());
        }
    };

    view! {
        <div
            class=MENU_ITEM_CLASS
            on:click=handle_click
        >
            {children()}
        </div>
    }
}

#[component]
pub fn MenubarSeparator() -> impl IntoView {
    view! {
        <div class=MENU_SEPARATOR_CLASS />
    }
}