Input

use iced::widget::{column, text};
use iced::{Element, Length};
use iced_cube::input;
use iced_cube::theme::{Tokens, text_size};

#[derive(Debug, Clone)]
pub enum Message {
    NameChanged(String),
    Submit,
}

#[derive(Debug, Default)]
pub struct Example {
    name: String,
    greeting: Option<String>,
}

impl Example {
    pub fn update(&mut self, message: Message) {
        match message {
            Message::NameChanged(name) => self.name = name,
            Message::Submit => self.greeting = Some(format!("Hello, {}!", self.name.trim())),
        }
    }

    pub fn view(&self) -> Element<'_, Message> {
        let hint = self.greeting.as_deref().unwrap_or("Press Enter to submit.");

        column![
            input("Your name", &self.name)
                .on_input(Message::NameChanged)
                .on_submit(Message::Submit),
            text(hint).size(text_size::SM).style(|theme| text::Style {
                color: Some(Tokens::of(theme).muted_foreground),
            }),
        ]
        .spacing(12)
        .width(Length::Fixed(320.0))
        .into()
    }
}

crates/gallery/src/stories/input/default.rs

use iced::widget::row;
use iced::{Alignment, Element, Length};
use iced_cube::primitives::icon_button::Variant;
use iced_cube::{icon_button, input, lucide};

#[derive(Debug, Clone)]
pub enum Message {
    PasswordChanged(String),
    ToggleVisibility,
}

#[derive(Debug, Default)]
pub struct Example {
    password: String,
    visible: bool,
}

impl Example {
    pub fn update(&mut self, message: Message) {
        match message {
            Message::PasswordChanged(password) => self.password = password,
            Message::ToggleVisibility => self.visible = !self.visible,
        }
    }

    pub fn view(&self) -> Element<'_, Message> {
        let toggle = if self.visible {
            lucide!(EyeOff)
        } else {
            lucide!(Eye)
        };

        row![
            input("Password", &self.password)
                .icon(lucide!(LockKeyhole))
                .secure(!self.visible)
                .on_input(Message::PasswordChanged),
            icon_button(toggle)
                .variant(Variant::Outline)
                .on_press(Message::ToggleVisibility),
        ]
        .spacing(8)
        .align_y(Alignment::Center)
        .width(Length::Fixed(320.0))
        .into()
    }
}

crates/gallery/src/stories/input/password.rs

use iced::widget::column;
use iced::{Element, Length};
use iced_cube::{input, lucide};

#[derive(Debug, Clone)]
pub enum Message {
    UsernameChanged(String),
}

#[derive(Debug)]
pub struct Example {
    username: String,
}

impl Default for Example {
    fn default() -> Self {
        Self {
            username: "ada lovelace".into(),
        }
    }
}

impl Example {
    pub fn update(&mut self, message: Message) {
        let Message::UsernameChanged(username) = message;
        self.username = username;
    }

    pub fn view(&self) -> Element<'_, Message> {
        let invalid = self.username.contains(char::is_whitespace);

        column![
            input("Username", &self.username)
                .icon(lucide!(AtSign))
                .invalid(invalid)
                .on_input(Message::UsernameChanged),
            input("Workspace", "acme-corp").icon(lucide!(Building)),
        ]
        .spacing(12)
        .width(Length::Fixed(320.0))
        .into()
    }
}

crates/gallery/src/stories/input/states.rs