hikari-components 0.2.0

Core UI components (40+) for the Hikari design system
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

// hi-components/src/layout/space.rs
// Space component for adding spacing

use hikari_palette::classes::{ClassesBuilder, SpaceClass};

use crate::prelude::*;

#[derive(Clone, Copy, PartialEq, Debug, Default)]
pub enum SpaceDirection {
    #[default]
    Horizontal,
    Vertical,
    Both,
}

/// Props for the [`Space`] component.
#[define_props]
pub struct SpaceProps {
    #[default(1)]
    pub size: u8,

    #[default]
    pub direction: SpaceDirection,

    #[default(false)]
    pub wrap: bool,

    #[default]
    pub class: String,

    pub children: Element,
}

/// Adds consistent spacing between elements in horizontal, vertical, or both directions.
#[component]
pub fn Space(props: SpaceProps) -> Element {
    let direction_class = match props.direction {
        SpaceDirection::Horizontal => SpaceClass::Horizontal,
        SpaceDirection::Vertical => SpaceClass::Vertical,
        SpaceDirection::Both => SpaceClass::Vertical, // Both uses vertical styling
    };

    let space_classes = ClassesBuilder::new()
        .add_typed(SpaceClass::Space)
        .add_typed(direction_class)
        .add_typed_if(SpaceClass::Wrap, props.wrap)
        .add(&props.class)
        .build();

    let size_px = props.size * 8;

    let style = match props.direction {
        SpaceDirection::Horizontal => {
            format!("width: {}px;", size_px)
        }
        SpaceDirection::Vertical => {
            format!("height: {}px;", size_px)
        }
        SpaceDirection::Both => {
            format!("width: {}px; height: {}px;", size_px, size_px)
        }
    };

    rsx! {
        div { class: space_classes, style,
            if props.wrap {
                div { {props.children} }
            } else {
                {props.children}
            }
        }
    }
}

pub struct SpaceComponent;

impl crate::styled::StyledComponent for SpaceComponent {
    fn styles() -> &'static str {
        r#"
.hi-space {
  display: inline-flex;
}

.hi-space-wrap {
  display: flex;
}

.hi-space-horizontal {
  display: inline-flex;
}

.hi-space-vertical {
  display: inline-flex;
  flex-direction: column;
}

.hi-space-both {
  display: inline-flex;
  flex-direction: column;
}
"#
    }

    fn name() -> &'static str {
        "space"
    }
}