Decouple `iced` from `coffee`

8 files changed, 1711 insertions, 0 deletions

diff --git a/src/widget/button.rs b/src/widget/button.rs
new file mode 100644
index 00000000..35fa6ca8
--- /dev/null
+++ b/src/widget/button.rs
@@ -0,0 +1,281 @@
+//! Allow your users to perform actions by pressing a button.
+//!
+//! A [`Button`] has some local [`State`] and a [`Class`].
+//!
+//! [`Button`]: struct.Button.html
+//! [`State`]: struct.State.html
+//! [`Class`]: enum.Class.html
+
+use crate::input::{mouse, ButtonState};
+use crate::{
+    Align, Element, Event, Hasher, Layout, MouseCursor, Node, Point, Rectangle,
+    Style, Widget,
+};
+
+use std::hash::Hash;
+
+/// A generic widget that produces a message when clicked.
+///
+/// It implements [`Widget`] when the associated [`core::Renderer`] implements
+/// the [`button::Renderer`] trait.
+///
+/// [`Widget`]: ../../core/trait.Widget.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+/// [`button::Renderer`]: trait.Renderer.html
+///
+/// # Example
+///
+/// ```
+/// use iced::{button, Button};
+///
+/// pub enum Message {
+///     ButtonClicked,
+/// }
+///
+/// let state = &mut button::State::new();
+///
+/// Button::new(state, "Click me!")
+///     .on_press(Message::ButtonClicked);
+/// ```
+pub struct Button<'a, Message> {
+    state: &'a mut State,
+    label: String,
+    class: Class,
+    on_press: Option<Message>,
+    style: Style,
+}
+
+impl<'a, Message> std::fmt::Debug for Button<'a, Message>
+where
+    Message: std::fmt::Debug,
+{
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("Button")
+            .field("state", &self.state)
+            .field("label", &self.label)
+            .field("class", &self.class)
+            .field("on_press", &self.on_press)
+            .field("style", &self.style)
+            .finish()
+    }
+}
+
+impl<'a, Message> Button<'a, Message> {
+    /// Creates a new [`Button`] with some local [`State`] and the given label.
+    ///
+    /// The default [`Class`] of a new [`Button`] is [`Class::Primary`].
+    ///
+    /// [`Button`]: struct.Button.html
+    /// [`State`]: struct.State.html
+    /// [`Class`]: enum.Class.html
+    /// [`Class::Primary`]: enum.Class.html#variant.Primary
+    pub fn new(state: &'a mut State, label: &str) -> Self {
+        Button {
+            state,
+            label: String::from(label),
+            class: Class::Primary,
+            on_press: None,
+            style: Style::default().min_width(100),
+        }
+    }
+
+    /// Sets the width of the [`Button`] in pixels.
+    ///
+    /// [`Button`]: struct.Button.html
+    pub fn width(mut self, width: u32) -> Self {
+        self.style = self.style.width(width);
+        self
+    }
+
+    /// Makes the [`Button`] fill the horizontal space of its container.
+    ///
+    /// [`Button`]: struct.Button.html
+    pub fn fill_width(mut self) -> Self {
+        self.style = self.style.fill_width();
+        self
+    }
+
+    /// Sets the alignment of the [`Button`] itself.
+    ///
+    /// This is useful if you want to override the default alignment given by
+    /// the parent container.
+    ///
+    /// [`Button`]: struct.Button.html
+    pub fn align_self(mut self, align: Align) -> Self {
+        self.style = self.style.align_self(align);
+        self
+    }
+
+    /// Sets the [`Class`] of the [`Button`].
+    ///
+    ///
+    /// [`Button`]: struct.Button.html
+    /// [`Class`]: enum.Class.html
+    pub fn class(mut self, class: Class) -> Self {
+        self.class = class;
+        self
+    }
+
+    /// Sets the message that will be produced when the [`Button`] is pressed.
+    ///
+    /// [`Button`]: struct.Button.html
+    pub fn on_press(mut self, msg: Message) -> Self {
+        self.on_press = Some(msg);
+        self
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer> for Button<'a, Message>
+where
+    Renderer: self::Renderer,
+    Message: Copy + std::fmt::Debug,
+{
+    fn node(&self, _renderer: &Renderer) -> Node {
+        Node::new(self.style.height(50))
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+    ) {
+        match event {
+            Event::Mouse(mouse::Event::Input {
+                button: mouse::Button::Left,
+                state,
+            }) => {
+                if let Some(on_press) = self.on_press {
+                    let bounds = layout.bounds();
+
+                    match state {
+                        ButtonState::Pressed => {
+                            self.state.is_pressed =
+                                bounds.contains(cursor_position);
+                        }
+                        ButtonState::Released => {
+                            let is_clicked = self.state.is_pressed
+                                && bounds.contains(cursor_position);
+
+                            self.state.is_pressed = false;
+
+                            if is_clicked {
+                                messages.push(on_press);
+                            }
+                        }
+                    }
+                }
+            }
+            _ => {}
+        }
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> MouseCursor {
+        renderer.draw(
+            cursor_position,
+            layout.bounds(),
+            self.state,
+            &self.label,
+            self.class,
+        )
+    }
+
+    fn hash(&self, state: &mut Hasher) {
+        self.style.hash(state);
+    }
+}
+
+/// The local state of a [`Button`].
+///
+/// [`Button`]: struct.Button.html
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub struct State {
+    is_pressed: bool,
+}
+
+impl State {
+    /// Creates a new [`State`].
+    ///
+    /// [`State`]: struct.State.html
+    pub fn new() -> State {
+        State::default()
+    }
+
+    /// Returns whether the associated [`Button`] is currently being pressed or
+    /// not.
+    ///
+    /// [`Button`]: struct.Button.html
+    pub fn is_pressed(&self) -> bool {
+        self.is_pressed
+    }
+}
+
+/// The type of a [`Button`].
+///
+/// ![Different buttons drawn by the built-in renderer](https://github.com/hecrj/coffee/blob/bda9818f823dfcb8a7ad0ff4940b4d4b387b5208/images/ui/button_classes.png?raw=true)
+///
+/// [`Button`]: struct.Button.html
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Class {
+    /// The [`Button`] performs the main action.
+    ///
+    /// [`Button`]: struct.Button.html
+    Primary,
+
+    /// The [`Button`] performs an alternative action.
+    ///
+    /// [`Button`]: struct.Button.html
+    Secondary,
+
+    /// The [`Button`] performs a productive action.
+    ///
+    /// [`Button`]: struct.Button.html
+    Positive,
+}
+
+/// The renderer of a [`Button`].
+///
+/// Your [`core::Renderer`] will need to implement this trait before being
+/// able to use a [`Button`] in your user interface.
+///
+/// [`Button`]: struct.Button.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+pub trait Renderer {
+    /// Draws a [`Button`].
+    ///
+    /// It receives:
+    ///   * the current cursor position
+    ///   * the bounds of the [`Button`]
+    ///   * the local state of the [`Button`]
+    ///   * the label of the [`Button`]
+    ///   * the [`Class`] of the [`Button`]
+    ///
+    /// [`Button`]: struct.Button.html
+    /// [`State`]: struct.State.html
+    /// [`Class`]: enum.Class.html
+    fn draw(
+        &mut self,
+        cursor_position: Point,
+        bounds: Rectangle<f32>,
+        state: &State,
+        label: &str,
+        class: Class,
+    ) -> MouseCursor;
+}
+
+impl<'a, Message, Renderer> From<Button<'a, Message>>
+    for Element<'a, Message, Renderer>
+where
+    Renderer: self::Renderer,
+    Message: 'static + Copy + std::fmt::Debug,
+{
+    fn from(button: Button<'a, Message>) -> Element<'a, Message, Renderer> {
+        Element::new(button)
+    }
+}
diff --git a/src/widget/checkbox.rs b/src/widget/checkbox.rs
new file mode 100644
index 00000000..c30b8308
--- /dev/null
+++ b/src/widget/checkbox.rs
@@ -0,0 +1,213 @@
+//! Show toggle controls using checkboxes.
+use std::hash::Hash;
+
+use crate::input::{mouse, ButtonState};
+use crate::widget::{text, Column, Row, Text};
+use crate::{
+    Align, Element, Event, Hasher, Layout, MouseCursor, Node, Point, Rectangle,
+    Widget,
+};
+
+/// A box that can be checked.
+///
+/// It implements [`Widget`] when the [`core::Renderer`] implements the
+/// [`checkbox::Renderer`] trait.
+///
+/// [`Widget`]: ../../core/trait.Widget.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+/// [`checkbox::Renderer`]: trait.Renderer.html
+///
+/// # Example
+///
+/// ```
+/// use iced::Checkbox;
+///
+/// #[derive(Debug, Clone, Copy)]
+/// pub enum Color {
+///     Black,
+///     White,
+/// }
+///
+/// impl Default for Color {
+///     fn default() -> Color {
+///         Color::Black
+///     }
+/// }
+///
+/// pub enum Message {
+///     CheckboxToggled(bool),
+/// }
+///
+/// fn some_checkbox(is_checked: bool) -> Checkbox<Color, Message> {
+///     Checkbox::new(is_checked, "Toggle me!", Message::CheckboxToggled)
+///         .label_color(Color::White)
+/// }
+/// ```
+pub struct Checkbox<Color, Message> {
+    is_checked: bool,
+    on_toggle: Box<dyn Fn(bool) -> Message>,
+    label: String,
+    label_color: Color,
+}
+
+impl<Color, Message> std::fmt::Debug for Checkbox<Color, Message>
+where
+    Color: std::fmt::Debug,
+{
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("Checkbox")
+            .field("is_checked", &self.is_checked)
+            .field("label", &self.label)
+            .field("label_color", &self.label_color)
+            .finish()
+    }
+}
+
+impl<Color, Message> Checkbox<Color, Message>
+where
+    Color: Default,
+{
+    /// Creates a new [`Checkbox`].
+    ///
+    /// It expects:
+    ///   * a boolean describing whether the [`Checkbox`] is checked or not
+    ///   * the label of the [`Checkbox`]
+    ///   * a function that will be called when the [`Checkbox`] is toggled.
+    ///   It receives the new state of the [`Checkbox`] and must produce a
+    ///   `Message`.
+    ///
+    /// [`Checkbox`]: struct.Checkbox.html
+    pub fn new<F>(is_checked: bool, label: &str, f: F) -> Self
+    where
+        F: 'static + Fn(bool) -> Message,
+    {
+        Checkbox {
+            is_checked,
+            on_toggle: Box::new(f),
+            label: String::from(label),
+            label_color: Color::default(),
+        }
+    }
+
+    /// Sets the [`Color`] of the label of the [`Checkbox`].
+    ///
+    /// [`Color`]: ../../../../graphics/struct.Color.html
+    /// [`Checkbox`]: struct.Checkbox.html
+    pub fn label_color(mut self, color: Color) -> Self {
+        self.label_color = color;
+        self
+    }
+}
+
+impl<Color, Message, Renderer> Widget<Message, Renderer>
+    for Checkbox<Color, Message>
+where
+    Color: 'static + Copy + Default + std::fmt::Debug,
+    Renderer: self::Renderer + text::Renderer<Color>,
+{
+    fn node(&self, renderer: &Renderer) -> Node {
+        Row::<(), Renderer>::new()
+            .spacing(15)
+            .align_items(Align::Center)
+            .push(Column::new().width(28).height(28))
+            .push(Text::new(&self.label))
+            .node(renderer)
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+    ) {
+        match event {
+            Event::Mouse(mouse::Event::Input {
+                button: mouse::Button::Left,
+                state: ButtonState::Pressed,
+            }) => {
+                let mouse_over = layout
+                    .children()
+                    .any(|child| child.bounds().contains(cursor_position));
+
+                if mouse_over {
+                    messages.push((self.on_toggle)(!self.is_checked));
+                }
+            }
+            _ => {}
+        }
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> MouseCursor {
+        let children: Vec<_> = layout.children().collect();
+
+        let text_bounds = children[1].bounds();
+
+        text::Renderer::draw(
+            renderer,
+            text_bounds,
+            &self.label,
+            20.0,
+            self.label_color,
+            text::HorizontalAlignment::Left,
+            text::VerticalAlignment::Top,
+        );
+
+        self::Renderer::draw(
+            renderer,
+            cursor_position,
+            children[0].bounds(),
+            text_bounds,
+            self.is_checked,
+        )
+    }
+
+    fn hash(&self, state: &mut Hasher) {
+        self.label.hash(state);
+    }
+}
+
+/// The renderer of a [`Checkbox`].
+///
+/// Your [`core::Renderer`] will need to implement this trait before being
+/// able to use a [`Checkbox`] in your user interface.
+///
+/// [`Checkbox`]: struct.Checkbox.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+pub trait Renderer {
+    /// Draws a [`Checkbox`].
+    ///
+    /// It receives:
+    ///   * the current cursor position
+    ///   * the bounds of the [`Checkbox`]
+    ///   * the bounds of the label of the [`Checkbox`]
+    ///   * whether the [`Checkbox`] is checked or not
+    ///
+    /// [`Checkbox`]: struct.Checkbox.html
+    fn draw(
+        &mut self,
+        cursor_position: Point,
+        bounds: Rectangle<f32>,
+        label_bounds: Rectangle<f32>,
+        is_checked: bool,
+    ) -> MouseCursor;
+}
+
+impl<'a, Color, Message, Renderer> From<Checkbox<Color, Message>>
+    for Element<'a, Message, Renderer>
+where
+    Color: 'static + Copy + Default + std::fmt::Debug,
+    Renderer: self::Renderer + text::Renderer<Color>,
+    Message: 'static,
+{
+    fn from(
+        checkbox: Checkbox<Color, Message>,
+    ) -> Element<'a, Message, Renderer> {
+        Element::new(checkbox)
+    }
+}
diff --git a/src/widget/column.rs b/src/widget/column.rs
new file mode 100644
index 00000000..18a68f60
--- /dev/null
+++ b/src/widget/column.rs
@@ -0,0 +1,223 @@
+use std::hash::Hash;
+
+use crate::{
+    Align, Element, Event, Hasher, Justify, Layout, MouseCursor, Node, Point,
+    Style, Widget,
+};
+
+/// A container that places its contents vertically.
+///
+/// A [`Column`] will try to fill the horizontal space of its container.
+///
+/// [`Column`]: struct.Column.html
+pub struct Column<'a, Message, Renderer> {
+    style: Style,
+    spacing: u16,
+    children: Vec<Element<'a, Message, Renderer>>,
+}
+
+impl<'a, Message, Renderer> std::fmt::Debug for Column<'a, Message, Renderer> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("Column")
+            .field("style", &self.style)
+            .field("spacing", &self.spacing)
+            .field("children", &self.children)
+            .finish()
+    }
+}
+
+impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
+    /// Creates an empty [`Column`].
+    ///
+    /// [`Column`]: struct.Column.html
+    pub fn new() -> Self {
+        let mut style = Style::default().fill_width();
+        style.0.flex_direction = stretch::style::FlexDirection::Column;
+
+        Column {
+            style,
+            spacing: 0,
+            children: Vec::new(),
+        }
+    }
+
+    /// Sets the vertical spacing _between_ elements in pixels.
+    ///
+    /// Custom margins per element do not exist in Coffee. You should use this
+    /// method instead! While less flexible, it helps you keep spacing between
+    /// elements consistent.
+    pub fn spacing(mut self, px: u16) -> Self {
+        self.spacing = px;
+        self
+    }
+
+    /// Sets the padding of the [`Column`] in pixels.
+    ///
+    /// [`Column`]: struct.Column.html
+    pub fn padding(mut self, px: u32) -> Self {
+        self.style = self.style.padding(px);
+        self
+    }
+
+    /// Sets the width of the [`Column`] in pixels.
+    ///
+    /// [`Column`]: struct.Column.html
+    pub fn width(mut self, width: u32) -> Self {
+        self.style = self.style.width(width);
+        self
+    }
+
+    /// Sets the height of the [`Column`] in pixels.
+    ///
+    /// [`Column`]: struct.Column.html
+    pub fn height(mut self, height: u32) -> Self {
+        self.style = self.style.height(height);
+        self
+    }
+
+    /// Sets the maximum width of the [`Column`] in pixels.
+    ///
+    /// [`Column`]: struct.Column.html
+    pub fn max_width(mut self, max_width: u32) -> Self {
+        self.style = self.style.max_width(max_width);
+        self
+    }
+
+    /// Sets the maximum height of the [`Column`] in pixels.
+    ///
+    /// [`Column`]: struct.Column.html
+    pub fn max_height(mut self, max_height: u32) -> Self {
+        self.style = self.style.max_height(max_height);
+        self
+    }
+
+    /// Sets the alignment of the [`Column`] itself.
+    ///
+    /// This is useful if you want to override the default alignment given by
+    /// the parent container.
+    ///
+    /// [`Column`]: struct.Column.html
+    pub fn align_self(mut self, align: Align) -> Self {
+        self.style = self.style.align_self(align);
+        self
+    }
+
+    /// Sets the horizontal alignment of the contents of the [`Column`] .
+    ///
+    /// [`Column`]: struct.Column.html
+    pub fn align_items(mut self, align: Align) -> Self {
+        self.style = self.style.align_items(align);
+        self
+    }
+
+    /// Sets the vertical distribution strategy for the contents of the
+    /// [`Column`] .
+    ///
+    /// [`Column`]: struct.Column.html
+    pub fn justify_content(mut self, justify: Justify) -> Self {
+        self.style = self.style.justify_content(justify);
+        self
+    }
+
+    /// Adds an [`Element`] to the [`Column`].
+    ///
+    /// [`Element`]: ../core/struct.Element.html
+    /// [`Column`]: struct.Column.html
+    pub fn push<E>(mut self, child: E) -> Column<'a, Message, Renderer>
+    where
+        E: Into<Element<'a, Message, Renderer>>,
+    {
+        self.children.push(child.into());
+        self
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer>
+    for Column<'a, Message, Renderer>
+{
+    fn node(&self, renderer: &Renderer) -> Node {
+        let mut children: Vec<Node> = self
+            .children
+            .iter()
+            .map(|child| {
+                let mut node = child.widget.node(renderer);
+
+                let mut style = node.0.style();
+                style.margin.bottom =
+                    stretch::style::Dimension::Points(self.spacing as f32);
+
+                node.0.set_style(style);
+                node
+            })
+            .collect();
+
+        if let Some(node) = children.last_mut() {
+            let mut style = node.0.style();
+            style.margin.bottom = stretch::style::Dimension::Undefined;
+
+            node.0.set_style(style);
+        }
+
+        Node::with_children(self.style, children)
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+    ) {
+        self.children.iter_mut().zip(layout.children()).for_each(
+            |(child, layout)| {
+                child
+                    .widget
+                    .on_event(event, layout, cursor_position, messages)
+            },
+        );
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> MouseCursor {
+        let mut cursor = MouseCursor::OutOfBounds;
+
+        self.children.iter().zip(layout.children()).for_each(
+            |(child, layout)| {
+                let new_cursor =
+                    child.widget.draw(renderer, layout, cursor_position);
+
+                if new_cursor != MouseCursor::OutOfBounds {
+                    cursor = new_cursor;
+                }
+            },
+        );
+
+        cursor
+    }
+
+    fn hash(&self, state: &mut Hasher) {
+        self.style.hash(state);
+        self.spacing.hash(state);
+
+        for child in &self.children {
+            child.widget.hash(state);
+        }
+    }
+}
+
+impl<'a, Message, Renderer> From<Column<'a, Message, Renderer>>
+    for Element<'a, Message, Renderer>
+where
+    Renderer: 'a,
+    Message: 'static,
+{
+    fn from(
+        column: Column<'a, Message, Renderer>,
+    ) -> Element<'a, Message, Renderer> {
+        Element::new(column)
+    }
+}
diff --git a/src/widget/panel.rs b/src/widget/panel.rs
new file mode 100644
index 00000000..28e5989c
--- /dev/null
+++ b/src/widget/panel.rs
@@ -0,0 +1,94 @@
+use std::hash::Hash;
+
+use crate::graphics::{Point, Rectangle};
+use crate::ui::core::{
+    Event, Hasher, Layout, MouseCursor, Node, Style, Widget,
+};
+
+pub struct Panel<'a, Message, Renderer> {
+    style: Style,
+    content: Box<Widget<Message, Renderer> + 'a>,
+}
+
+impl<'a, Message, Renderer> Panel<'a, Message, Renderer> {
+    pub fn new(content: impl Widget<Message, Renderer> + 'a) -> Self {
+        Panel {
+            style: Style::default().padding(20),
+            content: Box::new(content),
+        }
+    }
+
+    pub fn width(mut self, width: u32) -> Self {
+        self.style = self.style.width(width);
+        self
+    }
+
+    pub fn max_width(mut self, max_width: u32) -> Self {
+        self.style = self.style.max_width(max_width);
+        self
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer>
+    for Panel<'a, Message, Renderer>
+where
+    Renderer: self::Renderer,
+{
+    fn node(&self, renderer: &Renderer) -> Node {
+        Node::with_children(self.style, vec![self.content.node(renderer)])
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+    ) {
+        [&mut self.content]
+            .iter_mut()
+            .zip(layout.children())
+            .for_each(|(child, layout)| {
+                child.on_event(event, layout, cursor_position, messages)
+            });
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout,
+        cursor_position: Point,
+    ) -> MouseCursor {
+        let bounds = layout.bounds();
+        let mut cursor = MouseCursor::OutOfBounds;
+        renderer.draw(bounds);
+
+        [&self.content].iter().zip(layout.children()).for_each(
+            |(child, layout)| {
+                let new_cursor = child.draw(renderer, layout, cursor_position);
+
+                if new_cursor != MouseCursor::OutOfBounds {
+                    cursor = new_cursor;
+                }
+            },
+        );
+
+        if cursor == MouseCursor::OutOfBounds {
+            if bounds.contains(cursor_position) {
+                MouseCursor::Idle
+            } else {
+                MouseCursor::OutOfBounds
+            }
+        } else {
+            cursor
+        }
+    }
+
+    fn hash(&self, state: &mut Hasher) {
+        self.style.hash(state);
+    }
+}
+
+pub trait Renderer {
+    fn draw(&mut self, bounds: Rectangle<f32>);
+}
diff --git a/src/widget/radio.rs b/src/widget/radio.rs
new file mode 100644
index 00000000..8a678ec8
--- /dev/null
+++ b/src/widget/radio.rs
@@ -0,0 +1,219 @@
+//! Create choices using radio buttons.
+use crate::input::{mouse, ButtonState};
+use crate::widget::{text, Column, Row, Text};
+use crate::{
+    Align, Element, Event, Hasher, Layout, MouseCursor, Node, Point, Rectangle,
+    Widget,
+};
+
+use std::hash::Hash;
+
+/// A circular button representing a choice.
+///
+/// It implements [`Widget`] when the [`core::Renderer`] implements the
+/// [`radio::Renderer`] trait.
+///
+/// [`Widget`]: ../../core/trait.Widget.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+/// [`radio::Renderer`]: trait.Renderer.html
+///
+/// # Example
+/// ```
+/// use iced::{Column, Radio};
+///
+/// #[derive(Debug, Clone, Copy)]
+/// pub enum Color {
+///     Black,
+/// }
+///
+/// impl Default for Color {
+///     fn default() -> Color {
+///         Color::Black
+///     }
+/// }
+///
+/// #[derive(Debug, Clone, Copy, PartialEq, Eq)]
+/// pub enum Choice {
+///     A,
+///     B,
+/// }
+///
+/// #[derive(Debug, Clone, Copy)]
+/// pub enum Message {
+///     RadioSelected(Choice),
+/// }
+///
+/// let selected_choice = Some(Choice::A);
+///
+/// Radio::<Color, Message>::new(Choice::A, "This is A", selected_choice, Message::RadioSelected)
+///     .label_color(Color::Black);
+/// ```
+///
+/// ![Checkbox drawn by the built-in renderer](https://github.com/hecrj/coffee/blob/bda9818f823dfcb8a7ad0ff4940b4d4b387b5208/images/ui/radio.png?raw=true)
+pub struct Radio<Color, Message> {
+    is_selected: bool,
+    on_click: Message,
+    label: String,
+    label_color: Color,
+}
+
+impl<Color, Message> std::fmt::Debug for Radio<Color, Message>
+where
+    Color: std::fmt::Debug,
+    Message: std::fmt::Debug,
+{
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("Radio")
+            .field("is_selected", &self.is_selected)
+            .field("on_click", &self.on_click)
+            .field("label", &self.label)
+            .field("label_color", &self.label_color)
+            .finish()
+    }
+}
+
+impl<Color, Message> Radio<Color, Message>
+where
+    Color: Default,
+{
+    /// Creates a new [`Radio`] button.
+    ///
+    /// It expects:
+    ///   * the value related to the [`Radio`] button
+    ///   * the label of the [`Radio`] button
+    ///   * the current selected value
+    ///   * a function that will be called when the [`Radio`] is selected. It
+    ///   receives the value of the radio and must produce a `Message`.
+    ///
+    /// [`Radio`]: struct.Radio.html
+    pub fn new<F, V>(value: V, label: &str, selected: Option<V>, f: F) -> Self
+    where
+        V: Eq + Copy,
+        F: 'static + Fn(V) -> Message,
+    {
+        Radio {
+            is_selected: Some(value) == selected,
+            on_click: f(value),
+            label: String::from(label),
+            label_color: Color::default(),
+        }
+    }
+
+    /// Sets the [`Color`] of the label of the [`Radio`].
+    ///
+    /// [`Color`]: ../../../../graphics/struct.Color.html
+    /// [`Radio`]: struct.Radio.html
+    pub fn label_color(mut self, color: Color) -> Self {
+        self.label_color = color;
+        self
+    }
+}
+
+impl<Color, Message, Renderer> Widget<Message, Renderer>
+    for Radio<Color, Message>
+where
+    Color: 'static + Copy + Default + std::fmt::Debug,
+    Renderer: self::Renderer + text::Renderer<Color>,
+    Message: Copy + std::fmt::Debug,
+{
+    fn node(&self, renderer: &Renderer) -> Node {
+        Row::<(), Renderer>::new()
+            .spacing(15)
+            .align_items(Align::Center)
+            .push(Column::new().width(28).height(28))
+            .push(Text::new(&self.label))
+            .node(renderer)
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+    ) {
+        match event {
+            Event::Mouse(mouse::Event::Input {
+                button: mouse::Button::Left,
+                state: ButtonState::Pressed,
+            }) => {
+                if layout.bounds().contains(cursor_position) {
+                    messages.push(self.on_click);
+                }
+            }
+            _ => {}
+        }
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> MouseCursor {
+        let children: Vec<_> = layout.children().collect();
+
+        let mut text_bounds = children[1].bounds();
+        text_bounds.y -= 2.0;
+
+        text::Renderer::draw(
+            renderer,
+            text_bounds,
+            &self.label,
+            20.0,
+            self.label_color,
+            text::HorizontalAlignment::Left,
+            text::VerticalAlignment::Top,
+        );
+
+        self::Renderer::draw(
+            renderer,
+            cursor_position,
+            children[0].bounds(),
+            layout.bounds(),
+            self.is_selected,
+        )
+    }
+
+    fn hash(&self, state: &mut Hasher) {
+        self.label.hash(state);
+    }
+}
+
+/// The renderer of a [`Radio`] button.
+///
+/// Your [`core::Renderer`] will need to implement this trait before being
+/// able to use a [`Radio`] button in your user interface.
+///
+/// [`Radio`]: struct.Radio.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+pub trait Renderer {
+    /// Draws a [`Radio`] button.
+    ///
+    /// It receives:
+    ///   * the current cursor position
+    ///   * the bounds of the [`Radio`]
+    ///   * the bounds of the label of the [`Radio`]
+    ///   * whether the [`Radio`] is selected or not
+    ///
+    /// [`Radio`]: struct.Radio.html
+    fn draw(
+        &mut self,
+        cursor_position: Point,
+        bounds: Rectangle<f32>,
+        label_bounds: Rectangle<f32>,
+        is_selected: bool,
+    ) -> MouseCursor;
+}
+
+impl<'a, Color, Message, Renderer> From<Radio<Color, Message>>
+    for Element<'a, Message, Renderer>
+where
+    Color: 'static + Copy + Default + std::fmt::Debug,
+    Renderer: self::Renderer + text::Renderer<Color>,
+    Message: 'static + Copy + std::fmt::Debug,
+{
+    fn from(checkbox: Radio<Color, Message>) -> Element<'a, Message, Renderer> {
+        Element::new(checkbox)
+    }
+}
diff --git a/src/widget/row.rs b/src/widget/row.rs
new file mode 100644
index 00000000..9e0f9d4c
--- /dev/null
+++ b/src/widget/row.rs
@@ -0,0 +1,218 @@
+use std::hash::Hash;
+
+use crate::{
+    Align, Element, Event, Hasher, Justify, Layout, MouseCursor, Node, Point,
+    Style, Widget,
+};
+
+/// A container that places its contents horizontally.
+///
+/// A [`Row`] will try to fill the horizontal space of its container.
+///
+/// [`Row`]: struct.Row.html
+pub struct Row<'a, Message, Renderer> {
+    style: Style,
+    spacing: u16,
+    children: Vec<Element<'a, Message, Renderer>>,
+}
+
+impl<'a, Message, Renderer> std::fmt::Debug for Row<'a, Message, Renderer> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("Row")
+            .field("style", &self.style)
+            .field("spacing", &self.spacing)
+            .field("children", &self.children)
+            .finish()
+    }
+}
+
+impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
+    /// Creates an empty [`Row`].
+    ///
+    /// [`Row`]: struct.Row.html
+    pub fn new() -> Self {
+        Row {
+            style: Style::default().fill_width(),
+            spacing: 0,
+            children: Vec::new(),
+        }
+    }
+
+    /// Sets the horizontal spacing _between_ elements in pixels.
+    ///
+    /// Custom margins per element do not exist in Coffee. You should use this
+    /// method instead! While less flexible, it helps you keep spacing between
+    /// elements consistent.
+    pub fn spacing(mut self, px: u16) -> Self {
+        self.spacing = px;
+        self
+    }
+
+    /// Sets the padding of the [`Row`] in pixels.
+    ///
+    /// [`Row`]: struct.Row.html
+    pub fn padding(mut self, px: u32) -> Self {
+        self.style = self.style.padding(px);
+        self
+    }
+
+    /// Sets the width of the [`Row`] in pixels.
+    ///
+    /// [`Row`]: struct.Row.html
+    pub fn width(mut self, width: u32) -> Self {
+        self.style = self.style.width(width);
+        self
+    }
+
+    /// Sets the height of the [`Row`] in pixels.
+    ///
+    /// [`Row`]: struct.Row.html
+    pub fn height(mut self, height: u32) -> Self {
+        self.style = self.style.height(height);
+        self
+    }
+
+    /// Sets the maximum width of the [`Row`] in pixels.
+    ///
+    /// [`Row`]: struct.Row.html
+    pub fn max_width(mut self, max_width: u32) -> Self {
+        self.style = self.style.max_width(max_width);
+        self
+    }
+
+    /// Sets the maximum height of the [`Row`] in pixels.
+    ///
+    /// [`Row`]: struct.Row.html
+    pub fn max_height(mut self, max_height: u32) -> Self {
+        self.style = self.style.max_height(max_height);
+        self
+    }
+
+    /// Sets the alignment of the [`Row`] itself.
+    ///
+    /// This is useful if you want to override the default alignment given by
+    /// the parent container.
+    ///
+    /// [`Row`]: struct.Row.html
+    pub fn align_self(mut self, align: Align) -> Self {
+        self.style = self.style.align_self(align);
+        self
+    }
+
+    /// Sets the vertical alignment of the contents of the [`Row`] .
+    ///
+    /// [`Row`]: struct.Row.html
+    pub fn align_items(mut self, align: Align) -> Self {
+        self.style = self.style.align_items(align);
+        self
+    }
+
+    /// Sets the horizontal distribution strategy for the contents of the
+    /// [`Row`] .
+    ///
+    /// [`Row`]: struct.Row.html
+    pub fn justify_content(mut self, justify: Justify) -> Self {
+        self.style = self.style.justify_content(justify);
+        self
+    }
+
+    /// Adds an [`Element`] to the [`Row`].
+    ///
+    /// [`Element`]: ../core/struct.Element.html
+    /// [`Row`]: struct.Row.html
+    pub fn push<E>(mut self, child: E) -> Row<'a, Message, Renderer>
+    where
+        E: Into<Element<'a, Message, Renderer>>,
+    {
+        self.children.push(child.into());
+        self
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer>
+    for Row<'a, Message, Renderer>
+{
+    fn node(&self, renderer: &Renderer) -> Node {
+        let mut children: Vec<Node> = self
+            .children
+            .iter()
+            .map(|child| {
+                let mut node = child.widget.node(renderer);
+
+                let mut style = node.0.style();
+                style.margin.end =
+                    stretch::style::Dimension::Points(self.spacing as f32);
+
+                node.0.set_style(style);
+                node
+            })
+            .collect();
+
+        if let Some(node) = children.last_mut() {
+            let mut style = node.0.style();
+            style.margin.end = stretch::style::Dimension::Undefined;
+
+            node.0.set_style(style);
+        }
+
+        Node::with_children(self.style, children)
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+    ) {
+        self.children.iter_mut().zip(layout.children()).for_each(
+            |(child, layout)| {
+                child
+                    .widget
+                    .on_event(event, layout, cursor_position, messages)
+            },
+        );
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> MouseCursor {
+        let mut cursor = MouseCursor::OutOfBounds;
+
+        self.children.iter().zip(layout.children()).for_each(
+            |(child, layout)| {
+                let new_cursor =
+                    child.widget.draw(renderer, layout, cursor_position);
+
+                if new_cursor != MouseCursor::OutOfBounds {
+                    cursor = new_cursor;
+                }
+            },
+        );
+
+        cursor
+    }
+
+    fn hash(&self, state: &mut Hasher) {
+        self.style.hash(state);
+        self.spacing.hash(state);
+
+        for child in &self.children {
+            child.widget.hash(state);
+        }
+    }
+}
+
+impl<'a, Message, Renderer> From<Row<'a, Message, Renderer>>
+    for Element<'a, Message, Renderer>
+where
+    Renderer: 'a,
+    Message: 'static,
+{
+    fn from(row: Row<'a, Message, Renderer>) -> Element<'a, Message, Renderer> {
+        Element::new(row)
+    }
+}
diff --git a/src/widget/slider.rs b/src/widget/slider.rs
new file mode 100644
index 00000000..75a0fdaf
--- /dev/null
+++ b/src/widget/slider.rs
@@ -0,0 +1,240 @@
+//! Display an interactive selector of a single value from a range of values.
+//!
+//! A [`Slider`] has some local [`State`].
+//!
+//! [`Slider`]: struct.Slider.html
+//! [`State`]: struct.State.html
+use std::hash::Hash;
+use std::ops::RangeInclusive;
+
+use crate::input::{mouse, ButtonState};
+use crate::{
+    Element, Event, Hasher, Layout, MouseCursor, Node, Point, Rectangle, Style,
+    Widget,
+};
+
+/// An horizontal bar and a handle that selects a single value from a range of
+/// values.
+///
+/// A [`Slider`] will try to fill the horizontal space of its container.
+///
+/// It implements [`Widget`] when the associated [`core::Renderer`] implements
+/// the [`slider::Renderer`] trait.
+///
+/// [`Slider`]: struct.Slider.html
+/// [`Widget`]: ../../core/trait.Widget.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+/// [`slider::Renderer`]: trait.Renderer.html
+///
+/// # Example
+/// ```
+/// use iced::{slider, Slider};
+///
+/// pub enum Message {
+///     SliderChanged(f32),
+/// }
+///
+/// let state = &mut slider::State::new();
+/// let value = 50.0;
+///
+/// Slider::new(state, 0.0..=100.0, value, Message::SliderChanged);
+/// ```
+pub struct Slider<'a, Message> {
+    state: &'a mut State,
+    range: RangeInclusive<f32>,
+    value: f32,
+    on_change: Box<dyn Fn(f32) -> Message>,
+    style: Style,
+}
+
+impl<'a, Message> std::fmt::Debug for Slider<'a, Message> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("Slider")
+            .field("state", &self.state)
+            .field("range", &self.range)
+            .field("value", &self.value)
+            .field("style", &self.style)
+            .finish()
+    }
+}
+
+impl<'a, Message> Slider<'a, Message> {
+    /// Creates a new [`Slider`].
+    ///
+    /// It expects:
+    ///   * the local [`State`] of the [`Slider`]
+    ///   * an inclusive range of possible values
+    ///   * the current value of the [`Slider`]
+    ///   * a function that will be called when the [`Slider`] is dragged.
+    ///   It receives the new value of the [`Slider`] and must produce a
+    ///   `Message`.
+    ///
+    /// [`Slider`]: struct.Slider.html
+    /// [`State`]: struct.State.html
+    pub fn new<F>(
+        state: &'a mut State,
+        range: RangeInclusive<f32>,
+        value: f32,
+        on_change: F,
+    ) -> Self
+    where
+        F: 'static + Fn(f32) -> Message,
+    {
+        Slider {
+            state,
+            value: value.max(*range.start()).min(*range.end()),
+            range,
+            on_change: Box::new(on_change),
+            style: Style::default().min_width(100).fill_width(),
+        }
+    }
+
+    /// Sets the width of the [`Slider`] in pixels.
+    ///
+    /// [`Slider`]: struct.Slider.html
+    pub fn width(mut self, width: u32) -> Self {
+        self.style = self.style.width(width);
+        self
+    }
+}
+
+impl<'a, Message, Renderer> Widget<Message, Renderer> for Slider<'a, Message>
+where
+    Renderer: self::Renderer,
+{
+    fn node(&self, _renderer: &Renderer) -> Node {
+        Node::new(self.style.height(25))
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+    ) {
+        let mut change = || {
+            let bounds = layout.bounds();
+
+            if cursor_position.x <= bounds.x {
+                messages.push((self.on_change)(*self.range.start()));
+            } else if cursor_position.x >= bounds.x + bounds.width {
+                messages.push((self.on_change)(*self.range.end()));
+            } else {
+                let percent = (cursor_position.x - bounds.x) / bounds.width;
+                let value = (self.range.end() - self.range.start()) * percent
+                    + self.range.start();
+
+                messages.push((self.on_change)(value));
+            }
+        };
+
+        match event {
+            Event::Mouse(mouse::Event::Input {
+                button: mouse::Button::Left,
+                state,
+            }) => match state {
+                ButtonState::Pressed => {
+                    if layout.bounds().contains(cursor_position) {
+                        change();
+                        self.state.is_dragging = true;
+                    }
+                }
+                ButtonState::Released => {
+                    self.state.is_dragging = false;
+                }
+            },
+            Event::Mouse(mouse::Event::CursorMoved { .. }) => {
+                if self.state.is_dragging {
+                    change();
+                }
+            }
+            _ => {}
+        }
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> MouseCursor {
+        renderer.draw(
+            cursor_position,
+            layout.bounds(),
+            self.state,
+            self.range.clone(),
+            self.value,
+        )
+    }
+
+    fn hash(&self, state: &mut Hasher) {
+        self.style.hash(state);
+    }
+}
+
+/// The local state of a [`Slider`].
+///
+/// [`Slider`]: struct.Slider.html
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub struct State {
+    is_dragging: bool,
+}
+
+impl State {
+    /// Creates a new [`State`].
+    ///
+    /// [`State`]: struct.State.html
+    pub fn new() -> State {
+        State::default()
+    }
+
+    /// Returns whether the associated [`Slider`] is currently being dragged or
+    /// not.
+    ///
+    /// [`Slider`]: struct.Slider.html
+    pub fn is_dragging(&self) -> bool {
+        self.is_dragging
+    }
+}
+
+/// The renderer of a [`Slider`].
+///
+/// Your [`core::Renderer`] will need to implement this trait before being
+/// able to use a [`Slider`] in your user interface.
+///
+/// [`Slider`]: struct.Slider.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+pub trait Renderer {
+    /// Draws a [`Slider`].
+    ///
+    /// It receives:
+    ///   * the current cursor position
+    ///   * the bounds of the [`Slider`]
+    ///   * the local state of the [`Slider`]
+    ///   * the range of values of the [`Slider`]
+    ///   * the current value of the [`Slider`]
+    ///
+    /// [`Slider`]: struct.Slider.html
+    /// [`State`]: struct.State.html
+    /// [`Class`]: enum.Class.html
+    fn draw(
+        &mut self,
+        cursor_position: Point,
+        bounds: Rectangle<f32>,
+        state: &State,
+        range: RangeInclusive<f32>,
+        value: f32,
+    ) -> MouseCursor;
+}
+
+impl<'a, Message, Renderer> From<Slider<'a, Message>>
+    for Element<'a, Message, Renderer>
+where
+    Renderer: self::Renderer,
+    Message: 'static,
+{
+    fn from(slider: Slider<'a, Message>) -> Element<'a, Message, Renderer> {
+        Element::new(slider)
+    }
+}
diff --git a/src/widget/text.rs b/src/widget/text.rs
new file mode 100644
index 00000000..e1ce8b16
--- /dev/null
+++ b/src/widget/text.rs
@@ -0,0 +1,223 @@
+//! Write some text for your users to read.
+use crate::{
+    Element, Hasher, Layout, MouseCursor, Node, Point, Rectangle, Style, Widget,
+};
+
+use std::hash::Hash;
+
+/// A fragment of text.
+///
+/// It implements [`Widget`] when the associated [`core::Renderer`] implements
+/// the [`text::Renderer`] trait.
+///
+/// [`Widget`]: ../../core/trait.Widget.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+/// [`text::Renderer`]: trait.Renderer.html
+///
+/// # Example
+///
+/// ```
+/// use iced::Text;
+///
+/// Text::<(f32, f32, f32)>::new("I <3 iced!")
+///     .size(40)
+///     .color((0.0, 0.0, 1.0));
+/// ```
+#[derive(Debug, Clone)]
+pub struct Text<Color> {
+    content: String,
+    size: u16,
+    color: Color,
+    style: Style,
+    horizontal_alignment: HorizontalAlignment,
+    vertical_alignment: VerticalAlignment,
+}
+
+impl<Color> Text<Color>
+where
+    Color: Default,
+{
+    /// Create a new fragment of [`Text`] with the given contents.
+    ///
+    /// [`Text`]: struct.Text.html
+    pub fn new(label: &str) -> Self {
+        Text {
+            content: String::from(label),
+            size: 20,
+            color: Color::default(),
+            style: Style::default().fill_width(),
+            horizontal_alignment: HorizontalAlignment::Left,
+            vertical_alignment: VerticalAlignment::Top,
+        }
+    }
+
+    /// Sets the size of the [`Text`] in pixels.
+    ///
+    /// [`Text`]: struct.Text.html
+    pub fn size(mut self, size: u16) -> Self {
+        self.size = size;
+        self
+    }
+
+    /// Sets the [`Color`] of the [`Text`].
+    ///
+    /// [`Text`]: struct.Text.html
+    /// [`Color`]: ../../../graphics/struct.Color.html
+    pub fn color(mut self, color: Color) -> Self {
+        self.color = color;
+        self
+    }
+
+    /// Sets the width of the [`Text`] boundaries in pixels.
+    ///
+    /// [`Text`]: struct.Text.html
+    pub fn width(mut self, width: u32) -> Self {
+        self.style = self.style.width(width);
+        self
+    }
+
+    /// Sets the height of the [`Text`] boundaries in pixels.
+    ///
+    /// [`Text`]: struct.Text.html
+    pub fn height(mut self, height: u32) -> Self {
+        self.style = self.style.height(height);
+        self
+    }
+
+    /// Sets the [`HorizontalAlignment`] of the [`Text`].
+    ///
+    /// [`Text`]: struct.Text.html
+    /// [`HorizontalAlignment`]: ../../../graphics/enum.HorizontalAlignment.html
+    pub fn horizontal_alignment(
+        mut self,
+        alignment: HorizontalAlignment,
+    ) -> Self {
+        self.horizontal_alignment = alignment;
+        self
+    }
+
+    /// Sets the [`VerticalAlignment`] of the [`Text`].
+    ///
+    /// [`Text`]: struct.Text.html
+    /// [`VerticalAlignment`]: ../../../graphics/enum.VerticalAlignment.html
+    pub fn vertical_alignment(mut self, alignment: VerticalAlignment) -> Self {
+        self.vertical_alignment = alignment;
+        self
+    }
+}
+
+impl<Message, Renderer, Color> Widget<Message, Renderer> for Text<Color>
+where
+    Color: Copy + std::fmt::Debug,
+    Renderer: self::Renderer<Color>,
+{
+    fn node(&self, renderer: &Renderer) -> Node {
+        renderer.node(self.style, &self.content, self.size as f32)
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        layout: Layout<'_>,
+        _cursor_position: Point,
+    ) -> MouseCursor {
+        renderer.draw(
+            layout.bounds(),
+            &self.content,
+            self.size as f32,
+            self.color,
+            self.horizontal_alignment,
+            self.vertical_alignment,
+        );
+
+        MouseCursor::OutOfBounds
+    }
+
+    fn hash(&self, state: &mut Hasher) {
+        self.style.hash(state);
+
+        self.content.hash(state);
+        self.size.hash(state);
+    }
+}
+
+/// The renderer of a [`Text`] fragment.
+///
+/// Your [`core::Renderer`] will need to implement this trait before being
+/// able to use a [`Text`] in your user interface.
+///
+/// [`Text`]: struct.Text.html
+/// [`core::Renderer`]: ../../core/trait.Renderer.html
+pub trait Renderer<Color> {
+    /// Creates a [`Node`] with the given [`Style`] for the provided [`Text`]
+    /// contents and size.
+    ///
+    /// You should probably use [`Node::with_measure`] to allow [`Text`] to
+    /// adapt to the dimensions of its container.
+    ///
+    /// [`Node`]: ../../core/struct.Node.html
+    /// [`Style`]: ../../core/struct.Style.html
+    /// [`Text`]: struct.Text.html
+    /// [`Node::with_measure`]: ../../core/struct.Node.html#method.with_measure
+    fn node(&self, style: Style, content: &str, size: f32) -> Node;
+
+    /// Draws a [`Text`] fragment.
+    ///
+    /// It receives:
+    ///   * the bounds of the [`Text`]
+    ///   * the contents of the [`Text`]
+    ///   * the size of the [`Text`]
+    ///   * the color of the [`Text`]
+    ///   * the [`HorizontalAlignment`] of the [`Text`]
+    ///   * the [`VerticalAlignment`] of the [`Text`]
+    ///
+    /// [`Text`]: struct.Text.html
+    /// [`HorizontalAlignment`]: ../../../graphics/enum.HorizontalAlignment.html
+    /// [`VerticalAlignment`]: ../../../graphics/enum.VerticalAlignment.html
+    fn draw(
+        &mut self,
+        bounds: Rectangle<f32>,
+        content: &str,
+        size: f32,
+        color: Color,
+        horizontal_alignment: HorizontalAlignment,
+        vertical_alignment: VerticalAlignment,
+    );
+}
+
+impl<'a, Message, Renderer, Color> From<Text<Color>>
+    for Element<'a, Message, Renderer>
+where
+    Color: 'static + Copy + std::fmt::Debug,
+    Renderer: self::Renderer<Color>,
+{
+    fn from(text: Text<Color>) -> Element<'a, Message, Renderer> {
+        Element::new(text)
+    }
+}
+
+/// The horizontal alignment of some resource.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum HorizontalAlignment {
+    /// Align left
+    Left,
+
+    /// Horizontally centered
+    Center,
+
+    /// Align right
+    Right,
+}
+
+/// The vertical alignment of some resource.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum VerticalAlignment {
+    /// Align top
+    Top,
+
+    /// Vertically centered
+    Center,
+
+    /// Align bottom
+    Bottom,
+}