Text("Hello World")
    .color("#FF0000")
    .fontSize(20)
    .fontWeight("bold")

// Uniform padding on all sides
Box { }.padding(16)

// Named arguments for specific sides
Box { }.padding(top: 16, right: 12, bottom: 16, left: 12)

// Horizontal and vertical
Box { }.padding(horizontal: 16, vertical: 8)

// Uniform margin
Box { }.margin(16)

// Named arguments
Box { }.margin(top: 8, bottom: 8)

Column {
    Text("Item 1")
    Text("Item 2")
}
.gap(12)

Text("Red text").color("#FF0000")
Text("Blue text").color("blue")
Text("RGB").color("rgb(100, 150, 200)")
Text("With alpha").color("rgba(0, 0, 0, 0.5)")

Box { }
    .backgroundColor("#3B82F6")

Button { Text("Submit") }
    .backgroundColor("rgb(59, 130, 246)")

Box { }.opacity(0.5)    // 50% transparent
Image("bg.jpg").opacity(0.3)  // Faded background

Text("Small").fontSize(12)
Text("Normal").fontSize(16)
Text("Large").fontSize(24)
Text("Heading").fontSize(32)

Text("Normal").fontWeight("normal")
Text("Medium").fontWeight("500")
Text("Bold").fontWeight("bold")

Text("Serif").fontFamily("serif")
Text("Sans").fontFamily("sans-serif")
Text("Mono").fontFamily("monospace")
Text("Custom").fontFamily("Inter, system-ui, sans-serif")

Text("Normal text").fontStyle("normal")
Text("Emphasized text").fontStyle("italic")

Text("Left aligned").textAlign("left")
Text("Centered").textAlign("center")
Text("Right aligned").textAlign("right")
Text("Justified text that spans multiple lines").textAlign("justify")

Text("Underlined").textDecoration("underline")
Text("Crossed out").textDecoration("line-through")
Text("Both").textDecoration("underline line-through")

Text("uppercase").textTransform("uppercase")   // UPPERCASE
Text("LOWERCASE").textTransform("lowercase")   // lowercase
Text("capitalize this").textTransform("capitalize")  // Capitalize This

Paragraph("Long text content that spans multiple lines...")
    .lineHeight(1.6)

Text("Tight spacing").lineHeight(1.2)
Text("Loose spacing").lineHeight(2.0)

Text("SPACED OUT").letterSpacing(2)
Text("Tight").letterSpacing(-0.5)

Text("This is a very long text that might overflow the container...")
    .maxLines(2)
    .textOverflow("ellipsis")

// Single line with ellipsis
Text("Long title...").maxLines(1).textOverflow("ellipsis")

// Width only (uses default color and style)
Box { }.border(1)

// Full configuration
Box { }.border(width: 2, color: "#3B82F6", style: "solid", radius: 8)

Box { }.borderWidth(1)
Box { }.borderWidth(2)

Box { }
    .borderWidth(1)
    .borderColor("#E5E7EB")

Input(placeholder: "Email")
    .borderWidth(1)
    .borderColor("#3B82F6")

Box { }.borderWidth(1).borderStyle("solid")
Box { }.borderWidth(1).borderStyle("dashed")
Box { }.borderWidth(1).borderStyle("dotted")

// Uniform radius on all corners
Box { }.borderRadius(8)

// Fully circular (with equal width/height)
Avatar("user.jpg").size(48).borderRadius(24)

// Individual corners
Box { }.borderRadius(topLeft: 8, topRight: 8, bottomLeft: 0, bottomRight: 0)

// CSS-style shadow syntax
Card { }
    .boxShadow("0 4px 6px rgba(0, 0, 0, 0.1)")

// Named arguments
Card { }
    .shadow(blur: 8, spread: 2, color: "rgba(0, 0, 0, 0.1)")

// Multiple shadows
Card { }
    .boxShadow("0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)")

Card { }.elevation(1)   // Subtle lift
Card { }.elevation(4)   // Standard card
Card { }.elevation(8)   // Floating element
Card { }.elevation(16)  // Modal/dialog

Box { }.blur(4)
Image("background.jpg").blur(10)

Image("photo.jpg").filter("grayscale(100%)")
Image("photo.jpg").filter("sepia(50%)")
Image("photo.jpg").filter("brightness(1.2) contrast(1.1)")

Box { }
    .backdropFilter("blur(10px)")
    .backgroundColor("rgba(255, 255, 255, 0.5)")

