tablo-ui 0.8.0

The Topcoat components Tablo renders: primitives synced from topcoat-ui-registry, plus its own composites.
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

// SYNC: topcoat-ui-registry@0.11.0 sha256:ce9a0c7be3ac7187f0935c193bec82f8587953c8a85fdbaf29c08d9593365c36 — do not hand-edit. Sync via `cargo xtask sync-topcoat-ui` (ADR-0007).
use topcoat::{
    Result,
    view::{Attributes, StaticClass, View, class, component, view},
};

/// Classes for the checkbox input that forms the switch track.
const SWITCH: StaticClass = class!(
    "peer h-4.5 w-8 shrink-0 appearance-none rounded-full",
    "bg-foreground/20 shadow-xs transition-colors outline-none checked:bg-primary",
    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
    "focus-visible:ring-offset-background disabled:pointer-events-none",
);

/// Classes that position the thumb at either end of the track according to the checked
/// state.
const THUMB: StaticClass = class!(
    "pointer-events-none absolute top-1/2 left-0.5 size-3.5 -translate-y-1/2",
    "rounded-full bg-background shadow-xs transition-transform peer-checked:translate-x-3.5",
);

/// An on/off control for a setting.
///
/// Uses a native checkbox with the `switch` role. Pass `checked` in `attrs` for the
/// initial state. Classes apply to the wrapper, while other attributes and event
/// handlers go on the `<input>`.
///
/// ```ignore
/// view! {
///     <div class="flex items-center gap-2">
///         let airplane_mode = element_id(cx);
///         switch(attrs: attributes! { id=(&airplane_mode) checked="" })
///         label(attrs: attributes! { for=(&airplane_mode) }, "Airplane mode")
///     </div>
/// }
/// ```
#[component]
pub async fn switch(#[default] mut attrs: Attributes) -> Result<impl View> {
    // The thumb cannot be drawn by the `<input>` itself, which renders no
    // children or pseudo-elements: it is a sibling overlaid on the track,
    // slid to the far end by the input's `peer` state while checked.
    Ok(view! {
        <span
            class=(class!(
                "peer relative inline-flex shrink-0 has-[:disabled]:opacity-50",
                attrs.remove("class"),
            ))
        >
            <input type="checkbox" role="switch" class=(SWITCH) (attrs)>
            <span class=(THUMB)></span>
        </span>
    })
}