Padding

// All sides equal
Padding(.all(16)) {
    Text("Padded Text")
}

// Or use the modifier
Text("Padded Text")
    .padding(.all(16))

import Foundation
import JavaScriptKit
import Observation
import Shaft
import ShaftWeb

Shaft.backend = ShaftWebBackend { _ in
    JSObject.global.document.querySelector("canvas")
}

runApp(PaddingDemoApp())

final class PaddingDemoApp: StatelessWidget {
    func build(context: any BuildContext) -> any Widget {
        Column(mainAxisAlignment: .center, spacing: 16) {
            Text("Padding Examples")
                .textStyle(.init(fontSize: 24, fontWeight: .bold))

            // All sides
            Text("All: 20")
                .padding(.all(20))
                .decoration(.box(color: Color(0xFF_E3F2FD)))

            // Horizontal & Vertical
            Text("H:30, V:10")
                .padding(.symmetric(vertical: 10, horizontal: 30))
                .decoration(.box(color: Color(0xFF_E8F5E9)))

            // Individual sides
            Text("L:40, T:10")
                .padding(.only(left: 40, top: 10))
                .decoration(.box(color: Color(0xFF_FFF3E0)))

            // Modifier syntax
            Text("Using modifier")
                .decoration(.box(color: Color(0xFF_FCE4EC)))
                .padding(.all(16))
        }
        .padding(.all(24))
    }
}

.padding(.all(20))  // 20px on all sides

.padding(.symmetric(horizontal: 20, vertical: 10))
// horizontal: left and right
// vertical: top and bottom

.padding(.only(
    left: 10,
    top: 20,
    right: 10,
    bottom: 20
))

.padding(.only(left: 20, right: 20))  // top and bottom are 0
.padding(.only(bottom: 16))            // only bottom padding