// Frosted glass header
Header { }
    .backdropFilter("blur(20px) saturate(180%)")
    .backgroundColor("rgba(255, 255, 255, 0.7)")

Box { }.rotate(45)       // 45 degrees clockwise
Box { }.rotate(-90)      // 90 degrees counter-clockwise
Icon("arrow").rotate(180)  // Flip upside down

Box { }.scale(1.5)       // 150% size
Box { }.scale(0.5)       // 50% size
Box { }.scaleX(2)        // Stretch horizontally
Box { }.scaleY(0.8)      // Compress vertically

Box { }.translateX(20)   // Move 20 points right
Box { }.translateY(-10)  // Move 10 points up

// Combine for diagonal movement
Badge("New")
    .translateX(10)
    .translateY(-10)

Box { }.transform("rotate(45deg) scale(1.2)")
Box { }.transform("translateX(20px) translateY(10px)")
Box { }.transform("skewX(10deg)")

Button { Text("Hover me") }
    .transition("all 0.2s ease")

// Specific properties
Box { }
    .transition("background-color 0.3s ease, transform 0.2s ease-out")

// Different timing functions
Box { }.transition("opacity 0.5s linear")
Box { }.transition("transform 0.3s ease-in-out")

Button { }.cursor("pointer")
Link { }.cursor("pointer")
Box { }.cursor("grab")
Input { }.cursor("text")

// Horizontal gradient
Box { }
    .linearGradient("to right, #3B82F6, #8B5CF6")

// Vertical gradient
Box { }
    .linearGradient("to bottom, #FF6B6B, #4ECDC4")

// Diagonal with multiple colors
Box { }
    .linearGradient("to bottom right, #667eea, #764ba2, #f093fb")

// With specific stops
Box { }
    .linearGradient("90deg, #FF0000 0%, #00FF00 50%, #0000FF 100%")

Box { }
    .radialGradient("circle, #3B82F6, #1E40AF")

Box { }
    .radialGradient("ellipse at center, #FF6B6B 0%, #4ECDC4 100%")

// Different padding at different screen sizes
Box { }
    .padding({default: 8, md: 16, lg: 24})

// Responsive font sizes
Text("Responsive")
    .fontSize({default: 14, sm: 16, md: 18, lg: 24})

// Multiple responsive properties
Box { }
    .width({default: "100%", md: "50%", lg: "33%"})
    .padding({default: 8, md: 16, lg: 32})

// Button with hover and active states
Button { Text("Click me") }
    .backgroundColor({default: "#3B82F6", hover: "#2563EB", active: "#1D4ED8"})

// Input with focus styling
Input(placeholder: "Email")
    .borderColor({default: "#D1D5DB", focus: "#3B82F6"})

// Disabled state
Button { Text("Submit") }
    .opacity({default: 1, disabled: 0.5})

// Apply Tailwind classes
Text("Hello").tw("text-blue-500 font-bold p-4")

// Combine with other applicators
Box { }
    .tw("rounded-lg shadow-md")
    .backgroundColor("#F3F4F6")

// Responsive text sizing
Text("Responsive")
    .tw("text-sm md:text-base lg:text-xl")

// Responsive padding
Box { }
    .tw("p-2 sm:p-4 md:p-6 lg:p-8 xl:p-12")

// Responsive layout
Box { }
    .tw("w-full md:w-1/2 lg:w-1/3")

// Button with hover and active states
Button { Text("Click me") }
    .tw("bg-blue-500 hover:bg-blue-700 active:bg-blue-900")

// Input with focus state
Input(placeholder: "Email")
    .tw("border-gray-300 focus:border-blue-500 focus:ring-2")

// Disabled state
Button { Text("Disabled") }
    .tw("bg-gray-400 disabled:opacity-50 disabled:cursor-not-allowed")

Text("Mixed styling")
    .tw("font-bold text-center")
    .fontSize({default: 14, md: 18, lg: 24})
    .padding({default: 8, md: 16})

Column {
    Image("product.jpg")
        .tw("w-full rounded-t-lg")

    Column {
        Text("Product Name")
            .tw("text-lg md:text-xl font-bold")

        Text("$29.99")
            .tw("text-green-600 font-semibold")

        Text("A great product description that highlights the key features...")
            .tw("text-sm text-gray-600 mt-2")

        Button { Text("Add to Cart") }
            .tw("mt-4 w-full bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded")
    }
    .tw("p-4 md:p-6")
}
.tw("bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow max-w-sm")