focused

.focused(props: { isFocused: boolean, setIsFocused: (value: boolean) => void }): Component;

function Component() {
    const [isFieldFocused, setIsFieldFocused] = useState(false);
    
    return VStack([
        TextField({
            placeholder: "Enter text",
            text: textValue,
            setText: setTextValue
        })
        .focused({
            isFocused: isFieldFocused,
            setIsFocused: setIsFieldFocused
        }),
        
        Button("Focus Field", () => {
            setIsFieldFocused(true);
        })
    ]);
}

function Form() {
    const [usernameIsFocused, setUsernameIsFocused] = useState(false);
    const [passwordIsFocused, setPasswordIsFocused] = useState(false);
    
    return VStack([
        TextField({
            placeholder: "Username",
            text: username,
            setText: setUsername
        })
        .focused({
            isFocused: usernameIsFocused,
            setIsFocused: setUsernameIsFocused
        }),
        
        SecureField({
            placeholder: "Password",
            text: password,
            setText: setPassword
        })
        .focused({
            isFocused: passwordIsFocused,
            setIsFocused: setPasswordIsFocused
        }),
        
        HStack([
            Button("Focus Username", () => {
                setUsernameIsFocused(true);
                setPasswordIsFocused(false);
            }),
            Button("Focus Password", () => {
                setUsernameIsFocused(false);
                setPasswordIsFocused(true);
            })
        ])
    ]);
}

function ValidatedForm() {
    const [email, setEmail] = useState("");
    const [isEmailFocused, setIsEmailFocused] = useState(false);
    const [showError, setShowError] = useState(false);
    
    const validateEmail = () => {
        const isValid = email.includes("@");
        setShowError(!isValid);
        if (!isValid) {
            setIsEmailFocused(true);
        }
    };
    
    return VStack([
        TextField({
            placeholder: "Enter email",
            text: email,
            setText: setEmail
        })
        .focused({
            isFocused: isEmailFocused,
            setIsFocused: setIsEmailFocused
        })
        .border(showError ? Color("red") : Color("gray")),
        
        if (showError) {
            Text("Please enter a valid email")
                .foregroundStyle(Color("red"));
        },
        
        Button("Validate", validateEmail)
    ]);
}