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

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

// ponytail: one-per-view carousel with clamp navigation.
// Ceiling: multi-item per view, autoplay, touch swipe = upgrade path.

#[derive(Clone, Copy)]
struct CarouselCtx {
    index: RwSignal<usize>,
    count: StoredValue<usize>,
}

#[component]
pub fn Carousel(
    /// Total number of slides.
    count: usize,
    children: Children,
) -> impl IntoView {
    let ctx = CarouselCtx {
        index: RwSignal::new(0),
        count: StoredValue::new(count),
    };
    provide_context(ctx);

    view! {
        <div class="relative w-full overflow-hidden">
            {children()}
        </div>
    }
}

/// The scrolling viewport. Place CarouselItems directly inside.
#[component]
pub fn CarouselContent(children: Children) -> impl IntoView {
    let ctx = use_context::<CarouselCtx>().expect("CarouselContent must be inside Carousel");

    view! {
        <div class="overflow-hidden">
            <div
                class="flex transition-transform duration-300 ease-in-out"
                style=move || format!("transform: translateX(-{}%)", ctx.index.get() * 100)
            >
                {children()}
            </div>
        </div>
    }
}

/// A single slide. Full-width, shrink-0 so it never collapses.
#[component]
pub fn CarouselItem(children: Children) -> impl IntoView {
    view! {
        <div class="min-w-full shrink-0">
            {children()}
        </div>
    }
}

#[component]
pub fn CarouselPrevious() -> impl IntoView {
    let ctx = use_context::<CarouselCtx>().expect("CarouselPrevious must be inside Carousel");

    let at_start = move || ctx.index.get() == 0;

    view! {
        <button
            class=move || {
                let base = format!("absolute start-2 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background text-foreground {} {} {}", CONTROL_MOTION, PRESSABLE, FOCUS_RING);
                if at_start() {
                    format!("{base} opacity-40 cursor-not-allowed")
                } else {
                    format!("{base} hover:bg-accent shadow-elev-sm")
                }
            }
            disabled=at_start
            on:click=move |_| {
                ctx.index.update(|i| {
                    if *i > 0 { *i -= 1; }
                });
            }
            aria-label="Previous slide"
        >
            <Icon icon=Signal::derive(|| icondata::LuChevronLeft) width="16" height="16" />
        </button>
    }
}

#[component]
pub fn CarouselNext() -> impl IntoView {
    let ctx = use_context::<CarouselCtx>().expect("CarouselNext must be inside Carousel");

    let at_end = move || ctx.index.get() + 1 >= ctx.count.get_value();

    view! {
        <button
            class=move || {
                let base = format!("absolute end-2 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background text-foreground {} {} {}", CONTROL_MOTION, PRESSABLE, FOCUS_RING);
                if at_end() {
                    format!("{base} opacity-40 cursor-not-allowed")
                } else {
                    format!("{base} hover:bg-accent shadow-elev-sm")
                }
            }
            disabled=at_end
            on:click=move |_| {
                ctx.index.update(|i| {
                    if *i + 1 < ctx.count.get_value() { *i += 1; }
                });
            }
            aria-label="Next slide"
        >
            <Icon icon=Signal::derive(|| icondata::LuChevronRight) width="16" height="16" />
        </button>
    }
}

/// Optional dot indicators.
#[component]
pub fn CarouselDots() -> impl IntoView {
    let ctx = use_context::<CarouselCtx>().expect("CarouselDots must be inside Carousel");

    view! {
        <div class="absolute bottom-2 start-0 end-0 flex justify-center gap-1.5">
            {(0..ctx.count.get_value()).map(|i| {
                view! {
                    <button
                        class=move || {
                            let base = "h-1.5 rounded-full transition-all";
                            if ctx.index.get() == i {
                                format!("{base} w-4 bg-foreground")
                            } else {
                                format!("{base} w-1.5 bg-foreground/40")
                            }
                        }
                        on:click=move |_| ctx.index.set(i)
                        aria-label=format!("Go to slide {}", i + 1)
                    />
                }
            }).collect_view()}
        </div>
    }
}