teksilo_widgets/styles/

recipe_text_input_style.rs

// SPDX-License-Identifier: MPL-2.0
// SPDX-FileCopyrightText: 2026 FernTech

//! Default `TextInputStyle` impl driven by paint-recipe data.
//!
//! `RecipeTextInputStyle` ships the IntUI chrome: a bordered rectangle
//! around the editor area with a horizontal-padding inset, the border
//! thickening and recolouring on focus, and validation tints (error /
//! warning / corrected) overriding focus when set. The validation
//! strip below the field is the widget's responsibility — the trait
//! recipe is just the bordered frame.
//!
//! The recipe describes border / fill / corner radius only; the rest
//! stays on the widget. Caret blinking, IME composition, placeholder
//! layering, leading / trailing slots, clear button, the
//! ValidationStrip below — all stay on the public `TextInput` widget.
//!
//! Variants:
//!
//! - `Outlined` (default) — 1 dp border in the theme's default border
//!   role; thickens to `focus_ring_width` on focus.
//! - `Filled` — accent-subtle background, no border. Material 3 style.
//! - `Underline` — transparent surface with a single bottom border.
//!   For now this is rendered as Outlined with the same border on all
//!   sides; a true bottom-only stroke arrives once `BorderPosition` /
//!   per-side stroke recipes land.
//! - `Bare` — no chrome at all. Returns the editor verbatim. Used by
//!   parents that own the chrome themselves (search fields, combo box
//!   filter input).

use teksilo_core::build_context::BuildContext;
use teksilo_core::color_prop::ColorProp;
use teksilo_core::signal::Signal;
use teksilo_core::styles::{
    TextInputStyle, TextInputStyleConfig, TextInputValidationLevel, TextInputVariant,
};
use teksilo_core::widget_id::WidgetId;
use teksilo_tokens::{BorderRole, CornerRadius, InputTokens, SurfaceRole, TargetRole};

use crate::primitives::{MinSize, Padding, RectWidget, ZStack};
use teksilo_core::styles::density::{dp, spacing};

// IntUI design tokens for TextInput / TextInputField (also used by
// SpinBox, DateEdit, DateRangeEdit, DateTimeEdit since they share the
// same form-field baseline). The recipe and form-field composers own
// these constants.
pub const TEXT_FIELD_HEIGHT: f32 = 28.0;
pub const TEXT_FIELD_PADDING_HORIZONTAL: f32 = 4.0;
pub const TEXT_FIELD_PADDING_VERTICAL: f32 = 4.0;
pub const TEXT_FIELD_BORDER_WIDTH: f32 = 1.0;
pub const TEXT_FIELD_CORNER_RADIUS: f32 = 4.0;
pub const TEXT_FIELD_CARET_WIDTH: f32 = 1.0;
pub const TEXT_FIELD_VALIDATION_STRIP_GAP: f32 = 4.0;
pub const TEXT_FIELD_ERROR_PULSE_DURATION_MS: u32 = 240;
pub const TEXT_FIELD_CORRECTED_PULSE_DURATION_MS: u32 = 1500;
pub const TEXT_FIELD_MASK_PLACEHOLDER_CHAR: char = '_';

/// Dimension recipe for [`RecipeTextInputStyle`].
///
/// Every `pub const TEXT_FIELD_*` is mirrored as a typed field so callers
/// can override individual dimensions without writing a full custom style.
#[derive(Debug, Clone, Copy, PartialEq)]
pub struct TextInputRecipe {
    pub height: f32,
    pub padding_horizontal: f32,
    pub padding_vertical: f32,
    pub border_width: f32,
    pub corner_radius: f32,
    pub caret_width: f32,
    pub validation_strip_gap: f32,
    pub error_pulse_duration_ms: u32,
    pub corrected_pulse_duration_ms: u32,
    pub mask_placeholder_char: char,
}

