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
}
}
}