live_design! {
    // Standard Button
    <Button> { text: "Click me" }

    // Button with icon
    <Button> {
        draw_icon: {
            svg_file: dep("crate://self/resources/icon.svg")
            color: #fff
        }
        text: "With Icon"
    }

    // Gradient Buttons
    <ButtonGradientX> { text: "Gradient X" }
    <ButtonGradientY> { text: "Gradient Y" }

    // Icon-only Button
    <ButtonIcon> {
        draw_icon: {
            svg_file: dep("crate://self/resources/icon.svg")
        }
    }
}

live_design! {
    // Standard TextInput
    <TextInput> { empty_text: "Enter text..." }

    // Password input
    <TextInput> {
        empty_text: "Password"
        password: true
    }

    // Multi-line
    <TextInput> {
        empty_text: "Enter description"
        height: Fill
    }
}

live_design! {
    // Standard Slider
    <Slider> { min: 0, max: 100, value: 50 }

    // Round Slider
    <SliderRound> { min: 0, max: 1.0, value: 0.5 }

    // Minimal Slider
    <SliderMinimal> { min: 0, max: 100, value: 25 }
}

live_design! {
    // CheckBox
    <CheckBox> { text: "Enable feature" }

    // Toggle Switch
    <CheckBoxToggle> { text: "Dark mode" }

    // Radio Button Group
    <View> {
        flow: Down, spacing: 10
        <RadioButton> { radio_id: 1, text: "Option 1" }
        <RadioButton> { radio_id: 2, text: "Option 2" }
        <RadioButton> { radio_id: 3, text: "Option 3" }
    }
}

live_design! {
    <PortalList> {
        drag_scrolling: true
        item_template: <ItemView> {
            // Template for each item
        }
    }
}