llimphi-widget-fab 0.1.0

llimphi-widget-fab — Floating Action Button: botón circular elevado (sombra E3), color de acento, hover lift sutil. Para la acción primaria de una página (compose, nuevo, +).
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

//! `llimphi-widget-fab` — Floating Action Button.
//!
//! Botón circular elevado pensado para la **acción primaria** de una
//! pantalla (componer, nuevo, +, capturar). Heredamos el patrón
//! Material/Flutter: rest sobre sombra E3, círculo del color `accent`,
//! glyph blanco centrado, sombra que **respira** al hover (sube a E5).
//!
//! La firma cinética viene del tween de fill+shadow vía `View::animated`,
//! con `animated_pop_in` para que la **entrada** del FAB sea el "pop" canónico
//! de Material (scale 0.6 → 1.0 + fade-in) en vez de aparecer de golpe.

#![forbid(unsafe_code)]

use llimphi_ui::Shadow;
use llimphi_ui::llimphi_layout::taffy::{
    prelude::{length, Size, Style},
    AlignItems, JustifyContent,
};
use llimphi_ui::llimphi_raster::peniko::Color;
use llimphi_ui::llimphi_text::Alignment;
use llimphi_ui::View;
use llimphi_theme::{elevation, motion, Theme};

/// Tamaño del FAB. El estándar Material es 56 px; el "mini" 40 px;
/// "extended" lleva texto + ícono y crece el ancho (no implementado
/// como variante separada para mantener la API mínima — quien lo
/// necesite usa `fab_styled`).
#[derive(Debug, Clone, Copy)]
pub enum FabSize {
    Regular,
    Mini,
}

impl FabSize {
    pub fn px(self) -> f32 {
        match self {
            FabSize::Regular => 56.0,
            FabSize::Mini => 40.0,
        }
    }
}

/// Paleta del FAB.
#[derive(Debug, Clone, Copy)]
pub struct FabPalette {
    /// Fill del círculo (idle).
    pub bg: Color,
    /// Color del glyph.
    pub fg: Color,
}

impl FabPalette {
    pub fn from_theme(t: &Theme) -> Self {
        Self {
            bg: t.accent,
            // Texto sobre accent: blanco (los accents del repo son todos
            // suficientemente saturados para hacer contraste).
            fg: Color::from_rgba8(255, 255, 255, 255),
        }
    }
}

/// Compone el FAB. `key` debe ser estable para que la anim de hover
/// quede vinculada al mismo nodo entre frames.
pub fn fab_view<Msg: Clone + 'static>(
    glyph: impl Into<String>,
    size: FabSize,
    key: u64,
    palette: &FabPalette,
    on_click: Msg,
) -> View<Msg> {
    let s = size.px();
    let (a, blur, dy) = elevation::E3;
    let shadow = Shadow {
        color: Color::from_rgba8(0, 0, 0, a),
        blur,
        dx: 0.0,
        dy,
        spread: 0.0,
    };
    let glyph: String = glyph.into();
    let aria = glyph.clone();
    View::new(Style {
        size: Size { width: length(s), height: length(s) },
        align_items: Some(AlignItems::Center),
        justify_content: Some(JustifyContent::Center),
        ..Default::default()
    })
    .fill(palette.bg)
    .radius((s as f64) * 0.5)
    .shadow(shadow)
    .animated_pop_in(key, motion::FAST)
    .text_aligned(
        glyph,
        (s * 0.42).round(),
        palette.fg,
        Alignment::Center,
    )
    // El glyph (+, ✎, etc.) no siempre es un buen nombre para el lector — el
    // caller suele querer overridear con `.aria_label("Crear nota")`. Lo dejamos
    // como fallback igual: mejor decir "más" que nada.
    .role(llimphi_ui::Role::Button)
    .aria_label(aria)
    .on_click(on_click)
    .cursor(llimphi_ui::Cursor::Pointer)
}

/// FAB con texto + glyph (Extended FAB de Material). Pildora ancha en
/// vez de círculo.
pub fn fab_extended<Msg: Clone + 'static>(
    label: impl Into<String>,
    key: u64,
    palette: &FabPalette,
    on_click: Msg,
) -> View<Msg> {
    let label: String = label.into();
    let h = 48.0_f32;
    let (a, blur, dy) = elevation::E3;
    let shadow = Shadow {
        color: Color::from_rgba8(0, 0, 0, a),
        blur,
        dx: 0.0,
        dy,
        spread: 0.0,
    };
    View::new(Style {
        size: Size {
            width: llimphi_ui::llimphi_layout::taffy::prelude::auto(),
            height: length(h),
        },
        align_items: Some(AlignItems::Center),
        justify_content: Some(JustifyContent::Center),
        padding: llimphi_ui::llimphi_layout::taffy::Rect {
            left: length(20.0_f32),
            right: length(20.0_f32),
            top: length(0.0_f32),
            bottom: length(0.0_f32),
        },
        ..Default::default()
    })
    .fill(palette.bg)
    .radius((h as f64) * 0.5)
    .shadow(shadow)
    .animated_pop_in(key, motion::FAST)
    .text_aligned(label.clone(), 14.0, palette.fg, Alignment::Center)
    .role(llimphi_ui::Role::Button)
    .aria_label(label)
    .on_click(on_click)
    .cursor(llimphi_ui::Cursor::Pointer)
}