maud-ui 0.1.0

58 headless, accessible UI components for Rust web apps. Built on maud + htmx, styled like shadcn/ui.
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

//! Progress component — determinate and indeterminate progress indicators.

use maud::{html, Markup};

/// Progress bar rendering properties
#[derive(Debug, Clone)]
pub struct Props {
    /// Current progress value (0..=100, or use any value with max)
    pub value: u32,
    /// Maximum value (default 100)
    pub max: u32,
    /// ARIA label for the progress bar
    pub label: String,
    /// If true, renders as indeterminate (animated) progress
    pub indeterminate: bool,
}

impl Default for Props {
    fn default() -> Self {
        Self {
            value: 0,
            max: 100,
            label: String::new(),
            indeterminate: false,
        }
    }
}

/// Render a progress bar with the given properties
pub fn render(props: Props) -> Markup {
    let pct = if props.max == 0 { 0 } else { (props.value * 100) / props.max };

    html! {
        @if props.indeterminate {
            div.mui-progress.mui-progress--indeterminate role="progressbar" aria-valuemin="0" aria-valuemax=(props.max) aria-label=(props.label) {
                div.mui-progress__bar {}
            }
        } @else {
            div.mui-progress role="progressbar" aria-valuenow=(props.value) aria-valuemin="0" aria-valuemax=(props.max) aria-label=(props.label) {
                div.mui-progress__bar style=(format!("width: {}%", pct)) {}
            }
        }
    }
}

/// Showcase all progress variants and use cases
pub fn showcase() -> Markup {
    html! {
        div.mui-showcase__grid {
            // File upload in progress
            div {
                p.mui-showcase__caption { "File upload" }
                div style="display:flex;flex-direction:column;gap:0.5rem" {
                    div style="display:flex;justify-content:space-between;align-items:center" {
                        span style="font-size:0.875rem;color:var(--mui-text)" { "Uploading file..." }
                        span style="font-size:0.875rem;font-weight:500;color:var(--mui-text)" { "65%" }
                    }
                    (render(Props {
                        value: 65,
                        max: 100,
                        label: "Uploading file, 65 percent".into(),
                        indeterminate: false,
                    }))
                    span style="font-size:0.75rem;color:var(--mui-text-muted)" { "report-2026.pdf — 3.2 MB of 4.9 MB" }
                }
            }

            // Stepped progress
            div {
                p.mui-showcase__caption { "Stepped progress" }
                div style="display:flex;flex-direction:column;gap:0.5rem" {
                    div style="display:flex;justify-content:space-between;align-items:center" {
                        span style="font-size:0.875rem;font-weight:500;color:var(--mui-text)" { "Step 2 of 4" }
                        span style="font-size:0.75rem;color:var(--mui-text-muted)" { "Account details" }
                    }
                    (render(Props {
                        value: 50,
                        max: 100,
                        label: "Step 2 of 4, account details".into(),
                        indeterminate: false,
                    }))
                }
            }

            // Indeterminate — processing
            div {
                p.mui-showcase__caption { "Indeterminate" }
                div style="display:flex;flex-direction:column;gap:0.5rem" {
                    span style="font-size:0.875rem;color:var(--mui-text-muted)" { "Processing your request..." }
                    (render(Props {
                        value: 0,
                        max: 100,
                        label: "Processing request".into(),
                        indeterminate: true,
                    }))
                }
            }

            // Download complete (100%)
            div {
                p.mui-showcase__caption { "Download complete" }
                div style="display:flex;flex-direction:column;gap:0.5rem" {
                    div style="display:flex;justify-content:space-between;align-items:center" {
                        span style="font-size:0.875rem;color:var(--mui-text)" { "Download complete" }
                        span style="font-size:0.875rem;font-weight:500;color:var(--mui-accent,var(--mui-text))" { "100%" }
                    }
                    (render(Props {
                        value: 100,
                        max: 100,
                        label: "Download complete".into(),
                        indeterminate: false,
                    }))
                    span style="font-size:0.75rem;color:var(--mui-text-muted)" { "dataset.csv — 12.7 MB" }
                }
            }
        }
    }
}