blinc_cn 0.5.0

Blinc Component Library - shadcn-style themed components built on blinc_layout primitives
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

//! Typography components
//!
//! Wraps typography helpers from `blinc_layout::typography` with `cn-*` CSS classes
//! for use with the blinc_cn component library. These provide semantic text elements
//! similar to HTML.
//!
//! # Headings
//!
//! ```ignore
//! use blinc_cn::prelude::*;
//!
//! // Named heading helpers
//! cn::h1("Welcome")           // 32px, bold, .class("cn-h1")
//! cn::h2("Section Title")     // 24px, bold, .class("cn-h2")
//! cn::h3("Subsection")        // 20px, semibold, .class("cn-h3")
//! cn::h4("Small Heading")     // 18px, semibold, .class("cn-h4")
//! cn::h5("Minor Heading")     // 16px, medium, .class("cn-h5")
//! cn::h6("Smallest Heading")  // 14px, medium, .class("cn-h6")
//!
//! // Or use the generic heading() with level
//! cn::heading(1, "Welcome")   // Same as h1()
//! cn::heading(3, "Section")   // Same as h3()
//! ```
//!
//! # Inline Text
//!
//! ```ignore
//! // Bold text
//! cn::b("Important")
//! cn::strong("Also bold")
//!
//! // Spans (neutral text wrapper)
//! cn::span("Some text")
//!
//! // Small text
//! cn::small("Fine print")
//!
//! // Muted/secondary text
//! cn::muted("Less important")
//!
//! // Paragraph with proper line height
//! cn::p("This is a paragraph...")
//!
//! // Caption text
//! cn::caption("Figure 1: Diagram")
//!
//! // Inline code
//! cn::inline_code("div()")
//! ```
//!
//! # Chained Text
//!
//! ```ignore
//! // Compose inline text with different styles
//! cn::chained_text([
//!     cn::span("This is "),
//!     cn::b("bold"),
//!     cn::span(" and "),
//!     cn::inline_code("code"),
//!     cn::span(" text."),
//! ])
//! ```

use blinc_layout::text::Text;

// Re-export helpers that don't need cn-* classes
pub use blinc_layout::typography::{
    // Inline text helpers
    b,
    chained_text,
    inline_code,
    label,
    small,
    span,
    strong,
};

/// Create a level-1 heading (32px, bold) with `.class("cn-h1")`
pub fn h1(content: impl Into<String>) -> Text {
    blinc_layout::typography::h1(content).class("cn-h1")
}

/// Create a level-2 heading (24px, bold) with `.class("cn-h2")`
pub fn h2(content: impl Into<String>) -> Text {
    blinc_layout::typography::h2(content).class("cn-h2")
}

/// Create a level-3 heading (20px, semibold) with `.class("cn-h3")`
pub fn h3(content: impl Into<String>) -> Text {
    blinc_layout::typography::h3(content).class("cn-h3")
}

/// Create a level-4 heading (18px, semibold) with `.class("cn-h4")`
pub fn h4(content: impl Into<String>) -> Text {
    blinc_layout::typography::h4(content).class("cn-h4")
}

/// Create a level-5 heading (16px, medium) with `.class("cn-h5")`
pub fn h5(content: impl Into<String>) -> Text {
    blinc_layout::typography::h5(content).class("cn-h5")
}

/// Create a level-6 heading (14px, medium) with `.class("cn-h6")`
pub fn h6(content: impl Into<String>) -> Text {
    blinc_layout::typography::h6(content).class("cn-h6")
}

/// Create a heading with a specific level (1-6) with `.class("cn-h{level}")`
///
/// Levels outside 1-6 are clamped to the nearest valid level.
pub fn heading(level: u8, content: impl Into<String>) -> Text {
    let clamped = level.clamp(1, 6);
    let class_name = format!("cn-h{}", clamped);
    blinc_layout::typography::heading(level, content).class(class_name)
}

/// Create a paragraph text element (16px, line-height 1.5) with `.class("cn-p")`
pub fn p(content: impl Into<String>) -> Text {
    blinc_layout::typography::p(content).class("cn-p")
}

/// Create muted/secondary text with `.class("cn-muted")`
pub fn muted(content: impl Into<String>) -> Text {
    blinc_layout::typography::muted(content).class("cn-muted")
}

/// Create caption text (12px, muted) with `.class("cn-caption")`
pub fn caption(content: impl Into<String>) -> Text {
    blinc_layout::typography::caption(content).class("cn-caption")
}