impl TextInputRecipe {
    /// This recipe's dimensions resolved against a density's [`InputTokens`].
    ///
    /// [`Default`] is `for_tokens(&InputTokens::default())` — the Compact
    /// ladder — so the shipped values below are the Compact column by
    /// construction and cannot drift from it.
    pub fn for_tokens(tokens: &InputTokens) -> Self {
        Self {
            height: dp(TEXT_FIELD_HEIGHT, TargetRole::Target, tokens),
            padding_horizontal: spacing(TEXT_FIELD_PADDING_HORIZONTAL, tokens),
            padding_vertical: spacing(TEXT_FIELD_PADDING_VERTICAL, tokens),
            border_width: TEXT_FIELD_BORDER_WIDTH,
            corner_radius: TEXT_FIELD_CORNER_RADIUS,
            caret_width: TEXT_FIELD_CARET_WIDTH,
            validation_strip_gap: spacing(TEXT_FIELD_VALIDATION_STRIP_GAP, tokens),
            error_pulse_duration_ms: TEXT_FIELD_ERROR_PULSE_DURATION_MS,
            corrected_pulse_duration_ms: TEXT_FIELD_CORRECTED_PULSE_DURATION_MS,
            mask_placeholder_char: TEXT_FIELD_MASK_PLACEHOLDER_CHAR,
        }
    }
}

impl Default for TextInputRecipe {
    fn default() -> Self {
        Self::for_tokens(&InputTokens::default())
    }
}

/// The heights a `TextInput` builds its field with, resolved in one place so
/// the text area, the widget's own minimum and the style's minimum cannot
/// disagree.
///
/// The text area is one line of text and the minimum is a floor under the
/// whole frame; the frame is the larger of the two plus its chrome, and a frame
/// taller than its content centres the line. A minimum never squeezes the text
/// area — the line would be clipped — so a floor below what the text needs has
/// no visible effect.
#[derive(Debug, Clone, Copy, PartialEq)]
pub(crate) struct TextFieldHeights {
    /// The text area's height to hand the inner field, at a text scale of 1.
    /// `None` when a text style is set: the field then sizes it from the
    /// style's line, and follows the theme when the style is a role.
    pub text_area: Option<f32>,
    /// The frame's minimum height.
    pub min_height: f32,
    /// The minimum the style is told
    /// ([`TextInputStyleConfig::min_height`]). `None` leaves the style its
    /// own, which is the default path.
    pub style_min_height: Option<f32>,
}

impl TextFieldHeights {
    /// Resolve the heights from the app's explicit `min_height`, whether a
    /// text style is set, and the density.
    ///
    /// - Neither set: the IntUI field exactly as it has always been — an
    ///   18 dp text area (the control height less its border and padding)
    ///   in a frame of at least [`TextInputRecipe::height`].
    /// - A text style: the style's line sizes the text area, and the floor
    ///   drops to the density's target size, the WCAG 2.5.8 bar, so a small
    ///   style makes a short field and a large style a tall one.
    /// - An explicit minimum: honoured as given, in both the frame and the
    ///   style.
    pub(crate) fn resolve(min_height: Option<f32>, styled: bool, tokens: &InputTokens) -> Self {
        let floor = match (min_height, styled) {
            (Some(height), _) => Some(height),
            (None, true) => Some(tokens.target_size),
            (None, false) => None,
        };
        let text_area = (!styled).then(|| {
            (TEXT_FIELD_HEIGHT - 2.0 * TEXT_FIELD_BORDER_WIDTH - 2.0 * TEXT_FIELD_PADDING_VERTICAL)
                .max(0.0)
        });
        Self {
            text_area,
            min_height: floor.unwrap_or_else(|| TextInputRecipe::for_tokens(tokens).height),
            style_min_height: floor,
        }
    }
}

/// Default `TextInputStyle` shipped with Teksilo.
#[derive(Debug, Default, Clone, Copy)]
pub struct RecipeTextInputStyle {
    pub recipe: TextInputRecipe,
}

impl RecipeTextInputStyle {
    pub fn new(recipe: TextInputRecipe) -> Self {
        Self { recipe }
    }

    /// This style with every dimension resolved against a density's
    /// [`InputTokens`], as `RecipeTextInputStyle::for_tokens(&ctx.theme().input)` at
    /// the widget's own build site.
    ///
    /// [`Default`] is the `TargetDensity::Compact` projection, so a Compact
    /// tree gets exactly the values this module documents.
    pub fn for_tokens(tokens: &InputTokens) -> Self {
        Self {
            recipe: TextInputRecipe::for_tokens(tokens),
        }
    }
}

