<LumexNumbox TValue="double?"
             Label="Temperature °C"
             Placeholder="Enter the temperature"
             Radius="@Radius.Large"
             Clearable="@true"
             StartContent="@_thermometer"
             Value="25"
             Classes="@_classes" />

@code {
    private RenderFragment _thermometer =
        @<LumexIcon Icon="@Icons.Rounded.Thermometer"
                    Size="@new("20")"
                    Class="text-secondary-400 shrink-0">
        </LumexIcon>;

    private InputFieldSlots _classes = new()
    {
        Label = "text-default-700",
        InnerWrapper = "bg-transparent",
        InputWrapper = ElementClass.Empty()
            .Add( "shadow-xl" )
            .Add( "bg-default-200/50" )
            .Add( "backdrop-blur-xl" )
            .Add( "backdrop-saturate-200" )
            .Add( "hover:bg-default-200/70" )
            .Add( "group-data-[focus=true]:bg-default-200/85" )
            .ToString(),
        Input = ElementClass.Empty()
            .Add( "bg-transparent" )
            .Add( "text-default-900" )
            .Add( "placeholder:text-default-500" )
            .ToString()
    };
}