Temperature Controller Interface

Build a React component that provides a temperature control interface using a numeric input field with validation. The component should allow users to set a target temperature with proper constraints and provide programmatic controls to adjust the temperature.

Requirements

Create a TemperatureController component that:

1. Displays a numeric input for temperature with increment/decrement buttons
2. Enforces a minimum temperature of 15°C and maximum of 30°C
3. Uses 0.5°C step increments
4. Displays values with exactly 1 decimal place
5. Provides three preset buttons that programmatically set the temperature to:
   • "Cool" (18°C)
   • "Comfort" (22°C)
   • "Warm" (26°C)
6. Shows the current temperature value above the input field
7. Validates all programmatic updates against the min/max constraints

The component must maintain the temperature state internally and update it both when users interact with the numeric input and when preset buttons are clicked.

Test Cases

• When the component mounts, the initial temperature is 22°C @test
• Clicking the "Cool" preset button sets the temperature to 18°C @test
• Clicking the "Warm" preset button sets the temperature to 26°C @test
• The temperature display shows the current value with 1 decimal place @test

Implementation

@generates

API

import React from 'react';

/**
 * Temperature controller component with preset buttons and numeric input
 * @returns A React component with temperature controls
 */
export default function TemperatureController(): React.ReactElement;

Dependencies { .dependencies }

@rc-component/input-number { .dependency }

Provides a React numeric input component with validation and step controls.

@satisfied-by