hikari-components 0.1.5

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
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

// hi-components/src/layout/container.rs
// Container component for responsive content wrapping

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

use crate::{prelude::*, theme::use_layout_direction};

#[derive(Clone, Copy, PartialEq, Eq, Debug, Default)]
pub enum ContainerSize {
    #[default]
    Medium,
    Small,
    Large,
    Xl,
}

/// Props for the [`Container`] component.
#[define_props]
pub struct ContainerProps {
    #[default]
    pub children: Element,

    #[default]
    pub size: ContainerSize,

    #[default]
    pub max_width: Option<String>,

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

    #[default]
    pub rtl: Option<bool>,

    #[default]
    pub class: String,
}

impl ContainerSize {
    pub fn max_width(&self) -> &'static str {
        match self {
            ContainerSize::Small => "640px",
            ContainerSize::Medium => "960px",
            ContainerSize::Large => "1200px",
            ContainerSize::Xl => "1400px",
        }
    }
}

/// A responsive container that wraps content with a configurable max-width and optional centering.
#[component]
pub fn Container(props: ContainerProps) -> Element {
    let layout_direction = use_layout_direction();
    let is_rtl = props.rtl.unwrap_or_else(|| layout_direction.is_rtl());

    let size_class = match props.size {
        ContainerSize::Small => ContainerClass::Sm,
        ContainerSize::Medium => ContainerClass::Md,
        ContainerSize::Large => ContainerClass::Lg,
        ContainerSize::Xl => ContainerClass::Xl,
    };

    let mut builder = ClassesBuilder::new()
        .add_typed(ContainerClass::Container)
        .add_typed(size_class)
        .add_typed_if(ContainerClass::Centered, props.center);

    if is_rtl {
        builder = builder.add_typed(ContainerClass::Rtl);
    }

    let container_classes = builder.add(&props.class).build();

    let max_width = props
        .max_width
        .unwrap_or_else(|| props.size.max_width().to_string());

    let center_style = if props.center {
        "margin-inline-start: auto; margin-inline-end: auto;"
    } else {
        { "" }
    };

    rsx! {
        div {
            class: container_classes,
            style: "max-width: {max_width}; {center_style}",
            {props.children}
        }
    }
}

pub struct ContainerComponent;

impl crate::styled::StyledComponent for ContainerComponent {
    fn styles() -> &'static str {
        r#"
.hi-container {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  box-sizing: border-box;
}

.hi-container-centered {
  margin-left: auto;
  margin-right: auto;
}

.hi-container-sm {
  max-width: 640px;
}

.hi-container-md {
  max-width: 960px;
}

.hi-container-lg {
  max-width: 1200px;
}

.hi-container-xl {
  max-width: 1400px;
}

[data-theme="dark"] .hi-container {
  background: var(--hi-surface);
}
"#
    }

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