tairitsu-style 0.5.1

Type-safe CSS property builders for Tairitsu framework
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

//! Example demonstrating the UtilityClass system and ClassesBuilder integration.
//!
//! This example shows how to:
//! - Use utility classes with ClassesBuilder
//! - Generate CSS from utility classes
//! - Work with variants (responsive, state)
//! - Use arbitrary values

use tairitsu_style::*;

fn main() {
    println!("=== Utility Class System Demo ===\n");

    // Basic utility class usage
    println!("1. Basic Utility Classes:");
    let classes = ClassesBuilder::new()
        .add_utility("flex")
        .add_utility("p-4")
        .add_utility("text-center")
        .build();
    println!("   Classes: {}", classes);

    // With CSS generation
    let css = ClassesBuilder::new()
        .add_utility("flex")
        .add_utility("p-4")
        .generate_stylesheet();
    println!("   CSS:\n{}\n", css);

    // Responsive variants
    println!("2. Responsive Variants:");
    let classes = ClassesBuilder::new()
        .add_utility("p-4")
        .add_utility("md:p-8")
        .add_utility("lg:p-12")
        .build();
    println!("   Classes: {}", classes);

    let css = ClassesBuilder::new()
        .add_utilities("p-4 md:p-8 lg:p-12")
        .generate_stylesheet();
    println!("   CSS:\n{}\n", css);

    // State variants
    println!("3. State Variants:");
    let classes = ClassesBuilder::new()
        .add_utility("text-center")
        .add_utility("hover:text-left")
        .add_utility("focus:text-right")
        .build();
    println!("   Classes: {}", classes);

    let css = ClassesBuilder::new()
        .add_utilities("text-center hover:text-left focus:text-right")
        .generate_stylesheet();
    println!("   CSS:\n{}\n", css);

    // Combined variants
    println!("4. Combined Responsive + State Variants:");
    let classes = ClassesBuilder::new().add_utility("md:hover:flex").build();
    println!("   Classes: {}", classes);

    let (_, css) = ClassesBuilder::new().add_utility_with_css("md:hover:flex");
    if let Some(css) = css {
        println!("   CSS: {}\n", css);
    }

    // Arbitrary values
    println!("5. Arbitrary Values:");
    let classes = ClassesBuilder::new()
        .add_utility("p-[10px]")
        .add_utility("m-[1.5rem]")
        .add_utility("text-[#ff0000]")
        .build();
    println!("   Classes: {}", classes);

    let css = ClassesBuilder::new()
        .add_utilities("p-[10px] m-[1.5rem]")
        .generate_stylesheet();
    println!("   CSS:\n{}\n", css);

    // Mixed regular and utility classes
    println!("6. Mixed Regular and Utility Classes:");
    let classes = ClassesBuilder::new()
        .add("container")
        .add_utility("flex")
        .add_if("active", true)
        .add_utility_if("p-4", true)
        .add_utility_if("m-4", false)
        .build();
    println!("   Classes: {}\n", classes);

    // Conditional utility classes
    println!("7. Conditional Utility Classes:");
    let is_large = true;
    let is_active = false;

    let classes = ClassesBuilder::new()
        .add_utility("flex")
        .add_utility_if("text-lg", is_large)
        .add_utility_if("text-sm", !is_large)
        .add_utility_if("bg-blue-500", is_active)
        .build();
    println!("   Classes: {}\n", classes);

    // Typography utilities
    println!("8. Typography Utilities:");
    let classes = ClassesBuilder::new()
        .add_utilities("text-xl font-bold text-center")
        .build();
    println!("   Classes: {}", classes);

    let css = ClassesBuilder::new()
        .add_utilities("text-xl font-bold text-center")
        .generate_stylesheet();
    println!("   CSS:\n{}\n", css);

    // Layout utilities
    println!("9. Layout Utilities:");
    let classes = ClassesBuilder::new()
        .add_utilities("flex flex-col justify-center items-center")
        .build();
    println!("   Classes: {}", classes);

    let css = ClassesBuilder::new()
        .add_utilities("flex flex-col justify-center items-center")
        .generate_stylesheet();
    println!("   CSS:\n{}\n", css);

    // Spacing utilities
    println!("10. Spacing Utilities:");
    let classes = ClassesBuilder::new()
        .add_utilities("p-4 m-2 px-6 py-8 mt-10 mb-20 ml-30 mr-40")
        .build();
    println!("   Classes: {}", classes);

    let css = ClassesBuilder::new()
        .add_utilities("p-4 m-2")
        .generate_stylesheet();
    println!("   CSS:\n{}\n", css);

    // Position utilities
    println!("11. Position Utilities:");
    let classes = ClassesBuilder::new()
        .add_utilities("relative absolute fixed")
        .build();
    println!("   Classes: {}", classes);

    let css = ClassesBuilder::new()
        .add_utilities("absolute")
        .generate_stylesheet();
    println!("   CSS:\n{}\n", css);

    // Complex real-world example
    println!("12. Real-world Card Component:");
    let card_classes = ClassesBuilder::new()
        .add("card")
        .add_utility("relative")
        .add_utility("bg-white")
        .add_utility("rounded-lg")
        .add_utility("shadow-lg")
        .add_utility("p-6")
        .add_utility("hover:shadow-xl")
        .add_utility("transition-shadow")
        .build();
    println!("   Classes: {}\n", card_classes);

    println!("=== Demo Complete ===");
}