impl TextInputStyle for RecipeTextInputStyle {
    fn make_body(&self, cfg: &TextInputStyleConfig, ctx: &mut BuildContext) -> WidgetId {
        let theme = ctx.theme();
        let border_width = self.recipe.border_width;
        let focus_ring_width = theme.shape.focus_ring_width;
        let padding_h = self.recipe.padding_horizontal;
        let corner_radius = self.recipe.corner_radius;
        // The widget's resolved minimum wins over the recipe's control height:
        // an app that asked for a shorter or taller field gets it here too.
        let height = cfg.min_height.unwrap_or(self.recipe.height);

        // Bare variant: no chrome at all. Just hand the editor back
        // wrapped in a MinSize so consumers still get a predictable
        // intrinsic height.
        if matches!(cfg.variant, TextInputVariant::Bare) {
            return ctx.add(MinSize::new(0.0, height).child(cfg.editor));
        }

        // Derived border role: disabled trumps everything (an inert field
        // must not shout a validation error the user cannot act on), then
        // validation outcome trumps focus, and focus trumps default.
        let border_role = derive_border_role(
            cfg.is_focused.clone(),
            cfg.validation.clone(),
            cfg.is_disabled.clone(),
        );

        // Border width: thickens to focus_ring_width when focused,
        // regardless of validation. For `Filled`, force 0.
        let variant = cfg.variant;
        let border_width_signal = cfg.is_focused.map(move |focused| match variant {
            TextInputVariant::Filled => 0.0,
            _ => {
                if *focused {
                    focus_ring_width
                } else {
                    border_width
                }
            }
        });

        // Background role. `SurfaceRole::Field` is `Content`'s twin for
        // *interactive* surfaces: identical while enabled, but it dims to
        // `SurfaceRole::Disabled` inside `ColorProp::resolve` at paint time.
        // Going through that hook (rather than switching the role from
        // `cfg.is_disabled` here) is what makes a field dim when an
        // *ancestor* is disabled — `is_disabled` is derived from
        // `effective_enabled_signal`, which cannot see ancestors, since a
        // widget's parent is not wired yet during its own `build()`.
        // Filled keeps its faint tint, and dims from the signal.
        let bg_role: ColorProp = match variant {
            TextInputVariant::Filled => ColorProp::DynamicSurfaceRole(cfg.is_disabled.map(|d| {
                if *d {
                    SurfaceRole::Disabled
                } else {
                    SurfaceRole::Hover
                }
            })),
            _ => SurfaceRole::Field.into(),
        };

        let bg = RectWidget::new()
            .background(bg_role)
            .border_color(border_role)
            .border_width(border_width_signal)
            .corner_radius(CornerRadius::uniform(corner_radius));
        let bg_id = ctx.add(bg);

        // Horizontal-only padding so leading / trailing slots inside
        // the editor row sit flush against top and bottom of the frame.
        let padded_id = ctx.add(Padding::new(0.0, padding_h, 0.0, padding_h).child(cfg.editor));

        let zstack_id = ctx.add(ZStack::new().child(bg_id).child(padded_id));
        ctx.add(MinSize::new(0.0, height).child(zstack_id))
    }
}

/// Derive the border role from disabled + focus + validation. Disabled
/// outranks both — an inert field reads as grey, not as a live error the
/// user could still fix. Below that, validation tints override the focus
/// tint, so a typo in a focused field still reads as an error rather than
/// as "focused and fine".
fn derive_border_role(
    is_focused: Signal<bool>,
    validation: Signal<TextInputValidationLevel>,
    is_disabled: Signal<bool>,
) -> Signal<BorderRole> {
    is_focused
        .zip3(&validation, &is_disabled)
        .map(|(focused, level, disabled)| {
            if *disabled {
                return BorderRole::Disabled;
            }
            match *level {
                TextInputValidationLevel::Error => BorderRole::Error,
                TextInputValidationLevel::Warning => BorderRole::Warning,
                // Corrected: accent tint (matches the IntUI "we changed
                // something — look here briefly" cue). The decay back to
                // default is driven by the widget setting the validation
                // signal back to None after the corrected pulse.
                TextInputValidationLevel::Corrected | TextInputValidationLevel::Info => {
                    BorderRole::Focused
                }
                TextInputValidationLevel::None => {
                    if *focused {
                        BorderRole::Focused
                    } else {
                        // `Field`, not `Default`: same colour while enabled,
                        // but it dims at paint time even when the field is
                        // only disabled via an ancestor. See `bg_role`.
                        BorderRole::Field
                    }
                }
            }
        })
}